@easyv/charts 1.7.37 → 1.7.38

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 (59) hide show
  1. package/.babelrc +8 -8
  2. package/CHANGELOG.md +18 -18
  3. package/commitlint.config.js +1 -1
  4. package/lib/components/Background.js +2 -2
  5. package/lib/components/Band.js +2 -2
  6. package/lib/components/Brush.js +2 -2
  7. package/lib/components/Chart.js +2 -2
  8. package/lib/components/ChartContainer.js +2 -2
  9. package/lib/components/ConicalGradient.js +21 -21
  10. package/lib/components/ExtentData.js +2 -2
  11. package/lib/components/Indicator.js +2 -2
  12. package/lib/components/Label.js +2 -2
  13. package/lib/components/Legend.js +5 -8
  14. package/lib/components/Lighter.js +2 -2
  15. package/lib/components/Line.js +2 -2
  16. package/lib/components/LinearGradient.js +2 -2
  17. package/lib/components/StereoBar.js +2 -2
  18. package/lib/css/index.module.css +39 -39
  19. package/lib/css/piechart.module.css +26 -26
  20. package/lib/hooks/useAnimateData.js +6 -6
  21. package/lib/hooks/useFilterData.js +5 -5
  22. package/lib/hooks/useStackData.js +5 -5
  23. package/lib/hooks/useTooltip.js +11 -11
  24. package/package.json +54 -54
  25. package/src/components/Background.tsx +61 -61
  26. package/src/components/Band.tsx +334 -334
  27. package/src/components/Brush.js +159 -159
  28. package/src/components/Chart.js +157 -157
  29. package/src/components/ChartContainer.tsx +71 -71
  30. package/src/components/ConicalGradient.js +258 -258
  31. package/src/components/Control.jsx +242 -242
  32. package/src/components/ExtentData.js +18 -18
  33. package/src/components/Indicator.js +61 -61
  34. package/src/components/Label.js +262 -262
  35. package/src/components/Legend.js +286 -289
  36. package/src/components/Lighter.jsx +173 -173
  37. package/src/components/Line.js +153 -153
  38. package/src/components/LinearGradient.js +29 -29
  39. package/src/components/PieTooltip.jsx +160 -160
  40. package/src/components/SplitText.tsx +70 -70
  41. package/src/components/StereoBar.tsx +307 -307
  42. package/src/components/index.js +61 -61
  43. package/src/context/index.js +2 -2
  44. package/src/css/index.module.css +39 -39
  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 +122 -122
  51. package/src/hooks/index.js +20 -20
  52. package/src/hooks/useAnimateData.ts +68 -68
  53. package/src/hooks/useFilterData.js +77 -77
  54. package/src/hooks/useStackData.js +140 -140
  55. package/src/hooks/useTooltip.ts +103 -103
  56. package/src/index.js +6 -6
  57. package/src/types/index.d.ts +68 -68
  58. package/src/utils/index.js +812 -812
  59. package/tsconfig.json +23 -23
