@perses-dev/bar-chart-plugin 0.6.1 → 0.7.0

package/__mf/js/async/__federation_expose_BarChart.4fe4d1a3.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkBarChart=self.webpackChunkBarChart||[]).push([["163"],{14046:function(e,t,n){n.d(t,{K2:()=>a,c7:()=>r,gO:()=>i});let a="last",r={first:function(e){return l(e,"first")},last:function(e){return l(e,"last")},"first-number":function(e){return l(e,"first-number")},"last-number":function(e){return l(e,"last-number")},mean:function(e){return l(e,"mean")},sum:function(e){return l(e,"sum")},min:function(e){return l(e,"min")},max:function(e){return l(e,"max")}},i={first:{label:"First",description:"First value"},last:{label:"Last",description:"Last value"},"first-number":{label:"First *",description:"First numeric value"},"last-number":{label:"Last *",description:"Last numeric value"},mean:{label:"Avg",description:"Average value excluding nulls"},sum:{label:"Sum",description:"The sum of all values"},min:{label:"Min",description:"Minimum value"},max:{label:"Max",description:"Maximum value"}};function l(e,t){return function(e,t){let n=t.reduce((e,t)=>(e[t]=void 0,e),{}),a=0,r=0;return e.forEach((t,i)=>{let l=t[1];0===i&&"first"in n&&(n.first=l),i===e.length-1&&"last"in n&&(n.last=l),"number"==typeof l&&(a+=1,r+=l,"first-number"in n&&void 0===n["first-number"]&&(n["first-number"]=l),"last-number"in n&&(n["last-number"]=l),"min"in n&&("number"!=typeof n.min?n.min=l:n.min=Math.min(n.min,l)),"max"in n&&("number"!=typeof n.max?n.max=l:n.max=Math.max(n.max,l)))}),a>0&&"sum"in n&&(n.sum=r),a>0&&"mean"in n&&(n.mean=r/a),n}(e,[t])[t]}},70424:function(e,t,n){n.r(t),n.d(t,{BarChart:()=>O});var a=n(14046);let r={unit:"decimal",shortValues:!0},i="desc",l="value";var u=n(24246),o=n(48565),s=n(83941),c=n(74664),m=n(27463),d=n(96494),h=n(15409),p=n.n(h),f=n(36372),v=n(8218),b=n(36232),x=n(508),g=n(65201),C=n(99635),y=n(23709),j=n(67745),w=n(50378);function M(e){let{width:t,height:n,data:a,format:r={unit:"decimal"},mode:i="value"}=e,l=(0,s.useChartsTheme)(),o=(0,v.useMemo)(()=>{if(!a||!a.length)return l.noDataOption;let e=[];return a.map(t=>{e.push([t.label,t.value])}),{title:{show:!1},dataset:[{dimensions:["label","value"],source:e}],xAxis:(0,s.getFormattedAxis)({},r),yAxis:{type:"category",splitLine:{show:!1},axisLabel:{overflow:"truncate",width:t/3}},series:{type:"bar",label:{show:!0,position:"right",formatter:e=>e.data[1]?"percentage"===i?(0,c.Bw)(e.data[1],{unit:"percent",decimalPlaces:r.decimalPlaces}):(0,c.Bw)(e.data[1],r):void 0,barMinWidth:14,barCategoryGap:6},itemStyle:{borderRadius:4,color:l.echartsTheme[0]}},tooltip:{appendToBody:!0,confine:!0,formatter:e=>e.data[1]&&`<b>${e.name}</b> &emsp; ${(0,c.Bw)(e.data[1],r)}`},grid:{left:"5%",right:"5%"}}},[a,l,t,i,r]);return(0,u.jsx)(f.Z,{style:{width:t,height:n},sx:{overflow:"auto"},children:(0,u.jsx)(s.EChart,{sx:{minHeight:n,height:a?20*a.length:"100%"},option:o,theme:l.echartsTheme})})}(0,b.D)([x.N,g.N,C.N,y.N,j.N,w.N]);let O={PanelComponent:function(e){let{spec:{calculation:t,format:n,sort:r,mode:l},contentDimensions:o,queryResults:c}=e,m=(0,s.useChartsTheme)().container.padding.default,d=(0,v.useMemo)(()=>{let e=a.c7[t],n=[];for(let t of c)for(let a of t.data.series){let t={value:e(a.values)??null,label:a.formattedName??""};n.push(t)}let u=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:i;return"asc"===t?e.sort((e,t)=>null===e.value?1:null===t.value?-1:e.value===t.value?0:e.value<t.value?1:-1):e.sort((e,t)=>null===e.value?-1:null===t.value?1:e.value===t.value?0:e.value<t.value?-1:1)}(n,r);return"percentage"===l?function(e){let t=e.reduce((e,t)=>{let{value:n}=t;return e+(n??0)},0);return e.map(e=>{let n=(e.value??0)/t*100;return{...e,value:n}})}(u):u},[c,r,l,t]);return void 0===o?null:(0,u.jsx)(f.Z,{sx:{padding:`${m}px`},children:(0,u.jsx)(M,{width:o.width-2*m,height:o.height-2*m,data:d,format:n,mode:l})})},panelOptionsEditorComponents:[{label:"Settings",content:function(e){let{onChange:t,value:n}=e,h=p()({},r,n.format);return(0,u.jsxs)(s.OptionsEditorGrid,{children:[(0,u.jsx)(s.OptionsEditorColumn,{children:(0,u.jsxs)(s.OptionsEditorGroup,{title:"Misc",children:[(0,u.jsx)(s.FormatControls,{value:h,onChange:e=>{t((0,d.produce)(n,t=>{t.format=e}))},disabled:"percentage"===n.mode}),(0,u.jsx)(m.CalculationSelector,{value:n.calculation,onChange:e=>{t((0,d.produce)(n,t=>{t.calculation=e}))}}),(0,u.jsx)(s.SortSelector,{value:n.sort,onChange:e=>{t((0,d.produce)(n,t=>{t.sort=e}))}}),(0,u.jsx)(s.ModeSelector,{value:n.mode,onChange:e=>{t((0,d.produce)(n,t=>{t.mode=e}))},disablePercentageMode:(0,c.PX)(h)})]})}),(0,u.jsx)(s.OptionsEditorColumn,{children:(0,u.jsx)(s.OptionsEditorGroup,{title:"Reset Settings",children:(0,u.jsx)(o.Z,{variant:"outlined",color:"secondary",onClick:()=>{t((0,d.produce)(n,e=>{e.calculation=a.K2,e.format=r,e.sort=i,e.mode=l}))},children:"Reset To Defaults"})})})]})}}],supportedQueryTypes:["TimeSeriesQuery"],createInitialOptions:function(){return{calculation:a.K2,format:r,sort:i,mode:l}}}}}]);

