@eohjsc/react-native-smart-city 0.7.41 → 0.7.42

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -1,24 +1,24 @@
 import MockAdapter from 'axios-mock-adapter';
-import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import { SensorDisplayItem } from '../components/SensorDisplayItem';
 import ActionGroup from '../../../commons/ActionGroup';
-import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
+import DeviceAlertStatus from '../../../commons/Device/DeviceAlertStatus';
 import FlatListItems from '../../../commons/Device/FlatListItems';
-import VisualChart from '../components/VisualChart';
 import FooterInfo from '../../../commons/Device/FooterInfo';
-import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
+import LabelValue from '../../../commons/Device/LabelValue';
+import PowerConsumptionChart from '../../../commons/Device/PowerConsumptionChart';
 import ProgressBar from '../../../commons/Device/ProgressBar';
-import Compass from '../../../commons/Device/WindDirection/Compass';
-import DeviceAlertStatus from '../../../commons/Device/DeviceAlertStatus';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
-import LabelValue from '../../../commons/Device/LabelValue';
+import Compass from '../../../commons/Device/WindDirection/Compass';
+import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
+import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
 import Text from '../../../commons/Text';
-import SmartIr from '../../SmartIr';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
+import SmartIr from '../../SmartIr';
+import { SensorDisplayItem } from '../components/SensorDisplayItem';
+import VisualChart from '../components/VisualChart';
 
 const mockIncrementReviewTrigger = jest.fn();
 const mockAskReview = jest.fn();
@@ -484,4 +484,40 @@ describe('Test SensorDisplayItem', () => {
     const labels = instance.findAllByType(Text);
     expect(labels[0].props.children).toEqual('Label');
   });
+
+  it('test render power_consume', async () => {
+    const item = {
+      id: 10452,
+      order: 0,
+      template: 'summary',
+      configuration: {
+        template: 'power_consume',
+        configs: [
+          {
+            id: 78,
+            color: 'green',
+          },
+        ],
+        aggregation_period: 'month',
+      },
+      label: 'Power Consume',
+      is_configuration_ready: true,
+    };
+
+    const sensor = {
+      name: 'Sensor name',
+      is_managed_by_backend: false,
+    };
+
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ item, sensor }));
+    });
+    const instance = tree.root;
+    const powerConsumptionChart = instance.findAllByType(PowerConsumptionChart);
+    expect(powerConsumptionChart).toHaveLength(1);
+    expect(powerConsumptionChart[0].props.label).toEqual('Power Consume');
+    expect(powerConsumptionChart[0].props.powerConfigId).toEqual(78);
+    expect(powerConsumptionChart[0].props.defaultPeriod).toEqual('month');
+    expect(powerConsumptionChart[0].props.color).toEqual('green');
+  });
 });

package/src/screens/Device/components/SensorDisplayItem.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { View } from 'react-native';
 import ActionGroup from '../../../commons/ActionGroup';
 import DeviceAlertStatus from '../../../commons/Device/DeviceAlertStatus';
@@ -6,16 +6,17 @@ import EmergencyButton from '../../../commons/Device/Emergency/EmergencyButton';
 import EmergencyDetail from '../../../commons/Device/Emergency/EmergencyDetail';
 import FlatListItems from '../../../commons/Device/FlatListItems';
 import FooterInfo from '../../../commons/Device/FooterInfo';
+import LabelValue from '../../../commons/Device/LabelValue';
 import PMSensorIndicator from '../../../commons/Device/PMSensor/PMSensorIndicator';
+import PowerConsumptionChart from '../../../commons/Device/PowerConsumptionChart';
 import ProgressBar from '../../../commons/Device/ProgressBar';
-import LabelValue from '../../../commons/Device/LabelValue';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
 import Compass from '../../../commons/Device/WindDirection/Compass';
 import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
 import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
-import IFrame from '../../../commons/Widgets/IFrame/IFrame';
 import Text from '../../../commons/Text';
