@perses-dev/components 0.55.0-beta.1 → 0.55.0-beta.11

package/dist/cjs/theme/palette/text.js

@@ -1,44 +0,0 @@
-// Copyright 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "text", {
-    enumerable: true,
-    get: function() {
-        return text;
-    }
-});
-const _colors = require("./colors");
-const text = (mode)=>{
-    const navigation = _colors.grey[800];
-    const accent = _colors.grey[300];
-    return mode === 'light' ? {
-        navigation,
-        accent,
-        primary: _colors.grey[800],
-        secondary: _colors.grey[700],
-        disabled: _colors.grey[300],
-        link: _colors.blue[500],
-        linkHover: _colors.blue[600]
-    } : {
-        navigation,
-        accent,
-        primary: _colors.white,
-        secondary: _colors.grey[50],
-        disabled: _colors.grey[600],
-        link: _colors.blue[400],
-        linkHover: _colors.blue[500]
-    };
-};

package/dist/cjs/theme/palette/warning.js

@@ -1,34 +0,0 @@
-// Copyright 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "warning", {
-    enumerable: true,
-    get: function() {
-        return warning;
-    }
-});
-const _colors = require("./colors");
-const warning = (mode)=>{
-    return mode === 'light' ? {
-        main: _colors.orange[500],
-        dark: _colors.orange[700],
-        light: _colors.orange[50]
-    } : {
-        main: _colors.orange[400],
-        dark: _colors.orange[800],
-        light: _colors.orange[300]
-    };
-};

package/dist/cjs/theme/theme.js

@@ -1,90 +0,0 @@
-// Copyright 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "getTheme", {
-    enumerable: true,
-    get: function() {
-        return getTheme;
-    }
-});
-const _material = require("@mui/material");
-const _alert = require("./component-overrides/alert");
-const _paper = require("./component-overrides/paper");
-const _palette = require("./palette");
-const _typography = require("./typography");
-const getModalBackgroundStyle = ({ theme })=>{
-    const backgroundStyle = theme.palette.mode === 'light' ? {} : {
-        backgroundImage: 'unset',
-        backgroundColor: theme.palette.designSystem.grey[800]
-    };
-    return {
-        ...backgroundStyle
-    };
-};
-function getTheme(mode, options = {}, disableBodyOverride = false) {
-    return (0, _material.createTheme)({
-        palette: (0, _palette.getPaletteOptions)(mode),
-        typography: _typography.typography,
-        mixins: {},
-        components: getComponents(mode, disableBodyOverride),
-        ...options
-    });
-}
-// Overrides for component default prop values and styles go here
-function getComponents(mode, disableBodyOverride) {
-    const components = {
-        MuiAlert: _alert.MuiAlert,
-        MuiFormControl: {
-            defaultProps: {
-                size: 'small'
-            }
-        },
-        MuiPaper: _paper.MuiPaper,
-        MuiTextField: {
-            defaultProps: {
-                size: 'small'
-            }
-        },
-        MuiDrawer: {
-            styleOverrides: {
-                paper: getModalBackgroundStyle
-            }
-        },
-        MuiDialog: {
-            styleOverrides: {
-                paper: getModalBackgroundStyle
-            }
-        },
-        MuiPopover: {
-            styleOverrides: {
-                paper: getModalBackgroundStyle
-            }
-        }
-    };
-    if (disableBodyOverride) {
-        return components;
-    }
-    return {
-        MuiCssBaseline: {
-            styleOverrides: {
-                body: {
-                    colorScheme: mode
-                }
-            }
-        },
-        ...components
-    };
-}

package/dist/cjs/theme/types/ThemeExtension.d.js

@@ -1,17 +0,0 @@
-// Copyright 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.
-// Allows extending Lab types/components also
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});

package/dist/cjs/theme/typography.js

