@devtable/dashboard 0.0.3 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ContextInfoContextType } from "../contexts";
|
|
2
2
|
import { IDashboardDefinition } from "../types";
|
|
3
|
-
export declare const queryBySQL: (sql: string, context: ContextInfoContextType, definitions: IDashboardDefinition) => () => Promise<any>;
|
|
3
|
+
export declare const queryBySQL: (sql: string, context: ContextInfoContextType, definitions: IDashboardDefinition, title: string) => () => Promise<any>;
|
package/dist/dashboard.es.js
CHANGED
|
@@ -87,7 +87,6 @@ const post = getRequest("POST");
|
|
|
87
87
|
function formatSQL(sql, params) {
|
|
88
88
|
const names = Object.keys(params);
|
|
89
89
|
const vals = Object.values(params);
|
|
90
|
-
console.log({ names, vals });
|
|
91
90
|
return new Function(...names, `return \`${sql}\`;`)(...vals);
|
|
92
91
|
}
|
|
93
92
|
function getSQLParams(context, definitions) {
|
|
@@ -97,14 +96,16 @@ function getSQLParams(context, definitions) {
|
|
|
97
96
|
}, {});
|
|
98
97
|
return _.defaultsDeep(context, sqlSnippetRecord);
|
|
99
98
|
}
|
|
100
|
-
const queryBySQL = (sql, context, definitions) => async () => {
|
|
99
|
+
const queryBySQL = (sql, context, definitions, title) => async () => {
|
|
101
100
|
if (!sql) {
|
|
102
101
|
return [];
|
|
103
102
|
}
|
|
104
103
|
const params = getSQLParams(context, definitions);
|
|
105
104
|
const formattedSQL = formatSQL(sql, params);
|
|
106
105
|
if (sql.includes("$")) {
|
|
106
|
+
console.groupCollapsed(`Final SQL for: ${title}`);
|
|
107
107
|
console.log(formattedSQL);
|
|
108
|
+
console.groupEnd();
|
|
108
109
|
}
|
|
109
110
|
const res = await post("/query", { sql: formattedSQL });
|
|
110
111
|
return res;
|
|
@@ -1968,8 +1969,8 @@ function Panel({
|
|
|
1968
1969
|
data = [],
|
|
1969
1970
|
loading,
|
|
1970
1971
|
refresh
|
|
1971
|
-
} = useRequest(queryBySQL(sql, contextInfo, definitions), {
|
|
1972
|
-
refreshDeps: [contextInfo]
|
|
1972
|
+
} = useRequest(queryBySQL(sql, contextInfo, definitions, title), {
|
|
1973
|
+
refreshDeps: [contextInfo, definitions]
|
|
1973
1974
|
});
|
|
1974
1975
|
const refreshData = refresh;
|
|
1975
1976
|
return /* @__PURE__ */ jsx(PanelContext.Provider, {
|
package/dist/dashboard.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(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},
|
|
1
|
+
(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={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.min.js
|
|
4
4
|
*
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var Ge=u.default,De=Symbol.for("react.element"),Ae=Symbol.for("react.fragment"),Oe=Object.prototype.hasOwnProperty,
|
|
9
|
+
*/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*
|
|
10
10
|
-- in SQL or VizConfig.
|
|
11
11
|
|
|
12
|
-
${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:()=>{}}
|
|
12
|
+
${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 *
|
|
13
13
|
FROM commit
|
|
14
14
|
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*
|
|
15
15
|
-- in SQL or VizConfig.
|
|
@@ -18,4 +18,4 @@ ${r}
|
|
|
18
18
|
|
|
19
19
|
-- where author_time_condition is:
|
|
20
20
|
author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
|
|
21
|
-
`}),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",q(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=>q(m({},g),{type:r}))},[o,r]),l=g=>{i(x=>q(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(V,{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(j),{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(V,{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(j);return c(V,{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($),[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),{refreshDeps:[o]}),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($.Provider,{value:{sqlSnippets:b,setSQLSnippets:C},children:c(j.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=$,p.LayoutStateContext=j,p.Panel=pe,p.PanelContext=L,p.initialContextInfoContext=Ie,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
21
|
+
`}),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"}})});
|