@devtable/dashboard 1.11.0 → 1.12.0

package/dist/dashboard.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 import React from "react";
 import _ from "lodash";
 import { WidthProvider, Responsive } from "react-grid-layout";
-import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, JsonInput, Anchor, Slider, ColorInput, Accordion, Switch, Modal, AppShell, Tabs, Menu, Divider, Container, SegmentedControl, Textarea } from "@mantine/core";
+import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, SegmentedControl, NumberInput, Switch, Slider, ColorInput, Accordion, JsonInput, Modal, AppShell, Tabs, Menu, Divider, Container, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
 import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, ClipboardText, Database, Recycle, Share } from "tabler-icons-react";
@@ -49,8 +49,8 @@ import { CanvasRenderer } from "echarts/renderers";
 import { GridComponent, LegendComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
 import numbro from "numbro";
 import "echarts-gl";
-import { useForm, Controller } from "react-hook-form";
-import { formList, useForm as useForm$1 } from "@mantine/form";
+import { useForm, Controller, useFieldArray } from "react-hook-form";
+import { useForm as useForm$1, formList } from "@mantine/form";
 import { Prism } from "@mantine/prism";
 var DashboardMode = /* @__PURE__ */ ((DashboardMode2) => {
   DashboardMode2["Use"] = "use";
@@ -668,12 +668,6 @@ const defaultOption$1 = {
       fontWeight: "bold"
     }
   },
-  yAxis: {
-    nameTextStyle: {
-      fontWeight: "bolder",
-      align: "left"
-    }
-  },
   grid: {
     top: 30,
     left: 15,
@@ -689,49 +683,57 @@ function VizCartesianChart({
   height
 }) {
   const option = React.useMemo(() => {
-    var _c, _d;
-    const valueFormatters = conf.series.reduce((ret, {
-      name,
-      y_axis_data_formatter
-    }) => {
-      ret[name] = function formatter({
-        value
-      }) {
-        if (!y_axis_data_formatter) {
+    var _c;
+    const labelFormatters = conf.y_axes.reduce((ret, {
+      label_formatter
+    }, index2) => {
+      ret[index2] = function formatter(payload) {
+        const value = typeof payload === "object" ? payload.value : payload;
+        if (!label_formatter) {
           return value;
         }
         try {
-          return numbro(value).format(JSON.parse(y_axis_data_formatter));
+          return numbro(value).format(label_formatter);
         } catch (error) {
           console.error(error);
           return value;
         }
       };
       return ret;
+    }, {
+      default: ({
+        value
+      }) => value
+    });
+    const yAxisIndexMap = conf.series.reduce((ret, {
+      yAxisIndex,
+      name
+    }) => {
+      ret[name] = yAxisIndex;
+      return ret;
     }, {});
     const series = conf.series.map((_a) => {
       var _b = _a, {
         y_axis_data_key,
-        y_axis_data_formatter,
-        name,
-        label_position
+        yAxisIndex,
+        label_position,
+        name
       } = _b, rest = __objRest(_b, [
         "y_axis_data_key",
-        "y_axis_data_formatter",
-        "name",
-        "label_position"
+        "yAxisIndex",
+        "label_position",
+        "name"
       ]);
       const ret = __spreadValues({
         data: data.map((d) => d[y_axis_data_key]),
         label: {
           show: !!label_position,
-          position: label_position
+          position: label_position,
+          formatter: labelFormatters[yAxisIndex != null ? yAxisIndex : "default"]
         },
-        name
+        name,
+        yAxisIndex
       }, rest);
-      if (y_axis_data_formatter) {
-        ret.label.formatter = valueFormatters[name];
-      }
       return ret;
     });
     const customOptions = {
@@ -739,9 +741,20 @@ function VizCartesianChart({
         data: data.map((d) => d[conf.x_axis_data_key]),
         name: (_c = conf.x_axis_name) != null ? _c : ""
       },
-      yAxis: {
-        name: (_d = conf.y_axis_name) != null ? _d : ""
-      },
+      yAxis: conf.y_axes.map((_d, index2) => {
+        var _e = _d, {
+          label_formatter
+        } = _e, rest = __objRest(_e, [
+          "label_formatter"
+        ]);
+        var _a;
+        return __spreadProps(__spreadValues({}, rest), {
+          axisLabel: {
+            show: true,
+            formatter: (_a = labelFormatters[index2]) != null ? _a : labelFormatters.default
+          }
+        });
+      }),
       dataset: {
         source: data
       },
@@ -756,10 +769,13 @@ function VizCartesianChart({
             seriesName,
             value
           }) => {
+            var _a;
             if (!seriesName) {
               return value;
             }
-            return `${seriesName}: ${valueFormatters[seriesName]({
+            const yAxisIndex = yAxisIndexMap[seriesName];
+            const formatter = (_a = labelFormatters[yAxisIndex]) != null ? _a : labelFormatters.default;
+            return `${seriesName}: ${formatter({
               value
             })}`;
           });
@@ -1819,10 +1835,6 @@ function MantineColorSelector({
     })]
   });
 }
-const numbroFormatExample = JSON.stringify({
-  output: "percent",
-  mantissa: 2
-}, null, 2);
 const labelPositions = [{
   label: "off",
   value: ""
@@ -1867,13 +1879,13 @@ const labelPositions = [{
   value: "insideBottomRight"
 }];
 function SeriesItemField({
-  form,
-  index: index2
+  control,
+  index: index2,
+  remove,
+  seriesItem,
+  yAxisOptions
 }) {
-  const value = form.values.series[index2];
-  const {
-    type
-  } = value;
+  const type = seriesItem.type;
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,
@@ -1884,108 +1896,400 @@ function SeriesItemField({
       border: "1px solid #eee",
       position: "relative"
     },
-    children: [/* @__PURE__ */ jsxs(Group, {
-      direction: "row",
+    children: [/* @__PURE__ */ jsx(Group, {
+      direction: "column",
       grow: true,
       noWrap: true,
-      children: [/* @__PURE__ */ jsx(Select, __spreadValues({
-        label: "Type",
-        data: [{
-          label: "Line",
-          value: "line"
-        }, {
-          label: "Bar",
-          value: "bar"
-        }, {
-          label: "Scatter",
-          value: "scatter",
-          disabled: true
-        }]
-      }, form.getListInputProps("series", index2, "type"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+      children: /* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.type`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(SegmentedControl, __spreadValues({
+          data: [{
+            label: "Line",
+            value: "line"
+          }, {
+            label: "Bar",
+            value: "bar"
+          }, {
+            label: "Scatter",
+            value: "scatter",
+            disabled: true
+          }, {
+            label: "Boxplot",
+            value: "boxplot",
+            disabled: true
+          }]
+        }, field))
+      })
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.name`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
         label: "Name",
         required: true,
         sx: {
           flex: 1
         }
-      }, form.getListInputProps("series", index2, "name"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-        label: "Value key",
-        required: true
-      }, form.getListInputProps("series", index2, "y_axis_data_key")))]
+      }, field))
     }), /* @__PURE__ */ jsxs(Group, {
       direction: "row",
       grow: true,
       noWrap: true,
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.y_axis_data_key`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Value key",
+          required: true,
+          sx: {
+            flex: 1
+          }
+        }, field))
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.yAxisIndex`,
+        control,
+        render: (_a) => {
+          var {
+            field: _b
+          } = _a, _c = _b, {
+            value,
+            onChange
+          } = _c, rest = __objRest(_c, [
+            "value",
+            "onChange"
+          ]);
+          var _a2;
+          return /* @__PURE__ */ jsx(Select, __spreadProps(__spreadValues({
+            label: "Y Axis",
+            data: yAxisOptions,
+            disabled: yAxisOptions.length === 0
+          }, rest), {
+            value: (_a2 = value == null ? void 0 : value.toString()) != null ? _a2 : "",
+            onChange: (value2) => {
+              if (!value2) {
+                onChange(0);
+                return;
+              }
+              onChange(Number(value2));
+            },
+            sx: {
+              flex: 1
+            }
+          }));
+        }
+      })]
+    }), type === "bar" && /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      grow: true,
       align: "top",
-      children: [type === "bar" && /* @__PURE__ */ jsx(Fragment, {
-        children: /* @__PURE__ */ jsx(TextInput, __spreadValues({
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.stack`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
           label: "Stack",
-          placeholder: "Stack bars by this ID"
-        }, form.getListInputProps("series", index2, "stack")))
-      }), /* @__PURE__ */ jsx(Select, __spreadValues({
+          placeholder: "Stack bars by this ID",
+          sx: {
+            flexGrow: 1
+          }
+        }, field))
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.barWidth`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Bar Width",
+          sx: {
+            flexGrow: 1
+          }
+        }, field))
+      })]
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.label_position`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(Select, __spreadValues({
         label: "Label Position",
         data: labelPositions
-      }, form.getListInputProps("series", index2, "label_position"))), /* @__PURE__ */ jsx(JsonInput, __spreadValues({
-        sx: {
-          label: {
-            width: "100%"
-          }
-        },
-        label: /* @__PURE__ */ jsxs(Group, {
-          position: "apart",
-          children: [/* @__PURE__ */ jsx(Text, {
-            children: "Value Formatter"
-          }), /* @__PURE__ */ jsx(Anchor, {
-            href: "https://numbrojs.com/format.html",
-            target: "_blank",
-            children: "Formats"
-          })]
-        }),
-        placeholder: numbroFormatExample,
-        minRows: 4,
-        maxRows: 12,
-        autosize: true
-      }, form.getListInputProps("series", index2, "y_axis_data_formatter")))]
+      }, field))
     }), /* @__PURE__ */ jsxs(Group, {
       direction: "column",
       grow: true,
+      spacing: 4,
       children: [/* @__PURE__ */ jsx(Text, {
+        size: "sm",
         children: "Color"
-      }), /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, form.getListInputProps("series", index2, "color")))]
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `series.${index2}.color`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, field))
+      })]
+    }), /* @__PURE__ */ jsx(ActionIcon, {
+      color: "red",
+      variant: "hover",
+      onClick: () => remove(index2),
+      sx: {
+        position: "absolute",
+        top: 15,
+        right: 5
+      },
+      children: /* @__PURE__ */ jsx(Trash, {
+        size: 16
+      })
+    })]
+  }, index2);
+}
+function SeriesField({
+  control,
+  watch,
+  getValues
+}) {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: "series"
+  });
+  const watchFieldArray = watch("y_axes");
+  const controlledFields = fields.map((field, index2) => {
+    return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
+  });
+  const addSeries = () => append({
+    type: "bar",
+    name: randomId(),
+    showSymbol: false,
+    y_axis_data_key: "value",
+    yAxisIndex: 0,
+    label_position: "top",
+    stack: "",
+    color: "#000"
+  });
+  const yAxisOptions = React.useMemo(() => {
+    return getValues().y_axes.map(({
+      name
+    }, index2) => ({
+      label: name,
+      value: index2.toString()
+    }));
+  }, [getValues]);
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    children: [/* @__PURE__ */ jsx(Text, {
+      mt: "xl",
+      mb: 0,
+      children: "Series"
+    }), controlledFields.map((seriesItem, index2) => /* @__PURE__ */ jsx(SeriesItemField, {
+      control,
+      index: index2,
+      remove,
+      seriesItem,
+      yAxisOptions
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: addSeries,
+        children: "Add a Series"
+      })
+    })]
+  });
+}
+const defaultNumbroFormat = {
+  mantissa: 0,
+  output: "number"
+};
+function NumbroFormatSelector({
+  value,
+  onChange
+}) {
+  const changeOutput = (output) => {
+    onChange(__spreadProps(__spreadValues({}, value), {
+      output
+    }));
+  };
+  const changeMantissa = (mantissa) => {
+    const trimMantissa = mantissa === 0 ? false : value.trimMantissa;
+    onChange(__spreadProps(__spreadValues({}, value), {
+      mantissa,
+      trimMantissa
+    }));
+  };
+  const changeTrimMantissa = (event) => {
+    onChange(__spreadProps(__spreadValues({}, value), {
+      trimMantissa: event.currentTarget.checked
+    }));
+  };
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "column",
+    grow: true,
+    noWrap: true,
+    children: /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      grow: true,
+      children: [/* @__PURE__ */ jsx(Select, {
+        label: "Format",
+        data: [{
+          label: "1234",
+          value: "number"
+        }, {
+          label: "99%",
+          value: "percent"
+        }],
+        value: value.output,
+        onChange: changeOutput
+      }), /* @__PURE__ */ jsx(NumberInput, {
+        label: "Mantissa",
+        defaultValue: 0,
+        min: 0,
+        step: 1,
+        max: 4,
+        value: value.mantissa,
+        onChange: changeMantissa
+      }), /* @__PURE__ */ jsx(Switch, {
+        label: "Trim mantissa",
+        checked: value.trimMantissa,
+        onChange: changeTrimMantissa,
+        disabled: value.mantissa === 0
+      })]
+    })
+  });
+}
+function YAxisField({
+  control,
+  index: index2,
+  remove
+}) {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    my: 0,
+    p: "md",
+    pr: 40,
+    sx: {
+      border: "1px solid #eee",
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ jsx(Group, {
+      direction: "row",
+      grow: true,
+      noWrap: true,
+      children: /* @__PURE__ */ jsx(Controller, {
+        name: `y_axes.${index2}.name`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Name",
+          required: true,
+          sx: {
+            flex: 1
+          }
+        }, field))
+      })
+    }), /* @__PURE__ */ jsx(Group, {
+      direction: "column",
+      grow: true,
+      noWrap: true,
+      children: /* @__PURE__ */ jsx(Controller, {
+        name: `y_axes.${index2}.label_formatter`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(NumbroFormatSelector, __spreadValues({}, field))
+      })
     }), /* @__PURE__ */ jsx(ActionIcon, {
       color: "red",
       variant: "hover",
-      onClick: () => form.removeListItem("series", index2),
+      onClick: () => remove(index2),
       sx: {
         position: "absolute",
         top: 15,
         right: 5
       },
+      disabled: index2 === 0,
       children: /* @__PURE__ */ jsx(Trash, {
         size: 16
       })
     })]
   }, index2);
 }
+function YAxesField({
+  control,
+  watch
+}) {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: "y_axes"
+  });
+  const watchFieldArray = watch("y_axes");
+  const controlledFields = fields.map((field, index2) => {
+    return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
+  });
+  const addYAxis = () => append({
+    name: "",
+    label_formatter: defaultNumbroFormat
+  });
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    children: [/* @__PURE__ */ jsx(Text, {
+      mt: "xl",
+      mb: 0,
+      children: "Y Axes"
+    }), controlledFields.map((field, index2) => /* @__PURE__ */ jsx(YAxisField, {
+      control,
+      index: index2,
+      remove
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: addYAxis,
+        children: "Add a Y Axis"
+      })
+    })]
+  });
+}
 function withDefaults(series) {
   function setDefaults({
     type,
     name,
     showSymbol,
     y_axis_data_key = "value",
-    y_axis_data_formatter = "",
+    yAxisIndex = 0,
     label_position = "top",
     stack = "1",
-    color: color2 = "black"
+    color: color2 = "black",
+    barWidth = "30"
   }) {
     return {
       type,
       name,
       showSymbol,
       y_axis_data_key,
-      y_axis_data_formatter,
+      yAxisIndex,
       label_position,
       stack,
-      color: color2
+      color: color2,
+      barWidth
     };
   }
   return series.map(setDefaults);
@@ -1995,45 +2299,51 @@ function VizCartesianChartPanel({
   setConf
 }) {
   const _a = conf, {
-    series
+    series,
+    y_axes
   } = _a, restConf = __objRest(_a, [
-    "series"
+    "series",
+    "y_axes"
   ]);
-  const initialValues = React.useMemo(() => {
+  const defaultValues = React.useMemo(() => {
     const _a2 = restConf, {
-      x_axis_name = "",
-      y_axis_name = ""
+      x_axis_name = ""
     } = _a2, rest = __objRest(_a2, [
-      "x_axis_name",
-      "y_axis_name"
+      "x_axis_name"
     ]);
     return __spreadValues({
-      series: formList(withDefaults(series != null ? series : [])),
+      series: withDefaults(series != null ? series : []),
       x_axis_name,
-      y_axis_name
+      y_axes: y_axes != null ? y_axes : [{
+        name: "Y Axis",
+        label_formatter: defaultNumbroFormat
+      }]
     }, rest);
   }, [series, restConf]);
-  const form = useForm$1({
-    initialValues
-  });
-  const addSeries = () => form.addListItem("series", {
-    type: "bar",
-    name: randomId(),
-    showSymbol: false,
-    y_axis_data_key: "value",
-    y_axis_data_formatter: "",
-    label_position: "top",
-    stack: "",
-    color: "#000"
+  React.useEffect(() => {
+    const configMalformed = !_.isEqual(conf, defaultValues);
+    if (configMalformed) {
+      setConf(defaultValues);
+    }
+  }, [conf, defaultValues]);
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: {
+      isDirty
+    },
+    getValues
+  } = useForm({
+    defaultValues
   });
-  const changed = React.useMemo(() => !_.isEqual(form.values, initialValues), [form.values, initialValues]);
   return /* @__PURE__ */ jsx(Group, {
     direction: "column",
     mt: "md",
     spacing: "xs",
     grow: true,
     children: /* @__PURE__ */ jsxs("form", {
-      onSubmit: form.onSubmit(setConf),
+      onSubmit: handleSubmit(setConf),
       children: [/* @__PURE__ */ jsxs(Group, {
         position: "apart",
         mb: "lg",
@@ -2047,45 +2357,43 @@ function VizCartesianChartPanel({
           mr: 5,
           variant: "filled",
           color: "blue",
-          disabled: !changed,
+          disabled: !isDirty,
           children: /* @__PURE__ */ jsx(DeviceFloppy, {
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-        size: "md",
-        mb: "lg",
-        label: "X Axis Data Key"
-      }, form.getInputProps("x_axis_data_key"))), /* @__PURE__ */ jsxs(Group, {
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "x_axis_data_key",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          size: "md",
+          mb: "lg",
+          label: "X Axis Data Key"
+        }, field))
+      }), /* @__PURE__ */ jsx(Group, {
         direction: "column",
         grow: true,
         noWrap: true,
         mb: "lg",
-        children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
-          size: "md",
-          label: "X Axis Name"
-        }, form.getInputProps("x_axis_name"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-          size: "md",
-          label: "Y Axis Name"
-        }, form.getInputProps("y_axis_name")))]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
-        grow: true,
-        children: [/* @__PURE__ */ jsx(Text, {
-          mt: "xl",
-          mb: 0,
-          children: "Series"
-        }), form.values.series.map((_item, index2) => /* @__PURE__ */ jsx(SeriesItemField, {
-          form,
-          index: index2
-        })), /* @__PURE__ */ jsx(Group, {
-          position: "center",
-          mt: "xs",
-          children: /* @__PURE__ */ jsx(Button, {
-            onClick: addSeries,
-            children: "Add a Series"
-          })
-        })]
+        children: /* @__PURE__ */ jsx(Controller, {
+          name: "x_axis_name",
+          control,
+          render: ({
+            field
+          }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+            size: "md",
+            label: "X Axis Name"
+          }, field))
+        })
+      }), /* @__PURE__ */ jsx(YAxesField, {
+        control,
+        watch
+      }), /* @__PURE__ */ jsx(SeriesField, {
+        control,
+        watch,
+        getValues
       })]
     })
   });
