@kanaries/graphic-walker 0.3.12 → 0.3.13
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/assets/transform.worker-a12fb3d8.js.map +1 -0
- package/dist/fields/filterField/slider.d.ts +0 -1
- package/dist/graphic-walker.es.js +24331 -24184
- package/dist/graphic-walker.es.js.map +1 -1
- package/dist/graphic-walker.umd.js +259 -127
- package/dist/graphic-walker.umd.js.map +1 -1
- package/package.json +2 -1
- package/src/assets/kanaries-logo.svg +1 -0
- package/src/components/modal.tsx +9 -9
- package/src/fields/filterField/filterEditDialog.tsx +33 -8
- package/src/fields/filterField/slider.tsx +127 -85
- package/src/fields/filterField/tabs.tsx +301 -184
- package/src/lib/execExp.ts +1 -1
- package/src/locales/en-US.json +10 -3
- package/src/locales/ja-JP.json +10 -3
- package/src/locales/zh-CN.json +10 -3
- package/src/visualSettings/index.tsx +299 -70
- package/dist/assets/transform.worker-90e4f506.js.map +0 -1
package/src/locales/zh-CN.json
CHANGED
|
@@ -84,8 +84,11 @@
|
|
|
84
84
|
},
|
|
85
85
|
"filter_type": {
|
|
86
86
|
"one_of": "按值筛选",
|
|
87
|
+
"one_of_desc": "选择指定的值",
|
|
87
88
|
"range": "按范围筛选",
|
|
88
|
-
"
|
|
89
|
+
"range_desc": "选择范围内的值 [开始, 结束]",
|
|
90
|
+
"temporal_range": "按日期范围筛选",
|
|
91
|
+
"temporal_range_desc": "选择日期范围内的值 [开始, 结束]"
|
|
89
92
|
}
|
|
90
93
|
},
|
|
91
94
|
"App": {
|
|
@@ -165,7 +168,7 @@
|
|
|
165
168
|
"filters": {
|
|
166
169
|
"to_edit": "编辑这条规则",
|
|
167
170
|
"empty_rule": "! (空的规则)",
|
|
168
|
-
"editing": "
|
|
171
|
+
"editing": "筛选器规则设定",
|
|
169
172
|
"form": {
|
|
170
173
|
"name": "字段",
|
|
171
174
|
"rule": "规则"
|
|
@@ -182,6 +185,10 @@
|
|
|
182
185
|
"reverse": "选择反向",
|
|
183
186
|
"confirm": "确认",
|
|
184
187
|
"cancel": "取消"
|
|
188
|
+
},
|
|
189
|
+
"range": {
|
|
190
|
+
"start_value": "起始值",
|
|
191
|
+
"end_value": "终止值"
|
|
185
192
|
}
|
|
186
193
|
},
|
|
187
194
|
"explain": {
|
|
@@ -203,6 +210,6 @@
|
|
|
203
210
|
"next": "向后",
|
|
204
211
|
"drop_field": "拖拽字段至此",
|
|
205
212
|
"confirm": "确认",
|
|
206
|
-
"
|
|
213
|
+
"cancel": "取消"
|
|
207
214
|
}
|
|
208
215
|
}
|
|
@@ -22,7 +22,7 @@ import {
|
|
|
22
22
|
} from '@heroicons/react/24/outline';
|
|
23
23
|
import { observer } from 'mobx-react-lite';
|
|
24
24
|
import React, { SVGProps, useCallback, useMemo } from 'react';
|
|
25
|
-
import styled from 'styled-components'
|
|
25
|
+
import styled from 'styled-components';
|
|
26
26
|
import { useTranslation } from 'react-i18next';
|
|
27
27
|
import { ResizeDialog } from '../components/sizeSetting';
|
|
28
28
|
import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE } from '../config';
|
|
@@ -33,7 +33,7 @@ import Toolbar, { ToolbarItemProps } from '../components/toolbar';
|
|
|
33
33
|
import { ButtonWithShortcut } from './menubar';
|
|
34
34
|
import { useCurrentMediaTheme } from '../utils/media';
|
|
35
35
|
import throttle from '../utils/throttle';
|
|
36
|
-
|
|
36
|
+
import KanariesLogo from '../assets/kanaries-logo.svg';
|
|
37
37
|
|
|
38
38
|
const Invisible = styled.div`
|
|
39
39
|
clip: rect(1px, 1px, 1px, 1px);
|
|
@@ -65,29 +65,66 @@ interface IVisualSettings {
|
|
|
65
65
|
extra?: ToolbarItemProps[];
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
const VisualSettings: React.FC<IVisualSettings> = ({
|
|
68
|
+
const VisualSettings: React.FC<IVisualSettings> = ({
|
|
69
|
+
rendererHandler,
|
|
70
|
+
darkModePreference,
|
|
71
|
+
extra = [],
|
|
72
|
+
exclude = [],
|
|
73
|
+
}) => {
|
|
69
74
|
const { vizStore, commonStore } = useGlobalStore();
|
|
70
75
|
const { visualConfig, canUndo, canRedo } = vizStore;
|
|
71
76
|
const { t: tGlobal } = useTranslation();
|
|
72
77
|
const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
|
|
73
78
|
|
|
74
79
|
const {
|
|
75
|
-
defaultAggregated,
|
|
80
|
+
defaultAggregated,
|
|
81
|
+
geoms: [markType],
|
|
82
|
+
stack,
|
|
83
|
+
interactiveScale,
|
|
84
|
+
size: { mode: sizeMode, width, height },
|
|
76
85
|
showActions,
|
|
77
86
|
} = visualConfig;
|
|
78
87
|
|
|
79
|
-
const downloadPNG = useCallback(
|
|
80
|
-
|
|
81
|
-
|
|
88
|
+
const downloadPNG = useCallback(
|
|
89
|
+
throttle(() => {
|
|
90
|
+
rendererHandler?.current?.downloadPNG();
|
|
91
|
+
}, 200),
|
|
92
|
+
[rendererHandler]
|
|
93
|
+
);
|
|
82
94
|
|
|
83
|
-
const downloadSVG = useCallback(
|
|
84
|
-
|
|
85
|
-
|
|
95
|
+
const downloadSVG = useCallback(
|
|
96
|
+
throttle(() => {
|
|
97
|
+
rendererHandler?.current?.downloadSVG();
|
|
98
|
+
}, 200),
|
|
99
|
+
[rendererHandler]
|
|
100
|
+
);
|
|
86
101
|
|
|
87
102
|
const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
|
|
88
103
|
|
|
104
|
+
console.log('kanaries logo', KanariesLogo);
|
|
105
|
+
|
|
89
106
|
const items = useMemo<ToolbarItemProps[]>(() => {
|
|
90
107
|
const builtInItems = [
|
|
108
|
+
{
|
|
109
|
+
key: 'kanaries',
|
|
110
|
+
label: 'kanaries',
|
|
111
|
+
icon: () => (
|
|
112
|
+
// Kanaries brand info is not allowed to be removed or changed unless you are granted with special permission.
|
|
113
|
+
<a href="https://kanaries.net" target="_blank">
|
|
114
|
+
<img
|
|
115
|
+
id="kanaries-logo"
|
|
116
|
+
className="m-1"
|
|
117
|
+
src="https://imagedelivery.net/tSvh1MGEu9IgUanmf58srQ/b6bc899f-a129-4c3a-d08f-d406166d0c00/public"
|
|
118
|
+
alt="kanaries"
|
|
119
|
+
onError={(e) => {
|
|
120
|
+
// @ts-ignore
|
|
121
|
+
e.target.src = KanariesLogo;
|
|
122
|
+
}}
|
|
123
|
+
/>
|
|
124
|
+
</a>
|
|
125
|
+
),
|
|
126
|
+
},
|
|
127
|
+
'-',
|
|
91
128
|
{
|
|
92
129
|
key: 'undo',
|
|
93
130
|
label: 'undo (Ctrl + Z)',
|
|
@@ -132,7 +169,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
132
169
|
label: t('toggle.aggregation'),
|
|
133
170
|
icon: CubeIcon,
|
|
134
171
|
checked: defaultAggregated,
|
|
135
|
-
onChange: checked => {
|
|
172
|
+
onChange: (checked) => {
|
|
136
173
|
vizStore.setVisualConfig('defaultAggregated', checked);
|
|
137
174
|
},
|
|
138
175
|
},
|
|
@@ -145,27 +182,195 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
145
182
|
color: 'rgb(294,115,22)',
|
|
146
183
|
},
|
|
147
184
|
},
|
|
148
|
-
options: GEMO_TYPES.map(g => ({
|
|
185
|
+
options: GEMO_TYPES.map((g) => ({
|
|
149
186
|
key: g,
|
|
150
187
|
label: tGlobal(`constant.mark_type.${g}`),
|
|
151
188
|
icon: {
|
|
152
189
|
auto: LightBulbIcon,
|
|
153
|
-
bar: (props: SVGProps<SVGSVGElement>) =>
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
190
|
+
bar: (props: SVGProps<SVGSVGElement>) => (
|
|
191
|
+
<svg
|
|
192
|
+
stroke="currentColor"
|
|
193
|
+
fill="none"
|
|
194
|
+
strokeWidth="1.5"
|
|
195
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
196
|
+
viewBox="0 0 24 24"
|
|
197
|
+
aria-hidden
|
|
198
|
+
{...props}
|
|
199
|
+
>
|
|
200
|
+
<path strokeLinecap="round" strokeLinejoin="round" d="M9,4v16h6v-16Z" />
|
|
201
|
+
</svg>
|
|
202
|
+
),
|
|
203
|
+
line: (props: SVGProps<SVGSVGElement>) => (
|
|
204
|
+
<svg
|
|
205
|
+
stroke="currentColor"
|
|
206
|
+
fill="none"
|
|
207
|
+
strokeWidth="1.5"
|
|
208
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
209
|
+
viewBox="0 0 24 24"
|
|
210
|
+
aria-hidden
|
|
211
|
+
{...props}
|
|
212
|
+
>
|
|
213
|
+
<path strokeLinecap="round" strokeLinejoin="round" d="M5,6L19,18" />
|
|
214
|
+
</svg>
|
|
215
|
+
),
|
|
216
|
+
area: (props: SVGProps<SVGSVGElement>) => (
|
|
217
|
+
<svg
|
|
218
|
+
stroke="none"
|
|
219
|
+
fill="currentColor"
|
|
220
|
+
strokeWidth="1.5"
|
|
221
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
222
|
+
viewBox="0 0 24 24"
|
|
223
|
+
aria-hidden
|
|
224
|
+
{...props}
|
|
225
|
+
>
|
|
226
|
+
<path strokeLinecap="round" strokeLinejoin="round" d="M5,20v-17l14,4V20Z" />
|
|
227
|
+
</svg>
|
|
228
|
+
),
|
|
229
|
+
trail: (props: SVGProps<SVGSVGElement>) => (
|
|
230
|
+
<svg
|
|
231
|
+
stroke="none"
|
|
232
|
+
fill="currentColor"
|
|
233
|
+
strokeWidth="1.5"
|
|
234
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
235
|
+
viewBox="0 0 24 24"
|
|
236
|
+
aria-hidden
|
|
237
|
+
{...props}
|
|
238
|
+
>
|
|
239
|
+
<path strokeLinecap="round" strokeLinejoin="round" d="M5,6l7,4l7-2v2l-7,4l-7,-4z" />
|
|
240
|
+
</svg>
|
|
241
|
+
),
|
|
242
|
+
point: (props: SVGProps<SVGSVGElement>) => (
|
|
243
|
+
<svg
|
|
244
|
+
stroke="currentColor"
|
|
245
|
+
fill="none"
|
|
246
|
+
strokeWidth="1.5"
|
|
247
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
248
|
+
viewBox="0 0 24 24"
|
|
249
|
+
aria-hidden
|
|
250
|
+
{...props}
|
|
251
|
+
>
|
|
252
|
+
<path
|
|
253
|
+
strokeLinecap="round"
|
|
254
|
+
strokeLinejoin="round"
|
|
255
|
+
d="M9,12 A3,3,0,0,1,16,12 A3,3,0,0,1,9,12"
|
|
256
|
+
/>
|
|
257
|
+
</svg>
|
|
258
|
+
),
|
|
259
|
+
circle: (props: SVGProps<SVGSVGElement>) => (
|
|
260
|
+
<svg
|
|
261
|
+
stroke="none"
|
|
262
|
+
fill="currentColor"
|
|
263
|
+
strokeWidth="1.5"
|
|
264
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
265
|
+
viewBox="0 0 24 24"
|
|
266
|
+
aria-hidden
|
|
267
|
+
{...props}
|
|
268
|
+
>
|
|
269
|
+
<path
|
|
270
|
+
strokeLinecap="round"
|
|
271
|
+
strokeLinejoin="round"
|
|
272
|
+
d="M6,12 A6,6,0,0,1,18,12 A6,6,0,0,1,6,12"
|
|
273
|
+
/>
|
|
274
|
+
</svg>
|
|
275
|
+
),
|
|
276
|
+
tick: (props: SVGProps<SVGSVGElement>) => (
|
|
277
|
+
<svg
|
|
278
|
+
stroke="currentColor"
|
|
279
|
+
fill="none"
|
|
280
|
+
strokeWidth="1.5"
|
|
281
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
282
|
+
viewBox="0 0 24 24"
|
|
283
|
+
aria-hidden
|
|
284
|
+
{...props}
|
|
285
|
+
>
|
|
286
|
+
<path strokeLinecap="round" strokeLinejoin="round" d="M5,12h14" />
|
|
287
|
+
</svg>
|
|
288
|
+
),
|
|
289
|
+
rect: (props: SVGProps<SVGSVGElement>) => (
|
|
290
|
+
<svg
|
|
291
|
+
stroke="none"
|
|
292
|
+
fill="currentColor"
|
|
293
|
+
strokeWidth="1.5"
|
|
294
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
295
|
+
viewBox="0 0 24 24"
|
|
296
|
+
aria-hidden
|
|
297
|
+
{...props}
|
|
298
|
+
>
|
|
299
|
+
<path strokeLinecap="round" strokeLinejoin="round" d="M5,5v14h14v-14z" />
|
|
300
|
+
</svg>
|
|
301
|
+
),
|
|
302
|
+
text: (props: SVGProps<SVGSVGElement>) => (
|
|
303
|
+
<svg
|
|
304
|
+
stroke="currentColor"
|
|
305
|
+
fill="currentColor"
|
|
306
|
+
strokeWidth="1.5"
|
|
307
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
308
|
+
viewBox="0 0 24 24"
|
|
309
|
+
aria-hidden
|
|
310
|
+
{...props}
|
|
311
|
+
>
|
|
312
|
+
<path
|
|
313
|
+
strokeLinecap="round"
|
|
314
|
+
strokeLinejoin="round"
|
|
315
|
+
d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802"
|
|
316
|
+
/>
|
|
317
|
+
</svg>
|
|
318
|
+
),
|
|
319
|
+
arc: (props: SVGProps<SVGSVGElement>) => (
|
|
320
|
+
<svg
|
|
321
|
+
stroke="none"
|
|
322
|
+
fill="currentColor"
|
|
323
|
+
strokeWidth="1.5"
|
|
324
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
325
|
+
viewBox="0 0 24 24"
|
|
326
|
+
aria-hidden
|
|
327
|
+
{...props}
|
|
328
|
+
>
|
|
329
|
+
<path
|
|
330
|
+
strokeLinecap="round"
|
|
331
|
+
strokeLinejoin="round"
|
|
332
|
+
d="M12,21l-9,-15a12,12,0,0,1,18,0Z"
|
|
333
|
+
/>
|
|
334
|
+
</svg>
|
|
335
|
+
),
|
|
336
|
+
boxplot: (props: SVGProps<SVGSVGElement>) => (
|
|
337
|
+
<svg
|
|
338
|
+
stroke="currentColor"
|
|
339
|
+
fill="none"
|
|
340
|
+
strokeWidth="1.5"
|
|
341
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
342
|
+
viewBox="0 0 24 24"
|
|
343
|
+
aria-hidden
|
|
344
|
+
{...props}
|
|
345
|
+
>
|
|
346
|
+
<path
|
|
347
|
+
strokeLinecap="round"
|
|
348
|
+
strokeLinejoin="round"
|
|
349
|
+
d="M7,7v9h10v-9Zm0,4h8M12,7v-6m-3,0h6M12,16v7m-3,0h6"
|
|
350
|
+
/>
|
|
351
|
+
</svg>
|
|
352
|
+
),
|
|
353
|
+
table: (props: SVGProps<SVGSVGElement>) => (
|
|
354
|
+
<svg
|
|
355
|
+
stroke="currentColor"
|
|
356
|
+
fill="none"
|
|
357
|
+
strokeWidth="1.5"
|
|
358
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
359
|
+
viewBox="0 0 24 24"
|
|
360
|
+
aria-hidden
|
|
361
|
+
{...props}
|
|
362
|
+
>
|
|
363
|
+
<path
|
|
364
|
+
strokeLinecap="round"
|
|
365
|
+
strokeLinejoin="round"
|
|
366
|
+
d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0112 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
|
|
367
|
+
/>
|
|
368
|
+
</svg>
|
|
369
|
+
),
|
|
165
370
|
}[g],
|
|
166
371
|
})),
|
|
167
372
|
value: markType,
|
|
168
|
-
onSelect: value => {
|
|
373
|
+
onSelect: (value) => {
|
|
169
374
|
vizStore.setVisualConfig('geoms', [value]);
|
|
170
375
|
},
|
|
171
376
|
},
|
|
@@ -173,7 +378,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
173
378
|
key: 'stack_mode',
|
|
174
379
|
label: tGlobal('constant.stack_mode.__enum__'),
|
|
175
380
|
icon: Square3Stack3DIcon,
|
|
176
|
-
options: STACK_MODE.map(g => ({
|
|
381
|
+
options: STACK_MODE.map((g) => ({
|
|
177
382
|
key: g,
|
|
178
383
|
label: tGlobal(`constant.stack_mode.${g}`),
|
|
179
384
|
icon: {
|
|
@@ -183,7 +388,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
183
388
|
}[g],
|
|
184
389
|
})),
|
|
185
390
|
value: stack,
|
|
186
|
-
onSelect: value => {
|
|
391
|
+
onSelect: (value) => {
|
|
187
392
|
vizStore.setVisualConfig('stack', value as IStackMode);
|
|
188
393
|
},
|
|
189
394
|
},
|
|
@@ -212,7 +417,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
212
417
|
label: t('toggle.axes_resize'),
|
|
213
418
|
icon: ChevronUpDownIcon,
|
|
214
419
|
checked: interactiveScale,
|
|
215
|
-
onChange: checked => {
|
|
420
|
+
onChange: (checked) => {
|
|
216
421
|
vizStore.setVisualConfig('interactiveScale', checked);
|
|
217
422
|
},
|
|
218
423
|
},
|
|
@@ -220,13 +425,13 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
220
425
|
key: 'scale',
|
|
221
426
|
icon: ArrowsPointingOutIcon,
|
|
222
427
|
label: tGlobal(`constant.layout_type.__enum__`),
|
|
223
|
-
options: CHART_LAYOUT_TYPE.map(g => ({
|
|
428
|
+
options: CHART_LAYOUT_TYPE.map((g) => ({
|
|
224
429
|
key: g,
|
|
225
430
|
label: tGlobal(`constant.layout_type.${g}`),
|
|
226
431
|
icon: g === 'auto' ? LockClosedIcon : LockOpenIcon,
|
|
227
432
|
})),
|
|
228
433
|
value: sizeMode,
|
|
229
|
-
onSelect: key => {
|
|
434
|
+
onSelect: (key) => {
|
|
230
435
|
vizStore.setChartLayout({ mode: key as 'fixed' | 'auto' });
|
|
231
436
|
},
|
|
232
437
|
form: (
|
|
@@ -236,14 +441,14 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
236
441
|
height={height}
|
|
237
442
|
onHeightChange={(v) => {
|
|
238
443
|
vizStore.setChartLayout({
|
|
239
|
-
mode:
|
|
240
|
-
height: v
|
|
444
|
+
mode: 'fixed',
|
|
445
|
+
height: v,
|
|
241
446
|
});
|
|
242
447
|
}}
|
|
243
448
|
onWidthChange={(v) => {
|
|
244
449
|
vizStore.setChartLayout({
|
|
245
|
-
mode:
|
|
246
|
-
width: v
|
|
450
|
+
mode: 'fixed',
|
|
451
|
+
width: v,
|
|
247
452
|
});
|
|
248
453
|
}}
|
|
249
454
|
/>
|
|
@@ -256,7 +461,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
256
461
|
label: t('toggle.debug'),
|
|
257
462
|
icon: WrenchIcon,
|
|
258
463
|
checked: showActions,
|
|
259
|
-
onChange: checked => {
|
|
464
|
+
onChange: (checked) => {
|
|
260
465
|
vizStore.setVisualConfig('showActions', checked);
|
|
261
466
|
},
|
|
262
467
|
},
|
|
@@ -267,14 +472,22 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
267
472
|
form: (
|
|
268
473
|
<FormContainer className={dark ? 'dark' : ''}>
|
|
269
474
|
<button
|
|
270
|
-
className={`text-xs pt-1 pb-1 pl-6 pr-6 ${
|
|
475
|
+
className={`text-xs pt-1 pb-1 pl-6 pr-6 ${
|
|
476
|
+
dark
|
|
477
|
+
? 'dark bg-zinc-900 text-gray-100 hover:bg-gray-700'
|
|
478
|
+
: 'bg-white hover:bg-gray-200 text-gray-800'
|
|
479
|
+
}`}
|
|
271
480
|
aria-label={t('button.export_chart_as', { type: 'png' })}
|
|
272
481
|
onClick={() => downloadPNG()}
|
|
273
482
|
>
|
|
274
483
|
{t('button.export_chart_as', { type: 'png' })}
|
|
275
484
|
</button>
|
|
276
485
|
<button
|
|
277
|
-
className={`text-xs pt-1 pb-1 pl-6 pr-6 ${
|
|
486
|
+
className={`text-xs pt-1 pb-1 pl-6 pr-6 ${
|
|
487
|
+
dark
|
|
488
|
+
? 'dark bg-zinc-900 text-gray-100 hover:bg-gray-700'
|
|
489
|
+
: 'bg-white hover:bg-gray-200 text-gray-800'
|
|
490
|
+
}`}
|
|
278
491
|
aria-label={t('button.export_chart_as', { type: 'svg' })}
|
|
279
492
|
onClick={() => downloadSVG()}
|
|
280
493
|
>
|
|
@@ -289,7 +502,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
289
502
|
icon: Cog6ToothIcon,
|
|
290
503
|
onClick: () => {
|
|
291
504
|
commonStore.setShowVisualConfigPanel(true);
|
|
292
|
-
}
|
|
505
|
+
},
|
|
293
506
|
},
|
|
294
507
|
{
|
|
295
508
|
key: 'export_code',
|
|
@@ -297,45 +510,61 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
|
|
|
297
510
|
icon: CodeBracketSquareIcon,
|
|
298
511
|
onClick: () => {
|
|
299
512
|
commonStore.setShowCodeExportPanel(true);
|
|
300
|
-
}
|
|
513
|
+
},
|
|
301
514
|
},
|
|
302
515
|
] as ToolbarItemProps[];
|
|
303
516
|
|
|
304
|
-
const items = builtInItems.filter(item => typeof item === 'string' || !exclude.includes(item.key));
|
|
517
|
+
const items = builtInItems.filter((item) => typeof item === 'string' || !exclude.includes(item.key));
|
|
305
518
|
|
|
306
519
|
if (extra.length > 0) {
|
|
307
|
-
items.push(
|
|
308
|
-
'-',
|
|
309
|
-
...extra,
|
|
310
|
-
);
|
|
520
|
+
items.push('-', ...extra);
|
|
311
521
|
}
|
|
312
522
|
|
|
313
523
|
return items;
|
|
314
|
-
}, [
|
|
524
|
+
}, [
|
|
525
|
+
vizStore,
|
|
526
|
+
canUndo,
|
|
527
|
+
canRedo,
|
|
528
|
+
defaultAggregated,
|
|
529
|
+
markType,
|
|
530
|
+
stack,
|
|
531
|
+
interactiveScale,
|
|
532
|
+
sizeMode,
|
|
533
|
+
width,
|
|
534
|
+
height,
|
|
535
|
+
showActions,
|
|
536
|
+
downloadPNG,
|
|
537
|
+
downloadSVG,
|
|
538
|
+
dark,
|
|
539
|
+
extra,
|
|
540
|
+
exclude,
|
|
541
|
+
]);
|
|
315
542
|
|
|
316
|
-
return
|
|
317
|
-
<
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
543
|
+
return (
|
|
544
|
+
<div style={{ margin: '0.38em 0.28em 0.2em 0.18em' }}>
|
|
545
|
+
<Toolbar
|
|
546
|
+
darkModePreference={darkModePreference}
|
|
547
|
+
items={items}
|
|
548
|
+
styles={{
|
|
549
|
+
root: {
|
|
550
|
+
'--background-color': '#fff',
|
|
551
|
+
'--dark-background-color': '#000',
|
|
552
|
+
'--color': '#777',
|
|
553
|
+
'--color-hover': '#555',
|
|
554
|
+
'--dark-color': '#999',
|
|
555
|
+
'--dark-color-hover': '#bbb',
|
|
556
|
+
'--blue': 'rgb(79,70,229)',
|
|
557
|
+
'--blue-dark': 'rgb(9, 6, 65)',
|
|
558
|
+
},
|
|
559
|
+
container: {
|
|
560
|
+
// border: '1px solid #e5e7eb',
|
|
561
|
+
// boxSizing: 'content-box',
|
|
562
|
+
// borderRadius: '1px',
|
|
563
|
+
},
|
|
564
|
+
}}
|
|
565
|
+
/>
|
|
566
|
+
</div>
|
|
567
|
+
);
|
|
568
|
+
};
|
|
340
569
|
|
|
341
|
-
export default observer(VisualSettings);
|
|
570
|
+
export default observer(VisualSettings);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"transform.worker-90e4f506.js","sources":["../src/lib/execExp.ts","../src/workers/transform.ts","../src/workers/transform.worker.js"],"sourcesContent":["import { IExpParamter, IExpression, IField, IRow } from \"../interfaces\";\n\ninterface IDataFrame {\n [key: string]: any[];\n}\n\nexport function execExpression (exp: IExpression, dataFrame: IDataFrame, columns: IField[]): IDataFrame {\n const { op, params } = exp;\n const subFrame: IDataFrame = { ...dataFrame };\n const len = dataFrame[Object.keys(dataFrame)[0]].length;\n for (let param of params) {\n switch (param.type) {\n case 'field':\n subFrame[param.value] = dataFrame[param.value];\n break;\n case 'constant':\n subFrame[param.value] = new Array(len).fill(param.value);\n break;\n case 'expression':\n let f = execExpression(param.value, dataFrame, columns);\n Object.keys(f).forEach(key => {\n subFrame[key] = f[key];\n })\n break;\n case 'value':\n default:\n break;\n }\n }\n switch (op) {\n case 'one':\n return one(exp.as, params, subFrame);\n case 'bin':\n return bin(exp.as, params, subFrame);\n case 'log2':\n return log2(exp.as, params, subFrame);\n case 'log10':\n return log10(exp.as, params, subFrame);\n case 'binCount':\n return binCount(exp.as, params, subFrame);\n default:\n return subFrame;\n }\n}\n\nfunction bin(resKey: string, params: IExpParamter[], data: IDataFrame, binSize: number | undefined = 10): IDataFrame {\n const { value: fieldKey } = params[0];\n const fieldValues = data[fieldKey] as number[];\n let _min = Infinity;\n let _max = -Infinity;\n for (let i = 0; i < fieldValues.length; i++) {\n let val = fieldValues[i];\n if (val > _max) _max = val;\n if (val < _min) _min = val;\n }\n const step = (_max - _min) / binSize;\n const beaStep = Math.max(-Math.round(Math.log10(_max - _min)) + 2, 0)\n const newValues = fieldValues.map((v: number) => {\n let bIndex = Math.floor((v - _min) / step);\n if (bIndex === binSize) bIndex = binSize - 1;\n return Number(((bIndex * step + _min)).toFixed(beaStep))\n });\n return {\n ...data,\n [resKey]: newValues,\n }\n}\n\nfunction binCount(resKey: string, params: IExpParamter[], data: IDataFrame, binSize: number | undefined = 10): IDataFrame {\n const { value: fieldKey } = params[0];\n const fieldValues = data[fieldKey] as number[];\n\n const valueWithIndices: {val: number; index: number; orderIndex: number }[] = fieldValues.map((v, i) => ({\n val: v,\n index: i\n })).sort((a, b) => a.val - b.val)\n .map((item, i) => ({\n val: item.val,\n index: item.index,\n orderIndex: i\n }))\n\n const groupSize = valueWithIndices.length / binSize;\n\n const newValues = valueWithIndices.map(item => {\n let bIndex = Math.floor(item.orderIndex / groupSize);\n if (bIndex === binSize) bIndex = binSize - 1;\n return bIndex + 1\n })\n return {\n ...data,\n [resKey]: newValues,\n }\n}\n\nfunction log2(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFrame {\n const { value } = params[0];\n const field = data[value];\n const newField = field.map((v: number) => Math.log2(v));\n return {\n ...data,\n [resKey]: newField,\n }\n}\n\nfunction log10(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFrame {\n const { value: fieldKey } = params[0];\n const fieldValues = data[fieldKey];\n const newField = fieldValues.map((v: number) => Math.log10(v));\n return {\n ...data,\n [resKey]: newField,\n }\n}\n\nfunction one(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFrame {\n // const { value: fieldKey } = params[0];\n if (Object.keys(data).length === 0) return data;\n const len = data[Object.keys(data)[0]].length;\n const newField = new Array(len).fill(1);\n return {\n ...data,\n [resKey]: newField,\n }\n}\n\nexport function dataset2DataFrame(dataset: IRow[], columns: IField[]): IDataFrame {\n const dataFrame: IDataFrame = {};\n columns.forEach((col) => {\n dataFrame[col.fid] = dataset.map((row) => row[col.fid]);\n });\n return dataFrame;\n}\n\nexport function dataframe2Dataset(dataFrame: IDataFrame, columns: IField[]): IRow[] {\n if (columns.length === 0) return [];\n const dataset: IRow[] = [];\n const len = dataFrame[Object.keys(dataFrame)[0]].length;\n for (let i = 0; i < len; i++) {\n const row: IRow = {};\n columns.forEach((col) => {\n row[col.fid] = dataFrame[col.fid][i];\n });\n dataset.push(row);\n }\n return dataset;\n}\n","import { IField, IRow } from \"../interfaces\";\nimport { dataframe2Dataset, dataset2DataFrame, execExpression } from \"../lib/execExp\";\n\nexport function transformData(data: IRow[], columns: IField[]) {\n const computedFields = columns.filter((f) => f.computed);\n let df = dataset2DataFrame(data, columns);\n for (let i = 0; i < computedFields.length; i++) {\n const field = computedFields[i];\n df = execExpression(field.expression!, df, columns);\n }\n return dataframe2Dataset(df, columns);\n}\n","import { transformData } from './transform'\nconst main = e => {\n const { dataSource, columns } = e.data;\n\n try {\n const ans = transformData(dataSource, columns);\n self.postMessage(ans);\n } catch (error) {\n self.postMessage({ error: error.message });\n }\n};\n\nself.addEventListener('message', main, false);"],"names":["execExpression","exp","dataFrame","columns","op","params","subFrame","len","param","f","key","one","bin","log2","log10","binCount","resKey","data","binSize","fieldKey","fieldValues","_min","_max","i","val","step","beaStep","newValues","v","bIndex","valueWithIndices","a","b","item","groupSize","value","newField","dataset2DataFrame","dataset","col","row","dataframe2Dataset","transformData","computedFields","df","field","main","e","dataSource","ans","error"],"mappings":"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"}
|