@perses-dev/components 0.19.0 → 0.21.0

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

@@ -21,11 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    TimeIntlDuration: ()=>TimeIntlDuration,
     TIME_GROUP_CONFIG: ()=>TIME_GROUP_CONFIG,
     TIME_UNIT_CONFIG: ()=>TIME_UNIT_CONFIG,
     formatTime: ()=>formatTime
 });
-const _dateFns = require("date-fns");
+const _constants = require("./constants");
 const timeUnitKinds = [
     'Milliseconds',
     'Seconds',
@@ -38,7 +39,8 @@ const timeUnitKinds = [
 ];
 const TIME_GROUP = 'Time';
 const TIME_GROUP_CONFIG = {
-    label: 'Time'
+    label: 'Time',
+    decimal_places: true
 };
 const TIME_UNIT_CONFIG = {
     Milliseconds: {
@@ -74,65 +76,27 @@ const TIME_UNIT_CONFIG = {
         label: 'Years'
     }
 };
+var TimeIntlDuration;
+(function(TimeIntlDuration) {
+    TimeIntlDuration["Milliseconds"] = 'millisecond';
+    TimeIntlDuration["Seconds"] = 'second';
+    TimeIntlDuration["Minutes"] = 'minute';
+    TimeIntlDuration["Hours"] = 'hour';
+    TimeIntlDuration["Days"] = 'day';
+    TimeIntlDuration["Weeks"] = 'week';
+    TimeIntlDuration["Months"] = 'month';
+    TimeIntlDuration["Years"] = 'year';
+})(TimeIntlDuration || (TimeIntlDuration = {}));
 function formatTime(value, unitOptions) {
-    // Create a Duration from the value based on what time unit it is
-    const duration = {};
-    switch(unitOptions.kind){
-        case 'Milliseconds':
-            duration.seconds = value / 1000;
-            break;
-        case 'Seconds':
-            duration.seconds = value;
-            break;
-        case 'Minutes':
-            duration.minutes = value;
-            break;
-        case 'Hours':
-            duration.hours = value;
-            break;
-        case 'Days':
-            duration.days = value;
-            break;
-        case 'Weeks':
-            duration.weeks = value;
-            break;
-        case 'Months':
-            duration.months = value;
-            break;
-        case 'Years':
-            duration.years = value;
-            break;
-        default:
-            {
-                const exhaustive = unitOptions.kind;
-                throw new Error(`Unknown time unit type ${exhaustive}`);
-            }
-    }
-    // Find the largest whole time unit we can display the value in and use it
-    const ms = (0, _dateFns.milliseconds)(duration);
-    const seconds = ms / 1000;
-    if (seconds < 1) {
-        return `${ms.toFixed()} milliseconds`;
-    }
-    const minutes = seconds / 60;
-    if (minutes < 1) {
-        return `${seconds.toFixed()} seconds`;
-    }
-    const hours = minutes / 60;
-    if (hours < 1) {
-        return `${minutes.toFixed()} minutes`;
-    }
-    const days = hours / 24;
-    if (days < 1) {
-        return `${hours.toFixed()} hours`;
-    }
-    const weeks = days / 7;
-    if (weeks < 1) {
-        return `${days.toFixed()} days`;
-    }
-    const years = weeks / 52;
-    if (years < 1) {
-        return `${weeks.toFixed()} weeks`;
-    }
-    return `${years.toFixed()} years`;
+    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-US', {
+        style: 'unit',
+        unit: timeUnit,
+        unitDisplay: 'long',
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+    });
+    return formatter.format(value);
 }

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);
+        });
+    });
+});

package/dist/cjs/theme/theme.js

