@eohjsc/react-native-smart-city 0.5.7-rc1 → 0.5.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.5.7-rc1",
+  "version": "0.5.8",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -161,7 +161,6 @@
     "react-native-bootsplash": "^2.2.5",
     "react-native-calendars": "^1.1266.0",
     "react-native-chart-kit": "^6.5.0",
-    "react-native-charts-wrapper": "^0.6.0",
     "react-native-credit-card-input": "^0.4.1",
     "react-native-crypto-aes-cbc": "^1.1.1",
     "react-native-dash": "^0.0.11",

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -51,7 +51,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
   const [isOn, setIsOn] = useState(false);
 
   const realTrigger = useCallback(
-    async (action_data, config_value) => {
+    async (action_data, config_value, interrupted) => {
       if (!action_data) {
         return;
       }
@@ -66,7 +66,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
           config_value: config_value,
         };
       }
-      await doAction(action_data, data);
+      await doAction(action_data, data, interrupted);
       if (
         is_managed_by_backend &&
         config &&
@@ -87,15 +87,15 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
   const triggerAction = useCallback(async () => {
     const action_data = isOn ? action_off_data : action_on_data;
     const config_value = isOn ? 0 : 1;
-    realTrigger(action_data, config_value);
+    realTrigger(action_data, config_value, false);
   }, [isOn, action_off_data, action_on_data, realTrigger]);
 
   const triggerOnAction = useCallback(async () => {
-    realTrigger(action_on_data, 1);
+    realTrigger(action_on_data, 1, true);
   }, [action_on_data, realTrigger]);
 
   const triggerOffAction = useCallback(async () => {
-    realTrigger(action_off_data, 0);
+    realTrigger(action_off_data, 0, true);
   }, [action_off_data, realTrigger]);
 
   useUnwatchLGDeviceConfigControl(sensor, [config]);

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -60,8 +60,8 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
   );
   const scrollViewRef = useRef();
   const sendCommand = useCallback(() => {
-    doAction(action_data, JSON.stringify({ value: value }));
     setValue('');
+    doAction(action_data, JSON.stringify({ value: value }));
   }, [doAction, action_data, value]);
 
   const onInputChange = (e) => {
@@ -85,7 +85,7 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
 
   const scrollToBottom = () => {
     setTimeout(() => {
-      scrollViewRef.current.scrollToEnd({ animated: true });
+      scrollViewRef.current?.scrollToEnd({ animated: true });
     }, 100);
   };
 
@@ -165,6 +165,8 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           value={value}
           onChange={onInputChange}
           maxLength={255}
+          returnKeyType={'done'}
+          onSubmitEditing={sendCommand}
         />
         <TouchableOpacity
           style={styles.iconAndTextOption}

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -64,9 +64,12 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
         transY={transY}
       >
         <_TextInput
+          autoFocus
           wrapStyle={styles.wrapInputStyle}
           value={value}
           onChange={onInputChange}
+          returnKeyType={'done'}
+          onSubmitEditing={onDone}
         />
       </AlertAction>
     </View>

package/src/commons/ActionGroup/__test__/OnOffButtonTemplate.test.js

@@ -122,7 +122,7 @@ describe('Test OneBigButtonTemplate', () => {
     await act(async () => {
       await button.props.onPress();
     });
-    expect(mockDoAction).toHaveBeenCalledWith(action_data, undefined);
+    expect(mockDoAction).toHaveBeenCalledWith(action_data, undefined, false);
   };
 
   it('action state on', async () => {

package/src/commons/ActionGroup/__test__/OnOffTemplate.test.js

@@ -148,7 +148,7 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await template.props.triggerAction();
     });
-    expect(mockDoAction).toHaveBeenCalledWith(actionOffData, undefined);
+    expect(mockDoAction).toHaveBeenCalledWith(actionOffData, undefined, false);
     expect(watchMultiConfigs).toBeCalledTimes(0);
   });
 
@@ -165,7 +165,7 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await template.props.triggerAction();
     });
-    expect(mockDoAction).toHaveBeenCalledWith(actionOnData, undefined);
+    expect(mockDoAction).toHaveBeenCalledWith(actionOnData, undefined, false);
   });
 
   it('template OnOffSimpleActionTemplate doAction with is_on_value and is_managed_by_backend', async () => {
@@ -180,7 +180,7 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await template.props.triggerAction();
     });
