@perses-dev/components 0.53.1 → 0.54.0-beta.1

package/dist/cjs/model/time.js

@@ -0,0 +1,178 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get PersesTimeToIntlTime () {
+        return PersesTimeToIntlTime;
+    },
+    get TIME_GROUP_CONFIG () {
+        return TIME_GROUP_CONFIG;
+    },
+    get TIME_UNIT_CONFIG () {
+        return TIME_UNIT_CONFIG;
+    },
+    get formatTime () {
+        return formatTime;
+    }
+});
+const _constants = require("./constants");
+const _formatterCache = require("./formatterCache");
+const _utils = require("./utils");
+const TIME_GROUP = 'Time';
+const TIME_GROUP_CONFIG = {
+    label: 'Time',
+    decimalPlaces: true
+};
+const TIME_UNIT_CONFIG = {
+    nanoseconds: {
+        group: TIME_GROUP,
+        label: 'Nanoseconds'
+    },
+    microseconds: {
+        group: TIME_GROUP,
+        label: 'Microseconds'
+    },
+    milliseconds: {
+        group: TIME_GROUP,
+        label: 'Milliseconds'
+    },
+    seconds: {
+        group: TIME_GROUP,
+        label: 'Seconds'
+    },
+    minutes: {
+        group: TIME_GROUP,
+        label: 'Minutes'
+    },
+    hours: {
+        group: TIME_GROUP,
+        label: 'Hours'
+    },
+    days: {
+        group: TIME_GROUP,
+        label: 'Days'
+    },
+    weeks: {
+        group: TIME_GROUP,
+        label: 'Weeks'
+    },
+    months: {
+        group: TIME_GROUP,
+        label: 'Months'
+    },
+    years: {
+        group: TIME_GROUP,
+        label: 'Years'
+    }
+};
+var PersesTimeToIntlTime = /*#__PURE__*/ function(PersesTimeToIntlTime) {
+    PersesTimeToIntlTime["nanoseconds"] = "nanosecond";
+    PersesTimeToIntlTime["microseconds"] = "microsecond";
+    PersesTimeToIntlTime["milliseconds"] = "millisecond";
+    PersesTimeToIntlTime["seconds"] = "second";
+    PersesTimeToIntlTime["minutes"] = "minute";
+    PersesTimeToIntlTime["hours"] = "hour";
+    PersesTimeToIntlTime["days"] = "day";
+    PersesTimeToIntlTime["weeks"] = "week";
+    PersesTimeToIntlTime["months"] = "month";
+    PersesTimeToIntlTime["years"] = "year";
+    return PersesTimeToIntlTime;
+}({});
+/**
+ * Note: This conversion will not be exactly accurate for months and years,
+ * due variations in the lengths of months (i.e. 28 - 31 days) and years (i.e. leap years).
+ * For precision with months and years, we would need more complex algorithms and/or external libraries.
+ * However, we expect that measurements in months and years will be rare.
+ */ const TIME_UNITS_IN_SECONDS = {
+    years: 31536000,
+    months: 2592000,
+    weeks: 604800,
+    days: 86400,
+    hours: 3600,
+    minutes: 60,
+    seconds: 1,
+    milliseconds: 0.001,
+    microseconds: 0.000001,
+    nanoseconds: 0.000000001
+};
+const LARGEST_TO_SMALLEST_TIME_UNITS = [
+    'years',
+    'months',
+    'weeks',
+    'days',
+    'hours',
+    'minutes',
+    'seconds',
+    'milliseconds',
+    'microseconds',
+    'nanoseconds'
+];
+/**
+ * Choose the first time unit that produces a number greater than 1, starting from the biggest time unit.
+ */ function getValueAndKindForNaturalNumbers(value, unit) {
+    const valueInSeconds = value * TIME_UNITS_IN_SECONDS[unit];
+    // Initialize for TS
+    const largestTimeUnit = LARGEST_TO_SMALLEST_TIME_UNITS[0] || 'years';
+    let timeUnit = largestTimeUnit;
+    let valueInTimeUnit = valueInSeconds / TIME_UNITS_IN_SECONDS[largestTimeUnit];
+    for (timeUnit of LARGEST_TO_SMALLEST_TIME_UNITS){
+        valueInTimeUnit = valueInSeconds / TIME_UNITS_IN_SECONDS[timeUnit];
+        if (valueInTimeUnit >= 1) {
+            return {
+                value: valueInTimeUnit,
+                unit: timeUnit
+            };
+        }
+    }
+    // If we didn't find a time unit, we have to settle for the smallest time unit (which is the last time unit).
+    return {
+        value: valueInTimeUnit,
+        unit: timeUnit
+    };
+}
+function isMonthOrYear(unit) {
+    return unit === 'months' || unit === 'years';
+}
+function formatTime(value, { unit, decimalPlaces }) {
+    if (value === 0) return '0s';
+    const results = getValueAndKindForNaturalNumbers(value, unit ?? 'seconds');
+    const formatterOptions = {
+        style: 'unit',
+        unit: PersesTimeToIntlTime[results.unit],
+        unitDisplay: isMonthOrYear(results.unit) ? 'long' : 'narrow'
+    };
+    if ((0, _utils.hasDecimalPlaces)(decimalPlaces)) {
+        formatterOptions.minimumFractionDigits = (0, _utils.limitDecimalPlaces)(decimalPlaces);
+        formatterOptions.maximumFractionDigits = (0, _utils.limitDecimalPlaces)(decimalPlaces);
+    } else {
+        formatterOptions.maximumSignificantDigits = _constants.MAX_SIGNIFICANT_DIGITS;
+    }
+    const key = [
+        formatterOptions.style,
+        formatterOptions.unit,
+        formatterOptions.unitDisplay,
+        formatterOptions.maximumSignificantDigits,
+        decimalPlaces,
+        unit ?? 'seconds'
+    ];
+    return (0, _formatterCache.getFormatterFromCache)(key, 'time', formatterOptions, 'en-US')(results.value);
+}

