@devtable/dashboard 1.16.0 → 1.17.0

package/dist/dashboard.es.js

@@ -39,7 +39,7 @@ import RGL, { WidthProvider } from "react-grid-layout";
 import { Popover, Tooltip, Group, Text, ActionIcon, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, SegmentedControl, NumberInput, Switch, Slider, ColorInput, Accordion, JsonInput, Modal, AppShell, Tabs, Menu, Divider, Container, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
-import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, ClipboardText, Database, Recycle, Share } from "tabler-icons-react";
+import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, Database, Recycle, Share } from "tabler-icons-react";
 import RichTextEditor, { RichTextEditor as RichTextEditor$1 } from "@mantine/rte";
 import { useInputState, useElementSize, randomId } from "@mantine/hooks";
 import ReactEChartsCore from "echarts-for-react/lib/core";
@@ -68,6 +68,44 @@ const initialContext$3 = {
   inUseMode: true
 };
 const LayoutStateContext = React.createContext(initialContext$3);
+function explainSQLSnippet(snippet, context) {
+  const names = Object.keys(context);
+  const vals = Object.values(context);
+  try {
+    return new Function(...names, `return \`${snippet}\`;`)(...vals);
+  } catch (error) {
+    console.error(error);
+    return error.message;
+  }
+}
+function formatSQL(sql, params) {
+  const names = Object.keys(params);
+  const vals = Object.values(params);
+  try {
+    return new Function(...names, `return \`${sql}\`;`)(...vals);
+  } catch (error) {
+    if (names.length === 0 && sql.includes("$")) {
+      throw new Error("[formatSQL] insufficient params");
+    }
+    throw error;
+  }
+}
+function getSQLParams(context, definitions) {
+  const sqlSnippetRecord = definitions.sqlSnippets.reduce((ret, curr) => {
+    ret[curr.key] = formatSQL(curr.value, context);
+    return ret;
+  }, {});
+  return _.merge({}, sqlSnippetRecord, context);
+}
+function explainSQL(sql, context, definitions) {
+  try {
+    const params = getSQLParams(context, definitions);
+    return formatSQL(sql, params);
+  } catch (error) {
+    console.error(error);
+    return error.message;
+  }
+}
 const APIClient = {
   baseURL: "http://localhost:31200",
   getRequest(method) {
@@ -94,25 +132,6 @@ const APIClient = {
     };
   }
 };
-function formatSQL(sql, params) {
-  const names = Object.keys(params);
-  const vals = Object.values(params);
-  try {
-    return new Function(...names, `return \`${sql}\`;`)(...vals);
-  } catch (error) {
-    if (names.length === 0 && sql.includes("$")) {
-      throw new Error("[formatSQL] insufficient params");
-    }
-    throw error;
-  }
-}
-function getSQLParams(context, definitions) {
-  const sqlSnippetRecord = definitions.sqlSnippets.reduce((ret, curr) => {
-    ret[curr.key] = formatSQL(curr.value, context);
-    return ret;
-  }, {});
-  return _.merge({}, sqlSnippetRecord, context);
-}
 const queryBySQL = ({ context, definitions, title, dataSource }) => async () => {
   if (!dataSource || !dataSource.sql) {
     return [];
@@ -1530,6 +1549,18 @@ function getColorByColorConf(conf, dataRow) {
   }
   return "black";
 }
+function getNonStatsDataText(data) {
+  if (data === null) {
+    return "null";
+  }
+  if (data === void 0) {
+    return "undefined";
+  }
+  if (Array.isArray(data)) {
+    return `Array(${data.length})`;
+  }
+  return data.toString();
+}
 function VizStats(_a) {
   var _b = _a, {
     conf: _c
@@ -1556,6 +1587,9 @@ function VizStats(_a) {
       formatter
     } = content;
     const contentData = (_a2 = data == null ? void 0 : data[0]) == null ? void 0 : _a2[data_field];
+    if (!["string", "number"].includes(typeof contentData)) {
+      return getNonStatsDataText(contentData);
+    }
     const contents = [prefix, numbro(contentData).format(formatter), postfix];
     return contents.join(" ");
   }, [content, data]);
@@ -3764,7 +3798,7 @@ function ContextAndSnippets({}) {
     grow: true,
     sx: {
       border: "1px solid #eee",
-      maxWidth: "48%",
+      maxWidth: "40%",
       overflow: "hidden"
     },
     children: [/* @__PURE__ */ jsx(Group, {
@@ -3827,6 +3861,20 @@ function ContextAndSnippets({}) {
     })]
   });
 }
