@perses-dev/components 0.4.0 → 0.5.0

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoTooltip = exports.TooltipPlacement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+var TooltipPlacement;
+(function (TooltipPlacement) {
+    TooltipPlacement["Top"] = "top";
+    TooltipPlacement["Left"] = "left";
+    TooltipPlacement["Right"] = "right";
+    TooltipPlacement["Bottom"] = "bottom";
+})(TooltipPlacement = exports.TooltipPlacement || (exports.TooltipPlacement = {}));
+const InfoTooltip = ({ id, title, description, placement, children }) => {
+    return ((0, jsx_runtime_1.jsx)(StyledTooltip, { arrow: true, id: id, placement: placement, title: (0, jsx_runtime_1.jsx)(TooltipContent, { title: title, description: description }), children: (0, jsx_runtime_1.jsx)("div", { children: children }) }));
+};
+exports.InfoTooltip = InfoTooltip;
+const TooltipContent = ({ title, description }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: (theme) => ({
+                    color: theme.palette.text.primary,
+                    fontWeight: theme.typography.fontWeightMedium,
+                }), children: title })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: (theme) => ({
+                    color: theme.palette.text.primary,
+                }), children: description })] }));
+};
+const StyledTooltip = (0, material_1.styled)(({ className, ...props }) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { ...props, classes: { popper: className } })))(({ theme }) => ({
+    [`& .${material_1.tooltipClasses.tooltip}`]: {
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.grey[900],
+        maxWidth: '300px',
+        padding: theme.spacing(1),
+        boxShadow: theme.shadows[1],
+    },
+    [`& .${material_1.tooltipClasses.arrow}`]: {
+        color: theme.palette.background.paper,
+        '&::before': {
+            backgroundColor: theme.palette.secondary.main,
+        },
+    },
+}));

package/dist/cjs/InfoTooltip/InfoTooltip.test.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 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("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const dom_1 = require("@testing-library/dom");
+const InfoTooltip_1 = require("./InfoTooltip");
+describe('InfoTooltip', () => {
+    const title = 'Tooltip Title';
+    const description = 'this is a tooltip';
+    it('should render title and description', async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(InfoTooltip_1.InfoTooltip, { title: title, description: description, children: (0, jsx_runtime_1.jsx)("div", { children: "tooltipAnchor" }) }));
+        const tooltipAnchor = dom_1.screen.getByText('tooltipAnchor');
+        user_event_1.default.hover(tooltipAnchor);
+        await dom_1.screen.findByText(title);
+        dom_1.screen.findByText(description);
+    });
+});

package/dist/cjs/InfoTooltip/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2022 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.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InfoTooltip"), exports);

package/dist/cjs/{LineChart.js → LineChart/LineChart.js}

@@ -1,7 +1,4 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LineChart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -20,16 +17,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const core_1 = require("@perses-dev/core");
 const material_1 = require("@mui/material");
-const merge_1 = __importDefault(require("lodash/merge"));
 const core_2 = require("echarts/core");
 const charts_1 = require("echarts/charts");
 const components_1 = require("echarts/components");
 const renderers_1 = require("echarts/renderers");
-const EChart_1 = require("./EChart");
-const graph_model_1 = require("./model/graph-model");
-const units_1 = require("./model/units");
-const tooltip_model_1 = require("./tooltip/tooltip-model");
-const Tooltip_1 = require("./tooltip/Tooltip");
+const EChart_1 = require("../EChart");
+const graph_1 = require("../model/graph");
+const units_1 = require("../model/units");
+const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
+const tooltip_model_1 = require("../Tooltip/tooltip-model");
+const Tooltip_1 = require("../Tooltip/Tooltip");
+const utils_1 = require("./utils");
 (0, core_2.use)([
     charts_1.LineChart,
     components_1.GridComponent,
@@ -44,32 +42,13 @@ const Tooltip_1 = require("./tooltip/Tooltip");
     components_1.VisualMapComponent,
     renderers_1.CanvasRenderer,
 ]);
