Added support for 3D graphing for echarts. (#3195)

* update script to support import of echarts-gl

* added echarts-gl library

* modify element to import echarts-gl library

* added an example of 3D echarts graphing

* code review

---------

Co-authored-by: Falko Schindler <[email protected]>

DEPENDENCIES.md

@@ -8,6 +8,7 @@
 - aggrid: 30.2.0 ([MIT](https://opensource.org/licenses/MIT))
 - codemirror: 6.0.1 ([MIT](https://opensource.org/licenses/MIT))
 - echarts: 5.4.3 ([Apache-2.0](https://opensource.org/licenses/Apache-2.0))
+- echarts-gl: 2.0.9 ([BSD-3-Clause](https://opensource.org/licenses/BSD-3-Clause))
 - leaflet: 1.9.4 ([BSD-2-Clause](https://opensource.org/licenses/BSD-2-Clause))
 - leaflet-draw: 1.0.4 ([MIT](https://opensource.org/licenses/MIT))
 - mermaid: 10.5.1 ([MIT](https://opensource.org/licenses/MIT))

nicegui/elements/echart.py

@@ -17,9 +17,9 @@
  pass
 
 
-class EChart(Element, component='echart.js', libraries=['lib/echarts/echarts.min.js']):
+class EChart(Element, component='echart.js', libraries=['lib/echarts/echarts.min.js'], extra_libraries=['lib/echarts-gl/echarts-gl.min.js']):
 
- def __init__(self, options: Dict, on_point_click: Optional[Callable] = None) -> None:
+ def __init__(self, options: Dict, on_point_click: Optional[Callable] = None, *, enable_3d: bool = False) -> None:
  """Apache EChart
 
  An element to create a chart using `ECharts <https://echarts.apache.org/>`_.
@@ -28,10 +28,15 @@ def __init__(self, options: Dict, on_point_click: Optional[Callable] = None) ->
 
  :param options: dictionary of EChart options
  :param on_click_point: callback that is invoked when a point is clicked
+ :param enable_3d: enforce importing the echarts-gl library
  """
  super().__init__()
  self._props['options'] = options
  self._classes.append('nicegui-echart')
+ for key in options:
+ if '3D' in key or enable_3d:
+ self.libraries.extend(library for library in self.extra_libraries if library.name == 'echarts-gl')
+ break
 
  if on_point_click:
  self.on_point_click(on_point_click)

npm.json

@@ -52,6 +52,13 @@
  "package/dist/": ""
  }
  },
+ "echarts-gl": {
+ "destination": "nicegui/elements/lib",
+ "keep": ["package/dist/echarts-gl\\.min\\.js", "package/dist/echarts-gl\\.js\\.map"],
+ "rename": {
+ "package/dist/": ""
+ }
+ },
  "leaflet": {
  "destination": "nicegui/elements/lib/leaflet",
  "keep": [

npm.py

@@ -56,10 +56,12 @@ def download_buffered(url: str) -> Path:
 DEPENDENCIES = (root_path / 'DEPENDENCIES.md').open('w')
 DEPENDENCIES.write('# Included Web Dependencies\n\n')
 KNOWN_LICENSES = {
+ 'UNKNOWN': 'UNKNOWN',
  'MIT': 'https://opensource.org/licenses/MIT',
  'ISC': 'https://opensource.org/licenses/ISC',
  'Apache-2.0': 'https://opensource.org/licenses/Apache-2.0',
  'BSD-2-Clause': 'https://opensource.org/licenses/BSD-2-Clause',
+ 'BSD-3-Clause': 'https://opensource.org/licenses/BSD-3-Clause',
 }
 
 # Create a hidden folder to work in.
@@ -78,7 +80,11 @@ def download_buffered(url: str) -> Path:
  npm_data = json.loads(download_buffered(f'https://registry.npmjs.org/{package_name}').read_text())
  npm_version = dependency.get('version') or dependency.get('version', npm_data['dist-tags']['latest'])
  npm_tarball = npm_data['versions'][npm_version]['dist']['tarball']
- license_ = npm_data['versions'][npm_version]['license']
+ license_ = 'UNKNOWN'
+ if 'license' in npm_data['versions'][npm_version]:
+ license_ = npm_data['versions'][npm_version]['license']
+ elif package_name == 'echarts-gl':
+ license_ = 'BSD-3-Clause'
  print(f'{key}: {npm_version} - {npm_tarball} ({license_})')
  DEPENDENCIES.write(f'- {key}: {npm_version} ([{license_}]({KNOWN_LICENSES.get(license_, license_)}))\n')
 

website/documentation/content/echart_documentation.py

@@ -117,4 +117,21 @@ def events_demo() -> None:
  label = ui.label()
 
 
+@doc.demo('3D Graphing', '''
+ Charts will automatically be 3D enabled if the initial options contain the string "3D".
+ If not, set the `enable_3d` argument to `True`.
+''')
+def echarts_gl_demo() -> None:
+ ui.echart({
+ 'xAxis3D': {},
+ 'yAxis3D': {},
+ 'zAxis3D': {},
+ 'grid3D': {},
+ 'series': [{
+ 'type': 'line3D',
+ 'data': [[1, 1, 1], [3, 3, 3]],
+ }],
+ })
+
+
 doc.reference(ui.echart)