@perses-dev/timeseries-table-plugin 0.6.0 → 0.7.0

package/__mf/js/async/__federation_expose_TimeSeriesTable.0774ca0f.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkTimeSeriesTable=self.webpackChunkTimeSeriesTable||[]).push([["972"],{4417:function(e,t,s){s.r(t),s.d(t,{TimeSeriesTable:()=>w});var n=s(4246),r=s(6372),l=s(3941),i=s(4538),a=s(2054),o=s(315),c=s(190),h=s(6174),u=s(5283),d=s(4968),x=s(6205),m=s(1889);function p(e){let{name:t,labels:s,formattedName:r,isFormatted:l}=e;return l&&s&&Object.keys(s).length>0?(0,n.jsx)(j,{labels:s}):(0,n.jsx)(a.Z,{sx:{textWrap:"auto"},children:r??t})}function j(e){let{labels:t}=e,{infoSnackbar:s}=(0,l.useSnackbar)(),r=[],i=!0;function o(e){let t=e.currentTarget.innerText||"";navigator.clipboard.writeText(t.trim()).then(()=>{s(`Copied label matcher: ${t}`)}).catch(e=>{console.error(`unable to copy text: ${e}`)})}for(let e in t)"__name__"!==e&&(r.push((0,n.jsxs)("span",{children:[!i&&", ",(0,n.jsxs)(a.Z,{display:"inline",component:"span",sx:{"&:hover":{cursor:"pointer",textDecoration:"underline"}},onClick:o,title:"Click to copy label matcher",children:[(0,n.jsx)("strong",{children:e}),"=",(0,n.jsxs)("span",{children:['"',t[e],'"']})]})]},e)),i&&(i=!1));return(0,n.jsxs)(a.Z,{sx:{textWrap:"auto"},children:[t?t.__name__:"","{",r,"}"]})}var v=s(8286);function g(e){let{width:t,height:s,data:a}=e,o=(0,l.useChartsTheme)(),c=(0,i.useMemo)(()=>a?a.buckets.map(e=>{let[t,s,n,r]=e;return{value:[parseFloat(s),parseFloat(n),parseFloat(r),t],itemStyle:{color:o.echartsTheme[0]}}}):[],[o.echartsTheme,a]),h=(0,i.useMemo)(()=>{var e;return c?{title:{show:!1},tooltip:{},xAxis:{scale:!1,max:Math.ceil((null===(e=c[c.length-1])||void 0===e?void 0:e.value[1])??1)},yAxis:{},series:[{type:"custom",renderItem:function(e,t){var s,n;let r=t.value(2),l=t.coord([t.value(0),r]),i=null===(s=t.size)||void 0===s?void 0:s.call(t,[t.value(1)-t.value(0),r]),a=null===(n=t.style)||void 0===n?void 0:n.call(t);return{type:"rect",shape:{x:l[0],y:l[1],width:i[0],height:i[1]},style:a}},label:{show:!1},dimensions:["from","to"],encode:{x:[0,1],y:2,tooltip:[0,1],itemName:2},data:c}]}:o.noDataOption},[o.noDataOption,c]);return(0,n.jsx)(r.Z,{style:{width:t,height:s},sx:{overflow:"auto"},children:(0,n.jsx)(l.EChart,{sx:{minHeight:s},option:h,theme:o.echartsTheme})})}(0,s(6232).D)([v.N]);let Z=e=>{let{result:t}=e,s=(0,i.useMemo)(()=>t.flatMap(e=>e.data).flatMap(e=>(null==e?void 0:e.series)||[]),[t]),r=(0,i.useMemo)(()=>(function(e){let t=e.length<1e3;return e.map((e,s)=>{var r;let l=((null===(r=e.values)||void 0===r?void 0:r.length)??0)>1,o=e.values?e.values.map((e,t)=>(0,n.jsxs)(a.Z,{children:[e[1]," ",l&&(0,n.jsxs)("span",{children:["@",e[0]]})]},t)):[],c=e.histograms?e.histograms.map((e,t)=>(0,n.jsxs)(i.Fragment,{children:[(0,n.jsx)(g,{width:400,height:200,data:{buckets:e[1].buckets}})," ",(0,n.jsxs)(u.Z,{flexDirection:"row",justifyContent:"space-between",children:[(0,n.jsxs)(a.Z,{children:["Total count: ",e[1].count]}),(0,n.jsxs)(a.Z,{children:["Sum: ",e[1].sum]})]}),T(e[1])]},-t)):[];return(0,n.jsxs)(d.Z,{style:{whiteSpace:"pre"},children:[(0,n.jsx)(x.Z,{children:(0,n.jsx)(p,{name:e.name,formattedName:e.formattedName,labels:e.labels,isFormatted:t})}),(0,n.jsx)(x.Z,{children:e.histograms?c:o})]},s)})})(s),[s]);return t?(0,n.jsxs)(n.Fragment,{children:[s.length>=1e3&&(0,n.jsxs)(o.Z,{severity:"warning",children:["Showing more than ",1e3," series, turning off label formatting for performance reasons."]}),(0,n.jsx)(c.Z,{className:"data-table",children:(0,n.jsx)(h.Z,{children:r})})]}):(0,n.jsx)(a.Z,{children:"No data"})},f=e=>3===e||1===e?"[":"(",b=e=>3===e||0===e?"]":")",y=e=>{let[t,s,n]=e;return`${f(t)}${s} -> ${n}${b(t)}`},T=e=>{var t;return(0,n.jsxs)(c.Z,{children:[(0,n.jsx)(m.Z,{children:(0,n.jsx)(d.Z,{children:(0,n.jsx)(x.Z,{style:{textAlign:"center"},colSpan:2,children:"Histogram Sample"})})}),(0,n.jsxs)(h.Z,{children:[(0,n.jsxs)(d.Z,{children:[(0,n.jsx)(x.Z,{children:"Range"}),(0,n.jsx)(x.Z,{children:"Count"})]}),null===(t=e.buckets)||void 0===t?void 0:t.map((e,t)=>(0,n.jsxs)(d.Z,{children:[(0,n.jsx)(x.Z,{children:y(e)}),(0,n.jsx)(x.Z,{children:e[3]})]},t))]})]})},w={PanelComponent:function(e){let{contentDimensions:t,queryResults:s}=e,i=(0,l.useChartsTheme)().container.padding.default;return(0,n.jsx)(r.Z,{sx:{height:(null==t?void 0:t.height)||0,padding:`${i}px`,overflowY:"scroll"},children:(0,n.jsx)(Z,{result:s})})},supportedQueryTypes:["TimeSeriesQuery"],queryOptions:{mode:"instant"},createInitialOptions:()=>({})}}}]);

