Start adding polar chart

ioBroker · Feb 1, 2024 · 12fc552 · 12fc552
1 parent a00261c
commit 12fc552
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -19,21 +19,21 @@
   "optionalDependencies": {
     "canvas": "^2.11.2",
     "echarts": "^5.4.3",
-    "jsdom": "^22.1.0"
+    "jsdom": "^24.0.0"
   },
   "dependencies": {
-    "moment": "^2.29.4"
+    "moment": "^2.30.1"
   },
   "devDependencies": {
     "@alcalzone/release-script": "^3.7.0",
     "@alcalzone/release-script-plugin-iobroker": "^3.7.0",
     "@alcalzone/release-script-plugin-license": "^3.7.0",
-    "@iobroker/vis-2-widgets-react-dev": "^1.0.1",
+    "@iobroker/vis-2-widgets-react-dev": "^1.0.5",
     "@iobroker/testing": "^4.1.0",
     "@types/gulp": "^4.0.17",
-    "axios": "^1.6.2",
-    "chai": "^4.3.10",
-    "eslint": "^8.54.0",
+    "axios": "^1.6.7",
+    "chai": "^5.0.3",
+    "eslint": "^8.56.0",
     "gulp": "^4.0.2",
     "gulp-rename": "^2.0.0",
     "mocha": "^10.2.0"

diff --git a/src-chart/package.json b/src-chart/package.json
@@ -3,28 +3,28 @@
   "version": "1.7.2",
   "private": true,
   "dependencies": {
-    "@iobroker/adapter-react-v5": "^4.7.6",
-    "@mui/material": "5.14.19",
-    "@mui/styles": "5.14.19",
-    "@sentry/browser": "^7.81.0",
-    "@sentry/integrations": "^7.81.0",
+    "@iobroker/adapter-react-v5": "^4.9.5",
+    "@mui/material": "5.14.14",
+    "@mui/styles": "5.14.14",
+    "@sentry/browser": "^7.99.0",
+    "@sentry/integrations": "^7.99.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.54.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-eqeqeq-fix": "^1.0.3",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-react": "^7.33.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.5.0",
-    "react-icons": "^4.12.0",
+    "react-i18next": "^14.0.1",
+    "react-icons": "^5.0.1",
     "react-scripts": "^5.0.1",
     "echarts": "^5.4.3",
     "crypto-js": "^4.2.0",
     "echarts-for-react": "^3.0.2",
-    "moment": "^2.29.4"
+    "moment": "^2.30.1"
   },
   "homepage": ".",
   "_proxy": "http://localhost:8081",
@@ -44,4 +44,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}
diff --git a/src-preview/package.json b/src-preview/package.json
@@ -3,24 +3,24 @@
   "version": "1.7.2",
   "private": true,
   "dependencies": {
-    "@iobroker/adapter-react-v5": "^4.7.3",
+    "@iobroker/adapter-react-v5": "^4.9.5",
     "@mui/material": "5.14.14",
     "@mui/styles": "5.14.14",
-    "@mui/icons-material": "^5.14.18",
-    "@sentry/browser": "^7.81.0",
-    "@sentry/integrations": "^7.81.0",
+    "@mui/icons-material": "^5.15.7",
+    "@sentry/browser": "^7.99.0",
+    "@sentry/integrations": "^7.99.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.54.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-eqeqeq-fix": "^1.0.3",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-react": "^7.33.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "react-icons": "^4.12.0"
+    "react-icons": "^5.0.1"
   },
   "homepage": ".",
   "proxy": "http://localhost:8081",
@@ -40,4 +40,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}
diff --git a/src-widgets/package.json b/src-widgets/package.json
@@ -4,11 +4,11 @@
     "version": "1.7.2",
     "dependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@emotion/react": "^11.11.1",
+        "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
-        "@iobroker/adapter-react-v5": "^4.7.3",
-        "@iobroker/vis-2-widgets-react-dev": "^1.0.1",
-        "@mui/icons-material": "^5.14.18",
+        "@iobroker/adapter-react-v5": "^4.9.5",
+        "@iobroker/vis-2-widgets-react-dev": "^1.0.5",
+        "@mui/icons-material": "^5.15.7",
         "@mui/material": "5.14.14",
         "@mui/styles": "5.14.14",
         "node-sass": "^9.0.0",