@@ -21,6 +21,15 @@ Object.defineProperty(exports, "getTheme", {
 const _material = require("@mui/material");
 const _paletteOptions = require("./palette/palette-options");
 const _typography = require("./typography");
+const getModalBackgroundStyle = ({ theme  })=>{
+    const backgroundStyle = theme.palette.mode === 'light' ? {} : {
+        backgroundImage: 'unset',
+        backgroundColor: theme.palette.designSystem.grey[800]
+    };
+    return {
+        ...backgroundStyle
+    };
+};
 function getTheme(mode) {
     const theme = (0, _material.createTheme)({
         palette: (0, _paletteOptions.getPaletteOptions)(mode),
@@ -41,5 +50,15 @@ const components = {
         defaultProps: {
             size: 'small'
         }
+    },
+    MuiDrawer: {
+        styleOverrides: {
+            paper: getModalBackgroundStyle
+        }
+    },
+    MuiDialog: {
+        styleOverrides: {
+            paper: getModalBackgroundStyle
+        }
     }
 };

package/dist/cjs/utils/format.js

@@ -0,0 +1,56 @@
+// 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, {
+    dateFormatOptionsWithTimeZone: ()=>dateFormatOptionsWithTimeZone,
+    formatWithTimeZone: ()=>formatWithTimeZone
+});
+const _dateFnsTz = require("date-fns-tz");
+const _dateFns = require("date-fns");
+function dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone) {
+    /*
+   * if timeZone is provided, and is not local|browser,
+   * then set timeZone option (recognize UTC regardless of uppercase/lowercase)
+   * otherwise, default to browser timeZone setting
+   */ if (timeZone) {
+        const lowerTimeZone = timeZone.toLowerCase();
+        if (lowerTimeZone !== 'local' && lowerTimeZone !== 'browser') {
+            return {
+                ...dateFormatOptions,
+                timeZone: lowerTimeZone === 'utc' ? 'UTC' : timeZone
+            };
+        }
+    }
+    return dateFormatOptions;
+}
+function formatWithTimeZone(date, formatString, timeZone) {
+    /*
+   * if timeZone is provided, and is not local|browser,
+   * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)
+   * otherwise, format without timeZone option, defaulting to browser timeZone setting
+   */ const lowerTimeZone = timeZone === null || timeZone === void 0 ? void 0 : timeZone.toLowerCase();
+    if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
+        return (0, _dateFns.format)(date, formatString);
+    } else {
+        return (0, _dateFnsTz.formatInTimeZone)(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
+    }
+}

package/dist/cjs/utils/format.test.js

@@ -0,0 +1,47 @@
+// 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 _format = require("./format");
+const DATE = new Date(168523200000);
+const DATE_FORMAT_OPTIONS = {
+    hour: 'numeric',
+    minute: 'numeric',
+    hourCycle: 'h23'
+};
+describe('formatWithTimeZone', ()=>{
+    it('should format in Los Angeles timezone', ()=>{
+        expect((0, _format.formatWithTimeZone)(DATE, 'yyyy-MM-dd HH:mm:ss', 'America/Los_Angeles')).toBe('1975-05-05 05:00:00');
+    });
+    it('should format in UTC timezone', ()=>{
+        expect((0, _format.formatWithTimeZone)(DATE, 'yyyy-MM-dd HH:mm:ss', 'UTC')).toBe('1975-05-05 12:00:00');
+        expect((0, _format.formatWithTimeZone)(DATE, 'yyyy-MM-dd HH:mm:ss', 'utc')).toBe('1975-05-05 12:00:00');
+    });
+});
+describe('dateFormatOptionsWithTimeZone', ()=>{
+    it('should format in Los Angeles timezone', ()=>{
+        const dateFormatOptions = (0, _format.dateFormatOptionsWithTimeZone)(DATE_FORMAT_OPTIONS, 'America/Los_Angeles');
+        expect(new Intl.DateTimeFormat(undefined, dateFormatOptions).format(DATE)).toBe('05:00');
+    });
+    it('should format in UTC timezone', ()=>{
+        const dateFormatOptions = (0, _format.dateFormatOptionsWithTimeZone)(DATE_FORMAT_OPTIONS, 'utc');
+        expect(new Intl.DateTimeFormat(undefined, dateFormatOptions).format(DATE)).toBe('12:00');
+    });
+    it('should use browser local timezone', ()=>{
+        expect((0, _format.dateFormatOptionsWithTimeZone)(DATE_FORMAT_OPTIONS, 'browser').timeZone).toBeUndefined();
+        expect((0, _format.dateFormatOptionsWithTimeZone)(DATE_FORMAT_OPTIONS, 'local').timeZone).toBeUndefined();
+        expect((0, _format.dateFormatOptionsWithTimeZone)(DATE_FORMAT_OPTIONS).timeZone).toBeUndefined();
+    });
+});

package/dist/cjs/utils/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _exportStar(require("./combine-sx"), exports);
 _exportStar(require("./theme-gen"), exports);
 _exportStar(require("./component-ids"), exports);
+_exportStar(require("./format"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/context/TimeZoneProvider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const TimeZoneContext: React.Context<string | undefined>;
+export interface TimeZoneProviderProps {
+    timeZone?: string;
+    children?: React.ReactNode;
+}
+export declare function TimeZoneProvider(props: TimeZoneProviderProps): JSX.Element;
+export declare function useTimeZone(): {
+    timeZone: string;
+    formatWithUserTimeZone(date: Date, formatString: string): string;
+    dateFormatOptionsWithUserTimeZone(dateFormatOptions: Intl.DateTimeFormatOptions): Intl.DateTimeFormatOptions;
+};
+//# sourceMappingURL=TimeZoneProvider.d.ts.map

package/dist/context/TimeZoneProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeZoneProvider.d.ts","sourceRoot":"","sources":["../../src/context/TimeZoneProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,eAAO,MAAM,eAAe,mCAA+C,CAAC;AAE5E,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAG5D;AAED,wBAAgB,WAAW;;iCAKM,IAAI,gBAAgB,MAAM;yDAGF,KAAK,qBAAqB;EAIlF"}

package/dist/context/TimeZoneProvider.js

@@ -0,0 +1,38 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext } from 'react';
+import { formatWithTimeZone, dateFormatOptionsWithTimeZone } from '../utils';
+export const TimeZoneContext = /*#__PURE__*/ createContext(undefined);
+export function TimeZoneProvider(props) {
+    const { children , timeZone  } = props;
+    return /*#__PURE__*/ _jsx(TimeZoneContext.Provider, {
+        value: timeZone,
+        children: children
+    });
+}
+export function useTimeZone() {
+    const timeZone = 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 formatWithTimeZone(date, formatString, timeZone);
+        },
+        dateFormatOptionsWithUserTimeZone (dateFormatOptions) {
+            return dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone);
+        }
+    };
+}
+
+//# sourceMappingURL=TimeZoneProvider.js.map

