@eohjsc/react-native-smart-city 0.3.63 → 0.3.64

package/package.json

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

package/src/commons/Device/WindSpeed/Anemometer/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import Svg, { Path, Text, G, Circle } from 'react-native-svg';
+import Svg, { Path, Text, Circle } from 'react-native-svg';
 import { View, StyleSheet } from 'react-native';
 
 import {
@@ -28,6 +28,8 @@ const Anemometer = memo(
     };
 
     const value = data.length ? data[0].value : 0;
+    const measure = data.length ? data[0].measure : 'm/s';
+
     const radius = (size - strokeWidth) / 2;
     const viewBox = `0 0 ${width} ${width}`;
     const d = drawArc(center.x, center.y, radius, startAngle, endAngle);
@@ -35,8 +37,6 @@ const Anemometer = memo(
     const strokeAngle = (endAngle - startAngle) / numberOfSection;
     const strokeLength = (strokeAngle * circumference) / 360 - 1;
     const strokeDasharrayBg = `${strokeLength} 1`;
-    const totalAngle = (3 * PI) / 2;
-    const alpha = (value * totalAngle) / maxValue;
     const arc = circumference * 0.75;
     const offset = arc - (value / maxValue) * arc;
 
@@ -116,7 +116,6 @@ const Anemometer = memo(
       maxValue,
       txtColor,
     ]);
-    const needleAngle = -21 + (alpha / PI) * 180;
 
     return (
       <View style={styles.standard}>
@@ -145,10 +144,11 @@ const Anemometer = memo(
           />
           {textAngles()}
           <Text
-            fill={Colors.Gray8}
-            fontSize="24"
+            fill={Colors.Lime6}
+            fontSize={48}
+            fontWeight="bold"
             x={width / 2}
-            y={width / 2 + 64}
+            y={width / 2 + 16}
             textAnchor="middle"
             fontFamily={Fonts.Regular}
           >
@@ -156,30 +156,14 @@ const Anemometer = memo(
           </Text>
           <Text
             fill={Colors.Gray8}
-            fontSize="16"
+            fontSize={16}
             x={width / 2}
-            y={width / 2 + 88}
+            y={width / 2 + 64}
             textAnchor="middle"
             fontFamily={Fonts.Regular}
           >
-            m/s
+            {measure}
           </Text>
-
-          <G
-            x={width / 2 - 50}
-            y={width / 2 - 12}
-            rotation={needleAngle}
-            origin="50,10."
-          >
-            <Path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              // eslint-disable-next-line max-len
-              d="M6.75518 30.5986L46.6732 5.59447C49.7242 3.68338 53.7596 4.87054 55.2897 8.12934C56.8321 11.4146 55.1275 15.3065 51.667 16.4005L6.75518 30.5986Z"
-              fill="#595959"
-            />
-            <Circle cx={49.5} cy={10.5762} r={3.5} fill="white" />
-          </G>
         </Svg>
       </View>
     );

package/src/commons/FourButtonFilterHistory/index.js

@@ -47,7 +47,7 @@ const FourButtonFilterHistory = memo(({ groupBy, setGroupBy }) => {
 
   const onPressButton = useCallback(
     (data) => () => {
-      setGroupBy(data);
+      setGroupBy && setGroupBy(data);
     },
     [setGroupBy]
   );

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

@@ -1,17 +1,16 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
 import { DetailHistoryChart } from '../components/DetailHistoryChart';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import HistoryChart from '../../../commons/Device/HistoryChart';
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
+
 const wrapComponent = (item, sensor) => (
   <SCProvider initState={mockSCStore({})}>
     <DetailHistoryChart item={item} sensor={sensor} />
@@ -20,12 +19,28 @@ const wrapComponent = (item, sensor) => (
 describe('Test DetailHistoryChart', () => {
   let tree;
   it('create DetailHistoryChart', async () => {
+    mock
+      .onGet(API.VALUE_CONSUME.DISPLAY_HISTORY())
+      .reply(200, [{ data: [1, 2, 3] }]);
     const item = {
+      id: 10452,
+      order: 0,
+      template: 'history',
+      type: 'history',
       configuration: {
-        configs: [0],
-        icon: 'slack',
+        type: 'horizontal_bar_chart',
+        date_format: 'DD.MM',
+        configs: [
+          {
+            id: 9848,
+            title: 'horizontal',
+            color: 'blue',
+          },
+        ],
       },
+      is_configuration_ready: true,
     };
+
     const sensor = {
       name: 'Sensor name',
       is_managed_by_backend: false,

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

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import HistoryChart from '../../../commons/Device/HistoryChart';
 import { API } from '../../../configs';
@@ -7,20 +7,40 @@ import { axiosGet } from '../../../utils/Apis/axios';
 
 export const DetailHistoryChart = ({ item = {}, sensor = {} }) => {
   const { configuration = {} } = item;
-  const { configs = [] } = configuration;
-  const [chartData, setChartData] = useState(configs);
+  const { configs = [], type = '' } = configuration;
+  const [lineChartData, setLineChartData] = useState(configs);
+  const [horizontalChartData, setHorizontalChartData] = useState([]);
+  const [groupBy, setGroupBy] = useState('date');
   const [startDate, setStartDate] = useState(
-    moment().subtract(1, 'days').valueOf()
+    type === 'line_chart'
+      ? moment().subtract(1, 'days').valueOf()
+      : moment().subtract(6, 'days')
   );
-  const [endDate, setEndDate] = useState(moment().valueOf());
-  useEffect(() => {
-    const fetchData = async () => {
-      let params = new URLSearchParams();
-      configs.map((config) => {
-        params.append('config', config.id);
-      });
+  const [endDate, setEndDate] = useState(
+    type === 'line_chart' ? moment().valueOf() : moment()
+  );
+  const [chartConfig, setChartConfig] = useState({
+    unit: '',
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    let params = new URLSearchParams();
+    configs.map((config) => {
+      params.append('config', config.id);
+    });
+
+    if (type !== 'line_chart') {
+      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'));
+      }
+    } else {
       params.append('date_from', startDate / 1000);
       params.append('date_to', endDate / 1000);
+    }
+    if (type === 'line_chart') {
       const { success, data } = await axiosGet(
         API.DEVICE.DISPLAY_HISTORY(sensor.id),
         { params }
@@ -38,23 +58,53 @@ export const DetailHistoryChart = ({ item = {}, sensor = {} }) => {
           };
           return { ...config, data: dataChart.data };
         });
-        setChartData(formatData);
+        setLineChartData(formatData);
+        setIsLoading(true);
+      }
+    }
+    if (type === 'horizontal_bar_chart') {
+      const { success, data } = await axiosGet(
+        API.VALUE_CONSUME.DISPLAY_HISTORY(),
+        {
+          params,
+        }
+      );
+      if (success) {
+        setHorizontalChartData(data);
+        if (data[0]?.data) {
+          setIsLoading(true);
+        }
       }
-    };
+    }
+  }, [configs, endDate, groupBy, sensor.id, startDate, type]);
+
+  useEffect(() => {
     fetchData();
-  }, [startDate, endDate, sensor, configs]);
-  if (!chartData.length) {
+  }, [fetchData]);
+
+  if (!lineChartData?.length) {
     return false;
   }
 
   return (
-    <HistoryChart
-      configuration={item.configuration}
-      datas={chartData}
-      style={styles.chartStyle}
-      setStartDate={setStartDate}
-      setEndDate={setEndDate}
-    />
+    <>
+      {isLoading && (
+        <HistoryChart
+          configuration={item.configuration}
+          datas={type === 'line_chart' ? lineChartData : horizontalChartData}
+          setStartDate={setStartDate}
+          startDate={startDate}
+          setEndDate={setEndDate}
+          endDate={endDate}
+          groupBy={groupBy}
+          setGroupBy={setGroupBy}
+          chartConfig={chartConfig}
+          setChartConfig={setChartConfig}
+          formatType={type !== 'line_chart' && 'date'}
+          style={styles.chartStyle}
+        />
+      )}
+    </>
   );
 };