@@ -19,15 +19,15 @@
         "@craco/craco": "^7.1.0",
         "craco-esbuild": "^0.5.2",
         "craco-module-federation": "^1.1.0",
-        "eslint": "^8.54.0",
+        "eslint": "^8.56.0",
         "eslint-config-airbnb": "^19.0.4",
-        "eslint-plugin-import": "^2.29.0",
+        "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jsx-a11y": "^6.8.0",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-eqeqeq-fix": "^1.0.3",
         "eslint-plugin-only-warn": "^1.1.0",
-        "sass": "^1.69.5"
+        "sass": "^1.70.0"
     },
     "scripts": {
         "start": "set PORT=4173 && craco start",
@@ -48,4 +48,4 @@
         "not ie <= 11",
         "not op_mini all"
     ]
-}
+}
diff --git a/src/package.json b/src/package.json
@@ -3,19 +3,19 @@
   "version": "1.7.2",
   "private": true,
   "dependencies": {
-    "@iobroker/adapter-react-v5": "^4.7.6",
-    "@mui/icons-material": "^5.14.19",
-    "@mui/material": "5.14.19",
-    "@mui/styles": "5.14.19",
-    "@mui/lab": "^5.0.0-alpha.153",
-    "@sentry/browser": "^7.81.0",
-    "@sentry/integrations": "^7.81.0",
+    "@iobroker/adapter-react-v5": "^4.9.5",
+    "@mui/icons-material": "^5.15.7",
+    "@mui/material": "5.14.14",
+    "@mui/styles": "5.14.14",
+    "@mui/lab": "^5.0.0-alpha.163",
+    "@sentry/browser": "^7.99.0",
+    "@sentry/integrations": "^7.99.0",
     "babel-eslint": "^10.1.0",
-    "moment": "^2.29.4",
-    "eslint": "^8.54.0",
+    "moment": "^2.30.1",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-eqeqeq-fix": "^1.0.3",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-react": "^7.33.2",
@@ -27,8 +27,8 @@
     "react": "^18.2.0",
     "recompose": "^0.30.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.5.0",
-    "react-icons": "^4.12.0",
+    "react-i18next": "^14.0.1",
+    "react-icons": "^5.0.1",
     "react-scripts": "^5.0.1",
     "react-splitter-layout": "^4.0.0"
   },
