@devtable/dashboard 0.0.3 → 0.3.0

package/dist/api-caller/index.d.ts

@@ -1,3 +1,3 @@
 import { ContextInfoContextType } from "../contexts";
 import { IDashboardDefinition } from "../types";
-export declare const queryBySQL: (sql: string, context: ContextInfoContextType, definitions: IDashboardDefinition) => () => Promise<any>;
+export declare const queryBySQL: (sql: string, context: ContextInfoContextType, definitions: IDashboardDefinition, title: string) => () => Promise<any>;

package/dist/dashboard.es.js

@@ -32,11 +32,11 @@ var __objRest = (source, exclude) => {
 import React from "react";
 import _ from "lodash";
 import { WidthProvider, Responsive } from "react-grid-layout";
-import { Text, Table, Group, LoadingOverlay, Box, Textarea, Button, TextInput, ActionIcon, useMantineTheme, ColorSwatch, Select, Slider, Switch, JsonInput, Divider, Modal, AppShell, Navbar, Tabs, Tooltip, Container, SegmentedControl } from "@mantine/core";
+import { Text, Table, Group, LoadingOverlay, Box, Textarea, Button, TextInput, ActionIcon, useMantineTheme, ColorSwatch, Select, Switch, Slider, JsonInput, Divider, Modal, AppShell, Navbar, Tabs, Tooltip, Menu, Container, SegmentedControl } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
-import { Trash, DeviceFloppy, Settings, Refresh, InfoCircle, Paint, PlayerPlay, PlaylistAdd, Recycle, Share } from "tabler-icons-react";
-import { useElementSize, randomId, useInputState } from "@mantine/hooks";
+import { Trash, DeviceFloppy, InfoCircle, Refresh, Settings, Paint, PlayerPlay, PlaylistAdd, Recycle, Share } from "tabler-icons-react";
+import { useElementSize, randomId, useInputState, useListState } from "@mantine/hooks";
 import ReactEChartsCore from "echarts-for-react/lib/core";
 import * as echarts from "echarts/core";
 import { SunburstChart, BarChart, LineChart } from "echarts/charts";
@@ -87,7 +87,6 @@ const post = getRequest("POST");
 function formatSQL(sql, params) {
   const names = Object.keys(params);
   const vals = Object.values(params);
-  console.log({ names, vals });
   return new Function(...names, `return \`${sql}\`;`)(...vals);
 }
 function getSQLParams(context, definitions) {
@@ -95,16 +94,24 @@ function getSQLParams(context, definitions) {
     ret[curr.key] = formatSQL(curr.value, context);
     return ret;
   }, {});
-  return _.defaultsDeep(context, sqlSnippetRecord);
+  return _.merge({}, sqlSnippetRecord, context);
 }