package/dist/cjs/model/timeOption.js

@@ -20,14 +20,14 @@ Object.defineProperty(exports, "buildRelativeTimeOption", {
         return buildRelativeTimeOption;
     }
 });
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _datefns = require("date-fns");
 function buildRelativeTimeOption(duration) {
     return {
         value: {
             pastDuration: duration
         },
-        display: `Last ${(0, _datefns.formatDuration)((0, _core.parseDurationString)(duration), {
+        display: `Last ${(0, _datefns.formatDuration)((0, _spec.parseDurationString)(duration), {
             delimiter: ', '
         })}`
     };

package/dist/cjs/model/transforms.js

@@ -0,0 +1,29 @@
+// Copyright 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
+});
+Object.defineProperty(exports, "TRANSFORM_TEXT", {
+    enumerable: true,
+    get: function() {
+        return TRANSFORM_TEXT;
+    }
+});
+const TRANSFORM_TEXT = {
+    JoinByColumnValue: 'Join by column value',
+    MergeColumns: 'Merge columns',
+    MergeIndexedColumns: 'Merge indexed columns',
+    MergeSeries: 'Merge series',
+    ExtractColumnFields: 'Extract column fields'
+};

package/dist/cjs/model/types.js

@@ -0,0 +1,16 @@
+// Copyright 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
+});

package/dist/cjs/model/units.js

@@ -0,0 +1,186 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get UNIT_CONFIG () {
+        return UNIT_CONFIG;
+    },
+    get UNIT_GROUP_CONFIG () {
+        return UNIT_GROUP_CONFIG;
+    },
+    get formatValue () {
+        return formatValue;
+    },
+    get getUnitConfig () {
+        return getUnitConfig;
+    },
+    get getUnitGroup () {
+        return getUnitGroup;
+    },
+    get getUnitGroupConfig () {
+        return getUnitGroupConfig;
+    },
+    get isBitsUnit () {
+        return isBitsUnit;
+    },
+    get isBytesUnit () {
+        return isBytesUnit;
+    },
+    get isCurrencyUnit () {
+        return isCurrencyUnit;
+    },
+    get isDateUnit () {
+        return isDateUnit;
+    },
+    get isDecimalUnit () {
+        return isDecimalUnit;
+    },
+    get isPercentUnit () {
+        return isPercentUnit;
+    },
+    get isTemperatureUnit () {
+        return isTemperatureUnit;
+    },
+    get isThroughputUnit () {
+        return isThroughputUnit;
+    },
+    get isTimeUnit () {
+        return isTimeUnit;
+    },
+    get isUnitWithDecimalPlaces () {
+        return isUnitWithDecimalPlaces;
+    },
+    get isUnitWithShortValues () {
+        return isUnitWithShortValues;
+    }
+});
+const _bytes = require("./bytes");
+const _bits = require("./bits");
+const _decimal = require("./decimal");
+const _percent = require("./percent");
+const _temperature = require("./temperature");
+const _time = require("./time");
+const _throughput = require("./throughput");
+const _currency = require("./currency");
+const _date = require("./date");
+const UNIT_GROUP_CONFIG = {
+    Time: _time.TIME_GROUP_CONFIG,
+    Percent: _percent.PERCENT_GROUP_CONFIG,
+    Decimal: _decimal.DECIMAL_GROUP_CONFIG,
+    Bytes: _bytes.BYTES_GROUP_CONFIG,
+    Bits: _bits.BITS_GROUP_CONFIG,
+    Throughput: _throughput.THROUGHPUT_GROUP_CONFIG,
+    Currency: _currency.CURRENCY_GROUP_CONFIG,
+    Temperature: _temperature.TEMPERATURE_GROUP_CONFIG,
+    Date: _date.DATE_GROUP_CONFIG
+};
+const UNIT_CONFIG = {
+    ..._time.TIME_UNIT_CONFIG,
+    ..._percent.PERCENT_UNIT_CONFIG,
+    ..._decimal.DECIMAL_UNIT_CONFIG,
+    ..._bytes.BYTES_UNIT_CONFIG,
+    ..._bits.BITS_UNIT_CONFIG,
+    ..._throughput.THROUGHPUT_UNIT_CONFIG,
+    ..._currency.CURRENCY_UNIT_CONFIG,
+    ..._temperature.TEMPERATURE_UNIT_CONFIG,
+    ..._date.DATE_UNIT_CONFIG
+};
+function formatValue(value, formatOptions) {
+    if (!formatOptions) {
+        return value.toString();
+    }
+    if (isBytesUnit(formatOptions)) {
+        return (0, _bytes.formatBytes)(value, formatOptions);
+    }
+    if (isBitsUnit(formatOptions)) {
+        return (0, _bits.formatBits)(value, formatOptions);
+    }
+    if (isDecimalUnit(formatOptions)) {
+        return (0, _decimal.formatDecimal)(value, formatOptions);
+    }
+    if (isPercentUnit(formatOptions)) {
+        return (0, _percent.formatPercent)(value, formatOptions);
+    }
+    if (isTimeUnit(formatOptions)) {
+        return (0, _time.formatTime)(value, formatOptions);
+    }
+    if (isThroughputUnit(formatOptions)) {
+        return (0, _throughput.formatThroughput)(value, formatOptions);
+    }
+    if (isCurrencyUnit(formatOptions)) {
+        return (0, _currency.formatCurrency)(value, formatOptions);
+    }
+    if (isDateUnit(formatOptions)) {
+        return (0, _date.formatDate)(value, formatOptions);
+    }
+    if (isTemperatureUnit(formatOptions)) {
+        return (0, _temperature.formatTemperature)(value, formatOptions);
+    }
+    const exhaustive = formatOptions;
+    throw new Error(`Unknown unit options ${exhaustive}`);
+}
+function getUnitConfig(formatOptions) {
+    const unit = formatOptions.unit ?? 'decimal';
+    return UNIT_CONFIG[unit];
+}
+function getUnitGroup(formatOptions) {
+    return getUnitConfig(formatOptions).group ?? 'Decimal';
+}
+function getUnitGroupConfig(formatOptions) {
+    const unitConfig = getUnitConfig(formatOptions);
+    return UNIT_GROUP_CONFIG[unitConfig.group ?? 'Decimal'];
+}
+function isTimeUnit(formatOptions) {
+    return getUnitGroup(formatOptions) === 'Time';
+}
+function isPercentUnit(formatOptions) {
+    return getUnitGroup(formatOptions) === 'Percent';
+}
+function isDecimalUnit(formatOptions) {
+    return getUnitGroup(formatOptions) === 'Decimal';
+}
+function isBytesUnit(formatOptions) {
+    return getUnitGroup(formatOptions) === 'Bytes';
+}
+function isBitsUnit(formatOptions) {
+    return getUnitGroup(formatOptions) === 'Bits';
+}
+function isUnitWithDecimalPlaces(formatOptions) {
+    const groupConfig = getUnitGroupConfig(formatOptions);
+    return !!groupConfig.decimalPlaces;
+}
+function isUnitWithShortValues(formatOptions) {
+    const groupConfig = getUnitGroupConfig(formatOptions);
+    return !!groupConfig.shortValues;
+}
+function isThroughputUnit(formatOptions) {
+    return getUnitGroup(formatOptions) === 'Throughput';
+}
+function isCurrencyUnit(formatOptions) {
+    return getUnitGroup(formatOptions) === 'Currency';
+}
+function isDateUnit(formatOptions) {
+    return getUnitGroup(formatOptions) === 'Date';
+}
+function isTemperatureUnit(formatOptions) {
+    return getUnitGroup(formatOptions) === 'Temperature';
+}

package/dist/cjs/model/utils.js

@@ -0,0 +1,48 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get hasDecimalPlaces () {
+        return hasDecimalPlaces;
+    },
+    get limitDecimalPlaces () {
+        return limitDecimalPlaces;
+    },
+    get shouldShortenValues () {
+        return shouldShortenValues;
+    }
+});
+function shouldShortenValues(shortValues) {
+    return shortValues !== false;
+}
+function hasDecimalPlaces(decimalPlaces) {
+    return typeof decimalPlaces === 'number';
+}
+function limitDecimalPlaces(num) {
+    if (!num) return num;
+    if (num < 0) {
+        num = 0;
+    } else if (num > 20) {
+        num = 20;
+    }
+    return num;
+}

package/dist/cjs/theme/theme.js

@@ -34,42 +34,57 @@ const getModalBackgroundStyle = ({ theme })=>{
         ...backgroundStyle
     };
 };
-function getTheme(mode, options = {}) {
+function getTheme(mode, options = {}, disableBodyOverride = false) {
     return (0, _material.createTheme)({
         palette: (0, _palette.getPaletteOptions)(mode),
         typography: _typography.typography,
         mixins: {},
-        components,
+        components: getComponents(mode, disableBodyOverride),
         ...options
     });
 }
 // Overrides for component default prop values and styles go here
-const components = {
-    MuiAlert: _alert.MuiAlert,
-    MuiFormControl: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiPaper: _paper.MuiPaper,
-    MuiTextField: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiDrawer: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiDialog: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiPopover: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
+function getComponents(mode, disableBodyOverride) {
+    const components = {
+        MuiAlert: _alert.MuiAlert,
+        MuiFormControl: {
+            defaultProps: {
+                size: 'small'
+            }
+        },
+        MuiPaper: _paper.MuiPaper,
+        MuiTextField: {
+            defaultProps: {
+                size: 'small'
+            }
+        },
+        MuiDrawer: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
+        },
+        MuiPopover: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
         }
+    };
+    if (disableBodyOverride) {
+        return components;
     }
-};
+    return {
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    colorScheme: mode
+                }
+            }
+        },
+        ...components
+    };
+}

package/dist/cjs/theme/typography.js

@@ -20,18 +20,19 @@ Object.defineProperty(exports, "typography", {
         return typography;
     }
 });
-require("@fontsource/lato/300.css");
-require("@fontsource/lato/400.css");
-require("@fontsource/lato/700.css");
-require("@fontsource/lato/900.css");
+require("@fontsource/inter/300.css");
+require("@fontsource/inter/400.css");
+require("@fontsource/inter/500.css");
+require("@fontsource/inter/600.css");
+require("@fontsource/inter/700.css");
+require("@fontsource/inter/900.css");
 // Font weights need to correspond with the imports at the top of the file
-// (Lato supports 100, 300, 400, 700, 900)
 const fontWeightLight = 300;
 const fontWeightRegular = 400;
-const fontWeightMedium = 700;
+const fontWeightMedium = 600;
 const fontWeightBold = 900;
 const typography = {
-    fontFamily: '"Lato", sans-serif',
+    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,

package/dist/cjs/utils/axis.js

@@ -29,7 +29,7 @@ _export(exports, {
     }
 });
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
-const _core = require("@perses-dev/core");
+const _model = require("../model");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -41,7 +41,7 @@ const AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping
 /**
  * Estimate the pixel width needed for an axis label using Canvas API.
  */ function estimateLabelWidth(format, maxValue) {
-    const formattedLabel = (0, _core.formatValue)(maxValue, format);
+    const formattedLabel = (0, _model.formatValue)(maxValue, format);
     // Create a canvas element (reuse if possible for performance)
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
@@ -62,7 +62,7 @@ function getFormattedAxis(axis, unit) {
         ],
         axisLabel: {
             formatter: (value)=>{
-                return (0, _core.formatValue)(value, unit);
+                return (0, _model.formatValue)(value, unit);
             }
         }
     };
@@ -82,7 +82,7 @@ function getFormattedMultipleYAxes(baseAxis, baseFormat, additionalFormats, maxV
         ],
         axisLabel: {
             formatter: (value)=>{
-                return (0, _core.formatValue)(value, baseFormat);
+                return (0, _model.formatValue)(value, baseFormat);
             },
             // Let ECharts handle width automatically
             overflow: 'truncate'
@@ -104,7 +104,7 @@ function getFormattedMultipleYAxes(baseAxis, baseFormat, additionalFormats, maxV
             ],
             axisLabel: {
                 formatter: (value)=>{
-                    return (0, _core.formatValue)(value, format);
+                    return (0, _model.formatValue)(value, format);
                 }
             },
             splitLine: {

package/dist/cjs/utils/index.js

@@ -22,6 +22,7 @@ _export_star(require("./component-ids"), exports);
 _export_star(require("./data-field-interpolation"), exports);
 _export_star(require("./format"), exports);
 _export_star(require("./memo"), exports);
+_export_star(require("./request-interpolation"), exports);
 _export_star(require("./selection-interpolation"), exports);
 _export_star(require("./theme-gen"), exports);
 _export_star(require("./variable-interpolation"), exports);