feat(bar): added options to make bar chart vertical and mirror it.

ModBros · Dec 10, 2021 · bf25d30 · bf25d30
1 parent 0754c3b
commit bf25d30
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 13 deletions.
diff --git a/dist/theme.js b/dist/theme.js
diff --git a/dist/theme.js.map b/dist/theme.js.map
diff --git a/src/components/BarChartWidget.jsx b/src/components/BarChartWidget.jsx
@@ -32,7 +32,7 @@ function createOptions(configRef, layoutConfigRef, channelDataRef, settings, opt
     return {
         colors: [backColor(configRef), getColorForCurrentValue(channelDataRef, configRef)],
         chart: {
-            type: 'bar',
+            type: !configRef.current.vertical ? 'bar' : 'column',
             backgroundColor: 'rgba(0, 0, 0, 0)',
             animation: {
                 duration: 500
@@ -79,6 +79,10 @@ function createOptions(configRef, layoutConfigRef, channelDataRef, settings, opt
             bar: {
                 // remove border from bar
                 borderWidth: 0
+            },
+            column: {
+                // remove border from column
+                borderWidth: 0
             }
         },
         series: [{
@@ -108,6 +112,8 @@ function BarChartWidget(props) {
             {...chartProps}
             createOptions={createOptions}
             configKeyToListen={[
+                'vertical',
+                'mirror',
                 'min',
                 'max',
                 'width',
@@ -120,11 +126,24 @@ function BarChartWidget(props) {
                 'dangerColor',
             ]}
             writeDataToSeries={(channelDataRef, optionsRef, configRef, layoutConfigRef, chartRef) => {
-                optionsRef.current.series[0].data = [Math.max(0, optionsRef.current.yAxis.max - parseFloat(mobro.utils.channelData.extractValue(channelDataRef.current)))]
-                optionsRef.current.series[1].data = [parseFloat(mobro.utils.channelData.extractValue(channelDataRef.current))];
-                optionsRef.current.colors = [
-                    backColor(configRef), getColorForCurrentValue(channelDataRef, configRef)
+                let data = [
+                    Math.max(0, optionsRef.current.yAxis.max - parseFloat(mobro.utils.channelData.extractValue(channelDataRef.current))),
+                    parseFloat(mobro.utils.channelData.extractValue(channelDataRef.current))
+                ];
+
+                let colors = [
+                    backColor(configRef),
+                    getColorForCurrentValue(channelDataRef, configRef)
                 ];
+
+                if(configRef.current.mirror) {
+                    data = data.reverse();
+                    colors = colors.reverse();
+                }
+
+                optionsRef.current.series[0].data = [data[0]]
+                optionsRef.current.series[1].data = [data[1]];
+                optionsRef.current.colors = colors;
             }}
             adaptOptions={(channelDataRef, optionsRef, configRef) => {
                 optionsRef.current.yAxis.min = minValue(configRef, 'min', null);

diff --git a/src/components/LineChartWidget.jsx b/src/components/LineChartWidget.jsx
@@ -7,8 +7,8 @@ import {getWidgetFontColor, getWidgetFontFamily} from '../utils/widget'
 const defaultLineColor = 'rgba(15, 150, 200, 1)';
 
 function createOptions(configRef, layoutConfigRef, channelDataRef, settings, optionsRef) {
-    const min = minValue(configRef, 'min', null);
-    const max = maxValue(configRef, null, 'max', null);
+    const min = minValue(configRef, 'min', 0);
+    const max = maxValue(configRef, null, 'max', 0);
 
     return {
         colors: [colorToRgba(configRef.current?.lineColor, defaultLineColor)],
@@ -41,13 +41,10 @@ function createOptions(configRef, layoutConfigRef, channelDataRef, settings, opt
             visible: false,
         },
         yAxis: {
-            endOnTick: true,
+            tickPositions: min || max ? [min, max] : undefined,
             gridLineWidth: 0,
-            startOnTick: true,
             tickAmount: 2,
             tickWidth: 0,
-            min: min,
-            max: max,
             title: {
                 text: undefined
             },

diff --git a/src/hooks/widget/bar-chart.js b/src/hooks/widget/bar-chart.js
@@ -11,6 +11,19 @@ mobro.hooks.addWidget({
         channel: {
             type: 'channel'
         },
+        behaviour: {
+            type: 'fieldset',
+            label: 'Behaviour',
+            collapsible: false,
+            children: {
+                vertical: {
+                    type: 'checkbox'
+                },
+                mirror: {
+                    type: 'checkbox'
+                }
+            }
+        },
         limits: {
             type: 'fieldset',
             label: 'Limits',