@visactor/vchart-theme-demo-component 1.11.5 → 1.11.6-alpha.1
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/cjs/spec/funnelHorizontal.d.ts +131 -0
- package/cjs/spec/funnelHorizontal.js +126 -0
- package/cjs/spec/funnelHorizontal.js.map +1 -0
- package/cjs/spec/indicatorSankey.js +1 -2
- package/cjs/spec/line.js +2 -1
- package/cjs/vchart-chart-hub-theme/chart-list.js +6 -2
- package/cjs/vchart-chart-hub-theme/chart-list.js.map +1 -1
- package/cjs/vchart-chart-hub-theme/charts.js +3 -7
- package/cjs/vchart-chart-hub-theme/charts.js.map +1 -1
- package/esm/spec/funnelHorizontal.d.ts +131 -0
- package/esm/spec/funnelHorizontal.js +122 -0
- package/esm/spec/funnelHorizontal.js.map +1 -0
- package/esm/spec/indicatorSankey.js +1 -2
- package/esm/spec/line.js +2 -1
- package/esm/vchart-chart-hub-theme/chart-list.js +7 -1
- package/esm/vchart-chart-hub-theme/chart-list.js.map +1 -1
- package/esm/vchart-chart-hub-theme/charts.js +2 -4
- package/esm/vchart-chart-hub-theme/charts.js.map +1 -1
- package/package.json +6 -6
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
export declare const horizontalFunnelSpec: {
|
|
2
|
+
type: string;
|
|
3
|
+
padding: {
|
|
4
|
+
left: number;
|
|
5
|
+
right: number;
|
|
6
|
+
};
|
|
7
|
+
data: {
|
|
8
|
+
id: string;
|
|
9
|
+
values: {
|
|
10
|
+
value: number;
|
|
11
|
+
name: string;
|
|
12
|
+
percent: number;
|
|
13
|
+
}[];
|
|
14
|
+
}[];
|
|
15
|
+
color: {
|
|
16
|
+
type: string;
|
|
17
|
+
range: string[];
|
|
18
|
+
};
|
|
19
|
+
series: {
|
|
20
|
+
type: string;
|
|
21
|
+
categoryField: string;
|
|
22
|
+
valueField: string;
|
|
23
|
+
maxSize: string;
|
|
24
|
+
minSize: string;
|
|
25
|
+
funnelAlign: string;
|
|
26
|
+
funnelOrient: string;
|
|
27
|
+
isTransform: boolean;
|
|
28
|
+
shape: string;
|
|
29
|
+
transform: {
|
|
30
|
+
style: {
|
|
31
|
+
fill: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
label: {
|
|
35
|
+
visible: boolean;
|
|
36
|
+
style: {
|
|
37
|
+
lineHeight: number;
|
|
38
|
+
limit: (datum: any, ctx: any) => number;
|
|
39
|
+
text: (datum: any) => string;
|
|
40
|
+
x: (datum: any, ctx: any) => any;
|
|
41
|
+
y: (datum: any, ctx: any) => number;
|
|
42
|
+
textAlign: string;
|
|
43
|
+
textBaseline: string;
|
|
44
|
+
fontSize: number;
|
|
45
|
+
fontStyle: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
extensionMark: ({
|
|
49
|
+
type: string;
|
|
50
|
+
dataId: string;
|
|
51
|
+
style: {
|
|
52
|
+
points: (datum: any, ctx: any) => any[];
|
|
53
|
+
closePath: boolean;
|
|
54
|
+
lineWidth: number;
|
|
55
|
+
stroke: string;
|
|
56
|
+
text?: undefined;
|
|
57
|
+
x?: undefined;
|
|
58
|
+
width?: undefined;
|
|
59
|
+
textAlign?: undefined;
|
|
60
|
+
y?: undefined;
|
|
61
|
+
fill?: undefined;
|
|
62
|
+
ellipsis?: undefined;
|
|
63
|
+
disableAutoWrapLine?: undefined;
|
|
64
|
+
image?: undefined;
|
|
65
|
+
align?: undefined;
|
|
66
|
+
height?: undefined;
|
|
67
|
+
background?: undefined;
|
|
68
|
+
fillOpacity?: undefined;
|
|
69
|
+
};
|
|
70
|
+
} | {
|
|
71
|
+
type: string;
|
|
72
|
+
dataId: string;
|
|
73
|
+
style: {
|
|
74
|
+
text: (datum: any, ctx: any) => {
|
|
75
|
+
type: string;
|
|
76
|
+
text: ({
|
|
77
|
+
text: string;
|
|
78
|
+
fontWeight: string;
|
|
79
|
+
lineHeight: number;
|
|
80
|
+
fontSize?: undefined;
|
|
81
|
+
fill?: undefined;
|
|
82
|
+
} | {
|
|
83
|
+
text: string;
|
|
84
|
+
fontWeight: string;
|
|
85
|
+
fontSize: number;
|
|
86
|
+
lineHeight: number;
|
|
87
|
+
fill: string;
|
|
88
|
+
})[];
|
|
89
|
+
};
|
|
90
|
+
x: (datum: any, ctx: any) => any;
|
|
91
|
+
width: (datum: any, ctx: any) => number;
|
|
92
|
+
textAlign: string;
|
|
93
|
+
y: number;
|
|
94
|
+
stroke: boolean;
|
|
95
|
+
fill: string;
|
|
96
|
+
ellipsis: boolean;
|
|
97
|
+
disableAutoWrapLine: boolean;
|
|
98
|
+
points?: undefined;
|
|
99
|
+
closePath?: undefined;
|
|
100
|
+
lineWidth?: undefined;
|
|
101
|
+
image?: undefined;
|
|
102
|
+
align?: undefined;
|
|
103
|
+
height?: undefined;
|
|
104
|
+
background?: undefined;
|
|
105
|
+
fillOpacity?: undefined;
|
|
106
|
+
};
|
|
107
|
+
} | {
|
|
108
|
+
type: string;
|
|
109
|
+
dataId: string;
|
|
110
|
+
style: {
|
|
111
|
+
image: string;
|
|
112
|
+
x: (datum: any, ctx: any) => number;
|
|
113
|
+
y: number;
|
|
114
|
+
align: string;
|
|
115
|
+
width: number;
|
|
116
|
+
height: number;
|
|
117
|
+
background: string;
|
|
118
|
+
fillOpacity: number;
|
|
119
|
+
points?: undefined;
|
|
120
|
+
closePath?: undefined;
|
|
121
|
+
lineWidth?: undefined;
|
|
122
|
+
stroke?: undefined;
|
|
123
|
+
text?: undefined;
|
|
124
|
+
textAlign?: undefined;
|
|
125
|
+
fill?: undefined;
|
|
126
|
+
ellipsis?: undefined;
|
|
127
|
+
disableAutoWrapLine?: undefined;
|
|
128
|
+
};
|
|
129
|
+
})[];
|
|
130
|
+
}[];
|
|
131
|
+
};
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: !0
|
|
5
|
+
}), exports.horizontalFunnelSpec = void 0, exports.horizontalFunnelSpec = {
|
|
6
|
+
type: "common",
|
|
7
|
+
padding: {
|
|
8
|
+
left: 20,
|
|
9
|
+
right: 60
|
|
10
|
+
},
|
|
11
|
+
data: [ {
|
|
12
|
+
id: "funnel",
|
|
13
|
+
values: [ {
|
|
14
|
+
value: 100,
|
|
15
|
+
name: "Screening",
|
|
16
|
+
percent: 1
|
|
17
|
+
}, {
|
|
18
|
+
value: 80,
|
|
19
|
+
name: "Evaluating",
|
|
20
|
+
percent: .8
|
|
21
|
+
}, {
|
|
22
|
+
value: 50,
|
|
23
|
+
name: "Passed",
|
|
24
|
+
percent: .5
|
|
25
|
+
}, {
|
|
26
|
+
value: 30,
|
|
27
|
+
name: "Interview",
|
|
28
|
+
percent: .3
|
|
29
|
+
} ]
|
|
30
|
+
} ],
|
|
31
|
+
color: {
|
|
32
|
+
type: "ordinal",
|
|
33
|
+
range: [ "rgb(54,106,253)", "rgb(103,138,251)", "rgb(146,173,255)", "rgb(191,207,255)" ]
|
|
34
|
+
},
|
|
35
|
+
series: [ {
|
|
36
|
+
type: "funnel",
|
|
37
|
+
categoryField: "name",
|
|
38
|
+
valueField: "value",
|
|
39
|
+
maxSize: "50%",
|
|
40
|
+
minSize: "10%",
|
|
41
|
+
funnelAlign: "bottom",
|
|
42
|
+
funnelOrient: "left",
|
|
43
|
+
isTransform: !0,
|
|
44
|
+
shape: "rect",
|
|
45
|
+
transform: {
|
|
46
|
+
style: {
|
|
47
|
+
fill: "rgb(222,231,253)"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
label: {
|
|
51
|
+
visible: !0,
|
|
52
|
+
style: {
|
|
53
|
+
lineHeight: 16,
|
|
54
|
+
limit: (datum, ctx) => Math.abs(ctx.getPoints(datum)[0].x - ctx.getPoints(datum)[3].x),
|
|
55
|
+
text: datum => 100 * datum.percent + "%",
|
|
56
|
+
x: (datum, ctx) => ctx.getPoints(datum)[0].x + 10,
|
|
57
|
+
y: (datum, ctx) => ctx.getPoints(datum)[0].y - 10,
|
|
58
|
+
textAlign: "left",
|
|
59
|
+
textBaseline: "bottom",
|
|
60
|
+
fontSize: 20,
|
|
61
|
+
fontStyle: "italic"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
extensionMark: [ {
|
|
65
|
+
type: "polygon",
|
|
66
|
+
dataId: "funnel",
|
|
67
|
+
style: {
|
|
68
|
+
points: (datum, ctx) => {
|
|
69
|
+
const start = ctx.getPoints(datum)[1];
|
|
70
|
+
return [ start, {
|
|
71
|
+
x: start.x,
|
|
72
|
+
y: 0
|
|
73
|
+
} ];
|
|
74
|
+
},
|
|
75
|
+
closePath: !1,
|
|
76
|
+
lineWidth: 2,
|
|
77
|
+
stroke: "rgb(243,244,244)"
|
|
78
|
+
}
|
|
79
|
+
}, {
|
|
80
|
+
type: "text",
|
|
81
|
+
dataId: "funnel",
|
|
82
|
+
style: {
|
|
83
|
+
text: (datum, ctx) => ({
|
|
84
|
+
type: "rich",
|
|
85
|
+
text: [ {
|
|
86
|
+
text: `${datum.name}\n`,
|
|
87
|
+
fontWeight: "bold",
|
|
88
|
+
lineHeight: 30
|
|
89
|
+
}, {
|
|
90
|
+
text: datum.value / 10 + "K\n",
|
|
91
|
+
fontWeight: "bold",
|
|
92
|
+
fontSize: 24,
|
|
93
|
+
lineHeight: 40,
|
|
94
|
+
fill: "black"
|
|
95
|
+
}, {
|
|
96
|
+
text: `Percent: ${10 * datum.percent}%`,
|
|
97
|
+
fontWeight: "bold",
|
|
98
|
+
lineHeight: 30
|
|
99
|
+
} ]
|
|
100
|
+
}),
|
|
101
|
+
x: (datum, ctx) => ctx.getPoints(datum)[0].x + 10,
|
|
102
|
+
width: (datum, ctx) => ctx.getPoints(datum)[3].x - ctx.getPoints(datum)[0].x,
|
|
103
|
+
textAlign: "left",
|
|
104
|
+
y: 10,
|
|
105
|
+
stroke: !1,
|
|
106
|
+
fill: "grey",
|
|
107
|
+
ellipsis: !0,
|
|
108
|
+
disableAutoWrapLine: !0
|
|
109
|
+
}
|
|
110
|
+
}, {
|
|
111
|
+
type: "image",
|
|
112
|
+
dataId: "funnel",
|
|
113
|
+
style: {
|
|
114
|
+
image: "https://sf16-scmcdn-sg.ibytedtos.com/obj/static-sg/visactor-site/sg/client/img/visactor/vrender-icon.svg",
|
|
115
|
+
x: (datum, ctx) => ctx.getPoints(datum)[2].x + .5 * (ctx.getPoints(datum)[2].x - ctx.getPoints(datum)[1].x) - 36,
|
|
116
|
+
y: 10,
|
|
117
|
+
align: "right",
|
|
118
|
+
width: 30,
|
|
119
|
+
height: 26,
|
|
120
|
+
background: "rgb(238,238,238)",
|
|
121
|
+
fillOpacity: .2
|
|
122
|
+
}
|
|
123
|
+
} ]
|
|
124
|
+
} ]
|
|
125
|
+
};
|
|
126
|
+
//# sourceMappingURL=funnelHorizontal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/spec/funnelHorizontal.ts"],"names":[],"mappings":"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","file":"funnelHorizontal.js","sourcesContent":["export const horizontalFunnelSpec = {\n type: 'common',\n padding: { left: 20, right: 60 },\n data: [\n {\n id: 'funnel',\n values: [\n {\n value: 100,\n name: 'Screening',\n percent: 1\n },\n {\n value: 80,\n name: 'Evaluating',\n percent: 0.8\n },\n {\n value: 50,\n name: 'Passed',\n percent: 0.5\n },\n {\n value: 30,\n name: 'Interview',\n percent: 0.3\n }\n ]\n }\n ],\n color: {\n type: 'ordinal',\n range: ['rgb(54,106,253)', 'rgb(103,138,251)', 'rgb(146,173,255)', 'rgb(191,207,255)']\n },\n series: [\n {\n type: 'funnel',\n categoryField: 'name',\n valueField: 'value',\n maxSize: '50%',\n minSize: '10%',\n funnelAlign: 'bottom',\n funnelOrient: 'left',\n isTransform: true,\n shape: 'rect',\n transform: {\n style: {\n fill: 'rgb(222,231,253)'\n }\n },\n label: {\n visible: true,\n style: {\n lineHeight: 16,\n limit: (datum: any, ctx: any) => Math.abs(ctx.getPoints(datum)[0].x - ctx.getPoints(datum)[3].x),\n text: (datum: any) => `${datum.percent * 100}%`,\n x: (datum: any, ctx: any) => ctx.getPoints(datum)[0].x + 10,\n y: (datum: any, ctx: any) => ctx.getPoints(datum)[0].y - 10,\n textAlign: 'left',\n textBaseline: 'bottom',\n fontSize: 20,\n fontStyle: 'italic'\n }\n },\n extensionMark: [\n {\n type: 'polygon',\n dataId: 'funnel',\n style: {\n points: (datum: any, ctx: any) => {\n const start = ctx.getPoints(datum)[1];\n const end = { x: start.x, y: 0 };\n return [start, end];\n },\n closePath: false,\n lineWidth: 2,\n stroke: 'rgb(243,244,244)'\n }\n },\n {\n type: 'text',\n dataId: 'funnel',\n style: {\n text: (datum: any, ctx: any) => {\n return {\n type: 'rich',\n text: [\n { text: `${datum.name}\\n`, fontWeight: 'bold', lineHeight: 30 },\n {\n text: `${datum.value / 10}K\\n`,\n fontWeight: 'bold',\n fontSize: 24,\n lineHeight: 40,\n fill: 'black'\n },\n {\n text: `Percent: ${datum.percent * 10}%`,\n fontWeight: 'bold',\n lineHeight: 30\n }\n ]\n };\n },\n x: (datum: any, ctx: any) => ctx.getPoints(datum)[0].x + 10,\n width: (datum: any, ctx: any) => {\n return ctx.getPoints(datum)[3].x - ctx.getPoints(datum)[0].x;\n },\n textAlign: 'left',\n y: 10,\n stroke: false,\n fill: 'grey',\n ellipsis: true,\n disableAutoWrapLine: true\n }\n },\n {\n type: 'image',\n dataId: 'funnel',\n style: {\n image:\n 'https://sf16-scmcdn-sg.ibytedtos.com/obj/static-sg/visactor-site/sg/client/img/visactor/vrender-icon.svg',\n x: (datum: any, ctx: any) =>\n ctx.getPoints(datum)[2].x + (ctx.getPoints(datum)[2].x - ctx.getPoints(datum)[1].x) * 0.5 - 36,\n y: 10,\n align: 'right',\n width: 30,\n height: 26,\n background: 'rgb(238,238,238)',\n fillOpacity: 0.2\n }\n }\n ]\n }\n ]\n};\n"]}
|
package/cjs/spec/line.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: !0
|
|
5
5
|
}), exports.charts = void 0;
|
|
6
6
|
|
|
7
|
-
const area_1 = require("../spec/area"), barGroup_1 = require("../spec/barGroup"), barGroupHorizontal_1 = require("../spec/barGroupHorizontal"), barStacked_1 = require("../spec/barStacked"), barStackedHorizontal_1 = require("../spec/barStackedHorizontal"), gauge_1 = require("../spec/gauge"), horizontalBar_1 = require("../spec/horizontalBar"), indicatorSankey_1 = require("../spec/indicatorSankey"), line_1 = require("../spec/line"), pie_1 = require("../spec/pie"), radar_1 = require("../spec/radar"), ring_1 = require("../spec/ring"), scatter_1 = require("../spec/scatter");
|
|
7
|
+
const area_1 = require("../spec/area"), barGroup_1 = require("../spec/barGroup"), barGroupHorizontal_1 = require("../spec/barGroupHorizontal"), barStacked_1 = require("../spec/barStacked"), barStackedHorizontal_1 = require("../spec/barStackedHorizontal"), funnelHorizontal_1 = require("../spec/funnelHorizontal"), gauge_1 = require("../spec/gauge"), horizontalBar_1 = require("../spec/horizontalBar"), indicatorSankey_1 = require("../spec/indicatorSankey"), line_1 = require("../spec/line"), pie_1 = require("../spec/pie"), radar_1 = require("../spec/radar"), ring_1 = require("../spec/ring"), scatter_1 = require("../spec/scatter");
|
|
8
8
|
|
|
9
9
|
exports.charts = [ {
|
|
10
10
|
title: "Line Chart",
|
|
@@ -25,7 +25,7 @@ exports.charts = [ {
|
|
|
25
25
|
}, {
|
|
26
26
|
title: "Horizontal Grouped Bar Chart",
|
|
27
27
|
spec: barGroupHorizontal_1.barGroupHorizontalSpec,
|
|
28
|
-
fileName: "
|
|
28
|
+
fileName: "barGroupHorizontal"
|
|
29
29
|
}, {
|
|
30
30
|
title: "Horizontal Stacked Bar Chart",
|
|
31
31
|
spec: barStackedHorizontal_1.barStackedHorizontalSpec,
|
|
@@ -61,5 +61,9 @@ exports.charts = [ {
|
|
|
61
61
|
option: {
|
|
62
62
|
enableHtmlAttribute: !0
|
|
63
63
|
}
|
|
64
|
+
}, {
|
|
65
|
+
title: "Horizontal Funnel",
|
|
66
|
+
spec: funnelHorizontal_1.horizontalFunnelSpec,
|
|
67
|
+
fileName: "funnelHorizontal"
|
|
64
68
|
} ];
|
|
65
69
|
//# sourceMappingURL=chart-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vchart-chart-hub-theme/chart-list.ts"],"names":[],"mappings":";;;AACA,uCAAwC;AACxC,+CAAgD;AAChD,mEAAoE;AACpE,mDAAoD;AACpD,uEAAwE;AACxE,yCAA0C;AAC1C,yDAA0D;AAC1D,6DAA8D;AAC9D,uCAAwC;AACxC,qCAAsC;AACtC,yCAA0C;AAC1C,uCAAwC;AACxC,6CAA8C;AAEjC,QAAA,MAAM,GAAiB;IAClC;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,uBAAY;QAClB,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,2BAAc;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,2CAAsB;QAC5B,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"sources":["../src/vchart-chart-hub-theme/chart-list.ts"],"names":[],"mappings":";;;AACA,uCAAwC;AACxC,+CAAgD;AAChD,mEAAoE;AACpE,mDAAoD;AACpD,uEAAwE;AACxE,+DAAgE;AAChE,yCAA0C;AAC1C,yDAA0D;AAC1D,6DAA8D;AAC9D,uCAAwC;AACxC,qCAAsC;AACtC,yCAA0C;AAC1C,uCAAwC;AACxC,6CAA8C;AAEjC,QAAA,MAAM,GAAiB;IAClC;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,uBAAY;QAClB,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,2BAAc;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,2CAAsB;QAC5B,QAAQ,EAAE,oBAAoB;KAC/B;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,+CAAwB;QAC9B,QAAQ,EAAE,sBAAsB;KACjC;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,aAAO;QACb,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,iCAAiB;QACvB,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,qBAAW;QACjB,QAAQ,EAAE,SAAS;KACpB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,qCAAmB;QACzB,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE;YACN,mBAAmB,EAAE,IAAI;SAC1B;KACF;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,uCAAoB;QAC1B,QAAQ,EAAE,kBAAkB;KAC7B;CACF,CAAC","file":"chart-list.js","sourcesContent":["import type { IChartInfo } from '../interface';\nimport { areaSpec } from '../spec/area';\nimport { barGroupSpec } from '../spec/barGroup';\nimport { barGroupHorizontalSpec } from '../spec/barGroupHorizontal';\nimport { barStackedSpec } from '../spec/barStacked';\nimport { barStackedHorizontalSpec } from '../spec/barStackedHorizontal';\nimport { horizontalFunnelSpec } from '../spec/funnelHorizontal';\nimport { gaugeSpec } from '../spec/gauge';\nimport { horizontalBarSpec } from '../spec/horizontalBar';\nimport { indicatorSankeySpec } from '../spec/indicatorSankey';\nimport { lineSpec } from '../spec/line';\nimport { pieSpec } from '../spec/pie';\nimport { radarSpec } from '../spec/radar';\nimport { ringSpec } from '../spec/ring';\nimport { scatterSpec } from '../spec/scatter';\n\nexport const charts: IChartInfo[] = [\n {\n title: 'Line Chart',\n spec: lineSpec,\n fileName: 'line'\n },\n {\n title: 'Area Chart',\n spec: areaSpec,\n fileName: 'area'\n },\n {\n title: 'Grouped Bar Chart',\n spec: barGroupSpec,\n fileName: 'barGroup'\n },\n {\n title: 'Stacked Bar Chart',\n spec: barStackedSpec,\n fileName: 'barStacked'\n },\n {\n title: 'Horizontal Grouped Bar Chart',\n spec: barGroupHorizontalSpec,\n fileName: 'barGroupHorizontal'\n },\n {\n title: 'Horizontal Stacked Bar Chart',\n spec: barStackedHorizontalSpec,\n fileName: 'barStackedHorizontal'\n },\n {\n title: 'Pie Chart',\n spec: pieSpec,\n fileName: 'pie'\n },\n {\n title: 'Ring Chart',\n spec: ringSpec,\n fileName: 'ring'\n },\n {\n title: 'Gauge Chart',\n spec: gaugeSpec,\n fileName: 'gauge'\n },\n {\n title: 'Horizontal Bar Chart',\n spec: horizontalBarSpec,\n fileName: 'horizontalBar'\n },\n {\n title: 'Scatter Chart',\n spec: scatterSpec,\n fileName: 'scatter'\n },\n {\n title: 'Radar Chart',\n spec: radarSpec,\n fileName: 'radar'\n },\n {\n title: 'Indicator Sankey Chart',\n spec: indicatorSankeySpec,\n fileName: 'indicatorSankey',\n option: {\n enableHtmlAttribute: true\n }\n },\n {\n title: 'Horizontal Funnel',\n spec: horizontalFunnelSpec,\n fileName: 'funnelHorizontal'\n }\n];\n"]}
|
|
@@ -47,17 +47,13 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
|
|
|
47
47
|
}
|
|
48
48
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
49
49
|
}));
|
|
50
|
-
}, __importDefault = this && this.__importDefault || function(mod) {
|
|
51
|
-
return mod && mod.__esModule ? mod : {
|
|
52
|
-
default: mod
|
|
53
|
-
};
|
|
54
50
|
};
|
|
55
51
|
|
|
56
52
|
Object.defineProperty(exports, "__esModule", {
|
|
57
53
|
value: !0
|
|
58
54
|
}), exports.Charts = void 0;
|
|
59
55
|
|
|
60
|
-
const react_1 = __importStar(require("react")), react_device_detect_1 = require("react-device-detect"), chart_list_1 = require("./chart-list"), react_vchart_1 = require("@visactor/react-vchart"), i18n_1 = require("./i18n"),
|
|
56
|
+
const react_1 = __importStar(require("react")), react_device_detect_1 = require("react-device-detect"), chart_list_1 = require("./chart-list"), react_vchart_1 = require("@visactor/react-vchart"), i18n_1 = require("./i18n"), vchart_theme_1 = require("@visactor/vchart-theme"), semi_ui_1 = require("@douyinfe/semi-ui"), web_react_1 = require("@arco-design/web-react");
|
|
61
57
|
|
|
62
58
|
require("@arco-design/web-react/dist/css/arco.css");
|
|
63
59
|
|
|
@@ -100,5 +96,5 @@ function Charts(props) {
|
|
|
100
96
|
}))))));
|
|
101
97
|
}
|
|
102
98
|
|
|
103
|
-
|
|
104
|
-
|
|
99
|
+
react_vchart_1.VChartCore.ThemeManager.registerTheme("chart-hub-light", vchart_theme_1.chartHubLightTheme),
|
|
100
|
+
react_vchart_1.VChartCore.ThemeManager.setCurrentTheme("chart-hub-light"), exports.Charts = Charts;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,6DAA+C;AAC/C,6CAAsC;AACtC,yDAA+E;AAC/E,iCAA8B;AAC9B,yDAA4D;AAE5D,+CAAiD;AACjD,sDAA8C;AAC9C,oDAAkD;AAGlD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,gBAAI,CAAC;AAC1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,kBAAkB,GACtB,gHAAgH,CAAC;AAEnH,yBAAU,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,iCAAyB,CAAC,CAAC;AACpF,yBAAU,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAM3D,SAAgB,MAAM,CAAC,KAAa;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,CAAO,SAAqB,EAAE,EAAE;QAC1D,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACvC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,MAAM,OAAO,GAAG,GAAG,kBAAkB,GAAG,QAAQ,KAAK,CAAC;QACtD,IAAI,GAAG,GAAG,8BAA8B,OAAO,EAAE,CAAC;QAClD,IAAI,MAAM,EAAE;YACV,GAAG,IAAI,eAAe,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD;QACD,GAAG,IAAI,sBAAsB,CAAC;QAC9B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BAAC,GAAG,IAAC,MAAM,EAAE,MAAM,IAChB,mBAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,CACL,8BAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE;YAChD,8BAAC,cAAI,IACH,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,kBAAkB,EAChB,8BAAC,gBAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,IAEA,WAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb;gBAGX,8BAAC,qBAAe,IACd,IAAI,kCACC,KAAK,CAAC,IAAI,KACb,MAAM,EAAE,WAAW,KAGrB,OAAO,kCACF,KAAK,CAAC,MAAM,KACf,IAAI,EAAE,8BAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,MAEvD,CACG,CACH,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAvDD,wBAuDC","file":"charts.js","sourcesContent":["import React, { useCallback } from 'react';\nimport { isMobile } from 'react-device-detect';\nimport { charts } from './chart-list';\nimport { VChart as VChartComponent, VChartCore } from '@visactor/react-vchart';\nimport { i18n } from './i18n';\nimport { chartHubLightTheme } from '@visactor/vchart-theme';\n\nimport { Button, Card } from '@douyinfe/semi-ui';\nimport { Grid } from '@arco-design/web-react';\nimport '@arco-design/web-react/dist/css/arco.css';\nimport type { IChartInfo } from '../interface';\n\nconst { Row, Col } = Grid;\nconst chartHeight = 400;\n\nconst gutter = 16;\n\nconst DEMO_SOURCE_PREFIX =\n 'https://raw.githubusercontent.com/VisActor/vchart-theme/develop/packages/vchart-theme-demo-component/src/spec/';\n\nVChartCore.ThemeManager.registerTheme('chart-hub-light', chartHubLightTheme as any);\nVChartCore.ThemeManager.setCurrentTheme('chart-hub-light');\n\nexport interface IProps {\n language?: 'en' | 'zh';\n}\n\nexport function Charts(props: IProps) {\n const { language = 'zh' } = props;\n\n const onClick = useCallback(async (chartInfo: IChartInfo) => {\n const { fileName, option } = chartInfo;\n if (!fileName) {\n return;\n }\n const specUrl = `${DEMO_SOURCE_PREFIX}${fileName}.ts`;\n let url = `/vchart/playground?specUrl=${specUrl}`;\n if (option) {\n url += `&initOption=${JSON.stringify(option)}`;\n }\n url += `&theme=chartHubLight`;\n window.open(url);\n }, []);\n\n return (\n <Row gutter={gutter}>\n {charts.map((chart, i) => {\n return (\n <Col span={12} key={i} style={{ marginBottom: 16 }}>\n <Card\n className=\"chartContainer\"\n bordered={false}\n headerLine={true}\n title={chart.title}\n headerExtraContent={\n <Button\n size=\"small\"\n onClick={() => {\n onClick(chart);\n }}\n >\n {i18n.link[language]}\n </Button>\n }\n >\n <VChartComponent\n spec={{\n ...chart.spec,\n height: chartHeight\n }}\n // @ts-ignore\n options={{\n ...chart.option,\n mode: isMobile ? 'mobile-browser' : 'desktop-browser'\n }}\n />\n </Card>\n </Col>\n );\n })}\n </Row>\n );\n}\n"]}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
export declare const horizontalFunnelSpec: {
|
|
2
|
+
type: string;
|
|
3
|
+
padding: {
|
|
4
|
+
left: number;
|
|
5
|
+
right: number;
|
|
6
|
+
};
|
|
7
|
+
data: {
|
|
8
|
+
id: string;
|
|
9
|
+
values: {
|
|
10
|
+
value: number;
|
|
11
|
+
name: string;
|
|
12
|
+
percent: number;
|
|
13
|
+
}[];
|
|
14
|
+
}[];
|
|
15
|
+
color: {
|
|
16
|
+
type: string;
|
|
17
|
+
range: string[];
|
|
18
|
+
};
|
|
19
|
+
series: {
|
|
20
|
+
type: string;
|
|
21
|
+
categoryField: string;
|
|
22
|
+
valueField: string;
|
|
23
|
+
maxSize: string;
|
|
24
|
+
minSize: string;
|
|
25
|
+
funnelAlign: string;
|
|
26
|
+
funnelOrient: string;
|
|
27
|
+
isTransform: boolean;
|
|
28
|
+
shape: string;
|
|
29
|
+
transform: {
|
|
30
|
+
style: {
|
|
31
|
+
fill: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
label: {
|
|
35
|
+
visible: boolean;
|
|
36
|
+
style: {
|
|
37
|
+
lineHeight: number;
|
|
38
|
+
limit: (datum: any, ctx: any) => number;
|
|
39
|
+
text: (datum: any) => string;
|
|
40
|
+
x: (datum: any, ctx: any) => any;
|
|
41
|
+
y: (datum: any, ctx: any) => number;
|
|
42
|
+
textAlign: string;
|
|
43
|
+
textBaseline: string;
|
|
44
|
+
fontSize: number;
|
|
45
|
+
fontStyle: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
extensionMark: ({
|
|
49
|
+
type: string;
|
|
50
|
+
dataId: string;
|
|
51
|
+
style: {
|
|
52
|
+
points: (datum: any, ctx: any) => any[];
|
|
53
|
+
closePath: boolean;
|
|
54
|
+
lineWidth: number;
|
|
55
|
+
stroke: string;
|
|
56
|
+
text?: undefined;
|
|
57
|
+
x?: undefined;
|
|
58
|
+
width?: undefined;
|
|
59
|
+
textAlign?: undefined;
|
|
60
|
+
y?: undefined;
|
|
61
|
+
fill?: undefined;
|
|
62
|
+
ellipsis?: undefined;
|
|
63
|
+
disableAutoWrapLine?: undefined;
|
|
64
|
+
image?: undefined;
|
|
65
|
+
align?: undefined;
|
|
66
|
+
height?: undefined;
|
|
67
|
+
background?: undefined;
|
|
68
|
+
fillOpacity?: undefined;
|
|
69
|
+
};
|
|
70
|
+
} | {
|
|
71
|
+
type: string;
|
|
72
|
+
dataId: string;
|
|
73
|
+
style: {
|
|
74
|
+
text: (datum: any, ctx: any) => {
|
|
75
|
+
type: string;
|
|
76
|
+
text: ({
|
|
77
|
+
text: string;
|
|
78
|
+
fontWeight: string;
|
|
79
|
+
lineHeight: number;
|
|
80
|
+
fontSize?: undefined;
|
|
81
|
+
fill?: undefined;
|
|
82
|
+
} | {
|
|
83
|
+
text: string;
|
|
84
|
+
fontWeight: string;
|
|
85
|
+
fontSize: number;
|
|
86
|
+
lineHeight: number;
|
|
87
|
+
fill: string;
|
|
88
|
+
})[];
|
|
89
|
+
};
|
|
90
|
+
x: (datum: any, ctx: any) => any;
|
|
91
|
+
width: (datum: any, ctx: any) => number;
|
|
92
|
+
textAlign: string;
|
|
93
|
+
y: number;
|
|
94
|
+
stroke: boolean;
|
|
95
|
+
fill: string;
|
|
96
|
+
ellipsis: boolean;
|
|
97
|
+
disableAutoWrapLine: boolean;
|
|
98
|
+
points?: undefined;
|
|
99
|
+
closePath?: undefined;
|
|
100
|
+
lineWidth?: undefined;
|
|
101
|
+
image?: undefined;
|
|
102
|
+
align?: undefined;
|
|
103
|
+
height?: undefined;
|
|
104
|
+
background?: undefined;
|
|
105
|
+
fillOpacity?: undefined;
|
|
106
|
+
};
|
|
107
|
+
} | {
|
|
108
|
+
type: string;
|
|
109
|
+
dataId: string;
|
|
110
|
+
style: {
|
|
111
|
+
image: string;
|
|
112
|
+
x: (datum: any, ctx: any) => number;
|
|
113
|
+
y: number;
|
|
114
|
+
align: string;
|
|
115
|
+
width: number;
|
|
116
|
+
height: number;
|
|
117
|
+
background: string;
|
|
118
|
+
fillOpacity: number;
|
|
119
|
+
points?: undefined;
|
|
120
|
+
closePath?: undefined;
|
|
121
|
+
lineWidth?: undefined;
|
|
122
|
+
stroke?: undefined;
|
|
123
|
+
text?: undefined;
|
|
124
|
+
textAlign?: undefined;
|
|
125
|
+
fill?: undefined;
|
|
126
|
+
ellipsis?: undefined;
|
|
127
|
+
disableAutoWrapLine?: undefined;
|
|
128
|
+
};
|
|
129
|
+
})[];
|
|
130
|
+
}[];
|
|
131
|
+
};
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
export const horizontalFunnelSpec = {
|
|
2
|
+
type: "common",
|
|
3
|
+
padding: {
|
|
4
|
+
left: 20,
|
|
5
|
+
right: 60
|
|
6
|
+
},
|
|
7
|
+
data: [ {
|
|
8
|
+
id: "funnel",
|
|
9
|
+
values: [ {
|
|
10
|
+
value: 100,
|
|
11
|
+
name: "Screening",
|
|
12
|
+
percent: 1
|
|
13
|
+
}, {
|
|
14
|
+
value: 80,
|
|
15
|
+
name: "Evaluating",
|
|
16
|
+
percent: .8
|
|
17
|
+
}, {
|
|
18
|
+
value: 50,
|
|
19
|
+
name: "Passed",
|
|
20
|
+
percent: .5
|
|
21
|
+
}, {
|
|
22
|
+
value: 30,
|
|
23
|
+
name: "Interview",
|
|
24
|
+
percent: .3
|
|
25
|
+
} ]
|
|
26
|
+
} ],
|
|
27
|
+
color: {
|
|
28
|
+
type: "ordinal",
|
|
29
|
+
range: [ "rgb(54,106,253)", "rgb(103,138,251)", "rgb(146,173,255)", "rgb(191,207,255)" ]
|
|
30
|
+
},
|
|
31
|
+
series: [ {
|
|
32
|
+
type: "funnel",
|
|
33
|
+
categoryField: "name",
|
|
34
|
+
valueField: "value",
|
|
35
|
+
maxSize: "50%",
|
|
36
|
+
minSize: "10%",
|
|
37
|
+
funnelAlign: "bottom",
|
|
38
|
+
funnelOrient: "left",
|
|
39
|
+
isTransform: !0,
|
|
40
|
+
shape: "rect",
|
|
41
|
+
transform: {
|
|
42
|
+
style: {
|
|
43
|
+
fill: "rgb(222,231,253)"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
label: {
|
|
47
|
+
visible: !0,
|
|
48
|
+
style: {
|
|
49
|
+
lineHeight: 16,
|
|
50
|
+
limit: (datum, ctx) => Math.abs(ctx.getPoints(datum)[0].x - ctx.getPoints(datum)[3].x),
|
|
51
|
+
text: datum => 100 * datum.percent + "%",
|
|
52
|
+
x: (datum, ctx) => ctx.getPoints(datum)[0].x + 10,
|
|
53
|
+
y: (datum, ctx) => ctx.getPoints(datum)[0].y - 10,
|
|
54
|
+
textAlign: "left",
|
|
55
|
+
textBaseline: "bottom",
|
|
56
|
+
fontSize: 20,
|
|
57
|
+
fontStyle: "italic"
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
extensionMark: [ {
|
|
61
|
+
type: "polygon",
|
|
62
|
+
dataId: "funnel",
|
|
63
|
+
style: {
|
|
64
|
+
points: (datum, ctx) => {
|
|
65
|
+
const start = ctx.getPoints(datum)[1];
|
|
66
|
+
return [ start, {
|
|
67
|
+
x: start.x,
|
|
68
|
+
y: 0
|
|
69
|
+
} ];
|
|
70
|
+
},
|
|
71
|
+
closePath: !1,
|
|
72
|
+
lineWidth: 2,
|
|
73
|
+
stroke: "rgb(243,244,244)"
|
|
74
|
+
}
|
|
75
|
+
}, {
|
|
76
|
+
type: "text",
|
|
77
|
+
dataId: "funnel",
|
|
78
|
+
style: {
|
|
79
|
+
text: (datum, ctx) => ({
|
|
80
|
+
type: "rich",
|
|
81
|
+
text: [ {
|
|
82
|
+
text: `${datum.name}\n`,
|
|
83
|
+
fontWeight: "bold",
|
|
84
|
+
lineHeight: 30
|
|
85
|
+
}, {
|
|
86
|
+
text: datum.value / 10 + "K\n",
|
|
87
|
+
fontWeight: "bold",
|
|
88
|
+
fontSize: 24,
|
|
89
|
+
lineHeight: 40,
|
|
90
|
+
fill: "black"
|
|
91
|
+
}, {
|
|
92
|
+
text: `Percent: ${10 * datum.percent}%`,
|
|
93
|
+
fontWeight: "bold",
|
|
94
|
+
lineHeight: 30
|
|
95
|
+
} ]
|
|
96
|
+
}),
|
|
97
|
+
x: (datum, ctx) => ctx.getPoints(datum)[0].x + 10,
|
|
98
|
+
width: (datum, ctx) => ctx.getPoints(datum)[3].x - ctx.getPoints(datum)[0].x,
|
|
99
|
+
textAlign: "left",
|
|
100
|
+
y: 10,
|
|
101
|
+
stroke: !1,
|
|
102
|
+
fill: "grey",
|
|
103
|
+
ellipsis: !0,
|
|
104
|
+
disableAutoWrapLine: !0
|
|
105
|
+
}
|
|
106
|
+
}, {
|
|
107
|
+
type: "image",
|
|
108
|
+
dataId: "funnel",
|
|
109
|
+
style: {
|
|
110
|
+
image: "https://sf16-scmcdn-sg.ibytedtos.com/obj/static-sg/visactor-site/sg/client/img/visactor/vrender-icon.svg",
|
|
111
|
+
x: (datum, ctx) => ctx.getPoints(datum)[2].x + .5 * (ctx.getPoints(datum)[2].x - ctx.getPoints(datum)[1].x) - 36,
|
|
112
|
+
y: 10,
|
|
113
|
+
align: "right",
|
|
114
|
+
width: 30,
|
|
115
|
+
height: 26,
|
|
116
|
+
background: "rgb(238,238,238)",
|
|
117
|
+
fillOpacity: .2
|
|
118
|
+
}
|
|
119
|
+
} ]
|
|
120
|
+
} ]
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=funnelHorizontal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/spec/funnelHorizontal.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IAChC,IAAI,EAAE;QACJ;YACE,EAAE,EAAE,QAAQ;YACZ,MAAM,EAAE;gBACN;oBACE,KAAK,EAAE,GAAG;oBACV,IAAI,EAAE,WAAW;oBACjB,OAAO,EAAE,CAAC;iBACX;gBACD;oBACE,KAAK,EAAE,EAAE;oBACT,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,GAAG;iBACb;gBACD;oBACE,KAAK,EAAE,EAAE;oBACT,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE,GAAG;iBACb;gBACD;oBACE,KAAK,EAAE,EAAE;oBACT,IAAI,EAAE,WAAW;oBACjB,OAAO,EAAE,GAAG;iBACb;aACF;SACF;KACF;IACD,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC;KACvF;IACD,MAAM,EAAE;QACN;YACE,IAAI,EAAE,QAAQ;YACd,aAAa,EAAE,MAAM;YACrB,UAAU,EAAE,OAAO;YACnB,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,QAAQ;YACrB,YAAY,EAAE,MAAM;YACpB,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,MAAM;YACb,SAAS,EAAE;gBACT,KAAK,EAAE;oBACL,IAAI,EAAE,kBAAkB;iBACzB;aACF;YACD,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,KAAK,EAAE;oBACL,UAAU,EAAE,EAAE;oBACd,KAAK,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAChG,IAAI,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,GAAG,GAAG;oBAC/C,CAAC,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;oBAC3D,CAAC,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;oBAC3D,SAAS,EAAE,MAAM;oBACjB,YAAY,EAAE,QAAQ;oBACtB,QAAQ,EAAE,EAAE;oBACZ,SAAS,EAAE,QAAQ;iBACpB;aACF;YACD,aAAa,EAAE;gBACb;oBACE,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,QAAQ;oBAChB,KAAK,EAAE;wBACL,MAAM,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE;4BAC/B,MAAM,KAAK,GAAG,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;4BACtC,MAAM,GAAG,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;4BACjC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;wBACtB,CAAC;wBACD,SAAS,EAAE,KAAK;wBAChB,SAAS,EAAE,CAAC;wBACZ,MAAM,EAAE,kBAAkB;qBAC3B;iBACF;gBACD;oBACE,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,QAAQ;oBAChB,KAAK,EAAE;wBACL,IAAI,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE;4BAC7B,OAAO;gCACL,IAAI,EAAE,MAAM;gCACZ,IAAI,EAAE;oCACJ,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE;oCAC/D;wCACE,IAAI,EAAE,GAAG,KAAK,CAAC,KAAK,GAAG,EAAE,KAAK;wCAC9B,UAAU,EAAE,MAAM;wCAClB,QAAQ,EAAE,EAAE;wCACZ,UAAU,EAAE,EAAE;wCACd,IAAI,EAAE,OAAO;qCACd;oCACD;wCACE,IAAI,EAAE,YAAY,KAAK,CAAC,OAAO,GAAG,EAAE,GAAG;wCACvC,UAAU,EAAE,MAAM;wCAClB,UAAU,EAAE,EAAE;qCACf;iCACF;6BACF,CAAC;wBACJ,CAAC;wBACD,CAAC,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;wBAC3D,KAAK,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE;4BAC9B,OAAO,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC/D,CAAC;wBACD,SAAS,EAAE,MAAM;wBACjB,CAAC,EAAE,EAAE;wBACL,MAAM,EAAE,KAAK;wBACb,IAAI,EAAE,MAAM;wBACZ,QAAQ,EAAE,IAAI;wBACd,mBAAmB,EAAE,IAAI;qBAC1B;iBACF;gBACD;oBACE,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,QAAQ;oBAChB,KAAK,EAAE;wBACL,KAAK,EACH,0GAA0G;wBAC5G,CAAC,EAAE,CAAC,KAAU,EAAE,GAAQ,EAAE,EAAE,CAC1B,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,EAAE;wBAChG,CAAC,EAAE,EAAE;wBACL,KAAK,EAAE,OAAO;wBACd,KAAK,EAAE,EAAE;wBACT,MAAM,EAAE,EAAE;wBACV,UAAU,EAAE,kBAAkB;wBAC9B,WAAW,EAAE,GAAG;qBACjB;iBACF;aACF;SACF;KACF;CACF,CAAC","file":"funnelHorizontal.js","sourcesContent":["export const horizontalFunnelSpec = {\n type: 'common',\n padding: { left: 20, right: 60 },\n data: [\n {\n id: 'funnel',\n values: [\n {\n value: 100,\n name: 'Screening',\n percent: 1\n },\n {\n value: 80,\n name: 'Evaluating',\n percent: 0.8\n },\n {\n value: 50,\n name: 'Passed',\n percent: 0.5\n },\n {\n value: 30,\n name: 'Interview',\n percent: 0.3\n }\n ]\n }\n ],\n color: {\n type: 'ordinal',\n range: ['rgb(54,106,253)', 'rgb(103,138,251)', 'rgb(146,173,255)', 'rgb(191,207,255)']\n },\n series: [\n {\n type: 'funnel',\n categoryField: 'name',\n valueField: 'value',\n maxSize: '50%',\n minSize: '10%',\n funnelAlign: 'bottom',\n funnelOrient: 'left',\n isTransform: true,\n shape: 'rect',\n transform: {\n style: {\n fill: 'rgb(222,231,253)'\n }\n },\n label: {\n visible: true,\n style: {\n lineHeight: 16,\n limit: (datum: any, ctx: any) => Math.abs(ctx.getPoints(datum)[0].x - ctx.getPoints(datum)[3].x),\n text: (datum: any) => `${datum.percent * 100}%`,\n x: (datum: any, ctx: any) => ctx.getPoints(datum)[0].x + 10,\n y: (datum: any, ctx: any) => ctx.getPoints(datum)[0].y - 10,\n textAlign: 'left',\n textBaseline: 'bottom',\n fontSize: 20,\n fontStyle: 'italic'\n }\n },\n extensionMark: [\n {\n type: 'polygon',\n dataId: 'funnel',\n style: {\n points: (datum: any, ctx: any) => {\n const start = ctx.getPoints(datum)[1];\n const end = { x: start.x, y: 0 };\n return [start, end];\n },\n closePath: false,\n lineWidth: 2,\n stroke: 'rgb(243,244,244)'\n }\n },\n {\n type: 'text',\n dataId: 'funnel',\n style: {\n text: (datum: any, ctx: any) => {\n return {\n type: 'rich',\n text: [\n { text: `${datum.name}\\n`, fontWeight: 'bold', lineHeight: 30 },\n {\n text: `${datum.value / 10}K\\n`,\n fontWeight: 'bold',\n fontSize: 24,\n lineHeight: 40,\n fill: 'black'\n },\n {\n text: `Percent: ${datum.percent * 10}%`,\n fontWeight: 'bold',\n lineHeight: 30\n }\n ]\n };\n },\n x: (datum: any, ctx: any) => ctx.getPoints(datum)[0].x + 10,\n width: (datum: any, ctx: any) => {\n return ctx.getPoints(datum)[3].x - ctx.getPoints(datum)[0].x;\n },\n textAlign: 'left',\n y: 10,\n stroke: false,\n fill: 'grey',\n ellipsis: true,\n disableAutoWrapLine: true\n }\n },\n {\n type: 'image',\n dataId: 'funnel',\n style: {\n image:\n 'https://sf16-scmcdn-sg.ibytedtos.com/obj/static-sg/visactor-site/sg/client/img/visactor/vrender-icon.svg',\n x: (datum: any, ctx: any) =>\n ctx.getPoints(datum)[2].x + (ctx.getPoints(datum)[2].x - ctx.getPoints(datum)[1].x) * 0.5 - 36,\n y: 10,\n align: 'right',\n width: 30,\n height: 26,\n background: 'rgb(238,238,238)',\n fillOpacity: 0.2\n }\n }\n ]\n }\n ]\n};\n"]}
|
package/esm/spec/line.js
CHANGED
|
@@ -8,6 +8,8 @@ import { barStackedSpec } from "../spec/barStacked";
|
|
|
8
8
|
|
|
9
9
|
import { barStackedHorizontalSpec } from "../spec/barStackedHorizontal";
|
|
10
10
|
|
|
11
|
+
import { horizontalFunnelSpec } from "../spec/funnelHorizontal";
|
|
12
|
+
|
|
11
13
|
import { gaugeSpec } from "../spec/gauge";
|
|
12
14
|
|
|
13
15
|
import { horizontalBarSpec } from "../spec/horizontalBar";
|
|
@@ -43,7 +45,7 @@ export const charts = [ {
|
|
|
43
45
|
}, {
|
|
44
46
|
title: "Horizontal Grouped Bar Chart",
|
|
45
47
|
spec: barGroupHorizontalSpec,
|
|
46
|
-
fileName: "
|
|
48
|
+
fileName: "barGroupHorizontal"
|
|
47
49
|
}, {
|
|
48
50
|
title: "Horizontal Stacked Bar Chart",
|
|
49
51
|
spec: barStackedHorizontalSpec,
|
|
@@ -79,5 +81,9 @@ export const charts = [ {
|
|
|
79
81
|
option: {
|
|
80
82
|
enableHtmlAttribute: !0
|
|
81
83
|
}
|
|
84
|
+
}, {
|
|
85
|
+
title: "Horizontal Funnel",
|
|
86
|
+
spec: horizontalFunnelSpec,
|
|
87
|
+
fileName: "funnelHorizontal"
|
|
82
88
|
} ];
|
|
83
89
|
//# sourceMappingURL=chart-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vchart-chart-hub-theme/chart-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAiB;IAClC;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,sBAAsB;QAC5B,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"sources":["../src/vchart-chart-hub-theme/chart-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAiB;IAClC;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,sBAAsB;QAC5B,QAAQ,EAAE,oBAAoB;KAC/B;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,wBAAwB;QAC9B,QAAQ,EAAE,sBAAsB;KACjC;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,SAAS;KACpB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,mBAAmB;QACzB,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE;YACN,mBAAmB,EAAE,IAAI;SAC1B;KACF;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,oBAAoB;QAC1B,QAAQ,EAAE,kBAAkB;KAC7B;CACF,CAAC","file":"chart-list.js","sourcesContent":["import type { IChartInfo } from '../interface';\nimport { areaSpec } from '../spec/area';\nimport { barGroupSpec } from '../spec/barGroup';\nimport { barGroupHorizontalSpec } from '../spec/barGroupHorizontal';\nimport { barStackedSpec } from '../spec/barStacked';\nimport { barStackedHorizontalSpec } from '../spec/barStackedHorizontal';\nimport { horizontalFunnelSpec } from '../spec/funnelHorizontal';\nimport { gaugeSpec } from '../spec/gauge';\nimport { horizontalBarSpec } from '../spec/horizontalBar';\nimport { indicatorSankeySpec } from '../spec/indicatorSankey';\nimport { lineSpec } from '../spec/line';\nimport { pieSpec } from '../spec/pie';\nimport { radarSpec } from '../spec/radar';\nimport { ringSpec } from '../spec/ring';\nimport { scatterSpec } from '../spec/scatter';\n\nexport const charts: IChartInfo[] = [\n {\n title: 'Line Chart',\n spec: lineSpec,\n fileName: 'line'\n },\n {\n title: 'Area Chart',\n spec: areaSpec,\n fileName: 'area'\n },\n {\n title: 'Grouped Bar Chart',\n spec: barGroupSpec,\n fileName: 'barGroup'\n },\n {\n title: 'Stacked Bar Chart',\n spec: barStackedSpec,\n fileName: 'barStacked'\n },\n {\n title: 'Horizontal Grouped Bar Chart',\n spec: barGroupHorizontalSpec,\n fileName: 'barGroupHorizontal'\n },\n {\n title: 'Horizontal Stacked Bar Chart',\n spec: barStackedHorizontalSpec,\n fileName: 'barStackedHorizontal'\n },\n {\n title: 'Pie Chart',\n spec: pieSpec,\n fileName: 'pie'\n },\n {\n title: 'Ring Chart',\n spec: ringSpec,\n fileName: 'ring'\n },\n {\n title: 'Gauge Chart',\n spec: gaugeSpec,\n fileName: 'gauge'\n },\n {\n title: 'Horizontal Bar Chart',\n spec: horizontalBarSpec,\n fileName: 'horizontalBar'\n },\n {\n title: 'Scatter Chart',\n spec: scatterSpec,\n fileName: 'scatter'\n },\n {\n title: 'Radar Chart',\n spec: radarSpec,\n fileName: 'radar'\n },\n {\n title: 'Indicator Sankey Chart',\n spec: indicatorSankeySpec,\n fileName: 'indicatorSankey',\n option: {\n enableHtmlAttribute: true\n }\n },\n {\n title: 'Horizontal Funnel',\n spec: horizontalFunnelSpec,\n fileName: 'funnelHorizontal'\n }\n];\n"]}
|
|
@@ -30,12 +30,10 @@ import { isMobile } from "react-device-detect";
|
|
|
30
30
|
|
|
31
31
|
import { charts } from "./chart-list";
|
|
32
32
|
|
|
33
|
-
import { VChart as VChartComponent } from "@visactor/react-vchart";
|
|
33
|
+
import { VChart as VChartComponent, VChartCore } from "@visactor/react-vchart";
|
|
34
34
|
|
|
35
35
|
import { i18n } from "./i18n";
|
|
36
36
|
|
|
37
|
-
import VChart from "@visactor/vchart";
|
|
38
|
-
|
|
39
37
|
import { chartHubLightTheme } from "@visactor/vchart-theme";
|
|
40
38
|
|
|
41
39
|
import { Button, Card } from "@douyinfe/semi-ui";
|
|
@@ -46,7 +44,7 @@ import "@arco-design/web-react/dist/css/arco.css";
|
|
|
46
44
|
|
|
47
45
|
const {Row: Row, Col: Col} = Grid, chartHeight = 400, gutter = 16, DEMO_SOURCE_PREFIX = "https://raw.githubusercontent.com/VisActor/vchart-theme/develop/packages/vchart-theme-demo-component/src/spec/";
|
|
48
46
|
|
|
49
|
-
|
|
47
|
+
VChartCore.ThemeManager.registerTheme("chart-hub-light", chartHubLightTheme), VChartCore.ThemeManager.setCurrentTheme("chart-hub-light");
|
|
50
48
|
|
|
51
49
|
export function Charts(props) {
|
|
52
50
|
const {language: language = "zh"} = props, onClick = useCallback((chartInfo => __awaiter(this, void 0, void 0, (function*() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,0CAA0C,CAAC;AAGlD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,kBAAkB,GACtB,gHAAgH,CAAC;AAEnH,UAAU,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,kBAAyB,CAAC,CAAC;AACpF,UAAU,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAM3D,MAAM,UAAU,MAAM,CAAC,KAAa;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,OAAO,GAAG,WAAW,CAAC,CAAO,SAAqB,EAAE,EAAE;QAC1D,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACvC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,MAAM,OAAO,GAAG,GAAG,kBAAkB,GAAG,QAAQ,KAAK,CAAC;QACtD,IAAI,GAAG,GAAG,8BAA8B,OAAO,EAAE,CAAC;QAClD,IAAI,MAAM,EAAE;YACV,GAAG,IAAI,eAAe,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD;QACD,GAAG,IAAI,sBAAsB,CAAC;QAC9B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,GAAG,IAAC,MAAM,EAAE,MAAM,IAChB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE;YAChD,oBAAC,IAAI,IACH,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,kBAAkB,EAChB,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,IAEA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb;gBAGX,oBAAC,eAAe,IACd,IAAI,kCACC,KAAK,CAAC,IAAI,KACb,MAAM,EAAE,WAAW,KAGrB,OAAO,kCACF,KAAK,CAAC,MAAM,KACf,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,MAEvD,CACG,CACH,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC","file":"charts.js","sourcesContent":["import React, { useCallback } from 'react';\nimport { isMobile } from 'react-device-detect';\nimport { charts } from './chart-list';\nimport { VChart as VChartComponent, VChartCore } from '@visactor/react-vchart';\nimport { i18n } from './i18n';\nimport { chartHubLightTheme } from '@visactor/vchart-theme';\n\nimport { Button, Card } from '@douyinfe/semi-ui';\nimport { Grid } from '@arco-design/web-react';\nimport '@arco-design/web-react/dist/css/arco.css';\nimport type { IChartInfo } from '../interface';\n\nconst { Row, Col } = Grid;\nconst chartHeight = 400;\n\nconst gutter = 16;\n\nconst DEMO_SOURCE_PREFIX =\n 'https://raw.githubusercontent.com/VisActor/vchart-theme/develop/packages/vchart-theme-demo-component/src/spec/';\n\nVChartCore.ThemeManager.registerTheme('chart-hub-light', chartHubLightTheme as any);\nVChartCore.ThemeManager.setCurrentTheme('chart-hub-light');\n\nexport interface IProps {\n language?: 'en' | 'zh';\n}\n\nexport function Charts(props: IProps) {\n const { language = 'zh' } = props;\n\n const onClick = useCallback(async (chartInfo: IChartInfo) => {\n const { fileName, option } = chartInfo;\n if (!fileName) {\n return;\n }\n const specUrl = `${DEMO_SOURCE_PREFIX}${fileName}.ts`;\n let url = `/vchart/playground?specUrl=${specUrl}`;\n if (option) {\n url += `&initOption=${JSON.stringify(option)}`;\n }\n url += `&theme=chartHubLight`;\n window.open(url);\n }, []);\n\n return (\n <Row gutter={gutter}>\n {charts.map((chart, i) => {\n return (\n <Col span={12} key={i} style={{ marginBottom: 16 }}>\n <Card\n className=\"chartContainer\"\n bordered={false}\n headerLine={true}\n title={chart.title}\n headerExtraContent={\n <Button\n size=\"small\"\n onClick={() => {\n onClick(chart);\n }}\n >\n {i18n.link[language]}\n </Button>\n }\n >\n <VChartComponent\n spec={{\n ...chart.spec,\n height: chartHeight\n }}\n // @ts-ignore\n options={{\n ...chart.option,\n mode: isMobile ? 'mobile-browser' : 'desktop-browser'\n }}\n />\n </Card>\n </Col>\n );\n })}\n </Row>\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/vchart-theme-demo-component",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.6-alpha.1",
|
|
4
4
|
"description": "theme demo page in vchart site",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
"@douyinfe/semi-icons": "latest",
|
|
16
16
|
"@douyinfe/semi-icons-lab": "latest",
|
|
17
17
|
"@arco-design/web-react": "^2.32.2",
|
|
18
|
-
"@visactor/vchart-theme-utils": "1.11.
|
|
19
|
-
"@visactor/vchart-theme": "1.11.
|
|
20
|
-
"@visactor/vchart": "1.11.
|
|
18
|
+
"@visactor/vchart-theme-utils": "1.11.6-alpha.1",
|
|
19
|
+
"@visactor/vchart-theme": "1.11.6-alpha.1",
|
|
20
|
+
"@visactor/vchart": "1.11.6",
|
|
21
21
|
"@visactor/react-vchart": "1.11.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"@types/node": "*",
|
|
41
41
|
"@internal/bundler": "0.0.1",
|
|
42
42
|
"@internal/eslint-config": "0.0.1",
|
|
43
|
-
"@internal/
|
|
44
|
-
"@internal/
|
|
43
|
+
"@internal/ts-config": "0.0.1",
|
|
44
|
+
"@internal/jest-config": "0.0.1"
|
|
45
45
|
},
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|