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

package/README.md

@@ -24,6 +24,15 @@ import SmartCity, {
   AddUnitStack,
   SharedStack,
   Explore,
+  SCProvider,
+  SCContext,
+  AddLGDeviceStack,
+  initSCConfig,
+  AutomateStack,
+  NotificationStack,
+  MyPinnedSharedUnit,
+  SharedUnit,
+  MyUnit,
 } from '@eohjsc/react-native-smart-city';
 import { createStackNavigator } from '@react-navigation/stack';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.47",
+  "version": "0.2.51",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -39,12 +39,16 @@
     "reset-cache": "react-native start --reset-cache",
     "merge_conflict": "yarn jest && yarn update_coverage_result && yarn check_coverage_config",
     "jest": "jest --detectOpenHandles",
-    "postinstall": "patch-package",
+    "postinstall": "npx husky install",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
     "build": "sync-files ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src"
+    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
+    "test:code-formatter": "prettier src/**/**/*.js --write",
+    "test:code-formatter-step-1": "prettier --check src/**/*.js",
+    "test:code-formatter-step-2": "prettier --check src/**/**/*.js",
+    "test:code-formatter-step-3": "prettier --check src/**/**/**/*.js"
   },
   "repository": {
     "type": "git",
@@ -82,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",
@@ -159,6 +163,7 @@
     "react-native-gesture-handler": "^1.7.0",
     "react-native-get-location": "^2.0.0",
     "react-native-image-picker": "^3.1.4",
+    "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",
     "react-native-keyboard-aware-scroll-view": "^0.9.2",
@@ -201,6 +206,21 @@
     "validator": "^13.1.1",
     "victory-native": "^35.0.1"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "pre-push": "yarn jest"
+    }
+  },
+  "lint-staged": {
+    "*.{js, ts}": [
+      "yarn lint",
+      "yarn test:code-formatter",
+      "yarn test:code-formatter-step-1",
+      "yarn test:code-formatter-step-2",
+      "yarn test:code-formatter-step-3"
+    ]
+  },
   "bugs": {
     "url": "https://github.com/github_account/react-native-smart-city/issues"
   },

package/src/commons/Dashboard/MyPinnedSharedUnit/styles.js

@@ -1,5 +1,5 @@
 import { Dimensions, StyleSheet } from 'react-native';
-import { Colors } from 'configs';
+import { Colors } from '../../../configs';
 
 const { width: widthScreen } = Dimensions.get('window');
 

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