@perses-dev/components 0.20.0 → 0.21.1

package/dist/cjs/LineChart/LineChart.js

@@ -26,8 +26,10 @@ 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, _core.use)([
     _charts.LineChart,
@@ -40,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)=>{
@@ -83,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
@@ -95,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 { 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 = {
@@ -124,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
                 }
             },
@@ -148,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

@@ -72,14 +72,21 @@ describe('StatChart', ()=>{
         renderChart(unit);
         expect(_react.screen.getByText('7.73')).toBeInTheDocument();
     });
-    it('show value with time unit formatting', ()=>{
+    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 time unit formatting', ()=>{
+    it('show value with months time unit formatting', ()=>{
         const unit = {
             kind: 'Months'
         };

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);
@@ -191,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]}`;
 }

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

@@ -91,7 +91,7 @@ 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 timeUnit = TimeIntlDuration[unitOptions.kind];
-    const formatter = new Intl.NumberFormat('en', {
+    const formatter = new Intl.NumberFormat('en-US', {
         style: 'unit',
         unit: timeUnit,
         unitDisplay: 'long',

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

@@ -35,7 +35,6 @@ _export(exports, {
     isUnitWithAbbreviate: ()=>isUnitWithAbbreviate
 });
 const _bytes = require("./bytes");
-const _constants = require("./constants");
 const _decimal = require("./decimal");
 const _percent = require("./percent");
 const _time = require("./time");
@@ -65,9 +64,7 @@ function formatValue(value, unitOptions) {
         return (0, _percent.formatPercent)(value, unitOptions);
     }
     if (isBytesUnit(unitOptions)) {
-        var _decimal_places;
-        const decimals = (_decimal_places = unitOptions.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _constants.DEFAULT_DECIMAL_PLACES;
-        return (0, _bytes.formatBytes)(value, decimals);
+        return (0, _bytes.formatBytes)(value, unitOptions);
     }
     const exhaustive = unitOptions;
     throw new Error(`Unknown unit options ${exhaustive}`);

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

@@ -0,0 +1,153 @@
+// 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 _units = require("./units");
+describe('formatValue()', ()=>{
+    const tests = [
+        {
+            value: 100000,
+            unit: {
+                kind: 'Decimal'
+            },
+            expected: '100,000.00'
+        },
+        {
+            value: 155900,
+            unit: {
+                kind: 'Decimal',
+                decimal_places: 4
+            },
+            expected: '155,900.0000'
+        },
+        {
+            value: 10,
+            unit: {
+                kind: 'Percent'
+            },
+            expected: '10.00%'
+        },
+        {
+            value: 50,
+            unit: {
+                kind: 'Percent',
+                decimal_places: 0
+            },
+            expected: '50%'
+        },
+        {
+            value: 0.1,
+            unit: {
+                kind: 'PercentDecimal'
+            },
+            expected: '10.00%'
+        },
+        {
+            value: 100,
+            unit: {
+                kind: 'Bytes',
+                decimal_places: 0,
+                abbreviate: false
+            },
+            expected: '100 bytes'
+        },
+        {
+            value: 100,
+            unit: {
+                kind: 'Bytes',
+                decimal_places: -1,
+                abbreviate: false
+            },
+            expected: '100 bytes'
+        },
+        {
+            value: 225000,
+            unit: {
+                kind: 'Bytes',
+                decimal_places: 0,
+                abbreviate: true
+            },
+            expected: '220 KB'
+        },
+        {
+            value: 505200,
+            unit: {
+                kind: 'Bytes'
+            },
+            expected: '505,200.00 bytes'
+        },
+        {
+            value: 8000,
+            unit: {
+                kind: 'Milliseconds'
+            },
+            expected: '8,000.00 milliseconds'
+        },
+        {
+            value: 200900,
+            unit: {
+                kind: 'Seconds'
+            },
+            expected: '200,900.00 seconds'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Minutes'
+            },
+            expected: '300.00 minutes'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Hours'
+            },
+            expected: '300.00 hours'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Days'
+            },
+            expected: '300.00 days'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Weeks'
+            },
+            expected: '300.00 weeks'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Months'
+            },
+            expected: '300.00 months'
+        },
+        {
+            value: 300,
+            unit: {
+                kind: 'Years'
+            },
+            expected: '300.00 years'
+        }
+    ];
+    tests.forEach(({ value , unit , expected  })=>{
+        it(`formats ${value} as ${JSON.stringify(unit)}`, ()=>{
+            expect((0, _units.formatValue)(value, unit)).toEqual(expected);
+        });
+    });
+});