@perses-dev/components 0.0.0-snapshot-datasource-create-transform-e9f8493 → 0.0.0-snapshot-color-palette-gen-test-0ebddd6

package/dist/cjs/LineChart/LineChart.js

@@ -83,7 +83,10 @@ function _interopRequireWildcard(obj, nodeInterop) {
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom , onDoubleClick  }) {
+function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
+    wrapLabels: true
+} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+    var ref;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -177,6 +180,9 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
             grid,
             legend
         };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
         return option;
     }, [
         data,
@@ -185,7 +191,8 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
         grid,
         legend,
         noDataOption,
-        timeZone
+        timeZone,
+        __experimentalEChartsOptionsOverride
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
@@ -215,10 +222,10 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
         },
         onDoubleClick: handleOnDoubleClick,
         children: [
-            showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
+            showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
-                wrapLabels: true,
+                wrapLabels: tooltipConfig.wrapLabels,
                 pinTooltip: pinTooltip,
                 unit: unit
             }),

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -21,13 +21,15 @@ Object.defineProperty(exports, "OptionsEditorControl", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/InformationOutline"));
 const _utils = require("../utils");
+const _infoTooltip = require("../InfoTooltip");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const OptionsEditorControl = ({ label , control  })=>{
+const OptionsEditorControl = ({ label , control , description  })=>{
     // Make sure we have a unique ID we can use for associating labels and
     // controls for a11y.
     const generatedControlId = (0, _utils.useId)('EditorSectionControl');
@@ -41,9 +43,36 @@ const OptionsEditorControl = ({ label , control  })=>{
             alignItems: "center",
             justifyContent: "space-between",
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
-                    htmlFor: controlId,
-                    children: label
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
+                            htmlFor: controlId,
+                            children: label
+                        }),
+                        description && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
+                            description: description,
+                            enterDelay: 100,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                size: "small",
+                                sx: (theme)=>({
+                                        borderRadius: theme.shape.borderRadius,
+                                        padding: '4x',
+                                        margin: '0 2px'
+                                    }),
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                                    "aria-describedby": "info-tooltip",
+                                    "aria-hidden": false,
+                                    fontSize: "inherit",
+                                    sx: {
+                                        color: (theme)=>theme.palette.grey[700]
+                                    }
+                                })
+                            })
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: {

package/dist/cjs/StatChart/StatChart.js

@@ -40,7 +40,7 @@ const _echart = require("../EChart");
 const MIN_VALUE_SIZE = 12;
 const MAX_VALUE_SIZE = 36;
 function StatChart(props) {
-    const { width , height , data , unit , sparkline  } = props;
+    const { width , height , data , unit , color , sparkline  } = props;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const formattedValue = data.calculatedValue === undefined ? '' : (0, _units.formatValue)(data.calculatedValue, unit);
     const option = (0, _react.useMemo)(()=>{
@@ -109,7 +109,7 @@ function StatChart(props) {
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                 variant: "h3",
                 sx: (theme)=>({
-                        color: theme.palette.text.primary,
+                        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
                         fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
                         padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
                     }),

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -28,7 +28,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function ThresholdInput({ inputRef , label , color , value , onChange , onColorChange , onBlur , onDelete  }) {
+function ThresholdInput({ inputRef , label , color , value , mode , onChange , onColorChange , onBlur , onDelete  }) {
     const [key, setKey] = (0, _react.useState)(0); // use key to cause input to lose focus when pressing enter
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
         flex: 1,
@@ -50,7 +50,7 @@ function ThresholdInput({ inputRef , label , color , value , onChange , onColorC
                 id: label,
                 inputRef: inputRef,
                 type: "number",
-                value: value === 0 ? undefined : value,
+                value: value === 0 ? '' : value,
                 placeholder: "0",
                 onChange: onChange,
                 onBlur: onBlur,
@@ -59,6 +59,12 @@ function ThresholdInput({ inputRef , label , color , value , onChange , onColorC
                         onBlur();
                         setKey(key + 1);
                     }
+                },
+                InputProps: {
+                    endAdornment: mode === 'Percent' ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        paddingX: 1,
+                        children: "%"
+                    }) : undefined
                 }
             }, key),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -24,9 +24,9 @@ const _immer = /*#__PURE__*/ _interopRequireDefault(require("immer"));
 const _material = require("@mui/material");
 const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
 const _system = require("@mui/system");
-const _infoTooltip = require("../InfoTooltip");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
+const _infoTooltip = require("../InfoTooltip");
 const _thresholdColorPicker = require("./ThresholdColorPicker");
 const _thresholdInput = require("./ThresholdInput");
 function _interopRequireDefault(obj) {
@@ -120,6 +120,10 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
             onChange((0, _immer.default)(thresholds, (draft)=>{
                 draft.default_color = color;
             }));
+        } else {
+            onChange({
+                default_color: color
+            });
         }
     };
     // sort thresholds in ascending order every time an input blurs
@@ -156,6 +160,14 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                     }
                 ]
             });
