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