@devtable/dashboard 0.2.0 → 0.4.0

package/dist/dashboard.es.js

@@ -32,10 +32,10 @@ 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 { 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";
@@ -94,15 +94,20 @@ 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, title) => async () => {
   if (!sql) {
     return [];
   }
+  const needParams = sql.includes("$");
   const params = getSQLParams(context, definitions);
+  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();
@@ -218,7 +223,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(() => {
@@ -240,7 +245,7 @@ function Sunbrust({
       }
     }
   }), []);
-  const option = _.defaultsDeep(defaultOption$1, labelOption, restConf, {
+  const option = _.merge(defaultOption$1, labelOption, restConf, {
     series: {
       data: chartData
     }
@@ -265,7 +270,14 @@ const defaultOption = {
   xAxis: {
     type: "category"
   },
-  yAxis: {}
+  yAxis: {},
+  grid: {
+    top: 30,
+    left: 10,
+    right: 10,
+    bottom: 10,
+    containLabel: true
+  }
 };
 function VizLineBarChart({
   conf,
@@ -461,11 +473,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}`);
     })
@@ -705,7 +722,6 @@ function SQLSnippetsForm({
   sqlSnippets,
   setSQLSnippets
 }) {
-  const submitButton = React.useRef(null);
   const initialValues = React.useMemo(() => ({
     snippets: formList(sqlSnippets != null ? sqlSnippets : [])
   }), [sqlSnippets]);
@@ -717,12 +733,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
   }) => {
@@ -731,19 +741,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,
@@ -773,19 +777,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"
+        })]
       })]
     })
   });
@@ -806,6 +815,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.
@@ -814,7 +824,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"
@@ -1101,7 +1111,6 @@ function VizLineBarChartPanel({
   conf,
   setConf
 }) {
-  const submitButton = React.useRef(null);
   const _a = conf, {
     series
   } = _a, restConf = __objRest(_a, [
@@ -1121,13 +1130,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",
@@ -1143,13 +1146,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",
@@ -1220,20 +1224,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, {
@@ -1289,52 +1290,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
@@ -1353,16 +1308,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",
@@ -1428,10 +1383,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",
@@ -1442,8 +1407,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",
@@ -1575,7 +1545,7 @@ const marks = [{
   label: "bold",
   value: 100
 }];
-function MantineFontSizeSlider({
+function MantineFontWeightSlider({
   label,
   value,
   onChange
@@ -1684,7 +1654,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: {
@@ -1693,11 +1673,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",
@@ -1815,7 +1793,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);
@@ -1825,153 +1806,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, {})
-            })]
-          })
-        }),
-        children: /* @__PURE__ */ jsx(ErrorBoundary, {
-          children: /* @__PURE__ */ jsx(Viz, {
-            viz,
-            data,
-            loading
-          })
+          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
     })]
   });
 }
@@ -1992,7 +1961,7 @@ function Panel({
   const [sql, setSQL] = React.useState(initialSQL);
   const [viz, setViz] = React.useState(initialViz);
   React.useEffect(() => {
-    update({
+    update == null ? void 0 : update({
       id,
       layout,
       title,
@@ -2036,7 +2005,7 @@ function Panel({
   });
 }
 var index = "";
-const ResponsiveReactGridLayout = WidthProvider(Responsive);
+const ResponsiveReactGridLayout$1 = WidthProvider(Responsive);
 function DashboardLayout({
   panels,
   setPanels,
@@ -2074,7 +2043,7 @@ function DashboardLayout({
     }));
     setPanels.setState(newPanels);
   }, [panels, setPanels]);
-  return /* @__PURE__ */ jsx(ResponsiveReactGridLayout, {
+  return /* @__PURE__ */ jsx(ResponsiveReactGridLayout$1, {
     onBreakpointChange,
     onLayoutChange,
     className,
@@ -2195,7 +2164,6 @@ function Dashboard({
   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] = useListState(dashboard.panels);
@@ -2220,15 +2188,13 @@ function Dashboard({
     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}`,
@@ -2280,4 +2246,67 @@ function Dashboard({
     })
   });
 }
-export { ContextInfoContext, Dashboard, DashboardLayout, DashboardMode, DefinitionContext, LayoutStateContext, Panel, PanelContext, initialContextInfoContext };
+const ResponsiveReactGridLayout = WidthProvider(Responsive);
+function ReadOnlyDashboardLayout({
+  panels,
+  className = "layout",
+  cols = {
+    lg: 12,
+    md: 10,
+    sm: 8,
+    xs: 6,
+    xxs: 4
+  },
+  rowHeight = 10
+}) {
+  return /* @__PURE__ */ jsx(ResponsiveReactGridLayout, {
+    className,
+    cols,
+    rowHeight,
+    isDraggable: false,
+    isResizable: false,
+    children: panels.map((_a) => {
+      var _b = _a, {
+        id
+      } = _b, rest = __objRest(_b, [
+        "id"
+      ]);
+      return /* @__PURE__ */ jsx("div", {
+        "data-grid": rest.layout,
+        children: /* @__PURE__ */ jsx(Panel, __spreadValues({
+          id
+        }, rest))
+      }, id);
+    })
+  });
+}
+function ReadOnlyDashboard({
+  dashboard,
+  className = "dashboard"
+}) {
+  const [panels, setPanels] = useListState(dashboard.panels);
+  const [sqlSnippets, setSQLSnippets] = React.useState(dashboard.definition.sqlSnippets);
+  const definitions = React.useMemo(() => ({
+    sqlSnippets,
+    setSQLSnippets
+  }), [sqlSnippets, setSQLSnippets]);
+  return /* @__PURE__ */ jsx("div", {
+    className,
+    children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+      value: definitions,
+      children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+        value: {
+          layoutFrozen: true,
+          freezeLayout: () => {
+          },
+          mode: DashboardMode.Use,
+          inEditMode: false
+        },
+        children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
+          panels
+        })
+      })
+    })
+  });
+}
+export { ContextInfoContext, Dashboard, DashboardLayout, DashboardMode, DefinitionContext, LayoutStateContext, Panel, PanelContext, ReadOnlyDashboard, initialContextInfoContext };

