@eohjsc/react-native-smart-city 0.2.50 → 0.2.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -39,6 +39,7 @@
     "reset-cache": "react-native start --reset-cache",
     "merge_conflict": "yarn jest && yarn update_coverage_result && yarn check_coverage_config",
     "jest": "jest --detectOpenHandles",
+    "postinstall": "npx husky install",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
@@ -85,7 +86,7 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-native": "^3.10.0",
     "factory-girl": "^5.0.4",
-    "husky": "^2.4.1",
+    "husky": "^2.7.0",
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
     "jetifier": "^1.6.6",

package/src/commons/Device/HistoryChart.js

@@ -1,14 +1,18 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useState, useMemo } from 'react';
 import { StyleSheet, View, Dimensions } from 'react-native';
 import moment from 'moment';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
+import TextInput from '../../commons/Form/TextInput';
+import Button from '../../commons/Button';
 import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import LinearChart from './LinearChart';
+import ThreeButtonHistory from '../ThreeButtonHistory';
+import { formatMoney } from '../../utils/Utils';
 
 export const dateTimeType = {
   date: 'date',
@@ -21,12 +25,15 @@ const { width } = Dimensions.get('window');
 const HistoryChart = memo(
   ({
     datas,
-    unit,
+    chartConfig,
+    setChartConfig,
     style,
     formatType,
     startDate,
+    endDate,
     setEndDate,
     setStartDate,
+    setGroupBy,
     configuration,
   }) => {
     const t = useTranslations();
@@ -42,6 +49,9 @@ const HistoryChart = memo(
       startTime: startDate ? startDate : moment().subtract(1, 'day').valueOf(),
       endTime: dateNow,
     });
+    const [price, setPrice] = useState('');
+    const [priceDisplay, setPriceDisplay] = useState('');
+
     const onStart = useCallback(() => {
       setEventPicker({
         ...eventPicker,
@@ -126,6 +136,40 @@ const HistoryChart = memo(
       },
       [chartOptions]
     );
+
+    const onChangePrice = useCallback(
+      (input) => {
+        const validInput = input.replace(/\D/g, '');
+        setPrice(validInput);
+        setPriceDisplay(validInput);
+      },
+      [setPrice, setPriceDisplay]
+    );
+    const onPriceFocus = useCallback(() => {
+      setPriceDisplay(price);
+    }, [price]);
+    const onPriceBlur = useCallback(() => {
+      setPriceDisplay(price !== '' ? formatMoney(price) : '');
+    }, [price]);
+    const onCalculateCost = useCallback(() => {
+      setChartConfig((config) => ({
+        ...config,
+        price,
+      }));
+    }, [setChartConfig, price]);
+
+    const totalPrice = useMemo(() => {
+      if (configuration.config !== 'power_consumption') {
+        return null;
+      }
+      const { price } = chartConfig;
+      if (price === '' || isNaN(price)) {
+        return null;
+      }
+      const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
+      return sum * price;
+    }, [configuration, datas, chartConfig]);
+
     const renderChart = useCallback(() => {
       if (configuration.type === 'line_chart') {
         return (
@@ -137,7 +181,7 @@ const HistoryChart = memo(
         );
       }
       if (configuration.type === 'horizontal_bar_chart') {
-        return <HorizontalBarChart unit={unit} datas={datas} />;
+        return <HorizontalBarChart datas={datas} config={chartConfig} />;
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [configuration, datas, chartOptions, onShowOneChart]);
@@ -145,19 +189,66 @@ const HistoryChart = memo(
     return (
       <View style={style}>
         <View style={styles.historyView}>
-          <Text size={20} semibold color={Colors.Gray9}>
-            {t('history')}
-          </Text>
-          <DateTimeRangeChange
-            startTime={eventPicker.startTime}
-            onStart={onStart}
-            onEnd={onEnd}
-            endTime={eventPicker.endTime}
-            date={dateNow}
-            formatType={formatType}
-          />
+          <View style={styles.titleHistory}>
+            <Text size={20} semibold color={Colors.Gray9}>
+              {t('history')}
+            </Text>
+            {configuration.type === 'horizontal_bar_chart' && (
+              <ThreeButtonHistory
+                setStartDate={setStartDate}
+                setEndDate={setEndDate}
+                setGroupBy={setGroupBy}
+                startDate={startDate}
+                endDate={endDate}
+              />
+            )}
+          </View>
+          {configuration.type !== 'horizontal_bar_chart' && (
+            <DateTimeRangeChange
+              startTime={eventPicker.startTime}
+              onStart={onStart}
+              onEnd={onEnd}
+              endTime={eventPicker.endTime}
+              date={dateNow}
+              formatType={formatType}
+              inline={false}
+            />
+          )}
         </View>
+        {configuration.config === 'power_consumption' && (
+          <View style={styles.wrapCalculateCost}>
+            <Text type="H4">
+              {t('input_price_to_calculate_electricity_cost')}
+            </Text>
+            <View style={styles.row}>
+              <TextInput
+                onFocus={onPriceFocus}
+                onBlur={onPriceBlur}
+                value={priceDisplay}
+                onChange={onChangePrice}
+                onSubmitEditing={onCalculateCost}
+                placeholder={'0đ'}
+                keyboardType="numeric"
+                textInputStyle={styles.textInput}
+                wrapStyle={styles.wrapTextInput}
+                borderBottomOnly
+              />
+              <Button
+                type="primary"
+                title={t('calculate_cost')}
+                onPress={onCalculateCost}
+                style={styles.buttonCalculate}
+                textSemiBold={false}
+              />
+            </View>
+          </View>
+        )}
         {renderChart()}
+        {configuration.config === 'power_consumption' && !!chartConfig.price && (
+          <Text type="H4">
+            {t('total_power_price')} <Text bold>{formatMoney(totalPrice)}</Text>
+          </Text>
+        )}
         <DateTimePickerModal
           isVisible={eventPicker.showModalStart}
           date={eventPicker.startTime}
@@ -185,6 +276,11 @@ const styles = StyleSheet.create({
   historyView: {
     paddingTop: 16,
   },
+  titleHistory: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
   chartInfo: {
     flexDirection: 'row',
     justifyContent: 'center',
@@ -196,4 +292,27 @@ const styles = StyleSheet.create({
   chart: {
     height: 300,
   },
+  wrapCalculateCost: {
+    marginTop: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  wrapTextInput: {
+    flex: 1,
+    marginRight: 16,
+  },
+  textInput: {
+    marginTop: 0,
+    paddingTop: 0,
+    paddingLeft: 0,
+    fontSize: 18,
+    lineHeight: 24,
+  },
+  buttonCalculate: {
+    width: null,
+    flex: null,
+    paddingHorizontal: 12,
+  },
 });

package/src/commons/Device/HorizontalBarChart.js

@@ -5,7 +5,7 @@ import HighchartsReactNative from '@highcharts/highcharts-react-native/src/Highc
 import { Colors } from '../../configs';
 import { getMaxValueIndex } from '../../utils/chartHelper/getMaxValueIndex';
 
-const HorizontalBarChart = memo(({ datas, unit }) => {
+const HorizontalBarChart = memo(({ datas, config }) => {
   const dataY = datas[0].data.map((item, index) => {
     return {
       color: index % 2 === 0 ? Colors.Primary + '20' : Colors.Primary + '16',
@@ -18,6 +18,7 @@ const HorizontalBarChart = memo(({ datas, unit }) => {
   }, [dataX]);
   const maxY = getMaxValueIndex(dataY);
   dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });
+
   // eslint-disable-next-line no-unused-vars
   const chartOptions = {
     chart: {
@@ -48,7 +49,7 @@ const HorizontalBarChart = memo(({ datas, unit }) => {
       {
         marker: { enabled: true },
         color: Colors.Primary + '50',
-        name: datas[0].measure,
+        name: JSON.stringify(config),
         data: dataY,
       },
     ],
@@ -76,7 +77,33 @@ const HorizontalBarChart = memo(({ datas, unit }) => {
       bar: {
         dataLabels: {
           enabled: true,
-          format: `{point.y} ${unit}`,
+          useHTML: true,
+          formatter: function () {
+            const { unit, price } = JSON.parse(this.series.name);
+            const textColor = this.color === '#00979D' ? '#FFFFFF' : '#262626';
+            const valueStyle = `color:${textColor};font-weight:normal;font-size:12px;`;
+            const costStyle = valueStyle + 'font-weight:bold;';
+
+            let label = `<span style="${valueStyle}">` + `${this.y}${unit}`;
+            if (price === '' || isNaN(price)) {
+              return label + '</span>';
+            }
+
+            const formatMoney = (number) => {
+              return (
+                parseInt(number, 10)
+                  .toFixed(0)
+                  .toString()
+                  .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.') + 'đ'
+              );
+            };
+            return (
+              label +
+              `/<span style="${costStyle}">` +
+              formatMoney(this.y * price) +
+              '</span></span>'
+            );
+          },
           align: 'right',
         },
         labels: {

package/src/commons/Device/LinearChart.js

@@ -51,15 +51,10 @@ const chartOptions = {
         const time = new Date(this.value || value);
         let date = ('0' + time.getDate()).slice(-2);
         let month = ('0' + (time.getMonth() + 1)).slice(-2);
-        let hours = ('0' + time.getHours()).slice(-2);
-        let minutes = ('0' + time.getMinutes()).slice(-2);
-        if (hours === '00' && minutes === '00') {
-          return `${date}.${month}`;
-        }
-        return `${hours}:${minutes}`;
+        return `${date}.${month}`;
       },
     },
-    minRange: 3600 * 1000,
+    minRange: 3600 * 24 * 1000,
   },
   plotOptions: {
     series: {

package/src/commons/ThreeButtonHistory/CalendarHeader.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  View,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Image,
+} from 'react-native';
+import Text from '../Text';
+import { Images } from '../../configs';
+import styles from './CalendarHeaderStyles';
+
+const CalendarHeader = ({
+  currentMonth,
+  onAddMonth,
+  onSubtractMonth,
+  onPressTitle,
+}) => {
+  return (
+    <View style={styles.wrap}>
+      <TouchableOpacity onPress={onSubtractMonth} style={styles.button}>
+        <Image source={Images.arrowLeft} />
+      </TouchableOpacity>
+      <TouchableWithoutFeedback onPress={onPressTitle}>
+        <Text type="H4" bold>
+          {currentMonth.format('MMMM YYYY')}
+        </Text>
+      </TouchableWithoutFeedback>
+      <TouchableOpacity onPress={onAddMonth} style={styles.button}>
+        <Image source={Images.arrowLeft} style={styles.arrow} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default CalendarHeader;

package/src/commons/ThreeButtonHistory/CalendarHeaderStyles.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+  },
+  arrow: {
+    transform: [{ rotate: '180deg' }],
+  },
+  button: {
+    padding: 8,
+  },
+});

package/src/commons/ThreeButtonHistory/SelectMonth.js

@@ -0,0 +1,53 @@
+import React, { memo, useMemo, useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import moment from 'moment';
+
+import Text from '../Text';
+import styles from './SelectMonthStyles';
+import { Colors } from '../../configs';
+
+const SelectMonth = memo(({ selectedMonth, setSelectedMonth }) => {
+  const months = useMemo(() => {
+    return Array.from({ length: 12 }, (_, i) => moment(selectedMonth).month(i));
+  }, [selectedMonth]);
+
+  const MonthItem = useCallback(
+    ({ month }) => {
+      const isSelected = month.isSame(selectedMonth, 'month');
+      const isDisabled = month.isAfter(moment(), 'month');
+      const textColor = isSelected
+        ? Colors.White
+        : isDisabled
+        ? Colors.Gray6
+        : Colors.Gray9;
+      const backgroundColor = isSelected ? Colors.Primary : Colors.Transparent;
+
+      const onPress = () => setSelectedMonth(month);
+
+      return (
+        <View style={styles.wrapItem}>
+          <TouchableOpacity
+            onPress={onPress}
+            disabled={isDisabled}
+            style={[styles.item, { backgroundColor }]}
+          >
+            <Text color={textColor} semibold>
+              {month.format('MMM')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      );
+    },
+    [selectedMonth, setSelectedMonth]
+  );
+
+  return (
+    <View style={styles.wrap}>
+      {months.map((month, index) => (
+        <MonthItem key={index} month={month} />
+      ))}
+    </View>
+  );
+});
+
+export default SelectMonth;

package/src/commons/ThreeButtonHistory/SelectMonthStyles.js

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { Constants } from '../../configs';
+
+const marginItem = 40;
+const marginHorizontal = 24;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem * 2) / 3;
+const heightItem = (widthItem / 36) * 16;
+
+export default StyleSheet.create({
+  wrap: {
+    marginHorizontal: 24,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+  },
+  wrapItem: {
+    width: widthItem,
+    height: heightItem,
+    marginBottom: 4,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  item: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+  },
+});

package/src/commons/ThreeButtonHistory/__test__/SelectMonth.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import SelectMonth from '../SelectMonth';
+import moment from 'moment';
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+test('test SelectMonth', () => {
+  let tree;
+  const mockSetSelectedMonth = jest.fn();
+  const currentMonth = moment();
+
+  act(() => {
+    tree = create(
+      <SelectMonth
+        selectedMonth={currentMonth}
+        setSelectedMonth={mockSetSelectedMonth}
+      />
+    );
+  });
+  const instance = tree.root;
+  const monthItems = instance.findAllByType(TouchableOpacity);
+  expect(monthItems).toHaveLength(12);
+
+  for (let i = 0; i < 12; i++) {
+    act(() => {
+      monthItems[i].props.onPress();
+    });
+    expect(mockSetSelectedMonth).toBeCalledWith(moment(currentMonth).month(i));
+  }
+});

package/src/commons/ThreeButtonHistory/__test__/ThreeButtonHistory.test.js

@@ -0,0 +1,231 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import ThreeButtonHistory from '../index';
+import moment from 'moment';
+import SelectMonth from '../SelectMonth';
+import { TESTID } from '../../../configs/Constants';
+import { TouchableOpacity } from 'react-native';
+import CalendarHeader from '../CalendarHeader';
+import ViewButtonBottom from '../../ViewButtonBottom';
+import BottomSheet from '../../BottomSheet';
+import styles from '../styles';
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ThreeButtonHistory {...props} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+describe('test ThreeButtonHistory', () => {
+  Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
+  let tree;
+  let props;
+  const startDate = moment().add(-7, 'days').valueOf();
+  const endDate = moment().valueOf();
+  const mockSetStartDate = jest.fn();
+  const mockSetEndDate = jest.fn();
+  const mockSetGroupBy = jest.fn();
+
+  beforeEach(() => {
+    mockSetStartDate.mockClear();
+    mockSetEndDate.mockClear();
+    mockSetGroupBy.mockClear();
+    props = {
+      startDate,
+      endDate,
+      setStartDate: mockSetStartDate,
+      setEndDate: mockSetEndDate,
+      setGroupBy: mockSetGroupBy,
+    };
+  });
+
+  const openCalendar = async (instance) => {
+    const historyButtons = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.HISTORY_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(historyButtons).toHaveLength(3);
+    await act(async () => {
+      await historyButtons[2].props.onPress();
+    });
+  };
+
+  const testSelectGroupBy = async (index, groupBy) => {
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const historyButtons = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.HISTORY_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await historyButtons[index].props.onPress();
+    });
+    expect(mockSetGroupBy).toBeCalledWith(groupBy);
+  };
+
+  test('test group by date', async () => {
+    await testSelectGroupBy(2, 'date');
+  });
+
+  test('test group by week', async () => {
+    await testSelectGroupBy(0, 'week');
+  });
+
+  test('test group by month', async () => {
+    await testSelectGroupBy(1, 'month');
+  });
+
+  test('test calendar change month', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+
+    await openCalendar(instance);
+    const calendar = instance.find(
+      (el) => el.props.testID === TESTID.HISTORY_CALENDAR
+    );
+    const calendarHeader = instance.findByType(CalendarHeader);
+    expect(calendarHeader.props.currentMonth.toString()).toBe(
+      moment().toString()
+    );
+    // Click calendar title
+    await act(async () => {
+      await calendarHeader.props.onPressTitle();
+    });
+    const selectMonth = instance.findByType(SelectMonth);
+    expect(selectMonth).toBeDefined();
+    expect(calendar.props.style).toBe(styles.displayNone);
+    // Click arrow left
+    await act(async () => {
+      await calendarHeader.props.onSubtractMonth();
+    });
+    expect(calendarHeader.props.currentMonth.toString()).toBe(
+      moment().add(-1, 'month').toString()
+    );
+    // Click arrow right
+    await act(async () => {
+      await calendarHeader.props.onAddMonth();
+    });
+    expect(calendarHeader.props.currentMonth.toString()).toBe(
+      moment().toString()
+    );
+    // Click arrow right
+    await act(async () => {
+      await calendarHeader.props.onAddMonth();
+    });
+    expect(calendarHeader.props.currentMonth.toString()).toBe(
+      moment().toString()
+    ); // exceeded limit
+  });
+
+  test('test press Done', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const modal = instance.findByType(BottomSheet);
+
+    await openCalendar(instance);
+    expect(modal.props.isVisible).toBeTruthy();
+
+    const calendar = instance.find(
+      (el) => el.props.testID === TESTID.HISTORY_CALENDAR
+    );
+    const calendarHeader = instance.findByType(CalendarHeader);
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    // Click calendar title
+    await act(async () => {
+      await calendarHeader.props.onPressTitle();
+    });
+    expect(calendar.props.style).toBe(styles.displayNone);
+    // Click Done
+    await act(async () => {
+      await viewButtonBottom.props.onRightClick();
+    });
+    expect(calendar.props.style).not.toBe(styles.displayNone);
+    // Click Done
+    await act(async () => {
+      await viewButtonBottom.props.onRightClick();
+    });
+    expect(mockSetStartDate).toBeCalled();
+    expect(mockSetEndDate).toBeCalled();
+    expect(modal.props.isVisible).toBeFalsy();
+  });
+
+  test('test press Cancel', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const modal = instance.findByType(BottomSheet);
+
+    await openCalendar(instance);
+    expect(modal.props.isVisible).toBeTruthy();
+
+    const calendar = instance.find(
+      (el) => el.props.testID === TESTID.HISTORY_CALENDAR
+    );
+    const calendarHeader = instance.findByType(CalendarHeader);
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    // Click calendar title
+    await act(async () => {
+      await calendarHeader.props.onPressTitle();
+    });
+    expect(calendar.props.style).toBe(styles.displayNone);
+    // Click Cancel
+    await act(async () => {
+      await viewButtonBottom.props.onLeftClick();
+    });
+    expect(calendar.props.style).not.toBe(styles.displayNone);
+    // Click Cancel
+    await act(async () => {
+      await viewButtonBottom.props.onLeftClick();
+    });
+    expect(modal.props.isVisible).toBeFalsy();
+  });
+
+  test('test calendar select date range', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+
+    await openCalendar(instance);
+    const calendar = instance.find(
+      (el) => el.props.testID === TESTID.HISTORY_CALENDAR
+    );
+
+    const selectDate = async (date) => {
+      await act(async () => {
+        await calendar.props.onDayPress({ dateString: date });
+      });
+    };
+    await selectDate('2021-09-20');
+    await selectDate('2021-09-02');
+    await selectDate('2021-09-09');
+    await selectDate('2021-09-10');
+    await selectDate('2021-09-05');
+    await selectDate('2021-09-05');
+    await selectDate('2021-09-20');
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    await act(async () => {
+      await viewButtonBottom.props.onRightClick();
+    });
+    expect(mockSetStartDate).toBeCalledWith(moment('2021-09-10').valueOf());
+    expect(mockSetEndDate).toBeCalledWith(moment('2021-09-20').valueOf());
+  });
+});

package/src/commons/ThreeButtonHistory/index.js

@@ -0,0 +1,281 @@
+import React, { memo, useCallback, useState, useMemo, useRef } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { Calendar } from 'react-native-calendars';
+import moment from 'moment';
+
+import Text from '../../commons/Text';
+import BottomSheet from '../../commons/BottomSheet';
+import SelectMonth from './SelectMonth';
+import CalendarHeader from './CalendarHeader';
+import ViewButtonBottom from '../ViewButtonBottom';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import { Colors } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import styles from './styles';
+
+const ThreeButtonHistory = memo(
+  ({ startDate, endDate, setEndDate, setStartDate, setGroupBy }) => {
+    const t = useTranslations();
+    const calendarRef = useRef();
+    const [selectedIndex, setSelectedIndex] = useState(2);
+    const [isShowDate, setIsShowDate] = useState(false);
+    const [selectedStart, setSelectedStart] = useState(
+      moment(startDate).format('YYYY-MM-DD')
+    );
+    const [selectedEnd, setSelectedEnd] = useState(
+      moment(endDate).format('YYYY-MM-DD')
+    );
+
+    const [showSelectMonth, setShowSelectMonth] = useState(false);
+    const [currentMonth, setCurrentMonth] = useState(moment());
+
+    const listItem = useMemo(
+      () => [
+        {
+          id: 1,
+          dateTitle: '7D',
+        },
+        {
+          id: 2,
+          dateTitle: '1M',
+        },
+        {
+          id: 3,
+          dateTitle: (
+            <View style={styles.paddingTop2}>
+              <IconOutline
+                name="calendar"
+                color={selectedIndex === 2 ? Colors.Primary : Colors.Gray8}
+                size={21}
+              />
+            </View>
+          ),
+        },
+      ],
+      [selectedIndex]
+    );
+
+    const onPressCancel = useCallback(() => {
+      if (showSelectMonth) {
+        setShowSelectMonth(false);
+        return;
+      }
+      setIsShowDate(false);
+    }, [showSelectMonth, setShowSelectMonth]);
+
+    const onPressDone = useCallback(() => {
+      if (showSelectMonth) {
+        setShowSelectMonth(false);
+        return;
+      }
+      if (selectedStart === null || selectedEnd === null) {
+        return;
+      }
+      setIsShowDate(false);
+      setStartDate(moment(selectedStart).valueOf());
+      setEndDate(moment(selectedEnd).valueOf());
+    }, [
+      setStartDate,
+      selectedStart,
+      setEndDate,
+      selectedEnd,
+      showSelectMonth,
+      setShowSelectMonth,
+    ]);
+
+    const onDayPress = useCallback(
+      (date) => {
+        const selectedDate = date.dateString;
+        if (selectedDate === selectedStart) {
+          setSelectedStart(null);
+          return;
+        }
+        if (selectedDate === selectedEnd) {
+          setSelectedEnd(null);
+          return;
+        }
+        if (selectedStart !== null && selectedEnd !== null) {
+          return;
+        }
+        if (selectedEnd === null) {
+          setSelectedEnd(selectedDate);
+        } else {
+          if (moment(selectedDate).isAfter(selectedEnd, 'date')) {
+            setSelectedStart(selectedEnd);
+            setSelectedEnd(selectedDate);
+          } else {
+            setSelectedStart(selectedDate);
+          }
+        }
+      },
+      [selectedStart, selectedEnd]
+    );
+
+    const onPressItemButton = useCallback(
+      (index) => {
+        switch (index) {
+          case 0:
+            setGroupBy('week');
+            break;
+          case 1:
+            setGroupBy('month');
+            break;
+          case 2:
+            setGroupBy('date');
+            if (selectedIndex === 2) {
+              setIsShowDate(true);
+            }
+        }
+        setSelectedIndex(index);
+      },
+      [selectedIndex, setGroupBy]
+    );
+
+    const ItemButton = memo(
+      ({ dateTitle, onPress, isSelected }) => {
+        return (
+          <TouchableOpacity
+            onPress={onPress}
+            style={[styles.buttonDate, isSelected && styles.buttonDateActive]}
+            testID={TESTID.HISTORY_BUTTON}
+          >
+            <View>
+              <Text semibold color={isSelected && Colors.Primary}>
+                {dateTitle}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        );
+      },
+      [selectedIndex]
+    );
+
+    const onPressCalendarTitle = useCallback(() => {
+      setShowSelectMonth((state) => !state);
+    }, [setShowSelectMonth]);
+
+    const onAddMonth = useCallback(() => {
+      setCurrentMonth((oldMonth) => {
+        const newMonth = moment(oldMonth).add(1, 'months');
+        if (newMonth.isAfter(moment(), 'month')) {
+          return oldMonth;
+        }
+        calendarRef?.current?.addMonth(1);
+        return newMonth;
+      });
+    }, []);
+
+    const onSubtractMonth = useCallback(() => {
+      setCurrentMonth((oldMonth) => moment(oldMonth).add(-1, 'months'));
+      calendarRef?.current?.addMonth(-1);
+    }, []);
+
+    const onMonthSelected = useCallback(
+      (month) => {
+        setCurrentMonth((oldMonth) => {
+          const monthDiff = month.month() - oldMonth.month();
+          calendarRef?.current?.addMonth(monthDiff);
+          return month;
+        });
+      },
+      [setCurrentMonth]
+    );
+
+    const markedDates = useMemo(() => {
+      const dates = {
+        [selectedStart]: {
+          selected: true,
+          selectedColor: Colors.Primary,
+          selectedTextColor: Colors.White,
+        },
+        [selectedEnd]: {
+          selected: true,
+          selectedColor: Colors.Primary,
+          selectedTextColor: Colors.White,
+        },
+      };
+      const currDate = moment(selectedStart).startOf('day');
+      const lastDate = moment(selectedEnd).startOf('day');
+
+      while (currDate.add(1, 'days').diff(lastDate) < 0) {
+        dates[[moment(currDate).format('YYYY-MM-DD')]] = {
+          customStyles: {
+            container: {
+              borderRadius: 0,
+              width: 60,
+              backgroundColor: Colors.Gray4,
+            },
+            text: {
+              color: Colors.Black,
+            },
+          },
+          selected: true,
+          disableTouchEvent: true,
+          color: Colors.Gray4,
+        };
+      }
+      return dates;
+    }, [selectedStart, selectedEnd]);
+
+    return (
+      <>
+        <View style={styles.historyTitleRight}>
+          {listItem &&
+            listItem.map((item, index) => {
+              return (
+                <ItemButton
+                  key={index}
+                  dateTitle={item.dateTitle}
+                  onPress={() => onPressItemButton(index)}
+                  isSelected={selectedIndex === index}
+                />
+              );
+            })}
+        </View>
+        <BottomSheet
+          isVisible={isShowDate}
+          onBackdropPress={onPressCancel}
+          style={styles.modal}
+        >
+          <View style={styles.calendar}>
+            <CalendarHeader
+              currentMonth={currentMonth}
+              onAddMonth={onAddMonth}
+              onSubtractMonth={onSubtractMonth}
+              onPressTitle={onPressCalendarTitle}
+            />
+            {showSelectMonth && (
+              <SelectMonth
+                selectedMonth={currentMonth}
+                setSelectedMonth={onMonthSelected}
+              />
+            )}
+            <Calendar
+              ref={calendarRef}
+              current={currentMonth.format('YYYY-MM-DD')}
+              style={showSelectMonth && styles.displayNone}
+              markingType={'custom'}
+              onDayPress={onDayPress}
+              maxDate={moment().format('YYYY-MM-DD')}
+              markedDates={markedDates}
+              hideArrows={true}
+              renderHeader={() => <></>}
+              testID={TESTID.HISTORY_CALENDAR}
+            />
+            <View style={styles.separator} />
+            <ViewButtonBottom
+              leftTitle={t('cancel')}
+              onLeftClick={onPressCancel}
+              rightTitle={t('done')}
+              onRightClick={onPressDone}
+            />
+          </View>
+        </BottomSheet>
+      </>
+    );
+  }
+);
+
+export default ThreeButtonHistory;

package/src/commons/ThreeButtonHistory/styles.js

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native';
+import { isIphoneX } from 'react-native-iphone-x-helper';
+
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  historyTitle: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  historyTitleRight: {
+    flexDirection: 'row',
+    backgroundColor: Colors.Gray4,
+    borderRadius: 5,
+    paddingHorizontal: 2,
+  },
+  buttonDate: {
+    alignItems: 'center',
+    marginVertical: 2,
+    borderRadius: 5,
+    paddingHorizontal: 8,
+  },
+  buttonDateActive: {
+    backgroundColor: Colors.White,
+  },
+  modal: {
+    margin: 0,
+    padding: 0,
+  },
+  calendar: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    overflow: 'hidden',
+    backgroundColor: Colors.White,
+  },
+  separator: {
+    height: 1,
+    backgroundColor: Colors.Gray3,
+    marginTop: 5,
+  },
+  wrapBottomButton: {
+    height: 56 + (isIphoneX() ? 10 : 0),
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 80,
+    flexDirection: 'row',
+    marginTop: -10,
+  },
+  button: {
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  paddingTop2: {
+    paddingTop: 2,
+  },
+  displayNone: {
+    display: 'none',
+  },
+});

package/src/configs/Constants.js

@@ -568,6 +568,10 @@ export const TESTID = {
   // ActivityLog
   FILTER_BUTTON: 'FILTER_BUTTON',
   ITEM_USER_FILTER: 'ITEM_USER_FILTER',
+
+  // ThreeButtonHistory
+  HISTORY_BUTTON: 'HISTORY_BUTTON',
+  HISTORY_CALENDAR: 'HISTORY_CALENDAR',
 };
 
 export const NOTIFICATION_TYPES = {

package/src/screens/AddNewOneTap/__test__/AddNewOneTap.test.js

@@ -108,7 +108,16 @@ describe('test AddNewOneTap', () => {
         id: 1,
       },
       isCreateScriptSuccess: true,
-      automate: {},
+      automate: {
+        id: 1,
+        script: {
+          id: 1,
+          name: 'William Miller',
+        },
+        type: 'one_tap',
+        unit: 1,
+        weekday_repeat: [],
+      },
       isAutomateTab: false,
       isMultiUnits: false,
     });

package/src/screens/AddNewOneTap/index.js

@@ -46,10 +46,10 @@ const AddNewOneTap = memo(({ route }) => {
         id: data.id,
         name: name,
         type: type,
-        automate,
+        automate: { ...automate, ...data },
         havePermission: true,
         isCreateScriptSuccess: true,
-        isAutomateTab: automateId ? false : isAutomateTab,
+        isAutomateTab: isAutomateTab,
         isMultiUnits,
       });
     }
@@ -59,8 +59,8 @@ const AddNewOneTap = memo(({ route }) => {
     type,
     name,
     automateData,
-    automateId,
     automate,
+    automateId,
     navigate,
     isAutomateTab,
   ]);

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

@@ -141,13 +141,20 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
     moment().subtract(7, 'days').valueOf()
   );
   const [endDate, setEndDate] = useState(moment().valueOf());
+  const [groupBy, setGroupBy] = useState('date');
   const [getData, setData] = useState({});
+  const [chartConfig, setChartConfig] = useState({
+    unit: 'kWh',
+    price: '',
+  });
+
   useEffect(() => {
     const fetchData = async () => {
       let params = new URLSearchParams();
       params.append('config', listConfigs.total_power);
-      params.append('date_from', new Date(startDate).setHours(0, 0) / 1000);
-      params.append('date_to', new Date(endDate).setHours(23, 59) / 1000);
+      params.append('group_by', groupBy);
+      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.POWER_CONSUME.DISPLAY_HISTORY,
         {
@@ -161,7 +168,7 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
     if (listConfigs?.total_power) {
       fetchData();
     }
-  }, [startDate, endDate, listConfigs]);
+  }, [startDate, endDate, listConfigs, groupBy]);
   return (
     <>
       <Section type={'border'}>
@@ -239,13 +246,18 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
         <PMSensorIndicatior data={dataTotal} style={styles.styleTotalPower} />
         {!!getData?.length && (
           <HistoryChart
-            unit={'kWh'}
             datas={getData}
+            chartConfig={chartConfig}
+            setChartConfig={setChartConfig}
             formatType={'date'}
             startDate={startDate}
             setEndDate={setEndDate}
             setStartDate={setStartDate}
-            configuration={{ type: 'horizontal_bar_chart' }}
+            setGroupBy={setGroupBy}
+            configuration={{
+              type: 'horizontal_bar_chart',
+              config: 'power_consumption',
+            }}
           />
         )}
       </Section>

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

@@ -81,13 +81,20 @@ const PowerConsumption = memo(({ summaryDetail }) => {
     moment().subtract(7, 'days').valueOf()
   );
   const [endDate, setEndDate] = useState(moment().valueOf());
-  const [getData, setData] = useState({});
+  const [groupBy, setGroupBy] = useState('date');
+  const [getData, setData] = useState([]);
+  const [chartConfig, setChartConfig] = useState({
+    unit: 'kWh',
+    price: '',
+  });
+
   useEffect(() => {
     const fetchData = async () => {
       let params = new URLSearchParams();
       params.append('config', listConfigs.total_power);
-      params.append('date_from', new Date(startDate).setHours(0, 0) / 1000);
-      params.append('date_to', new Date(endDate).setHours(23, 59) / 1000);
+      params.append('group_by', groupBy);
+      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.POWER_CONSUME.DISPLAY_HISTORY(),
         {
@@ -101,7 +108,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
     if (listConfigs?.total_power) {
       fetchData();
     }
-  }, [startDate, endDate, listConfigs]);
+  }, [startDate, endDate, listConfigs, groupBy]);
   return (
     <>
       <Section type={'border'}>
@@ -145,13 +152,19 @@ const PowerConsumption = memo(({ summaryDetail }) => {
         <PMSensorIndicatior data={dataTotal} style={styles.styleTotalPower} />
         {!!getData?.length && (
           <HistoryChart
-            unit={'kWh'}
             datas={getData}
+            chartConfig={chartConfig}
+            setChartConfig={setChartConfig}
             formatType={'date'}
             startDate={startDate}
+            endDate={endDate}
             setEndDate={setEndDate}
             setStartDate={setStartDate}
-            configuration={{ type: 'horizontal_bar_chart' }}
+            setGroupBy={setGroupBy}
+            configuration={{
+              type: 'horizontal_bar_chart',
+              config: 'power_consumption',
+            }}
           />
         )}
       </Section>

package/src/screens/UnitSummary/index.js

@@ -133,14 +133,10 @@ const UnitSummary = memo(({ route }) => {
 export default UnitSummary;
 
 const styles = StyleSheet.create({
-  scrollView: {
-    flex: 1,
-    backgroundColor: Colors.Gray2,
-    paddingTop: 50,
-  },
   container: {
     flex: 1,
     backgroundColor: Colors.Gray2,
+    paddingBottom: 60,
   },
   textHeader: {
     color: Colors.Gray9,

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

@@ -379,6 +379,9 @@
   "saved_vehicle": "Saved Vehicle",
   "set_a_number": "Set a number",
   "text_total_power_consumption": "Total Power Consumption",
+  "input_price_to_calculate_electricity_cost": "Input price to calculate electricity cost",
+  "calculate_cost": "Calculate cost",
+  "total_power_price": "Total power price:",
   "smart_parking": "Smart Parking",
   "smart_parking_add_destination": "I would like to park near...",
   "see_nearby_parking": "See nearby parking areas",

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

@@ -412,6 +412,9 @@
   "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ụ",
+  "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",
+  "total_power_price": "Tổng giá điện:",
   "smart_parking": "Smart Parking",
   "smart_parking_add_destination": "Tôi muốn đỗ xe gần...",
   "add_card": "Thêm thẻ",