Question to iobroker.echarts "Developer manual"

Question

Question to iobroker.echarts "Developer manual"

uelpenich opened this issue a year ago · 4 comments

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

how to become a developer?
what is the complete path to iobroker.echarts/src-chart? Is it /opt/iobroker/node_modules/iobroker.echarts/src-chart ?
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?

Answer 1 · 2023-03-19T21:36:56.000Z

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

Answer 2 · 2023-03-20T09:47:51.000Z

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?

Answer 3 · 2023-03-20T13:07:47.000Z

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?

Answer 4 · 2023-03-22T14:55:44.000Z

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.