@easyv/charts 1.7.36 → 1.7.37

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 (60) 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 +38 -6
  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 -42
  19. package/lib/css/piechart.module.css +26 -26
  20. package/lib/formatter/legend.js +55 -50
  21. package/lib/hooks/useAnimateData.js +6 -6
  22. package/lib/hooks/useFilterData.js +5 -5
  23. package/lib/hooks/useStackData.js +5 -5
  24. package/lib/hooks/useTooltip.js +11 -11
  25. package/package.json +54 -54
  26. package/src/components/Background.tsx +61 -61
  27. package/src/components/Band.tsx +334 -334
  28. package/src/components/Brush.js +159 -159
  29. package/src/components/Chart.js +157 -157
  30. package/src/components/ChartContainer.tsx +71 -71
  31. package/src/components/ConicalGradient.js +258 -258
  32. package/src/components/Control.jsx +242 -242
  33. package/src/components/ExtentData.js +18 -18
  34. package/src/components/Indicator.js +61 -61
  35. package/src/components/Label.js +262 -262
  36. package/src/components/Legend.js +289 -267
  37. package/src/components/Lighter.jsx +173 -173
  38. package/src/components/Line.js +153 -153
  39. package/src/components/LinearGradient.js +29 -29
  40. package/src/components/PieTooltip.jsx +160 -160
  41. package/src/components/SplitText.tsx +70 -70
  42. package/src/components/StereoBar.tsx +307 -307
  43. package/src/components/index.js +61 -61
  44. package/src/context/index.js +2 -2
  45. package/src/css/index.module.css +39 -42
  46. package/src/css/piechart.module.css +26 -26
  47. package/src/element/ConicGradient.jsx +55 -55
  48. package/src/element/Line.tsx +33 -33
  49. package/src/element/index.ts +3 -3
  50. package/src/formatter/index.js +1 -1
  51. package/src/formatter/legend.js +122 -115
  52. package/src/hooks/index.js +20 -20
  53. package/src/hooks/useAnimateData.ts +68 -68
  54. package/src/hooks/useFilterData.js +77 -77
  55. package/src/hooks/useStackData.js +140 -140
  56. package/src/hooks/useTooltip.ts +103 -103
  57. package/src/index.js +6 -6
  58. package/src/types/index.d.ts +68 -68
  59. package/src/utils/index.js +812 -812
  60. 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
+ });