+function PreviewSQL({
+  value
+}) {
+  const context = React.useContext(ContextInfoContext);
+  const definition = React.useContext(DefinitionContext);
+  const explained = React.useMemo(() => {
+    return explainSQL(value, context, definition);
+  }, [value, context, definition]);
+  return /* @__PURE__ */ jsx(Prism, {
+    language: "sql",
+    colorScheme: "light",
+    children: explained
+  });
+}
 function DataSourceForm({
   value,
   onChange
@@ -3926,11 +3974,23 @@ function DataSourceForm({
             },
             disabled: loading
           }, form.getInputProps("key")))]
-        }), /* @__PURE__ */ jsx(Textarea, __spreadValues({
-          autosize: true,
-          minRows: 12,
-          maxRows: 24
-        }, form.getInputProps("sql")))]
+        }), /* @__PURE__ */ jsxs(Tabs, {
+          children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+            label: "SQL",
+            children: /* @__PURE__ */ jsx(Textarea, __spreadProps(__spreadValues({
+              autosize: true,
+              minRows: 12,
+              maxRows: 24
+            }, form.getInputProps("sql")), {
+              className: "code-textarea"
+            }))
+          }), /* @__PURE__ */ jsx(Tabs.Tab, {
+            label: "Preview",
+            children: /* @__PURE__ */ jsx(PreviewSQL, {
+              value: form.values.sql
+            })
+          })]
+        })]
       })]
     })
   });
@@ -3967,16 +4027,9 @@ function DataSourceEditor({
       children: "Invalid Data Source ID"
     });
   }
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "row",
-    position: "apart",
-    grow: true,
-    align: "stretch",
-    noWrap: true,
-    children: [/* @__PURE__ */ jsx(DataSourceForm, {
-      value: dataSource,
-      onChange: update
-    }), /* @__PURE__ */ jsx(ContextAndSnippets, {})]
+  return /* @__PURE__ */ jsx(DataSourceForm, {
+    value: dataSource,
+    onChange: update
   });
 }
 function SelectOrAddDataSource({
@@ -4049,58 +4102,52 @@ function SelectOrAddDataSource({
     })
   });
 }