-const queryBySQL = (sql, context, definitions) => async () => {
+const queryBySQL = (sql, context, definitions, title) => async () => {
   if (!sql) {
     return [];
   }
+  const needParams = sql.includes("$");
   const params = getSQLParams(context, definitions);
+  console.log(needParams, params);
+  if (needParams && Object.keys(params).length === 0) {
+    console.error(`[queryBySQL] insufficient params for {${title}}'s SQL`);
+    return [];
+  }
   const formattedSQL = formatSQL(sql, params);
-  if (sql.includes("$")) {
+  if (needParams) {
+    console.groupCollapsed(`Final SQL for: ${title}`);
     console.log(formattedSQL);
+    console.groupEnd();
   }
   const res = await post("/query", { sql: formattedSQL });
   return res;
@@ -167,6 +174,27 @@ reactJsxRuntime_production_min.jsxs = q;
 const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx("h1", {
+        children: "Something went wrong."
+      });
+    }
+    return this.props.children;
+  }
+}
 echarts.use([SunburstChart, CanvasRenderer]);
 const defaultOption$1 = {
   tooltip: {
@@ -196,7 +224,7 @@ function Sunbrust({
   const chartData = React.useMemo(() => {
     return data.map((d) => ({
       name: d[label_field],
-      value: d[value_field]
+      value: Number(d[value_field])
     }));
   }, [data, label_field, value_field]);
   const max = React.useMemo(() => {
@@ -218,7 +246,7 @@ function Sunbrust({
       }
     }
   }), []);
-  const option = _.defaultsDeep(defaultOption$1, labelOption, restConf, {
+  const option = _.merge(defaultOption$1, labelOption, restConf, {
     series: {
       data: chartData
     }
@@ -243,7 +271,14 @@ const defaultOption = {
   xAxis: {
     type: "category"
   },
-  yAxis: {}
+  yAxis: {},
+  grid: {
+    top: 30,
+    left: 10,
+    right: 10,
+    bottom: 10,
+    containLabel: true
+  }
 };
 function VizLineBarChart({
   conf,
@@ -439,11 +474,16 @@ function VizText({
   return /* @__PURE__ */ jsx(Fragment, {
     children: paragraphs.map((_a, index2) => {
       var _b = _a, {
-        template
+        template,
+        size
       } = _b, rest = __objRest(_b, [
-        "template"
+        "template",
+        "size"
       ]);
       return /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({}, rest), {
+        sx: {
+          fontSize: size
+        },
         children: interpolateString(template, data[0])
       }), `${template}---${index2}`);
     })
@@ -683,7 +723,6 @@ function SQLSnippetsForm({
   sqlSnippets,
   setSQLSnippets
 }) {
-  const submitButton = React.useRef(null);
   const initialValues = React.useMemo(() => ({
     snippets: formList(sqlSnippets != null ? sqlSnippets : [])
   }), [sqlSnippets]);
@@ -695,12 +734,6 @@ function SQLSnippetsForm({
     value: ""
   });
   const changed = React.useMemo(() => !_.isEqual(form.values, initialValues), [form.values, initialValues]);
-  React.useEffect(() => {
-    var _a;
-    if (changed) {
-      (_a = submitButton == null ? void 0 : submitButton.current) == null ? void 0 : _a.click();
-    }
-  }, [changed, submitButton.current]);
   const submit = ({
     snippets
   }) => {
@@ -709,19 +742,13 @@ function SQLSnippetsForm({
   return /* @__PURE__ */ jsx(Group, {
     direction: "column",
     sx: {
-      width: "100%"
+      width: "100%",
+      position: "relative"
     },
     grow: true,
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: form.onSubmit(submit),
-      children: [/* @__PURE__ */ jsx("button", {
-        ref: submitButton,
-        type: "submit",
-        style: {
-          display: "none"
-        },
-        children: "Ghost submit"
-      }), form.values.snippets.map((_item, index2) => /* @__PURE__ */ jsxs(Group, {
+      children: [form.values.snippets.map((_item, index2) => /* @__PURE__ */ jsxs(Group, {
         direction: "column",
         grow: true,
         my: 0,
@@ -751,19 +778,24 @@ function SQLSnippetsForm({
             size: 16
           })
         })]
-      }, index2)), /* @__PURE__ */ jsx(Group, {
+      }, index2)), /* @__PURE__ */ jsxs(Group, {
         position: "center",
         mt: "xl",
         grow: true,
         sx: {
-          width: "60%"
+          width: "80%"
         },
         mx: "auto",
-        children: /* @__PURE__ */ jsx(Button, {
-          color: "blue",
+        children: [/* @__PURE__ */ jsx(Button, {
+          variant: "default",
           onClick: addSnippet,
           children: "Add a snippet"
-        })
+        }), /* @__PURE__ */ jsx(Button, {
+          color: "blue",
+          type: "submit",
+          disabled: !changed,
+          children: "Submit"
+        })]
       })]
     })
   });
@@ -784,6 +816,7 @@ WHERE \${author_time_condition}`;
         width: "100%"
       },
       noCopy: true,
+      trim: false,
       colorScheme: "dark",
       children: `-- You may refer context data *by name*
 -- in SQL or VizConfig.
@@ -792,7 +825,7 @@ ${sampleSQL}
 
 -- where author_time_condition is:
 author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
-`
+ `
     }), /* @__PURE__ */ jsx(Text, {
       weight: 700,
       children: "SQL Snippets"
@@ -1079,7 +1112,6 @@ function VizLineBarChartPanel({
   conf,
   setConf
 }) {
-  const submitButton = React.useRef(null);
   const _a = conf, {
     series
   } = _a, restConf = __objRest(_a, [
@@ -1099,13 +1131,7 @@ function VizLineBarChartPanel({
     stack: "",
     color: "#000"
   });
-  const changed = React.useMemo(() => !_.isEqual(form.values, initialValues), [form.values, initialValues]);
-  React.useEffect(() => {
-    var _a2;
-    if (changed) {
-      (_a2 = submitButton == null ? void 0 : submitButton.current) == null ? void 0 : _a2.click();
-    }
-  }, [changed, submitButton.current]);
+  React.useMemo(() => !_.isEqual(form.values, initialValues), [form.values, initialValues]);
   return /* @__PURE__ */ jsx(Group, {
     direction: "column",
     mt: "md",
@@ -1121,13 +1147,14 @@ function VizLineBarChartPanel({
         },
         children: [/* @__PURE__ */ jsx(Text, {
           children: "Chart Config"
-        }), /* @__PURE__ */ jsx("button", {
-          ref: submitButton,
+        }), /* @__PURE__ */ jsx(ActionIcon, {
           type: "submit",
-          style: {
-            display: "none"
-          },
-          children: "Ghost submit"
+          mr: 5,
+          variant: "filled",
+          color: "blue",
+          children: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
+          })
         })]
       }), /* @__PURE__ */ jsx(TextInput, __spreadValues({
         size: "md",
@@ -1198,20 +1225,17 @@ function VizLineBarChartPanel({
     })
   });
 }
-function SunburstPanel(_a) {
-  var _b = _a, {
-    conf: _c
-  } = _b, _d = _c, {
-    columns
-  } = _d, restConf = __objRest(_d, [
-    "columns"
-  ]), {
-    setConf
-  } = _b;
+function SunburstPanel({
+  conf: {
+    label_field,
+    value_field
+  },
+  setConf
+}) {
   const form = useForm({
     initialValues: {
-      label_field: "name",
-      value_field: "value"
+      label_field,
+      value_field
     }
   });
   return /* @__PURE__ */ jsx(Group, {
@@ -1267,52 +1291,6 @@ function SunburstPanel(_a) {
     })
   });
 }
-const marks$1 = [{
-  "value": 0,
-  "label": "xs"
-}, {
-  "value": 25,
-  "label": "sm"
-}, {
-  "value": 50,
-  "label": "md"
-}, {
-  "value": 75,
-  "label": "lg"
-}, {
-  "value": 100,
-  "label": "xl"
-}];
-function MantineSizeSlider({
-  label,
-  value,
-  onChange
-}) {
-  var _a, _b;
-  const [mark, setMark] = React.useState((_b = (_a = marks$1.find((m2) => m2.label === value)) == null ? void 0 : _a.value) != null ? _b : marks$1[0].value);
-  React.useEffect(() => {
-    const match = marks$1.find((s) => s.value === mark);
-    if (match) {
-      onChange(match.label);
-    }
-  }, [mark]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
-    spacing: "xs",
-    mb: "lg",
-    children: [/* @__PURE__ */ jsx(Text, {
-      children: label
-    }), /* @__PURE__ */ jsx(Slider, {
-      label: null,
-      marks: marks$1,
-      value: mark,
-      onChange: setMark,
-      step: 25,
-      placeholder: "Pick a font size"
-    })]
-  });
-}
 const valueTypes = Object.values(ValueType).map((v) => ({
   label: v,
   value: v
@@ -1331,16 +1309,16 @@ function ValueTypeSelector({
     sx
   });
 }
-function VizTablePanel(_e) {
-  var _f = _e, {
-    conf: _g
-  } = _f, _h = _g, {
+function VizTablePanel(_a) {
+  var _b = _a, {
+    conf: _c
+  } = _b, _d = _c, {
     columns
-  } = _h, restConf = __objRest(_h, [
+  } = _d, restConf = __objRest(_d, [
     "columns"
   ]), {
     setConf
-  } = _f;
+  } = _b;
   const form = useForm({
     initialValues: __spreadValues({
       id_field: "id",
@@ -1406,10 +1384,20 @@ function VizTablePanel(_e) {
               flexGrow: 1
             }
           },
-          children: [/* @__PURE__ */ jsx(MantineSizeSlider, __spreadValues({
-            label: "Horizontal Spacing"
-          }, form.getInputProps("horizontalSpacing"))), /* @__PURE__ */ jsx(MantineSizeSlider, __spreadValues({
-            label: "Vertical Spacing"
+          children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
+            label: "Horizontal Spacing",
+            placeholder: "10px, 1em, 1rem, 100%...",
+            required: true,
+            sx: {
+              flex: 1
+            }
+          }, form.getInputProps("horizontalSpacing"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+            label: "Vertical Spacing",
+            placeholder: "10px, 1em, 1rem, 100%...",
+            required: true,
+            sx: {
+              flex: 1
+            }
           }, form.getInputProps("verticalSpacing")))]
         }), /* @__PURE__ */ jsx(Group, {
           position: "apart",
@@ -1420,8 +1408,13 @@ function VizTablePanel(_e) {
               flexGrow: 1
             }
           },
-          children: /* @__PURE__ */ jsx(MantineSizeSlider, __spreadValues({
-            label: "Font Size"
+          children: /* @__PURE__ */ jsx(TextInput, __spreadValues({
+            label: "Font Size",
+            placeholder: "10px, 1em, 1rem, 100%...",
+            required: true,
+            sx: {
+              flex: 1
+            }
           }, form.getInputProps("size")))
         }), /* @__PURE__ */ jsxs(Group, {
           direction: "column",
@@ -1553,7 +1546,7 @@ const marks = [{
   label: "bold",
   value: 100
 }];
-function MantineFontSizeSlider({
+function MantineFontWeightSlider({
   label,
   value,
   onChange
@@ -1662,7 +1655,17 @@ function VizTextPanel({
           children: [/* @__PURE__ */ jsx(Text, {
             children: "Color"
           }), /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, form.getListInputProps("paragraphs", index2, "color")))]
-        }), /* @__PURE__ */ jsxs(Group, {
+        }), /* @__PURE__ */ jsx(Group, {
+          direction: "column",
+          grow: true,
+          children: /* @__PURE__ */ jsx(TextInput, __spreadValues({
+            label: "Font Size",
+            placeholder: "10px, 1em, 1rem, 100%...",
+            sx: {
+              flex: 1
+            }
+          }, form.getListInputProps("paragraphs", index2, "size")))
+        }), /* @__PURE__ */ jsx(Group, {
           position: "apart",
           grow: true,
           sx: {
@@ -1671,11 +1674,9 @@ function VizTextPanel({
               maxWidth: "100%"
             }
           },
-          children: [/* @__PURE__ */ jsx(MantineSizeSlider, __spreadValues({
-            label: "Font Size"
-          }, form.getListInputProps("paragraphs", index2, "size"))), /* @__PURE__ */ jsx(MantineFontSizeSlider, __spreadValues({
+          children: /* @__PURE__ */ jsx(MantineFontWeightSlider, __spreadValues({
             label: "Font Weight"
-          }, form.getListInputProps("paragraphs", index2, "weight")))]
+          }, form.getListInputProps("paragraphs", index2, "weight")))
         }), /* @__PURE__ */ jsx(ActionIcon, {
           color: "red",
           variant: "hover",
@@ -1793,7 +1794,10 @@ function VizConfig({}) {
     children: [/* @__PURE__ */ jsx(EditTitle, {}), /* @__PURE__ */ jsx(EditDescription, {}), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(EditVizConf, {})]
   });
 }
-function PanelSettings({}) {
+function PanelSettingsModal({
+  opened,
+  close
+}) {
   const {
     freezeLayout
   } = React.useContext(LayoutStateContext);
@@ -1803,151 +1807,141 @@ function PanelSettings({}) {
     viz,
     title
   } = React.useContext(PanelContext);
-  const [opened, setOpened] = React.useState(false);
-  const open = () => setOpened(true);
   React.useEffect(() => {
     freezeLayout(opened);
   }, [opened]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Modal, {
-      size: "96vw",
-      overflow: "inside",
-      opened,
-      onClose: () => setOpened(false),
-      title,
-      trapFocus: true,
-      onDragStart: (e) => {
-        e.stopPropagation();
-      },
-      children: /* @__PURE__ */ jsx(AppShell, {
-        sx: {
-          height: "90vh",
-          maxHeight: "calc(100vh - 185px)",
-          ".mantine-AppShell-body": {
-            height: "100%"
-          },
-          main: {
-            height: "100%",
-            width: "100%"
-          }
+  return /* @__PURE__ */ jsx(Modal, {
+    size: "96vw",
+    overflow: "inside",
+    opened,
+    onClose: close,
+    title,
+    trapFocus: true,
+    onDragStart: (e) => {
+      e.stopPropagation();
+    },
+    children: /* @__PURE__ */ jsx(AppShell, {
+      sx: {
+        height: "90vh",
+        maxHeight: "calc(100vh - 185px)",
+        ".mantine-AppShell-body": {
+          height: "100%"
         },
-        padding: "md",
-        navbar: /* @__PURE__ */ jsx(Navbar, {
-          width: {
-            base: "40%"
-          },
+        main: {
           height: "100%",
-          p: "xs",
-          children: /* @__PURE__ */ jsxs(Tabs, {
-            initialTab: 1,
-            children: [/* @__PURE__ */ jsx(Tabs.Tab, {
-              label: "Context",
-              children: /* @__PURE__ */ jsx(ContextInfo, {})
-            }), /* @__PURE__ */ jsx(Tabs.Tab, {
-              label: "SQL Snippets",
-              children: /* @__PURE__ */ jsx(SQLSnippetsTab, {})
-            }), /* @__PURE__ */ jsx(Tabs.Tab, {
-              label: "SQL",
-              children: /* @__PURE__ */ jsx(QueryEditor, {})
-            }), /* @__PURE__ */ jsxs(Tabs.Tab, {
-              label: "Data",
-              children: [/* @__PURE__ */ jsx(LoadingOverlay, {
-                visible: loading
-              }), /* @__PURE__ */ jsx(QueryResult, {})]
-            }), /* @__PURE__ */ jsx(Tabs.Tab, {
-              label: "Viz Config",
-              children: /* @__PURE__ */ jsx(VizConfig, {})
-            })]
-          })
-        }),
+          width: "100%"
+        }
+      },
+      padding: "md",
+      navbar: /* @__PURE__ */ jsx(Navbar, {
+        width: {
+          base: "40%"
+        },
+        height: "100%",
+        p: "xs",
+        children: /* @__PURE__ */ jsxs(Tabs, {
+          initialTab: 1,
+          children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+            label: "Context",
+            children: /* @__PURE__ */ jsx(ContextInfo, {})
+          }), /* @__PURE__ */ jsx(Tabs.Tab, {
+            label: "SQL Snippets",
+            children: /* @__PURE__ */ jsx(SQLSnippetsTab, {})
+          }), /* @__PURE__ */ jsx(Tabs.Tab, {
+            label: "SQL",
+            children: /* @__PURE__ */ jsx(QueryEditor, {})
+          }), /* @__PURE__ */ jsxs(Tabs.Tab, {
+            label: "Data",
+            children: [/* @__PURE__ */ jsx(LoadingOverlay, {
+              visible: loading
+            }), /* @__PURE__ */ jsx(QueryResult, {})]
+          }), /* @__PURE__ */ jsx(Tabs.Tab, {
+            label: "Viz Config",
+            children: /* @__PURE__ */ jsx(VizConfig, {})
+          })]
+        })
+      }),
+      children: /* @__PURE__ */ jsx(ErrorBoundary, {
         children: /* @__PURE__ */ jsx(Viz, {
           viz,
           data,
           loading
         })
       })
-    }), /* @__PURE__ */ jsx(ActionIcon, {
-      variant: "hover",
-      color: "blue",
-      loading,
-      onClick: open,
-      children: /* @__PURE__ */ jsx(Settings, {
-        size: 16
-      })
-    })]
+    })
   });
 }
-function PanelTitle({
-  title,
-  description
-}) {
+function PanelTitleBar({}) {
+  const [opened, setOpened] = React.useState(false);
+  const open = () => setOpened(true);
+  const close = () => setOpened(false);
+  const {
+    title,
+    description,
+    loading,
+    refreshData
+  } = React.useContext(PanelContext);
+  const {
+    inEditMode
+  } = React.useContext(LayoutStateContext);
   return /* @__PURE__ */ jsxs(Group, {
-    position: "center",
+    position: "apart",
+    noWrap: true,
     sx: {
       borderBottom: "1px solid #eee",
       paddingBottom: "5px"
     },
-    children: [!description && /* @__PURE__ */ jsx(Text, {
-      weight: "bold",
-      sx: {
-        marginLeft: "5px",
-        display: "inline"
-      },
-      children: title
-    }), description && /* @__PURE__ */ jsx("div", {
-      children: /* @__PURE__ */ jsxs(Tooltip, {
+    children: [/* @__PURE__ */ jsx(Group, {
+      children: description && /* @__PURE__ */ jsx(Tooltip, {
         label: description,
         withArrow: true,
-        children: [/* @__PURE__ */ jsx(InfoCircle, {
+        children: /* @__PURE__ */ jsx(InfoCircle, {
           size: 12,
           style: {
             verticalAlign: "baseline",
             cursor: "pointer"
           }
-        }), /* @__PURE__ */ jsx(Text, {
-          weight: "bold",
-          sx: {
-            marginLeft: "5px",
-            display: "inline"
-          },
-          children: title
-        })]
+        })
       })
-    })]
-  });
-}
-function PanelTitleBar({}) {
-  const {
-    title,
-    description,
-    loading,
-    refreshData
-  } = React.useContext(PanelContext);
-  const {
-    inEditMode
-  } = React.useContext(LayoutStateContext);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(PanelTitle, {
-      title,
-      description
-    }), /* @__PURE__ */ jsxs(Group, {
+    }), /* @__PURE__ */ jsx(Group, {
+      grow: true,
+      position: "center",
+      children: /* @__PURE__ */ jsx(Text, {
+        lineClamp: 1,
+        weight: "bold",
+        children: title
+      })
+    }), /* @__PURE__ */ jsx(Group, {
       position: "right",
       spacing: 0,
       sx: {
-        position: "absolute",
-        right: "15px",
-        top: "4px",
         height: "28px"
       },
-      children: [/* @__PURE__ */ jsx(ActionIcon, {
-        variant: "hover",
-        color: "blue",
-        loading,
-        onClick: refreshData,
-        children: /* @__PURE__ */ jsx(Refresh, {
-          size: 16
-        })
-      }), inEditMode && /* @__PURE__ */ jsx(PanelSettings, {})]
+      children: /* @__PURE__ */ jsxs(Menu, {
+        children: [/* @__PURE__ */ jsx(Menu.Item, {
+          onClick: refreshData,
+          icon: /* @__PURE__ */ jsx(Refresh, {
+            size: 14
+          }),
+          children: "Refresh"
+        }), inEditMode && /* @__PURE__ */ jsx(Menu.Item, {
+          onClick: open,
+          icon: /* @__PURE__ */ jsx(Settings, {
+            size: 14
+          }),
+          children: "Settings"
+        }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Menu.Item, {
+          color: "red",
+          disabled: true,
+          icon: /* @__PURE__ */ jsx(Trash, {
+            size: 14
+          }),
+          children: "Delete"
+        })]
+      })
+    }), inEditMode && /* @__PURE__ */ jsx(PanelSettingsModal, {
+      opened,
+      close
     })]
   });
 }
@@ -1956,7 +1950,10 @@ function Panel({
   viz: initialViz,
   sql: initialSQL,
   title: initialTitle,
-  description: initialDesc
+  description: initialDesc,
+  update,
+  layout,
+  id
 }) {
   const contextInfo = React.useContext(ContextInfoContext);
   const definitions = React.useContext(DefinitionContext);
@@ -1964,12 +1961,22 @@ function Panel({
   const [description, setDescription] = React.useState(initialDesc);
   const [sql, setSQL] = React.useState(initialSQL);
   const [viz, setViz] = React.useState(initialViz);
+  React.useEffect(() => {
+    update({
+      id,
+      layout,
+      title,
+      description,
+      sql,
+      viz
+    });
+  }, [title, description, sql, viz, id, layout]);
   const {
     data = [],
     loading,
     refresh
-  } = useRequest(queryBySQL(sql, contextInfo, definitions), {
-    refreshDeps: [contextInfo]
+  } = useRequest(queryBySQL(sql, contextInfo, definitions, title), {
+    refreshDeps: [contextInfo, definitions]
   });
   const refreshData = refresh;
   return /* @__PURE__ */ jsx(PanelContext.Provider, {
@@ -1988,10 +1995,12 @@ function Panel({
     },
     children: /* @__PURE__ */ jsxs(Container, {
       className: "panel-root",
-      children: [/* @__PURE__ */ jsx(PanelTitleBar, {}), /* @__PURE__ */ jsx(Viz, {
-        viz,
-        data,
-        loading
+      children: [/* @__PURE__ */ jsx(PanelTitleBar, {}), /* @__PURE__ */ jsx(ErrorBoundary, {
+        children: /* @__PURE__ */ jsx(Viz, {
+          viz,
+          data,
+          loading
+        })
       })]
     })
   });
@@ -2000,6 +2009,7 @@ var index = "";
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 function DashboardLayout({
   panels,
+  setPanels,
   className = "layout",
   cols = {
     lg: 12,
@@ -2019,14 +2029,30 @@ function DashboardLayout({
     setBreakpoint(breakpoint);
     setLocalCols(localCols);
   };
+  const onLayoutChange = React.useCallback((currentLayout) => {
+    const m2 = /* @__PURE__ */ new Map();
+    currentLayout.forEach((_a) => {
+      var _b = _a, {
+        i
+      } = _b, rest = __objRest(_b, [
+        "i"
+      ]);
+      m2.set(i, rest);
+    });
+    const newPanels = panels.map((p2) => __spreadProps(__spreadValues({}, p2), {
+      layout: m2.get(p2.id)
+    }));
+    setPanels.setState(newPanels);
+  }, [panels, setPanels]);
   return /* @__PURE__ */ jsx(ResponsiveReactGridLayout, {
     onBreakpointChange,
+    onLayoutChange,
     className,
     cols,
     rowHeight,
     isDraggable,
     isResizable,
-    children: panels.map((_a) => {
+    children: panels.map((_a, index2) => {
       var _b = _a, {
         id
       } = _b, rest = __objRest(_b, [
@@ -2034,9 +2060,14 @@ function DashboardLayout({
       ]);
       return /* @__PURE__ */ jsx("div", {
         "data-grid": rest.layout,
-        children: /* @__PURE__ */ jsx(Panel, __spreadValues({
-          destroy: () => onRemoveItem(id)
-        }, rest))
+        children: /* @__PURE__ */ jsx(Panel, __spreadProps(__spreadValues({
+          id
+        }, rest), {
+          destroy: () => onRemoveItem(id),
+          update: (panel) => {
+            setPanels.setItem(index2, panel);
+          }
+        }))
       }, id);
     })
   });
@@ -2074,7 +2105,9 @@ function ModeToggler({
 function DashboardActions({
   mode,
   setMode,
-  addPanel
+  hasChanges,
+  addPanel,
+  saveChanges
 }) {
   const inEditMode = mode === DashboardMode.Edit;
   return /* @__PURE__ */ jsxs(Group, {
@@ -2100,15 +2133,16 @@ function DashboardActions({
       }), /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
-        disabled: true,
+        onClick: saveChanges,
+        disabled: !hasChanges,
         leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
           size: 20
         }),
-        children: "Save Dashboard"
+        children: "Save Changes"
       }), /* @__PURE__ */ jsx(Button, {
         color: "red",
         size: "sm",
-        disabled: true,
+        disabled: !hasChanges,
         leftIcon: /* @__PURE__ */ jsx(Recycle, {
           size: 20
         }),
@@ -2127,25 +2161,41 @@ function DashboardActions({
 }
 function Dashboard({
   dashboard,
+  update,
   className = "dashboard"
 }) {
   const [layoutFrozen, freezeLayout] = React.useState(false);
-  const [newCounter, setNewCounter] = React.useState(0);
   const [breakpoint, setBreakpoint] = React.useState();
   const [localCols, setLocalCols] = React.useState();
-  const [panels, setPanels] = React.useState(dashboard.panels);
+  const [panels, setPanels] = useListState(dashboard.panels);
   const [sqlSnippets, setSQLSnippets] = React.useState(dashboard.definition.sqlSnippets);
   const [mode, setMode] = React.useState(DashboardMode.Edit);
+  const hasChanges = React.useMemo(() => {
+    const cleanJSON = (v) => JSON.parse(JSON.stringify(v));
+    const panelsEqual = _.isEqual(cleanJSON(panels), cleanJSON(dashboard.panels));
+    if (!panelsEqual) {
+      return true;
+    }
+    return !_.isEqual(sqlSnippets, dashboard.definition.sqlSnippets);
+  }, [dashboard, panels, sqlSnippets]);
+  const saveDashboardChanges = async () => {
+    const d = _.merge({}, dashboard, {
+      panels
+    }, {
+      definition: {
+        sqlSnippets
+      }
+    });
+    await update(d);
+  };
   const addPanel = () => {
-    console.log("adding", "n" + newCounter);
-    setNewCounter((v) => v + 1);
-    const id = "n" + newCounter;
+    const id = randomId();
     const newItem = {
       id,
       layout: {
-        x: panels.length * 2 % (localCols || 12),
+        x: 0,
         y: Infinity,
-        w: 4,
+        w: 3,
         h: 4
       },
       title: `New Panel - ${id}`,
@@ -2156,21 +2206,21 @@ function Dashboard({
         conf: {}
       }
     };
-    setPanels((panels2) => [...panels2, newItem]);
+    setPanels.append(newItem);
   };
   const removePanelByID = (id) => {
-    setPanels((panels2) => _.reject(panels2, {
-      id
-    }));
+    const index2 = panels.findIndex((p2) => p2.id === id);
+    setPanels.remove(index2);
   };
   const inEditMode = mode === DashboardMode.Edit;
+  const definitions = React.useMemo(() => ({
+    sqlSnippets,
+    setSQLSnippets
+  }), [sqlSnippets, setSQLSnippets]);
   return /* @__PURE__ */ jsx("div", {
     className,
     children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-      value: {
-        sqlSnippets,
-        setSQLSnippets
-      },
+      value: definitions,
       children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
         value: {
           layoutFrozen,
@@ -2181,9 +2231,12 @@ function Dashboard({
         children: [/* @__PURE__ */ jsx(DashboardActions, {
           mode,
           setMode,
-          addPanel
+          hasChanges,
+          addPanel,
+          saveChanges: saveDashboardChanges
         }), /* @__PURE__ */ jsx(DashboardLayout, {
           panels,
+          setPanels,
           isDraggable: inEditMode && !layoutFrozen,
           isResizable: inEditMode && !layoutFrozen,
           onRemoveItem: removePanelByID,

package/dist/dashboard.umd.js

@@ -1,4 +1,4 @@
-(function(p,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/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("@mantine/prism"),require("@mantine/form"),require("react-hook-form")):typeof define=="function"&&define.amd?define(["exports","react","lodash","react-grid-layout","@mantine/core","ahooks","axios","tabler-icons-react","@mantine/hooks","echarts-for-react/lib/core","echarts/core","echarts/charts","echarts/renderers","echarts/components","numbro","echarts-gl","@mantine/prism","@mantine/form","react-hook-form"],v):(p=typeof globalThis!="undefined"?globalThis:p||self,v(p.dashboard={},p.React,p._,p["react-grid-layout"],p["@mantine/core"],p.ahooks,p.axios,p["tabler-icons-react"],p["@mantine/hooks"],p["echarts-for-react/lib/core"],p["echarts/core"],p["echarts/charts"],p["echarts/renderers"],p["echarts/components"],p.numbro,p["echarts-gl"],p["@mantine/prism"],p["@mantine/form"],p["react-hook-form"]))})(this,function(p,v,S,w,t,be,ve,y,I,ye,Se,Y,K,D,Ce,zt,A,P,O){"use strict";var wt=Object.defineProperty,Tt=Object.defineProperties;var _t=Object.getOwnPropertyDescriptors;var U=Object.getOwnPropertySymbols;var xe=Object.prototype.hasOwnProperty,ge=Object.prototype.propertyIsEnumerable;var fe=(p,v,S)=>v in p?wt(p,v,{enumerable:!0,configurable:!0,writable:!0,value:S}):p[v]=S,m=(p,v)=>{for(var S in v||(v={}))xe.call(v,S)&&fe(p,S,v[S]);if(U)for(var S of U(v))ge.call(v,S)&&fe(p,S,v[S]);return p},q=(p,v)=>Tt(p,_t(v));var z=(p,v)=>{var S={};for(var w in p)xe.call(p,w)&&v.indexOf(w)<0&&(S[w]=p[w]);if(p!=null&&U)for(var w of U(p))v.indexOf(w)<0&&ge.call(p,w)&&(S[w]=p[w]);return S};function M(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}function we(n){if(n&&n.__esModule)return n;var i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return n&&Object.keys(n).forEach(function(r){if(r!=="default"){var a=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,a.get?a:{enumerable:!0,get:function(){return n[r]}})}}),i.default=n,Object.freeze(i)}var u=M(v),T=M(S),Te=M(ve),X=M(ye),E=we(Se),ae=M(Ce),k=(n=>(n.Use="use",n.Edit="edit",n))(k||{});const _e={layoutFrozen:!1,freezeLayout:()=>{},mode:k.Edit,inEditMode:!1},j=u.default.createContext(_e),ze=(n=>(i,r,a={})=>{const o=m({"X-Requested-With":"XMLHttpRequest","Content-Type":a.string?"application/x-www-form-urlencoded":"application/json"},a.headers),s={baseURL:"http://localhost:31200",method:n,url:i,params:n==="GET"?r:a.params,headers:o};return n==="POST"&&(s.data=a.string?JSON.stringify(r):r),Te.default(s).then(l=>l.data).catch(l=>Promise.reject(l))})("POST");function le(n,i){const r=Object.keys(i),a=Object.values(i);return console.log({names:r,vals:a}),new Function(...r,`return \`${n}\`;`)(...a)}function Pe(n,i){const r=i.sqlSnippets.reduce((a,o)=>(a[o.key]=le(o.value,n),a),{});return T.default.defaultsDeep(n,r)}const Le=(n,i,r)=>async()=>{if(!n)return[];const a=Pe(i,r),o=le(n,a);return n.includes("$")&&console.log(o),await ze("/query",{sql:o})},oe={},Ie=oe,H=u.default.createContext(oe),ke={data:[],loading:!1,title:"",setTitle:()=>{},description:"",setDescription:()=>{},sql:"",setSQL:()=>{},viz:{type:"",conf:{}},setViz:()=>{},refreshData:()=>{}},L=u.default.createContext(ke);var B={exports:{}},N={};/**
+(function(p,S){typeof exports=="object"&&typeof module!="undefined"?S(exports,require("react"),require("lodash"),require("react-grid-layout"),require("@mantine/core"),require("ahooks"),require("axios"),require("tabler-icons-react"),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("@mantine/prism"),require("@mantine/form"),require("react-hook-form")):typeof define=="function"&&define.amd?define(["exports","react","lodash","react-grid-layout","@mantine/core","ahooks","axios","tabler-icons-react","@mantine/hooks","echarts-for-react/lib/core","echarts/core","echarts/charts","echarts/renderers","echarts/components","numbro","echarts-gl","@mantine/prism","@mantine/form","react-hook-form"],S):(p=typeof globalThis!="undefined"?globalThis:p||self,S(p.dashboard={},p.React,p._,p["react-grid-layout"],p["@mantine/core"],p.ahooks,p.axios,p["tabler-icons-react"],p["@mantine/hooks"],p["echarts-for-react/lib/core"],p["echarts/core"],p["echarts/charts"],p["echarts/renderers"],p["echarts/components"],p.numbro,p["echarts-gl"],p["@mantine/prism"],p["@mantine/form"],p["react-hook-form"]))})(this,function(p,S,C,w,t,ve,ye,y,P,Se,Ce,X,H,A,we,zt,M,L,B){"use strict";var wt=Object.defineProperty,Tt=Object.defineProperties;var _t=Object.getOwnPropertyDescriptors;var K=Object.getOwnPropertySymbols;var ge=Object.prototype.hasOwnProperty,be=Object.prototype.propertyIsEnumerable;var xe=(p,S,C)=>S in p?wt(p,S,{enumerable:!0,configurable:!0,writable:!0,value:C}):p[S]=C,m=(p,S)=>{for(var C in S||(S={}))ge.call(S,C)&&xe(p,C,S[C]);if(K)for(var C of K(S))be.call(S,C)&&xe(p,C,S[C]);return p},k=(p,S)=>Tt(p,_t(S));var I=(p,S)=>{var C={};for(var w in p)ge.call(p,w)&&S.indexOf(w)<0&&(C[w]=p[w]);if(p!=null&&K)for(var w of K(p))S.indexOf(w)<0&&be.call(p,w)&&(C[w]=p[w]);return C};function j(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}function Te(n){if(n&&n.__esModule)return n;var i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return n&&Object.keys(n).forEach(function(r){if(r!=="default"){var a=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,a.get?a:{enumerable:!0,get:function(){return n[r]}})}}),i.default=n,Object.freeze(i)}var d=j(S),T=j(C),_e=j(ye),Z=j(Se),$=Te(Ce),re=j(we),q=(n=>(n.Use="use",n.Edit="edit",n))(q||{});const ze={layoutFrozen:!1,freezeLayout:()=>{},mode:q.Edit,inEditMode:!1},R=d.default.createContext(ze),Pe=(n=>(i,r,a={})=>{const o=m({"X-Requested-With":"XMLHttpRequest","Content-Type":a.string?"application/x-www-form-urlencoded":"application/json"},a.headers),s={baseURL:"http://localhost:31200",method:n,url:i,params:n==="GET"?r:a.params,headers:o};return n==="POST"&&(s.data=a.string?JSON.stringify(r):r),_e.default(s).then(l=>l.data).catch(l=>Promise.reject(l))})("POST");function ae(n,i){const r=Object.keys(i),a=Object.values(i);return new Function(...r,`return \`${n}\`;`)(...a)}function Ie(n,i){const r=i.sqlSnippets.reduce((a,o)=>(a[o.key]=ae(o.value,n),a),{});return T.default.merge({},r,n)}const Le=(n,i,r,a)=>async()=>{if(!n)return[];const o=n.includes("$"),s=Ie(i,r);if(console.log(o,s),o&&Object.keys(s).length===0)return console.error(`[queryBySQL] insufficient params for {${a}}'s SQL`),[];const l=ae(n,s);return o&&(console.groupCollapsed(`Final SQL for: ${a}`),console.log(l),console.groupEnd()),await Pe("/query",{sql:l})},oe={},De=oe,ee=d.default.createContext(oe),Ge={data:[],loading:!1,title:"",setTitle:()=>{},description:"",setDescription:()=>{},sql:"",setSQL:()=>{},viz:{type:"",conf:{}},setViz:()=>{},refreshData:()=>{}},D=d.default.createContext(Ge);var Q={exports:{}},W={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,16 +6,16 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Ge=u.default,De=Symbol.for("react.element"),Ae=Symbol.for("react.fragment"),Oe=Object.prototype.hasOwnProperty,qe=Ge.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Ee={key:!0,ref:!0,__self:!0,__source:!0};function se(n,i,r){var a,o={},s=null,l=null;r!==void 0&&(s=""+r),i.key!==void 0&&(s=""+i.key),i.ref!==void 0&&(l=i.ref);for(a in i)Oe.call(i,a)&&!Ee.hasOwnProperty(a)&&(o[a]=i[a]);if(n&&n.defaultProps)for(a in i=n.defaultProps,i)o[a]===void 0&&(o[a]=i[a]);return{$$typeof:De,type:n,key:s,ref:l,props:o,_owner:qe.current}}N.Fragment=Ae,N.jsx=se,N.jsxs=se,B.exports=N;const e=B.exports.jsx,c=B.exports.jsxs,V=B.exports.Fragment;E.use([Y.SunburstChart,K.CanvasRenderer]);const Me={tooltip:{show:!0},series:{type:"sunburst",radius:[0,"90%"],emphasis:{focus:"ancestor"}}};function je({conf:n,data:i,width:r,height:a}){const h=n,{label_field:o="name",value_field:s="value"}=h,l=z(h,["label_field","value_field"]),d=u.default.useMemo(()=>i.map(b=>({name:b[o],value:b[s]})),[i,o,s]),f=u.default.useMemo(()=>{var b,C;return(C=(b=T.default.maxBy(d,_=>_.value))==null?void 0:b.value)!=null?C:1},[d]),g=u.default.useMemo(()=>({series:{label:{formatter:({name:b,value:C})=>C/f<.2?" ":b}}}),[]),x=T.default.defaultsDeep(Me,g,l,{series:{data:d}});return e(X.default,{echarts:E,option:x,style:{width:r,height:a}})}E.use([Y.BarChart,Y.LineChart,D.GridComponent,D.LegendComponent,D.TooltipComponent,K.CanvasRenderer]);const Be={legend:{show:!0},tooltip:{trigger:"axis"},xAxis:{type:"category"},yAxis:{}};function Ne({conf:n,data:i,width:r,height:a}){const o=u.default.useMemo(()=>{const s={dataset:{source:i}},l={xAxis:{data:i.map(f=>f[n.x_axis_data_key])}},d=n.series.map(x=>{var h=x,{y_axis_data_key:f}=h,g=z(h,["y_axis_data_key"]);return m({data:i.map(b=>b[f])},g)});return T.default.assign({},Be,s,l,{series:d})},[n,i]);return!r||!a?null:e(X.default,{echarts:E,option:o,style:{width:r,height:a}})}var G=(n=>(n.string="string",n.number="number",n.eloc="eloc",n.percentage="percentage",n))(G||{});function Ve({value:n}){return e(t.Text,{component:"span",children:n})}function $e({value:n}){return e(t.Text,{component:"span",children:n})}function Fe({value:n}){const i=ae.default(n).format({thousandSeparated:!0});return e(t.Text,{component:"span",children:i})}function Re({value:n}){const i=ae.default(n).format({output:"percent",mantissa:3});return e(t.Text,{component:"span",children:i})}function Qe({value:n,type:i}){switch(i){case G.string:return e(Ve,{value:n});case G.eloc:return e($e,{value:n});case G.number:return e(Fe,{value:n});case G.percentage:return e(Re,{value:n})}}function We({conf:n,data:i,width:r,height:a}){const x=n,{id_field:o,use_raw_columns:s,columns:l}=x,d=z(x,["id_field","use_raw_columns","columns"]),f=u.default.useMemo(()=>s?Object.keys(i==null?void 0:i[0]):l.map(h=>h.label),[s,l,i]),g=u.default.useMemo(()=>s?Object.keys(i==null?void 0:i[0]).map(h=>({label:h,value_field:h,value_type:G.string})):l,[s,l,i]);return c(t.Table,q(m({sx:{maxHeight:a}},d),{children:[e("thead",{children:e("tr",{children:f.map(h=>e("th",{children:h},h))})}),e("tbody",{children:i.map((h,b)=>e("tr",{children:g.map(({value_field:C,value_type:_})=>e("td",{children:e(t.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace"}},children:e(Qe,{value:h[C],type:_})})},h[C]))},o?h[o]:`row-${b}`))})]}))}function Je(n,i={}){const r=Object.keys(i),a=Object.values(i);try{return new Function(...r,`return \`${n}\`;`)(...a)}catch(o){return o.message}}function Ue({conf:{paragraphs:n},data:i}){return e(V,{children:n.map((s,o)=>{var l=s,{template:r}=l,a=z(l,["template"]);return e(t.Text,q(m({},a),{children:Je(r,i[0])}),`${r}---${o}`)})})}E.use([D.GridComponent,D.VisualMapComponent,D.LegendComponent,D.TooltipComponent,K.CanvasRenderer]);function Ye({conf:n,data:i,width:r,height:a}){const h=n,{x_axis_data_key:o,y_axis_data_key:s,z_axis_data_key:l}=h,d=z(h,["x_axis_data_key","y_axis_data_key","z_axis_data_key"]),f=u.default.useMemo(()=>T.default.minBy(i,b=>b[l])[l],[i,l]),g=u.default.useMemo(()=>T.default.maxBy(i,b=>b[l])[l],[i,l]),x=q(m({tooltip:{},backgroundColor:"#fff",visualMap:{show:!0,dimension:2,min:f,max:g,inRange:{color:["#313695","#4575b4","#74add1","#abd9e9","#e0f3f8","#ffffbf","#fee090","#fdae61","#f46d43","#d73027","#a50026"]}},xAxis3D:{type:"value"},yAxis3D:{type:"value"},zAxis3D:{type:"value"},grid3D:{viewControl:{projection:"orthographic",autoRotate:!1},light:{main:{shadow:!0,quality:"ultra",intensity:1.5}}}},d),{series:[{type:"bar3D",wireframe:{},data:i.map(b=>[b[o],b[s],b[l]])}]});return e(X.default,{echarts:E,option:x,style:{width:r,height:a}})}var Lt="";function Ke(n,i,r,a){const o={width:n,height:i,data:r,conf:a.conf};switch(a.type){case"sunburst":return e(je,m({},o));case"line-bar":return e(Ne,m({},o));case"table":return e(We,m({},o));case"text":return e(Ue,m({},o));case"bar-3d":return e(Ye,m({},o));default:return null}}function ue({viz:n,data:i,loading:r}){const{ref:a,width:o,height:s}=I.useElementSize(),l=u.default.useMemo(()=>!Array.isArray(i)||i.length===0,[i]);return r?e("div",{className:"viz-root",ref:a,children:e(t.LoadingOverlay,{visible:r})}):c("div",{className:"viz-root",ref:a,children:[l&&e(t.Text,{color:"gray",align:"center",children:"nothing to show"}),!l&&Ke(o,s,i,n)]})}function Xe({}){const n=u.default.useContext(H),i="SELECT *\nFROM commit\nWHERE author_time BETWEEN '${timeRange?.[0].toISOString()}' AND '${timeRange?.[1].toISOString()}'";return c(t.Group,{direction:"column",children:[e(A.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:`-- You may refer context data *by name*
+ */var ke=d.default,qe=Symbol.for("react.element"),Ee=Symbol.for("react.fragment"),Oe=Object.prototype.hasOwnProperty,Ae=ke.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Me={key:!0,ref:!0,__self:!0,__source:!0};function le(n,i,r){var a,o={},s=null,l=null;r!==void 0&&(s=""+r),i.key!==void 0&&(s=""+i.key),i.ref!==void 0&&(l=i.ref);for(a in i)Oe.call(i,a)&&!Me.hasOwnProperty(a)&&(o[a]=i[a]);if(n&&n.defaultProps)for(a in i=n.defaultProps,i)o[a]===void 0&&(o[a]=i[a]);return{$$typeof:qe,type:n,key:s,ref:l,props:o,_owner:Ae.current}}W.Fragment=Ee,W.jsx=le,W.jsxs=le,Q.exports=W;const e=Q.exports.jsx,c=Q.exports.jsxs,se=Q.exports.Fragment;class ue extends d.default.Component{constructor(i){super(i),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}render(){return this.state.hasError?e("h1",{children:"Something went wrong."}):this.props.children}}$.use([X.SunburstChart,H.CanvasRenderer]);const Be={tooltip:{show:!0},series:{type:"sunburst",radius:[0,"90%"],emphasis:{focus:"ancestor"}}};function Ne({conf:n,data:i,width:r,height:a}){const x=n,{label_field:o="name",value_field:s="value"}=x,l=I(x,["label_field","value_field"]),u=d.default.useMemo(()=>i.map(g=>({name:g[o],value:Number(g[s])})),[i,o,s]),f=d.default.useMemo(()=>{var g,v;return(v=(g=T.default.maxBy(u,z=>z.value))==null?void 0:g.value)!=null?v:1},[u]),h=d.default.useMemo(()=>({series:{label:{formatter:({name:g,value:v})=>v/f<.2?" ":g}}}),[]),b=T.default.merge(Be,h,l,{series:{data:u}});return e(Z.default,{echarts:$,option:b,style:{width:r,height:a}})}$.use([X.BarChart,X.LineChart,A.GridComponent,A.LegendComponent,A.TooltipComponent,H.CanvasRenderer]);const Fe={legend:{show:!0},tooltip:{trigger:"axis"},xAxis:{type:"category"},yAxis:{},grid:{top:30,left:10,right:10,bottom:10,containLabel:!0}};function $e({conf:n,data:i,width:r,height:a}){const o=d.default.useMemo(()=>{const s={dataset:{source:i}},l={xAxis:{data:i.map(f=>f[n.x_axis_data_key])}},u=n.series.map(b=>{var x=b,{y_axis_data_key:f}=x,h=I(x,["y_axis_data_key"]);return m({data:i.map(g=>g[f])},h)});return T.default.assign({},Fe,s,l,{series:u})},[n,i]);return!r||!a?null:e(Z.default,{echarts:$,option:o,style:{width:r,height:a}})}var E=(n=>(n.string="string",n.number="number",n.eloc="eloc",n.percentage="percentage",n))(E||{});function je({value:n}){return e(t.Text,{component:"span",children:n})}function Ve({value:n}){return e(t.Text,{component:"span",children:n})}function Re({value:n}){const i=re.default(n).format({thousandSeparated:!0});return e(t.Text,{component:"span",children:i})}function Qe({value:n}){const i=re.default(n).format({output:"percent",mantissa:3});return e(t.Text,{component:"span",children:i})}function We({value:n,type:i}){switch(i){case E.string:return e(je,{value:n});case E.eloc:return e(Ve,{value:n});case E.number:return e(Re,{value:n});case E.percentage:return e(Qe,{value:n})}}function Je({conf:n,data:i,width:r,height:a}){const b=n,{id_field:o,use_raw_columns:s,columns:l}=b,u=I(b,["id_field","use_raw_columns","columns"]),f=d.default.useMemo(()=>s?Object.keys(i==null?void 0:i[0]):l.map(x=>x.label),[s,l,i]),h=d.default.useMemo(()=>s?Object.keys(i==null?void 0:i[0]).map(x=>({label:x,value_field:x,value_type:E.string})):l,[s,l,i]);return c(t.Table,k(m({sx:{maxHeight:a}},u),{children:[e("thead",{children:e("tr",{children:f.map(x=>e("th",{children:x},x))})}),e("tbody",{children:i.map((x,g)=>e("tr",{children:h.map(({value_field:v,value_type:z})=>e("td",{children:e(t.Group,{sx:{"&, .mantine-Text-root":{fontFamily:"monospace"}},children:e(We,{value:x[v],type:z})})},x[v]))},o?x[o]:`row-${g}`))})]}))}function Ue(n,i={}){const r=Object.keys(i),a=Object.values(i);try{return new Function(...r,`return \`${n}\`;`)(...a)}catch(o){return o.message}}function Ye({conf:{paragraphs:n},data:i}){return e(se,{children:n.map((l,s)=>{var u=l,{template:r,size:a}=u,o=I(u,["template","size"]);return e(t.Text,k(m({},o),{sx:{fontSize:a},children:Ue(r,i[0])}),`${r}---${s}`)})})}$.use([A.GridComponent,A.VisualMapComponent,A.LegendComponent,A.TooltipComponent,H.CanvasRenderer]);function Ke({conf:n,data:i,width:r,height:a}){const x=n,{x_axis_data_key:o,y_axis_data_key:s,z_axis_data_key:l}=x,u=I(x,["x_axis_data_key","y_axis_data_key","z_axis_data_key"]),f=d.default.useMemo(()=>T.default.minBy(i,g=>g[l])[l],[i,l]),h=d.default.useMemo(()=>T.default.maxBy(i,g=>g[l])[l],[i,l]),b=k(m({tooltip:{},backgroundColor:"#fff",visualMap:{show:!0,dimension:2,min:f,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:i.map(g=>[g[o],g[s],g[l]])}]});return e(Z.default,{echarts:$,option:b,style:{width:r,height:a}})}var It="";function Xe(n,i,r,a){const o={width:n,height:i,data:r,conf:a.conf};switch(a.type){case"sunburst":return e(Ne,m({},o));case"line-bar":return e($e,m({},o));case"table":return e(Je,m({},o));case"text":return e(Ye,m({},o));case"bar-3d":return e(Ke,m({},o));default:return null}}function de({viz:n,data:i,loading:r}){const{ref:a,width:o,height:s}=P.useElementSize(),l=d.default.useMemo(()=>!Array.isArray(i)||i.length===0,[i]);return r?e("div",{className:"viz-root",ref:a,children:e(t.LoadingOverlay,{visible:r})}):c("div",{className:"viz-root",ref:a,children:[l&&e(t.Text,{color:"gray",align:"center",children:"nothing to show"}),!l&&Xe(o,s,i,n)]})}function He({}){const n=d.default.useContext(ee),i="SELECT *\nFROM commit\nWHERE author_time BETWEEN '${timeRange?.[0].toISOString()}' AND '${timeRange?.[1].toISOString()}'";return c(t.Group,{direction:"column",children:[e(M.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:`-- You may refer context data *by name*
 -- in SQL or VizConfig.
 
-${i}`}),e(t.Text,{weight:700,children:"Avaiable context entries"}),e(A.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:JSON.stringify(n,null,2)})]})}var It="";function He({}){const{sql:n,setSQL:i}=u.default.useContext(L),[r,a]=u.default.useState(!0),o=d=>{i(d.target.value)},s=u.default.useCallback(()=>{a(d=>!d)},[]),l=u.default.useCallback(()=>{i(d=>d.trim())},[i]);return c(t.Box,{className:"sql-query-editor-root",sx:{height:"100%"},children:[e(t.Textarea,{value:n,onChange:o,minRows:20,maxRows:20}),c(t.Group,{m:"md",position:"right",children:[e(t.Button,{color:"blue",onClick:l,children:"Format"}),e(t.Button,{variant:"default",onClick:s,children:"Toggle Preview"})]}),r&&e(A.Prism,{language:"sql",withLineNumbers:!0,noCopy:!0,colorScheme:"dark",children:n})]})}const Ze=He;function et({}){const{data:n}=u.default.useContext(L);return c("div",{className:"query-result-root",children:[c(t.Group,{mb:"xs",children:[e(t.Text,{weight:"bold",children:"Data Length: "}),n.length]}),e(A.Prism,{language:"json",colorScheme:"dark",children:JSON.stringify(n,null,2)})]})}const tt={sqlSnippets:[],setSQLSnippets:()=>{}},$=u.default.createContext(tt);function nt({sqlSnippets:n,setSQLSnippets:i}){const r=u.default.useRef(null),a=u.default.useMemo(()=>({snippets:P.formList(n!=null?n:[])}),[n]),o=P.useForm({initialValues:a}),s=()=>o.addListItem("snippets",{key:I.randomId(),value:""}),l=u.default.useMemo(()=>!T.default.isEqual(o.values,a),[o.values,a]);u.default.useEffect(()=>{var f;l&&((f=r==null?void 0:r.current)==null||f.click())},[l,r.current]);const d=({snippets:f})=>{i(f)};return e(t.Group,{direction:"column",sx:{width:"100%"},grow:!0,children:c("form",{onSubmit:o.onSubmit(d),children:[e("button",{ref:r,type:"submit",style:{display:"none"},children:"Ghost submit"}),o.values.snippets.map((f,g)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,m({label:"Key",required:!0},o.getListInputProps("snippets",g,"key"))),e(t.Textarea,m({minRows:3,label:"Value",required:!0},o.getListInputProps("snippets",g,"value"))),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>o.removeListItem("snippets",g),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},g)),e(t.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"60%"},mx:"auto",children:e(t.Button,{color:"blue",onClick:s,children:"Add a snippet"})})]})})}function it({}){const{sqlSnippets:n,setSQLSnippets:i}=u.default.useContext($),r=`SELECT *
+${i}`}),e(t.Text,{weight:700,children:"Avaiable context entries"}),e(M.Prism,{language:"json",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:JSON.stringify(n,null,2)})]})}var Lt="";function Ze({}){const{sql:n,setSQL:i}=d.default.useContext(D),[r,a]=d.default.useState(!0),o=u=>{i(u.target.value)},s=d.default.useCallback(()=>{a(u=>!u)},[]),l=d.default.useCallback(()=>{i(u=>u.trim())},[i]);return c(t.Box,{className:"sql-query-editor-root",sx:{height:"100%"},children:[e(t.Textarea,{value:n,onChange:o,minRows:20,maxRows:20}),c(t.Group,{m:"md",position:"right",children:[e(t.Button,{color:"blue",onClick:l,children:"Format"}),e(t.Button,{variant:"default",onClick:s,children:"Toggle Preview"})]}),r&&e(M.Prism,{language:"sql",withLineNumbers:!0,noCopy:!0,colorScheme:"dark",children:n})]})}const et=Ze;function tt({}){const{data:n}=d.default.useContext(D);return c("div",{className:"query-result-root",children:[c(t.Group,{mb:"xs",children:[e(t.Text,{weight:"bold",children:"Data Length: "}),n.length]}),e(M.Prism,{language:"json",colorScheme:"dark",children:JSON.stringify(n,null,2)})]})}const nt={sqlSnippets:[],setSQLSnippets:()=>{}},J=d.default.createContext(nt);function it({sqlSnippets:n,setSQLSnippets:i}){const r=d.default.useMemo(()=>({snippets:L.formList(n!=null?n:[])}),[n]),a=L.useForm({initialValues:r}),o=()=>a.addListItem("snippets",{key:P.randomId(),value:""}),s=d.default.useMemo(()=>!T.default.isEqual(a.values,r),[a.values,r]),l=({snippets:u})=>{i(u)};return e(t.Group,{direction:"column",sx:{width:"100%",position:"relative"},grow:!0,children:c("form",{onSubmit:a.onSubmit(l),children:[a.values.snippets.map((u,f)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,m({label:"Key",required:!0},a.getListInputProps("snippets",f,"key"))),e(t.Textarea,m({minRows:3,label:"Value",required:!0},a.getListInputProps("snippets",f,"value"))),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>a.removeListItem("snippets",f),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},f)),c(t.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"80%"},mx:"auto",children:[e(t.Button,{variant:"default",onClick:o,children:"Add a snippet"}),e(t.Button,{color:"blue",type:"submit",disabled:!s,children:"Submit"})]})]})})}function rt({}){const{sqlSnippets:n,setSQLSnippets:i}=d.default.useContext(J),r=`SELECT *
 FROM commit
-WHERE \${author_time_condition}`;return c(t.Group,{direction:"column",children:[e(A.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,colorScheme:"dark",children:`-- You may refer context data *by name*
+WHERE \${author_time_condition}`;return c(t.Group,{direction:"column",children:[e(M.Prism,{language:"sql",sx:{width:"100%"},noCopy:!0,trim:!1,colorScheme:"dark",children:`-- You may refer context data *by name*
 -- in SQL or VizConfig.
 
 ${r}
 
 -- where author_time_condition is:
 author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
-`}),e(t.Text,{weight:700,children:"SQL Snippets"}),e(nt,{sqlSnippets:n,setSQLSnippets:i})]})}function rt(){const{description:n,setDescription:i}=u.default.useContext(L),[r,a]=I.useInputState(n),o=n!==r,s=u.default.useCallback(()=>{!o||i(r)},[o,r]);return e(t.Textarea,{label:"Panel Description",value:r,onChange:a,minRows:2,rightSection:e(t.ActionIcon,{disabled:!o,onClick:s,sx:{alignSelf:"flex-start",marginTop:"4px"},children:e(y.DeviceFloppy,{size:20})})})}function at(){const{title:n,setTitle:i}=u.default.useContext(L),[r,a]=I.useInputState(n),o=n!==r,s=u.default.useCallback(()=>{!o||i(r)},[o,r]);return e(t.TextInput,{label:"Panel Title",value:r,onChange:a,rightSection:e(t.ActionIcon,{disabled:!o,onClick:s,children:e(y.DeviceFloppy,{size:20})})})}function lt({conf:n,setConf:i}){const r=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"}},n),{control:a,handleSubmit:o,formState:s}=O.useForm({defaultValues:r});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:o(i),children:[e(t.Text,{children:"X Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(O.Controller,{name:"x_axis_data_key",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Data Key"},l))}),e(O.Controller,{name:"xAxis3D.name",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Name"},l))})]}),e(t.Text,{mt:"lg",children:"Y Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(O.Controller,{name:"y_axis_data_key",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Data Key"},l))}),e(O.Controller,{name:"yAxis3D.name",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Name"},l))})]}),e(t.Text,{mt:"lg",children:"Z Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(O.Controller,{name:"z_axis_data_key",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Data Key"},l))}),e(O.Controller,{name:"zAxis3D.name",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Name"},l))})]}),e(t.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"60%"},mx:"auto",children:c(t.Button,{color:"blue",type:"submit",children:[e(y.DeviceFloppy,{size:20}),e(t.Text,{ml:"md",children:"Save"})]})})]})})}function de({value:n,onChange:i}){const r=t.useMantineTheme(),a=u.default.useMemo(()=>Object.entries(r.colors).map(([s,l])=>({label:s,value:l[6]})),[r]),o=u.default.useMemo(()=>a.some(s=>s.value===n),[n,a]);return c(t.Group,{position:"apart",spacing:"xs",children:[e(t.TextInput,{placeholder:"Set any color",value:o?"":n,onChange:s=>i(s.currentTarget.value),rightSection:e(t.ColorSwatch,{color:o?"transparent":n,radius:4}),variant:o?"filled":"default",sx:{maxWidth:"100%",flexGrow:1}}),e(t.Text,{sx:{flexGrow:0},children:"or"}),e(t.Select,{data:a,value:n,onChange:i,variant:o?"default":"filled",placeholder:"Pick a theme color",icon:e(t.ColorSwatch,{color:o?n:"transparent",radius:4}),sx:{maxWidth:"100%",flexGrow:1}})]})}function ot({conf:n,setConf:i}){const r=u.default.useRef(null),g=n,{series:a}=g,o=z(g,["series"]),s=u.default.useMemo(()=>m({series:P.formList(a!=null?a:[])},o),[a,o]),l=P.useForm({initialValues:s}),d=()=>l.addListItem("series",{type:"bar",name:I.randomId(),showSymbol:!1,y_axis_data_key:"value",stack:"",color:"#000"}),f=u.default.useMemo(()=>!T.default.isEqual(l.values,s),[l.values,s]);return u.default.useEffect(()=>{var x;f&&((x=r==null?void 0:r.current)==null||x.click())},[f,r.current]),e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:l.onSubmit(i),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Chart Config"}),e("button",{ref:r,type:"submit",style:{display:"none"},children:"Ghost submit"})]}),e(t.TextInput,m({size:"md",mb:"lg",label:"X Axis Data Key"},l.getInputProps("x_axis_data_key"))),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{mt:"xl",mb:0,children:"Series"}),l.values.series.map((x,h)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,m({label:"Label",required:!0,sx:{flex:1}},l.getListInputProps("series",h,"name"))),c(t.Group,{direction:"row",grow:!0,noWrap:!0,children:[e(t.TextInput,m({label:"Y Axis Data key",required:!0},l.getListInputProps("series",h,"y_axis_data_key"))),e(t.TextInput,m({label:"Stack ID",placeholder:"Stack bars by this ID"},l.getListInputProps("series",h,"stack")))]}),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Color"}),e(de,m({},l.getListInputProps("series",h,"color")))]}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>l.removeListItem("series",h),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},h)),e(t.Group,{position:"center",mt:"xs",children:e(t.Button,{onClick:d,children:"Add a Series"})})]})]})})}function st(a){var o=a,{conf:s}=o,l=s,{columns:n}=l,i=z(l,["columns"]),{setConf:r}=o;const d=P.useForm({initialValues:{label_field:"name",value_field:"value"}});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:d.onSubmit(r),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Sunburst Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),c(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.TextInput,m({label:"Label Field",required:!0,sx:{flex:1}},d.getInputProps("label_field"))),e(t.TextInput,m({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},d.getInputProps("value_field")))]})]})})}const F=[{value:0,label:"xs"},{value:25,label:"sm"},{value:50,label:"md"},{value:75,label:"lg"},{value:100,label:"xl"}];function R({label:n,value:i,onChange:r}){var s,l;const[a,o]=u.default.useState((l=(s=F.find(d=>d.label===i))==null?void 0:s.value)!=null?l:F[0].value);return u.default.useEffect(()=>{const d=F.find(f=>f.value===a);d&&r(d.label)},[a]),c(t.Group,{direction:"column",grow:!0,spacing:"xs",mb:"lg",children:[e(t.Text,{children:n}),e(t.Slider,{label:null,marks:F,value:a,onChange:o,step:25,placeholder:"Pick a font size"})]})}const ut=Object.values(G).map(n=>({label:n,value:n}));function dt({label:n,value:i,onChange:r,sx:a}){return e(t.Select,{label:n,data:ut,value:i,onChange:r,sx:a})}function ct(a){var o=a,{conf:s}=o,l=s,{columns:n}=l,i=z(l,["columns"]),{setConf:r}=o;const d=P.useForm({initialValues:m({id_field:"id",use_raw_columns:!0,columns:P.formList(n!=null?n:[]),size:"sm",horizontalSpacing:"sm",verticalSpacing:"sm",striped:!1,highlightOnHover:!1},i)}),f=()=>d.addListItem("columns",{label:I.randomId(),value_field:"value",value_type:G.string});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:d.onSubmit(r),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Table Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),c(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.TextInput,m({size:"md",mb:"lg",label:"ID Field"},d.getInputProps("id_field"))),c(t.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:[e(R,m({label:"Horizontal Spacing"},d.getInputProps("horizontalSpacing"))),e(R,m({label:"Vertical Spacing"},d.getInputProps("verticalSpacing")))]}),e(t.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:e(R,m({label:"Font Size"},d.getInputProps("size")))}),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Other"}),c(t.Group,{position:"apart",grow:!0,children:[e(t.Switch,m({label:"Striped"},d.getInputProps("striped",{type:"checkbox"}))),e(t.Switch,m({label:"Highlight on hover"},d.getInputProps("highlightOnHover",{type:"checkbox"})))]})]})]}),c(t.Group,{direction:"column",mt:"xs",spacing:"xs",grow:!0,p:"md",mb:"xl",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.Switch,m({label:"Use Original Data Columns"},d.getInputProps("use_raw_columns",{type:"checkbox"}))),!d.values.use_raw_columns&&c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{mt:"xl",mb:0,children:"Custom Columns"}),d.values.columns.map((g,x)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[c(t.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:[e(t.TextInput,m({label:"Label",required:!0,sx:{flex:1}},d.getListInputProps("columns",x,"label"))),e(t.TextInput,m({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},d.getListInputProps("columns",x,"value_field"))),e(dt,m({label:"Value Type",sx:{flex:1}},d.getListInputProps("columns",x,"value_type")))]}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>d.removeListItem("columns",x),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},x)),e(t.Group,{position:"center",mt:"xs",children:e(t.Button,{onClick:f,children:"Add a Column"})})]})]}),e(t.Text,{weight:500,mb:"md",children:"Current Configuration:"}),e(A.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(d.values,null,2)})]})})}const Q=[{label:"initial",value:0},{label:"500",value:25},{label:"700",value:50},{label:"semibold",value:75},{label:"bold",value:100}];function pt({label:n,value:i,onChange:r}){var s,l;const[a,o]=u.default.useState((l=(s=Q.find(d=>d.label===i))==null?void 0:s.value)!=null?l:Q[0].value);return u.default.useEffect(()=>{const d=Q.find(f=>f.value===a);d&&r(d.label)},[a]),c(t.Group,{direction:"column",grow:!0,spacing:"xs",mb:"lg",children:[e(t.Text,{children:n}),e(t.Slider,{label:null,marks:Q,value:a,onChange:o,step:25,placeholder:"Pick a font size"})]})}const ce=[{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 mt({conf:n,setConf:i}){var o;const r=P.useForm({initialValues:{paragraphs:P.formList((o=n.paragraphs)!=null?o:ce)}}),a=()=>r.addListItem("paragraphs",q(m({},ce[0]),{template:I.randomId()}));return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:r.onSubmit(i),children:[r.values.paragraphs.length===0&&e(t.Text,{color:"dimmed",align:"center",children:"Empty"}),c(t.Group,{position:"apart",mb:"xs",sx:{" + .mantine-Group-root":{marginTop:0}},children:[e(t.Text,{children:"Paragraphs"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),r.values.paragraphs.map((s,l)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,m({placeholder:"Time: ${new Date().toISOString()}",label:"Content Template",required:!0,sx:{flex:1}},r.getListInputProps("paragraphs",l,"template"))),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Color"}),e(de,m({},r.getListInputProps("paragraphs",l,"color")))]}),c(t.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:[e(R,m({label:"Font Size"},r.getListInputProps("paragraphs",l,"size"))),e(pt,m({label:"Font Weight"},r.getListInputProps("paragraphs",l,"weight")))]}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>r.removeListItem("paragraphs",l),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},l)),e(t.Group,{position:"center",mt:"md",children:e(t.Button,{onClick:a,children:"Add a Paragraph"})}),e(t.Text,{size:"sm",weight:500,mt:"md",children:"Current Configuration:"}),e(A.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(r.values,null,2)})]})})}const Z=[{value:"text",label:"Text",Panel:mt},{value:"table",label:"Table",Panel:ct},{value:"sunburst",label:"Sunburst",Panel:st},{value:"bar-3d",label:"Bar Chart (3D)",Panel:lt},{value:"line-bar",label:"Line-Bar Chart",Panel:ot}];function ht(){const{viz:n,setViz:i}=u.default.useContext(L),[r,a]=I.useInputState(n.type),o=n.type!==r,s=u.default.useCallback(()=>{!o||i(g=>q(m({},g),{type:r}))},[o,r]),l=g=>{i(x=>q(m({},x),{conf:g}))},d=g=>{try{l(JSON.parse(g))}catch(x){console.error(x)}},f=u.default.useMemo(()=>{var g;return(g=Z.find(x=>x.value===r))==null?void 0:g.Panel},[r,Z]);return c(V,{children:[e(t.Select,{label:"Visualization",value:r,onChange:a,data:Z,rightSection:e(t.ActionIcon,{disabled:!o,onClick:s,children:e(y.DeviceFloppy,{size:20})})}),f&&e(f,{conf:n.conf,setConf:l}),!f&&e(t.JsonInput,{minRows:20,label:"Config",value:JSON.stringify(n.conf,null,2),onChange:d})]})}function ft({}){return c(t.Group,{grow:!0,direction:"column",children:[e(at,{}),e(rt,{}),e(t.Divider,{}),e(ht,{})]})}function xt({}){const{freezeLayout:n}=u.default.useContext(j),{data:i,loading:r,viz:a,title:o}=u.default.useContext(L),[s,l]=u.default.useState(!1),d=()=>l(!0);return u.default.useEffect(()=>{n(s)},[s]),c(V,{children:[e(t.Modal,{size:"96vw",overflow:"inside",opened:s,onClose:()=>l(!1),title:o,trapFocus:!0,onDragStart:f=>{f.stopPropagation()},children:e(t.AppShell,{sx:{height:"90vh",maxHeight:"calc(100vh - 185px)",".mantine-AppShell-body":{height:"100%"},main:{height:"100%",width:"100%"}},padding:"md",navbar:e(t.Navbar,{width:{base:"40%"},height:"100%",p:"xs",children:c(t.Tabs,{initialTab:1,children:[e(t.Tabs.Tab,{label:"Context",children:e(Xe,{})}),e(t.Tabs.Tab,{label:"SQL Snippets",children:e(it,{})}),e(t.Tabs.Tab,{label:"SQL",children:e(Ze,{})}),c(t.Tabs.Tab,{label:"Data",children:[e(t.LoadingOverlay,{visible:r}),e(et,{})]}),e(t.Tabs.Tab,{label:"Viz Config",children:e(ft,{})})]})}),children:e(ue,{viz:a,data:i,loading:r})})}),e(t.ActionIcon,{variant:"hover",color:"blue",loading:r,onClick:d,children:e(y.Settings,{size:16})})]})}function gt({title:n,description:i}){return c(t.Group,{position:"center",sx:{borderBottom:"1px solid #eee",paddingBottom:"5px"},children:[!i&&e(t.Text,{weight:"bold",sx:{marginLeft:"5px",display:"inline"},children:n}),i&&e("div",{children:c(t.Tooltip,{label:i,withArrow:!0,children:[e(y.InfoCircle,{size:12,style:{verticalAlign:"baseline",cursor:"pointer"}}),e(t.Text,{weight:"bold",sx:{marginLeft:"5px",display:"inline"},children:n})]})})]})}function bt({}){const{title:n,description:i,loading:r,refreshData:a}=u.default.useContext(L),{inEditMode:o}=u.default.useContext(j);return c(V,{children:[e(gt,{title:n,description:i}),c(t.Group,{position:"right",spacing:0,sx:{position:"absolute",right:"15px",top:"4px",height:"28px"},children:[e(t.ActionIcon,{variant:"hover",color:"blue",loading:r,onClick:a,children:e(y.Refresh,{size:16})}),o&&e(xt,{})]})]})}var kt="";function pe({viz:n,sql:i,title:r,description:a}){const o=u.default.useContext(H),s=u.default.useContext($),[l,d]=u.default.useState(r),[f,g]=u.default.useState(a),[x,h]=u.default.useState(i),[b,C]=u.default.useState(n),{data:_=[],loading:W,refresh:ee}=be.useRequest(Le(x,o,s),{refreshDeps:[o]}),te=ee;return e(L.Provider,{value:{data:_,loading:W,title:l,setTitle:d,description:f,setDescription:g,sql:x,setSQL:h,viz:b,setViz:C,refreshData:te},children:c(t.Container,{className:"panel-root",children:[e(bt,{}),e(ue,{viz:b,data:_,loading:W})]})})}var Gt="";const vt=w.WidthProvider(w.Responsive);function me({panels:n,className:i="layout",cols:r={lg:12,md:10,sm:8,xs:6,xxs:4},rowHeight:a=10,onRemoveItem:o,isDraggable:s,isResizable:l,setLocalCols:d,setBreakpoint:f}){return e(vt,{onBreakpointChange:(x,h)=>{f(x),d(h)},className:i,cols:r,rowHeight:a,isDraggable:s,isResizable:l,children:n.map(b=>{var C=b,{id:x}=C,h=z(C,["id"]);return e("div",{"data-grid":h.layout,children:e(pe,m({destroy:()=>o(x)},h))},x)})})}function he(n,i){return c(t.Text,{sx:{svg:{verticalAlign:"text-bottom"}},children:[n," ",i]})}function yt({mode:n,setMode:i}){return e(t.SegmentedControl,{value:n,onChange:i,data:[{label:he(e(y.PlayerPlay,{size:20}),"Use"),value:k.Use},{label:he(e(y.Paint,{size:20}),"Edit"),value:k.Edit}]})}function St({mode:n,setMode:i,addPanel:r}){const a=n===k.Edit;return c(t.Group,{position:"apart",pt:"sm",pb:"xs",children:[e(t.Group,{position:"left",children:e(yt,{mode:n,setMode:i})}),a&&c(t.Group,{position:"right",children:[e(t.Button,{variant:"default",size:"sm",onClick:r,leftIcon:e(y.PlaylistAdd,{size:20}),children:"Add a Panel"}),e(t.Button,{variant:"default",size:"sm",disabled:!0,leftIcon:e(y.DeviceFloppy,{size:20}),children:"Save Dashboard"}),e(t.Button,{color:"red",size:"sm",disabled:!0,leftIcon:e(y.Recycle,{size:20}),children:"Revert Changes"})]}),!a&&e(t.Button,{variant:"default",size:"sm",disabled:!0,leftIcon:e(y.Share,{size:20}),children:"Share"})]})}function Ct({dashboard:n,className:i="dashboard"}){const[r,a]=u.default.useState(!1),[o,s]=u.default.useState(0),[l,d]=u.default.useState(),[f,g]=u.default.useState(),[x,h]=u.default.useState(n.panels),[b,C]=u.default.useState(n.definition.sqlSnippets),[_,W]=u.default.useState(k.Edit),ee=()=>{console.log("adding","n"+o),s(re=>re+1);const J="n"+o,ie={id:J,layout:{x:x.length*2%(f||12),y:1/0,w:4,h:4},title:`New Panel - ${J}`,description:"description goes here",sql:"",viz:{type:"table",conf:{}}};h(re=>[...re,ie])},te=J=>{h(ie=>T.default.reject(ie,{id:J}))},ne=_===k.Edit;return e("div",{className:i,children:e($.Provider,{value:{sqlSnippets:b,setSQLSnippets:C},children:c(j.Provider,{value:{layoutFrozen:r,freezeLayout:a,mode:_,inEditMode:ne},children:[e(St,{mode:_,setMode:W,addPanel:ee}),e(me,{panels:x,isDraggable:ne&&!r,isResizable:ne&&!r,onRemoveItem:te,setLocalCols:g,setBreakpoint:d})]})})})}p.ContextInfoContext=H,p.Dashboard=Ct,p.DashboardLayout=me,p.DashboardMode=k,p.DefinitionContext=$,p.LayoutStateContext=j,p.Panel=pe,p.PanelContext=L,p.initialContextInfoContext=Ie,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ `}),e(t.Text,{weight:700,children:"SQL Snippets"}),e(it,{sqlSnippets:n,setSQLSnippets:i})]})}function at(){const{description:n,setDescription:i}=d.default.useContext(D),[r,a]=P.useInputState(n),o=n!==r,s=d.default.useCallback(()=>{!o||i(r)},[o,r]);return e(t.Textarea,{label:"Panel Description",value:r,onChange:a,minRows:2,rightSection:e(t.ActionIcon,{disabled:!o,onClick:s,sx:{alignSelf:"flex-start",marginTop:"4px"},children:e(y.DeviceFloppy,{size:20})})})}function ot(){const{title:n,setTitle:i}=d.default.useContext(D),[r,a]=P.useInputState(n),o=n!==r,s=d.default.useCallback(()=>{!o||i(r)},[o,r]);return e(t.TextInput,{label:"Panel Title",value:r,onChange:a,rightSection:e(t.ActionIcon,{disabled:!o,onClick:s,children:e(y.DeviceFloppy,{size:20})})})}function lt({conf:n,setConf:i}){const r=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"}},n),{control:a,handleSubmit:o,formState:s}=B.useForm({defaultValues:r});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:o(i),children:[e(t.Text,{children:"X Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(B.Controller,{name:"x_axis_data_key",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Data Key"},l))}),e(B.Controller,{name:"xAxis3D.name",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Name"},l))})]}),e(t.Text,{mt:"lg",children:"Y Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(B.Controller,{name:"y_axis_data_key",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Data Key"},l))}),e(B.Controller,{name:"yAxis3D.name",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Name"},l))})]}),e(t.Text,{mt:"lg",children:"Z Axis"}),c(t.Group,{position:"apart",grow:!0,p:"md",sx:{position:"relative",border:"1px solid #eee"},children:[e(B.Controller,{name:"z_axis_data_key",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Data Key"},l))}),e(B.Controller,{name:"zAxis3D.name",control:a,render:({field:l})=>e(t.TextInput,m({sx:{flexGrow:1},size:"md",label:"Name"},l))})]}),e(t.Group,{position:"center",mt:"xl",grow:!0,sx:{width:"60%"},mx:"auto",children:c(t.Button,{color:"blue",type:"submit",children:[e(y.DeviceFloppy,{size:20}),e(t.Text,{ml:"md",children:"Save"})]})})]})})}function ce({value:n,onChange:i}){const r=t.useMantineTheme(),a=d.default.useMemo(()=>Object.entries(r.colors).map(([s,l])=>({label:s,value:l[6]})),[r]),o=d.default.useMemo(()=>a.some(s=>s.value===n),[n,a]);return c(t.Group,{position:"apart",spacing:"xs",children:[e(t.TextInput,{placeholder:"Set any color",value:o?"":n,onChange:s=>i(s.currentTarget.value),rightSection:e(t.ColorSwatch,{color:o?"transparent":n,radius:4}),variant:o?"filled":"default",sx:{maxWidth:"100%",flexGrow:1}}),e(t.Text,{sx:{flexGrow:0},children:"or"}),e(t.Select,{data:a,value:n,onChange:i,variant:o?"default":"filled",placeholder:"Pick a theme color",icon:e(t.ColorSwatch,{color:o?n:"transparent",radius:4}),sx:{maxWidth:"100%",flexGrow:1}})]})}function st({conf:n,setConf:i}){const u=n,{series:r}=u,a=I(u,["series"]),o=d.default.useMemo(()=>m({series:L.formList(r!=null?r:[])},a),[r,a]),s=L.useForm({initialValues:o}),l=()=>s.addListItem("series",{type:"bar",name:P.randomId(),showSymbol:!1,y_axis_data_key:"value",stack:"",color:"#000"});return d.default.useMemo(()=>!T.default.isEqual(s.values,o),[s.values,o]),e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:s.onSubmit(i),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Chart Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),e(t.TextInput,m({size:"md",mb:"lg",label:"X Axis Data Key"},s.getInputProps("x_axis_data_key"))),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{mt:"xl",mb:0,children:"Series"}),s.values.series.map((f,h)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,m({label:"Label",required:!0,sx:{flex:1}},s.getListInputProps("series",h,"name"))),c(t.Group,{direction:"row",grow:!0,noWrap:!0,children:[e(t.TextInput,m({label:"Y Axis Data key",required:!0},s.getListInputProps("series",h,"y_axis_data_key"))),e(t.TextInput,m({label:"Stack ID",placeholder:"Stack bars by this ID"},s.getListInputProps("series",h,"stack")))]}),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Color"}),e(ce,m({},s.getListInputProps("series",h,"color")))]}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>s.removeListItem("series",h),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},h)),e(t.Group,{position:"center",mt:"xs",children:e(t.Button,{onClick:l,children:"Add a Series"})})]})]})})}function ut({conf:{label_field:n,value_field:i},setConf:r}){const a=L.useForm({initialValues:{label_field:n,value_field:i}});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:a.onSubmit(r),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Sunburst Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),c(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.TextInput,m({label:"Label Field",required:!0,sx:{flex:1}},a.getInputProps("label_field"))),e(t.TextInput,m({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},a.getInputProps("value_field")))]})]})})}const dt=Object.values(E).map(n=>({label:n,value:n}));function ct({label:n,value:i,onChange:r,sx:a}){return e(t.Select,{label:n,data:dt,value:i,onChange:r,sx:a})}function pt(a){var o=a,{conf:s}=o,l=s,{columns:n}=l,i=I(l,["columns"]),{setConf:r}=o;const u=L.useForm({initialValues:m({id_field:"id",use_raw_columns:!0,columns:L.formList(n!=null?n:[]),size:"sm",horizontalSpacing:"sm",verticalSpacing:"sm",striped:!1,highlightOnHover:!1},i)}),f=()=>u.addListItem("columns",{label:P.randomId(),value_field:"value",value_type:E.string});return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:u.onSubmit(r),children:[c(t.Group,{position:"apart",mb:"lg",sx:{position:"relative"},children:[e(t.Text,{children:"Table Config"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),c(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,p:"md",mb:"sm",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.TextInput,m({size:"md",mb:"lg",label:"ID Field"},u.getInputProps("id_field"))),c(t.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:[e(t.TextInput,m({label:"Horizontal Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},u.getInputProps("horizontalSpacing"))),e(t.TextInput,m({label:"Vertical Spacing",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},u.getInputProps("verticalSpacing")))]}),e(t.Group,{position:"apart",mb:"lg",grow:!0,sx:{"> *":{flexGrow:1}},children:e(t.TextInput,m({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",required:!0,sx:{flex:1}},u.getInputProps("size")))}),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Other"}),c(t.Group,{position:"apart",grow:!0,children:[e(t.Switch,m({label:"Striped"},u.getInputProps("striped",{type:"checkbox"}))),e(t.Switch,m({label:"Highlight on hover"},u.getInputProps("highlightOnHover",{type:"checkbox"})))]})]})]}),c(t.Group,{direction:"column",mt:"xs",spacing:"xs",grow:!0,p:"md",mb:"xl",sx:{border:"1px solid #eee",borderRadius:"5px"},children:[e(t.Switch,m({label:"Use Original Data Columns"},u.getInputProps("use_raw_columns",{type:"checkbox"}))),!u.values.use_raw_columns&&c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{mt:"xl",mb:0,children:"Custom Columns"}),u.values.columns.map((h,b)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[c(t.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:[e(t.TextInput,m({label:"Label",required:!0,sx:{flex:1}},u.getListInputProps("columns",b,"label"))),e(t.TextInput,m({label:"Value Field",placeholder:"get column value by this field",required:!0,sx:{flex:1}},u.getListInputProps("columns",b,"value_field"))),e(ct,m({label:"Value Type",sx:{flex:1}},u.getListInputProps("columns",b,"value_type")))]}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>u.removeListItem("columns",b),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},b)),e(t.Group,{position:"center",mt:"xs",children:e(t.Button,{onClick:f,children:"Add a Column"})})]})]}),e(t.Text,{weight:500,mb:"md",children:"Current Configuration:"}),e(M.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(u.values,null,2)})]})})}const U=[{label:"initial",value:0},{label:"500",value:25},{label:"700",value:50},{label:"semibold",value:75},{label:"bold",value:100}];function mt({label:n,value:i,onChange:r}){var s,l;const[a,o]=d.default.useState((l=(s=U.find(u=>u.label===i))==null?void 0:s.value)!=null?l:U[0].value);return d.default.useEffect(()=>{const u=U.find(f=>f.value===a);u&&r(u.label)},[a]),c(t.Group,{direction:"column",grow:!0,spacing:"xs",mb:"lg",children:[e(t.Text,{children:n}),e(t.Slider,{label:null,marks:U,value:a,onChange:o,step:25,placeholder:"Pick a font size"})]})}const pe=[{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 ht({conf:n,setConf:i}){var o;const r=L.useForm({initialValues:{paragraphs:L.formList((o=n.paragraphs)!=null?o:pe)}}),a=()=>r.addListItem("paragraphs",k(m({},pe[0]),{template:P.randomId()}));return e(t.Group,{direction:"column",mt:"md",spacing:"xs",grow:!0,children:c("form",{onSubmit:r.onSubmit(i),children:[r.values.paragraphs.length===0&&e(t.Text,{color:"dimmed",align:"center",children:"Empty"}),c(t.Group,{position:"apart",mb:"xs",sx:{" + .mantine-Group-root":{marginTop:0}},children:[e(t.Text,{children:"Paragraphs"}),e(t.ActionIcon,{type:"submit",mr:5,variant:"filled",color:"blue",children:e(y.DeviceFloppy,{size:20})})]}),r.values.paragraphs.map((s,l)=>c(t.Group,{direction:"column",grow:!0,my:0,p:"md",pr:40,sx:{border:"1px solid #eee",position:"relative"},children:[e(t.TextInput,m({placeholder:"Time: ${new Date().toISOString()}",label:"Content Template",required:!0,sx:{flex:1}},r.getListInputProps("paragraphs",l,"template"))),c(t.Group,{direction:"column",grow:!0,children:[e(t.Text,{children:"Color"}),e(ce,m({},r.getListInputProps("paragraphs",l,"color")))]}),e(t.Group,{direction:"column",grow:!0,children:e(t.TextInput,m({label:"Font Size",placeholder:"10px, 1em, 1rem, 100%...",sx:{flex:1}},r.getListInputProps("paragraphs",l,"size")))}),e(t.Group,{position:"apart",grow:!0,sx:{"> *":{flexGrow:1,maxWidth:"100%"}},children:e(mt,m({label:"Font Weight"},r.getListInputProps("paragraphs",l,"weight")))}),e(t.ActionIcon,{color:"red",variant:"hover",onClick:()=>r.removeListItem("paragraphs",l),sx:{position:"absolute",top:15,right:5},children:e(y.Trash,{size:16})})]},l)),e(t.Group,{position:"center",mt:"md",children:e(t.Button,{onClick:a,children:"Add a Paragraph"})}),e(t.Text,{size:"sm",weight:500,mt:"md",children:"Current Configuration:"}),e(M.Prism,{language:"json",colorScheme:"dark",noCopy:!0,children:JSON.stringify(r.values,null,2)})]})})}const te=[{value:"text",label:"Text",Panel:ht},{value:"table",label:"Table",Panel:pt},{value:"sunburst",label:"Sunburst",Panel:ut},{value:"bar-3d",label:"Bar Chart (3D)",Panel:lt},{value:"line-bar",label:"Line-Bar Chart",Panel:st}];function ft(){const{viz:n,setViz:i}=d.default.useContext(D),[r,a]=P.useInputState(n.type),o=n.type!==r,s=d.default.useCallback(()=>{!o||i(h=>k(m({},h),{type:r}))},[o,r]),l=h=>{i(b=>k(m({},b),{conf:h}))},u=h=>{try{l(JSON.parse(h))}catch(b){console.error(b)}},f=d.default.useMemo(()=>{var h;return(h=te.find(b=>b.value===r))==null?void 0:h.Panel},[r,te]);return c(se,{children:[e(t.Select,{label:"Visualization",value:r,onChange:a,data:te,rightSection:e(t.ActionIcon,{disabled:!o,onClick:s,children:e(y.DeviceFloppy,{size:20})})}),f&&e(f,{conf:n.conf,setConf:l}),!f&&e(t.JsonInput,{minRows:20,label:"Config",value:JSON.stringify(n.conf,null,2),onChange:u})]})}function xt({}){return c(t.Group,{grow:!0,direction:"column",children:[e(ot,{}),e(at,{}),e(t.Divider,{}),e(ft,{})]})}function gt({opened:n,close:i}){const{freezeLayout:r}=d.default.useContext(R),{data:a,loading:o,viz:s,title:l}=d.default.useContext(D);return d.default.useEffect(()=>{r(n)},[n]),e(t.Modal,{size:"96vw",overflow:"inside",opened:n,onClose:i,title:l,trapFocus:!0,onDragStart:u=>{u.stopPropagation()},children:e(t.AppShell,{sx:{height:"90vh",maxHeight:"calc(100vh - 185px)",".mantine-AppShell-body":{height:"100%"},main:{height:"100%",width:"100%"}},padding:"md",navbar:e(t.Navbar,{width:{base:"40%"},height:"100%",p:"xs",children:c(t.Tabs,{initialTab:1,children:[e(t.Tabs.Tab,{label:"Context",children:e(He,{})}),e(t.Tabs.Tab,{label:"SQL Snippets",children:e(rt,{})}),e(t.Tabs.Tab,{label:"SQL",children:e(et,{})}),c(t.Tabs.Tab,{label:"Data",children:[e(t.LoadingOverlay,{visible:o}),e(tt,{})]}),e(t.Tabs.Tab,{label:"Viz Config",children:e(xt,{})})]})}),children:e(ue,{children:e(de,{viz:s,data:a,loading:o})})})})}function bt({}){const[n,i]=d.default.useState(!1),r=()=>i(!0),a=()=>i(!1),{title:o,description:s,loading:l,refreshData:u}=d.default.useContext(D),{inEditMode:f}=d.default.useContext(R);return c(t.Group,{position:"apart",noWrap:!0,sx:{borderBottom:"1px solid #eee",paddingBottom:"5px"},children:[e(t.Group,{children:s&&e(t.Tooltip,{label:s,withArrow:!0,children:e(y.InfoCircle,{size:12,style:{verticalAlign:"baseline",cursor:"pointer"}})})}),e(t.Group,{grow:!0,position:"center",children:e(t.Text,{lineClamp:1,weight:"bold",children:o})}),e(t.Group,{position:"right",spacing:0,sx:{height:"28px"},children:c(t.Menu,{children:[e(t.Menu.Item,{onClick:u,icon:e(y.Refresh,{size:14}),children:"Refresh"}),f&&e(t.Menu.Item,{onClick:r,icon:e(y.Settings,{size:14}),children:"Settings"}),e(t.Divider,{}),e(t.Menu.Item,{color:"red",disabled:!0,icon:e(y.Trash,{size:14}),children:"Delete"})]})}),f&&e(gt,{opened:n,close:a})]})}var Dt="";function me({viz:n,sql:i,title:r,description:a,update:o,layout:s,id:l}){const u=d.default.useContext(ee),f=d.default.useContext(J),[h,b]=d.default.useState(r),[x,g]=d.default.useState(a),[v,z]=d.default.useState(i),[_,O]=d.default.useState(n);d.default.useEffect(()=>{o({id:l,layout:s,title:h,description:x,sql:v,viz:_})},[h,x,v,_,l,s]);const{data:N=[],loading:F,refresh:V}=ve.useRequest(Le(v,u,f,h),{refreshDeps:[u,f]}),ne=V;return e(D.Provider,{value:{data:N,loading:F,title:h,setTitle:b,description:x,setDescription:g,sql:v,setSQL:z,viz:_,setViz:O,refreshData:ne},children:c(t.Container,{className:"panel-root",children:[e(bt,{}),e(ue,{children:e(de,{viz:_,data:N,loading:F})})]})})}var Gt="";const vt=w.WidthProvider(w.Responsive);function he({panels:n,setPanels:i,className:r="layout",cols:a={lg:12,md:10,sm:8,xs:6,xxs:4},rowHeight:o=10,onRemoveItem:s,isDraggable:l,isResizable:u,setLocalCols:f,setBreakpoint:h}){const b=(g,v)=>{h(g),f(v)},x=d.default.useCallback(g=>{const v=new Map;g.forEach(N=>{var F=N,{i:_}=F,O=I(F,["i"]);v.set(_,O)});const z=n.map(_=>k(m({},_),{layout:v.get(_.id)}));i.setState(z)},[n,i]);return e(vt,{onBreakpointChange:b,onLayoutChange:x,className:r,cols:a,rowHeight:o,isDraggable:l,isResizable:u,children:n.map((_,z)=>{var O=_,{id:g}=O,v=I(O,["id"]);return e("div",{"data-grid":v.layout,children:e(me,k(m({id:g},v),{destroy:()=>s(g),update:N=>{i.setItem(z,N)}}))},g)})})}function fe(n,i){return c(t.Text,{sx:{svg:{verticalAlign:"text-bottom"}},children:[n," ",i]})}function yt({mode:n,setMode:i}){return e(t.SegmentedControl,{value:n,onChange:i,data:[{label:fe(e(y.PlayerPlay,{size:20}),"Use"),value:q.Use},{label:fe(e(y.Paint,{size:20}),"Edit"),value:q.Edit}]})}function St({mode:n,setMode:i,hasChanges:r,addPanel:a,saveChanges:o}){const s=n===q.Edit;return c(t.Group,{position:"apart",pt:"sm",pb:"xs",children:[e(t.Group,{position:"left",children:e(yt,{mode:n,setMode:i})}),s&&c(t.Group,{position:"right",children:[e(t.Button,{variant:"default",size:"sm",onClick:a,leftIcon:e(y.PlaylistAdd,{size:20}),children:"Add a Panel"}),e(t.Button,{variant:"default",size:"sm",onClick:o,disabled:!r,leftIcon:e(y.DeviceFloppy,{size:20}),children:"Save Changes"}),e(t.Button,{color:"red",size:"sm",disabled:!r,leftIcon:e(y.Recycle,{size:20}),children:"Revert Changes"})]}),!s&&e(t.Button,{variant:"default",size:"sm",disabled:!0,leftIcon:e(y.Share,{size:20}),children:"Share"})]})}function Ct({dashboard:n,update:i,className:r="dashboard"}){const[a,o]=d.default.useState(!1),[s,l]=d.default.useState(),[u,f]=d.default.useState(),[h,b]=P.useListState(n.panels),[x,g]=d.default.useState(n.definition.sqlSnippets),[v,z]=d.default.useState(q.Edit),_=d.default.useMemo(()=>{const G=ie=>JSON.parse(JSON.stringify(ie));return T.default.isEqual(G(h),G(n.panels))?!T.default.isEqual(x,n.definition.sqlSnippets):!0},[n,h,x]),O=async()=>{const G=T.default.merge({},n,{panels:h},{definition:{sqlSnippets:x}});await i(G)},N=()=>{const G=P.randomId(),Y={id:G,layout:{x:0,y:1/0,w:3,h:4},title:`New Panel - ${G}`,description:"description goes here",sql:"",viz:{type:"table",conf:{}}};b.append(Y)},F=G=>{const Y=h.findIndex(ie=>ie.id===G);b.remove(Y)},V=v===q.Edit,ne=d.default.useMemo(()=>({sqlSnippets:x,setSQLSnippets:g}),[x,g]);return e("div",{className:r,children:e(J.Provider,{value:ne,children:c(R.Provider,{value:{layoutFrozen:a,freezeLayout:o,mode:v,inEditMode:V},children:[e(St,{mode:v,setMode:z,hasChanges:_,addPanel:N,saveChanges:O}),e(he,{panels:h,setPanels:b,isDraggable:V&&!a,isResizable:V&&!a,onRemoveItem:F,setLocalCols:f,setBreakpoint:l})]})})})}p.ContextInfoContext=ee,p.Dashboard=Ct,p.DashboardLayout=he,p.DashboardMode=q,p.DefinitionContext=J,p.LayoutStateContext=R,p.Panel=me,p.PanelContext=D,p.initialContextInfoContext=De,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/layout/index.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import { IDashboardPanel } from "../types/dashboard";
+import { UseListStateHandlers } from "@mantine/hooks";
 interface IDashboardLayout {
     panels: IDashboardPanel[];
+    setPanels: UseListStateHandlers<IDashboardPanel>;
     className?: string;
     cols?: {
         lg: number;
@@ -17,5 +19,5 @@ interface IDashboardLayout {
     setLocalCols: React.Dispatch<React.SetStateAction<any>>;
     setBreakpoint: React.Dispatch<React.SetStateAction<any>>;
 }
-export declare function DashboardLayout({ panels, className, cols, rowHeight, onRemoveItem, isDraggable, isResizable, setLocalCols, setBreakpoint, }: IDashboardLayout): JSX.Element;
+export declare function DashboardLayout({ panels, setPanels, className, cols, rowHeight, onRemoveItem, isDraggable, isResizable, setLocalCols, setBreakpoint, }: IDashboardLayout): JSX.Element;
 export {};

package/dist/main/actions.d.ts

@@ -3,7 +3,9 @@ import { DashboardMode } from "../types";
 interface IDashboardActions {
     mode: DashboardMode;
     setMode: React.Dispatch<React.SetStateAction<DashboardMode>>;
+    hasChanges: boolean;
     addPanel: () => void;
+    saveChanges: () => void;
 }
-export declare function DashboardActions({ mode, setMode, addPanel, }: IDashboardActions): JSX.Element;
+export declare function DashboardActions({ mode, setMode, hasChanges, addPanel, saveChanges, }: IDashboardActions): JSX.Element;
 export {};

package/dist/main/index.d.ts

@@ -3,6 +3,7 @@ import { IDashboard } from "../types/dashboard";
 interface IDashboardProps {
     dashboard: IDashboard;
     className?: string;
+    update: (dashboard: IDashboard) => Promise<void>;
 }
-export declare function Dashboard({ dashboard, className, }: IDashboardProps): JSX.Element;
+export declare function Dashboard({ dashboard, update, className, }: IDashboardProps): JSX.Element;
 export {};

package/dist/panel/error-boundary.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare class ErrorBoundary extends React.Component {
+    constructor(props: any);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    render(): any;
+}

package/dist/panel/index.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="react" />
-import { IVizConfig } from '../types/dashboard';
-interface IPanel {
-    layout: any;
+import { IDashboardPanel } from '../types/dashboard';
+interface IPanel extends IDashboardPanel {
     destroy: () => void;
-    sql: string;
-    viz: IVizConfig;
-    title: string;
-    description: string;
+    update: (panel: IDashboardPanel) => void;
 }
-export declare function Panel({ viz: initialViz, sql: initialSQL, title: initialTitle, description: initialDesc }: IPanel): JSX.Element;
+export declare function Panel({ viz: initialViz, sql: initialSQL, title: initialTitle, description: initialDesc, update, layout, id, }: IPanel): JSX.Element;
 export {};

package/dist/panel/settings/common/mantine-font-weight.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface IMantineFontWeightSlider {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+export declare function MantineFontWeightSlider({ label, value, onChange }: IMantineFontWeightSlider): JSX.Element;
+export {};

package/dist/panel/settings/index.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-interface IPanelSettings {
+interface IPanelSettingsModal {
+    opened: boolean;
+    close: () => void;
 }
-export declare function PanelSettings({}: IPanelSettings): JSX.Element;
+export declare function PanelSettingsModal({ opened, close }: IPanelSettingsModal): JSX.Element;
 export {};

package/dist/panel/viz/sunburst/panel.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { IVizPanelProps } from "../../../types/viz-panel";
-export declare function SunburstPanel({ conf: { columns, ...restConf }, setConf }: IVizPanelProps): JSX.Element;
+export declare function SunburstPanel({ conf: { label_field, value_field }, setConf }: IVizPanelProps): JSX.Element;

package/dist/types/dashboard.d.ts

@@ -11,6 +11,8 @@ export interface IDashboardPanel {
         y: number;
         w: number;
         h: number;
+        moved?: boolean;
+        static?: boolean;
     };
     sql: string;
     viz: IVizConfig;

package/package.json

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

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-interface IMantineSizeSlider {
-    label: string;
-    value: string;
-    onChange: (value: string) => void;
-}
-export declare function MantineSizeSlider({ label, value, onChange }: IMantineSizeSlider): JSX.Element;
-export {};

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-interface IMantineFontSizeSlider {
-    label: string;
-    value: string;
-    onChange: (value: string) => void;
-}
-export declare function MantineFontSizeSlider({ label, value, onChange }: IMantineFontSizeSlider): JSX.Element;
-export {};