@perses-dev/timeseries-chart-plugin 0.13.0 → 0.14.0-beta.2

package/lib/cjs/time-series-chart-model.js

@@ -1,225 +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 DEFAULT_AREA_OPACITY () {
-        return DEFAULT_AREA_OPACITY;
-    },
-    get DEFAULT_CONNECT_NULLS () {
-        return DEFAULT_CONNECT_NULLS;
-    },
-    get DEFAULT_DISPLAY () {
-        return DEFAULT_DISPLAY;
-    },
-    get DEFAULT_FORMAT () {
-        return DEFAULT_FORMAT;
-    },
-    get DEFAULT_LINE_STYLE () {
-        return DEFAULT_LINE_STYLE;
-    },
-    get DEFAULT_LINE_WIDTH () {
-        return DEFAULT_LINE_WIDTH;
-    },
-    get DEFAULT_POINT_RADIUS () {
-        return DEFAULT_POINT_RADIUS;
-    },
-    get DEFAULT_VISUAL () {
-        return DEFAULT_VISUAL;
-    },
-    get DEFAULT_Y_AXIS () {
-        return DEFAULT_Y_AXIS;
-    },
-    get LINE_STYLE_CONFIG () {
-        return LINE_STYLE_CONFIG;
-    },
-    get LOG_BASE_CONFIG () {
-        return LOG_BASE_CONFIG;
-    },
-    get LOG_BASE_OPTIONS () {
-        return LOG_BASE_OPTIONS;
-    },
-    get NEGATIVE_MIN_VALUE_MULTIPLIER () {
-        return NEGATIVE_MIN_VALUE_MULTIPLIER;
-    },
-    get OPACITY_CONFIG () {
-        return OPACITY_CONFIG;
-    },
-    get POINT_SIZE_OFFSET () {
-        return POINT_SIZE_OFFSET;
-    },
-    get POSITIVE_MIN_VALUE_MULTIPLIER () {
-        return POSITIVE_MIN_VALUE_MULTIPLIER;
-    },
-    get STACK_CONFIG () {
-        return STACK_CONFIG;
-    },
-    get STACK_OPTIONS () {
-        return STACK_OPTIONS;
-    },
-    get THRESHOLD_PLOT_INTERVAL () {
-        return THRESHOLD_PLOT_INTERVAL;
-    },
-    get VISUAL_CONFIG () {
-        return VISUAL_CONFIG;
-    },
-    get Y_AXIS_CONFIG () {
-        return Y_AXIS_CONFIG;
-    },
-    get createInitialTimeSeriesChartOptions () {
-        return createInitialTimeSeriesChartOptions;
-    }
-});
-const DEFAULT_FORMAT = {
-    unit: 'decimal',
-    shortValues: true
-};
-const DEFAULT_Y_AXIS = {
-    show: true,
-    label: '',
-    format: DEFAULT_FORMAT,
-    min: undefined,
-    max: undefined,
-    logBase: undefined
-};
-const Y_AXIS_CONFIG = {
-    show: {
-        label: 'Show'
-    },
-    label: {
-        label: 'Label'
-    },
-    unit: {
-        label: 'Unit'
-    },
-    min: {
-        label: 'Min'
-    },
-    max: {
-        label: 'Max'
-    },
-    logBase: {
-        label: 'Log Base'
-    }
-};
-const DEFAULT_DISPLAY = 'line';
-const DEFAULT_LINE_WIDTH = 1.25;
-const DEFAULT_LINE_STYLE = 'solid';
-const DEFAULT_AREA_OPACITY = 0;
-const POINT_SIZE_OFFSET = 1.5;
-const DEFAULT_POINT_RADIUS = DEFAULT_LINE_WIDTH + POINT_SIZE_OFFSET;
-const DEFAULT_CONNECT_NULLS = false;
-const DEFAULT_VISUAL = {
-    display: DEFAULT_DISPLAY,
-    lineWidth: DEFAULT_LINE_WIDTH,
-    lineStyle: DEFAULT_LINE_STYLE,
-    areaOpacity: DEFAULT_AREA_OPACITY,
-    pointRadius: DEFAULT_POINT_RADIUS,
-    connectNulls: DEFAULT_CONNECT_NULLS
-};
-const THRESHOLD_PLOT_INTERVAL = 15;
-const VISUAL_CONFIG = {
-    lineWidth: {
-        label: 'Line Width',
-        testId: 'slider-line-width',
-        min: 0.25,
-        max: 3,
-        step: 0.25
-    },
-    lineStyle: {
-        label: 'Line Style'
-    },
-    pointRadius: {
-        label: 'Point Radius',
-        testId: 'slider-point-radius',
-        min: 0,
-        max: 6,
-        step: 0.25
-    },
-    areaOpacity: {
-        label: 'Area Opacity',
-        testId: 'slider-area-opacity',
-        min: 0,
-        max: 1,
-        step: 0.05
-    },
-    stack: {
-        label: 'Stack Series'
-    },
-    connectNulls: {
-        label: 'Connect Nulls'
-    }
-};
-const STACK_CONFIG = {
-    none: {
-        label: 'None'
-    },
-    all: {
-        label: 'All'
-    }
-};
-const STACK_OPTIONS = Object.entries(STACK_CONFIG).map(([id, config])=>{
-    return {
-        id: id,
-        ...config
-    };
-});
-const LINE_STYLE_CONFIG = {
-    solid: {
-        label: 'Solid'
-    },
-    dashed: {
-        label: 'Dashes'
-    },
-    dotted: {
-        label: 'Dots'
-    }
-};
-const OPACITY_CONFIG = {
-    label: 'Opacity',
-    testId: 'slider-opacity',
-    min: 0,
-    max: 1,
-    step: 0.05
-};
-const LOG_BASE_CONFIG = {
-    none: {
-        label: 'None',
-        log: undefined
-    },
-    '2': {
-        label: '2',
-        log: 2
-    },
-    '10': {
-        label: '10',
-        log: 10
-    }
-};
-const LOG_BASE_OPTIONS = Object.entries(LOG_BASE_CONFIG).map(([id, config])=>({
-        id: id,
-        ...config
-    }));
-const POSITIVE_MIN_VALUE_MULTIPLIER = 0.8;
-const NEGATIVE_MIN_VALUE_MULTIPLIER = 1.2;
-function createInitialTimeSeriesChartOptions() {
-    return {};
-}