package/__mf/js/main.857476c9.js

@@ -1 +0,0 @@
-(()=>{var e={5311:function(e,r,t){Promise.all([t.e("677"),t.e("179"),t.e("620")]).then(t.bind(t,9161))}},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)|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/"+e+"."+({156:"edaa1366",173:"7677c422",620:"989f65d2",621:"966dfe80",651:"f2005980",694:"46f61549",740:"64988389",75:"65fec995",770:"46d7d5f9",960:"d242a960",964:"7386b918",998:"e20cf478"})[e]+".js",t.miniCssF=e=>"__mf/css/async/"+e+".53436797.css",t.h=()=>"83f38bab1a1df5d8",(()=>{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="TimeSeriesTable:";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/TimeSeriesTable/",t.rv=()=>"1.2.8",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(6434)),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("770")]).then(()=>()=>t(1958)),eager:0,singleton:1},{name:"@perses-dev/components",version:"0.51.0-beta.1",factory:()=>Promise.all([t.e("156"),t.e("998"),t.e("621"),t.e("677"),t.e("179"),t.e("157"),t.e("161"),t.e("946"),t.e("759")]).then(()=>()=>t(3191)),eager:0,singleton:1},{name:"date-fns",version:"4.1.0",factory:()=>Promise.all([t.e("156"),t.e("75")]).then(()=>()=>t(9657)),eager:0,singleton:1},{name:"react-dom",version:"18.3.1",factory:()=>Promise.all([t.e("173"),t.e("677")]).then(()=>()=>t(2652)),eager:0,singleton:1,requiredVersion:"18.2.0"},{name:"react",version:"18.3.1",factory:()=>t.e("964").then(()=>()=>t(7378)),eager:0,singleton:1,requiredVersion:"18.2.0"}]},uniqueName:"TimeSeriesTable"},t.I=t.I||function(){throw Error("should have __webpack_require__.I")},t.consumesLoadingData={chunkMapping:{161:["4665","461"],494:["7871"],946:["5913"],179:["6085"],157:["2116"],677:["4538"]},moduleIdToConsumeDataMapping:{461:{shareScope:"default",shareKey:"date-fns",import:"date-fns",requiredVersion:"^4.1.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("75").then(()=>()=>t(9657))},5913:{shareScope:"default",shareKey:"@emotion/styled",import:"@emotion/styled",requiredVersion:"^11.3.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("694").then(()=>()=>t(1958))},4538:{shareScope:"default",shareKey:"react",import:"react",requiredVersion:"18.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("964").then(()=>()=>t(7378))},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("740"),t.e("494")]).then(()=>()=>t(8872))},7871:{shareScope:"default",shareKey:"date-fns",import:"date-fns",requiredVersion:"^3.0.0 || ^4.0.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("75").then(()=>()=>t(9657))},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(2652))},2116:{shareScope:"default",shareKey:"@emotion/react",import:"@emotion/react",requiredVersion:"^11.11.3",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("960").then(()=>()=>t(6434))}},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]&&({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)|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.webpackChunkTimeSeriesTable=self.webpackChunkTimeSeriesTable||[];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,["795"],function(){return t(2032)});var n=t.O(void 0,["795"],function(){return t(5311)});n=t.O(n)})();

