@easyv/charts 1.4.28 → 1.4.30

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 (91) hide show
  1. package/.babelrc +8 -8
  2. package/.husky/commit-msg +3 -3
  3. package/CHANGELOG.md +18 -18
  4. package/commitlint.config.js +1 -1
  5. package/lib/components/AnimateData.js +16 -8
  6. package/lib/components/Axis.js +134 -87
  7. package/lib/components/Background.js +26 -18
  8. package/lib/components/Band.js +98 -72
  9. package/lib/components/BaseLine.js +46 -33
  10. package/lib/components/Brush.js +46 -29
  11. package/lib/components/Carousel.js +40 -13
  12. package/lib/components/CartesianChart.js +147 -98
  13. package/lib/components/Chart.js +45 -28
  14. package/lib/components/ChartContainer.js +27 -18
  15. package/lib/components/ConicalGradient.js +89 -56
  16. package/lib/components/Control.js +28 -12
  17. package/lib/components/ExtentData.js +17 -9
  18. package/lib/components/FilterData.js +27 -16
  19. package/lib/components/Indicator.js +30 -23
  20. package/lib/components/Label.js +126 -96
  21. package/lib/components/Legend.js +66 -41
  22. package/lib/components/Lighter.js +50 -21
  23. package/lib/components/Line.js +59 -39
  24. package/lib/components/LinearGradient.js +22 -16
  25. package/lib/components/Mapping.js +34 -9
  26. package/lib/components/Marquee.js +30 -14
  27. package/lib/components/PieChart.js +427 -325
  28. package/lib/components/StackData.js +18 -8
  29. package/lib/components/StereoBar.js +105 -65
  30. package/lib/components/TextOverflow.js +21 -8
  31. package/lib/components/Tooltip.js +55 -41
  32. package/lib/components/index.js +29 -0
  33. package/lib/components/pieTooltip.js +101 -44
  34. package/lib/context/index.js +2 -0
  35. package/lib/css/index.module.css +42 -42
  36. package/lib/css/piechart.module.css +26 -26
  37. package/lib/element/ConicGradient.js +35 -29
  38. package/lib/element/Line.js +13 -9
  39. package/lib/element/index.js +2 -0
  40. package/lib/formatter/index.js +2 -0
  41. package/lib/formatter/legend.js +41 -30
  42. package/lib/hooks/index.js +9 -0
  43. package/lib/hooks/useAiData.js +20 -12
  44. package/lib/hooks/useAnimateData.js +21 -8
  45. package/lib/hooks/useAxes.js +117 -67
  46. package/lib/hooks/useCarouselAxisX.js +59 -26
  47. package/lib/hooks/useExtentData.js +47 -15
  48. package/lib/hooks/useFilterData.js +34 -13
  49. package/lib/hooks/useStackData.js +35 -12
  50. package/lib/hooks/useTooltip.js +53 -36
  51. package/lib/index.js +15 -0
  52. package/lib/utils/index.js +247 -95
  53. package/package.json +55 -55
  54. package/src/components/Axis.tsx +1 -1
  55. package/src/components/Background.tsx +61 -61
  56. package/src/components/Band.tsx +274 -274
  57. package/src/components/Brush.js +159 -159
  58. package/src/components/CartesianChart.js +2 -1
  59. package/src/components/Chart.js +101 -99
  60. package/src/components/ChartContainer.tsx +71 -71
  61. package/src/components/ConicalGradient.js +258 -258
  62. package/src/components/Control.jsx +51 -51
  63. package/src/components/ExtentData.js +17 -17
  64. package/src/components/Indicator.js +61 -61
  65. package/src/components/Label.js +275 -275
  66. package/src/components/Legend.js +165 -165
  67. package/src/components/Lighter.jsx +173 -173
  68. package/src/components/Line.js +150 -150
  69. package/src/components/LinearGradient.js +29 -29
  70. package/src/components/PieChart.js +19 -12
  71. package/src/components/PieTooltip.jsx +160 -133
  72. package/src/components/StereoBar.tsx +307 -307
  73. package/src/components/index.js +59 -59
  74. package/src/context/index.js +2 -2
  75. package/src/css/index.module.css +42 -42
  76. package/src/css/piechart.module.css +26 -26
  77. package/src/element/ConicGradient.jsx +55 -55
  78. package/src/element/Line.tsx +33 -33
  79. package/src/element/index.ts +3 -3
  80. package/src/formatter/index.js +1 -1
  81. package/src/formatter/legend.js +92 -92
  82. package/src/hooks/index.js +20 -20
  83. package/src/hooks/useAnimateData.ts +67 -67
  84. package/src/hooks/useExtentData.js +1 -1
  85. package/src/hooks/useFilterData.js +72 -72
  86. package/src/hooks/useStackData.js +101 -101
  87. package/src/hooks/useTooltip.ts +100 -100
  88. package/src/index.js +6 -6
  89. package/src/types/index.d.ts +67 -67
  90. package/src/utils/index.js +757 -757
  91. package/tsconfig.json +23 -23
