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

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,35 +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,
-        }
-      );
-      if (success) {
-        setData(data);
-      }
-    },
-    [groupBy, total_power]
-  );
-
   const dataTotal = useMemo(() => {
     return total_power
       ? [
@@ -185,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,28 +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,
-        }
-      );
-      if (success) {
-        setData(data);
-      }
-    },
-    [groupBy, total_power]
-  );
-
   return (
     <>
       <Section type={'border'}>
@@ -122,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/screens/UnitSummary/index.js

@@ -104,7 +104,8 @@ const UnitSummary = memo(({ route }) => {
   const fetchUnitSummary = useCallback(async () => {
     const { success, data } = await axiosGet(
       API.UNIT.UNIT_SUMMARY(unit?.id),
-      {}
+      {},
+      true
     );
     if (success) {
       const newData = data.filter((item) => item.id === summaryId);

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 };
-};