@devtable/dashboard 1.1.0 → 1.2.0

package/dist/dashboard.es.js

@@ -32,10 +32,11 @@ var __objRest = (source, exclude) => {
 import React from "react";
 import _ from "lodash";
 import { WidthProvider, Responsive } from "react-grid-layout";
-import { Textarea, ActionIcon, Container, Group, Tooltip, Text, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, Switch, Slider, JsonInput, Modal, AppShell, Tabs, Menu, Divider, SegmentedControl } from "@mantine/core";
+import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, Switch, Slider, JsonInput, Modal, AppShell, Tabs, Menu, Divider, Container, SegmentedControl, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
-import { DeviceFloppy, InfoCircle, Trash, Refresh, Settings, Paint, PlayerPlay, PlaylistAdd, ClipboardText, Database, Recycle, Share } from "tabler-icons-react";
+import { InfoCircle, DeviceFloppy, Trash, Refresh, Settings, Paint, PlayerPlay, PlaylistAdd, ClipboardText, 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";
 import * as echarts from "echarts/core";
@@ -149,6 +150,15 @@ const initialContext$1 = {
   }
 };
 const PanelContext = React.createContext(initialContext$1);
+const initialContext = {
+  sqlSnippets: [],
+  setSQLSnippets: () => {
+  },
+  dataSources: [],
+  setDataSources: () => {
+  }
+};
+const DefinitionContext = React.createContext(initialContext);
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -182,48 +192,105 @@ reactJsxRuntime_production_min.jsxs = q;
 const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
+function DescriptionPopover({
+  position,
+  trigger = "click"
+}) {
+  const {
+    freezeLayout
+  } = React.useContext(LayoutStateContext);
+  const [opened, setOpened] = React.useState(false);
+  const {
+    description
+  } = React.useContext(PanelContext);
+  React.useEffect(() => {
+    freezeLayout(opened);
+  }, [opened]);
+  if (!description) {
+    return null;
+  }
+  const target = trigger === "click" ? /* @__PURE__ */ jsx(Tooltip, {
+    label: "Click to see description",
+    openDelay: 500,
+    children: /* @__PURE__ */ jsx(InfoCircle, {
+      size: 20,
+      onClick: () => setOpened((v) => !v),
+      style: {
+        verticalAlign: "baseline",
+        cursor: "pointer"
+      }
+    })
+  }) : /* @__PURE__ */ jsx(InfoCircle, {
+    size: 20,
+    onMouseEnter: () => setOpened(true),
+    onMouseLeave: () => setOpened(false),
+    style: {
+      verticalAlign: "baseline",
+      cursor: "pointer"
+    }
+  });
+  return /* @__PURE__ */ jsx(Popover, {
+    opened,
+    onClose: () => setOpened(false),
+    withCloseButton: true,
+    withArrow: true,
+    trapFocus: true,
+    closeOnEscape: false,
+    placement: "center",
+    position,
+    target,
+    children: /* @__PURE__ */ jsx(RichTextEditor, {
+      readOnly: true,
+      value: description,
+      onChange: _.noop,
+      sx: {
+        border: "none"
+      }
+    })
+  });
+}
 function EditDescription() {
   const {
     description,
     setDescription
   } = React.useContext(PanelContext);
-  const [localDesc, setLocalDesc] = useInputState(description);
-  const changed = description !== localDesc;
+  const [value, onChange] = React.useState(description);
+  const changed = description !== value;
   const submit = React.useCallback(() => {
     if (!changed) {
       return;
     }
-    setDescription(localDesc);
-  }, [changed, localDesc]);
-  return /* @__PURE__ */ jsx(Textarea, {
-    label: "Panel Description",
-    value: localDesc,
-    onChange: setLocalDesc,
-    minRows: 10,
-    autosize: true,
-    maxRows: 30,
-    rightSection: /* @__PURE__ */ jsx(ActionIcon, {
-      disabled: !changed,
-      onClick: submit,
+    setDescription(value);
+  }, [changed, value]);
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    sx: {
+      flexGrow: 1
+    },
+    children: [/* @__PURE__ */ jsxs(Group, {
+      align: "end",
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: "Description"
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        variant: "hover",
+        color: "blue",
+        disabled: !changed,
+        onClick: submit,
+        children: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        })
+      })]
+    }), /* @__PURE__ */ jsx(RichTextEditor$1, {
+      value,
+      onChange,
       sx: {
-        alignSelf: "flex-start",
-        marginTop: "4px"
+        flexGrow: 1
       },
-      children: /* @__PURE__ */ jsx(DeviceFloppy, {
-        size: 20
-      })
-    })
+      sticky: true,
+      p: "0"
+    })]
   });
 }