package/dist/context/TimeZoneProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/TimeZoneProvider.tsx"],"sourcesContent":["// Copyright 2022 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 React, { createContext, useContext } from 'react';\nimport { formatWithTimeZone, dateFormatOptionsWithTimeZone } from '../utils';\n\nexport const TimeZoneContext = createContext<string | undefined>(undefined);\n\nexport interface TimeZoneProviderProps {\n  timeZone?: string;\n  children?: React.ReactNode;\n}\n\nexport function TimeZoneProvider(props: TimeZoneProviderProps) {\n  const { children, timeZone } = props;\n  return <TimeZoneContext.Provider value={timeZone}>{children}</TimeZoneContext.Provider>;\n}\n\nexport function useTimeZone() {\n  const timeZone = useContext(TimeZoneContext);\n  return {\n    // fallback to \"local\" timezone if TimeZoneProvider is not present in the React tree\n    timeZone: timeZone ?? 'local',\n    formatWithUserTimeZone(date: Date, formatString: string) {\n      return formatWithTimeZone(date, formatString, timeZone);\n    },\n    dateFormatOptionsWithUserTimeZone(dateFormatOptions: Intl.DateTimeFormatOptions) {\n      return dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone);\n    },\n  };\n}\n"],"names":["React","createContext","useContext","formatWithTimeZone","dateFormatOptionsWithTimeZone","TimeZoneContext","undefined","TimeZoneProvider","props","children","timeZone","Provider","value","useTimeZone","formatWithUserTimeZone","date","formatString","dateFormatOptionsWithUserTimeZone","dateFormatOptions"],"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;AAEjC;AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAQ,OAAO,CAAC;AACzD,SAASC,kBAAkB,EAAEC,6BAA6B,QAAQ,UAAU,CAAC;AAE7E,OAAO,MAAMC,eAAe,iBAAGJ,aAAa,CAAqBK,SAAS,CAAC,CAAC;AAO5E,OAAO,SAASC,gBAAgB,CAACC,KAA4B,EAAE;IAC7D,MAAM,EAAEC,QAAQ,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGF,KAAK,AAAC;IACrC,qBAAO,KAACH,eAAe,CAACM,QAAQ;QAACC,KAAK,EAAEF,QAAQ;kBAAGD,QAAQ;MAA4B,CAAC;AAC1F,CAAC;AAED,OAAO,SAASI,WAAW,GAAG;IAC5B,MAAMH,QAAQ,GAAGR,UAAU,CAACG,eAAe,CAAC,AAAC;IAC7C,OAAO;QACL,oFAAoF;QACpFK,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,OAAO;QAC7BI,sBAAsB,EAACC,IAAU,EAAEC,YAAoB,EAAE;YACvD,OAAOb,kBAAkB,CAACY,IAAI,EAAEC,YAAY,EAAEN,QAAQ,CAAC,CAAC;QAC1D,CAAC;QACDO,iCAAiC,EAACC,iBAA6C,EAAE;YAC/E,OAAOd,6BAA6B,CAACc,iBAAiB,EAAER,QAAQ,CAAC,CAAC;QACpE,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -7,12 +7,14 @@ export * from './GaugeChart';
 export * from './InfoTooltip';
 export * from './JSONEditor';
 export * from './Legend';