+import IFrame from '../../../commons/Widgets/IFrame/IFrame';
 import { Device } from '../../../configs';
 import { AccessibilityLabel, WIDGET_TYPE } from '../../../configs/Constants';
 import { useSCContextSelector } from '../../../context';
@@ -47,14 +48,12 @@ export const SensorDisplayItem = ({
   const { configuration = {}, id: idTemplate, label } = item;
   const { type, template, uri, id, name, title, value_evaluation } =
     configuration;
-
   const sendRemoteCommand = useRemoteControl(bluetoothDevice);
   const [processing, setProcessing] = useState(false);
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
 
   const evaluateValue = useEvaluateValue();
-
   const checkConfigValue = (configValue) => {
     if (configValue === null || configValue === undefined) {
       return false;
@@ -322,6 +321,25 @@ export const SensorDisplayItem = ({
       return <FooterInfo data={configuration} />;
     case 'smart_ir':
       return <SmartIr item={item} />;
+    case 'summary':
+      switch (item?.configuration?.template) {
+        case 'power_consume':
+          return (
+            <View>
+              {configuration?.configs[0]?.id && (
+                <PowerConsumptionChart
+                  label={label}
+                  powerConfigId={configuration?.configs[0]?.id}
+                  defaultPeriod={configuration?.aggregation_period}
+                  color={configuration?.configs[0]?.color}
+                  style={styles.powerConsumption}
+                />
+              )}
+            </View>
+          );
+        default:
+          return null;
+      }
     default:
       break;
   }

package/src/screens/Device/styles.js

@@ -110,4 +110,8 @@ export default StyleSheet.create({
     color: Colors.Black,
     marginHorizontal: 20,
   },
+  powerConsumption: {
+    marginHorizontal: 16,
+    marginBottom: 8,
+  },
 });

package/src/screens/UnitSummary/components/3PPowerConsumption/index.js

@@ -1,17 +1,15 @@
-import React, { memo, useCallback, useMemo, useState } from 'react';
-import { View, StyleSheet } from 'react-native';
-import Text from '../../../../commons/Text';
-import { API, Colors } from '../../../../configs';
-import moment from 'moment';
+import { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
 import { Section, Today } from '../../../../commons';
-import ListQualityIndicator from '../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
 import PMSensorIndicator from '../../../../commons/Device/PMSensor/PMSensorIndicator';
-import VisualChart from '../../../Device/components/VisualChart';
-import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import PowerConsumptionChart from '../../../../commons/Device/PowerConsumptionChart';
-import { axiosGet } from '../../../../utils/Apis/axios';
+import ListQualityIndicator from '../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
+import Text from '../../../../commons/Text';
+import { Colors } from '../../../../configs';
 import { AccessibilityLabel } from '../../../../configs/Constants';
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import { useWatchConfigs } from '../../../../hooks/IoT';
+import VisualChart from '../../../Device/components/VisualChart';
 
 const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
   const t = useTranslations();
@@ -114,36 +112,6 @@ const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
     return !!listConfigs;
   }, [listConfigs]);
 
-  const [groupBy, setGroupBy] = useState('date');
-  const [getData, setData] = useState({});
-  const [chartConfig, setChartConfig] = useState({
-    unit: 'kWh',
-    price: '',
-  });
-
-  const fetchData = useCallback(
-    async (startDate, endDate) => {
-      let params = new URLSearchParams();
-      params.append('config', total_power);
-      params.append('group_by', groupBy);
-      if (groupBy === 'date') {
-        params.append('date_from', moment(startDate).format('YYYY-MM-DD'));
-        params.append('date_to', moment(endDate).format('YYYY-MM-DD'));
-      }
-      const { success, data } = await axiosGet(
-        API.VALUE_CONSUME.DISPLAY_HISTORY(),
-        {
-          params,
-        },
-        true
-      );
-      if (success) {
-        setData(data);
-      }
-    },
-    [groupBy, total_power]
-  );
-
   const dataTotal = useMemo(() => {
     return total_power
       ? [
@@ -186,16 +154,7 @@ const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
         </Text>
 
         <PMSensorIndicator data={dataTotal} style={styles.styleTotalPower} />
-        {total_power && (
-          <PowerConsumptionChart
-            onChangeDate={fetchData}
-            datas={getData}
-            chartConfig={chartConfig}
-            setChartConfig={setChartConfig}
-            groupBy={groupBy}
-            setGroupBy={setGroupBy}
-          />
-        )}
+        {total_power && <PowerConsumptionChart powerConfigId={total_power} />}
       </Section>
     </>
   );

package/src/screens/UnitSummary/components/PowerConsumption/__test__/PowerConsumption.test.js

@@ -1,15 +1,17 @@
-import React from 'react';
-import renderer, { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
+import renderer, { act, create } from 'react-test-renderer';
 
-import { AccessibilityLabel } from '../../../../../configs/Constants';
-import { API, Colors } from '../../../../../configs';
+import moment from 'moment';
+import { Today } from '../../../../../commons';
+import DateTimeRangeChange from '../../../../../commons/DateTimeRangeChange';
+import PowerConsumptionChart from '../../../../../commons/Device/PowerConsumptionChart';
 import ListQualityIndicator from '../../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
-import PowerConsumption from '../index';
+import { API, Colors } from '../../../../../configs';
+import { AccessibilityLabel } from '../../../../../configs/Constants';
 import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';
 import api from '../../../../../utils/Apis/axios';
-import { Today } from '../../../../../commons';
+import PowerConsumption from '../index';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -193,4 +195,117 @@ describe('Test PowerConsumption', () => {
     const listQualityIndicator = instance.findByType(ListQualityIndicator);
     expect(listQualityIndicator.props.data).toEqual([]);
   });
+
+  it('render PowerConsumption with total sum is 0', async () => {
+    const summaryDetail = {
+      listConfigs: {
+        total_power: 207,
+      },
+    };
+
+    const data = [
+      {
+        config: 207,
+        data: [
+          { x: 'Fri-14.06', y: 0 },
+          { x: 'Sat-15.06', y: 0 },
+        ],
+      },
+    ];
+    mock.onGet(API.VALUE_CONSUME.DISPLAY_HISTORY()).reply(200, data);
+    await act(async () => {
+      tree = await create(wrapComponent(summaryDetail));
+    });
+    const instance = tree.root;
+
+    const input_calculate_cost = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.INPUT_CALCULATE_COST
+    );
+    await act(async () => {
+      input_calculate_cost.props.onChangeText('1000');
+    });
+    const button_calculate_cost = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_CALCULATE_COST
+    );
+    await act(async () => {
+      button_calculate_cost.props.onPress();
+    });
+    const totalPrice = instance.find(
+      (el) => el.props.accessibilityLabel === AccessibilityLabel.TOTAL_PRICE
+    );
+    expect(totalPrice.props.children).toEqual('0 đ');
+  });
+
+  it('render PowerConsumption with empty data array', async () => {
+    const summaryDetail = {
+      listConfigs: {
+        total_power: 207,
+      },
+    };
+
+    mock.onGet(API.VALUE_CONSUME.DISPLAY_HISTORY()).reply(200, []);
+    await act(async () => {
+      tree = await create(wrapComponent(summaryDetail));
+    });
+    const instance = tree.root;
+
+    const input_calculate_cost = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.INPUT_CALCULATE_COST
+    );
+    await act(async () => {
+      input_calculate_cost.props.onChangeText('1000');
+    });
+    const button_calculate_cost = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_CALCULATE_COST
+    );
+    await act(async () => {
+      button_calculate_cost.props.onPress();
+    });
+
+    const totalPrice = instance.find(
+      (el) => el.props.accessibilityLabel === AccessibilityLabel.TOTAL_PRICE
+    );
+    expect(totalPrice.props.children).toEqual('0 đ');
+  });
+
+  it('cover selectStart and selectEnd in PowerConsumptionChart', async () => {
+    const summaryDetail = {
+      listConfigs: {
+        total_power: 207,
+      },
+    };
+
+    mock.onGet(API.VALUE_CONSUME.DISPLAY_HISTORY()).reply(200, []);
+    await act(async () => {
+      tree = await create(wrapComponent(summaryDetail));
+    });
+    const instance = tree.root;
+
+    const powerConsumptionChart = instance.findByType(PowerConsumptionChart);
+    const dateTimeRangeChange =
+      powerConsumptionChart.findByType(DateTimeRangeChange);
+    expect(dateTimeRangeChange).toBeDefined();
+
+    const newStartDate = moment().subtract(10, 'days');
+    const newEndDate = moment().subtract(1, 'days');
+
+    await act(async () => {
+      dateTimeRangeChange.props.selectStart(newStartDate);
+    });
+    await act(async () => {
+      dateTimeRangeChange.props.selectEnd(newEndDate);
+    });
+
+    // Check if the component still renders correctly after date changes
+    expect(
+      powerConsumptionChart.findByType(DateTimeRangeChange).props.startTime
+    ).toEqual(newStartDate);
+    expect(
+      powerConsumptionChart.findByType(DateTimeRangeChange).props.endTime
+    ).toEqual(newEndDate);
+  });
 });

