@perses-dev/bar-chart-plugin 0.11.0 → 0.13.0-beta.0

package/lib/cjs/BarChartBase.js

@@ -23,28 +23,97 @@ Object.defineProperty(exports, "BarChartBase", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _components = require("@perses-dev/components");
-const _core = require("@perses-dev/core");
-const _core1 = require("echarts/core");
+const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components1 = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _material = require("@mui/material");
-(0, _core1.use)([
+(0, _core.use)([
     _charts.BarChart,
     _components1.GridComponent,
     _components1.DatasetComponent,
     _components1.TitleComponent,
     _components1.TooltipComponent,
+    _components1.LegendComponent,
     _renderers.CanvasRenderer
 ]);
 const BAR_WIN_WIDTH = 14;
 const BAR_GAP = 6;
+const LEGEND_HEIGHT = 20;
 function BarChartBase(props) {
     const { width, height, data, format = {
         unit: 'decimal'
-    }, mode = 'value' } = props;
+    }, mode = 'value', groupedData, isStacked = false, orientation = 'horizontal' } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
+    const isHorizontal = orientation === 'horizontal';
     const option = (0, _react.useMemo)(()=>{
+        if (groupedData) {
+            if (!groupedData.series.length || !groupedData.categories.length) return chartsTheme.noDataOption;
+            const { categories, series } = groupedData;
+            return {
+                title: {
+                    show: false
+                },
+                legend: {
+                    type: 'scroll',
+                    show: true,
+                    bottom: 0
+                },
+                xAxis: isHorizontal ? (0, _components.getFormattedAxis)({}, format) : {
+                    type: 'category',
+                    data: categories,
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        overflow: 'truncate',
+                        width: width / 3
+                    }
+                },
+                yAxis: isHorizontal ? {
+                    type: 'category',
+                    data: categories,
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        overflow: 'truncate',
+                        width: width / 3
+                    }
+                } : (0, _components.getFormattedAxis)({}, format),
+                series: series.map((s)=>({
+                        name: s.name,
+                        type: 'bar',
+                        stack: isStacked ? 'total' : undefined,
+                        data: s.values,
+                        label: {
+                            show: false
+                        },
+                        itemStyle: {
+                            borderRadius: isStacked ? 0 : 4
+                        }
+                    })),
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    appendToBody: true,
+                    confine: true,
+                    formatter: (params)=>{
+                        if (!params.length) return '';
+                        const header = `<b>${params[0]?.name}</b><br/>`;
+                        const rows = params.filter((p)=>p.data !== null).map((p)=>`<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${p.color}"></span>` + `${p.seriesName}: <b>${(0, _components.formatValue)(p.data, format)}</b>`).join('<br/>');
+                        return header + rows;
+                    }
+                },
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: LEGEND_HEIGHT * 2
+                }
+            };
+        }
         if (!data || !data.length) return chartsTheme.noDataOption;
         const source = [];
         data.map((d)=>{
@@ -66,8 +135,7 @@ function BarChartBase(props) {
                     source: source
                 }
             ],
-            xAxis: (0, _components.getFormattedAxis)({}, format),
-            yAxis: {
+            xAxis: isHorizontal ? (0, _components.getFormattedAxis)({}, format) : {
                 type: 'category',
                 splitLine: {
                     show: false
@@ -77,25 +145,35 @@ function BarChartBase(props) {
                     width: width / 3
                 }
             },
+            yAxis: isHorizontal ? {
+                type: 'category',
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    overflow: 'truncate',
+                    width: width / 3
+                }
+            } : (0, _components.getFormattedAxis)({}, format),
             series: {
                 type: 'bar',
+                barMinWidth: BAR_WIN_WIDTH,
+                barCategoryGap: BAR_GAP,
                 label: {
                     show: true,
-                    position: 'right',
+                    position: isHorizontal ? 'right' : 'top',
                     formatter: (params)=>{
                         if (!params.data[1]) {
                             return undefined;
                         }
                         if (mode === 'percentage') {
-                            return (0, _core.formatValue)(params.data[1], {
+                            return (0, _components.formatValue)(params.data[1], {
                                 unit: 'percent',
                                 decimalPlaces: format.decimalPlaces
                             });
                         }
-                        return (0, _core.formatValue)(params.data[1], format);
-                    },
-                    barMinWidth: BAR_WIN_WIDTH,
-                    barCategoryGap: BAR_GAP
+                        return (0, _components.formatValue)(params.data[1], format);
+                    }
                 },
                 itemStyle: {
                     borderRadius: 4,
@@ -105,7 +183,7 @@ function BarChartBase(props) {
             tooltip: {
                 appendToBody: true,
                 confine: true,
-                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${(0, _core.formatValue)(params.data[1], format)}`
+                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${(0, _components.formatValue)(params.data[1], format)}`
             },
             // increase distance between grid and container to prevent y axis labels from getting cut off
             grid: {
@@ -115,11 +193,25 @@ function BarChartBase(props) {
         };
     }, [
         data,
+        groupedData,
+        isStacked,
         chartsTheme,
         width,
         mode,
-        format
+        format,
+        isHorizontal
     ]);
+    const numGroupedRows = groupedData ? isStacked ? groupedData.categories.length : groupedData.categories.length * groupedData.series.length : 0;
+    function getChartHeight() {
+        if (groupedData) {
+            if (!isHorizontal) return height;
+            return Math.max(height, numGroupedRows * (BAR_WIN_WIDTH + BAR_GAP) + LEGEND_HEIGHT * 2 + 20);
+        }
+        if (data) {
+            return data.length * (BAR_WIN_WIDTH + BAR_GAP);
+        }
+        return '100%';
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         style: {
             width: width,
@@ -131,7 +223,7 @@ function BarChartBase(props) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EChart, {
             style: {
                 minHeight: height,
-                height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%'
+                height: getChartHeight()
             },
             option: option,
             theme: chartsTheme.echartsTheme

package/lib/cjs/BarChartExportAction.js

@@ -0,0 +1,124 @@
+// 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, "BarChartExportAction", {
+    enumerable: true,
+    get: function() {
+        return BarChartExportAction;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
+const _Download = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Download"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const BarChartExportAction = ({ queryResults, definition })=>{
+    const exportableData = (0, _react.useMemo)(()=>{
+        return (0, _pluginsystem.extractExportableData)(queryResults);
+    }, [
+        queryResults
+    ]);
+    const canExport = (0, _react.useMemo)(()=>{
+        return (0, _pluginsystem.isExportableData)(exportableData);
+    }, [
+        exportableData
+    ]);
+    const handleExport = (0, _react.useCallback)(()=>{
+        if (!exportableData || !canExport) return;
+        try {
+            const title = definition?.spec?.display?.name || 'Time Series Data';
+            const csvBlob = (0, _pluginsystem.exportDataAsCSV)({
+                data: exportableData
+            });
+            const baseFilename = (0, _pluginsystem.sanitizeFilename)(title);
+            const filename = `${baseFilename}_data.csv`;
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(csvBlob);
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(link.href);
+        } catch (error) {
+            console.error('Time series export failed:', error);
+        }
+    }, [
+        exportableData,
+        canExport,
+        definition
+    ]);
+    if (!canExport) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+        description: "Export as CSV",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleExport,
+            "aria-label": "Export time series data as CSV",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Download.default, {
+                fontSize: "inherit"
+            })
+        })
+    });
+};

package/lib/cjs/BarChartOptionsEditorSettings.js

@@ -21,9 +21,9 @@ Object.defineProperty(exports, "BarChartOptionsEditorSettings", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _immer = require("immer");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
@@ -57,40 +57,109 @@ function BarChartOptionsEditorSettings(props) {
     };
     const handleResetSettings = ()=>{
         onChange((0, _immer.produce)(value, (draft)=>{
-            draft.calculation = _core.DEFAULT_CALCULATION;
+            draft.calculation = _pluginsystem.DEFAULT_CALCULATION;
             draft.format = _barchartmodel.DEFAULT_FORMAT;
             draft.sort = _barchartmodel.DEFAULT_SORT;
             draft.mode = _barchartmodel.DEFAULT_MODE;
+            draft.groupBy = _barchartmodel.DEFAULT_GROUP_BY;
+            draft.isStacked = _barchartmodel.DEFAULT_IS_STACKED;
+            draft.orientation = _barchartmodel.DEFAULT_ORIENTATION;
         }));
     };
     // ensures decimalPlaces defaults to correct value
     const format = (0, _merge.default)({}, _barchartmodel.DEFAULT_FORMAT, value.format);
+    const groupBy = value.groupBy ?? _barchartmodel.DEFAULT_GROUP_BY;
+    const isStacked = value.isStacked ?? _barchartmodel.DEFAULT_IS_STACKED;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGrid, {
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
-                    title: "Misc",
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
-                            value: format,
-                            onChange: handleUnitChange,
-                            disabled: value.mode === 'percentage'
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.CalculationSelector, {
-                            value: value.calculation,
-                            onChange: handleCalculationChange
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SortSelector, {
-                            value: value.sort,
-                            onChange: handleSortChange
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ModeSelector, {
-                            value: value.mode,
-                            onChange: handleModeChange,
-                            disablePercentageMode: (0, _core.isPercentUnit)(format)
-                        })
-                    ]
-                })
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorColumn, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+                        title: "Misc",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
+                                value: format,
+                                onChange: handleUnitChange,
+                                disabled: value.mode === 'percentage'
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.CalculationSelector, {
+                                value: value.calculation,
+                                onChange: handleCalculationChange
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SortSelector, {
+                                value: value.sort,
+                                onChange: handleSortChange
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ModeSelector, {
+                                value: value.mode,
+                                onChange: handleModeChange,
+                                disablePercentageMode: (0, _components.isPercentUnit)(format)
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ToggleButtonGroup, {
+                                exclusive: true,
+                                size: "small",
+                                value: value.orientation ?? 'horizontal',
+                                onChange: (_, v)=>v && onChange((0, _immer.produce)(value, (draft)=>{
+                                        draft.orientation = v;
+                                    })),
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                                        value: "horizontal",
+                                        children: "Horizontal"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                                        value: "vertical",
+                                        children: "Vertical"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+                        title: "Stacking",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                                multiple: true,
+                                freeSolo: true,
+                                value: groupBy,
+                                onChange: (_, newValue)=>{
+                                    const filtered = newValue.filter((v)=>v.trim() !== '');
+                                    onChange((0, _immer.produce)(value, (draft)=>{
+                                        draft.groupBy = filtered;
+                                        if (filtered.length === 0) draft.isStacked = false;
+                                    }));
+                                },
+                                options: [],
+                                renderTags: (tagValues, getTagProps)=>tagValues.map((option, index)=>/*#__PURE__*/ (0, _react.createElement)(_material.Chip, {
+                                            size: "small",
+                                            variant: "outlined",
+                                            label: option,
+                                            ...getTagProps({
+                                                index
+                                            }),
+                                            key: option
+                                        })),
+                                renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                        ...params,
+                                        size: "small",
+                                        label: "Group By Labels",
+                                        placeholder: "Type label name + Enter"
+                                    })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                    size: "small",
+                                    checked: isStacked,
+                                    disabled: groupBy.length === 0,
+                                    onChange: (e)=>onChange((0, _immer.produce)(value, (draft)=>{
+                                            draft.isStacked = e.target.checked;
+                                        }))
+                                }),
+                                label: "Stack bars"
+                            })
+                        ]
+                    })
+                ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {

package/lib/cjs/BarChartPanel.js

@@ -24,15 +24,16 @@ const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
 const _react = require("react");
-const _core = require("@perses-dev/core");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _utils = require("./utils");
 const _BarChartBase = require("./BarChartBase");
 function BarChartPanel(props) {
-    const { spec: { calculation, format, sort, mode }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, format, sort, mode, groupBy = [], isStacked = false, orientation = 'horizontal' }, contentDimensions, queryResults } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const PADDING = chartsTheme.container.padding.default;
     const barChartData = (0, _react.useMemo)(()=>{
-        const calculate = _core.CalculationsMap[calculation];
+        if (groupBy.length > 0) return [];
+        const calculate = _pluginsystem.CalculationsMap[calculation];
         const barChartData = [];
         for (const result of queryResults){
             for (const seriesData of result.data.series){
@@ -53,9 +54,72 @@ function BarChartPanel(props) {
         queryResults,
         sort,
         mode,
+        calculation,
+        groupBy
+    ]);
+    const stackedBarChartData = (0, _react.useMemo)(()=>{
+        if (groupBy.length === 0) return null;
+        const calculate = _pluginsystem.CalculationsMap[calculation];
+        const groupMap = new Map();
+        const segmentNamesOrdered = [];
+        const segmentNamesSet = new Set();
+        for (const queryResult of queryResults){
+            for (const seriesData of queryResult.data.series){
+                const labels = seriesData.labels ?? {};
+                const groupKey = groupBy.map((k)=>labels[k] ?? '').join(' / ');
+                const remainingEntries = Object.entries(labels).filter(([k])=>!groupBy.includes(k));
+                const segmentName = remainingEntries.length > 0 ? '{' + remainingEntries.map(([k, v])=>`${k}="${v}"`).join(', ') + '}' : seriesData.formattedName ?? seriesData.name;
+                if (!groupMap.has(groupKey)) {
+                    groupMap.set(groupKey, new Map());
+                }
+                const segMap = groupMap.get(groupKey);
+                if (!segMap) continue;
+                const value = calculate(seriesData.values) ?? 0;
+                segMap.set(segmentName, (segMap.get(segmentName) ?? 0) + value);
+                if (!segmentNamesSet.has(segmentName)) {
+                    segmentNamesSet.add(segmentName);
+                    segmentNamesOrdered.push(segmentName);
+                }
+            }
+        }
+        if (groupMap.size === 0) return null;
+        const getTotalValue = (cat)=>Array.from(groupMap.get(cat)?.values() ?? []).reduce((a, b)=>a + b, 0);
+        let categories = Array.from(groupMap.keys());
+        if (sort === 'asc') {
+            categories = categories.sort((a, b)=>getTotalValue(a) - getTotalValue(b));
+        } else if (sort === 'desc') {
+            categories = categories.sort((a, b)=>getTotalValue(b) - getTotalValue(a));
+        }
+        const series = segmentNamesOrdered.map((segName)=>{
+            const values = categories.map((cat)=>{
+                const rawVal = groupMap.get(cat)?.get(segName) ?? null;
+                if (mode === 'percentage' && rawVal !== null) {
+                    const total = getTotalValue(cat);
+                    return total > 0 ? rawVal / total * 100 : 0;
+                }
+                return rawVal;
+            });
+            return {
+                name: segName,
+                values
+            };
+        });
+        return {
+            categories,
+            series
+        };
+    }, [
+        queryResults,
+        groupBy,
+        sort,
+        mode,
         calculation
     ]);
     if (contentDimensions === undefined) return null;
+    const effectiveFormat = mode === 'percentage' ? {
+        unit: 'percent',
+        decimalPlaces: format?.decimalPlaces
+    } : format;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             padding: `${PADDING}px`
@@ -64,8 +128,11 @@ function BarChartPanel(props) {
             width: contentDimensions.width - PADDING * 2,
             height: contentDimensions.height - PADDING * 2,
             data: barChartData,
-            format: format,
-            mode: mode
+            format: groupBy.length > 0 ? effectiveFormat : format,
+            mode: mode,
+            groupedData: stackedBarChartData,
+            isStacked: isStacked,
+            orientation: orientation
         })
     });
 }