@@ -1,99 +0,0 @@
-// Copyright 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "typography", {
-    enumerable: true,
-    get: function() {
-        return typography;
-    }
-});
-require("@fontsource/inter/300.css");
-require("@fontsource/inter/400.css");
-require("@fontsource/inter/500.css");
-require("@fontsource/inter/600.css");
-require("@fontsource/inter/700.css");
-require("@fontsource/inter/900.css");
-// Font weights need to correspond with the imports at the top of the file
-const fontWeightLight = 300;
-const fontWeightRegular = 400;
-const fontWeightMedium = 600;
-const fontWeightBold = 700;
-const typography = {
-    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontWeightLight,
-    fontWeightRegular,
-    fontWeightMedium,
-    fontWeightBold,
-    h1: {
-        fontSize: '1.5rem',
-        fontWeight: fontWeightMedium,
-        lineHeight: '32px'
-    },
-    h2: {
-        fontSize: '1.25rem',
-        fontWeight: fontWeightMedium,
-        lineHeight: '28px'
-    },
-    h3: {
-        fontSize: '1rem',
-        fontWeight: fontWeightMedium,
-        lineHeight: '24px'
-    },
-    h4: {
-        fontSize: '0.875rem',
-        fontWeight: fontWeightMedium,
-        lineHeight: '22px'
-    },
-    h5: undefined,
-    h6: undefined,
-    body1: {
-        fontSize: '0.875rem',
-        fontWeight: fontWeightRegular,
-        lineHeight: '20px'
-    },
-    body2: {
-        fontSize: '0.75rem',
-        fontWeight: fontWeightRegular,
-        lineHeight: '18px'
-    },
-    subtitle1: {
-        fontSize: '1rem',
-        fontWeight: fontWeightRegular,
-        lineHeight: '24px',
-        letterSpacing: '0.02rem'
-    },
-    subtitle2: {
-        fontSize: '0.875rem',
-        fontWeight: fontWeightMedium,
-        lineHeight: '22px',
-        letterSpacing: '0.03rem',
-        textTransform: 'uppercase'
-    },
-    button: {
-        // 14px
-        fontSize: '0.875rem',
-        fontWeight: fontWeightMedium,
-        // 20 px
-        lineHeight: '1.25rem',
-        textTransform: 'none',
-        letterSpacing: '0.03rem'
-    },
-    caption: {
-        fontSize: '0.6875rem',
-        fontWeight: fontWeightRegular,
-        lineHeight: '16px'
-    }
-};

package/dist/cjs/utils/axis.js

@@ -1,122 +0,0 @@
-// Copyright 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get getFormattedAxis () {
-        return getFormattedAxis;
-    },
-    get getFormattedMultipleYAxes () {
-        return getFormattedMultipleYAxes;
-    }
-});
-const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
-const _model = require("../model");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-// Character width multipliers (approximate for typical UI fonts)
-const CHAR_WIDTH_BASE = 6;
-const AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping
-/**
- * Estimate the pixel width needed for an axis label using Canvas API.
- */ function estimateLabelWidth(format, maxValue) {
-    const formattedLabel = (0, _model.formatValue)(maxValue, format);
-    // Create a canvas element (reuse if possible for performance)
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    if (!context) {
-        // Fallback to estimation if canvas not available
-        return formattedLabel.length * CHAR_WIDTH_BASE;
-    }
-    context.font = '12px sans-serif';
-    const metrics = context.measureText(formattedLabel);
-    return metrics.width;
-}
-function getFormattedAxis(axis, unit) {
-    const AXIS_DEFAULT = {
-        type: 'value',
-        boundaryGap: [
-            0,
-            '10%'
-        ],
-        axisLabel: {
-            formatter: (value)=>{
-                return (0, _model.formatValue)(value, unit);
-            }
-        }
-    };
-    return [
-        (0, _merge.default)(AXIS_DEFAULT, axis)
-    ];
-}
-function getFormattedMultipleYAxes(baseAxis, baseFormat, additionalFormats, maxValues) {
-    const axes = [];
-    // Base/default Y axis (left side)
-    const baseAxisConfig = (0, _merge.default)({
-        type: 'value',
-        position: 'left',
-        boundaryGap: [
-            0,
-            '10%'
-        ],
-        axisLabel: {
-            formatter: (value)=>{
-                return (0, _model.formatValue)(value, baseFormat);
-            },
-            // Let ECharts handle width automatically
-            overflow: 'truncate'
-        }
-    }, baseAxis);
-    axes.push(baseAxisConfig);
-    // Calculate cumulative offsets based on actual formatted label widths
-    let cumulativeOffset = 0;
-    // Additional Y axes (right side) for each unique format
-    additionalFormats.forEach((format, index)=>{
-        const rightAxisConfig = {
-            type: 'value',
-            position: 'right',
-            // Dynamic offset based on cumulative width of preceding axis labels
-            offset: cumulativeOffset,
-            boundaryGap: [
-                0,
-                '10%'
-            ],
-            axisLabel: {
-                formatter: (value)=>{
-                    return (0, _model.formatValue)(value, format);
-                }
-            },
-            splitLine: {
-                show: false
-            },
-            show: baseAxis?.show
-        };
-        axes.push(rightAxisConfig);
-        // For subsequent axes, add the width of the previous axis's labels
-        if (maxValues) {
-            cumulativeOffset += estimateLabelWidth(format, maxValues[index] ?? 1000) + AXIS_LABEL_PADDING;
-        }
-    });
-    return axes;
-}

