@eohjsc/react-native-smart-city 0.5.9 → 0.6.0-rc2

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

@@ -1,155 +0,0 @@
-import React, { memo } from 'react';
-import Svg, { G } from 'react-native-svg';
-import {
-  VictoryLine,
-  VictoryAxis,
-  VictoryScatter,
-  VictoryTooltip,
-} from 'victory-native';
-import { useTranslations } from '../../../../hooks/Common/useTranslations';
-
-import { Colors } from '../../../../configs';
-import ChartLoading from '../../../ChartLoading';
-import ValueBalloon from '../../../Device/WindSpeed/LinearChart/ValueBalloon';
-import { getMaxValueIndex } from '../../../../utils/chartHelper/getMaxValueIndex';
-import getTickValues from '../../../../utils/dateHelper/getTickValues';
-
-const LinearChart = memo(
-  ({
-    startTime,
-    endTime,
-    datasShow,
-    configuration,
-    datasColor,
-    chartOptions,
-  }) => {
-    const t = useTranslations();
-    const datas = chartOptions.showAll
-      ? datasShow
-      : datasShow.filter((item, index) => index === chartOptions.index);
-    if (!datasShow[0].data) {
-      return <ChartLoading />;
-    }
-    if (!datasShow[0].data.length) {
-      return <ChartLoading message={t('no_data')} />;
-    }
-    const chartTick = getTickValues(datas[0], configuration).stringArr;
-    const maxValue = getMaxValueIndex(datas[0].data);
-
-    return (
-      <Svg width={'100%'} height={300} style>
-        <G x={-12} y={-12}>
-          <VictoryAxis
-            dependentAxis
-            domain={[0, maxValue.max.y * 1.2]}
-            offsetX={50}
-            orientation="left"
-            standalone={false}
-            style={styleVerticalAxis}
-          />
-          <VictoryAxis
-            crossAxis
-            scale="time"
-            standalone={false}
-            style={styleHorizontalAxis}
-            tickValues={chartTick}
-          />
-          {datas.map((item, index) => {
-            const tickValues = getTickValues(item).arr;
-            const maxValueLine = getMaxValueIndex(item.data);
-            return (
-              <G key={index.toString()}>
-                <VictoryLine
-                  data={item.data}
-                  domain={{
-                    x: [tickValues[0], tickValues[tickValues.length - 1]],
-                    y: [0, maxValueLine.max.y * 1.2],
-                  }}
-                  style={{
-                    data: { stroke: item.color },
-                  }}
-                  interpolation="monotoneX"
-                  scale={{ x: 'time', y: 'linear' }}
-                  standalone={false}
-                />
-              </G>
-            );
-          })}
-          {datas.map((item, index) => {
-            const scatterValues = getTickValues(item).stringDataArr;
-            const maxValueLine = getMaxValueIndex(item.data);
-            return (
-              <G key={index}>
-                <VictoryScatter
-                  standalone={false}
-                  data={scatterValues}
-                  labels={(datum) => {
-                    if (item.measure === 'pH') {
-                      return `${item.measure} ${datum.y.toString()}`;
-                    }
-                    return `${datum.y.toString()} ${item.measure}`;
-                  }}
-                  labelComponent={
-                    <VictoryTooltip
-                      flyoutComponent={<ValueBalloon />}
-                      renderInPortal={false}
-                    />
-                  }
-                  domain={{ y: [0, maxValueLine.max.y * 1.2] }}
-                  samples={25}
-                  size={5}
-                  style={{ ...styleScatter, data: { fill: item.color } }}
-                />
-              </G>
-            );
-          })}
-        </G>
-      </Svg>
-    );
-  }
-);
-
-export default LinearChart;
-
-const styleVerticalAxis = {
-  axis: { stroke: Colors.Gray4, strokeWidth: 1 },
-  ticks: {
-    size: 5,
-    stroke: 'black',
-    strokeWidth: 0,
-  },
-  tickLabels: {
-    fill: Colors.Gray8,
-    fontFamily: 'SFProDisplay-Regular',
-    fontSize: 10,
-  },
-  grid: {
-    fill: 'none',
-    stroke: Colors.Gray4,
-    strokeDasharray: '5,5',
-    pointerEvents: 'painted',
-  },
-};
-
-const styleHorizontalAxis = {
-  axis: { stroke: 'black', strokeWidth: 0 },
-  ticks: {
-    size: 10,
-    stroke: 'black',
-    strokeWidth: 0,
-  },
-  tickLabels: {
-    fill: Colors.Gray8,
-    fontFamily: 'SFProDisplay-Regular',
-    fontSize: 10,
-  },
-};
-
-const styleScatter = {
-  labels: {
-    fill: Colors.White,
-    padding: 14,
-    fontFamily: 'SFProDisplay-Regular',
-    fontSize: 12,
-  },
-};