-const initialContext = {
-  sqlSnippets: [],
-  setSQLSnippets: () => {
-  },
-  dataSources: [],
-  setDataSources: () => {
-  }
-};
-const DefinitionContext = React.createContext(initialContext);
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -247,13 +314,17 @@ class ErrorBoundary extends React.Component {
 }
 function PreviewPanel() {
   const {
-    title,
-    description
+    title
   } = React.useContext(PanelContext);
   return /* @__PURE__ */ jsx(ErrorBoundary, {
-    children: /* @__PURE__ */ jsx(Container, {
+    children: /* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      grow: true,
+      noWrap: true,
+      mx: "auto",
       mt: "xl",
       p: "5px",
+      spacing: "xs",
       sx: {
         width: "600px",
         height: "450px",
@@ -261,24 +332,19 @@ function PreviewPanel() {
         borderRadius: "5px",
         boxShadow: "0px 0px 10px 0px rgba(0,0,0,.2)"
       },
-      children: /* @__PURE__ */ jsxs(Group, {
+      children: [/* @__PURE__ */ jsxs(Group, {
         position: "apart",
         noWrap: true,
         sx: {
           borderBottom: "1px solid #eee",
-          paddingBottom: "5px"
+          paddingBottom: "5px",
+          flexGrow: 0,
+          flexShrink: 0
         },
         children: [/* @__PURE__ */ jsx(Group, {
-          children: description && /* @__PURE__ */ jsx(Tooltip, {
-            label: description,
-            withArrow: true,
-            children: /* @__PURE__ */ jsx(InfoCircle, {
-              size: 12,
-              style: {
-                verticalAlign: "baseline",
-                cursor: "pointer"
-              }
-            })
+          children: /* @__PURE__ */ jsx(DescriptionPopover, {
+            position: "bottom",
+            trigger: "hover"
           })
         }), /* @__PURE__ */ jsx(Group, {
           grow: true,
@@ -295,7 +361,12 @@ function PreviewPanel() {
             height: "28px"
           }
         })]
-      })
+      }), /* @__PURE__ */ jsx(Group, {
+        sx: {
+          background: "#eee",
+          flexGrow: 1
+        }
+      })]
     })
   });
 }
@@ -313,15 +384,21 @@ function EditTitle() {
     setTitle(localTitle);
   }, [changed, localTitle]);
   return /* @__PURE__ */ jsx(TextInput, {
-    label: "Panel Title",
     value: localTitle,
     onChange: setLocalTitle,
-    rightSection: /* @__PURE__ */ jsx(ActionIcon, {
-      disabled: !changed,
-      onClick: submit,
-      children: /* @__PURE__ */ jsx(DeviceFloppy, {
-        size: 20
-      })
+    label: /* @__PURE__ */ jsxs(Group, {
+      align: "end",
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: "Panel Title"
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        variant: "hover",
+        color: "blue",
+        disabled: !changed,
+        onClick: submit,
+        children: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        })
+      })]
     })
   });
 }