-function EditDataSourcesModal({
-  opened,
-  close
-}) {
+function EditDataSources({}) {
   const [id, setID] = React.useState("");
-  const {
-    freezeLayout
-  } = React.useContext(LayoutStateContext);
-  React.useEffect(() => {
-    freezeLayout(opened);
-  }, [opened]);
-  return /* @__PURE__ */ jsx(Modal, {
-    size: "96vw",
-    overflow: "inside",
-    opened,
-    onClose: close,
-    title: "Data Sources",
-    trapFocus: true,
-    onDragStart: (e) => {
-      e.stopPropagation();
+  return /* @__PURE__ */ jsxs(AppShell, {
+    sx: {
+      height: "90vh",
+      maxHeight: "calc(100vh - 225px)",
+      ".mantine-AppShell-body": {
+        height: "100%"
+      },
+      main: {
+        height: "100%",
+        width: "100%",
+        padding: 0,
+        margin: 0
+      }
     },
-    children: /* @__PURE__ */ jsxs(AppShell, {
-      sx: {
-        height: "90vh",
-        maxHeight: "calc(100vh - 185px)",
-        ".mantine-AppShell-body": {
-          height: "100%"
+    padding: "md",
+    children: [/* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      position: "apart",
+      grow: true,
+      align: "stretch",
+      noWrap: true,
+      children: [/* @__PURE__ */ jsxs(Group, {
+        direction: "column",
+        grow: true,
+        sx: {
+          flexGrow: 1,
+          maxWidth: "calc(60% - 16px)"
         },
-        main: {
-          height: "100%",
-          width: "100%",
-          padding: 0,
-          margin: 0
-        }
-      },
-      padding: "md",
-      header: /* @__PURE__ */ jsx(SelectOrAddDataSource, {
-        id,
-        setID
-      }),
-      children: [/* @__PURE__ */ jsx(DataSourceEditor, {
-        id,
-        setID
-      }), /* @__PURE__ */ jsx(DataPreview, {
-        id
-      })]
-    })
+        children: [/* @__PURE__ */ jsx(SelectOrAddDataSource, {
+          id,
+          setID
+        }), /* @__PURE__ */ jsx(DataSourceEditor, {
+          id,
+          setID
+        })]
+      }), /* @__PURE__ */ jsx(ContextAndSnippets, {})]
+    }), /* @__PURE__ */ jsx(DataPreview, {
+      id
+    })]
   });
 }
 function ContextInfo({}) {
   const contextInfo = React.useContext(ContextInfoContext);
-  const sampleSQL = `SELECT *
+  const sampleSQL2 = `SELECT *
 FROM commit
 WHERE author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'`;
   return /* @__PURE__ */ jsxs(Group, {
@@ -4108,7 +4155,6 @@ WHERE author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.
     grow: true,
     sx: {
       border: "1px solid #eee",
-      maxWidth: "48%",
       overflow: "hidden"
     },
     children: [/* @__PURE__ */ jsx(Group, {
@@ -4141,7 +4187,7 @@ WHERE author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.
         children: `-- You may refer context data *by name*
 -- in SQL or VizConfig.
 
-${sampleSQL}`
+${sampleSQL2}`
       }), /* @__PURE__ */ jsx(Text, {
         weight: 500,
         sx: {
@@ -4160,14 +4206,32 @@ ${sampleSQL}`
     })]
   });
 }
+function PreviewSnippet({
+  value
+}) {
+  const context = React.useContext(ContextInfoContext);
+  const explained = React.useMemo(() => {
+    return explainSQLSnippet(value, context);
+  }, [value, context]);
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    noWrap: true,
+    grow: true,
+    children: [/* @__PURE__ */ jsx(Text, {
+      children: "Preview"
+    }), /* @__PURE__ */ jsx(Prism, {
+      language: "sql",
+      noCopy: true,
+      colorScheme: "dark",
+      children: explained
+    })]
+  });
+}
 function SQLSnippetsEditor({}) {
   const {
     sqlSnippets,
     setSQLSnippets
   } = React.useContext(DefinitionContext);
-  const sampleSQL = `SELECT *
-FROM commit
-WHERE \${author_time_condition}`;
   const initialValues = React.useMemo(() => ({
     snippets: formList(sqlSnippets != null ? sqlSnippets : [])
   }), [sqlSnippets]);
@@ -4188,7 +4252,8 @@ WHERE \${author_time_condition}`;
     direction: "column",
     grow: true,
     sx: {
-      border: "1px solid #eee"
+      border: "1px solid #eee",
+      flexGrow: 1
     },
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: form.onSubmit(submit),
@@ -4214,26 +4279,11 @@ WHERE \${author_time_condition}`;
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsxs(Group, {
+      }), /* @__PURE__ */ jsx(Group, {
         px: "md",
         pb: "md",
-        children: [/* @__PURE__ */ jsx(Prism, {
-          language: "sql",
-          sx: {
-            width: "100%"
-          },
-          noCopy: true,
-          trim: false,
-          colorScheme: "dark",
-          children: `-- You may refer context data *by name*
--- in SQL or VizConfig.
-
-${sampleSQL}
-
--- where author_time_condition is:
-author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
- `
-        }), /* @__PURE__ */ jsxs(Group, {
+        pt: "md",
+        children: /* @__PURE__ */ jsxs(Group, {
           direction: "column",
           sx: {
             width: "100%",
@@ -4253,11 +4303,15 @@ author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].to
             children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
               label: "Key",
               required: true
-            }, form.getListInputProps("snippets", index2, "key"))), /* @__PURE__ */ jsx(Textarea, __spreadValues({
+            }, form.getListInputProps("snippets", index2, "key"))), /* @__PURE__ */ jsx(Textarea, __spreadProps(__spreadValues({
               minRows: 3,
               label: "Value",
               required: true
-            }, form.getListInputProps("snippets", index2, "value"))), /* @__PURE__ */ jsx(ActionIcon, {
+            }, form.getListInputProps("snippets", index2, "value")), {
+              className: "code-textarea"
+            })), /* @__PURE__ */ jsx(PreviewSnippet, {
+              value: form.values.snippets[index2].value
+            }), /* @__PURE__ */ jsx(ActionIcon, {
               color: "red",
               variant: "hover",
               onClick: () => form.removeListItem("snippets", index2),
@@ -4284,12 +4338,97 @@ author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].to
               children: "Add a snippet"
             })
           })]
-        })]
+        })
       })]
     })
   });
 }