package/__mf/js/main.ac95f394.js

@@ -0,0 +1 @@
+(()=>{var e={5311:function(e,r,t){Promise.all([t.e("114"),t.e("131"),t.e("620")]).then(t.bind(t,29161))}},r={};function t(n){var a=r[n];if(void 0!==a)return a.exports;var o=r[n]={id:n,loaded:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}t.m=e,t.c=r,t.federation||(t.federation={chunkMatcher:function(e){return!/^(1(14|26|31|57)|263|494|655|667|71|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:"c524d5f3",162:"5c4c80cc",173:"de56afb5",214:"39425df9",224:"02bf0727",238:"2c28749b",292:"fc25f0b4",296:"4e6e1192",331:"987fc9d1",360:"49d19c17",552:"35c9929e",553:"cebe1061",610:"18610b4a",620:"1ddf3cfa",623:"a42c5576",656:"ebaf4c29",679:"4c9ca4ca",69:"5f20cd9b",694:"f18442c5",738:"0b38462b",740:"bd4a2dd3",75:"602a691f",762:"0d4292e6",770:"a4ed49b7",774:"6d4b81a0",790:"23e35958",802:"393c9711",929:"4de7287b",930:"7db974d8",960:"07c2f8a6",964:"d446c7a1",981:"d5ccd920"})[e]+".js",t.miniCssF=e=>"__mf/css/async/"+e+"."+({263:"1f61a808",759:"1f61a808"})[e]+".css",t.h=()=>"dddcc5828fd737a8",(()=>{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="BarChart:";t.l=function(n,a,o,i){if(e[n]){e[n].push(a);return}if(void 0!==o)for(var s,l,c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var u=c[d];if(u.getAttribute("src")==n||u.getAttribute("data-webpack")==r+o){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+o),s.src=n),e[n]=[a];var f=function(r,t){s.onerror=s.onload=null,clearTimeout(h);var a=e[n];if(delete e[n],s.parentNode&&s.parentNode.removeChild(s),a&&a.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,a,o)=>{if(n){o=o||0;for(var i=e.length;i>0&&e[i-1][2]>o;i--)e[i]=e[i-1];e[i]=[n,a,o];return}for(var s=1/0,i=0;i<e.length;i++){for(var[n,a,o]=e[i],l=!0,c=0;c<n.length;c++)(!1&o||s>=o)&&Object.keys(t.O).every(e=>t.O[e](n[c]))?n.splice(c--,1):(l=!1,o<s&&(s=o));if(l){e.splice(i--,1);var d=a();void 0!==d&&(r=d)}}return r}})(),t.p="/plugins/BarChart/",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("114"),t.e("930")]).then(()=>()=>t(96434)),eager:0,singleton:1,requiredVersion:"^11.11.3"},{name:"@emotion/styled",version:"11.14.0",factory:()=>Promise.all([t.e("114"),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("114"),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("679"),t.e("802"),t.e("552"),t.e("69"),t.e("360"),t.e("331"),t.e("762"),t.e("114"),t.e("131"),t.e("157"),t.e("71"),t.e("946"),t.e("126"),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("802"),t.e("69"),t.e("762"),t.e("162"),t.e("114"),t.e("131"),t.e("157"),t.e("71"),t.e("946"),t.e("655"),t.e("667"),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("679"),t.e("552"),t.e("610")]).then(()=>()=>t(2138)),eager:0,singleton:1},{name:"immer",version:"10.1.1",factory:()=>t.e("774").then(()=>()=>t(75586)),eager:0,singleton:1},{name:"lodash",version:"4.17.21",factory:()=>t.e("981").then(()=>()=>t(98784)),eager:0,singleton:1},{name:"mdi-material-ui",version:"7.9.3",factory:()=>Promise.all([t.e("69"),t.e("296"),t.e("114"),t.e("157"),t.e("946"),t.e("929")]).then(()=>()=>t(61157)),eager:0,singleton:1,requiredVersion:"^7.4.0"},{name:"react-dom",version:"18.3.1",factory:()=>Promise.all([t.e("173"),t.e("114")]).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"},{name:"use-resize-observer",version:"9.1.0",factory:()=>Promise.all([t.e("114"),t.e("553")]).then(()=>()=>t(75276)),eager:0,singleton:1,requiredVersion:"^9.1.0"}]},uniqueName:"BarChart"},t.I=t.I||function(){throw Error("should have __webpack_require__.I")},t.consumesLoadingData={chunkMapping:{126:["99010"],655:["68393","74614","99765","55352","58118","57751","30156","55922","84275","3553"],114:["8218"],71:["4665","20461","4338"],946:["45913"],494:["57871"],131:["28830"],157:["72116"],667:["96494"]},moduleIdToConsumeDataMapping:{57751:{shareScope:"default",shareKey:"@perses-dev/plugin-system",import:"@perses-dev/plugin-system",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>()=>t(57910)},30156:{shareScope:"default",shareKey:"echarts",import:"echarts",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("679"),t.e("552"),t.e("610")]).then(()=>()=>t(2138))},99010:{shareScope:"default",shareKey:"immer",import:"immer",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("774").then(()=>()=>t(75586))},96494:{shareScope:"default",shareKey:"immer",import:"immer",requiredVersion:"^10.1.1",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("774").then(()=>()=>t(75586))},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))},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("679"),t.e("552"),t.e("360"),t.e("331"),t.e("126"),t.e("263")]).then(()=>()=>t(13425))},74614:{shareScope:"default",shareKey:"lodash",import:"lodash",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("981").then(()=>()=>t(98784))},55922:{shareScope:"default",shareKey:"@emotion/styled",import:"@emotion/styled",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("770").then(()=>()=>t(51958))},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))},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))},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)},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))},28830:{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))},55352:{shareScope:"default",shareKey:"immer",import:"immer",requiredVersion:">=8.0.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("774").then(()=>()=>t(75586))},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))},99765:{shareScope:"default",shareKey:"mdi-material-ui",import:"mdi-material-ui",requiredVersion:"^7.4.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("296").then(()=>()=>t(61157))},4338:{shareScope:"default",shareKey:"use-resize-observer",import:"use-resize-observer",requiredVersion:"^9.1.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("623").then(()=>()=>t(75276))},58118:{shareScope:"default",shareKey:"immer",import:"immer",requiredVersion:">=9.0.6",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("774").then(()=>()=>t(75586))},8218:{shareScope:"default",shareKey:"react",import:"react",requiredVersion:"^18.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("964").then(()=>()=>t(27378))},45913:{shareScope:"default",shareKey:"@emotion/styled",import:"@emotion/styled",requiredVersion:"^11.3.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("790").then(()=>()=>t(51958))}},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,a,o){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)a();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),o(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 a=t[n],o=a.getAttribute("data-href")||a.getAttribute("href");if("stylesheet"===a.rel&&(o===e||o===r))return a}for(var i=document.getElementsByTagName("style"),n=0;n<i.length;n++){var a=i[n],o=a.getAttribute("data-href");if(o===e||o===r)return a}},n={909:0};t.f.miniCss=function(a,o){if(n[a])o.push(n[a]);else if(0!==n[a]&&({263:1,759:1})[a])o.push(n[a]=new Promise(function(n,o){var i=t.miniCssF(a),s=t.p+i;if(r(i,s))return n();e(a,s,null,n,o)}).then(function(){n[a]=0},function(e){throw delete n[a],e}))}}})(),(()=>{var e={909:0};t.f.j=function(r,n){var a=t.o(e,r)?e[r]:void 0;if(0!==a){if(a)n.push(a[2]);else if(/^(1(14|26|31|57)|263|494|655|667|71|759|946)$/.test(r))e[r]=0;else{var o=new Promise((t,n)=>a=e[r]=[t,n]);n.push(a[2]=o);var i=t.p+t.u(r),s=Error();t.l(i,function(n){if(t.o(e,r)&&(0!==(a=e[r])&&(e[r]=void 0),a)){var o=n&&("load"===n.type?"missing":n.type),i=n&&n.target&&n.target.src;s.message="Loading chunk "+r+" failed.\n("+o+": "+i+")",s.name="ChunkLoadError",s.type=o,s.request=i,a[1](s)}},"chunk-"+r,r)}}},t.O.j=r=>0===e[r];var r=(r,n)=>{var a,o,[i,s,l]=n,c=0;if(i.some(r=>0!==e[r])){for(a in s)t.o(s,a)&&(t.m[a]=s[a]);if(l)var d=l(t)}for(r&&r(n);c<i.length;c++)o=i[c],t.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return t.O(d)},n=self.webpackChunkBarChart=self.webpackChunkBarChart||[];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,["590"],function(){return t(13443)});var n=t.O(void 0,["590"],function(){return t(5311)});n=t.O(n)})();