package/lib/cjs/components/HistogramChart.js

@@ -1,121 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "HistogramChart", {
-    enumerable: true,
-    get: function() {
-        return HistogramChart;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _components = require("@perses-dev/components");
-const _charts = require("echarts/charts");
-const _core = require("echarts/core");
-const _react = require("react");
-(0, _core.use)([
-    _charts.CustomChart
-]);
-function HistogramChart({ width, height, data }) {
-    const chartsTheme = (0, _components.useChartsTheme)();
-    const transformedData = (0, _react.useMemo)(()=>{
-        if (!data) return [];
-        return data.buckets.map(([bucket, upperBound, lowerBound, count])=>{
-            return {
-                value: [
-                    parseFloat(upperBound),
-                    parseFloat(lowerBound),
-                    parseFloat(count),
-                    bucket
-                ],
-                itemStyle: {
-                    color: chartsTheme.echartsTheme[0]
-                }
-            };
-        });
-    }, [
-        chartsTheme.echartsTheme,
-        data
-    ]);
-    const option = (0, _react.useMemo)(()=>{
-        if (!transformedData) return chartsTheme.noDataOption;
-        return {
-            title: {
-                show: false
-            },
-            tooltip: {},
-            xAxis: {
-                scale: false,
-                max: Math.ceil(transformedData[transformedData.length - 1]?.value[1] ?? 1)
-            },
-            yAxis: {},
-            series: [
-                {
-                    type: 'custom',
-                    renderItem: function(params, api) {
-                        const yValue = api.value(2);
-                        const start = api.coord([
-                            api.value(0),
-                            yValue
-                        ]);
-                        const size = api.size?.([
-                            api.value(1) - api.value(0),
-                            yValue
-                        ]);
-                        const style = api.style?.();
-                        return {
-                            type: 'rect',
-                            shape: {
-                                x: start[0],
-                                y: start[1],
-                                width: size[0],
-                                height: size[1]
-                            },
-                            style: style
-                        };
-                    },
-                    label: {
-                        show: false
-                    },
-                    dimensions: [
-                        'from',
-                        'to'
-                    ],
-                    encode: {
-                        x: [
-                            0,
-                            1
-                        ],
-                        y: 2,
-                        tooltip: [
-                            0,
-                            1
-                        ],
-                        itemName: 2
-                    },
-                    data: transformedData
-                }
-            ]
-        };
-    }, [
-        chartsTheme.noDataOption,
-        transformedData
-    ]);
-    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
-            },
-            option: option,
-            theme: chartsTheme.echartsTheme
-        })
-    });
-}

package/lib/components/HistogramChart.d.ts

@@ -1,16 +0,0 @@
-import { ModeOption } from '@perses-dev/components';
-import { BucketTuple, FormatOptions } from '@perses-dev/core';
-import { ReactElement } from 'react';
-export interface HistogramChartData {
-    buckets: BucketTuple[];
-}
-export interface HistogramChartProps {
-    width: number;
-    height: number;
-    data?: HistogramChartData;
-    format?: FormatOptions;
-    mode?: ModeOption;
-    exponential?: boolean;
-}
-export declare function HistogramChart({ width, height, data }: HistogramChartProps): ReactElement | null;
-//# sourceMappingURL=HistogramChart.d.ts.map

package/lib/components/HistogramChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HistogramChart.d.ts","sourceRoot":"","sources":["../../../src/components/HistogramChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,UAAU,EAAkB,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAI9D,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAkFhG"}

package/lib/components/HistogramChart.js

