@perses-dev/components 0.3.0 → 0.3.1

package/dist/cjs/tooltip/TooltipContent.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 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.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const SeriesInfo_1 = require("./SeriesInfo");
+function TooltipContent(props) {
+    const { focusedSeries, wrapLabels } = props;
+    const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
+    const formatTimeSeriesHeader = (timeString) => {
+        const [month, year, time] = timeString.split(',');
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", sx: (theme) => ({
+                        color: theme.palette.common.white,
+                    }), children: [month, ", ", year, " \u2013"] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: (0, jsx_runtime_1.jsx)("strong", { children: time }) })] }));
+    };
+    const sortedFocusedSeries = (0, react_1.useMemo)(() => {
+        if (focusedSeries === null)
+            return null;
+        return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));
+    }, [focusedSeries]);
+    if (sortedFocusedSeries !== null && seriesTime !== null) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { py: 1, px: 1.5, spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: formatTimeSeriesHeader(seriesTime) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: (theme) => ({
+                        borderColor: theme.palette.grey['500'],
+                    }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'table',
+                    }, children: sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, markerColor }) => {
+                        if (datumIdx === null || seriesIdx === null)
+                            return null;
+                        const key = seriesIdx.toString() + datumIdx.toString();
+                        return ((0, jsx_runtime_1.jsx)(SeriesInfo_1.SeriesInfo, { seriesName: seriesName, y: y, markerColor: markerColor, totalSeries: sortedFocusedSeries.length, wrapLabels: wrapLabels }, key));
+                    }) })] }));
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+}
+exports.TooltipContent = TooltipContent;

package/dist/cjs/tooltip/focused-series.js