package/lib/cjs/bar-chart-model.js

@@ -24,9 +24,18 @@ _export(exports, {
     get DEFAULT_FORMAT () {
         return DEFAULT_FORMAT;
     },
+    get DEFAULT_GROUP_BY () {
+        return DEFAULT_GROUP_BY;
+    },
+    get DEFAULT_IS_STACKED () {
+        return DEFAULT_IS_STACKED;
+    },
     get DEFAULT_MODE () {
         return DEFAULT_MODE;
     },
+    get DEFAULT_ORIENTATION () {
+        return DEFAULT_ORIENTATION;
+    },
     get DEFAULT_SORT () {
         return DEFAULT_SORT;
     },
@@ -34,18 +43,24 @@ _export(exports, {
         return createInitialBarChartOptions;
     }
 });
-const _core = require("@perses-dev/core");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
 };
 const DEFAULT_SORT = 'desc';
 const DEFAULT_MODE = 'value';
+const DEFAULT_ORIENTATION = 'horizontal';
+const DEFAULT_GROUP_BY = [];
+const DEFAULT_IS_STACKED = false;
 function createInitialBarChartOptions() {
     return {
-        calculation: _core.DEFAULT_CALCULATION,
+        calculation: _pluginsystem.DEFAULT_CALCULATION,
         format: DEFAULT_FORMAT,
         sort: DEFAULT_SORT,
-        mode: DEFAULT_MODE
+        mode: DEFAULT_MODE,
+        orientation: DEFAULT_ORIENTATION,
+        groupBy: DEFAULT_GROUP_BY,
+        isStacked: DEFAULT_IS_STACKED
     };
 }