@@ -1,113 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { EChart, useChartsTheme } from '@perses-dev/components';
-import { CustomChart } from 'echarts/charts';
-import { use } from 'echarts/core';
-import { useMemo } from 'react';
-use([
-    CustomChart
-]);
-export function HistogramChart({ width, height, data }) {
-    const chartsTheme = useChartsTheme();
-    const transformedData = useMemo(()=>{
-        if (!data) return [];
-        return data.buckets.map(([bucket, upperBound, lowerBound, count])=>{
-            return {
-                value: [
-                    parseFloat(upperBound),
-                    parseFloat(lowerBound),
-                    parseFloat(count),
-                    bucket
-                ],
-                itemStyle: {
-                    color: chartsTheme.echartsTheme[0]
-                }
-            };
-        });
-    }, [
-        chartsTheme.echartsTheme,
-        data
-    ]);
-    const option = useMemo(()=>{
-        if (!transformedData) return chartsTheme.noDataOption;
-        return {
-            title: {
-                show: false
-            },
-            tooltip: {},
-            xAxis: {
-                scale: false,
-                max: Math.ceil(transformedData[transformedData.length - 1]?.value[1] ?? 1)
-            },
-            yAxis: {},
-            series: [
-                {
-                    type: 'custom',
-                    renderItem: function(params, api) {
-                        const yValue = api.value(2);
-                        const start = api.coord([
-                            api.value(0),
-                            yValue
-                        ]);
-                        const size = api.size?.([
-                            api.value(1) - api.value(0),
-                            yValue
-                        ]);
-                        const style = api.style?.();
-                        return {
-                            type: 'rect',
-                            shape: {
-                                x: start[0],
-                                y: start[1],
-                                width: size[0],
-                                height: size[1]
-                            },
-                            style: style
-                        };
-                    },
-                    label: {
-                        show: false
-                    },
-                    dimensions: [
-                        'from',
-                        'to'
-                    ],
-                    encode: {
-                        x: [
-                            0,
-                            1
-                        ],
-                        y: 2,
-                        tooltip: [
-                            0,
-                            1
-                        ],
-                        itemName: 2
-                    },
-                    data: transformedData
-                }
-            ]
-        };
-    }, [
-        chartsTheme.noDataOption,
-        transformedData
-    ]);
-    return /*#__PURE__*/ _jsx(Box, {
-        style: {
-            width: width,
-            height: height
-        },
-        sx: {
-            overflow: 'auto'
-        },
-        children: /*#__PURE__*/ _jsx(EChart, {
-            sx: {
-                minHeight: height
-            },
-            option: option,
-            theme: chartsTheme.echartsTheme
-        })
-    });
-}
-
-//# sourceMappingURL=HistogramChart.js.map