package/dist/dashboard.umd.js

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

package/dist/layout/read-only.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { IDashboardPanel } from "../types/dashboard";
+interface IReadOnlyDashboardLayout {
+    panels: IDashboardPanel[];
+    className?: string;
+    cols?: {
+        lg: number;
+        md: number;
+        sm: number;
+        xs: number;
+        xxs: number;
+    };
+    rowHeight?: number;
+}
+export declare function ReadOnlyDashboardLayout({ panels, className, cols, rowHeight, }: IReadOnlyDashboardLayout): JSX.Element;
+export {};

package/dist/main/index.d.ts

@@ -1,9 +1,2 @@
-/// <reference types="react" />
-import { IDashboard } from "../types/dashboard";
-interface IDashboardProps {
-    dashboard: IDashboard;
-    className?: string;
-    update: (dashboard: IDashboard) => Promise<void>;
-}
-export declare function Dashboard({ dashboard, update, className, }: IDashboardProps): JSX.Element;
-export {};
+export * from './main';
+export * from './read-only';

package/dist/main/main.d.ts

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

package/dist/main/read-only.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IDashboard } from "../types/dashboard";
+interface IReadOnlyDashboard {
+    dashboard: IDashboard;
+    className?: string;
+}
+export declare function ReadOnlyDashboard({ dashboard, className, }: IReadOnlyDashboard): JSX.Element;
+export {};

package/dist/panel/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { IDashboardPanel } from '../types/dashboard';
 interface IPanel extends IDashboardPanel {
-    destroy: () => void;
-    update: (panel: IDashboardPanel) => void;
+    destroy?: () => void;
+    update?: (panel: IDashboardPanel) => void;
 }
 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.2.0",
+  "version": "0.4.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 {};