@gm-pc/vision 1.24.9-beta.5 → 1.24.9-beta.9
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.
- package/package.json +2 -2
- package/src/chart/bar/components/table_chart.tsx +106 -106
- package/src/chart/bar/core/config.ts +257 -257
- package/src/chart/bar/core/index.ts +9 -9
- package/src/chart/bar/core/utils.ts +8 -8
- package/src/chart/bar/index.less +132 -132
- package/src/chart/bar/index.tsx +18 -18
- package/src/chart/bar/stories.tsx +420 -420
- package/src/chart/base/index.ts +135 -135
- package/src/chart/line/core/config.ts +209 -209
- package/src/chart/line/core/index.ts +9 -9
- package/src/chart/line/core/utils.ts +49 -49
- package/src/chart/line/index.tsx +12 -12
- package/src/chart/line/stories.tsx +234 -234
- package/src/chart/pie/core/config.ts +199 -199
- package/src/chart/pie/core/index.ts +9 -9
- package/src/chart/pie/index.tsx +12 -12
- package/src/chart/pie/stories.tsx +39 -39
- package/src/common/hooks/useChart.ts +40 -40
- package/src/common/utils/dom.ts +22 -22
- package/src/index.ts +11 -11
- package/src/theme/index.ts +8 -8
- package/src/theme/ocean/chart.ts +40 -40
- package/src/theme/ocean/index.ts +495 -495
- package/src/theme/sunset/chart.ts +40 -40
- package/src/theme/sunset/index.ts +495 -495
- package/src/theme/utils/create-style-by-sheet.ts +1303 -1303
- package/src/types/common.ts +41 -41
- package/src/types/theme.ts +552 -552
- package/tsconfig.json +3 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gm-pc/vision",
|
|
3
|
-
"version": "1.24.9-beta.
|
|
3
|
+
"version": "1.24.9-beta.9",
|
|
4
4
|
"description": "> TODO: description",
|
|
5
5
|
"author": "liyatang <liyatang@qq.com>",
|
|
6
6
|
"homepage": "https://github.com/gmfe/gm-pc#readme",
|
|
@@ -27,5 +27,5 @@
|
|
|
27
27
|
"size-sensor": "^1.0.1",
|
|
28
28
|
"ts-config-gm-react-app": "^3.0.6"
|
|
29
29
|
},
|
|
30
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "c2db31e348590878ff105a3e39589f2aaafa1e19"
|
|
31
31
|
}
|
|
@@ -1,106 +1,106 @@
|
|
|
1
|
-
import React, { FC, forwardRef } from 'react'
|
|
2
|
-
import classNames from 'classnames'
|
|
3
|
-
import { ChartProps } from '../../../types/common'
|
|
4
|
-
export interface TableChartProps extends ChartProps {
|
|
5
|
-
name?: string
|
|
6
|
-
ref?: React.ForwardedRef<HTMLDivElement>
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const TableChart: FC<TableChartProps> = forwardRef<HTMLDivElement, TableChartProps>(
|
|
10
|
-
(props, ref) => {
|
|
11
|
-
const { options, data } = props
|
|
12
|
-
const { position, theme, height, legend } = options
|
|
13
|
-
const [x, y] = position.split('*')
|
|
14
|
-
|
|
15
|
-
return (
|
|
16
|
-
<div
|
|
17
|
-
className={classNames('gm-vision-container', {
|
|
18
|
-
'gm-vision-theme-ocean': theme === 'ocean',
|
|
19
|
-
'gm-vision-theme-sunset': theme === 'sunset',
|
|
20
|
-
})}
|
|
21
|
-
style={{
|
|
22
|
-
height,
|
|
23
|
-
}}
|
|
24
|
-
>
|
|
25
|
-
{!theme && (
|
|
26
|
-
<>
|
|
27
|
-
<div className='gm-vision-title'>排名</div>
|
|
28
|
-
<div className='gm-vision-title'>名称</div>
|
|
29
|
-
<div className='gm-vision-title'>数据</div>
|
|
30
|
-
</>
|
|
31
|
-
)}
|
|
32
|
-
{/* 排名 */}
|
|
33
|
-
<div
|
|
34
|
-
className={classNames('gm-vision-flex-column gm-vision-flex', {
|
|
35
|
-
'gm-vision-marignBottom': legend === true,
|
|
36
|
-
})}
|
|
37
|
-
>
|
|
38
|
-
{data.map((_: any, index: number) => (
|
|
39
|
-
<div
|
|
40
|
-
key={`title_${index}`}
|
|
41
|
-
className='gm-vision-flex-flex gm-vision-align-center gm-vision-flex gm-vision-index'
|
|
42
|
-
>
|
|
43
|
-
<div className='gm-vision-index-number'>{index + 1}</div>
|
|
44
|
-
</div>
|
|
45
|
-
))}
|
|
46
|
-
</div>
|
|
47
|
-
{/* 图表 */}
|
|
48
|
-
<div
|
|
49
|
-
className='gm-vision-flex'
|
|
50
|
-
style={{
|
|
51
|
-
overflow: 'hidden',
|
|
52
|
-
}}
|
|
53
|
-
>
|
|
54
|
-
{/* 名称 */}
|
|
55
|
-
<div
|
|
56
|
-
className={classNames(
|
|
57
|
-
'gm-vision-flex-column gm-margin-right-10 gm-vision-flex',
|
|
58
|
-
{
|
|
59
|
-
'gm-vision-marignBottom': legend === true,
|
|
60
|
-
}
|
|
61
|
-
)}
|
|
62
|
-
>
|
|
63
|
-
{data.map((item: any, index: number) => (
|
|
64
|
-
<div
|
|
65
|
-
key={`name_${index}`}
|
|
66
|
-
className='gm-vision-flex-flex gm-vision-align-center gm-vision-flex gm-vision-name'
|
|
67
|
-
style={{
|
|
68
|
-
whiteSpace: 'nowrap',
|
|
69
|
-
}}
|
|
70
|
-
>
|
|
71
|
-
{item[x]}
|
|
72
|
-
</div>
|
|
73
|
-
))}
|
|
74
|
-
</div>
|
|
75
|
-
<div
|
|
76
|
-
className='gm-vision-flex-flex'
|
|
77
|
-
ref={ref}
|
|
78
|
-
style={{
|
|
79
|
-
overflow: 'hidden',
|
|
80
|
-
}}
|
|
81
|
-
/>
|
|
82
|
-
</div>
|
|
83
|
-
{/* 数据 */}
|
|
84
|
-
<div
|
|
85
|
-
className={classNames(
|
|
86
|
-
'gm-vision-flex-column gm-margin-left-10 gm-vision-flex',
|
|
87
|
-
{
|
|
88
|
-
'gm-vision-marignBottom': legend === true,
|
|
89
|
-
}
|
|
90
|
-
)}
|
|
91
|
-
>
|
|
92
|
-
{data.map((item: any, index: number) => (
|
|
93
|
-
<div
|
|
94
|
-
key={`value_${index}`}
|
|
95
|
-
className='gm-vision-flex-flex gm-vision-align-center gm-vision-flex'
|
|
96
|
-
>
|
|
97
|
-
{item[y]}
|
|
98
|
-
</div>
|
|
99
|
-
))}
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
102
|
-
)
|
|
103
|
-
}
|
|
104
|
-
)
|
|
105
|
-
|
|
106
|
-
export default TableChart
|
|
1
|
+
import React, { FC, forwardRef } from 'react'
|
|
2
|
+
import classNames from 'classnames'
|
|
3
|
+
import { ChartProps } from '../../../types/common'
|
|
4
|
+
export interface TableChartProps extends ChartProps {
|
|
5
|
+
name?: string
|
|
6
|
+
ref?: React.ForwardedRef<HTMLDivElement>
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const TableChart: FC<TableChartProps> = forwardRef<HTMLDivElement, TableChartProps>(
|
|
10
|
+
(props, ref) => {
|
|
11
|
+
const { options, data } = props
|
|
12
|
+
const { position, theme, height, legend } = options
|
|
13
|
+
const [x, y] = position.split('*')
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<div
|
|
17
|
+
className={classNames('gm-vision-container', {
|
|
18
|
+
'gm-vision-theme-ocean': theme === 'ocean',
|
|
19
|
+
'gm-vision-theme-sunset': theme === 'sunset',
|
|
20
|
+
})}
|
|
21
|
+
style={{
|
|
22
|
+
height,
|
|
23
|
+
}}
|
|
24
|
+
>
|
|
25
|
+
{!theme && (
|
|
26
|
+
<>
|
|
27
|
+
<div className='gm-vision-title'>排名</div>
|
|
28
|
+
<div className='gm-vision-title'>名称</div>
|
|
29
|
+
<div className='gm-vision-title'>数据</div>
|
|
30
|
+
</>
|
|
31
|
+
)}
|
|
32
|
+
{/* 排名 */}
|
|
33
|
+
<div
|
|
34
|
+
className={classNames('gm-vision-flex-column gm-vision-flex', {
|
|
35
|
+
'gm-vision-marignBottom': legend === true,
|
|
36
|
+
})}
|
|
37
|
+
>
|
|
38
|
+
{data.map((_: any, index: number) => (
|
|
39
|
+
<div
|
|
40
|
+
key={`title_${index}`}
|
|
41
|
+
className='gm-vision-flex-flex gm-vision-align-center gm-vision-flex gm-vision-index'
|
|
42
|
+
>
|
|
43
|
+
<div className='gm-vision-index-number'>{index + 1}</div>
|
|
44
|
+
</div>
|
|
45
|
+
))}
|
|
46
|
+
</div>
|
|
47
|
+
{/* 图表 */}
|
|
48
|
+
<div
|
|
49
|
+
className='gm-vision-flex'
|
|
50
|
+
style={{
|
|
51
|
+
overflow: 'hidden',
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
54
|
+
{/* 名称 */}
|
|
55
|
+
<div
|
|
56
|
+
className={classNames(
|
|
57
|
+
'gm-vision-flex-column gm-margin-right-10 gm-vision-flex',
|
|
58
|
+
{
|
|
59
|
+
'gm-vision-marignBottom': legend === true,
|
|
60
|
+
}
|
|
61
|
+
)}
|
|
62
|
+
>
|
|
63
|
+
{data.map((item: any, index: number) => (
|
|
64
|
+
<div
|
|
65
|
+
key={`name_${index}`}
|
|
66
|
+
className='gm-vision-flex-flex gm-vision-align-center gm-vision-flex gm-vision-name'
|
|
67
|
+
style={{
|
|
68
|
+
whiteSpace: 'nowrap',
|
|
69
|
+
}}
|
|
70
|
+
>
|
|
71
|
+
{item[x]}
|
|
72
|
+
</div>
|
|
73
|
+
))}
|
|
74
|
+
</div>
|
|
75
|
+
<div
|
|
76
|
+
className='gm-vision-flex-flex'
|
|
77
|
+
ref={ref}
|
|
78
|
+
style={{
|
|
79
|
+
overflow: 'hidden',
|
|
80
|
+
}}
|
|
81
|
+
/>
|
|
82
|
+
</div>
|
|
83
|
+
{/* 数据 */}
|
|
84
|
+
<div
|
|
85
|
+
className={classNames(
|
|
86
|
+
'gm-vision-flex-column gm-margin-left-10 gm-vision-flex',
|
|
87
|
+
{
|
|
88
|
+
'gm-vision-marignBottom': legend === true,
|
|
89
|
+
}
|
|
90
|
+
)}
|
|
91
|
+
>
|
|
92
|
+
{data.map((item: any, index: number) => (
|
|
93
|
+
<div
|
|
94
|
+
key={`value_${index}`}
|
|
95
|
+
className='gm-vision-flex-flex gm-vision-align-center gm-vision-flex'
|
|
96
|
+
>
|
|
97
|
+
{item[y]}
|
|
98
|
+
</div>
|
|
99
|
+
))}
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
)
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
|
|
106
|
+
export default TableChart
|