@devtable/dashboard 1.7.0 → 1.8.0

package/dist/contexts/layout-state-context.d.ts

@@ -5,5 +5,7 @@ export interface ILayoutStateContext {
     freezeLayout: React.Dispatch<React.SetStateAction<boolean>>;
     mode: DashboardMode;
     inEditMode: boolean;
+    inLayoutMode: boolean;
+    inUseMode: boolean;
 }
 export declare const LayoutStateContext: React.Context<ILayoutStateContext>;

package/dist/dashboard.es.js

@@ -35,7 +35,7 @@ import { WidthProvider, Responsive } from "react-grid-layout";
 import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, JsonInput, Anchor, Switch, Slider, Modal, AppShell, Tabs, Menu, Divider, Container, SegmentedControl, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
-import { InfoCircle, DeviceFloppy, Refresh, Trash, Settings, Paint, PlayerPlay, PlaylistAdd, ClipboardText, Database, Recycle, Share } from "tabler-icons-react";
+import { InfoCircle, DeviceFloppy, Refresh, Trash, Settings, Resize, 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";
@@ -50,6 +50,7 @@ import { formList, useForm as useForm$1 } from "@mantine/form";
 import { Prism } from "@mantine/prism";
 var DashboardMode = /* @__PURE__ */ ((DashboardMode2) => {
   DashboardMode2["Use"] = "use";
+  DashboardMode2["Layout"] = "layout";
   DashboardMode2["Edit"] = "edit";
   return DashboardMode2;
 })(DashboardMode || {});
@@ -58,7 +59,9 @@ const initialContext$3 = {
   freezeLayout: () => {
   },
   mode: DashboardMode.Edit,
-  inEditMode: false
+  inEditMode: false,
+  inLayoutMode: false,
+  inUseMode: true
 };
 const LayoutStateContext = React.createContext(initialContext$3);
 const getRequest = (method) => {
@@ -2579,10 +2582,15 @@ function ModeToggler({
         size: 20
       }), "Use"),
       value: DashboardMode.Use
+    }, {
+      label: renderLabel(/* @__PURE__ */ jsx(Resize, {
+        size: 20
+      }), "Layout"),
+      value: DashboardMode.Layout
     }, {
       label: renderLabel(/* @__PURE__ */ jsx(Paint, {
         size: 20
-      }), "Edit"),
+      }), "Content"),
       value: DashboardMode.Edit
     }]
   });