package/lib/cjs/utils/annotation.js

@@ -1,37 +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, "convertAnnotationToTimeSeriesAnnotation", {
-    enumerable: true,
-    get: function() {
-        return convertAnnotationToTimeSeriesAnnotation;
-    }
-});
-function convertAnnotationToTimeSeriesAnnotation(annotations) {
-    const result = [];
-    for (const annotation of annotations){
-        for (const item of annotation.data){
-            if (annotation.definition.display.hidden) {
-                continue;
-            }
-            result.push({
-                ...annotation.definition.display,
-                ...item
-            });
-        }
-    }
-    return result;
-}

package/lib/cjs/utils/data-transform.js

@@ -1,243 +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 BLUR_FADEOUT_OPACITY () {
-        return BLUR_FADEOUT_OPACITY;
-    },
-    get EMPTY_GRAPH_DATA () {
-        return EMPTY_GRAPH_DATA;
-    },
-    get HIDE_DATAPOINTS_LIMIT () {
-        return HIDE_DATAPOINTS_LIMIT;
-    },
-    get convertPanelYAxis () {
-        return convertPanelYAxis;
-    },
-    get convertPercentThreshold () {
-        return convertPercentThreshold;
-    },
-    get getCommonTimeScaleForQueries () {
-        return getCommonTimeScaleForQueries;
-    },
-    get getThresholdSeries () {
-        return getThresholdSeries;
-    },
-    get getTimeSeries () {
-        return getTimeSeries;
-    },
-    get roundDown () {
-        return roundDown;
-    }
-});
-const _components = require("@perses-dev/components");
-const _timeserieschartmodel = require("../time-series-chart-model");
-const EMPTY_GRAPH_DATA = {
-    timeSeries: [],
-    xAxis: [],
-    legendItems: []
-};
-const HIDE_DATAPOINTS_LIMIT = 70;
-const BLUR_FADEOUT_OPACITY = 0.5;
-function getCommonTimeScaleForQueries(queries) {
-    const seriesData = queries.map((query)=>query.data);
-    return (0, _components.getCommonTimeScale)(seriesData);
-}
-function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, paletteColor, querySettings, yAxisIndex) {
-    const lineWidth = visual.lineWidth ?? _timeserieschartmodel.DEFAULT_LINE_WIDTH;
-    const pointRadius = visual.pointRadius ?? _timeserieschartmodel.DEFAULT_POINT_RADIUS;
-    const shouldStack = querySettings?.stack !== undefined ? querySettings.stack : visual.stack === 'all';
-    // Shows datapoint symbols when selected time range is roughly 15 minutes or less
-    const minuteMs = 60000;
-    let showPoints = timeScale.rangeMs <= minuteMs * 15;
-    // Allows overriding default behavior and opt-in to always show all symbols (can hurt performance)
-    if (visual.showPoints === 'always') {
-        showPoints = true;
-    }
-    if (visual.display === 'bar') {
-        const series = {
-            type: 'bar',
-            id: id,
-            datasetIndex,
-            name: formattedName,
-            color: paletteColor,
-            stack: shouldStack ? 'all' : undefined,
-            yAxisIndex: yAxisIndex,
-            label: {
-                show: false
-            }
-        };
-        return series;
-    }
-    const series = {
-        type: 'line',
-        id: id,
-        datasetIndex,
-        name: formattedName,
-        connectNulls: visual.connectNulls ?? _timeserieschartmodel.DEFAULT_CONNECT_NULLS,
-        color: paletteColor,
-        stack: shouldStack ? 'all' : undefined,
-        yAxisIndex: yAxisIndex,
-        sampling: 'lttb',
-        progressiveThreshold: _components.OPTIMIZED_MODE_SERIES_LIMIT,
-        showSymbol: showPoints,
-        showAllSymbol: true,
-        symbolSize: pointRadius,
-        lineStyle: {
-            width: lineWidth,
-            type: querySettings?.lineStyle ?? visual.lineStyle
-        },
-        areaStyle: {
-            opacity: querySettings?.areaOpacity ?? visual.areaOpacity ?? _timeserieschartmodel.DEFAULT_AREA_OPACITY
-        },
-        // https://echarts.apache.org/en/option.html#series-line.emphasis
-        emphasis: {
-            focus: 'series',
-            disabled: visual.areaOpacity !== undefined && visual.areaOpacity > 0,
-            lineStyle: {
-                width: lineWidth + 1,
-                opacity: 1,
-                type: visual.lineStyle
-            }
-        },
-        blur: {
-            lineStyle: {
-                width: lineWidth,
-                opacity: BLUR_FADEOUT_OPACITY,
-                type: visual.lineStyle
-            }
-        }
-    };
-    return series;
-}
-function getThresholdSeries(name, threshold, seriesIndex) {
-    return {
-        type: 'line',
-        name: name,
-        id: name,
-        datasetId: name,
-        datasetIndex: seriesIndex,
-        color: threshold.color,
-        label: {
-            show: false
-        },
-        lineStyle: {
-            type: 'dashed',
-            width: 2
-        },
-        emphasis: {
-            focus: 'series',
-            lineStyle: {
-                width: 2.5
-            }
-        },
-        blur: {
-            lineStyle: {
-                opacity: BLUR_FADEOUT_OPACITY
-            }
-        }
-    };
-}
-function convertPercentThreshold(percent, data, max, min) {
-    const percentDecimal = percent / 100;
-    const adjustedMax = max ?? findMax(data);
-    const adjustedMin = min ?? 0;
-    const total = adjustedMax - adjustedMin;
-    return percentDecimal * total + adjustedMin;
-}
-function findMax(data) {
-    let max = 0;
-    if (data.length && data[0] !== undefined && data[0]?.values) {
-        data.forEach((series)=>{
-            series.values.forEach((valueTuple)=>{
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const [_, value] = valueTuple;
-                // Use the absolute value so percent thresholds compute correctly against
-                // negated series (e.g. when `querySettings[].negativeY` is enabled).
-                if (typeof value === 'number' && Math.abs(value) > max) {
-                    max = Math.abs(value);
-                }
-            });
-        });
-    } else {
-        data.forEach((series)=>{
-            if (series.data !== undefined) {
-                series.data.forEach((value)=>{
-                    if (typeof value === 'number' && Math.abs(value) > max) {
-                        max = Math.abs(value);
-                    }
-                });
-            }
-        });
-    }
-    return max;
-}
-function convertPanelYAxis(inputAxis = {}) {
-    // Determine the appropriate min value based on scale type and user input
-    let minValue;
-    if (inputAxis.logBase !== undefined) {
-        // For logarithmic scales without explicit min:
-        // Let ECharts auto-calculate the range based on data to avoid issues with
-        // function-based calculations which can result in improper ranges (e.g., 1-10)
-        minValue = undefined;
-    } else if (inputAxis?.min !== undefined) {
-        // User explicitly set a min value - use it for both linear and log scales
-        minValue = inputAxis.min;
-    } else {
-        // For linear scales without explicit min:
-        // Use dynamic calculation with padding for better visualization
-        // https://echarts.apache.org/en/option.html#yAxis.min
-        minValue = (value)=>{
-            if (value.min >= 0 && value.min <= 1) {
-                // Helps with PercentDecimal units, or datasets that return 0 or 1 booleans
-                return 0;
-            }
-            // Note: We can tweak the MULTIPLIER constants if we want
-            // TODO: Experiment with using a padding that is based on the difference between max value and min value
-            if (value.min > 0) {
-                return roundDown(value.min * _timeserieschartmodel.POSITIVE_MIN_VALUE_MULTIPLIER);
-            } else {
-                return roundDown(value.min * _timeserieschartmodel.NEGATIVE_MIN_VALUE_MULTIPLIER);
-            }
-        };
-    }
-    // Build the yAxis configuration
-    const yAxis = {
-        show: inputAxis?.show ?? _timeserieschartmodel.DEFAULT_Y_AXIS.show,
-        min: minValue,
-        max: inputAxis?.max
-    };
-    // Apply logarithmic scale settings if requested
-    if (inputAxis.logBase !== undefined) {
-        return {
-            ...yAxis,
-            type: 'log',
-            logBase: inputAxis.logBase
-        };
-    }
-    return yAxis;
-}
-function roundDown(num) {
-    const magnitude = Math.floor(Math.log10(Math.abs(num)));
-    const firstDigit = Math.floor(num / Math.pow(10, magnitude));
-    return firstDigit * Math.pow(10, magnitude);
-}

