Do not render null points on rangeArea charts

ref apexcharts/apexcharts.js#3821

Author: fracz

src/SuplaDeveloperBundle/DataFixtures/ORM/LogItemsFixture.php

@@ -282,8 +282,8 @@ private function createGeneralPurposeMeasurementLogItems() {
             EntityUtils::setField($logItem, 'open_value', $openValue);
             EntityUtils::setField($logItem, 'close_value', $temperature);
             EntityUtils::setField($logItem, 'avg_value', $avgValue);
-            EntityUtils::setField($logItem, 'max_value', $maxValue);
-            EntityUtils::setField($logItem, 'min_value', $minValue);
+            EntityUtils::setField($logItem, 'max_value', max($maxValue, $minValue));
+            EntityUtils::setField($logItem, 'min_value', min($maxValue, $minValue));
             if ($this->faker->boolean(95)) {
                 $this->entityManager->persist($logItem);
             }

src/frontend/src/channels/history/channel-measurements-history-chart-strategies.js

@@ -692,7 +692,11 @@ export const CHART_TYPES = {
             if (this.channel?.config?.chartType === 'LINEAR') {
                 const rangeSeries = allLogs
                     .filter((item) => item.min !== null)
-                    .map((item) => ({x: item.date_timestamp * 1000, y: [item.min_value, item.max_value]}));
+                    .map((item) => ({x: item.date_timestamp * 1000, y: [item.min_value, item.max_value]}))
+                    // TODO remove filter after fix https://github.com/apexcharts/apexcharts.js/issues/3821
+                    // it should correctly display ranges on null logs
+                    .filter(item => item.y[0] !== null);
+                console.log(rangeSeries[5]?.y);
                 series.push({
                     name: `${this.$t('Value')} - ${this.$t('range')}`,
                     type: 'rangeArea',

src/frontend/src/channels/params/channel-params-general-purpose-measurement.vue

@@ -28,6 +28,7 @@
                     <dd>{{ $t('Chart type') }}</dd>
                     <dt>
                         <ChannelParamsButtonSelector
+                            use-dropdown
                             v-model="props.channel.config.chartType"
                             @input="$emit('change')"
                             :values="[{id: 'LINEAR', label: $t('Linear')}, {id: 'BAR', label: $t('Bar')}, {id: 'CANDLE', label: $t('Candle')}]"/>

src/frontend/tests/unit/channels/channel-measurements-history-chart-strategies.spec.js

@@ -381,6 +381,24 @@ describe('Channel measurement history data strategies', () => {
         });
     });
 
+    describe('GENERAL_PURPOSE_MEASUREMENT', function () {
+        const strategy = CHART_TYPES.GENERAL_PURPOSE_MEASUREMENT;
+
+        it('aggregates simple logs', () => {
+            const logs = [
+                {date_timestamp: 1, avg_value: 5, min_value: 2, max_value: 8, open_value: 4, close_value: 6},
+                {date_timestamp: 2, avg_value: 6, min_value: 1, max_value: 9, open_value: 6, close_value: 7},
+                {date_timestamp: 3, avg_value: 7, min_value: 2, max_value: 8, open_value: 7, close_value: 5},
+            ];
+            const aggregatedLog = strategy.aggregateLogs(logs);
+            expect(aggregatedLog.avg_value).toEqual(6);
+            expect(aggregatedLog.min_value).toEqual(1);
+            expect(aggregatedLog.max_value).toEqual(9);
+            expect(aggregatedLog.open_value).toEqual(4);
+            expect(aggregatedLog.close_value).toEqual(5);
+        });
+    });
+
     describe('GENERAL_PURPOSE_METER', function () {
         const strategy = CHART_TYPES.GENERAL_PURPOSE_METER;