@@ -53,4 +53,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}
diff --git a/src/src/Components/ChartSettings.js b/src/src/Components/ChartSettings.js
@@ -146,6 +146,7 @@ const CHART_TYPES = {
     auto: 'Auto (Line or Steps)',
     line: 'Line',
     bar: 'Bar',
+    polar: 'Polar',
     scatterplot: 'Scatter plot',
     steps: 'Steps',
     stepsStart: 'Steps on start',

diff --git a/src/src/Components/Line.js b/src/src/Components/Line.js
@@ -365,7 +365,7 @@ class LineComponent extends React.Component {
             idWidth = `calc(100% - ${WIDTHS.buttons + WIDTHS.instance + padding * 2}px)`;
         }
 
-        const hasBar = this.props.presetData.lines.find(line => line.chartType === 'bar');
+        const hasBarOrPolar = this.props.presetData.lines.find(line => line.chartType === 'bar' || line.chartType === 'polar');
         const aggregateTypes = {
             minmax: 'minmax',
             average: 'average',
@@ -377,7 +377,7 @@ class LineComponent extends React.Component {
             integral: 'integral',
         };
 
-        if (hasBar) {
+        if (hasBarOrPolar) {
             delete aggregateTypes.minmax;
         }
 
@@ -439,6 +439,7 @@ class LineComponent extends React.Component {
                     auto: 'Auto',
                     line: 'Line',
                     bar: 'Bar',
+                    polar: 'Polar',
                     scatterplot: 'Scatter plot',
                     steps: 'Steps',
                     stepsStart: 'Steps on start',
@@ -474,7 +475,7 @@ class LineComponent extends React.Component {
             >
                 <IconDelete />
             </IconButton>
-            {this.props.line.chartType !== 'scatterplot' && this.props.line.chartType !== 'bar' ? <IconButton
+            {this.props.line.chartType !== 'scatterplot' && this.props.line.chartType !== 'bar' && this.props.line.chartType !== 'polar' ? <IconButton
                 className={this.props.classes.editButton}
                 aria-label="Edit"
                 title={I18n.t('Edit')}
@@ -622,12 +623,13 @@ class LineComponent extends React.Component {
                 }
             }
         }
-        const hasBar = this.props.presetData.lines.find(line => line.chartType === 'bar');
+        const hasBarOrPolar = this.props.presetData.lines.find(line => line.chartType === 'bar' || line.chartType === 'polar');
 
         const chartTypes = {
             auto: 'Auto (Line or Steps)',
             line: 'Line',
             bar: 'Bar',
+            polar: 'Polar',
             scatterplot: 'Scatter plot',
             steps: 'Steps',
             stepsStart: 'Steps on start',
@@ -645,7 +647,7 @@ class LineComponent extends React.Component {
             integral: 'integral',
         };
 
-        if (hasBar) {
+        if (hasBarOrPolar) {
             delete aggregateTypes.minmax;
         }
 
@@ -671,7 +673,7 @@ class LineComponent extends React.Component {
                 >
                     <IconDelete />
                 </IconButton>
-                {this.props.line.chartType !== 'scatterplot' && this.props.line.chartType !== 'bar' ? <IconButton
+                {this.props.line.chartType !== 'scatterplot' && this.props.line.chartType !== 'bar' && this.props.line.chartType !== 'polar' ? <IconButton
                     className={this.props.classes.editButtonFull}
                     aria-label="Edit"
                     title={I18n.t('Edit')}
@@ -752,9 +754,9 @@ class LineComponent extends React.Component {
                     }}
                 /> : null }
                 {this.props.line.chartType === 'scatterplot' || this.props.line.points ? <IOTextField formData={this.props.line} updateValue={this.updateField} name="symbolSize" label="Point size" min={1} type="number" /> : null }
-                {this.props.line.chartType !== 'scatterplot' && this.props.line.chartType !== 'bar' ? <IOTextField formData={this.props.line} updateValue={this.updateField} name="validTime" label="Valid time (sec)" min={0} type="number" title={I18n.t('If the current value is not older than X seconds, assume it is still the same.')} /> : null }
+                {this.props.line.chartType !== 'scatterplot' && this.props.line.chartType !== 'bar' && this.props.line.chartType !== 'polar' ? <IOTextField formData={this.props.line} updateValue={this.updateField} name="validTime" label="Valid time (sec)" min={0} type="number" title={I18n.t('If the current value is not older than X seconds, assume it is still the same.')} /> : null }
                 {this.props.presetData.legend ? <IOCheckbox formData={this.props.line} updateValue={this.updateField} name="hide" label="Show only in legend" /> : null}
-                {this.props.line.chartType !== 'bar' ? <IOCheckbox formData={this.props.line} updateValue={this.updateField} name="noFuture" label="No future" /> : null}
+                {this.props.line.chartType !== 'bar' && this.props.line.chartType !== 'polar' ? <IOCheckbox formData={this.props.line} updateValue={this.updateField} name="noFuture" label="No future" /> : null}
             </div>
             <div className={Utils.clsx(this.props.classes.shortFields, this.props.classes.chapterTexts)}>
                 <p className={this.props.classes.title}>{I18n.t('Texts')}</p>
@@ -764,7 +766,7 @@ class LineComponent extends React.Component {
                 {this.state.isBoolean && this.state.withStates === null ? <IOTextField formData={this.props.line} updateValue={this.updateField} name="trueText" label="Text by true" /> : null}
                 {this.renderStates()}
             </div>
-            {this.props.line.chartType !== 'scatterplot' && this.props.line.chartType !== 'bar' ? <div className={Utils.clsx(this.props.classes.shortFields, this.props.classes.chapterLine)}>
+            {this.props.line.chartType !== 'scatterplot' && this.props.line.chartType !== 'bar' && this.props.line.chartType !== 'polar' ? <div className={Utils.clsx(this.props.classes.shortFields, this.props.classes.chapterLine)}>
                 <p className={this.props.classes.title}>{I18n.t('Line and area')}</p>
                 <IOSlider formData={this.props.line} updateValue={this.updateField} name="fill" label="Fill (from 0 to 1)" />
                 <IOCheckbox formData={this.props.line} updateValue={this.updateField} name="points" label="Show points" />
@@ -895,7 +897,7 @@ class LineComponent extends React.Component {
                 />
                 {/* <IOTextField formData={this.props.line} updateValue={this.updateField} name="smoothing" label="Smoothing" type="number" min={0} /> */}
                 <IOTextField formData={this.props.line} updateValue={this.updateField} name="afterComma" label="Digits after comma" type="number" min={0} />
-                {this.props.line.chartType !== 'bar' ? <IOSelect
+                {this.props.line.chartType !== 'bar' && this.props.line.chartType !== 'polar' ? <IOSelect
                     formData={this.props.line}
                     updateValue={this.updateField}
                     name="lineStyle"

diff --git a/src/src/Components/PresetTabs.js b/src/src/Components/PresetTabs.js
@@ -247,9 +247,20 @@ class PresetTabs extends React.Component {
                     line.aggregate = 'max';
                 }
             });
+        } else if (lines[index].chartType === 'polar') {
+            // apply bar to all lines
+            lines.forEach(line => {
+                line.chartType = 'polar';
+                if (line.aggregate === 'minmax') {
+                    line.aggregate = 'max';
+                }
+            });
         } else if (lines.find(line => line.chartType === 'bar')) {
             // remove bar from all lines
             lines.forEach(line => line.chartType = lines[index].chartType);
+        } else if (lines.find(line => line.chartType === 'polar')) {
+            // remove polar from all lines
+            lines.forEach(line => line.chartType = lines[index].chartType);
         }
 
         this.updateField('lines', lines);
@@ -315,6 +326,13 @@ class PresetTabs extends React.Component {
             if (line.aggregate === 'minmax') {
                 line.aggregate = 'max';
             }
+        } else if (presetData.lines.find(line => line.chartType === 'polar')) {
+            // if any bar already exists, apply bar to new line
+            const line = presetData.lines[presetData.lines.length - 1];
+            line.chartType = 'polar';
+            if (line.aggregate === 'minmax') {
+                line.aggregate = 'max';
+            }
         }
 
         this.props.onChange(presetData);
@@ -553,8 +571,8 @@ class PresetTabs extends React.Component {
     }
 
     renderTabTime() {
-        const hasNotBar = this.props.presetData.lines.find(line => line.chartType !== 'bar');
-        const hasBar = this.props.presetData.lines.find(line => line.chartType === 'bar');
+        const hasNotBarOrPolar = this.props.presetData.lines.find(line => line.chartType !== 'bar' && line.chartType !== 'polar');
+        const hasBarOrPolar = this.props.presetData.lines.find(line => line.chartType === 'bar' || line.chartType === 'polar');
         const anyNotOnChange = this.props.presetData.lines.find(line => line.aggregate !== 'onchange');
 
         const anyNotJson = this.props.presetData.lines.find(line => line.instance !== 'json');
@@ -701,7 +719,7 @@ class PresetTabs extends React.Component {
                 <p className={this.props.classes.title}>{I18n.t('Start and end')}</p>
                 <IOObjectField socket={this.props.socket} formData={this.props.presetData} updateValue={this.updateField} name="ticks" label="Use X-ticks from" />
             </div> */}
-            {anyNotJson && anyNotOnChange && hasNotBar ?
+            {anyNotJson && anyNotOnChange && hasNotBarOrPolar ?
                 <div className={this.props.classes.group}>
                     <p className={this.props.classes.title}>{I18n.t('Aggregate for lines')}</p>
                     <IOSelect
@@ -721,7 +739,7 @@ class PresetTabs extends React.Component {
                         label={this.props.presetData.aggregateType === 'step' ? 'Seconds' : 'Counts'}
                     />
                 </div> : null }
-            {hasBar ?
+            {hasBarOrPolar ?
                 <div className={this.props.classes.group}>
                     <p className={this.props.classes.title}>{I18n.t('Aggregate for bars')}</p>
                     <IOSelect

diff --git a/src/src/i18n/en.json b/src/src/i18n/en.json
@@ -74,6 +74,7 @@
   "line": "Line",
   "area": "Area",
   "bar": "Bar",
+  "polar": "Polar chart",
   "lineplot": "Line plot",
   "scatterplot": "Scatter plot",
   "steps": "Steps",
@@ -522,4 +523,4 @@
   "X-Label-Offset": "X-Label Offset",
   "This time offset will be added to the request by reading data from DB": "This time offset will be added to the request by reading data from DB",
   "No future": "No values in future"
-}
+}