@devtable/dashboard 0.1.0 → 0.2.0

package/dist/dashboard.es.js

@@ -36,7 +36,7 @@ import { Text, Table, Group, LoadingOverlay, Box, Textarea, Button, TextInput, A
 import { useRequest } from "ahooks";
 import axios from "axios";
 import { Trash, DeviceFloppy, Settings, Refresh, InfoCircle, Paint, PlayerPlay, PlaylistAdd, Recycle, Share } from "tabler-icons-react";
-import { useElementSize, randomId, useInputState } from "@mantine/hooks";
+import { useElementSize, randomId, useInputState, useListState } from "@mantine/hooks";
 import ReactEChartsCore from "echarts-for-react/lib/core";
 import * as echarts from "echarts/core";
 import { SunburstChart, BarChart, LineChart } from "echarts/charts";
@@ -168,6 +168,27 @@ reactJsxRuntime_production_min.jsxs = q;
 const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx("h1", {
+        children: "Something went wrong."
+      });
+    }
+    return this.props.children;
+  }
+}
 echarts.use([SunburstChart, CanvasRenderer]);
 const defaultOption$1 = {
   tooltip: {
@@ -1861,10 +1882,12 @@ function PanelSettings({}) {
             })]
           })
         }),
-        children: /* @__PURE__ */ jsx(Viz, {
-          viz,
-          data,
-          loading
+        children: /* @__PURE__ */ jsx(ErrorBoundary, {
+          children: /* @__PURE__ */ jsx(Viz, {
+            viz,
+            data,
+            loading
+          })
         })
       })
     }), /* @__PURE__ */ jsx(ActionIcon, {
@@ -1957,7 +1980,10 @@ function Panel({
   viz: initialViz,
   sql: initialSQL,
   title: initialTitle,
-  description: initialDesc
+  description: initialDesc,
+  update,
+  layout,
+  id
 }) {
   const contextInfo = React.useContext(ContextInfoContext);
   const definitions = React.useContext(DefinitionContext);
@@ -1965,6 +1991,16 @@ function Panel({
   const [description, setDescription] = React.useState(initialDesc);
   const [sql, setSQL] = React.useState(initialSQL);
   const [viz, setViz] = React.useState(initialViz);
+  React.useEffect(() => {
+    update({
+      id,
+      layout,
+      title,
+      description,
+      sql,
+      viz
+    });
+  }, [title, description, sql, viz, id, layout]);
   const {
     data = [],
     loading,
@@ -1989,10 +2025,12 @@ function Panel({
     },
     children: /* @__PURE__ */ jsxs(Container, {
       className: "panel-root",
-      children: [/* @__PURE__ */ jsx(PanelTitleBar, {}), /* @__PURE__ */ jsx(Viz, {
-        viz,
-        data,
-        loading
+      children: [/* @__PURE__ */ jsx(PanelTitleBar, {}), /* @__PURE__ */ jsx(ErrorBoundary, {
+        children: /* @__PURE__ */ jsx(Viz, {
+          viz,
+          data,
+          loading
+        })
       })]
     })
   });
@@ -2001,6 +2039,7 @@ var index = "";
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 function DashboardLayout({
   panels,
+  setPanels,
   className = "layout",
   cols = {
     lg: 12,
@@ -2020,14 +2059,30 @@ function DashboardLayout({
     setBreakpoint(breakpoint);
     setLocalCols(localCols);
   };
+  const onLayoutChange = React.useCallback((currentLayout) => {
+    const m2 = /* @__PURE__ */ new Map();
+    currentLayout.forEach((_a) => {
+      var _b = _a, {
+        i
+      } = _b, rest = __objRest(_b, [
+        "i"
+      ]);
+      m2.set(i, rest);
+    });
+    const newPanels = panels.map((p2) => __spreadProps(__spreadValues({}, p2), {
+      layout: m2.get(p2.id)
+    }));
+    setPanels.setState(newPanels);
+  }, [panels, setPanels]);
   return /* @__PURE__ */ jsx(ResponsiveReactGridLayout, {
     onBreakpointChange,
+    onLayoutChange,
     className,
     cols,
     rowHeight,
     isDraggable,
     isResizable,
-    children: panels.map((_a) => {
+    children: panels.map((_a, index2) => {
       var _b = _a, {
         id
       } = _b, rest = __objRest(_b, [
@@ -2035,9 +2090,14 @@ function DashboardLayout({
       ]);
       return /* @__PURE__ */ jsx("div", {
         "data-grid": rest.layout,
-        children: /* @__PURE__ */ jsx(Panel, __spreadValues({
-          destroy: () => onRemoveItem(id)
-        }, rest))
+        children: /* @__PURE__ */ jsx(Panel, __spreadProps(__spreadValues({
+          id
+        }, rest), {
+          destroy: () => onRemoveItem(id),
+          update: (panel) => {
+            setPanels.setItem(index2, panel);
+          }
+        }))
       }, id);
     })
   });
@@ -2075,7 +2135,9 @@ function ModeToggler({
 function DashboardActions({
   mode,
   setMode,
-  addPanel
+  hasChanges,
+  addPanel,
+  saveChanges
 }) {
   const inEditMode = mode === DashboardMode.Edit;
   return /* @__PURE__ */ jsxs(Group, {
@@ -2101,15 +2163,16 @@ function DashboardActions({
       }), /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
-        disabled: true,
+        onClick: saveChanges,
+        disabled: !hasChanges,
         leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
           size: 20
         }),
-        children: "Save Dashboard"
+        children: "Save Changes"
       }), /* @__PURE__ */ jsx(Button, {
         color: "red",
         size: "sm",
-        disabled: true,
+        disabled: !hasChanges,
         leftIcon: /* @__PURE__ */ jsx(Recycle, {
           size: 20
         }),
@@ -2128,15 +2191,34 @@ function DashboardActions({
 }
 function Dashboard({
   dashboard,
+  update,
   className = "dashboard"
 }) {
   const [layoutFrozen, freezeLayout] = React.useState(false);
   const [newCounter, setNewCounter] = React.useState(0);
   const [breakpoint, setBreakpoint] = React.useState();
   const [localCols, setLocalCols] = React.useState();
-  const [panels, setPanels] = React.useState(dashboard.panels);
+  const [panels, setPanels] = useListState(dashboard.panels);
   const [sqlSnippets, setSQLSnippets] = React.useState(dashboard.definition.sqlSnippets);
   const [mode, setMode] = React.useState(DashboardMode.Edit);
+  const hasChanges = React.useMemo(() => {
+    const cleanJSON = (v) => JSON.parse(JSON.stringify(v));
+    const panelsEqual = _.isEqual(cleanJSON(panels), cleanJSON(dashboard.panels));
+    if (!panelsEqual) {
+      return true;
+    }
+    return !_.isEqual(sqlSnippets, dashboard.definition.sqlSnippets);
+  }, [dashboard, panels, sqlSnippets]);
+  const saveDashboardChanges = async () => {
+    const d = _.merge({}, dashboard, {
+      panels
+    }, {
+      definition: {
+        sqlSnippets
+      }
+    });
+    await update(d);
+  };
   const addPanel = () => {
     console.log("adding", "n" + newCounter);
     setNewCounter((v) => v + 1);
@@ -2157,21 +2239,21 @@ function Dashboard({
         conf: {}
       }
     };
-    setPanels((panels2) => [...panels2, newItem]);
+    setPanels.append(newItem);
   };
   const removePanelByID = (id) => {
-    setPanels((panels2) => _.reject(panels2, {
-      id
-    }));
+    const index2 = panels.findIndex((p2) => p2.id === id);
+    setPanels.remove(index2);
   };
   const inEditMode = mode === DashboardMode.Edit;
+  const definitions = React.useMemo(() => ({
+    sqlSnippets,
+    setSQLSnippets
+  }), [sqlSnippets, setSQLSnippets]);
   return /* @__PURE__ */ jsx("div", {
     className,
     children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-      value: {
-        sqlSnippets,
-        setSQLSnippets
-      },
+      value: definitions,
       children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
         value: {
           layoutFrozen,
@@ -2182,9 +2264,12 @@ function Dashboard({
         children: [/* @__PURE__ */ jsx(DashboardActions, {
           mode,
           setMode,
-          addPanel
+          hasChanges,
+          addPanel,
+          saveChanges: saveDashboardChanges
         }), /* @__PURE__ */ jsx(DashboardLayout, {
           panels,
+          setPanels,
           isDraggable: inEditMode && !layoutFrozen,
           isResizable: inEditMode && !layoutFrozen,
           onRemoveItem: removePanelByID,

package/dist/dashboard.umd.js

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

package/dist/layout/index.d.ts

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

package/dist/main/actions.d.ts

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

package/dist/main/index.d.ts

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

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

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

package/dist/panel/index.d.ts

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

package/package.json

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