-const noDataOption = {
-    title: {
-        show: true,
-        textStyle: {
-            color: 'grey',
-            fontSize: 16,
-            fontWeight: 400,
-        },
-        text: 'No data',
-        left: 'center',
-        top: 'center',
-    },
-    xAxis: {
-        show: false,
-    },
-    yAxis: {
-        show: false,
-    },
-    series: [],
-};
-function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEnabled, onDataZoom, }) {
-    const theme = (0, material_1.useTheme)();
+function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom }) {
+    const chartsTheme = (0, ChartsThemeProvider_1.useChartsTheme)();
     const chartRef = (0, react_1.useRef)();
     const [showTooltip, setShowTooltip] = (0, react_1.useState)(true);
     const handleEvents = (0, react_1.useMemo)(() => {
         return {
+            // TODO: use legendselectchanged event to fix tooltip when legend selected
             datazoom: (params) => {
                 var _a, _b;
                 if (onDataZoom === undefined || params.batch[0] === undefined)
@@ -90,14 +69,14 @@ function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEna
             },
         };
     }, [data, onDataZoom]);
-    if (chartRef.current !== undefined && dataZoomEnabled === true) {
-        const chart = chartRef.current;
-        chart.dispatchAction({
-            type: 'takeGlobalCursor',
-            key: 'dataZoomSelect',
-            dataZoomSelectActive: true,
-        });
+    if (chartRef.current !== undefined) {
+        (0, utils_1.enableDataZoom)(chartRef.current);
     }
+    const handleOnDoubleClick = () => {
+        if (chartRef.current !== undefined) {
+            (0, utils_1.restoreChart)(chartRef.current);
+        }
+    };
     const handleOnMouseDown = (event) => {
         // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
         if (event.target instanceof HTMLCanvasElement) {
@@ -114,65 +93,22 @@ 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)
-            return noDataOption;
-        const showPointsOnHover = data.timeSeries.length < graph_model_1.PROGRESSIVE_MODE_SERIES_LIMIT;
-        const defaultGrid = {
-            top: 10,
-            right: 20,
-            bottom: 5,
-            left: 20,
-            containLabel: true,
-        };
-        const defaultToolbox = {
-            show: true,
-            top: 10,
-            right: 10,
-            iconStyle: {
-                borderColor: theme.palette.text.primary,
-            },
-            feature: {
-                dataZoom: {
-                    icon: dataZoomEnabled ? null : undefined,
-                    yAxisIndex: 'none',
-                },
-                restore: {},
-            },
-            emphasis: {
-                iconStyle: {
-                    textFill: theme.palette.text.primary,
-                },
-            },
-        };
-        if (dataZoomEnabled === false) {
-            delete defaultToolbox.feature.dataZoom.icon;
-        }
+            return chartsTheme.noDataOption;
+        const showPointsOnHover = data.timeSeries.length < graph_1.PROGRESSIVE_MODE_SERIES_LIMIT;
+        const rangeMs = (_a = data.rangeMs) !== null && _a !== void 0 ? _a : (0, utils_1.getDateRange)(data.xAxis);
         const option = {
-            title: {
-                show: false,
-            },
-            grid: (0, merge_1.default)(defaultGrid, grid),
-            toolbox: (0, merge_1.default)(defaultToolbox, toolbox),
             series: data.timeSeries,
             xAxis: {
                 type: 'category',
                 data: data.xAxis,
-                max: (value) => value.max,
+                max: data.xAxisMax,
                 axisLabel: {
-                    margin: 15,
-                    color: theme.palette.text.primary,
                     formatter: (value) => {
-                        return getFormattedDate(value);
-                    },
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLine: {
-                    lineStyle: {
-                        color: theme.palette.grey['600'],
+                        return (0, utils_1.getFormattedDate)(value, rangeMs);
                     },
                 },
             },
@@ -180,18 +116,8 @@ function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEna
                 type: 'value',
                 boundaryGap: [0, '10%'],
                 axisLabel: {
-                    margin: 12,
-                    color: theme.palette.text.primary,
                     formatter: (value) => {
-                        return (0, units_1.abbreviateLargeNumber)(value);
-                    },
-                },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        width: 0.5,
-                        color: theme.palette.grey['300'],
-                        opacity: 0.95,
+                        return (0, units_1.formatValue)(value, unit);
                     },
                 },
             },
@@ -204,24 +130,25 @@ function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEna
                     type: 'none',
                 },
             },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none',