package/dist/cjs/utils/browser-storage.js

@@ -1,62 +0,0 @@
-// Copyright 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useLocalStorage", {
-    enumerable: true,
-    get: function() {
-        return useLocalStorage;
-    }
-});
-const _react = require("react");
-function useLocalStorage(key, initialValue) {
-    const { value, setValueAndStore } = useStorage(window.localStorage, key, initialValue);
-    return [
-        value,
-        setValueAndStore
-    ];
-}
-// Common functionality used by all storage hooks
-function useStorage(storage, key, initialValue) {
-    // Use state so that changes cause the page to re-render
-    const [value, setValue] = (0, _react.useState)(()=>{
-        try {
-            const json = storage.getItem(key);
-            if (json !== null) {
-                return JSON.parse(json);
-            }
-        } catch  {
-        // No-op
-        }
-        // Either the value isn't in storage yet or JSON parsing failed, so
-        // set to the initial value in both places
-        storage.setItem(key, JSON.stringify(initialValue));
-        return initialValue;
-    });
-    // Set in both places
-    const setValueAndStore = (0, _react.useCallback)((val)=>{
-        setValue(val);
-        storage.setItem(key, JSON.stringify(val));
-    }, [
-        setValue,
-        storage,
-        key
-    ]);
-    return {
-        value,
-        setValue,
-        setValueAndStore
-    };
-}

package/dist/cjs/utils/chart-actions.js

