@perses-dev/components 0.53.0 → 0.54.0-beta.0

package/dist/cjs/TimeRangeSelector/utils.js

@@ -38,7 +38,7 @@ _export(exports, {
     }
 });
 const _datefns = require("date-fns");
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _utils = require("../utils");
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 function buildCustomTimeOption(value, timeZone) {
@@ -68,5 +68,5 @@ function formatTimeRange(value, timeZone) {
     if (!value) {
         return 'Custom Time Range';
     }
-    return !(0, _core.isRelativeTimeRange)(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
+    return !(0, _spec.isRelativeTimeRange)(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
 }

package/dist/cjs/TimeZoneSelector.js

@@ -1,4 +1,4 @@
-// Copyright 2026 The Perses Authors
+// 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

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/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/format.js

@@ -34,7 +34,7 @@ _export(exports, {
         return getFormattedAxisLabel;
     }
 });
-const _datefnstz = require("date-fns-tz");
+const _tz = require("@date-fns/tz");
 const _datefns = require("date-fns");
 function dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone) {
     /*
@@ -61,7 +61,9 @@ function formatWithTimeZone(date, formatString, timeZone) {
     if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
         return (0, _datefns.format)(date, formatString);
     } else {
-        return (0, _datefnstz.formatInTimeZone)(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
+        return (0, _datefns.format)(date, formatString, {
+            in: (0, _tz.tz)(lowerTimeZone === 'utc' ? 'UTC' : timeZone)
+        });
     }
 }
 function getFormattedAxisLabel(rangeMs) {

package/dist/model/graph.d.ts

@@ -1,4 +1,4 @@
-import { TimeSeriesValueTuple } from '@perses-dev/core';
+import { TimeSeriesValueTuple } from '@perses-dev/spec';
 import { LineSeriesOption, BarSeriesOption } from 'echarts/charts';
 import { LegendItem } from '../Legend';
 export declare const OPTIMIZED_MODE_SERIES_LIMIT = 1000;

package/dist/model/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 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 { TimeSeriesValueTuple } from '@perses-dev/core';\nimport { LineSeriesOption, BarSeriesOption } from 'echarts/charts';\nimport { LegendItem } from '../Legend';\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 interface GraphSeries {\n  name: string;\n  values: TimeSeriesValueTuple[];\n  id?: string;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface LegacyTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  data: EChartsValues[];\n}\n\n// Used for TimeChart dataset support, each time series returned is mapped to series options using datasetIndex\n// - https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\nexport type TimeChartSeriesMapping = TimeSeriesOption[];\nexport type TimeChartLegendItems = LegendItem[];\n\nexport type TimeSeriesOption = LineSeriesOption | BarSeriesOption;\n\nexport type EChartsDataFormat = {\n  timeSeries: LegacyTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n// Intentionally making this an object to start because it is plausible we will\n// want to support focusing by other attributes (e.g. index, name) in the future,\n// and starting with an object will make adding them a non-breaking change.\nexport type ChartInstanceFocusOpts = {\n  name?: string; // e.g the TimeSeriesChart plugin uses name\n};\n\nexport type ChartInstance = {\n  /**\n   * Highlight the series associated with the specified options.\n   */\n  highlightSeries: (opts: ChartInstanceFocusOpts) => void;\n\n  /**\n   * Clear all highlighted series.\n   */\n  clearHighlightedSeries: () => void;\n};\n\nexport const PINNED_CROSSHAIR_SERIES_NAME = 'Pinned Crosshair';\n\nexport const DEFAULT_PINNED_CROSSHAIR: LineSeriesOption = {\n  name: PINNED_CROSSHAIR_SERIES_NAME,\n  type: 'line',\n  // https://echarts.apache.org/en/option.html#series-line.markLine\n  markLine: {\n    data: [],\n    lineStyle: {\n      type: 'dashed',\n      width: 2,\n    },\n    emphasis: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n    blur: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n  },\n};\n\nexport interface DatapointInfo {\n  dataIndex: number;\n  seriesIndex: number;\n  seriesName: string;\n  yValue: number;\n}\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT","PINNED_CROSSHAIR_SERIES_NAME","DEFAULT_PINNED_CROSSHAIR","name","type","markLine","data","lineStyle","width","emphasis","opacity","blur"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAMjC,0EAA0E;AAC1E,OAAO,MAAMA,8BAA8B,KAAK;AAkDhD,OAAO,MAAMC,+BAA+B,mBAAmB;AAE/D,OAAO,MAAMC,2BAA6C;IACxDC,MAAMF;IACNG,MAAM;IACN,iEAAiE;IACjEC,UAAU;QACRC,MAAM,EAAE;QACRC,WAAW;YACTH,MAAM;YACNI,OAAO;QACT;QACAC,UAAU;YACRF,WAAW;gBACTC,OAAO;gBACPE,SAAS;YACX;QACF;QACAC,MAAM;YACJJ,WAAW;gBACTC,OAAO;gBACPE,SAAS;YACX;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 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 { TimeSeriesValueTuple } from '@perses-dev/spec';\nimport { LineSeriesOption, BarSeriesOption } from 'echarts/charts';\nimport { LegendItem } from '../Legend';\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 interface GraphSeries {\n  name: string;\n  values: TimeSeriesValueTuple[];\n  id?: string;\n}\n\nexport type EChartsValues = number | null | '-';\n\nexport interface LegacyTimeSeries extends Omit<LineSeriesOption, 'data'> {\n  data: EChartsValues[];\n}\n\n// Used for TimeChart dataset support, each time series returned is mapped to series options using datasetIndex\n// - https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\nexport type TimeChartSeriesMapping = TimeSeriesOption[];\nexport type TimeChartLegendItems = LegendItem[];\n\nexport type TimeSeriesOption = LineSeriesOption | BarSeriesOption;\n\nexport type EChartsDataFormat = {\n  timeSeries: LegacyTimeSeries[];\n  xAxis: number[];\n  legendItems?: LegendItem[];\n  xAxisMax?: number | string;\n  rangeMs?: number;\n};\n\n// Intentionally making this an object to start because it is plausible we will\n// want to support focusing by other attributes (e.g. index, name) in the future,\n// and starting with an object will make adding them a non-breaking change.\nexport type ChartInstanceFocusOpts = {\n  name?: string; // e.g the TimeSeriesChart plugin uses name\n};\n\nexport type ChartInstance = {\n  /**\n   * Highlight the series associated with the specified options.\n   */\n  highlightSeries: (opts: ChartInstanceFocusOpts) => void;\n\n  /**\n   * Clear all highlighted series.\n   */\n  clearHighlightedSeries: () => void;\n};\n\nexport const PINNED_CROSSHAIR_SERIES_NAME = 'Pinned Crosshair';\n\nexport const DEFAULT_PINNED_CROSSHAIR: LineSeriesOption = {\n  name: PINNED_CROSSHAIR_SERIES_NAME,\n  type: 'line',\n  // https://echarts.apache.org/en/option.html#series-line.markLine\n  markLine: {\n    data: [],\n    lineStyle: {\n      type: 'dashed',\n      width: 2,\n    },\n    emphasis: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n    blur: {\n      lineStyle: {\n        width: 2,\n        opacity: 1,\n      },\n    },\n  },\n};\n\nexport interface DatapointInfo {\n  dataIndex: number;\n  seriesIndex: number;\n  seriesName: string;\n  yValue: number;\n}\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT","PINNED_CROSSHAIR_SERIES_NAME","DEFAULT_PINNED_CROSSHAIR","name","type","markLine","data","lineStyle","width","emphasis","opacity","blur"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAMjC,0EAA0E;AAC1E,OAAO,MAAMA,8BAA8B,KAAK;AAkDhD,OAAO,MAAMC,+BAA+B,mBAAmB;AAE/D,OAAO,MAAMC,2BAA6C;IACxDC,MAAMF;IACNG,MAAM;IACN,iEAAiE;IACjEC,UAAU;QACRC,MAAM,EAAE;QACRC,WAAW;YACTH,MAAM;YACNI,OAAO;QACT;QACAC,UAAU;YACRF,WAAW;gBACTC,OAAO;gBACPE,SAAS;YACX;QACF;QACAC,MAAM;YACJJ,WAAW;gBACTC,OAAO;gBACPE,SAAS;YACX;QACF;IACF;AACF,EAAE"}

package/dist/model/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/theme.ts"],"sourcesContent":["// Copyright 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 { ThresholdColorPalette } from '@perses-dev/core';\nimport type {\n  EChartsOption,\n  BarSeriesOption,\n  LineSeriesOption,\n  GaugeSeriesOption,\n  TitleComponentOption,\n  ComposeOption,\n  XAXisComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\n\nexport interface PersesChartsTheme {\n  echartsTheme: EChartsTheme;\n  noDataOption: NoDataOption;\n  sparkline: {\n    width: number;\n    color: string;\n    areaOpacity: number;\n  };\n  /**\n   * Theming for the container that wraps a chart.\n   */\n  container: {\n    /**\n     * Padding in pixels.\n     */\n    padding: {\n      default: number;\n    };\n  };\n  thresholds: ThresholdColorPalette;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, chart tooltip uses the body of the top-level document object.\n   */\n  tooltipPortalContainerId?: string;\n}\n\n// https://github.com/apache/echarts/issues/12489#issuecomment-643185207\nexport interface EChartsTheme extends EChartsOption {\n  bar?: BarSeriesOption;\n  line?: LineSeriesOption;\n  gauge?: GaugeSeriesOption;\n}\n\nexport type NoDataOption = ComposeOption<TitleComponentOption | XAXisComponentOption | YAXisComponentOption>;\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAgDjC,WAA6G"}
+{"version":3,"sources":["../../src/model/theme.ts"],"sourcesContent":["// Copyright 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 { ThresholdColorPalette } from '@perses-dev/core'; // TODO\nimport type {\n  EChartsOption,\n  BarSeriesOption,\n  LineSeriesOption,\n  GaugeSeriesOption,\n  TitleComponentOption,\n  ComposeOption,\n  XAXisComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\n\nexport interface PersesChartsTheme {\n  echartsTheme: EChartsTheme;\n  noDataOption: NoDataOption;\n  sparkline: {\n    width: number;\n    color: string;\n    areaOpacity: number;\n  };\n  /**\n   * Theming for the container that wraps a chart.\n   */\n  container: {\n    /**\n     * Padding in pixels.\n     */\n    padding: {\n      default: number;\n    };\n  };\n  thresholds: ThresholdColorPalette;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, chart tooltip uses the body of the top-level document object.\n   */\n  tooltipPortalContainerId?: string;\n}\n\n// https://github.com/apache/echarts/issues/12489#issuecomment-643185207\nexport interface EChartsTheme extends EChartsOption {\n  bar?: BarSeriesOption;\n  line?: LineSeriesOption;\n  gauge?: GaugeSeriesOption;\n}\n\nexport type NoDataOption = ComposeOption<TitleComponentOption | XAXisComponentOption | YAXisComponentOption>;\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAgDjC,WAA6G"}

package/dist/model/timeOption.d.ts

@@ -1,4 +1,4 @@
-import { DurationString, RelativeTimeRange } from '@perses-dev/core';
+import { DurationString, RelativeTimeRange } from '@perses-dev/spec';
 export interface TimeOption {
     value: RelativeTimeRange;
     display: string;

package/dist/model/timeOption.js

@@ -10,7 +10,7 @@
 // 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 { parseDurationString } from '@perses-dev/core';
+import { parseDurationString } from '@perses-dev/spec';
 import { formatDuration } from 'date-fns';
 export function buildRelativeTimeOption(duration) {
     return {

package/dist/model/timeOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/timeOption.ts"],"sourcesContent":["// Copyright 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 { DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/core';\nimport { formatDuration } from 'date-fns';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\nexport function buildRelativeTimeOption(duration: DurationString): TimeOption {\n  return {\n    value: { pastDuration: duration },\n    display: `Last ${formatDuration(parseDurationString(duration), { delimiter: ', ' })}`,\n  };\n}\n"],"names":["parseDurationString","formatDuration","buildRelativeTimeOption","duration","value","pastDuration","display","delimiter"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAyBA,mBAAmB,QAA2B,mBAAmB;AAC1F,SAASC,cAAc,QAAQ,WAAW;AAO1C,OAAO,SAASC,wBAAwBC,QAAwB;IAC9D,OAAO;QACLC,OAAO;YAAEC,cAAcF;QAAS;QAChCG,SAAS,CAAC,KAAK,EAAEL,eAAeD,oBAAoBG,WAAW;YAAEI,WAAW;QAAK,IAAI;IACvF;AACF"}
+{"version":3,"sources":["../../src/model/timeOption.ts"],"sourcesContent":["// Copyright 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 { DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/spec';\nimport { formatDuration } from 'date-fns';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\nexport function buildRelativeTimeOption(duration: DurationString): TimeOption {\n  return {\n    value: { pastDuration: duration },\n    display: `Last ${formatDuration(parseDurationString(duration), { delimiter: ', ' })}`,\n  };\n}\n"],"names":["parseDurationString","formatDuration","buildRelativeTimeOption","duration","value","pastDuration","display","delimiter"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAyBA,mBAAmB,QAA2B,mBAAmB;AAC1F,SAASC,cAAc,QAAQ,WAAW;AAO1C,OAAO,SAASC,wBAAwBC,QAAwB;IAC9D,OAAO;QACLC,OAAO;YAAEC,cAAcF;QAAS;QAChCG,SAAS,CAAC,KAAK,EAAEL,eAAeD,oBAAoBG,WAAW;YAAEI,WAAW;QAAK,IAAI;IACvF;AACF"}

package/dist/theme/theme.d.ts

@@ -8,6 +8,8 @@ import { createTheme, PaletteMode, Theme } from '@mui/material';
  *
  * Need to reinstantiate the theme everytime to support switching between light and dark themes
  * https://github.com/mui-org/material-ui/issues/18831
+ *
+ * Enable disableBodyOverride to prevent the theme from applying color scheme to the body element.
  */
-export declare function getTheme(mode: PaletteMode, options?: Parameters<typeof createTheme>[0]): Theme;
+export declare function getTheme(mode: PaletteMode, options?: Parameters<typeof createTheme>[0], disableBodyOverride?: boolean): Theme;
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9E;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAQlG"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9E;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CACtB,IAAI,EAAE,WAAW,EACjB,OAAO,GAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAM,EAC/C,mBAAmB,GAAE,OAAe,GACnC,KAAK,CAQP"}

package/dist/theme/theme.js

@@ -33,44 +33,61 @@ const getModalBackgroundStyle = ({ theme })=>{
  *
  * Need to reinstantiate the theme everytime to support switching between light and dark themes
  * https://github.com/mui-org/material-ui/issues/18831
- */ export function getTheme(mode, options = {}) {
+ *
+ * Enable disableBodyOverride to prevent the theme from applying color scheme to the body element.
+ */ export function getTheme(mode, options = {}, disableBodyOverride = false) {
     return createTheme({
         palette: getPaletteOptions(mode),
         typography,
         mixins: {},
-        components,
+        components: getComponents(mode, disableBodyOverride),
         ...options
     });
 }
 // Overrides for component default prop values and styles go here
-const components = {
-    MuiAlert,
-    MuiFormControl: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiPaper,
-    MuiTextField: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiDrawer: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiDialog: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiPopover: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
+function getComponents(mode, disableBodyOverride) {
+    const components = {
+        MuiAlert,
+        MuiFormControl: {
+            defaultProps: {
+                size: 'small'
+            }
+        },
+        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
+    };
+}
 
 //# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/theme.ts"],"sourcesContent":["// Copyright 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 { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { MuiAlert } from './component-overrides/alert';\nimport { MuiPaper } from './component-overrides/paper';\nimport { getPaletteOptions } from './palette';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({\n  theme,\n}: {\n  theme: Omit<Theme, 'components'>;\n}): { backgroundImage?: string; backgroundColor?: string } => {\n  const backgroundStyle =\n    theme.palette.mode === 'light'\n      ? {}\n      : {\n          backgroundImage: 'unset',\n          backgroundColor: theme.palette.designSystem.grey[800],\n        };\n  return {\n    ...backgroundStyle,\n  };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n */\nexport function getTheme(mode: PaletteMode, options: Parameters<typeof createTheme>[0] = {}): Theme {\n  return createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components,\n    ...options,\n  });\n}\n\n// Overrides for component default prop values and styles go here\nconst components: ThemeOptions['components'] = {\n  MuiAlert,\n  MuiFormControl: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiPaper,\n  MuiTextField: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiDrawer: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiDialog: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiPopover: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n};\n"],"names":["createTheme","MuiAlert","MuiPaper","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","options","mixins","components","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog","MuiPopover"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAA0C,gBAAgB;AAC9E,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,0BAA0B,CAAC,EAC/BC,KAAK,EAGN;IACC,MAAMC,kBACJD,MAAME,OAAO,CAACC,IAAI,KAAK,UACnB,CAAC,IACD;QACEC,iBAAiB;QACjBC,iBAAiBL,MAAME,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,IAAI;IACvD;IACN,OAAO;QACL,GAAGN,eAAe;IACpB;AACF;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASO,SAASL,IAAiB,EAAEM,UAA6C,CAAC,CAAC;IACzF,OAAOf,YAAY;QACjBQ,SAASL,kBAAkBM;QAC3BL;QACAY,QAAQ,CAAC;QACTC;QACA,GAAGF,OAAO;IACZ;AACF;AAEA,iEAAiE;AACjE,MAAME,aAAyC;IAC7ChB;IACAiB,gBAAgB;QACdC,cAAc;YACZC,MAAM;QACR;IACF;IACAlB;IACAmB,cAAc;QACZF,cAAc;YACZC,MAAM;QACR;IACF;IACAE,WAAW;QACTC,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAoB,WAAW;QACTF,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAqB,YAAY;QACVH,gBAAgB;YACdC,OAAOnB;QACT;IACF;AACF"}
+{"version":3,"sources":["../../src/theme/theme.ts"],"sourcesContent":["// Copyright 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 { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { MuiAlert } from './component-overrides/alert';\nimport { MuiPaper } from './component-overrides/paper';\nimport { getPaletteOptions } from './palette';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({\n  theme,\n}: {\n  theme: Omit<Theme, 'components'>;\n}): { backgroundImage?: string; backgroundColor?: string } => {\n  const backgroundStyle =\n    theme.palette.mode === 'light'\n      ? {}\n      : {\n          backgroundImage: 'unset',\n          backgroundColor: theme.palette.designSystem.grey[800],\n        };\n  return {\n    ...backgroundStyle,\n  };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n *\n * Enable disableBodyOverride to prevent the theme from applying color scheme to the body element.\n */\nexport function getTheme(\n  mode: PaletteMode,\n  options: Parameters<typeof createTheme>[0] = {},\n  disableBodyOverride: boolean = false\n): Theme {\n  return createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components: getComponents(mode, disableBodyOverride),\n    ...options,\n  });\n}\n\n// Overrides for component default prop values and styles go here\nfunction getComponents(mode: PaletteMode, disableBodyOverride: boolean): ThemeOptions['components'] {\n  const components: ThemeOptions['components'] = {\n    MuiAlert,\n    MuiFormControl: {\n      defaultProps: {\n        size: 'small',\n      },\n    },\n    MuiPaper,\n    MuiTextField: {\n      defaultProps: {\n        size: 'small',\n      },\n    },\n    MuiDrawer: {\n      styleOverrides: {\n        paper: getModalBackgroundStyle,\n      },\n    },\n    MuiDialog: {\n      styleOverrides: {\n        paper: getModalBackgroundStyle,\n      },\n    },\n    MuiPopover: {\n      styleOverrides: {\n        paper: getModalBackgroundStyle,\n      },\n    },\n  };\n\n  if (disableBodyOverride) {\n    return components;\n  }\n\n  return {\n    MuiCssBaseline: {\n      styleOverrides: {\n        body: {\n          colorScheme: mode,\n        },\n      },\n    },\n    ...components,\n  };\n}\n"],"names":["createTheme","MuiAlert","MuiPaper","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","options","disableBodyOverride","mixins","components","getComponents","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog","MuiPopover","MuiCssBaseline","body","colorScheme"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,QAA0C,gBAAgB;AAC9E,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,0BAA0B,CAAC,EAC/BC,KAAK,EAGN;IACC,MAAMC,kBACJD,MAAME,OAAO,CAACC,IAAI,KAAK,UACnB,CAAC,IACD;QACEC,iBAAiB;QACjBC,iBAAiBL,MAAME,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,IAAI;IACvD;IACN,OAAO;QACL,GAAGN,eAAe;IACpB;AACF;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASO,SACdL,IAAiB,EACjBM,UAA6C,CAAC,CAAC,EAC/CC,sBAA+B,KAAK;IAEpC,OAAOhB,YAAY;QACjBQ,SAASL,kBAAkBM;QAC3BL;QACAa,QAAQ,CAAC;QACTC,YAAYC,cAAcV,MAAMO;QAChC,GAAGD,OAAO;IACZ;AACF;AAEA,iEAAiE;AACjE,SAASI,cAAcV,IAAiB,EAAEO,mBAA4B;IACpE,MAAME,aAAyC;QAC7CjB;QACAmB,gBAAgB;YACdC,cAAc;gBACZC,MAAM;YACR;QACF;QACApB;QACAqB,cAAc;YACZF,cAAc;gBACZC,MAAM;YACR;QACF;QACAE,WAAW;YACTC,gBAAgB;gBACdC,OAAOrB;YACT;QACF;QACAsB,WAAW;YACTF,gBAAgB;gBACdC,OAAOrB;YACT;QACF;QACAuB,YAAY;YACVH,gBAAgB;gBACdC,OAAOrB;YACT;QACF;IACF;IAEA,IAAIW,qBAAqB;QACvB,OAAOE;IACT;IAEA,OAAO;QACLW,gBAAgB;YACdJ,gBAAgB;gBACdK,MAAM;oBACJC,aAAatB;gBACf;YACF;QACF;QACA,GAAGS,UAAU;IACf;AACF"}

package/dist/theme/typography.d.ts

@@ -1,7 +1,9 @@
-import '@fontsource/lato/300.css';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/900.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/900.css';
 import { ThemeOptions } from '@mui/material';
 /**
  * Theme typography options that are the same across both the dark and light themes.

package/dist/theme/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAaA,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAS7C;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAqEjD,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAaA,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAsEjD,CAAC"}

package/dist/theme/typography.js

@@ -10,20 +10,21 @@
 // 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 '@fontsource/lato/300.css';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/900.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@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;
 /**
  * Theme typography options that are the same across both the dark and light themes.
  */ export 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/theme/typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/typography.ts"],"sourcesContent":["// Copyright 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 '@fontsource/lato/300.css';\nimport '@fontsource/lato/400.css';\nimport '@fontsource/lato/700.css';\nimport '@fontsource/lato/900.css';\nimport { ThemeOptions } from '@mui/material';\n\n// Font weights need to correspond with the imports at the top of the file\n// (Lato supports 100, 300, 400, 700, 900)\nconst fontWeightLight = 300;\nconst fontWeightRegular = 400;\nconst fontWeightMedium = 700;\nconst fontWeightBold = 900;\n\n/**\n * Theme typography options that are the same across both the dark and light themes.\n */\nexport const typography: ThemeOptions['typography'] = {\n  fontFamily: '\"Lato\", sans-serif',\n\n  fontWeightLight,\n  fontWeightRegular,\n  fontWeightMedium,\n  fontWeightBold,\n\n  h1: {\n    fontSize: '1.5rem', // 24px\n    fontWeight: fontWeightMedium,\n    lineHeight: '32px',\n  },\n  h2: {\n    fontSize: '1.25rem', // 20px\n    fontWeight: fontWeightMedium,\n    lineHeight: '28px',\n  },\n  h3: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightMedium,\n    lineHeight: '24px',\n  },\n  h4: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n  },\n  h5: undefined,\n  h6: undefined,\n\n  body1: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightRegular,\n    lineHeight: '20px',\n  },\n  body2: {\n    fontSize: '0.75rem', // 12px\n    fontWeight: fontWeightRegular,\n    lineHeight: '18px',\n  },\n  subtitle1: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightRegular,\n    lineHeight: '24px',\n    letterSpacing: '0.02rem',\n  },\n  subtitle2: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n    letterSpacing: '0.03rem',\n    textTransform: 'uppercase',\n  },\n\n  button: {\n    // 14px\n    fontSize: '0.875rem',\n    fontWeight: fontWeightMedium,\n    // 20 px\n    lineHeight: '1.25rem',\n    textTransform: 'none',\n    letterSpacing: '0.03rem',\n  },\n  caption: {\n    fontSize: '0.6875rem', // 11px\n    fontWeight: fontWeightRegular,\n    lineHeight: '16px',\n  },\n};\n"],"names":["fontWeightLight","fontWeightRegular","fontWeightMedium","fontWeightBold","typography","fontFamily","h1","fontSize","fontWeight","lineHeight","h2","h3","h4","h5","undefined","h6","body1","body2","subtitle1","letterSpacing","subtitle2","textTransform","button","caption"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAGlC,0EAA0E;AAC1E,0CAA0C;AAC1C,MAAMA,kBAAkB;AACxB,MAAMC,oBAAoB;AAC1B,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;AAEvB;;CAEC,GACD,OAAO,MAAMC,aAAyC;IACpDC,YAAY;IAEZL;IACAC;IACAC;IACAC;IAEAG,IAAI;QACFC,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAC,IAAI;QACFH,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAE,IAAI;QACFJ,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAG,IAAI;QACFL,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAI,IAAIC;IACJC,IAAID;IAEJE,OAAO;QACLT,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAQ,OAAO;QACLV,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAS,WAAW;QACTX,UAAU;QACVC,YAAYP;QACZQ,YAAY;QACZU,eAAe;IACjB;IACAC,WAAW;QACTb,UAAU;QACVC,YAAYN;QACZO,YAAY;QACZU,eAAe;QACfE,eAAe;IACjB;IAEAC,QAAQ;QACN,OAAO;QACPf,UAAU;QACVC,YAAYN;QACZ,QAAQ;QACRO,YAAY;QACZY,eAAe;QACfF,eAAe;IACjB;IACAI,SAAS;QACPhB,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;AACF,EAAE"}
+{"version":3,"sources":["../../src/theme/typography.ts"],"sourcesContent":["// Copyright 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 '@fontsource/inter/300.css';\nimport '@fontsource/inter/400.css';\nimport '@fontsource/inter/500.css';\nimport '@fontsource/inter/600.css';\nimport '@fontsource/inter/700.css';\nimport '@fontsource/inter/900.css';\nimport { ThemeOptions } from '@mui/material';\n\n// Font weights need to correspond with the imports at the top of the file\nconst fontWeightLight = 300;\nconst fontWeightRegular = 400;\nconst fontWeightMedium = 600;\nconst fontWeightBold = 900;\n\n/**\n * Theme typography options that are the same across both the dark and light themes.\n */\nexport const typography: ThemeOptions['typography'] = {\n  fontFamily:\n    'Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"',\n\n  fontWeightLight,\n  fontWeightRegular,\n  fontWeightMedium,\n  fontWeightBold,\n\n  h1: {\n    fontSize: '1.5rem', // 24px\n    fontWeight: fontWeightMedium,\n    lineHeight: '32px',\n  },\n  h2: {\n    fontSize: '1.25rem', // 20px\n    fontWeight: fontWeightMedium,\n    lineHeight: '28px',\n  },\n  h3: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightMedium,\n    lineHeight: '24px',\n  },\n  h4: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n  },\n  h5: undefined,\n  h6: undefined,\n\n  body1: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightRegular,\n    lineHeight: '20px',\n  },\n  body2: {\n    fontSize: '0.75rem', // 12px\n    fontWeight: fontWeightRegular,\n    lineHeight: '18px',\n  },\n  subtitle1: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightRegular,\n    lineHeight: '24px',\n    letterSpacing: '0.02rem',\n  },\n  subtitle2: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n    letterSpacing: '0.03rem',\n    textTransform: 'uppercase',\n  },\n\n  button: {\n    // 14px\n    fontSize: '0.875rem',\n    fontWeight: fontWeightMedium,\n    // 20 px\n    lineHeight: '1.25rem',\n    textTransform: 'none',\n    letterSpacing: '0.03rem',\n  },\n  caption: {\n    fontSize: '0.6875rem', // 11px\n    fontWeight: fontWeightRegular,\n    lineHeight: '16px',\n  },\n};\n"],"names":["fontWeightLight","fontWeightRegular","fontWeightMedium","fontWeightBold","typography","fontFamily","h1","fontSize","fontWeight","lineHeight","h2","h3","h4","h5","undefined","h6","body1","body2","subtitle1","letterSpacing","subtitle2","textTransform","button","caption"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AAGnC,0EAA0E;AAC1E,MAAMA,kBAAkB;AACxB,MAAMC,oBAAoB;AAC1B,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;AAEvB;;CAEC,GACD,OAAO,MAAMC,aAAyC;IACpDC,YACE;IAEFL;IACAC;IACAC;IACAC;IAEAG,IAAI;QACFC,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAC,IAAI;QACFH,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAE,IAAI;QACFJ,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAG,IAAI;QACFL,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAI,IAAIC;IACJC,IAAID;IAEJE,OAAO;QACLT,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAQ,OAAO;QACLV,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAS,WAAW;QACTX,UAAU;QACVC,YAAYP;QACZQ,YAAY;QACZU,eAAe;IACjB;IACAC,WAAW;QACTb,UAAU;QACVC,YAAYN;QACZO,YAAY;QACZU,eAAe;QACfE,eAAe;IACjB;IAEAC,QAAQ;QACN,OAAO;QACPf,UAAU;QACVC,YAAYN;QACZ,QAAQ;QACRO,YAAY;QACZY,eAAe;QACfF,eAAe;IACjB;IACAI,SAAS;QACPhB,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;AACF,EAAE"}

package/dist/utils/axis.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import merge from 'lodash/merge';
-import { formatValue } from '@perses-dev/core';
+import { formatValue } from '@perses-dev/core'; // TODO
 // Character width multipliers (approximate for typical UI fonts)
 const CHAR_WIDTH_BASE = 6;
 const AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping

package/dist/utils/axis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/axis.ts"],"sourcesContent":["// Copyright 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 merge from 'lodash/merge';\nimport type { XAXisComponentOption, YAXisComponentOption } from 'echarts';\nimport { formatValue, FormatOptions } from '@perses-dev/core';\n\nexport interface YAxisConfig {\n  format?: FormatOptions;\n  position?: 'left' | 'right';\n  show?: boolean;\n  min?: number;\n  max?: number;\n}\n\n// Character width multipliers (approximate for typical UI fonts)\nconst CHAR_WIDTH_BASE = 6;\nconst AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping\n\n/**\n * Estimate the pixel width needed for an axis label using Canvas API.\n */\nfunction estimateLabelWidth(format: FormatOptions | undefined, maxValue: number): number {\n  const formattedLabel = formatValue(maxValue, format);\n  // Create a canvas element (reuse if possible for performance)\n  const canvas = document.createElement('canvas');\n  const context = canvas.getContext('2d');\n  if (!context) {\n    // Fallback to estimation if canvas not available\n    return formattedLabel.length * CHAR_WIDTH_BASE;\n  }\n  context.font = '12px sans-serif';\n  const metrics = context.measureText(formattedLabel);\n  return metrics.width;\n}\n\n/*\n * Populate yAxis or xAxis properties, returns an Array since multiple axes are supported\n */\nexport function getFormattedAxis(axis?: YAXisComponentOption | XAXisComponentOption, unit?: FormatOptions): unknown[] {\n  const AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number): string => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(AXIS_DEFAULT, axis)];\n}\n\n/**\n * Create multiple Y axes configurations for ECharts\n * The first axis (index 0) is always on the left side (default axis from panel settings)\n * Additional axes are placed on the right side\n *\n * @param baseAxis - Base axis configuration from panel settings\n * @param baseFormat - Format for the base/default Y axis\n * @param additionalFormats - Array of formats for additional right-side Y axes\n * @param maxValues - Optional array of max values for each additional format (used to compute dynamic label widths)\n */\nexport function getFormattedMultipleYAxes(\n  baseAxis: YAXisComponentOption | undefined,\n  baseFormat: FormatOptions | undefined,\n  additionalFormats: FormatOptions[],\n  maxValues?: number[]\n): YAXisComponentOption[] {\n  const axes: YAXisComponentOption[] = [];\n\n  // Base/default Y axis (left side)\n  const baseAxisConfig: YAXisComponentOption = merge(\n    {\n      type: 'value',\n      position: 'left',\n      boundaryGap: [0, '10%'],\n      axisLabel: {\n        formatter: (value: number): string => {\n          return formatValue(value, baseFormat);\n        },\n        // Let ECharts handle width automatically\n        overflow: 'truncate',\n      },\n    },\n    baseAxis\n  );\n  axes.push(baseAxisConfig);\n\n  // Calculate cumulative offsets based on actual formatted label widths\n  let cumulativeOffset = 0;\n\n  // Additional Y axes (right side) for each unique format\n  additionalFormats.forEach((format, index) => {\n    const rightAxisConfig: YAXisComponentOption = {\n      type: 'value',\n      position: 'right',\n      // Dynamic offset based on cumulative width of preceding axis labels\n      offset: cumulativeOffset,\n      boundaryGap: [0, '10%'],\n      axisLabel: {\n        formatter: (value: number): string => {\n          return formatValue(value, format);\n        },\n      },\n      splitLine: {\n        show: false, // Hide grid lines for right-side axes to reduce visual noise\n      },\n      show: baseAxis?.show,\n    };\n    axes.push(rightAxisConfig);\n    // For subsequent axes, add the width of the previous axis's labels\n    if (maxValues) {\n      cumulativeOffset += estimateLabelWidth(format, maxValues[index] ?? 1000) + AXIS_LABEL_PADDING;\n    }\n  });\n\n  return axes;\n}\n"],"names":["merge","formatValue","CHAR_WIDTH_BASE","AXIS_LABEL_PADDING","estimateLabelWidth","format","maxValue","formattedLabel","canvas","document","createElement","context","getContext","length","font","metrics","measureText","width","getFormattedAxis","axis","unit","AXIS_DEFAULT","type","boundaryGap","axisLabel","formatter","value","getFormattedMultipleYAxes","baseAxis","baseFormat","additionalFormats","maxValues","axes","baseAxisConfig","position","overflow","push","cumulativeOffset","forEach","index","rightAxisConfig","offset","splitLine","show"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,eAAe;AAEjC,SAASC,WAAW,QAAuB,mBAAmB;AAU9D,iEAAiE;AACjE,MAAMC,kBAAkB;AACxB,MAAMC,qBAAqB,IAAI,wCAAwC;AAEvE;;CAEC,GACD,SAASC,mBAAmBC,MAAiC,EAAEC,QAAgB;IAC7E,MAAMC,iBAAiBN,YAAYK,UAAUD;IAC7C,8DAA8D;IAC9D,MAAMG,SAASC,SAASC,aAAa,CAAC;IACtC,MAAMC,UAAUH,OAAOI,UAAU,CAAC;IAClC,IAAI,CAACD,SAAS;QACZ,iDAAiD;QACjD,OAAOJ,eAAeM,MAAM,GAAGX;IACjC;IACAS,QAAQG,IAAI,GAAG;IACf,MAAMC,UAAUJ,QAAQK,WAAW,CAACT;IACpC,OAAOQ,QAAQE,KAAK;AACtB;AAEA;;CAEC,GACD,OAAO,SAASC,iBAAiBC,IAAkD,EAAEC,IAAoB;IACvG,MAAMC,eAAe;QACnBC,MAAM;QACNC,aAAa;YAAC;YAAG;SAAM;QACvBC,WAAW;YACTC,WAAW,CAACC;gBACV,OAAOzB,YAAYyB,OAAON;YAC5B;QACF;IACF;IACA,OAAO;QAACpB,MAAMqB,cAAcF;KAAM;AACpC;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASQ,0BACdC,QAA0C,EAC1CC,UAAqC,EACrCC,iBAAkC,EAClCC,SAAoB;IAEpB,MAAMC,OAA+B,EAAE;IAEvC,kCAAkC;IAClC,MAAMC,iBAAuCjC,MAC3C;QACEsB,MAAM;QACNY,UAAU;QACVX,aAAa;YAAC;YAAG;SAAM;QACvBC,WAAW;YACTC,WAAW,CAACC;gBACV,OAAOzB,YAAYyB,OAAOG;YAC5B;YACA,yCAAyC;YACzCM,UAAU;QACZ;IACF,GACAP;IAEFI,KAAKI,IAAI,CAACH;IAEV,sEAAsE;IACtE,IAAII,mBAAmB;IAEvB,wDAAwD;IACxDP,kBAAkBQ,OAAO,CAAC,CAACjC,QAAQkC;QACjC,MAAMC,kBAAwC;YAC5ClB,MAAM;YACNY,UAAU;YACV,oEAAoE;YACpEO,QAAQJ;YACRd,aAAa;gBAAC;gBAAG;aAAM;YACvBC,WAAW;gBACTC,WAAW,CAACC;oBACV,OAAOzB,YAAYyB,OAAOrB;gBAC5B;YACF;YACAqC,WAAW;gBACTC,MAAM;YACR;YACAA,MAAMf,UAAUe;QAClB;QACAX,KAAKI,IAAI,CAACI;QACV,mEAAmE;QACnE,IAAIT,WAAW;YACbM,oBAAoBjC,mBAAmBC,QAAQ0B,SAAS,CAACQ,MAAM,IAAI,QAAQpC;QAC7E;IACF;IAEA,OAAO6B;AACT"}
+{"version":3,"sources":["../../src/utils/axis.ts"],"sourcesContent":["// Copyright 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 merge from 'lodash/merge';\nimport type { XAXisComponentOption, YAXisComponentOption } from 'echarts';\nimport { formatValue, FormatOptions } from '@perses-dev/core'; // TODO\n\nexport interface YAxisConfig {\n  format?: FormatOptions;\n  position?: 'left' | 'right';\n  show?: boolean;\n  min?: number;\n  max?: number;\n}\n\n// Character width multipliers (approximate for typical UI fonts)\nconst CHAR_WIDTH_BASE = 6;\nconst AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping\n\n/**\n * Estimate the pixel width needed for an axis label using Canvas API.\n */\nfunction estimateLabelWidth(format: FormatOptions | undefined, maxValue: number): number {\n  const formattedLabel = formatValue(maxValue, format);\n  // Create a canvas element (reuse if possible for performance)\n  const canvas = document.createElement('canvas');\n  const context = canvas.getContext('2d');\n  if (!context) {\n    // Fallback to estimation if canvas not available\n    return formattedLabel.length * CHAR_WIDTH_BASE;\n  }\n  context.font = '12px sans-serif';\n  const metrics = context.measureText(formattedLabel);\n  return metrics.width;\n}\n\n/*\n * Populate yAxis or xAxis properties, returns an Array since multiple axes are supported\n */\nexport function getFormattedAxis(axis?: YAXisComponentOption | XAXisComponentOption, unit?: FormatOptions): unknown[] {\n  const AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number): string => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(AXIS_DEFAULT, axis)];\n}\n\n/**\n * Create multiple Y axes configurations for ECharts\n * The first axis (index 0) is always on the left side (default axis from panel settings)\n * Additional axes are placed on the right side\n *\n * @param baseAxis - Base axis configuration from panel settings\n * @param baseFormat - Format for the base/default Y axis\n * @param additionalFormats - Array of formats for additional right-side Y axes\n * @param maxValues - Optional array of max values for each additional format (used to compute dynamic label widths)\n */\nexport function getFormattedMultipleYAxes(\n  baseAxis: YAXisComponentOption | undefined,\n  baseFormat: FormatOptions | undefined,\n  additionalFormats: FormatOptions[],\n  maxValues?: number[]\n): YAXisComponentOption[] {\n  const axes: YAXisComponentOption[] = [];\n\n  // Base/default Y axis (left side)\n  const baseAxisConfig: YAXisComponentOption = merge(\n    {\n      type: 'value',\n      position: 'left',\n      boundaryGap: [0, '10%'],\n      axisLabel: {\n        formatter: (value: number): string => {\n          return formatValue(value, baseFormat);\n        },\n        // Let ECharts handle width automatically\n        overflow: 'truncate',\n      },\n    },\n    baseAxis\n  );\n  axes.push(baseAxisConfig);\n\n  // Calculate cumulative offsets based on actual formatted label widths\n  let cumulativeOffset = 0;\n\n  // Additional Y axes (right side) for each unique format\n  additionalFormats.forEach((format, index) => {\n    const rightAxisConfig: YAXisComponentOption = {\n      type: 'value',\n      position: 'right',\n      // Dynamic offset based on cumulative width of preceding axis labels\n      offset: cumulativeOffset,\n      boundaryGap: [0, '10%'],\n      axisLabel: {\n        formatter: (value: number): string => {\n          return formatValue(value, format);\n        },\n      },\n      splitLine: {\n        show: false, // Hide grid lines for right-side axes to reduce visual noise\n      },\n      show: baseAxis?.show,\n    };\n    axes.push(rightAxisConfig);\n    // For subsequent axes, add the width of the previous axis's labels\n    if (maxValues) {\n      cumulativeOffset += estimateLabelWidth(format, maxValues[index] ?? 1000) + AXIS_LABEL_PADDING;\n    }\n  });\n\n  return axes;\n}\n"],"names":["merge","formatValue","CHAR_WIDTH_BASE","AXIS_LABEL_PADDING","estimateLabelWidth","format","maxValue","formattedLabel","canvas","document","createElement","context","getContext","length","font","metrics","measureText","width","getFormattedAxis","axis","unit","AXIS_DEFAULT","type","boundaryGap","axisLabel","formatter","value","getFormattedMultipleYAxes","baseAxis","baseFormat","additionalFormats","maxValues","axes","baseAxisConfig","position","overflow","push","cumulativeOffset","forEach","index","rightAxisConfig","offset","splitLine","show"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,eAAe;AAEjC,SAASC,WAAW,QAAuB,mBAAmB,CAAC,OAAO;AAUtE,iEAAiE;AACjE,MAAMC,kBAAkB;AACxB,MAAMC,qBAAqB,IAAI,wCAAwC;AAEvE;;CAEC,GACD,SAASC,mBAAmBC,MAAiC,EAAEC,QAAgB;IAC7E,MAAMC,iBAAiBN,YAAYK,UAAUD;IAC7C,8DAA8D;IAC9D,MAAMG,SAASC,SAASC,aAAa,CAAC;IACtC,MAAMC,UAAUH,OAAOI,UAAU,CAAC;IAClC,IAAI,CAACD,SAAS;QACZ,iDAAiD;QACjD,OAAOJ,eAAeM,MAAM,GAAGX;IACjC;IACAS,QAAQG,IAAI,GAAG;IACf,MAAMC,UAAUJ,QAAQK,WAAW,CAACT;IACpC,OAAOQ,QAAQE,KAAK;AACtB;AAEA;;CAEC,GACD,OAAO,SAASC,iBAAiBC,IAAkD,EAAEC,IAAoB;IACvG,MAAMC,eAAe;QACnBC,MAAM;QACNC,aAAa;YAAC;YAAG;SAAM;QACvBC,WAAW;YACTC,WAAW,CAACC;gBACV,OAAOzB,YAAYyB,OAAON;YAC5B;QACF;IACF;IACA,OAAO;QAACpB,MAAMqB,cAAcF;KAAM;AACpC;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASQ,0BACdC,QAA0C,EAC1CC,UAAqC,EACrCC,iBAAkC,EAClCC,SAAoB;IAEpB,MAAMC,OAA+B,EAAE;IAEvC,kCAAkC;IAClC,MAAMC,iBAAuCjC,MAC3C;QACEsB,MAAM;QACNY,UAAU;QACVX,aAAa;YAAC;YAAG;SAAM;QACvBC,WAAW;YACTC,WAAW,CAACC;gBACV,OAAOzB,YAAYyB,OAAOG;YAC5B;YACA,yCAAyC;YACzCM,UAAU;QACZ;IACF,GACAP;IAEFI,KAAKI,IAAI,CAACH;IAEV,sEAAsE;IACtE,IAAII,mBAAmB;IAEvB,wDAAwD;IACxDP,kBAAkBQ,OAAO,CAAC,CAACjC,QAAQkC;QACjC,MAAMC,kBAAwC;YAC5ClB,MAAM;YACNY,UAAU;YACV,oEAAoE;YACpEO,QAAQJ;YACRd,aAAa;gBAAC;gBAAG;aAAM;YACvBC,WAAW;gBACTC,WAAW,CAACC;oBACV,OAAOzB,YAAYyB,OAAOrB;gBAC5B;YACF;YACAqC,WAAW;gBACTC,MAAM;YACR;YACAA,MAAMf,UAAUe;QAClB;QACAX,KAAKI,IAAI,CAACI;QACV,mEAAmE;QACnE,IAAIT,WAAW;YACbM,oBAAoBjC,mBAAmBC,QAAQ0B,SAAS,CAACQ,MAAM,IAAI,QAAQpC;QAC7E;IACF;IAEA,OAAO6B;AACT"}

package/dist/utils/chart-actions.d.ts

@@ -1,5 +1,5 @@
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/core';
+import { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/spec';
 import { DatapointInfo, TimeChartSeriesMapping } from '../model';
 export interface ZoomEventData {
     start: number;

package/dist/utils/chart-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/chart-actions.ts"],"sourcesContent":["// Copyright 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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/core';\nimport { DatapointInfo, PINNED_CROSSHAIR_SERIES_NAME, TimeChartSeriesMapping } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon.\n * https://stackoverflow.com/questions/57183297/is-there-a-way-to-use-zoom-of-type-select-without-showing-the-toolbar\n */\nexport function enableDataZoom(chart: EChartsInstance): void {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance): void {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance): void {\n  if (chart.dispatchAction !== undefined) {\n    // Clear any selected data points\n    chart.dispatchAction({\n      type: 'unselect',\n    });\n\n    // Clear any highlighted series\n    chart.dispatchAction({\n      type: 'downplay',\n    });\n  }\n}\n\n/*\n * Convert a point from pixel coordinate to logical coordinate.\n * Used to determine if cursor is over chart canvas and closest datapoint.\n * https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel\n */\nexport function getPointInGrid(cursorCoordX: number, cursorCoordY: number, chart?: EChartsInstance): number[] | null {\n  if (chart === undefined) {\n    return null;\n  }\n\n  const pointInPixel = [cursorCoordX, cursorCoordY];\n  if (!chart.containPixel('grid', pointInPixel)) {\n    return null;\n  }\n\n  const pointInGrid: number[] = chart.convertFromPixel('grid', pointInPixel);\n  return pointInGrid;\n}\n\n/*\n * TimeSeriesChart tooltip is built custom to support finding nearby series instead of single or all series.\n * This means ECharts actions need to be dispatched manually for series highlighting, datapoint select state, etc.\n * More info: https://echarts.apache.org/en/api.html#action\n */\nexport function batchDispatchNearbySeriesActions(\n  chart: EChartsInstance,\n  nearbySeriesIndexes: number[],\n  emphasizedSeriesIndexes: number[],\n  nonEmphasizedSeriesIndexes: number[],\n  emphasizedDatapoints: DatapointInfo[],\n  duplicateDatapoints: DatapointInfo[]\n): void {\n  // Accounts for multiple series that are rendered direct on top of eachother.\n  // Only applies select state to the datapoint that is visible to avoid color mismatch.\n  const lastEmphasizedDatapoint =\n    duplicateDatapoints.length > 0\n      ? duplicateDatapoints[duplicateDatapoints.length - 1]\n      : emphasizedDatapoints[emphasizedDatapoints.length - 1];\n  if (lastEmphasizedDatapoint !== undefined) {\n    // Corresponds to select options inside getTimeSeries util.\n    // https://echarts.apache.org/en/option.html#series-line.select.itemStyle\n    chart.dispatchAction({\n      type: 'select',\n      seriesIndex: lastEmphasizedDatapoint.seriesIndex,\n      dataIndex: lastEmphasizedDatapoint.dataIndex,\n      // Shared crosshair should not emphasize datapoints on adjacent charts.\n      escapeConnect: true, // TODO: try to remove escapeConnect and match by seriesName for cross panel correlation\n    });\n  }\n\n  // Clears emphasis state of all lines that are not emphasized.\n  // Emphasized is a subset of just the nearby series that are closest to cursor.\n  chart.dispatchAction({\n    type: 'downplay',\n    seriesIndex: nonEmphasizedSeriesIndexes,\n  });\n\n  // https://echarts.apache.org/en/api.html#action.highlight\n  if (emphasizedSeriesIndexes.length > 0) {\n    // Fadeout opacity of all series not closest to cursor.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: emphasizedSeriesIndexes,\n      notBlur: false, // ensure blur IS triggered, this is default but setting so it is explicit\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n  } else {\n    // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: nearbySeriesIndexes,\n      notBlur: true, // do not trigger blur state when cursor is not immediately close to any series\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n\n    // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting\n    chart.dispatchAction({\n      type: 'toggleSelect', // https://echarts.apache.org/en/api.html#action.toggleSelect\n    });\n  }\n}\n\n/*\n * Determine whether a markLine was pushed into the final series, which means crosshair was already pinned onClick\n */\nexport function checkCrosshairPinnedStatus(seriesMapping: TimeChartSeriesMapping): boolean {\n  const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n  return isCrosshairPinned;\n}\n\n/*\n * Find closest timestamp to logical x coordinate returned from echartsInstance.convertFromPixel\n * Used to find nearby series in time series tooltip.\n */\nexport function getClosestTimestamp(timeSeriesValues?: TimeSeriesValueTuple[], cursorX?: number): number | null {\n  if (timeSeriesValues === undefined || cursorX === undefined) {\n    return null;\n  }\n\n  let currentClosestTimestamp: number | null = null;\n  let currentClosestDistance = Infinity;\n\n  for (const [timestamp] of timeSeriesValues) {\n    const distance = Math.abs(timestamp - cursorX);\n    if (distance < currentClosestDistance) {\n      currentClosestTimestamp = timestamp;\n      currentClosestDistance = distance;\n    }\n  }\n  return currentClosestTimestamp;\n}\n\n/*\n * Find closest timestamp in full dataset, used to snap crosshair into place onClick when tooltip is pinned.\n */\nexport function getClosestTimestampInFullDataset(data: TimeSeries[], cursorX?: number): number | null {\n  if (cursorX === undefined) {\n    return null;\n  }\n  const totalSeries = data.length;\n  let closestTimestamp = null;\n  for (let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++) {\n    const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;\n    if (!currentDataset) break;\n    const currentValues: TimeSeriesValueTuple[] = currentDataset.values;\n    closestTimestamp = getClosestTimestamp(currentValues, cursorX);\n  }\n  return closestTimestamp;\n}\n"],"names":["PINNED_CROSSHAIR_SERIES_NAME","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","getPointInGrid","cursorCoordX","cursorCoordY","pointInPixel","containPixel","pointInGrid","convertFromPixel","batchDispatchNearbySeriesActions","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","emphasizedDatapoints","duplicateDatapoints","lastEmphasizedDatapoint","seriesIndex","dataIndex","escapeConnect","notBlur","checkCrosshairPinnedStatus","seriesMapping","isCrosshairPinned","name","getClosestTimestamp","timeSeriesValues","cursorX","currentClosestTimestamp","currentClosestDistance","Infinity","timestamp","distance","Math","abs","getClosestTimestampInFullDataset","data","totalSeries","closestTimestamp","seriesIdx","currentDataset","currentValues","values"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/chart-actions.ts"],"sourcesContent":["// Copyright 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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/spec';\nimport { DatapointInfo, PINNED_CROSSHAIR_SERIES_NAME, TimeChartSeriesMapping } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon.\n * https://stackoverflow.com/questions/57183297/is-there-a-way-to-use-zoom-of-type-select-without-showing-the-toolbar\n */\nexport function enableDataZoom(chart: EChartsInstance): void {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance): void {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance): void {\n  if (chart.dispatchAction !== undefined) {\n    // Clear any selected data points\n    chart.dispatchAction({\n      type: 'unselect',\n    });\n\n    // Clear any highlighted series\n    chart.dispatchAction({\n      type: 'downplay',\n    });\n  }\n}\n\n/*\n * Convert a point from pixel coordinate to logical coordinate.\n * Used to determine if cursor is over chart canvas and closest datapoint.\n * https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel\n */\nexport function getPointInGrid(cursorCoordX: number, cursorCoordY: number, chart?: EChartsInstance): number[] | null {\n  if (chart === undefined) {\n    return null;\n  }\n\n  const pointInPixel = [cursorCoordX, cursorCoordY];\n  if (!chart.containPixel('grid', pointInPixel)) {\n    return null;\n  }\n\n  const pointInGrid: number[] = chart.convertFromPixel('grid', pointInPixel);\n  return pointInGrid;\n}\n\n/*\n * TimeSeriesChart tooltip is built custom to support finding nearby series instead of single or all series.\n * This means ECharts actions need to be dispatched manually for series highlighting, datapoint select state, etc.\n * More info: https://echarts.apache.org/en/api.html#action\n */\nexport function batchDispatchNearbySeriesActions(\n  chart: EChartsInstance,\n  nearbySeriesIndexes: number[],\n  emphasizedSeriesIndexes: number[],\n  nonEmphasizedSeriesIndexes: number[],\n  emphasizedDatapoints: DatapointInfo[],\n  duplicateDatapoints: DatapointInfo[]\n): void {\n  // Accounts for multiple series that are rendered direct on top of eachother.\n  // Only applies select state to the datapoint that is visible to avoid color mismatch.\n  const lastEmphasizedDatapoint =\n    duplicateDatapoints.length > 0\n      ? duplicateDatapoints[duplicateDatapoints.length - 1]\n      : emphasizedDatapoints[emphasizedDatapoints.length - 1];\n  if (lastEmphasizedDatapoint !== undefined) {\n    // Corresponds to select options inside getTimeSeries util.\n    // https://echarts.apache.org/en/option.html#series-line.select.itemStyle\n    chart.dispatchAction({\n      type: 'select',\n      seriesIndex: lastEmphasizedDatapoint.seriesIndex,\n      dataIndex: lastEmphasizedDatapoint.dataIndex,\n      // Shared crosshair should not emphasize datapoints on adjacent charts.\n      escapeConnect: true, // TODO: try to remove escapeConnect and match by seriesName for cross panel correlation\n    });\n  }\n\n  // Clears emphasis state of all lines that are not emphasized.\n  // Emphasized is a subset of just the nearby series that are closest to cursor.\n  chart.dispatchAction({\n    type: 'downplay',\n    seriesIndex: nonEmphasizedSeriesIndexes,\n  });\n\n  // https://echarts.apache.org/en/api.html#action.highlight\n  if (emphasizedSeriesIndexes.length > 0) {\n    // Fadeout opacity of all series not closest to cursor.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: emphasizedSeriesIndexes,\n      notBlur: false, // ensure blur IS triggered, this is default but setting so it is explicit\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n  } else {\n    // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: nearbySeriesIndexes,\n      notBlur: true, // do not trigger blur state when cursor is not immediately close to any series\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n\n    // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting\n    chart.dispatchAction({\n      type: 'toggleSelect', // https://echarts.apache.org/en/api.html#action.toggleSelect\n    });\n  }\n}\n\n/*\n * Determine whether a markLine was pushed into the final series, which means crosshair was already pinned onClick\n */\nexport function checkCrosshairPinnedStatus(seriesMapping: TimeChartSeriesMapping): boolean {\n  const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n  return isCrosshairPinned;\n}\n\n/*\n * Find closest timestamp to logical x coordinate returned from echartsInstance.convertFromPixel\n * Used to find nearby series in time series tooltip.\n */\nexport function getClosestTimestamp(timeSeriesValues?: TimeSeriesValueTuple[], cursorX?: number): number | null {\n  if (timeSeriesValues === undefined || cursorX === undefined) {\n    return null;\n  }\n\n  let currentClosestTimestamp: number | null = null;\n  let currentClosestDistance = Infinity;\n\n  for (const [timestamp] of timeSeriesValues) {\n    const distance = Math.abs(timestamp - cursorX);\n    if (distance < currentClosestDistance) {\n      currentClosestTimestamp = timestamp;\n      currentClosestDistance = distance;\n    }\n  }\n  return currentClosestTimestamp;\n}\n\n/*\n * Find closest timestamp in full dataset, used to snap crosshair into place onClick when tooltip is pinned.\n */\nexport function getClosestTimestampInFullDataset(data: TimeSeries[], cursorX?: number): number | null {\n  if (cursorX === undefined) {\n    return null;\n  }\n  const totalSeries = data.length;\n  let closestTimestamp = null;\n  for (let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++) {\n    const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;\n    if (!currentDataset) break;\n    const currentValues: TimeSeriesValueTuple[] = currentDataset.values;\n    closestTimestamp = getClosestTimestamp(currentValues, cursorX);\n  }\n  return closestTimestamp;\n}\n"],"names":["PINNED_CROSSHAIR_SERIES_NAME","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","getPointInGrid","cursorCoordX","cursorCoordY","pointInPixel","containPixel","pointInGrid","convertFromPixel","batchDispatchNearbySeriesActions","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","emphasizedDatapoints","duplicateDatapoints","lastEmphasizedDatapoint","seriesIndex","dataIndex","escapeConnect","notBlur","checkCrosshairPinnedStatus","seriesMapping","isCrosshairPinned","name","getClosestTimestamp","timeSeriesValues","cursorX","currentClosestTimestamp","currentClosestDistance","Infinity","timestamp","distance","Math","abs","getClosestTimestampInFullDataset","data","totalSeries","closestTimestamp","seriesIdx","currentDataset","currentValues","values"],"mappings":"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"}

package/dist/utils/format.js

@@ -10,7 +10,7 @@
 // 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 { formatInTimeZone } from 'date-fns-tz';
+import { tz } from '@date-fns/tz';
 import { format } from 'date-fns';
 export function dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone) {
     /*
@@ -37,7 +37,9 @@ export function formatWithTimeZone(date, formatString, timeZone) {
     if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
         return format(date, formatString);
     } else {
-        return formatInTimeZone(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
+        return format(date, formatString, {
+            in: tz(lowerTimeZone === 'utc' ? 'UTC' : timeZone)
+        });
     }
 }
 // https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter