Echarts 4 - SVG (#420)

* ✨ new branch for echarts 3.8.5

* 🚜 update jupyter-echarts to 1.4.0

* 🚜 update jupyter-echarts

* 💄 name the release candidate

* 💚 pass unit test

* 🎨 update to use echarts 4.0.2

* ✨ support svg renderer, related to #337

* 🐛 fix the missing registry.json and update jupyter rendering

* 🐛 force 3d charts to use canvas renderer. fix #343

* ✨ upgrade jupyter-echarts-pypkg version

* 📚 create release diary

docs/zh-cn/release-note/v040.md

@@ -0,0 +1,5 @@
+# pyecharts V0.4.0 发布日志
+
+> pyecharts V0.4.0 发布，这是一个重大更新的版本。
+
+## 1 支持 SVG

pyecharts/_version.py

@@ -1,2 +1,2 @@
-__version__ = '0.3.3'
+__version__ = '0.4.0.dev1'
 __author__ = 'chenjiandongx'

pyecharts/base.py

@@ -19,6 +19,7 @@ class Base(object):
     def __init__(self,
                  width=800,
                  height=400,
+                 renderer=constants.CANVAS_RENDERER,
                  page_title=constants.PAGE_TITLE):
         """
 
@@ -35,6 +36,7 @@ class Base(object):
         self._js_dependencies = set()
         self._chart_id = uuid.uuid4().hex
         self.width, self.height = width, height
+        self.renderer = renderer
         self._page_title = page_title
         self._js_dependencies = {'echarts'}
 
@@ -81,6 +83,7 @@ class Base(object):
         html = engine.render('chart_component.html',
                              my_option=my_option,
                              chart_id=self._chart_id,
+                             renderer=self.renderer,
                              my_width=self.width,
                              my_height=self.height)
         return Markup(html)
@@ -165,6 +168,7 @@ class Base(object):
         return engine.render_notebook(
             "notebook_chart_component.html",
             my_option=my_option,
+            renderer=self.renderer,
             chart_id=self._chart_id)
 
     def _add_chinese_map(self, map_name_in_chinese):

pyecharts/chart.py

@@ -21,7 +21,8 @@ class Chart(Base):
                  title_text_size=18,
                  subtitle_text_size=12,
                  background_color="#fff",
-                 page_title=constants.PAGE_TITLE):
+                 page_title=constants.PAGE_TITLE,
+                 renderer=constants.CANVAS_RENDERER):
         """
 
         :param title:
@@ -53,6 +54,7 @@ class Chart(Base):
         """
         super(Chart, self).__init__(
             width=width, height=height,
+            renderer=renderer,
             page_title=page_title
         )
         self._colorlst = [

pyecharts/charts/bar3D.py

@@ -2,6 +2,7 @@
 
 from pyecharts.chart import Chart
 from pyecharts.option import get_all_options
+import pyecharts.constants as constants
 
 
 class Bar3D(Chart):
@@ -10,6 +11,7 @@ class Bar3D(Chart):
     """
 
     def __init__(self, title="", subtitle="", **kwargs):
+        kwargs['renderer'] = constants.CANVAS_RENDERER
         super(Bar3D, self).__init__(title, subtitle, **kwargs)
         self._js_dependencies.add('echartsgl')
 

pyecharts/charts/line3D.py

@@ -2,6 +2,7 @@
 
 from pyecharts.chart import Chart
 from pyecharts.option import get_all_options
+import pyecharts.constants as constants
 
 
 class Line3D(Chart):
@@ -10,6 +11,7 @@ class Line3D(Chart):
     """
 
     def __init__(self, title="", subtitle="", **kwargs):
+        kwargs['renderer'] = constants.CANVAS_RENDERER
         super(Line3D, self).__init__(title, subtitle, **kwargs)
         self._js_dependencies.add('echartsgl')
 

pyecharts/charts/scatter3D.py

@@ -2,6 +2,7 @@
 
 from pyecharts.chart import Chart
 from pyecharts.option import get_all_options
+import pyecharts.constants as constants
 
 
 class Scatter3D(Chart):
@@ -10,6 +11,7 @@ class Scatter3D(Chart):
     """
 
     def __init__(self, title="", subtitle="", **kwargs):
+        kwargs['renderer'] = constants.CANVAS_RENDERER
         super(Scatter3D, self).__init__(title, subtitle, **kwargs)
         self._js_dependencies.add('echartsgl')
 

pyecharts/constants.py

@@ -1,7 +1,8 @@
 # coding=utf-8
 from __future__ import unicode_literals
 
-
+CANVAS_RENDERER = "canvas"
+SVG_RENDERER = "svg"
 PAGE_TITLE = "Echarts"
 
 SYMBOL = {

pyecharts/engine.py

@@ -10,7 +10,7 @@ LINK_SCRIPT_FORMATTER = '<script type="text/javascript" src="{}"></script>'
 EMBED_SCRIPT_FORMATTER = '<script type="text/javascript">\n{}\n</script>'
 CHART_DIV_FORMATTER = '<div id="{chart_id}" style="width:{width};height:{height};"></div>'  # flake8: noqa
 CHART_CONFIG_FORMATTER = """
-var myChart_{chart_id} = echarts.init(document.getElementById('{chart_id}'));
+var myChart_{chart_id} = echarts.init(document.getElementById('{chart_id}', null, {{renderer: '{renderer}'}}));
 var option_{chart_id} = {options};
 myChart_{chart_id}.setOption(option_{chart_id});
 """
@@ -80,6 +80,7 @@ def generate_js_content(*charts):
     for chart in charts:
         js_content = CHART_CONFIG_FORMATTER.format(
             chart_id=chart.chart_id,
+            renderer=chart.renderer,
             options=utils.json_dumps(chart.options, indent=4)
         )
         contents.append(js_content)

pyecharts/templates/chart_component.html

@@ -1,6 +1,6 @@
 <div id="{{ chart_id }}" style="width:{{ my_width }}px;height:{{ my_height }}px;"></div>
 <script type="text/javascript">
-    var myChart_{{ chart_id }} = echarts.init(document.getElementById('{{ chart_id }}'));
+    var myChart_{{ chart_id }} = echarts.init(document.getElementById('{{ chart_id }}'), null, {renderer: '{{renderer}}'});
     var option_{{ chart_id }} = {{ my_option }};
     myChart_{{ chart_id }}.setOption(option_{{ chart_id }});
 </script>

pyecharts/templates/notebook_chart_component.html

@@ -1,3 +1,3 @@
-var myChart = ec.init(document.getElementById('{{ chart_id }}'));
+var myChart = ec.init(document.getElementById('{{ chart_id }}'), null, {renderer: '{{renderer}}'});
 var option =  {{ my_option }};
 myChart.setOption(option);

requirements.txt

@@ -2,4 +2,4 @@ jinja2>=2.8
 future
 pillow
 lml>=0.0.2
-jupyter-echarts-pypkg>=0.0.11
+jupyter-echarts-pypkg>=0.1.0

setup.py

@@ -12,7 +12,7 @@ __license__ = 'MIT'
 __requires__ = ['pillow',
                 'jinja2',
                 'future',
-                'jupyter-echarts-pypkg==0.0.11',
+                'jupyter-echarts-pypkg==0.1.0',
                 'lml==0.0.2']
 
 __keywords__ = ['Echarts',

test/test_bar3D.py

@@ -3,6 +3,7 @@
 from __future__ import unicode_literals
 
 from pyecharts import Bar3D
+from nose.tools import eq_
 from test.constants import RANGE_COLOR, X_TIME, Y_WEEK
 
 
@@ -73,3 +74,8 @@ def test_bar3d_rotate_automatically_speedup():
               grid3d_depth=80, is_grid3d_rotate=True,
               grid3d_rotate_speed=180)
     bar3d.render()
+
+
+def test_bar3d_must_use_canvas():
+    bar3d = Bar3D("3D 柱状图示例", width=1200, height=600)
+    eq_(bar3d.renderer, 'canvas')

test/test_base.py

@@ -17,15 +17,39 @@ from test.utils import get_default_rendering_file_content
 TITLE = "柱状图数据堆叠示例"
 
 
-def create_a_bar(title):
+def create_a_bar(title, renderer='canvas'):
     v1 = [5, 20, 36, 10, 75, 90]
     v2 = [10, 25, 8, 60, 20, 80]
-    bar = Bar(title)
+    bar = Bar(title, renderer=renderer)
     bar.add("商家A", CLOTHES, v1, is_stack=True)
     bar.add("商家B", CLOTHES, v2, is_stack=True)
     return bar
 
 
+def test_svg_option():
+    bar = create_a_bar(TITLE, renderer='svg')
+    html = bar.render_embed()
+    assert "{renderer: 'svg'}" in html
+
+
+def test_svg_option_in_note_book():
+    bar = create_a_bar(TITLE, renderer='svg')
+    html = bar._repr_html_()
+    assert "{renderer: 'svg'}" in html
+
+
+def test_canvas_option():
+    bar = create_a_bar(TITLE)
+    html = bar.render_embed()
+    assert "{renderer: 'canvas'}" in html
+
+
+def test_canvas_option_in_notebook():
+    bar = create_a_bar(TITLE)
+    html = bar._repr_html_()
+    assert "{renderer: 'canvas'}" in html
+
+
 def test_embed_option():
     bar = create_a_bar(TITLE)
     html = bar.render_embed()

test/test_line3D.py

@@ -6,16 +6,20 @@ import math
 
 from test.constants import RANGE_COLOR
 from pyecharts import Line3D
+from nose.tools import eq_
 
 
-def test_line3d_default():
-    _data = []
+def create_line3d_data():
     for t in range(0, 25000):
         _t = t / 1000
         x = (1 + 0.25 * math.cos(75 * _t)) * math.cos(_t)
         y = (1 + 0.25 * math.cos(75 * _t)) * math.sin(_t)
         z = _t + 2.0 * math.sin(75 * _t)
-        _data.append([x, y, z])
+        yield [x, y, z]
+
+
+def test_line3d_default():
+    _data = list(create_line3d_data())
     line3d = Line3D("3D 折线图示例", width=1200, height=600)
     line3d.add("", _data, is_visualmap=True, visual_range_color=RANGE_COLOR,
                visual_range=[0, 30], grid3d_rotate_sensitivity=5)
@@ -23,15 +27,14 @@ def test_line3d_default():
 
 
 def test_line3d_rotate_automatically_speedup():
-    _data = []
-    for t in range(0, 25000):
-        _t = t / 1000
-        x = (1 + 0.25 * math.cos(75 * _t)) * math.cos(_t)
-        y = (1 + 0.25 * math.cos(75 * _t)) * math.sin(_t)
-        z = _t + 2.0 * math.sin(75 * _t)
-        _data.append([x, y, z])
+    _data = list(create_line3d_data())
     line3d = Line3D("3D 折线图示例", width=1200, height=600)
     line3d.add("", _data, is_visualmap=True, visual_range_color=RANGE_COLOR,
                visual_range=[0, 30], is_grid3d_rotate=True,
                grid3d_rotate_speed=180)
     line3d.render()
+
+
+def test_line3d_must_use_canvas():
+    line3d = Line3D("3D 折线图示例", width=1200, height=600)
+    eq_(line3d.renderer, 'canvas')

test/test_scatter3D.py

@@ -4,6 +4,7 @@ from __future__ import unicode_literals
 
 from pyecharts import Scatter3D
 from test.constants import RANGE_COLOR
+from nose.tools import eq_
 
 
 def test_scatter3d():
@@ -17,3 +18,8 @@ def test_scatter3d():
     scatter3d.add("", data, is_visualmap=True,
                   visual_range_color=RANGE_COLOR)
     scatter3d.render()
+
+
+def test_scatter3d_must_use_canvas():
+    scatter3d = Scatter3D("3D 散点图示例", width=1200, height=600)
+    eq_(scatter3d.renderer, 'canvas')