@antv/gpt-vis 0.4.7 → 0.5.0
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.ja-JP.md +3 -2
- package/README.md +3 -2
- package/README.zh-CN.md +3 -2
- package/dist/cjs/ChartCodeRender/VisChart.d.ts +3 -1
- package/dist/cjs/ChartCodeRender/VisChart.js +76 -17
- package/dist/cjs/ChartCodeRender/index.js +6 -2
- package/dist/cjs/ChartCodeRender/styles.d.ts +14 -0
- package/dist/cjs/ChartCodeRender/styles.js +205 -0
- package/dist/cjs/ChartCodeRender/type.d.ts +23 -0
- package/dist/cjs/ChartCodeRender/utils.d.ts +1 -0
- package/dist/cjs/ChartCodeRender/utils.js +51 -0
- package/dist/cjs/index.d.ts +1 -1
- package/dist/cjs/utils/map/style.d.ts +3 -3
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/ChartCodeRender/VisChart.d.ts +3 -1
- package/dist/esm/ChartCodeRender/VisChart.js +113 -16
- package/dist/esm/ChartCodeRender/index.js +15 -5
- package/dist/esm/ChartCodeRender/styles.d.ts +14 -0
- package/dist/esm/ChartCodeRender/styles.js +54 -0
- package/dist/esm/ChartCodeRender/type.d.ts +23 -0
- package/dist/esm/ChartCodeRender/utils.d.ts +1 -0
- package/dist/esm/ChartCodeRender/utils.js +37 -0
- package/dist/esm/ConfigProvider/hooks/useConfig.js +6 -1
- package/dist/esm/ConfigProvider/index.js +2 -1
- package/dist/esm/DualAxes/index.js +8 -2
- package/dist/esm/DualAxes/util.js +8 -2
- package/dist/esm/FishboneDiagram/index.js +3 -2
- package/dist/esm/FlowDiagram/index.js +9 -3
- package/dist/esm/GPTVis/Lite.js +9 -3
- package/dist/esm/GPTVis/index.js +9 -3
- package/dist/esm/HeatMap/index.js +3 -2
- package/dist/esm/IndentedTree/index.js +15 -4
- package/dist/esm/Map/Component/Marker.js +6 -1
- package/dist/esm/Map/Component/Polyline.js +6 -1
- package/dist/esm/Map/index.js +10 -4
- package/dist/esm/MindMap/index.js +15 -4
- package/dist/esm/NetworkGraph/index.js +9 -3
- package/dist/esm/OrganizationChart/index.js +15 -4
- package/dist/esm/PathMap/index.js +9 -3
- package/dist/esm/PinMap/index.js +3 -2
- package/dist/esm/Text/VisText.js +6 -1
- package/dist/esm/Text/config.js +4 -1
- package/dist/esm/Text/mini-charts/hooks/useSvgWrapper.js +9 -3
- package/dist/esm/Text/mini-charts/line/SingleLineChart.js +6 -1
- package/dist/esm/Text/mini-charts/line/scaleLinear.js +6 -1
- package/dist/esm/Text/mini-charts/line/useLineCompute.js +17 -5
- package/dist/esm/Text/mini-charts/proportion/index.js +6 -1
- package/dist/esm/Treemap/index.js +3 -2
- package/dist/esm/export.js +4 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/utils/config.js +6 -1
- package/dist/esm/utils/graph.js +8 -2
- package/dist/esm/utils/map/context.js +4 -2
- package/dist/esm/utils/map/markers.js +6 -1
- package/dist/esm/utils/map/polyline.js +6 -1
- package/dist/esm/utils/map/style.d.ts +3 -3
- package/dist/esm/utils/map/style.js +8 -2
- package/dist/esm/utils/plot.js +9 -2
- package/dist/esm/version.d.ts +1 -1
- package/dist/esm/version.js +1 -1
- package/dist/umd/168.async.js +1 -0
- package/dist/umd/index.min.js +1 -1
- package/package.json +37 -32
- package/dist/umd/100.async.js +0 -1
package/README.ja-JP.md
CHANGED
|
@@ -8,12 +8,13 @@
|
|
|
8
8
|
|
|
9
9
|
<div align="center">
|
|
10
10
|
|
|
11
|
-
GPTs、生成AI、およびLLMプロジェクトのためのコンポーネント。**UIコンポーネントだけではありません**。
|
|
11
|
+
GPTs、生成AI、およびLLMプロジェクトのためのコンポーネント。**UIコンポーネントだけではありません**。[MCP](https://github.com/antvis/mcp-server-chart) の方法で使用する。
|
|
12
12
|
|
|
13
13
|
<p align="center">
|
|
14
14
|
<a href="https://gpt-vis.antv.vision" target="_blank">ドキュメント</a> •
|
|
15
15
|
<a href="/knowledges" target="_blank">知識</a> •
|
|
16
|
-
<a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">エージェントデモ</a>
|
|
16
|
+
<a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">エージェントデモ</a> •
|
|
17
|
+
<a href="https://github.com/antvis/mcp-server-chart" target="_blank">MCP Server</a>
|
|
17
18
|
</p>
|
|
18
19
|
</div>
|
|
19
20
|
|
package/README.md
CHANGED
|
@@ -8,12 +8,13 @@
|
|
|
8
8
|
|
|
9
9
|
<div align="center">
|
|
10
10
|
|
|
11
|
-
Components for GPTs, generative AI, and LLM projects. **Not only UI Components**.
|
|
11
|
+
Components for GPTs, generative AI, and LLM projects. **Not only UI Components**. Use it by [MCP](https://github.com/antvis/mcp-server-chart).
|
|
12
12
|
|
|
13
13
|
<p align="center">
|
|
14
14
|
<a href="https://gpt-vis.antv.vision" target="_blank">Document</a> •
|
|
15
15
|
<a href="/knowledges" target="_blank">Knowledge</a> •
|
|
16
|
-
<a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">Agent Demo</a>
|
|
16
|
+
<a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">Agent Demo</a> •
|
|
17
|
+
<a href="https://github.com/antvis/mcp-server-chart" target="_blank">MCP Server</a>
|
|
17
18
|
</p>
|
|
18
19
|
</div>
|
|
19
20
|
|
package/README.zh-CN.md
CHANGED
|
@@ -8,12 +8,13 @@
|
|
|
8
8
|
|
|
9
9
|
<div align="center">
|
|
10
10
|
|
|
11
|
-
Components for GPTs, generative AI, and LLM projects. **Not only UI Components**.
|
|
11
|
+
Components for GPTs, generative AI, and LLM projects. **Not only UI Components**. Use it by [MCP](https://github.com/antvis/mcp-server-chart).
|
|
12
12
|
|
|
13
13
|
<p align="center">
|
|
14
14
|
<a href="https://gpt-vis.antv.vision" target="_blank">文档</a> •
|
|
15
15
|
<a href="/knowledges" target="_blank">知识库</a> •
|
|
16
|
-
<a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">体验 Agent</a>
|
|
16
|
+
<a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">体验 Agent</a> •
|
|
17
|
+
<a href="https://github.com/antvis/mcp-server-chart" target="_blank">MCP Server</a>
|
|
17
18
|
</p>
|
|
18
19
|
</div>
|
|
19
20
|
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ChartComponents } from './type';
|
|
2
|
+
import type { ChartComponents, ComponentErrorRender, ErrorRender } from './type';
|
|
3
3
|
type RenderVisChartProps = {
|
|
4
4
|
content: string;
|
|
5
5
|
components: ChartComponents;
|
|
6
6
|
debug?: boolean;
|
|
7
7
|
loadingTimeout: number;
|
|
8
8
|
style?: React.CSSProperties;
|
|
9
|
+
componentErrorRender?: (errorInfo: ComponentErrorRender) => React.ReactElement;
|
|
10
|
+
errorRender?: (errorInfo: ErrorRender) => React.ReactElement;
|
|
9
11
|
};
|
|
10
12
|
export declare const RenderVisChart: React.FC<RenderVisChartProps>;
|
|
11
13
|
export {};
|
|
@@ -32,40 +32,46 @@ __export(VisChart_exports, {
|
|
|
32
32
|
RenderVisChart: () => RenderVisChart
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(VisChart_exports);
|
|
35
|
+
var import_icons = require("@ant-design/icons");
|
|
35
36
|
var import_react = __toESM(require("react"));
|
|
36
|
-
var
|
|
37
|
+
var import_react_error_boundary = require("react-error-boundary");
|
|
38
|
+
var import_react_syntax_highlighter = require("react-syntax-highlighter");
|
|
39
|
+
var import_json = __toESM(require("react-syntax-highlighter/dist/cjs/languages/hljs/json"));
|
|
40
|
+
var import_hljs = require("react-syntax-highlighter/dist/esm/styles/hljs");
|
|
37
41
|
var import_Loading = __toESM(require("./Loading"));
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
max-width: 100%;
|
|
42
|
-
`;
|
|
43
|
-
var GlobalStyles = import_styled_components.createGlobalStyle`
|
|
44
|
-
pre:has(.gpt-vis) {
|
|
45
|
-
overflow: hidden;
|
|
46
|
-
}
|
|
47
|
-
`;
|
|
42
|
+
var import_styles = require("./styles");
|
|
43
|
+
var import_utils = require("./utils");
|
|
44
|
+
import_react_syntax_highlighter.Light.registerLanguage("json", import_json.default);
|
|
48
45
|
var RenderVisChart = (0, import_react.memo)(
|
|
49
|
-
({ style, content, components, debug, loadingTimeout }) => {
|
|
46
|
+
({ style, content, components, debug, loadingTimeout, componentErrorRender, errorRender }) => {
|
|
50
47
|
const timeoutRef = (0, import_react.useRef)();
|
|
51
48
|
const [loading, setLoading] = (0, import_react.useState)(true);
|
|
49
|
+
const [activeTab, setActiveTab] = (0, import_react.useState)("chart");
|
|
50
|
+
const [hasRenderError, setHasRenderError] = (0, import_react.useState)(false);
|
|
52
51
|
let chartJson;
|
|
53
52
|
try {
|
|
54
53
|
chartJson = JSON.parse(content);
|
|
55
54
|
} catch (e) {
|
|
55
|
+
const parseError = e;
|
|
56
56
|
if (timeoutRef.current) {
|
|
57
57
|
clearTimeout(timeoutRef.current);
|
|
58
58
|
if (debug) {
|
|
59
|
-
console.warn("GPT-Vis
|
|
59
|
+
console.warn("GPT-Vis parse content timeout!");
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
timeoutRef.current = setTimeout(() => {
|
|
63
63
|
setLoading(false);
|
|
64
64
|
}, loadingTimeout);
|
|
65
65
|
if (loading) {
|
|
66
|
-
return /* @__PURE__ */ import_react.default.createElement(StyledGPTVis, { className: "gpt-vis", style }, /* @__PURE__ */ import_react.default.createElement(import_Loading.default, null));
|
|
66
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis", style }, /* @__PURE__ */ import_react.default.createElement(import_Loading.default, null));
|
|
67
|
+
}
|
|
68
|
+
if (errorRender) {
|
|
69
|
+
return errorRender({
|
|
70
|
+
error: parseError,
|
|
71
|
+
content
|
|
72
|
+
});
|
|
67
73
|
}
|
|
68
|
-
return /* @__PURE__ */ import_react.default.createElement("
|
|
74
|
+
return /* @__PURE__ */ import_react.default.createElement("div", null, " GPT-Vis parse content error! ");
|
|
69
75
|
}
|
|
70
76
|
const { type, ...chartProps } = chartJson;
|
|
71
77
|
const ChartComponent = components[type];
|
|
@@ -73,9 +79,62 @@ var RenderVisChart = (0, import_react.memo)(
|
|
|
73
79
|
console.log("GPT-Vis withChartCode get chartJson parse from vis-chart code block", chartJson);
|
|
74
80
|
}
|
|
75
81
|
if (!ChartComponent) {
|
|
76
|
-
|
|
82
|
+
const message = `Chart type "${type}" is not supported.`;
|
|
83
|
+
if (errorRender) {
|
|
84
|
+
return errorRender({
|
|
85
|
+
error: new Error(message),
|
|
86
|
+
content
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
return /* @__PURE__ */ import_react.default.createElement("div", null, " ", message, " ");
|
|
77
90
|
}
|
|
78
|
-
|
|
91
|
+
const FallbackComponent = (fallbackProps) => {
|
|
92
|
+
const { error } = fallbackProps;
|
|
93
|
+
if (!hasRenderError) {
|
|
94
|
+
setHasRenderError(true);
|
|
95
|
+
setActiveTab("code");
|
|
96
|
+
}
|
|
97
|
+
if (componentErrorRender) {
|
|
98
|
+
return componentErrorRender({
|
|
99
|
+
error,
|
|
100
|
+
content
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_styles.ErrorMessage, null, "图表渲染失败"));
|
|
104
|
+
};
|
|
105
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.TabContainer, { style }, /* @__PURE__ */ import_react.default.createElement(import_styles.TabHeader, null, /* @__PURE__ */ import_react.default.createElement(import_styles.TabLeftGroup, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTabButton, { active: activeTab === "chart", onClick: () => setActiveTab("chart") }, "图表"), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTabButton, { active: activeTab === "code", onClick: () => setActiveTab("code") }, "代码")), /* @__PURE__ */ import_react.default.createElement(import_styles.TabRightGroup, null, activeTab === "code" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.CopyButton, { onClick: () => (0, import_utils.handleCopyCode)(chartJson) }, /* @__PURE__ */ import_react.default.createElement(import_icons.CopyOutlined, null), "复制")))), /* @__PURE__ */ import_react.default.createElement(import_styles.TabContent, null, activeTab === "chart" ? /* @__PURE__ */ import_react.default.createElement(
|
|
106
|
+
import_react_error_boundary.ErrorBoundary,
|
|
107
|
+
{
|
|
108
|
+
FallbackComponent,
|
|
109
|
+
onError: (error, errorInfo) => {
|
|
110
|
+
console.error("GPT-Vis Render error:", error);
|
|
111
|
+
if (!hasRenderError) {
|
|
112
|
+
setHasRenderError(true);
|
|
113
|
+
setActiveTab("code");
|
|
114
|
+
}
|
|
115
|
+
if (debug) {
|
|
116
|
+
console.error("GPT-Vis Render error info:", errorInfo);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
/* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis" }, /* @__PURE__ */ import_react.default.createElement(import_styles.GlobalStyles, null), /* @__PURE__ */ import_react.default.createElement(import_styles.ChartWrapper, null, /* @__PURE__ */ import_react.default.createElement(ChartComponent, { ...chartProps })))
|
|
121
|
+
) : /* @__PURE__ */ import_react.default.createElement("div", { style: { maxHeight: 500, overflow: "auto" } }, /* @__PURE__ */ import_react.default.createElement(
|
|
122
|
+
import_react_syntax_highlighter.Light,
|
|
123
|
+
{
|
|
124
|
+
language: "json",
|
|
125
|
+
style: import_hljs.magula,
|
|
126
|
+
showLineNumbers: false,
|
|
127
|
+
wrapLines: true,
|
|
128
|
+
customStyle: {
|
|
129
|
+
background: "transparent",
|
|
130
|
+
padding: "16px",
|
|
131
|
+
margin: 0,
|
|
132
|
+
fontSize: "12px",
|
|
133
|
+
lineHeight: "1"
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
JSON.stringify(chartJson, null, 2) || content
|
|
137
|
+
))));
|
|
79
138
|
}
|
|
80
139
|
);
|
|
81
140
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -53,7 +53,9 @@ var withCodeBlock = (options) => {
|
|
|
53
53
|
defaultRenderer: DefaultRenderer,
|
|
54
54
|
debug,
|
|
55
55
|
loadingTimeout = 5e3,
|
|
56
|
-
style
|
|
56
|
+
style,
|
|
57
|
+
errorRender,
|
|
58
|
+
componentErrorRender
|
|
57
59
|
} = options;
|
|
58
60
|
if (isVisChart) {
|
|
59
61
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
@@ -63,7 +65,9 @@ var withCodeBlock = (options) => {
|
|
|
63
65
|
content,
|
|
64
66
|
components,
|
|
65
67
|
debug,
|
|
66
|
-
loadingTimeout
|
|
68
|
+
loadingTimeout,
|
|
69
|
+
errorRender,
|
|
70
|
+
componentErrorRender
|
|
67
71
|
}
|
|
68
72
|
);
|
|
69
73
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledGPTVis: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
|
+
export declare const CopyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
|
|
4
|
+
export declare const ChartWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
5
|
+
export declare const TabContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
|
+
export declare const TabHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
7
|
+
export declare const TabLeftGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
|
+
export declare const TabRightGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
9
|
+
export declare const TabContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
10
|
+
export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
11
|
+
export declare const GlobalStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
|
|
12
|
+
export declare const StyledTabButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
|
|
13
|
+
active?: boolean | undefined;
|
|
14
|
+
}>> & string;
|
|
@@ -0,0 +1,205 @@
|
|
|
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/ChartCodeRender/styles.ts
|
|
30
|
+
var styles_exports = {};
|
|
31
|
+
__export(styles_exports, {
|
|
32
|
+
ChartWrapper: () => ChartWrapper,
|
|
33
|
+
CopyButton: () => CopyButton,
|
|
34
|
+
ErrorMessage: () => ErrorMessage,
|
|
35
|
+
GlobalStyles: () => GlobalStyles,
|
|
36
|
+
StyledGPTVis: () => StyledGPTVis,
|
|
37
|
+
StyledTabButton: () => StyledTabButton,
|
|
38
|
+
TabContainer: () => TabContainer,
|
|
39
|
+
TabContent: () => TabContent,
|
|
40
|
+
TabHeader: () => TabHeader,
|
|
41
|
+
TabLeftGroup: () => TabLeftGroup,
|
|
42
|
+
TabRightGroup: () => TabRightGroup
|
|
43
|
+
});
|
|
44
|
+
module.exports = __toCommonJS(styles_exports);
|
|
45
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
46
|
+
var StyledGPTVis = import_styled_components.default.div`
|
|
47
|
+
min-width: 300px;
|
|
48
|
+
height: 300px;
|
|
49
|
+
max-width: 100%;
|
|
50
|
+
overflow: hidden;
|
|
51
|
+
position: relative;
|
|
52
|
+
padding: 16px;
|
|
53
|
+
`;
|
|
54
|
+
var CopyButton = import_styled_components.default.button`
|
|
55
|
+
border: none;
|
|
56
|
+
box-shadow: none;
|
|
57
|
+
background: transparent;
|
|
58
|
+
color: #494949;
|
|
59
|
+
height: 26px;
|
|
60
|
+
padding: 0 8px;
|
|
61
|
+
font-size: 12px;
|
|
62
|
+
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
63
|
+
transform: scale(1);
|
|
64
|
+
border-radius: 8px;
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
gap: 4px;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
outline: none;
|
|
71
|
+
font-family: inherit;
|
|
72
|
+
|
|
73
|
+
&:hover,
|
|
74
|
+
&:focus {
|
|
75
|
+
color: #666;
|
|
76
|
+
background: #f5f5f5;
|
|
77
|
+
transform: scale(1.02);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&:active {
|
|
81
|
+
background: #e8e8e8;
|
|
82
|
+
transform: scale(0.98);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.anticon {
|
|
86
|
+
font-size: 12px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* 禁用状态 */
|
|
90
|
+
&:disabled {
|
|
91
|
+
cursor: not-allowed;
|
|
92
|
+
opacity: 0.6;
|
|
93
|
+
|
|
94
|
+
&:hover,
|
|
95
|
+
&:focus,
|
|
96
|
+
&:active {
|
|
97
|
+
background: transparent;
|
|
98
|
+
transform: scale(1);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
`;
|
|
102
|
+
var ChartWrapper = import_styled_components.default.div`
|
|
103
|
+
width: 100%;
|
|
104
|
+
height: 100%;
|
|
105
|
+
|
|
106
|
+
& > * {
|
|
107
|
+
max-width: 100%;
|
|
108
|
+
max-height: 100%;
|
|
109
|
+
}
|
|
110
|
+
`;
|
|
111
|
+
var TabContainer = import_styled_components.default.div`
|
|
112
|
+
border-radius: 8px;
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
`;
|
|
115
|
+
var TabHeader = import_styled_components.default.div`
|
|
116
|
+
display: flex;
|
|
117
|
+
justify-content: space-between;
|
|
118
|
+
align-items: center;
|
|
119
|
+
background: #f5f5f5;
|
|
120
|
+
padding: 6px 14px 6px 6px;
|
|
121
|
+
gap: 2px;
|
|
122
|
+
position: relative;
|
|
123
|
+
z-index: 10;
|
|
124
|
+
`;
|
|
125
|
+
var TabLeftGroup = import_styled_components.default.div`
|
|
126
|
+
display: flex;
|
|
127
|
+
gap: 2px;
|
|
128
|
+
`;
|
|
129
|
+
var TabRightGroup = import_styled_components.default.div`
|
|
130
|
+
display: flex;
|
|
131
|
+
gap: 4px;
|
|
132
|
+
align-items: center;
|
|
133
|
+
`;
|
|
134
|
+
var TabContent = import_styled_components.default.div`
|
|
135
|
+
background: #fff;
|
|
136
|
+
overflow: hidden;
|
|
137
|
+
position: relative;
|
|
138
|
+
background: #fafafa;
|
|
139
|
+
`;
|
|
140
|
+
var ErrorMessage = import_styled_components.default.div`
|
|
141
|
+
height: 150px;
|
|
142
|
+
font-size: 12px;
|
|
143
|
+
color: #666;
|
|
144
|
+
border-radius: 4px;
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
`;
|
|
149
|
+
var GlobalStyles = import_styled_components.createGlobalStyle`
|
|
150
|
+
pre:has(.gpt-vis) {
|
|
151
|
+
overflow: hidden;
|
|
152
|
+
}
|
|
153
|
+
`;
|
|
154
|
+
var StyledTabButton = import_styled_components.default.button`
|
|
155
|
+
border: none;
|
|
156
|
+
box-shadow: none;
|
|
157
|
+
background: ${(props) => props.active ? "#fff" : "transparent"};
|
|
158
|
+
color: #494949;
|
|
159
|
+
border-radius: 8px;
|
|
160
|
+
height: 26px;
|
|
161
|
+
width: 52px;
|
|
162
|
+
font-size: 12px;
|
|
163
|
+
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
164
|
+
transform: scale(1);
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
outline: none;
|
|
167
|
+
font-family: inherit;
|
|
168
|
+
display: inline-flex;
|
|
169
|
+
align-items: center;
|
|
170
|
+
justify-content: center;
|
|
171
|
+
|
|
172
|
+
/* 选中状态的阴影效果 */
|
|
173
|
+
${(props) => props.active && `
|
|
174
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
175
|
+
`}
|
|
176
|
+
|
|
177
|
+
&:hover,
|
|
178
|
+
&:focus {
|
|
179
|
+
background: ${(props) => props.active ? "#fff" : "#f0f0f0"};
|
|
180
|
+
color: #494949;
|
|
181
|
+
box-shadow: ${(props) => props.active ? "0 2px 6px rgba(0, 0, 0, 0.12)" : "0 1px 3px rgba(0, 0, 0, 0.06)"};
|
|
182
|
+
transform: scale(1.02);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
&:active {
|
|
186
|
+
background: ${(props) => props.active ? "#fff" : "#e8e8e8"};
|
|
187
|
+
transform: scale(0.96);
|
|
188
|
+
box-shadow: ${(props) => props.active ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "0 1px 2px rgba(0, 0, 0, 0.04)"};
|
|
189
|
+
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
190
|
+
}
|
|
191
|
+
`;
|
|
192
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
193
|
+
0 && (module.exports = {
|
|
194
|
+
ChartWrapper,
|
|
195
|
+
CopyButton,
|
|
196
|
+
ErrorMessage,
|
|
197
|
+
GlobalStyles,
|
|
198
|
+
StyledGPTVis,
|
|
199
|
+
StyledTabButton,
|
|
200
|
+
TabContainer,
|
|
201
|
+
TabContent,
|
|
202
|
+
TabHeader,
|
|
203
|
+
TabLeftGroup,
|
|
204
|
+
TabRightGroup
|
|
205
|
+
});
|
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
import type { FC } from 'react';
|
|
2
2
|
import type { Components, ExtraProps } from 'react-markdown';
|
|
3
|
+
/**
|
|
4
|
+
* 错误渲染函数类型
|
|
5
|
+
*/
|
|
6
|
+
export type ErrorRender = {
|
|
7
|
+
/** 错误对象 */
|
|
8
|
+
error?: Error;
|
|
9
|
+
/** 原始内容 */
|
|
10
|
+
content: string;
|
|
11
|
+
};
|
|
12
|
+
export type ComponentErrorRender = {
|
|
13
|
+
/** 错误对象 */
|
|
14
|
+
error?: Error;
|
|
15
|
+
/** 原始内容 */
|
|
16
|
+
content: string;
|
|
17
|
+
};
|
|
3
18
|
export type WithChartCodeOptions = {
|
|
4
19
|
/**
|
|
5
20
|
* 要额外加载的图表组件
|
|
@@ -25,6 +40,14 @@ export type WithChartCodeOptions = {
|
|
|
25
40
|
* 图表样式,配置容器样式
|
|
26
41
|
*/
|
|
27
42
|
style?: React.CSSProperties;
|
|
43
|
+
/**
|
|
44
|
+
* 自定义组件错误渲染函数
|
|
45
|
+
*/
|
|
46
|
+
componentErrorRender?: (errorInfo: ComponentErrorRender) => React.ReactElement;
|
|
47
|
+
/**
|
|
48
|
+
* 自定义错误渲染函数
|
|
49
|
+
*/
|
|
50
|
+
errorRender?: (errorInfo: ErrorRender) => React.ReactElement;
|
|
28
51
|
};
|
|
29
52
|
/**
|
|
30
53
|
* 图表渲染数据接口,后续拓展,这里只是写个示例
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const handleCopyCode: (data: any) => Promise<void>;
|
|
@@ -0,0 +1,51 @@
|
|
|
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/ChartCodeRender/utils.ts
|
|
30
|
+
var utils_exports = {};
|
|
31
|
+
__export(utils_exports, {
|
|
32
|
+
handleCopyCode: () => handleCopyCode
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(utils_exports);
|
|
35
|
+
var import_copy_text_to_clipboard = __toESM(require("copy-text-to-clipboard"));
|
|
36
|
+
var handleCopyCode = async (data) => {
|
|
37
|
+
try {
|
|
38
|
+
const codeText = JSON.stringify(data, null, 2);
|
|
39
|
+
const success = (0, import_copy_text_to_clipboard.default)(codeText);
|
|
40
|
+
if (!success) {
|
|
41
|
+
throw new Error("复制失败");
|
|
42
|
+
}
|
|
43
|
+
} catch (err) {
|
|
44
|
+
console.error("复制失败:", err);
|
|
45
|
+
throw err;
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
49
|
+
0 && (module.exports = {
|
|
50
|
+
handleCopyCode
|
|
51
|
+
});
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export * from './export';
|
|
|
4
4
|
export * from './types';
|
|
5
5
|
/********** export GPTVis **********/
|
|
6
6
|
export { withChartCode, withDefaultChartCode } from './ChartCodeRender';
|
|
7
|
-
export type { CodeBlockComponent, WithChartCodeOptions } from './ChartCodeRender/type';
|
|
7
|
+
export type { CodeBlockComponent, ErrorRender, WithChartCodeOptions } from './ChartCodeRender/type';
|
|
8
8
|
export { default as ConfigProvider, type ConfigProviderProps } from './ConfigProvider';
|
|
9
9
|
export { default as GPTVis, type GPTVisProps } from './GPTVis';
|
|
10
10
|
export { default as GPTVisLite, useEventPublish, type GPTVisLiteProps } from './GPTVis/Lite';
|
|
@@ -26,14 +26,14 @@ declare const formatMakerStyle: (data: MarkerData[], markerStyle?: Partial<Marke
|
|
|
26
26
|
padding: number;
|
|
27
27
|
};
|
|
28
28
|
id: string;
|
|
29
|
-
iconPath: string;
|
|
30
29
|
width: number;
|
|
31
30
|
height?: number | undefined;
|
|
32
31
|
alpha?: number | undefined;
|
|
32
|
+
latitude: number;
|
|
33
|
+
longitude: number;
|
|
34
|
+
iconPath: string;
|
|
33
35
|
anchorX: number;
|
|
34
36
|
anchorY: number;
|
|
35
|
-
longitude: number;
|
|
36
|
-
latitude: number;
|
|
37
37
|
}[];
|
|
38
38
|
declare const DefaultPolylineStyle: {
|
|
39
39
|
width: number;
|
package/dist/cjs/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "0.
|
|
1
|
+
declare const _default: "0.5.0";
|
|
2
2
|
export default _default;
|
package/dist/cjs/version.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ChartComponents } from './type';
|
|
2
|
+
import type { ChartComponents, ComponentErrorRender, ErrorRender } from './type';
|
|
3
3
|
type RenderVisChartProps = {
|
|
4
4
|
content: string;
|
|
5
5
|
components: ChartComponents;
|
|
6
6
|
debug?: boolean;
|
|
7
7
|
loadingTimeout: number;
|
|
8
8
|
style?: React.CSSProperties;
|
|
9
|
+
componentErrorRender?: (errorInfo: ComponentErrorRender) => React.ReactElement;
|
|
10
|
+
errorRender?: (errorInfo: ErrorRender) => React.ReactElement;
|
|
9
11
|
};
|
|
10
12
|
export declare const RenderVisChart: React.FC<RenderVisChartProps>;
|
|
11
13
|
export {};
|