@@ -4090,9 +4398,8 @@ function Dashboard({
     return !_.isEqual(dataSources, dashboard.definition.dataSources);
   }, [dashboard, panels, sqlSnippets, dataSources]);
   const saveDashboardChanges = async () => {
-    const d = _.merge({}, dashboard, {
-      panels
-    }, {
+    const d = __spreadProps(__spreadValues({}, dashboard), {
+      panels,
       definition: {
         sqlSnippets,
         dataSources

package/dist/dashboard.umd.js

@@ -1,4 +1,4 @@
-(function(b,v){typeof exports=="object"&&typeof module!="undefined"?v(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"],v):(b=typeof globalThis!="undefined"?globalThis:b||self,v(b.dashboard={},b.React,b._,b["react-grid-layout"],b["@mantine/core"],b.ahooks,b.axios,b["tabler-icons-react"],b["@mantine/rte"],b["@mantine/hooks"],b["echarts-for-react/lib/core"],b["echarts/core"],b["echarts/charts"],b["echarts/renderers"],b["echarts/components"],b.numbro,b["echarts-gl"],b["react-hook-form"],b["@mantine/form"],b["@mantine/prism"]))})(this,function(b,v,w,z,r,pe,ut,S,De,q,dt,ct,ee,te,W,pt,ar,G,k,B){"use strict";var ir=Object.defineProperty,or=Object.defineProperties;var lr=Object.getOwnPropertyDescriptors;var ce=Object.getOwnPropertySymbols;var lt=Object.prototype.hasOwnProperty,at=Object.prototype.propertyIsEnumerable;var ze=(b,v,w)=>v in b?ir(b,v,{enumerable:!0,configurable:!0,writable:!0,value:w}):b[v]=w,f=(b,v)=>{for(var w in v||(v={}))lt.call(v,w)&&ze(b,w,v[w]);if(ce)for(var w of ce(v))at.call(v,w)&&ze(b,w,v[w]);return b},P=(b,v)=>or(b,lr(v));var D=(b,v)=>{var w={};for(var z in b)lt.call(b,z)&&v.indexOf(z)<0&&(w[z]=b[z]);if(b!=null&&ce)for(var z of ce(b))v.indexOf(z)<0&&at.call(b,z)&&(w[z]=b[z]);return w};var st=(b,v,w)=>(ze(b,typeof v!="symbol"?v+"":v,w),w);function U(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}function ft(e){if(e&&e.__esModule)return e;var n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return e&&Object.keys(e).forEach(function(i){if(i!=="default"){var o=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(n,i,o.get?o:{enumerable:!0,get:function(){return e[i]}})}}),n.default=e,Object.freeze(n)}var d=U(v),T=U(w),mt=U(ut),ht=U(De),ne=U(dt),V=ft(ct),Y=U(pt),A=(e=>(e.Use="use",e.Layout="layout",e.Edit="edit",e))(A||{});const xt={layoutFrozen:!1,freezeLayout:()=>{},mode:A.Edit,inEditMode:!1,inLayoutMode:!1,inUseMode:!0},F=d.default.createContext(xt),Pe=e=>(n,i,o={})=>{const l=f({"X-Requested-With":"XMLHttpRequest","Content-Type":o.string?"application/x-www-form-urlencoded":"application/json"},o.headers),s={baseURL:"http://localhost:31200",method:e,url:n,params:e==="GET"?i:o.params,headers:l};return e==="POST"&&(s.data=o.string?JSON.stringify(i):i),mt.default(s).then(a=>a.data).catch(a=>Promise.reject(a))},gt=Pe("GET"),bt=Pe("POST");function Le(e,n){const i=Object.keys(n),o=Object.values(n);try{return new Function(...i,`return \`${e}\`;`)(...o)}catch(l){throw i.length===0&&e.includes("$")?new Error("[formatSQL] insufficient params"):l}}function yt(e,n){const i=n.sqlSnippets.reduce((o,l)=>(o[l.key]=Le(l.value,e),o),{});return T.default.merge({},i,e)}const ke=({context:e,definitions:n,title:i,dataSource:o})=>async()=>{if(!o||!o.sql)return[];const{type:l,key:s,sql:a}=o,u=a.includes("$");try{const c=yt(e,n),m=Le(a,c);return u&&(console.groupCollapsed(`Final SQL for: ${i}`),console.log(m),console.groupEnd()),await bt("/query",{type:l,key:s,sql:m})}catch(c){return console.error(c),[]}};async function St(){try{return await gt("/query/sources",{})}catch(e){return console.error(e),{}}}const Ae={},Ct=Ae,Q=d.default.createContext(Ae),vt={data:[],loading:!1,title:"",setTitle:()=>{},description:"",setDescription:()=>{},dataSourceID:"",setDataSourceID:()=>{},viz:{type:"",conf:{}},setViz:()=>{},refreshData:()=>{}},O=d.default.createContext(vt),wt={sqlSnippets:[],setSQLSnippets:()=>{},dataSources:[],setDataSources:()=>{}},E=d.default.createContext(wt);var re={exports:{}},ie={};/**
+(function(b,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):(b=typeof globalThis!="undefined"?globalThis:b||self,w(b.dashboard={},b.React,b._,b["react-grid-layout"],b["@mantine/core"],b.ahooks,b.axios,b["tabler-icons-react"],b["@mantine/rte"],b["@mantine/hooks"],b["echarts-for-react/lib/core"],b["echarts/core"],b["echarts/charts"],b["echarts/renderers"],b["echarts/components"],b.numbro,b["echarts-gl"],b["react-hook-form"],b["@mantine/form"],b["@mantine/prism"]))})(this,function(b,w,G,P,r,pe,dt,S,De,E,ct,pt,ee,te,W,ft,cr,v,q,B){"use strict";var sr=Object.defineProperty,ur=Object.defineProperties;var dr=Object.getOwnPropertyDescriptors;var ce=Object.getOwnPropertySymbols;var at=Object.prototype.hasOwnProperty,st=Object.prototype.propertyIsEnumerable;var Ie=(b,w,G)=>w in b?sr(b,w,{enumerable:!0,configurable:!0,writable:!0,value:G}):b[w]=G,f=(b,w)=>{for(var G in w||(w={}))at.call(w,G)&&Ie(b,G,w[G]);if(ce)for(var G of ce(w))st.call(w,G)&&Ie(b,G,w[G]);return b},z=(b,w)=>ur(b,dr(w));var D=(b,w)=>{var G={};for(var P in b)at.call(b,P)&&w.indexOf(P)<0&&(G[P]=b[P]);if(b!=null&&ce)for(var P of ce(b))w.indexOf(P)<0&&st.call(b,P)&&(G[P]=b[P]);return G};var ut=(b,w,G)=>(Ie(b,typeof w!="symbol"?w+"":w,G),G);function J(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}function mt(e){if(e&&e.__esModule)return e;var n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return e&&Object.keys(e).forEach(function(i){if(i!=="default"){var o=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(n,i,o.get?o:{enumerable:!0,get:function(){return e[i]}})}}),n.default=e,Object.freeze(n)}var d=J(w),I=J(G),ht=J(dt),xt=J(De),ne=J(ct),V=mt(pt),Y=J(ft),M=(e=>(e.Use="use",e.Layout="layout",e.Edit="edit",e))(M||{});const gt={layoutFrozen:!1,freezeLayout:()=>{},mode:M.Edit,inEditMode:!1,inLayoutMode:!1,inUseMode:!0},$=d.default.createContext(gt),Pe=e=>(n,i,o={})=>{const l=f({"X-Requested-With":"XMLHttpRequest","Content-Type":o.string?"application/x-www-form-urlencoded":"application/json"},o.headers),s={baseURL:"http://localhost:31200",method:e,url:n,params:e==="GET"?i:o.params,headers:l};return e==="POST"&&(s.data=o.string?JSON.stringify(i):i),ht.default(s).then(a=>a.data).catch(a=>Promise.reject(a))},bt=Pe("GET"),yt=Pe("POST");function Ae(e,n){const i=Object.keys(n),o=Object.values(n);try{return new Function(...i,`return \`${e}\`;`)(...o)}catch(l){throw i.length===0&&e.includes("$")?new Error("[formatSQL] insufficient params"):l}}function St(e,n){const i=n.sqlSnippets.reduce((o,l)=>(o[l.key]=Ae(l.value,e),o),{});return I.default.merge({},i,e)}const Le=({context:e,definitions:n,title:i,dataSource:o})=>async()=>{if(!o||!o.sql)return[];const{type:l,key:s,sql:a}=o,u=a.includes("$");try{const c=St(e,n),h=Ae(a,c);return u&&(console.groupCollapsed(`Final SQL for: ${i}`),console.log(h),console.groupEnd()),await yt("/query",{type:l,key:s,sql:h})}catch(c){return console.error(c),[]}};async function Ct(){try{return await bt("/query/sources",{})}catch(e){return console.error(e),{}}}const Me={},vt=Me,Q=d.default.createContext(Me),wt={data:[],loading:!1,title:"",setTitle:()=>{},description:"",setDescription:()=>{},dataSourceID:"",setDataSourceID:()=>{},viz:{type:"",conf:{}},setViz:()=>{},refreshData:()=>{}},O=d.default.createContext(wt),Tt={sqlSnippets:[],setSQLSnippets:()=>{},dataSources:[],setDataSources:()=>{}},k=d.default.createContext(Tt);var re={exports:{}},ie={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,8 +6,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Tt=d.default,It=Symbol.for("react.element"),Gt=Symbol.for("react.fragment"),_t=Object.prototype.hasOwnProperty,zt=Tt.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Dt={key:!0,ref:!0,__self:!0,__source:!0};function Oe(e,n,i){var o,l={},s=null,a=null;i!==void 0&&(s=""+i),n.key!==void 0&&(s=""+n.key),n.ref!==void 0&&(a=n.ref);for(o in n)_t.call(n,o)&&!Dt.hasOwnProperty(o)&&(l[o]=n[o]);if(e&&e.defaultProps)for(o in n=e.defaultProps,n)l[o]===void 0&&(l[o]=n[o]);return{$$typeof:It,type:e,key:s,ref:a,props:l,_owner:zt.current}}ie.Fragment=Gt,ie.jsx=Oe,ie.jsxs=Oe,re.exports=ie;const t=re.exports.jsx,p=re.exports.jsxs,K=re.exports.Fragment;function Me({position:e,trigger:n="click"}){const{freezeLayout:i}=d.default.useContext(F),[o,l]=d.default.useState(!1),{description:s}=d.default.useContext(O);if(d.default.useEffect(()=>{i(o)},[o]),!s||s==="<p><br></p>")return null;const a=n==="click"?t(r.Tooltip,{label:"Click to see description",openDelay:500,children:t(S.InfoCircle,{size:20,onClick:()=>l(u=>!u),style:{verticalAlign:"baseline",cursor:"pointer"}})}):t(S.InfoCircle,{size:20,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),style:{verticalAlign:"baseline",cursor:"pointer"}});return t(r.Popover,{opened:o,onClose:()=>l(!1),withCloseButton:!0,withArrow:!0,trapFocus:!0,closeOnEscape:!1,placement:"center",position:e,target:a,children:t(ht.default,{readOnly:!0,value:s,onChange:T.default.noop,sx:{border:"none"}})})}function Pt(){const{description:e,setDescription:n}=d.default.useContext(O),[i,o]=d.default.useState(e),l=e!==i,s=d.default.useCallback(()=>{!l||n(i)},[l,i]);return p(r.Group,{direction:"column",sx:{flexGrow:1},children:[p(r.Group,{align:"end",children:[t(r.Text,{children:"Description"}),t(r.ActionIcon,{variant:"hover",color:"blue",disabled:!l,onClick:s,children:t(S.DeviceFloppy,{size:20})})]}),t(De.RichTextEditor,{value:i,onChange:o,sx:{flexGrow:1},sticky:!0,p:"0"})]})}class fe extends d.default.Component{constructor(n){super(n),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}render(){return this.state.hasError?t("h1",{children:"Something went wrong."}):this.props.children}}function Lt(){const{title:e}=d.default.useContext(O);return t(fe,{children:p(r.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:[p(r.Group,{position:"apart",noWrap:!0,sx:{borderBottom:"1px solid #eee",paddingBottom:"5px",flexGrow:0,flexShrink:0},children:[t(r.Group,{children:t(Me,{position:"bottom",trigger:"hover"})}),t(r.Group,{grow:!0,position:"center",children:t(r.Text,{lineClamp:1,weight:"bold",children:e})}),t(r.Group,{position:"right",spacing:0,sx:{height:"28px"}})]}),t(r.Group,{sx:{background:"#eee",flexGrow:1}})]})})}function kt(){const{title:e,setTitle:n}=d.default.useContext(O),[i,o]=q.useInputState(e),l=e!==i,s=d.default.useCallback(()=>{!l||n(i)},[l,i]);return t(r.TextInput,{value:i,onChange:o,label:p(r.Group,{align:"end",children:[t(r.Text,{children:"Panel Title"}),t(r.ActionIcon,{variant:"hover",color:"blue",disabled:!l,onClick:s,children:t(S.DeviceFloppy,{size:20})})]})})}function At({}){return p(r.Group,{direction:"row",grow:!0,noWrap:!0,align:"stretch",sx:{height:"100%"},children:[p(r.Group,{grow:!0,direction:"column",sx:{width:"40%",flexShrink:0,flexGrow:0,height:"100%"},children:[t(kt,{}),t(Pt,{})]}),t(r.Box,{sx:{height:"100%",flexGrow:1,maxWidth:"60%"},children:t(Lt,{})})]})}function Ee({id:e}){const n=d.default.useContext(E),i=d.default.useContext(Q),o=d.default.useMemo(()=>n.dataSources.find(u=>u.id===e),[n.dataSources,e]),{data:l=[],loading:s,refresh:a}=pe.useRequest(ke({context:i,definitions:n,title:e,dataSource:o}),{refreshDeps:[i,n,o]});return s?t(r.LoadingOverlay,{visible:s,exitTransitionDuration:0}):l.length===0?t(r.Table,{}):p(r.Group,{my:"xl",direction:"column",grow:!0,sx:{border:"1px solid #eee"},children:[p(r.Group,{position:"apart",py:"md",pl:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef"},children:[p(r.Group,{position:"left",children:[t(r.Text,{weight:500,children:"Preview Data"}),l.length>10&&p(r.Text,{size:"sm",color:"gray",children:["Showing 10 rows of ",l.length]})]}),t(r.ActionIcon,{mr:15,variant:"hover",color:"blue",disabled:s,onClick:a,children:t(S.Refresh,{size:15})})]}),p(r.Table,{children:[t("thead",{children:t("tr",{children:Object.keys(l==null?void 0:l[0]).map(u=>t("th",{children:t(r.Text,{weight:700,color:"#000",children:u})},u))})}),t("tbody",{children:l.slice(0,10).map((u,c)=>t("tr",{children:Object.values(u).map((m,h)=>t("td",{children:t(r.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace"}},children:t(r.Text,{children:m})})},`${m}--${h}`))},`row-${c}`))})]})]})}function Ot({}){const{dataSources:e}=d.default.useContext(E),{dataSourceID:n,setDataSourceID:i,data:o,loading:l}=d.default.useContext(O),s=d.default.useMemo(()=>e.map(a=>({value:a.id,label:a.id})),[e]);return p(r.Group,{direction:"column",grow:!0,noWrap:!0,children:[p(r.Group,{position:"left",sx:{maxWidth:"600px",alignItems:"baseline"},children:[t(r.Text,{children:"Select a Data Source"}),t(r.Select,{data:s,value:n,onChange:i,allowDeselect:!1,clearable:!1,sx:{flexGrow:1}})]}),t(Ee,{id:n})]})}V.use([ee.SunburstChart,te.CanvasRenderer]);const Mt={tooltip:{show:!0},series:{type:"sunburst",radius:[0,"90%"],emphasis:{focus:"ancestor"}}};function Et({conf:e,data:n,width:i,height:o}){const x=e,{label_field:l="name",value_field:s="value"}=x,a=D(x,["label_field","value_field"]),u=d.default.useMemo(()=>n.map(g=>({name:g[l],value:Number(g[s])})),[n,l,s]),c=d.default.useMemo(()=>{var g,y;return(y=(g=T.default.maxBy(u,C=>C.value))==null?void 0:g.value)!=null?y:1},[u]),m=d.default.useMemo(()=>({series:{label:{formatter:({name:g,value:y})=>y/c<.2?" ":g}}}),[c]),h=T.default.merge({},Mt,m,a,{series:{data:u}});return t(ne.default,{echarts:V,option:h,style:{width:i,height:o}})}V.use([ee.BarChart,ee.LineChart,W.GridComponent,W.LegendComponent,W.TooltipComponent,te.CanvasRenderer]);const qt={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 Ft({conf:e,data:n,width:i,height:o}){const l=d.default.useMemo(()=>{var c,m;const s=e.series.reduce((h,{name:x,y_axis_data_formatter:g})=>(h[x]=function({value:C}){if(!g)return C;try{return Y.default(C).format(JSON.parse(g))}catch(I){return console.error(I),C}},h),{}),a=e.series.map(I=>{var _=I,{y_axis_data_key:h,y_axis_data_formatter:x,name:g,label_position:y}=_,C=D(_,["y_axis_data_key","y_axis_data_formatter","name","label_position"]);const M=f({data:n.map(L=>L[h]),label:{show:!!y,position:y},name:g},C);return x&&(M.label.formatter=s[g]),M}),u={xAxis:{data:n.map(h=>h[e.x_axis_data_key]),name:(c=e.x_axis_name)!=null?c:""},yAxis:{name:(m=e.y_axis_name)!=null?m:""},dataset:{source:n},series:a,tooltip:{formatter:function(h){const x=Array.isArray(h)?h:[h];if(x.length===0)return"";const g=x.map(({seriesName:y,value:C})=>y?`${y}: ${s[y]({value:C})}`:C);return g.unshift(`<strong>${x[0].name}</strong>`),g.join("<br />")}}};return T.default.merge({},qt,u)},[e,n]);return!i||!o?null:t(ne.default,{echarts:V,option:l,style:{width:i,height:o}})}var j=(e=>(e.string="string",e.number="number",e.eloc="eloc",e.percentage="percentage",e))(j||{});function $t({value:e}){return t(r.Text,{component:"span",children:e})}function Bt({value:e}){return t(r.Text,{component:"span",children:e})}function Vt({value:e}){const n=Y.default(e).format({thousandSeparated:!0});return t(r.Text,{component:"span",children:n})}function jt({value:e}){const n=Y.default(e).format({output:"percent",mantissa:3});return t(r.Text,{component:"span",children:n})}function Rt({value:e,type:n}){switch(n){case j.string:return t($t,{value:e});case j.eloc:return t(Bt,{value:e});case j.number:return t(Vt,{value:e});case j.percentage:return t(jt,{value:e})}}function Nt({conf:e,data:n=[],width:i,height:o}){const h=e,{id_field:l,use_raw_columns:s,columns:a}=h,u=D(h,["id_field","use_raw_columns","columns"]),c=d.default.useMemo(()=>s?Object.keys(n==null?void 0:n[0]):a.map(x=>x.label),[s,a,n]),m=d.default.useMemo(()=>s?Object.keys(n==null?void 0:n[0]).map(x=>({label:x,value_field:x,value_type:j.string})):a,[s,a,n]);return p(r.Table,P(f({sx:{maxHeight:o}},u),{children:[t("thead",{children:t("tr",{children:c.map(x=>t("th",{children:x},x))})}),t("tbody",{children:n.slice(0,30).map((x,g)=>t("tr",{children:m.map(({value_field:y,value_type:C})=>t("td",{children:t(r.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace",fontSize:u.fontSize}},children:t(Rt,{value:x[y],type:C})})},x[y]))},l?x[l]:`row-${g}`))}),n.length>100&&t("tfoot",{children:t("tr",{children:t("td",{colSpan:c.length,children:t(r.Text,{color:"red",size:"sm",children:"Showing only the first 30 rows to avoid causing slow performance"})})})})]}))}function Wt(e,n={}){const i=P(f({},n),{numbro:Y.default}),o=Object.keys(i),l=Object.values(i);try{return new Function(...o,`return \`${e}\`;`)(...l)}catch(s){return s.message}}function Qt({conf:{paragraphs:e},data:n}){return t(K,{children:e.map((a,s)=>{var u=a,{template:i,size:o}=u,l=D(u,["template","size"]);return t(r.Text,P(f({},l),{sx:{fontSize:o},children:Wt(i,n[0])}),`${i}---${s}`)})})}V.use([W.GridComponent,W.VisualMapComponent,W.LegendComponent,W.TooltipComponent,te.CanvasRenderer]);function Jt({conf:e,data:n,width:i,height:o}){const x=e,{x_axis_data_key:l,y_axis_data_key:s,z_axis_data_key:a}=x,u=D(x,["x_axis_data_key","y_axis_data_key","z_axis_data_key"]),c=d.default.useMemo(()=>T.default.minBy(n,g=>g[a])[a],[n,a]),m=d.default.useMemo(()=>T.default.maxBy(n,g=>g[a])[a],[n,a]),h=P(f({tooltip:{},backgroundColor:"#fff",visualMap:{show:!0,dimension:2,min:c,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}}}},u),{series:[{type:"bar3D",wireframe:{},data:n.map(g=>[g[l],g[s],g[a]])}]});return t(ne.default,{echarts:V,option:h,style:{width:i,height:o}})}var sr="";V.use([ee.PieChart,te.CanvasRenderer]);const Ut={tooltip:{show:!0},series:{type:"pie",radius:["50%","80%"],label:{position:"outer",alignTo:"edge",formatter:`{name|{b}}
-{percentage|{d}%}`,minMargin:5,edgeDistance:10,lineHeight:15,rich:{percentage:{color:"#999"}},margin:20},labelLine:{length:15,length2:0,maxSurfaceAngle:80,showAbove:!0},top:10,bottom:10,left:10,right:10}};function Kt({conf:e,data:n,width:i,height:o}){const h=e,{label_field:l="name",value_field:s="value"}=h,a=D(h,["label_field","value_field"]),u=d.default.useMemo(()=>n.map(x=>({name:x[l],value:Number(x[s])})),[n,l,s]),c=d.default.useMemo(()=>({series:{labelLayout:function(x){const g=x.labelRect.x<i/2,y=x.labelLinePoints;return y[2][0]=g?x.labelRect.x:x.labelRect.x+x.labelRect.width,{labelLinePoints:y}}}}),[i]),m=T.default.merge({},Ut,c,a,{series:{data:u}});return t(ne.default,{echarts:V,option:m,style:{width:i,height:o}})}var qe=function(){};const Yt=(e,n,i)=>Math.min(Math.max(i,e),n),Fe=(e,n,i)=>{const o=n-e;return o===0?1:(i-e)/o},me=(e,n,i)=>-i*e+i*n+e,$e=(e,n)=>i=>Math.max(Math.min(i,n),e),X=e=>e%1?Number(e.toFixed(5)):e,oe=/(-)?([\d]*\.?[\d])+/g,he=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,Xt=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function Z(e){return typeof e=="string"}const le={test:e=>typeof e=="number",parse:parseFloat,transform:e=>e},Be=Object.assign(Object.assign({},le),{transform:$e(0,1)});Object.assign(Object.assign({},le),{default:1});const H=(e=>({test:n=>Z(n)&&n.endsWith(e)&&n.split(" ").length===1,parse:parseFloat,transform:n=>`${n}${e}`}))("%");Object.assign(Object.assign({},H),{parse:e=>H.parse(e)/100,transform:e=>H.transform(e*100)});const xe=(e,n)=>i=>Boolean(Z(i)&&Xt.test(i)&&i.startsWith(e)||n&&Object.prototype.hasOwnProperty.call(i,n)),Ve=(e,n,i)=>o=>{if(!Z(o))return o;const[l,s,a,u]=o.match(oe);return{[e]:parseFloat(l),[n]:parseFloat(s),[i]:parseFloat(a),alpha:u!==void 0?parseFloat(u):1}},J={test:xe("hsl","hue"),parse:Ve("hue","saturation","lightness"),transform:({hue:e,saturation:n,lightness:i,alpha:o=1})=>"hsla("+Math.round(e)+", "+H.transform(X(n))+", "+H.transform(X(i))+", "+X(Be.transform(o))+")"},Zt=$e(0,255),ge=Object.assign(Object.assign({},le),{transform:e=>Math.round(Zt(e))}),R={test:xe("rgb","red"),parse:Ve("red","green","blue"),transform:({red:e,green:n,blue:i,alpha:o=1})=>"rgba("+ge.transform(e)+", "+ge.transform(n)+", "+ge.transform(i)+", "+X(Be.transform(o))+")"};function Ht(e){let n="",i="",o="",l="";return e.length>5?(n=e.substr(1,2),i=e.substr(3,2),o=e.substr(5,2),l=e.substr(7,2)):(n=e.substr(1,1),i=e.substr(2,1),o=e.substr(3,1),l=e.substr(4,1),n+=n,i+=i,o+=o,l+=l),{red:parseInt(n,16),green:parseInt(i,16),blue:parseInt(o,16),alpha:l?parseInt(l,16)/255:1}}const be={test:xe("#"),parse:Ht,transform:R.transform},ae={test:e=>R.test(e)||be.test(e)||J.test(e),parse:e=>R.test(e)?R.parse(e):J.test(e)?J.parse(e):be.parse(e),transform:e=>Z(e)?e:e.hasOwnProperty("red")?R.transform(e):J.transform(e)},je="${c}",Re="${n}";function en(e){var n,i,o,l;return isNaN(e)&&Z(e)&&((i=(n=e.match(oe))===null||n===void 0?void 0:n.length)!==null&&i!==void 0?i:0)+((l=(o=e.match(he))===null||o===void 0?void 0:o.length)!==null&&l!==void 0?l:0)>0}function Ne(e){typeof e=="number"&&(e=`${e}`);const n=[];let i=0;const o=e.match(he);o&&(i=o.length,e=e.replace(he,je),n.push(...o.map(ae.parse)));const l=e.match(oe);return l&&(e=e.replace(oe,Re),n.push(...l.map(le.parse))),{values:n,numColors:i,tokenised:e}}function We(e){return Ne(e).values}function Qe(e){const{values:n,numColors:i,tokenised:o}=Ne(e),l=n.length;return s=>{let a=o;for(let u=0;u<l;u++)a=a.replace(u<i?je:Re,u<i?ae.transform(s[u]):X(s[u]));return a}}const tn=e=>typeof e=="number"?0:e;function nn(e){const n=We(e);return Qe(e)(n.map(tn))}const Je={test:en,parse:We,createTransformer:Qe,getAnimatableNone:nn};function ye(e,n,i){return i<0&&(i+=1),i>1&&(i-=1),i<1/6?e+(n-e)*6*i:i<1/2?n:i<2/3?e+(n-e)*(2/3-i)*6:e}function Ue({hue:e,saturation:n,lightness:i,alpha:o}){e/=360,n/=100,i/=100;let l=0,s=0,a=0;if(!n)l=s=a=i;else{const u=i<.5?i*(1+n):i+n-i*n,c=2*i-u;l=ye(c,u,e+1/3),s=ye(c,u,e),a=ye(c,u,e-1/3)}return{red:Math.round(l*255),green:Math.round(s*255),blue:Math.round(a*255),alpha:o}}const rn=(e,n,i)=>{const o=e*e,l=n*n;return Math.sqrt(Math.max(0,i*(l-o)+o))},on=[be,R,J],Ke=e=>on.find(n=>n.test(e)),Ye=(e,n)=>{let i=Ke(e),o=Ke(n),l=i.parse(e),s=o.parse(n);i===J&&(l=Ue(l),i=R),o===J&&(s=Ue(s),o=R);const a=Object.assign({},l);return u=>{for(const c in a)c!=="alpha"&&(a[c]=rn(l[c],s[c],u));return a.alpha=me(l.alpha,s.alpha,u),i.transform(a)}},ln=e=>typeof e=="number",an=(e,n)=>i=>n(e(i)),Xe=(...e)=>e.reduce(an);function Ze(e,n){return ln(e)?i=>me(e,n,i):ae.test(e)?Ye(e,n):tt(e,n)}const He=(e,n)=>{const i=[...e],o=i.length,l=e.map((s,a)=>Ze(s,n[a]));return s=>{for(let a=0;a<o;a++)i[a]=l[a](s);return i}},sn=(e,n)=>{const i=Object.assign(Object.assign({},e),n),o={};for(const l in i)e[l]!==void 0&&n[l]!==void 0&&(o[l]=Ze(e[l],n[l]));return l=>{for(const s in o)i[s]=o[s](l);return i}};function et(e){const n=Je.parse(e),i=n.length;let o=0,l=0,s=0;for(let a=0;a<i;a++)o||typeof n[a]=="number"?o++:n[a].hue!==void 0?s++:l++;return{parsed:n,numNumbers:o,numRGB:l,numHSL:s}}const tt=(e,n)=>{const i=Je.createTransformer(n),o=et(e),l=et(n);return o.numHSL===l.numHSL&&o.numRGB===l.numRGB&&o.numNumbers>=l.numNumbers?Xe(He(o.parsed,l.parsed),i):a=>`${a>0?n:e}`},un=(e,n)=>i=>me(e,n,i);function dn(e){if(typeof e=="number")return un;if(typeof e=="string")return ae.test(e)?Ye:tt;if(Array.isArray(e))return He;if(typeof e=="object")return sn}function cn(e,n,i){const o=[],l=i||dn(e[0]),s=e.length-1;for(let a=0;a<s;a++){let u=l(e[a],e[a+1]);if(n){const c=Array.isArray(n)?n[a]:n;u=Xe(c,u)}o.push(u)}return o}function pn([e,n],[i]){return o=>i(Fe(e,n,o))}function fn(e,n){const i=e.length,o=i-1;return l=>{let s=0,a=!1;if(l<=e[0]?a=!0:l>=e[o]&&(s=o-1,a=!0),!a){let c=1;for(;c<i&&!(e[c]>l||c===o);c++);s=c-1}const u=Fe(e[s],e[s+1],l);return n[s](u)}}function mn(e,n,{clamp:i=!0,ease:o,mixer:l}={}){const s=e.length;qe(s===n.length),qe(!o||!Array.isArray(o)||o.length===s-1),e[0]>e[s-1]&&(e=[].concat(e),n=[].concat(n),e.reverse(),n.reverse());const a=cn(n,o,l),u=s===2?pn(e,a):fn(e,a);return i?c=>u(Yt(e[0],e[s-1],c)):u}class hn{constructor({valueRange:n,colorRange:i}){st(this,"mapper");this.mapper=mn(n,i)}getColor(n){return this.mapper(n)}}function xn(e,n={}){const i=P(f({},n),{numbro:Y.default}),o=Object.keys(i),l=Object.values(i);try{return new Function(...o,`return \`${e}\`;`)(...l)}catch(s){return s.message}}function gn(e,n){if(e.type==="static")return e.staticColor;if(e.type==="continuous"){const i=new hn(e),o=n[e.valueField];return i.getColor(o)}return"black"}function bn(s){var a=s,{conf:u}=a,c=u,{template:e,size:n,color:i}=c,o=D(c,["template","size","color"]),{data:l}=a;const m=d.default.useMemo(()=>gn(i,l[0]),[i,l]);return t(r.Text,P(f({},o),{color:m,sx:{fontSize:n},children:xn(e,l[0])}))}function yn(e,n,i,o){const l={width:e,height:n,data:i,conf:o.conf};switch(o.type){case"sunburst":return t(Et,f({},l));case"line-bar":case"cartesian":return t(Ft,f({},l));case"table":return t(Nt,f({},l));case"text":return t(Qt,f({},l));case"stats":return t(bn,f({},l));case"bar-3d":return t(Jt,f({},l));case"pie":return t(Kt,f({},l));default:return null}}function nt({viz:e,data:n,loading:i}){const{ref:o,width:l,height:s}=q.useElementSize(),a=d.default.useMemo(()=>!Array.isArray(n)||n.length===0,[n]);return i?t("div",{className:"viz-root",ref:o,children:t(r.LoadingOverlay,{visible:i,exitTransitionDuration:0})}):p("div",{className:"viz-root",ref:o,children:[a&&t(r.Text,{color:"gray",align:"center",children:"nothing to show"}),!a&&yn(l,s,n,e)]})}function Sn({}){const{data:e,loading:n,viz:i}=d.default.useContext(O);return t(fe,{children:t(nt,{viz:i,data:e,loading:n})})}function Cn({conf:e,setConf:n}){const i=T.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"}},e),{control:o,handleSubmit:l,formState:s}=G.useForm({defaultValues:i});return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:l(n),children:[t(r.Text,{children:"X Axis"}),p(r.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[t(G.Controller,{name:"x_axis_data_key",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Data Key"},a))}),t(G.Controller,{name:"xAxis3D.name",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Name"},a))})]}),t(r.Text,{mt:"lg",children:"Y Axis"}),p(r.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[t(G.Controller,{name:"y_axis_data_key",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Data Key"},a))}),t(G.Controller,{name:"yAxis3D.name",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Name"},a))})]}),t(r.Text,{mt:"lg",children:"Z Axis"}),p(r.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[t(G.Controller,{name:"z_axis_data_key",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Data Key"},a))}),t(G.Controller,{name:"zAxis3D.name",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Name"},a))})]}),t(r.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"60%"},mx:"auto",children:p(r.Button,{color:"blue",type:"submit",children:[t(S.DeviceFloppy,{size:20}),t(r.Text,{ml:"md",children:"Save"})]})})]})})}function Se({value:e,onChange:n}){const i=r.useMantineTheme(),o=d.default.useMemo(()=>Object.entries(i.colors).map(([s,a])=>({label:s,value:a[6]})),[i]),l=d.default.useMemo(()=>o.some(s=>s.value===e),[e,o]);return p(r.Group,{position:"apart",spacing:"xs",children:[t(r.TextInput,{placeholder:"Set any color",value:l?"":e,onChange:s=>n(s.currentTarget.value),rightSection:t(r.ColorSwatch,{color:l?"transparent":e,radius:4}),variant:l?"filled":"default",sx:{maxWidth:"100%",flexGrow:1}}),t(r.Text,{sx:{flexGrow:0},children:"or"}),t(r.Select,{data:o,value:e,onChange:n,variant:l?"default":"filled",placeholder:"Pick a theme color",icon:t(r.ColorSwatch,{color:l?e:"transparent",radius:4}),sx:{maxWidth:"100%",flexGrow:1}})]})}const vn=JSON.stringify({output:"percent",mantissa:2},null,2),wn=[{label:"off",value:""},{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 Tn({form:e,index:n}){const i=e.values.series[n],{type:o}=i;return p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[p(r.Group,{direction:"row",grow:!0,noWrap:!0,children:[t(r.Select,f({label:"Type",data:[{label:"Line",value:"line"},{label:"Bar",value:"bar"},{label:"Scatter",value:"scatter",disabled:!0}]},e.getListInputProps("series",n,"type"))),t(r.TextInput,f({label:"Name",required:!0,sx:{flex:1}},e.getListInputProps("series",n,"name"))),t(r.TextInput,f({label:"Value key",required:!0},e.getListInputProps("series",n,"y_axis_data_key")))]}),p(r.Group,{direction:"row",grow:!0,noWrap:!0,align:"top",children:[o==="bar"&&t(K,{children:t(r.TextInput,f({label:"Stack",placeholder:"Stack bars by this ID"},e.getListInputProps("series",n,"stack")))}),t(r.Select,f({label:"Label Position",data:wn},e.getListInputProps("series",n,"label_position"))),t(r.JsonInput,f({sx:{label:{width:"100%"}},label:p(r.Group,{position:"apart",children:[t(r.Text,{children:"Value Formatter"}),t(r.Anchor,{href:"https://numbrojs.com/format.html",target:"_blank",children:"Formats"})]}),placeholder:vn,minRows:4,maxRows:12,autosize:!0},e.getListInputProps("series",n,"y_axis_data_formatter")))]}),p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{children:"Color"}),t(Se,f({},e.getListInputProps("series",n,"color")))]}),t(r.ActionIcon,{color:"red",variant:"hover",onClick:()=>e.removeListItem("series",n),sx:{position:"absolute",top:15,right:5},children:t(S.Trash,{size:16})})]},n)}function In(e){function n({type:i,name:o,showSymbol:l,y_axis_data_key:s="value",y_axis_data_formatter:a="",label_position:u="top",stack:c="1",color:m="black"}){return{type:i,name:o,showSymbol:l,y_axis_data_key:s,y_axis_data_formatter:a,label_position:u,stack:c,color:m}}return e.map(n)}function Gn({conf:e,setConf:n}){const c=e,{series:i}=c,o=D(c,["series"]),l=d.default.useMemo(()=>{const g=o,{x_axis_name:m="",y_axis_name:h=""}=g,x=D(g,["x_axis_name","y_axis_name"]);return f({series:k.formList(In(i!=null?i:[])),x_axis_name:m,y_axis_name:h},x)},[i,o]),s=k.useForm({initialValues:l}),a=()=>s.addListItem("series",{type:"bar",name:q.randomId(),showSymbol:!1,y_axis_data_key:"value",y_axis_data_formatter:"",label_position:"top",stack:"",color:"#000"}),u=d.default.useMemo(()=>!T.default.isEqual(s.values,l),[s.values,l]);return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:s.onSubmit(n),children:[p(r.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[t(r.Text,{children:"Chart Config"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!u,children:t(S.DeviceFloppy,{size:20})})]}),t(r.TextInput,f({size:"md",mb:"lg",label:"X Axis Data Key"},s.getInputProps("x_axis_data_key"))),p(r.Group,{direction:"column",grow:!0,noWrap:!0,mb:"lg",children:[t(r.TextInput,f({size:"md",label:"X Axis Name"},s.getInputProps("x_axis_name"))),t(r.TextInput,f({size:"md",label:"Y Axis Name"},s.getInputProps("y_axis_name")))]}),p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{mt:"xl",mb:0,children:"Series"}),s.values.series.map((m,h)=>t(Tn,{form:s,index:h})),t(r.Group,{position:"center",mt:"xs",children:t(r.Button,{onClick:a,children:"Add a Series"})})]})]})})}function _n({conf:{label_field:e,value_field:n},setConf:i}){const o=k.useForm({initialValues:{label_field:e,value_field:n}});return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:o.onSubmit(i),children:[p(r.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[t(r.Text,{children:"Pie Config"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[t(r.TextInput,f({label:"Label Field",required:!0,sx:{flex:1}},o.getInputProps("label_field"))),t(r.TextInput,f({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},o.getInputProps("value_field")))]})]})})}const se=[{label:"initial",value:0},{label:"500",value:25},{label:"700",value:50},{label:"semibold",value:75},{label:"bold",value:100}];function rt({label:e,value:n,onChange:i}){var s,a;const[o,l]=d.default.useState((a=(s=se.find(u=>u.label===n))==null?void 0:s.value)!=null?a:se[0].value);return d.default.useEffect(()=>{const u=se.find(c=>c.value===o);u&&i(u.label)},[o]),p(r.Group,{direction:"column",grow:!0,spacing:"xs",mb:"lg",children:[t(r.Text,{children:e}),t(r.Slider,{label:null,marks:se,value:o,onChange:l,step:25,placeholder:"Pick a font size"})]})}function zn({label:e,value:n,onChange:i}){const[o,l]=d.default.useState(Array.isArray(n)?[...n]:[]),s=d.default.useCallback(()=>{l(m=>[...m,""])},[l]),a=d.default.useCallback(m=>{l(h=>(h.splice(m,1),[...h]))},[l]),u=d.default.useMemo(()=>!T.default.isEqual(o,n),[o,n]),c=()=>{i(o.map(m=>m.toString()))};return p(K,{children:[p(r.Group,{position:"left",children:[t(r.Text,{children:e}),t(r.ActionIcon,{mr:5,variant:"filled",color:"blue",disabled:!u,onClick:c,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{children:[o.map((m,h)=>t(r.TextInput,{value:m,onChange:x=>{const g=x.currentTarget.value;l(y=>(y.splice(h,1,g),[...y]))},rightSection:t(r.ActionIcon,{onClick:()=>a(h),color:"red",children:t(S.Trash,{size:14})}),sx:{width:"45%"}})),t(r.ActionIcon,{onClick:s,color:"blue",variant:"outline",children:t(S.PlaylistAdd,{size:20})})]})]})}function Dn({label:e,value:n,onChange:i}){const[o,l]=d.default.useState(Array.isArray(n)?[...n]:[]),s=d.default.useCallback(()=>{l(x=>[...x,""])},[l]),a=d.default.useCallback(x=>{l(g=>(g.splice(x,1),[...g]))},[l]),u=d.default.useMemo(()=>!T.default.isEqual(o,n),[o,n]),c=()=>{i(o.map(x=>x.toString()))},m=r.useMantineTheme(),h=d.default.useMemo(()=>Object.entries(m.colors).map(([x,g])=>g[6]),[m]);return p(K,{children:[p(r.Group,{position:"left",children:[t(r.Text,{children:e}),t(r.ActionIcon,{mr:5,variant:"filled",color:"blue",disabled:!u,onClick:c,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{children:[o.map((x,g)=>t(r.ColorInput,{value:x,onChange:y=>{l(C=>(C.splice(g,1,y),[...C]))},swatches:h,rightSection:t(r.ActionIcon,{onClick:()=>a(g),color:"red",children:t(S.Trash,{size:14})}),sx:{width:"45%"}})),t(r.ActionIcon,{onClick:s,color:"blue",variant:"outline",children:t(S.PlaylistAdd,{size:20})})]})]})}function Pn({conf:e,setConf:n}){const i=T.default.merge({},{align:"center",size:"100px",template:"",weight:"bold",color:{type:"static",staticColor:"red"}},e),{control:o,handleSubmit:l,watch:s,formState:{isDirty:a}}=G.useForm({defaultValues:i}),u=s("color.type");return s("color.valueField"),t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,noWrap:!0,children:p("form",{onSubmit:l(n),children:[p(r.Group,{position:"left",py:"md",pl:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef"},children:[t(r.Text,{weight:500,children:"Stats Configurations"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!a,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Accordion,{offsetIcon:!1,multiple:!0,initialState:{0:!0,2:!0},children:[t(r.Accordion.Item,{label:"Content",children:t(r.Group,{direction:"column",grow:!0,children:t(G.Controller,{name:"template",control:o,render:({field:c})=>t(r.TextInput,f({placeholder:"Time: ${new Date().toISOString()}",label:"Content Template",required:!0,sx:{flex:1}},c))})})}),p(r.Accordion.Item,{label:"Font",children:[t(r.Group,{direction:"column",grow:!0,children:t(G.Controller,{name:"size",control:o,render:({field:c})=>t(r.TextInput,f({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",sx:{flex:1}},c))})}),t(r.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:t(G.Controller,{name:"weight",control:o,render:({field:c})=>t(rt,f({label:"Font Weight"},c))})})]}),t(r.Accordion.Item,{label:"Color",children:p(r.Group,{direction:"column",grow:!0,children:[t(G.Controller,{name:"color.type",control:o,render:({field:c})=>t(r.Select,f({label:"Color Type",data:[{label:"Static Color",value:"static"},{label:"Continuous Color",value:"continuous"}]},c))}),u==="static"&&t(G.Controller,{name:"color.staticColor",control:o,render:({field:c})=>t(Se,f({},c))}),u==="continuous"&&p(K,{children:[t(G.Controller,{name:"color.valueField",control:o,defaultValue:"",render:({field:c})=>t(r.TextInput,f({placeholder:"Calculate color with this field",label:"Value Field",required:!0,sx:{flex:1}},c))}),t(G.Controller,{name:"color.valueRange",control:o,render:({field:c})=>t(zn,f({label:"Value Range"},c))}),t(G.Controller,{name:"color.colorRange",control:o,render:({field:c})=>t(Dn,f({label:"Color Range"},c))})]})]})})]})]})})}function Ln({conf:{label_field:e,value_field:n},setConf:i}){const o=k.useForm({initialValues:{label_field:e,value_field:n}});return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:o.onSubmit(i),children:[p(r.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[t(r.Text,{children:"Sunburst Config"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[t(r.TextInput,f({label:"Label Field",required:!0,sx:{flex:1}},o.getInputProps("label_field"))),t(r.TextInput,f({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},o.getInputProps("value_field")))]})]})})}const kn=Object.values(j).map(e=>({label:e,value:e}));function An({label:e,value:n,onChange:i,sx:o}){return t(r.Select,{label:e,data:kn,value:n,onChange:i,sx:o})}function On(o){var l=o,{conf:s}=l,a=s,{columns:e}=a,n=D(a,["columns"]),{setConf:i}=l;const u=k.useForm({initialValues:f({id_field:"id",use_raw_columns:!0,columns:k.formList(e!=null?e:[]),fontSize:"sm",horizontalSpacing:"sm",verticalSpacing:"sm",striped:!1,highlightOnHover:!1},n)}),c=()=>u.addListItem("columns",{label:q.randomId(),value_field:"value",value_type:j.string});return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:u.onSubmit(i),children:[p(r.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[t(r.Text,{children:"Table Config"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[t(r.TextInput,f({size:"md",mb:"lg",label:"ID Field"},u.getInputProps("id_field"))),p(r.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:[t(r.TextInput,f({label:"Horizontal Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},u.getInputProps("horizontalSpacing"))),t(r.TextInput,f({label:"Vertical Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},u.getInputProps("verticalSpacing")))]}),t(r.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:t(r.TextInput,f({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},u.getInputProps("fontSize")))}),p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{children:"Other"}),p(r.Group,{position:"apart",grow:!0,children:[t(r.Switch,f({label:"Striped"},u.getInputProps("striped",{type:"checkbox"}))),t(r.Switch,f({label:"Highlight on hover"},u.getInputProps("highlightOnHover",{type:"checkbox"})))]})]})]}),p(r.Group,{direction:"column",mt:"xs",spacing:"xs",grow:!0,p:"md",mb:"xl",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[t(r.Switch,f({label:"Use Original Data Columns"},u.getInputProps("use_raw_columns",{type:"checkbox"}))),!u.values.use_raw_columns&&p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{mt:"xl",mb:0,children:"Custom Columns"}),u.values.columns.map((m,h)=>p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[p(r.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:[t(r.TextInput,f({label:"Label",required:!0,sx:{flex:1}},u.getListInputProps("columns",h,"label"))),t(r.TextInput,f({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},u.getListInputProps("columns",h,"value_field"))),t(An,f({label:"Value Type",sx:{flex:1}},u.getListInputProps("columns",h,"value_type")))]}),t(r.ActionIcon,{color:"red",variant:"hover",onClick:()=>u.removeListItem("columns",h),sx:{position:"absolute",top:15,right:5},children:t(S.Trash,{size:16})})]},h)),t(r.Group,{position:"center",mt:"xs",children:t(r.Button,{onClick:c,children:"Add a Column"})})]})]}),t(r.Text,{weight:500,mb:"md",children:"Current Configuration:"}),t(B.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(u.values,null,2)})]})})}const it=[{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 Mn({conf:e,setConf:n}){var l;const i=k.useForm({initialValues:{paragraphs:k.formList((l=e.paragraphs)!=null?l:it)}}),o=()=>i.addListItem("paragraphs",P(f({},it[0]),{template:q.randomId()}));return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:i.onSubmit(n),children:[i.values.paragraphs.length===0&&t(r.Text,{color:"dimmed",align:"center",children:"Empty"}),p(r.Group,{position:"apart",mb:"xs",sx:{" + .mantine-Group-root":{marginTop:0}},children:[t(r.Text,{children:"Paragraphs"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:t(S.DeviceFloppy,{size:20})})]}),i.values.paragraphs.map((s,a)=>p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[t(r.TextInput,f({placeholder:"Time: ${new Date().toISOString()}",label:"Content Template",required:!0,sx:{flex:1}},i.getListInputProps("paragraphs",a,"template"))),p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{children:"Color"}),t(Se,f({},i.getListInputProps("paragraphs",a,"color")))]}),t(r.Group,{direction:"column",grow:!0,children:t(r.TextInput,f({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",sx:{flex:1}},i.getListInputProps("paragraphs",a,"size")))}),t(r.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:t(rt,f({label:"Font Weight"},i.getListInputProps("paragraphs",a,"weight")))}),t(r.ActionIcon,{color:"red",variant:"hover",onClick:()=>i.removeListItem("paragraphs",a),sx:{position:"absolute",top:15,right:5},children:t(S.Trash,{size:16})})]},a)),t(r.Group,{position:"center",mt:"md",children:t(r.Button,{onClick:o,children:"Add a Paragraph"})}),t(r.Text,{size:"sm",weight:500,mt:"md",children:"Current Configuration:"}),t(B.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(i.values,null,2)})]})})}const Ce=[{value:"text",label:"Text",Panel:Mn},{value:"stats",label:"Stats",Panel:Pn},{value:"table",label:"Table",Panel:On},{value:"sunburst",label:"Sunburst",Panel:Ln},{value:"bar-3d",label:"Bar Chart (3D)",Panel:Cn},{value:"cartesian",label:"Cartesian Chart",Panel:Gn},{value:"pie",label:"Pie Chart",Panel:_n}];function En(){const{viz:e,setViz:n}=d.default.useContext(O),[i,o]=q.useInputState(e.type),l=e.type!==i,s=d.default.useCallback(()=>{!l||n(m=>P(f({},m),{type:i}))},[l,i]),a=m=>{n(h=>P(f({},h),{conf:m}))},u=m=>{try{a(JSON.parse(m))}catch(h){console.error(h)}},c=d.default.useMemo(()=>{var m;return(m=Ce.find(h=>h.value===i))==null?void 0:m.Panel},[i,Ce]);return p(K,{children:[t(r.Select,{label:"Visualization",value:i,onChange:o,data:Ce,rightSection:t(r.ActionIcon,{disabled:!l,onClick:s,children:t(S.DeviceFloppy,{size:20})})}),c&&t(c,{conf:e.conf,setConf:a}),!c&&t(r.JsonInput,{minRows:20,label:"Config",value:JSON.stringify(e.conf,null,2),onChange:u})]})}function qn({}){return p(r.Group,{direction:"row",grow:!0,noWrap:!0,align:"stretch",sx:{height:"100%"},children:[t(r.Group,{grow:!0,direction:"column",noWrap:!0,sx:{width:"40%",flexShrink:0,flexGrow:0},children:t(En,{})}),t(r.Box,{sx:{height:"100%",flexGrow:1,maxWidth:"60%"},children:t(Sn,{})})]})}function Fn({opened:e,close:n}){const{freezeLayout:i}=d.default.useContext(F),{data:o,loading:l,viz:s,title:a}=d.default.useContext(O);return d.default.useEffect(()=>{i(e)},[e]),t(r.Modal,{size:"96vw",overflow:"inside",opened:e,onClose:n,title:a,trapFocus:!0,onDragStart:u=>{u.stopPropagation()},children:t(r.AppShell,{sx:{height:"90vh",maxHeight:"calc(100vh - 185px)",".mantine-AppShell-body":{height:"100%"},main:{height:"100%",width:"100%"}},padding:"md",children:p(r.Tabs,{initialTab:2,children:[p(r.Tabs.Tab,{label:"Data Source",children:[t(r.LoadingOverlay,{visible:l,exitTransitionDuration:0}),t(Ot,{})]}),t(r.Tabs.Tab,{label:"Panel",children:t(At,{})}),t(r.Tabs.Tab,{label:"Visualization",children:t(qn,{})})]})})})}function $n({}){const[e,n]=d.default.useState(!1),i=()=>n(!0),o=()=>n(!1),{title:l,refreshData:s}=d.default.useContext(O),{inEditMode:a}=d.default.useContext(F);return p(r.Group,{position:"apart",noWrap:!0,sx:{borderBottom:"1px solid #eee",paddingBottom:"5px"},children:[t(r.Group,{children:t(Me,{})}),t(r.Group,{grow:!0,position:"center",children:t(r.Text,{lineClamp:1,weight:"bold",children:l})}),t(r.Group,{position:"right",spacing:0,sx:{height:"28px"},children:p(r.Menu,{children:[t(r.Menu.Item,{onClick:s,icon:t(S.Refresh,{size:14}),children:"Refresh"}),a&&t(r.Menu.Item,{onClick:i,icon:t(S.Settings,{size:14}),children:"Settings"}),t(r.Divider,{}),t(r.Menu.Item,{color:"red",disabled:!0,icon:t(S.Trash,{size:14}),children:"Delete"})]})}),a&&t(Fn,{opened:e,close:o})]})}var dr="";function ve({viz:e,dataSourceID:n,title:i,description:o,update:l,layout:s,id:a}){const u=d.default.useContext(Q),c=d.default.useContext(E),[m,h]=d.default.useState(i),[x,g]=d.default.useState(o),[y,C]=d.default.useState(n),[I,_]=d.default.useState(e),M=d.default.useMemo(()=>{if(!!y)return c.dataSources.find(Ge=>Ge.id===y)},[y,c.dataSources]);d.default.useEffect(()=>{l==null||l({id:a,layout:s,title:m,description:x,dataSourceID:y,viz:I})},[m,x,M,I,a,s,y]);const{data:L=[],loading:ue,refresh:Te}=pe.useRequest(ke({context:u,definitions:c,title:m,dataSource:M}),{refreshDeps:[u,c,M]}),Ie=Te;return t(O.Provider,{value:{data:L,loading:ue,title:m,setTitle:h,description:x,setDescription:g,dataSourceID:y,setDataSourceID:C,viz:I,setViz:_,refreshData:Ie},children:p(r.Container,{className:"panel-root",children:[t($n,{}),t(fe,{children:t(nt,{viz:I,data:L,loading:ue})})]})})}var cr="";const Bn=z.WidthProvider(z.Responsive);function ot({panels:e,setPanels:n,className:i="layout",cols:o={lg:12,md:10,sm:8,xs:6,xxs:4},rowHeight:l=10,onRemoveItem:s,isDraggable:a,isResizable:u,setLocalCols:c,setBreakpoint:m}){const h=(g,y)=>{m(g),c(y)},x=d.default.useCallback(g=>{const y=new Map;g.forEach(M=>{var L=M,{i:I}=L,_=D(L,["i"]);y.set(I,_)});const C=e.map(I=>P(f({},I),{layout:y.get(I.id)}));n(C)},[e,n]);return t(Bn,{onBreakpointChange:h,onLayoutChange:x,className:i,cols:o,rowHeight:l,isDraggable:a,isResizable:u,children:e.map((I,C)=>{var _=I,{id:g}=_,y=D(_,["id"]);return t("div",{"data-grid":y.layout,children:t(ve,P(f({id:g},y),{destroy:()=>s(g),update:M=>{n(L=>(L.splice(C,1,M),[...L]))}}))},g)})})}function we(e,n){return p(r.Text,{sx:{svg:{verticalAlign:"text-bottom"}},children:[e," ",n]})}function Vn({mode:e,setMode:n}){return t(r.SegmentedControl,{value:e,onChange:n,data:[{label:we(t(S.PlayerPlay,{size:20}),"Use"),value:A.Use},{label:we(t(S.Resize,{size:20}),"Layout"),value:A.Layout},{label:we(t(S.Paint,{size:20}),"Content"),value:A.Edit}]})}const jn=`
+ */var Gt=d.default,_t=Symbol.for("react.element"),zt=Symbol.for("react.fragment"),It=Object.prototype.hasOwnProperty,Dt=Gt.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Pt={key:!0,ref:!0,__self:!0,__source:!0};function Oe(e,n,i){var o,l={},s=null,a=null;i!==void 0&&(s=""+i),n.key!==void 0&&(s=""+n.key),n.ref!==void 0&&(a=n.ref);for(o in n)It.call(n,o)&&!Pt.hasOwnProperty(o)&&(l[o]=n[o]);if(e&&e.defaultProps)for(o in n=e.defaultProps,n)l[o]===void 0&&(l[o]=n[o]);return{$$typeof:_t,type:e,key:s,ref:a,props:l,_owner:Dt.current}}ie.Fragment=zt,ie.jsx=Oe,ie.jsxs=Oe,re.exports=ie;const t=re.exports.jsx,p=re.exports.jsxs,K=re.exports.Fragment;function ke({position:e,trigger:n="click"}){const{freezeLayout:i}=d.default.useContext($),[o,l]=d.default.useState(!1),{description:s}=d.default.useContext(O);if(d.default.useEffect(()=>{i(o)},[o]),!s||s==="<p><br></p>")return null;const a=n==="click"?t(r.Tooltip,{label:"Click to see description",openDelay:500,children:t(S.InfoCircle,{size:20,onClick:()=>l(u=>!u),style:{verticalAlign:"baseline",cursor:"pointer"}})}):t(S.InfoCircle,{size:20,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),style:{verticalAlign:"baseline",cursor:"pointer"}});return t(r.Popover,{opened:o,onClose:()=>l(!1),withCloseButton:!0,withArrow:!0,trapFocus:!0,closeOnEscape:!1,placement:"center",position:e,target:a,children:t(xt.default,{readOnly:!0,value:s,onChange:I.default.noop,sx:{border:"none"}})})}function At(){const{description:e,setDescription:n}=d.default.useContext(O),[i,o]=d.default.useState(e),l=e!==i,s=d.default.useCallback(()=>{!l||n(i)},[l,i]);return p(r.Group,{direction:"column",sx:{flexGrow:1},children:[p(r.Group,{align:"end",children:[t(r.Text,{children:"Description"}),t(r.ActionIcon,{variant:"hover",color:"blue",disabled:!l,onClick:s,children:t(S.DeviceFloppy,{size:20})})]}),t(De.RichTextEditor,{value:i,onChange:o,sx:{flexGrow:1},sticky:!0,p:"0"})]})}class fe extends d.default.Component{constructor(n){super(n),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}render(){return this.state.hasError?t("h1",{children:"Something went wrong."}):this.props.children}}function Lt(){const{title:e}=d.default.useContext(O);return t(fe,{children:p(r.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:[p(r.Group,{position:"apart",noWrap:!0,sx:{borderBottom:"1px solid #eee",paddingBottom:"5px",flexGrow:0,flexShrink:0},children:[t(r.Group,{children:t(ke,{position:"bottom",trigger:"hover"})}),t(r.Group,{grow:!0,position:"center",children:t(r.Text,{lineClamp:1,weight:"bold",children:e})}),t(r.Group,{position:"right",spacing:0,sx:{height:"28px"}})]}),t(r.Group,{sx:{background:"#eee",flexGrow:1}})]})})}function Mt(){const{title:e,setTitle:n}=d.default.useContext(O),[i,o]=E.useInputState(e),l=e!==i,s=d.default.useCallback(()=>{!l||n(i)},[l,i]);return t(r.TextInput,{value:i,onChange:o,label:p(r.Group,{align:"end",children:[t(r.Text,{children:"Panel Title"}),t(r.ActionIcon,{variant:"hover",color:"blue",disabled:!l,onClick:s,children:t(S.DeviceFloppy,{size:20})})]})})}function Ot({}){return p(r.Group,{direction:"row",grow:!0,noWrap:!0,align:"stretch",sx:{height:"100%"},children:[p(r.Group,{grow:!0,direction:"column",sx:{width:"40%",flexShrink:0,flexGrow:0,height:"100%"},children:[t(Mt,{}),t(At,{})]}),t(r.Box,{sx:{height:"100%",flexGrow:1,maxWidth:"60%"},children:t(Lt,{})})]})}function Ee({id:e}){const n=d.default.useContext(k),i=d.default.useContext(Q),o=d.default.useMemo(()=>n.dataSources.find(u=>u.id===e),[n.dataSources,e]),{data:l=[],loading:s,refresh:a}=pe.useRequest(Le({context:i,definitions:n,title:e,dataSource:o}),{refreshDeps:[i,n,o]});return s?t(r.LoadingOverlay,{visible:s,exitTransitionDuration:0}):l.length===0?t(r.Table,{}):p(r.Group,{my:"xl",direction:"column",grow:!0,sx:{border:"1px solid #eee"},children:[p(r.Group,{position:"apart",py:"md",pl:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef"},children:[p(r.Group,{position:"left",children:[t(r.Text,{weight:500,children:"Preview Data"}),l.length>10&&p(r.Text,{size:"sm",color:"gray",children:["Showing 10 rows of ",l.length]})]}),t(r.ActionIcon,{mr:15,variant:"hover",color:"blue",disabled:s,onClick:a,children:t(S.Refresh,{size:15})})]}),p(r.Table,{children:[t("thead",{children:t("tr",{children:Object.keys(l==null?void 0:l[0]).map(u=>t("th",{children:t(r.Text,{weight:700,color:"#000",children:u})},u))})}),t("tbody",{children:l.slice(0,10).map((u,c)=>t("tr",{children:Object.values(u).map((h,m)=>t("td",{children:t(r.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace"}},children:t(r.Text,{children:h})})},`${h}--${m}`))},`row-${c}`))})]})]})}function kt({}){const{dataSources:e}=d.default.useContext(k),{dataSourceID:n,setDataSourceID:i,data:o,loading:l}=d.default.useContext(O),s=d.default.useMemo(()=>e.map(a=>({value:a.id,label:a.id})),[e]);return p(r.Group,{direction:"column",grow:!0,noWrap:!0,children:[p(r.Group,{position:"left",sx:{maxWidth:"600px",alignItems:"baseline"},children:[t(r.Text,{children:"Select a Data Source"}),t(r.Select,{data:s,value:n,onChange:i,allowDeselect:!1,clearable:!1,sx:{flexGrow:1}})]}),t(Ee,{id:n})]})}V.use([ee.SunburstChart,te.CanvasRenderer]);const Et={tooltip:{show:!0},series:{type:"sunburst",radius:[0,"90%"],emphasis:{focus:"ancestor"}}};function qt({conf:e,data:n,width:i,height:o}){const x=e,{label_field:l="name",value_field:s="value"}=x,a=D(x,["label_field","value_field"]),u=d.default.useMemo(()=>n.map(g=>({name:g[l],value:Number(g[s])})),[n,l,s]),c=d.default.useMemo(()=>{var g,y;return(y=(g=I.default.maxBy(u,C=>C.value))==null?void 0:g.value)!=null?y:1},[u]),h=d.default.useMemo(()=>({series:{label:{formatter:({name:g,value:y})=>y/c<.2?" ":g}}}),[c]),m=I.default.merge({},Et,h,a,{series:{data:u}});return t(ne.default,{echarts:V,option:m,style:{width:i,height:o}})}V.use([ee.BarChart,ee.LineChart,W.GridComponent,W.LegendComponent,W.TooltipComponent,te.CanvasRenderer]);const $t={legend:{show:!0,bottom:0,left:0},tooltip:{trigger:"axis"},xAxis:{type:"category",nameGap:25,nameLocation:"center",nameTextStyle:{fontWeight:"bold"}},grid:{top:30,left:15,right:15,bottom:30,containLabel:!0}};function Ft({conf:e,data:n,width:i,height:o}){const l=d.default.useMemo(()=>{var h;const s=e.y_axes.reduce((m,{label_formatter:x},g)=>(m[g]=function(C){const T=typeof C=="object"?C.value:C;if(!x)return T;try{return Y.default(T).format(x)}catch(_){return console.error(_),T}},m),{default:({value:m})=>m}),a=e.series.reduce((m,{yAxisIndex:x,name:g})=>(m[g]=x,m),{}),u=e.series.map(T=>{var _=T,{y_axis_data_key:m,yAxisIndex:x,label_position:g,name:y}=_,C=D(_,["y_axis_data_key","yAxisIndex","label_position","name"]);return f({data:n.map(L=>L[m]),label:{show:!!g,position:g,formatter:s[x!=null?x:"default"]},name:y,yAxisIndex:x},C)}),c={xAxis:{data:n.map(m=>m[e.x_axis_data_key]),name:(h=e.x_axis_name)!=null?h:""},yAxis:e.y_axes.map((y,g)=>{var C=y,{label_formatter:m}=C,x=D(C,["label_formatter"]);var T;return z(f({},x),{axisLabel:{show:!0,formatter:(T=s[g])!=null?T:s.default}})}),dataset:{source:n},series:u,tooltip:{formatter:function(m){const x=Array.isArray(m)?m:[m];if(x.length===0)return"";const g=x.map(({seriesName:y,value:C})=>{var A;if(!y)return C;const T=a[y],_=(A=s[T])!=null?A:s.default;return`${y}: ${_({value:C})}`});return g.unshift(`<strong>${x[0].name}</strong>`),g.join("<br />")}}};return I.default.merge({},$t,c)},[e,n]);return!i||!o?null:t(ne.default,{echarts:V,option:l,style:{width:i,height:o}})}var j=(e=>(e.string="string",e.number="number",e.eloc="eloc",e.percentage="percentage",e))(j||{});function Bt({value:e}){return t(r.Text,{component:"span",children:e})}function Vt({value:e}){return t(r.Text,{component:"span",children:e})}function jt({value:e}){const n=Y.default(e).format({thousandSeparated:!0});return t(r.Text,{component:"span",children:n})}function Nt({value:e}){const n=Y.default(e).format({output:"percent",mantissa:3});return t(r.Text,{component:"span",children:n})}function Rt({value:e,type:n}){switch(n){case j.string:return t(Bt,{value:e});case j.eloc:return t(Vt,{value:e});case j.number:return t(jt,{value:e});case j.percentage:return t(Nt,{value:e})}}function Wt({conf:e,data:n=[],width:i,height:o}){const m=e,{id_field:l,use_raw_columns:s,columns:a}=m,u=D(m,["id_field","use_raw_columns","columns"]),c=d.default.useMemo(()=>s?Object.keys(n==null?void 0:n[0]):a.map(x=>x.label),[s,a,n]),h=d.default.useMemo(()=>s?Object.keys(n==null?void 0:n[0]).map(x=>({label:x,value_field:x,value_type:j.string})):a,[s,a,n]);return p(r.Table,z(f({sx:{maxHeight:o}},u),{children:[t("thead",{children:t("tr",{children:c.map(x=>t("th",{children:x},x))})}),t("tbody",{children:n.slice(0,30).map((x,g)=>t("tr",{children:h.map(({value_field:y,value_type:C})=>t("td",{children:t(r.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace",fontSize:u.fontSize}},children:t(Rt,{value:x[y],type:C})})},x[y]))},l?x[l]:`row-${g}`))}),n.length>100&&t("tfoot",{children:t("tr",{children:t("td",{colSpan:c.length,children:t(r.Text,{color:"red",size:"sm",children:"Showing only the first 30 rows to avoid causing slow performance"})})})})]}))}function Qt(e,n={}){const i=z(f({},n),{numbro:Y.default}),o=Object.keys(i),l=Object.values(i);try{return new Function(...o,`return \`${e}\`;`)(...l)}catch(s){return s.message}}function Ut({conf:{paragraphs:e},data:n}){return t(K,{children:e.map((a,s)=>{var u=a,{template:i,size:o}=u,l=D(u,["template","size"]);return t(r.Text,z(f({},l),{sx:{fontSize:o},children:Qt(i,n[0])}),`${i}---${s}`)})})}V.use([W.GridComponent,W.VisualMapComponent,W.LegendComponent,W.TooltipComponent,te.CanvasRenderer]);function Jt({conf:e,data:n,width:i,height:o}){const x=e,{x_axis_data_key:l,y_axis_data_key:s,z_axis_data_key:a}=x,u=D(x,["x_axis_data_key","y_axis_data_key","z_axis_data_key"]),c=d.default.useMemo(()=>I.default.minBy(n,g=>g[a])[a],[n,a]),h=d.default.useMemo(()=>I.default.maxBy(n,g=>g[a])[a],[n,a]),m=z(f({tooltip:{},backgroundColor:"#fff",visualMap:{show:!0,dimension:2,min:c,max:h,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}}}},u),{series:[{type:"bar3D",wireframe:{},data:n.map(g=>[g[l],g[s],g[a]])}]});return t(ne.default,{echarts:V,option:m,style:{width:i,height:o}})}var pr="";V.use([ee.PieChart,te.CanvasRenderer]);const Yt={tooltip:{show:!0},series:{type:"pie",radius:["50%","80%"],label:{position:"outer",alignTo:"edge",formatter:`{name|{b}}
+{percentage|{d}%}`,minMargin:5,edgeDistance:10,lineHeight:15,rich:{percentage:{color:"#999"}},margin:20},labelLine:{length:15,length2:0,maxSurfaceAngle:80,showAbove:!0},top:10,bottom:10,left:10,right:10}};function Kt({conf:e,data:n,width:i,height:o}){const m=e,{label_field:l="name",value_field:s="value"}=m,a=D(m,["label_field","value_field"]),u=d.default.useMemo(()=>n.map(x=>({name:x[l],value:Number(x[s])})),[n,l,s]),c=d.default.useMemo(()=>({series:{labelLayout:function(x){const g=x.labelRect.x<i/2,y=x.labelLinePoints;return y[2][0]=g?x.labelRect.x:x.labelRect.x+x.labelRect.width,{labelLinePoints:y}}}}),[i]),h=I.default.merge({},Yt,c,a,{series:{data:u}});return t(ne.default,{echarts:V,option:h,style:{width:i,height:o}})}var qe=function(){};const Xt=(e,n,i)=>Math.min(Math.max(i,e),n),$e=(e,n,i)=>{const o=n-e;return o===0?1:(i-e)/o},me=(e,n,i)=>-i*e+i*n+e,Fe=(e,n)=>i=>Math.max(Math.min(i,n),e),X=e=>e%1?Number(e.toFixed(5)):e,oe=/(-)?([\d]*\.?[\d])+/g,he=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,Zt=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function Z(e){return typeof e=="string"}const le={test:e=>typeof e=="number",parse:parseFloat,transform:e=>e},Be=Object.assign(Object.assign({},le),{transform:Fe(0,1)});Object.assign(Object.assign({},le),{default:1});const H=(e=>({test:n=>Z(n)&&n.endsWith(e)&&n.split(" ").length===1,parse:parseFloat,transform:n=>`${n}${e}`}))("%");Object.assign(Object.assign({},H),{parse:e=>H.parse(e)/100,transform:e=>H.transform(e*100)});const xe=(e,n)=>i=>Boolean(Z(i)&&Zt.test(i)&&i.startsWith(e)||n&&Object.prototype.hasOwnProperty.call(i,n)),Ve=(e,n,i)=>o=>{if(!Z(o))return o;const[l,s,a,u]=o.match(oe);return{[e]:parseFloat(l),[n]:parseFloat(s),[i]:parseFloat(a),alpha:u!==void 0?parseFloat(u):1}},U={test:xe("hsl","hue"),parse:Ve("hue","saturation","lightness"),transform:({hue:e,saturation:n,lightness:i,alpha:o=1})=>"hsla("+Math.round(e)+", "+H.transform(X(n))+", "+H.transform(X(i))+", "+X(Be.transform(o))+")"},Ht=Fe(0,255),ge=Object.assign(Object.assign({},le),{transform:e=>Math.round(Ht(e))}),N={test:xe("rgb","red"),parse:Ve("red","green","blue"),transform:({red:e,green:n,blue:i,alpha:o=1})=>"rgba("+ge.transform(e)+", "+ge.transform(n)+", "+ge.transform(i)+", "+X(Be.transform(o))+")"};function en(e){let n="",i="",o="",l="";return e.length>5?(n=e.substr(1,2),i=e.substr(3,2),o=e.substr(5,2),l=e.substr(7,2)):(n=e.substr(1,1),i=e.substr(2,1),o=e.substr(3,1),l=e.substr(4,1),n+=n,i+=i,o+=o,l+=l),{red:parseInt(n,16),green:parseInt(i,16),blue:parseInt(o,16),alpha:l?parseInt(l,16)/255:1}}const be={test:xe("#"),parse:en,transform:N.transform},ae={test:e=>N.test(e)||be.test(e)||U.test(e),parse:e=>N.test(e)?N.parse(e):U.test(e)?U.parse(e):be.parse(e),transform:e=>Z(e)?e:e.hasOwnProperty("red")?N.transform(e):U.transform(e)},je="${c}",Ne="${n}";function tn(e){var n,i,o,l;return isNaN(e)&&Z(e)&&((i=(n=e.match(oe))===null||n===void 0?void 0:n.length)!==null&&i!==void 0?i:0)+((l=(o=e.match(he))===null||o===void 0?void 0:o.length)!==null&&l!==void 0?l:0)>0}function Re(e){typeof e=="number"&&(e=`${e}`);const n=[];let i=0;const o=e.match(he);o&&(i=o.length,e=e.replace(he,je),n.push(...o.map(ae.parse)));const l=e.match(oe);return l&&(e=e.replace(oe,Ne),n.push(...l.map(le.parse))),{values:n,numColors:i,tokenised:e}}function We(e){return Re(e).values}function Qe(e){const{values:n,numColors:i,tokenised:o}=Re(e),l=n.length;return s=>{let a=o;for(let u=0;u<l;u++)a=a.replace(u<i?je:Ne,u<i?ae.transform(s[u]):X(s[u]));return a}}const nn=e=>typeof e=="number"?0:e;function rn(e){const n=We(e);return Qe(e)(n.map(nn))}const Ue={test:tn,parse:We,createTransformer:Qe,getAnimatableNone:rn};function ye(e,n,i){return i<0&&(i+=1),i>1&&(i-=1),i<1/6?e+(n-e)*6*i:i<1/2?n:i<2/3?e+(n-e)*(2/3-i)*6:e}function Je({hue:e,saturation:n,lightness:i,alpha:o}){e/=360,n/=100,i/=100;let l=0,s=0,a=0;if(!n)l=s=a=i;else{const u=i<.5?i*(1+n):i+n-i*n,c=2*i-u;l=ye(c,u,e+1/3),s=ye(c,u,e),a=ye(c,u,e-1/3)}return{red:Math.round(l*255),green:Math.round(s*255),blue:Math.round(a*255),alpha:o}}const on=(e,n,i)=>{const o=e*e,l=n*n;return Math.sqrt(Math.max(0,i*(l-o)+o))},ln=[be,N,U],Ye=e=>ln.find(n=>n.test(e)),Ke=(e,n)=>{let i=Ye(e),o=Ye(n),l=i.parse(e),s=o.parse(n);i===U&&(l=Je(l),i=N),o===U&&(s=Je(s),o=N);const a=Object.assign({},l);return u=>{for(const c in a)c!=="alpha"&&(a[c]=on(l[c],s[c],u));return a.alpha=me(l.alpha,s.alpha,u),i.transform(a)}},an=e=>typeof e=="number",sn=(e,n)=>i=>n(e(i)),Xe=(...e)=>e.reduce(sn);function Ze(e,n){return an(e)?i=>me(e,n,i):ae.test(e)?Ke(e,n):tt(e,n)}const He=(e,n)=>{const i=[...e],o=i.length,l=e.map((s,a)=>Ze(s,n[a]));return s=>{for(let a=0;a<o;a++)i[a]=l[a](s);return i}},un=(e,n)=>{const i=Object.assign(Object.assign({},e),n),o={};for(const l in i)e[l]!==void 0&&n[l]!==void 0&&(o[l]=Ze(e[l],n[l]));return l=>{for(const s in o)i[s]=o[s](l);return i}};function et(e){const n=Ue.parse(e),i=n.length;let o=0,l=0,s=0;for(let a=0;a<i;a++)o||typeof n[a]=="number"?o++:n[a].hue!==void 0?s++:l++;return{parsed:n,numNumbers:o,numRGB:l,numHSL:s}}const tt=(e,n)=>{const i=Ue.createTransformer(n),o=et(e),l=et(n);return o.numHSL===l.numHSL&&o.numRGB===l.numRGB&&o.numNumbers>=l.numNumbers?Xe(He(o.parsed,l.parsed),i):a=>`${a>0?n:e}`},dn=(e,n)=>i=>me(e,n,i);function cn(e){if(typeof e=="number")return dn;if(typeof e=="string")return ae.test(e)?Ke:tt;if(Array.isArray(e))return He;if(typeof e=="object")return un}function pn(e,n,i){const o=[],l=i||cn(e[0]),s=e.length-1;for(let a=0;a<s;a++){let u=l(e[a],e[a+1]);if(n){const c=Array.isArray(n)?n[a]:n;u=Xe(c,u)}o.push(u)}return o}function fn([e,n],[i]){return o=>i($e(e,n,o))}function mn(e,n){const i=e.length,o=i-1;return l=>{let s=0,a=!1;if(l<=e[0]?a=!0:l>=e[o]&&(s=o-1,a=!0),!a){let c=1;for(;c<i&&!(e[c]>l||c===o);c++);s=c-1}const u=$e(e[s],e[s+1],l);return n[s](u)}}function hn(e,n,{clamp:i=!0,ease:o,mixer:l}={}){const s=e.length;qe(s===n.length),qe(!o||!Array.isArray(o)||o.length===s-1),e[0]>e[s-1]&&(e=[].concat(e),n=[].concat(n),e.reverse(),n.reverse());const a=pn(n,o,l),u=s===2?fn(e,a):mn(e,a);return i?c=>u(Xt(e[0],e[s-1],c)):u}class xn{constructor({valueRange:n,colorRange:i}){ut(this,"mapper");this.mapper=hn(n,i)}getColor(n){return this.mapper(n)}}function gn(e,n={}){const i=z(f({},n),{numbro:Y.default}),o=Object.keys(i),l=Object.values(i);try{return new Function(...o,`return \`${e}\`;`)(...l)}catch(s){return s.message}}function bn(e,n){if(e.type==="static")return e.staticColor;if(e.type==="continuous"){const i=new xn(e),o=n[e.valueField];return i.getColor(o)}return"black"}function yn(s){var a=s,{conf:u}=a,c=u,{template:e,size:n,color:i}=c,o=D(c,["template","size","color"]),{data:l}=a;const h=d.default.useMemo(()=>bn(i,l[0]),[i,l]);return t(r.Text,z(f({},o),{color:h,sx:{fontSize:n},children:gn(e,l[0])}))}function Sn(e,n,i,o){const l={width:e,height:n,data:i,conf:o.conf};switch(o.type){case"sunburst":return t(qt,f({},l));case"line-bar":case"cartesian":return t(Ft,f({},l));case"table":return t(Wt,f({},l));case"text":return t(Ut,f({},l));case"stats":return t(yn,f({},l));case"bar-3d":return t(Jt,f({},l));case"pie":return t(Kt,f({},l));default:return null}}function nt({viz:e,data:n,loading:i}){const{ref:o,width:l,height:s}=E.useElementSize(),a=d.default.useMemo(()=>!Array.isArray(n)||n.length===0,[n]);return i?t("div",{className:"viz-root",ref:o,children:t(r.LoadingOverlay,{visible:i,exitTransitionDuration:0})}):p("div",{className:"viz-root",ref:o,children:[a&&t(r.Text,{color:"gray",align:"center",children:"nothing to show"}),!a&&Sn(l,s,n,e)]})}function Cn({}){const{data:e,loading:n,viz:i}=d.default.useContext(O);return t(fe,{children:t(nt,{viz:i,data:e,loading:n})})}function vn({conf:e,setConf:n}){const i=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"}},e),{control:o,handleSubmit:l,formState:s}=v.useForm({defaultValues:i});return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:l(n),children:[t(r.Text,{children:"X Axis"}),p(r.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[t(v.Controller,{name:"x_axis_data_key",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Data Key"},a))}),t(v.Controller,{name:"xAxis3D.name",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Name"},a))})]}),t(r.Text,{mt:"lg",children:"Y Axis"}),p(r.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[t(v.Controller,{name:"y_axis_data_key",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Data Key"},a))}),t(v.Controller,{name:"yAxis3D.name",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Name"},a))})]}),t(r.Text,{mt:"lg",children:"Z Axis"}),p(r.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[t(v.Controller,{name:"z_axis_data_key",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Data Key"},a))}),t(v.Controller,{name:"zAxis3D.name",control:o,render:({field:a})=>t(r.TextInput,f({sx:{flexGrow:1},size:"md",label:"Name"},a))})]}),t(r.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"60%"},mx:"auto",children:p(r.Button,{color:"blue",type:"submit",children:[t(S.DeviceFloppy,{size:20}),t(r.Text,{ml:"md",children:"Save"})]})})]})})}function Se({value:e,onChange:n}){const i=r.useMantineTheme(),o=d.default.useMemo(()=>Object.entries(i.colors).map(([s,a])=>({label:s,value:a[6]})),[i]),l=d.default.useMemo(()=>o.some(s=>s.value===e),[e,o]);return p(r.Group,{position:"apart",spacing:"xs",children:[t(r.TextInput,{placeholder:"Set any color",value:l?"":e,onChange:s=>n(s.currentTarget.value),rightSection:t(r.ColorSwatch,{color:l?"transparent":e,radius:4}),variant:l?"filled":"default",sx:{maxWidth:"100%",flexGrow:1}}),t(r.Text,{sx:{flexGrow:0},children:"or"}),t(r.Select,{data:o,value:e,onChange:n,variant:l?"default":"filled",placeholder:"Pick a theme color",icon:t(r.ColorSwatch,{color:l?e:"transparent",radius:4}),sx:{maxWidth:"100%",flexGrow:1}})]})}const wn=[{label:"off",value:""},{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 Tn({control:e,index:n,remove:i,seriesItem:o,yAxisOptions:l}){const s=o.type;return p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[t(r.Group,{direction:"column",grow:!0,noWrap:!0,children:t(v.Controller,{name:`series.${n}.type`,control:e,render:({field:a})=>t(r.SegmentedControl,f({data:[{label:"Line",value:"line"},{label:"Bar",value:"bar"},{label:"Scatter",value:"scatter",disabled:!0},{label:"Boxplot",value:"boxplot",disabled:!0}]},a))})}),t(v.Controller,{name:`series.${n}.name`,control:e,render:({field:a})=>t(r.TextInput,f({label:"Name",required:!0,sx:{flex:1}},a))}),p(r.Group,{direction:"row",grow:!0,noWrap:!0,children:[t(v.Controller,{name:`series.${n}.y_axis_data_key`,control:e,render:({field:a})=>t(r.TextInput,f({label:"Value key",required:!0,sx:{flex:1}},a))}),t(v.Controller,{name:`series.${n}.yAxisIndex`,control:e,render:h=>{var{field:m}=h,x=m,{value:a,onChange:u}=x,c=D(x,["value","onChange"]);var g;return t(r.Select,z(f({label:"Y Axis",data:l,disabled:l.length===0},c),{value:(g=a==null?void 0:a.toString())!=null?g:"",onChange:y=>{if(!y){u(0);return}u(Number(y))},sx:{flex:1}}))}})]}),s==="bar"&&p(r.Group,{direction:"row",grow:!0,align:"top",children:[t(v.Controller,{name:`series.${n}.stack`,control:e,render:({field:a})=>t(r.TextInput,f({label:"Stack",placeholder:"Stack bars by this ID",sx:{flexGrow:1}},a))}),t(v.Controller,{name:`series.${n}.barWidth`,control:e,render:({field:a})=>t(r.TextInput,f({label:"Bar Width",sx:{flexGrow:1}},a))})]}),t(v.Controller,{name:`series.${n}.label_position`,control:e,render:({field:a})=>t(r.Select,f({label:"Label Position",data:wn},a))}),p(r.Group,{direction:"column",grow:!0,spacing:4,children:[t(r.Text,{size:"sm",children:"Color"}),t(v.Controller,{name:`series.${n}.color`,control:e,render:({field:a})=>t(Se,f({},a))})]}),t(r.ActionIcon,{color:"red",variant:"hover",onClick:()=>i(n),sx:{position:"absolute",top:15,right:5},children:t(S.Trash,{size:16})})]},n)}function Gn({control:e,watch:n,getValues:i}){const{fields:o,append:l,remove:s}=v.useFieldArray({control:e,name:"series"}),a=n("y_axes"),u=o.map((m,x)=>f(f({},m),a[x])),c=()=>l({type:"bar",name:E.randomId(),showSymbol:!1,y_axis_data_key:"value",yAxisIndex:0,label_position:"top",stack:"",color:"#000"}),h=d.default.useMemo(()=>i().y_axes.map(({name:m},x)=>({label:m,value:x.toString()})),[i]);return p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{mt:"xl",mb:0,children:"Series"}),u.map((m,x)=>t(Tn,{control:e,index:x,remove:s,seriesItem:m,yAxisOptions:h})),t(r.Group,{position:"center",mt:"xs",children:t(r.Button,{onClick:c,children:"Add a Series"})})]})}const rt={mantissa:0,output:"number"};function _n({value:e,onChange:n}){const i=s=>{n(z(f({},e),{output:s}))},o=s=>{const a=s===0?!1:e.trimMantissa;n(z(f({},e),{mantissa:s,trimMantissa:a}))},l=s=>{n(z(f({},e),{trimMantissa:s.currentTarget.checked}))};return t(r.Group,{direction:"column",grow:!0,noWrap:!0,children:p(r.Group,{direction:"row",grow:!0,children:[t(r.Select,{label:"Format",data:[{label:"1234",value:"number"},{label:"99%",value:"percent"}],value:e.output,onChange:i}),t(r.NumberInput,{label:"Mantissa",defaultValue:0,min:0,step:1,max:4,value:e.mantissa,onChange:o}),t(r.Switch,{label:"Trim mantissa",checked:e.trimMantissa,onChange:l,disabled:e.mantissa===0})]})})}function zn({control:e,index:n,remove:i}){return p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[t(r.Group,{direction:"row",grow:!0,noWrap:!0,children:t(v.Controller,{name:`y_axes.${n}.name`,control:e,render:({field:o})=>t(r.TextInput,f({label:"Name",required:!0,sx:{flex:1}},o))})}),t(r.Group,{direction:"column",grow:!0,noWrap:!0,children:t(v.Controller,{name:`y_axes.${n}.label_formatter`,control:e,render:({field:o})=>t(_n,f({},o))})}),t(r.ActionIcon,{color:"red",variant:"hover",onClick:()=>i(n),sx:{position:"absolute",top:15,right:5},disabled:n===0,children:t(S.Trash,{size:16})})]},n)}function In({control:e,watch:n}){const{fields:i,append:o,remove:l}=v.useFieldArray({control:e,name:"y_axes"}),s=n("y_axes"),a=i.map((c,h)=>f(f({},c),s[h])),u=()=>o({name:"",label_formatter:rt});return p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{mt:"xl",mb:0,children:"Y Axes"}),a.map((c,h)=>t(zn,{control:e,index:h,remove:l})),t(r.Group,{position:"center",mt:"xs",children:t(r.Button,{onClick:u,children:"Add a Y Axis"})})]})}function Dn(e){function n({type:i,name:o,showSymbol:l,y_axis_data_key:s="value",yAxisIndex:a=0,label_position:u="top",stack:c="1",color:h="black",barWidth:m="30"}){return{type:i,name:o,showSymbol:l,y_axis_data_key:s,yAxisIndex:a,label_position:u,stack:c,color:h,barWidth:m}}return e.map(n)}function Pn({conf:e,setConf:n}){const x=e,{series:i,y_axes:o}=x,l=D(x,["series","y_axes"]),s=d.default.useMemo(()=>{const C=l,{x_axis_name:g=""}=C,y=D(C,["x_axis_name"]);return f({series:Dn(i!=null?i:[]),x_axis_name:g,y_axes:o!=null?o:[{name:"Y Axis",label_formatter:rt}]},y)},[i,l]);d.default.useEffect(()=>{!I.default.isEqual(e,s)&&n(s)},[e,s]);const{control:a,handleSubmit:u,watch:c,formState:{isDirty:h},getValues:m}=v.useForm({defaultValues:s});return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:u(n),children:[p(r.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[t(r.Text,{children:"Chart Config"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!h,children:t(S.DeviceFloppy,{size:20})})]}),t(v.Controller,{name:"x_axis_data_key",control:a,render:({field:g})=>t(r.TextInput,f({size:"md",mb:"lg",label:"X Axis Data Key"},g))}),t(r.Group,{direction:"column",grow:!0,noWrap:!0,mb:"lg",children:t(v.Controller,{name:"x_axis_name",control:a,render:({field:g})=>t(r.TextInput,f({size:"md",label:"X Axis Name"},g))})}),t(In,{control:a,watch:c}),t(Gn,{control:a,watch:c,getValues:m})]})})}function An({conf:{label_field:e,value_field:n},setConf:i}){const o=q.useForm({initialValues:{label_field:e,value_field:n}});return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:o.onSubmit(i),children:[p(r.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[t(r.Text,{children:"Pie Config"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[t(r.TextInput,f({label:"Label Field",required:!0,sx:{flex:1}},o.getInputProps("label_field"))),t(r.TextInput,f({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},o.getInputProps("value_field")))]})]})})}const se=[{label:"initial",value:0},{label:"500",value:25},{label:"700",value:50},{label:"semibold",value:75},{label:"bold",value:100}];function it({label:e,value:n,onChange:i}){var s,a;const[o,l]=d.default.useState((a=(s=se.find(u=>u.label===n))==null?void 0:s.value)!=null?a:se[0].value);return d.default.useEffect(()=>{const u=se.find(c=>c.value===o);u&&i(u.label)},[o]),p(r.Group,{direction:"column",grow:!0,spacing:"xs",mb:"lg",children:[t(r.Text,{children:e}),t(r.Slider,{label:null,marks:se,value:o,onChange:l,step:25,placeholder:"Pick a font size"})]})}function Ln({label:e,value:n,onChange:i}){const[o,l]=d.default.useState(Array.isArray(n)?[...n]:[]),s=d.default.useCallback(()=>{l(h=>[...h,""])},[l]),a=d.default.useCallback(h=>{l(m=>(m.splice(h,1),[...m]))},[l]),u=d.default.useMemo(()=>!I.default.isEqual(o,n),[o,n]),c=()=>{i(o.map(h=>h.toString()))};return p(K,{children:[p(r.Group,{position:"left",children:[t(r.Text,{children:e}),t(r.ActionIcon,{mr:5,variant:"filled",color:"blue",disabled:!u,onClick:c,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{children:[o.map((h,m)=>t(r.TextInput,{value:h,onChange:x=>{const g=x.currentTarget.value;l(y=>(y.splice(m,1,g),[...y]))},rightSection:t(r.ActionIcon,{onClick:()=>a(m),color:"red",children:t(S.Trash,{size:14})}),sx:{width:"45%"}})),t(r.ActionIcon,{onClick:s,color:"blue",variant:"outline",children:t(S.PlaylistAdd,{size:20})})]})]})}function Mn({label:e,value:n,onChange:i}){const[o,l]=d.default.useState(Array.isArray(n)?[...n]:[]),s=d.default.useCallback(()=>{l(x=>[...x,""])},[l]),a=d.default.useCallback(x=>{l(g=>(g.splice(x,1),[...g]))},[l]),u=d.default.useMemo(()=>!I.default.isEqual(o,n),[o,n]),c=()=>{i(o.map(x=>x.toString()))},h=r.useMantineTheme(),m=d.default.useMemo(()=>Object.entries(h.colors).map(([x,g])=>g[6]),[h]);return p(K,{children:[p(r.Group,{position:"left",children:[t(r.Text,{children:e}),t(r.ActionIcon,{mr:5,variant:"filled",color:"blue",disabled:!u,onClick:c,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{children:[o.map((x,g)=>t(r.ColorInput,{value:x,onChange:y=>{l(C=>(C.splice(g,1,y),[...C]))},swatches:m,rightSection:t(r.ActionIcon,{onClick:()=>a(g),color:"red",children:t(S.Trash,{size:14})}),sx:{width:"45%"}})),t(r.ActionIcon,{onClick:s,color:"blue",variant:"outline",children:t(S.PlaylistAdd,{size:20})})]})]})}function On({conf:e,setConf:n}){const i=I.default.merge({},{align:"center",size:"100px",template:"",weight:"bold",color:{type:"static",staticColor:"red"}},e),{control:o,handleSubmit:l,watch:s,formState:{isDirty:a}}=v.useForm({defaultValues:i}),u=s("color.type");return s("color.valueField"),t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,noWrap:!0,children:p("form",{onSubmit:l(n),children:[p(r.Group,{position:"left",py:"md",pl:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef"},children:[t(r.Text,{weight:500,children:"Stats Configurations"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!a,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Accordion,{offsetIcon:!1,multiple:!0,initialState:{0:!0,2:!0},children:[t(r.Accordion.Item,{label:"Content",children:t(r.Group,{direction:"column",grow:!0,children:t(v.Controller,{name:"template",control:o,render:({field:c})=>t(r.TextInput,f({placeholder:"Time: ${new Date().toISOString()}",label:"Content Template",required:!0,sx:{flex:1}},c))})})}),p(r.Accordion.Item,{label:"Font",children:[t(r.Group,{direction:"column",grow:!0,children:t(v.Controller,{name:"size",control:o,render:({field:c})=>t(r.TextInput,f({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",sx:{flex:1}},c))})}),t(r.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:t(v.Controller,{name:"weight",control:o,render:({field:c})=>t(it,f({label:"Font Weight"},c))})})]}),t(r.Accordion.Item,{label:"Color",children:p(r.Group,{direction:"column",grow:!0,children:[t(v.Controller,{name:"color.type",control:o,render:({field:c})=>t(r.Select,f({label:"Color Type",data:[{label:"Static Color",value:"static"},{label:"Continuous Color",value:"continuous"}]},c))}),u==="static"&&t(v.Controller,{name:"color.staticColor",control:o,render:({field:c})=>t(Se,f({},c))}),u==="continuous"&&p(K,{children:[t(v.Controller,{name:"color.valueField",control:o,defaultValue:"",render:({field:c})=>t(r.TextInput,f({placeholder:"Calculate color with this field",label:"Value Field",required:!0,sx:{flex:1}},c))}),t(v.Controller,{name:"color.valueRange",control:o,render:({field:c})=>t(Ln,f({label:"Value Range"},c))}),t(v.Controller,{name:"color.colorRange",control:o,render:({field:c})=>t(Mn,f({label:"Color Range"},c))})]})]})})]})]})})}function kn({conf:{label_field:e,value_field:n},setConf:i}){const o=q.useForm({initialValues:{label_field:e,value_field:n}});return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:o.onSubmit(i),children:[p(r.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[t(r.Text,{children:"Sunburst Config"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[t(r.TextInput,f({label:"Label Field",required:!0,sx:{flex:1}},o.getInputProps("label_field"))),t(r.TextInput,f({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},o.getInputProps("value_field")))]})]})})}const En=Object.values(j).map(e=>({label:e,value:e}));function qn({label:e,value:n,onChange:i,sx:o}){return t(r.Select,{label:e,data:En,value:n,onChange:i,sx:o})}function $n(o){var l=o,{conf:s}=l,a=s,{columns:e}=a,n=D(a,["columns"]),{setConf:i}=l;const u=q.useForm({initialValues:f({id_field:"id",use_raw_columns:!0,columns:q.formList(e!=null?e:[]),fontSize:"sm",horizontalSpacing:"sm",verticalSpacing:"sm",striped:!1,highlightOnHover:!1},n)}),c=()=>u.addListItem("columns",{label:E.randomId(),value_field:"value",value_type:j.string});return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:u.onSubmit(i),children:[p(r.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[t(r.Text,{children:"Table Config"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[t(r.TextInput,f({size:"md",mb:"lg",label:"ID Field"},u.getInputProps("id_field"))),p(r.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:[t(r.TextInput,f({label:"Horizontal Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},u.getInputProps("horizontalSpacing"))),t(r.TextInput,f({label:"Vertical Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},u.getInputProps("verticalSpacing")))]}),t(r.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:t(r.TextInput,f({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},u.getInputProps("fontSize")))}),p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{children:"Other"}),p(r.Group,{position:"apart",grow:!0,children:[t(r.Switch,f({label:"Striped"},u.getInputProps("striped",{type:"checkbox"}))),t(r.Switch,f({label:"Highlight on hover"},u.getInputProps("highlightOnHover",{type:"checkbox"})))]})]})]}),p(r.Group,{direction:"column",mt:"xs",spacing:"xs",grow:!0,p:"md",mb:"xl",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[t(r.Switch,f({label:"Use Original Data Columns"},u.getInputProps("use_raw_columns",{type:"checkbox"}))),!u.values.use_raw_columns&&p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{mt:"xl",mb:0,children:"Custom Columns"}),u.values.columns.map((h,m)=>p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[p(r.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:[t(r.TextInput,f({label:"Label",required:!0,sx:{flex:1}},u.getListInputProps("columns",m,"label"))),t(r.TextInput,f({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},u.getListInputProps("columns",m,"value_field"))),t(qn,f({label:"Value Type",sx:{flex:1}},u.getListInputProps("columns",m,"value_type")))]}),t(r.ActionIcon,{color:"red",variant:"hover",onClick:()=>u.removeListItem("columns",m),sx:{position:"absolute",top:15,right:5},children:t(S.Trash,{size:16})})]},m)),t(r.Group,{position:"center",mt:"xs",children:t(r.Button,{onClick:c,children:"Add a Column"})})]})]}),t(r.Text,{weight:500,mb:"md",children:"Current Configuration:"}),t(B.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(u.values,null,2)})]})})}const ot=[{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 Fn({conf:e,setConf:n}){var l;const i=q.useForm({initialValues:{paragraphs:q.formList((l=e.paragraphs)!=null?l:ot)}}),o=()=>i.addListItem("paragraphs",z(f({},ot[0]),{template:E.randomId()}));return t(r.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:p("form",{onSubmit:i.onSubmit(n),children:[i.values.paragraphs.length===0&&t(r.Text,{color:"dimmed",align:"center",children:"Empty"}),p(r.Group,{position:"apart",mb:"xs",sx:{" + .mantine-Group-root":{marginTop:0}},children:[t(r.Text,{children:"Paragraphs"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:t(S.DeviceFloppy,{size:20})})]}),i.values.paragraphs.map((s,a)=>p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[t(r.TextInput,f({placeholder:"Time: ${new Date().toISOString()}",label:"Content Template",required:!0,sx:{flex:1}},i.getListInputProps("paragraphs",a,"template"))),p(r.Group,{direction:"column",grow:!0,children:[t(r.Text,{children:"Color"}),t(Se,f({},i.getListInputProps("paragraphs",a,"color")))]}),t(r.Group,{direction:"column",grow:!0,children:t(r.TextInput,f({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",sx:{flex:1}},i.getListInputProps("paragraphs",a,"size")))}),t(r.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:t(it,f({label:"Font Weight"},i.getListInputProps("paragraphs",a,"weight")))}),t(r.ActionIcon,{color:"red",variant:"hover",onClick:()=>i.removeListItem("paragraphs",a),sx:{position:"absolute",top:15,right:5},children:t(S.Trash,{size:16})})]},a)),t(r.Group,{position:"center",mt:"md",children:t(r.Button,{onClick:o,children:"Add a Paragraph"})}),t(r.Text,{size:"sm",weight:500,mt:"md",children:"Current Configuration:"}),t(B.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(i.values,null,2)})]})})}const Ce=[{value:"text",label:"Text",Panel:Fn},{value:"stats",label:"Stats",Panel:On},{value:"table",label:"Table",Panel:$n},{value:"sunburst",label:"Sunburst",Panel:kn},{value:"bar-3d",label:"Bar Chart (3D)",Panel:vn},{value:"cartesian",label:"Cartesian Chart",Panel:Pn},{value:"pie",label:"Pie Chart",Panel:An}];function Bn(){const{viz:e,setViz:n}=d.default.useContext(O),[i,o]=E.useInputState(e.type),l=e.type!==i,s=d.default.useCallback(()=>{!l||n(h=>z(f({},h),{type:i}))},[l,i]),a=h=>{n(m=>z(f({},m),{conf:h}))},u=h=>{try{a(JSON.parse(h))}catch(m){console.error(m)}},c=d.default.useMemo(()=>{var h;return(h=Ce.find(m=>m.value===i))==null?void 0:h.Panel},[i,Ce]);return p(K,{children:[t(r.Select,{label:"Visualization",value:i,onChange:o,data:Ce,rightSection:t(r.ActionIcon,{disabled:!l,onClick:s,children:t(S.DeviceFloppy,{size:20})})}),c&&t(c,{conf:e.conf,setConf:a}),!c&&t(r.JsonInput,{minRows:20,label:"Config",value:JSON.stringify(e.conf,null,2),onChange:u})]})}function Vn({}){return p(r.Group,{direction:"row",grow:!0,noWrap:!0,align:"stretch",sx:{height:"100%"},children:[t(r.Group,{grow:!0,direction:"column",noWrap:!0,sx:{width:"40%",flexShrink:0,flexGrow:0},children:t(Bn,{})}),t(r.Box,{sx:{height:"100%",flexGrow:1,maxWidth:"60%"},children:t(Cn,{})})]})}function jn({opened:e,close:n}){const{freezeLayout:i}=d.default.useContext($),{data:o,loading:l,viz:s,title:a}=d.default.useContext(O);return d.default.useEffect(()=>{i(e)},[e]),t(r.Modal,{size:"96vw",overflow:"inside",opened:e,onClose:n,title:a,trapFocus:!0,onDragStart:u=>{u.stopPropagation()},children:t(r.AppShell,{sx:{height:"90vh",maxHeight:"calc(100vh - 185px)",".mantine-AppShell-body":{height:"100%"},main:{height:"100%",width:"100%"}},padding:"md",children:p(r.Tabs,{initialTab:2,children:[p(r.Tabs.Tab,{label:"Data Source",children:[t(r.LoadingOverlay,{visible:l,exitTransitionDuration:0}),t(kt,{})]}),t(r.Tabs.Tab,{label:"Panel",children:t(Ot,{})}),t(r.Tabs.Tab,{label:"Visualization",children:t(Vn,{})})]})})})}function Nn({}){const[e,n]=d.default.useState(!1),i=()=>n(!0),o=()=>n(!1),{title:l,refreshData:s}=d.default.useContext(O),{inEditMode:a}=d.default.useContext($);return p(r.Group,{position:"apart",noWrap:!0,sx:{borderBottom:"1px solid #eee",paddingBottom:"5px"},children:[t(r.Group,{children:t(ke,{})}),t(r.Group,{grow:!0,position:"center",children:t(r.Text,{lineClamp:1,weight:"bold",children:l})}),t(r.Group,{position:"right",spacing:0,sx:{height:"28px"},children:p(r.Menu,{children:[t(r.Menu.Item,{onClick:s,icon:t(S.Refresh,{size:14}),children:"Refresh"}),a&&t(r.Menu.Item,{onClick:i,icon:t(S.Settings,{size:14}),children:"Settings"}),t(r.Divider,{}),t(r.Menu.Item,{color:"red",disabled:!0,icon:t(S.Trash,{size:14}),children:"Delete"})]})}),a&&t(jn,{opened:e,close:o})]})}var mr="";function ve({viz:e,dataSourceID:n,title:i,description:o,update:l,layout:s,id:a}){const u=d.default.useContext(Q),c=d.default.useContext(k),[h,m]=d.default.useState(i),[x,g]=d.default.useState(o),[y,C]=d.default.useState(n),[T,_]=d.default.useState(e),A=d.default.useMemo(()=>{if(!!y)return c.dataSources.find(_e=>_e.id===y)},[y,c.dataSources]);d.default.useEffect(()=>{l==null||l({id:a,layout:s,title:h,description:x,dataSourceID:y,viz:T})},[h,x,A,T,a,s,y]);const{data:L=[],loading:ue,refresh:Te}=pe.useRequest(Le({context:u,definitions:c,title:h,dataSource:A}),{refreshDeps:[u,c,A]}),Ge=Te;return t(O.Provider,{value:{data:L,loading:ue,title:h,setTitle:m,description:x,setDescription:g,dataSourceID:y,setDataSourceID:C,viz:T,setViz:_,refreshData:Ge},children:p(r.Container,{className:"panel-root",children:[t(Nn,{}),t(fe,{children:t(nt,{viz:T,data:L,loading:ue})})]})})}var hr="";const Rn=P.WidthProvider(P.Responsive);function lt({panels:e,setPanels:n,className:i="layout",cols:o={lg:12,md:10,sm:8,xs:6,xxs:4},rowHeight:l=10,onRemoveItem:s,isDraggable:a,isResizable:u,setLocalCols:c,setBreakpoint:h}){const m=(g,y)=>{h(g),c(y)},x=d.default.useCallback(g=>{const y=new Map;g.forEach(A=>{var L=A,{i:T}=L,_=D(L,["i"]);y.set(T,_)});const C=e.map(T=>z(f({},T),{layout:y.get(T.id)}));n(C)},[e,n]);return t(Rn,{onBreakpointChange:m,onLayoutChange:x,className:i,cols:o,rowHeight:l,isDraggable:a,isResizable:u,children:e.map((T,C)=>{var _=T,{id:g}=_,y=D(_,["id"]);return t("div",{"data-grid":y.layout,children:t(ve,z(f({id:g},y),{destroy:()=>s(g),update:A=>{n(L=>(L.splice(C,1,A),[...L]))}}))},g)})})}function we(e,n){return p(r.Text,{sx:{svg:{verticalAlign:"text-bottom"}},children:[e," ",n]})}function Wn({mode:e,setMode:n}){return t(r.SegmentedControl,{value:e,onChange:n,data:[{label:we(t(S.PlayerPlay,{size:20}),"Use"),value:M.Use},{label:we(t(S.Resize,{size:20}),"Layout"),value:M.Layout},{label:we(t(S.Paint,{size:20}),"Content"),value:M.Edit}]})}const Qn=`
 -- You may reference context data or SQL snippets *by name*
 -- in SQL or VizConfig.
 SELECT *
@@ -18,16 +18,16 @@ WHERE
   -- SQL snippets
   AND \${author_email_condition}
   \${order_by_clause}
-`;function Rn({}){const e=d.default.useContext(Q),{sqlSnippets:n}=d.default.useContext(E),i=d.default.useMemo(()=>{const l=n.reduce((s,a)=>(s[a.key]=a.value,s),{});return JSON.stringify(l,null,2)},[n]),o=d.default.useMemo(()=>JSON.stringify(e,null,2),[e]);return p(r.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee",maxWidth:"48%",overflow:"hidden"},children:[t(r.Group,{position:"left",pl:"md",py:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef",flexGrow:0},children:t(r.Text,{weight:500,children:"Context"})}),p(r.Group,{direction:"column",px:"md",pb:"md",sx:{width:"100%"},children:[t(B.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:jn}),t(r.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable context"}),t(B.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:o}),t(r.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable SQL Snippets"}),t(B.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:i})]})]})}function Nn({value:e,onChange:n}){const i=k.useForm({initialValues:e}),o=d.default.useCallback(m=>{n(m)},[n]),l=d.default.useMemo(()=>!T.default.isEqual(e,i.values),[e,i.values]);d.default.useEffect(()=>{i.reset()},[e]);const{data:s={},loading:a}=pe.useRequest(St,{refreshDeps:[]},[]),u=d.default.useMemo(()=>Object.keys(s).map(m=>({label:m,value:m})),[s]),c=d.default.useMemo(()=>{const m=s[i.values.type];return m?m.map(h=>({label:h,value:h})):[]},[s,i.values.type]);return t(r.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee",flexGrow:1},children:p("form",{onSubmit:i.onSubmit(o),children:[p(r.Group,{position:"left",py:"md",pl:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef"},children:[t(r.Text,{weight:500,children:"Data Source Configuration"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!l||a,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,children:[p(r.Group,{grow:!0,children:[t(r.TextInput,f({placeholder:"An ID unique in this dashboard",label:"ID",required:!0,sx:{flex:1},disabled:a},i.getInputProps("id"))),t(r.Select,f({label:"Data Source Type",data:u,sx:{flex:1},disabled:a},i.getInputProps("type"))),t(r.Select,f({label:"Data Source Key",data:c,sx:{flex:1},disabled:a},i.getInputProps("key")))]}),t(r.Textarea,f({autosize:!0,minRows:12,maxRows:24},i.getInputProps("sql")))]})]})})}function Wn({id:e,setID:n}){const{dataSources:i,setDataSources:o}=d.default.useContext(E),l=d.default.useMemo(()=>i.find(a=>a.id===e),[i,e]),s=d.default.useCallback(a=>{if(i.findIndex(c=>c.id===e)===-1){console.error(new Error("Invalid data source id when updating by id"));return}o(c=>{const m=c.findIndex(h=>h.id===e);return c.splice(m,1,a),[...c]}),n(a.id)},[e,i,o,n]);return e?l?p(r.Group,{direction:"row",position:"apart",grow:!0,align:"stretch",noWrap:!0,children:[t(Nn,{value:l,onChange:s}),t(Rn,{})]}):t("span",{children:"Invalid Data Source ID"}):null}function Qn({id:e,setID:n}){const{dataSources:i,setDataSources:o}=d.default.useContext(E),l=d.default.useCallback(()=>{var u,c;n((c=(u=i[0])==null?void 0:u.id)!=null?c:"")},[n,i]);d.default.useEffect(()=>{if(!e){l();return}i.findIndex(c=>c.id===e)===-1&&l()},[e,i,l]);const s=d.default.useMemo(()=>i.map(u=>({value:u.id,label:u.id})),[i]),a=d.default.useCallback(()=>{const u={id:q.randomId(),type:"postgresql",key:"",sql:""};o(c=>[...c,u]),n(u.id)},[o,n]);return t(r.Group,{pb:"xl",children:p(r.Group,{position:"left",sx:{maxWidth:"600px",alignItems:"baseline"},children:[t(r.Text,{children:"Select a Data Source"}),t(r.Select,{data:s,value:e,onChange:n,allowDeselect:!1,clearable:!1,sx:{flexGrow:1}}),t(r.Text,{children:"or"}),t(r.Group,{position:"center",mt:"md",children:t(r.Button,{onClick:a,children:"Add a Data Source"})})]})})}function Jn({opened:e,close:n}){const[i,o]=d.default.useState(""),{freezeLayout:l}=d.default.useContext(F);return d.default.useEffect(()=>{l(e)},[e]),t(r.Modal,{size:"96vw",overflow:"inside",opened:e,onClose:n,title:"Data Sources",trapFocus:!0,onDragStart:s=>{s.stopPropagation()},children:p(r.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:t(Qn,{id:i,setID:o}),children:[t(Wn,{id:i,setID:o}),t(Ee,{id:i})]})})}function Un({}){const e=d.default.useContext(Q),n="SELECT *\nFROM commit\nWHERE author_time BETWEEN '${timeRange?.[0].toISOString()}' AND '${timeRange?.[1].toISOString()}'";return p(r.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee",maxWidth:"48%",overflow:"hidden"},children:[t(r.Group,{position:"left",pl:"md",py:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef",flexGrow:0},children:t(r.Text,{weight:500,children:"Context"})}),p(r.Group,{direction:"column",px:"md",pb:"md",sx:{width:"100%"},children:[t(B.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:`-- You may refer context data *by name*
+`;function Un({}){const e=d.default.useContext(Q),{sqlSnippets:n}=d.default.useContext(k),i=d.default.useMemo(()=>{const l=n.reduce((s,a)=>(s[a.key]=a.value,s),{});return JSON.stringify(l,null,2)},[n]),o=d.default.useMemo(()=>JSON.stringify(e,null,2),[e]);return p(r.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee",maxWidth:"48%",overflow:"hidden"},children:[t(r.Group,{position:"left",pl:"md",py:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef",flexGrow:0},children:t(r.Text,{weight:500,children:"Context"})}),p(r.Group,{direction:"column",px:"md",pb:"md",sx:{width:"100%"},children:[t(B.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:Qn}),t(r.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable context"}),t(B.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:o}),t(r.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable SQL Snippets"}),t(B.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:i})]})]})}function Jn({value:e,onChange:n}){const i=q.useForm({initialValues:e}),o=d.default.useCallback(h=>{n(h)},[n]),l=d.default.useMemo(()=>!I.default.isEqual(e,i.values),[e,i.values]);d.default.useEffect(()=>{i.reset()},[e]);const{data:s={},loading:a}=pe.useRequest(Ct,{refreshDeps:[]},[]),u=d.default.useMemo(()=>Object.keys(s).map(h=>({label:h,value:h})),[s]),c=d.default.useMemo(()=>{const h=s[i.values.type];return h?h.map(m=>({label:m,value:m})):[]},[s,i.values.type]);return t(r.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee",flexGrow:1},children:p("form",{onSubmit:i.onSubmit(o),children:[p(r.Group,{position:"left",py:"md",pl:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef"},children:[t(r.Text,{weight:500,children:"Data Source Configuration"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!l||a,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,children:[p(r.Group,{grow:!0,children:[t(r.TextInput,f({placeholder:"An ID unique in this dashboard",label:"ID",required:!0,sx:{flex:1},disabled:a},i.getInputProps("id"))),t(r.Select,f({label:"Data Source Type",data:u,sx:{flex:1},disabled:a},i.getInputProps("type"))),t(r.Select,f({label:"Data Source Key",data:c,sx:{flex:1},disabled:a},i.getInputProps("key")))]}),t(r.Textarea,f({autosize:!0,minRows:12,maxRows:24},i.getInputProps("sql")))]})]})})}function Yn({id:e,setID:n}){const{dataSources:i,setDataSources:o}=d.default.useContext(k),l=d.default.useMemo(()=>i.find(a=>a.id===e),[i,e]),s=d.default.useCallback(a=>{if(i.findIndex(c=>c.id===e)===-1){console.error(new Error("Invalid data source id when updating by id"));return}o(c=>{const h=c.findIndex(m=>m.id===e);return c.splice(h,1,a),[...c]}),n(a.id)},[e,i,o,n]);return e?l?p(r.Group,{direction:"row",position:"apart",grow:!0,align:"stretch",noWrap:!0,children:[t(Jn,{value:l,onChange:s}),t(Un,{})]}):t("span",{children:"Invalid Data Source ID"}):null}function Kn({id:e,setID:n}){const{dataSources:i,setDataSources:o}=d.default.useContext(k),l=d.default.useCallback(()=>{var u,c;n((c=(u=i[0])==null?void 0:u.id)!=null?c:"")},[n,i]);d.default.useEffect(()=>{if(!e){l();return}i.findIndex(c=>c.id===e)===-1&&l()},[e,i,l]);const s=d.default.useMemo(()=>i.map(u=>({value:u.id,label:u.id})),[i]),a=d.default.useCallback(()=>{const u={id:E.randomId(),type:"postgresql",key:"",sql:""};o(c=>[...c,u]),n(u.id)},[o,n]);return t(r.Group,{pb:"xl",children:p(r.Group,{position:"left",sx:{maxWidth:"600px",alignItems:"baseline"},children:[t(r.Text,{children:"Select a Data Source"}),t(r.Select,{data:s,value:e,onChange:n,allowDeselect:!1,clearable:!1,sx:{flexGrow:1}}),t(r.Text,{children:"or"}),t(r.Group,{position:"center",mt:"md",children:t(r.Button,{onClick:a,children:"Add a Data Source"})})]})})}function Xn({opened:e,close:n}){const[i,o]=d.default.useState(""),{freezeLayout:l}=d.default.useContext($);return d.default.useEffect(()=>{l(e)},[e]),t(r.Modal,{size:"96vw",overflow:"inside",opened:e,onClose:n,title:"Data Sources",trapFocus:!0,onDragStart:s=>{s.stopPropagation()},children:p(r.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:t(Kn,{id:i,setID:o}),children:[t(Yn,{id:i,setID:o}),t(Ee,{id:i})]})})}function Zn({}){const e=d.default.useContext(Q),n="SELECT *\nFROM commit\nWHERE author_time BETWEEN '${timeRange?.[0].toISOString()}' AND '${timeRange?.[1].toISOString()}'";return p(r.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee",maxWidth:"48%",overflow:"hidden"},children:[t(r.Group,{position:"left",pl:"md",py:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef",flexGrow:0},children:t(r.Text,{weight:500,children:"Context"})}),p(r.Group,{direction:"column",px:"md",pb:"md",sx:{width:"100%"},children:[t(B.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:`-- You may refer context data *by name*
 -- in SQL or VizConfig.
 
-${n}`}),t(r.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable context entries"}),t(B.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:JSON.stringify(e,null,2)})]})]})}function Kn({}){const{sqlSnippets:e,setSQLSnippets:n}=d.default.useContext(E),i=`SELECT *
+${n}`}),t(r.Text,{weight:500,sx:{flexGrow:0},children:"Avaiable context entries"}),t(B.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:JSON.stringify(e,null,2)})]})]})}function Hn({}){const{sqlSnippets:e,setSQLSnippets:n}=d.default.useContext(k),i=`SELECT *
 FROM commit
-WHERE \${author_time_condition}`,o=d.default.useMemo(()=>({snippets:k.formList(e!=null?e:[])}),[e]),l=k.useForm({initialValues:o}),s=()=>l.addListItem("snippets",{key:q.randomId(),value:""}),a=d.default.useMemo(()=>!T.default.isEqual(l.values,o),[l.values,o]),u=({snippets:c})=>{n(c)};return t(r.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee"},children:p("form",{onSubmit:l.onSubmit(u),children:[p(r.Group,{position:"left",pl:"md",py:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef",flexGrow:0},children:[t(r.Text,{weight:500,children:"SQL Snippets"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!a,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{px:"md",pb:"md",children:[t(B.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,trim:!1,colorScheme:"dark",children:`-- You may refer context data *by name*
+WHERE \${author_time_condition}`,o=d.default.useMemo(()=>({snippets:q.formList(e!=null?e:[])}),[e]),l=q.useForm({initialValues:o}),s=()=>l.addListItem("snippets",{key:E.randomId(),value:""}),a=d.default.useMemo(()=>!I.default.isEqual(l.values,o),[l.values,o]),u=({snippets:c})=>{n(c)};return t(r.Group,{direction:"column",grow:!0,sx:{border:"1px solid #eee"},children:p("form",{onSubmit:l.onSubmit(u),children:[p(r.Group,{position:"left",pl:"md",py:"md",sx:{borderBottom:"1px solid #eee",background:"#efefef",flexGrow:0},children:[t(r.Text,{weight:500,children:"SQL Snippets"}),t(r.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",disabled:!a,children:t(S.DeviceFloppy,{size:20})})]}),p(r.Group,{px:"md",pb:"md",children:[t(B.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,trim:!1,colorScheme:"dark",children:`-- You may refer context data *by name*
 -- in SQL or VizConfig.
 
 ${i}
 
 -- where author_time_condition is:
 author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
- `}),p(r.Group,{direction:"column",sx:{width:"100%",position:"relative"},grow:!0,children:[l.values.snippets.map((c,m)=>p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[t(r.TextInput,f({label:"Key",required:!0},l.getListInputProps("snippets",m,"key"))),t(r.Textarea,f({minRows:3,label:"Value",required:!0},l.getListInputProps("snippets",m,"value"))),t(r.ActionIcon,{color:"red",variant:"hover",onClick:()=>l.removeListItem("snippets",m),sx:{position:"absolute",top:15,right:5},children:t(S.Trash,{size:16})})]},m)),t(r.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"40%"},mx:"auto",children:t(r.Button,{variant:"default",onClick:s,children:"Add a snippet"})})]})]})]})})}function Yn({opened:e,close:n}){const{freezeLayout:i}=d.default.useContext(F);return d.default.useEffect(()=>{i(e)},[e]),t(r.Modal,{size:"96vw",overflow:"inside",opened:e,onClose:n,title:"SQL Snippets",trapFocus:!0,onDragStart:o=>{o.stopPropagation()},children:t(r.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:p(r.Group,{direction:"row",position:"apart",grow:!0,align:"stretch",noWrap:!0,children:[t(Kn,{}),t(Un,{})]})})})}function Xn({mode:e,setMode:n,hasChanges:i,addPanel:o,saveChanges:l}){const{inLayoutMode:s,inEditMode:a,inUseMode:u}=d.default.useContext(F),[c,m]=d.default.useState(!1),h=()=>m(!0),x=()=>m(!1),[g,y]=d.default.useState(!1),C=()=>y(!0),I=()=>y(!1);return p(r.Group,{position:"apart",pt:"sm",pb:"xs",children:[t(r.Group,{position:"left",children:t(Vn,{mode:e,setMode:n})}),p(r.Group,{position:"right",children:[s&&t(r.Button,{variant:"default",size:"sm",onClick:o,leftIcon:t(S.PlaylistAdd,{size:20}),children:"Add a Panel"}),a&&t(r.Button,{variant:"default",size:"sm",onClick:C,leftIcon:t(S.ClipboardText,{size:20}),children:"SQL Snippets"}),a&&t(r.Button,{variant:"default",size:"sm",onClick:h,leftIcon:t(S.Database,{size:20}),children:"Data Sources"}),!u&&t(r.Button,{variant:"default",size:"sm",onClick:l,disabled:!i,leftIcon:t(S.DeviceFloppy,{size:20}),children:"Save Changes"}),!u&&t(r.Button,{color:"red",size:"sm",disabled:!i,leftIcon:t(S.Recycle,{size:20}),children:"Revert Changes"})]}),t(Jn,{opened:c,close:x}),t(Yn,{opened:g,close:I}),u&&t(r.Button,{variant:"default",size:"sm",disabled:!0,leftIcon:t(S.Share,{size:20}),children:"Share"})]})}function Zn({context:e,dashboard:n,update:i,className:o="dashboard"}){const[l,s]=d.default.useState(!1),[a,u]=d.default.useState(),[c,m]=d.default.useState(),[h,x]=d.default.useState(n.panels),[g,y]=d.default.useState(n.definition.sqlSnippets),[C,I]=d.default.useState(n.definition.dataSources),[_,M]=d.default.useState(A.Edit),L=d.default.useMemo(()=>{const $=N=>JSON.parse(JSON.stringify(N));return!T.default.isEqual($(h),$(n.panels))||!T.default.isEqual(g,n.definition.sqlSnippets)?!0:!T.default.isEqual(C,n.definition.dataSources)},[n,h,g,C]),ue=async()=>{const $=T.default.merge({},n,{panels:h},{definition:{sqlSnippets:g,dataSources:C}});await i($)},Te=()=>{const $=q.randomId(),de={id:$,layout:{x:0,y:1/0,w:3,h:4},title:`New Panel - ${$}`,description:"description goes here",dataSourceID:"",viz:{type:"table",conf:{}}};x(N=>[...N,de])},Ie=$=>{const de=h.findIndex(N=>N.id===$);x(N=>(N.splice(de,1),[...N]))},Ge=_===A.Edit,_e=_===A.Layout,nr=_===A.Use,rr=d.default.useMemo(()=>({sqlSnippets:g,setSQLSnippets:y,dataSources:C,setDataSources:I}),[g,y,C,I]);return t(Q.Provider,{value:e,children:t("div",{className:o,children:t(E.Provider,{value:rr,children:p(F.Provider,{value:{layoutFrozen:l,freezeLayout:s,mode:_,inEditMode:Ge,inLayoutMode:_e,inUseMode:nr},children:[t(Xn,{mode:_,setMode:M,hasChanges:L,addPanel:Te,saveChanges:ue}),t(ot,{panels:h,setPanels:x,isDraggable:_e,isResizable:_e,onRemoveItem:Ie,setLocalCols:m,setBreakpoint:u})]})})})})}const Hn=z.WidthProvider(z.Responsive);function er({panels:e,className:n="layout",cols:i={lg:12,md:10,sm:8,xs:6,xxs:4},rowHeight:o=10}){return t(Hn,{className:n,cols:i,rowHeight:o,isDraggable:!1,isResizable:!1,children:e.map(a=>{var u=a,{id:l}=u,s=D(u,["id"]);return t("div",{"data-grid":s.layout,children:t(ve,f({id:l},s))},l)})})}function tr({context:e,dashboard:n,className:i="dashboard"}){const o=d.default.useMemo(()=>P(f({},n.definition),{setSQLSnippets:()=>{},setDataSources:()=>{}}),[n]);return t(Q.Provider,{value:e,children:t("div",{className:i,children:t(E.Provider,{value:o,children:t(F.Provider,{value:{layoutFrozen:!0,freezeLayout:()=>{},mode:A.Use,inEditMode:!1,inLayoutMode:!1,inUseMode:!0},children:t(er,{panels:n.panels})})})})})}b.ContextInfoContext=Q,b.Dashboard=Zn,b.DashboardLayout=ot,b.DashboardMode=A,b.DefinitionContext=E,b.LayoutStateContext=F,b.Panel=ve,b.PanelContext=O,b.ReadOnlyDashboard=tr,b.initialContextInfoContext=Ct,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ `}),p(r.Group,{direction:"column",sx:{width:"100%",position:"relative"},grow:!0,children:[l.values.snippets.map((c,h)=>p(r.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[t(r.TextInput,f({label:"Key",required:!0},l.getListInputProps("snippets",h,"key"))),t(r.Textarea,f({minRows:3,label:"Value",required:!0},l.getListInputProps("snippets",h,"value"))),t(r.ActionIcon,{color:"red",variant:"hover",onClick:()=>l.removeListItem("snippets",h),sx:{position:"absolute",top:15,right:5},children:t(S.Trash,{size:16})})]},h)),t(r.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"40%"},mx:"auto",children:t(r.Button,{variant:"default",onClick:s,children:"Add a snippet"})})]})]})]})})}function er({opened:e,close:n}){const{freezeLayout:i}=d.default.useContext($);return d.default.useEffect(()=>{i(e)},[e]),t(r.Modal,{size:"96vw",overflow:"inside",opened:e,onClose:n,title:"SQL Snippets",trapFocus:!0,onDragStart:o=>{o.stopPropagation()},children:t(r.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:p(r.Group,{direction:"row",position:"apart",grow:!0,align:"stretch",noWrap:!0,children:[t(Hn,{}),t(Zn,{})]})})})}function tr({mode:e,setMode:n,hasChanges:i,addPanel:o,saveChanges:l}){const{inLayoutMode:s,inEditMode:a,inUseMode:u}=d.default.useContext($),[c,h]=d.default.useState(!1),m=()=>h(!0),x=()=>h(!1),[g,y]=d.default.useState(!1),C=()=>y(!0),T=()=>y(!1);return p(r.Group,{position:"apart",pt:"sm",pb:"xs",children:[t(r.Group,{position:"left",children:t(Wn,{mode:e,setMode:n})}),p(r.Group,{position:"right",children:[s&&t(r.Button,{variant:"default",size:"sm",onClick:o,leftIcon:t(S.PlaylistAdd,{size:20}),children:"Add a Panel"}),a&&t(r.Button,{variant:"default",size:"sm",onClick:C,leftIcon:t(S.ClipboardText,{size:20}),children:"SQL Snippets"}),a&&t(r.Button,{variant:"default",size:"sm",onClick:m,leftIcon:t(S.Database,{size:20}),children:"Data Sources"}),!u&&t(r.Button,{variant:"default",size:"sm",onClick:l,disabled:!i,leftIcon:t(S.DeviceFloppy,{size:20}),children:"Save Changes"}),!u&&t(r.Button,{color:"red",size:"sm",disabled:!i,leftIcon:t(S.Recycle,{size:20}),children:"Revert Changes"})]}),t(Xn,{opened:c,close:x}),t(er,{opened:g,close:T}),u&&t(r.Button,{variant:"default",size:"sm",disabled:!0,leftIcon:t(S.Share,{size:20}),children:"Share"})]})}function nr({context:e,dashboard:n,update:i,className:o="dashboard"}){const[l,s]=d.default.useState(!1),[a,u]=d.default.useState(),[c,h]=d.default.useState(),[m,x]=d.default.useState(n.panels),[g,y]=d.default.useState(n.definition.sqlSnippets),[C,T]=d.default.useState(n.definition.dataSources),[_,A]=d.default.useState(M.Edit),L=d.default.useMemo(()=>{const F=R=>JSON.parse(JSON.stringify(R));return!I.default.isEqual(F(m),F(n.panels))||!I.default.isEqual(g,n.definition.sqlSnippets)?!0:!I.default.isEqual(C,n.definition.dataSources)},[n,m,g,C]),ue=async()=>{const F=z(f({},n),{panels:m,definition:{sqlSnippets:g,dataSources:C}});await i(F)},Te=()=>{const F=E.randomId(),de={id:F,layout:{x:0,y:1/0,w:3,h:4},title:`New Panel - ${F}`,description:"description goes here",dataSourceID:"",viz:{type:"table",conf:{}}};x(R=>[...R,de])},Ge=F=>{const de=m.findIndex(R=>R.id===F);x(R=>(R.splice(de,1),[...R]))},_e=_===M.Edit,ze=_===M.Layout,lr=_===M.Use,ar=d.default.useMemo(()=>({sqlSnippets:g,setSQLSnippets:y,dataSources:C,setDataSources:T}),[g,y,C,T]);return t(Q.Provider,{value:e,children:t("div",{className:o,children:t(k.Provider,{value:ar,children:p($.Provider,{value:{layoutFrozen:l,freezeLayout:s,mode:_,inEditMode:_e,inLayoutMode:ze,inUseMode:lr},children:[t(tr,{mode:_,setMode:A,hasChanges:L,addPanel:Te,saveChanges:ue}),t(lt,{panels:m,setPanels:x,isDraggable:ze,isResizable:ze,onRemoveItem:Ge,setLocalCols:h,setBreakpoint:u})]})})})})}const rr=P.WidthProvider(P.Responsive);function ir({panels:e,className:n="layout",cols:i={lg:12,md:10,sm:8,xs:6,xxs:4},rowHeight:o=10}){return t(rr,{className:n,cols:i,rowHeight:o,isDraggable:!1,isResizable:!1,children:e.map(a=>{var u=a,{id:l}=u,s=D(u,["id"]);return t("div",{"data-grid":s.layout,children:t(ve,f({id:l},s))},l)})})}function or({context:e,dashboard:n,className:i="dashboard"}){const o=d.default.useMemo(()=>z(f({},n.definition),{setSQLSnippets:()=>{},setDataSources:()=>{}}),[n]);return t(Q.Provider,{value:e,children:t("div",{className:i,children:t(k.Provider,{value:o,children:t($.Provider,{value:{layoutFrozen:!0,freezeLayout:()=>{},mode:M.Use,inEditMode:!1,inLayoutMode:!1,inUseMode:!0},children:t(ir,{panels:n.panels})})})})})}b.ContextInfoContext=Q,b.Dashboard=nr,b.DashboardLayout=lt,b.DashboardMode=M,b.DefinitionContext=k,b.LayoutStateContext=$,b.Panel=ve,b.PanelContext=O,b.ReadOnlyDashboard=or,b.initialContextInfoContext=vt,Object.defineProperties(b,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/panel/settings/common/mantine-color.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface IMantineColorSelector {
-    value: string;
+    value?: string;
     onChange: (value: string) => void;
 }
 export declare function MantineColorSelector({ value, onChange }: IMantineColorSelector): JSX.Element;

package/dist/panel/settings/common/numbro-format-selector.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type TNumbroFormat = {
+    mantissa: number;
+    output: 'percent' | 'number';
+    trimMantissa?: boolean;
+};
+export declare const defaultNumbroFormat: TNumbroFormat;
+interface INumbroFormatSelector {
+    value: TNumbroFormat;
+    onChange: (v: TNumbroFormat) => void;
+}
+export declare function NumbroFormatSelector({ value, onChange }: INumbroFormatSelector): JSX.Element;
+export {};

package/dist/panel/viz/cartesian/{panel.d.ts → panel/index.d.ts}

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IVizCartesianChartPanel } from "./type";
+import { IVizCartesianChartPanel } from "../type";
 export declare function VizCartesianChartPanel({ conf, setConf }: IVizCartesianChartPanel): JSX.Element;

