@perses-dev/components 0.4.0 → 0.4.1

package/dist/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../src/LineChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAyCvF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,eAAe,EACf,UAAU,GACX,EAAE,cAAc,eAqLhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../src/LineChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAyCvF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,eAAe,EACf,UAAU,GACX,EAAE,cAAc,eAwLhB"}

package/dist/LineChart.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{useDeepMemo}from"@perses-dev/core";import{Box,useTheme}from"@mui/material";import merge from"lodash/merge";import{use}from"echarts/core";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{EChart}from"./EChart";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"./model/graph-model";import{abbreviateLargeNumber}from"./model/units";import{emptyTooltipData}from"./tooltip/tooltip-model";import{Tooltip}from"./tooltip/Tooltip";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function LineChart({height:e,data:t,grid:o,legend:r,toolbox:a,visualMap:n,dataZoomEnabled:i,onDataZoom:m}){const s=useTheme(),p=useRef(),[l,d]=useState(!0),h=useMemo((()=>({datazoom:e=>{var o,r;if(void 0===m||void 0===e.batch[0])return;const a=null!==(o=e.batch[0].startValue)&&void 0!==o?o:0,n=null!==(r=e.batch[0].endValue)&&void 0!==r?r:t.xAxis.length-1,i=t.xAxis[a],s=t.xAxis[n];void 0!==i&&void 0!==s&&m({start:i,end:s,startIndex:a,endIndex:n})}})),[t,m]);void 0!==p.current&&!0===i&&p.current.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0});const u=useDeepMemo((()=>{if(void 0===t.timeSeries)return{};if(null===t.timeSeries||0===t.timeSeries.length)return noDataOption;const e=t.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,m={show:!0,top:10,right:10,iconStyle:{borderColor:s.palette.text.primary},feature:{dataZoom:{icon:i?null:void 0,yAxisIndex:"none"},restore:{}},emphasis:{iconStyle:{textFill:s.palette.text.primary}}};return!1===i&&delete m.feature.dataZoom.icon,{title:{show:!1},grid:merge({top:10,right:20,bottom:5,left:20,containLabel:!0},o),toolbox:merge(m,a),series:t.timeSeries,xAxis:{type:"category",data:t.xAxis,max:e=>e.max,axisLabel:{margin:15,color:s.palette.text.primary,formatter:e=>getFormattedDate(e)},axisTick:{show:!1},axisLine:{lineStyle:{color:s.palette.grey[600]}}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{margin:12,color:s.palette.text.primary,formatter:e=>abbreviateLargeNumber(e)},splitLine:{show:!0,lineStyle:{width:.5,color:s.palette.grey[300],opacity:.95}}},animation:!1,tooltip:{show:e,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},legend:r,visualMap:n}}),[t,s,o,r,a,i,n]);return _jsxs(Box,{sx:{height:e},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&d(!1)},onMouseUp:()=>{d(!0)},onMouseLeave:()=>{d(!1)},onMouseEnter:()=>{d(!0)},children:[!0===l&&_jsx(Tooltip,{chartRef:p,tooltipData:emptyTooltipData,chartData:t,wrapLabels:!0}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:u,onEvents:h,_instance:p})]})}function getFormattedDate(e){return new Intl.DateTimeFormat(void 0,{hour:"numeric",minute:"numeric",hour12:!1}).format(1e3*e)}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{useDeepMemo}from"@perses-dev/core";import{Box,useTheme}from"@mui/material";import merge from"lodash/merge";import{use}from"echarts/core";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{EChart}from"./EChart";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"./model/graph-model";import{abbreviateLargeNumber}from"./model/units";import{emptyTooltipData}from"./tooltip/tooltip-model";import{Tooltip}from"./tooltip/Tooltip";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function LineChart({height:e,data:t,grid:o,legend:r,toolbox:n,visualMap:a,dataZoomEnabled:i,onDataZoom:m}){const s=useTheme(),l=useRef(),[p,c]=useState(!0),u=useMemo((()=>({datazoom:e=>{var o,r;if(void 0===m||void 0===e.batch[0])return;const n=null!==(o=e.batch[0].startValue)&&void 0!==o?o:0,a=null!==(r=e.batch[0].endValue)&&void 0!==r?r:t.xAxis.length-1,i=t.xAxis[n],s=t.xAxis[a];void 0!==i&&void 0!==s&&m({start:i,end:s,startIndex:n,endIndex:a})}})),[t,m]);void 0!==l.current&&!0===i&&l.current.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0});const d=useDeepMemo((()=>{var e;if(void 0===t.timeSeries)return{};if(null===t.timeSeries||0===t.timeSeries.length)return noDataOption;const m=t.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,l={show:!0,top:10,right:10,iconStyle:{borderColor:s.palette.text.primary},feature:{dataZoom:{icon:i?null:void 0,yAxisIndex:"none"},restore:{}},emphasis:{iconStyle:{textFill:s.palette.text.primary}}};!1===i&&delete l.feature.dataZoom.icon;const p=null!==(e=t.rangeMs)&&void 0!==e?e:getDateRange(t.xAxis);return{title:{show:!1},grid:merge({top:10,right:20,bottom:5,left:20,containLabel:!0},o),toolbox:merge(l,n),series:t.timeSeries,xAxis:{type:"category",data:t.xAxis,max:e=>e.max,axisLabel:{margin:15,color:s.palette.text.primary,formatter:e=>getFormattedDate(e,p)},axisTick:{show:!1},axisLine:{lineStyle:{color:s.palette.grey[600]}}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{margin:12,color:s.palette.text.primary,formatter:e=>abbreviateLargeNumber(e)},splitLine:{show:!0,lineStyle:{width:.5,color:s.palette.grey[300],opacity:.95}}},animation:!1,tooltip:{show:m,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},legend:r,visualMap:a}}),[t,s,o,r,n,i,a]);return _jsxs(Box,{sx:{height:e},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&c(!1)},onMouseUp:()=>{c(!0)},onMouseLeave:()=>{c(!1)},onMouseEnter:()=>{c(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:l,tooltipData:emptyTooltipData,chartData:t,wrapLabels:!0}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:d,onEvents:u,_instance:l})]})}function getDateRange(e){const t=36e5;if(0===e.length)return t;const o=e[e.length-1];return void 0===e[0]||void 0===o?t:o-e[0]}function getFormattedDate(e,t){const o={hour:"numeric",minute:"numeric",hour12:!1};return t<=18e5?o.second="numeric":t>=864e5&&(o.month="numeric",o.day="numeric"),new Intl.DateTimeFormat(void 0,o).format(e).replace(/, /g," ")}