@@ -1,20 +1,20 @@
1
- import useFilterData from './useFilterData';
2
- import useStackData from './useStackData';
3
- import useAxes from './useAxes';
4
- import useTooltip from './useTooltip';
5
- import useAnimateData from './useAnimateData';
6
- import useCarouselAxisX from './useCarouselAxisX';
7
- import useExtentData from './useExtentData';
8
- import { useAiData, useAiDataOfPie } from './useAiData';
9
-
10
- export {
11
- useFilterData,
12
- useStackData,
13
- useAxes,
14
- useTooltip,
15
- useAnimateData,
16
- useCarouselAxisX,
17
- useExtentData,
18
- useAiData,
19
- useAiDataOfPie
20
- };
1
+ import useFilterData from './useFilterData';
2
+ import useStackData from './useStackData';
3
+ import useAxes from './useAxes';
4
+ import useTooltip from './useTooltip';
5
+ import useAnimateData from './useAnimateData';
6
+ import useCarouselAxisX from './useCarouselAxisX';
7
+ import useExtentData from './useExtentData';
8
+ import { useAiData, useAiDataOfPie } from './useAiData';
9
+
10
+ export {
11
+ useFilterData,
12
+ useStackData,
13
+ useAxes,
14
+ useTooltip,
15
+ useAnimateData,
16
+ useCarouselAxisX,
17
+ useExtentData,
18
+ useAiData,
19
+ useAiDataOfPie
20
+ };
@@ -1,67 +1,67 @@
1
- import { useEffect, useState } from 'react';
2
- import { animate, easeIn, easeOut, linear } from 'popmotion';
3
-
4
- /**
5
- * 图表数据动画
6
- * @param {Array} data data列表
7
- * @param {boolean} dataAnimation 是否开启数据增长动画
8
- * @returns 改变后的数据
9
- */
10
-
11
- export default (data: DataType[], dataAnimation: DataAnimation) => {
12
- const [animateData, setAnimateData] = useState<DataType[]>([]);
13
-
14
- useEffect(() => {
15
- let animateRef: any = null;
16
- if (
17
- dataAnimation &&
18
- dataAnimation.show &&
19
- dataAnimation.duration &&
20
- data.length
21
- ) {
22
- animateRef = animate({
23
- autoplay: true,
24
- repeat: 0,
25
- from: 0,
26
- to: 1,
27
- duration: dataAnimation.duration * 1000,
28
- ease: linear,
29
- onUpdate: (v: number) => {
30
- setAnimateData((oldData: DataType[]) => {
31
- const oldLength = oldData.length;
32
- const newLength = data.length;
33
- if (oldLength >= newLength) {
34
- return oldData.map(({ y }: DataType, i: number) => {
35
- const current: DataType = data[i] || { y: 0 };
36
- const delta: number = current.y - y;
37
- return {
38
- ...current,
39
- y: y + delta * v,
40
- };
41
- });
42
- } else {
43
- return data.map((current: DataType, i: number) => {
44
- const oldCurrent: DataType = oldData[i] || { y: 0 };
45
- const delta = oldCurrent.y - current.y;
46
- return {
47
- ...current,
48
- y:oldCurrent.y + delta * v,
49
- };
50
- });
51
- }
52
- });
53
- },
54
- onComplete: () => {
55
- setAnimateData(data);
56
- },
57
- });
58
- } else {
59
- setAnimateData(data);
60
- }
61
- return () => {
62
- animateRef && animateRef.stop();
63
- };
64
- }, [data, dataAnimation]);
65
-
66
- return animateData;
67
- };
1
+ import { useEffect, useState } from 'react';
2
+ import { animate, easeIn, easeOut, linear } from 'popmotion';
3
+
4
+ /**
5
+ * 图表数据动画
6
+ * @param {Array} data data列表
7
+ * @param {boolean} dataAnimation 是否开启数据增长动画
8
+ * @returns 改变后的数据
9
+ */
10
+
11
+ export default (data: DataType[], dataAnimation: DataAnimation) => {
12
+ const [animateData, setAnimateData] = useState<DataType[]>([]);
13
+
14
+ useEffect(() => {
15
+ let animateRef: any = null;
16
+ if (
17
+ dataAnimation &&
18
+ dataAnimation.show &&
19
+ dataAnimation.duration &&
20
+ data.length
21
+ ) {
22
+ animateRef = animate({
23
+ autoplay: true,
24
+ repeat: 0,
25
+ from: 0,
26
+ to: 1,
27
+ duration: dataAnimation.duration * 1000,
28
+ ease: linear,
29
+ onUpdate: (v: number) => {
30
+ setAnimateData((oldData: DataType[]) => {
31
+ const oldLength = oldData.length;
32
+ const newLength = data.length;
33
+ if (oldLength >= newLength) {
34
+ return oldData.map(({ y }: DataType, i: number) => {
35
+ const current: DataType = data[i] || { y: 0 };
36
+ const delta: number = current.y - y;
37
+ return {
38
+ ...current,
39
+ y: y + delta * v,
40
+ };
41
+ });
42
+ } else {
43
+ return data.map((current: DataType, i: number) => {
44
+ const oldCurrent: DataType = oldData[i] || { y: 0 };
45
+ const delta = oldCurrent.y - current.y;
46
+ return {
47
+ ...current,
48
+ y:oldCurrent.y + delta * v,
49
+ };
50
+ });
51
+ }
52
+ });
53
+ },
54
+ onComplete: () => {
55
+ setAnimateData(data);
56
+ },
57
+ });
58
+ } else {
59
+ setAnimateData(data);
60
+ }
61
+ return () => {
62
+ animateRef && animateRef.stop();
63
+ };
64
+ }, [data, dataAnimation]);
65
+
66
+ return animateData;
67
+ };
@@ -40,7 +40,7 @@ const stackData = (data, series) => {
40
40
  max = Math.max(...arr, max);
41
41
  });