package/src/commons/UnitSummary/ConfigHistoryChart/__test__/ConfigHistoryChart.test.js

@@ -1,289 +0,0 @@
-import React from 'react';
-import { act, create } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
-
-import ConfigHistoryChart from '../';
-import api from '../../../../utils/Apis/axios';
-import { mockSCStore } from '../../../../context/mockStore';
-import { SCProvider } from '../../../../context';
-import API from '../../../../configs/API';
-import { getPusher } from '../../../../utils/Pusher';
-import Highcharts from '../../../Highcharts';
-
-const mock = new MockAdapter(api.axiosInstance);
-
-const wrapComponent = (configs = []) => (
-  <SCProvider initState={mockSCStore({})}>
-    <ConfigHistoryChart configs={configs} />
-  </SCProvider>
-);
-
-describe('Test HistoryChart', () => {
-  let tree;
-
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  beforeEach(() => {
-    getPusher().subscribe.mockClear();
-  });
-
-  const assertChartData = async (data) => {
-    const chart = tree.root.findByType(Highcharts);
-    expect(chart.props.options.series[0].data).toEqual(
-      data.map((i) => [i.x, i.y])
-    );
-  };
-
-  it('Test render null', async () => {
-    await act(async () => {
-      tree = create(wrapComponent());
-    });
-    const instance = tree.root;
-    const HistoryCharts = instance.findAllByType(Highcharts);
-    expect(HistoryCharts).toHaveLength(0);
-  });
-
-  it('Test render chart empty data', async () => {
-    const response = {
-      data: {
-        configs: [
-          {
-            id: 1,
-            head: [],
-            tail: [],
-            middle: {
-              ready: [],
-              not_ready: [],
-              channel: '',
-            },
-          },
-        ],
-      },
-    };
-    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, response.data);
-    const configs = [{ id: 1 }];
-    await act(async () => {
-      tree = await create(wrapComponent(configs));
-      jest.runAllTimers();
-    });
-    await assertChartData([]);
-  });
-
-  it('Test render chart empty head data', async () => {
-    const response = {
-      data: {
-        configs: [
-          {
-            id: 1,
-            head: [],
-            tail: [{ x: 1, y: 2 }],
-            middle: {
-              ready: [],
-              not_ready: [],
-              channel: '',
-            },
-          },
-        ],
-      },
-    };
-    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, response.data);
-    const configs = [{ id: 1 }];
-    await act(async () => {
-      tree = await create(wrapComponent(configs));
-      jest.runAllTimers();
-    });
-    await assertChartData([{ x: 1, y: 2 }]);
-  });
-
-  it('Test render chart empty tail data', async () => {
-    const response = {
-      data: {
-        configs: [
-          {
-            id: 1,
-            head: [{ x: 1, y: 2 }],
-            tail: [],
-            middle: {
-              ready: [],
-              not_ready: [],
-              channel: '',
-            },
-          },
-        ],
-      },
-    };
-    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, response.data);
-    const configs = [{ id: 1 }];
-    await act(async () => {
-      tree = await create(wrapComponent(configs));
-      jest.runAllTimers();
-    });
-    await assertChartData([{ x: 1, y: 2 }]);
-  });
-
-  it('Test render chart merge head and tail data', async () => {
-    const response = {
-      data: {
-        configs: [
-          {
-            id: 1,
-            head: [{ x: 1, y: 2 }],
-            tail: [{ x: 2, y: 3 }],
-            middle: {
-              ready: [],
-              not_ready: [],
-              channel: '',
-            },
-          },
-        ],
-      },
-    };
-    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, response.data);
-    const configs = [{ id: 1 }];
-    await act(async () => {
-      tree = await create(wrapComponent(configs));
-      jest.runAllTimers();
-    });
-    await assertChartData([
-      { x: 1, y: 2 },
-      { x: 2, y: 3 },
-    ]);
-  });
-
-  it('Test render chart merge fetch ready data', async () => {
-    const cacheUrl = 'https://s3.eoh.io/xxx.json';
-    const response = {
-      data: {
-        configs: [
-          {
-            id: 1,
-            head: [{ x: 1, y: 2 }],
-            tail: [{ x: 2, y: 3 }],
-            middle: {
-              ready: [{ date: '2022-03-03', url: cacheUrl }],
-              not_ready: [],
-              channel: '',
-            },
-          },
-        ],
-      },
-    };
-    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, response.data);
-    mock.onGet(cacheUrl).reply(200, [{ x: 3, y: 4 }]);
-    const configs = [{ id: 1 }];
-    await act(async () => {
-      tree = await create(wrapComponent(configs));
-      jest.runAllTimers();
-    });
-    await assertChartData([
-      { x: 1, y: 2 },
-      { x: 3, y: 4 },
-      { x: 2, y: 3 },
-    ]);
-  });
-
-  it('Test render chart merge fetch not-ready data', async () => {
-    const cacheUrl = 'https://s3.eoh.io/xxx.json';
-    const response = {
-      data: {
-        configs: [
-          {
-            id: 1,
-            head: [{ x: 1, y: 2 }],
-            tail: [{ x: 2, y: 3 }],
-            middle: {
-              ready: [],
-              not_ready: [{ date: '2022-03-03', url: cacheUrl }],
-              channel: 'cache-xxx',
-            },
-          },
-        ],
-      },
-    };
-    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, response.data);
-    mock.onGet(cacheUrl).reply(200, [{ x: 3, y: 4 }]);
-    const configs = [{ id: 1 }];
-    await act(async () => {
-      tree = await create(wrapComponent(configs));
-      jest.runAllTimers();
-    });
-    await assertChartData([
-      { x: 1, y: 2 },
-      { x: 2, y: 3 },
-    ]);
-    await act(async () => {
-      await getPusher()
-        .subscribe('cache-xxx')
-        .trigger('caching-value-log-process', {
-          success: true,
-        });
-    });
-    await assertChartData([
-      { x: 1, y: 2 },
-      { x: 3, y: 4 },
-      { x: 2, y: 3 },
-    ]);
-  });
-
-  it('Test render chart merge fetch both ready and not-ready data', 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 response = {
-      data: {
-        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',
-            },
-          },
-        ],
-      },
-    };
-    mock.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, response.data);
-    mock.onGet(cacheUrl1).reply(200, [{ x: 3, y: 4 }]);
-    mock.onGet(cacheUrl2).reply(200, [{ x: 4, y: 5 }]);
-    mock.onGet(cacheUrl3).reply(200, [{ x: 5, y: 6 }]);
-    mock.onGet(cacheUrl4).reply(200, [{ x: 7, y: 8 }]);
-    const configs = [{ id: 1 }];
-    await act(async () => {
-      tree = await create(wrapComponent(configs));
-      jest.runAllTimers();
-    });
-    await assertChartData([
-      { x: 1, y: 2 },
-      { x: 3, y: 4 },
-      { x: 5, y: 6 },
-      { x: 2, y: 3 },
-    ]);
-    await act(async () => {
-      await getPusher()
-        .subscribe('cache-xxx')
-        .trigger('caching-value-log-process', {
-          success: true,
-        });
-    });
-    await assertChartData([
-      { x: 1, y: 2 },
-      { x: 3, y: 4 },
-      { x: 4, y: 5 },
-      { x: 5, y: 6 },
-      { x: 7, y: 8 },
-      { x: 2, y: 3 },
-    ]);
-  });
-});

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