package/dist/cjs/LineChart.js

@@ -114,6 +114,7 @@ function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEna
         setShowTooltip(false);
     };
     const option = (0, core_1.useDeepMemo)(() => {
+        var _a;
         if (data.timeSeries === undefined)
             return {};
         if (data.timeSeries === null || data.timeSeries.length === 0)
@@ -149,6 +150,7 @@ function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEna
         if (dataZoomEnabled === false) {
             delete defaultToolbox.feature.dataZoom.icon;
         }
+        const rangeMs = (_a = data.rangeMs) !== null && _a !== void 0 ? _a : getDateRange(data.xAxis);
         const option = {
             title: {
                 show: false,
@@ -164,7 +166,7 @@ function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEna
                     margin: 15,
                     color: theme.palette.text.primary,
                     formatter: (value) => {
-                        return getFormattedDate(value);
+                        return getFormattedDate(value, rangeMs);
                     },
                 },
                 axisTick: {
@@ -208,6 +210,7 @@ function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEna
             visualMap,
         };
         return option;
+        // TODO (sjcobb): consolidate option props using echarts theme to reduce num of items in dep array
     }, [data, theme, grid, legend, toolbox, dataZoomEnabled, visualMap]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             height,
@@ -217,11 +220,33 @@ function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEna
                 }, option: option, onEvents: handleEvents, _instance: chartRef })] }));
 }
 exports.LineChart = LineChart;
-function getFormattedDate(value) {
-    const XAXIS_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
+// fallback when xAxis time range not passed as prop
+function getDateRange(data) {
+    const defaultRange = 3600000; // hour in ms
+    if (data.length === 0)
+        return defaultRange;
+    const lastDatum = data[data.length - 1];
+    if (data[0] === undefined || lastDatum === undefined)
+        return defaultRange;
+    return lastDatum - data[0];
+}
+// determines time granularity for axis labels, defaults to hh:mm
+function getFormattedDate(value, rangeMs) {
+    const dateFormatOptions = {
         hour: 'numeric',
         minute: 'numeric',
         hour12: false,
-    });
-    return XAXIS_DATE_FORMAT.format(value * 1000);
+    };
+    const thirtyMinMs = 1800000;
+    const dayMs = 86400000;
+    if (rangeMs <= thirtyMinMs) {
+        dateFormatOptions.second = 'numeric';
+    }
+    else if (rangeMs >= dayMs) {
+        dateFormatOptions.month = 'numeric';
+        dateFormatOptions.day = 'numeric';
+    }
+    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    // remove comma when month / day present
+    return DATE_FORMAT.format(value).replace(/, /g, ' ');
 }

package/dist/cjs/tooltip/SeriesInfo.js

