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

package/src/commons/Device/HistoryChart.js

@@ -1,225 +0,0 @@
-import React, { memo, useCallback, useState, useMemo, useEffect } 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 Button from '../../commons/Button';
-import CurrencyInput from '../../commons/Form/CurrencyInput';
-import DateTimeRangeChange from '../DateTimeRangeChange';
-import HorizontalBarChart from './HorizontalBarChart';
-import LinearChart from './LinearChart';
-import ChartAggregationOption from '../ChartAggregationOption';
-import { formatMoney } from '../../utils/Utils';
-
-const { width } = Dimensions.get('window');
-
-const HistoryChart = memo(
-  ({
-    datas,
-    chartConfig,
-    setChartConfig,
-    style,
-    formatType,
-    startDate,
-    endDate,
-    setEndDate,
-    setStartDate,
-    groupBy,
-    setGroupBy,
-    configuration = {},
-  }) => {
-    const t = useTranslations();
-    const [price, setPrice] = useState(null);
-
-    const [eventPicker, setEventPicker] = useState({
-      showModalEnd: false,
-      showModalStart: false,
-      startTime: startDate ? startDate : moment().subtract(1, 'day'),
-      endTime: endDate ? endDate : moment(),
-    });
-
-    const selectStart = useCallback((date) => {
-      setEventPicker((state) => {
-        if (typeof date === 'number') {
-          return state;
-        }
-        if (moment(date) < state.endTime) {
-          return {
-            ...state,
-            showModalStart: false,
-            startTime: date ? moment(date) : moment().valueOf(),
-          };
-        } else {
-          return {
-            ...state,
-            showModalStart: false,
-            startTime: date ? moment(date) : moment().valueOf(),
-            endTime: date ? moment(date).add(1, 'day') : moment().valueOf(),
-          };
-        }
-      });
-    }, []);
-
-    const selectEnd = useCallback((date) => {
-      setEventPicker((state) => {
-        if (typeof date === 'number') {
-          return state;
-        }
-        if (moment(date).add(1, 'day') > state.startTime) {
-          return {
-            ...state,
-            showModalEnd: false,
-            endTime: date ? moment(date) : moment().valueOf(),
-          };
-        }
-        return {
-          ...state,
-          showModalEnd: false,
-          startTime: date ? moment(date).add(-1, 'day') : moment().valueOf(),
-          endTime: date ? moment(date) : moment().valueOf(),
-        };
-      });
-    }, []);
-
-    const onCalculateCost = useCallback(() => {
-      setChartConfig((config) => ({
-        ...config,
-        price,
-      }));
-    }, [setChartConfig, price]);
-
-    const totalPrice = useMemo(() => {
-      if (configuration.config !== 'power_consumption') {
-        return null;
-      }
-      const { price: chartPrice } = chartConfig;
-      if (chartPrice === '' || isNaN(chartPrice)) {
-        return null;
-      }
-      const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
-      const roundedSum = sum * chartPrice;
-      return roundedSum.toFixed();
-    }, [configuration, datas, chartConfig]);
-
-    const renderChart = useMemo(() => {
-      if (configuration.type === 'line_chart') {
-        return (
-          <View style={styles.chartContainer}>
-            <View style={[styles.chart, { width: width }]}>
-              <LinearChart datas={datas} />
-            </View>
-          </View>
-        );
-      }
-      if (configuration.type === 'horizontal_bar_chart') {
-        return <HorizontalBarChart datas={datas} config={chartConfig} />;
-      }
-    }, [chartConfig, configuration.type, datas]);
-
-    useEffect(() => {
-      setStartDate(eventPicker.startTime);
-    }, [eventPicker.startTime, setStartDate]);
-
-    useEffect(() => {
-      setEndDate(eventPicker.endTime);
-    }, [eventPicker.endTime, setEndDate]);
-
-    return (
-      <View style={style}>
-        <View style={styles.historyView}>
-          <View style={styles.titleHistory}>
-            <Text size={20} semibold color={Colors.Gray9}>
-              {t('history')}
-            </Text>
-            {configuration.type === 'horizontal_bar_chart' && (
-              <ChartAggregationOption
-                groupBy={groupBy}
-                setGroupBy={setGroupBy}
-              />
-            )}
-          </View>
-          {!(
-            configuration.type === 'horizontal_bar_chart' && groupBy !== 'date'
-          ) && (
-            <DateTimeRangeChange
-              startTime={eventPicker.startTime}
-              selectStart={selectStart}
-              selectEnd={selectEnd}
-              endTime={eventPicker.endTime}
-              formatType={formatType}
-            />
-          )}
-        </View>
-        {configuration.config === 'power_consumption' && (
-          <View style={styles.wrapCalculateCost}>
-            <Text type="H4">
-              {t('input_price_to_calculate_electricity_cost')}
-            </Text>
-            <View style={styles.row}>
-              <CurrencyInput
-                value={price}
-                onChange={setPrice}
-                minValue={0}
-                maxValue={100000000}
-                placeholder={'0'}
-                onSubmitEditing={onCalculateCost}
-              />
-              <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>
-        )}
-      </View>
-    );
-  }
-);
-
-export default HistoryChart;
-
-const styles = StyleSheet.create({
-  historyView: {
-    paddingTop: 16,
-  },
-  titleHistory: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  chartInfo: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  chartContainer: {
-    marginLeft: -8,
-  },
-  chart: {
-    height: 300,
-  },
-  wrapCalculateCost: {
-    marginTop: 12,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 8,
-  },
-  buttonCalculate: {
-    width: null,
-    flex: null,
-    paddingHorizontal: 12,
-  },
-});

package/src/commons/Device/WindSpeed/LinearChart/__test__/LinearChart.test.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import Svg from 'react-native-svg';
-import LinearChart from '../';
-import renderer, { act } from 'react-test-renderer';
-import { SCProvider } from '../../../../../context';
-import { mockSCStore } from '../../../../../context/mockStore';
-
-Date.now = jest.fn(() => 1487076708000);
-
-const wrapComponent = (chartOptions, datasShow) => (
-  <SCProvider initState={mockSCStore({})}>
-    <LinearChart chartOptions={chartOptions} datasShow={datasShow} />
-  </SCProvider>
-);
-
-describe('Test LinearChart', () => {
-  let wrapper;
-
-  it('LinearChart render', async () => {
-    const chartOptions = {
-      showAll: true,
-    };
-    const datasShow = [
-      {
-        data: [
-          {
-            x: 0,
-            y: 1,
-          },
-          {
-            x: 1,
-            y: 2,
-          },
-          {
-            x: 2,
-            y: 3,
-          },
-        ],
-      },
-    ];
-    await act(async () => {
-      wrapper = renderer.create(wrapComponent(chartOptions, datasShow));
-    });
-    const instance = wrapper.root;
-    const Svgs = instance.findAllByType(Svg);
-    expect(Svgs).toHaveLength(1);
-  });
-});

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 },
-    ]);
-  });
-});