@@ -0,0 +1,108 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFocusedSeriesData = exports.getNearbySeries = void 0;
+const tooltip_model_1 = require("./tooltip-model");
+/**
+ * Returns formatted series data for the points that are close to the user's cursor
+ * Adjust yBuffer to increase or decrease number of series shown
+ */
+function getNearbySeries(data, pointInGrid, yBuffer) {
+    var _a, _b, _c, _d, _e;
+    const currentFocusedData = [];
+    const focusedX = (_a = pointInGrid[0]) !== null && _a !== void 0 ? _a : null;
+    const focusedY = (_b = pointInGrid[1]) !== null && _b !== void 0 ? _b : null;
+    if (focusedX === null || focusedY === null) {
+        return currentFocusedData;
+    }
+    if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {
+        for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {
+            const currentSeries = data.timeSeries[seriesIdx];
+            if (currentFocusedData.length > tooltip_model_1.TOOLTIP_MAX_ITEMS)
+                break;
+            if (currentSeries !== undefined) {
+                const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';
+                const markerColor = (_c = currentSeries.color) !== null && _c !== void 0 ? _c : '#000';
+                if (Array.isArray(currentSeries.data)) {
+                    for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {
+                        const xValue = (_d = data.xAxis[datumIdx]) !== null && _d !== void 0 ? _d : 0;
+                        const yValue = (_e = currentSeries.data[datumIdx]) !== null && _e !== void 0 ? _e : 0;
+                        if (focusedX === datumIdx) {
+                            if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {
+                                const formattedDate = tooltip_model_1.TOOLTIP_DATE_FORMAT.format(xValue * 1000);
+                                currentFocusedData.push({
+                                    seriesIdx: seriesIdx,
+                                    datumIdx: datumIdx,
+                                    seriesName: currentSeriesName,
+                                    date: formattedDate,
+                                    x: xValue,
+                                    y: yValue,
+                                    markerColor: markerColor.toString(),
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return currentFocusedData;
+}
+exports.getNearbySeries = getNearbySeries;
+/**
+ * Uses mouse position to determine whether user is hovering over a chart canvas
+ * If yes, convert from pixel values to logical cartesian coordinates and return all focused series
+ */
+function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart) {
+    var _a, _b;
+    if (chart === undefined || mousePos === null)
+        return [];
+    // prevents multiple tooltips showing from adjacent charts
+    let cursorTargetMatchesChart = false;
+    if (mousePos.target !== null) {
+        const currentParent = mousePos.target.parentElement;
+        if (currentParent !== null) {
+            const currentGrandparent = currentParent.parentElement;
+            if (currentGrandparent !== null) {
+                const chartDom = chart.getDom();
+                if (chartDom === currentGrandparent) {
+                    cursorTargetMatchesChart = true;
+                }
+            }
+        }
+    }
+    // allows moving cursor inside tooltip
+    if (pinnedPos !== null) {
+        mousePos = pinnedPos;
+        cursorTargetMatchesChart = true;
+    }
+    if (cursorTargetMatchesChart === false)
+        return [];
+    if (chart['_model'] === undefined)
+        return [];
+    const chartModel = chart['_model'];
+    const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;
+    const seriesNum = chartData.timeSeries.length;
+    // tooltip trigger area gets smaller with more series
+    const yBuffer = seriesNum > tooltip_model_1.TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 2;
+    const pointInPixel = [(_a = mousePos.plotCanvas.x) !== null && _a !== void 0 ? _a : 0, (_b = mousePos.plotCanvas.y) !== null && _b !== void 0 ? _b : 0];
+    if (chart.containPixel('grid', pointInPixel)) {
+        const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+        if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
+            return getNearbySeries(chartData, pointInGrid, yBuffer);
+        }
+    }
+    return [];
+}
+exports.getFocusedSeriesData = getFocusedSeriesData;

package/dist/cjs/tooltip/tooltip-model.js

@@ -0,0 +1,82 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMousePosition = exports.emptyTooltipData = exports.defaultCursorData = exports.TOOLTIP_DATE_FORMAT = exports.TOOLTIP_MAX_ITEMS = exports.TOOLTIP_LABELS_MAX_WIDTH = exports.TOOLTIP_MAX_HEIGHT = exports.TOOLTIP_MAX_WIDTH = void 0;
+const react_1 = require("react");
+exports.TOOLTIP_MAX_WIDTH = 650;
+exports.TOOLTIP_MAX_HEIGHT = 230;
+exports.TOOLTIP_LABELS_MAX_WIDTH = exports.TOOLTIP_MAX_WIDTH - 150;
+exports.TOOLTIP_MAX_ITEMS = 50;
+exports.TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: true,
+});
+exports.defaultCursorData = {
+    coords: {
+        viewport: {
+            x: 0,
+            y: 0,
+        },
+        plotCanvas: {
+            x: 0,
+            y: 0,
+        },
+        zrender: {
+            x: 0,
+            y: 0,
+        },
+        target: null,
+    },
+    chartWidth: 0,
+};
+exports.emptyTooltipData = {
+    cursor: exports.defaultCursorData,
+    focusedSeries: null,
+};
+const useMousePosition = () => {
+    const [coords, setCoords] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const setFromEvent = (e) => {
+            return setCoords({
+                viewport: {
+                    x: e.clientX,
+                    y: e.clientY,
+                },
+                plotCanvas: {
+                    x: e.offsetX,
+                    y: e.offsetY,
+                },
+                zrender: {
+                    // echarts canvas coordinates added automatically by zrender
+                    // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas
+                    x: e.zrX,
+                    y: e.zrY,
+                },
+                // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)
+                target: e.target,
+            });
+        };
+        window.addEventListener('mousemove', setFromEvent);
+        return () => {
+            window.removeEventListener('mousemove', setFromEvent);
+        };
+    }, []);
+    return coords;
+};
+exports.useMousePosition = useMousePosition;

package/dist/cjs/utils/combine-sx.js

@@ -0,0 +1,30 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.combineSx = void 0;
+/**
+ * Combines sx props from multiple sources. Useful when creating a component and
+ * you want consumers to be able to provide SxProps that should be combined with
+ * some built-in styles.
+ */
+function combineSx(...sxProps) {
+    return sxProps.flatMap((sx) => {
+        if (sx === undefined)
+            return [];
+        if (Array.isArray(sx))
+            return sx;
+        return [sx];
+    });
+}
+exports.combineSx = combineSx;

package/dist/model/units.d.ts

@@ -17,5 +17,9 @@ declare type DecimalUnitOptions = {
     unitDisplay?: 'short' | 'long' | 'narrow';
 };
 export declare function abbreviateLargeNumber(num: number): string | number;
+export declare function isSanctionedSimpleUnitIdentifier(unitIdentifier: string): boolean;
+export declare const SANCTIONED_UNITS: string[];
+export declare function removeUnitNamespace(unit: string): string;
+export declare const SIMPLE_UNITS: string[];
 export {};
 //# sourceMappingURL=units.d.ts.map

package/dist/model/units.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../src/model/units.ts"],"names":[],"mappings":"AAgBA,oBAAY,WAAW,GAAG,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAEpF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAmB5E;AAED,QAAA,MAAM,aAAa,8FAA+F,CAAC;AAGnH,aAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;CACpC,CAAC;AA0EF,QAAA,MAAM,gBAAgB,wCAAyC,CAAC;AAGhE,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAcF,QAAA,MAAM,gBAAgB,sBAAuB,CAAC;AAG9C,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC3C,CAAC;AAkCF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,mBAUhD"}
+{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../src/model/units.ts"],"names":[],"mappings":"AAeA,oBAAY,WAAW,GAAG,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAEpF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAmB5E;AAED,QAAA,MAAM,aAAa,8FAA+F,CAAC;AAGnH,aAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;CACpC,CAAC;AA0EF,QAAA,MAAM,gBAAgB,wCAAyC,CAAC;AAGhE,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAcF,QAAA,MAAM,gBAAgB,sBAAuB,CAAC;AAG9C,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC3C,CAAC;AAkCF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,mBAUhD;AAGD,wBAAgB,gCAAgC,CAAC,cAAc,EAAE,MAAM,WAEtE;AAGD,eAAO,MAAM,gBAAgB,UA4C5B,CAAC;AAGF,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,UAE/C;AAED,eAAO,MAAM,YAAY,UAA4C,CAAC"}

package/dist/model/units.js

@@ -1 +1 @@
-import{IsSanctionedSimpleUnitIdentifier}from"@formatjs/ecma402-abstract";import{milliseconds}from"date-fns";export function formatValue(e,i){if(void 0===i)return e.toString();if(isTimeUnit(i))return formatTime(e,i);if(isPercentUnit(i))return formatPercent(e,i);if(isDecimalUnit(i))return formatDecimal(e,i);throw new Error(`Unknown unit options ${i}`)}const timeUnitKinds=["Milliseconds","Seconds","Minutes","Hours","Days","Weeks","Months","Years"],timeUnitKindsSet=new Set(timeUnitKinds);function isTimeUnit(e){return timeUnitKindsSet.has(e.kind)}function formatTime(e,i){const n={};switch(i.kind){case"Milliseconds":n.seconds=e/1e3;break;case"Seconds":n.seconds=e;break;case"Minutes":n.minutes=e;break;case"Hours":n.hours=e;break;case"Days":n.days=e;break;case"Weeks":n.weeks=e;break;case"Months":n.months=e;break;case"Years":n.years=e;break;default:const t=i.kind;throw new Error(`Unknown time unit type ${t}`)}const t=milliseconds(n),s=t/1e3;if(s<1)return`${t.toFixed()} milliseconds`;const r=s/60;if(r<1)return`${s.toFixed()} seconds`;const o=r/60;if(o<1)return`${r.toFixed()} minutes`;const a=o/24;if(a<1)return`${o.toFixed()} hours`;const c=a/7;if(c<1)return`${a.toFixed()} days`;const m=c/52;return m<1?`${c.toFixed()} weeks`:`${m.toFixed()} years`}const percentUnitKinds=["Percent","PercentDecimal"],percentUnitKindsSet=new Set(percentUnitKinds);function isPercentUnit(e){return percentUnitKindsSet.has(e.kind)}function formatPercent(e,i){return"PercentDecimal"===i.kind&&(e*=100),e.toFixed(i.decimal_places)+"%"}const decimalUnitKinds=["Decimal"],decimalUnitKindsSet=new Set(decimalUnitKinds);function isDecimalUnit(e){return decimalUnitKindsSet.has(e.kind)}function formatDecimal(e,i){var n,t;const s=null!==(n=i.decimal_places)&&void 0!==n?n:2;if(void 0!==i.suffix&&IsSanctionedSimpleUnitIdentifier(i.suffix)){const n={style:"unit",minimumFractionDigits:0,maximumFractionDigits:s,useGrouping:!0,unit:i.suffix,unitDisplay:null!==(t=i.unitDisplay)&&void 0!==t?t:"narrow"};return new Intl.NumberFormat("en-US",n).format(e)}const r={style:"decimal",minimumFractionDigits:0,maximumFractionDigits:s,useGrouping:!0};return new Intl.NumberFormat("en-US",r).format(e)}export function abbreviateLargeNumber(e){return e>=1e12?e/1e12+"T":e>=1e9?e/1e9+"B":e>=1e6?e/1e6+"M":e>=1e3?e/1e3+"k":e}
+import{milliseconds}from"date-fns";export function formatValue(e,i){if(void 0===i)return e.toString();if(isTimeUnit(i))return formatTime(e,i);if(isPercentUnit(i))return formatPercent(e,i);if(isDecimalUnit(i))return formatDecimal(e,i);throw new Error(`Unknown unit options ${i}`)}const timeUnitKinds=["Milliseconds","Seconds","Minutes","Hours","Days","Weeks","Months","Years"],timeUnitKindsSet=new Set(timeUnitKinds);function isTimeUnit(e){return timeUnitKindsSet.has(e.kind)}function formatTime(e,i){const t={};switch(i.kind){case"Milliseconds":t.seconds=e/1e3;break;case"Seconds":t.seconds=e;break;case"Minutes":t.minutes=e;break;case"Hours":t.hours=e;break;case"Days":t.days=e;break;case"Weeks":t.weeks=e;break;case"Months":t.months=e;break;case"Years":t.years=e;break;default:const n=i.kind;throw new Error(`Unknown time unit type ${n}`)}const n=milliseconds(t),r=n/1e3;if(r<1)return`${n.toFixed()} milliseconds`;const a=r/60;if(a<1)return`${r.toFixed()} seconds`;const s=a/60;if(s<1)return`${a.toFixed()} minutes`;const o=s/24;if(o<1)return`${s.toFixed()} hours`;const c=o/7;if(c<1)return`${o.toFixed()} days`;const m=c/52;return m<1?`${c.toFixed()} weeks`:`${m.toFixed()} years`}const percentUnitKinds=["Percent","PercentDecimal"],percentUnitKindsSet=new Set(percentUnitKinds);function isPercentUnit(e){return percentUnitKindsSet.has(e.kind)}function formatPercent(e,i){return"PercentDecimal"===i.kind&&(e*=100),e.toFixed(i.decimal_places)+"%"}const decimalUnitKinds=["Decimal"],decimalUnitKindsSet=new Set(decimalUnitKinds);function isDecimalUnit(e){return decimalUnitKindsSet.has(e.kind)}function formatDecimal(e,i){var t,n;const r=null!==(t=i.decimal_places)&&void 0!==t?t:2;if(void 0!==i.suffix&&isSanctionedSimpleUnitIdentifier(i.suffix)){const t={style:"unit",minimumFractionDigits:0,maximumFractionDigits:r,useGrouping:!0,unit:i.suffix,unitDisplay:null!==(n=i.unitDisplay)&&void 0!==n?n:"narrow"};return new Intl.NumberFormat("en-US",t).format(e)}const a={style:"decimal",minimumFractionDigits:0,maximumFractionDigits:r,useGrouping:!0};return new Intl.NumberFormat("en-US",a).format(e)}export function abbreviateLargeNumber(e){return e>=1e12?e/1e12+"T":e>=1e9?e/1e9+"B":e>=1e6?e/1e6+"M":e>=1e3?e/1e3+"k":e}export function isSanctionedSimpleUnitIdentifier(e){return SIMPLE_UNITS.indexOf(e)>-1}export const SANCTIONED_UNITS=["angle-degree","area-acre","area-hectare","concentr-percent","digital-bit","digital-byte","digital-gigabit","digital-gigabyte","digital-kilobit","digital-kilobyte","digital-megabit","digital-megabyte","digital-petabyte","digital-terabit","digital-terabyte","duration-day","duration-hour","duration-millisecond","duration-minute","duration-month","duration-second","duration-week","duration-year","length-centimeter","length-foot","length-inch","length-kilometer","length-meter","length-mile-scandinavian","length-mile","length-millimeter","length-yard","mass-gram","mass-kilogram","mass-ounce","mass-pound","mass-stone","temperature-celsius","temperature-fahrenheit","volume-fluid-ounce","volume-gallon","volume-liter","volume-milliliter"];export function removeUnitNamespace(e){return e.slice(e.indexOf("-")+1)}export const SIMPLE_UNITS=SANCTIONED_UNITS.map(removeUnitNamespace);

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:r,y:o,markerColor:t,totalSeries:i,wrapLabels:s}=e,l=r.replace(/[{}"]/g,"");if(1===i){const e="{"===r[0];return _jsxs(Stack,{spacing:.5,children:[_jsxs(Box,{sx:e=>({height:"16px",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"left",color:e.palette.grey[300],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:o})]})]}),_jsx(Divider,{sx:e=>({borderColor:e.palette.grey[500]})}),_jsx(Box,{sx:e=>({color:e.palette.grey[300]}),children:l.split(",").map((r=>{if(r){const[o,t]=e?r.split(":"):r.split("=");return _jsxs(Box,{sx:{display:"flex",gap:"4px"},children:[_jsxs(Typography,{sx:{fontSize:"11px"},children:[o,":"]}),_jsx(Typography,{sx:e=>({color:e.palette.common.white,fontWeight:700,fontSize:"11px"}),children:t})]},r)}}))})]})}const a=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:a})]}),_jsx(Box,{sx:{display:"table-cell",fontWeight:"700",paddingLeft:1.5,textAlign:"right",verticalAlign:"top"},children:o})]})}
+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})]})}