+export * from './LegendOptionsEditor';
 export * from './LineChart';
 export * from './OptionsEditorLayout';
 export * from './StatChart';
 export * from './UnitSelector';
 export * from './YAxisLabel';
 export * from './context/ChartsThemeProvider';
+export * from './context/TimeZoneProvider';
 export * from './utils';
 export * from './model';
 export * from './test-utils';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -19,12 +19,14 @@ export * from './GaugeChart';
 export * from './InfoTooltip';
 export * from './JSONEditor';
 export * from './Legend';
+export * from './LegendOptionsEditor';
 export * from './LineChart';
 export * from './OptionsEditorLayout';
 export * from './StatChart';
 export * from './UnitSelector';
 export * from './YAxisLabel';
 export * from './context/ChartsThemeProvider';
+export * from './context/TimeZoneProvider';
 export * from './utils';
 export * from './model';
 export * from './test-utils';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2022 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\nexport * from './DateTimeRangePicker';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\n"],"names":[],"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;AAEjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2022 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\nexport * from './DateTimeRangePicker';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LegendOptionsEditor';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\n"],"names":[],"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;AAEjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/model/graph.d.ts

@@ -9,7 +9,7 @@ export interface GraphSeries {
 }
 export declare type EChartsValues = number | null | '-';
 export interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {
-    data: Iterable<GraphSeriesValueTuple> | EChartsValues[];
+    data: EChartsValues[];
 }
 export declare type EChartsDataFormat = {
     timeSeries: EChartsTimeSeries[];
@@ -22,7 +22,7 @@ export declare type EChartsDataFormat = {
  * Supported legend options
  */
 export interface LegendOptions {
-    position?: 'bottom' | 'right';
+    position: 'bottom' | 'right';
 }
 export interface LegendItem {
     id: string;
@@ -31,4 +31,6 @@ export interface LegendItem {
     color: string;
     onClick: MouseEventHandler<HTMLLIElement>;
 }
+export declare const DEFAULT_LEGEND_POSITION = "bottom";
+export declare const DEFAULT_LEGEND: LegendOptions;
 //# sourceMappingURL=graph.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC/B;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"}
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B;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,eAAO,MAAM,uBAAuB,WAAW,CAAC;AAEhD,eAAO,MAAM,cAAc,EAAE,aAE5B,CAAC"}

package/dist/model/graph.js

@@ -12,5 +12,9 @@
 // limitations under the License.
 // adjust display when there are many time series to help with performance
 export const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
+export const DEFAULT_LEGEND_POSITION = 'bottom';
+export const DEFAULT_LEGEND = {
+    position: DEFAULT_LEGEND_POSITION
+};
 
 //# sourceMappingURL=graph.js.map

package/dist/model/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2022 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';\nimport { LineSeriesOption } from 'echarts/charts';\n\n// adjust display when there are many time series to help with performance\nexport const OPTIMIZED_MODE_SERIES_LIMIT = 1000;\n\nexport type UnixTimeMs = number;\n\nexport type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];\n\nexport interface GraphSeries {\n  name: string;\n  values: Iterable<GraphSeriesValueTuple>;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  // TODO: support dataset and both category / time xAxis types\n  data: Iterable<GraphSeriesValueTuple> | EChartsValues[];\n}\n\nexport type EChartsDataFormat = {\n  timeSeries: EChartsTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n/**\n * Supported legend options\n */\nexport interface LegendOptions {\n  position?: 'bottom' | 'right';\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  color: string;\n  onClick: MouseEventHandler<HTMLLIElement>;\n}\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT"],"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;AAKjC,0EAA0E;AAC1E,OAAO,MAAMA,2BAA2B,GAAG,IAAI,CAAC"}
+{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2022 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';\nimport { LineSeriesOption } from 'echarts/charts';\n\n// adjust display when there are many time series to help with performance\nexport const OPTIMIZED_MODE_SERIES_LIMIT = 1000;\n\nexport type UnixTimeMs = number;\n\nexport type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];\n\nexport interface GraphSeries {\n  name: string;\n  values: Iterable<GraphSeriesValueTuple>;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  // TODO: support dataset and both category / time xAxis types\n  data: EChartsValues[];\n}\n\nexport type EChartsDataFormat = {\n  timeSeries: EChartsTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n/**\n * Supported legend options\n */\nexport interface LegendOptions {\n  position: 'bottom' | 'right';\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  isSelected: boolean;\n  color: string;\n  onClick: MouseEventHandler<HTMLLIElement>;\n}\n\nexport const DEFAULT_LEGEND_POSITION = 'bottom';\n\nexport const DEFAULT_LEGEND: LegendOptions = {\n  position: DEFAULT_LEGEND_POSITION,\n};\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT","DEFAULT_LEGEND_POSITION","DEFAULT_LEGEND","position"],"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;AAKjC,0EAA0E;AAC1E,OAAO,MAAMA,2BAA2B,GAAG,IAAI,CAAC;AAyChD,OAAO,MAAMC,uBAAuB,GAAG,QAAQ,CAAC;AAEhD,OAAO,MAAMC,cAAc,GAAkB;IAC3CC,QAAQ,EAAEF,uBAAuB;CAClC,CAAC"}

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

@@ -4,9 +4,14 @@ declare type BytesUnitKind = typeof bytesUnitKinds[number];
 export declare type BytesUnitOptions = {
     kind: BytesUnitKind;
     decimal_places?: number;
+    abbreviate?: boolean;
 };
 export declare const BYTES_GROUP_CONFIG: UnitGroupConfig;
 export declare const BYTES_UNIT_CONFIG: Readonly<Record<BytesUnitKind, UnitConfig>>;
-export declare function formatBytes(bytes: number, decimals?: number): string;
+/**
+ * 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 {};
 //# 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":"AAaA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD,QAAA,MAAM,cAAc,oBAAqB,CAAC;AAC1C,aAAK,aAAa,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AACnD,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,aAAa,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AACF,eAAO,MAAM,kBAAkB,EAAE,eAGhC,CAAC;AACF,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAKzE,CAAC;AAGF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,UAYtD"}
+{"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,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AACnD,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"}