@perses-dev/components 0.51.0-beta.1 → 0.51.0-rc.1

package/dist/cjs/EChart/EChart.js

@@ -34,17 +34,27 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-// Loading the ECharts extensions should happen in the respective plugin (in this case, the scatterplot plugin).
+// Loading the ECharts extensions should happen in the respective plugins.
 // This is a workaround for https://github.com/perses/plugins/issues/83.
 (0, _core.use)([
     _components.DatasetComponent,
     _components.DataZoomComponent,
     _components.LegendComponent,
+    _charts.LineChart,
+    _charts.GaugeChart,
+    _charts.PieChart,
     _charts.ScatterChart,
+    _charts.CustomChart,
+    _charts.HeatmapChart,
     _components.GridComponent,
     _components.TitleComponent,
+    _components.ToolboxComponent,
     _components.TooltipComponent,
-    _renderers.CanvasRenderer
+    _renderers.CanvasRenderer,
+    _components.VisualMapComponent,
+    _components.MarkAreaComponent,
+    _components.MarkLineComponent,
+    _components.MarkPointComponent
 ]);
 const mouseEvents = [
     'click',
@@ -62,7 +72,7 @@ const batchEvents = [
     'downplay',
     'highlight'
 ];
-const EChart = /*#__PURE__*/ (0, _react.memo)(function EChart({ option, theme, renderer, sx, onEvents, _instance, syncGroup, onChartInitialized }) {
+const EChart = /*#__PURE__*/ (0, _react.memo)(function EChart({ option, theme, renderer, sx, style, onEvents, _instance, syncGroup, onChartInitialized }) {
     const initialOption = (0, _react.useRef)(option);
     const prevOption = (0, _react.useRef)(option);
     const containerRef = (0, _react.useRef)(null);
@@ -152,11 +162,13 @@ const EChart = /*#__PURE__*/ (0, _react.memo)(function EChart({ option, theme, r
         });
         updateSize();
     }, [
-        sx
+        sx,
+        style
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ref: containerRef,
-        sx: sx
+        sx: sx,
+        style: style
     });
 });
 // Validate event config and bind custom events

package/dist/cjs/JSONEditor.js

@@ -36,11 +36,6 @@ function JSONEditor(props) {
     const isDarkMode = theme.palette.mode === 'dark';
     const [value, setValue] = (0, _react.useState)(()=>JSON.stringify(props.value, null, 2));
     const [lastProcessedValue, setLastProcessedValue] = (0, _react.useState)(value);
-    (0, _react.useEffect)(()=>{
-        setValue(JSON.stringify(props.value, null, 2));
-    }, [
-        props.value
-    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcodemirror.default, {
         ...props,
         style: {
@@ -55,6 +50,10 @@ function JSONEditor(props) {
         value: value,
         onChange: (newValue)=>{
             setValue(newValue);
+            // Trigger the provided onChange callback in real-time
+            if (props.onChange) {
+                props.onChange(newValue);
+            }
         },
         onBlur: ()=>{
             // Don't trigger the provided onChange if the last processed value is equal to the current value.

package/dist/cjs/Table/Table.js

@@ -35,7 +35,7 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
 // does not do deep equality checking for objects and arrays.
 const DEFAULT_ROW_SELECTION = {};
 const DEFAULT_SORTING = [];
-function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, rowSelectionVariant = 'standard', ...otherProps }) {
+function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = _tablemodel.DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, pagination, onPaginationChange, rowSelectionVariant = 'standard', ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
@@ -122,6 +122,10 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         getRowId,
         getCoreRowModel: (0, _reacttable.getCoreRowModel)(),
         getSortedRowModel: (0, _reacttable.getSortedRowModel)(),
+        getPaginationRowModel: pagination ? (0, _reacttable.getPaginationRowModel)() : undefined,
+        // without this setting, the getPaginationRowModel setting persists and it is not possible to switch from paginated to unpaginated
+        // can be removed once https://github.com/TanStack/table/pull/5974 is merged
+        manualPagination: !pagination,
         enableRowSelection: !!checkboxSelection,
         onRowSelectionChange: handleRowSelectionChange,
         onSortingChange: handleSortingChange,
@@ -130,7 +134,10 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         sortDescFirst: true,
         state: {
             rowSelection,
-            sorting
+            sorting,
+            ...pagination ? {
+                pagination
+            } : {}
         }
     });
     const handleRowClick = (0, _react.useCallback)((e, rowId)=>{
@@ -150,6 +157,9 @@ function Table({ data, columns, cellConfigs, density = 'standard', defaultColumn
         rows: table.getRowModel().rows,
         columns: table.getAllFlatColumns(),
         headers: table.getHeaderGroups(),
-        cellConfigs: cellConfigs
+        cellConfigs: cellConfigs,
+        pagination: pagination,
+        onPaginationChange: onPaginationChange,
+        rowCount: table.getRowCount()
     });
 }

package/dist/cjs/{StatChart/utils/formatStatChartValue.js → Table/TableFoot.js}

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 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
@@ -14,21 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "formatStatChartValue", {
+Object.defineProperty(exports, "TableFoot", {
     enumerable: true,
     get: function() {
-        return formatStatChartValue;
+        return TableFoot;
     }
 });
-const _core = require("@perses-dev/core");
-const formatStatChartValue = (value, format)=>{
-    if (value === null) {
-        return 'null';
-    } else if (typeof value === 'number') {
-        return (0, _core.formatValue)(value, format);
-    } else if (value === undefined) {
-        return '';
-    } else {
-        return value;
-    }
-};
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const TableFoot = /*#__PURE__*/ (0, _react.forwardRef)(function TableFoot(props, ref) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableFooter, {
+        ...props,
+        ref: ref
+    });
+});

package/dist/cjs/Table/VirtualizedTable.js

@@ -33,7 +33,8 @@ const _TableHeaderCell = require("./TableHeaderCell");
 const _TableCell = require("./TableCell");
 const _VirtualizedTableContainer = require("./VirtualizedTableContainer");
 const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
-function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs }) {
+const _TableFoot = require("./TableFoot");
+function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount }) {
     const virtuosoRef = (0, _react.useRef)(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -70,6 +71,7 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
                 });
             },
             TableHead: _TableHead.TableHead,
+            TableFoot: _TableFoot.TableFoot,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             TableRow: ({ item, ...props })=>{
                 const index = props['data-index'];
@@ -104,6 +106,20 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
         rows,
         width
     ]);
+    const handleChangePage = (_event, newPage)=>{
+        if (!pagination || !onPaginationChange) return;
+        onPaginationChange({
+            ...pagination,
+            pageIndex: newPage
+        });
+    };
+    const handleChangeRowsPerPage = (event)=>{
+        if (!pagination || !onPaginationChange) return;
+        onPaginationChange({
+            pageIndex: 0,
+            pageSize: parseInt(event.target.value, 10)
+        });
+    };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         style: {
             width,
@@ -151,6 +167,19 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
                     })
                 });
             },
