@perses-dev/components 0.0.0-snapshot-time-chart-rewrite-4667058 → 0.0.0-snapshot-panel-extra-content-2-2767e21

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './SettingsAutocomplete';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeChart';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './context/SnackbarProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './BarChart';\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './FontSizeSelector';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './ModeSelector';\nexport * from './OptionsEditorLayout';\nexport * from './SettingsAutocomplete';\nexport * from './SortSelector';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeChart';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './context/SnackbarProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}

package/dist/model/graph.d.ts

@@ -1,5 +1,5 @@
 import { TimeSeriesValueTuple } from '@perses-dev/core';
-import { LineSeriesOption } from 'echarts/charts';
+import { LineSeriesOption, BarSeriesOption } from 'echarts/charts';
 import { LegendItem } from '../Legend';
 export declare const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
 export declare type UnixTimeMs = number;
@@ -12,8 +12,9 @@ export declare type EChartsValues = number | null | '-';
 export interface LegacyTimeSeries extends Omit<LineSeriesOption, 'data'> {
     data: EChartsValues[];
 }
-export declare type TimeChartSeriesMapping = LineSeriesOption[];
+export declare type TimeChartSeriesMapping = TimeSeriesOption[];
 export declare type TimeChartLegendItems = LegendItem[];