-    expect(mockDoAction).toHaveBeenCalledWith(actionOffData, undefined);
+    expect(mockDoAction).toHaveBeenCalledWith(actionOffData, undefined, false);
     expect(watchMultiConfigs).toBeCalledTimes(0);
   });
 
@@ -207,7 +207,7 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await template[0].props.triggerAction();
     });
-    expect(mockDoAction).toHaveBeenCalledWith(actionData, undefined);
+    expect(mockDoAction).toHaveBeenCalledWith(actionData, undefined, false);
   });
 
   it('render with template OnOffSimpleActionTemplate with just action_data lg_thinq', async () => {
@@ -242,7 +242,7 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       jest.runAllTimers();
     });
-    expect(mockDoAction).toHaveBeenCalledWith(actionData, undefined);
+    expect(mockDoAction).toHaveBeenCalledWith(actionData, undefined, false);
   });
 
   it('render with template OnOffSimpleActionTemplate with action_data zigbee trigger off', async () => {
@@ -272,10 +272,14 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await template[0].props.triggerAction();
     });
-    expect(mockDoAction).toHaveBeenCalledWith(actionOffData, {
-      config_id: 5,
-      config_value: 0,
-    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      actionOffData,
+      {
+        config_id: 5,
+        config_value: 0,
+      },
+      false
+    );
   });
 
   it('render with template OnOffSimpleActionTemplate with action_data zigbee trigger on', async () => {
@@ -305,10 +309,14 @@ describe('Test OnOffTemplate', () => {
     await act(async () => {
       await template[0].props.triggerAction();
     });
-    expect(mockDoAction).toHaveBeenCalledWith(actionOnData, {
-      config_id: 5,
-      config_value: 1,
-    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      actionOnData,
+      {
+        config_id: 5,
+        config_value: 1,
+      },
+      false
+    );
   });
 
   it('render with template OnOffSimpleActionTemplate with zigbee device wrong action_data', async () => {

package/src/commons/ActionGroup/__test__/index.test.js

@@ -375,14 +375,16 @@ describe('Test ActionGroup', () => {
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       actionGroup.configuration.action_on_data,
-      undefined
+      undefined,
+      true
     );
     await act(async () => {
       buttons[0].props.onPressOut();
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       actionGroup.configuration.action_off_data,
-      undefined
+      undefined,
+      true
     );
   });
 

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    width: 130,
+    width: 150,
     alignItems: 'center',
   },
   txtTime: {

package/src/commons/Form/TextInput.js

@@ -31,6 +31,7 @@ const _TextInput = ({
   onSelectionChange,
   accessibilityLabelError,
   onEndEditing,
+  returnKeyType = 'default',
 }) => {
   const errorStyle = !!errorText && styles.errorWrap;
   return (
@@ -71,6 +72,7 @@ const _TextInput = ({
         selection={selection}
         onSelectionChange={onSelectionChange}
         onEndEditing={onEndEditing}
+        returnKeyType={returnKeyType}
       />
       {extraText && extraText}
       {!!errorText && (

package/src/commons/Highcharts/index.js

@@ -1,6 +1,37 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import WebView from 'react-native-webview';
 
+const flattenText = (item, key) => {
+  let str = '';
+  if (item && typeof item === 'object' && item.length === undefined) {
+    str += flattenObject(item);
+  } else if (item && typeof item === 'object' && item.length !== undefined) {
+    str += '[';
+    item.forEach((k2) => {
+      str += `${flattenText(k2)}, `;
+    });
+    if (item.length > 0) {
+      str = str.slice(0, str.length - 2);
+    }
+    str += ']';
+  } else if (typeof item === 'string' && item.slice(0, 8) === 'function') {
+    str += `${item}`;
+  } else if (typeof item === 'string') {
+    // eslint-disable-next-line no-useless-escape
+    str += `\"${item.replace(/"/g, '\\"')}\"`;
+  } else {
+    str += `${item}`;
+  }
+  return str;
+};
+
+const flattenObject = (obj, str = '{') => {
+  Object.keys(obj).forEach(function (key) {
+    str += `${key}: ${flattenText(obj[key])}, `;
+  });
+  return `${str.slice(0, str.length - 2)}}`;
+};
+
 const Highcharts = (props) => {
   const [init] = useState(`<html>
                     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
@@ -36,11 +67,12 @@ const Highcharts = (props) => {
                         }
                         <script src="https://code.highcharts.com/modules/exporting.js"></script>
                         <script>
+                        window.chartObj = null;
                         $(function () {
                             Highcharts.setOptions(${JSON.stringify(
                               props.options
                             )});
-                            Highcharts.${
+                            window.chartObj = Highcharts.${
                               props.stock ? 'stockChart' : 'chart'
                             }('container', `);
   const [end] = useState(`           );
@@ -53,46 +85,13 @@ const Highcharts = (props) => {
                     </body>
                 </html>`);
 
-  const flattenText = (item, key) => {
-    let str = '';
-    if (item && typeof item === 'object' && item.length === undefined) {
-      str += flattenObject(item);
-    } else if (item && typeof item === 'object' && item.length !== undefined) {
-      str += '[';
-      item.forEach((k2) => {
-        str += `${flattenText(k2)}, `;
-      });
-      if (item.length > 0) {
-        str = str.slice(0, str.length - 2);
-      }
-      str += ']';
-    } else if (typeof item === 'string' && item.slice(0, 8) === 'function') {
-      str += `${item}`;
-    } else if (typeof item === 'string') {
-      // eslint-disable-next-line no-useless-escape
-      str += `\"${item.replace(/"/g, '\\"')}\"`;
-    } else {
-      str += `${item}`;
-    }
-    return str;
-  };
-
-  const flattenObject = (obj, str = '{') => {
-    Object.keys(obj).forEach(function (key) {
-      str += `${key}: ${flattenText(obj[key])}, `;
+  const concatHTML = useMemo(() => {
+    let config = JSON.stringify(props.options, (key, value) => {
+      return typeof value === 'function' ? value.toString() : value;
     });
-    return `${str.slice(0, str.length - 2)}}`;
-  };
-
-  let config = JSON.stringify(props.options, (key, value) => {
-    return typeof value === 'function' ? value.toString() : value;
-  });
-
-  config = JSON.parse(config);
-  const concatHTML = `${init}${flattenObject(config)}${end}`.replace(
-    ': }',
-    ': {}'
-  );
+    config = JSON.parse(config);
+    return `${init}${flattenObject(config)}${end}`.replace(': }', ': {}');
+  }, [end, init, props?.options]);
 
   return (
     <WebView
@@ -103,6 +102,7 @@ const Highcharts = (props) => {
       scalesPageToFit={true}
       scrollEnabled={false}
       automaticallyAdjustContentInsets={true}
+      ref={props?.setRef}
       {...props}
     />
   );

package/src/commons/SubUnit/ShortDetail.js

@@ -149,7 +149,7 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
               station={station}
             />
           );
-        } else {
+        } else if (device.use_default_template) {
           displays.push(
             <ItemDevice
               key={`sensor-${device.id}`}

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -150,6 +150,7 @@ describe('test ShortDetail Subunit', () => {
         station: {},
         status: null,
         status2: null,
+        use_default_template: true,
       },
     ];
 

package/src/commons/UnitSummary/ConfigHistoryChart/index.js

@@ -23,7 +23,7 @@ export const useFetchConfigHistory = (
   endpoint = API.CONFIG.DISPLAY_HISTORY_V3()
 ) => {
   const fetchDataDisplayHistory = useCallback(
-    async (startDate, endDate) => {
+    async (startDate, endDate, setProcessing = () => {}) => {
       if (!configs.length || !startDate || !endDate) {
         return;
       }
@@ -33,6 +33,7 @@ export const useFetchConfigHistory = (
       if (!validConfigs.length) {
         return;
       }
+      setProcessing(true);
       validConfigs.forEach((item) => {
         params.append('configs', item.id);
       });
@@ -48,6 +49,7 @@ export const useFetchConfigHistory = (
         params,
       });
       await updateConfigChart(success, data, configs, setChartData);
+      setProcessing(false);
     },
     [configs, endpoint, setChartData]
   );

package/src/configs/Constants.js

@@ -277,3 +277,11 @@ export const BUTTON_TYPE = {
   TOGGLE_BUTTON: 'toggle_button',
   PUSH_BUTTON: 'push_button',
 };
+
+export const CHART_TIME = {
+  hour: 1,
+  day: 24,
+  week: 168,
+  month: 672,
+  year: 12 * 672,
+};

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

@@ -5,15 +5,22 @@ import DateTimeRangeChange from '../../../commons/DateTimeRangeChange';
 import moment from 'moment';
 
 const ChartWrapper = memo(
-  ({ children, onChangeDate, showTime, isWidgetOrder }) => {
+  ({
+    children,
+    onChangeDate,
+    showTime,
+    isWidgetOrder,
+    periodDefault,
+    setProcessing,
+  }) => {
     const [value, setValue] = useState([
-      moment().subtract(6, 'days'),
+      moment().subtract(periodDefault, 'hour'),
       moment(),
     ]);
 
     useEffect(() => {
-      onChangeDate(value[0], value[1]);
-    }, [onChangeDate, value]);
+      onChangeDate(value[0], value[1], setProcessing);
+    }, [onChangeDate, setProcessing, value]);
 
     const selectStart = (date) => {
       setValue((state) => [date, state[1]]);

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

@@ -0,0 +1,138 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Colors } from '../../../configs';
+import Text from '../../../commons/Text';
+import Highcharts from '../../../commons/Highcharts';
+import { useConfigGlobalState } from '../../../iot/states';
+
+const chartOptions = {
+  chart: {
+    type: 'pie',
+    height: '80%',
+  },
+  credits: {
+    enabled: false,
+  },
+  exporting: {
+    enabled: false,
+  },
+  title: {
+    text: '',
+  },
+  legend: {
+    enabled: true,
+  },
+  plotOptions: {
+    pie: {
+      showInLegend: true,
+    },
+    series: {
+      type: 'pie',
+      size: '100%',
+      innerSize: '50%',
+      dataLabels: [
+        {
+          enabled: true,
+          distance: 5,
+          connectorWidth: 0,
+          style: {
+            fontWeight: 'normal',
+          },
+        },
+        {
+          enabled: true,
+          distance: -30,
+          format: '{point.y}',
+          style: {
+            fontWeight: 'normal',
+          },
+        },
+      ],
+    },
+  },
+  tooltip: {
+    format: '<b>{point.name}: {point.y}</b>',
+    shared: true,
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [],
+    },
+  ],
+};
+
+const DonutCharts = ({ item, isWidgetOrder }) => {
+  const { configuration, label } = item;
+  const { configs = [] } = configuration;
+  const [configValues] = useConfigGlobalState('configValues');
+  const [highchartsWebviewRef, setHighchartsWebviewRef] = useState(null);
+
+  const getConfigValue = useCallback(
+    (configId) => {
+      const value = configValues[configId]?.value;
+      return typeof value === 'number' ? value : 0;
+    },
+    [configValues]
+  );
+
+  useEffect(() => {
+    if (!highchartsWebviewRef) {
+      return;
+    }
+    const data = configs.map((config) => ({
+      y: getConfigValue(config.id),
+      name: config.name,
+      color: config.color,
+    }));
+
+    highchartsWebviewRef.injectJavaScript(
+      `window.chartObj.series[0].setData(${JSON.stringify(data)})`
+    );
+  }, [configs, getConfigValue, highchartsWebviewRef]);
+
+  return (
+    <View>
+      <View style={styles.titleHistory}>
+        <Text type="H3" semibold color={Colors.Gray9}>
+          {label}
+        </Text>
+      </View>
+
+      <Highcharts
+        setRef={setHighchartsWebviewRef}
+        options={chartOptions}
+        styles={styles.chartStyle}
+        webviewStyles={[
+          styles.webviewStyle,
+          isWidgetOrder && styles.widgetOrderWebview,
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  chartStyle: {
+    backgroundColor: Colors.White,
+    flex: 1,
+  },
+  titleHistory: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+  },
+  webviewStyle: {
+    flex: 1,
+    minHeight: 200,
+    height: 300,
+  },
+  widgetOrderWebview: {
+    minHeight: 200,
+    minWidth: 200,
+    width: 300,
+    height: 250,
+  },
+});
+
+export default DonutCharts;

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

@@ -24,6 +24,8 @@ import { DetailHistoryChart } from './DetailHistoryChart';
 import VisualChart from './VisualChart';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Device } from '../../../configs';
+import DonutCharts from './DonutChart';
+
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
 );
@@ -58,11 +60,11 @@ export const SensorDisplayItem = ({
   };
 
   const getData = useCallback(() => {
-    if (!item.configuration) {
+    if (!configuration) {
       return;
     }
 
-    const data = (item.configuration.configs || []).map((config) => {
+    const data = (configuration.configs || []).map((config) => {
       const configValue = configValues[config.id]?.value;
 
       const configEvaluate = evaluate[config.id] || {};
@@ -86,20 +88,14 @@ export const SensorDisplayItem = ({
     });
 
     return data.filter(Boolean);
-  }, [
-    configValues,
-    evaluate,
-    evaluateValue,
-    item.configuration,
-    value_evaluation,
-  ]);
+  }, [configValues, evaluate, evaluateValue, configuration, value_evaluation]);
 
   const getDataCircleMini = useCallback(() => {
-    if (!item?.configuration?.config?.id) {
+    if (!configuration?.config?.id) {
       return;
     }
 
-    const config = item.configuration.config;
+    const config = configuration.config;
     const configValue = configValues[config.id]?.value;
     const configEvaluate = evaluate[config.id] || {};
 
@@ -114,17 +110,11 @@ export const SensorDisplayItem = ({
     };
 
     return [{ ...config, ...value }].filter(Boolean);
-  }, [
-    configValues,
-    evaluate,
-    evaluateValue,
-    item.configuration,
-    value_evaluation,
-  ]);
+  }, [configValues, evaluate, evaluateValue, configuration, value_evaluation]);
 
   const doAction = useCallback(
-    async (action, data) => {
-      if (processing) {
+    async (action, data, interrupted = false) => {
+      if (processing && !interrupted) {
         return;
       }
       setProcessing(true);
@@ -187,7 +177,7 @@ export const SensorDisplayItem = ({
         />
       );
     case 'history':
-      if (item?.configuration?.config === 'power_consumption') {
+      if (configuration?.config === 'power_consumption') {
         return <DetailHistoryChart item={item} sensor={sensor} />;
       }
       return (
@@ -254,6 +244,8 @@ export const SensorDisplayItem = ({
               offsetTitle={offsetTitle}
             />
           );
+        case 'donut_chart_race':
+          return <DonutCharts item={item} isWidgetOrder={isWidgetOrder} />;
         default:
           return <ListQualityIndicator data={getData(item)} />;
       }

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

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import moment from 'moment/moment';
 import _ from 'lodash';
 
@@ -8,9 +14,11 @@ import { StyleSheet, View } from 'react-native';
 import { Colors } from '../../../configs';
 import ChartAggregationOption from '../../../commons/ChartAggregationOption';
 import Text from '../../../commons/Text';
-import { CHART_GROUP_TYPE } from '../../../configs/Constants';
+import { CHART_GROUP_TYPE, CHART_TIME } from '../../../configs/Constants';
 import { getDateRangeOfWeek } from '../../../utils/Utils';
 import Highcharts from '../../../commons/Highcharts';
+import { FullLoading } from '../../../commons';
+import { colorOpacity } from '../../../utils/Converter/color';
 
 const groupByTime = (format) => (x) => x[0].format(format);
 
@@ -129,6 +137,9 @@ const styles = StyleSheet.create({
     width: 300,
     height: 250,
   },
+  backgroundLoading: {
+    backgroundColor: colorOpacity(Colors.White, 0),
+  },
 });
 
 const chartOptions = {
@@ -174,13 +185,16 @@ const VisualChart = ({ item, isDemo = false, isWidgetOrder }) => {
   const {
     configs = [],
     value_type = 'raw',
-    aggregation_period,
-    date_format,
-    show_time,
+    aggregation_period = 'day',
+    date_format = 'YYYY-MM-DD HH:mm',
+    show_time = true,
+    type,
   } = configuration;
+
   const canChooseGroup = value_type !== 'raw';
   const [chartData, setChartData] = useState(configs);
   const [options, setOption] = useState(chartOptions);
+  const [processing, setProcessing] = useState(false);
   const [groupBy, setGroupBy] = useState(
     canChooseGroup ? aggregation_period : null
   );
@@ -231,7 +245,7 @@ const VisualChart = ({ item, isDemo = false, isWidgetOrder }) => {
         chart: { ...prev.chart },
         plotOptions: { ...prev.plotOptions },
       };
-      switch (configuration?.type) {
+      switch (type) {
         case CHART_TYPE_ENUM.bar_chart:
           newOption.chart.type = 'column';
           newOption.plotOptions.column = {
@@ -281,13 +295,20 @@ const VisualChart = ({ item, isDemo = false, isWidgetOrder }) => {
     });
 
     chartRef.current?.chart?.redraw();
-  }, [configuration?.type]);
+  }, [type]);
 
   useEffect(() => {
     if (!isDemo) {
       updateChart();
     }
-  }, [updateChart, chartData, item?.configuration?.configs?.length, isDemo]);
+  }, [updateChart, chartData, configs.length, isDemo]);
+
+  const getPeriodDefault = useMemo(() => {
+    if (value_type === 'raw') {
+      return CHART_TIME[aggregation_period];
+    }
+    return CHART_TIME.week;
+  }, [aggregation_period, value_type]);
 
   return (
     <View style={styles.container}>
@@ -305,11 +326,14 @@ const VisualChart = ({ item, isDemo = false, isWidgetOrder }) => {
           />
         )}
       </View>
+      {processing && <FullLoading wrapStyle={styles.backgroundLoading} />}
       <ChartWrapper
         onChangeDate={fetchDataDisplayHistory}
         dateFormat={date_format}
         showTime={show_time}
         isWidgetOrder={isWidgetOrder}
+        periodDefault={getPeriodDefault}
+        setProcessing={setProcessing}
       >
         <Highcharts
           options={options}

package/src/screens/UnitSummary/components/AirQuality/SegmentedRoundChart.js

@@ -12,19 +12,21 @@ const SegmentedRoundChart = memo(({ data }) => {
   const { id, color, title } = data || {};
   const [configValues] = useConfigGlobalState('configValues');
 
+  const getValue = configValues[id]?.value ?? '--';
+
   const renderAir = useCallback(() => {
     return (
       <SegmentedRoundDisplay
         filledArcColor={color}
-        value={configValues[id]?.value}
-        valueText={configValues[id]?.value || ''}
+        value={getValue}
+        valueText={getValue}
         totalValue={500}
         title={title}
         style={styles.segment}
         textHeader={t('text_air_quality_index')}
       />
     );
-  }, [color, configValues, id, t, title]);
+  }, [color, getValue, t, title]);
 
   return renderAir();
 });

package/src/screens/UnitSummary/components/UvIndex/SegmentedRoundChart.js

@@ -13,7 +13,7 @@ const SegmentedRoundChart = memo(({ data }) => {
   const [configValues] = useConfigGlobalState('configValues');
 
   const renderAir = useCallback(() => {
-    const getValue = configValues?.[id]?.value ?? '--';
+    const getValue = configValues[id]?.value ?? '--';
 
     return (
       <SegmentedRoundDisplay

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

@@ -116,36 +116,6 @@ const WaterQuality = memo(({ summaryDetail }) => {
           {datas.map((item) => (
             <Item {...item} key={item.id} />
           ))}
-          {/* <Item
-            title={t('Turbidity')}
-            value={summaryDetail.tur_value}
-            color={summaryDetail.tur_color}
-            des={summaryDetail.tur_status}
-            svgMain={''}
-            waterType="turbidity"
-          />
-          <Item
-            title={t('pH')}
-            value={summaryDetail.ph_value}
-            color={summaryDetail.ph_color}
-            des={summaryDetail.ph_status}
-            svgMain={''}
-            waterType="ph"
-          />
-          <Item
-            title={t('Chlorine residual')}
-            value={summaryDetail.clo_value}
-            color={summaryDetail.clo_color}
-            des={summaryDetail.clo_status}
-            svgMain={''}
-            waterType="clo"
-          />
-          <Item
-            title={t('Water temperature')}
-            value={summaryDetail.temp_value}
-            des={''}
-            svgMain={''}
-          /> */}
         </View>
       </Section>
       {showBoxHistory && (