@devtable/dashboard 0.3.1 → 0.4.0

package/dist/dashboard.es.js

@@ -1961,7 +1961,7 @@ function Panel({
   const [sql, setSQL] = React.useState(initialSQL);
   const [viz, setViz] = React.useState(initialViz);
   React.useEffect(() => {
-    update({
+    update == null ? void 0 : update({
       id,
       layout,
       title,
@@ -2005,7 +2005,7 @@ function Panel({
   });
 }
 var index = "";
-const ResponsiveReactGridLayout = WidthProvider(Responsive);
+const ResponsiveReactGridLayout$1 = WidthProvider(Responsive);
 function DashboardLayout({
   panels,
   setPanels,
@@ -2043,7 +2043,7 @@ function DashboardLayout({
     }));
     setPanels.setState(newPanels);
   }, [panels, setPanels]);
-  return /* @__PURE__ */ jsx(ResponsiveReactGridLayout, {
+  return /* @__PURE__ */ jsx(ResponsiveReactGridLayout$1, {
     onBreakpointChange,
     onLayoutChange,
     className,
@@ -2246,4 +2246,67 @@ function Dashboard({
     })
   });
 }
-export { ContextInfoContext, Dashboard, DashboardLayout, DashboardMode, DefinitionContext, LayoutStateContext, Panel, PanelContext, initialContextInfoContext };
+const ResponsiveReactGridLayout = WidthProvider(Responsive);
+function ReadOnlyDashboardLayout({
+  panels,
+  className = "layout",
+  cols = {
+    lg: 12,
+    md: 10,
+    sm: 8,
+    xs: 6,
+    xxs: 4
+  },
+  rowHeight = 10
+}) {
+  return /* @__PURE__ */ jsx(ResponsiveReactGridLayout, {
+    className,
+    cols,
+    rowHeight,
+    isDraggable: false,
+    isResizable: false,
+    children: panels.map((_a) => {
+      var _b = _a, {
+        id
+      } = _b, rest = __objRest(_b, [
+        "id"
+      ]);
+      return /* @__PURE__ */ jsx("div", {
+        "data-grid": rest.layout,
+        children: /* @__PURE__ */ jsx(Panel, __spreadValues({
+          id
+        }, rest))
+      }, id);
+    })
+  });
+}
+function ReadOnlyDashboard({
+  dashboard,
+  className = "dashboard"
+}) {
+  const [panels, setPanels] = useListState(dashboard.panels);
+  const [sqlSnippets, setSQLSnippets] = React.useState(dashboard.definition.sqlSnippets);
+  const definitions = React.useMemo(() => ({
+    sqlSnippets,
+    setSQLSnippets
+  }), [sqlSnippets, setSQLSnippets]);
+  return /* @__PURE__ */ jsx("div", {
+    className,
+    children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+      value: definitions,
+      children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+        value: {
+          layoutFrozen: true,
+          freezeLayout: () => {
+          },
+          mode: DashboardMode.Use,
+          inEditMode: false
+        },
+        children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
+          panels
+        })
+      })
+    })
+  });
+}
+export { ContextInfoContext, Dashboard, DashboardLayout, DashboardMode, DefinitionContext, LayoutStateContext, Panel, PanelContext, ReadOnlyDashboard, initialContextInfoContext };

package/dist/dashboard.umd.js

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

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

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

package/dist/main/index.d.ts

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

package/dist/main/main.d.ts

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

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

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

package/dist/panel/index.d.ts

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

package/package.json

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