@perses-dev/components 0.26.1 → 0.28.0

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,9 +62,30 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem({ item , sx , ...others }) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onLayoutChange , ...others }, ref) {
+    const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
+    function handleMouseOver() {
+        if (truncateLabel) {
+            setNoWrap(false);
+        }
+    }
+    function handleMouseOut() {
+        if (truncateLabel) {
+            setNoWrap(true);
+        }
+    }
+    (0, _react.useEffect)(()=>{
+        // When `noWrap` changes, so does the layout of the component. Notifies the
+        // parent, so it can handle those changes.
+        onLayoutChange === null || onLayoutChange === void 0 ? void 0 : onLayoutChange();
+    }, [
+        noWrap,
+        onLayoutChange
+    ]);
     return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
         ...others,
+        component: "div",
+        role: "listitem",
         sx: (0, _utils.combineSx)({
             padding: 0,
             cursor: 'pointer'
@@ -73,6 +94,7 @@ const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem
         key: item.id,
         onClick: item.onClick,
         selected: item.isSelected,
+        ref: ref,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                 sx: {
@@ -84,8 +106,14 @@ const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ListItemText, {
-                primary: item.label
+                primary: item.label,
+                primaryTypographyProps: {
+                    noWrap: noWrap
+                },
+                onMouseOver: handleMouseOver,
+                onMouseOut: handleMouseOut
             })
         ]
     });
 });
+const ListLegendItem = /*#__PURE__*/ _react.default.memo(ListLegendItemBase);

package/dist/cjs/LineChart/LineChart.js

@@ -84,8 +84,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     _renderers.CanvasRenderer
 ]);
 function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
-    wrapLabels: true,
-    showQuery: true
+    wrapLabels: true
 } , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
     var ref;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
@@ -226,7 +225,6 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             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,
-                showQuery: tooltipConfig.showQuery,
                 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 =true , showQuery =true  } = 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,9 +44,8 @@ function SeriesInfo(props) {
             markerColor: markerColor
         });
     }
-    // when more than one series, either show full series name or formatted labels only
-    const seriesInfo = showQuery ? seriesName : formattedSeriesLabels;
-    const formattedSeriesInfo = seriesInfo.replace(/[,]/g, ', '); // add space after commas so wrapLabels works
+    // add space after commas so wrapLabels works
+    const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             display: 'table-row',

package/dist/cjs/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -64,7 +64,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , showQuery , pinTooltip , unit  }) {
+const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     if (mousePos === null || mousePos.target === null) return null;
@@ -109,8 +109,7 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
                 focusedSeries: focusedSeries,
-                wrapLabels: wrapLabels,
-                showQuery: showQuery
+                wrapLabels: wrapLabels
             })
         })
     });

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -24,7 +24,7 @@ const _material = require("@mui/material");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _seriesInfo = require("./SeriesInfo");
 function TooltipContent(props) {
-    const { focusedSeries , showQuery , wrapLabels  } = props;
+    const { focusedSeries , wrapLabels  } = props;
     const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
     const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
     const formatTimeSeriesHeader = (timeString)=>{
@@ -83,7 +83,6 @@ function TooltipContent(props) {
                             formattedY: formattedY,
                             markerColor: markerColor,
                             totalSeries: sortedFocusedSeries.length,
-                            showQuery: showQuery,
                             wrapLabels: wrapLabels
                         }, key);
                     })

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

@@ -32,7 +32,7 @@ _export(exports, {
 });
 const _react = require("react");
 const TOOLTIP_MAX_WIDTH = 650;
-const TOOLTIP_MAX_HEIGHT = 230;
+const TOOLTIP_MAX_HEIGHT = 400;
 const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
 const TOOLTIP_MAX_ITEMS = 50;
 const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
@@ -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

@@ -42,9 +42,9 @@ function generateChartsTheme(muiTheme, echartsTheme) {
         },
         color: [
             '#8dd3c7',
-            '#bebada',
             '#fb8072',
             '#80b1d3',
+            '#bebada',
             '#fdb462'
         ],
         categoryAxis: {

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"}