+export declare type TimeSeriesOption = LineSeriesOption | BarSeriesOption;
 export declare type EChartsDataFormat = {
     timeSeries: LegacyTimeSeries[];
     xAxis: number[];
@@ -21,18 +22,26 @@ export declare type EChartsDataFormat = {
     xAxisMax?: number | string;
     rangeMs?: number;
 };
-export declare type ChartHandleFocusOpts = {
+export declare type ChartInstanceFocusOpts = {
     id?: string;
     name?: string;
 };
-export declare type ChartHandle = {
+export declare type ChartInstance = {
     /**
      * Highlight the series associated with the specified options.
      */
-    highlightSeries: (opts: ChartHandleFocusOpts) => void;
+    highlightSeries: (opts: ChartInstanceFocusOpts) => void;
     /**
      * Clear all highlighted series.
      */
     clearHighlightedSeries: () => void;
 };
+export declare const PINNED_CROSSHAIR_SERIES_NAME = "Pinned Crosshair";
+export declare const DEFAULT_PINNED_CROSSHAIR: LineSeriesOption;
+export interface DatapointInfo {
+    dataIndex: number;
+    seriesIndex: number;
+    seriesName: string;
+    yValue: number;
+}
 //# sourceMappingURL=graph.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGvC,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IACtE,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB;AAGD,oBAAY,sBAAsB,GAAG,gBAAgB,EAAE,CAAC;AACxD,oBAAY,oBAAoB,GAAG,UAAU,EAAE,CAAC;AAGhD,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,oBAAY,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,WAAW,GAAG;IACxB;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAAC"}
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGvC,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IACtE,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB;AAID,oBAAY,sBAAsB,GAAG,gBAAgB,EAAE,CAAC;AACxD,oBAAY,oBAAoB,GAAG,UAAU,EAAE,CAAC;AAEhD,oBAAY,gBAAgB,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAIlE,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,oBAAY,sBAAsB,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAExD;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,qBAAqB,CAAC;AAE/D,eAAO,MAAM,wBAAwB,EAAE,gBAuBtC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/model/graph.js

@@ -12,5 +12,30 @@
 // limitations under the License.
 // adjust display when there are many time series to help with performance
 export const OPTIMIZED_MODE_SERIES_LIMIT = 1000;
+export const PINNED_CROSSHAIR_SERIES_NAME = 'Pinned Crosshair';
+export const DEFAULT_PINNED_CROSSHAIR = {
+    name: PINNED_CROSSHAIR_SERIES_NAME,
+    type: 'line',
+    // https://echarts.apache.org/en/option.html#series-line.markLine
+    markLine: {
+        data: [],
+        lineStyle: {
+            type: 'dashed',
+            width: 2
+        },
+        emphasis: {
+            lineStyle: {
+                width: 2,
+                opacity: 1
+            }
+        },
+        blur: {
+            lineStyle: {
+                width: 2,
+                opacity: 1
+            }
+        }
+    }
+};
 
 //# sourceMappingURL=graph.js.map

package/dist/model/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2023 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 } 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// TODO: Continue to simplify TimeChart types, fix legend and thresholds\nexport type TimeChartSeriesMapping = LineSeriesOption[];\nexport type TimeChartLegendItems = LegendItem[];\n\n// TODO: Rename to LegacyEChartsDataFormat\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 ChartHandleFocusOpts = {\n  id?: string; // LineChart uses id\n  name?: string; // TimeChart uses name\n};\n\nexport type ChartHandle = {\n  /**\n   * Highlight the series associated with the specified options.\n   */\n  highlightSeries: (opts: ChartHandleFocusOpts) => void;\n\n  /**\n   * Clear all highlighted series.\n   */\n  clearHighlightedSeries: () => void;\n};\n"],"names":["OPTIMIZED_MODE_SERIES_LIMIT"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAMjC,0EAA0E;AAC1E,OAAO,MAAMA,2BAA2B,GAAG,IAAI,CAAC"}
+{"version":3,"sources":["../../src/model/graph.ts"],"sourcesContent":["// Copyright 2023 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\n// [DEPRECATED] used for legacy LineChart 'category' axis.\n// May delete in future when embed users migrate to TimeChart.\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  id?: string; // LineChart uses id\n  name?: string; // TimeChart 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,oCAAoC;AACpC,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,2BAA2B,GAAG,IAAI,CAAC;AAqDhD,OAAO,MAAMC,4BAA4B,GAAG,kBAAkB,CAAC;AAE/D,OAAO,MAAMC,wBAAwB,GAAqB;IACxDC,IAAI,EAAEF,4BAA4B;IAClCG,IAAI,EAAE,MAAM;IACZ,iEAAiE;IACjEC,QAAQ,EAAE;QACRC,IAAI,EAAE,EAAE;QACRC,SAAS,EAAE;YACTH,IAAI,EAAE,QAAQ;YACdI,KAAK,EAAE,CAAC;SACT;QACDC,QAAQ,EAAE;YACRF,SAAS,EAAE;gBACTC,KAAK,EAAE,CAAC;gBACRE,OAAO,EAAE,CAAC;aACX;SACF;QACDC,IAAI,EAAE;YACJJ,SAAS,EAAE;gBACTC,KAAK,EAAE,CAAC;gBACRE,OAAO,EAAE,CAAC;aACX;SACF;KACF;CACF,CAAC"}

package/dist/model/theme.d.ts

@@ -19,6 +19,11 @@ export interface PersesChartsTheme {
         };
     };
     thresholds: ThresholdColorPalette;
+    /**
+     * The id of the container that will have the chart tooltip appended to it.
+     * By default, chart tooltip uses the body of the top-level document object.
+     */
+    tooltipPortalContainerId?: string;
 }
 export interface EChartsTheme extends EChartsOption {
     bar?: BarSeriesOption;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/model/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;OAEG;IACH,SAAS,EAAE;QACT;;WAEG;QACH,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC;SACjB,CAAC;KACH,CAAC;IACF,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAGD,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,GAAG,CAAC,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,oBAAY,YAAY,GAAG,aAAa,CAAC,oBAAoB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/model/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;OAEG;IACH,SAAS,EAAE;QACT;;WAEG;QACH,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC;SACjB,CAAC;KACH,CAAC;IACF,UAAU,EAAE,qBAAqB,CAAC;IAClC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAGD,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,GAAG,CAAC,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,oBAAY,YAAY,GAAG,aAAa,CAAC,oBAAoB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC,CAAC"}

package/dist/model/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/theme.ts"],"sourcesContent":["// Copyright 2023 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  };\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\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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,WAwC6G"}
+{"version":3,"sources":["../../src/model/theme.ts"],"sourcesContent":["// Copyright 2023 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  };\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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,WA6C6G"}

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

@@ -1,4 +1,5 @@
 import { ECharts as EChartsInstance } from 'echarts/core';
+import { DatapointInfo } from '../model';
 export interface ZoomEventData {
     start: number;
     end: number;
@@ -15,4 +16,6 @@ export declare function enableDataZoom(chart: EChartsInstance): void;
  */
 export declare function restoreChart(chart: EChartsInstance): void;
 export declare function clearHighlightedSeries(chart: EChartsInstance, totalSeries: number): void;
+export declare function getPointInGrid(cursorCoordX: number, cursorCoordY: number, chart?: EChartsInstance): number[] | null;
+export declare function batchDispatchNearbySeriesActions(chart: EChartsInstance, nearbySeriesIndexes: number[], emphasizedSeriesIndexes: number[], nonEmphasizedSeriesIndexes: number[], emphasizedDatapoints: DatapointInfo[], duplicateDatapoints: DatapointInfo[]): void;
 //# sourceMappingURL=chart-actions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-actions.d.ts","sourceRoot":"","sources":["../../src/utils/chart-actions.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IAEZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,QAapD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,QAKlD;AAMD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,QASjF"}
+{"version":3,"file":"chart-actions.d.ts","sourceRoot":"","sources":["../../src/utils/chart-actions.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IAEZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,QAapD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,QAKlD;AAMD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,QASjF;AAOD,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,eAAe,mBAYjG;AAOD,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,eAAe,EACtB,mBAAmB,EAAE,MAAM,EAAE,EAC7B,uBAAuB,EAAE,MAAM,EAAE,EACjC,0BAA0B,EAAE,MAAM,EAAE,EACpC,oBAAoB,EAAE,aAAa,EAAE,EACrC,mBAAmB,EAAE,aAAa,EAAE,QAkDrC"}

package/dist/utils/chart-actions.js

@@ -48,5 +48,71 @@
         }
     }
 }
+/*
+ * Convert a point from pixel coordinate to logical coordinate.
+ * Used to determine if cursor is over chart canvas and closest datapoint.
+ * https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel
+ */ export function getPointInGrid(cursorCoordX, cursorCoordY, chart) {
+    if (chart === undefined) {
+        return null;
+    }
+    const pointInPixel = [
+        cursorCoordX,
+        cursorCoordY
+    ];
+    if (!chart.containPixel('grid', pointInPixel)) {
+        return null;
+    }
+    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+    return pointInGrid;
+}
+/*
+ * TimeSeriesChart tooltip is built custom to support finding nearby series instead of single or all series.
+ * This means ECharts actions need to be dispatched manually for series highlighting, datapoint select state, etc.
+ * More info: https://echarts.apache.org/en/api.html#action
+ */ export function batchDispatchNearbySeriesActions(chart, nearbySeriesIndexes, emphasizedSeriesIndexes, nonEmphasizedSeriesIndexes, emphasizedDatapoints, duplicateDatapoints) {
+    // Accounts for multiple series that are rendered direct on top of eachother.
+    // Only applies select state to the datapoint that is visible to avoid color mismatch.
+    const lastEmphasizedDatapoint = duplicateDatapoints.length > 0 ? duplicateDatapoints[duplicateDatapoints.length - 1] : emphasizedDatapoints[emphasizedDatapoints.length - 1];
+    if (lastEmphasizedDatapoint !== undefined) {
+        // Corresponds to select options inside getTimeSeries util.
+        // https://echarts.apache.org/en/option.html#series-line.select.itemStyle
+        chart.dispatchAction({
+            type: 'select',
+            seriesIndex: lastEmphasizedDatapoint.seriesIndex,
+            dataIndex: lastEmphasizedDatapoint.dataIndex,
+            // Shared crosshair should not emphasize datapoints on adjacent charts.
+            escapeConnect: true
+        });
+    }
+    // Clears emphasis state of all lines that are not emphasized.
+    // Emphasized is a subset of just the nearby series that are closest to cursor.
+    chart.dispatchAction({
+        type: 'downplay',
+        seriesIndex: nonEmphasizedSeriesIndexes
+    });
+    // https://echarts.apache.org/en/api.html#action.highlight
+    if (emphasizedSeriesIndexes.length > 0) {
+        // Fadeout opacity of all series not closest to cursor.
+        chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: emphasizedSeriesIndexes,
+            notBlur: false,
+            escapeConnect: true
+        });
+    } else {
+        // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
+        chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: nearbySeriesIndexes,
+            notBlur: true,
+            escapeConnect: true
+        });
+        // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting
+        chart.dispatchAction({
+            type: 'toggleSelect'
+        });
+    }
+}
 
 //# sourceMappingURL=chart-actions.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/chart-actions.ts"],"sourcesContent":["// Copyright 2023 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';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  // TODO: remove startIndex and endIndex once LineChart is deprecated\n  startIndex?: number;\n  endIndex?: 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) {\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) {\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, totalSeries: number) {\n  if (chart.dispatchAction !== undefined) {\n    for (let i = 0; i < totalSeries; i++) {\n      chart.dispatchAction({\n        type: 'downplay',\n        seriesIndex: i,\n      });\n    }\n  }\n}\n"],"names":["enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","totalSeries","i","seriesIndex"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAYjC;;;CAGC,GACD,OAAO,SAASA,cAAc,CAACC,KAAsB,EAAE;IACrD,MAAMC,UAAU,GAAGD,KAAK,CAAC,QAAQ,CAAC,AAAC;IACnC,IAAIC,UAAU,KAAKC,SAAS,EAAE,OAAO;IACrC,IAAID,UAAU,CAACE,MAAM,CAACC,OAAO,KAAKF,SAAS,IAAID,UAAU,CAACE,MAAM,CAACC,OAAO,CAACC,MAAM,GAAG,CAAC,EAAE;QACnF,wGAAwG;QACxG,IAAIJ,UAAU,CAACE,MAAM,CAACC,OAAO,CAAC,CAAC,CAAC,CAACE,OAAO,CAACC,QAAQ,CAACC,UAAU,CAACC,IAAI,KAAK,QAAQ,EAAE;YAC9ET,KAAK,CAACU,cAAc,CAAC;gBACnBC,IAAI,EAAE,kBAAkB;gBACxBC,GAAG,EAAE,gBAAgB;gBACrBC,oBAAoB,EAAE,IAAI;aAC3B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;AACH,CAAC;AAED;;CAEC,GACD,OAAO,SAASC,YAAY,CAACd,KAAsB,EAAE;IACnD,wEAAwE;IACxEA,KAAK,CAACU,cAAc,CAAC;QACnBC,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;AACL,CAAC;AAED;;;CAGC,GACD,OAAO,SAASI,sBAAsB,CAACf,KAAsB,EAAEgB,WAAmB,EAAE;IAClF,IAAIhB,KAAK,CAACU,cAAc,KAAKR,SAAS,EAAE;QACtC,IAAK,IAAIe,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,WAAW,EAAEC,CAAC,EAAE,CAAE;YACpCjB,KAAK,CAACU,cAAc,CAAC;gBACnBC,IAAI,EAAE,UAAU;gBAChBO,WAAW,EAAED,CAAC;aACf,CAAC,CAAC;QACL,CAAC;IACH,CAAC;AACH,CAAC"}