package/lib/BarChartBase.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { ModeOption } from '@perses-dev/components';
+import { FormatOptions } from '@perses-dev/core';
+export interface BarChartData {
+    label: string;
+    value: number | null;
+}
+export interface BarChartBaseProps {
+    width: number;
+    height: number;
+    data: BarChartData[] | null;
+    format?: FormatOptions;
+    mode?: ModeOption;
+}
+export declare function BarChartBase(props: BarChartBaseProps): ReactElement;
+//# sourceMappingURL=BarChartBase.d.ts.map

package/lib/BarChartBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartBase.d.ts","sourceRoot":"","sources":["../../src/BarChartBase.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAU,UAAU,EAAoC,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAe,MAAM,kBAAkB,CAAC;AAY9D,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,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,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA2FnE"}

package/lib/BarChartBase.js

@@ -0,0 +1,132 @@
+// Copyright 2023 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 { useMemo } from 'react';
+import { EChart, getFormattedAxis, useChartsTheme } from '@perses-dev/components';
+import { formatValue } from '@perses-dev/core';
+import { use } from 'echarts/core';
+import { BarChart as EChartsBarChart } from 'echarts/charts';
+import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { Box } from '@mui/material';
+use([
+    EChartsBarChart,
+    GridComponent,
+    DatasetComponent,
+    TitleComponent,
+    TooltipComponent,
+    CanvasRenderer
+]);
+const BAR_WIN_WIDTH = 14;
+const BAR_GAP = 6;
+export function BarChartBase(props) {
+    const { width, height, data, format = {
+        unit: 'decimal'
+    }, mode = 'value' } = props;
+    const chartsTheme = useChartsTheme();
+    const option = useMemo(()=>{
+        if (!data || !data.length) return chartsTheme.noDataOption;
+        const source = [];
+        data.map((d)=>{
+            source.push([
+                d.label,
+                d.value
+            ]);
+        });
+        return {
+            title: {
+                show: false
+            },
+            dataset: [
+                {
+                    dimensions: [
+                        'label',
+                        'value'
+                    ],
+                    source: source
+                }
+            ],
+            xAxis: getFormattedAxis({}, format),
+            yAxis: {
+                type: 'category',
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    overflow: 'truncate',
+                    width: width / 3
+                }
+            },
+            series: {
+                type: 'bar',
+                label: {
+                    show: true,
+                    position: 'right',
+                    formatter: (params)=>{
+                        if (!params.data[1]) {
+                            return undefined;
+                        }
+                        if (mode === 'percentage') {
+                            return formatValue(params.data[1], {
+                                unit: 'percent',
+                                decimalPlaces: format.decimalPlaces
+                            });
+                        }
+                        return formatValue(params.data[1], format);
+                    },
+                    barMinWidth: BAR_WIN_WIDTH,
+                    barCategoryGap: BAR_GAP
+                },
+                itemStyle: {
+                    borderRadius: 4,
+                    color: chartsTheme.echartsTheme[0]
+                }
+            },
+            tooltip: {
+                appendToBody: true,
+                confine: true,
+                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], format)}`
+            },
+            // increase distance between grid and container to prevent y axis labels from getting cut off
+            grid: {
+                left: '5%',
+                right: '5%'
+            }
+        };
+    }, [
+        data,
+        chartsTheme,
+        width,
+        mode,
+        format
+    ]);
+    return /*#__PURE__*/ _jsx(Box, {
+        style: {
+            width: width,
+            height: height
+        },
+        sx: {
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ _jsx(EChart, {
+            sx: {
+                minHeight: height,
+                height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%'
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+}
+
+//# sourceMappingURL=BarChartBase.js.map

package/lib/BarChartBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/BarChartBase.tsx"],"sourcesContent":["// Copyright 2023 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 { ReactElement, useMemo } from 'react';\nimport { EChart, ModeOption, getFormattedAxis, useChartsTheme } from '@perses-dev/components';\nimport { FormatOptions, formatValue } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { BarChart as EChartsBarChart } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\n\nuse([EChartsBarChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst BAR_WIN_WIDTH = 14;\nconst BAR_GAP = 6;\n\nexport interface BarChartData {\n  label: string;\n  value: number | null;\n}\n\nexport interface BarChartBaseProps {\n  width: number;\n  height: number;\n  data: BarChartData[] | null;\n  format?: FormatOptions;\n  mode?: ModeOption;\n}\n\nexport function BarChartBase(props: BarChartBaseProps): ReactElement {\n  const { width, height, data, format = { unit: 'decimal' }, mode = 'value' } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (!data || !data.length) return chartsTheme.noDataOption;\n\n    const source: Array<Array<BarChartData['label'] | BarChartData['value']>> = [];\n    data.map((d) => {\n      source.push([d.label, d.value]);\n    });\n\n    return {\n      title: {\n        show: false,\n      },\n      dataset: [\n        {\n          dimensions: ['label', 'value'],\n          source: source,\n        },\n      ],\n      xAxis: getFormattedAxis({}, format),\n      yAxis: {\n        type: 'category',\n        splitLine: {\n          show: false,\n        },\n        axisLabel: {\n          overflow: 'truncate',\n          width: width / 3,\n        },\n      },\n      series: {\n        type: 'bar',\n        label: {\n          show: true,\n          position: 'right',\n          formatter: (params: { data: number[] }): string | undefined => {\n            if (!params.data[1]) {\n              return undefined;\n            }\n\n            if (mode === 'percentage') {\n              return formatValue(params.data[1]!, {\n                unit: 'percent',\n                decimalPlaces: format.decimalPlaces,\n              });\n            }\n            return formatValue(params.data[1], format);\n          },\n          barMinWidth: BAR_WIN_WIDTH,\n          barCategoryGap: BAR_GAP,\n        },\n        itemStyle: {\n          borderRadius: 4,\n          color: chartsTheme.echartsTheme[0],\n        },\n      },\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: { name: string; data: number[] }) =>\n          params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], format)}`,\n      },\n      // increase distance between grid and container to prevent y axis labels from getting cut off\n      grid: {\n        left: '5%',\n        right: '5%',\n      },\n    };\n  }, [data, chartsTheme, width, mode, format]);\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 * (BAR_WIN_WIDTH + BAR_GAP) : '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","EChart","getFormattedAxis","useChartsTheme","formatValue","use","BarChart","EChartsBarChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","BAR_WIN_WIDTH","BAR_GAP","BarChartBase","props","width","height","data","format","unit","mode","chartsTheme","option","length","noDataOption","source","map","d","push","label","value","title","show","dataset","dimensions","xAxis","yAxis","type","splitLine","axisLabel","overflow","series","position","formatter","params","undefined","decimalPlaces","barMinWidth","barCategoryGap","itemStyle","borderRadius","color","echartsTheme","tooltip","appendToBody","confine","name","grid","left","right","style","sx","minHeight","theme"],"mappings":"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"}