@@ -1,69 +0,0 @@
-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';
-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} />
-  </SCProvider>
-);
-describe('Test DetailHistoryChart', () => {
-  let tree;
-  let item = {
-    id: 10452,
-    order: 0,
-    template: 'history',
-    type: 'history',
-    configuration: {
-      type: 'horizontal_bar_chart',
-      date_format: 'DD.MM',
-      configs: [
-        {
-          id: 9848,
-          title: 'horizontal',
-          color: 'blue',
-        },
-      ],
-    },
-    is_configuration_ready: true,
-  };
-  let sensor = {
-    name: 'Sensor name',
-    is_managed_by_backend: false,
-  };
-  it('create DetailHistoryChart', async () => {
-    mock
-      .onGet(API.VALUE_CONSUME.DISPLAY_HISTORY())
-      .reply(200, [{ data: [1, 2, 3] }]);
-
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(item, sensor));
-    });
-    const instance = tree.root;
-    const historyChart = instance.findAllByType(HistoryChart);
-    expect(historyChart).toHaveLength(1);
-  });
-
-  it('create DetailHistoryChart type line_chart', async () => {
-    mock.onGet(API.DEVICE.DISPLAY_HISTORY()).reply(200, [{ data: [1, 2, 3] }]);
-    item = {
-      ...item,
-      configuration: { ...item?.configuration, type: 'line_chart' },
-    };
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(item, sensor));
-    });
-    const instance = tree.root;
-    const historyChart = instance.findAllByType(HistoryChart);
-    expect(historyChart).toHaveLength(1);
-  });
-});

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