@@ -1,180 +0,0 @@
-// Copyright 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get batchDispatchNearbySeriesActions () {
-        return batchDispatchNearbySeriesActions;
-    },
-    get checkCrosshairPinnedStatus () {
-        return checkCrosshairPinnedStatus;
-    },
-    get clearHighlightedSeries () {
-        return clearHighlightedSeries;
-    },
-    get enableDataZoom () {
-        return enableDataZoom;
-    },
-    get getClosestTimestamp () {
-        return getClosestTimestamp;
-    },
-    get getClosestTimestampInFullDataset () {
-        return getClosestTimestampInFullDataset;
-    },
-    get getPointInGrid () {
-        return getPointInGrid;
-    },
-    get restoreChart () {
-        return restoreChart;
-    }
-});
-const _model = require("../model");
-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
-            });
-        }
-    }
-}
-function restoreChart(chart) {
-    // TODO: support incremental unzoom instead of restore to original state
-    chart.dispatchAction({
-        type: 'restore'
-    });
-}
-function clearHighlightedSeries(chart) {
-    if (chart.dispatchAction !== undefined) {
-        // Clear any selected data points
-        chart.dispatchAction({
-            type: 'unselect'
-        });
-        // Clear any highlighted series
-        chart.dispatchAction({
-            type: 'downplay'
-        });
-    }
-}
-function getPointInGrid(cursorCoordX, cursorCoordY, chart) {
-    if (chart === undefined) {
-        return null;
-    }
-    const pointInPixel = [
-        cursorCoordX,
-        cursorCoordY
-    ];
-    if (!chart.containPixel('grid', pointInPixel)) {
-        return null;
-    }
-    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
-    return pointInGrid;
-}
-function batchDispatchNearbySeriesActions(chart, nearbySeriesIndexes, emphasizedSeriesIndexes, nonEmphasizedSeriesIndexes, emphasizedDatapoints, duplicateDatapoints) {
-    // Accounts for multiple series that are rendered direct on top of eachother.
-    // Only applies select state to the datapoint that is visible to avoid color mismatch.
-    const lastEmphasizedDatapoint = duplicateDatapoints.length > 0 ? duplicateDatapoints[duplicateDatapoints.length - 1] : emphasizedDatapoints[emphasizedDatapoints.length - 1];
-    if (lastEmphasizedDatapoint !== undefined) {
-        // Corresponds to select options inside getTimeSeries util.
-        // https://echarts.apache.org/en/option.html#series-line.select.itemStyle
-        chart.dispatchAction({
-            type: 'select',
-            seriesIndex: lastEmphasizedDatapoint.seriesIndex,
-            dataIndex: lastEmphasizedDatapoint.dataIndex,
-            // Shared crosshair should not emphasize datapoints on adjacent charts.
-            escapeConnect: true
-        });
-    }
-    // Blanket downplay clears axis-triggered emphasis (enlarged "big point" markers) before
-    // re-applying emphasis to only the winner series.
-    // https://echarts.apache.org/en/api.html#action.downplay
-    chart.dispatchAction({
-        type: 'downplay'
-    });
-    // Clears emphasis state of all lines that are not emphasized.
-    // Emphasized is a subset of just the nearby series that are closest to cursor.
-    if (nonEmphasizedSeriesIndexes.length > 0) {
-        chart.dispatchAction({
-            type: 'downplay',
-            seriesIndex: nonEmphasizedSeriesIndexes
-        });
-    }
-    // https://echarts.apache.org/en/api.html#action.highlight
-    if (emphasizedSeriesIndexes.length > 0) {
-        // Fadeout opacity of all series not closest to cursor.
-        chart.dispatchAction({
-            type: 'highlight',
-            seriesIndex: emphasizedSeriesIndexes,
-            notBlur: false,
-            escapeConnect: true
-        });
-    } else {
-        // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
-        chart.dispatchAction({
-            type: 'highlight',
-            seriesIndex: nearbySeriesIndexes,
-            notBlur: true,
-            escapeConnect: true
-        });
-        // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting
-        chart.dispatchAction({
-            type: 'toggleSelect'
-        });
-    }
-}
-function checkCrosshairPinnedStatus(seriesMapping) {
-    const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === _model.PINNED_CROSSHAIR_SERIES_NAME;
-    return isCrosshairPinned;
-}
-function getClosestTimestamp(timeSeriesValues, cursorX) {
-    if (timeSeriesValues === undefined || cursorX === undefined) {
-        return null;
-    }
-    let currentClosestTimestamp = null;
-    let currentClosestDistance = Infinity;
-    for (const [timestamp] of timeSeriesValues){
-        const distance = Math.abs(timestamp - cursorX);
-        if (distance < currentClosestDistance) {
-            currentClosestTimestamp = timestamp;
-            currentClosestDistance = distance;
-        }
-    }
-    return currentClosestTimestamp;
-}
-function getClosestTimestampInFullDataset(data, cursorX) {
-    if (cursorX === undefined) {
-        return null;
-    }
-    const totalSeries = data.length;
-    let closestTimestamp = null;
-    for(let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++){
-        const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;
-        if (!currentDataset) break;
-        const currentValues = currentDataset.values;
-        closestTimestamp = getClosestTimestamp(currentValues, cursorX);
-    }
-    return closestTimestamp;
-}

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

@@ -1,31 +0,0 @@
-// Copyright 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "combineSx", {
-    enumerable: true,
-    get: function() {
-        return combineSx;
-    }
-});
-function combineSx(...sxProps) {
-    return sxProps.flatMap((sx)=>{
-        if (sx === undefined) return [];
-        if (Array.isArray(sx)) return sx;
-        return [
-            sx
-        ];
-    });
-}