Question to iobroker.echarts "Developer manual"

[uelpenich]

Question 1

For non-developer this link does not work!

You can debug view charts locally with:

cd iobroker.echarts/src-chart
npm run start
Browser: http://localhost:8081/adapter/echarts/tab.html?dev=true

1. how to become a developer?
2. what is the complete path to iobroker.echarts/src-chart? Is it /opt/iobroker/node_modules/iobroker.echarts/src-chart ?
3. what is the content of src-chart? Is it https://github.com/ioBroker/ioBroker.echarts/tree/master/src-chart ?

My try ended with (on raspberry pi user pi)

Question 2 How to run iobroker.echarts with iobroker.dev-server?

[Apollon77]

Did you executed "npm i -force" in the src-chart directory?

[uelpenich]

The execution of "npm i -force" delivers a lot of warnungs, depreciated packages and 6 high severity vulnerabilities.:

pi@ioBroker:~ $ cd /opt/iobroker/node_modules/iobroker.echarts/src-chart pi@ioBroker:/opt/iobroker/node_modules/iobroker.echarts/src-chart $ npm i -force npm WARN using --force Recommended protections disabled. npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @material-ui/core@4.12.4 npm WARN Found: react@18.2.0 npm WARN node_modules/react npm WARN peer react@"^16.8.0 || ^17.0.0" from @material-ui/styles@4.11.5 npm WARN node_modules/@material-ui/core/node_modules/@material-ui/styles npm WARN @material-ui/styles@"^4.11.5" from @material-ui/core@4.12.4 npm WARN node_modules/@material-ui/core npm WARN npm WARN Could not resolve dependency: npm WARN peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4 npm WARN node_modules/@material-ui/core npm WARN @material-ui/core@"^4.12.4" from the root project npm WARN 1 more (@material-ui/icons) npm WARN npm WARN Conflicting peer dependency: react@17.0.2 npm WARN node_modules/react npm WARN peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4 npm WARN node_modules/@material-ui/core npm WARN @material-ui/core@"^4.12.4" from the root project npm WARN 1 more (@material-ui/icons) npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @material-ui/core@4.12.4 npm WARN Found: react-dom@18.2.0 npm WARN node_modules/react-dom npm WARN peer react-dom@"^16.8.0 || ^17.0.0" from @material-ui/styles@4.11.5 npm WARN node_modules/@material-ui/core/node_modules/@material-ui/styles npm WARN @material-ui/styles@"^4.11.5" from @material-ui/core@4.12.4 npm WARN node_modules/@material-ui/core npm WARN npm WARN Could not resolve dependency: npm WARN peer react-dom@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4 npm WARN node_modules/@material-ui/core npm WARN @material-ui/core@"^4.12.4" from the root project npm WARN 1 more (@material-ui/icons) npm WARN npm WARN Conflicting peer dependency: react-dom@17.0.2 npm WARN node_modules/react-dom npm WARN peer react-dom@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4 npm WARN node_modules/@material-ui/core npm WARN @material-ui/core@"^4.12.4" from the root project npm WARN 1 more (@material-ui/icons) npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @material-ui/icons@4.11.3 npm WARN Found: react@18.2.0 npm WARN node_modules/react npm WARN peer react@"^16.8.0 || ^17.0.0" from @material-ui/styles@4.11.5 npm WARN node_modules/@material-ui/core/node_modules/@material-ui/styles npm WARN @material-ui/styles@"^4.11.5" from @material-ui/core@4.12.4 npm WARN node_modules/@material-ui/core npm WARN npm WARN Could not resolve dependency: npm WARN peer react@"^16.8.0 || ^17.0.0" from @material-ui/icons@4.11.3 npm WARN node_modules/@material-ui/icons npm WARN @material-ui/icons@"^4.11.3" from the root project npm WARN npm WARN Conflicting peer dependency: react@17.0.2 npm WARN node_modules/react npm WARN peer react@"^16.8.0 || ^17.0.0" from @material-ui/icons@4.11.3 npm WARN node_modules/@material-ui/icons npm WARN @material-ui/icons@"^4.11.3" from the root project npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @material-ui/icons@4.11.3 npm WARN Found: react-dom@18.2.0 npm WARN node_modules/react-dom npm WARN peer react-dom@"^16.8.0 || ^17.0.0" from @material-ui/styles@4.11.5 npm WARN node_modules/@material-ui/core/node_modules/@material-ui/styles npm WARN @material-ui/styles@"^4.11.5" from @material-ui/core@4.12.4 npm WARN node_modules/@material-ui/core npm WARN npm WARN Could not resolve dependency: npm WARN peer react-dom@"^16.8.0 || ^17.0.0" from @material-ui/icons@4.11.3 npm WARN node_modules/@material-ui/icons npm WARN @material-ui/icons@"^4.11.3" from the root project npm WARN npm WARN Conflicting peer dependency: react-dom@17.0.2 npm WARN node_modules/react-dom npm WARN peer react-dom@"^16.8.0 || ^17.0.0" from @material-ui/icons@4.11.3 npm WARN node_modules/@material-ui/icons npm WARN @material-ui/icons@"^4.11.3" from the root project npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @mui/styles@5.11.13 npm WARN Found: react@18.2.0 npm WARN node_modules/react npm WARN peer react@"^16.8.0 || ^17.0.0" from @material-ui/styles@4.11.5 npm WARN node_modules/@material-ui/core/node_modules/@material-ui/styles npm WARN @material-ui/styles@"^4.11.5" from @material-ui/core@4.12.4 npm WARN node_modules/@material-ui/core npm WARN npm WARN Could not resolve dependency: npm WARN peer react@"^17.0.0" from @mui/styles@5.11.13 npm WARN node_modules/@mui/styles npm WARN @mui/styles@"^5.11.13" from the root project npm WARN 1 more (@iobroker/adapter-react-v5) npm WARN npm WARN Conflicting peer dependency: react@17.0.2 npm WARN node_modules/react npm WARN peer react@"^17.0.0" from @mui/styles@5.11.13 npm WARN node_modules/@mui/styles npm WARN @mui/styles@"^5.11.13" from the root project npm WARN 1 more (@iobroker/adapter-react-v5) npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin. npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates. npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. npm WARN deprecated @material-ui/styles@4.11.5: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5. npm WARN deprecated @material-ui/core@4.12.4: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.