+        } else if (thresholds && thresholds.steps === undefined) {
+            onChange((0, _immer.default)(thresholds, (draft)=>{
+                draft.steps = [
+                    {
+                        value: DEFAULT_STEP
+                    }
+                ];
+            }));
         } else {
             onChange((0, _immer.default)(thresholds, (draft)=>{
                 const steps = draft.steps;
@@ -191,46 +203,55 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
     var ref1, _color, ref2;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_optionsEditorLayout.OptionsEditorGroup, {
         title: "Thresholds",
-        icon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-            size: "small",
-            "aria-label": "add threshold",
-            onClick: addThresholdInput,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {})
+        icon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
+            description: 'Add threshold',
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                size: "small",
+                "aria-label": "add threshold",
+                onClick: addThresholdInput,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {})
+            })
         }),
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.ToggleButtonGroup, {
-                exclusive: true,
-                disabled: disablePercentMode,
-                value: (ref1 = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && ref1 !== void 0 ? ref1 : 'Absolute',
-                onChange: handleModeChange,
-                sx: {
-                    height: '36px',
-                    marginLeft: 'auto'
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ToggleButton, {
-                        "aria-label": "absolute",
-                        value: "Absolute",
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
-                            description: "Absolute",
-                            children: "#"
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ToggleButton, {
-                        "aria-label": "percent",
-                        value: "Percent",
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
-                            description: "Percentage means thresholds relative to min & max",
-                            children: "%"
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Mode",
+                description: "Percentage means thresholds relative to min & max",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.ToggleButtonGroup, {
+                    exclusive: true,
+                    disabled: disablePercentMode,
+                    value: (ref1 = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && ref1 !== void 0 ? ref1 : 'Absolute',
+                    onChange: handleModeChange,
+                    sx: {
+                        height: '36px',
+                        marginLeft: 'auto'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ToggleButton, {
+                            "aria-label": "absolute",
+                            value: "Absolute",
+                            sx: {
+                                fontWeight: 500
+                            },
+                            children: "Absolute"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ToggleButton, {
+                            "aria-label": "percent",
+                            value: "Percent",
+                            sx: {
+                                fontWeight: 500
+                            },
+                            children: "Percent"
                         })
-                    })
-                ]
+                    ]
+                })
             }),
-            steps && steps.map((step, i)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_thresholdInput.ThresholdInput, {
+            steps && steps.map((step, i)=>{
+                /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_thresholdInput.ThresholdInput, {
                     inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
                     label: `T${i + 1}`,
                     color: (ref2 = (_color = step.color) !== null && _color !== void 0 ? _color : palette[i]) !== null && ref2 !== void 0 ? ref2 : defaultThresholdColor,
                     value: step.value,
+                    mode: thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode,
                     onColorChange: (color)=>handleThresholdColorChange(color, i),
                     onChange: (e)=>{
                         handleThresholdValueChange(e, i);
@@ -239,7 +260,8 @@ function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercent
                         deleteThreshold(i);
                     },
                     onBlur: handleThresholdBlur
-                }, i)).reverse(),
+                }, i);
+            }).reverse(),
             !hideDefault && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_system.Stack, {
                 flex: 1,
                 direction: "row",

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -24,7 +24,7 @@ const _seriesMarker = require("./SeriesMarker");
 const _seriesLabelsStack = require("./SeriesLabelsStack");
 const _tooltipModel = require("./tooltip-model");
 function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels =true  } = props;
     // metric __name__ comes before opening curly brace, ignore if not populated
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
@@ -44,8 +44,8 @@ function SeriesInfo(props) {
             markerColor: markerColor
         });
     }