-function EditSQLSnippetsModal({
+const sampleSQL = `SELECT *
+FROM commit
+WHERE \${author_time_condition}`;
+function SQLSnippetGuide() {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    sx: {
+      border: "1px solid #eee",
+      overflow: "hidden"
+    },
+    children: [/* @__PURE__ */ jsx(Group, {
+      position: "left",
+      pl: "md",
+      py: "md",
+      sx: {
+        borderBottom: "1px solid #eee",
+        background: "#efefef",
+        flexGrow: 0
+      },
+      children: /* @__PURE__ */ jsx(Text, {
+        weight: 500,
+        children: "Guide"
+      })
+    }), /* @__PURE__ */ jsx(Group, {
+      direction: "column",
+      px: "md",
+      pb: "md",
+      sx: {
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsx(Prism, {
+        language: "sql",
+        sx: {
+          width: "100%"
+        },
+        noCopy: true,
+        trim: false,
+        colorScheme: "dark",
+        children: `-- You may refer context data *by name*
+-- in SQL or VizConfig.
+
+${sampleSQL}
+
+-- where author_time_condition is:
+author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
+ `
+      })
+    })]
+  });
+}
+function EditSQLSnippets({}) {
+  return /* @__PURE__ */ jsx(AppShell, {
+    sx: {
+      height: "90vh",
+      maxHeight: "calc(100vh - 225px)",
+      ".mantine-AppShell-body": {
+        height: "100%"
+      },
+      main: {
+        height: "100%",
+        width: "100%",
+        padding: 0,
+        margin: 0
+      }
+    },
+    padding: "md",
+    children: /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      position: "apart",
+      grow: true,
+      align: "stretch",
+      noWrap: true,
+      children: [/* @__PURE__ */ jsx(SQLSnippetsEditor, {}), /* @__PURE__ */ jsxs(Group, {
+        direction: "column",
+        grow: true,
+        noWrap: true,
+        sx: {
+          maxWidth: "40%"
+        },
+        children: [/* @__PURE__ */ jsx(SQLSnippetGuide, {}), /* @__PURE__ */ jsx(ContextInfo, {})]
+      })]
+    })
+  });
+}
+function DataEditorModal({
   opened,
   close
 }) {
@@ -4304,34 +4443,19 @@ function EditSQLSnippetsModal({
     overflow: "inside",
     opened,
     onClose: close,
-    title: "SQL Snippets",
+    title: "Data Settings",
     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%",
-          padding: 0,
-          margin: 0
-        }
-      },
-      padding: "md",
-      children: /* @__PURE__ */ jsxs(Group, {
-        direction: "row",
-        position: "apart",
-        grow: true,
-        align: "stretch",
-        noWrap: true,
-        children: [/* @__PURE__ */ jsx(SQLSnippetsEditor, {}), /* @__PURE__ */ jsx(ContextInfo, {})]
-      })
+    children: /* @__PURE__ */ jsxs(Tabs, {
+      children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+        label: "SQL Snippet",
+        children: /* @__PURE__ */ jsx(EditSQLSnippets, {})
+      }), /* @__PURE__ */ jsx(Tabs.Tab, {
+        label: "Data Source",
+        children: /* @__PURE__ */ jsx(EditDataSources, {})
+      })]
     })
   });
 }
@@ -4347,12 +4471,9 @@ function DashboardActions({
     inEditMode,
     inUseMode
   } = React.useContext(LayoutStateContext);
-  const [dataSourcesOpened, setDataSourcesOpened] = React.useState(false);
-  const openDataSources = () => setDataSourcesOpened(true);
-  const closeDataSources = () => setDataSourcesOpened(false);
-  const [sqlSnippetsOpened, setSQLSnippetsOpened] = React.useState(false);
-  const openSQLSnippets = () => setSQLSnippetsOpened(true);
-  const closeSQLSnippets = () => setSQLSnippetsOpened(false);
+  const [dataEditorOpened, setDataEditorOpened] = React.useState(false);
+  const openDataSources = () => setDataEditorOpened(true);
+  const closeDataSources = () => setDataEditorOpened(false);
   return /* @__PURE__ */ jsxs(Group, {
     position: "apart",
     pt: "sm",
@@ -4373,14 +4494,6 @@ function DashboardActions({
           size: 20
         }),
         children: "Add a Panel"
-      }), inEditMode && /* @__PURE__ */ jsx(Button, {
-        variant: "default",
-        size: "sm",
-        onClick: openSQLSnippets,
-        leftIcon: /* @__PURE__ */ jsx(ClipboardText, {
-          size: 20
-        }),
-        children: "SQL Snippets"
       }), inEditMode && /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
@@ -4388,7 +4501,7 @@ function DashboardActions({
         leftIcon: /* @__PURE__ */ jsx(Database, {
           size: 20
         }),
-        children: "Data Sources"
+        children: "Data Settings"
       }), !inUseMode && /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
@@ -4407,12 +4520,9 @@ function DashboardActions({
         }),
         children: "Revert Changes"
       })]