@@ -1,118 +0,0 @@
-import moment from 'moment';
-import React, { useCallback, useEffect, useState } from 'react';
-import { StyleSheet } from 'react-native';
-import HistoryChart from '../../../commons/Device/HistoryChart';
-import { API } from '../../../configs';
-import { axiosGet } from '../../../utils/Apis/axios';
-
-export const DetailHistoryChart = ({ item = {}, sensor = {} }) => {
-  const { configuration = {} } = item;
-  const { configs = [], type = '' } = configuration;
-  const [lineChartData, setLineChartData] = useState(configs);
-  const [horizontalChartData, setHorizontalChartData] = useState([]);
-  const [groupBy, setGroupBy] = useState('date');
-  const [startDate, setStartDate] = useState(
-    type === 'line_chart'
-      ? moment().subtract(1, 'days').valueOf()
-      : moment().subtract(6, 'days')
-  );
-  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 }
-      );
-      if (success) {
-        for (let i = 0; i < data.length; i++) {
-          for (let j = 0; j < data[i].data.length; j++) {
-            data[i].data[j].x = moment(data[i].data[j].x).toDate();
-          }
-        }
-
-        const formatData = configs.map((config) => {
-          const dataChart = data.find((k) => k.config === config.id) || {
-            data: [],
-          };
-          return { ...config, data: dataChart.data };
-        });
-        setLineChartData(formatData);
-        setIsLoading(true);
-      }
-    }
-    if (type === 'horizontal_bar_chart') {
-      const { success, data } = await axiosGet(
-        API.VALUE_CONSUME.DISPLAY_HISTORY(),
-        {
-          params,
-        }
-      );
-      if (success) {
-        if (data[0]?.data) {
-          setHorizontalChartData(data);
-          setIsLoading(true);
-        } else {
-          setIsLoading(false);
-        }
-      }
-    }
-  }, [configs, endDate, groupBy, sensor.id, startDate, type]);
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-  if (!lineChartData?.length) {
-    return false;
-  }
-
-  return (
-    <>
-      {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}
-        />
-      )}
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  chartStyle: {
-    paddingHorizontal: 16,
-    marginBottom: 16,
-  },
-});

package/src/screens/UnitSummary/components/Temperature/ChartAverage/index.js

@@ -1,62 +0,0 @@
-import React, { memo } from 'react';
-import { View } from 'react-native';
-import {
-  VictoryChart,
-  VictoryLine,
-  VictoryTheme,
-  VictoryScatter,
-  VictoryGroup,
-  VictoryAxis,
-  VictoryArea,
-} from 'victory-native';
-import { Colors } from '../../../../../configs';
-
-const ChartAverage = memo(({ labels, tempData, humiData }) => {
-  const dataChartTemp = tempData;
-  const dataChartHumidity = humiData;
-  return (
-    <View style={{}}>
-      <VictoryChart
-        theme={VictoryTheme.material}
-        padding={{ top: 10, bottom: 30, left: 36, right: 36 }}
-        height={135}
-      >
-        <VictoryAxis
-          style={axisX}
-          tickFormat={(t, index) => {
-            if (index % 4 === 0) {
-              return t;
-            }
-            return null;
-          }}
-        />
-        <VictoryAxis dependentAxis style={axisY} />
-        <VictoryGroup color={'rgba(255,34,45,1)'} data={dataChartTemp}>
-          <VictoryLine />
-          <VictoryArea style={{ data: { fill: 'rgba(255,34,45,0.3)' } }} />
-          <VictoryScatter size={5} />
-        </VictoryGroup>
-        <VictoryGroup color={'rgba(24,144,255,1)'} data={dataChartHumidity}>
-          <VictoryLine />
-          <VictoryArea style={{ data: { fill: 'rgba(24,144,255,0.3)' } }} />
-          <VictoryScatter size={5} />
-        </VictoryGroup>
-      </VictoryChart>
-    </View>
-  );
-});
-
-const axisX = {
-  axis: { fill: Colors.Gray4, stroke: Colors.Gray4, strokeWidth: 2 },
-  grid: { fill: 'none', stroke: 'none' },
-  ticks: { size: 0 },
-  tickLabels: { fontSize: 12, fill: Colors.Gray8, padding: 13 },
-};
-const axisY = {
-  axis: { stroke: Colors.Gray4 },
-  axisLabel: { fontSize: 20, padding: 30 },
-  grid: { fill: 'none', stroke: 'none' },
-  ticks: { size: 0 },
-  tickLabels: { fontSize: 0 },
-};
-export default ChartAverage;

package/src/screens/UnitSummary/components/Temperature/__test__/ChartAverage.test.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { act, create } from 'react-test-renderer';
-
-import ChartAverage from '../ChartAverage';
-
-describe('Test ChartAverage', () => {
-  let tree;
-  it('render ChartAverage', async () => {
-    await act(async () => {
-      tree = await create(<ChartAverage />);
-    });
-    const instance = tree.root;
-    const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(3);
-  });
-});