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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.41",
+  "version": "0.7.43",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Dashboard/MyDashboardDevice/index.js

@@ -43,19 +43,21 @@ const MyDashboardDevice = ({ refreshing }) => {
   );
   const [myDashboardDevices, setMyDashboardDevices] = useState([]);
 
-  const listChipDashboard = useMemo(() => {
-    return myDashboardDevices.flatMap((dashboard) =>
-      dashboard.devices.map((device) => device.chip_id)
+  const chipIdsDashboardSet = useMemo(() => {
+    return new Set(
+      myDashboardDevices.flatMap((dashboard) =>
+        dashboard.devices.map((device) => device.chip_id)
+      )
     );
   }, [myDashboardDevices]);
 
   const { chips, isFetching } = useChipJsonConfiguration({
-    ready: !!listChipDashboard.length,
+    ready: !!chipIdsDashboardSet.size,
   });
 
   const listChipsMqtt = useMemo(() => {
-    return chips.filter((chip) => listChipDashboard.includes(chip.id));
-  }, [chips, listChipDashboard]);
+    return chips.filter((chip) => chipIdsDashboardSet.has(chip.id));
+  }, [chips, chipIdsDashboardSet]);
 
   const { mqttConfigs } = useConnectChipMqtt(listChipsMqtt);
 
@@ -81,14 +83,14 @@ const MyDashboardDevice = ({ refreshing }) => {
 
   useWatchConfigs(isFetching ? [] : configsNeedWatching);
 
-  const listSharedChips = useMemo(() => {
-    const chipMqttIds = listChipsMqtt.map((chip) => chip.id);
-    return listChipDashboard.filter((id) => !chipMqttIds.includes(id));
-  }, [listChipsMqtt, listChipDashboard]);
+  const listSharedChipIds = useMemo(() => {
+    const chipMqttIdsSet = new Set(listChipsMqtt.map((chip) => chip.id));
+    return [...chipIdsDashboardSet].filter((id) => !chipMqttIdsSet.has(id));
+  }, [listChipsMqtt, chipIdsDashboardSet]);
 
   useWatchSharedChips({
-    filterChipIds: listSharedChips,
-    ready: !!listSharedChips.length,
+    filterChipIds: listSharedChipIds,
+    ready: !!listSharedChipIds.length,
   });
 
   const fetchMyDashboardDevices = useCallback(async () => {

package/src/commons/Dashboard/MyUnit/index.js

@@ -157,9 +157,10 @@ const MyUnit = ({ refreshing }) => {
   });
 
   const listChipsMqtt = useMemo(() => {
-    const listChipUnit =
-      myUnitDetail?.abstract_devices.map((device) => device.chip_id) ?? [];
-    return chips.filter((chip) => listChipUnit.includes(chip.id));
+    const chipIdsUnitSet = new Set(
+      myUnitDetail?.abstract_devices.map((device) => device.chip_id) ?? []
+    );
+    return chips.filter((chip) => chipIdsUnitSet.has(chip.id));
   }, [chips, myUnitDetail]);
 
   useConnectChipMqtt(listChipsMqtt);

package/src/commons/DateTimeRangeChange/index.js

@@ -1,13 +1,13 @@
-import React, { memo, useCallback, useEffect, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
 import moment from 'moment/moment';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 
-import Text from '../Text';
 import { Colors } from '../../configs';
-import DateTimeButton from './DateTimeButton';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import { DATE_TIME_FORMAT } from '../../configs/Constants';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import Text from '../Text';
+import DateTimeButton from './DateTimeButton';
 
 const DateTimeRangeChange = memo(
   ({

package/src/commons/Device/HorizontalBarChart.js

@@ -1,9 +1,12 @@
 import { isEmpty } from 'lodash';
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { Colors } from '../../configs';
-import { getMaxValueIndex } from '../../utils/chartHelper/getMaxValueIndex';
+import {
+  createDataLabelFormatter,
+  getMaxValueIndex,
+} from '../../utils/chartHelper';
 import Highcharts from '../Highcharts';
 
 // https://github.com/facebook/hermes/issues/114#issuecomment-887106990
@@ -41,7 +44,7 @@ import Highcharts from '../Highcharts';
 //   );
 // }
 
-const HorizontalBarChart = memo(({ datas, config }) => {
+const HorizontalBarChart = memo(({ datas, config, color = Colors.Primary }) => {
   const [chartOptions, setChartOptions] = useState({
     chart: {
       type: 'bar',
@@ -92,23 +95,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         dataLabels: {
           enabled: true,
           useHTML: true,
-          formatter: `function formatter() {
-    var _JSON$parse = JSON.parse(this.series.name),
-      unit = _JSON$parse.unit,
-      price = _JSON$parse.price;
-    var textColor = this.color === '#00979D' ? this.y === 0 ? '#262626' : '#FFFFFF' : '#262626';
-    var valueStyle = "color:" + textColor + ";font-weight:normal;font-size:12px;";
-    var costStyle = valueStyle + 'font-weight:bold;';
-    var label = "<span style=\\"" + valueStyle + "\\">" + ("" + this.y + unit);
-    if (price === '' || price === null || isNaN(price)) {
-      return label + '</span>';
-    }
-    var formatMoney = function formatMoney(number) {
-      var formatNumber = number.toFixed();
-      return parseInt(formatNumber, 10).toFixed(0).toString().replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, '$1.') + 'đ';
-    };
-    return label + ("/<span style=\\"" + costStyle + "\\">") + formatMoney(this.y * price) + '</span></span>';
-  }`,
+          formatter: createDataLabelFormatter(),
           align: 'right',
           inside: false,
         },
@@ -139,14 +126,14 @@ const HorizontalBarChart = memo(({ datas, config }) => {
   useEffect(() => {
     const dataY = (datas[0]?.data || []).map((item, index) => {
       return {
-        color: index % 2 === 0 ? Colors.Primary + '20' : Colors.Primary + '16',
+        color: index % 2 === 0 ? color + '50' : color + '30',
         y: item.y,
       };
     });
     const dataX = (datas[0]?.data || []).map((item) => item.x);
     const maxY = getMaxValueIndex(dataY);
     if (!isEmpty(maxY.max)) {
-      dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });
+      dataY.splice(maxY._index, 1, { ...maxY.max, color: color });
     }
 
     const isAllZero = dataY.every((item) => item.y === 0);
@@ -166,12 +153,12 @@ const HorizontalBarChart = memo(({ datas, config }) => {
       },
       series: [
         {
-          name: JSON.stringify(config),
+          name: JSON.stringify({ ...config, color }),
           data: dataY,
         },
       ],
     }));
-  }, [datas, config]);
+  }, [datas, config, color]);
 
   return (
     <View style={[styles.container, { height: heightChart }]}>

package/src/commons/Device/PowerConsumptionChart.js

@@ -1,159 +1,283 @@
-import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
 import moment from 'moment';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Colors } from '../../configs';
-import Text from '../Text';
+import { API, Colors } from '../../configs';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import { axiosGet } from '../../utils/Apis/axios';
+import { formatMoney } from '../../utils/Utils';
 import Button from '../Button';
-import CurrencyInput from '../Form/CurrencyInput';
+import ChartAggregationOption from '../ChartAggregationOption';
 import DateTimeRangeChange from '../DateTimeRangeChange';
+import CurrencyInput from '../Form/CurrencyInput';
+import Text from '../Text';
 import HorizontalBarChart from './HorizontalBarChart';
-import ChartAggregationOption from '../ChartAggregationOption';
-import { formatMoney } from '../../utils/Utils';
-import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
-const PowerConsumptionChart = memo(
-  ({
-    datas,
-    chartConfig,
-    setChartConfig,
-    style,
-    groupBy,
-    setGroupBy,
-    onChangeDate,
-  }) => {
-    const t = useTranslations();
-    const [price, setPrice] = useState(null);
+const PowerConsumptionChart = ({
+  label,
+  powerConfigId,
+  defaultPeriod = 'date',
+  color = Colors.Primary,
+  isWidgetOrder = false,
+  style,
+}) => {
+  const t = useTranslations();
+  const [price, setPrice] = useState(null);
+  const [groupBy, setGroupBy] = useState(defaultPeriod);
+  const [datas, setDatas] = useState([]);
+  const [chartConfig, setChartConfig] = useState({
+    unit: 'kWh',
+    price: '',
+  });
+  const [value, setValue] = useState([moment().subtract(6, 'days'), moment()]);
+  const [isFetching, setIsFetching] = useState(false);
 
-    const onCalculateCost = useCallback(() => {
-      setChartConfig((config) => ({
-        ...config,
-        price,
-      }));
-    }, [setChartConfig, price]);
-
-    const totalPrice = useMemo(() => {
-      const { price: chartPrice } = chartConfig;
-      if (chartPrice === '' || isNaN(chartPrice)) {
-        return null;
+  const fetchData = useCallback(
+    async (startDate, endDate) => {
+      setIsFetching(true);
+      let params = new URLSearchParams();
+      params.append('config', powerConfigId);
+      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) {
+        setDatas(data);
       }
-      const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
-      const roundedSum = sum * chartPrice;
-      return roundedSum.toFixed();
-    }, [datas, chartConfig]);
+      setIsFetching(false);
+    },
+    [groupBy, powerConfigId]
+  );
 
-    const renderChart = useMemo(() => {
-      return <HorizontalBarChart datas={datas} config={chartConfig} />;
-    }, [chartConfig, datas]);
+  useEffect(() => {
+    fetchData(value[0], value[1]);
+  }, [fetchData, value]);
 
-    const [value, setValue] = useState([
-      moment().subtract(6, 'days'),
-      moment(),
-    ]);
+  useEffect(() => {
+    setGroupBy(defaultPeriod);
+  }, [defaultPeriod]);
 
-    useEffect(() => {
-      onChangeDate(value[0], value[1]);
-    }, [onChangeDate, value]);
+  const onCalculateCost = useCallback(() => {
+    setChartConfig((config) => ({
+      ...config,
+      price,
+    }));
+  }, [setChartConfig, price]);
 
-    const selectStart = (date) => {
-      setValue((state) => [date, state[1]]);
-    };
-    const selectEnd = (date) => {
-      setValue((state) => [state[0], date]);
-    };
+  const totalPrice = useMemo(() => {
+    const { price: chartPrice } = chartConfig;
+    if (chartPrice === '' || isNaN(chartPrice)) {
+      return null;
+    }
+    const sum =
+      datas[0] && datas[0].data
+        ? datas[0].data.reduce((a, b) => a + b.y, 0)
+        : 0;
+    const roundedSum = sum * chartPrice;
+    return roundedSum.toFixed();
+  }, [datas, chartConfig]);
 
+  const renderChart = useMemo(() => {
+    if (isFetching) {
+      return (
+        <View style={styles.loadingWrapper}>
+          <ActivityIndicator size="large" color={Colors.Primary} />
+        </View>
+      );
+    }
+    if (!datas || datas.length === 0) {
+      return null;
+    }
     return (
-      <View style={style}>
-        <View style={styles.historyView}>
-          <View style={styles.titleHistory}>
-            <Text size={20} semibold color={Colors.Gray9}>
-              {t('history')}
-            </Text>
+      <HorizontalBarChart datas={datas} config={chartConfig} color={color} />
+    );
+  }, [chartConfig, datas, color, isFetching]);
 
+  const selectStart = (date) => {
+    setValue((state) => [date, state[1]]);
+  };
+  const selectEnd = (date) => {
+    setValue((state) => [state[0], date]);
+  };
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      <View style={styles.historyView}>
+        <View style={styles.titleHistory}>
+          <Text
+            style={styles.label}
+            bold
+            color={Colors.Gray9}
+            numberOfLines={1}
+          >
+            {label || t('power_consumption_chart')}
+          </Text>
+
+          {!isWidgetOrder && (
             <ChartAggregationOption groupBy={groupBy} setGroupBy={setGroupBy} />
-          </View>
-          {groupBy === 'date' && (
-            <DateTimeRangeChange
-              startTime={value[0]}
-              endTime={value[1]}
-              selectStart={selectStart}
-              selectEnd={selectEnd}
-            />
           )}
         </View>
+        {!isWidgetOrder && groupBy === 'date' && (
+          <DateTimeRangeChange
+            startTime={value[0]}
+            endTime={value[1]}
+            selectStart={selectStart}
+            selectEnd={selectEnd}
+            style={styles.dateTimeRange}
+          />
+        )}
+      </View>
 
-        <View style={styles.wrapCalculateCost}>
-          <Text type="H4">
+      {!isWidgetOrder && (
+        <View style={styles.calculateCostCard}>
+          <Text style={styles.title}>
             {t('input_price_to_calculate_electricity_cost')}
           </Text>
-          <View style={styles.row}>
-            <CurrencyInput
-              value={price}
-              onChange={setPrice}
-              minValue={0}
-              maxValue={100000000}
-              placeholder={'0'}
-              onSubmitEditing={onCalculateCost}
-            />
+          <View style={styles.inputRow}>
+            <View style={styles.inputWrapper}>
+              <CurrencyInput
+                value={price}
+                onChange={setPrice}
+                minValue={0}
+                maxValue={100000000}
+                placeholder={'0'}
+                onSubmitEditing={onCalculateCost}
+                currency="đ/kWh"
+                wrapperStyle={styles.currencyInputNoBorder}
+              />
+            </View>
             <Button
               type="primary"
               title={t('calculate_cost')}
+              height={42}
               onPress={onCalculateCost}
               style={styles.buttonCalculate}
-              textSemiBold={false}
+              textSemiBold={true}
               accessibilityLabel={AccessibilityLabel.BUTTON_CALCULATE_COST}
             />
           </View>
         </View>
+      )}
 
+      <View style={styles.chartCard}>
         {renderChart}
         {!!chartConfig.price && (
-          <Text type="H4">
-            {t('total_power_price')}{' '}
-            <Text bold accessibilityLabel={AccessibilityLabel.TOTAL_PRICE}>
+          <View style={styles.totalPriceRow}>
+            <Text style={styles.totalLabel}>{t('total_power_price')}</Text>
+            <Text
+              style={styles.totalValue}
+              accessibilityLabel={AccessibilityLabel.TOTAL_PRICE}
+            >
               {formatMoney(totalPrice)}
             </Text>
-          </Text>
+          </View>
         )}
       </View>
-    );
-  }
-);
+    </View>
+  );
+};
 
-export default PowerConsumptionChart;
+export default React.memo(PowerConsumptionChart);
 
 const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    marginBottom: 8,
+  },
   historyView: {
-    paddingTop: 16,
+    paddingTop: 0,
   },
   titleHistory: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
-  chartInfo: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
+  dateTimeRange: {
+    justifyContent: 'flex-end',
+    marginTop: 12,
+    marginLeft: 6,
+    flex: 1,
   },
-  chartContainer: {
-    marginLeft: -8,
+  calculateCostCard: {
+    backgroundColor: Colors.LightPrimary,
+    borderRadius: 8,
+    padding: 16,
+    marginTop: 16,
   },
-  chart: {
-    height: 300,
+  title: {
+    fontSize: 14,
+    fontWeight: 'normal',
+    color: Colors.Primary,
+    marginBottom: 12,
   },
-  wrapCalculateCost: {
-    marginTop: 12,
-  },
-  row: {
+  inputRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: 8,
+    gap: 12,
+  },
+  inputWrapper: {
+    flex: 1,
+    backgroundColor: Colors.White,
+    borderWidth: 1,
+    borderColor: Colors.Cyan2,
+    borderRadius: 8,
+    height: 42,
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  currencyInputNoBorder: {
+    borderBottomWidth: 0,
   },
   buttonCalculate: {
     width: null,
     flex: null,
-    paddingHorizontal: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+  },
+  chartCard: {
+    backgroundColor: Colors.White,
+    borderRadius: 12,
+    padding: 12,
+    marginTop: 16,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  totalPriceRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingTop: 16,
+    marginTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: Colors.Gray4,
+  },
+  totalLabel: {
+    fontSize: 14,
+    color: Colors.Gray8,
+  },
+  totalValue: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: Colors.Primary,
+  },
+  label: {
+    fontSize: 18,
+    fontWeight: '700',
+    flex: 1,
+    marginRight: 8,
+  },
+  loadingWrapper: {
+    height: 150,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });

package/src/commons/Form/CurrencyInput.js

@@ -1,14 +1,13 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import {
-  View,
-  TextInput,
   StyleSheet,
+  TextInput,
   TouchableWithoutFeedback,
-  Platform,
+  View,
 } from 'react-native';
-import Text from '../Text';
 import { Colors } from '../../configs';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
+import Text from '../Text';
 
 const formatNumber = (input, options) => {
   const {
@@ -44,12 +43,13 @@ const formatNumber = (input, options) => {
 const CurrencyInput = ({
   value,
   onChange,
-  currency = 'đ',
+  currency,
   minValue,
   maxValue,
   precision = 0,
   placeholder,
   onSubmitEditing,
+  wrapperStyle,
 }) => {
   const [startingWithSign, setStartingWithSign] = useState();
   const noNegativeValues = typeof minValue === 'number' && minValue >= 0;
@@ -119,16 +119,9 @@ const CurrencyInput = ({
       : formattedValue;
   }, [formattedValue, startingWithSign]);
 
-  const currencyMarginLeft = useMemo(() => {
-    if (Platform.OS === 'ios') {
-      return 5;
-    }
-    return textInputValue.toString().length < 2 ? -12 : 0;
-  }, [textInputValue]);
-
   return (
     <TouchableWithoutFeedback onPress={focusInput}>
-      <View style={styles.wrap}>
+      <View style={[styles.wrap, wrapperStyle]}>
         <TextInput
           ref={inputRef}
           value={textInputValue}
@@ -140,10 +133,7 @@ const CurrencyInput = ({
           maxLength={10}
           accessibilityLabel={AccessibilityLabel.INPUT_CALCULATE_COST}
         />
-        <Text
-          semibold
-          style={[{ marginLeft: currencyMarginLeft }, styles.currency]}
-        >
+        <Text semibold style={styles.currency}>
           {currency}
         </Text>
       </View>
@@ -164,6 +154,7 @@ const styles = StyleSheet.create({
   input: {
     fontSize: 16,
     lineHeight: 24,
+    flex: 1,
   },
   currency: {
     fontSize: 16,