added 1555 packages, and audited 1556 packages in 3m

247 packages are looking for funding run npm fund for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run: npm audit fix --force

Run npm audit for details. pi@ioBroker:/opt/iobroker/node_modules/iobroker.echarts/src-chart $

It compiles successfully, but ends up with some heap problems.

Compiled successfully!

You can now view echarts.index in the browser.

Local: http://localhost:3000 On Your Network: http://192.168.39.9:3000

Note that the development build is not optimized. To create a production build, use npm run build.

webpack compiled successfully

<--- Last few GCs --->

[15753:0x49cbd80] 374764 ms: Mark-sweep 903.6 (981.8) -> 896.1 (982.1) MB, 2110.5 / 0. 2 ms (average mu = 0.350, current mu = 0.168) allocation failure scavenge might not suc ceed [15753:0x49cbd80] 377328 ms: Mark-sweep 905.1 (983.1) -> 897.6 (983.8) MB, 2251.0 / 0. 1 ms (average mu = 0.237, current mu = 0.122) allocation failure scavenge might not suc ceed

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory pi@ioBroker:/opt/iobroker/node_modules/iobroker.echarts/src-chart $

I am not able to view echarts.index, it only shows for some seconds the initial logo and the "copy option to clipboard". This is the content of the clipboard:

{ "theme": "roma", "backgroundColor": "transparent", "animation": true, "grid": { "backgroundColor": "transparent", "show": false, "left": 31, "top": 8, "right": 18, "bottom": 40 }, "xAxis": [ { "type": "time", "splitLine": { "show": true }, "position": "bottom", "min": null, "max": null, "axisTick": { "alignWithLabel": true }, "axisLabel": { "show": true, "fontSize": 12, "rich": { "a": { "fontWeight": "bold" }, "b": { "opacity": 0 } } } } ], "yAxis": [ { "type": "value", "position": "left", "splitLine": { "show": true }, "axisLabel": { "show": true, "fontSize": 12 }, "axisTick": { "alignWithLabel": true } } ], "series": [ { "clip": true, "xAxisIndex": 0, "silent": true, "yAxisIndex": 0, "type": "line", "animation": false, "smooth": false, "data": [], "itemStyle": { "color": "#E01F54" }, "symbol": "circle", "emphasis": { "scale": false, "focus": "none", "blurScope": "none", "lineStyle": { "width": 1, "shadowBlur": 0, "shadowOffsetY": 0, "shadowColor": "#E01F54", "type": "solid" } }, "lineStyle": { "width": 1, "shadowBlur": 0, "shadowOffsetY": 0, "shadowColor": "#E01F54", "type": "solid" } } ], "useCanvas": false }

Question: where does in this development environment the chart definions come from?

[uelpenich]

I've got it: I have to add the name of the chart preset. Example:

http://192.168.39.9:3000/adapter/echarts/tab.html?dev=true#preset=echarts.0.Erdgeschoss.Heizung%20Wohn%20/%20Esszimmer

The content of the "copy option to clipboard" - button delivers the output of the iobroker.echarts adapter which is handed over to the https://echarts.apache.org charts software.

Question: how is it possible to send a the modified clipboard content to the https://echarts.apache.org charts software?

[uelpenich]

Edit 22.03.2023 20:33 You can check the chart on the https://echarts.apache.org/examples/en/editor.html?c=multiple-y-axis demo page: In the edit code window delete all the demo content between option = and ; inclusive the starting and ending curly brackets

and paste the content of your chart from the clipboard. You may change every thing you like and see how it works.

@Apollon77 : since I am not familiar with github please feel free and add the necessary information to the "Developer manual" part of the readme. Thanks.