@@ -1,29 +1,29 @@
1
- /**
2
- * svg渐变滤镜
3
- */
4
- export default ({
5
- id,
6
- colors,
7
- rotate = 0,
8
- gradientUnits,
9
- position: [x1, y1, x2, y2] = [0, 0, 0, 1],
10
- }) => (
11
- <linearGradient
12
- x1={x1}
13
- y1={y1}
14
- x2={x2}
15
- y2={y2}
16
- id={id}
17
- gradientUnits={gradientUnits}
18
- gradientTransform={'rotate(' + rotate + ', .5, .5)'}
19
- >
20
- {colors.map(({ offset, color, stopOpacity = 1 }, index) => (
21
- <stop
22
- key={index}
23
- offset={offset}
24
- stopColor={color}
25
- stopOpacity={stopOpacity}
26
- />
27
- ))}
28
- </linearGradient>
29
- );
1
+ /**
2
+ * svg渐变滤镜
3
+ */
4
+ export default ({
5
+ id,
6
+ colors,
7
+ rotate = 0,
8
+ gradientUnits,
9
+ position: [x1, y1, x2, y2] = [0, 0, 0, 1],
10
+ }) => (
11
+ <linearGradient
12
+ x1={x1}
13
+ y1={y1}
14
+ x2={x2}
15
+ y2={y2}
16
+ id={id}
17
+ gradientUnits={gradientUnits}
18
+ gradientTransform={'rotate(' + rotate + ', .5, .5)'}
19
+ >
20
+ {colors.map(({ offset, color, stopOpacity = 1 }, index) => (
21
+ <stop
22
+ key={index}
23
+ offset={offset}
24
+ stopColor={color}
25
+ stopOpacity={stopOpacity}
26
+ />
27
+ ))}
28
+ </linearGradient>
29
+ );
@@ -1,161 +1,161 @@
1
- import React, { memo } from 'react'
2
- import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from '../utils';
3
-
4
-
5
- export const PieTooltip = memo((props) => {
6
- const { mousePos,
7
- pieCenter,
8
- config: {
9
- tip: {
10
- data: { lineHeight, iconSize, name,
11
- value: { show: valueIsShow, fontStyle: valueFont, suffix: valueSuffix, suffix: { show: valueSuffixIsShow } },
12
- percentage: { show: percentageIsShow, fontStyle: percentageFont, suffix: percentageSuffix, suffix: { show: percentageSuffixIsShow }, precision },
13
- },
14
- image,
15
- margin,
16
- size: { width: tipWidth, height: tipHeight },
17
- translate: translateTip,
18
- },
19
- },
20
- data,
21
- series } = props
22
-
23
- const Item = () => {
24
- const { data: { s, y }, percent } = data
25
- const { type, icon, displayName } = [...series.values()].find(
26
- (series) => series.name == s
27
- );
28
-
29
- const renderSuffix = (suffix) => {
30
- const {
31
- content,
32
- font: suffiixFont,
33
- translate: suffixTranslate,
34
- } = suffix;
35
- return (
36
- <span
37
- style={{
38
- ...getFontStyle(suffiixFont),
39
- display: "inline-block",
40
- transform: getTranslate3d(suffixTranslate),
41
- }}
42
- >
43
- {content}
44
- </span>
45
- )
46
- }
47
-
48
- const _icon = getIcon(type, icon);
49
- return (
50
- <dd
51
- style={{
52
- display: 'flex',
53
- justifyContent: 'space-between',
54
- lineHeight: lineHeight + 'px',
55
- }}
56
-
57
- >
58
- <span
59
- style={{
60
- // border: '1px solid red',
61
- display: 'flex',
62
- alignItems: 'center',
63
- gap: icon.iconGap,
64
- }}
65
- >
66
- <span
67
- style={{
68
- ..._icon,
69
- width: iconSize + 'px',
70
- height: iconSize + 'px',
71
- }}
72
- />
73
- <span style={getFontStyle(name)}>{displayName || s}</span>
74
- </span>
75
- {valueIsShow && <span style={getFontStyle(valueFont)}>
76
- {y}
77
- {valueSuffixIsShow && renderSuffix(valueSuffix)}
78
- </span>}
79
- {percentageIsShow && <span style={getFontStyle(percentageFont)}>
80
- {Number(percent).toFixed(precision)}
81
- {percentageSuffixIsShow && renderSuffix(percentageSuffix)}
82
- </span>}
83
- </dd>
84
- );
85
- }
86
- const { x: mouseX, y: mouseY } = mousePos
87
- const { x: centerX, y: centerY } = pieCenter
88
- const getTipPos = () => {
89
-
90
- const getBigscreenScale = () => {
91
- if (window.getScreenScale) {
92
- return window.getScreenScale()
93
- } else {
94
- const bigscreenDom = document.getElementById('bigscreen-container')
95
- if (!bigscreenDom) return [1, 1]
96
- const transform = bigscreenDom.style.transform
97
- if (!transform) return [1, 1]
98
- let match = transform.match(/scale\(([^)]+)\)/)
99
- if (match) {
100
- const scaleMatch = match[1].split(',')
101
- let scaleX = scaleMatch[0];
102
- let scaleY = scaleMatch[1];
103
- if (scaleY) {
104
- return [Number(scaleX), Number(scaleY)]
105
- } else {
106
- return [Number(scaleX), Number(scaleX)]
107
- }
108
- } else {
109
- return [1, 1]
110
- }
111
- }
112
- }
113
- const [scaleX, scaleY] = getBigscreenScale()
114
- const _mouseX = mouseX / scaleX
115
- const _mouseY = mouseY / scaleY
116
- const tipPosMap = {
117
- rightTop: `translate(${_mouseX + translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
118
- leftTop: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
119
- leftBottom: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY + translateTip.y}px)`,
120
- rightBottom: `translate(${_mouseX + translateTip.x}px,${(_mouseY + translateTip.y)}px)`,
121
- }
122
- if (_mouseX < centerX && _mouseY < centerY) {
123
- return tipPosMap.leftTop
124
- } else if (_mouseX > centerX && _mouseY < centerY) {
125
- return tipPosMap.rightTop
126
- } else if (_mouseX >= centerX && _mouseY >= centerY) {
127
- return tipPosMap.rightBottom
128
- } else {
129
- return tipPosMap.leftBottom
130
- }
131
- }
132
-
133
- return <div
134
- className='__easyv-tooltip'
135
- style={{
136
- pointerEvents: 'none',
137
- transform: getTipPos(mousePos, pieCenter),
138
- width: tipWidth,
139
- height: tipHeight,
140
- padding: getMargin(margin),
141
- background: image
142
- ? '50% 50% / 100% 100% no-repeat url(' +
143
- window.appConfig.ASSETS_URL +
144
- image +
145
- ')'
146
- : 'rgba(48, 55, 66, 0.85)',
147
- }}
148
- >
149
- <dl
150
- style={{
151
- display: 'flex',
152
- flexDirection: 'column',
153
- justifyContent: 'space-between',
154
- height: '100%',
155
- }}
156
- >
157
- {Item()}
158
- </dl>
159
-
160
- </div>
1
+ import React, { memo } from 'react'
2
+ import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from '../utils';
3
+
4
+
5
+ export const PieTooltip = memo((props) => {
6
+ const { mousePos,
7
+ pieCenter,
8
+ config: {
9
+ tip: {
10
+ data: { lineHeight, iconSize, name,
11
+ value: { show: valueIsShow, fontStyle: valueFont, suffix: valueSuffix, suffix: { show: valueSuffixIsShow } },
12
+ percentage: { show: percentageIsShow, fontStyle: percentageFont, suffix: percentageSuffix, suffix: { show: percentageSuffixIsShow }, precision },
13
+ },
14
+ image,
15
+ margin,
16
+ size: { width: tipWidth, height: tipHeight },
17
+ translate: translateTip,
18
+ },
19
+ },
20
+ data,
21
+ series } = props
22
+
23
+ const Item = () => {
24
+ const { data: { s, y }, percent } = data
25
+ const { type, icon, displayName } = [...series.values()].find(
26
+ (series) => series.name == s
27
+ );
28
+
29
+ const renderSuffix = (suffix) => {
30
+ const {
31
+ content,
32
+ font: suffiixFont,
33
+ translate: suffixTranslate,
34
+ } = suffix;
35
+ return (
36
+ <span
37
+ style={{
38
+ ...getFontStyle(suffiixFont),
39
+ display: "inline-block",
40
+ transform: getTranslate3d(suffixTranslate),
41
+ }}
42
+ >
43
+ {content}
44
+ </span>
45
+ )
46
+ }
47
+
48
+ const _icon = getIcon(type, icon);
49
+ return (
50
+ <dd
51
+ style={{
52
+ display: 'flex',
53
+ justifyContent: 'space-between',
54
+ lineHeight: lineHeight + 'px',
55
+ }}
56
+
57
+ >
58
+ <span
59
+ style={{
60
+ // border: '1px solid red',
61
+ display: 'flex',
62
+ alignItems: 'center',
63
+ gap: icon.iconGap,
64
+ }}
65
+ >
66
+ <span
67
+ style={{
68
+ ..._icon,
69
+ width: iconSize + 'px',
70
+ height: iconSize + 'px',
71
+ }}
72
+ />
73
+ <span style={getFontStyle(name)}>{displayName || s}</span>
74
+ </span>
75
+ {valueIsShow && <span style={getFontStyle(valueFont)}>
76
+ {y}
77
+ {valueSuffixIsShow && renderSuffix(valueSuffix)}
78
+ </span>}
79
+ {percentageIsShow && <span style={getFontStyle(percentageFont)}>
80
+ {Number(percent).toFixed(precision)}
81
+ {percentageSuffixIsShow && renderSuffix(percentageSuffix)}
82
+ </span>}
83
+ </dd>
84
+ );
85
+ }
86
+ const { x: mouseX, y: mouseY } = mousePos
87
+ const { x: centerX, y: centerY } = pieCenter
88
+ const getTipPos = () => {
89
+
90
+ const getBigscreenScale = () => {
91
+ if (window.getScreenScale) {
92
+ return window.getScreenScale()
93
+ } else {
94
+ const bigscreenDom = document.getElementById('bigscreen-container')
95
+ if (!bigscreenDom) return [1, 1]
96
+ const transform = bigscreenDom.style.transform
97
+ if (!transform) return [1, 1]
98
+ let match = transform.match(/scale\(([^)]+)\)/)
99
+ if (match) {
100
+ const scaleMatch = match[1].split(',')
101
+ let scaleX = scaleMatch[0];
102
+ let scaleY = scaleMatch[1];
103
+ if (scaleY) {
104
+ return [Number(scaleX), Number(scaleY)]
105
+ } else {
106
+ return [Number(scaleX), Number(scaleX)]
107
+ }
108
+ } else {
109
+ return [1, 1]
110
+ }
111
+ }
112
+ }
113
+ const [scaleX, scaleY] = getBigscreenScale()
114
+ const _mouseX = mouseX / scaleX
115
+ const _mouseY = mouseY / scaleY
116
+ const tipPosMap = {
117
+ rightTop: `translate(${_mouseX + translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
118
+ leftTop: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
119
+ leftBottom: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY + translateTip.y}px)`,
120
+ rightBottom: `translate(${_mouseX + translateTip.x}px,${(_mouseY + translateTip.y)}px)`,
121
+ }
122
+ if (_mouseX < centerX && _mouseY < centerY) {
123
+ return tipPosMap.leftTop
124
+ } else if (_mouseX > centerX && _mouseY < centerY) {
125
+ return tipPosMap.rightTop
126
+ } else if (_mouseX >= centerX && _mouseY >= centerY) {
127
+ return tipPosMap.rightBottom
128
+ } else {
129
+ return tipPosMap.leftBottom
130
+ }
131
+ }
132
+
133
+ return <div
134
+ className='__easyv-tooltip'
135
+ style={{
136
+ pointerEvents: 'none',
137
+ transform: getTipPos(mousePos, pieCenter),
138
+ width: tipWidth,
139
+ height: tipHeight,
140
+ padding: getMargin(margin),
141
+ background: image
142
+ ? '50% 50% / 100% 100% no-repeat url(' +
143
+ window.appConfig.ASSETS_URL +
144
+ image +
145
+ ')'
146
+ : 'rgba(48, 55, 66, 0.85)',
147
+ }}
148
+ >
149
+ <dl
150
+ style={{
151
+ display: 'flex',
152
+ flexDirection: 'column',
153
+ justifyContent: 'space-between',
154
+ height: '100%',
155
+ }}
156
+ >
157
+ {Item()}
158
+ </dl>
159
+
160
+ </div>
161
161
  })
