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