package/dist/tooltip/TooltipContent.js

@@ -1 +1 @@
-import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useMemo}from"react";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesInfo}from"./SeriesInfo";export function TooltipContent(r){const{focusedSeries:e,wrapLabels:s}=r,t=e&&e[0]&&e[0].date?e[0].date:null,n=useMemo((()=>null===e?null:e.sort(((r,e)=>r.y>e.y?-1:1))),[e]);return null!==n&&null!==t?_jsxs(Stack,{py:1,px:1.5,spacing:.5,children:[_jsx(Typography,{variant:"caption",children:(r=>{const[e,s,t]=r.split(",");return _jsxs(_Fragment,{children:[_jsxs(Typography,{variant:"caption",sx:r=>({color:r.palette.grey[300]}),children:[e,", ",s," –"]}),_jsx(Typography,{variant:"caption",children:_jsx("strong",{children:t})})]})})(t)}),_jsx(Divider,{sx:r=>({borderColor:r.palette.grey[500]})}),_jsx(Box,{sx:{display:"table"},children:n.map((({datumIdx:r,seriesIdx:e,seriesName:t,y:o,markerColor:a})=>{if(null===r||null===e)return null;const i=e.toString()+r.toString();return _jsx(SeriesInfo,{seriesName:t,y:o,markerColor:a,totalSeries:n.length,wrapLabels:s},i)}))})]}):_jsx(_Fragment,{})}
+import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useMemo}from"react";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesInfo}from"./SeriesInfo";export function TooltipContent(r){const{focusedSeries:e,wrapLabels:t}=r,s=e&&e[0]&&e[0].date?e[0].date:null,o=useMemo((()=>null===e?null:e.sort(((r,e)=>r.y>e.y?-1:1))),[e]);return null!==o&&null!==s?_jsxs(Stack,{py:1,px:1.5,spacing:.5,children:[_jsx(Typography,{variant:"caption",children:(r=>{const[e,t,s]=r.split(",");return _jsxs(_Fragment,{children:[_jsxs(Typography,{variant:"caption",sx:r=>({color:r.palette.common.white}),children:[e,", ",t," –"]}),_jsx(Typography,{variant:"caption",children:_jsx("strong",{children:s})})]})})(s)}),_jsx(Divider,{sx:r=>({borderColor:r.palette.grey[500]})}),_jsx(Box,{sx:{display:"table"},children:o.map((({datumIdx:r,seriesIdx:e,seriesName:s,y:n,markerColor:a})=>{if(null===r||null===e)return null;const i=e.toString()+r.toString();return _jsx(SeriesInfo,{seriesName:s,y:n,markerColor:a,totalSeries:o.length,wrapLabels:t},i)}))})]}):_jsx(_Fragment,{})}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -12,10 +12,12 @@
     "url": "https://github.com/perses/perses/issues"
   },
   "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist/",
-    "build": "tsc",
+    "build": "tsc --build",
+    "build:cjs": "tsc --project ./tsconfig.cjs.json",
     "test": "echo 'no test to run' && exit 0",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint --fix src --ext .ts,.tsx"