@easyv/charts 1.0.71 → 1.0.72

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 (62) hide show
  1. package/.babelrc +8 -8
  2. package/lib/components/AnimateData.js +2 -2
  3. package/lib/components/Axis.js +15 -12
  4. package/lib/components/Background.js +2 -2
  5. package/lib/components/Carousel.js +2 -2
  6. package/lib/components/Chart.js +2 -2
  7. package/lib/components/ConicalGradient.js +21 -21
  8. package/lib/components/Indicator.js +2 -2
  9. package/lib/components/LinearGradient.js +2 -2
  10. package/lib/css/index.module.css +41 -41
  11. package/lib/css/piechart.module.css +26 -26
  12. package/lib/hooks/useAnimateData.js +5 -5
  13. package/lib/hooks/useAxes.js +5 -5
  14. package/lib/hooks/useCarouselAxisX.js +5 -5
  15. package/lib/hooks/useExtentData.js +6 -6
  16. package/lib/hooks/useFilterData.js +5 -5
  17. package/lib/hooks/useStackData.js +5 -5
  18. package/lib/hooks/useTooltip.js +10 -10
  19. package/package.json +34 -34
  20. package/src/components/AnimateData.tsx +24 -24
  21. package/src/components/Axis.tsx +336 -333
  22. package/src/components/Background.tsx +45 -45
  23. package/src/components/Band.tsx +160 -160
  24. package/src/components/Brush.js +159 -159
  25. package/src/components/Carousel.tsx +144 -144
  26. package/src/components/Chart.js +99 -99
  27. package/src/components/ChartContainer.tsx +63 -63
  28. package/src/components/ConicalGradient.js +258 -258
  29. package/src/components/ExtentData.js +17 -17
  30. package/src/components/FilterData.js +23 -23
  31. package/src/components/Indicator.js +13 -13
  32. package/src/components/Label.js +206 -206
  33. package/src/components/Legend.js +158 -158
  34. package/src/components/Lighter.jsx +162 -162
  35. package/src/components/Line.js +128 -128
  36. package/src/components/LinearGradient.js +29 -29
  37. package/src/components/Mapping.js +71 -71
  38. package/src/components/PieChart.js +1093 -1093
  39. package/src/components/StackData.js +20 -20
  40. package/src/components/StereoBar.tsx +298 -298
  41. package/src/components/Tooltip.js +133 -133
  42. package/src/components/index.js +49 -49
  43. package/src/context/index.js +2 -2
  44. package/src/css/index.module.css +41 -41
  45. package/src/css/piechart.module.css +26 -26
  46. package/src/element/ConicGradient.jsx +55 -55
  47. package/src/element/Line.tsx +33 -33
  48. package/src/element/index.ts +3 -3
  49. package/src/formatter/index.js +1 -1
  50. package/src/formatter/legend.js +90 -90
  51. package/src/hooks/index.js +17 -17
  52. package/src/hooks/useAnimateData.ts +62 -62
  53. package/src/hooks/useAxes.js +143 -143
  54. package/src/hooks/useCarouselAxisX.js +163 -163
  55. package/src/hooks/useExtentData.js +88 -88
  56. package/src/hooks/useFilterData.js +72 -72
  57. package/src/hooks/useStackData.js +100 -100
  58. package/src/hooks/useTooltip.ts +96 -96
  59. package/src/index.js +6 -6
  60. package/src/types/index.d.ts +59 -59
  61. package/src/utils/index.js +671 -671
  62. package/tsconfig.json +22 -22