42
42
  dataMap.clear();
43
- return [min || 0, max || (min || 0) + 100];
43
+ return [min || 0, max==undefined?(min || 0) + 100:max];
44
44
  };
45
45
 
46
46
  /**
@@ -1,72 +1,72 @@
1
- import { useState, useCallback, useEffect, useMemo } from 'react';
2
-
3
- const getInitialSelected = (series) => {
4
- const status = new Map();
5
- for (let [name] of series.entries()) {
6
- status.set(name, true);
7
- }
8
- return status;
9
- };
10
-
11
- const getSelected = (selected, name) => {
12
- const tmp = new Map();
13
- selected.forEach((value, key) => {
14
- if (name == key) {
15
- tmp.set(key, !value);
16
- } else {
17
- tmp.set(key, value);
18
- }
19
- });
20
- return tmp;
21
- };
22
-
23
- /**
24
- * 图例点击状态管理
25
- * @param {Array} data 数据
26
- * @param {Map} series 系列
27
- * @returns {Array} 返回筛选后的数据和是否选中状态,及控制选中函数
28
- */
29
-
30
- export default ({ data, series }) => {
31
- const [selected, setSelected] = useState(getInitialSelected(series));
32
-
33
- const _series = useMemo(() => {
34
- const tmp = new Map();
35
- series.forEach((currentSeries, key) => {
36
- const value = selected.get(key);
37
- tmp.set(key, {
38
- ...currentSeries,
39
- selected: value,
40
- });
41
- });
42
- return tmp;
43
- }, [selected, series]);
44
-
45
- const _data = useMemo(() => {
46
- return data.filter(({ s }) => {
47
- return s && _series.get(s) && _series.get(s).selected;
48
- });
49
- }, [data, _series]);
50
-
51
- const onClick = useCallback((name) => {
52
- setSelected((selected) => getSelected(selected, name));
53
- }, []);
54
-
55
- useEffect(() => {
56
- setSelected(getInitialSelected(series));
57
- }, [series]);
58
-
59
- return [
60
- {
61
- series: _series,
62
- data: _data.map(d=>{
63
- return {
64
- ...d,
65
- y:parseFloat(d.y),
66
- showY:d.y
67
- }
68
- }),
69
- },
70
- onClick,
71
- ];
72
- };
1
+ import { useState, useCallback, useEffect, useMemo } from 'react';
2
+
3
+ const getInitialSelected = (series) => {
4
+ const status = new Map();
5
+ for (let [name] of series.entries()) {
6
+ status.set(name, true);
7
+ }
8
+ return status;
9
+ };
10
+
11
+ const getSelected = (selected, name) => {
12
+ const tmp = new Map();
13
+ selected.forEach((value, key) => {
14
+ if (name == key) {
15
+ tmp.set(key, !value);
16
+ } else {
17
+ tmp.set(key, value);
18
+ }
19
+ });
20
+ return tmp;
21
+ };
22
+
23
+ /**
24
+ * 图例点击状态管理
25
+ * @param {Array} data 数据
26
+ * @param {Map} series 系列
27
+ * @returns {Array} 返回筛选后的数据和是否选中状态,及控制选中函数
28
+ */
29
+
30
+ export default ({ data, series }) => {
31
+ const [selected, setSelected] = useState(getInitialSelected(series));
32
+
33
+ const _series = useMemo(() => {
34
+ const tmp = new Map();
35
+ series.forEach((currentSeries, key) => {
36
+ const value = selected.get(key);
37
+ tmp.set(key, {
38
+ ...currentSeries,
39
+ selected: value,
40
+ });
41
+ });
42
+ return tmp;
43
+ }, [selected, series]);
44
+
45
+ const _data = useMemo(() => {
46
+ return data.filter(({ s }) => {
47
+ return s && _series.get(s) && _series.get(s).selected;
48
+ });
49
+ }, [data, _series]);
50
+
51
+ const onClick = useCallback((name) => {
52
+ setSelected((selected) => getSelected(selected, name));
53
+ }, []);
54
+
55
+ useEffect(() => {
56
+ setSelected(getInitialSelected(series));
57
+ }, [series]);
58
+
59
+ return [
60
+ {
61
+ series: _series,
62
+ data: _data.map(d=>{
63
+ return {
64
+ ...d,
65
+ y:parseFloat(d.y),
66
+ showY:d.y
67
+ }
68
+ }),
69
+ },
70
+ onClick,
71
+ ];
72
+ };
@@ -1,101 +1,101 @@
1
- import { useMemo } from 'react';
2
- import { group } from 'd3v7';
3
- import {
4
- dataYOrZ,
5
- seriesYOrZ,
6
- getCurrentStack,
7
- getStacks,
8
- resetStacks,
9
- } from '../utils';
10
-
11
- const getSeriesMap = (series) => {
12
- const seriesMap = new Map();
13
- series.forEach(({ name, ...rest }) => {
14
- seriesMap.set(name, {
15
- ...rest,
16
- name,
17
- data: [],
18
- });
19
- });
20
- return seriesMap;
21
- };
22
- const resetStackData = (series) => {
23
- series.forEach((series) => {
24
- series.data = [];
25
- });
26
- };
27
-
28
- const setStackData = (data, series, stacks) => {
29
- const dataMap = group(data, (d) => d.x);
30
-
31
- dataMap.forEach((value) => {
32
- resetStacks(stacks);
33
- for (let i = 0, j = value.length; i < j; i++) {
34
- const d = value[i];
35
- const currentSeries = series.get(d.s);
36
- if (d && d.y !== undefined && !isNaN(d.y)) {
37
- const currentStack = getCurrentStack(currentSeries, stacks);
38
- if (currentSeries && currentStack) {
39
- if (d.y >= 0) {
40
- currentSeries.data.push({
41
- data: d,
42
- index: currentStack.index,
43
- bound: [currentStack.positive, currentStack.positive + d.y],
44
- });
45
- currentStack.positive += d.y;
46
- } else {
47
- currentSeries.data.push({
48
- data: d,
49
- index: currentStack.index,
50
- bound: [currentStack.negative, currentStack.negative + d.y],
51
- });
52
- currentStack.negative += d.y;
53
- }
54
- } else {
55
- currentSeries.data.push({
56
- data: d,
57
- bound: [0, d.y],
58
- index: 0,
59
- });
60
- }
61
- }
62
- }
63
- });
64
- dataMap.clear();
65
- return series;
66
- };
67
-
68
- /**
69
- * 计算堆叠数据
70
- * @param {Array} data 数据
71
- * @param {Map} series 系列
72
- * @returns {Array} 返回堆叠后的数据,由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
73
- */
74
-
75
- export default ({ data, series }) => {
76
- const _series = useMemo(() => {
77
- const stacks = getStacks(series);
78
- const _series = getSeriesMap(series);
79
- return { stacks, series: seriesYOrZ(_series) };
80
- }, [series]);
81
-
82
- const _data = useMemo(() => dataYOrZ(data, _series.series), [data, _series]);
83
-
84
- const tmp = useMemo(() => {
85
- const { y: dataY, z: dataZ } = _data;
86
- const {
87
- stacks,
88
- series: { y: seriesY, z: seriesZ },
89
- } = _series;
90
- resetStackData(seriesY);
91
- resetStackData(seriesZ);
92
- setStackData(dataY, seriesY, stacks);
93
- setStackData(dataZ, seriesZ, stacks);
94
-
95
- return {
96
- bandLength: stacks.filter((item) => item.type == 'band').length,
97
- series: [...seriesY.values(), ...seriesZ.values()],
98
- };
99
- }, [_data, _series]);
100
- return tmp;
101
- };
1
+ import { useMemo } from 'react';
2
+ import { group } from 'd3v7';
3
+ import {
4
+ dataYOrZ,
5
+ seriesYOrZ,
6
+ getCurrentStack,
7
+ getStacks,
8
+ resetStacks,
9
+ } from '../utils';
10
+
11
+ const getSeriesMap = (series) => {
12
+ const seriesMap = new Map();
13
+ series.forEach(({ name, ...rest }) => {
14
+ seriesMap.set(name, {
15
+ ...rest,
16
+ name,
17
+ data: [],
18
+ });
19
+ });
20
+ return seriesMap;
21
+ };
22
+ const resetStackData = (series) => {
23
+ series.forEach((series) => {
24
+ series.data = [];
25
+ });
26
+ };
27
+
28
+ const setStackData = (data, series, stacks) => {
29
+ const dataMap = group(data, (d) => d.x);
30
+
31
+ dataMap.forEach((value) => {
32
+ resetStacks(stacks);
33
+ for (let i = 0, j = value.length; i < j; i++) {
34
+ const d = value[i];
35
+ const currentSeries = series.get(d.s);
36
+ if (d && d.y !== undefined && !isNaN(d.y)) {
37
+ const currentStack = getCurrentStack(currentSeries, stacks);
38
+ if (currentSeries && currentStack) {
39
+ if (d.y >= 0) {
40
+ currentSeries.data.push({
41
+ data: d,
42
+ index: currentStack.index,
43
+ bound: [currentStack.positive, currentStack.positive + d.y],
44
+ });
45
+ currentStack.positive += d.y;
46
+ } else {
47
+ currentSeries.data.push({
48
+ data: d,
49
+ index: currentStack.index,
50
+ bound: [currentStack.negative, currentStack.negative + d.y],
51
+ });
52
+ currentStack.negative += d.y;
53
+ }
54
+ } else {
55
+ currentSeries.data.push({
56
+ data: d,
57
+ bound: [0, d.y],
58
+ index: 0,
59
+ });
60
+ }
61
+ }
62
+ }
63
+ });
64
+ dataMap.clear();
65
+ return series;
66
+ };
67
+
68
+ /**
69
+ * 计算堆叠数据
70
+ * @param {Array} data 数据
71
+ * @param {Map} series 系列
72
+ * @returns {Array} 返回堆叠后的数据,由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
73
+ */
74
+
75
+ export default ({ data, series }) => {
76
+ const _series = useMemo(() => {
77
+ const stacks = getStacks(series);
78
+ const _series = getSeriesMap(series);
79
+ return { stacks, series: seriesYOrZ(_series) };
80
+ }, [series]);
81
+
82
+ const _data = useMemo(() => dataYOrZ(data, _series.series), [data, _series]);
83
+
84
+ const tmp = useMemo(() => {
85
+ const { y: dataY, z: dataZ } = _data;
86
+ const {
87
+ stacks,
88
+ series: { y: seriesY, z: seriesZ },
89
+ } = _series;
90
+ resetStackData(seriesY);
91
+ resetStackData(seriesZ);
92
+ setStackData(dataY, seriesY, stacks);
93
+ setStackData(dataZ, seriesZ, stacks);
94
+
95
+ return {
96
+ bandLength: stacks.filter((item) => item.type == 'band').length,
97
+ series: [...seriesY.values(), ...seriesZ.values()],
98
+ };
99
+ }, [_data, _series]);
100
+ return tmp;
101
+ };