+{"version":3,"sources":["../../src/utils/chart-actions.ts"],"sourcesContent":["// Copyright 2023 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 { DatapointInfo } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  // TODO: remove startIndex and endIndex once LineChart is deprecated\n  startIndex?: number;\n  endIndex?: 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) {\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) {\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, totalSeries: number) {\n  if (chart.dispatchAction !== undefined) {\n    for (let i = 0; i < totalSeries; i++) {\n      chart.dispatchAction({\n        type: 'downplay',\n        seriesIndex: i,\n      });\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) {\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) {\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"],"names":["enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","totalSeries","i","seriesIndex","getPointInGrid","cursorCoordX","cursorCoordY","pointInPixel","containPixel","pointInGrid","convertFromPixel","batchDispatchNearbySeriesActions","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","emphasizedDatapoints","duplicateDatapoints","lastEmphasizedDatapoint","dataIndex","escapeConnect","notBlur"],"mappings":"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"}

package/dist/utils/theme-gen.d.ts

@@ -1,6 +1,11 @@
 import { Theme } from '@mui/material';
 import { EChartsTheme, PersesChartsTheme } from '../model';
 declare type MuiTheme = Omit<Theme, 'components'>;
-export declare function generateChartsTheme(muiTheme: MuiTheme, echartsTheme: EChartsTheme): PersesChartsTheme;
+export declare function generateChartsTheme(muiTheme: MuiTheme, echartsTheme: EChartsTheme, 
+/**
+ * The id of the container that will have the chart tooltip appended to it.
+ * By default, chart tooltip uses the body of the top-level document object.
+ */
+tooltipPortalContainerId?: string): PersesChartsTheme;
 export {};
 //# sourceMappingURL=theme-gen.d.ts.map