package/lib/cjs/utils/palette-gen.js

@@ -1,75 +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 getAutoPaletteColor () {
-        return getAutoPaletteColor;
-    },
-    get getCategoricalPaletteColor () {
-        return getCategoricalPaletteColor;
-    },
-    get getConsistentSeriesNameColor () {
-        return getConsistentSeriesNameColor;
-    },
-    get getSeriesColor () {
-        return getSeriesColor;
-    }
-});
-const _palette = require("./palette");
-function getSeriesColor(props) {
-    const { categoricalPalette, visual, muiPrimaryColor, seriesName, seriesIndex, querySettings, queryHasMultipleResults } = props;
-    // Use color overrides defined in query settings in priority, if applicable
-    if (querySettings) {
-        if (querySettings.colorMode === 'fixed' && querySettings.colorValue) {
-            return querySettings.colorValue;
-        } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults && querySettings.colorValue) {
-            return querySettings.colorValue;
-        }
-    }
-    // Fallback is unlikely to set unless echarts theme palette in charts theme provider is undefined.
-    const fallbackColor = Array.isArray(categoricalPalette) && categoricalPalette[0] ? categoricalPalette[0] // Needed since echarts color property isn't always an array.
-     : muiPrimaryColor;
-    // Explicit way to always cycle through classical palette instead of changing when based on number of series.
-    if (visual.palette?.mode === 'categorical') {
-        return getCategoricalPaletteColor(categoricalPalette, seriesIndex, fallbackColor);
-    }
-    return getAutoPaletteColor(seriesName, fallbackColor);
-}
-function getAutoPaletteColor(name, fallbackColor) {
-    // corresponds to 'Auto' in palette.kind for generative color palette
-    const generatedColor = getConsistentSeriesNameColor(name);
-    return generatedColor ?? fallbackColor;
-}
-function getCategoricalPaletteColor(palette, seriesIndex, fallbackColor) {
-    if (palette === undefined) {
-        return fallbackColor;
-    }
-    // Loop through predefined static color palette
-    const paletteTotalColors = palette.length ?? 1;
-    const paletteIndex = seriesIndex % paletteTotalColors;
-    // fallback color comes from echarts theme
-    const seriesColor = palette[paletteIndex] ?? fallbackColor;
-    return seriesColor;
-}
-function getConsistentSeriesNameColor(inputString) {
-    return (0, _palette.getConsistentColor)(inputString, inputString.toLowerCase().includes('error'));
-}