package/src/screens/UnitSummary/components/PowerConsumption/index.js

@@ -1,18 +1,16 @@
-import React, { memo, useMemo, useState, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
-import moment from 'moment';
 
-import { API, Colors } from '../../../../configs';
-import Text from '../../../../commons/Text';
 import { Section, Today } from '../../../../commons';
-import ListQualityIndicator from '../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
 import PMSensorIndicator from '../../../../commons/Device/PMSensor/PMSensorIndicator';
 import PowerConsumptionChart from '../../../../commons/Device/PowerConsumptionChart';
+import ListQualityIndicator from '../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
+import Text from '../../../../commons/Text';
+import { Colors } from '../../../../configs';
 import { AccessibilityLabel } from '../../../../configs/Constants';
-import { axiosGet } from '../../../../utils/Apis/axios';
-import VisualChart from '../../../Device/components/VisualChart';
 import { useWatchConfigs } from '../../../../hooks/IoT';
+import VisualChart from '../../../Device/components/VisualChart';
 
 const PowerConsumption = memo(({ summaryDetail }) => {
   const t = useTranslations();
@@ -21,16 +19,9 @@ const PowerConsumption = memo(({ summaryDetail }) => {
     listConfigs || {};
   useWatchConfigs([volt, current, active_power, power_factor, total_power]);
 
-  const [groupBy, setGroupBy] = useState('date');
-  const [getData, setData] = useState([]);
-  const [chartConfig, setChartConfig] = useState({
-    unit: 'kWh',
-    price: '',
-  });
   const showBoxHistory = useMemo(() => {
     return !!listConfigs;
   }, [listConfigs]);
-
   const createDataItem = useCallback(
     (id, color, title, measure) => ({
       id,
@@ -80,29 +71,6 @@ const PowerConsumption = memo(({ summaryDetail }) => {
       : [];
   }, [createDataItem, total_power]);
 
-  const fetchData = useCallback(
-    async (startDate, endDate) => {
-      let params = new URLSearchParams();
-      params.append('config', total_power);
-      params.append('group_by', groupBy);
-      if (groupBy === 'date') {
-        params.append('date_from', moment(startDate).format('YYYY-MM-DD'));
-        params.append('date_to', moment(endDate).format('YYYY-MM-DD'));
-      }
-      const { success, data } = await axiosGet(
-        API.VALUE_CONSUME.DISPLAY_HISTORY(),
-        {
-          params,
-        },
-        true
-      );
-      if (success) {
-        setData(data);
-      }
-    },
-    [groupBy, total_power]
-  );
-
   return (
     <>
       <Section type={'border'}>
@@ -123,16 +91,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
         </Text>
 
         <PMSensorIndicator data={dataTotal} style={styles.styleTotalPower} />
-        {total_power && (
-          <PowerConsumptionChart
-            onChangeDate={fetchData}
-            datas={getData}
-            chartConfig={chartConfig}
-            setChartConfig={setChartConfig}
-            groupBy={groupBy}
-            setGroupBy={setGroupBy}
-          />
-        )}
+        {total_power && <PowerConsumptionChart powerConfigId={total_power} />}
       </Section>
     </>
   );

package/src/utils/I18n/translations/en.js

@@ -529,6 +529,7 @@ export default {
   saved_vehicle: 'Saved Vehicle',
   set_a_number: 'Set a number',
   text_total_power_consumption: 'Total Power Consumption',
+  power_consumption_chart: 'Power Consumption Chart',
   input_price_to_calculate_electricity_cost:
     'Input price to calculate electricity cost',
   calculate_cost: 'Calculate cost',

package/src/utils/I18n/translations/vi.js

@@ -590,6 +590,7 @@ export default {
   save_this_vehicle: 'Lưu và đặt phương tiện mặc định',
   saved_vehicle: 'Phương tiện đã lưu',
   text_total_power_consumption: 'Tổng điện năng tiêu thụ',
+  power_consumption_chart: 'Biểu đồ điện năng tiêu thụ',
   input_price_to_calculate_electricity_cost:
     'Nhập số tiền để tính giá tiền điện đã sử dụng',
   calculate_cost: 'Tính giá điện',

package/src/utils/chartHelper/index.js

@@ -0,0 +1,53 @@
+export const getMaxValueIndex = (data) => {
+  let max = {};
+  let _index = 0;
+  for (let i = 0; i < data.length; i++) {
+    if (max.y == null || data[i].y > max.y) {
+      max = { ...data[i] };
+      _index = i;
+    }
+  }
+  return { _index, max };
+};
+
+export const createDataLabelFormatter = () => {
+  return `function () {
+    const { unit, price } = JSON.parse(this.series.name || '{}');
+
+    // Re-define formatMoney for WebView scope since this function is stringified
+    const _formatMoney = (number) => {
+      const formatNumber = number.toFixed();
+      return (
+        parseInt(formatNumber, 10)
+          .toFixed(0)
+          .toString()
+          .replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, '$1.') + 'đ'
+      );
+    };
+
+    // Hardcode Primary color or access it if available.
+    const Colors = { Primary: '#00979D' };
+
+    const textColor =
+      this.color === Colors.Primary
+        ? this.y === 0
+          ? '#262626'
+          : '#FFFFFF'
+        : '#262626';
+
+    const valueStyle = "color:" + textColor + ";font-weight:normal;font-size:12px;";
+    const costStyle = valueStyle + 'font-weight:bold;';
+    const label = "<span style=\\"" + valueStyle + "\\">" + this.y + (unit || '') + "</span>";
+
+    if (price === '' || price === null || isNaN(price)) {
+      return label;
+    }
+
+    return (
+      label +
+      "<span style=\\"" + costStyle + "\\">" + "/" +
+      _formatMoney(this.y * price) +
+      "</span></span>"
+    );
+  }`;
+};

package/src/utils/chartHelper/getMaxValueIndex.js

@@ -1,11 +0,0 @@
-export const getMaxValueIndex = (data) => {
-  let max = {};
-  let _index = 0;
-  for (let i = 0; i < data.length; i++) {
-    if (!max.y || data[i].y > max.y) {
-      max = { ...data[i] };
-      _index = i;
-    }
-  }
-  return { _index, max };
-};