-    }), /* @__PURE__ */ jsx(EditDataSourcesModal, {
-      opened: dataSourcesOpened,
+    }), /* @__PURE__ */ jsx(DataEditorModal, {
+      opened: dataEditorOpened,
       close: closeDataSources
-    }), /* @__PURE__ */ jsx(EditSQLSnippetsModal, {
-      opened: sqlSnippetsOpened,
-      close: closeSQLSnippets
     }), inUseMode && /* @__PURE__ */ jsx(Button, {
       variant: "default",
       size: "sm",

package/dist/dashboard.umd.js

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

package/dist/definition-editor/data-editor-modal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IDataEditorModal {
+    opened: boolean;
+    close: () => void;
+}
+export declare function DataEditorModal({ opened, close }: IDataEditorModal): JSX.Element;
+export {};

package/dist/definition-editor/data-source-editor/index.d.ts

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

package/dist/definition-editor/data-source-editor/preview-sql.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IPreviewSQL {
+    value: string;
+}
+export declare function PreviewSQL({ value }: IPreviewSQL): JSX.Element;
+export {};

package/dist/definition-editor/index.d.ts

@@ -1,2 +1 @@
-export * from './data-source-editor';
-export * from './sql-snippet-editor';
+export * from './data-editor-modal';

package/dist/definition-editor/sql-snippet-editor/guide.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SQLSnippetGuide(): JSX.Element;

package/dist/definition-editor/sql-snippet-editor/index.d.ts

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

package/dist/definition-editor/sql-snippet-editor/preview-snippet.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IPreviewSnippet {
+    value: string;
+}
+export declare function PreviewSnippet({ value }: IPreviewSnippet): JSX.Element;
+export {};

package/dist/style.css

@@ -1 +1 @@
-.viz-root{width:100%;overflow:scroll;padding-top:10px;height:calc(100% - 30px);background-color:#fff}.panel-root{padding:5px;height:100%;width:100%;max-width:100%}.mantine-Tabs-root{width:100%;height:calc(100% - 25px);overflow:hidden;display:flex;justify-content:flex-start;flex-direction:column;flex-wrap:nowrap}.mantine-Tabs-tabsListWrapper{flex:0}.mantine-Tabs-body{flex:1;overflow:scroll}.react-grid-item{padding:0}.react-grid-item:not(.react-grid-placeholder){background:transparent;border-radius:5px;box-shadow:0 0 10px #0003}.remove-panel{position:absolute;right:2px;top:0;cursor:pointer}
+.viz-root{width:100%;overflow:scroll;padding-top:10px;height:calc(100% - 30px);background-color:#fff}.panel-root{padding:5px;height:100%;width:100%;max-width:100%}.mantine-Tabs-root{width:100%;height:calc(100% - 25px);overflow:hidden;display:flex;justify-content:flex-start;flex-direction:column;flex-wrap:nowrap}.mantine-Tabs-tabsListWrapper{flex:0}.mantine-Tabs-body{flex:1;overflow:scroll}.react-grid-item{padding:0}.react-grid-item:not(.react-grid-placeholder){background:transparent;border-radius:5px;box-shadow:0 0 10px #0003}.remove-panel{position:absolute;right:2px;top:0;cursor:pointer}.code-textarea textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}

package/dist/utils/sql.d.ts

@@ -0,0 +1,6 @@
+import { ContextInfoContextType } from "../contexts";
+import { IDashboardDefinition } from "../types";
+export declare function explainSQLSnippet(snippet: string, context: ContextInfoContextType): any;
+export declare function formatSQL(sql: string, params: Record<string, any>): any;
+export declare function getSQLParams(context: ContextInfoContextType, definitions: IDashboardDefinition): Record<string, any> & ContextInfoContextType;
+export declare function explainSQL(sql: string, context: ContextInfoContextType, definitions: IDashboardDefinition): any;

package/package.json

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