package/lib/cjs/utils/palette.js

@@ -1,83 +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 getConsistentCategoricalColor () {
-        return getConsistentCategoricalColor;
-    },
-    get getConsistentColor () {
-        return getConsistentColor;
-    }
-});
-const _colorhash = /*#__PURE__*/ _interop_require_default(require("color-hash"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.
-// More info: https://github.com/zenozeng/color-hash#custom-hue
-// Picked min of 20 and max of 360 to exclude common threshold colors (red).
-// Items with "error" in them will always be generated as red.
-const ERROR_HUE_CUTOFF = 20;
-const colorGenerator = new _colorhash.default({
-    hue: {
-        min: ERROR_HUE_CUTOFF,
-        max: 360
-    }
-});
-const redColorGenerator = new _colorhash.default({
-    hue: {
-        min: 0,
-        max: ERROR_HUE_CUTOFF
-    }
-});
-function computeConsistentColor(name, error) {
-    const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);
-    const saturationPercent = `${(saturation * 100).toFixed(0)}%`;
-    const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;
-    return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;
-}
-// To check whether a color has already been generated for a given string.
-// TODO: Predefined color aliases will be defined here
-const colorLookup = {};
-function getConsistentColor(name, error) {
-    const key = `${name}_____${error}`;
-    let value = colorLookup[key];
-    if (!value) {
-        value = computeConsistentColor(name, error);
-        colorLookup[key] = value;
-    }
-    return value;
-}
-function getConsistentCategoricalColor(name, error, categoricalPalette, errorPalette) {
-    const palette = error ? errorPalette : categoricalPalette;
-    if (palette.length === 0) {
-        console.warn('getConsistentCategoricalColor() called with empty color palette, fallback to #000');
-        return '#000';
-    }
-    let hash = 0;
-    for(let i = 0; i < name.length; i++){
-        hash = name.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return palette[Math.abs(hash) % palette.length] ?? '#000';
-}