package/lib/BarChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartPanel.d.ts","sourceRoot":"","sources":["../../src/BarChartPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAoC,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CA4C5E"}
+{"version":3,"file":"BarChartPanel.d.ts","sourceRoot":"","sources":["../../src/BarChartPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAoC,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,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,CA4C5E"}

package/lib/BarChartPanel.js

@@ -11,11 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BarChart, useChartsTheme } from '@perses-dev/components';
+import { useChartsTheme } from '@perses-dev/components';
 import { Box } from '@mui/material';
 import { useMemo } from 'react';
 import { CalculationsMap } from '@perses-dev/core';
 import { calculatePercentages, sortSeriesData } from './utils';
+import { BarChartBase } from './BarChartBase';
 export function BarChartPanel(props) {
     const { spec: { calculation, format, sort, mode }, contentDimensions, queryResults } = props;
     const chartsTheme = useChartsTheme();
@@ -49,7 +50,7 @@ export function BarChartPanel(props) {
         sx: {
             padding: `${PADDING}px`
         },
-        children: /*#__PURE__*/ _jsx(BarChart, {
+        children: /*#__PURE__*/ _jsx(BarChartBase, {
             width: contentDimensions.width - PADDING * 2,
             height: contentDimensions.height - PADDING * 2,
             data: barChartData,

package/lib/BarChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/BarChartPanel.tsx"],"sourcesContent":["// Copyright 2023 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 { BarChart, BarChartData, useChartsTheme } from '@perses-dev/components';\nimport { Box } from '@mui/material';\nimport { ReactElement, useMemo } from 'react';\nimport { CalculationType, CalculationsMap, TimeSeriesData } from '@perses-dev/core';\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { BarChartOptions } from './bar-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\n\nexport type BarChartPanelProps = PanelProps<BarChartOptions, TimeSeriesData>;\n\nexport function BarChartPanel(props: BarChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, format, sort, mode },\n    contentDimensions,\n    queryResults,\n  } = props;\n\n  const chartsTheme = useChartsTheme();\n  const PADDING = chartsTheme.container.padding.default;\n\n  const barChartData: BarChartData[] = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const barChartData: BarChartData[] = [];\n    for (const result of queryResults) {\n      for (const seriesData of result.data.series) {\n        const series = {\n          value: calculate(seriesData.values) ?? null,\n          label: seriesData.formattedName ?? '',\n        };\n        barChartData.push(series);\n      }\n    }\n\n    const sortedBarChartData = sortSeriesData(barChartData, sort);\n    if (mode === 'percentage') {\n      return calculatePercentages(sortedBarChartData);\n    } else {\n      return sortedBarChartData;\n    }\n  }, [queryResults, sort, mode, calculation]);\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <BarChart\n        width={contentDimensions.width - PADDING * 2}\n        height={contentDimensions.height - PADDING * 2}\n        data={barChartData}\n        format={format}\n        mode={mode}\n      />\n    </Box>\n  );\n}\n"],"names":["BarChart","useChartsTheme","Box","useMemo","CalculationsMap","calculatePercentages","sortSeriesData","BarChartPanel","props","spec","calculation","format","sort","mode","contentDimensions","queryResults","chartsTheme","PADDING","container","padding","default","barChartData","calculate","result","seriesData","data","series","value","values","label","formattedName","push","sortedBarChartData","undefined","sx","width","height"],"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,QAAQ,EAAgBC,cAAc,QAAQ,yBAAyB;AAChF,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAA0BC,eAAe,QAAwB,mBAAmB;AAGpF,SAASC,oBAAoB,EAAEC,cAAc,QAAQ,UAAU;AAI/D,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,EACzCC,iBAAiB,EACjBC,YAAY,EACb,GAAGP;IAEJ,MAAMQ,cAAcf;IACpB,MAAMgB,UAAUD,YAAYE,SAAS,CAACC,OAAO,CAACC,OAAO;IAErD,MAAMC,eAA+BlB,QAAQ;QAC3C,MAAMmB,YAAYlB,eAAe,CAACM,YAA+B;QACjE,MAAMW,eAA+B,EAAE;QACvC,KAAK,MAAME,UAAUR,aAAc;YACjC,KAAK,MAAMS,cAAcD,OAAOE,IAAI,CAACC,MAAM,CAAE;gBAC3C,MAAMA,SAAS;oBACbC,OAAOL,UAAUE,WAAWI,MAAM,KAAK;oBACvCC,OAAOL,WAAWM,aAAa,IAAI;gBACrC;gBACAT,aAAaU,IAAI,CAACL;YACpB;QACF;QAEA,MAAMM,qBAAqB1B,eAAee,cAAcT;QACxD,IAAIC,SAAS,cAAc;YACzB,OAAOR,qBAAqB2B;QAC9B,OAAO;YACL,OAAOA;QACT;IACF,GAAG;QAACjB;QAAcH;QAAMC;QAAMH;KAAY;IAE1C,IAAII,sBAAsBmB,WAAW,OAAO;IAE5C,qBACE,KAAC/B;QAAIgC,IAAI;YAAEf,SAAS,GAAGF,QAAQ,EAAE,CAAC;QAAC;kBACjC,cAAA,KAACjB;YACCmC,OAAOrB,kBAAkBqB,KAAK,GAAGlB,UAAU;YAC3CmB,QAAQtB,kBAAkBsB,MAAM,GAAGnB,UAAU;YAC7CQ,MAAMJ;YACNV,QAAQA;YACRE,MAAMA;;;AAId"}
+{"version":3,"sources":["../../src/BarChartPanel.tsx"],"sourcesContent":["// Copyright 2023 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 { useChartsTheme } from '@perses-dev/components';\nimport { Box } from '@mui/material';\nimport { ReactElement, useMemo } from 'react';\nimport { CalculationType, CalculationsMap, TimeSeriesData } from '@perses-dev/core';\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { BarChartOptions } from './bar-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\nimport { BarChartBase, BarChartData } from './BarChartBase';\n\nexport type BarChartPanelProps = PanelProps<BarChartOptions, TimeSeriesData>;\n\nexport function BarChartPanel(props: BarChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, format, sort, mode },\n    contentDimensions,\n    queryResults,\n  } = props;\n\n  const chartsTheme = useChartsTheme();\n  const PADDING = chartsTheme.container.padding.default;\n\n  const barChartData: BarChartData[] = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const barChartData: BarChartData[] = [];\n    for (const result of queryResults) {\n      for (const seriesData of result.data.series) {\n        const series = {\n          value: calculate(seriesData.values) ?? null,\n          label: seriesData.formattedName ?? '',\n        };\n        barChartData.push(series);\n      }\n    }\n\n    const sortedBarChartData = sortSeriesData(barChartData, sort);\n    if (mode === 'percentage') {\n      return calculatePercentages(sortedBarChartData);\n    } else {\n      return sortedBarChartData;\n    }\n  }, [queryResults, sort, mode, calculation]);\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <BarChartBase\n        width={contentDimensions.width - PADDING * 2}\n        height={contentDimensions.height - PADDING * 2}\n        data={barChartData}\n        format={format}\n        mode={mode}\n      />\n    </Box>\n  );\n}\n"],"names":["useChartsTheme","Box","useMemo","CalculationsMap","calculatePercentages","sortSeriesData","BarChartBase","BarChartPanel","props","spec","calculation","format","sort","mode","contentDimensions","queryResults","chartsTheme","PADDING","container","padding","default","barChartData","calculate","result","seriesData","data","series","value","values","label","formattedName","push","sortedBarChartData","undefined","sx","width","height"],"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,cAAc,QAAQ,yBAAyB;AACxD,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAA0BC,eAAe,QAAwB,mBAAmB;AAGpF,SAASC,oBAAoB,EAAEC,cAAc,QAAQ,UAAU;AAC/D,SAASC,YAAY,QAAsB,iBAAiB;AAI5D,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,EACzCC,iBAAiB,EACjBC,YAAY,EACb,GAAGP;IAEJ,MAAMQ,cAAchB;IACpB,MAAMiB,UAAUD,YAAYE,SAAS,CAACC,OAAO,CAACC,OAAO;IAErD,MAAMC,eAA+BnB,QAAQ;QAC3C,MAAMoB,YAAYnB,eAAe,CAACO,YAA+B;QACjE,MAAMW,eAA+B,EAAE;QACvC,KAAK,MAAME,UAAUR,aAAc;YACjC,KAAK,MAAMS,cAAcD,OAAOE,IAAI,CAACC,MAAM,CAAE;gBAC3C,MAAMA,SAAS;oBACbC,OAAOL,UAAUE,WAAWI,MAAM,KAAK;oBACvCC,OAAOL,WAAWM,aAAa,IAAI;gBACrC;gBACAT,aAAaU,IAAI,CAACL;YACpB;QACF;QAEA,MAAMM,qBAAqB3B,eAAegB,cAAcT;QACxD,IAAIC,SAAS,cAAc;YACzB,OAAOT,qBAAqB4B;QAC9B,OAAO;YACL,OAAOA;QACT;IACF,GAAG;QAACjB;QAAcH;QAAMC;QAAMH;KAAY;IAE1C,IAAII,sBAAsBmB,WAAW,OAAO;IAE5C,qBACE,KAAChC;QAAIiC,IAAI;YAAEf,SAAS,GAAGF,QAAQ,EAAE,CAAC;QAAC;kBACjC,cAAA,KAACX;YACC6B,OAAOrB,kBAAkBqB,KAAK,GAAGlB,UAAU;YAC3CmB,QAAQtB,kBAAkBsB,MAAM,GAAGnB,UAAU;YAC7CQ,MAAMJ;YACNV,QAAQA;YACRE,MAAMA;;;AAId"}

package/lib/cjs/BarChartBase.js

@@ -0,0 +1,140 @@
+// Copyright 2023 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, "BarChartBase", {
+    enumerable: true,
+    get: function() {
+        return BarChartBase;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _components = require("@perses-dev/components");
+const _core = require("@perses-dev/core");
+const _core1 = require("echarts/core");
+const _charts = require("echarts/charts");
+const _components1 = require("echarts/components");
+const _renderers = require("echarts/renderers");
+const _material = require("@mui/material");
+(0, _core1.use)([
+    _charts.BarChart,
+    _components1.GridComponent,
+    _components1.DatasetComponent,
+    _components1.TitleComponent,
+    _components1.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+const BAR_WIN_WIDTH = 14;
+const BAR_GAP = 6;
+function BarChartBase(props) {
+    const { width, height, data, format = {
+        unit: 'decimal'
+    }, mode = 'value' } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const option = (0, _react.useMemo)(()=>{
+        if (!data || !data.length) return chartsTheme.noDataOption;
+        const source = [];
+        data.map((d)=>{
+            source.push([
+                d.label,
+                d.value
+            ]);
+        });
+        return {
+            title: {
+                show: false
+            },
+            dataset: [
+                {
+                    dimensions: [
+                        'label',
+                        'value'
+                    ],
+                    source: source
+                }
+            ],
+            xAxis: (0, _components.getFormattedAxis)({}, format),
+            yAxis: {
+                type: 'category',
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    overflow: 'truncate',
+                    width: width / 3
+                }
+            },
+            series: {
+                type: 'bar',
+                label: {
+                    show: true,
+                    position: 'right',
+                    formatter: (params)=>{
+                        if (!params.data[1]) {
+                            return undefined;
+                        }
+                        if (mode === 'percentage') {
+                            return (0, _core.formatValue)(params.data[1], {
+                                unit: 'percent',
+                                decimalPlaces: format.decimalPlaces
+                            });
+                        }
+                        return (0, _core.formatValue)(params.data[1], format);
+                    },
+                    barMinWidth: BAR_WIN_WIDTH,
+                    barCategoryGap: BAR_GAP
+                },
+                itemStyle: {
+                    borderRadius: 4,
+                    color: chartsTheme.echartsTheme[0]
+                }
+            },
+            tooltip: {
+                appendToBody: true,
+                confine: true,
+                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${(0, _core.formatValue)(params.data[1], format)}`
+            },
+            // increase distance between grid and container to prevent y axis labels from getting cut off
+            grid: {
+                left: '5%',
+                right: '5%'
+            }
+        };
+    }, [
+        data,
+        chartsTheme,
+        width,
+        mode,
+        format
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        style: {
+            width: width,
+            height: height
+        },
+        sx: {
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EChart, {
+            sx: {
+                minHeight: height,
+                height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%'
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+}

package/lib/cjs/BarChartPanel.js

@@ -26,6 +26,7 @@ const _material = require("@mui/material");
 const _react = require("react");
 const _core = require("@perses-dev/core");
 const _utils = require("./utils");
+const _BarChartBase = require("./BarChartBase");
 function BarChartPanel(props) {
     const { spec: { calculation, format, sort, mode }, contentDimensions, queryResults } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
@@ -59,7 +60,7 @@ function BarChartPanel(props) {
         sx: {
             padding: `${PADDING}px`
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.BarChart, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_BarChartBase.BarChartBase, {
             width: contentDimensions.width - PADDING * 2,
             height: contentDimensions.height - PADDING * 2,
             data: barChartData,

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "BarChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.6.1",
+      "buildVersion": "0.7.0",
       "buildName": "@perses-dev/bar-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/BarChart.2c8c7b6f.js",
+      "name": "__mf/js/BarChart.d4f68948.js",
       "path": "",
       "type": "global"
     },
@@ -138,12 +138,13 @@
             "__mf/js/async/238.2c28749b.js",
             "__mf/js/async/75.602a691f.js",
             "__mf/js/async/623.a42c5576.js",
-            "__mf/js/async/996.2287354b.js",
+            "__mf/js/async/679.4c9ca4ca.js",
+            "__mf/js/async/552.35c9929e.js",
             "__mf/js/async/360.49d19c17.js",
             "__mf/js/async/331.987fc9d1.js",
             "__mf/js/async/774.6d4b81a0.js",
             "__mf/js/async/738.0b38462b.js",
-            "__mf/js/async/610.4fdfae13.js",
+            "__mf/js/async/610.18610b4a.js",
             "__mf/js/async/981.d5ccd920.js",
             "__mf/js/async/770.a4ed49b7.js",
             "__mf/js/async/296.4e6e1192.js"
@@ -189,7 +190,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/610.4fdfae13.js"
+            "__mf/js/async/610.18610b4a.js"
           ]
         },
         "css": {
@@ -352,10 +353,11 @@
       "assets": {
         "js": {
           "sync": [
+            "__mf/js/async/679.4c9ca4ca.js",
             "__mf/js/async/69.5f20cd9b.js",
             "__mf/js/async/331.987fc9d1.js",
             "__mf/js/async/762.0d4292e6.js",
-            "__mf/js/async/__federation_expose_BarChart.7c81d310.js"
+            "__mf/js/async/__federation_expose_BarChart.4fe4d1a3.js"
           ],
           "async": [
             "__mf/js/async/964.d446c7a1.js",
@@ -365,8 +367,8 @@
             "__mf/js/async/238.2c28749b.js",
             "__mf/js/async/224.02bf0727.js",
             "__mf/js/async/292.fc25f0b4.js",
-            "__mf/js/async/996.2287354b.js",
             "__mf/js/async/802.393c9711.js",
+            "__mf/js/async/552.35c9929e.js",
             "__mf/js/async/360.49d19c17.js",
             "__mf/js/async/173.de56afb5.js",
             "__mf/js/async/740.bd4a2dd3.js",
@@ -376,7 +378,7 @@
             "__mf/js/async/162.5c4c80cc.js",
             "__mf/js/async/488.64e4ab62.js",
             "__mf/js/async/738.0b38462b.js",
-            "__mf/js/async/610.4fdfae13.js",
+            "__mf/js/async/610.18610b4a.js",
             "__mf/js/async/981.d5ccd920.js",
             "__mf/js/async/770.a4ed49b7.js",
             "__mf/js/async/296.4e6e1192.js"

package/mf-stats.json

@@ -5,11 +5,11 @@
     "name": "BarChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.6.1",
+      "buildVersion": "0.7.0",
       "buildName": "@perses-dev/bar-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/BarChart.2c8c7b6f.js",
+      "name": "__mf/js/BarChart.d4f68948.js",
       "path": "",
       "type": "global"
     },
@@ -154,12 +154,13 @@
             "__mf/js/async/238.2c28749b.js",
             "__mf/js/async/75.602a691f.js",
             "__mf/js/async/623.a42c5576.js",
-            "__mf/js/async/996.2287354b.js",
+            "__mf/js/async/679.4c9ca4ca.js",
+            "__mf/js/async/552.35c9929e.js",
             "__mf/js/async/360.49d19c17.js",
             "__mf/js/async/331.987fc9d1.js",
             "__mf/js/async/774.6d4b81a0.js",
             "__mf/js/async/738.0b38462b.js",
-            "__mf/js/async/610.4fdfae13.js",
+            "__mf/js/async/610.18610b4a.js",
             "__mf/js/async/981.d5ccd920.js",
             "__mf/js/async/770.a4ed49b7.js",
             "__mf/js/async/296.4e6e1192.js"
@@ -213,7 +214,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/610.4fdfae13.js"
+            "__mf/js/async/610.18610b4a.js"
           ]
         },
         "css": {
@@ -410,10 +411,11 @@
       "assets": {
         "js": {
           "sync": [
+            "__mf/js/async/679.4c9ca4ca.js",
             "__mf/js/async/69.5f20cd9b.js",
             "__mf/js/async/331.987fc9d1.js",
             "__mf/js/async/762.0d4292e6.js",
-            "__mf/js/async/__federation_expose_BarChart.7c81d310.js"
+            "__mf/js/async/__federation_expose_BarChart.4fe4d1a3.js"
           ],
           "async": [
             "__mf/js/async/964.d446c7a1.js",
@@ -423,8 +425,8 @@
             "__mf/js/async/238.2c28749b.js",
             "__mf/js/async/224.02bf0727.js",
             "__mf/js/async/292.fc25f0b4.js",
-            "__mf/js/async/996.2287354b.js",
             "__mf/js/async/802.393c9711.js",
+            "__mf/js/async/552.35c9929e.js",
             "__mf/js/async/360.49d19c17.js",
             "__mf/js/async/173.de56afb5.js",
             "__mf/js/async/740.bd4a2dd3.js",
@@ -434,7 +436,7 @@
             "__mf/js/async/162.5c4c80cc.js",
             "__mf/js/async/488.64e4ab62.js",
             "__mf/js/async/738.0b38462b.js",
-            "__mf/js/async/610.4fdfae13.js",
+            "__mf/js/async/610.18610b4a.js",
             "__mf/js/async/981.d5ccd920.js",
             "__mf/js/async/770.a4ed49b7.js",
             "__mf/js/async/296.4e6e1192.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/bar-chart-plugin",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "scripts": {
     "dev": "rsbuild dev",
     "build": "npm run build-mf && concurrently \"npm:build:*\"",