@eohjsc/react-native-smart-city 0.3.86 → 0.3.87

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

@@ -0,0 +1,255 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import moment from 'moment/moment';
+import _ from 'lodash';
+import HighchartsReactNative from '@eohjsc/highcharts';
+
+import ChartWrapper from './ChartWrapper';
+import { useFetchConfigHistory } from '../../../commons/UnitSummary/ConfigHistoryChart';
+import { StyleSheet, View } from 'react-native';
+import { Colors } from '../../../configs';
+import ChartAggregationOption from '../../../commons/ChartAggregationOption';
+import Text from '../../../commons/Text';
+
+const groupByTime = (format) => (x) => x[0].format(format);
+
+const groupByDay = groupByTime('YYYY-MM-DD');
+const groupByMonth = groupByTime('YYYY-MM');
+const groupByYear = groupByTime('YYYY');
+const groupByWeek = groupByTime('YYYY-WW');
+const groupByHour = groupByTime('YYYY-MM-DD HH');
+
+const groupByFunc = {
+  day: groupByDay,
+  month: groupByMonth,
+  week: groupByWeek,
+  year: groupByYear,
+  hour: groupByHour,
+};
+
+export const convertLineChartData = (data = [], valueType = 'raw', groupBy) => {
+  let arr = [];
+  for (let i = 0; i < data.length; i++) {
+    arr.push([moment(data[i].x), data[i].y]);
+  }
+  if (valueType === 'raw') {
+    return arr;
+  }
+  if (groupBy) {
+    arr = _.groupBy(arr, groupByFunc[groupBy]);
+    arr = Object.entries(arr).map((x) => {
+      if (valueType === 'sum') {
+        return [moment(x[0]).valueOf(), _.sum(x[1].map((i) => i[1]))];
+      }
+      if (valueType === 'avg') {
+        return [
+          moment(x[0]).valueOf(),
+          _.sum(x[1].map((i) => i[1])) / x[1].length,
+        ];
+      }
+      /* istanbul ignore next */
+      return null;
+    });
+  }
+
+  return arr;
+};
+
+export const CHART_TYPE_ENUM = {
+  line_chart: 'line_chart',
+  bar_chart: 'bar_chart',
+  horizontal_bar_chart: 'horizontal_bar_chart',
+  stacked_bar_chart: 'stacked_bar_chart',
+  area_chart: 'area_chart',
+  scatter_chart: 'scatter_chart',
+};
+
+const styles = StyleSheet.create({
+  chartStyle: {
+    backgroundColor: Colors.White,
+    flex: 1,
+  },
+  titleHistory: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+  },
+  webviewStyle: {
+    flex: 1,
+    minHeight: 200,
+    height: 300,
+    opacity: 0.99,
+  },
+});
+
+const chartOptions = {
+  colors: ['#00979D', '#F10303', '#FFF7E6'],
+  credits: {
+    enabled: false,
+  },
+  title: {
+    text: '',
+  },
+  time: {
+    // NOTE: default is 0 for the same with server timezone
+    timezoneOffset: -7 * 60,
+  },
+  xAxis: {
+    type: 'datetime',
+    title: {
+      text: '',
+    },
+  },
+  plotOptions: {},
+  series: [],
+};
+
+const groupByOptions = [
+  { title: 'H', data: 'hour' },
+  { title: 'D', data: 'day' },
+  { title: 'W', data: 'week' },
+  { title: 'M', data: 'month' },
+  { title: 'Y', data: 'year' },
+];
+
+const VisualChart = ({ item, isDemo = false, isTemplate }) => {
+  const { configuration = {} } = item;
+  const {
+    configs = [],
+    value_type = 'raw',
+    aggregation_period,
+    date_format,
+    show_time,
+  } = configuration;
+  const canChooseGroup = value_type !== 'raw';
+  const [chartData, setChartData] = useState(configs);
+  const [options, setOption] = useState(chartOptions);
+  const [groupBy, setGroupBy] = useState(
+    canChooseGroup ? aggregation_period : null
+  );
+  const chartRef = useRef();
+
+  const fetchDataDisplayHistory = useFetchConfigHistory(configs, setChartData);
+
+  const getSeries = useCallback(() => {
+    let series = [];
+    for (let i = 0; i < chartData.length; i++) {
+      const arr = convertLineChartData(chartData[i].data, value_type, groupBy);
+
+      series.push({
+        name: chartData[i].title,
+        data: arr,
+        color: chartData[i].color,
+        states: {
+          inactive: {
+            opacity: 1,
+          },
+        },
+      });
+    }
+    return series;
+  }, [chartData, groupBy, value_type]);
+
+  const updateChart = useCallback(() => {
+    setOption((prev) => ({
+      ...prev,
+      series: getSeries(),
+    }));
+  }, [getSeries]);
+
+  useEffect(() => {
+    setOption((prev) => {
+      const newOption = {
+        ...prev,
+        chart: { ...prev.chart },
+        plotOptions: { ...prev.plotOptions },
+      };
+      switch (configuration?.type) {
+        case CHART_TYPE_ENUM.bar_chart:
+          newOption.chart.type = 'column';
+          newOption.plotOptions.column = {
+            ...chartOptions.plotOptions.column,
+            stacking: undefined,
+          };
+          break;
+        case CHART_TYPE_ENUM.horizontal_bar_chart:
+          newOption.chart.type = 'bar';
+          break;
+        case CHART_TYPE_ENUM.area_chart:
+          newOption.chart.type = 'area';
+          break;
+        case CHART_TYPE_ENUM.stacked_bar_chart:
+          newOption.chart.type = 'column';
+          newOption.plotOptions.column = {
+            ...chartOptions.plotOptions.column,
+            stacking: 'normal',
+            dataLabels: {
+              enabled: true,
+            },
+          };
+          break;
+        case CHART_TYPE_ENUM.scatter_chart:
+          newOption.chart.type = 'scatter';
+          newOption.plotOptions.scatter = {
+            ...newOption.plotOptions.scatter,
+            showInLegend: false,
+            jitter: {
+              x: 0.24,
+              y: 0,
+            },
+            marker: {
+              radius: 2,
+              symbol: 'circle',
+            },
+            tooltip: {
+              pointFormat: 'Measurement: {point.y:.3f}',
+            },
+          };
+          break;
+        default:
+          newOption.chart.type = 'line';
+          break;
+      }
+      return newOption;
+    });
+
+    chartRef.current?.chart?.redraw();
+  }, [configuration?.type]);
+
+  useEffect(() => {
+    if (!isDemo) {
+      updateChart();
+    }
+  }, [updateChart, chartData, item?.configuration?.configs?.length, isDemo]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.titleHistory}>
+        <Text size={20} semibold color={Colors.Gray9}>
+          {item.label}
+        </Text>
+        {canChooseGroup && (
+          <ChartAggregationOption
+            groupBy={groupBy}
+            setGroupBy={setGroupBy}
+            options={groupByOptions}
+          />
+        )}
+      </View>
+      <ChartWrapper
+        onChangeDate={fetchDataDisplayHistory}
+        dateFormat={date_format}
+        showTime={show_time}
+        isTemplate={isTemplate}
+      >
+        <HighchartsReactNative
+          options={options}
+          styles={styles.chartStyle}
+          webviewStyles={styles.webviewStyle}
+        />
+      </ChartWrapper>
+    </View>
+  );
+};
+
+export default VisualChart;

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

