@devtable/dashboard 1.4.0 → 1.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/dist/dashboard.es.js +263 -50
- package/dist/dashboard.umd.js +6 -6
- package/package.json +1 -1
package/dist/dashboard.es.js
CHANGED
|
@@ -32,10 +32,10 @@ var __objRest = (source, exclude) => {
|
|
|
32
32
|
import React from "react";
|
|
33
33
|
import _ from "lodash";
|
|
34
34
|
import { WidthProvider, Responsive } from "react-grid-layout";
|
|
35
|
-
import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, Switch, Slider,
|
|
35
|
+
import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, JsonInput, Anchor, Switch, Slider, Modal, AppShell, Tabs, Menu, Divider, Container, SegmentedControl, Textarea } from "@mantine/core";
|
|
36
36
|
import { useRequest } from "ahooks";
|
|
37
37
|
import axios from "axios";
|
|
38
|
-
import { InfoCircle, DeviceFloppy,
|
|
38
|
+
import { InfoCircle, DeviceFloppy, Refresh, Trash, Settings, Paint, PlayerPlay, PlaylistAdd, ClipboardText, Database, Recycle, Share } from "tabler-icons-react";
|
|
39
39
|
import RichTextEditor, { RichTextEditor as RichTextEditor$1 } from "@mantine/rte";
|
|
40
40
|
import { useInputState, useElementSize, randomId } from "@mantine/hooks";
|
|
41
41
|
import ReactEChartsCore from "echarts-for-react/lib/core";
|
|
@@ -451,7 +451,8 @@ function DataPreview({
|
|
|
451
451
|
}, [definitions.dataSources, id]);
|
|
452
452
|
const {
|
|
453
453
|
data = [],
|
|
454
|
-
loading
|
|
454
|
+
loading,
|
|
455
|
+
refresh
|
|
455
456
|
} = useRequest(queryBySQL({
|
|
456
457
|
context: contextInfo,
|
|
457
458
|
definitions,
|
|
@@ -475,27 +476,47 @@ function DataPreview({
|
|
|
475
476
|
sx: {
|
|
476
477
|
border: "1px solid #eee"
|
|
477
478
|
},
|
|
478
|
-
children: [/* @__PURE__ */
|
|
479
|
-
position: "
|
|
479
|
+
children: [/* @__PURE__ */ jsxs(Group, {
|
|
480
|
+
position: "apart",
|
|
480
481
|
py: "md",
|
|
481
482
|
pl: "md",
|
|
482
483
|
sx: {
|
|
483
484
|
borderBottom: "1px solid #eee",
|
|
484
485
|
background: "#efefef"
|
|
485
486
|
},
|
|
486
|
-
children: /* @__PURE__ */
|
|
487
|
-
|
|
488
|
-
children:
|
|
489
|
-
|
|
487
|
+
children: [/* @__PURE__ */ jsxs(Group, {
|
|
488
|
+
position: "left",
|
|
489
|
+
children: [/* @__PURE__ */ jsx(Text, {
|
|
490
|
+
weight: 500,
|
|
491
|
+
children: "Preview Data"
|
|
492
|
+
}), data.length > 10 && /* @__PURE__ */ jsxs(Text, {
|
|
493
|
+
size: "sm",
|
|
494
|
+
color: "gray",
|
|
495
|
+
children: ["Showing 10 rows of ", data.length]
|
|
496
|
+
})]
|
|
497
|
+
}), /* @__PURE__ */ jsx(ActionIcon, {
|
|
498
|
+
mr: 15,
|
|
499
|
+
variant: "hover",
|
|
500
|
+
color: "blue",
|
|
501
|
+
disabled: loading,
|
|
502
|
+
onClick: refresh,
|
|
503
|
+
children: /* @__PURE__ */ jsx(Refresh, {
|
|
504
|
+
size: 15
|
|
505
|
+
})
|
|
506
|
+
})]
|
|
490
507
|
}), /* @__PURE__ */ jsxs(Table, {
|
|
491
508
|
children: [/* @__PURE__ */ jsx("thead", {
|
|
492
509
|
children: /* @__PURE__ */ jsx("tr", {
|
|
493
510
|
children: Object.keys(data == null ? void 0 : data[0]).map((label) => /* @__PURE__ */ jsx("th", {
|
|
494
|
-
children:
|
|
511
|
+
children: /* @__PURE__ */ jsx(Text, {
|
|
512
|
+
weight: 700,
|
|
513
|
+
color: "#000",
|
|
514
|
+
children: label
|
|
515
|
+
})
|
|
495
516
|
}, label))
|
|
496
517
|
})
|
|
497
518
|
}), /* @__PURE__ */ jsx("tbody", {
|
|
498
|
-
children: data.map((row, index2) => /* @__PURE__ */ jsx("tr", {
|
|
519
|
+
children: data.slice(0, 10).map((row, index2) => /* @__PURE__ */ jsx("tr", {
|
|
499
520
|
children: Object.values(row).map((v, i) => /* @__PURE__ */ jsx("td", {
|
|
500
521
|
children: /* @__PURE__ */ jsx(Group, {
|
|
501
522
|
sx: {
|
|
@@ -624,20 +645,32 @@ function Sunbrust({
|
|
|
624
645
|
echarts.use([BarChart, LineChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
|
|
625
646
|
const defaultOption = {
|
|
626
647
|
legend: {
|
|
627
|
-
show: true
|
|
648
|
+
show: true,
|
|
649
|
+
bottom: 0,
|
|
650
|
+
left: 0
|
|
628
651
|
},
|
|
629
652
|
tooltip: {
|
|
630
653
|
trigger: "axis"
|
|
631
654
|
},
|
|
632
655
|
xAxis: {
|
|
633
|
-
type: "category"
|
|
656
|
+
type: "category",
|
|
657
|
+
nameGap: 25,
|
|
658
|
+
nameLocation: "center",
|
|
659
|
+
nameTextStyle: {
|
|
660
|
+
fontWeight: "bold"
|
|
661
|
+
}
|
|
662
|
+
},
|
|
663
|
+
yAxis: {
|
|
664
|
+
nameTextStyle: {
|
|
665
|
+
fontWeight: "bolder",
|
|
666
|
+
align: "left"
|
|
667
|
+
}
|
|
634
668
|
},
|
|
635
|
-
yAxis: {},
|
|
636
669
|
grid: {
|
|
637
670
|
top: 30,
|
|
638
|
-
left:
|
|
639
|
-
right:
|
|
640
|
-
bottom:
|
|
671
|
+
left: 15,
|
|
672
|
+
right: 15,
|
|
673
|
+
bottom: 30,
|
|
641
674
|
containLabel: true
|
|
642
675
|
}
|
|
643
676
|
};
|
|
@@ -648,29 +681,86 @@ function VizLineBarChart({
|
|
|
648
681
|
height
|
|
649
682
|
}) {
|
|
650
683
|
const option = React.useMemo(() => {
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
}
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
684
|
+
var _c, _d;
|
|
685
|
+
const valueFormatters = conf.series.reduce((ret, {
|
|
686
|
+
name,
|
|
687
|
+
y_axis_data_formatter
|
|
688
|
+
}) => {
|
|
689
|
+
ret[name] = function formatter({
|
|
690
|
+
value
|
|
691
|
+
}) {
|
|
692
|
+
if (!y_axis_data_formatter) {
|
|
693
|
+
return value;
|
|
694
|
+
}
|
|
695
|
+
try {
|
|
696
|
+
return numbro(value).format(JSON.parse(y_axis_data_formatter));
|
|
697
|
+
} catch (error) {
|
|
698
|
+
console.error(error);
|
|
699
|
+
return value;
|
|
700
|
+
}
|
|
701
|
+
};
|
|
702
|
+
return ret;
|
|
703
|
+
}, {});
|
|
661
704
|
const series = conf.series.map((_a) => {
|
|
662
705
|
var _b = _a, {
|
|
663
|
-
y_axis_data_key
|
|
706
|
+
y_axis_data_key,
|
|
707
|
+
y_axis_data_formatter,
|
|
708
|
+
name,
|
|
709
|
+
label_position = "top"
|
|
664
710
|
} = _b, rest = __objRest(_b, [
|
|
665
|
-
"y_axis_data_key"
|
|
711
|
+
"y_axis_data_key",
|
|
712
|
+
"y_axis_data_formatter",
|
|
713
|
+
"name",
|
|
714
|
+
"label_position"
|
|
666
715
|
]);
|
|
667
|
-
|
|
668
|
-
data: data.map((d) => d[y_axis_data_key])
|
|
716
|
+
const ret = __spreadValues({
|
|
717
|
+
data: data.map((d) => d[y_axis_data_key]),
|
|
718
|
+
label: {
|
|
719
|
+
show: true,
|
|
720
|
+
position: label_position
|
|
721
|
+
},
|
|
722
|
+
name
|
|
669
723
|
}, rest);
|
|
724
|
+
if (y_axis_data_formatter) {
|
|
725
|
+
ret.label.formatter = valueFormatters[name];
|
|
726
|
+
}
|
|
727
|
+
return ret;
|
|
670
728
|
});
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
729
|
+
const customOptions = {
|
|
730
|
+
xAxis: {
|
|
731
|
+
data: data.map((d) => d[conf.x_axis_data_key]),
|
|
732
|
+
name: (_c = conf.x_axis_name) != null ? _c : ""
|
|
733
|
+
},
|
|
734
|
+
yAxis: {
|
|
735
|
+
name: (_d = conf.y_axis_name) != null ? _d : ""
|
|
736
|
+
},
|
|
737
|
+
dataset: {
|
|
738
|
+
source: data
|
|
739
|
+
},
|
|
740
|
+
series,
|
|
741
|
+
tooltip: {
|
|
742
|
+
formatter: function(params) {
|
|
743
|
+
const arr = Array.isArray(params) ? params : [params];
|
|
744
|
+
if (arr.length === 0) {
|
|
745
|
+
return "";
|
|
746
|
+
}
|
|
747
|
+
const lines = arr.map(({
|
|
748
|
+
seriesName,
|
|
749
|
+
value
|
|
750
|
+
}) => {
|
|
751
|
+
if (!seriesName) {
|
|
752
|
+
return value;
|
|
753
|
+
}
|
|
754
|
+
return `${seriesName}: ${valueFormatters[seriesName]({
|
|
755
|
+
value
|
|
756
|
+
})}`;
|
|
757
|
+
});
|
|
758
|
+
lines.unshift(`<strong>${arr[0].name}</strong>`);
|
|
759
|
+
return lines.join("<br />");
|
|
760
|
+
}
|
|
761
|
+
}
|
|
762
|
+
};
|
|
763
|
+
return _.merge({}, defaultOption, customOptions);
|
|
674
764
|
}, [conf, data]);
|
|
675
765
|
if (!width || !height) {
|
|
676
766
|
return null;
|
|
@@ -1205,6 +1295,74 @@ function MantineColorSelector({
|
|
|
1205
1295
|
})]
|
|
1206
1296
|
});
|
|
1207
1297
|
}
|
|
1298
|
+
const numbroFormatExample = JSON.stringify({
|
|
1299
|
+
output: "percent",
|
|
1300
|
+
mantissa: 2
|
|
1301
|
+
}, null, 2);
|
|
1302
|
+
const labelPositions = [{
|
|
1303
|
+
label: "top",
|
|
1304
|
+
value: "top"
|
|
1305
|
+
}, {
|
|
1306
|
+
label: "left",
|
|
1307
|
+
value: "left"
|
|
1308
|
+
}, {
|
|
1309
|
+
label: "right",
|
|
1310
|
+
value: "right"
|
|
1311
|
+
}, {
|
|
1312
|
+
label: "bottom",
|
|
1313
|
+
value: "bottom"
|
|
1314
|
+
}, {
|
|
1315
|
+
label: "inside",
|
|
1316
|
+
value: "inside"
|
|
1317
|
+
}, {
|
|
1318
|
+
label: "insideLeft",
|
|
1319
|
+
value: "insideLeft"
|
|
1320
|
+
}, {
|
|
1321
|
+
label: "insideRight",
|
|
1322
|
+
value: "insideRight"
|
|
1323
|
+
}, {
|
|
1324
|
+
label: "insideTop",
|
|
1325
|
+
value: "insideTop"
|
|
1326
|
+
}, {
|
|
1327
|
+
label: "insideBottom",
|
|
1328
|
+
value: "insideBottom"
|
|
1329
|
+
}, {
|
|
1330
|
+
label: "insideTopLeft",
|
|
1331
|
+
value: "insideTopLeft"
|
|
1332
|
+
}, {
|
|
1333
|
+
label: "insideBottomLeft",
|
|
1334
|
+
value: "insideBottomLeft"
|
|
1335
|
+
}, {
|
|
1336
|
+
label: "insideTopRight",
|
|
1337
|
+
value: "insideTopRight"
|
|
1338
|
+
}, {
|
|
1339
|
+
label: "insideBottomRight",
|
|
1340
|
+
value: "insideBottomRight"
|
|
1341
|
+
}];
|
|
1342
|
+
function withDefaults(series) {
|
|
1343
|
+
function setDefaults({
|
|
1344
|
+
type,
|
|
1345
|
+
name,
|
|
1346
|
+
showSymbol,
|
|
1347
|
+
y_axis_data_key = "value",
|
|
1348
|
+
y_axis_data_formatter = "",
|
|
1349
|
+
label_position = "top",
|
|
1350
|
+
stack = "1",
|
|
1351
|
+
color = "black"
|
|
1352
|
+
}) {
|
|
1353
|
+
return {
|
|
1354
|
+
type,
|
|
1355
|
+
name,
|
|
1356
|
+
showSymbol,
|
|
1357
|
+
y_axis_data_key,
|
|
1358
|
+
y_axis_data_formatter,
|
|
1359
|
+
label_position,
|
|
1360
|
+
stack,
|
|
1361
|
+
color
|
|
1362
|
+
};
|
|
1363
|
+
}
|
|
1364
|
+
return series.map(setDefaults);
|
|
1365
|
+
}
|
|
1208
1366
|
function VizLineBarChartPanel({
|
|
1209
1367
|
conf,
|
|
1210
1368
|
setConf
|
|
@@ -1214,9 +1372,20 @@ function VizLineBarChartPanel({
|
|
|
1214
1372
|
} = _a, restConf = __objRest(_a, [
|
|
1215
1373
|
"series"
|
|
1216
1374
|
]);
|
|
1217
|
-
const initialValues = React.useMemo(() =>
|
|
1218
|
-
|
|
1219
|
-
|
|
1375
|
+
const initialValues = React.useMemo(() => {
|
|
1376
|
+
const _a2 = restConf, {
|
|
1377
|
+
x_axis_name = "",
|
|
1378
|
+
y_axis_name = ""
|
|
1379
|
+
} = _a2, rest = __objRest(_a2, [
|
|
1380
|
+
"x_axis_name",
|
|
1381
|
+
"y_axis_name"
|
|
1382
|
+
]);
|
|
1383
|
+
return __spreadValues({
|
|
1384
|
+
series: formList(withDefaults(series != null ? series : [])),
|
|
1385
|
+
x_axis_name,
|
|
1386
|
+
y_axis_name
|
|
1387
|
+
}, rest);
|
|
1388
|
+
}, [series, restConf]);
|
|
1220
1389
|
const form = useForm$1({
|
|
1221
1390
|
initialValues
|
|
1222
1391
|
});
|
|
@@ -1225,10 +1394,12 @@ function VizLineBarChartPanel({
|
|
|
1225
1394
|
name: randomId(),
|
|
1226
1395
|
showSymbol: false,
|
|
1227
1396
|
y_axis_data_key: "value",
|
|
1397
|
+
y_axis_data_formatter: "",
|
|
1398
|
+
label_position: "top",
|
|
1228
1399
|
stack: "",
|
|
1229
1400
|
color: "#000"
|
|
1230
1401
|
});
|
|
1231
|
-
React.useMemo(() => !_.isEqual(form.values, initialValues), [form.values, initialValues]);
|
|
1402
|
+
const changed = React.useMemo(() => !_.isEqual(form.values, initialValues), [form.values, initialValues]);
|
|
1232
1403
|
return /* @__PURE__ */ jsx(Group, {
|
|
1233
1404
|
direction: "column",
|
|
1234
1405
|
mt: "md",
|
|
@@ -1249,6 +1420,7 @@ function VizLineBarChartPanel({
|
|
|
1249
1420
|
mr: 5,
|
|
1250
1421
|
variant: "filled",
|
|
1251
1422
|
color: "blue",
|
|
1423
|
+
disabled: !changed,
|
|
1252
1424
|
children: /* @__PURE__ */ jsx(DeviceFloppy, {
|
|
1253
1425
|
size: 20
|
|
1254
1426
|
})
|
|
@@ -1258,6 +1430,18 @@ function VizLineBarChartPanel({
|
|
|
1258
1430
|
mb: "lg",
|
|
1259
1431
|
label: "X Axis Data Key"
|
|
1260
1432
|
}, form.getInputProps("x_axis_data_key"))), /* @__PURE__ */ jsxs(Group, {
|
|
1433
|
+
direction: "column",
|
|
1434
|
+
grow: true,
|
|
1435
|
+
noWrap: true,
|
|
1436
|
+
mb: "lg",
|
|
1437
|
+
children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
|
|
1438
|
+
size: "md",
|
|
1439
|
+
label: "X Axis Name"
|
|
1440
|
+
}, form.getInputProps("x_axis_name"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
|
|
1441
|
+
size: "md",
|
|
1442
|
+
label: "Y Axis Name"
|
|
1443
|
+
}, form.getInputProps("y_axis_name")))]
|
|
1444
|
+
}), /* @__PURE__ */ jsxs(Group, {
|
|
1261
1445
|
direction: "column",
|
|
1262
1446
|
grow: true,
|
|
1263
1447
|
children: [/* @__PURE__ */ jsx(Text, {
|
|
@@ -1274,23 +1458,52 @@ function VizLineBarChartPanel({
|
|
|
1274
1458
|
border: "1px solid #eee",
|
|
1275
1459
|
position: "relative"
|
|
1276
1460
|
},
|
|
1277
|
-
children: [/* @__PURE__ */
|
|
1278
|
-
label: "Label",
|
|
1279
|
-
required: true,
|
|
1280
|
-
sx: {
|
|
1281
|
-
flex: 1
|
|
1282
|
-
}
|
|
1283
|
-
}, form.getListInputProps("series", index2, "name"))), /* @__PURE__ */ jsxs(Group, {
|
|
1461
|
+
children: [/* @__PURE__ */ jsxs(Group, {
|
|
1284
1462
|
direction: "row",
|
|
1285
1463
|
grow: true,
|
|
1286
1464
|
noWrap: true,
|
|
1287
1465
|
children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
|
|
1288
|
-
label: "
|
|
1289
|
-
required: true
|
|
1290
|
-
|
|
1291
|
-
|
|
1466
|
+
label: "Name",
|
|
1467
|
+
required: true,
|
|
1468
|
+
sx: {
|
|
1469
|
+
flex: 1
|
|
1470
|
+
}
|
|
1471
|
+
}, form.getListInputProps("series", index2, "name"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
|
|
1472
|
+
label: "Stack",
|
|
1292
1473
|
placeholder: "Stack bars by this ID"
|
|
1293
|
-
}, form.getListInputProps("series", index2, "stack")))
|
|
1474
|
+
}, form.getListInputProps("series", index2, "stack"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
|
|
1475
|
+
label: "Value key",
|
|
1476
|
+
required: true
|
|
1477
|
+
}, form.getListInputProps("series", index2, "y_axis_data_key")))]
|
|
1478
|
+
}), /* @__PURE__ */ jsxs(Group, {
|
|
1479
|
+
direction: "row",
|
|
1480
|
+
grow: true,
|
|
1481
|
+
noWrap: true,
|
|
1482
|
+
align: "top",
|
|
1483
|
+
children: [/* @__PURE__ */ jsx(Select, __spreadValues({
|
|
1484
|
+
label: "Label Position",
|
|
1485
|
+
data: labelPositions
|
|
1486
|
+
}, form.getListInputProps("series", index2, "label_position"))), /* @__PURE__ */ jsx(JsonInput, __spreadValues({
|
|
1487
|
+
sx: {
|
|
1488
|
+
label: {
|
|
1489
|
+
width: "100%"
|
|
1490
|
+
}
|
|
1491
|
+
},
|
|
1492
|
+
label: /* @__PURE__ */ jsxs(Group, {
|
|
1493
|
+
position: "apart",
|
|
1494
|
+
children: [/* @__PURE__ */ jsx(Text, {
|
|
1495
|
+
children: "Value Formatter"
|
|
1496
|
+
}), /* @__PURE__ */ jsx(Anchor, {
|
|
1497
|
+
href: "https://numbrojs.com/format.html",
|
|
1498
|
+
target: "_blank",
|
|
1499
|
+
children: "Formats"
|
|
1500
|
+
})]
|
|
1501
|
+
}),
|
|
1502
|
+
placeholder: numbroFormatExample,
|
|
1503
|
+
minRows: 4,
|
|
1504
|
+
maxRows: 12,
|
|
1505
|
+
autosize: true
|
|
1506
|
+
}, form.getListInputProps("series", index2, "y_axis_data_formatter")))]
|
|
1294
1507
|
}), /* @__PURE__ */ jsxs(Group, {
|
|
1295
1508
|
direction: "column",
|
|
1296
1509
|
grow: true,
|
package/dist/dashboard.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(f,
|
|
1
|
+
(function(f,w){typeof exports=="object"&&typeof module!="undefined"?w(exports,require("react"),require("lodash"),require("react-grid-layout"),require("@mantine/core"),require("ahooks"),require("axios"),require("tabler-icons-react"),require("@mantine/rte"),require("@mantine/hooks"),require("echarts-for-react/lib/core"),require("echarts/core"),require("echarts/charts"),require("echarts/renderers"),require("echarts/components"),require("numbro"),require("echarts-gl"),require("react-hook-form"),require("@mantine/form"),require("@mantine/prism")):typeof define=="function"&&define.amd?define(["exports","react","lodash","react-grid-layout","@mantine/core","ahooks","axios","tabler-icons-react","@mantine/rte","@mantine/hooks","echarts-for-react/lib/core","echarts/core","echarts/charts","echarts/renderers","echarts/components","numbro","echarts-gl","react-hook-form","@mantine/form","@mantine/prism"],w):(f=typeof globalThis!="undefined"?globalThis:f||self,w(f.dashboard={},f.React,f._,f["react-grid-layout"],f["@mantine/core"],f.ahooks,f.axios,f["tabler-icons-react"],f["@mantine/rte"],f["@mantine/hooks"],f["echarts-for-react/lib/core"],f["echarts/core"],f["echarts/charts"],f["echarts/renderers"],f["echarts/components"],f.numbro,f["echarts-gl"],f["react-hook-form"],f["@mantine/form"],f["@mantine/prism"]))})(this,function(f,w,C,G,t,ee,De,v,ce,A,ze,Ie,te,ne,N,Pe,Kt,j,k,B){"use strict";var Qt=Object.defineProperty,Jt=Object.defineProperties;var Ut=Object.getOwnPropertyDescriptors;var Z=Object.getOwnPropertySymbols;var _e=Object.prototype.hasOwnProperty,Ge=Object.prototype.propertyIsEnumerable;var Te=(f,w,C)=>w in f?Qt(f,w,{enumerable:!0,configurable:!0,writable:!0,value:C}):f[w]=C,h=(f,w)=>{for(var C in w||(w={}))_e.call(w,C)&&Te(f,C,w[C]);if(Z)for(var C of Z(w))Ge.call(w,C)&&Te(f,C,w[C]);return f},O=(f,w)=>Jt(f,Ut(w));var I=(f,w)=>{var C={};for(var G in f)_e.call(f,G)&&w.indexOf(G)<0&&(C[G]=f[G]);if(f!=null&&Z)for(var G of Z(f))w.indexOf(G)<0&&Ge.call(f,G)&&(C[G]=f[G]);return C};function W(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}function Le(n){if(n&&n.__esModule)return n;var r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return n&&Object.keys(n).forEach(function(i){if(i!=="default"){var o=Object.getOwnPropertyDescriptor(n,i);Object.defineProperty(r,i,o.get?o:{enumerable:!0,get:function(){return n[i]}})}}),r.default=n,Object.freeze(r)}var u=W(w),_=W(C),ke=W(De),Ee=W(ce),re=W(ze),Q=Le(Ie),ie=W(Pe),q=(n=>(n.Use="use",n.Edit="edit",n))(q||{});const Oe={layoutFrozen:!1,freezeLayout:()=>{},mode:q.Edit,inEditMode:!1},F=u.default.createContext(Oe),pe=n=>(r,i,o={})=>{const a=h({"X-Requested-With":"XMLHttpRequest","Content-Type":o.string?"application/x-www-form-urlencoded":"application/json"},o.headers),l={baseURL:"http://localhost:31200",method:n,url:r,params:n==="GET"?i:o.params,headers:a};return n==="POST"&&(l.data=o.string?JSON.stringify(i):i),ke.default(l).then(s=>s.data).catch(s=>Promise.reject(s))},Ae=pe("GET"),qe=pe("POST");function he(n,r){const i=Object.keys(r),o=Object.values(r);try{return new Function(...i,`return \`${n}\`;`)(...o)}catch(a){throw i.length===0&&n.includes("$")?new Error("[formatSQL] insufficient params"):a}}function Me(n,r){const i=r.sqlSnippets.reduce((o,a)=>(o[a.key]=he(a.value,n),o),{});return _.default.merge({},i,n)}const me=({context:n,definitions:r,title:i,dataSource:o})=>async()=>{if(!o||!o.sql)return[];const{type:a,key:l,sql:s}=o,d=s.includes("$");try{const x=Me(n,r),m=he(s,x);return d&&(console.groupCollapsed(`Final SQL for: ${i}`),console.log(m),console.groupEnd()),await qe("/query",{type:a,key:l,sql:m})}catch(x){return console.error(x),[]}};async function Be(){try{return await Ae("/query/sources",{})}catch(n){return console.error(n),{}}}const fe={},Fe=fe,V=u.default.createContext(fe),$e={data:[],loading:!1,title:"",setTitle:()=>{},description:"",setDescription:()=>{},dataSourceID:"",setDataSourceID:()=>{},viz:{type:"",conf:{}},setViz:()=>{},refreshData:()=>{}},P=u.default.createContext($e),Re={sqlSnippets:[],setSQLSnippets:()=>{},dataSources:[],setDataSources:()=>{}},E=u.default.createContext(Re);var U={exports:{}},K={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.min.js
|
|
4
4
|
*
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var Ne=u.default,Ve=Symbol.for("react.element"),Re=Symbol.for("react.fragment"),We=Object.prototype.hasOwnProperty,Qe=Ne.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Je={key:!0,ref:!0,__self:!0,__source:!0};function xe(n,r,i){var o,a={},s=null,l=null;i!==void 0&&(s=""+i),r.key!==void 0&&(s=""+r.key),r.ref!==void 0&&(l=r.ref);for(o in r)We.call(r,o)&&!Je.hasOwnProperty(o)&&(a[o]=r[o]);if(n&&n.defaultProps)for(o in r=n.defaultProps,r)a[o]===void 0&&(a[o]=r[o]);return{$$typeof:Ve,type:n,key:s,ref:l,props:a,_owner:Qe.current}}K.Fragment=Re,K.jsx=xe,K.jsxs=xe,U.exports=K;const e=U.exports.jsx,c=U.exports.jsxs,ie=U.exports.Fragment;function ge({position:n,trigger:r="click"}){const{freezeLayout:i}=u.default.useContext(B),[o,a]=u.default.useState(!1),{description:s}=u.default.useContext(_);if(u.default.useEffect(()=>{i(o)},[o]),!s)return null;const l=r==="click"?e(t.Tooltip,{label:"Click to see description",openDelay:500,children:e(y.InfoCircle,{size:20,onClick:()=>a(d=>!d),style:{verticalAlign:"baseline",cursor:"pointer"}})}):e(y.InfoCircle,{size:20,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),style:{verticalAlign:"baseline",cursor:"pointer"}});return e(t.Popover,{opened:o,onClose:()=>a(!1),withCloseButton:!0,withArrow:!0,trapFocus:!0,closeOnEscape:!1,placement:"center",position:n,target:l,children:e(Ee.default,{readOnly:!0,value:s,onChange:w.default.noop,sx:{border:"none"}})})}function Ue(){const{description:n,setDescription:r}=u.default.useContext(_),[i,o]=u.default.useState(n),a=n!==i,s=u.default.useCallback(()=>{!a||r(i)},[a,i]);return c(t.Group,{direction:"column",sx:{flexGrow:1},children:[c(t.Group,{align:"end",children:[e(t.Text,{children:"Description"}),e(t.ActionIcon,{variant:"hover",color:"blue",disabled:!a,onClick:s,children:e(y.DeviceFloppy,{size:20})})]}),e(de.RichTextEditor,{value:i,onChange:o,sx:{flexGrow:1},sticky:!0,p:"0"})]})}class oe extends u.default.Component{constructor(r){super(r),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}render(){return this.state.hasError?e("h1",{children:"Something went wrong."}):this.props.children}}function Ke(){const{title:n}=u.default.useContext(_);return e(oe,{children:c(t.Group,{direction:"column",grow:!0,noWrap:!0,mx:"auto",mt:"xl",p:"5px",spacing:"xs",sx:{width:"600px",height:"450px",background:"transparent",borderRadius:"5px",boxShadow:"0px 0px 10px 0px rgba(0,0,0,.2)"},children:[c(t.Group,{position:"apart",noWrap:!0,sx:{borderBottom:"1px solid #eee",paddingBottom:"5px",flexGrow:0,flexShrink:0},children:[e(t.Group,{children:e(ge,{position:"bottom",trigger:"hover"})}),e(t.Group,{grow:!0,position:"center",children:e(t.Text,{lineClamp:1,weight:"bold",children:n})}),e(t.Group,{position:"right",spacing:0,sx:{height:"28px"}})]}),e(t.Group,{sx:{background:"#eee",flexGrow:1}})]})})}function Ye(){const{title:n,setTitle:r}=u.default.useContext(_),[i,o]=O.useInputState(n),a=n!==i,s=u.default.useCallback(()=>{!a||r(i)},[a,i]);return e(t.TextInput,{value:i,onChange:o,label:c(t.Group,{align:"end",children:[e(t.Text,{children:"Panel Title"}),e(t.ActionIcon,{variant:"hover",color:"blue",disabled:!a,onClick:s,children:e(y.DeviceFloppy,{size:20})})]})})}function He({}){return c(t.Group,{direction:"row",grow:!0,noWrap:!0,align:"stretch",sx:{height:"100%"},children:[c(t.Group,{grow:!0,direction:"column",sx:{width:"40%",flexShrink:0,flexGrow:0,height:"100%"},children:[e(Ye,{}),e(Ue,{})]}),e(t.Box,{sx:{height:"100%",flexGrow:1,maxWidth:"60%"},children:e(Ke,{})})]})}function be({id:n}){const r=u.default.useContext(P),i=u.default.useContext(R),o=u.default.useMemo(()=>r.dataSources.find(l=>l.id===n),[r.dataSources,n]),{data:a=[],loading:s}=ee.useRequest(fe({context:i,definitions:r,title:n,dataSource:o}),{refreshDeps:[i,r,o]});return s?e(t.LoadingOverlay,{visible:s}):a.length===0?e(t.Table,{}):c(t.Group,{my:"xl",direction:"column",grow:!0,sx:{border:"1px solid #eee"},children:[e(t.Group,{position:"left",py:"md",pl:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef"},children:e(t.Text,{weight:500,children:"Preview Data"})}),c(t.Table,{children:[e("thead",{children:e("tr",{children:Object.keys(a==null?void 0:a[0]).map(l=>e("th",{children:l},l))})}),e("tbody",{children:a.map((l,d)=>e("tr",{children:Object.values(l).map((m,p)=>e("td",{children:e(t.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace"}},children:e(t.Text,{children:m})})},`${m}--${p}`))},`row-${d}`))})]})]})}function Xe({}){const{dataSources:n}=u.default.useContext(P),{dataSourceID:r,setDataSourceID:i,data:o,loading:a}=u.default.useContext(_),s=u.default.useMemo(()=>n.map(l=>({value:l.id,label:l.id})),[n]);return c(t.Group,{direction:"column",grow:!0,noWrap:!0,children:[c(t.Group,{position:"left",sx:{maxWidth:"600px",alignItems:"baseline"},children:[e(t.Text,{children:"Select a Data Source"}),e(t.Select,{data:s,value:r,onChange:i,allowDeselect:!1,clearable:!1,sx:{flexGrow:1}})]}),e(be,{id:r})]})}Q.use([te.SunburstChart,ne.CanvasRenderer]);const Ze={tooltip:{show:!0},series:{type:"sunburst",radius:[0,"90%"],emphasis:{focus:"ancestor"}}};function et({conf:n,data:r,width:i,height:o}){const b=n,{label_field:a="name",value_field:s="value"}=b,l=z(b,["label_field","value_field"]),d=u.default.useMemo(()=>r.map(x=>({name:x[a],value:Number(x[s])})),[r,a,s]),m=u.default.useMemo(()=>{var x,S;return(S=(x=w.default.maxBy(d,T=>T.value))==null?void 0:x.value)!=null?S:1},[d]),p=u.default.useMemo(()=>({series:{label:{formatter:({name:x,value:S})=>S/m<.2?" ":x}}}),[m]),g=w.default.merge({},Ze,p,l,{series:{data:d}});return e(re.default,{echarts:Q,option:g,style:{width:i,height:o}})}Q.use([te.BarChart,te.LineChart,N.GridComponent,N.LegendComponent,N.TooltipComponent,ne.CanvasRenderer]);const tt={legend:{show:!0},tooltip:{trigger:"axis"},xAxis:{type:"category"},yAxis:{},grid:{top:30,left:10,right:10,bottom:10,containLabel:!0}};function nt({conf:n,data:r,width:i,height:o}){const a=u.default.useMemo(()=>{const s={dataset:{source:r}},l={xAxis:{data:r.map(m=>m[n.x_axis_data_key])}},d=n.series.map(g=>{var b=g,{y_axis_data_key:m}=b,p=z(b,["y_axis_data_key"]);return h({data:r.map(x=>x[m])},p)});return w.default.assign({},tt,s,l,{series:d})},[n,r]);return!i||!o?null:e(re.default,{echarts:Q,option:a,style:{width:i,height:o}})}var F=(n=>(n.string="string",n.number="number",n.eloc="eloc",n.percentage="percentage",n))(F||{});function rt({value:n}){return e(t.Text,{component:"span",children:n})}function it({value:n}){return e(t.Text,{component:"span",children:n})}function ot({value:n}){const r=ce.default(n).format({thousandSeparated:!0});return e(t.Text,{component:"span",children:r})}function at({value:n}){const r=ce.default(n).format({output:"percent",mantissa:3});return e(t.Text,{component:"span",children:r})}function lt({value:n,type:r}){switch(r){case F.string:return e(rt,{value:n});case F.eloc:return e(it,{value:n});case F.number:return e(ot,{value:n});case F.percentage:return e(at,{value:n})}}function st({conf:n,data:r,width:i,height:o}){const g=n,{id_field:a,use_raw_columns:s,columns:l}=g,d=z(g,["id_field","use_raw_columns","columns"]),m=u.default.useMemo(()=>s?Object.keys(r==null?void 0:r[0]):l.map(b=>b.label),[s,l,r]),p=u.default.useMemo(()=>s?Object.keys(r==null?void 0:r[0]).map(b=>({label:b,value_field:b,value_type:F.string})):l,[s,l,r]);return c(t.Table,E(h({sx:{maxHeight:o}},d),{children:[e("thead",{children:e("tr",{children:m.map(b=>e("th",{children:b},b))})}),e("tbody",{children:r.map((b,x)=>e("tr",{children:p.map(({value_field:S,value_type:T})=>e("td",{children:e(t.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace"}},children:e(lt,{value:b[S],type:T})})},b[S]))},a?b[a]:`row-${x}`))})]}))}function ut(n,r={}){const i=Object.keys(r),o=Object.values(r);try{return new Function(...i,`return \`${n}\`;`)(...o)}catch(a){return a.message}}function dt({conf:{paragraphs:n},data:r}){return e(ie,{children:n.map((l,s)=>{var d=l,{template:i,size:o}=d,a=z(d,["template","size"]);return e(t.Text,E(h({},a),{sx:{fontSize:o},children:ut(i,r[0])}),`${i}---${s}`)})})}Q.use([N.GridComponent,N.VisualMapComponent,N.LegendComponent,N.TooltipComponent,ne.CanvasRenderer]);function ct({conf:n,data:r,width:i,height:o}){const b=n,{x_axis_data_key:a,y_axis_data_key:s,z_axis_data_key:l}=b,d=z(b,["x_axis_data_key","y_axis_data_key","z_axis_data_key"]),m=u.default.useMemo(()=>w.default.minBy(r,x=>x[l])[l],[r,l]),p=u.default.useMemo(()=>w.default.maxBy(r,x=>x[l])[l],[r,l]),g=E(h({tooltip:{},backgroundColor:"#fff",visualMap:{show:!0,dimension:2,min:m,max:p,inRange:{color:["#313695","#4575b4","#74add1","#abd9e9","#e0f3f8","#ffffbf","#fee090","#fdae61","#f46d43","#d73027","#a50026"]}},xAxis3D:{type:"value"},yAxis3D:{type:"value"},zAxis3D:{type:"value"},grid3D:{viewControl:{projection:"orthographic",autoRotate:!1},light:{main:{shadow:!0,quality:"ultra",intensity:1.5}}}},d),{series:[{type:"bar3D",wireframe:{},data:r.map(x=>[x[a],x[s],x[l]])}]});return e(re.default,{echarts:Q,option:g,style:{width:i,height:o}})}var Jt="";function pt(n,r,i,o){const a={width:n,height:r,data:i,conf:o.conf};switch(o.type){case"sunburst":return e(et,h({},a));case"line-bar":return e(nt,h({},a));case"table":return e(st,h({},a));case"text":return e(dt,h({},a));case"bar-3d":return e(ct,h({},a));default:return null}}function Se({viz:n,data:r,loading:i}){const{ref:o,width:a,height:s}=O.useElementSize(),l=u.default.useMemo(()=>!Array.isArray(r)||r.length===0,[r]);return i?e("div",{className:"viz-root",ref:o,children:e(t.LoadingOverlay,{visible:i})}):c("div",{className:"viz-root",ref:o,children:[l&&e(t.Text,{color:"gray",align:"center",children:"nothing to show"}),!l&&pt(a,s,r,n)]})}function ht({}){const{data:n,loading:r,viz:i}=u.default.useContext(_);return e(oe,{children:e(Se,{viz:i,data:n,loading:r})})}function ft({conf:n,setConf:r}){const i=w.default.assign({},{x_axis_data_key:"x",y_axis_data_key:"y",z_axis_data_key:"z",xAxis3D:{type:"value",name:"X Axis Name"},yAxis3D:{type:"value",name:"Y Axis Name"},zAxis3D:{type:"value",name:"Z Axis Name"}},n),{control:o,handleSubmit:a,formState:s}=V.useForm({defaultValues:i});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:a(r),children:[e(t.Text,{children:"X Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(V.Controller,{name:"x_axis_data_key",control:o,render:({field:l})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Data Key"},l))}),e(V.Controller,{name:"xAxis3D.name",control:o,render:({field:l})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Name"},l))})]}),e(t.Text,{mt:"lg",children:"Y Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(V.Controller,{name:"y_axis_data_key",control:o,render:({field:l})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Data Key"},l))}),e(V.Controller,{name:"yAxis3D.name",control:o,render:({field:l})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Name"},l))})]}),e(t.Text,{mt:"lg",children:"Z Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(V.Controller,{name:"z_axis_data_key",control:o,render:({field:l})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Data Key"},l))}),e(V.Controller,{name:"zAxis3D.name",control:o,render:({field:l})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Name"},l))})]}),e(t.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"60%"},mx:"auto",children:c(t.Button,{color:"blue",type:"submit",children:[e(y.DeviceFloppy,{size:20}),e(t.Text,{ml:"md",children:"Save"})]})})]})})}function ye({value:n,onChange:r}){const i=t.useMantineTheme(),o=u.default.useMemo(()=>Object.entries(i.colors).map(([s,l])=>({label:s,value:l[6]})),[i]),a=u.default.useMemo(()=>o.some(s=>s.value===n),[n,o]);return c(t.Group,{position:"apart",spacing:"xs",children:[e(t.TextInput,{placeholder:"Set any color",value:a?"":n,onChange:s=>r(s.currentTarget.value),rightSection:e(t.ColorSwatch,{color:a?"transparent":n,radius:4}),variant:a?"filled":"default",sx:{maxWidth:"100%",flexGrow:1}}),e(t.Text,{sx:{flexGrow:0},children:"or"}),e(t.Select,{data:o,value:n,onChange:r,variant:a?"default":"filled",placeholder:"Pick a theme color",icon:e(t.ColorSwatch,{color:a?n:"transparent",radius:4}),sx:{maxWidth:"100%",flexGrow:1}})]})}function mt({conf:n,setConf:r}){const d=n,{series:i}=d,o=z(d,["series"]),a=u.default.useMemo(()=>h({series:I.formList(i!=null?i:[])},o),[i,o]),s=I.useForm({initialValues:a}),l=()=>s.addListItem("series",{type:"bar",name:O.randomId(),showSymbol:!1,y_axis_data_key:"value",stack:"",color:"#000"});return u.default.useMemo(()=>!w.default.isEqual(s.values,a),[s.values,a]),e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:s.onSubmit(r),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Chart Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),e(t.TextInput,h({size:"md",mb:"lg",label:"X Axis Data Key"},s.getInputProps("x_axis_data_key"))),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{mt:"xl",mb:0,children:"Series"}),s.values.series.map((m,p)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,h({label:"Label",required:!0,sx:{flex:1}},s.getListInputProps("series",p,"name"))),c(t.Group,{direction:"row",grow:!0,noWrap:!0,children:[e(t.TextInput,h({label:"Y Axis Data key",required:!0},s.getListInputProps("series",p,"y_axis_data_key"))),e(t.TextInput,h({label:"Stack ID",placeholder:"Stack bars by this ID"},s.getListInputProps("series",p,"stack")))]}),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Color"}),e(ye,h({},s.getListInputProps("series",p,"color")))]}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>s.removeListItem("series",p),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},p)),e(t.Group,{position:"center",mt:"xs",children:e(t.Button,{onClick:l,children:"Add a Series"})})]})]})})}function xt({conf:{label_field:n,value_field:r},setConf:i}){const o=I.useForm({initialValues:{label_field:n,value_field:r}});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:o.onSubmit(i),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Sunburst Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),c(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.TextInput,h({label:"Label Field",required:!0,sx:{flex:1}},o.getInputProps("label_field"))),e(t.TextInput,h({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},o.getInputProps("value_field")))]})]})})}const gt=Object.values(F).map(n=>({label:n,value:n}));function bt({label:n,value:r,onChange:i,sx:o}){return e(t.Select,{label:n,data:gt,value:r,onChange:i,sx:o})}function St(o){var a=o,{conf:s}=a,l=s,{columns:n}=l,r=z(l,["columns"]),{setConf:i}=a;const d=I.useForm({initialValues:h({id_field:"id",use_raw_columns:!0,columns:I.formList(n!=null?n:[]),size:"sm",horizontalSpacing:"sm",verticalSpacing:"sm",striped:!1,highlightOnHover:!1},r)}),m=()=>d.addListItem("columns",{label:O.randomId(),value_field:"value",value_type:F.string});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:d.onSubmit(i),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Table Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),c(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.TextInput,h({size:"md",mb:"lg",label:"ID Field"},d.getInputProps("id_field"))),c(t.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:[e(t.TextInput,h({label:"Horizontal Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},d.getInputProps("horizontalSpacing"))),e(t.TextInput,h({label:"Vertical Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},d.getInputProps("verticalSpacing")))]}),e(t.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:e(t.TextInput,h({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},d.getInputProps("size")))}),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Other"}),c(t.Group,{position:"apart",grow:!0,children:[e(t.Switch,h({label:"Striped"},d.getInputProps("striped",{type:"checkbox"}))),e(t.Switch,h({label:"Highlight on hover"},d.getInputProps("highlightOnHover",{type:"checkbox"})))]})]})]}),c(t.Group,{direction:"column",mt:"xs",spacing:"xs",grow:!0,p:"md",mb:"xl",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.Switch,h({label:"Use Original Data Columns"},d.getInputProps("use_raw_columns",{type:"checkbox"}))),!d.values.use_raw_columns&&c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{mt:"xl",mb:0,children:"Custom Columns"}),d.values.columns.map((p,g)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[c(t.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:[e(t.TextInput,h({label:"Label",required:!0,sx:{flex:1}},d.getListInputProps("columns",g,"label"))),e(t.TextInput,h({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},d.getListInputProps("columns",g,"value_field"))),e(bt,h({label:"Value Type",sx:{flex:1}},d.getListInputProps("columns",g,"value_type")))]}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>d.removeListItem("columns",g),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},g)),e(t.Group,{position:"center",mt:"xs",children:e(t.Button,{onClick:m,children:"Add a Column"})})]})]}),e(t.Text,{weight:500,mb:"md",children:"Current Configuration:"}),e(M.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(d.values,null,2)})]})})}const Y=[{label:"initial",value:0},{label:"500",value:25},{label:"700",value:50},{label:"semibold",value:75},{label:"bold",value:100}];function yt({label:n,value:r,onChange:i}){var s,l;const[o,a]=u.default.useState((l=(s=Y.find(d=>d.label===r))==null?void 0:s.value)!=null?l:Y[0].value);return u.default.useEffect(()=>{const d=Y.find(m=>m.value===o);d&&i(d.label)},[o]),c(t.Group,{direction:"column",grow:!0,spacing:"xs",mb:"lg",children:[e(t.Text,{children:n}),e(t.Slider,{label:null,marks:Y,value:o,onChange:a,step:25,placeholder:"Pick a font size"})]})}const ve=[{align:"center",size:"xl",weight:"bold",color:"black",template:"Time: ${new Date().toISOString()}"},{align:"center",size:"md",weight:"bold",color:"red",template:"Platform: ${navigator.userAgentData.platform}."}];function vt({conf:n,setConf:r}){var a;const i=I.useForm({initialValues:{paragraphs:I.formList((a=n.paragraphs)!=null?a:ve)}}),o=()=>i.addListItem("paragraphs",E(h({},ve[0]),{template:O.randomId()}));return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:i.onSubmit(r),children:[i.values.paragraphs.length===0&&e(t.Text,{color:"dimmed",align:"center",children:"Empty"}),c(t.Group,{position:"apart",mb:"xs",sx:{" + .mantine-Group-root":{marginTop:0}},children:[e(t.Text,{children:"Paragraphs"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),i.values.paragraphs.map((s,l)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,h({placeholder:"Time: ${new Date().toISOString()}",label:"Content Template",required:!0,sx:{flex:1}},i.getListInputProps("paragraphs",l,"template"))),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Color"}),e(ye,h({},i.getListInputProps("paragraphs",l,"color")))]}),e(t.Group,{direction:"column",grow:!0,children:e(t.TextInput,h({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",sx:{flex:1}},i.getListInputProps("paragraphs",l,"size")))}),e(t.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:e(yt,h({label:"Font Weight"},i.getListInputProps("paragraphs",l,"weight")))}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>i.removeListItem("paragraphs",l),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},l)),e(t.Group,{position:"center",mt:"md",children:e(t.Button,{onClick:o,children:"Add a Paragraph"})}),e(t.Text,{size:"sm",weight:500,mt:"md",children:"Current Configuration:"}),e(M.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(i.values,null,2)})]})})}const ae=[{value:"text",label:"Text",Panel:vt},{value:"table",label:"Table",Panel:St},{value:"sunburst",label:"Sunburst",Panel:xt},{value:"bar-3d",label:"Bar Chart (3D)",Panel:ft},{value:"line-bar",label:"Line-Bar Chart",Panel:mt}];function Ct(){const{viz:n,setViz:r}=u.default.useContext(_),[i,o]=O.useInputState(n.type),a=n.type!==i,s=u.default.useCallback(()=>{!a||r(p=>E(h({},p),{type:i}))},[a,i]),l=p=>{r(g=>E(h({},g),{conf:p}))},d=p=>{try{l(JSON.parse(p))}catch(g){console.error(g)}},m=u.default.useMemo(()=>{var p;return(p=ae.find(g=>g.value===i))==null?void 0:p.Panel},[i,ae]);return c(ie,{children:[e(t.Select,{label:"Visualization",value:i,onChange:o,data:ae,rightSection:e(t.ActionIcon,{disabled:!a,onClick:s,children:e(y.DeviceFloppy,{size:20})})}),m&&e(m,{conf:n.conf,setConf:l}),!m&&e(t.JsonInput,{minRows:20,label:"Config",value:JSON.stringify(n.conf,null,2),onChange:d})]})}function wt({}){return c(t.Group,{direction:"row",grow:!0,noWrap:!0,align:"stretch",sx:{height:"100%"},children:[e(t.Group,{grow:!0,direction:"column",noWrap:!0,sx:{width:"40%",flexShrink:0,flexGrow:0},children:e(Ct,{})}),e(t.Box,{sx:{height:"100%",flexGrow:1,maxWidth:"60%"},children:e(ht,{})})]})}function Tt({opened:n,close:r}){const{freezeLayout:i}=u.default.useContext(B),{data:o,loading:a,viz:s,title:l}=u.default.useContext(_);return u.default.useEffect(()=>{i(n)},[n]),e(t.Modal,{size:"96vw",overflow:"inside",opened:n,onClose:r,title:l,trapFocus:!0,onDragStart:d=>{d.stopPropagation()},children:e(t.AppShell,{sx:{height:"90vh",maxHeight:"calc(100vh - 185px)",".mantine-AppShell-body":{height:"100%"},main:{height:"100%",width:"100%"}},padding:"md",children:c(t.Tabs,{initialTab:2,children:[c(t.Tabs.Tab,{label:"Data Source",children:[e(t.LoadingOverlay,{visible:a}),e(Xe,{})]}),e(t.Tabs.Tab,{label:"Panel",children:e(He,{})}),e(t.Tabs.Tab,{label:"Visualization",children:e(wt,{})})]})})})}function Dt({}){const[n,r]=u.default.useState(!1),i=()=>r(!0),o=()=>r(!1),{title:a,refreshData:s}=u.default.useContext(_),{inEditMode:l}=u.default.useContext(B);return c(t.Group,{position:"apart",noWrap:!0,sx:{borderBottom:"1px solid #eee",paddingBottom:"5px"},children:[e(t.Group,{children:e(ge,{})}),e(t.Group,{grow:!0,position:"center",children:e(t.Text,{lineClamp:1,weight:"bold",children:a})}),e(t.Group,{position:"right",spacing:0,sx:{height:"28px"},children:c(t.Menu,{children:[e(t.Menu.Item,{onClick:s,icon:e(y.Refresh,{size:14}),children:"Refresh"}),l&&e(t.Menu.Item,{onClick:i,icon:e(y.Settings,{size:14}),children:"Settings"}),e(t.Divider,{}),e(t.Menu.Item,{color:"red",disabled:!0,icon:e(y.Trash,{size:14}),children:"Delete"})]})}),l&&e(Tt,{opened:n,close:o})]})}var Ut="";function le({viz:n,dataSourceID:r,title:i,description:o,update:a,layout:s,id:l}){const d=u.default.useContext(R),m=u.default.useContext(P),[p,g]=u.default.useState(i),[b,x]=u.default.useState(o),[S,T]=u.default.useState(r),[G,L]=u.default.useState(n),$=u.default.useMemo(()=>{if(!!S)return m.dataSources.find(J=>J.id===S)},[S,m.dataSources]);u.default.useEffect(()=>{a==null||a({id:l,layout:s,title:p,description:b,dataSourceID:S,viz:G})},[p,b,$,G,l,s,S]);const{data:k=[],loading:H,refresh:se}=ee.useRequest(fe({context:d,definitions:m,title:p,dataSource:$}),{refreshDeps:[d,m,$]}),ue=se;return e(_.Provider,{value:{data:k,loading:H,title:p,setTitle:g,description:b,setDescription:x,dataSourceID:S,setDataSourceID:T,viz:G,setViz:L,refreshData:ue},children:c(t.Container,{className:"panel-root",children:[e(Dt,{}),e(oe,{children:e(Se,{viz:G,data:k,loading:H})})]})})}var Kt="";const Gt=D.WidthProvider(D.Responsive);function Ce({panels:n,setPanels:r,className:i="layout",cols:o={lg:12,md:10,sm:8,xs:6,xxs:4},rowHeight:a=10,onRemoveItem:s,isDraggable:l,isResizable:d,setLocalCols:m,setBreakpoint:p}){const g=(x,S)=>{p(x),m(S)},b=u.default.useCallback(x=>{const S=new Map;x.forEach($=>{var k=$,{i:G}=k,L=z(k,["i"]);S.set(G,L)});const T=n.map(G=>E(h({},G),{layout:S.get(G.id)}));r(T)},[n,r]);return e(Gt,{onBreakpointChange:g,onLayoutChange:b,className:i,cols:o,rowHeight:a,isDraggable:l,isResizable:d,children:n.map((G,T)=>{var L=G,{id:x}=L,S=z(L,["id"]);return e("div",{"data-grid":S.layout,children:e(le,E(h({id:x},S),{destroy:()=>s(x),update:$=>{r(k=>(k.splice(T,1,$),[...k]))}}))},x)})})}function we(n,r){return c(t.Text,{sx:{svg:{verticalAlign:"text-bottom"}},children:[n," ",r]})}function _t({mode:n,setMode:r}){return e(t.SegmentedControl,{value:n,onChange:r,data:[{label:we(e(y.PlayerPlay,{size:20}),"Use"),value:q.Use},{label:we(e(y.Paint,{size:20}),"Edit"),value:q.Edit}]})}const zt=`
|
|
9
|
+
*/var Ne=u.default,je=Symbol.for("react.element"),Ve=Symbol.for("react.fragment"),We=Object.prototype.hasOwnProperty,Qe=Ne.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Je={key:!0,ref:!0,__self:!0,__source:!0};function xe(n,r,i){var o,a={},l=null,s=null;i!==void 0&&(l=""+i),r.key!==void 0&&(l=""+r.key),r.ref!==void 0&&(s=r.ref);for(o in r)We.call(r,o)&&!Je.hasOwnProperty(o)&&(a[o]=r[o]);if(n&&n.defaultProps)for(o in r=n.defaultProps,r)a[o]===void 0&&(a[o]=r[o]);return{$$typeof:je,type:n,key:l,ref:s,props:a,_owner:Qe.current}}K.Fragment=Ve,K.jsx=xe,K.jsxs=xe,U.exports=K;const e=U.exports.jsx,c=U.exports.jsxs,oe=U.exports.Fragment;function ge({position:n,trigger:r="click"}){const{freezeLayout:i}=u.default.useContext(F),[o,a]=u.default.useState(!1),{description:l}=u.default.useContext(P);if(u.default.useEffect(()=>{i(o)},[o]),!l)return null;const s=r==="click"?e(t.Tooltip,{label:"Click to see description",openDelay:500,children:e(v.InfoCircle,{size:20,onClick:()=>a(d=>!d),style:{verticalAlign:"baseline",cursor:"pointer"}})}):e(v.InfoCircle,{size:20,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),style:{verticalAlign:"baseline",cursor:"pointer"}});return e(t.Popover,{opened:o,onClose:()=>a(!1),withCloseButton:!0,withArrow:!0,trapFocus:!0,closeOnEscape:!1,placement:"center",position:n,target:s,children:e(Ee.default,{readOnly:!0,value:l,onChange:_.default.noop,sx:{border:"none"}})})}function Ue(){const{description:n,setDescription:r}=u.default.useContext(P),[i,o]=u.default.useState(n),a=n!==i,l=u.default.useCallback(()=>{!a||r(i)},[a,i]);return c(t.Group,{direction:"column",sx:{flexGrow:1},children:[c(t.Group,{align:"end",children:[e(t.Text,{children:"Description"}),e(t.ActionIcon,{variant:"hover",color:"blue",disabled:!a,onClick:l,children:e(v.DeviceFloppy,{size:20})})]}),e(ce.RichTextEditor,{value:i,onChange:o,sx:{flexGrow:1},sticky:!0,p:"0"})]})}class ae extends u.default.Component{constructor(r){super(r),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}render(){return this.state.hasError?e("h1",{children:"Something went wrong."}):this.props.children}}function Ke(){const{title:n}=u.default.useContext(P);return e(ae,{children:c(t.Group,{direction:"column",grow:!0,noWrap:!0,mx:"auto",mt:"xl",p:"5px",spacing:"xs",sx:{width:"600px",height:"450px",background:"transparent",borderRadius:"5px",boxShadow:"0px 0px 10px 0px rgba(0,0,0,.2)"},children:[c(t.Group,{position:"apart",noWrap:!0,sx:{borderBottom:"1px solid #eee",paddingBottom:"5px",flexGrow:0,flexShrink:0},children:[e(t.Group,{children:e(ge,{position:"bottom",trigger:"hover"})}),e(t.Group,{grow:!0,position:"center",children:e(t.Text,{lineClamp:1,weight:"bold",children:n})}),e(t.Group,{position:"right",spacing:0,sx:{height:"28px"}})]}),e(t.Group,{sx:{background:"#eee",flexGrow:1}})]})})}function Ye(){const{title:n,setTitle:r}=u.default.useContext(P),[i,o]=A.useInputState(n),a=n!==i,l=u.default.useCallback(()=>{!a||r(i)},[a,i]);return e(t.TextInput,{value:i,onChange:o,label:c(t.Group,{align:"end",children:[e(t.Text,{children:"Panel Title"}),e(t.ActionIcon,{variant:"hover",color:"blue",disabled:!a,onClick:l,children:e(v.DeviceFloppy,{size:20})})]})})}function He({}){return c(t.Group,{direction:"row",grow:!0,noWrap:!0,align:"stretch",sx:{height:"100%"},children:[c(t.Group,{grow:!0,direction:"column",sx:{width:"40%",flexShrink:0,flexGrow:0,height:"100%"},children:[e(Ye,{}),e(Ue,{})]}),e(t.Box,{sx:{height:"100%",flexGrow:1,maxWidth:"60%"},children:e(Ke,{})})]})}function be({id:n}){const r=u.default.useContext(E),i=u.default.useContext(V),o=u.default.useMemo(()=>r.dataSources.find(d=>d.id===n),[r.dataSources,n]),{data:a=[],loading:l,refresh:s}=ee.useRequest(me({context:i,definitions:r,title:n,dataSource:o}),{refreshDeps:[i,r,o]});return l?e(t.LoadingOverlay,{visible:l}):a.length===0?e(t.Table,{}):c(t.Group,{my:"xl",direction:"column",grow:!0,sx:{border:"1px solid #eee"},children:[c(t.Group,{position:"apart",py:"md",pl:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef"},children:[c(t.Group,{position:"left",children:[e(t.Text,{weight:500,children:"Preview Data"}),a.length>10&&c(t.Text,{size:"sm",color:"gray",children:["Showing 10 rows of ",a.length]})]}),e(t.ActionIcon,{mr:15,variant:"hover",color:"blue",disabled:l,onClick:s,children:e(v.Refresh,{size:15})})]}),c(t.Table,{children:[e("thead",{children:e("tr",{children:Object.keys(a==null?void 0:a[0]).map(d=>e("th",{children:e(t.Text,{weight:700,color:"#000",children:d})},d))})}),e("tbody",{children:a.slice(0,10).map((d,x)=>e("tr",{children:Object.values(d).map((m,p)=>e("td",{children:e(t.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace"}},children:e(t.Text,{children:m})})},`${m}--${p}`))},`row-${x}`))})]})]})}function Xe({}){const{dataSources:n}=u.default.useContext(E),{dataSourceID:r,setDataSourceID:i,data:o,loading:a}=u.default.useContext(P),l=u.default.useMemo(()=>n.map(s=>({value:s.id,label:s.id})),[n]);return c(t.Group,{direction:"column",grow:!0,noWrap:!0,children:[c(t.Group,{position:"left",sx:{maxWidth:"600px",alignItems:"baseline"},children:[e(t.Text,{children:"Select a Data Source"}),e(t.Select,{data:l,value:r,onChange:i,allowDeselect:!1,clearable:!1,sx:{flexGrow:1}})]}),e(be,{id:r})]})}Q.use([te.SunburstChart,ne.CanvasRenderer]);const Ze={tooltip:{show:!0},series:{type:"sunburst",radius:[0,"90%"],emphasis:{focus:"ancestor"}}};function et({conf:n,data:r,width:i,height:o}){const b=n,{label_field:a="name",value_field:l="value"}=b,s=I(b,["label_field","value_field"]),d=u.default.useMemo(()=>r.map(g=>({name:g[a],value:Number(g[l])})),[r,a,l]),x=u.default.useMemo(()=>{var g,S;return(S=(g=_.default.maxBy(d,y=>y.value))==null?void 0:g.value)!=null?S:1},[d]),m=u.default.useMemo(()=>({series:{label:{formatter:({name:g,value:S})=>S/x<.2?" ":g}}}),[x]),p=_.default.merge({},Ze,m,s,{series:{data:d}});return e(re.default,{echarts:Q,option:p,style:{width:i,height:o}})}Q.use([te.BarChart,te.LineChart,N.GridComponent,N.LegendComponent,N.TooltipComponent,ne.CanvasRenderer]);const tt={legend:{show:!0,bottom:0,left:0},tooltip:{trigger:"axis"},xAxis:{type:"category",nameGap:25,nameLocation:"center",nameTextStyle:{fontWeight:"bold"}},yAxis:{nameTextStyle:{fontWeight:"bolder",align:"left"}},grid:{top:30,left:15,right:15,bottom:30,containLabel:!0}};function nt({conf:n,data:r,width:i,height:o}){const a=u.default.useMemo(()=>{var x,m;const l=n.series.reduce((p,{name:b,y_axis_data_formatter:g})=>(p[b]=function({value:y}){if(!g)return y;try{return ie.default(y).format(JSON.parse(g))}catch(T){return console.error(T),y}},p),{}),s=n.series.map(T=>{var D=T,{y_axis_data_key:p,y_axis_data_formatter:b,name:g,label_position:S="top"}=D,y=I(D,["y_axis_data_key","y_axis_data_formatter","name","label_position"]);const L=h({data:r.map(z=>z[p]),label:{show:!0,position:S},name:g},y);return b&&(L.label.formatter=l[g]),L}),d={xAxis:{data:r.map(p=>p[n.x_axis_data_key]),name:(x=n.x_axis_name)!=null?x:""},yAxis:{name:(m=n.y_axis_name)!=null?m:""},dataset:{source:r},series:s,tooltip:{formatter:function(p){const b=Array.isArray(p)?p:[p];if(b.length===0)return"";const g=b.map(({seriesName:S,value:y})=>S?`${S}: ${l[S]({value:y})}`:y);return g.unshift(`<strong>${b[0].name}</strong>`),g.join("<br />")}}};return _.default.merge({},tt,d)},[n,r]);return!i||!o?null:e(re.default,{echarts:Q,option:a,style:{width:i,height:o}})}var $=(n=>(n.string="string",n.number="number",n.eloc="eloc",n.percentage="percentage",n))($||{});function rt({value:n}){return e(t.Text,{component:"span",children:n})}function it({value:n}){return e(t.Text,{component:"span",children:n})}function ot({value:n}){const r=ie.default(n).format({thousandSeparated:!0});return e(t.Text,{component:"span",children:r})}function at({value:n}){const r=ie.default(n).format({output:"percent",mantissa:3});return e(t.Text,{component:"span",children:r})}function lt({value:n,type:r}){switch(r){case $.string:return e(rt,{value:n});case $.eloc:return e(it,{value:n});case $.number:return e(ot,{value:n});case $.percentage:return e(at,{value:n})}}function st({conf:n,data:r,width:i,height:o}){const p=n,{id_field:a,use_raw_columns:l,columns:s}=p,d=I(p,["id_field","use_raw_columns","columns"]),x=u.default.useMemo(()=>l?Object.keys(r==null?void 0:r[0]):s.map(b=>b.label),[l,s,r]),m=u.default.useMemo(()=>l?Object.keys(r==null?void 0:r[0]).map(b=>({label:b,value_field:b,value_type:$.string})):s,[l,s,r]);return c(t.Table,O(h({sx:{maxHeight:o}},d),{children:[e("thead",{children:e("tr",{children:x.map(b=>e("th",{children:b},b))})}),e("tbody",{children:r.map((b,g)=>e("tr",{children:m.map(({value_field:S,value_type:y})=>e("td",{children:e(t.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace"}},children:e(lt,{value:b[S],type:y})})},b[S]))},a?b[a]:`row-${g}`))})]}))}function ut(n,r={}){const i=Object.keys(r),o=Object.values(r);try{return new Function(...i,`return \`${n}\`;`)(...o)}catch(a){return a.message}}function dt({conf:{paragraphs:n},data:r}){return e(oe,{children:n.map((s,l)=>{var d=s,{template:i,size:o}=d,a=I(d,["template","size"]);return e(t.Text,O(h({},a),{sx:{fontSize:o},children:ut(i,r[0])}),`${i}---${l}`)})})}Q.use([N.GridComponent,N.VisualMapComponent,N.LegendComponent,N.TooltipComponent,ne.CanvasRenderer]);function ct({conf:n,data:r,width:i,height:o}){const b=n,{x_axis_data_key:a,y_axis_data_key:l,z_axis_data_key:s}=b,d=I(b,["x_axis_data_key","y_axis_data_key","z_axis_data_key"]),x=u.default.useMemo(()=>_.default.minBy(r,g=>g[s])[s],[r,s]),m=u.default.useMemo(()=>_.default.maxBy(r,g=>g[s])[s],[r,s]),p=O(h({tooltip:{},backgroundColor:"#fff",visualMap:{show:!0,dimension:2,min:x,max:m,inRange:{color:["#313695","#4575b4","#74add1","#abd9e9","#e0f3f8","#ffffbf","#fee090","#fdae61","#f46d43","#d73027","#a50026"]}},xAxis3D:{type:"value"},yAxis3D:{type:"value"},zAxis3D:{type:"value"},grid3D:{viewControl:{projection:"orthographic",autoRotate:!1},light:{main:{shadow:!0,quality:"ultra",intensity:1.5}}}},d),{series:[{type:"bar3D",wireframe:{},data:r.map(g=>[g[a],g[l],g[s]])}]});return e(re.default,{echarts:Q,option:p,style:{width:i,height:o}})}var Yt="";function pt(n,r,i,o){const a={width:n,height:r,data:i,conf:o.conf};switch(o.type){case"sunburst":return e(et,h({},a));case"line-bar":return e(nt,h({},a));case"table":return e(st,h({},a));case"text":return e(dt,h({},a));case"bar-3d":return e(ct,h({},a));default:return null}}function Se({viz:n,data:r,loading:i}){const{ref:o,width:a,height:l}=A.useElementSize(),s=u.default.useMemo(()=>!Array.isArray(r)||r.length===0,[r]);return i?e("div",{className:"viz-root",ref:o,children:e(t.LoadingOverlay,{visible:i})}):c("div",{className:"viz-root",ref:o,children:[s&&e(t.Text,{color:"gray",align:"center",children:"nothing to show"}),!s&&pt(a,l,r,n)]})}function ht({}){const{data:n,loading:r,viz:i}=u.default.useContext(P);return e(ae,{children:e(Se,{viz:i,data:n,loading:r})})}function mt({conf:n,setConf:r}){const i=_.default.assign({},{x_axis_data_key:"x",y_axis_data_key:"y",z_axis_data_key:"z",xAxis3D:{type:"value",name:"X Axis Name"},yAxis3D:{type:"value",name:"Y Axis Name"},zAxis3D:{type:"value",name:"Z Axis Name"}},n),{control:o,handleSubmit:a,formState:l}=j.useForm({defaultValues:i});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:a(r),children:[e(t.Text,{children:"X Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(j.Controller,{name:"x_axis_data_key",control:o,render:({field:s})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Data Key"},s))}),e(j.Controller,{name:"xAxis3D.name",control:o,render:({field:s})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Name"},s))})]}),e(t.Text,{mt:"lg",children:"Y Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(j.Controller,{name:"y_axis_data_key",control:o,render:({field:s})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Data Key"},s))}),e(j.Controller,{name:"yAxis3D.name",control:o,render:({field:s})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Name"},s))})]}),e(t.Text,{mt:"lg",children:"Z Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(j.Controller,{name:"z_axis_data_key",control:o,render:({field:s})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Data Key"},s))}),e(j.Controller,{name:"zAxis3D.name",control:o,render:({field:s})=>e(t.TextInput,h({sx:{flexGrow:1},size:"md",label:"Name"},s))})]}),e(t.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"60%"},mx:"auto",children:c(t.Button,{color:"blue",type:"submit",children:[e(v.DeviceFloppy,{size:20}),e(t.Text,{ml:"md",children:"Save"})]})})]})})}function ve({value:n,onChange:r}){const i=t.useMantineTheme(),o=u.default.useMemo(()=>Object.entries(i.colors).map(([l,s])=>({label:l,value:s[6]})),[i]),a=u.default.useMemo(()=>o.some(l=>l.value===n),[n,o]);return c(t.Group,{position:"apart",spacing:"xs",children:[e(t.TextInput,{placeholder:"Set any color",value:a?"":n,onChange:l=>r(l.currentTarget.value),rightSection:e(t.ColorSwatch,{color:a?"transparent":n,radius:4}),variant:a?"filled":"default",sx:{maxWidth:"100%",flexGrow:1}}),e(t.Text,{sx:{flexGrow:0},children:"or"}),e(t.Select,{data:o,value:n,onChange:r,variant:a?"default":"filled",placeholder:"Pick a theme color",icon:e(t.ColorSwatch,{color:a?n:"transparent",radius:4}),sx:{maxWidth:"100%",flexGrow:1}})]})}const ft=JSON.stringify({output:"percent",mantissa:2},null,2),xt=[{label:"top",value:"top"},{label:"left",value:"left"},{label:"right",value:"right"},{label:"bottom",value:"bottom"},{label:"inside",value:"inside"},{label:"insideLeft",value:"insideLeft"},{label:"insideRight",value:"insideRight"},{label:"insideTop",value:"insideTop"},{label:"insideBottom",value:"insideBottom"},{label:"insideTopLeft",value:"insideTopLeft"},{label:"insideBottomLeft",value:"insideBottomLeft"},{label:"insideTopRight",value:"insideTopRight"},{label:"insideBottomRight",value:"insideBottomRight"}];function gt(n){function r({type:i,name:o,showSymbol:a,y_axis_data_key:l="value",y_axis_data_formatter:s="",label_position:d="top",stack:x="1",color:m="black"}){return{type:i,name:o,showSymbol:a,y_axis_data_key:l,y_axis_data_formatter:s,label_position:d,stack:x,color:m}}return n.map(r)}function bt({conf:n,setConf:r}){const x=n,{series:i}=x,o=I(x,["series"]),a=u.default.useMemo(()=>{const g=o,{x_axis_name:m="",y_axis_name:p=""}=g,b=I(g,["x_axis_name","y_axis_name"]);return h({series:k.formList(gt(i!=null?i:[])),x_axis_name:m,y_axis_name:p},b)},[i,o]),l=k.useForm({initialValues:a}),s=()=>l.addListItem("series",{type:"bar",name:A.randomId(),showSymbol:!1,y_axis_data_key:"value",y_axis_data_formatter:"",label_position:"top",stack:"",color:"#000"}),d=u.default.useMemo(()=>!_.default.isEqual(l.values,a),[l.values,a]);return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:l.onSubmit(r),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Chart Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!d,children:e(v.DeviceFloppy,{size:20})})]}),e(t.TextInput,h({size:"md",mb:"lg",label:"X Axis Data Key"},l.getInputProps("x_axis_data_key"))),c(t.Group,{direction:"column",grow:!0,noWrap:!0,mb:"lg",children:[e(t.TextInput,h({size:"md",label:"X Axis Name"},l.getInputProps("x_axis_name"))),e(t.TextInput,h({size:"md",label:"Y Axis Name"},l.getInputProps("y_axis_name")))]}),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{mt:"xl",mb:0,children:"Series"}),l.values.series.map((m,p)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[c(t.Group,{direction:"row",grow:!0,noWrap:!0,children:[e(t.TextInput,h({label:"Name",required:!0,sx:{flex:1}},l.getListInputProps("series",p,"name"))),e(t.TextInput,h({label:"Stack",placeholder:"Stack bars by this ID"},l.getListInputProps("series",p,"stack"))),e(t.TextInput,h({label:"Value key",required:!0},l.getListInputProps("series",p,"y_axis_data_key")))]}),c(t.Group,{direction:"row",grow:!0,noWrap:!0,align:"top",children:[e(t.Select,h({label:"Label Position",data:xt},l.getListInputProps("series",p,"label_position"))),e(t.JsonInput,h({sx:{label:{width:"100%"}},label:c(t.Group,{position:"apart",children:[e(t.Text,{children:"Value Formatter"}),e(t.Anchor,{href:"https://numbrojs.com/format.html",target:"_blank",children:"Formats"})]}),placeholder:ft,minRows:4,maxRows:12,autosize:!0},l.getListInputProps("series",p,"y_axis_data_formatter")))]}),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Color"}),e(ve,h({},l.getListInputProps("series",p,"color")))]}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>l.removeListItem("series",p),sx:{position:"absolute",top:15,right:5},children:e(v.Trash,{size:16})})]},p)),e(t.Group,{position:"center",mt:"xs",children:e(t.Button,{onClick:s,children:"Add a Series"})})]})]})})}function St({conf:{label_field:n,value_field:r},setConf:i}){const o=k.useForm({initialValues:{label_field:n,value_field:r}});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:o.onSubmit(i),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Sunburst Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(v.DeviceFloppy,{size:20})})]}),c(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.TextInput,h({label:"Label Field",required:!0,sx:{flex:1}},o.getInputProps("label_field"))),e(t.TextInput,h({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},o.getInputProps("value_field")))]})]})})}const vt=Object.values($).map(n=>({label:n,value:n}));function yt({label:n,value:r,onChange:i,sx:o}){return e(t.Select,{label:n,data:vt,value:r,onChange:i,sx:o})}function wt(o){var a=o,{conf:l}=a,s=l,{columns:n}=s,r=I(s,["columns"]),{setConf:i}=a;const d=k.useForm({initialValues:h({id_field:"id",use_raw_columns:!0,columns:k.formList(n!=null?n:[]),size:"sm",horizontalSpacing:"sm",verticalSpacing:"sm",striped:!1,highlightOnHover:!1},r)}),x=()=>d.addListItem("columns",{label:A.randomId(),value_field:"value",value_type:$.string});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:d.onSubmit(i),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Table Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(v.DeviceFloppy,{size:20})})]}),c(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.TextInput,h({size:"md",mb:"lg",label:"ID Field"},d.getInputProps("id_field"))),c(t.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:[e(t.TextInput,h({label:"Horizontal Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},d.getInputProps("horizontalSpacing"))),e(t.TextInput,h({label:"Vertical Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},d.getInputProps("verticalSpacing")))]}),e(t.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:e(t.TextInput,h({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},d.getInputProps("size")))}),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Other"}),c(t.Group,{position:"apart",grow:!0,children:[e(t.Switch,h({label:"Striped"},d.getInputProps("striped",{type:"checkbox"}))),e(t.Switch,h({label:"Highlight on hover"},d.getInputProps("highlightOnHover",{type:"checkbox"})))]})]})]}),c(t.Group,{direction:"column",mt:"xs",spacing:"xs",grow:!0,p:"md",mb:"xl",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.Switch,h({label:"Use Original Data Columns"},d.getInputProps("use_raw_columns",{type:"checkbox"}))),!d.values.use_raw_columns&&c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{mt:"xl",mb:0,children:"Custom Columns"}),d.values.columns.map((m,p)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[c(t.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:[e(t.TextInput,h({label:"Label",required:!0,sx:{flex:1}},d.getListInputProps("columns",p,"label"))),e(t.TextInput,h({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},d.getListInputProps("columns",p,"value_field"))),e(yt,h({label:"Value Type",sx:{flex:1}},d.getListInputProps("columns",p,"value_type")))]}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>d.removeListItem("columns",p),sx:{position:"absolute",top:15,right:5},children:e(v.Trash,{size:16})})]},p)),e(t.Group,{position:"center",mt:"xs",children:e(t.Button,{onClick:x,children:"Add a Column"})})]})]}),e(t.Text,{weight:500,mb:"md",children:"Current Configuration:"}),e(B.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(d.values,null,2)})]})})}const Y=[{label:"initial",value:0},{label:"500",value:25},{label:"700",value:50},{label:"semibold",value:75},{label:"bold",value:100}];function Ct({label:n,value:r,onChange:i}){var l,s;const[o,a]=u.default.useState((s=(l=Y.find(d=>d.label===r))==null?void 0:l.value)!=null?s:Y[0].value);return u.default.useEffect(()=>{const d=Y.find(x=>x.value===o);d&&i(d.label)},[o]),c(t.Group,{direction:"column",grow:!0,spacing:"xs",mb:"lg",children:[e(t.Text,{children:n}),e(t.Slider,{label:null,marks:Y,value:o,onChange:a,step:25,placeholder:"Pick a font size"})]})}const ye=[{align:"center",size:"xl",weight:"bold",color:"black",template:"Time: ${new Date().toISOString()}"},{align:"center",size:"md",weight:"bold",color:"red",template:"Platform: ${navigator.userAgentData.platform}."}];function Tt({conf:n,setConf:r}){var a;const i=k.useForm({initialValues:{paragraphs:k.formList((a=n.paragraphs)!=null?a:ye)}}),o=()=>i.addListItem("paragraphs",O(h({},ye[0]),{template:A.randomId()}));return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:i.onSubmit(r),children:[i.values.paragraphs.length===0&&e(t.Text,{color:"dimmed",align:"center",children:"Empty"}),c(t.Group,{position:"apart",mb:"xs",sx:{" + .mantine-Group-root":{marginTop:0}},children:[e(t.Text,{children:"Paragraphs"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(v.DeviceFloppy,{size:20})})]}),i.values.paragraphs.map((l,s)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,h({placeholder:"Time: ${new Date().toISOString()}",label:"Content Template",required:!0,sx:{flex:1}},i.getListInputProps("paragraphs",s,"template"))),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Color"}),e(ve,h({},i.getListInputProps("paragraphs",s,"color")))]}),e(t.Group,{direction:"column",grow:!0,children:e(t.TextInput,h({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",sx:{flex:1}},i.getListInputProps("paragraphs",s,"size")))}),e(t.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:e(Ct,h({label:"Font Weight"},i.getListInputProps("paragraphs",s,"weight")))}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>i.removeListItem("paragraphs",s),sx:{position:"absolute",top:15,right:5},children:e(v.Trash,{size:16})})]},s)),e(t.Group,{position:"center",mt:"md",children:e(t.Button,{onClick:o,children:"Add a Paragraph"})}),e(t.Text,{size:"sm",weight:500,mt:"md",children:"Current Configuration:"}),e(B.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(i.values,null,2)})]})})}const le=[{value:"text",label:"Text",Panel:Tt},{value:"table",label:"Table",Panel:wt},{value:"sunburst",label:"Sunburst",Panel:St},{value:"bar-3d",label:"Bar Chart (3D)",Panel:mt},{value:"line-bar",label:"Line-Bar Chart",Panel:bt}];function _t(){const{viz:n,setViz:r}=u.default.useContext(P),[i,o]=A.useInputState(n.type),a=n.type!==i,l=u.default.useCallback(()=>{!a||r(m=>O(h({},m),{type:i}))},[a,i]),s=m=>{r(p=>O(h({},p),{conf:m}))},d=m=>{try{s(JSON.parse(m))}catch(p){console.error(p)}},x=u.default.useMemo(()=>{var m;return(m=le.find(p=>p.value===i))==null?void 0:m.Panel},[i,le]);return c(oe,{children:[e(t.Select,{label:"Visualization",value:i,onChange:o,data:le,rightSection:e(t.ActionIcon,{disabled:!a,onClick:l,children:e(v.DeviceFloppy,{size:20})})}),x&&e(x,{conf:n.conf,setConf:s}),!x&&e(t.JsonInput,{minRows:20,label:"Config",value:JSON.stringify(n.conf,null,2),onChange:d})]})}function Gt({}){return c(t.Group,{direction:"row",grow:!0,noWrap:!0,align:"stretch",sx:{height:"100%"},children:[e(t.Group,{grow:!0,direction:"column",noWrap:!0,sx:{width:"40%",flexShrink:0,flexGrow:0},children:e(_t,{})}),e(t.Box,{sx:{height:"100%",flexGrow:1,maxWidth:"60%"},children:e(ht,{})})]})}function Dt({opened:n,close:r}){const{freezeLayout:i}=u.default.useContext(F),{data:o,loading:a,viz:l,title:s}=u.default.useContext(P);return u.default.useEffect(()=>{i(n)},[n]),e(t.Modal,{size:"96vw",overflow:"inside",opened:n,onClose:r,title:s,trapFocus:!0,onDragStart:d=>{d.stopPropagation()},children:e(t.AppShell,{sx:{height:"90vh",maxHeight:"calc(100vh - 185px)",".mantine-AppShell-body":{height:"100%"},main:{height:"100%",width:"100%"}},padding:"md",children:c(t.Tabs,{initialTab:2,children:[c(t.Tabs.Tab,{label:"Data Source",children:[e(t.LoadingOverlay,{visible:a}),e(Xe,{})]}),e(t.Tabs.Tab,{label:"Panel",children:e(He,{})}),e(t.Tabs.Tab,{label:"Visualization",children:e(Gt,{})})]})})})}function zt({}){const[n,r]=u.default.useState(!1),i=()=>r(!0),o=()=>r(!1),{title:a,refreshData:l}=u.default.useContext(P),{inEditMode:s}=u.default.useContext(F);return c(t.Group,{position:"apart",noWrap:!0,sx:{borderBottom:"1px solid #eee",paddingBottom:"5px"},children:[e(t.Group,{children:e(ge,{})}),e(t.Group,{grow:!0,position:"center",children:e(t.Text,{lineClamp:1,weight:"bold",children:a})}),e(t.Group,{position:"right",spacing:0,sx:{height:"28px"},children:c(t.Menu,{children:[e(t.Menu.Item,{onClick:l,icon:e(v.Refresh,{size:14}),children:"Refresh"}),s&&e(t.Menu.Item,{onClick:i,icon:e(v.Settings,{size:14}),children:"Settings"}),e(t.Divider,{}),e(t.Menu.Item,{color:"red",disabled:!0,icon:e(v.Trash,{size:14}),children:"Delete"})]})}),s&&e(Dt,{opened:n,close:o})]})}var Ht="";function se({viz:n,dataSourceID:r,title:i,description:o,update:a,layout:l,id:s}){const d=u.default.useContext(V),x=u.default.useContext(E),[m,p]=u.default.useState(i),[b,g]=u.default.useState(o),[S,y]=u.default.useState(r),[T,D]=u.default.useState(n),L=u.default.useMemo(()=>{if(!!S)return x.dataSources.find(J=>J.id===S)},[S,x.dataSources]);u.default.useEffect(()=>{a==null||a({id:s,layout:l,title:m,description:b,dataSourceID:S,viz:T})},[m,b,L,T,s,l,S]);const{data:z=[],loading:H,refresh:ue}=ee.useRequest(me({context:d,definitions:x,title:m,dataSource:L}),{refreshDeps:[d,x,L]}),de=ue;return e(P.Provider,{value:{data:z,loading:H,title:m,setTitle:p,description:b,setDescription:g,dataSourceID:S,setDataSourceID:y,viz:T,setViz:D,refreshData:de},children:c(t.Container,{className:"panel-root",children:[e(zt,{}),e(ae,{children:e(Se,{viz:T,data:z,loading:H})})]})})}var Xt="";const It=G.WidthProvider(G.Responsive);function we({panels:n,setPanels:r,className:i="layout",cols:o={lg:12,md:10,sm:8,xs:6,xxs:4},rowHeight:a=10,onRemoveItem:l,isDraggable:s,isResizable:d,setLocalCols:x,setBreakpoint:m}){const p=(g,S)=>{m(g),x(S)},b=u.default.useCallback(g=>{const S=new Map;g.forEach(L=>{var z=L,{i:T}=z,D=I(z,["i"]);S.set(T,D)});const y=n.map(T=>O(h({},T),{layout:S.get(T.id)}));r(y)},[n,r]);return e(It,{onBreakpointChange:p,onLayoutChange:b,className:i,cols:o,rowHeight:a,isDraggable:s,isResizable:d,children:n.map((T,y)=>{var D=T,{id:g}=D,S=I(D,["id"]);return e("div",{"data-grid":S.layout,children:e(se,O(h({id:g},S),{destroy:()=>l(g),update:L=>{r(z=>(z.splice(y,1,L),[...z]))}}))},g)})})}function Ce(n,r){return c(t.Text,{sx:{svg:{verticalAlign:"text-bottom"}},children:[n," ",r]})}function Pt({mode:n,setMode:r}){return e(t.SegmentedControl,{value:n,onChange:r,data:[{label:Ce(e(v.PlayerPlay,{size:20}),"Use"),value:q.Use},{label:Ce(e(v.Paint,{size:20}),"Edit"),value:q.Edit}]})}const Lt=`
|
|
10
10
|
-- You may reference context data or SQL snippets *by name*
|
|
11
11
|
-- in SQL or VizConfig.
|
|
12
12
|
SELECT *
|
|
@@ -17,16 +17,16 @@ WHERE
|
|
|
17
17
|
-- SQL snippets
|
|
18
18
|
AND \${author_email_condition}
|
|
19
19
|
\${order_by_clause}
|
|
20
|
-
`;function
|
|
20
|
+
`;function kt({}){const n=u.default.useContext(V),{sqlSnippets:r}=u.default.useContext(E),i=u.default.useMemo(()=>{const a=r.reduce((l,s)=>(l[s.key]=s.value,l),{});return JSON.stringify(a,null,2)},[r]),o=u.default.useMemo(()=>JSON.stringify(n,null,2),[n]);return c(t.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee",maxWidth:"48%",overflow:"hidden"},children:[e(t.Group,{position:"left",pl:"md",py:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef",flexGrow:0},children:e(t.Text,{weight:500,children:"Context"})}),c(t.Group,{direction:"column",px:"md",pb:"md",sx:{width:"100%"},children:[e(B.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:Lt}),e(t.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable context"}),e(B.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:o}),e(t.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable SQL Snippets"}),e(B.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:i})]})]})}function Et({value:n,onChange:r}){const i=k.useForm({initialValues:n}),o=u.default.useCallback(m=>{r(m)},[r]),a=u.default.useMemo(()=>!_.default.isEqual(n,i.values),[n,i.values]);u.default.useEffect(()=>{i.reset()},[n]);const{data:l={},loading:s}=ee.useRequest(Be,{refreshDeps:[]},[]),d=u.default.useMemo(()=>Object.keys(l).map(m=>({label:m,value:m})),[l]),x=u.default.useMemo(()=>{const m=l[i.values.type];return m?m.map(p=>({label:p,value:p})):[]},[l,i.values.type]);return e(t.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee",flexGrow:1},children:c("form",{onSubmit:i.onSubmit(o),children:[c(t.Group,{position:"left",py:"md",pl:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef"},children:[e(t.Text,{weight:500,children:"Data Source Configuration"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!a||s,children:e(v.DeviceFloppy,{size:20})})]}),c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,children:[c(t.Group,{grow:!0,children:[e(t.TextInput,h({placeholder:"An ID unique in this dashboard",label:"ID",required:!0,sx:{flex:1},disabled:s},i.getInputProps("id"))),e(t.Select,h({label:"Data Source Type",data:d,sx:{flex:1},disabled:s},i.getInputProps("type"))),e(t.Select,h({label:"Data Source Key",data:x,sx:{flex:1},disabled:s},i.getInputProps("key")))]}),e(t.Textarea,h({autosize:!0,minRows:12,maxRows:24},i.getInputProps("sql")))]})]})})}function Ot({id:n}){const{dataSources:r,setDataSources:i}=u.default.useContext(E),o=u.default.useMemo(()=>r.find(l=>l.id===n),[r,n]),a=u.default.useCallback(l=>{if(!r.findIndex(d=>d.id===n)){console.error(new Error("Invalid data source id when updating by id"));return}i(d=>{const x=d.findIndex(m=>m.id===n);return d.splice(x,1,l),[...d]})},[n,i]);return o?c(t.Group,{direction:"row",position:"apart",grow:!0,align:"stretch",noWrap:!0,children:[e(Et,{value:o,onChange:a}),e(kt,{})]}):e("span",{children:"Invalid Data Source ID"})}function At({id:n,setID:r}){const{dataSources:i,setDataSources:o}=u.default.useContext(E),a=u.default.useCallback(()=>{var d,x;r((x=(d=i[0])==null?void 0:d.id)!=null?x:"")},[r,i]);u.default.useEffect(()=>{if(!n){a();return}i.findIndex(x=>x.id===n)===-1&&a()},[n,i,a]);const l=u.default.useMemo(()=>i.map(d=>({value:d.id,label:d.id})),[i]),s=u.default.useCallback(()=>{const d={id:A.randomId(),type:"postgresql",key:"",sql:""};o(x=>[...x,d]),r(d.id)},[o,r]);return e(t.Group,{pb:"xl",children:c(t.Group,{position:"left",sx:{maxWidth:"600px",alignItems:"baseline"},children:[e(t.Text,{children:"Select a Data Source"}),e(t.Select,{data:l,value:n,onChange:r,allowDeselect:!1,clearable:!1,sx:{flexGrow:1}}),e(t.Text,{children:"or"}),e(t.Group,{position:"center",mt:"md",children:e(t.Button,{onClick:s,children:"Add a Data Source"})})]})})}function qt({opened:n,close:r}){const[i,o]=u.default.useState(""),{freezeLayout:a}=u.default.useContext(F);return u.default.useEffect(()=>{a(n)},[n]),e(t.Modal,{size:"96vw",overflow:"inside",opened:n,onClose:r,title:"Data Sources",trapFocus:!0,onDragStart:l=>{l.stopPropagation()},children:c(t.AppShell,{sx:{height:"90vh",maxHeight:"calc(100vh - 185px)",".mantine-AppShell-body":{height:"100%"},main:{height:"100%",width:"100%",padding:0,margin:0}},padding:"md",header:e(At,{id:i,setID:o}),children:[e(Ot,{id:i}),e(be,{id:i})]})})}function Mt({}){const n=u.default.useContext(V),r="SELECT *\nFROM commit\nWHERE author_time BETWEEN '${timeRange?.[0].toISOString()}' AND '${timeRange?.[1].toISOString()}'";return c(t.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee",maxWidth:"48%",overflow:"hidden"},children:[e(t.Group,{position:"left",pl:"md",py:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef",flexGrow:0},children:e(t.Text,{weight:500,children:"Context"})}),c(t.Group,{direction:"column",px:"md",pb:"md",sx:{width:"100%"},children:[e(B.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:`-- You may refer context data *by name*
|
|
21
21
|
-- in SQL or VizConfig.
|
|
22
22
|
|
|
23
|
-
${r}`}),e(t.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable context entries"}),e(
|
|
23
|
+
${r}`}),e(t.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable context entries"}),e(B.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:JSON.stringify(n,null,2)})]})]})}function Bt({}){const{sqlSnippets:n,setSQLSnippets:r}=u.default.useContext(E),i=`SELECT *
|
|
24
24
|
FROM commit
|
|
25
|
-
WHERE \${author_time_condition}`,o=u.default.useMemo(()=>({snippets:
|
|
25
|
+
WHERE \${author_time_condition}`,o=u.default.useMemo(()=>({snippets:k.formList(n!=null?n:[])}),[n]),a=k.useForm({initialValues:o}),l=()=>a.addListItem("snippets",{key:A.randomId(),value:""}),s=u.default.useMemo(()=>!_.default.isEqual(a.values,o),[a.values,o]),d=({snippets:x})=>{r(x)};return c(t.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee"},children:[c(t.Group,{position:"left",pl:"md",py:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef",flexGrow:0},children:[e(t.Text,{weight:500,children:"SQL Snippets"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!s,children:e(v.DeviceFloppy,{size:20})})]}),c(t.Group,{px:"md",pb:"md",children:[e(B.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,trim:!1,colorScheme:"dark",children:`-- You may refer context data *by name*
|
|
26
26
|
-- in SQL or VizConfig.
|
|
27
27
|
|
|
28
28
|
${i}
|
|
29
29
|
|
|
30
30
|
-- where author_time_condition is:
|
|
31
31
|
author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
|
|
32
|
-
`}),e(t.Group,{direction:"column",sx:{width:"100%",position:"relative"},grow:!0,children:c("form",{onSubmit:a.onSubmit(d),children:[a.values.snippets.map((m
|
|
32
|
+
`}),e(t.Group,{direction:"column",sx:{width:"100%",position:"relative"},grow:!0,children:c("form",{onSubmit:a.onSubmit(d),children:[a.values.snippets.map((x,m)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,h({label:"Key",required:!0},a.getListInputProps("snippets",m,"key"))),e(t.Textarea,h({minRows:3,label:"Value",required:!0},a.getListInputProps("snippets",m,"value"))),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>a.removeListItem("snippets",m),sx:{position:"absolute",top:15,right:5},children:e(v.Trash,{size:16})})]},m)),e(t.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"40%"},mx:"auto",children:e(t.Button,{variant:"default",onClick:l,children:"Add a snippet"})})]})})]})]})}function Ft({opened:n,close:r}){const{freezeLayout:i}=u.default.useContext(F);return u.default.useEffect(()=>{i(n)},[n]),e(t.Modal,{size:"96vw",overflow:"inside",opened:n,onClose:r,title:"SQL Snippets",trapFocus:!0,onDragStart:o=>{o.stopPropagation()},children:e(t.AppShell,{sx:{height:"90vh",maxHeight:"calc(100vh - 185px)",".mantine-AppShell-body":{height:"100%"},main:{height:"100%",width:"100%",padding:0,margin:0}},padding:"md",children:c(t.Group,{direction:"row",position:"apart",grow:!0,align:"stretch",noWrap:!0,children:[e(Bt,{}),e(Mt,{})]})})})}function $t({mode:n,setMode:r,hasChanges:i,addPanel:o,saveChanges:a}){const[l,s]=u.default.useState(!1),d=()=>s(!0),x=()=>s(!1),[m,p]=u.default.useState(!1),b=()=>p(!0),g=()=>p(!1),S=n===q.Edit;return c(t.Group,{position:"apart",pt:"sm",pb:"xs",children:[e(t.Group,{position:"left",children:e(Pt,{mode:n,setMode:r})}),S&&c(oe,{children:[c(t.Group,{position:"right",children:[e(t.Button,{variant:"default",size:"sm",onClick:o,leftIcon:e(v.PlaylistAdd,{size:20}),children:"Add a Panel"}),e(t.Button,{variant:"default",size:"sm",onClick:b,leftIcon:e(v.ClipboardText,{size:20}),children:"SQL Snippets"}),e(t.Button,{variant:"default",size:"sm",onClick:d,leftIcon:e(v.Database,{size:20}),children:"Data Sources"}),e(t.Button,{variant:"default",size:"sm",onClick:a,disabled:!i,leftIcon:e(v.DeviceFloppy,{size:20}),children:"Save Changes"}),e(t.Button,{color:"red",size:"sm",disabled:!i,leftIcon:e(v.Recycle,{size:20}),children:"Revert Changes"})]}),e(qt,{opened:l,close:x}),e(Ft,{opened:m,close:g})]}),!S&&e(t.Button,{variant:"default",size:"sm",disabled:!0,leftIcon:e(v.Share,{size:20}),children:"Share"})]})}function Rt({context:n,dashboard:r,update:i,className:o="dashboard"}){const[a,l]=u.default.useState(!1),[s,d]=u.default.useState(),[x,m]=u.default.useState(),[p,b]=u.default.useState(r.panels),[g,S]=u.default.useState(r.definition.sqlSnippets),[y,T]=u.default.useState(r.definition.dataSources),[D,L]=u.default.useState(q.Edit),z=u.default.useMemo(()=>{const M=R=>JSON.parse(JSON.stringify(R));return!_.default.isEqual(M(p),M(r.panels))||!_.default.isEqual(g,r.definition.sqlSnippets)?!0:!_.default.isEqual(y,r.definition.dataSources)},[r,p,g,y]),H=async()=>{const M=_.default.merge({},r,{panels:p},{definition:{sqlSnippets:g,dataSources:y}});await i(M)},ue=()=>{const M=A.randomId(),X={id:M,layout:{x:0,y:1/0,w:3,h:4},title:`New Panel - ${M}`,description:"description goes here",dataSourceID:"",viz:{type:"table",conf:{}}};b(R=>[...R,X])},de=M=>{const X=p.findIndex(R=>R.id===M);b(R=>(R.splice(X,1),[...R]))},J=D===q.Edit,Wt=u.default.useMemo(()=>({sqlSnippets:g,setSQLSnippets:S,dataSources:y,setDataSources:T}),[g,S,y,T]);return e(V.Provider,{value:n,children:e("div",{className:o,children:e(E.Provider,{value:Wt,children:c(F.Provider,{value:{layoutFrozen:a,freezeLayout:l,mode:D,inEditMode:J},children:[e($t,{mode:D,setMode:L,hasChanges:z,addPanel:ue,saveChanges:H}),e(we,{panels:p,setPanels:b,isDraggable:J&&!a,isResizable:J&&!a,onRemoveItem:de,setLocalCols:m,setBreakpoint:d})]})})})})}const Nt=G.WidthProvider(G.Responsive);function jt({panels:n,className:r="layout",cols:i={lg:12,md:10,sm:8,xs:6,xxs:4},rowHeight:o=10}){return e(Nt,{className:r,cols:i,rowHeight:o,isDraggable:!1,isResizable:!1,children:n.map(s=>{var d=s,{id:a}=d,l=I(d,["id"]);return e("div",{"data-grid":l.layout,children:e(se,h({id:a},l))},a)})})}function Vt({context:n,dashboard:r,className:i="dashboard"}){const o=u.default.useMemo(()=>O(h({},r.definition),{setSQLSnippets:()=>{},setDataSources:()=>{}}),[r]);return e(V.Provider,{value:n,children:e("div",{className:i,children:e(E.Provider,{value:o,children:e(F.Provider,{value:{layoutFrozen:!0,freezeLayout:()=>{},mode:q.Use,inEditMode:!1},children:e(jt,{panels:r.panels})})})})})}f.ContextInfoContext=V,f.Dashboard=Rt,f.DashboardLayout=we,f.DashboardMode=q,f.DefinitionContext=E,f.LayoutStateContext=F,f.Panel=se,f.PanelContext=P,f.ReadOnlyDashboard=Vt,f.initialContextInfoContext=Fe,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|