@@ -340,7 +417,8 @@ function PanelConfig({}) {
       sx: {
         width: "40%",
         flexShrink: 0,
-        flexGrow: 0
+        flexGrow: 0,
+        height: "100%"
       },
       children: [/* @__PURE__ */ jsx(EditTitle, {}), /* @__PURE__ */ jsx(EditDescription, {})]
     }), /* @__PURE__ */ jsx(Box, {
@@ -1808,6 +1886,7 @@ function VizConfig({}) {
     children: [/* @__PURE__ */ jsx(Group, {
       grow: true,
       direction: "column",
+      noWrap: true,
       sx: {
         width: "40%",
         flexShrink: 0,
@@ -1887,8 +1966,6 @@ function PanelTitleBar({}) {
   const close = () => setOpened(false);
   const {
     title,
-    description,
-    loading,
     refreshData
   } = React.useContext(PanelContext);
   const {
@@ -1902,17 +1979,7 @@ function PanelTitleBar({}) {
       paddingBottom: "5px"
     },
     children: [/* @__PURE__ */ jsx(Group, {
-      children: description && /* @__PURE__ */ jsx(Tooltip, {
-        label: description,
-        withArrow: true,
-        children: /* @__PURE__ */ jsx(InfoCircle, {
-          size: 12,
-          style: {
-            verticalAlign: "baseline",
-            cursor: "pointer"
-          }
-        })
-      })
+      children: /* @__PURE__ */ jsx(DescriptionPopover, {})
     }), /* @__PURE__ */ jsx(Group, {
       grow: true,
       position: "center",
@@ -2088,7 +2155,7 @@ function DashboardLayout({
           update: (panel) => {
             setPanels((prevs) => {
               prevs.splice(index2, 1, panel);
-              return prevs;
+              return [...prevs];
             });
           }
         }))
@@ -2323,12 +2390,9 @@ function DataSourceEditor({
       return;
     }
     setDataSources((prevs) => {
-      return prevs.map((p2) => {
-        if (p2.id === value.id) {
-          return value;
-        }
-        return p2;
-      });
+      const index22 = prevs.findIndex((p2) => p2.id === id);
+      prevs.splice(index22, 1, value);
+      return [...prevs];
     });
   }, [setDataSources]);
   if (!dataSource) {
@@ -2356,12 +2420,20 @@ function SelectOrAddDataSource({
     dataSources,
     setDataSources
   } = React.useContext(DefinitionContext);
-  React.useEffect(() => {
+  const chooseDefault = React.useCallback(() => {
     var _a, _b;
+    setID((_b = (_a = dataSources[0]) == null ? void 0 : _a.id) != null ? _b : "");
+  }, [setID, dataSources]);
+  React.useEffect(() => {
     if (!id) {
-      setID((_b = (_a = dataSources[0]) == null ? void 0 : _a.id) != null ? _b : "");
+      chooseDefault();
+      return;
+    }
+    const index2 = dataSources.findIndex((d) => d.id === id);
+    if (index2 === -1) {
+      chooseDefault();
     }
-  }, [id, setID, dataSources]);
+  }, [id, dataSources, chooseDefault]);
   const options = React.useMemo(() => {
     return dataSources.map((d) => ({
       value: d.id,
@@ -2839,7 +2911,7 @@ function Dashboard({
     const index2 = panels.findIndex((p2) => p2.id === id);
     setPanels((prevs) => {
       prevs.splice(index2, 1);
-      return prevs;
+      return [...prevs];
     });
   };
   const inEditMode = mode === DashboardMode.Edit;

package/dist/dashboard.umd.js

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

package/dist/panel/panel-description.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IDescriptionPopover {
+    position?: 'top' | 'left' | 'bottom' | 'right';
+    trigger?: 'hover' | 'click';
+}
+export declare function DescriptionPopover({ position, trigger }: IDescriptionPopover): JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -34,6 +34,7 @@
     "@mantine/hooks": "^4.2.5",
     "@mantine/notifications": "^4.2.5",
     "@mantine/prism": "^4.2.5",
+    "@mantine/rte": "^4.2.5",
     "@types/lodash": "^4.14.182",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -61,6 +62,7 @@
     "@mantine/hooks": "^4.2.5",
     "@mantine/notifications": "^4.2.5",
     "@mantine/prism": "^4.2.5",
+    "@mantine/rte": "^4.2.5",
     "ahooks": "^3.3.11",
     "axios": "^0.27.2",
     "echarts": "^5.3.2",