@@ -0,0 +1,440 @@
+import React from 'react';
+import MockAdapter from 'axios-mock-adapter';
+import moment from 'moment';
+import HighchartsReactNative from '@eohjsc/highcharts';
+import { act, create } from 'react-test-renderer';
+
+import VisualChart from '../VisualChart';
+import { API } from '../../../../configs';
+import { getPusher } from '../../../../utils/Pusher';
+import { flushPromises } from '../../../AllGateway/test-utils';
+import api from '../../../../utils/Apis/axios';
+import ChartAggregationOption from '../../../../commons/ChartAggregationOption';
+import DateTimeRangeChange from '../../../../commons/DateTimeRangeChange';
+
+const render = async (component) => {
+  let tree;
+  await act(async () => {
+    tree = await create(component);
+  });
+  return tree;
+};
+
+jest.mock('react-redux', () => {
+  return {
+    ...jest.requireActual('react-redux'),
+    useSelector: jest.fn(),
+  };
+});
+
+const mockAxios = new MockAdapter(api.axiosInstance);
+
+describe('Test LinearChartWidget', () => {
+  let tree;
+  beforeEach(() => {
+    mockAxios.reset();
+  });
+
+  const assertChartData = (data, expected) => {
+    const expected2 = expected.map((item) => [
+      moment(item[0]).valueOf(),
+      item[1],
+    ]);
+    expect([expected.toString(), expected2.toString()]).toContain(
+      data.toString()
+    );
+  };
+
+  it('Test render fetch data from api', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [{ x: 1000, y: 100 }],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [[moment(1000), 100]]);
+  });
+
+  it('Test render fetch data from api and cache', async () => {
+    const cacheUrl1 = 'https://s3.eoh.io/xxx1.json';
+    const cacheUrl2 = 'https://s3.eoh.io/xxx2.json';
+    const cacheUrl3 = 'https://s3.eoh.io/xxx3.json';
+    const cacheUrl4 = 'https://s3.eoh.io/xxx4.json';
+    const responseData = {
+      configs: [
+        {
+          id: 1,
+          head: [{ x: 1, y: 2 }],
+          tail: [{ x: 2, y: 3 }],
+          middle: {
+            ready: [
+              { date: '2022-03-02', url: cacheUrl1 },
+              { date: '2022-03-04', url: cacheUrl3 },
+            ],
+            not_ready: [
+              { date: '2022-03-03', url: cacheUrl2 },
+              { date: '2022-03-05', url: cacheUrl4 },
+            ],
+            channel: 'cache-xxx',
+          },
+        },
+      ],
+    };
+    mockAxios.onGet(cacheUrl1).reply(200, [{ x: 3, y: 4 }]);
+    mockAxios.onGet(cacheUrl2).reply(200, [{ x: 4, y: 5 }]);
+    mockAxios.onGet(cacheUrl3).reply(200, [{ x: 5, y: 6 }]);
+    mockAxios.onGet(cacheUrl4).reply(200, [{ x: 7, y: 8 }]);
+
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, responseData);
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [
+      [moment(1), 2],
+      [moment(3), 4],
+      [moment(5), 6],
+      [moment(2), 3],
+    ]);
+
+    await act(async () => {
+      await getPusher()
+        .subscribe('cache-xxx')
+        .trigger('caching-value-log-process', {
+          success: true,
+        });
+    });
+
+    await flushPromises();
+
+    assertChartData(chart.props.options.series[0].data, [
+      [moment(1), 2],
+      [moment(3), 4],
+      [moment(4), 5],
+      [moment(5), 6],
+      [moment(7), 8],
+      [moment(2), 3],
+    ]);
+  });
+
+  it('Test render aggregation sum', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [
+            { x: 1000, y: 100 },
+            { x: 1000 + 86400000, y: 100 },
+          ],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            value_type: 'sum',
+            aggregation_period: 'day',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [
+      ['1970-01-01', 100],
+      ['1970-01-02', 100],
+    ]);
+
+    const groupByOption = instance.findByType(ChartAggregationOption);
+
+    await act(async () => {
+      groupByOption.props.setGroupBy('month');
+    });
+    assertChartData(chart.props.options.series[0].data, [['1970-01', 200]]);
+  });
+
+  it('Test render aggregation sum', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [
+            { x: 1000, y: 100 },
+            { x: 1000, y: 100 },
+          ],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            value_type: 'sum',
+            aggregation_period: 'day',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [['1970-01-01', 200]]);
+  });
+
+  it('Test render aggregation average', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
+      configs: [
+        {
+          id: 1,
+          head: [],
+          tail: [
+            { x: 1000, y: 100 },
+            { x: 1000, y: 200 },
+          ],
+          middle: { ready: [], not_ready: [] },
+        },
+      ],
+    });
+    tree = await render(
+      <VisualChart
+        item={{
+          is_configuration_ready: true,
+          configuration: {
+            type: 'line_chart',
+            value_type: 'avg',
+            aggregation_period: 'day',
+            configs: [
+              {
+                id: 1,
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [['1970-01-01', 150]]);
+  });
+
+  it('Test render not demo', async () => {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(400);
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'line_chart',
+            configs: [
+              {
+                data: [{ x: 1000, y: 100 }],
+                title: 'xxx',
+              },
+            ],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    assertChartData(chart.props.options.series[0].data, [[moment(1000), 100]]);
+  });
+
+  it('Test render bar chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'bar_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('column');
+  });
+
+  it('Test render horizontal_bar_chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'horizontal_bar_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('bar');
+  });
+
+  it('Test render area_chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'area_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('area');
+  });
+
+  it('Test render stacked_bar_chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'stacked_bar_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('column');
+    expect(chart.props.options.plotOptions.column.stacking).toEqual('normal');
+  });
+
+  it('Test render scatter_chart', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'scatter_chart',
+            configs: [],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    const instance = tree.root;
+    const chart = instance.findByType(HighchartsReactNative);
+    expect(chart.props.options.chart.type).toEqual('scatter');
+  });
+
+  it('not fetch data if empty config', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'line_chart',
+            configs: [{}],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    expect(mockAxios.history.get).toHaveLength(0);
+  });
+
+  it('not fetch data when change date', async () => {
+    tree = await render(
+      <VisualChart
+        item={{
+          configuration: {
+            type: 'line_chart',
+            configs: [{ id: 1 }],
+          },
+          id: 1,
+          template: 'history',
+        }}
+      />
+    );
+    expect(mockAxios.history.get).toHaveLength(1);
+
+    const instance = tree.root;
+    const dateRange = instance.findByType(DateTimeRangeChange);
+    await act(async () => {
+      dateRange.props.selectStart(moment().subtract(5, 'days'));
+    });
+    expect(mockAxios.history.get).toHaveLength(2);
+
+    await act(async () => {
+      dateRange.props.selectEnd(moment().subtract(1, 'days'));
+    });
+    expect(mockAxios.history.get).toHaveLength(3);
+  });
+});

package/src/screens/EmergencyContacts/__test__/EmergencyContactsSelectContacts.test.js

@@ -70,12 +70,13 @@ describe('test EmergencyContactsSelectContacts', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const rowUser = instance.findAllByProps(
-      (item) =>
-        item.props.accessibilityLabel ===
-        AccessibilityLabel.EMERGENCY_SELECT_CONTACT + 0
-    );
-    expect(rowUser[0]).toBeDefined();
+    const rowUser = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.EMERGENCY_SELECT_CONTACT + 0,
+    });
+    await act(async () => {
+      rowUser.props.onPress();
+    });
+    expect(rowUser.props.text).toEqual('test');
   });
 
   it('test onSave emergencyContactsSelectContacts', async () => {