+                    },
+                },
+            },
+            grid,
             legend,
             visualMap,
         };
         return option;
-    }, [data, theme, grid, legend, toolbox, dataZoomEnabled, visualMap]);
+    }, [data, grid, legend, visualMap]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             height,
-        }, onMouseDown: handleOnMouseDown, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseLeave, onMouseEnter: handleOnMouseEnter, children: [showTooltip === true && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { chartRef: chartRef, tooltipData: tooltip_model_1.emptyTooltipData, chartData: data, wrapLabels: true })), (0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
+        }, onDoubleClick: handleOnDoubleClick, onMouseDown: handleOnMouseDown, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseLeave, onMouseEnter: handleOnMouseEnter, children: [showTooltip === true && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { chartRef: chartRef, tooltipData: tooltip_model_1.emptyTooltipData, chartData: data, wrapLabels: true })), (0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
                     width: '100%',
                     height: '100%',
-                }, option: option, onEvents: handleEvents, _instance: chartRef })] }));
+                }, option: option, theme: chartsTheme.themeName, onEvents: handleEvents, _instance: chartRef })] }));
 }
 exports.LineChart = LineChart;
-function getFormattedDate(value) {
-    const XAXIS_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: false,
-    });
-    return XAXIS_DATE_FORMAT.format(value * 1000);
-}

package/dist/cjs/LineChart/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2022 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.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LineChart"), exports);

package/dist/cjs/LineChart/utils.js

@@ -0,0 +1,72 @@
+"use strict";
+// Copyright 2022 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.getFormattedDate = exports.getDateRange = exports.restoreChart = exports.enableDataZoom = void 0;
+// enable dataZoom without requring user to click toolbox icon
+function enableDataZoom(chart) {
+    const chartModel = chart['_model'];
+    if (chartModel === undefined)
+        return;
+    if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {
+        // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')
+        if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {
+            chart.dispatchAction({
+                type: 'takeGlobalCursor',
+                key: 'dataZoomSelect',
+                dataZoomSelectActive: true,
+            });
+        }
+    }
+}
+exports.enableDataZoom = enableDataZoom;
+// restore chart to original state before zoom or other actions were dispatched
+// TODO: support incremental unzoom instead of restore to original state
+function restoreChart(chart) {
+    chart.dispatchAction({
+        type: 'restore', // https://echarts.apache.org/en/api.html#events.restore
+    });
+}
+exports.restoreChart = restoreChart;
+// 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];
+}
+exports.getDateRange = getDateRange;
+// determines time granularity for axis labels, defaults to hh:mm
+function getFormattedDate(value, rangeMs) {
+    const dateFormatOptions = {
+        hour: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h23',
+    };
+    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, ' ');
+}
+exports.getFormattedDate = getFormattedDate;

