@nocobase/plugin-data-visualization 0.11.0-alpha.1 → 0.11.1-alpha.2
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/lib/client/block/ChartBlock.js +16 -15
- package/lib/client/block/ChartBlockInitializer.js +4 -4
- package/lib/client/block/ChartConfigure.d.ts +4 -5
- package/lib/client/block/ChartConfigure.js +109 -94
- package/lib/client/block/schemas/configure.js +7 -7
- package/lib/client/index.js +1 -1
- package/lib/client/locale/index.d.ts +2 -2
- package/lib/client/locale/index.js +3 -5
- package/lib/client/locale/zh-CN.d.ts +1 -0
- package/lib/client/locale/zh-CN.js +2 -1
- package/lib/client/renderer/ChartLibrary.d.ts +1 -0
- package/lib/client/renderer/ChartLibrary.js +8 -2
- package/lib/client/renderer/ChartRenderer.d.ts +1 -4
- package/lib/client/renderer/ChartRenderer.js +28 -103
- package/lib/client/renderer/ChartRendererProvider.d.ts +11 -1
- package/lib/client/renderer/ChartRendererProvider.js +62 -11
- package/lib/client/renderer/library/G2PlotLibrary.js +24 -25
- package/lib/server/actions/query.js +6 -1
- package/package.json +9 -9
- package/src/client/block/ChartBlock.tsx +5 -3
- package/src/client/block/ChartBlockInitializer.tsx +2 -3
- package/src/client/block/ChartConfigure.tsx +106 -85
- package/src/client/block/schemas/configure.ts +7 -7
- package/src/client/index.tsx +1 -1
- package/src/client/locale/index.ts +2 -3
- package/src/client/locale/zh-CN.ts +1 -0
- package/src/client/renderer/ChartLibrary.tsx +6 -1
- package/src/client/renderer/ChartRenderer.tsx +22 -90
- package/src/client/renderer/ChartRendererProvider.tsx +60 -7
- package/src/client/renderer/library/G2PlotLibrary.tsx +24 -25
- package/src/server/__tests__/api.test.ts +47 -50
- package/src/server/actions/query.ts +6 -1
|
@@ -18,9 +18,15 @@ function _react() {
|
|
|
18
18
|
};
|
|
19
19
|
return data;
|
|
20
20
|
}
|
|
21
|
+
var _renderer = require("../renderer");
|
|
21
22
|
var _ChartConfigure = require("./ChartConfigure");
|
|
22
23
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
26
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
27
|
+
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; }
|
|
28
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
29
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
24
30
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
25
31
|
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."); }
|
|
26
32
|
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); }
|
|
@@ -28,6 +34,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
28
34
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
29
35
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
30
36
|
const ChartV2Block = props => {
|
|
37
|
+
var _current$field;
|
|
31
38
|
const _useDesignable = (0, _client().useDesignable)(),
|
|
32
39
|
insertAdjacent = _useDesignable.insertAdjacent;
|
|
33
40
|
const _useState = (0, _react().useState)(false),
|
|
@@ -38,18 +45,14 @@ const ChartV2Block = props => {
|
|
|
38
45
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
39
46
|
current = _useState4[0],
|
|
40
47
|
setCurrent = _useState4[1];
|
|
41
|
-
const _useState5 = (0, _react().useState)(
|
|
48
|
+
const _useState5 = (0, _react().useState)(false),
|
|
42
49
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
const _useState7 = (0, _react().useState)(
|
|
50
|
+
initialVisible = _useState6[0],
|
|
51
|
+
setInitialVisible = _useState6[1];
|
|
52
|
+
const _useState7 = (0, _react().useState)(''),
|
|
46
53
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const _useState9 = (0, _react().useState)(''),
|
|
50
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
51
|
-
searchValue = _useState10[0],
|
|
52
|
-
setSearchValue = _useState10[1];
|
|
54
|
+
searchValue = _useState8[0],
|
|
55
|
+
setSearchValue = _useState8[1];
|
|
53
56
|
return _react().default.createElement(_client().SchemaInitializerButtonContext.Provider, {
|
|
54
57
|
value: {
|
|
55
58
|
visible: initialVisible,
|
|
@@ -62,12 +65,10 @@ const ChartV2Block = props => {
|
|
|
62
65
|
visible,
|
|
63
66
|
setVisible,
|
|
64
67
|
current,
|
|
65
|
-
setCurrent
|
|
66
|
-
data,
|
|
67
|
-
setData
|
|
68
|
+
setCurrent
|
|
68
69
|
}
|
|
69
|
-
}, props.children, _react().default.createElement(_ChartConfigure.ChartConfigure, {
|
|
70
|
+
}, props.children, _react().default.createElement(_renderer.ChartRendererProvider, _objectSpread({}, (_current$field = current.field) === null || _current$field === void 0 ? void 0 : _current$field.decoratorProps), _react().default.createElement(_ChartConfigure.ChartConfigure, {
|
|
70
71
|
insert: (schema, options) => insertAdjacent('beforeEnd', schema, options)
|
|
71
|
-
})));
|
|
72
|
+
}))));
|
|
72
73
|
};
|
|
73
74
|
exports.ChartV2Block = ChartV2Block;
|
|
@@ -45,17 +45,17 @@ const itemWrap = _client().SchemaInitializer.itemWrap;
|
|
|
45
45
|
const ConfigureButton = itemWrap(props => {
|
|
46
46
|
const _useContext = (0, _react().useContext)(_ChartConfigure.ChartConfigContext),
|
|
47
47
|
setVisible = _useContext.setVisible,
|
|
48
|
-
setCurrent = _useContext.setCurrent
|
|
49
|
-
setData = _useContext.setData;
|
|
48
|
+
setCurrent = _useContext.setCurrent;
|
|
50
49
|
return _react().default.createElement(_client().SchemaInitializer.Item, _objectSpread(_objectSpread({}, props), {}, {
|
|
51
50
|
onClick: () => {
|
|
52
51
|
var _props$item;
|
|
53
52
|
setCurrent({
|
|
54
53
|
schema: {},
|
|
55
54
|
field: null,
|
|
56
|
-
collection: (_props$item = props.item) === null || _props$item === void 0 ? void 0 : _props$item.name
|
|
55
|
+
collection: (_props$item = props.item) === null || _props$item === void 0 ? void 0 : _props$item.name,
|
|
56
|
+
service: null,
|
|
57
|
+
data: undefined
|
|
57
58
|
});
|
|
58
|
-
setData([]);
|
|
59
59
|
setVisible(true);
|
|
60
60
|
}
|
|
61
61
|
}));
|
|
@@ -4,6 +4,9 @@ export type ChartConfigCurrent = {
|
|
|
4
4
|
schema: ISchema;
|
|
5
5
|
field: any;
|
|
6
6
|
collection: string;
|
|
7
|
+
service: any;
|
|
8
|
+
initialValues?: any;
|
|
9
|
+
data: any[];
|
|
7
10
|
};
|
|
8
11
|
export type SelectedField = {
|
|
9
12
|
field: string | string[];
|
|
@@ -14,8 +17,6 @@ export declare const ChartConfigContext: React.Context<{
|
|
|
14
17
|
setVisible?: (visible: boolean) => void;
|
|
15
18
|
current?: ChartConfigCurrent;
|
|
16
19
|
setCurrent?: (current: ChartConfigCurrent) => void;
|
|
17
|
-
data?: any[] | string;
|
|
18
|
-
setData?: (data: any[] | string) => void;
|
|
19
20
|
}>;
|
|
20
21
|
export declare const ChartConfigure: React.FC<{
|
|
21
22
|
insert: (s: ISchema, options: {
|
|
@@ -23,9 +24,7 @@ export declare const ChartConfigure: React.FC<{
|
|
|
23
24
|
wrap?: (schema: ISchema) => ISchema;
|
|
24
25
|
}) => void;
|
|
25
26
|
}> & {
|
|
26
|
-
Renderer: React.FC
|
|
27
|
-
runQuery?: any;
|
|
28
|
-
}>;
|
|
27
|
+
Renderer: React.FC;
|
|
29
28
|
Config: React.FC;
|
|
30
29
|
Query: React.FC;
|
|
31
30
|
Transform: React.FC;
|
|
@@ -60,13 +60,6 @@ function _react2() {
|
|
|
60
60
|
};
|
|
61
61
|
return data;
|
|
62
62
|
}
|
|
63
|
-
function _reactI18next() {
|
|
64
|
-
const data = require("react-i18next");
|
|
65
|
-
_reactI18next = function _reactI18next() {
|
|
66
|
-
return data;
|
|
67
|
-
};
|
|
68
|
-
return data;
|
|
69
|
-
}
|
|
70
63
|
var _hooks = require("../hooks");
|
|
71
64
|
var _locale = require("../locale");
|
|
72
65
|
var _renderer = require("../renderer");
|
|
@@ -96,16 +89,21 @@ exports.ChartConfigContext = ChartConfigContext;
|
|
|
96
89
|
const ChartConfigure = props => {
|
|
97
90
|
const _useChartsTranslation = (0, _locale.useChartsTranslation)(),
|
|
98
91
|
t = _useChartsTranslation.t;
|
|
99
|
-
const _useContext = (0, _react2().useContext)(
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
92
|
+
const _useContext = (0, _react2().useContext)(_renderer.ChartRendererContext),
|
|
93
|
+
service = _useContext.service;
|
|
94
|
+
const _useContext2 = (0, _react2().useContext)(ChartConfigContext),
|
|
95
|
+
visible = _useContext2.visible,
|
|
96
|
+
setVisible = _useContext2.setVisible,
|
|
97
|
+
current = _useContext2.current;
|
|
103
98
|
const _ref = current || {},
|
|
104
99
|
schema = _ref.schema,
|
|
105
100
|
field = _ref.field,
|
|
106
|
-
collection = _ref.collection
|
|
101
|
+
collection = _ref.collection,
|
|
102
|
+
initialValues = _ref.initialValues;
|
|
107
103
|
const _useDesignable = (0, _client().useDesignable)(),
|
|
108
104
|
dn = _useDesignable.dn;
|
|
105
|
+
const _App$useApp = _antd().App.useApp(),
|
|
106
|
+
modal = _App$useApp.modal;
|
|
109
107
|
const insert = props.insert;
|
|
110
108
|
const charts = (0, _renderer.useCharts)();
|
|
111
109
|
const fields = (0, _hooks.useFieldsWithAssociation)(collection);
|
|
@@ -158,62 +156,52 @@ const ChartConfigure = props => {
|
|
|
158
156
|
setMeasures((0, _lodash().cloneDeep)(currentMeasures));
|
|
159
157
|
setDimensions((0, _lodash().cloneDeep)(currentDimensions));
|
|
160
158
|
};
|
|
161
|
-
const
|
|
159
|
+
const chartType = (0, _renderer.useDefaultChartType)();
|
|
162
160
|
const form = (0, _react2().useMemo)(() => {
|
|
163
|
-
var _chartTypes$, _chartTypes$$children, _chartTypes$$children2;
|
|
164
|
-
const chartType = (_chartTypes$ = chartTypes[0]) === null || _chartTypes$ === void 0 ? void 0 : (_chartTypes$$children = _chartTypes$.children) === null || _chartTypes$$children === void 0 ? void 0 : (_chartTypes$$children2 = _chartTypes$$children[0]) === null || _chartTypes$$children2 === void 0 ? void 0 : _chartTypes$$children2.value;
|
|
165
161
|
return (0, _core().createForm)({
|
|
166
162
|
values: _objectSpread(_objectSpread({
|
|
167
163
|
config: {
|
|
168
164
|
chartType
|
|
169
165
|
}
|
|
170
|
-
},
|
|
171
|
-
collection
|
|
172
|
-
data: ''
|
|
166
|
+
}, initialValues || (field === null || field === void 0 ? void 0 : field.decoratorProps)), {}, {
|
|
167
|
+
collection
|
|
173
168
|
}),
|
|
174
169
|
effects: form => {
|
|
175
170
|
(0, _core().onFieldChange)('config.chartType', () => initChart(true));
|
|
176
|
-
(0, _core().onFormInit)(() =>
|
|
171
|
+
(0, _core().onFormInit)(() => {
|
|
172
|
+
queryReact(form);
|
|
173
|
+
});
|
|
177
174
|
}
|
|
178
175
|
});
|
|
179
176
|
},
|
|
180
177
|
// visible, collection added here to re-initialize form when visible, collection change
|
|
181
178
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
182
|
-
[
|
|
183
|
-
const
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
var _onClick = _asyncToGenerator(function* () {
|
|
195
|
-
const queryField = form.query('query').take();
|
|
196
|
-
try {
|
|
197
|
-
yield queryField === null || queryField === void 0 ? void 0 : queryField.validate();
|
|
198
|
-
} catch (e) {
|
|
199
|
-
return;
|
|
200
|
-
}
|
|
201
|
-
setLoading(true);
|
|
202
|
-
try {
|
|
203
|
-
yield runQuery === null || runQuery === void 0 ? void 0 : runQuery.current(form.values.query);
|
|
204
|
-
} catch (e) {
|
|
205
|
-
console.log(e);
|
|
206
|
-
}
|
|
207
|
-
queryReact(form, initChart);
|
|
208
|
-
setLoading(false);
|
|
209
|
-
});
|
|
210
|
-
function onClick() {
|
|
211
|
-
return _onClick.apply(this, arguments);
|
|
179
|
+
[field, visible, collection]);
|
|
180
|
+
const RunButton = () => _react2().default.createElement(_antd().Button, {
|
|
181
|
+
type: "link",
|
|
182
|
+
loading: service === null || service === void 0 ? void 0 : service.loading,
|
|
183
|
+
icon: _react2().default.createElement(_icons().RightSquareOutlined, null),
|
|
184
|
+
onClick: function () {
|
|
185
|
+
var _onClick = _asyncToGenerator(function* () {
|
|
186
|
+
const queryField = form.query('query').take();
|
|
187
|
+
try {
|
|
188
|
+
yield queryField === null || queryField === void 0 ? void 0 : queryField.validate();
|
|
189
|
+
} catch (e) {
|
|
190
|
+
return;
|
|
212
191
|
}
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
192
|
+
try {
|
|
193
|
+
yield service.runAsync(collection, form.values.query);
|
|
194
|
+
} catch (e) {
|
|
195
|
+
console.log(e);
|
|
196
|
+
}
|
|
197
|
+
queryReact(form, initChart);
|
|
198
|
+
});
|
|
199
|
+
function onClick() {
|
|
200
|
+
return _onClick.apply(this, arguments);
|
|
201
|
+
}
|
|
202
|
+
return onClick;
|
|
203
|
+
}()
|
|
204
|
+
}, t('Run query'));
|
|
217
205
|
const queryRef = (0, _react2().useRef)(null);
|
|
218
206
|
const configRef = (0, _react2().useRef)(null);
|
|
219
207
|
return _react2().default.createElement(_antd().Modal, {
|
|
@@ -225,6 +213,14 @@ const ChartConfigure = props => {
|
|
|
225
213
|
config = _form$values.config,
|
|
226
214
|
transform = _form$values.transform,
|
|
227
215
|
mode = _form$values.mode;
|
|
216
|
+
const afterSave = () => {
|
|
217
|
+
var _current$service;
|
|
218
|
+
setVisible(false);
|
|
219
|
+
(_current$service = current.service) === null || _current$service === void 0 ? void 0 : _current$service.run(collection, query);
|
|
220
|
+
queryRef.current.scrollTop = 0;
|
|
221
|
+
configRef.current.scrollTop = 0;
|
|
222
|
+
service.mutate(undefined);
|
|
223
|
+
};
|
|
228
224
|
const rendererProps = {
|
|
229
225
|
query,
|
|
230
226
|
config,
|
|
@@ -239,18 +235,16 @@ const ChartConfigure = props => {
|
|
|
239
235
|
dn.emit('patch', {
|
|
240
236
|
schema
|
|
241
237
|
});
|
|
242
|
-
|
|
243
|
-
queryRef.current.scrollTop = 0;
|
|
244
|
-
configRef.current.scrollTop = 0;
|
|
238
|
+
afterSave();
|
|
245
239
|
return;
|
|
246
240
|
}
|
|
247
241
|
insert((0, _utils.createRendererSchema)(rendererProps), {
|
|
248
|
-
onSuccess:
|
|
242
|
+
onSuccess: afterSave,
|
|
249
243
|
wrap: _client().gridRowColWrap
|
|
250
244
|
});
|
|
251
245
|
},
|
|
252
246
|
onCancel: () => {
|
|
253
|
-
|
|
247
|
+
modal.confirm({
|
|
254
248
|
title: t('Are you sure to cancel?'),
|
|
255
249
|
content: t('You changes are not saved. If you click OK, your changes will be lost.'),
|
|
256
250
|
okButtonProps: {
|
|
@@ -260,6 +254,7 @@ const ChartConfigure = props => {
|
|
|
260
254
|
setVisible(false);
|
|
261
255
|
queryRef.current.scrollTop = 0;
|
|
262
256
|
configRef.current.scrollTop = 0;
|
|
257
|
+
service.mutate(undefined);
|
|
263
258
|
}
|
|
264
259
|
});
|
|
265
260
|
},
|
|
@@ -277,7 +272,8 @@ const ChartConfigure = props => {
|
|
|
277
272
|
}, _react2().default.createElement(_antd().Card, {
|
|
278
273
|
style: {
|
|
279
274
|
height: 'calc(100vh - 300px)',
|
|
280
|
-
overflow: '
|
|
275
|
+
overflow: 'auto',
|
|
276
|
+
margin: '12px 0 12px 12px'
|
|
281
277
|
},
|
|
282
278
|
ref: queryRef
|
|
283
279
|
}, _react2().default.createElement(_antd().Tabs, {
|
|
@@ -296,7 +292,8 @@ const ChartConfigure = props => {
|
|
|
296
292
|
}, _react2().default.createElement(_antd().Card, {
|
|
297
293
|
style: {
|
|
298
294
|
height: 'calc(100vh - 300px)',
|
|
299
|
-
overflow: '
|
|
295
|
+
overflow: 'auto',
|
|
296
|
+
margin: '12px 3px 12px 3px'
|
|
300
297
|
},
|
|
301
298
|
ref: configRef
|
|
302
299
|
}, _react2().default.createElement(_antd().Tabs, {
|
|
@@ -311,65 +308,69 @@ const ChartConfigure = props => {
|
|
|
311
308
|
}]
|
|
312
309
|
}))), _react2().default.createElement(_antd().Col, {
|
|
313
310
|
span: 11
|
|
314
|
-
}, _react2().default.createElement(_antd().Card,
|
|
315
|
-
|
|
316
|
-
|
|
311
|
+
}, _react2().default.createElement(_antd().Card, {
|
|
312
|
+
style: {
|
|
313
|
+
margin: '12px 12px 12px 0'
|
|
314
|
+
}
|
|
315
|
+
}, _react2().default.createElement(ChartConfigure.Renderer, null))))));
|
|
317
316
|
};
|
|
318
317
|
exports.ChartConfigure = ChartConfigure;
|
|
319
318
|
ChartConfigure.Renderer = function Renderer(props) {
|
|
320
|
-
const
|
|
321
|
-
current =
|
|
319
|
+
const _useContext3 = (0, _react2().useContext)(ChartConfigContext),
|
|
320
|
+
current = _useContext3.current;
|
|
322
321
|
const _ref2 = current || {},
|
|
323
|
-
collection = _ref2.collection
|
|
322
|
+
collection = _ref2.collection,
|
|
323
|
+
data = _ref2.data;
|
|
324
|
+
const _useContext4 = (0, _react2().useContext)(_renderer.ChartRendererContext),
|
|
325
|
+
service = _useContext4.service;
|
|
324
326
|
return _react2().default.createElement(_react().FormConsumer, null, form => {
|
|
325
327
|
// Any change of config and transform will trigger rerender
|
|
326
328
|
// Change of query only trigger rerender when "Run query" button is clicked
|
|
327
329
|
const config = (0, _lodash().cloneDeep)(form.values.config);
|
|
328
330
|
const transform = (0, _lodash().cloneDeep)(form.values.transform);
|
|
329
|
-
return _react2().default.createElement(_renderer.
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
}, props)));
|
|
331
|
+
return _react2().default.createElement(_renderer.ChartRendererContext.Provider, {
|
|
332
|
+
value: {
|
|
333
|
+
collection,
|
|
334
|
+
config,
|
|
335
|
+
transform,
|
|
336
|
+
service,
|
|
337
|
+
data
|
|
338
|
+
}
|
|
339
|
+
}, _react2().default.createElement(_renderer.ChartRenderer, _objectSpread({}, props)));
|
|
338
340
|
});
|
|
339
341
|
};
|
|
340
342
|
ChartConfigure.Query = function Query() {
|
|
341
343
|
const _useChartsTranslation2 = (0, _locale.useChartsTranslation)(),
|
|
342
344
|
t = _useChartsTranslation2.t;
|
|
343
|
-
const _useTranslation = (0, _reactI18next().useTranslation)(),
|
|
344
|
-
lang = _useTranslation.t;
|
|
345
345
|
const fields = (0, _hooks.useFieldsWithAssociation)();
|
|
346
346
|
const useFormatterOptions = (0, _hooks.useFormatters)(fields);
|
|
347
347
|
const collectionOptions = (0, _hooks.useCollectionOptions)();
|
|
348
|
-
const
|
|
349
|
-
current =
|
|
350
|
-
setCurrent =
|
|
348
|
+
const _useContext5 = (0, _react2().useContext)(ChartConfigContext),
|
|
349
|
+
current = _useContext5.current,
|
|
350
|
+
setCurrent = _useContext5.setCurrent;
|
|
351
351
|
const _ref3 = current || {},
|
|
352
352
|
collection = _ref3.collection;
|
|
353
353
|
const fieldOptions = (0, _client().useCollectionFieldsOptions)(collection, 1);
|
|
354
354
|
const compiledFieldOptions = _react().Schema.compile(fieldOptions, {
|
|
355
|
-
t
|
|
355
|
+
t
|
|
356
356
|
});
|
|
357
357
|
const filterOptions = (0, _client().useCollectionFilterOptions)(collection);
|
|
358
|
-
const
|
|
358
|
+
const _useContext6 = (0, _react2().useContext)(_renderer.ChartRendererContext),
|
|
359
|
+
service = _useContext6.service;
|
|
359
360
|
const onCollectionChange = value => {
|
|
360
361
|
const schema = current.schema,
|
|
361
362
|
field = current.field;
|
|
362
|
-
const newSchema = _objectSpread({}, schema);
|
|
363
|
-
newSchema['x-decorator-props'] = {
|
|
364
|
-
collection: value
|
|
365
|
-
};
|
|
366
|
-
newSchema['x-acl-action'] = `${value}:list`;
|
|
367
363
|
setCurrent({
|
|
368
|
-
schema
|
|
364
|
+
schema,
|
|
369
365
|
field,
|
|
370
|
-
collection: value
|
|
366
|
+
collection: value,
|
|
367
|
+
service: current.service,
|
|
368
|
+
initialValues: {},
|
|
369
|
+
data: undefined
|
|
371
370
|
});
|
|
371
|
+
service.mutate(undefined);
|
|
372
372
|
};
|
|
373
|
+
const formCollapse = _antdV().FormCollapse.createFormCollapse(['measures', 'dimensions', 'filter', 'sort']);
|
|
373
374
|
const FromSql = () => _react2().default.createElement(Text, {
|
|
374
375
|
code: true
|
|
375
376
|
}, "From ", _react2().default.createElement("span", {
|
|
@@ -478,10 +479,24 @@ ChartConfigure.Transform = function Transform() {
|
|
|
478
479
|
});
|
|
479
480
|
};
|
|
480
481
|
ChartConfigure.Data = function Data() {
|
|
481
|
-
|
|
482
|
-
|
|
482
|
+
var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
|
|
483
|
+
const _useChartsTranslation5 = (0, _locale.useChartsTranslation)(),
|
|
484
|
+
t = _useChartsTranslation5.t;
|
|
485
|
+
const _useContext7 = (0, _react2().useContext)(ChartConfigContext),
|
|
486
|
+
current = _useContext7.current;
|
|
487
|
+
const _useContext8 = (0, _react2().useContext)(_renderer.ChartRendererContext),
|
|
488
|
+
service = _useContext8.service;
|
|
483
489
|
const fields = (0, _hooks.useFieldsWithAssociation)();
|
|
484
|
-
|
|
490
|
+
const data = (0, _utils.processData)(fields, (service === null || service === void 0 ? void 0 : service.data) || (current === null || current === void 0 ? void 0 : current.data) || [], {
|
|
491
|
+
t
|
|
492
|
+
});
|
|
493
|
+
const error = service === null || service === void 0 ? void 0 : service.error;
|
|
494
|
+
return !error ? _react2().default.createElement("div", {
|
|
495
|
+
style: {
|
|
496
|
+
overflowX: 'auto',
|
|
497
|
+
overflowY: 'hidden'
|
|
498
|
+
}
|
|
499
|
+
}, _react2().default.createElement(_antd().Table, {
|
|
485
500
|
dataSource: data,
|
|
486
501
|
columns: Object.keys(data[0] || {}).map(col => {
|
|
487
502
|
const field = (0, _utils.getField)(fields, col.split('.'));
|
|
@@ -492,10 +507,10 @@ ChartConfigure.Data = function Data() {
|
|
|
492
507
|
};
|
|
493
508
|
}),
|
|
494
509
|
size: "small"
|
|
495
|
-
}) : _react2().default.createElement(_antd().Alert, {
|
|
510
|
+
})) : _react2().default.createElement(_antd().Alert, {
|
|
496
511
|
message: "Error",
|
|
497
512
|
type: "error",
|
|
498
|
-
description: data,
|
|
513
|
+
description: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$.map) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.call(_error$response$data$, error => error.message).join('\n')) || error.message,
|
|
499
514
|
showIcon: true
|
|
500
515
|
});
|
|
501
516
|
};
|
|
@@ -168,7 +168,7 @@ const querySchema = {
|
|
|
168
168
|
'x-component-props': {
|
|
169
169
|
options: '{{ collectionOptions }}',
|
|
170
170
|
onChange: '{{ onCollectionChange }}',
|
|
171
|
-
placeholder: (
|
|
171
|
+
placeholder: '{{t("Collection")}}'
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
174
|
}
|
|
@@ -219,19 +219,19 @@ const querySchema = {
|
|
|
219
219
|
placeholder: '{{t("Aggregation")}}'
|
|
220
220
|
},
|
|
221
221
|
enum: [{
|
|
222
|
-
label: (
|
|
222
|
+
label: '{{t("Sum")}}',
|
|
223
223
|
value: 'sum'
|
|
224
224
|
}, {
|
|
225
|
-
label: (
|
|
225
|
+
label: '{{t("Count")}}',
|
|
226
226
|
value: 'count'
|
|
227
227
|
}, {
|
|
228
|
-
label: (
|
|
228
|
+
label: '{{t("Avg")}}',
|
|
229
229
|
value: 'avg'
|
|
230
230
|
}, {
|
|
231
|
-
label: (
|
|
231
|
+
label: '{{t("Max")}}',
|
|
232
232
|
value: 'max'
|
|
233
233
|
}, {
|
|
234
|
-
label: (
|
|
234
|
+
label: '{{t("Min")}}',
|
|
235
235
|
value: 'min'
|
|
236
236
|
}]
|
|
237
237
|
},
|
|
@@ -309,7 +309,7 @@ const querySchema = {
|
|
|
309
309
|
'x-decorator': 'FormItem',
|
|
310
310
|
'x-decorator-props': {
|
|
311
311
|
style: {
|
|
312
|
-
overflow: '
|
|
312
|
+
overflow: 'auto'
|
|
313
313
|
}
|
|
314
314
|
},
|
|
315
315
|
'x-component': 'Filter',
|
package/lib/client/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export declare const NAMESPACE = "
|
|
1
|
+
export declare const NAMESPACE = "data-visualization";
|
|
2
2
|
export declare function lang(key: string): string;
|
|
3
|
-
export declare function useChartsTranslation(): import("react-i18next").UseTranslationResponse<"
|
|
3
|
+
export declare function useChartsTranslation(): import("react-i18next").UseTranslationResponse<"data-visualization", undefined>;
|
|
@@ -20,15 +20,13 @@ function _reactI18next() {
|
|
|
20
20
|
};
|
|
21
21
|
return data;
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const NAMESPACE = 'charts-v2';
|
|
26
|
-
exports.NAMESPACE = NAMESPACE;
|
|
27
|
-
_client().i18n.addResources('zh-CN', NAMESPACE, _zhCN.default);
|
|
23
|
+
const NAMESPACE = 'data-visualization';
|
|
24
|
+
// i18n.addResources('zh-CN', NAMESPACE, zhCN);
|
|
28
25
|
// i18n.addResources('en-US', NAMESPACE, enUS);
|
|
29
26
|
// i18n.addResources('ja-JP', NAMESPACE, jaJP);
|
|
30
27
|
// i18n.addResources('ru-RU', NAMESPACE, ruRU);
|
|
31
28
|
// i18n.addResources('tr-TR', NAMESPACE, trTR);
|
|
29
|
+
exports.NAMESPACE = NAMESPACE;
|
|
32
30
|
function lang(key) {
|
|
33
31
|
return _client().i18n.t(key, {
|
|
34
32
|
ns: NAMESPACE
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useToggleChartLibrary = exports.useCharts = exports.useChartTypes = exports.infer = exports.commonInit = exports.ChartLibraryProvider = exports.ChartLibraryContext = void 0;
|
|
6
|
+
exports.useToggleChartLibrary = exports.useDefaultChartType = exports.useCharts = exports.useChartTypes = exports.infer = exports.commonInit = exports.ChartLibraryProvider = exports.ChartLibraryContext = void 0;
|
|
7
7
|
function _react() {
|
|
8
8
|
const data = _interopRequireWildcard(require("react"));
|
|
9
9
|
_react = function _react() {
|
|
@@ -32,7 +32,7 @@ const useChartTypes = () => {
|
|
|
32
32
|
return Object.entries(library).filter(([_, l]) => l.enabled).reduce((charts, [name, l]) => {
|
|
33
33
|
const children = Object.entries(l.charts).map(([type, chart]) => _objectSpread(_objectSpread({}, chart), {}, {
|
|
34
34
|
key: type,
|
|
35
|
-
label: chart.name,
|
|
35
|
+
label: (0, _locale.lang)(chart.name),
|
|
36
36
|
value: type
|
|
37
37
|
}));
|
|
38
38
|
return [...charts, {
|
|
@@ -42,6 +42,12 @@ const useChartTypes = () => {
|
|
|
42
42
|
}, []);
|
|
43
43
|
};
|
|
44
44
|
exports.useChartTypes = useChartTypes;
|
|
45
|
+
const useDefaultChartType = () => {
|
|
46
|
+
var _chartTypes$, _chartTypes$$children, _chartTypes$$children2;
|
|
47
|
+
const chartTypes = useChartTypes();
|
|
48
|
+
return (_chartTypes$ = chartTypes[0]) === null || _chartTypes$ === void 0 ? void 0 : (_chartTypes$$children = _chartTypes$.children) === null || _chartTypes$$children === void 0 ? void 0 : (_chartTypes$$children2 = _chartTypes$$children[0]) === null || _chartTypes$$children2 === void 0 ? void 0 : _chartTypes$$children2.value;
|
|
49
|
+
};
|
|
50
|
+
exports.useDefaultChartType = useDefaultChartType;
|
|
45
51
|
const useToggleChartLibrary = () => {
|
|
46
52
|
const ctx = (0, _react().useContext)(ChartLibraryContext);
|
|
47
53
|
return {
|