package/lib/components/HistogramChart.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/HistogramChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport { EChart, ModeOption, useChartsTheme } from '@perses-dev/components';\nimport { BucketTuple, FormatOptions } from '@perses-dev/core';\nimport { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams } from 'echarts';\nimport { CustomChart } from 'echarts/charts';\nimport { EChartsCoreOption, use } from 'echarts/core';\nimport { ReactElement, useMemo } from 'react';\n\nuse([CustomChart]);\n\nexport interface HistogramChartData {\n  buckets: BucketTuple[];\n}\n\nexport interface HistogramChartProps {\n  width: number;\n  height: number;\n  data?: HistogramChartData;\n  format?: FormatOptions;\n  mode?: ModeOption;\n  exponential?: boolean;\n}\n\nexport function HistogramChart({ width, height, data }: HistogramChartProps): ReactElement | null {\n  const chartsTheme = useChartsTheme();\n\n  const transformedData = useMemo(() => {\n    if (!data) return [];\n\n    return data.buckets.map(([bucket, upperBound, lowerBound, count]) => {\n      return {\n        value: [parseFloat(upperBound), parseFloat(lowerBound), parseFloat(count), bucket],\n        itemStyle: {\n          color: chartsTheme.echartsTheme[0],\n        },\n      };\n    });\n  }, [chartsTheme.echartsTheme, data]);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (!transformedData) return chartsTheme.noDataOption;\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {},\n      xAxis: {\n        scale: false,\n        max: Math.ceil(transformedData[transformedData.length - 1]?.value[1] ?? 1),\n      },\n      yAxis: {},\n      series: [\n        {\n          type: 'custom',\n          renderItem: function (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) {\n            const yValue = api.value(2);\n            const start = api.coord([api.value(0), yValue]);\n            const size = api.size?.([(api.value(1) as number) - (api.value(0) as number), yValue]) as number[];\n            const style = api.style?.();\n\n            return {\n              type: 'rect',\n              shape: {\n                x: start[0],\n                y: start[1],\n                width: size[0],\n                height: size[1],\n              },\n              style: style,\n            };\n          },\n          label: {\n            show: false,\n          },\n          dimensions: ['from', 'to'],\n          encode: {\n            x: [0, 1],\n            y: 2,\n            tooltip: [0, 1],\n            itemName: 2,\n          },\n          data: transformedData,\n        },\n      ],\n    };\n  }, [chartsTheme.noDataOption, transformedData]);\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        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","EChart","useChartsTheme","CustomChart","use","useMemo","HistogramChart","width","height","data","chartsTheme","transformedData","buckets","map","bucket","upperBound","lowerBound","count","value","parseFloat","itemStyle","color","echartsTheme","option","noDataOption","title","show","tooltip","xAxis","scale","max","Math","ceil","length","yAxis","series","type","renderItem","params","api","yValue","start","coord","size","style","shape","x","y","label","dimensions","encode","itemName","sx","overflow","minHeight","theme"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,MAAM,EAAcC,cAAc,QAAQ,yBAAyB;AAG5E,SAASC,WAAW,QAAQ,iBAAiB;AAC7C,SAA4BC,GAAG,QAAQ,eAAe;AACtD,SAAuBC,OAAO,QAAQ,QAAQ;AAE9CD,IAAI;IAACD;CAAY;AAejB,OAAO,SAASG,eAAe,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAuB;IACzE,MAAMC,cAAcR;IAEpB,MAAMS,kBAAkBN,QAAQ;QAC9B,IAAI,CAACI,MAAM,OAAO,EAAE;QAEpB,OAAOA,KAAKG,OAAO,CAACC,GAAG,CAAC,CAAC,CAACC,QAAQC,YAAYC,YAAYC,MAAM;YAC9D,OAAO;gBACLC,OAAO;oBAACC,WAAWJ;oBAAaI,WAAWH;oBAAaG,WAAWF;oBAAQH;iBAAO;gBAClFM,WAAW;oBACTC,OAAOX,YAAYY,YAAY,CAAC,EAAE;gBACpC;YACF;QACF;IACF,GAAG;QAACZ,YAAYY,YAAY;QAAEb;KAAK;IAEnC,MAAMc,SAA4BlB,QAAQ;QACxC,IAAI,CAACM,iBAAiB,OAAOD,YAAYc,YAAY;QAErD,OAAO;YACLC,OAAO;gBACLC,MAAM;YACR;YACAC,SAAS,CAAC;YACVC,OAAO;gBACLC,OAAO;gBACPC,KAAKC,KAAKC,IAAI,CAACrB,eAAe,CAACA,gBAAgBsB,MAAM,GAAG,EAAE,EAAEf,KAAK,CAAC,EAAE,IAAI;YAC1E;YACAgB,OAAO,CAAC;YACRC,QAAQ;gBACN;oBACEC,MAAM;oBACNC,YAAY,SAAUC,MAAoC,EAAEC,GAA8B;wBACxF,MAAMC,SAASD,IAAIrB,KAAK,CAAC;wBACzB,MAAMuB,QAAQF,IAAIG,KAAK,CAAC;4BAACH,IAAIrB,KAAK,CAAC;4BAAIsB;yBAAO;wBAC9C,MAAMG,OAAOJ,IAAII,IAAI,GAAG;4BAAEJ,IAAIrB,KAAK,CAAC,KAAiBqB,IAAIrB,KAAK,CAAC;4BAAesB;yBAAO;wBACrF,MAAMI,QAAQL,IAAIK,KAAK;wBAEvB,OAAO;4BACLR,MAAM;4BACNS,OAAO;gCACLC,GAAGL,KAAK,CAAC,EAAE;gCACXM,GAAGN,KAAK,CAAC,EAAE;gCACXlC,OAAOoC,IAAI,CAAC,EAAE;gCACdnC,QAAQmC,IAAI,CAAC,EAAE;4BACjB;4BACAC,OAAOA;wBACT;oBACF;oBACAI,OAAO;wBACLtB,MAAM;oBACR;oBACAuB,YAAY;wBAAC;wBAAQ;qBAAK;oBAC1BC,QAAQ;wBACNJ,GAAG;4BAAC;4BAAG;yBAAE;wBACTC,GAAG;wBACHpB,SAAS;4BAAC;4BAAG;yBAAE;wBACfwB,UAAU;oBACZ;oBACA1C,MAAME;gBACR;aACD;QACH;IACF,GAAG;QAACD,YAAYc,YAAY;QAAEb;KAAgB;IAE9C,qBACE,KAACX;QACC4C,OAAO;YACLrC,OAAOA;YACPC,QAAQA;QACV;QACA4C,IAAI;YAAEC,UAAU;QAAO;kBAEvB,cAAA,KAACpD;YACCmD,IAAI;gBACFE,WAAW9C;YACb;YACAe,QAAQA;YACRgC,OAAO7C,YAAYY,YAAY;;;AAIvC"}