package/dist/cjs/StatChart/StatChart.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 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 lodash_es_1 = require("lodash-es");
+const core_1 = require("echarts/core");
+const charts_1 = require("echarts/charts");
+const charts_2 = require("echarts/charts");
+const components_1 = require("echarts/components");
+const renderers_1 = require("echarts/renderers");
+const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
+const units_1 = require("../model/units");
+const EChart_1 = require("../EChart");
+(0, core_1.use)([
+    charts_1.GaugeChart,
+    charts_2.LineChart,
+    components_1.GridComponent,
+    components_1.DatasetComponent,
+    components_1.TitleComponent,
+    components_1.TooltipComponent,
+    renderers_1.CanvasRenderer,
+]);
+const PANEL_PADDING = 32;
+const MIN_VALUE_SIZE = 12;
+const MAX_VALUE_SIZE = 36;
+function StatChart(props) {
+    const { width, height, data, unit, sparkline } = props;
+    const chartsTheme = (0, ChartsThemeProvider_1.useChartsTheme)();
+    const formattedValue = data.calculatedValue === undefined ? 'No data' : (0, units_1.formatValue)(data.calculatedValue, unit);
+    const option = (0, react_1.useMemo)(() => {
+        if (data.seriesData === undefined)
+            return chartsTheme.noDataOption;
+        const series = data.seriesData;
+        const statSeries = [];
+        if (sparkline !== undefined) {
+            const lineSeries = {
+                type: 'line',
+                data: [...series.values],
+                zlevel: 1,
+                symbol: 'none',
+                animation: false,
+                silent: true,
+            };
+            const mergedSeries = (0, lodash_es_1.merge)(lineSeries, sparkline);
+            statSeries.push(mergedSeries);
+        }
+        const option = {
+            title: {
+                show: false,
+            },
+            grid: {
+                show: false,
+                top: '35%',
+                right: 0,
+                bottom: 0,
+                left: 0,
+                containLabel: false,
+            },
+            xAxis: {
+                type: 'time',
+                show: false,
+                boundaryGap: false,
+            },
+            yAxis: {
+                type: 'value',
+                show: false,
+            },
+            tooltip: {
+                show: false,
+            },
+            series: statSeries,
+        };
+        return option;
+    }, [data, chartsTheme, sparkline]);
+    const isLargePanel = width > 250 && height > 180;
+    // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
+    const charactersAdjust = formattedValue.length;
+    const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h3", sx: (theme) => ({
+                    color: theme.palette.text.primary,
+                    fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
+                }), children: formattedValue }), sparkline !== undefined && ((0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
+                    width: width + PANEL_PADDING,
+                    height: height,
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                }, option: option, theme: chartsTheme.themeName, renderer: "svg" }))] }));
+}
+exports.StatChart = StatChart;

package/dist/cjs/StatChart/StatChart.test.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
+const StatChart_1 = require("./StatChart");
+describe('StatChart', () => {
+    const contentDimensions = {
+        width: 200,
+        height: 200,
+    };
+    const unit = {
+        kind: 'Decimal',
+        decimal_places: 2,
+    };
+    const mockStatData = {
+        calculatedValue: 7.72931659687181,
+        name: 'Example Stat Chart',
+        seriesData: {
+            name: '(((count(count(node_cpu_seconds_total{job="example"}) by (cpu))',
+            values: [
+                [1654006170000, 7.736401673473903],
+                [1654006185000, 7.733891213538757],
+                [1654006200000, 7.731101813010433],
+                [1654006215000, 7.722454672079215],
+                [1654006230000, 7.722733612256738],
+            ],
+        },
+    };
+    const exampleChartsTheme = {
+        themeName: 'perses',
+        echartsTheme: {},
+        noDataOption: {},
+        sparkline: {
+            width: 1,
+            color: '#000000',
+        },
+    };
+    describe('Render default options (no sparkline)', () => {
+        it('should render', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ChartsThemeProvider_1.ChartsThemeProvider, { themeName: "perses", chartsTheme: exampleChartsTheme, children: (0, jsx_runtime_1.jsx)(StatChart_1.StatChart, { width: contentDimensions.width, height: contentDimensions.height, data: mockStatData, unit: unit }) }));
+            expect(react_1.screen.getByText('7.73')).toBeInTheDocument();
+        });
+    });
+});

package/dist/cjs/StatChart/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2022 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.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./StatChart"), exports);

package/dist/cjs/{tooltip → 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',