@@ -1,96 +1,96 @@
1
- import { useCallback, useState, useEffect } from 'react';
2
- import { getMousePos } from '../utils';
3
- const callback = () => {};
4
-
5
- /**
6
- * 主要用于轴类图表,返回当前选中的是哪一个x
7
- * @param {Array} svg svg的dom实例
8
- * @param {Number} marginLeft 左间距
9
- * @param {Number} marginTop 上间距
10
- * @param {Number} width 宽
11
- * @param {Number} height 高
12
- * @param {Number} axisX 类目轴
13
- * @param {Object} config 轮播动画参数
14
- * @returns {Object} 返回被选中的名称,坐标,选中方法
15
- */
16
- type Props = {
17
- svg: any;
18
- marginLeft: number;
19
- marginTop: number;
20
- width: number;
21
- height: number;
22
- axisX: AxisX;
23
- config: { auto?: boolean; interval?: number; manual?: boolean };
24
- };
25
-
26
- export default ({
27
- svg,
28
- marginLeft,
29
- marginTop,
30
- width,
31
- height,
32
- axisX,
33
- config: { auto, interval = 0, manual } = {},
34
- }: Props) => {
35
- const [currentIndex, setCurrentIndex] = useState<number | null>(null);
36
-
37
- const tickLength = axisX.allTicks.length;
38
- const setIndex = useCallback(
39
- (e) => {
40
- if (svg) {
41
- const {
42
- x: mouseX,
43
- y: mouseY,
44
- w: boundWidth,
45
- h: boundHeight,
46
- } = getMousePos(e, svg.current);
47
- const { carousel, allTicks, ticks, scaler, direction } = axisX;
48
- const _ticks = carousel ? ticks : allTicks;
49
- const ratioX = parseInt(svg.current.style.width) / boundWidth;
50
- const ratioY = parseInt(svg.current.style.height) / boundHeight;
51
- const resetX = mouseX * ratioX;
52
- const resetY = mouseY * ratioY;
53
- const x = resetX - marginLeft;
54
- const y = resetY - marginTop;
55
- if (x > 0 && x < width && y > 0 && y < height && _ticks.length) {
56
- const position = direction === 'vertical' ? y : x;
57
- const name = _ticks.reduce((prev: string, current: string) =>
58
- Math.abs(scaler(prev) - position) >
59
- Math.abs(scaler(current) - position)
60
- ? current
61
- : prev
62
- );
63
- setCurrentIndex(allTicks.findIndex((tick: string) => tick == name));
64
- } else {
65
- setCurrentIndex(null);
66
- }
67
- }
68
- },
69
- [svg, marginLeft, axisX]
70
- );
71
- useEffect(() => {
72
- const on = auto && tickLength;
73
- if (!!on) setCurrentIndex(0);
74
- const intervalHandler = on
75
- ? setInterval(() => {
76
- setCurrentIndex((index) => {
77
- const tmp = index == null ? 0 : index;
78
- const currentIndex = tmp + 1;
79
- if (currentIndex >= tickLength) {
80
- return 0;
81
- }
82
- return currentIndex;
83
- });
84
- }, interval * 1000)
85
- : null;
86
- return () => {
87
- intervalHandler && clearInterval(intervalHandler);
88
- };
89
- }, [auto, tickLength, interval]);
90
- const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
91
- return {
92
- name,
93
- x: axisX.scaler(name),
94
- setIndex: manual ? setIndex : callback,
95
- };
96
- };
1
+ import { useCallback, useState, useEffect } from 'react';
2
+ import { getMousePos } from '../utils';
3
+ const callback = () => {};
4
+
5
+ /**
6
+ * 主要用于轴类图表,返回当前选中的是哪一个x
7
+ * @param {Array} svg svg的dom实例
8
+ * @param {Number} marginLeft 左间距
9
+ * @param {Number} marginTop 上间距
10
+ * @param {Number} width 宽
11
+ * @param {Number} height 高
12
+ * @param {Number} axisX 类目轴
13
+ * @param {Object} config 轮播动画参数
14
+ * @returns {Object} 返回被选中的名称,坐标,选中方法
15
+ */
16
+ type Props = {
17
+ svg: any;
18
+ marginLeft: number;
19
+ marginTop: number;
20
+ width: number;
21
+ height: number;
22
+ axisX: AxisX;
23
+ config: { auto?: boolean; interval?: number; manual?: boolean };
24
+ };
25
+
26
+ export default ({
27
+ svg,
28
+ marginLeft,
29
+ marginTop,
30
+ width,
31
+ height,
32
+ axisX,
33
+ config: { auto, interval = 0, manual } = {},
34
+ }: Props) => {
35
+ const [currentIndex, setCurrentIndex] = useState<number | null>(null);
36
+
37
+ const tickLength = axisX.allTicks.length;
38
+ const setIndex = useCallback(
39
+ (e) => {
40
+ if (svg) {
41
+ const {
42
+ x: mouseX,
43
+ y: mouseY,
44
+ w: boundWidth,
45
+ h: boundHeight,
46
+ } = getMousePos(e, svg.current);
47
+ const { carousel, allTicks, ticks, scaler, direction } = axisX;
48
+ const _ticks = carousel ? ticks : allTicks;
49
+ const ratioX = parseInt(svg.current.style.width) / boundWidth;
50
+ const ratioY = parseInt(svg.current.style.height) / boundHeight;
51
+ const resetX = mouseX * ratioX;
52
+ const resetY = mouseY * ratioY;
53
+ const x = resetX - marginLeft;
54
+ const y = resetY - marginTop;
55
+ if (x > 0 && x < width && y > 0 && y < height && _ticks.length) {
56
+ const position = direction === 'vertical' ? y : x;
57
+ const name = _ticks.reduce((prev: string, current: string) =>
58
+ Math.abs(scaler(prev) - position) >
59
+ Math.abs(scaler(current) - position)
60
+ ? current
61
+ : prev
62
+ );
63
+ setCurrentIndex(allTicks.findIndex((tick: string) => tick == name));
64
+ } else {
65
+ setCurrentIndex(null);
66
+ }
67
+ }
68
+ },
69
+ [svg, marginLeft, axisX]
70
+ );
71
+ useEffect(() => {
72
+ const on = auto && tickLength;
73
+ if (!!on) setCurrentIndex(0);
74
+ const intervalHandler = on
75
+ ? setInterval(() => {
76
+ setCurrentIndex((index) => {
77
+ const tmp = index == null ? 0 : index;
78
+ const currentIndex = tmp + 1;
79
+ if (currentIndex >= tickLength) {
80
+ return 0;
81
+ }
82
+ return currentIndex;
83
+ });
84
+ }, interval * 1000)
85
+ : null;
86
+ return () => {
87
+ intervalHandler && clearInterval(intervalHandler);
88
+ };
89
+ }, [auto, tickLength, interval]);
90
+ const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
91
+ return {
92
+ name,
93
+ x: axisX.scaler(name),
94
+ setIndex: manual ? setIndex : callback,
95
+ };
96
+ };
package/src/index.js CHANGED
@@ -1,6 +1,6 @@
1
- export * from './components';
2
- export * from './hooks';
3
- export * from './context';
4
- export * from './formatter';
5
- export * as utils from './utils';
6
- export * from '@easyv/utils';
1
+ export * from './components';
2
+ export * from './hooks';
3
+ export * from './context';
4
+ export * from './formatter';
5
+ export * as utils from './utils';
6
+ export * from '@easyv/utils';
@@ -1,59 +1,59 @@
1
- declare module 'd3v7' {
2
- export * from 'd3-timer';
3
- export * from 'd3-array';
4
- }
5
-
6
- type DataType = {
7
- x: string;
8
- y: number;
9
- s: string;
10
- };
11
- type DataWithBoundType = {
12
- index: number;
13
- data: DataType;
14
- bound: Array<number>;
15
- flag: boolean;
16
- };
17
- type Context = {
18
- width: number;
19
- height: number;
20
- id: string;
21
- triggerOnRelative: Function;
22
- svg: Object;
23
- onEmit: Function;
24
- };
25
-
26
- type ChartLine = {
27
- show: boolean;
28
- color: string;
29
- lineWidth: number;
30
- strokeDasharray?: string;
31
- };
32
-
33
- type Orientation = 'top' | 'bottom' | 'left' | 'right';
34
-
35
- type Translate = {
36
- x: number;
37
- y: number;
38
- };
39
-
40
- type Font = {
41
- bold: boolean;
42
- color: string;
43
- fontFamily: string;
44
- fontSize: number;
45
- italic: boolean;
46
- letterSpacing: number;
47
- };
48
-
49
- type Align = { textAnchor: string; dominantBaseline: string };
50
-
51
- type Tick = { show: boolean; tick: string };
52
-
53
- type AxisX = {
54
- carousel: boolean;
55
- allTicks: Array<string>;
56
- ticks: Array<string>;
57
- scaler: Function;
58
- direction: 'vertical' | 'horizontal';
59
- };
1
+ declare module 'd3v7' {
2
+ export * from 'd3-timer';
3
+ export * from 'd3-array';
4
+ }
5
+
6
+ type DataType = {
7
+ x: string;
8
+ y: number;
9
+ s: string;
10
+ };
11
+ type DataWithBoundType = {
12
+ index: number;
13
+ data: DataType;
14
+ bound: Array<number>;
15
+ flag: boolean;
16
+ };
17
+ type Context = {
18
+ width: number;
19
+ height: number;
20
+ id: string;
21
+ triggerOnRelative: Function;
22
+ svg: Object;
23
+ onEmit: Function;
24
+ };
25
+
26
+ type ChartLine = {
27
+ show: boolean;
28
+ color: string;
29
+ lineWidth: number;
30
+ strokeDasharray?: string;
31
+ };
32
+
33
+ type Orientation = 'top' | 'bottom' | 'left' | 'right';
34
+
35
+ type Translate = {
36
+ x: number;
37
+ y: number;
38
+ };
39
+
40
+ type Font = {
41
+ bold: boolean;
42
+ color: string;
43
+ fontFamily: string;
44
+ fontSize: number;
45
+ italic: boolean;
46
+ letterSpacing: number;
47
+ };
48
+
49
+ type Align = { textAnchor: string; dominantBaseline: string };
50
+
51
+ type Tick = { show: boolean; tick: string };
52
+
53
+ type AxisX = {
54
+ carousel: boolean;
55
+ allTicks: Array<string>;
56
+ ticks: Array<string>;
57
+ scaler: Function;
58
+ direction: 'vertical' | 'horizontal';
59
+ };