package/dist/utils/theme-gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-gen.d.ts","sourceRoot":"","sources":["../../src/utils/theme-gen.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAK3D,aAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;AAE1C,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,GAAG,iBAAiB,CAkNrG"}
+{"version":3,"file":"theme-gen.d.ts","sourceRoot":"","sources":["../../src/utils/theme-gen.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAK3D,aAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;AAE1C,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY;AAC1B;;;GAGG;AACH,wBAAwB,CAAC,EAAE,MAAM,GAChC,iBAAiB,CA+OnB"}

package/dist/utils/theme-gen.js

@@ -12,10 +12,13 @@
 // limitations under the License.
 import merge from 'lodash/merge';
 const DEFAULT_TEXT_COLOR = '#222';
-export function generateChartsTheme(muiTheme, echartsTheme) {
-    var ref, ref1, ref2, ref3, ref4;
-    var ref5;
-    const primaryTextColor = (ref5 = (ref = muiTheme.palette.text) === null || ref === void 0 ? void 0 : ref.primary) !== null && ref5 !== void 0 ? ref5 : DEFAULT_TEXT_COLOR;
+export function generateChartsTheme(muiTheme, echartsTheme, /**
+   * The id of the container that will have the chart tooltip appended to it.
+   * By default, chart tooltip uses the body of the top-level document object.
+   */ tooltipPortalContainerId) {
+    var ref, ref1, ref2, ref3, ref4, ref5, ref6;
+    var ref7;
+    const primaryTextColor = (ref7 = (ref = muiTheme.palette.text) === null || ref === void 0 ? void 0 : ref.primary) !== null && ref7 !== void 0 ? ref7 : DEFAULT_TEXT_COLOR;
     const muiConvertedTheme = {
         title: {
             show: false
@@ -67,7 +70,7 @@ export function generateChartsTheme(muiTheme, echartsTheme) {
                 lineStyle: {
                     width: 0.5,
                     color: muiTheme.palette.grey[300],
-                    opacity: 0.6
+                    opacity: 0.4
                 }
             },
             splitArea: {
@@ -104,7 +107,7 @@ export function generateChartsTheme(muiTheme, echartsTheme) {
                 lineStyle: {
                     width: 0.5,
                     color: muiTheme.palette.grey[300],
-                    opacity: 0.6
+                    opacity: 0.4
                 }
             },
             splitArea: {
@@ -153,7 +156,30 @@ export function generateChartsTheme(muiTheme, echartsTheme) {
                 borderColor: primaryTextColor
             }
         },
-        tooltip: {},
+        tooltip: {
+            backgroundColor: (ref5 = muiTheme.palette.designSystem) === null || ref5 === void 0 ? void 0 : ref5.grey[800],
+            borderColor: (ref6 = muiTheme.palette.designSystem) === null || ref6 === void 0 ? void 0 : ref6.grey[800],
+            textStyle: {
+                color: '#fff',
+                fontSize: 11
+            }
+        },
+        axisPointer: {
+            lineStyle: {
+                color: muiTheme.palette.grey[500]
+            }
+        },
+        markLine: {
+            symbol: 'none',
+            symbolSize: 0,
+            itemStyle: {
+                color: muiTheme.palette.grey[500]
+            },
+            lineStyle: {
+                type: 'dashed',
+                width: 1
+            }
+        },
         line: {
             showSymbol: false,
             symbol: 'circle',
@@ -172,7 +198,12 @@ export function generateChartsTheme(muiTheme, echartsTheme) {
             barMaxWidth: 150,
             itemStyle: {
                 borderWidth: 0,
+                borderRadius: 0,
                 borderColor: muiTheme.palette.grey[300]
+            },
+            label: {
+                show: false,
+                color: primaryTextColor
             }
         },
         gauge: {
@@ -192,6 +223,7 @@ export function generateChartsTheme(muiTheme, echartsTheme) {
         }
     };
     return {
+        tooltipPortalContainerId,
         echartsTheme: merge(muiConvertedTheme, echartsTheme),
         noDataOption: {
             title: {

package/dist/utils/theme-gen.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/theme-gen.ts"],"sourcesContent":["// Copyright 2023 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 { Theme } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { EChartsTheme, PersesChartsTheme } from '../model';\n\nconst DEFAULT_TEXT_COLOR = '#222';\n\n// avoid component override type errors since only palette and typography are used\ntype MuiTheme = Omit<Theme, 'components'>;\n\nexport function generateChartsTheme(muiTheme: MuiTheme, echartsTheme: EChartsTheme): PersesChartsTheme {\n  const primaryTextColor = muiTheme.palette.text?.primary ?? DEFAULT_TEXT_COLOR;\n\n  const muiConvertedTheme: EChartsTheme = {\n    title: {\n      show: false,\n    },\n    textStyle: {\n      color: primaryTextColor,\n      fontFamily: muiTheme.typography.fontFamily,\n      fontSize: 12,\n    },\n    grid: {\n      top: 5,\n      right: 20,\n      bottom: 0,\n      left: 20,\n      containLabel: true,\n    },\n    // Accessible categorical palette from: https://davidmathlogic.com/colorblind\n    color: [\n      '#56B4E9', // lt blue\n      '#009E73', // med green\n      '#0072B2', // dk blue\n      '#CC79A7', // lt purple\n      '#F0E442', // yellow\n      '#E69F00', // orange\n      '#D55E00', // red\n    ],\n    categoryAxis: {\n      show: true,\n      axisLabel: {\n        show: true,\n        color: primaryTextColor,\n        margin: 15,\n      },\n      axisTick: {\n        show: false,\n        length: 6,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      axisLine: {\n        show: true,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.6,\n        },\n      },\n      splitArea: {\n        show: false,\n        areaStyle: {\n          color: [muiTheme.palette.grey[300]],\n        },\n      },\n    },\n    timeAxis: {\n      show: true,\n      axisLabel: {\n        show: true,\n        color: primaryTextColor,\n        margin: 15,\n      },\n      axisTick: {\n        show: false,\n        length: 6,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      axisLine: {\n        show: true,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.6,\n        },\n      },\n      splitArea: {\n        show: false,\n        areaStyle: {\n          color: [muiTheme.palette.grey[300]],\n        },\n      },\n    },\n    valueAxis: {\n      show: true,\n      axisLabel: {\n        color: primaryTextColor,\n        margin: 12,\n      },\n      axisLine: {\n        show: false,\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.6,\n        },\n      },\n    },\n    legend: {\n      orient: 'horizontal',\n      textStyle: {\n        color: primaryTextColor,\n      },\n      pageTextStyle: {\n        color: muiTheme.palette.grey[600],\n      },\n      pageIconColor: muiTheme?.palette?.action?.active,\n      pageIconInactiveColor: muiTheme?.palette?.action?.disabled,\n    },\n    toolbox: {\n      show: true,\n      top: 10,\n      right: 10,\n      iconStyle: {\n        borderColor: primaryTextColor,\n      },\n    },\n    tooltip: {},\n    line: {\n      showSymbol: false,\n      symbol: 'circle',\n      symbolSize: 4,\n      smooth: false,\n      lineStyle: {\n        width: 1,\n      },\n      emphasis: {\n        lineStyle: {\n          width: 1.5,\n        },\n      },\n    },\n    bar: {\n      barMaxWidth: 150,\n      itemStyle: {\n        borderWidth: 0,\n        borderColor: muiTheme.palette.grey[300],\n      },\n    },\n    gauge: {\n      detail: {\n        fontSize: 18,\n        fontWeight: 600,\n        valueAnimation: false,\n      },\n      splitLine: {\n        distance: 0,\n        length: 4,\n        lineStyle: {\n          width: 1,\n        },\n      },\n      splitNumber: 12,\n    },\n  };\n\n  return {\n    echartsTheme: merge(muiConvertedTheme, echartsTheme),\n    noDataOption: {\n      title: {\n        show: true,\n        textStyle: {\n          color: primaryTextColor,\n          fontSize: 16,\n          fontWeight: 400,\n        },\n        text: 'No data',\n        left: 'center',\n        top: 'center',\n      },\n      xAxis: {\n        show: false,\n      },\n      yAxis: {\n        show: false,\n      },\n    },\n    sparkline: {\n      width: 2,\n      color: '#1976d2',\n    },\n    container: {\n      padding: {\n        default: parseInt(muiTheme.spacing(1.5), 10),\n      },\n    },\n    thresholds: {\n      defaultColor: muiTheme.palette.success.main,\n      palette: ['#FFCC00', muiTheme.palette.warning.main, muiTheme.palette.error.main],\n    },\n  };\n}\n"],"names":["merge","DEFAULT_TEXT_COLOR","generateChartsTheme","muiTheme","echartsTheme","primaryTextColor","palette","text","primary","muiConvertedTheme","title","show","textStyle","color","fontFamily","typography","fontSize","grid","top","right","bottom","left","containLabel","categoryAxis","axisLabel","margin","axisTick","length","lineStyle","grey","axisLine","splitLine","width","opacity","splitArea","areaStyle","timeAxis","valueAxis","legend","orient","pageTextStyle","pageIconColor","action","active","pageIconInactiveColor","disabled","toolbox","iconStyle","borderColor","tooltip","line","showSymbol","symbol","symbolSize","smooth","emphasis","bar","barMaxWidth","itemStyle","borderWidth","gauge","detail","fontWeight","valueAnimation","distance","splitNumber","noDataOption","xAxis","yAxis","sparkline","container","padding","default","parseInt","spacing","thresholds","defaultColor","success","main","warning","error"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/theme-gen.ts"],"sourcesContent":["// Copyright 2023 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 { Theme } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { EChartsTheme, PersesChartsTheme } from '../model';\n\nconst DEFAULT_TEXT_COLOR = '#222';\n\n// avoid component override type errors since only palette and typography are used\ntype MuiTheme = Omit<Theme, 'components'>;\n\nexport function generateChartsTheme(\n  muiTheme: MuiTheme,\n  echartsTheme: EChartsTheme,\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): PersesChartsTheme {\n  const primaryTextColor = muiTheme.palette.text?.primary ?? DEFAULT_TEXT_COLOR;\n\n  const muiConvertedTheme: EChartsTheme = {\n    title: {\n      show: false,\n    },\n    textStyle: {\n      color: primaryTextColor,\n      fontFamily: muiTheme.typography.fontFamily,\n      fontSize: 12,\n    },\n    grid: {\n      top: 5,\n      right: 20,\n      bottom: 0,\n      left: 20,\n      containLabel: true,\n    },\n    // Accessible categorical palette from: https://davidmathlogic.com/colorblind\n    color: [\n      '#56B4E9', // lt blue\n      '#009E73', // med green\n      '#0072B2', // dk blue\n      '#CC79A7', // lt purple\n      '#F0E442', // yellow\n      '#E69F00', // orange\n      '#D55E00', // red\n    ],\n    categoryAxis: {\n      show: true,\n      axisLabel: {\n        show: true,\n        color: primaryTextColor,\n        margin: 15,\n      },\n      axisTick: {\n        show: false,\n        length: 6,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      axisLine: {\n        show: true,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.4,\n        },\n      },\n      splitArea: {\n        show: false,\n        areaStyle: {\n          color: [muiTheme.palette.grey[300]],\n        },\n      },\n    },\n    timeAxis: {\n      show: true,\n      axisLabel: {\n        show: true,\n        color: primaryTextColor,\n        margin: 15,\n      },\n      axisTick: {\n        show: false,\n        length: 6,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      axisLine: {\n        show: true,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.4,\n        },\n      },\n      splitArea: {\n        show: false,\n        areaStyle: {\n          color: [muiTheme.palette.grey[300]],\n        },\n      },\n    },\n    valueAxis: {\n      show: true,\n      axisLabel: {\n        color: primaryTextColor,\n        margin: 12,\n      },\n      axisLine: {\n        show: false,\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.6,\n        },\n      },\n    },\n    legend: {\n      orient: 'horizontal',\n      textStyle: {\n        color: primaryTextColor,\n      },\n      pageTextStyle: {\n        color: muiTheme.palette.grey[600],\n      },\n      pageIconColor: muiTheme?.palette?.action?.active,\n      pageIconInactiveColor: muiTheme?.palette?.action?.disabled,\n    },\n    toolbox: {\n      show: true,\n      top: 10,\n      right: 10,\n      iconStyle: {\n        borderColor: primaryTextColor,\n      },\n    },\n    tooltip: {\n      backgroundColor: muiTheme.palette.designSystem?.grey[800],\n      borderColor: muiTheme.palette.designSystem?.grey[800],\n      textStyle: {\n        color: '#fff',\n        fontSize: 11,\n      },\n    },\n    axisPointer: {\n      lineStyle: {\n        color: muiTheme.palette.grey[500],\n      },\n    },\n    markLine: {\n      symbol: 'none',\n      symbolSize: 0,\n      itemStyle: {\n        color: muiTheme.palette.grey[500],\n      },\n      lineStyle: {\n        type: 'dashed',\n        width: 1,\n      },\n    },\n    line: {\n      showSymbol: false,\n      symbol: 'circle',\n      symbolSize: 4,\n      smooth: false,\n      lineStyle: {\n        width: 1,\n      },\n      emphasis: {\n        lineStyle: {\n          width: 1.5,\n        },\n      },\n    },\n    bar: {\n      barMaxWidth: 150,\n      itemStyle: {\n        borderWidth: 0,\n        borderRadius: 0,\n        borderColor: muiTheme.palette.grey[300],\n      },\n      label: {\n        show: false,\n        color: primaryTextColor,\n      },\n    },\n    gauge: {\n      detail: {\n        fontSize: 18,\n        fontWeight: 600,\n        valueAnimation: false,\n      },\n      splitLine: {\n        distance: 0,\n        length: 4,\n        lineStyle: {\n          width: 1,\n        },\n      },\n      splitNumber: 12,\n    },\n  };\n\n  return {\n    tooltipPortalContainerId,\n    echartsTheme: merge(muiConvertedTheme, echartsTheme),\n    noDataOption: {\n      title: {\n        show: true,\n        textStyle: {\n          color: primaryTextColor,\n          fontSize: 16,\n          fontWeight: 400,\n        },\n        text: 'No data',\n        left: 'center',\n        top: 'center',\n      },\n      xAxis: {\n        show: false,\n      },\n      yAxis: {\n        show: false,\n      },\n    },\n    sparkline: {\n      width: 2,\n      color: '#1976d2',\n    },\n    container: {\n      padding: {\n        default: parseInt(muiTheme.spacing(1.5), 10),\n      },\n    },\n    thresholds: {\n      defaultColor: muiTheme.palette.success.main,\n      palette: ['#FFCC00', muiTheme.palette.warning.main, muiTheme.palette.error.main],\n    },\n  };\n}\n"],"names":["merge","DEFAULT_TEXT_COLOR","generateChartsTheme","muiTheme","echartsTheme","tooltipPortalContainerId","primaryTextColor","palette","text","primary","muiConvertedTheme","title","show","textStyle","color","fontFamily","typography","fontSize","grid","top","right","bottom","left","containLabel","categoryAxis","axisLabel","margin","axisTick","length","lineStyle","grey","axisLine","splitLine","width","opacity","splitArea","areaStyle","timeAxis","valueAxis","legend","orient","pageTextStyle","pageIconColor","action","active","pageIconInactiveColor","disabled","toolbox","iconStyle","borderColor","tooltip","backgroundColor","designSystem","axisPointer","markLine","symbol","symbolSize","itemStyle","type","line","showSymbol","smooth","emphasis","bar","barMaxWidth","borderWidth","borderRadius","label","gauge","detail","fontWeight","valueAnimation","distance","splitNumber","noDataOption","xAxis","yAxis","sparkline","container","padding","default","parseInt","spacing","thresholds","defaultColor","success","main","warning","error"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.0.0-snapshot-time-chart-rewrite-4667058",
+  "version": "0.0.0-snapshot-panel-extra-content-2-2767e21",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -36,7 +36,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "0.0.0-snapshot-time-chart-rewrite-4667058",
+    "@perses-dev/core": "0.0.0-snapshot-panel-extra-content-2-2767e21",
     "@tanstack/react-table": "^8.9.1",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",
@@ -50,7 +50,7 @@
     "react-virtuoso": "^4.3.6"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.0.0-snapshot-time-chart-rewrite-4667058"
+    "@perses-dev/storybook": "0.0.0-snapshot-panel-extra-content-2-2767e21"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.0",