@antv/gpt-vis 0.5.6 → 0.5.7
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/dist/cjs/Bar/index.d.ts +4 -1
- package/dist/cjs/Bar/index.js +7 -2
- package/dist/cjs/Boxplot/index.d.ts +13 -0
- package/dist/cjs/Boxplot/index.js +88 -0
- package/dist/cjs/Column/index.d.ts +4 -1
- package/dist/cjs/Column/index.js +8 -2
- package/dist/cjs/Funnel/index.d.ts +12 -0
- package/dist/cjs/Funnel/index.js +173 -0
- package/dist/cjs/Liquid/index.d.ts +11 -0
- package/dist/cjs/Liquid/index.js +85 -0
- package/dist/cjs/Sankey/index.d.ts +12 -0
- package/dist/cjs/Sankey/index.js +106 -0
- package/dist/cjs/Scatter/index.js +7 -4
- package/dist/cjs/Treemap/index.js +1 -0
- package/dist/cjs/Venn/index.d.ts +32 -0
- package/dist/cjs/Venn/index.js +87 -0
- package/dist/cjs/Violin/index.d.ts +10 -0
- package/dist/cjs/Violin/index.js +185 -0
- package/dist/cjs/export.d.ts +7 -1
- package/dist/cjs/export.js +38 -8
- package/dist/cjs/types/chart.d.ts +6 -0
- package/dist/cjs/types/chart.js +6 -0
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/Bar/index.d.ts +4 -1
- package/dist/esm/Bar/index.js +12 -2
- package/dist/esm/Boxplot/index.d.ts +13 -0
- package/dist/esm/Boxplot/index.js +83 -0
- package/dist/esm/Column/index.d.ts +4 -1
- package/dist/esm/Column/index.js +13 -2
- package/dist/esm/Funnel/index.d.ts +12 -0
- package/dist/esm/Funnel/index.js +171 -0
- package/dist/esm/Liquid/index.d.ts +11 -0
- package/dist/esm/Liquid/index.js +100 -0
- package/dist/esm/Sankey/index.d.ts +12 -0
- package/dist/esm/Sankey/index.js +88 -0
- package/dist/esm/Scatter/index.js +12 -7
- package/dist/esm/Treemap/index.js +1 -0
- package/dist/esm/Venn/index.d.ts +32 -0
- package/dist/esm/Venn/index.js +69 -0
- package/dist/esm/Violin/index.d.ts +10 -0
- package/dist/esm/Violin/index.js +192 -0
- package/dist/esm/export.d.ts +7 -1
- package/dist/esm/export.js +8 -2
- package/dist/esm/types/chart.d.ts +6 -0
- package/dist/esm/types/chart.js +6 -0
- package/dist/esm/version.d.ts +1 -1
- package/dist/esm/version.js +1 -1
- package/dist/umd/373.async.js +1 -0
- package/dist/umd/index.min.js +1 -1
- package/package.json +1 -1
- package/dist/umd/962.async.js +0 -1
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import { Chart } from '@antv/g2';
|
|
8
|
+
import React, { useEffect, useRef } from 'react';
|
|
9
|
+
import { THEME_MAP } from "../theme";
|
|
10
|
+
var defaultConfig = function defaultConfig(props) {
|
|
11
|
+
var data = props.data,
|
|
12
|
+
title = props.title,
|
|
13
|
+
_props$theme = props.theme,
|
|
14
|
+
theme = _props$theme === void 0 ? 'default' : _props$theme,
|
|
15
|
+
_props$style = props.style,
|
|
16
|
+
style = _props$style === void 0 ? {} : _props$style;
|
|
17
|
+
var backgroundColor = style.backgroundColor,
|
|
18
|
+
_style$palette = style.palette,
|
|
19
|
+
palette = _style$palette === void 0 ? [] : _style$palette;
|
|
20
|
+
var r = function r(start, end) {
|
|
21
|
+
return "".concat((end / start * 100).toFixed(2), " %");
|
|
22
|
+
};
|
|
23
|
+
return {
|
|
24
|
+
type: 'view',
|
|
25
|
+
data: data,
|
|
26
|
+
theme: THEME_MAP[theme],
|
|
27
|
+
title: title,
|
|
28
|
+
padding: 40,
|
|
29
|
+
insetRight: 28,
|
|
30
|
+
children: [_objectSpread({
|
|
31
|
+
type: 'interval',
|
|
32
|
+
data: data,
|
|
33
|
+
encode: {
|
|
34
|
+
x: 'category',
|
|
35
|
+
y: 'value',
|
|
36
|
+
color: 'category',
|
|
37
|
+
shape: 'funnel'
|
|
38
|
+
},
|
|
39
|
+
transform: [{
|
|
40
|
+
type: 'symmetryY'
|
|
41
|
+
}],
|
|
42
|
+
scale: _objectSpread({
|
|
43
|
+
x: {
|
|
44
|
+
padding: 0
|
|
45
|
+
}
|
|
46
|
+
}, palette !== null && palette !== void 0 && palette[0] ? {
|
|
47
|
+
color: {
|
|
48
|
+
range: palette
|
|
49
|
+
}
|
|
50
|
+
} : {}),
|
|
51
|
+
coordinate: {
|
|
52
|
+
transform: [{
|
|
53
|
+
type: 'transpose'
|
|
54
|
+
}]
|
|
55
|
+
},
|
|
56
|
+
legend: {
|
|
57
|
+
color: {
|
|
58
|
+
position: 'top',
|
|
59
|
+
layout: {
|
|
60
|
+
justifyContent: 'center'
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
labels: [{
|
|
65
|
+
text: function text(d) {
|
|
66
|
+
return "".concat(d.category, "\n").concat(d.value);
|
|
67
|
+
},
|
|
68
|
+
position: 'inside',
|
|
69
|
+
transform: [{
|
|
70
|
+
type: 'contrastReverse'
|
|
71
|
+
}]
|
|
72
|
+
}, {
|
|
73
|
+
text: function text(d, i) {
|
|
74
|
+
return i !== 0 ? '———' : '';
|
|
75
|
+
},
|
|
76
|
+
style: {
|
|
77
|
+
'font-size': '1px',
|
|
78
|
+
color: '#666',
|
|
79
|
+
'letter-spacing': '0px'
|
|
80
|
+
},
|
|
81
|
+
position: 'top-right',
|
|
82
|
+
fill: '#666',
|
|
83
|
+
dx: 35,
|
|
84
|
+
dy: -8
|
|
85
|
+
}, {
|
|
86
|
+
text: function text(d, i) {
|
|
87
|
+
return i !== 0 ? '转化率' : '';
|
|
88
|
+
},
|
|
89
|
+
position: 'top-right',
|
|
90
|
+
textAlign: 'left',
|
|
91
|
+
textBaseline: 'middle',
|
|
92
|
+
fill: '#666',
|
|
93
|
+
dx: 40
|
|
94
|
+
}, {
|
|
95
|
+
text: function text(d, i, data) {
|
|
96
|
+
return i !== 0 ? r(data[i - 1].value, data[i].value) : '';
|
|
97
|
+
},
|
|
98
|
+
position: 'top-right',
|
|
99
|
+
textAlign: 'left',
|
|
100
|
+
textBaseline: 'middle',
|
|
101
|
+
dx: 80
|
|
102
|
+
}]
|
|
103
|
+
}, backgroundColor ? {
|
|
104
|
+
viewStyle: {
|
|
105
|
+
viewFill: backgroundColor
|
|
106
|
+
}
|
|
107
|
+
} : {}), {
|
|
108
|
+
type: 'connector',
|
|
109
|
+
data: [{
|
|
110
|
+
startX: data[0].category,
|
|
111
|
+
startY: data[data.length - 1].category,
|
|
112
|
+
endX: 0,
|
|
113
|
+
endY: (data[0].value - data[data.length - 1].value) / 2
|
|
114
|
+
}],
|
|
115
|
+
encode: {
|
|
116
|
+
x: 'startX',
|
|
117
|
+
x1: 'startY',
|
|
118
|
+
y: 'endX',
|
|
119
|
+
y1: 'endY'
|
|
120
|
+
},
|
|
121
|
+
style: {
|
|
122
|
+
stroke: '#666',
|
|
123
|
+
markerEnd: false,
|
|
124
|
+
connectLength1: -12,
|
|
125
|
+
offset2: -20,
|
|
126
|
+
connectorStroke: '#0649f2',
|
|
127
|
+
lineDash: [12, 2]
|
|
128
|
+
},
|
|
129
|
+
labels: [{
|
|
130
|
+
text: '转化率',
|
|
131
|
+
position: 'left',
|
|
132
|
+
textAlign: 'start',
|
|
133
|
+
textBaseline: 'middle',
|
|
134
|
+
fill: '#666',
|
|
135
|
+
dx: 10
|
|
136
|
+
}, {
|
|
137
|
+
text: r(data[0].value, data[data.length - 1].value),
|
|
138
|
+
position: 'left',
|
|
139
|
+
textAlign: 'start',
|
|
140
|
+
dx: 50,
|
|
141
|
+
fill: '#000'
|
|
142
|
+
}]
|
|
143
|
+
}],
|
|
144
|
+
axis: false,
|
|
145
|
+
animate: false
|
|
146
|
+
};
|
|
147
|
+
};
|
|
148
|
+
var Funnel = function Funnel(props) {
|
|
149
|
+
var containerRef = useRef(null);
|
|
150
|
+
var chartRef = useRef(null);
|
|
151
|
+
useEffect(function () {
|
|
152
|
+
if (!containerRef.current) return;
|
|
153
|
+
var chart = new Chart({
|
|
154
|
+
container: containerRef.current,
|
|
155
|
+
autoFit: true,
|
|
156
|
+
padding: 'auto'
|
|
157
|
+
});
|
|
158
|
+
var config = defaultConfig(props);
|
|
159
|
+
chart.options(config);
|
|
160
|
+
chart.render();
|
|
161
|
+
chartRef.current = chart;
|
|
162
|
+
return function () {
|
|
163
|
+
chart.destroy();
|
|
164
|
+
chartRef.current = null;
|
|
165
|
+
};
|
|
166
|
+
}, [props]);
|
|
167
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
168
|
+
ref: containerRef
|
|
169
|
+
});
|
|
170
|
+
};
|
|
171
|
+
export default Funnel;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Style, Theme } from '../types';
|
|
3
|
+
export type LiquidProps = Theme & Style & {
|
|
4
|
+
percent: number;
|
|
5
|
+
shape?: 'rect' | 'circle' | 'pin' | 'triangle';
|
|
6
|
+
title?: string;
|
|
7
|
+
width?: number;
|
|
8
|
+
height?: number;
|
|
9
|
+
};
|
|
10
|
+
declare const Liquid: (props: LiquidProps) => React.JSX.Element;
|
|
11
|
+
export default Liquid;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
3
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
5
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
6
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
7
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
12
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
13
|
+
import { Liquid as ADCLiquid } from '@ant-design/plots';
|
|
14
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
15
|
+
import { usePlotConfig } from "../ConfigProvider/hooks";
|
|
16
|
+
import { THEME_MAP } from "../theme";
|
|
17
|
+
var defaultConfig = function defaultConfig(props) {
|
|
18
|
+
var percent = props.percent,
|
|
19
|
+
_props$shape = props.shape,
|
|
20
|
+
shape = _props$shape === void 0 ? 'circle' : _props$shape,
|
|
21
|
+
_props$style = props.style,
|
|
22
|
+
style = _props$style === void 0 ? {} : _props$style,
|
|
23
|
+
_props$width = props.width,
|
|
24
|
+
width = _props$width === void 0 ? 600 : _props$width,
|
|
25
|
+
_props$height = props.height,
|
|
26
|
+
height = _props$height === void 0 ? 400 : _props$height;
|
|
27
|
+
var backgroundColor = style.backgroundColor,
|
|
28
|
+
palette = style.palette;
|
|
29
|
+
var inferFontSize = Math.min(width, height) / 10;
|
|
30
|
+
var fontSize = Math.min(Math.max(inferFontSize, 24), 64);
|
|
31
|
+
var hasPalette = !!(palette !== null && palette !== void 0 && palette[0]);
|
|
32
|
+
var paletteConfig = {
|
|
33
|
+
fill: undefined,
|
|
34
|
+
outlineStroke: undefined
|
|
35
|
+
};
|
|
36
|
+
if (hasPalette) {
|
|
37
|
+
paletteConfig = {
|
|
38
|
+
fill: palette[0],
|
|
39
|
+
outlineStroke: palette[0]
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
return _objectSpread(_objectSpread({
|
|
43
|
+
percent: percent,
|
|
44
|
+
style: _objectSpread({
|
|
45
|
+
shape: shape,
|
|
46
|
+
contentFontSize: fontSize,
|
|
47
|
+
contentFill: '#000',
|
|
48
|
+
contentStroke: '#fff',
|
|
49
|
+
contentLineWidth: 2,
|
|
50
|
+
outlineBorder: 4,
|
|
51
|
+
outlineDistance: 4,
|
|
52
|
+
waveLength: 128
|
|
53
|
+
}, paletteConfig)
|
|
54
|
+
}, backgroundColor ? {
|
|
55
|
+
viewStyle: {
|
|
56
|
+
viewFill: backgroundColor
|
|
57
|
+
}
|
|
58
|
+
} : {}), {}, {
|
|
59
|
+
interaction: {
|
|
60
|
+
tooltip: false
|
|
61
|
+
},
|
|
62
|
+
animate: false
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
var Liquid = function Liquid(props) {
|
|
66
|
+
var _props$theme;
|
|
67
|
+
var themeConfig = THEME_MAP[(_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : 'default'];
|
|
68
|
+
var containerRef = useRef(null);
|
|
69
|
+
var _useState = useState({
|
|
70
|
+
width: 0,
|
|
71
|
+
height: 0
|
|
72
|
+
}),
|
|
73
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
74
|
+
size = _useState2[0],
|
|
75
|
+
setSize = _useState2[1];
|
|
76
|
+
var config = usePlotConfig('Liquid', defaultConfig, _objectSpread(_objectSpread({}, props), {}, {
|
|
77
|
+
theme: themeConfig,
|
|
78
|
+
width: size.width,
|
|
79
|
+
height: size.height
|
|
80
|
+
}));
|
|
81
|
+
useEffect(function () {
|
|
82
|
+
if (containerRef.current) {
|
|
83
|
+
var _containerRef$current = containerRef.current,
|
|
84
|
+
offsetWidth = _containerRef$current.offsetWidth,
|
|
85
|
+
offsetHeight = _containerRef$current.offsetHeight;
|
|
86
|
+
setSize({
|
|
87
|
+
width: offsetWidth,
|
|
88
|
+
height: offsetHeight
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
}, []);
|
|
92
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
93
|
+
ref: containerRef,
|
|
94
|
+
style: {
|
|
95
|
+
width: '100%',
|
|
96
|
+
height: '100%'
|
|
97
|
+
}
|
|
98
|
+
}, /*#__PURE__*/React.createElement(ADCLiquid, config));
|
|
99
|
+
};
|
|
100
|
+
export default Liquid;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { BasePlotProps, Style, Theme } from '../types';
|
|
3
|
+
type SankeyDatum = {
|
|
4
|
+
source: string;
|
|
5
|
+
target: string;
|
|
6
|
+
value: number;
|
|
7
|
+
};
|
|
8
|
+
export type SankeyProps = BasePlotProps<SankeyDatum> & Theme & Style & {
|
|
9
|
+
nodeAlign?: 'left' | 'center' | 'right' | 'justify';
|
|
10
|
+
};
|
|
11
|
+
declare const Sankey: (props: SankeyProps) => React.JSX.Element;
|
|
12
|
+
export default Sankey;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import { Chart } from '@antv/g2';
|
|
8
|
+
import React, { useEffect, useRef } from 'react';
|
|
9
|
+
import { THEME_MAP } from "../theme";
|
|
10
|
+
var defaultConfig = function defaultConfig(props) {
|
|
11
|
+
var title = props.title,
|
|
12
|
+
data = props.data,
|
|
13
|
+
_props$theme = props.theme,
|
|
14
|
+
theme = _props$theme === void 0 ? 'default' : _props$theme,
|
|
15
|
+
_props$nodeAlign = props.nodeAlign,
|
|
16
|
+
nodeAlign = _props$nodeAlign === void 0 ? 'center' : _props$nodeAlign,
|
|
17
|
+
_props$style = props.style,
|
|
18
|
+
style = _props$style === void 0 ? {} : _props$style;
|
|
19
|
+
var backgroundColor = style.backgroundColor,
|
|
20
|
+
palette = style.palette;
|
|
21
|
+
var hasPalette = !!(palette !== null && palette !== void 0 && palette[0]);
|
|
22
|
+
var paletteConfig = {};
|
|
23
|
+
if (hasPalette) {
|
|
24
|
+
paletteConfig = {
|
|
25
|
+
color: {
|
|
26
|
+
range: palette
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
return _objectSpread({
|
|
31
|
+
title: title,
|
|
32
|
+
type: 'sankey',
|
|
33
|
+
theme: THEME_MAP[theme],
|
|
34
|
+
layout: {
|
|
35
|
+
nodeAlign: nodeAlign,
|
|
36
|
+
nodePadding: 0.01
|
|
37
|
+
},
|
|
38
|
+
data: {
|
|
39
|
+
type: 'inline',
|
|
40
|
+
value: data,
|
|
41
|
+
transform: [{
|
|
42
|
+
type: 'custom',
|
|
43
|
+
callback: function callback(data) {
|
|
44
|
+
return {
|
|
45
|
+
links: data
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
}]
|
|
49
|
+
},
|
|
50
|
+
scale: _objectSpread({}, paletteConfig),
|
|
51
|
+
style: {
|
|
52
|
+
labelSpacing: 2,
|
|
53
|
+
nodeLineWidth: 1,
|
|
54
|
+
linkFillOpacity: 0.3
|
|
55
|
+
},
|
|
56
|
+
viewStyle: {
|
|
57
|
+
viewFill: 'red'
|
|
58
|
+
}
|
|
59
|
+
}, backgroundColor ? {
|
|
60
|
+
viewStyle: {
|
|
61
|
+
viewFill: backgroundColor
|
|
62
|
+
}
|
|
63
|
+
} : {});
|
|
64
|
+
};
|
|
65
|
+
var Sankey = function Sankey(props) {
|
|
66
|
+
var containerRef = useRef(null);
|
|
67
|
+
var chartRef = useRef(null);
|
|
68
|
+
useEffect(function () {
|
|
69
|
+
if (!containerRef.current) return;
|
|
70
|
+
var chart = new Chart({
|
|
71
|
+
container: containerRef.current,
|
|
72
|
+
autoFit: true,
|
|
73
|
+
padding: 'auto'
|
|
74
|
+
});
|
|
75
|
+
var config = defaultConfig(props);
|
|
76
|
+
chart.options(config);
|
|
77
|
+
chart.render();
|
|
78
|
+
chartRef.current = chart;
|
|
79
|
+
return function () {
|
|
80
|
+
chart.destroy();
|
|
81
|
+
chartRef.current = null;
|
|
82
|
+
};
|
|
83
|
+
}, [props]);
|
|
84
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
85
|
+
ref: containerRef
|
|
86
|
+
});
|
|
87
|
+
};
|
|
88
|
+
export default Sankey;
|
|
@@ -54,13 +54,18 @@ var defaultConfig = function defaultConfig(props) {
|
|
|
54
54
|
data: data,
|
|
55
55
|
xField: xField,
|
|
56
56
|
yField: yField,
|
|
57
|
-
tooltip:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
tooltip: {
|
|
58
|
+
title: function title(d) {
|
|
59
|
+
return d !== null && d !== void 0 && d.group ? d.group : false;
|
|
60
|
+
},
|
|
61
|
+
items: [{
|
|
62
|
+
channel: 'x',
|
|
63
|
+
name: axisXTitle || 'x'
|
|
64
|
+
}, {
|
|
65
|
+
channel: 'y',
|
|
66
|
+
name: axisYTitle || 'y'
|
|
67
|
+
}]
|
|
68
|
+
},
|
|
64
69
|
legend: hasGroupField ? {} : false,
|
|
65
70
|
encode: encode,
|
|
66
71
|
scale: _objectSpread({
|
|
@@ -80,6 +80,7 @@ var Treemap = function Treemap(props) {
|
|
|
80
80
|
var transformData = useMemo(function () {
|
|
81
81
|
return transform(data);
|
|
82
82
|
}, [data]);
|
|
83
|
+
console.log('treemap config:', config, props);
|
|
83
84
|
return /*#__PURE__*/React.createElement(ADCTreemap, _extends({}, others, {
|
|
84
85
|
data: transformData
|
|
85
86
|
}));
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { BasePlotProps, Style, Theme } from '../types';
|
|
3
|
+
type VennDatum = {
|
|
4
|
+
/**
|
|
5
|
+
* Label for the venn chart segment.
|
|
6
|
+
* This should be a string that describes the segment.
|
|
7
|
+
* For example, "A", "B", or "A ∩ B" for intersections.
|
|
8
|
+
* It is used to identify the segment in the chart.
|
|
9
|
+
*/
|
|
10
|
+
label?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Value for the venn chart segment.
|
|
13
|
+
* This should be a number that represents the size or count of the segment.
|
|
14
|
+
* For example, if the segment represents a set of items, this could be the number of items in that set.
|
|
15
|
+
* It is used to determine the size of the segment in the chart.
|
|
16
|
+
* For intersections, this value should represent the count of items that belong to the intersection of sets.
|
|
17
|
+
* For example, if "A ∩ B" represents the intersection of sets A and B, this value should be the count of items that are in both sets.
|
|
18
|
+
*/
|
|
19
|
+
value: number;
|
|
20
|
+
/**
|
|
21
|
+
* Sets that the segment belongs to.
|
|
22
|
+
* This should be an array of strings representing the sets that the segment is part of.
|
|
23
|
+
* For example, if the segment represents items that belong to both set A and set B, this could be ['A', 'B'].
|
|
24
|
+
* It is used to determine how the segment is displayed in the venn chart.
|
|
25
|
+
* For intersections, this array should include the sets that contribute to the intersection.
|
|
26
|
+
* For example, if "A ∩ B" represents the intersection of sets A and B, this array should be ['A', 'B'].
|
|
27
|
+
*/
|
|
28
|
+
sets: string[] | number[];
|
|
29
|
+
};
|
|
30
|
+
export type VennProps = BasePlotProps<VennDatum> & Theme & Style;
|
|
31
|
+
declare const Venn: (props: VennProps) => React.JSX.Element;
|
|
32
|
+
export default Venn;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import { Venn as ADCVenn } from '@ant-design/plots';
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import { usePlotConfig } from "../ConfigProvider/hooks";
|
|
10
|
+
import { THEME_MAP } from "../theme";
|
|
11
|
+
var defaultConfig = function defaultConfig(props) {
|
|
12
|
+
var data = props.data,
|
|
13
|
+
_props$style = props.style,
|
|
14
|
+
style = _props$style === void 0 ? {} : _props$style;
|
|
15
|
+
var backgroundColor = style.backgroundColor,
|
|
16
|
+
palette = style.palette;
|
|
17
|
+
var paletteConfig = {
|
|
18
|
+
color: undefined
|
|
19
|
+
};
|
|
20
|
+
var hasPalette = !!(palette !== null && palette !== void 0 && palette[0]);
|
|
21
|
+
if (hasPalette) {
|
|
22
|
+
paletteConfig = {
|
|
23
|
+
color: {
|
|
24
|
+
range: palette
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
return _objectSpread(_objectSpread({
|
|
29
|
+
data: data,
|
|
30
|
+
sizeField: 'value'
|
|
31
|
+
}, backgroundColor ? {
|
|
32
|
+
viewStyle: {
|
|
33
|
+
viewFill: backgroundColor
|
|
34
|
+
}
|
|
35
|
+
} : {}), {}, {
|
|
36
|
+
labels: [{
|
|
37
|
+
position: 'inside',
|
|
38
|
+
text: function text(d) {
|
|
39
|
+
return d.label || '';
|
|
40
|
+
},
|
|
41
|
+
transform: [{
|
|
42
|
+
type: 'contrastReverse'
|
|
43
|
+
}],
|
|
44
|
+
fill: '#000',
|
|
45
|
+
fillOpacity: 0.85,
|
|
46
|
+
fontSize: 10
|
|
47
|
+
}],
|
|
48
|
+
scale: _objectSpread({}, paletteConfig),
|
|
49
|
+
tooltip: {
|
|
50
|
+
title: false,
|
|
51
|
+
items: [function (d) {
|
|
52
|
+
return {
|
|
53
|
+
name: d.key,
|
|
54
|
+
value: d.size
|
|
55
|
+
};
|
|
56
|
+
}]
|
|
57
|
+
},
|
|
58
|
+
legend: false
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
var Venn = function Venn(props) {
|
|
62
|
+
var _props$theme;
|
|
63
|
+
var themeConfig = THEME_MAP[(_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : 'default'];
|
|
64
|
+
var config = usePlotConfig('Venn', defaultConfig, _objectSpread(_objectSpread({}, props), {}, {
|
|
65
|
+
theme: themeConfig
|
|
66
|
+
}));
|
|
67
|
+
return /*#__PURE__*/React.createElement(ADCVenn, config);
|
|
68
|
+
};
|
|
69
|
+
export default Venn;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { BasePlotProps, Style, Theme } from '../types';
|
|
3
|
+
type ViolinDatum = {
|
|
4
|
+
category: string;
|
|
5
|
+
value: number;
|
|
6
|
+
group?: string;
|
|
7
|
+
};
|
|
8
|
+
export type ViolinProps = BasePlotProps<ViolinDatum> & Theme & Style;
|
|
9
|
+
declare const Violin: (props: ViolinProps) => React.JSX.Element;
|
|
10
|
+
export default Violin;
|