package/dist/panel/viz/cartesian/panel/series.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Control, UseFormGetValues, UseFormWatch } from "react-hook-form";
+import { ICartesianChartConf } from "../type";
+interface ISeriesField {
+    control: Control<ICartesianChartConf, any>;
+    watch: UseFormWatch<ICartesianChartConf>;
+    getValues: UseFormGetValues<ICartesianChartConf>;
+}
+export declare function SeriesField({ control, watch, getValues }: ISeriesField): JSX.Element;
+export {};

package/dist/panel/viz/cartesian/panel/y-axes.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Control, UseFormWatch } from "react-hook-form";
+import { ICartesianChartConf } from "../type";
+interface IYAxesField {
+    control: Control<ICartesianChartConf, any>;
+    watch: UseFormWatch<ICartesianChartConf>;
+}
+export declare function YAxesField({ control, watch }: IYAxesField): JSX.Element;
+export {};

package/dist/panel/viz/cartesian/type.d.ts

@@ -3,15 +3,19 @@ export interface ICartesianChartSeriesItem {
     name: string;
     showSymbol: false;
     y_axis_data_key: string;
-    y_axis_data_formatter?: string;
     label_position?: string;
     stack: string;
     color?: string;
 }
+export interface IYAxisConf {
+    id: string;
+    name: string;
+    label_formatter: string;
+}
 export interface ICartesianChartConf {
     x_axis_data_key: string;
     x_axis_name: string;
-    y_axis_name: string;
+    y_axes: IYAxisConf[];
     series: ICartesianChartSeriesItem[];
 }
 export interface IVizCartesianChartPanel {

package/dist/panel/viz/stats/types.d.ts

@@ -1,17 +1,18 @@
 export declare type ColorConf = {
     type: 'static';
-    value: string;
+    staticColor: string;
 } | {
     type: 'continuous';
     valueRange: number[];
     colorRange: string[];
+    valueField: string;
 } | {
     type: 'piecewise';
 };
 export interface IVizStatsConf {
+    align: 'center';
     color: ColorConf;
     size: string;
     weight: string;
     template: string;
-    value_field: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/dist/panel/viz/cartesian/panel.series-item.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { FormList } from "@mantine/form/lib/form-list/form-list";
-import { UseFormReturnType } from "@mantine/form/lib/use-form";
-import { ICartesianChartSeriesItem } from "./type";
-interface ISeriesItemField {
-    form: UseFormReturnType<{
-        x_axis_data_key: string;
-        series: FormList<ICartesianChartSeriesItem>;
-        x_axis_name: string;
-        y_axis_name: string;
-    }>;
-    index: number;
-}
-export declare function SeriesItemField({ form, index }: ISeriesItemField): JSX.Element;
-export {};