+            fixedFooterContent: pagination ? ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableRow, {
+                    sx: {
+                        backgroundColor: (theme)=>theme.palette.background.default
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TablePagination, {
+                        colSpan: columns.length,
+                        count: rowCount,
+                        page: pagination.pageIndex,
+                        rowsPerPage: pagination.pageSize,
+                        onPageChange: handleChangePage,
+                        onRowsPerPageChange: handleChangeRowsPerPage
+                    })
+                }) : undefined,
             itemContent: (index)=>{
                 const row = rows[index];
                 if (!row) {

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -44,13 +44,10 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const chartWidth = chart?.getWidth() ?? _tooltipmodel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const containerElement = containerId ? document.querySelector(containerId) : undefined;
     // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
     const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
-    if (!isTooltipPinned) {
-        transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);
-    }
+    transform.current = (0, _utils.assembleTransform)(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
     // Get series nearby the cursor and pass into tooltip content children.
     const nearbySeries = (0, _nearbyseries.getNearbySeriesData)({
         mousePos,

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -14,7 +14,6 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./LineChartTooltip"), exports);
 _export_star(require("./SeriesInfo"), exports);
 _export_star(require("./SeriesLabelsStack"), exports);
 _export_star(require("./SeriesMarker"), exports);

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

@@ -66,18 +66,9 @@ _export(exports, {
     UNPIN_TOOLTIP_HELP_TEXT: function() {
         return UNPIN_TOOLTIP_HELP_TEXT;
     },
-    browser: function() {
-        return browser;
-    },
     defaultCursorData: function() {
         return defaultCursorData;
     },
-    pointerEventsSupported: function() {
-        return pointerEventsSupported;
-    },
-    trackingEventName: function() {
-        return trackingEventName;
-    },
     useMousePosition: function() {
         return useMousePosition;
     }
@@ -117,14 +108,6 @@ const defaultCursorData = {
     chartWidth: 0
 };
 const EMPTY_TOOLTIP_DATA = [];
-const browser = {
-    // IE 11 Trident/7.0; rv:11.0
-    ie: navigator.userAgent.match(/MSIE\s([\d.]+)/) || navigator.userAgent.match(/Trident\/.+?rv:(([\d.]+))/),
-    // IE 12 and 12+
-    edge: navigator.userAgent.match(/Edge?\/([\d.]+)/)
-};
-const pointerEventsSupported = 'onpointerdown' in window && (browser.edge || browser.ie && browser.ie[1] && +browser.ie[1] >= 11);
-const trackingEventName = pointerEventsSupported ? 'pointermove' : 'mousemove';
 const useMousePosition = ()=>{
     const [coords, setCoords] = (0, _react.useState)(null);
     (0, _react.useEffect)(()=>{
@@ -139,22 +122,20 @@ const useMousePosition = ()=>{
                     y: e.clientY
                 },
                 plotCanvas: {
-                    // Always use zrender mousemove coords since they handle browser inconsistencies for us
+                    // Default to zrender mousemove coords since they handle browser inconsistencies for us
                     // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY
                     // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120
-                    x: e.zrX,
-                    y: e.zrY
+                    // Fallback to offsetX and offsetY to ensure tooltip works correctly in Edge
+                    x: e.zrX ?? e.offsetX,
+                    y: e.zrY ?? e.offsetY
                 },
                 // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)
                 target: e.target
             });
         };
-        // Devices that both enabled touch and mouse don't trigger touch events correctly
-        // which leads to missing zrender mousemove coordinates
-        // {@link https://github.com/ecomfe/zrender/blob/ae8cfaae186e6c1bf66b5dc431b2cdda5e67dacf/src/dom/HandlerProxy.ts#L423-L428 }
-        window.addEventListener(trackingEventName, setFromEvent);
+        window.addEventListener('mousemove', setFromEvent);
         return ()=>{
-            window.removeEventListener(trackingEventName, setFromEvent);
+            window.removeEventListener('mousemove', setFromEvent);
         };
     }, []);
     return coords;

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -29,7 +29,7 @@ _export(exports, {
     }
 });
 const _tooltipmodel = require("./tooltip-model");
-function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth, containerElement) {
+function assembleTransform(mousePos, pinnedPos, tooltipHeight, tooltipWidth, containerElement) {
     if (mousePos === null) {
         return undefined;
     }
@@ -39,33 +39,37 @@ function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, toolt
         mousePos = pinnedPos;
     }
     if (mousePos.plotCanvas.x === undefined) return undefined;
-    // By default, tooltip is located in a Portal attached to the body.
-    // Using page coordinates instead of viewport ensures the tooltip is
-    // absolutely positioned correctly as the user scrolls
-    let x = mousePos.page.x;
+    let x = mousePos.page.x + cursorPaddingX; // Default to right side of the cursor
     let y = mousePos.page.y + cursorPaddingY;
-    // If containerElement is defined, tooltip is attached to the containerElement instead.
-    let containerRect;
+    // If containerElement is defined, adjust coordinates relative to the container
     if (containerElement) {
-        // get the container's position relative to viewport
-        containerRect = containerElement.getBoundingClientRect();
-        // calculate the mouse position relative to container
+        const containerRect = containerElement.getBoundingClientRect();
         x = x - containerRect.left + containerElement.scrollLeft;
         y = y - containerRect.top + containerElement.scrollTop;
-    }
-    if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {
-        // adjust so tooltip does not get cut off at bottom of chart
-        // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport
-        y = y - tooltipHeight * _tooltipmodel.TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
-        // If y is now above of the top of containerElement, set y close to 0 so tooltip does not get cut off
-        if (containerRect && y < containerRect.top) {
-            y = _tooltipmodel.TOOLTIP_PADDING / 2; // leaves room for some padding around tooltip
+        // Ensure tooltip does not go out of the container's bottom
+        const containerBottom = containerRect.top + containerElement.scrollHeight;
+        if (y + tooltipHeight > containerBottom) {
+            y = Math.max(containerBottom - tooltipHeight - cursorPaddingY, _tooltipmodel.TOOLTIP_PADDING / 2);
+        }
+    } else {
+        // Ensure tooltip does not go out of the screen on the bottom
+        if (y + tooltipHeight > window.innerHeight + window.scrollY) {
+            y = Math.max(window.innerHeight + window.scrollY - tooltipHeight - cursorPaddingY, _tooltipmodel.TOOLTIP_PADDING / 2);
         }
     }
-    // use tooltip width to determine when to repos from right to left
-    const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
-    // reposition so tooltip is never too close to right side of chart or left side of browser window
-    return mousePos.plotCanvas.x > xPosAdjustThreshold && x > _tooltipmodel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
+    // Ensure tooltip does not go out of the screen on the right
+    if (x + tooltipWidth > window.innerWidth) {
+        x = mousePos.page.x - tooltipWidth - cursorPaddingX; // Move to the left of the cursor
+    }
+    // Ensure tooltip does not go out of the screen on the left
+    if (x < cursorPaddingX) {
+        x = cursorPaddingX;
+    }
+    // Ensure tooltip does not go out of the screen on the top
+    if (y < _tooltipmodel.TOOLTIP_PADDING / 2) {
+        y = _tooltipmodel.TOOLTIP_PADDING / 2;
+    }
+    return `translate3d(${x}px, ${y}px, 0)`;
 }
 function getTooltipStyles(theme, pinnedPos, maxHeight) {
     const adjustedMaxHeight = maxHeight ? maxHeight - _tooltipmodel.TOOLTIP_PADDING : undefined;

package/dist/cjs/context/ChartsProvider.js

@@ -78,18 +78,20 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 function ChartsProvider(props) {
-    const { children, chartsTheme, enablePinning = false } = props;
+    const { children, chartsTheme, enablePinning = false, enableSyncGrouping = true } = props;
     const [lastTooltipPinnedCoords, setLastTooltipPinnedCoords] = (0, _react.useState)(null);
     const ctx = (0, _react.useMemo)(()=>{
         return {
             chartsTheme,
             enablePinning,
             lastTooltipPinnedCoords,
+            enableSyncGrouping,
             setLastTooltipPinnedCoords
         };
     }, [
         chartsTheme,
         enablePinning,
+        enableSyncGrouping,
         lastTooltipPinnedCoords,
         setLastTooltipPinnedCoords
     ]);

package/dist/cjs/index.js

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./AlignSelector"), exports);
-_export_star(require("./BarChart"), exports);
 _export_star(require("./ColorPicker"), exports);
 _export_star(require("./ContentWithLegend"), exports);
 _export_star(require("./controls"), exports);
@@ -28,21 +27,17 @@ _export_star(require("./ErrorAlert"), exports);
 _export_star(require("./ErrorBoundary"), exports);
 _export_star(require("./FontSizeSelector"), exports);
 _export_star(require("./FormEditor"), exports);
-_export_star(require("./GaugeChart"), exports);
 _export_star(require("./InfoTooltip"), exports);
 _export_star(require("./JSONEditor"), exports);
 _export_star(require("./Legend"), exports);
-_export_star(require("./LineChart"), exports);
 _export_star(require("./LinksEditor"), exports);
 _export_star(require("./ModeSelector"), exports);
 _export_star(require("./OptionsEditorLayout"), exports);
 _export_star(require("./Overlay"), exports);
 _export_star(require("./SettingsAutocomplete"), exports);
 _export_star(require("./SortSelector"), exports);
-_export_star(require("./StatChart"), exports);
 _export_star(require("./Table"), exports);
 _export_star(require("./ThresholdsEditor"), exports);
-_export_star(require("./TimeChart"), exports);
 _export_star(require("./TimeRangeSelector"), exports);
 _export_star(require("./TimeSeriesTooltip"), exports);
 _export_star(require("./ToolbarIconButton"), exports);
@@ -55,8 +50,6 @@ _export_star(require("./test-utils"), exports);
 _export_star(require("./theme"), exports);
 _export_star(require("./TransformsEditor"), exports);
 _export_star(require("./RefreshIntervalPicker"), exports);
-_export_star(require("./PieChart"), exports);
-_export_star(require("./StatusHistoryChart"), exports);
 _export_star(require("./ValueMappingEditor"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/test-utils/theme.js

@@ -55,6 +55,7 @@ const testChartsTheme = (0, _utils.generateChartsTheme)((0, _material.createThem
 const mockChartsContext = {
     chartsTheme: testChartsTheme,
     enablePinning: false,
+    enableSyncGrouping: true,
     lastTooltipPinnedCoords: null,
     setLastTooltipPinnedCoords: ()=>null
 };

package/dist/cjs/utils/axis.js

@@ -14,17 +14,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    getDateRange: function() {
-        return getDateRange;
-    },
-    getFormattedAxis: function() {
+Object.defineProperty(exports, "getFormattedAxis", {
+    enumerable: true,
+    get: function() {
         return getFormattedAxis;
     }
 });
@@ -53,10 +45,3 @@ function getFormattedAxis(axis, unit) {
         (0, _merge.default)(AXIS_DEFAULT, axis)
     ];
 }
-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];
-}

package/dist/cjs/utils/format.js

@@ -32,9 +32,6 @@ _export(exports, {
     },
     getFormattedAxisLabel: function() {
         return getFormattedAxisLabel;
-    },
-    getFormattedDate: function() {
-        return getFormattedDate;
     }
 });
 const _datefnstz = require("date-fns-tz");
@@ -67,24 +64,6 @@ function formatWithTimeZone(date, formatString, timeZone) {
         return (0, _datefnstz.formatInTimeZone)(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
     }
 }
-function getFormattedDate(value, rangeMs, timeZone) {
-    const dateFormatOptions = dateFormatOptionsWithTimeZone({
-        hour: 'numeric',
-        minute: 'numeric',
-        hourCycle: 'h23'
-    }, timeZone);
-    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, ' ');
-}
 function getFormattedAxisLabel(rangeMs) {
     const dayMs = 86400000;
     const monthMs = 2629440000;

package/dist/context/ChartsProvider.d.ts

@@ -4,11 +4,13 @@ import { CursorCoordinates } from '../TimeSeriesTooltip';
 export interface ChartsProviderProps {
     chartsTheme: PersesChartsTheme;
     enablePinning?: boolean;
+    enableSyncGrouping?: boolean;
     children?: React.ReactNode;
 }
 export interface SharedChartsState {
     chartsTheme: PersesChartsTheme;
     enablePinning: boolean;
+    enableSyncGrouping: boolean;
     lastTooltipPinnedCoords: CursorCoordinates | null;
     setLastTooltipPinnedCoords: (lastTooltipPinnedCoords: CursorCoordinates | null) => void;
 }

package/dist/context/ChartsProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartsProvider.d.ts","sourceRoot":"","sources":["../../src/context/ChartsProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAiB,YAAY,EAAiC,MAAM,OAAO,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,iBAAiB,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,iBAAiB,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,uBAAuB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClD,0BAA0B,EAAE,CAAC,uBAAuB,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CACzF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAevE;AAED,eAAO,MAAM,kBAAkB,8CAA0D,CAAC;AAE1F,wBAAgB,gBAAgB,IAAI,iBAAiB,CAMpD;AAED,wBAAgB,cAAc,IAAI,iBAAiB,CAGlD"}
+{"version":3,"file":"ChartsProvider.d.ts","sourceRoot":"","sources":["../../src/context/ChartsProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAiB,YAAY,EAAiC,MAAM,OAAO,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,iBAAiB,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,iBAAiB,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,uBAAuB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClD,0BAA0B,EAAE,CAAC,uBAAuB,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CACzF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAgBvE;AAED,eAAO,MAAM,kBAAkB,8CAA0D,CAAC;AAE1F,wBAAgB,gBAAgB,IAAI,iBAAiB,CAMpD;AAED,wBAAgB,cAAc,IAAI,iBAAiB,CAGlD"}

package/dist/context/ChartsProvider.js

@@ -13,18 +13,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useState } from 'react';
 export function ChartsProvider(props) {
-    const { children, chartsTheme, enablePinning = false } = props;
+    const { children, chartsTheme, enablePinning = false, enableSyncGrouping = true } = props;
     const [lastTooltipPinnedCoords, setLastTooltipPinnedCoords] = useState(null);
     const ctx = useMemo(()=>{
         return {
             chartsTheme,
             enablePinning,
             lastTooltipPinnedCoords,
+            enableSyncGrouping,
             setLastTooltipPinnedCoords
         };
     }, [
         chartsTheme,
         enablePinning,
+        enableSyncGrouping,
         lastTooltipPinnedCoords,
         setLastTooltipPinnedCoords
     ]);

package/dist/context/ChartsProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/ChartsProvider.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { createContext, ReactElement, useContext, useMemo, useState } from 'react';\nimport { PersesChartsTheme } from '../model';\nimport { CursorCoordinates } from '../TimeSeriesTooltip';\n\nexport interface ChartsProviderProps {\n  chartsTheme: PersesChartsTheme;\n  enablePinning?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface SharedChartsState {\n  chartsTheme: PersesChartsTheme;\n  enablePinning: boolean;\n  lastTooltipPinnedCoords: CursorCoordinates | null;\n  setLastTooltipPinnedCoords: (lastTooltipPinnedCoords: CursorCoordinates | null) => void;\n}\n\nexport function ChartsProvider(props: ChartsProviderProps): ReactElement {\n  const { children, chartsTheme, enablePinning = false } = props;\n\n  const [lastTooltipPinnedCoords, setLastTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n\n  const ctx = useMemo(() => {\n    return {\n      chartsTheme,\n      enablePinning,\n      lastTooltipPinnedCoords,\n      setLastTooltipPinnedCoords,\n    };\n  }, [chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords]);\n\n  return <ChartsThemeContext.Provider value={ctx}>{children}</ChartsThemeContext.Provider>;\n}\n\nexport const ChartsThemeContext = createContext<SharedChartsState | undefined>(undefined);\n\nexport function useChartsContext(): SharedChartsState {\n  const ctx = useContext(ChartsThemeContext);\n  if (ctx === undefined) {\n    throw new Error('No ChartsThemeContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\nexport function useChartsTheme(): PersesChartsTheme {\n  const ctx = useChartsContext();\n  return ctx.chartsTheme;\n}\n"],"names":["React","createContext","useContext","useMemo","useState","ChartsProvider","props","children","chartsTheme","enablePinning","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","ctx","ChartsThemeContext","Provider","value","undefined","useChartsContext","Error","useChartsTheme"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAASC,aAAa,EAAgBC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAiB1F,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,gBAAgB,KAAK,EAAE,GAAGH;IAEzD,MAAM,CAACI,yBAAyBC,2BAA2B,GAAGP,SAAmC;IAEjG,MAAMQ,MAAMT,QAAQ;QAClB,OAAO;YACLK;YACAC;YACAC;YACAC;QACF;IACF,GAAG;QAACH;QAAaC;QAAeC;QAAyBC;KAA2B;IAEpF,qBAAO,KAACE,mBAAmBC,QAAQ;QAACC,OAAOH;kBAAML;;AACnD;AAEA,OAAO,MAAMM,mCAAqBZ,cAA6Ce,WAAW;AAE1F,OAAO,SAASC;IACd,MAAML,MAAMV,WAAWW;IACvB,IAAID,QAAQI,WAAW;QACrB,MAAM,IAAIE,MAAM;IAClB;IACA,OAAON;AACT;AAEA,OAAO,SAASO;IACd,MAAMP,MAAMK;IACZ,OAAOL,IAAIJ,WAAW;AACxB"}
+{"version":3,"sources":["../../src/context/ChartsProvider.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { createContext, ReactElement, useContext, useMemo, useState } from 'react';\nimport { PersesChartsTheme } from '../model';\nimport { CursorCoordinates } from '../TimeSeriesTooltip';\n\nexport interface ChartsProviderProps {\n  chartsTheme: PersesChartsTheme;\n  enablePinning?: boolean;\n  enableSyncGrouping?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface SharedChartsState {\n  chartsTheme: PersesChartsTheme;\n  enablePinning: boolean;\n  enableSyncGrouping: boolean;\n  lastTooltipPinnedCoords: CursorCoordinates | null;\n  setLastTooltipPinnedCoords: (lastTooltipPinnedCoords: CursorCoordinates | null) => void;\n}\n\nexport function ChartsProvider(props: ChartsProviderProps): ReactElement {\n  const { children, chartsTheme, enablePinning = false, enableSyncGrouping = true } = props;\n\n  const [lastTooltipPinnedCoords, setLastTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n\n  const ctx = useMemo(() => {\n    return {\n      chartsTheme,\n      enablePinning,\n      lastTooltipPinnedCoords,\n      enableSyncGrouping,\n      setLastTooltipPinnedCoords,\n    };\n  }, [chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords]);\n\n  return <ChartsThemeContext.Provider value={ctx}>{children}</ChartsThemeContext.Provider>;\n}\n\nexport const ChartsThemeContext = createContext<SharedChartsState | undefined>(undefined);\n\nexport function useChartsContext(): SharedChartsState {\n  const ctx = useContext(ChartsThemeContext);\n  if (ctx === undefined) {\n    throw new Error('No ChartsThemeContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n\nexport function useChartsTheme(): PersesChartsTheme {\n  const ctx = useChartsContext();\n  return ctx.chartsTheme;\n}\n"],"names":["React","createContext","useContext","useMemo","useState","ChartsProvider","props","children","chartsTheme","enablePinning","enableSyncGrouping","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","ctx","ChartsThemeContext","Provider","value","undefined","useChartsContext","Error","useChartsTheme"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAASC,aAAa,EAAgBC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAmB1F,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,gBAAgB,KAAK,EAAEC,qBAAqB,IAAI,EAAE,GAAGJ;IAEpF,MAAM,CAACK,yBAAyBC,2BAA2B,GAAGR,SAAmC;IAEjG,MAAMS,MAAMV,QAAQ;QAClB,OAAO;YACLK;YACAC;YACAE;YACAD;YACAE;QACF;IACF,GAAG;QAACJ;QAAaC;QAAeC;QAAoBC;QAAyBC;KAA2B;IAExG,qBAAO,KAACE,mBAAmBC,QAAQ;QAACC,OAAOH;kBAAMN;;AACnD;AAEA,OAAO,MAAMO,mCAAqBb,cAA6CgB,WAAW;AAE1F,OAAO,SAASC;IACd,MAAML,MAAMX,WAAWY;IACvB,IAAID,QAAQI,WAAW;QACrB,MAAM,IAAIE,MAAM;IAClB;IACA,OAAON;AACT;AAEA,OAAO,SAASO;IACd,MAAMP,MAAMK;IACZ,OAAOL,IAAIL,WAAW;AACxB"}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * from './AlignSelector';
-export * from './BarChart';
 export * from './ColorPicker';
 export * from './ContentWithLegend';
 export * from './controls';
@@ -12,21 +11,17 @@ export * from './ErrorAlert';
 export * from './ErrorBoundary';
 export * from './FontSizeSelector';
 export * from './FormEditor';
-export * from './GaugeChart';
 export * from './InfoTooltip';
 export * from './JSONEditor';
 export * from './Legend';
-export * from './LineChart';
 export * from './LinksEditor';
 export * from './ModeSelector';
 export * from './OptionsEditorLayout';
 export * from './Overlay';
 export * from './SettingsAutocomplete';
 export * from './SortSelector';
-export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';
-export * from './TimeChart';
 export * from './TimeRangeSelector';
 export * from './TimeSeriesTooltip';
 export * from './ToolbarIconButton';
@@ -39,7 +34,5 @@ export * from './test-utils';
 export * from './theme';
 export * from './TransformsEditor';
 export * from './RefreshIntervalPicker';
-export * from './PieChart';
-export * from './StatusHistoryChart';
 export * from './ValueMappingEditor';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}