@eohjsc/react-native-smart-city 0.4.23 → 0.4.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -2
  2. package/src/commons/Device/HistoryChart.js +1 -1
  3. package/src/commons/Device/HorizontalBarChart.js +3 -4
  4. package/src/commons/Device/LinearChart.js +3 -5
  5. package/src/commons/Highcharts/index.js +111 -0
  6. package/src/commons/UnitSummary/ConfigHistoryChart/__test__/ConfigHistoryChart.test.js +3 -3
  7. package/src/screens/Device/components/VisualChart.js +10 -2
  8. package/src/screens/Device/components/__test__/VisualChart.test.js +12 -12
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@eohjsc/react-native-smart-city",
3
3
  "title": "React Native Smart Home",
4
- "version": "0.4.23",
4
+ "version": "0.4.24",
5
5
  "description": "TODO",
6
6
  "main": "index.js",
7
7
  "files": [
@@ -101,7 +101,6 @@
101
101
  "@ant-design/icons-react-native": "^2.2.1",
102
102
  "@ant-design/react-native": "^4.0.5",
103
103
  "@babel/helper-environment-visitor": "^7.16.7",
104
- "@eohjsc/highcharts": "^1.0.9",
105
104
  "@eohjsc/react-native-keyboard-aware-scroll-view": "^0.9.5",
106
105
  "@formatjs/intl-getcanonicallocales": "^1.4.5",
107
106
  "@formatjs/intl-numberformat": "^5.6.2",
package/src/commons/Device/HistoryChart.js CHANGED
@@ -28,7 +28,7 @@ const HistoryChart = memo(
28
28
  setStartDate,
29
29
  groupBy,
30
30
  setGroupBy,
31
- configuration,
31
+ configuration = {},
32
32
  }) => {
33
33
  const t = useTranslations();
34
34
  const [price, setPrice] = useState(null);
package/src/commons/Device/HorizontalBarChart.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import React, { memo, useEffect, useMemo, useState } from 'react';
2
2
  import { View, StyleSheet } from 'react-native';
3
3
  import { isEmpty } from 'lodash';
4
- import HighchartsReactNative from '@eohjsc/highcharts';
5
4
 
6
5
  import { Colors } from '../../configs';
7
6
  import { getMaxValueIndex } from '../../utils/chartHelper/getMaxValueIndex';
7
+ import Highcharts from '../Highcharts';
8
8
 
9
9
  const HorizontalBarChart = memo(({ datas, config }) => {
10
10
  const [chartOptions, setChartOptions] = useState({
@@ -152,10 +152,9 @@ const HorizontalBarChart = memo(({ datas, config }) => {
152
152
 
153
153
  return (
154
154
  <View style={[styles.container, { height: heightChart }]}>
155
- <HighchartsReactNative
156
- styles={styles.chartStyle}
155
+ <Highcharts
156
+ styles={[styles.chartStyle, styles.webviewStyle]}
157
157
  options={chartOptions}
158
- webviewStyles={styles.webviewStyle}
159
158
  />
160
159
  </View>
161
160
  );
package/src/commons/Device/LinearChart.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { useState, useEffect, useCallback } from 'react';
2
2
  import { StyleSheet, View } from 'react-native';
3
- import HighchartsReactNative from '@eohjsc/highcharts';
4
3
  import moment from 'moment';
5
4
  import { Colors } from '../../configs';
5
+ import Highcharts from '../Highcharts';
6
6
 
7
7
  const convertData = (data = []) => {
8
8
  let arr = [];
@@ -108,10 +108,8 @@ function LinearChart({ datas }) {
108
108
 
109
109
  return (
110
110
  <View style={styles.container}>
111
- {/* // TODO : Hinh will research to fix warning Highchart*/}
112
- <HighchartsReactNative
113
- styles={styles.chartStyle}
114
- webviewStyles={styles.webviewStyle}
111
+ <Highcharts
112
+ styles={[styles.chartStyle, styles.webviewStyle]}
115
113
  options={options}
116
114
  />
117
115
  </View>
package/src/commons/Highcharts/index.js ADDED
@@ -0,0 +1,111 @@
1
+ import React, { useState } from 'react';
2
+ import WebView from 'react-native-webview';
3
+
4
+ const Highcharts = (props) => {
5
+ const [init] = useState(`<html>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
7
+ <style media="screen" type="text/css">
8
+ #container {
9
+ width:100%;
10
+ height:100%;
11
+ top:0;
12
+ left:0;
13
+ right:0;
14
+ bottom:0;
15
+ position:absolute;
16
+ user-select: none;
17
+ -webkit-user-select: none;
18
+ }
19
+ </style>
20
+ <head>
21
+ <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
22
+ ${
23
+ props.stock
24
+ ? '<script src="https://code.highcharts.com/stock/highstock.js"></script>'
25
+ : '<script src="https://code.highcharts.com/highcharts.js"></script>'
26
+ }
27
+ ${
28
+ props.more
29
+ ? '<script src="https://code.highcharts.com/highcharts-more.js"></script>'
30
+ : ''
31
+ }
32
+ ${
33
+ props.guage
34
+ ? '<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>'
35
+ : ''
36
+ }
37
+ <script src="https://code.highcharts.com/modules/exporting.js"></script>
38
+ <script>
39
+ $(function () {
40
+ Highcharts.setOptions(${JSON.stringify(
41
+ props.options
42
+ )});
43
+ Highcharts.${
44
+ props.stock ? 'stockChart' : 'chart'
45
+ }('container', `);
46
+ const [end] = useState(` );
47
+ });
48
+ </script>
49
+ </head>
50
+ <body>
51
+ <div id="container">
52
+ </div>
53
+ </body>
54
+ </html>`);
55
+
56
+ const flattenText = (item, key) => {
57
+ let str = '';
58
+ if (item && typeof item === 'object' && item.length === undefined) {
59
+ str += flattenObject(item);
60
+ } else if (item && typeof item === 'object' && item.length !== undefined) {
61
+ str += '[';
62
+ item.forEach((k2) => {
63
+ str += `${flattenText(k2)}, `;
64
+ });
65
+ if (item.length > 0) {
66
+ str = str.slice(0, str.length - 2);
67
+ }
68
+ str += ']';
69
+ } else if (typeof item === 'string' && item.slice(0, 8) === 'function') {
70
+ str += `${item}`;
71
+ } else if (typeof item === 'string') {
72
+ // eslint-disable-next-line no-useless-escape
73
+ str += `\"${item.replace(/"/g, '\\"')}\"`;
74
+ } else {
75
+ str += `${item}`;
76
+ }
77
+ return str;
78
+ };
79
+
80
+ const flattenObject = (obj, str = '{') => {
81
+ Object.keys(obj).forEach(function (key) {
82
+ str += `${key}: ${flattenText(obj[key])}, `;
83
+ });
84
+ return `${str.slice(0, str.length - 2)}}`;
85
+ };
86
+
87
+ let config = JSON.stringify(props.options, (key, value) => {
88
+ return typeof value === 'function' ? value.toString() : value;
89
+ });
90
+
91
+ config = JSON.parse(config);
92
+ const concatHTML = `${init}${flattenObject(config)}${end}`.replace(
93
+ ': }',
94
+ ': {}'
95
+ );
96
+
97
+ return (
98
+ <WebView
99
+ style={[props.styles, props.webviewStyles]}
100
+ source={{ html: concatHTML }}
101
+ javaScriptEnabled={true}
102
+ domStorageEnabled={true}
103
+ scalesPageToFit={true}
104
+ scrollEnabled={false}
105
+ automaticallyAdjustContentInsets={true}
106
+ {...props}
107
+ />
108
+ );
109
+ };
110
+
111
+ export default Highcharts;
package/src/commons/UnitSummary/ConfigHistoryChart/__test__/ConfigHistoryChart.test.js CHANGED
@@ -8,7 +8,7 @@ import { mockSCStore } from '../../../../context/mockStore';
8
8
  import { SCProvider } from '../../../../context';
9
9
  import API from '../../../../configs/API';
10
10
  import { getPusher } from '../../../../utils/Pusher';
11
- import HighchartsReactNative from '@eohjsc/highcharts';
11
+ import Highcharts from '../../../Highcharts';
12
12
 
13
13
  const mock = new MockAdapter(api.axiosInstance);
14
14
 
@@ -30,7 +30,7 @@ describe('Test HistoryChart', () => {
30
30
  });
31
31
 
32
32
  const assertChartData = async (data) => {
33
- const chart = tree.root.findByType(HighchartsReactNative);
33
+ const chart = tree.root.findByType(Highcharts);
34
34
  expect(chart.props.options.series[0].data).toEqual(
35
35
  data.map((i) => [i.x, i.y])
36
36
  );
@@ -41,7 +41,7 @@ describe('Test HistoryChart', () => {
41
41
  tree = create(wrapComponent());
42
42
  });
43
43
  const instance = tree.root;
44
- const HistoryCharts = instance.findAllByType(HighchartsReactNative);
44
+ const HistoryCharts = instance.findAllByType(Highcharts);
45
45
  expect(HistoryCharts).toHaveLength(0);
46
46
  });
47
47
 
package/src/screens/Device/components/VisualChart.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import React, { useCallback, useEffect, useRef, useState } from 'react';
2
2
  import moment from 'moment/moment';
3
3
  import _ from 'lodash';
4
- import HighchartsReactNative from '@eohjsc/highcharts';
5
4
 
6
5
  import ChartWrapper from './ChartWrapper';
7
6
  import { useFetchConfigHistory } from '../../../commons/UnitSummary/ConfigHistoryChart';
@@ -11,6 +10,7 @@ import ChartAggregationOption from '../../../commons/ChartAggregationOption';
11
10
  import Text from '../../../commons/Text';
12
11
  import { CHART_GROUP_TYPE } from '../../../configs/Constants';
13
12
  import { getDateRangeOfWeek } from '../../../utils/Utils';
13
+ import Highcharts from '../../../commons/Highcharts';
14
14
 
15
15
  const groupByTime = (format) => (x) => x[0].format(format);
16
16
 
@@ -143,8 +143,16 @@ const chartOptions = {
143
143
  text: '',
144
144
  },
145
145
  },
146
+ yAxis: {
147
+ title: {
148
+ enabled: false,
149
+ },
150
+ },
146
151
  plotOptions: {},
147
152
  series: [],
153
+ exporting: {
154
+ enabled: false,
155
+ },
148
156
  };
149
157
 
150
158
  const groupByOptions = [
@@ -295,7 +303,7 @@ const VisualChart = ({ item, isDemo = false, isWidgetOrder }) => {
295
303
  showTime={show_time}
296
304
  isWidgetOrder={isWidgetOrder}
297
305
  >
298
- <HighchartsReactNative
306
+ <Highcharts
299
307
  options={options}
300
308
  styles={styles.chartStyle}
301
309
  webviewStyles={[
package/src/screens/Device/components/__test__/VisualChart.test.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import MockAdapter from 'axios-mock-adapter';
3
3
  import moment from 'moment';
4
- import HighchartsReactNative from '@eohjsc/highcharts';
5
4
  import { act, create } from 'react-test-renderer';
6
5
 
7
6
  import VisualChart from '../VisualChart';
@@ -11,6 +10,7 @@ import { flushPromises } from '../../../AllGateway/test-utils';
11
10
  import api from '../../../../utils/Apis/axios';
12
11
  import ChartAggregationOption from '../../../../commons/ChartAggregationOption';
13
12
  import DateTimeRangeChange from '../../../../commons/DateTimeRangeChange';
13
+ import Highcharts from '../../../../commons/Highcharts';
14
14
 
15
15
  const render = async (component) => {
16
16
  let tree;
@@ -67,7 +67,7 @@ describe('Test LinearChartWidget', () => {
67
67
  />
68
68
  );
69
69
  const instance = tree.root;
70
- const chart = instance.findByType(HighchartsReactNative);
70
+ const chart = instance.findByType(Highcharts);
71
71
  assertChartData(chart.props.options.series[0].data, [[moment(1000), 100]]);
72
72
  });
73
73
 
@@ -120,7 +120,7 @@ describe('Test LinearChartWidget', () => {
120
120
  />
121
121
  );
122
122
  const instance = tree.root;
123
- const chart = instance.findByType(HighchartsReactNative);
123
+ const chart = instance.findByType(Highcharts);
124
124
  assertChartData(chart.props.options.series[0].data, [
125
125
  [moment(1), 2],
126
126
  [moment(3), 4],
@@ -182,7 +182,7 @@ describe('Test LinearChartWidget', () => {
182
182
  />
183
183
  );
184
184
  const instance = tree.root;
185
- const chart = instance.findByType(HighchartsReactNative);
185
+ const chart = instance.findByType(Highcharts);
186
186
  assertChartData(chart.props.options.series[0].data, [
187
187
  ['1970-01-01', 100],
188
188
  ['1970-01-02', 100],
@@ -230,7 +230,7 @@ describe('Test LinearChartWidget', () => {
230
230
  />
231
231
  );
232
232
  const instance = tree.root;
233
- const chart = instance.findByType(HighchartsReactNative);
233
+ const chart = instance.findByType(Highcharts);
234
234
  assertChartData(chart.props.options.series[0].data, [['1970-01-01', 200]]);
235
235
  });
236
236
 
@@ -268,7 +268,7 @@ describe('Test LinearChartWidget', () => {
268
268
  />
269
269
  );
270
270
  const instance = tree.root;
271
- const chart = instance.findByType(HighchartsReactNative);
271
+ const chart = instance.findByType(Highcharts);
272
272
  assertChartData(chart.props.options.series[0].data, [['1970-01-01', 150]]);
273
273
  });
274
274
 
@@ -292,7 +292,7 @@ describe('Test LinearChartWidget', () => {
292
292
  />
293
293
  );
294
294
  const instance = tree.root;
295
- const chart = instance.findByType(HighchartsReactNative);
295
+ const chart = instance.findByType(Highcharts);
296
296
  assertChartData(chart.props.options.series[0].data, [[moment(1000), 100]]);
297
297
  });
298
298
 
@@ -310,7 +310,7 @@ describe('Test LinearChartWidget', () => {
310
310
  />
311
311
  );
312
312
  const instance = tree.root;
313
- const chart = instance.findByType(HighchartsReactNative);
313
+ const chart = instance.findByType(Highcharts);
314
314
  expect(chart.props.options.chart.type).toEqual('column');
315
315
  });
316
316
 
@@ -328,7 +328,7 @@ describe('Test LinearChartWidget', () => {
328
328
  />
329
329
  );
330
330
  const instance = tree.root;
331
- const chart = instance.findByType(HighchartsReactNative);
331
+ const chart = instance.findByType(Highcharts);
332
332
  expect(chart.props.options.chart.type).toEqual('bar');
333
333
  });
334
334
 
@@ -346,7 +346,7 @@ describe('Test LinearChartWidget', () => {
346
346
  />
347
347
  );
348
348
  const instance = tree.root;
349
- const chart = instance.findByType(HighchartsReactNative);
349
+ const chart = instance.findByType(Highcharts);
350
350
  expect(chart.props.options.chart.type).toEqual('area');
351
351
  });
352
352
 
@@ -364,7 +364,7 @@ describe('Test LinearChartWidget', () => {
364
364
  />
365
365
  );
366
366
  const instance = tree.root;
367
- const chart = instance.findByType(HighchartsReactNative);
367
+ const chart = instance.findByType(Highcharts);
368
368
  expect(chart.props.options.chart.type).toEqual('column');
369
369
  expect(chart.props.options.plotOptions.column.stacking).toEqual('normal');
370
370
  });
@@ -383,7 +383,7 @@ describe('Test LinearChartWidget', () => {
383
383
  />
384
384
  );
385
385
  const instance = tree.root;
386
- const chart = instance.findByType(HighchartsReactNative);
386
+ const chart = instance.findByType(Highcharts);
387
387
  expect(chart.props.options.chart.type).toEqual('scatter');
388
388
  });
389
389