@antv/gpt-vis 0.2.0 → 0.2.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/README.md +22 -4
- package/README.zh-CN.md +20 -4
- package/dist/cjs/FishboneDiagram/index.d.ts +6 -0
- package/dist/cjs/FishboneDiagram/index.js +49 -0
- package/dist/cjs/Text/VisText.js +4 -1
- package/dist/cjs/Text/config.js +14 -14
- package/dist/cjs/Text/mini-charts/hooks/getElementFontSize.js +2 -2
- package/dist/cjs/Text/mini-charts/hooks/useSvgWrapper.js +3 -3
- package/dist/cjs/Text/mini-charts/line/SingleLineChart.js +2 -2
- package/dist/cjs/Text/mini-charts/line/useLineCompute.js +2 -2
- package/dist/cjs/Text/mini-charts/proportion/index.js +2 -3
- package/dist/cjs/Text/theme.d.ts +24 -0
- package/dist/cjs/Text/{constants.js → theme.js} +25 -10
- package/dist/cjs/Text/utils/getThemeColor.d.ts +11 -0
- package/dist/cjs/Text/utils/getThemeColor.js +46 -0
- package/dist/cjs/Text/utils/index.d.ts +2 -0
- package/dist/cjs/Text/utils/index.js +25 -0
- package/dist/cjs/Text/utils/useAntdDarkAlgorithm.d.ts +2 -0
- package/dist/cjs/Text/utils/useAntdDarkAlgorithm.js +40 -0
- package/dist/cjs/export.d.ts +5 -4
- package/dist/cjs/export.js +9 -5
- package/dist/cjs/types/chart.d.ts +3 -2
- package/dist/cjs/types/chart.js +3 -2
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/FishboneDiagram/index.d.ts +6 -0
- package/dist/esm/FishboneDiagram/index.js +23 -0
- package/dist/esm/Text/VisText.js +9 -2
- package/dist/esm/Text/config.js +14 -14
- package/dist/esm/Text/mini-charts/hooks/getElementFontSize.js +1 -1
- package/dist/esm/Text/mini-charts/hooks/useSvgWrapper.js +1 -1
- package/dist/esm/Text/mini-charts/line/SingleLineChart.js +3 -3
- package/dist/esm/Text/mini-charts/line/useLineCompute.js +1 -1
- package/dist/esm/Text/mini-charts/proportion/index.js +4 -5
- package/dist/esm/Text/theme.d.ts +24 -0
- package/dist/esm/Text/theme.js +24 -0
- package/dist/esm/Text/utils/getThemeColor.d.ts +11 -0
- package/dist/esm/Text/utils/getThemeColor.js +29 -0
- package/dist/esm/Text/utils/index.d.ts +2 -0
- package/dist/esm/Text/utils/index.js +2 -0
- package/dist/esm/Text/utils/useAntdDarkAlgorithm.d.ts +2 -0
- package/dist/esm/Text/utils/useAntdDarkAlgorithm.js +13 -0
- package/dist/esm/export.d.ts +5 -4
- package/dist/esm/export.js +8 -6
- package/dist/esm/types/chart.d.ts +3 -2
- package/dist/esm/types/chart.js +3 -2
- package/dist/esm/version.d.ts +1 -1
- package/dist/esm/version.js +1 -1
- package/dist/umd/558.async.js +1 -0
- package/dist/umd/index.min.js +1 -1
- package/package.json +2 -2
- package/dist/cjs/Text/constants.d.ts +0 -9
- package/dist/esm/Text/constants.d.ts +0 -9
- package/dist/esm/Text/constants.js +0 -9
- package/dist/umd/895.async.js +0 -1
package/README.md
CHANGED
|
@@ -9,8 +9,7 @@ Components for GPTs, generative AI, and LLM projects. **Not only UI Components**
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://gpt-vis.antv.vision" target="_blank">Document</a> •
|
|
11
11
|
<a href="/knowledges" target="_blank">Knowledge</a> •
|
|
12
|
-
<a href="https://
|
|
13
|
-
<a href="https://tbox.alipay.com/share/202410APr1n200110168?platform=WebService" target="_blank">Agent Demo</a>
|
|
12
|
+
<a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241120WZh400101995" target="_blank">Agent Demo</a>
|
|
14
13
|
</p>
|
|
15
14
|
|
|
16
15
|
<div align="center">
|
|
@@ -65,7 +64,8 @@ export default () => {
|
|
|
65
64
|
};
|
|
66
65
|
```
|
|
67
66
|
|
|
68
|
-
|
|
67
|
+
<details>
|
|
68
|
+
<summary>🛠 Custom renderer</summary>
|
|
69
69
|
|
|
70
70
|
```jsx
|
|
71
71
|
import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
|
|
@@ -101,6 +101,8 @@ export default () => {
|
|
|
101
101
|
};
|
|
102
102
|
```
|
|
103
103
|
|
|
104
|
+
</details>
|
|
105
|
+
|
|
104
106
|
## 🐍 Streamlit
|
|
105
107
|
|
|
106
108
|
```python
|
|
@@ -118,7 +120,23 @@ Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022.
|
|
|
118
120
|
set_gpt_vis(content)
|
|
119
121
|
```
|
|
120
122
|
|
|
121
|
-
Learn more 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/bindings/streamlit-gpt-vis)
|
|
123
|
+
Learn more 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/tree/main/bindings/streamlit-gpt-vis)
|
|
124
|
+
|
|
125
|
+
## Visual Knowledge
|
|
126
|
+
|
|
127
|
+
The purpose of the [Visual Knowledge Base](https://github.com/antvis/GPT-Vis/tree/main/knowledges) is to provide a comprehensive and systematic resource to help Agents understand, select, create various data visualization charts. Below are the metrics for generating accurate chart protocols based on the [evaluation dataset](https://github.com/antvis/GPT-Vis/tree/main/evaluations/datastes/chart) through the RAG.
|
|
128
|
+
|
|
129
|
+
| | | | | | | |
|
|
130
|
+
| ------------- | ----------------------- | -------------------- | ------------- | -------------------- | --------------- | ------- |
|
|
131
|
+
| Line(Multi) | Column(Grouped/Stacked) | Pie | Area(Stacked) | Bar(Grouped/Stacked) | Scatter(Bubble) | Heatmap |
|
|
132
|
+
| 40/40 | 25/27 | 13/14 | 18/18 | 18/20 | 10/10 | 9/10 |
|
|
133
|
+
| Histogram | Tree Map | Word Cloud | Radar | Dual Axis | Rich Text NTV | Pin Map |
|
|
134
|
+
| 15/16 | 13/15 | 11/12 | 23/23 | 13/14 | 7.3/10 | 10/11 |
|
|
135
|
+
| Network Graph | Mind Map | Organizational Chart | Flow Diagram | Fishbone Diagram | | |
|
|
136
|
+
| 8/10 | 12/14 | 10/12 | 10/11 | 10/12 | | |
|
|
137
|
+
| | | | | | | |
|
|
138
|
+
|
|
139
|
+
Note: The numbers in the format of X/Y represent the metrics of the respective chart types when evaluated against the dataset.
|
|
122
140
|
|
|
123
141
|
## 💻 Development
|
|
124
142
|
|
package/README.zh-CN.md
CHANGED
|
@@ -9,8 +9,7 @@ Components for GPTs, generative AI, and LLM projects. **Not only UI Components**
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<a href="https://gpt-vis.antv.vision" target="_blank">文档</a> •
|
|
11
11
|
<a href="/knowledges" target="_blank">知识库</a> •
|
|
12
|
-
<a href="https://
|
|
13
|
-
<a href="https://tbox.alipay.com/share/202410APr1n200110168?platform=WebService" target="_blank">体验 Agent</a>
|
|
12
|
+
<a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241120WZh400101995" target="_blank">体验 Agent</a>
|
|
14
13
|
</p>
|
|
15
14
|
|
|
16
15
|
<div align="center">
|
|
@@ -65,7 +64,8 @@ export default () => {
|
|
|
65
64
|
};
|
|
66
65
|
```
|
|
67
66
|
|
|
68
|
-
|
|
67
|
+
<details>
|
|
68
|
+
<summary>🛠 定制渲染器</summary>
|
|
69
69
|
|
|
70
70
|
```jsx
|
|
71
71
|
import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
|
|
@@ -101,6 +101,8 @@ export default () => {
|
|
|
101
101
|
};
|
|
102
102
|
```
|
|
103
103
|
|
|
104
|
+
</details>
|
|
105
|
+
|
|
104
106
|
## 🐍 Streamlit
|
|
105
107
|
|
|
106
108
|
```python
|
|
@@ -118,7 +120,21 @@ Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022.
|
|
|
118
120
|
set_gpt_vis(content)
|
|
119
121
|
```
|
|
120
122
|
|
|
121
|
-
更多了解 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/bindings/streamlit-gpt-vis)
|
|
123
|
+
更多了解 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/tree/main/bindings/streamlit-gpt-vis)
|
|
124
|
+
|
|
125
|
+
## 🗂 可视化知识库
|
|
126
|
+
|
|
127
|
+
[可视化知识库](https://github.com/antvis/GPT-Vis/tree/main/knowledges)的目的是为了提供一个全面、系统的资源,帮助 Agent 理解、选择、创建各种数据可视化图表,以下是 Agent 通过 RAG 方式接入知识,根据[评测数据集](https://github.com/antvis/GPT-Vis/tree/main/evaluations/datastes/chart)生成准确图表协议的指标。
|
|
128
|
+
|
|
129
|
+
| | | | | | | |
|
|
130
|
+
| ------------- | ----------------------- | -------------------- | ------------- | -------------------- | --------------- | ------- |
|
|
131
|
+
| Line(Multi) | Column(Grouped/Stacked) | Pie | Area(Stacked) | Bar(Grouped/Stacked) | Scatter(Bubble) | Heatmap |
|
|
132
|
+
| 40/40 | 25/27 | 13/14 | 18/18 | 18/20 | 10/10 | 9/10 |
|
|
133
|
+
| Histogram | Tree Map | Word Cloud | Radar | Dual Axis | Rich Text NTV | Pin Map |
|
|
134
|
+
| 15/16 | 13/15 | 11/12 | 23/23 | 13/14 | 7.3/10 | 10/11 |
|
|
135
|
+
| Network Graph | Mind Map | Organizational Chart | Flow Diagram | Fishbone Diagram | | |
|
|
136
|
+
| 8/10 | 12/14 | 10/12 | 10/11 | 10/12 | | |
|
|
137
|
+
| | | | | | | |
|
|
122
138
|
|
|
123
139
|
## 💻 本地开发
|
|
124
140
|
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/FishboneDiagram/index.tsx
|
|
30
|
+
var FishboneDiagram_exports = {};
|
|
31
|
+
__export(FishboneDiagram_exports, {
|
|
32
|
+
default: () => FishboneDiagram_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(FishboneDiagram_exports);
|
|
35
|
+
var import_graphs = require("@ant-design/graphs");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_hooks = require("../ConfigProvider/hooks");
|
|
38
|
+
var import_graph = require("../utils/graph");
|
|
39
|
+
var defaultConfig = {
|
|
40
|
+
autoFit: "view",
|
|
41
|
+
autoResize: true
|
|
42
|
+
};
|
|
43
|
+
var FishboneDiagram = (props) => {
|
|
44
|
+
const { data: propsData, ...restProps } = props;
|
|
45
|
+
const data = (0, import_react.useMemo)(() => (0, import_graph.visTreeData2GraphData)(propsData), [propsData]);
|
|
46
|
+
const config = (0, import_hooks.useGraphConfig)("FishboneDiagram", defaultConfig, restProps);
|
|
47
|
+
return /* @__PURE__ */ import_react.default.createElement(import_graphs.Fishbone, { data, ...config });
|
|
48
|
+
};
|
|
49
|
+
var FishboneDiagram_default = FishboneDiagram;
|
package/dist/cjs/Text/VisText.js
CHANGED
|
@@ -37,6 +37,7 @@ var import_lodash = require("lodash");
|
|
|
37
37
|
var import_react = __toESM(require("react"));
|
|
38
38
|
var import_hooks = require("../ConfigProvider/hooks");
|
|
39
39
|
var import_config = require("./config");
|
|
40
|
+
var import_utils = require("./utils");
|
|
40
41
|
var { Text } = import_antd.Typography;
|
|
41
42
|
function renderPrefixSuffix(symbol, staticsConfig, props) {
|
|
42
43
|
if (!symbol)
|
|
@@ -48,6 +49,7 @@ function renderPrefixSuffix(symbol, staticsConfig, props) {
|
|
|
48
49
|
}
|
|
49
50
|
var VisText = (props) => {
|
|
50
51
|
const { children, className, style, type, origin } = props;
|
|
52
|
+
const isDark = (0, import_utils.useAntdDarkAlgorithm)();
|
|
51
53
|
const textConfig = (0, import_hooks.useComponentGlobalConfig)("VisText");
|
|
52
54
|
const encoding = type ? textConfig == null ? void 0 : textConfig[type] : {};
|
|
53
55
|
const staticsConfig = textConfig == null ? void 0 : textConfig[import_config.STATICS_KEY];
|
|
@@ -61,8 +63,9 @@ var VisText = (props) => {
|
|
|
61
63
|
// antd Text 组件写死了 14px,在段落定义了 font-size 的情况下,显示很突兀,这里不设置,跟随上级容器字体大小改变。
|
|
62
64
|
// TODO @羽熙 之后看能否通过 antd ConfigProvider 统一配置
|
|
63
65
|
fontSize: "unset",
|
|
66
|
+
color: (0, import_utils.getThemeColor)({ type, color: encoding == null ? void 0 : encoding.color, theme: isDark ? "dark" : "light" }),
|
|
64
67
|
...style,
|
|
65
|
-
...(0, import_lodash.pick)(encoding, ["
|
|
68
|
+
...(0, import_lodash.pick)(encoding, ["backgroundColor", "fontWeight"])
|
|
66
69
|
}
|
|
67
70
|
},
|
|
68
71
|
renderPrefixSuffix(encoding == null ? void 0 : encoding.prefix, staticsConfig, props),
|
package/dist/cjs/Text/config.js
CHANGED
|
@@ -23,9 +23,9 @@ __export(config_exports, {
|
|
|
23
23
|
STATICS_KEY: () => STATICS_KEY
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(config_exports);
|
|
26
|
-
var import_constants = require("./constants");
|
|
27
26
|
var import_custom_icons = require("./custom-icons");
|
|
28
27
|
var import_mini_charts = require("./mini-charts");
|
|
28
|
+
var import_theme = require("./theme");
|
|
29
29
|
var STATICS_KEY = "__statics";
|
|
30
30
|
var DEFAULT_VIS_TEXT_CONFIG = {
|
|
31
31
|
[STATICS_KEY]: {
|
|
@@ -36,49 +36,49 @@ var DEFAULT_VIS_TEXT_CONFIG = {
|
|
|
36
36
|
"mini-chart:line": import_mini_charts.SingleLineChart
|
|
37
37
|
},
|
|
38
38
|
metric_name: {
|
|
39
|
-
color:
|
|
39
|
+
color: import_theme.TEXT_THEME.light.default88Color,
|
|
40
40
|
fontWeight: 500
|
|
41
41
|
},
|
|
42
42
|
metric_value: {
|
|
43
|
-
color:
|
|
43
|
+
color: import_theme.TEXT_THEME.light.primaryColor
|
|
44
44
|
},
|
|
45
45
|
other_metric_value: {
|
|
46
|
-
color:
|
|
46
|
+
color: import_theme.TEXT_THEME.light.default65Color
|
|
47
47
|
},
|
|
48
48
|
delta_value: {
|
|
49
|
-
color:
|
|
49
|
+
color: import_theme.TEXT_THEME.light.default65Color
|
|
50
50
|
},
|
|
51
51
|
ratio_value: {
|
|
52
|
-
color:
|
|
52
|
+
color: import_theme.TEXT_THEME.light.default65Color
|
|
53
53
|
},
|
|
54
54
|
delta_value_pos: {
|
|
55
|
-
color:
|
|
55
|
+
color: import_theme.TEXT_THEME.light.posColor,
|
|
56
56
|
prefix: "+"
|
|
57
57
|
},
|
|
58
58
|
delta_value_neg: {
|
|
59
|
-
color:
|
|
59
|
+
color: import_theme.TEXT_THEME.light.negColor,
|
|
60
60
|
prefix: "-"
|
|
61
61
|
},
|
|
62
62
|
ratio_value_pos: {
|
|
63
|
-
color:
|
|
63
|
+
color: import_theme.TEXT_THEME.light.posColor,
|
|
64
64
|
prefix: "icon:arrow-up"
|
|
65
65
|
},
|
|
66
66
|
ratio_value_neg: {
|
|
67
|
-
color:
|
|
67
|
+
color: import_theme.TEXT_THEME.light.negColor,
|
|
68
68
|
prefix: "icon:arrow-down"
|
|
69
69
|
},
|
|
70
70
|
contribute_ratio: {
|
|
71
|
-
color:
|
|
71
|
+
color: import_theme.TEXT_THEME.light.conclusionColor
|
|
72
72
|
},
|
|
73
73
|
trend_desc: {
|
|
74
|
-
color:
|
|
74
|
+
color: import_theme.TEXT_THEME.light.conclusionColor,
|
|
75
75
|
suffix: "mini-chart:line"
|
|
76
76
|
},
|
|
77
77
|
dim_value: {
|
|
78
|
-
color:
|
|
78
|
+
color: import_theme.TEXT_THEME.light.default88Color
|
|
79
79
|
},
|
|
80
80
|
time_desc: {
|
|
81
|
-
color:
|
|
81
|
+
color: import_theme.TEXT_THEME.light.default88Color
|
|
82
82
|
},
|
|
83
83
|
proportion: {
|
|
84
84
|
suffix: "mini-chart:proportion"
|
|
@@ -22,7 +22,7 @@ __export(getElementFontSize_exports, {
|
|
|
22
22
|
getElementFontSize: () => getElementFontSize
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(getElementFontSize_exports);
|
|
25
|
-
var
|
|
25
|
+
var import_theme = require("../../theme");
|
|
26
26
|
function getStyle(ele, style) {
|
|
27
27
|
var _a;
|
|
28
28
|
return window.getComputedStyle ? (
|
|
@@ -43,7 +43,7 @@ function getPxNumber(str) {
|
|
|
43
43
|
return resultNumber;
|
|
44
44
|
return void 0;
|
|
45
45
|
}
|
|
46
|
-
function getElementFontSize(ele, defaultSize =
|
|
46
|
+
function getElementFontSize(ele, defaultSize = import_theme.TEXT_THEME.fontSizeBase) {
|
|
47
47
|
const FONT_SIZE = "font-size";
|
|
48
48
|
const eleFontSizeStr = getStyle(ele, FONT_SIZE);
|
|
49
49
|
if (eleFontSizeStr && isAbsoluteUnitPx(eleFontSizeStr)) {
|
|
@@ -33,14 +33,14 @@ __export(useSvgWrapper_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(useSvgWrapper_exports);
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_theme = require("../../theme");
|
|
37
37
|
var import_getElementFontSize = require("./getElementFontSize");
|
|
38
38
|
var useSvgWrapper = () => {
|
|
39
39
|
const ele = (0, import_react.useRef)(null);
|
|
40
|
-
const [fontSize, setFontSize] = (0, import_react.useState)(
|
|
40
|
+
const [fontSize, setFontSize] = (0, import_react.useState)(import_theme.TEXT_THEME.fontSizeBase);
|
|
41
41
|
(0, import_react.useLayoutEffect)(() => {
|
|
42
42
|
if (ele.current) {
|
|
43
|
-
setFontSize((0, import_getElementFontSize.getElementFontSize)(ele.current,
|
|
43
|
+
setFontSize((0, import_getElementFontSize.getElementFontSize)(ele.current, import_theme.TEXT_THEME.fontSizeBase));
|
|
44
44
|
}
|
|
45
45
|
}, []);
|
|
46
46
|
const Svg = ({ children, ...otherProps }) => {
|
|
@@ -34,10 +34,10 @@ __export(SingleLineChart_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(SingleLineChart_exports);
|
|
35
35
|
var import_lodash = require("lodash");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_theme = require("../../theme");
|
|
37
38
|
var import_hooks = require("../hooks");
|
|
38
39
|
var import_useLineCompute = require("./useLineCompute");
|
|
39
40
|
var LINEAR_FILL_COLOR_ID = "wsc-line-fill";
|
|
40
|
-
var LINE_STROKE_COLOR = "#5B8FF9";
|
|
41
41
|
function getLineChartData(origin) {
|
|
42
42
|
if ((0, import_lodash.isArray)(origin))
|
|
43
43
|
return origin;
|
|
@@ -55,7 +55,7 @@ var SingleLineChart = ({ origin }) => {
|
|
|
55
55
|
const [Svg, fontSize] = (0, import_hooks.useSvgWrapper)();
|
|
56
56
|
const data = (0, import_react.useMemo)(() => getLineChartData(origin), [origin]);
|
|
57
57
|
const { width, height, linePath, polygonPath } = (0, import_useLineCompute.useLineCompute)(fontSize, data);
|
|
58
|
-
return (0, import_lodash.size)(data) > 0 && /* @__PURE__ */ import_react.default.createElement(Svg, { width, height }, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { x1: "50%", y1: "0%", x2: "50%", y2: "122.389541%", id: LINEAR_FILL_COLOR_ID }, /* @__PURE__ */ import_react.default.createElement("stop", { stopColor:
|
|
58
|
+
return (0, import_lodash.size)(data) > 0 && /* @__PURE__ */ import_react.default.createElement(Svg, { width, height }, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { x1: "50%", y1: "0%", x2: "50%", y2: "122.389541%", id: LINEAR_FILL_COLOR_ID }, /* @__PURE__ */ import_react.default.createElement("stop", { stopColor: import_theme.TEXT_THEME.chart.lineStrokeColor, offset: "0%" }), /* @__PURE__ */ import_react.default.createElement("stop", { stopColor: "#FFFFFF", stopOpacity: "0", offset: "100%" }))), linePath && /* @__PURE__ */ import_react.default.createElement("path", { d: linePath, stroke: import_theme.TEXT_THEME.chart.lineStrokeColor, fill: "transparent" }), polygonPath && /* @__PURE__ */ import_react.default.createElement("polygon", { points: polygonPath, fill: `url(#${LINEAR_FILL_COLOR_ID})` }));
|
|
59
59
|
};
|
|
60
60
|
// Annotate the CommonJS export names for ESM import in node:
|
|
61
61
|
0 && (module.exports = {
|
|
@@ -23,13 +23,13 @@ __export(useLineCompute_exports, {
|
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(useLineCompute_exports);
|
|
25
25
|
var import_react = require("react");
|
|
26
|
-
var
|
|
26
|
+
var import_theme = require("../../theme");
|
|
27
27
|
var import_scaleLinear = require("./scaleLinear");
|
|
28
28
|
var SCALE_ADJUST = 2;
|
|
29
29
|
var Line = class {
|
|
30
30
|
constructor(size, data) {
|
|
31
31
|
this.data = [];
|
|
32
|
-
this.size =
|
|
32
|
+
this.size = import_theme.TEXT_THEME.fontSizeBase;
|
|
33
33
|
this.height = this.size;
|
|
34
34
|
this.width = this.getWidth();
|
|
35
35
|
this.points = [];
|
|
@@ -34,10 +34,9 @@ __export(proportion_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(proportion_exports);
|
|
35
35
|
var import_lodash = require("lodash");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_theme = require("../../theme");
|
|
37
38
|
var import_useSvgWrapper = require("../hooks/useSvgWrapper");
|
|
38
39
|
var import_getArcPath = require("./getArcPath");
|
|
39
|
-
var SHADOW_COLOR = "#CDDDFD";
|
|
40
|
-
var FILL_COLOR = "#3471F9";
|
|
41
40
|
function getProportionNumber(children, origin) {
|
|
42
41
|
var _a;
|
|
43
42
|
let result;
|
|
@@ -64,7 +63,7 @@ var ProportionChart = ({ origin, children }) => {
|
|
|
64
63
|
const data = (0, import_react.useMemo)(() => getProportionNumber(children, origin), [children, origin]);
|
|
65
64
|
const [Svg, fontSize] = (0, import_useSvgWrapper.useSvgWrapper)();
|
|
66
65
|
const r = fontSize / 2;
|
|
67
|
-
return data && /* @__PURE__ */ import_react.default.createElement(Svg, { width: fontSize, height: fontSize }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: r, cy: r, r, fill:
|
|
66
|
+
return data && /* @__PURE__ */ import_react.default.createElement(Svg, { width: fontSize, height: fontSize }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: r, cy: r, r, fill: import_theme.TEXT_THEME.chart.proportionShadowColor }), data >= 1 ? /* @__PURE__ */ import_react.default.createElement("circle", { cx: r, cy: r, r, fill: import_theme.TEXT_THEME.chart.proportionFillColor }) : /* @__PURE__ */ import_react.default.createElement("path", { d: (0, import_getArcPath.getArcPath)(fontSize, data), fill: import_theme.TEXT_THEME.chart.proportionFillColor }));
|
|
68
67
|
};
|
|
69
68
|
// Annotate the CommonJS export names for ESM import in node:
|
|
70
69
|
0 && (module.exports = {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export declare const TEXT_THEME: {
|
|
2
|
+
fontSizeBase: number;
|
|
3
|
+
chart: {
|
|
4
|
+
proportionShadowColor: string;
|
|
5
|
+
proportionFillColor: string;
|
|
6
|
+
lineStrokeColor: string;
|
|
7
|
+
};
|
|
8
|
+
light: {
|
|
9
|
+
primaryColor: string;
|
|
10
|
+
default88Color: string;
|
|
11
|
+
default65Color: string;
|
|
12
|
+
posColor: string;
|
|
13
|
+
negColor: string;
|
|
14
|
+
conclusionColor: string;
|
|
15
|
+
};
|
|
16
|
+
dark: {
|
|
17
|
+
primaryColor: string;
|
|
18
|
+
default88Color: string;
|
|
19
|
+
default65Color: string;
|
|
20
|
+
posColor: string;
|
|
21
|
+
negColor: string;
|
|
22
|
+
conclusionColor: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
@@ -16,20 +16,35 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
};
|
|
17
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
18
|
|
|
19
|
-
// src/Text/
|
|
20
|
-
var
|
|
21
|
-
__export(
|
|
19
|
+
// src/Text/theme.ts
|
|
20
|
+
var theme_exports = {};
|
|
21
|
+
__export(theme_exports, {
|
|
22
22
|
TEXT_THEME: () => TEXT_THEME
|
|
23
23
|
});
|
|
24
|
-
module.exports = __toCommonJS(
|
|
24
|
+
module.exports = __toCommonJS(theme_exports);
|
|
25
25
|
var TEXT_THEME = {
|
|
26
26
|
fontSizeBase: 14,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
chart: {
|
|
28
|
+
proportionShadowColor: "#CDDDFD",
|
|
29
|
+
proportionFillColor: "#3471F9",
|
|
30
|
+
lineStrokeColor: "#5B8FF9"
|
|
31
|
+
},
|
|
32
|
+
light: {
|
|
33
|
+
primaryColor: "#1677FF",
|
|
34
|
+
default88Color: "rgba(0, 0, 0, 0.88)",
|
|
35
|
+
default65Color: "rgba(0, 0, 0, 0.65)",
|
|
36
|
+
posColor: "#FA541C",
|
|
37
|
+
negColor: "#13A8A8",
|
|
38
|
+
conclusionColor: "#1F0352"
|
|
39
|
+
},
|
|
40
|
+
dark: {
|
|
41
|
+
primaryColor: "#4B91FF",
|
|
42
|
+
default88Color: "rgba(255, 255, 255, 0.88)",
|
|
43
|
+
default65Color: "rgba(255, 255, 255, 0.65)",
|
|
44
|
+
posColor: "#FA541C",
|
|
45
|
+
negColor: "#13A8A8",
|
|
46
|
+
conclusionColor: "#D8C3F3"
|
|
47
|
+
}
|
|
33
48
|
};
|
|
34
49
|
// Annotate the CommonJS export names for ESM import in node:
|
|
35
50
|
0 && (module.exports = {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 自动适配暗黑模式
|
|
3
|
+
* @params type 类型
|
|
4
|
+
* @params color 当前颜色
|
|
5
|
+
* @params theme 当前主题
|
|
6
|
+
*/
|
|
7
|
+
export declare const getThemeColor: ({ type, color, theme, }: {
|
|
8
|
+
type?: string | undefined;
|
|
9
|
+
color: string | undefined;
|
|
10
|
+
theme: 'dark' | 'light';
|
|
11
|
+
}) => string | undefined;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/Text/utils/getThemeColor.ts
|
|
20
|
+
var getThemeColor_exports = {};
|
|
21
|
+
__export(getThemeColor_exports, {
|
|
22
|
+
getThemeColor: () => getThemeColor
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(getThemeColor_exports);
|
|
25
|
+
var import_lodash = require("lodash");
|
|
26
|
+
var import_config = require("../config");
|
|
27
|
+
var import_theme = require("../theme");
|
|
28
|
+
var getThemeColor = ({
|
|
29
|
+
type,
|
|
30
|
+
color,
|
|
31
|
+
theme
|
|
32
|
+
}) => {
|
|
33
|
+
if (type && color && theme === "dark") {
|
|
34
|
+
const defaultLightColor = (0, import_lodash.get)(import_config.DEFAULT_VIS_TEXT_CONFIG, [type, "color"]);
|
|
35
|
+
if (color === defaultLightColor) {
|
|
36
|
+
const token = (0, import_lodash.findKey)(import_theme.TEXT_THEME.light, (i) => i === color);
|
|
37
|
+
if (token)
|
|
38
|
+
return import_theme.TEXT_THEME.dark[token];
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
return color;
|
|
42
|
+
};
|
|
43
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
44
|
+
0 && (module.exports = {
|
|
45
|
+
getThemeColor
|
|
46
|
+
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __copyProps = (to, from, except, desc) => {
|
|
6
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
|
+
for (let key of __getOwnPropNames(from))
|
|
8
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
9
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
+
}
|
|
11
|
+
return to;
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
|
|
16
|
+
// src/Text/utils/index.ts
|
|
17
|
+
var utils_exports = {};
|
|
18
|
+
module.exports = __toCommonJS(utils_exports);
|
|
19
|
+
__reExport(utils_exports, require("./getThemeColor"), module.exports);
|
|
20
|
+
__reExport(utils_exports, require("./useAntdDarkAlgorithm"), module.exports);
|
|
21
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
22
|
+
0 && (module.exports = {
|
|
23
|
+
...require("./getThemeColor"),
|
|
24
|
+
...require("./useAntdDarkAlgorithm")
|
|
25
|
+
});
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/Text/utils/useAntdDarkAlgorithm.ts
|
|
20
|
+
var useAntdDarkAlgorithm_exports = {};
|
|
21
|
+
__export(useAntdDarkAlgorithm_exports, {
|
|
22
|
+
useAntdDarkAlgorithm: () => useAntdDarkAlgorithm
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(useAntdDarkAlgorithm_exports);
|
|
25
|
+
var import_antd = require("antd");
|
|
26
|
+
var import_lodash = require("lodash");
|
|
27
|
+
var import_react = require("react");
|
|
28
|
+
var { darkAlgorithm } = import_antd.theme;
|
|
29
|
+
var useAntdDarkAlgorithm = () => {
|
|
30
|
+
var _a;
|
|
31
|
+
const config = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
|
|
32
|
+
const currentAlgorithm = (_a = config.theme) == null ? void 0 : _a.algorithm;
|
|
33
|
+
if ((0, import_lodash.isArray)(currentAlgorithm) && currentAlgorithm.includes(darkAlgorithm))
|
|
34
|
+
return true;
|
|
35
|
+
return currentAlgorithm === darkAlgorithm;
|
|
36
|
+
};
|
|
37
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
38
|
+
0 && (module.exports = {
|
|
39
|
+
useAntdDarkAlgorithm
|
|
40
|
+
});
|
package/dist/cjs/export.d.ts
CHANGED
|
@@ -13,16 +13,17 @@ import { default as Scatter, type ScatterProps } from './Scatter';
|
|
|
13
13
|
import { default as Treemap, type TreemapProps } from './Treemap';
|
|
14
14
|
import { default as WordCloud, type WordCloudProps } from './WordCloud';
|
|
15
15
|
/********** graph chart **********/
|
|
16
|
+
import { default as FishboneDiagram, type FishboneDiagramProps } from './FishboneDiagram';
|
|
16
17
|
import { default as FlowDiagram, type FlowDiagramProps } from './FlowDiagram';
|
|
17
18
|
import { default as MindMap, type MindMapProps } from './MindMap';
|
|
18
19
|
import { default as NetworkGraph, type NetworkGraphProps } from './NetworkGraph';
|
|
19
|
-
import { default as PathMap, type PathMapProps } from './PathMap';
|
|
20
|
-
import { default as PinMap, type PinMapProps } from './PinMap';
|
|
21
20
|
export { default as IndentedTree, type IndentedTreeProps } from './IndentedTree';
|
|
21
|
+
export { default as Map, type MapProps } from './Map';
|
|
22
22
|
export { default as OrganizationChart, type OrganizationChartProps } from './OrganizationChart';
|
|
23
23
|
/********** map chart **********/
|
|
24
|
-
|
|
24
|
+
import { default as PathMap, type PathMapProps } from './PathMap';
|
|
25
|
+
import { default as PinMap, type PinMapProps } from './PinMap';
|
|
25
26
|
/********** NTV **********/
|
|
26
27
|
export { VisText, type VisTextProps } from './Text';
|
|
27
|
-
export { Area, Bar, Column, DualAxes, FlowDiagram, HeatMap, Histogram, Line, MindMap, NetworkGraph, PathMap, Pie, PinMap, Radar, Scatter, Treemap, WordCloud, type AreaProps, type BarProps, type ColumnProps, type DualAxesProps, type FlowDiagramProps, type HeatMapProps, type HistogramProps, type LineProps, type MindMapProps, type NetworkGraphProps, type PathMapProps, type PieProps, type PinMapProps, type RadarProps, type ScatterProps, type TreemapProps, type WordCloudProps, };
|
|
28
|
+
export { Area, Bar, Column, DualAxes, FishboneDiagram, FlowDiagram, HeatMap, Histogram, Line, MindMap, NetworkGraph, PathMap, Pie, PinMap, Radar, Scatter, Treemap, WordCloud, type AreaProps, type BarProps, type ColumnProps, type DualAxesProps, type FishboneDiagramProps, type FlowDiagramProps, type HeatMapProps, type HistogramProps, type LineProps, type MindMapProps, type NetworkGraphProps, type PathMapProps, type PieProps, type PinMapProps, type RadarProps, type ScatterProps, type TreemapProps, type WordCloudProps, };
|
|
28
29
|
export declare const DEFAULT_CHART_COMPONENTS: Record<string, React.FC<any>>;
|