-    // add space after commas when more than one focused series
-    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');
+    // add space after commas so wrapLabels works
+    const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             display: 'table-row',
@@ -76,7 +76,7 @@ function SeriesInfo(props) {
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
-                        children: inlineSeriesLabels
+                        children: formattedSeriesInfo
                     })
                 ]
             }),

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

@@ -46,10 +46,6 @@ const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
 });
 const defaultCursorData = {
     coords: {
-        viewport: {
-            x: 0,
-            y: 0
-        },
         plotCanvas: {
             x: 0,
             y: 0
@@ -71,9 +67,9 @@ const useMousePosition = ()=>{
     (0, _react.useEffect)(()=>{
         const setFromEvent = (e)=>{
             return setCoords({
-                viewport: {
-                    x: e.clientX,
-                    y: e.clientY
+                page: {
+                    x: e.pageX,
+                    y: e.pageY
                 },
                 plotCanvas: {
                     x: e.offsetX,

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -28,19 +28,22 @@ function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedP
     }
     const cursorPaddingX = 32;
     const cursorPaddingY = 16;
-    const x = mousePos.viewport.x;
-    let y = mousePos.viewport.y + cursorPaddingY;
-    const isCloseToBottom = mousePos.viewport.y > window.innerHeight * 0.8;
+    // 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
+    const x = mousePos.page.x;
+    let y = mousePos.page.y + cursorPaddingY;
+    const isCloseToBottom = mousePos.page.y > window.innerHeight * 0.8;
     const yPosAdjustThreshold = chartHeight * 0.75;
     // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up
     if (isCloseToBottom === true) {
         if (seriesNum > 6) {
-            y = mousePos.viewport.y * 0.65;
+            y = mousePos.page.y * 0.75;
         } else {
-            y = mousePos.viewport.y * 0.75;
+            y = mousePos.page.y * 0.9;
         }
     } else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
-        y = mousePos.viewport.y * 0.85;
+        y = mousePos.page.y * 0.95;
     }
     // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)
     const tooltipWidth = seriesNum > 1 ? _tooltipModel.TOOLTIP_MAX_WIDTH : _tooltipModel.TOOLTIP_MAX_WIDTH / 2;

package/dist/cjs/model/units/bytes.js

@@ -25,7 +25,13 @@ _export(exports, {
     BYTES_UNIT_CONFIG: ()=>BYTES_UNIT_CONFIG,
     formatBytes: ()=>formatBytes
 });
+const _numbro = /*#__PURE__*/ _interopRequireDefault(require("numbro"));
 const _constants = require("./constants");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 const bytesUnitKinds = [
     'Bytes'
 ];
@@ -35,52 +41,40 @@ const BYTES_GROUP_CONFIG = {
     abbreviate: true
 };
 const BYTES_UNIT_CONFIG = {
+    // This uses units that are powers of 1000.
+    // In other words, 1KB = 1000 bytes.
     Bytes: {
         group: 'Bytes',
         label: 'Bytes'
     }
 };
-function formatBytes(bytes, unitOptions) {
+function formatBytes(bytes, { abbreviate , decimal_places  }) {
     if (bytes === 0) return '0 bytes';
-    // default to full 'Bytes' formatting
-    const options = unitOptions.abbreviate === undefined ? {
-        ...unitOptions,
-        abbreviate: false
-    } : unitOptions;
-    var _decimal_places;
-    let decimals = (_decimal_places = options.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
-    // avoids minimumFractionDigits value is out of range error, possible values are 0 to 20
+    decimal_places = decimal_places !== null && decimal_places !== void 0 ? decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
+    // Avoids maximumFractionDigits value is out of range error. Possible values are 0 to 20.
     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits
-    if (decimals < 0) {
-        decimals = 0;
-    } else if (decimals > 20) {
-        decimals = 20;
+    if (decimal_places < 0) {
+        decimal_places = 0;
+    } else if (decimal_places > 20) {
+        decimal_places = 20;
     }
-    const formatParams = {
-        style: 'decimal',
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals,
-        useGrouping: true
-    };
-    const formatter = new Intl.NumberFormat('en-US', formatParams);
-    if (options.abbreviate === false) {
-        return `${formatter.format(bytes)} bytes`;
+    const showFullNumber = abbreviate == false || bytes < 1000;
+    if (showFullNumber) {
+        const formatter = new Intl.NumberFormat('en-US', {
+            style: 'unit',
+            unit: 'byte',
+            unitDisplay: 'long',
+            maximumFractionDigits: decimal_places,
+            useGrouping: true
+        });
+        return formatter.format(bytes);
     }
-    const k = 1024;
-    const sizes = [
-        'bytes',
-        'KB',
-        'MB',
-        'GB',
-        'TB',
-        'PB',
-        'EB',
-        'ZB',
-        'YB'
-    ];
-    // Math.max(0, ...) ensures that we don't return -1 as a value for the index.
-    // Why? When the number of bytes are between -1 and 1, Math.floor(Math.log(bytes)/Math.log(1024)) returns -1.
-    const i = Math.max(0, Math.floor(Math.log(bytes) / Math.log(k)));
-    const abbreviatedValue = bytes / Math.pow(k, i);
-    return `${formatter.format(abbreviatedValue)} ${sizes[i]}`;
+    return (0, _numbro.default)(bytes).format({
+        output: 'byte',
+        base: 'decimal',
+        spaceSeparated: true,
+        mantissa: decimal_places,
+        trimMantissa: true,
+        optionalMantissa: true
+    });
 }

package/dist/cjs/model/units/decimal.js

@@ -23,11 +23,8 @@ function _export(target, all) {
 _export(exports, {
     PERCENT_GROUP_CONFIG: ()=>PERCENT_GROUP_CONFIG,
     DECIMAL_UNIT_CONFIG: ()=>DECIMAL_UNIT_CONFIG,
-    formatDecimal: ()=>formatDecimal,
-    abbreviateLargeNumber: ()=>abbreviateLargeNumber,
-    formatNumber: ()=>formatNumber
+    formatDecimal: ()=>formatDecimal
 });
-const _mathjs = require("../../utils/mathjs");
 const _constants = require("./constants");
 const decimalUnitKinds = [
     'Decimal'
@@ -42,29 +39,21 @@ const DECIMAL_UNIT_CONFIG = {
         label: 'Decimal'
     }
 };
-function formatDecimal(value, unitOptions) {
-    var _decimal_places;
-    const decimals = (_decimal_places = unitOptions.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
-    if (value === 0) {
-        return value.toString();
+function formatDecimal(value, { abbreviate , decimal_places  }) {
+    decimal_places = decimal_places !== null && decimal_places !== void 0 ? decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
+    // Avoids maximumFractionDigits value is out of range error. Possible values are 0 to 20.
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits
+    if (decimal_places < 0) {
+        decimal_places = 0;
+    } else if (decimal_places > 20) {
+        decimal_places = 20;
     }
-    if (unitOptions.abbreviate && value >= 1000) {
-        return abbreviateLargeNumber(value, decimals);
-    }
-    const formatParams = {
+    const showFullNumber = abbreviate == false || value < 1000;
+    const formatter = new Intl.NumberFormat('en-US', {
         style: 'decimal',
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals,
+        notation: showFullNumber ? 'standard' : 'compact',
+        maximumFractionDigits: decimal_places,
         useGrouping: true
-    };
-    const decimalFormatter = new Intl.NumberFormat('en-US', formatParams);
-    return decimalFormatter.format(value);
-}
-function abbreviateLargeNumber(num, decimals = 2) {
-    const modifier = (n)=>(0, _mathjs.round)(n, decimals);
-    return formatNumber(num, modifier);
-}
-function formatNumber(num, modifier) {
-    const fn = modifier !== null && modifier !== void 0 ? modifier : Math.round;
-    return num >= 1e12 ? fn(num / 1e12) + 'T' : num >= 1e9 ? fn(num / 1e9) + 'B' : num >= 1e6 ? fn(num / 1e6) + 'M' : num >= 1e3 ? fn(num / 1e3) + 'K' : num.toString();
+    });
+    return formatter.format(value);
 }

package/dist/cjs/model/units/time.js

@@ -89,14 +89,13 @@ var TimeIntlDuration;
 })(TimeIntlDuration || (TimeIntlDuration = {}));
 function formatTime(value, unitOptions) {
     var _decimal_places;
-    const decimals = (_decimal_places = unitOptions.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
+    const decimalPlaces = (_decimal_places = unitOptions.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
     const timeUnit = TimeIntlDuration[unitOptions.kind];
     const formatter = new Intl.NumberFormat('en-US', {
         style: 'unit',
         unit: timeUnit,
         unitDisplay: 'long',
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals
+        maximumFractionDigits: decimalPlaces
     });
     return formatter.format(value);
 }

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

@@ -40,12 +40,20 @@ function generateChartsTheme(muiTheme, echartsTheme) {
             left: 20,
             containLabel: true
         },
+        // Accessible categorical palette from: https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
         color: [
-            '#8dd3c7',
-            '#bebada',
-            '#fb8072',
-            '#80b1d3',
-            '#fdb462'
+            '#a6cee3',
+            '#1f78b4',
+            '#b2df8a',
+            '#33a02c',
+            '#fb9a99',
+            '#e31a1c',
+            '#fdbf6f',
+            '#ff7f00',
+            '#cab2d6',
+            '#6a3d9a',
+            '#ffff99',
+            '#b15928'
         ],
         categoryAxis: {
             show: true,

package/dist/model/legend.d.ts

@@ -9,7 +9,7 @@ export interface LegendItem {
     label: string;
     isSelected: boolean;
     color: string;
-    onClick: MouseEventHandler<HTMLLIElement>;
+    onClick: MouseEventHandler<HTMLElement>;
 }
 export declare type LegendPositionConfig = {
     label: string;

package/dist/model/legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/model/legend.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,eAAO,MAAM,eAAe,8BAA+B,CAAC;AAE5D,oBAAY,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,oBAAY,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAG3F,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAE5B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,QAAQ,CAAC,EAAE,eAAe,sBAQ3D;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,eAAe,WAE9D;AAED,wBAAgB,kBAAkB,CAAC,MAAM,CAAC,EAAE,aAAa,WASxD"}
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/model/legend.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,eAAO,MAAM,eAAe,8BAA+B,CAAC;AAE5D,oBAAY,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACzC;AAED,oBAAY,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAG3F,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAE5B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,QAAQ,CAAC,EAAE,eAAe,sBAQ3D;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,eAAe,WAE9D;AAED,wBAAgB,kBAAkB,CAAC,MAAM,CAAC,EAAE,aAAa,WASxD"}

package/dist/model/legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/legend.ts"],"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 { MouseEventHandler } from 'react';\n\nexport const legendPositions = ['Bottom', 'Right'] as const;\n\nexport type LegendPositions = (typeof legendPositions)[number];\n\nexport interface LegendOptions {\n  position: LegendPositions;\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  color: string;\n  onClick: MouseEventHandler<HTMLLIElement>;\n}\n\nexport type LegendPositionConfig = {\n  label: string;\n};\n\nexport const LEGEND_POSITIONS_CONFIG: Readonly<Record<LegendPositions, LegendPositionConfig>> = {\n  Bottom: { label: 'Bottom' },\n  Right: { label: 'Right' },\n};\n\nexport const DEFAULT_LEGEND: LegendOptions = {\n  position: 'Bottom',\n};\n\nexport function getLegendPosition(position?: LegendPositions) {\n  if (position === undefined) {\n    return DEFAULT_LEGEND.position;\n  }\n  if (isValidLegendPosition(position)) {\n    return position;\n  }\n  return DEFAULT_LEGEND.position;\n}\n\nexport function isValidLegendPosition(position: LegendPositions) {\n  return (legendPositions as readonly string[]).includes(position);\n}\n\nexport function validateLegendSpec(legend?: LegendOptions) {\n  if (legend === undefined) {\n    // undefined is valid since this is how legend is hidden by default\n    return true;\n  }\n  if (!isValidLegendPosition(legend.position)) {\n    return false;\n  }\n  return true;\n}\n"],"names":["legendPositions","LEGEND_POSITIONS_CONFIG","Bottom","label","Right","DEFAULT_LEGEND","position","getLegendPosition","undefined","isValidLegendPosition","includes","validateLegendSpec","legend"],"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;AAIjC,OAAO,MAAMA,eAAe,GAAG;IAAC,QAAQ;IAAE,OAAO;CAAC,AAAS,CAAC;AAoB5D,OAAO,MAAMC,uBAAuB,GAA4D;IAC9FC,MAAM,EAAE;QAAEC,KAAK,EAAE,QAAQ;KAAE;IAC3BC,KAAK,EAAE;QAAED,KAAK,EAAE,OAAO;KAAE;CAC1B,CAAC;AAEF,OAAO,MAAME,cAAc,GAAkB;IAC3CC,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,OAAO,SAASC,iBAAiB,CAACD,QAA0B,EAAE;IAC5D,IAAIA,QAAQ,KAAKE,SAAS,EAAE;QAC1B,OAAOH,cAAc,CAACC,QAAQ,CAAC;IACjC,CAAC;IACD,IAAIG,qBAAqB,CAACH,QAAQ,CAAC,EAAE;QACnC,OAAOA,QAAQ,CAAC;IAClB,CAAC;IACD,OAAOD,cAAc,CAACC,QAAQ,CAAC;AACjC,CAAC;AAED,OAAO,SAASG,qBAAqB,CAACH,QAAyB,EAAE;IAC/D,OAAO,AAACN,eAAe,CAAuBU,QAAQ,CAACJ,QAAQ,CAAC,CAAC;AACnE,CAAC;AAED,OAAO,SAASK,kBAAkB,CAACC,MAAsB,EAAE;IACzD,IAAIA,MAAM,KAAKJ,SAAS,EAAE;QACxB,mEAAmE;QACnE,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,CAACC,qBAAqB,CAACG,MAAM,CAACN,QAAQ,CAAC,EAAE;QAC3C,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"sources":["../../src/model/legend.ts"],"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 { MouseEventHandler } from 'react';\n\nexport const legendPositions = ['Bottom', 'Right'] as const;\n\nexport type LegendPositions = (typeof legendPositions)[number];\n\nexport interface LegendOptions {\n  position: LegendPositions;\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  color: string;\n  onClick: MouseEventHandler<HTMLElement>;\n}\n\nexport type LegendPositionConfig = {\n  label: string;\n};\n\nexport const LEGEND_POSITIONS_CONFIG: Readonly<Record<LegendPositions, LegendPositionConfig>> = {\n  Bottom: { label: 'Bottom' },\n  Right: { label: 'Right' },\n};\n\nexport const DEFAULT_LEGEND: LegendOptions = {\n  position: 'Bottom',\n};\n\nexport function getLegendPosition(position?: LegendPositions) {\n  if (position === undefined) {\n    return DEFAULT_LEGEND.position;\n  }\n  if (isValidLegendPosition(position)) {\n    return position;\n  }\n  return DEFAULT_LEGEND.position;\n}\n\nexport function isValidLegendPosition(position: LegendPositions) {\n  return (legendPositions as readonly string[]).includes(position);\n}\n\nexport function validateLegendSpec(legend?: LegendOptions) {\n  if (legend === undefined) {\n    // undefined is valid since this is how legend is hidden by default\n    return true;\n  }\n  if (!isValidLegendPosition(legend.position)) {\n    return false;\n  }\n  return true;\n}\n"],"names":["legendPositions","LEGEND_POSITIONS_CONFIG","Bottom","label","Right","DEFAULT_LEGEND","position","getLegendPosition","undefined","isValidLegendPosition","includes","validateLegendSpec","legend"],"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;AAIjC,OAAO,MAAMA,eAAe,GAAG;IAAC,QAAQ;IAAE,OAAO;CAAC,AAAS,CAAC;AAoB5D,OAAO,MAAMC,uBAAuB,GAA4D;IAC9FC,MAAM,EAAE;QAAEC,KAAK,EAAE,QAAQ;KAAE;IAC3BC,KAAK,EAAE;QAAED,KAAK,EAAE,OAAO;KAAE;CAC1B,CAAC;AAEF,OAAO,MAAME,cAAc,GAAkB;IAC3CC,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,OAAO,SAASC,iBAAiB,CAACD,QAA0B,EAAE;IAC5D,IAAIA,QAAQ,KAAKE,SAAS,EAAE;QAC1B,OAAOH,cAAc,CAACC,QAAQ,CAAC;IACjC,CAAC;IACD,IAAIG,qBAAqB,CAACH,QAAQ,CAAC,EAAE;QACnC,OAAOA,QAAQ,CAAC;IAClB,CAAC;IACD,OAAOD,cAAc,CAACC,QAAQ,CAAC;AACjC,CAAC;AAED,OAAO,SAASG,qBAAqB,CAACH,QAAyB,EAAE;IAC/D,OAAO,AAACN,eAAe,CAAuBU,QAAQ,CAACJ,QAAQ,CAAC,CAAC;AACnE,CAAC;AAED,OAAO,SAASK,kBAAkB,CAACC,MAAsB,EAAE;IACzD,IAAIA,MAAM,KAAKJ,SAAS,EAAE;QACxB,mEAAmE;QACnE,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,CAACC,qBAAqB,CAACG,MAAM,CAACN,QAAQ,CAAC,EAAE;QAC3C,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/model/units/bytes.d.ts

@@ -8,10 +8,6 @@ export declare type BytesUnitOptions = {
 };
 export declare const BYTES_GROUP_CONFIG: UnitGroupConfig;
 export declare const BYTES_UNIT_CONFIG: Readonly<Record<BytesUnitKind, UnitConfig>>;
-/**
- * Format value as bytes, use abbreviate option for more readable sizes (KB, MB, GB, etc.)
- * https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript/18650828#18650828
- */
-export declare function formatBytes(bytes: number, unitOptions: BytesUnitOptions): string;
+export declare function formatBytes(bytes: number, { abbreviate, decimal_places }: BytesUnitOptions): string;
 export {};
 //# sourceMappingURL=bytes.d.ts.map

package/dist/model/units/bytes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bytes.d.ts","sourceRoot":"","sources":["../../../src/model/units/bytes.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD,QAAA,MAAM,cAAc,oBAAqB,CAAC;AAC1C,aAAK,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,aAAa,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,eAAO,MAAM,kBAAkB,EAAE,eAIhC,CAAC;AACF,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAKzE,CAAC;AAEF;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,UAmCvE"}
+{"version":3,"file":"bytes.d.ts","sourceRoot":"","sources":["../../../src/model/units/bytes.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD,QAAA,MAAM,cAAc,oBAAqB,CAAC;AAC1C,aAAK,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,aAAa,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,eAAO,MAAM,kBAAkB,EAAE,eAIhC,CAAC;AACF,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAOzE,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,gBAAgB,UAiC1F"}