package/lib/tresholds.d.ts

@@ -1,4 +1,4 @@
-import { ThresholdColorPalette, ThresholdOptions, FormatOptions } from '@perses-dev/core';
+import { FormatOptions, ThresholdColorPalette, ThresholdOptions } from '@perses-dev/components';
 export type GaugeColorStop = [number, string];
 export type EChartsAxisLineColors = GaugeColorStop[];
 export declare const defaultThresholdInput: ThresholdOptions;

package/lib/tresholds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tresholds.d.ts","sourceRoot":"","sources":["../../src/tresholds.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,qBAAqB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGvG,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,cAAc,EAAE,CAAC;AAErD,eAAO,MAAM,qBAAqB,EAAE,gBAA4C,CAAC;AAEjF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,gBAAgB,EAC5B,IAAI,EAAE,aAAa,EACnB,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,qBAAqB,GAC7B,qBAAqB,CA4BvB"}
+{"version":3,"file":"tresholds.d.ts","sourceRoot":"","sources":["../../src/tresholds.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAe,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG7G,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,cAAc,EAAE,CAAC;AAErD,eAAO,MAAM,qBAAqB,EAAE,gBAA4C,CAAC;AAEjF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,gBAAgB,EAC5B,IAAI,EAAE,aAAa,EACnB,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,qBAAqB,GAC7B,qBAAqB,CA4BvB"}

package/lib/tresholds.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tresholds.ts"],"sourcesContent":["// Copyright 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 { StepOptions, ThresholdColorPalette, ThresholdOptions, FormatOptions } from '@perses-dev/core';\nimport zip from 'lodash/zip';\n\nexport type GaugeColorStop = [number, string];\n\nexport type EChartsAxisLineColors = GaugeColorStop[];\n\nexport const defaultThresholdInput: ThresholdOptions = { steps: [{ value: 0 }] };\n\nexport function convertThresholds(\n  thresholds: ThresholdOptions,\n  unit: FormatOptions,\n  max: number,\n  palette: ThresholdColorPalette\n): EChartsAxisLineColors {\n  const defaultThresholdColor = thresholds.defaultColor ?? palette.defaultColor;\n  const defaultThresholdSteps: EChartsAxisLineColors = [[0, defaultThresholdColor]];\n\n  if (thresholds.steps !== undefined) {\n    // https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color\n    // color segments must be decimal between 0 and 1\n    const segmentMax = 1;\n    const valuesArr: number[] = thresholds.steps.map((step: StepOptions) => {\n      if (thresholds.mode === 'percent') {\n        return step.value / 100;\n      }\n      return step.value / max;\n    });\n    valuesArr.push(segmentMax);\n\n    const colorsArr = thresholds.steps.map((step: StepOptions, index) => step.color ?? palette.palette[index]);\n    colorsArr.unshift(defaultThresholdColor);\n\n    const zippedArr = zip(valuesArr, colorsArr);\n    return zippedArr.map((elem) => {\n      const convertedValues = elem[0] ?? segmentMax;\n      const convertedColors = elem[1] ?? defaultThresholdColor;\n      return [convertedValues, convertedColors];\n    });\n  } else {\n    return defaultThresholdSteps;\n  }\n}\n"],"names":["zip","defaultThresholdInput","steps","value","convertThresholds","thresholds","unit","max","palette","defaultThresholdColor","defaultColor","defaultThresholdSteps","undefined","segmentMax","valuesArr","map","step","mode","push","colorsArr","index","color","unshift","zippedArr","elem","convertedValues","convertedColors"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,OAAOA,SAAS,aAAa;AAM7B,OAAO,MAAMC,wBAA0C;IAAEC,OAAO;QAAC;YAAEC,OAAO;QAAE;KAAE;AAAC,EAAE;AAEjF,OAAO,SAASC,kBACdC,UAA4B,EAC5BC,IAAmB,EACnBC,GAAW,EACXC,OAA8B;IAE9B,MAAMC,wBAAwBJ,WAAWK,YAAY,IAAIF,QAAQE,YAAY;IAC7E,MAAMC,wBAA+C;QAAC;YAAC;YAAGF;SAAsB;KAAC;IAEjF,IAAIJ,WAAWH,KAAK,KAAKU,WAAW;QAClC,kFAAkF;QAClF,iDAAiD;QACjD,MAAMC,aAAa;QACnB,MAAMC,YAAsBT,WAAWH,KAAK,CAACa,GAAG,CAAC,CAACC;YAChD,IAAIX,WAAWY,IAAI,KAAK,WAAW;gBACjC,OAAOD,KAAKb,KAAK,GAAG;YACtB;YACA,OAAOa,KAAKb,KAAK,GAAGI;QACtB;QACAO,UAAUI,IAAI,CAACL;QAEf,MAAMM,YAAYd,WAAWH,KAAK,CAACa,GAAG,CAAC,CAACC,MAAmBI,QAAUJ,KAAKK,KAAK,IAAIb,QAAQA,OAAO,CAACY,MAAM;QACzGD,UAAUG,OAAO,CAACb;QAElB,MAAMc,YAAYvB,IAAIc,WAAWK;QACjC,OAAOI,UAAUR,GAAG,CAAC,CAACS;YACpB,MAAMC,kBAAkBD,IAAI,CAAC,EAAE,IAAIX;YACnC,MAAMa,kBAAkBF,IAAI,CAAC,EAAE,IAAIf;YACnC,OAAO;gBAACgB;gBAAiBC;aAAgB;QAC3C;IACF,OAAO;QACL,OAAOf;IACT;AACF"}
+{"version":3,"sources":["../../src/tresholds.ts"],"sourcesContent":["// Copyright 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 { FormatOptions, StepOptions, ThresholdColorPalette, ThresholdOptions } from '@perses-dev/components';\nimport zip from 'lodash/zip';\n\nexport type GaugeColorStop = [number, string];\n\nexport type EChartsAxisLineColors = GaugeColorStop[];\n\nexport const defaultThresholdInput: ThresholdOptions = { steps: [{ value: 0 }] };\n\nexport function convertThresholds(\n  thresholds: ThresholdOptions,\n  unit: FormatOptions,\n  max: number,\n  palette: ThresholdColorPalette\n): EChartsAxisLineColors {\n  const defaultThresholdColor = thresholds.defaultColor ?? palette.defaultColor;\n  const defaultThresholdSteps: EChartsAxisLineColors = [[0, defaultThresholdColor]];\n\n  if (thresholds.steps !== undefined) {\n    // https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color\n    // color segments must be decimal between 0 and 1\n    const segmentMax = 1;\n    const valuesArr: number[] = thresholds.steps.map((step: StepOptions) => {\n      if (thresholds.mode === 'percent') {\n        return step.value / 100;\n      }\n      return step.value / max;\n    });\n    valuesArr.push(segmentMax);\n\n    const colorsArr = thresholds.steps.map((step: StepOptions, index) => step.color ?? palette.palette[index]);\n    colorsArr.unshift(defaultThresholdColor);\n\n    const zippedArr = zip(valuesArr, colorsArr);\n    return zippedArr.map((elem) => {\n      const convertedValues = elem[0] ?? segmentMax;\n      const convertedColors = elem[1] ?? defaultThresholdColor;\n      return [convertedValues, convertedColors];\n    });\n  } else {\n    return defaultThresholdSteps;\n  }\n}\n"],"names":["zip","defaultThresholdInput","steps","value","convertThresholds","thresholds","unit","max","palette","defaultThresholdColor","defaultColor","defaultThresholdSteps","undefined","segmentMax","valuesArr","map","step","mode","push","colorsArr","index","color","unshift","zippedArr","elem","convertedValues","convertedColors"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,OAAOA,SAAS,aAAa;AAM7B,OAAO,MAAMC,wBAA0C;IAAEC,OAAO;QAAC;YAAEC,OAAO;QAAE;KAAE;AAAC,EAAE;AAEjF,OAAO,SAASC,kBACdC,UAA4B,EAC5BC,IAAmB,EACnBC,GAAW,EACXC,OAA8B;IAE9B,MAAMC,wBAAwBJ,WAAWK,YAAY,IAAIF,QAAQE,YAAY;IAC7E,MAAMC,wBAA+C;QAAC;YAAC;YAAGF;SAAsB;KAAC;IAEjF,IAAIJ,WAAWH,KAAK,KAAKU,WAAW;QAClC,kFAAkF;QAClF,iDAAiD;QACjD,MAAMC,aAAa;QACnB,MAAMC,YAAsBT,WAAWH,KAAK,CAACa,GAAG,CAAC,CAACC;YAChD,IAAIX,WAAWY,IAAI,KAAK,WAAW;gBACjC,OAAOD,KAAKb,KAAK,GAAG;YACtB;YACA,OAAOa,KAAKb,KAAK,GAAGI;QACtB;QACAO,UAAUI,IAAI,CAACL;QAEf,MAAMM,YAAYd,WAAWH,KAAK,CAACa,GAAG,CAAC,CAACC,MAAmBI,QAAUJ,KAAKK,KAAK,IAAIb,QAAQA,OAAO,CAACY,MAAM;QACzGD,UAAUG,OAAO,CAACb;QAElB,MAAMc,YAAYvB,IAAIc,WAAWK;QACjC,OAAOI,UAAUR,GAAG,CAAC,CAACS;YACpB,MAAMC,kBAAkBD,IAAI,CAAC,EAAE,IAAIX;YACnC,MAAMa,kBAAkBF,IAAI,CAAC,EAAE,IAAIf;YACnC,OAAO;gBAACgB;gBAAiBC;aAAgB;QAC3C;IACF,OAAO;QACL,OAAOf;IACT;AACF"}