@@ -3194,13 +3202,17 @@ function DashboardActions({
   addPanel,
   saveChanges
 }) {
+  const {
+    inLayoutMode,
+    inEditMode,
+    inUseMode
+  } = React.useContext(LayoutStateContext);
   const [dataSourcesOpened, setDataSourcesOpened] = React.useState(false);
   const openDataSources = () => setDataSourcesOpened(true);
   const closeDataSources = () => setDataSourcesOpened(false);
   const [sqlSnippetsOpened, setSQLSnippetsOpened] = React.useState(false);
   const openSQLSnippets = () => setSQLSnippetsOpened(true);
   const closeSQLSnippets = () => setSQLSnippetsOpened(false);
-  const inEditMode = mode === DashboardMode.Edit;
   return /* @__PURE__ */ jsxs(Group, {
     position: "apart",
     pt: "sm",
@@ -3211,59 +3223,57 @@ function DashboardActions({
         mode,
         setMode
       })
-    }), inEditMode && /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsxs(Group, {
-        position: "right",
-        children: [/* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          size: "sm",
-          onClick: addPanel,
-          leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
-            size: 20
-          }),
-          children: "Add a Panel"
-        }), /* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          size: "sm",
-          onClick: openSQLSnippets,
-          leftIcon: /* @__PURE__ */ jsx(ClipboardText, {
-            size: 20
-          }),
-          children: "SQL Snippets"
-        }), /* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          size: "sm",
-          onClick: openDataSources,
-          leftIcon: /* @__PURE__ */ jsx(Database, {
-            size: 20
-          }),
-          children: "Data Sources"
-        }), /* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          size: "sm",
-          onClick: saveChanges,
-          disabled: !hasChanges,
-          leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
-            size: 20
-          }),
-          children: "Save Changes"
-        }), /* @__PURE__ */ jsx(Button, {
-          color: "red",
-          size: "sm",
-          disabled: !hasChanges,
-          leftIcon: /* @__PURE__ */ jsx(Recycle, {
-            size: 20
-          }),
-          children: "Revert Changes"
-        })]
-      }), /* @__PURE__ */ jsx(EditDataSourcesModal, {
-        opened: dataSourcesOpened,
-        close: closeDataSources
-      }), /* @__PURE__ */ jsx(EditSQLSnippetsModal, {
-        opened: sqlSnippetsOpened,
-        close: closeSQLSnippets
+    }), /* @__PURE__ */ jsxs(Group, {
+      position: "right",
+      children: [inLayoutMode && /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        size: "sm",
+        onClick: addPanel,
+        leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
+          size: 20
+        }),
+        children: "Add a Panel"
+      }), inEditMode && /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        size: "sm",
+        onClick: openSQLSnippets,
+        leftIcon: /* @__PURE__ */ jsx(ClipboardText, {
+          size: 20
+        }),
+        children: "SQL Snippets"
+      }), inEditMode && /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        size: "sm",
+        onClick: openDataSources,
+        leftIcon: /* @__PURE__ */ jsx(Database, {
+          size: 20
+        }),
+        children: "Data Sources"
+      }), !inUseMode && /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        size: "sm",
+        onClick: saveChanges,
+        disabled: !hasChanges,
+        leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        }),
+        children: "Save Changes"
+      }), !inUseMode && /* @__PURE__ */ jsx(Button, {
+        color: "red",
+        size: "sm",
+        disabled: !hasChanges,
+        leftIcon: /* @__PURE__ */ jsx(Recycle, {
+          size: 20
+        }),
+        children: "Revert Changes"
       })]
-    }), !inEditMode && /* @__PURE__ */ jsx(Button, {
+    }), /* @__PURE__ */ jsx(EditDataSourcesModal, {
+      opened: dataSourcesOpened,
+      close: closeDataSources
+    }), /* @__PURE__ */ jsx(EditSQLSnippetsModal, {
+      opened: sqlSnippetsOpened,
+      close: closeSQLSnippets
+    }), inUseMode && /* @__PURE__ */ jsx(Button, {
       variant: "default",
       size: "sm",
       disabled: true,
@@ -3337,6 +3347,8 @@ function Dashboard({
     });
   };
   const inEditMode = mode === DashboardMode.Edit;
+  const inLayoutMode = mode === DashboardMode.Layout;
+  const inUseMode = mode === DashboardMode.Use;
   const definitions = React.useMemo(() => ({
     sqlSnippets,
     setSQLSnippets,
@@ -3354,7 +3366,9 @@ function Dashboard({
             layoutFrozen,
             freezeLayout,
             mode,
-            inEditMode
+            inEditMode,
+            inLayoutMode,
+            inUseMode
           },
           children: [/* @__PURE__ */ jsx(DashboardActions, {
             mode,
@@ -3365,8 +3379,8 @@ function Dashboard({
           }), /* @__PURE__ */ jsx(DashboardLayout, {
             panels,
             setPanels,
-            isDraggable: inEditMode && !layoutFrozen,
-            isResizable: inEditMode && !layoutFrozen,
+            isDraggable: inLayoutMode,
+            isResizable: inLayoutMode,
             onRemoveItem: removePanelByID,
             setLocalCols,
             setBreakpoint
@@ -3433,7 +3447,9 @@ function ReadOnlyDashboard({
             freezeLayout: () => {
             },
             mode: DashboardMode.Use,
-            inEditMode: false
+            inEditMode: false,
+            inLayoutMode: false,
+            inUseMode: true
           },
           children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
             panels: dashboard.panels

package/dist/dashboard.umd.js

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

package/dist/types/dashboard.d.ts

@@ -25,6 +25,7 @@ export interface IDashboardPanel {
 }
 export declare enum DashboardMode {
     Use = "use",
+    Layout = "layout",
     Edit = "edit"
 }
 export interface ISQLSnippet {

package/package.json

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