@@ -1,70 +1,70 @@
1
- import React, { memo } from 'react';
2
-
3
- type SplitConfig = {
4
- fontFamily: string;
5
- separator: string;
6
- show: boolean;
7
- splitCount: number;
8
- style: 'custom' | 'default';
9
- margin: {
10
- left: number;
11
- right: number;
12
- };
13
- };
14
-
15
- interface SplitProps {
16
- value: number | string;
17
- config: SplitConfig;
18
- }
19
-
20
- export default memo((props: SplitProps) => {
21
- const {
22
- value,
23
- config: {
24
- fontFamily,
25
- separator,
26
- show,
27
- splitCount,
28
- style,
29
- margin: { left, right },
30
- },
31
- } = props;
32
-
33
- const stringValue = String(value);
34
- const [intValueString, pointValueSting = ''] = stringValue.split('.');
35
-
36
- const intArray: (string | '分隔符')[] = [];
37
-
38
- const pointArray = [...pointValueSting];
39
-
40
- [...intValueString].forEach((i, index) => {
41
- !(intValueString.length - index - 1) || (intValueString.length - index - 1) % splitCount
42
- ? intArray.push(i)
43
- : (intArray.push(i), intArray.push('分隔符'));
44
- });
45
-
46
- return show ? (
47
- <>
48
- {intArray.map((v, index) => {
49
- return (
50
- <span
51
- key={'int_' + index}
52
- style={{
53
- fontFamily: v === '分隔符' && style != 'default' ? fontFamily : 'inherit',
54
- marginLeft: v === '分隔符' ? left : 0,
55
- marginRight: v === '分隔符' ? right : 0,
56
- }}
57
- >
58
- {v === '分隔符' ? (style == 'custom' && separator ? separator : ',') : v}
59
- </span>
60
- );
61
- })}
62
- {pointArray.length ? <span>.</span> : null}
63
- {pointArray.map((v, index) => {
64
- return <span key={'point_' + index}>{v}</span>;
65
- })}
66
- </>
67
- ) : (
68
- value
69
- );
70
- });
1
+ import React, { memo } from 'react';
2
+
3
+ type SplitConfig = {
4
+ fontFamily: string;
5
+ separator: string;
6
+ show: boolean;
7
+ splitCount: number;
8
+ style: 'custom' | 'default';
9
+ margin: {
10
+ left: number;
11
+ right: number;
12
+ };
13
+ };
14
+
15
+ interface SplitProps {
16
+ value: number | string;
17
+ config: SplitConfig;
18
+ }
19
+
20
+ export default memo((props: SplitProps) => {
21
+ const {
22
+ value,
23
+ config: {
24
+ fontFamily,
25
+ separator,
26
+ show,
27
+ splitCount,
28
+ style,
29
+ margin: { left, right },
30
+ },
31
+ } = props;
32
+
33
+ const stringValue = String(value);
34
+ const [intValueString, pointValueSting = ''] = stringValue.split('.');
35
+
36
+ const intArray: (string | '分隔符')[] = [];
37
+
38
+ const pointArray = [...pointValueSting];
39
+
40
+ [...intValueString].forEach((i, index) => {
41
+ !(intValueString.length - index - 1) || (intValueString.length - index - 1) % splitCount
42
+ ? intArray.push(i)
43
+ : (intArray.push(i), intArray.push('分隔符'));
44
+ });
45
+
46
+ return show ? (
47
+ <>
48
+ {intArray.map((v, index) => {
49
+ return (
50
+ <span
51
+ key={'int_' + index}
52
+ style={{
53
+ fontFamily: v === '分隔符' && style != 'default' ? fontFamily : 'inherit',
54
+ marginLeft: v === '分隔符' ? left : 0,
55
+ marginRight: v === '分隔符' ? right : 0,
56
+ }}
57
+ >
58
+ {v === '分隔符' ? (style == 'custom' && separator ? separator : ',') : v}
59
+ </span>
60
+ );
61
+ })}
62
+ {pointArray.length ? <span>.</span> : null}
63
+ {pointArray.map((v, index) => {
64
+ return <span key={'point_' + index}>{v}</span>;
65
+ })}
66
+ </>
67
+ ) : (
68
+ value
69
+ );
70
+ });