@perses-dev/components 0.19.0 → 0.21.0

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.test.js

@@ -0,0 +1,48 @@
+// Copyright 2022 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _legendOptionsEditor = require("./LegendOptionsEditor");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('LegendOptionsEditor', ()=>{
+    const renderLegendOptionsEditor = (value, onChange = jest.fn())=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_legendOptionsEditor.LegendOptionsEditor, {
+                value: value,
+                onChange: onChange
+            })
+        }));
+    };
+    const getLegendShowSwitch = ()=>{
+        return _react.screen.getByRole('checkbox', {
+            name: 'Show'
+        });
+    };
+    it('can change legend visibility by clicking', ()=>{
+        const onChange = jest.fn();
+        renderLegendOptionsEditor(undefined, onChange);
+        _userEvent.default.click(getLegendShowSwitch());
+        expect(onChange).toHaveBeenCalledWith({
+            position: 'bottom'
+        });
+    });
+});

package/dist/cjs/LegendOptionsEditor/index.js

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./LegendOptionsEditor"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/LineChart/LineChart.js

@@ -20,17 +20,18 @@ Object.defineProperty(exports, "LineChart", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _material = require("@mui/material");
-const _core1 = require("echarts/core");
+const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
+const _graph = require("../model/graph");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _tooltip = require("../Tooltip/Tooltip");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("./utils");
-(0, _core1.use)([
+(0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,
     _components.DataZoomComponent,
@@ -41,14 +42,14 @@ const _utils = require("./utils");
     _components.ToolboxComponent,
     _components.TooltipComponent,
     _components.LegendComponent,
-    _components.VisualMapComponent,
     _renderers.CanvasRenderer
 ]);
-function LineChart({ height , data , yAxis , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
+function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom , onDoubleClick  }) {
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
     const [pinTooltip, setPinTooltip] = (0, _react.useState)(false);
+    const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
@@ -84,7 +85,6 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
     if (chartRef.current !== undefined) {
         (0, _utils.enableDataZoom)(chartRef.current);
     }
-    const handleOnClick = ()=>setPinTooltip((current)=>!current);
     const handleOnDoubleClick = (e)=>{
         setPinTooltip(false);
         // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
@@ -96,25 +96,12 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
             onDoubleClick(e);
         }
     };
-    const handleOnMouseDown = (e)=>{
-        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
-        if (e.target instanceof HTMLCanvasElement) {
-            setShowTooltip(false);
-        }
-    };
-    const handleOnMouseUp = ()=>{
-        setShowTooltip(true);
-    };
-    const handleOnMouseEnter = ()=>{
-        setShowTooltip(true);
-    };
-    const handleOnMouseLeave = ()=>{
-        setShowTooltip(false);
-        setPinTooltip(false);
-    };
-    const option = (0, _core.useDeepMemo)(()=>{
+    const { noDataOption  } = chartsTheme;
+    const option = (0, _react.useMemo)(()=>{
         if (data.timeSeries === undefined) return {};
-        if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
+        if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;
+        // show symbols and axisPointer dashed line on hover
+        const isOptimizedMode = data.timeSeries.length > _graph.OPTIMIZED_MODE_SERIES_LIMIT;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
@@ -125,18 +112,18 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
                 max: data.xAxisMax,
                 axisLabel: {
                     formatter: (value)=>{
-                        return (0, _utils.getFormattedDate)(value, rangeMs);
+                        return (0, _utils.getFormattedDate)(value, rangeMs, timeZone);
                     }
                 }
             },
             yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
-                show: true,
+                show: !isOptimizedMode,
                 trigger: 'axis',
                 showContent: false,
                 axisPointer: {
-                    type: 'line',
+                    type: isOptimizedMode ? 'none' : 'line',
                     z: 0
                 }
             },
@@ -149,27 +136,45 @@ function LineChart({ height , data , yAxis , unit , grid , legend , visualMap ,
                 }
             },
             grid,
-            legend,
-            visualMap
+            legend
         };
         return option;
     }, [
         data,
         yAxis,
+        unit,
         grid,
         legend,
-        visualMap
+        noDataOption,
+        timeZone
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             height
         },
-        onClick: handleOnClick,
+        onClick: ()=>{
+            setPinTooltip((current)=>!current);
+        },
+        onMouseDown: (e)=>{
+            // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
+            if (e.target instanceof HTMLCanvasElement) {
+                setShowTooltip(false);
+            }
+        },
+        onMouseUp: ()=>{
+            setShowTooltip(true);
+        },
+        onMouseLeave: ()=>{
+            setShowTooltip(false);
+            setPinTooltip(false);
+        },
+        onMouseEnter: ()=>{
+            setShowTooltip(true);
+            if (chartRef.current !== undefined) {
+                (0, _utils.enableDataZoom)(chartRef.current);
+            }
+        },
         onDoubleClick: handleOnDoubleClick,
-        onMouseDown: handleOnMouseDown,
-        onMouseUp: handleOnMouseUp,
-        onMouseLeave: handleOnMouseLeave,
-        onMouseEnter: handleOnMouseEnter,
         children: [
             showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
                 chartRef: chartRef,

package/dist/cjs/LineChart/utils.js

@@ -29,6 +29,7 @@ _export(exports, {
 });
 const _lodashEs = require("lodash-es");
 const _model = require("../model");
+const _utils = require("../utils");
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
     if (chartModel === undefined) return;
@@ -56,12 +57,12 @@ function getDateRange(data) {
     if (data[0] === undefined || lastDatum === undefined) return defaultRange;
     return lastDatum - data[0];
 }
-function getFormattedDate(value, rangeMs) {
-    const dateFormatOptions = {
+function getFormattedDate(value, rangeMs, timeZone) {
+    const dateFormatOptions = (0, _utils.dateFormatOptionsWithTimeZone)({
         hour: 'numeric',
         minute: 'numeric',
         hourCycle: 'h23'
-    };
+    }, timeZone);
     const thirtyMinMs = 1800000;
     const dayMs = 86400000;
     if (rangeMs <= thirtyMinMs) {

package/dist/cjs/StatChart/StatChart.test.js

@@ -15,24 +15,25 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
-const _react1 = require("@testing-library/react");
+const _react = require("@testing-library/react");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _testUtils = require("../test-utils");
 const _statChart = require("./StatChart");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 describe('StatChart', ()=>{
-    const contentDimensions = {
-        width: 200,
-        height: 200
-    };
-    const unit = {
-        kind: 'Decimal',
-        decimal_places: 2
+    const renderChart = (unit)=>{
+        const contentDimensions = {
+            width: 200,
+            height: 200
+        };
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartsThemeProvider.ChartsThemeProvider, {
+            chartsTheme: _testUtils.testChartsTheme,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_statChart.StatChart, {
+                width: contentDimensions.width,
+                height: contentDimensions.height,
+                data: mockStatData,
+                unit: unit
+            })
+        }));
     };
     const mockStatData = {
         calculatedValue: 7.72931659687181,
@@ -63,18 +64,33 @@ describe('StatChart', ()=>{
             ]
         }
     };
-    describe('Render default options (no sparkline)', ()=>{
-        it('should render', ()=>{
-            (0, _react1.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartsThemeProvider.ChartsThemeProvider, {
-                chartsTheme: _testUtils.testChartsTheme,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_statChart.StatChart, {
-                    width: contentDimensions.width,
-                    height: contentDimensions.height,
-                    data: mockStatData,
-                    unit: unit
-                })
-            }));
-            expect(_react1.screen.getByText('7.73')).toBeInTheDocument();
-        });
+    it('render default options (no sparkline)', ()=>{
+        const unit = {
+            kind: 'Decimal',
+            decimal_places: 2
+        };
+        renderChart(unit);
+        expect(_react.screen.getByText('7.73')).toBeInTheDocument();
+    });
+    it('show value with bytes unit formatting', ()=>{
+        const unit = {
+            kind: 'Bytes'
+        };
+        renderChart(unit);
+        expect(_react.screen.getByText('7.73 bytes')).toBeInTheDocument();
+    });
+    it('show value with seconds time unit formatting', ()=>{
+        const unit = {
+            kind: 'Seconds'
+        };
+        renderChart(unit);
+        expect(_react.screen.getByText('7.73 seconds')).toBeInTheDocument();
+    });
+    it('show value with months time unit formatting', ()=>{
+        const unit = {
+            kind: 'Months'
+        };
+        renderChart(unit);
+        expect(_react.screen.getByText('7.73 months')).toBeInTheDocument();
     });
 });

package/dist/cjs/Tooltip/TooltipContent.js

@@ -21,30 +21,29 @@ Object.defineProperty(exports, "TooltipContent", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _seriesInfo = require("./SeriesInfo");
 function TooltipContent(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)=>{
-        const [month, year, time] = timeString.split(',');
+        const date = new Date(timeString);
+        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
+        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
         return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                     variant: "caption",
                     sx: (theme)=>({
                             color: theme.palette.common.white
                         }),
-                    children: [
-                        month,
-                        ", ",
-                        year,
-                        " –"
-                    ]
+                    children: formattedDate
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                     variant: "caption",
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("strong", {
-                        children: time
+                        children: formattedTime
                     })
                 })
             ]

package/dist/cjs/UnitSelector/UnitSelector.test.js

@@ -68,8 +68,7 @@ describe('UnitSelector', ()=>{
             kind: 'Bytes'
         }, onChange);
         const unitSelector = getUnitSelector();
-        // Note that this tab order can change depending on the type because the
-        // abbreviate comes first and is disabled in some cases.
+        _userEvent.default.tab();
         _userEvent.default.tab();
         expect(unitSelector).toHaveFocus();
         _userEvent.default.clear(unitSelector);
@@ -149,12 +148,6 @@ describe('UnitSelector', ()=>{
         });
     });
     describe('with a time unit selected', ()=>{
-        it('does not allow the user to modify the decimal places', ()=>{
-            renderUnitSelector({
-                kind: 'Hours'
-            });
-            expect(getDecimalSelector()).toBeDisabled();
-        });
         it('does not allow the user to set abbreviate', ()=>{
             renderUnitSelector({
                 kind: 'Minutes'
@@ -197,11 +190,11 @@ describe('UnitSelector', ()=>{
             });
             expect(getDecimalSelector()).toBeEnabled();
         });
-        it('does not allow the user to set abbreviate', ()=>{
+        it('allows the user to set abbreviate', ()=>{
             renderUnitSelector({
                 kind: 'Bytes'
             });
-            expect(getAbbreviateSwitch()).toBeDisabled();
+            expect(getAbbreviateSwitch()).toBeEnabled();
         });
     });
     it('should not show an option for disabled units', ()=>{

package/dist/cjs/context/TimeZoneProvider.js

@@ -0,0 +1,90 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TimeZoneContext: ()=>TimeZoneContext,
+    TimeZoneProvider: ()=>TimeZoneProvider,
+    useTimeZone: ()=>useTimeZone
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _utils = require("../utils");
+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 _interopRequireWildcard(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 = {};
+    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 TimeZoneContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function TimeZoneProvider(props) {
+    const { children , timeZone  } = props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TimeZoneContext.Provider, {
+        value: timeZone,
+        children: children
+    });
+}
+function useTimeZone() {
+    const timeZone = (0, _react.useContext)(TimeZoneContext);
+    return {
+        // fallback to "local" timezone if TimeZoneProvider is not present in the React tree
+        timeZone: timeZone !== null && timeZone !== void 0 ? timeZone : 'local',
+        formatWithUserTimeZone (date, formatString) {
+            return (0, _utils.formatWithTimeZone)(date, formatString, timeZone);
+        },
+        dateFormatOptionsWithUserTimeZone (dateFormatOptions) {
+            return (0, _utils.dateFormatOptionsWithTimeZone)(dateFormatOptions, timeZone);
+        }
+    };
+}

package/dist/cjs/index.js

@@ -23,12 +23,14 @@ _exportStar(require("./GaugeChart"), exports);
 _exportStar(require("./InfoTooltip"), exports);
 _exportStar(require("./JSONEditor"), exports);
 _exportStar(require("./Legend"), exports);
+_exportStar(require("./LegendOptionsEditor"), exports);
 _exportStar(require("./LineChart"), exports);
 _exportStar(require("./OptionsEditorLayout"), exports);
 _exportStar(require("./StatChart"), exports);
 _exportStar(require("./UnitSelector"), exports);
 _exportStar(require("./YAxisLabel"), exports);
 _exportStar(require("./context/ChartsThemeProvider"), exports);
+_exportStar(require("./context/TimeZoneProvider"), exports);
 _exportStar(require("./utils"), exports);
 _exportStar(require("./model"), exports);
 _exportStar(require("./test-utils"), exports);

package/dist/cjs/model/graph.js

@@ -14,8 +14,19 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "OPTIMIZED_MODE_SERIES_LIMIT", {
-    enumerable: true,
-    get: ()=>OPTIMIZED_MODE_SERIES_LIMIT
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    OPTIMIZED_MODE_SERIES_LIMIT: ()=>OPTIMIZED_MODE_SERIES_LIMIT,
+    DEFAULT_LEGEND_POSITION: ()=>DEFAULT_LEGEND_POSITION,
+    DEFAULT_LEGEND: ()=>DEFAULT_LEGEND
 });
 const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
+const DEFAULT_LEGEND_POSITION = 'bottom';
+const DEFAULT_LEGEND = {
+    position: DEFAULT_LEGEND_POSITION
+};

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

@@ -25,12 +25,14 @@ _export(exports, {
     BYTES_UNIT_CONFIG: ()=>BYTES_UNIT_CONFIG,
     formatBytes: ()=>formatBytes
 });
+const _constants = require("./constants");
 const bytesUnitKinds = [
     'Bytes'
 ];
 const BYTES_GROUP_CONFIG = {
     label: 'Bytes',
-    decimal_places: true
+    decimal_places: true,
+    abbreviate: true
 };
 const BYTES_UNIT_CONFIG = {
     Bytes: {
@@ -38,12 +40,35 @@ const BYTES_UNIT_CONFIG = {
         label: 'Bytes'
     }
 };
-function formatBytes(bytes, decimals = 2) {
-    if (bytes === 0) return '0 Bytes';
+function formatBytes(bytes, unitOptions) {
+    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
+    // 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;
+    }
+    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 k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
     const sizes = [
-        'Bytes',
+        'bytes',
         'KB',
         'MB',
         'GB',
@@ -56,5 +81,6 @@ function formatBytes(bytes, decimals = 2) {
     // 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)));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    const abbreviatedValue = bytes / Math.pow(k, i);
+    return `${formatter.format(abbreviatedValue)} ${sizes[i]}`;
 }