@@ -42,7 +42,8 @@ function SeriesInfo(props) {
                     }), children: formattedSeriesLabels.split(',').map((name) => {
                         if (name) {
                             const [key, value] = jsonFormattedSeries ? name.split(':') : name.split('=');
-                            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: '4px' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { sx: { fontSize: '11px' }, children: [key, ":"] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: (theme) => ({
+                            const formattedKey = value !== undefined ? `${key}: ` : key;
+                            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: '4px' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontSize: '11px' }, children: formattedKey }), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: (theme) => ({
                                             color: theme.palette.common.white,
                                             fontWeight: 700,
                                             fontSize: '11px',

package/dist/model/graph-model.d.ts

@@ -9,5 +9,6 @@ export interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {
 export declare type EChartsDataFormat = {
     timeSeries: EChartsTimeSeries[];
     xAxis: number[];
+    rangeMs?: number;
 };
 //# sourceMappingURL=graph-model.d.ts.map

package/dist/model/graph-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph-model.d.ts","sourceRoot":"","sources":["../../src/model/graph-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC"}
+{"version":3,"file":"graph-model.d.ts","sourceRoot":"","sources":["../../src/model/graph-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/tooltip/SeriesInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/tooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAiBA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAiHhD"}
+{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/tooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAiBA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkHhD"}

package/dist/tooltip/SeriesInfo.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesMarker}from"./SeriesMarker";import{TOOLTIP_LABELS_MAX_WIDTH}from"./tooltip-model";export function SeriesInfo(e){const{seriesName:o,y:r,markerColor:t,totalSeries:i,wrapLabels:s}=e,l=o.replace(/[{}"]/g,"");if(1===i){const e="{"===o[0];return _jsxs(Stack,{spacing:.5,children:[_jsxs(Box,{sx:e=>({height:"16px",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"left",color:e.palette.common.white,fontSize:"11px"}),children:[_jsx(SeriesMarker,{markerColor:t}),_jsxs(Box,{component:"span",children:["value:",_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,fontWeight:700,paddingLeft:"2px"}),children:r})]})]}),_jsx(Divider,{sx:e=>({borderColor:e.palette.grey[500]})}),_jsx(Box,{sx:e=>({color:e.palette.common.white}),children:l.split(",").map((o=>{if(o){const[r,t]=e?o.split(":"):o.split("=");return _jsxs(Box,{sx:{display:"flex",gap:"4px"},children:[_jsxs(Typography,{sx:{fontSize:"11px"},children:[r,":"]}),_jsx(Typography,{sx:e=>({color:e.palette.common.white,fontWeight:700,fontSize:"11px"}),children:t})]},o)}}))})]})}const n=l.replace(/[,]/g,", ").replace(/[:=]/g,": ");return _jsxs(Box,{sx:{display:"table-row",paddingTop:.5},children:[_jsxs(Box,{sx:{display:"table-cell",maxWidth:"520px"},children:[_jsx(SeriesMarker,{markerColor:t}),_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,display:"inline-block",maxWidth:TOOLTIP_LABELS_MAX_WIDTH,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:s?"normal":"nowrap",width:"calc(100% - 20px)"}),children:n})]}),_jsx(Box,{sx:{display:"table-cell",fontWeight:"700",paddingLeft:1.5,textAlign:"right",verticalAlign:"top"},children:r})]})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesMarker}from"./SeriesMarker";import{TOOLTIP_LABELS_MAX_WIDTH}from"./tooltip-model";export function SeriesInfo(e){const{seriesName:o,y:r,markerColor:t,totalSeries:i,wrapLabels:s}=e,l=o.replace(/[{}"]/g,"");if(1===i){const e="{"===o[0];return _jsxs(Stack,{spacing:.5,children:[_jsxs(Box,{sx:e=>({height:"16px",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"left",color:e.palette.common.white,fontSize:"11px"}),children:[_jsx(SeriesMarker,{markerColor:t}),_jsxs(Box,{component:"span",children:["value:",_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,fontWeight:700,paddingLeft:"2px"}),children:r})]})]}),_jsx(Divider,{sx:e=>({borderColor:e.palette.grey[500]})}),_jsx(Box,{sx:e=>({color:e.palette.common.white}),children:l.split(",").map((o=>{if(o){const[r,t]=e?o.split(":"):o.split("=");return _jsxs(Box,{sx:{display:"flex",gap:"4px"},children:[_jsx(Typography,{sx:{fontSize:"11px"},children:void 0!==t?`${r}: `:r}),_jsx(Typography,{sx:e=>({color:e.palette.common.white,fontWeight:700,fontSize:"11px"}),children:t})]},o)}}))})]})}const n=l.replace(/[,]/g,", ").replace(/[:=]/g,": ");return _jsxs(Box,{sx:{display:"table-row",paddingTop:.5},children:[_jsxs(Box,{sx:{display:"table-cell",maxWidth:"520px"},children:[_jsx(SeriesMarker,{markerColor:t}),_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,display:"inline-block",maxWidth:TOOLTIP_LABELS_MAX_WIDTH,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:s?"normal":"nowrap",width:"calc(100% - 20px)"}),children:n})]}),_jsx(Box,{sx:{display:"table-cell",fontWeight:"700",paddingLeft:1.5,textAlign:"right",verticalAlign:"top"},children:r})]})}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -23,6 +23,7 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
+    "@perses-dev/core": "^0.4.1",
     "echarts": "^5.3.2",
     "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"