@perses-dev/pie-chart-plugin 0.6.0 → 0.7.0

package/__mf/js/main.8157a179.js

@@ -0,0 +1 @@
+(()=>{var e={5311:function(e,r,t){Promise.all([t.e("677"),t.e("179"),t.e("620")]).then(t.bind(t,29161))}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var a=r[n]={id:n,loaded:!1,exports:{}};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}t.m=e,t.c=r,t.federation||(t.federation={chunkMatcher:function(e){return!/^(1(57|61|79)|23|263|494|677|759|946)$/.test(e)}}),t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.f={},t.e=e=>Promise.all(Object.keys(t.f).reduce((r,n)=>(t.f[n](e,r),r),[])),t.u=e=>"__mf/js/async/"+("118"===e?"lib-router":e)+"."+({118:"d29f3ef0",162:"668ea958",173:"ee70b493",214:"df2e7807",224:"dbeed4db",238:"5287310b",292:"f278784e",331:"a0d6355f",36:"ac56ec70",360:"fdc4e499",470:"9e513ba5",610:"0d00ec39",620:"9a73a66b",651:"a1042e18",656:"5efccb26",658:"78ccd02d",694:"b227b636",738:"4ac98841",740:"b86dfa00",75:"905151a5",770:"93415255",960:"208437e1",964:"6df60c3e",973:"74031340",981:"3ecbf5ea"})[e]+".js",t.miniCssF=e=>"__mf/css/async/"+e+"."+({263:"80005a4a",759:"80005a4a"})[e]+".css",t.h=()=>"6071bda2ea737d6a",(()=>{t.g=(()=>{if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}})()})(),t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{var e={},r="PieChart:";t.l=function(n,o,a,i){if(e[n]){e[n].push(o);return}if(void 0!==a)for(var s,l,d=document.getElementsByTagName("script"),c=0;c<d.length;c++){var u=d[c];if(u.getAttribute("src")==n||u.getAttribute("data-webpack")==r+a){s=u;break}}s||(l=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,t.nc&&s.setAttribute("nonce",t.nc),s.setAttribute("data-webpack",r+a),s.src=n),e[n]=[o];var f=function(r,t){s.onerror=s.onload=null,clearTimeout(h);var o=e[n];if(delete e[n],s.parentNode&&s.parentNode.removeChild(s),o&&o.forEach(function(e){return e(t)}),r)return r(t)},h=setTimeout(f.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=f.bind(null,s.onerror),s.onload=f.bind(null,s.onload),l&&document.head.appendChild(s)}})(),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),t.nc=void 0,(()=>{var e=[];t.O=(r,n,o,a)=>{if(n){a=a||0;for(var i=e.length;i>0&&e[i-1][2]>a;i--)e[i]=e[i-1];e[i]=[n,o,a];return}for(var s=1/0,i=0;i<e.length;i++){for(var[n,o,a]=e[i],l=!0,d=0;d<n.length;d++)(!1&a||s>=a)&&Object.keys(t.O).every(e=>t.O[e](n[d]))?n.splice(d--,1):(l=!1,a<s&&(s=a));if(l){e.splice(i--,1);var c=o();void 0!==c&&(r=c)}}return r}})(),t.p="/plugins/PieChart/",t.rv=()=>"1.2.8",t.j="909",t.S={},t.initializeSharingData={scopeToSharingDataMapping:{default:[{name:"@emotion/react",version:"11.14.0",factory:()=>Promise.all([t.e("960"),t.e("677"),t.e("651")]).then(()=>()=>t(96434)),eager:0,singleton:1,requiredVersion:"^11.11.3"},{name:"@emotion/styled",version:"11.14.0",factory:()=>Promise.all([t.e("677"),t.e("157"),t.e("694")]).then(()=>()=>t(51958)),eager:0,singleton:1},{name:"@hookform/resolvers",version:"3.10.0",factory:()=>Promise.all([t.e("292"),t.e("677"),t.e("214")]).then(()=>()=>t(81228)),eager:0,singleton:1},{name:"@perses-dev/components",version:"0.51.0-beta.1",factory:()=>Promise.all([t.e("238"),t.e("224"),t.e("292"),t.e("470"),t.e("36"),t.e("658"),t.e("360"),t.e("973"),t.e("331"),t.e("677"),t.e("179"),t.e("161"),t.e("157"),t.e("946"),t.e("759")]).then(()=>()=>t(13425)),eager:0,singleton:1},{name:"@perses-dev/plugin-system",version:"0.51.0-beta.1",factory:()=>Promise.all([t.e("118"),t.e("292"),t.e("36"),t.e("973"),t.e("162"),t.e("677"),t.e("179"),t.e("161"),t.e("157"),t.e("946"),t.e("23"),t.e("656")]).then(()=>()=>t(57910)),eager:0,singleton:1},{name:"date-fns",version:"4.1.0",factory:()=>Promise.all([t.e("238"),t.e("224"),t.e("75")]).then(()=>()=>t(99657)),eager:0,singleton:1},{name:"echarts",version:"5.5.0",factory:()=>Promise.all([t.e("470"),t.e("658"),t.e("610")]).then(()=>()=>t(2138)),eager:0,singleton:1},{name:"lodash",version:"4.17.21",factory:()=>t.e("981").then(()=>()=>t(98784)),eager:0,singleton:1},{name:"react-dom",version:"18.3.1",factory:()=>Promise.all([t.e("173"),t.e("677")]).then(()=>()=>t(31542)),eager:0,singleton:1,requiredVersion:"18.2.0"},{name:"react",version:"18.3.1",factory:()=>t.e("964").then(()=>()=>t(27378)),eager:0,singleton:1,requiredVersion:"18.2.0"}]},uniqueName:"PieChart"},t.I=t.I||function(){throw Error("should have __webpack_require__.I")},t.consumesLoadingData={chunkMapping:{161:["4665","20461"],494:["57871"],946:["45913"],179:["6085"],157:["72116"],23:["84275","74614","30156","3553","55922","57751","68393"],677:["54538"]},moduleIdToConsumeDataMapping:{45913:{shareScope:"default",shareKey:"@emotion/styled",import:"@emotion/styled",requiredVersion:"^11.3.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("770").then(()=>()=>t(51958))},57751:{shareScope:"default",shareKey:"@perses-dev/plugin-system",import:"@perses-dev/plugin-system",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>()=>t(57910)},68393:{shareScope:"default",shareKey:"@perses-dev/components",import:"@perses-dev/components",requiredVersion:"0.51.0-beta.1",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("238"),t.e("224"),t.e("470"),t.e("658"),t.e("360"),t.e("331"),t.e("263")]).then(()=>()=>t(13425))},30156:{shareScope:"default",shareKey:"echarts",import:"echarts",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("470"),t.e("658"),t.e("610")]).then(()=>()=>t(2138))},6085:{shareScope:"default",shareKey:"react-dom",import:"react-dom",requiredVersion:"18.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("173").then(()=>()=>t(31542))},72116:{shareScope:"default",shareKey:"@emotion/react",import:"@emotion/react",requiredVersion:"^11.11.3",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("960").then(()=>()=>t(96434))},57871:{shareScope:"default",shareKey:"date-fns",import:"date-fns",requiredVersion:"^3.0.0 || ^4.0.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("238"),t.e("75")]).then(()=>()=>t(99657))},84275:{shareScope:"default",shareKey:"@hookform/resolvers",import:"@hookform/resolvers",requiredVersion:"^2.0.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("738").then(()=>()=>t(81228))},74614:{shareScope:"default",shareKey:"lodash",import:"lodash",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("981").then(()=>()=>t(98784))},4665:{shareScope:"default",shareKey:"date-fns-tz",import:"date-fns-tz",requiredVersion:"^3.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("224"),t.e("740"),t.e("494")]).then(()=>()=>t(48872))},54538:{shareScope:"default",shareKey:"react",import:"react",requiredVersion:"18.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("964").then(()=>()=>t(27378))},3553:{shareScope:"default",shareKey:"@perses-dev/plugin-system",import:"@perses-dev/plugin-system",requiredVersion:"0.51.0-beta.1",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>()=>t(57910)},55922:{shareScope:"default",shareKey:"@emotion/styled",import:"@emotion/styled",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("770").then(()=>()=>t(51958))},20461:{shareScope:"default",shareKey:"date-fns",import:"date-fns",requiredVersion:"^4.1.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("238"),t.e("224"),t.e("75")]).then(()=>()=>t(99657))}},initialConsumes:[]},t.f.consumes=t.f.consumes||function(){throw Error("should have __webpack_require__.f.consumes")},(()=>{if("undefined"!=typeof document){var e=function(e,r,n,o,a){var i=document.createElement("link");return i.rel="stylesheet",i.type="text/css",t.nc&&(i.nonce=t.nc),i.onerror=i.onload=function(t){if(i.onerror=i.onload=null,"load"===t.type)o();else{var n=t&&("load"===t.type?"missing":t.type),s=t&&t.target&&t.target.href||r,l=Error("Loading CSS chunk "+e+" failed.\\n("+s+")");l.code="CSS_CHUNK_LOAD_FAILED",l.type=n,l.request=s,i.parentNode&&i.parentNode.removeChild(i),a(l)}},i.href=r,n?n.parentNode.insertBefore(i,n.nextSibling):document.head.appendChild(i),i},r=function(e,r){for(var t=document.getElementsByTagName("link"),n=0;n<t.length;n++){var o=t[n],a=o.getAttribute("data-href")||o.getAttribute("href");if("stylesheet"===o.rel&&(a===e||a===r))return o}for(var i=document.getElementsByTagName("style"),n=0;n<i.length;n++){var o=i[n],a=o.getAttribute("data-href");if(a===e||a===r)return o}},n={909:0};t.f.miniCss=function(o,a){if(n[o])a.push(n[o]);else if(0!==n[o]&&({263:1,759:1})[o])a.push(n[o]=new Promise(function(n,a){var i=t.miniCssF(o),s=t.p+i;if(r(i,s))return n();e(o,s,null,n,a)}).then(function(){n[o]=0},function(e){throw delete n[o],e}))}}})(),(()=>{var e={909:0};t.f.j=function(r,n){var o=t.o(e,r)?e[r]:void 0;if(0!==o){if(o)n.push(o[2]);else if(/^(1(57|61|79)|23|263|494|677|759|946)$/.test(r))e[r]=0;else{var a=new Promise((t,n)=>o=e[r]=[t,n]);n.push(o[2]=a);var i=t.p+t.u(r),s=Error();t.l(i,function(n){if(t.o(e,r)&&(0!==(o=e[r])&&(e[r]=void 0),o)){var a=n&&("load"===n.type?"missing":n.type),i=n&&n.target&&n.target.src;s.message="Loading chunk "+r+" failed.\n("+a+": "+i+")",s.name="ChunkLoadError",s.type=a,s.request=i,o[1](s)}},"chunk-"+r,r)}}},t.O.j=r=>0===e[r];var r=(r,n)=>{var o,a,[i,s,l]=n,d=0;if(i.some(r=>0!==e[r])){for(o in s)t.o(s,o)&&(t.m[o]=s[o]);if(l)var c=l(t)}for(r&&r(n);d<i.length;d++)a=i[d],t.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return t.O(c)},n=self.webpackChunkPieChart=self.webpackChunkPieChart||[];n.forEach(r.bind(null,0)),n.push=r.bind(null,n.push.bind(n))})(),t.ruid="bundler=rspack@1.2.8",t.O(void 0,["693"],function(){return t(18955)});var n=t.O(void 0,["693"],function(){return t(5311)});n=t.O(n)})();

package/lib/PieChartBase.d.ts

@@ -0,0 +1,14 @@
+import { LegendComponentOption } from 'echarts/components';
+import { ReactElement } from 'react';
+export interface PieChartData {
+    name: string;
+    value: number | null;
+}
+export interface PieChartBaseProps {
+    width: number;
+    height: number;
+    data: PieChartData[] | null;
+    legend?: LegendComponentOption;
+}
+export declare function PieChartBase(props: PieChartBaseProps): ReactElement;
+//# sourceMappingURL=PieChartBase.d.ts.map

package/lib/PieChartBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChartBase.d.ts","sourceRoot":"","sources":["../../src/PieChartBase.tsx"],"names":[],"mappings":"AAeA,OAAO,EAKL,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAOrC,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA4DnE"}

package/lib/PieChartBase.js

@@ -0,0 +1,92 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from 'echarts/core';
+import { PieChart as EChartsPieChart } from 'echarts/charts';
+import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { Box } from '@mui/material';
+import { EChart, useChartsTheme } from '@perses-dev/components';
+use([
+    EChartsPieChart,
+    GridComponent,
+    DatasetComponent,
+    TitleComponent,
+    TooltipComponent,
+    CanvasRenderer
+]);
+const PIE_WIN_WIDTH = 12;
+const PIE_GAP = 4;
+export function PieChartBase(props) {
+    console.log(props);
+    const { width, height, data } = props;
+    const chartsTheme = useChartsTheme();
+    const option = {
+        title: {
+            text: 'Referer of a Website',
+            subtext: 'Fake Data',
+            left: 'center'
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        axisLabel: {
+            overflow: 'truncate',
+            width: width / 3
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: '55%',
+                label: false,
+                center: [
+                    '40%',
+                    '50%'
+                ],
+                data: data,
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ],
+        itemStyle: {
+            borderRadius: 2,
+            color: chartsTheme.echartsTheme[0]
+        }
+    };
+    return /*#__PURE__*/ _jsx(Box, {
+        style: {
+            width: width,
+            height: height
+        },
+        sx: {
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ _jsx(EChart, {
+            sx: {
+                minHeight: height,
+                height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%'
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+}
+
+//# sourceMappingURL=PieChartBase.js.map

package/lib/PieChartBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/PieChartBase.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { use } from 'echarts/core';\nimport { PieChart as EChartsPieChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  LegendComponentOption,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { EChart, useChartsTheme } from '@perses-dev/components';\n\nuse([EChartsPieChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PIE_WIN_WIDTH = 12;\nconst PIE_GAP = 4;\nexport interface PieChartData {\n  name: string;\n  value: number | null;\n}\n\nexport interface PieChartBaseProps {\n  width: number;\n  height: number;\n  data: PieChartData[] | null;\n  legend?: LegendComponentOption;\n}\n\nexport function PieChartBase(props: PieChartBaseProps): ReactElement {\n  console.log(props);\n  const { width, height, data } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option = {\n    title: {\n      text: 'Referer of a Website',\n      subtext: 'Fake Data',\n      left: 'center',\n    },\n    tooltip: {\n      trigger: 'item',\n      formatter: '{a} <br/>{b} : {c} ({d}%)',\n    },\n    axisLabel: {\n      overflow: 'truncate',\n      width: width / 3,\n    },\n    series: [\n      {\n        name: 'Access From',\n        type: 'pie',\n        radius: '55%',\n        label: false,\n        center: ['40%', '50%'],\n        data: data,\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowOffsetX: 0,\n            shadowColor: 'rgba(0, 0, 0, 0.5)',\n          },\n        },\n      },\n    ],\n    itemStyle: {\n      borderRadius: 2,\n      color: chartsTheme.echartsTheme[0],\n    },\n  };\n\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{ overflow: 'auto' }}\n    >\n      <EChart\n        sx={{\n          minHeight: height,\n          height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["use","PieChart","EChartsPieChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","EChart","useChartsTheme","PIE_WIN_WIDTH","PIE_GAP","PieChartBase","props","console","log","width","height","data","chartsTheme","option","title","text","subtext","left","tooltip","trigger","formatter","axisLabel","overflow","series","name","type","radius","label","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","borderRadius","color","echartsTheme","style","sx","minHeight","length","theme"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,eAAe;AACnC,SAASC,YAAYC,eAAe,QAAQ,iBAAiB;AAC7D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,QAEX,qBAAqB;AAC5B,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,MAAM,EAAEC,cAAc,QAAQ,yBAAyB;AAEhEV,IAAI;IAACE;IAAiBC;IAAeC;IAAkBC;IAAgBC;IAAkBC;CAAe;AAExG,MAAMI,gBAAgB;AACtB,MAAMC,UAAU;AAahB,OAAO,SAASC,aAAaC,KAAwB;IACnDC,QAAQC,GAAG,CAACF;IACZ,MAAM,EAAEG,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGL;IAChC,MAAMM,cAAcV;IAEpB,MAAMW,SAAS;QACbC,OAAO;YACLC,MAAM;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,SAAS;YACPC,SAAS;YACTC,WAAW;QACb;QACAC,WAAW;YACTC,UAAU;YACVb,OAAOA,QAAQ;QACjB;QACAc,QAAQ;YACN;gBACEC,MAAM;gBACNC,MAAM;gBACNC,QAAQ;gBACRC,OAAO;gBACPC,QAAQ;oBAAC;oBAAO;iBAAM;gBACtBjB,MAAMA;gBACNkB,UAAU;oBACRC,WAAW;wBACTC,YAAY;wBACZC,eAAe;wBACfC,aAAa;oBACf;gBACF;YACF;SACD;QACDH,WAAW;YACTI,cAAc;YACdC,OAAOvB,YAAYwB,YAAY,CAAC,EAAE;QACpC;IACF;IAEA,qBACE,KAACpC;QACCqC,OAAO;YACL5B,OAAOA;YACPC,QAAQA;QACV;QACA4B,IAAI;YAAEhB,UAAU;QAAO;kBAEvB,cAAA,KAACrB;YACCqC,IAAI;gBACFC,WAAW7B;gBACXA,QAAQC,OAAOA,KAAK6B,MAAM,GAAIrC,CAAAA,gBAAgBC,OAAM,IAAK;YAC3D;YACAS,QAAQA;YACR4B,OAAO7B,YAAYwB,YAAY;;;AAIvC"}

package/lib/PieChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChartPanel.d.ts","sourceRoot":"","sources":["../../src/PieChartPanel.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAoD,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAsB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAkB,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CA2J5E"}
+{"version":3,"file":"PieChartPanel.d.ts","sourceRoot":"","sources":["../../src/PieChartPanel.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAoD,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAsB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIpD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CA+H5E"}

package/lib/PieChartPanel.js

@@ -12,26 +12,21 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, useTheme } from '@mui/material';
-import { ContentWithLegend, PieChart, useChartsTheme, useId } from '@perses-dev/components';
+import { ContentWithLegend, useChartsTheme, useId } from '@perses-dev/components';
 import { CalculationsMap, DEFAULT_LEGEND } from '@perses-dev/core';
 import { validateLegendSpec } from '@perses-dev/plugin-system';
 import merge from 'lodash/merge';
 import { useMemo, useRef, useState } from 'react';
 import { getSeriesColor } from './palette-gen';
-import { DEFAULT_VISUAL } from './pie-chart-model';
 import { calculatePercentages, sortSeriesData } from './utils';
+import { PieChartBase } from './PieChartBase';
 export function PieChartPanel(props) {
-    const { spec: { calculation, sort, mode, querySettings: querySettingsList }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, sort, mode }, contentDimensions, queryResults } = props;
     const chartsTheme = useChartsTheme();
     const muiTheme = useTheme();
     const PADDING = chartsTheme.container.padding.default;
     const chartId = useId('time-series-panel');
     const categoricalPalette = chartsTheme.echartsTheme.color;
-    const visual = useMemo(()=>{
-        return merge({}, DEFAULT_VISUAL, props.spec.visual);
-    }, [
-        props.spec.visual
-    ]);
     const { pieChartData, legendItems } = useMemo(()=>{
         const calculate = CalculationsMap[calculation];
         const pieChartData = [];
@@ -40,24 +35,10 @@ export function PieChartPanel(props) {
             const result = queryResults[queryIndex];
             let seriesIndex = 0;
             for (const seriesData of result?.data.series ?? []){
-                // Retrieve querySettings for this query, if exists.
-                // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute
-                let querySettings;
-                for (const item of querySettingsList ?? []){
-                    if (item.queryIndex === queryIndex) {
-                        querySettings = item;
-                    // We don't break the loop here just in case there are multiple querySettings defined for the
-                    // same queryIndex, because in that case we want the last one to take precedence.
-                    }
-                }
                 const seriesColor = getSeriesColor({
                     categoricalPalette: categoricalPalette,
-                    visual,
                     muiPrimaryColor: muiTheme.palette.primary.main,
-                    seriesName: seriesData.name,
-                    seriesIndex,
-                    querySettings: querySettings,
-                    queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1
+                    seriesName: seriesData.name
                 });
                 const series = {
                     value: calculate(seriesData.values) ?? null,
@@ -93,10 +74,8 @@ export function PieChartPanel(props) {
         mode,
         queryResults,
         categoricalPalette,
-        visual,
         muiTheme.palette.primary.main,
-        chartId,
-        querySettingsList
+        chartId
     ]);
     const contentPadding = chartsTheme.container.padding.default;
     const adjustedContentDimensions = contentDimensions ? {
@@ -150,7 +129,7 @@ export function PieChartPanel(props) {
                         height,
                         width
                     },
-                    children: /*#__PURE__*/ _jsx(PieChart, {
+                    children: /*#__PURE__*/ _jsx(PieChartBase, {
                         data: pieChartData,
                         width: contentDimensions.width - PADDING * 2,
                         height: contentDimensions.height - PADDING * 2

package/lib/PieChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PieChartPanel.tsx"],"sourcesContent":["//Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, useTheme } from '@mui/material';\nimport {\n  ChartInstance,\n  ContentWithLegend,\n  LegendItem,\n  LegendProps,\n  PieChart,\n  PieChartData,\n  SelectedLegendItemState,\n  useChartsTheme,\n  useId,\n} from '@perses-dev/components';\nimport { CalculationType, CalculationsMap, DEFAULT_LEGEND, TimeSeriesData } from '@perses-dev/core';\nimport { PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { QuerySettingsOptions } from './model';\nimport { getSeriesColor } from './palette-gen';\nimport { DEFAULT_VISUAL, PieChartOptions } from './pie-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\n\nexport type PieChartPanelProps = PanelProps<PieChartOptions, TimeSeriesData>;\n\nexport function PieChartPanel(props: PieChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, sort, mode, querySettings: querySettingsList },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n  const PADDING = chartsTheme.container.padding.default;\n  const chartId = useId('time-series-panel');\n  const categoricalPalette = chartsTheme.echartsTheme.color;\n\n  const visual = useMemo(() => {\n    return merge({}, DEFAULT_VISUAL, props.spec.visual);\n  }, [props.spec.visual]);\n\n  const { pieChartData, legendItems } = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const pieChartData: PieChartData[] = [];\n    const legendItems: LegendItem[] = [];\n\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      let seriesIndex = 0;\n      for (const seriesData of result?.data.series ?? []) {\n        // Retrieve querySettings for this query, if exists.\n        // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute\n        let querySettings: QuerySettingsOptions | undefined;\n        for (const item of querySettingsList ?? []) {\n          if (item.queryIndex === queryIndex) {\n            querySettings = item;\n            // We don't break the loop here just in case there are multiple querySettings defined for the\n            // same queryIndex, because in that case we want the last one to take precedence.\n          }\n        }\n        const seriesColor = getSeriesColor({\n          categoricalPalette: categoricalPalette as string[],\n          visual,\n          muiPrimaryColor: muiTheme.palette.primary.main,\n          seriesName: seriesData.name,\n          seriesIndex,\n          querySettings: querySettings,\n          queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1,\n        });\n        const series = {\n          value: calculate(seriesData.values) ?? null,\n          name: seriesData.formattedName ?? '',\n          itemStyle: {\n            color: seriesColor,\n          },\n        };\n        pieChartData.push(series);\n\n        const seriesId = chartId + seriesData.name + seriesIndex;\n        legendItems.push({\n          id: seriesId,\n          label: series.name,\n          color: seriesColor,\n        });\n        seriesIndex++;\n      }\n    }\n\n    const sortedPieChartData = sortSeriesData(pieChartData, sort);\n    if (mode === 'percentage') {\n      return {\n        pieChartData: calculatePercentages(sortedPieChartData),\n        legendItems,\n      };\n    }\n    return {\n      pieChartData: sortedPieChartData,\n      legendItems,\n    };\n  }, [\n    calculation,\n    sort,\n    mode,\n    queryResults,\n    categoricalPalette,\n    visual,\n    muiTheme.palette.primary.main,\n    chartId,\n    querySettingsList,\n  ]);\n\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions?.width ?? 400}\n        height={adjustedContentDimensions?.height ?? 1000}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems,\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: [],\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              <PieChart\n                data={pieChartData}\n                width={contentDimensions.width - PADDING * 2}\n                height={contentDimensions.height - PADDING * 2}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","ContentWithLegend","PieChart","useChartsTheme","useId","CalculationsMap","DEFAULT_LEGEND","validateLegendSpec","merge","useMemo","useRef","useState","getSeriesColor","DEFAULT_VISUAL","calculatePercentages","sortSeriesData","PieChartPanel","props","spec","calculation","sort","mode","querySettings","querySettingsList","contentDimensions","queryResults","chartsTheme","muiTheme","PADDING","container","padding","default","chartId","categoricalPalette","echartsTheme","color","visual","pieChartData","legendItems","calculate","queryIndex","length","result","seriesIndex","seriesData","data","series","item","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","name","queryHasMultipleResults","value","values","formattedName","itemStyle","push","seriesId","id","label","sortedPieChartData","contentPadding","adjustedContentDimensions","width","height","undefined","legend","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","chartRef","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","columns","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style"],"mappings":"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"}
+{"version":3,"sources":["../../src/PieChartPanel.tsx"],"sourcesContent":["//Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, useTheme } from '@mui/material';\nimport {\n  ChartInstance,\n  ContentWithLegend,\n  LegendItem,\n  LegendProps,\n  SelectedLegendItemState,\n  useChartsTheme,\n  useId,\n} from '@perses-dev/components';\nimport { CalculationType, CalculationsMap, DEFAULT_LEGEND, TimeSeriesData } from '@perses-dev/core';\nimport { PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { getSeriesColor } from './palette-gen';\nimport { PieChartOptions } from './pie-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\nimport { PieChartBase, PieChartData } from './PieChartBase';\n\nexport type PieChartPanelProps = PanelProps<PieChartOptions, TimeSeriesData>;\n\nexport function PieChartPanel(props: PieChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, sort, mode },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n  const PADDING = chartsTheme.container.padding.default;\n  const chartId = useId('time-series-panel');\n  const categoricalPalette = chartsTheme.echartsTheme.color;\n\n  const { pieChartData, legendItems } = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const pieChartData: PieChartData[] = [];\n    const legendItems: LegendItem[] = [];\n\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      let seriesIndex = 0;\n      for (const seriesData of result?.data.series ?? []) {\n        const seriesColor = getSeriesColor({\n          categoricalPalette: categoricalPalette as string[],\n          muiPrimaryColor: muiTheme.palette.primary.main,\n          seriesName: seriesData.name,\n        });\n        const series = {\n          value: calculate(seriesData.values) ?? null,\n          name: seriesData.formattedName ?? '',\n          itemStyle: {\n            color: seriesColor,\n          },\n        };\n        pieChartData.push(series);\n\n        const seriesId = chartId + seriesData.name + seriesIndex;\n        legendItems.push({\n          id: seriesId,\n          label: series.name,\n          color: seriesColor,\n        });\n        seriesIndex++;\n      }\n    }\n\n    const sortedPieChartData = sortSeriesData(pieChartData, sort);\n    if (mode === 'percentage') {\n      return {\n        pieChartData: calculatePercentages(sortedPieChartData),\n        legendItems,\n      };\n    }\n    return {\n      pieChartData: sortedPieChartData,\n      legendItems,\n    };\n  }, [calculation, sort, mode, queryResults, categoricalPalette, muiTheme.palette.primary.main, chartId]);\n\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions?.width ?? 400}\n        height={adjustedContentDimensions?.height ?? 1000}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems,\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: [],\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              <PieChartBase\n                data={pieChartData}\n                width={contentDimensions.width - PADDING * 2}\n                height={contentDimensions.height - PADDING * 2}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","ContentWithLegend","useChartsTheme","useId","CalculationsMap","DEFAULT_LEGEND","validateLegendSpec","merge","useMemo","useRef","useState","getSeriesColor","calculatePercentages","sortSeriesData","PieChartBase","PieChartPanel","props","spec","calculation","sort","mode","contentDimensions","queryResults","chartsTheme","muiTheme","PADDING","container","padding","default","chartId","categoricalPalette","echartsTheme","color","pieChartData","legendItems","calculate","queryIndex","length","result","seriesIndex","seriesData","data","series","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","name","value","values","formattedName","itemStyle","push","seriesId","id","label","sortedPieChartData","contentPadding","adjustedContentDimensions","width","height","undefined","legend","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","chartRef","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","columns","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style"],"mappings":"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"}

package/lib/cjs/PieChartBase.js

@@ -0,0 +1,100 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PieChartBase", {
+    enumerable: true,
+    get: function() {
+        return PieChartBase;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _core = require("echarts/core");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _renderers = require("echarts/renderers");
+const _material = require("@mui/material");
+const _components1 = require("@perses-dev/components");
+(0, _core.use)([
+    _charts.PieChart,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.TitleComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+const PIE_WIN_WIDTH = 12;
+const PIE_GAP = 4;
+function PieChartBase(props) {
+    console.log(props);
+    const { width, height, data } = props;
+    const chartsTheme = (0, _components1.useChartsTheme)();
+    const option = {
+        title: {
+            text: 'Referer of a Website',
+            subtext: 'Fake Data',
+            left: 'center'
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        axisLabel: {
+            overflow: 'truncate',
+            width: width / 3
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: '55%',
+                label: false,
+                center: [
+                    '40%',
+                    '50%'
+                ],
+                data: data,
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ],
+        itemStyle: {
+            borderRadius: 2,
+            color: chartsTheme.echartsTheme[0]
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        style: {
+            width: width,
+            height: height
+        },
+        sx: {
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EChart, {
+            sx: {
+                minHeight: height,
+                height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%'
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+}

package/lib/cjs/PieChartPanel.js

@@ -28,25 +28,20 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
 const _react = require("react");
 const _palettegen = require("./palette-gen");
-const _piechartmodel = require("./pie-chart-model");
 const _utils = require("./utils");
+const _PieChartBase = require("./PieChartBase");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 function PieChartPanel(props) {
-    const { spec: { calculation, sort, mode, querySettings: querySettingsList }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, sort, mode }, contentDimensions, queryResults } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const muiTheme = (0, _material.useTheme)();
     const PADDING = chartsTheme.container.padding.default;
     const chartId = (0, _components.useId)('time-series-panel');
     const categoricalPalette = chartsTheme.echartsTheme.color;
-    const visual = (0, _react.useMemo)(()=>{
-        return (0, _merge.default)({}, _piechartmodel.DEFAULT_VISUAL, props.spec.visual);
-    }, [
-        props.spec.visual
-    ]);
     const { pieChartData, legendItems } = (0, _react.useMemo)(()=>{
         const calculate = _core.CalculationsMap[calculation];
         const pieChartData = [];
@@ -55,24 +50,10 @@ function PieChartPanel(props) {
             const result = queryResults[queryIndex];
             let seriesIndex = 0;
             for (const seriesData of result?.data.series ?? []){
-                // Retrieve querySettings for this query, if exists.
-                // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute
-                let querySettings;
-                for (const item of querySettingsList ?? []){
-                    if (item.queryIndex === queryIndex) {
-                        querySettings = item;
-                    // We don't break the loop here just in case there are multiple querySettings defined for the
-                    // same queryIndex, because in that case we want the last one to take precedence.
-                    }
-                }
                 const seriesColor = (0, _palettegen.getSeriesColor)({
                     categoricalPalette: categoricalPalette,
-                    visual,
                     muiPrimaryColor: muiTheme.palette.primary.main,
-                    seriesName: seriesData.name,
-                    seriesIndex,
-                    querySettings: querySettings,
-                    queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1
+                    seriesName: seriesData.name
                 });
                 const series = {
                     value: calculate(seriesData.values) ?? null,
@@ -108,10 +89,8 @@ function PieChartPanel(props) {
         mode,
         queryResults,
         categoricalPalette,
-        visual,
         muiTheme.palette.primary.main,
-        chartId,
-        querySettingsList
+        chartId
     ]);
     const contentPadding = chartsTheme.container.padding.default;
     const adjustedContentDimensions = contentDimensions ? {
@@ -165,7 +144,7 @@ function PieChartPanel(props) {
                         height,
                         width
                     },
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PieChart, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChartBase.PieChartBase, {
                         data: pieChartData,
                         width: contentDimensions.width - PADDING * 2,
                         height: contentDimensions.height - PADDING * 2

package/lib/cjs/palette-gen.js

@@ -36,22 +36,10 @@ _export(exports, {
 });
 const _palette = require("./palette");
 function getSeriesColor(props) {
-    const { categoricalPalette, visual, muiPrimaryColor, seriesName, seriesIndex, querySettings, queryHasMultipleResults } = props;
-    // Use color overrides defined in query settings in priority, if applicable
-    if (querySettings) {
-        if (querySettings.colorMode === 'fixed') {
-            return querySettings.colorValue;
-        } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults) {
-            return querySettings.colorValue;
-        }
-    }
+    const { categoricalPalette, muiPrimaryColor, seriesName } = props;
     // Fallback is unlikely to set unless echarts theme palette in charts theme provider is undefined.
     const fallbackColor = Array.isArray(categoricalPalette) && categoricalPalette[0] ? categoricalPalette[0] // Needed since echarts color property isn't always an array.
      : muiPrimaryColor;
-    // Explicit way to always cycle through classical palette instead of changing when based on number of series.
-    if (visual.palette?.mode === 'categorical') {
-        return getCategoricalPaletteColor(categoricalPalette, seriesIndex, fallbackColor);
-    }
     return getAutoPaletteColor(seriesName, fallbackColor);
 }
 function getAutoPaletteColor(name, fallbackColor) {

package/lib/cjs/pie-chart-model.js

@@ -21,94 +21,32 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DEFAULT_AREA_OPACITY: function() {
-        return DEFAULT_AREA_OPACITY;
-    },
-    DEFAULT_CONNECT_NULLS: function() {
-        return DEFAULT_CONNECT_NULLS;
-    },
     DEFAULT_FORMAT: function() {
         return DEFAULT_FORMAT;
     },
-    DEFAULT_LINE_WIDTH: function() {
-        return DEFAULT_LINE_WIDTH;
-    },
     DEFAULT_MODE: function() {
         return DEFAULT_MODE;
     },
-    DEFAULT_POINT_RADIUS: function() {
-        return DEFAULT_POINT_RADIUS;
-    },
     DEFAULT_SORT: function() {
         return DEFAULT_SORT;
     },
-    DEFAULT_VISUAL: function() {
-        return DEFAULT_VISUAL;
-    },
-    POINT_SIZE_OFFSET: function() {
-        return POINT_SIZE_OFFSET;
-    },
-    VISUAL_CONFIG: function() {
-        return VISUAL_CONFIG;
-    },
     createInitialPieChartOptions: function() {
         return createInitialPieChartOptions;
     }
 });
 const _core = require("@perses-dev/core");
-const DEFAULT_CONNECT_NULLS = false;
-const POINT_SIZE_OFFSET = 1.5;
 const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
 };
 const DEFAULT_SORT = 'desc';
 const DEFAULT_MODE = 'value';
-const DEFAULT_LINE_WIDTH = 1.25;
-const DEFAULT_AREA_OPACITY = 0;
-const DEFAULT_POINT_RADIUS = DEFAULT_LINE_WIDTH + POINT_SIZE_OFFSET;
-const VISUAL_CONFIG = {
-    lineWidth: {
-        label: 'Line Width',
-        testId: 'slider-line-width',
-        min: 0.25,
-        max: 3,
-        step: 0.25
-    },
-    pointRadius: {
-        label: 'Point Radius',
-        testId: 'slider-point-radius',
-        min: 0,
-        max: 6,
-        step: 0.25
-    },
-    areaOpacity: {
-        label: 'Area Opacity',
-        testId: 'slider-area-opacity',
-        min: 0,
-        max: 1,
-        step: 0.05
-    },
-    stack: {
-        label: 'Stack Series'
-    },
-    connectNulls: {
-        label: 'Connect Nulls'
-    }
-};
-const DEFAULT_VISUAL = {
-    lineWidth: DEFAULT_LINE_WIDTH,
-    areaOpacity: DEFAULT_AREA_OPACITY,
-    pointRadius: DEFAULT_POINT_RADIUS,
-    connectNulls: DEFAULT_CONNECT_NULLS
-};
 function createInitialPieChartOptions() {
     return {
         calculation: _core.DEFAULT_CALCULATION,
         format: DEFAULT_FORMAT,
         radius: 50,
         sort: DEFAULT_SORT,
-        mode: DEFAULT_MODE,
-        visual: DEFAULT_VISUAL
+        mode: DEFAULT_MODE
     };
 }

package/lib/palette-gen.d.ts

@@ -1,12 +1,7 @@
-import { ChartVisualOptions, QuerySettingsOptions } from './model';
 export interface SeriesColorProps {
     categoricalPalette: string[];
-    visual: ChartVisualOptions;
     muiPrimaryColor: string;
     seriesName: string;
-    seriesIndex: number;
-    querySettings?: QuerySettingsOptions;
-    queryHasMultipleResults?: boolean;
 }
 /**
  * Get line color as well as color for tooltip and legend, account for whether palette is 'categorical' or 'auto' aka generative

package/lib/palette-gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette-gen.d.ts","sourceRoot":"","sources":["../../src/palette-gen.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAGnE,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAgC9D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAI/E;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAUhH;AAKD,wBAAgB,4BAA4B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAExE"}
+{"version":3,"file":"palette-gen.d.ts","sourceRoot":"","sources":["../../src/palette-gen.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAU9D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAI/E;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAUhH;AAKD,wBAAgB,4BAA4B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAExE"}

package/lib/palette-gen.js

@@ -14,22 +14,10 @@ import { getConsistentColor } from './palette';
 /**
  * Get line color as well as color for tooltip and legend, account for whether palette is 'categorical' or 'auto' aka generative
  */ export function getSeriesColor(props) {
-    const { categoricalPalette, visual, muiPrimaryColor, seriesName, seriesIndex, querySettings, queryHasMultipleResults } = props;
-    // Use color overrides defined in query settings in priority, if applicable
-    if (querySettings) {
-        if (querySettings.colorMode === 'fixed') {
-            return querySettings.colorValue;
-        } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults) {
-            return querySettings.colorValue;
-        }
-    }
+    const { categoricalPalette, muiPrimaryColor, seriesName } = props;
     // Fallback is unlikely to set unless echarts theme palette in charts theme provider is undefined.
     const fallbackColor = Array.isArray(categoricalPalette) && categoricalPalette[0] ? categoricalPalette[0] // Needed since echarts color property isn't always an array.
      : muiPrimaryColor;
-    // Explicit way to always cycle through classical palette instead of changing when based on number of series.
-    if (visual.palette?.mode === 'categorical') {
-        return getCategoricalPaletteColor(categoricalPalette, seriesIndex, fallbackColor);
-    }
     return getAutoPaletteColor(seriesName, fallbackColor);
 }
 /**