@perses-dev/timeseries-chart-plugin 0.14.0-beta.8 → 0.14.0-rc.0

package/lib/TimeSeriesChartPanel.js

@@ -12,11 +12,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Box, useTheme } from "@mui/material";
-import { YAxisLabel, useChartsTheme, ContentWithLegend, useId, DEFAULT_TOOLTIP_CONFIG, getFormattedMultipleYAxes, DEFAULT_LEGEND, formatValue, getTimeSeriesValues } from "@perses-dev/components";
+import { YAxisLabel, useChartsTheme, ContentWithLegend, DEFAULT_TOOLTIP_CONFIG, getFormattedMultipleYAxes, DEFAULT_LEGEND, formatValue, getTimeSeriesValues } from "@perses-dev/components";
 import { usePanelAnnotationsWithData } from "@perses-dev/dashboards";
 import { LEGEND_VALUE_CONFIG, useTimeRange, validateLegendSpec, legendValues, getCalculations } from "@perses-dev/plugin-system";
 import merge from "lodash/merge";
-import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useId, useMemo, useRef, useState } from "react";
 import { DEFAULT_FORMAT, DEFAULT_VISUAL, THRESHOLD_PLOT_INTERVAL } from "./time-series-chart-model.js";
 import { TimeSeriesChartBase } from "./TimeSeriesChartBase.js";
 import { convertAnnotationToTimeSeriesAnnotation } from "./utils/annotation.js";
@@ -43,7 +43,7 @@ function TimeSeriesChartPanelComponent(props) {
     const { spec: { thresholds, yAxis, tooltip, querySettings: querySettingsList }, contentDimensions, queryResults } = props;
     const chartsTheme = useChartsTheme();
     const muiTheme = useTheme();
-    const chartId = useId('time-series-panel');
+    const chartId = useId();
     const chartRef = useRef(null);
     // ECharts theme comes from ChartsProvider, more info: https://echarts.apache.org/en/option.html#color
     // Colors are manually applied since our legend and tooltip are built custom with React.
@@ -179,7 +179,7 @@ function TimeSeriesChartPanelComponent(props) {
                         seriesId,
                         seriesName,
                         color: getSeriesColor({
-                            categoricalPalette: categoricalPalette,
+                            defaultCategoricalPalette: categoricalPalette,
                             visual,
                             muiPrimaryColor: muiTheme.palette.primary.main,
                             seriesName,
@@ -193,7 +193,7 @@ function TimeSeriesChartPanelComponent(props) {
                         exemplars: []
                     });
                 }
-                seriesIndex++;
+                seriesIndex += 1;
             }
             for (const group of exemplars ?? []){
                 if (group.exemplars.length === 0) continue;
@@ -246,7 +246,7 @@ function TimeSeriesChartPanelComponent(props) {
                 // Color is used for line, tooltip, and legend
                 const seriesColor = getSeriesColor({
                     // ECharts type for color is not always an array but it is always an array in ChartsProvider
-                    categoricalPalette: categoricalPalette,
+                    defaultCategoricalPalette: categoricalPalette,
                     visual,
                     muiPrimaryColor: muiTheme.palette.primary.main,
                     seriesName: formattedSeriesName,
@@ -331,7 +331,7 @@ function TimeSeriesChartPanelComponent(props) {
                     values: thresholdTimeValueTuple
                 });
                 timeSeriesMapping.push(getThresholdSeries(thresholdName, stepOption, seriesIndex));
-                seriesIndex++;
+                seriesIndex += 1;
             });
         }
         return {

package/lib/TimeSeriesChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesChartPanel.tsx"],"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 { Box, useTheme } from '@mui/material';\nimport type {\n  ChartInstance,\n  ZoomEventData,\n  SelectedLegendItemState,\n  TableColumnConfig,\n  LegendItem,\n  LegendProps,\n  TooltipConfig,\n  TimeChartSeriesMapping,\n  StepOptions,\n} from '@perses-dev/components';\nimport {\n  YAxisLabel,\n  useChartsTheme,\n  ContentWithLegend,\n  useId,\n  DEFAULT_TOOLTIP_CONFIG,\n  getFormattedMultipleYAxes,\n  DEFAULT_LEGEND,\n  formatValue,\n  getTimeSeriesValues,\n} from '@perses-dev/components';\nimport { usePanelAnnotationsWithData } from '@perses-dev/dashboards';\nimport type { PanelProps, CalculationType } from '@perses-dev/plugin-system';\nimport {\n  LEGEND_VALUE_CONFIG,\n  useTimeRange,\n  validateLegendSpec,\n  legendValues,\n  getCalculations,\n} from '@perses-dev/plugin-system';\nimport type { Labels, TimeSeries, TimeSeriesData, TimeSeriesValueTuple } from '@perses-dev/spec';\nimport type { GridComponentOption } from 'echarts';\nimport merge from 'lodash/merge';\nimport type { ReactElement } from 'react';\nimport { memo, useCallback, useMemo, useRef, useState } from 'react';\n\nimport type { TimeSeriesChartOptions } from './time-series-chart-model';\nimport { DEFAULT_FORMAT, DEFAULT_VISUAL, THRESHOLD_PLOT_INTERVAL } from './time-series-chart-model';\nimport { TimeSeriesChartBase } from './TimeSeriesChartBase';\nimport type { TimeSeriesAnnotation } from './utils/annotation';\nimport { convertAnnotationToTimeSeriesAnnotation } from './utils/annotation';\nimport type { ExemplarChartData } from './utils/data-transform';\nimport {\n  getTimeSeries,\n  getCommonTimeScaleForQueries,\n  convertPanelYAxis,\n  getThresholdSeries,\n  convertPercentThreshold,\n} from './utils/data-transform';\nimport { getSeriesColor } from './utils/palette-gen';\n\nexport type TimeSeriesChartProps = PanelProps<TimeSeriesChartOptions, TimeSeriesData>;\n\n/**\n * Stable string key for a labels record, so exemplars can be matched to their\n * series regardless of the labels order.\n */\nfunction labelsKey(labels: Labels): string {\n  return JSON.stringify(\n    Object.keys(labels)\n      .toSorted()\n      .map((labelName) => [labelName, labels[labelName]]),\n  );\n}\n\n// Using an \"ALL\" value to handle the case on first loading the chart where we\n// want to select all, but do not want all of the legend items to be visually highlighted.\n// This helps us differentiate those cases more clearly instead of inferring it\n// based on the state of the data. This also helps us avoid some coding\n// complexity around initializing a full record for the initial load that would\n// currently require significantly more refactoring of this component.\n// TODO: simplify this if we switch the list-based legend UI to use checkboxes,\n// where we *would* want to visually select all items in this case.\n\nfunction TimeSeriesChartPanelComponent(props: TimeSeriesChartProps): ReactElement | null {\n  const {\n    spec: { thresholds, yAxis, tooltip, querySettings: querySettingsList },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n  const chartId = useId('time-series-panel');\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ECharts theme comes from ChartsProvider, more info: https://echarts.apache.org/en/option.html#color\n  // Colors are manually applied since our legend and tooltip are built custom with React.\n  const categoricalPalette = chartsTheme.echartsTheme.color;\n\n  // TODO: consider refactoring how the layout/spacing/alignment are calculated\n  // the next time significant changes are made to the time series panel (e.g.\n  // when making improvements to the legend to more closely match designs).\n  // This may also want to include moving some of this logic down to the shared,\n  // embeddable components.\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  // populate default 'position' and other future properties\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  // TODO: add support for y_axis_alt.format\n  const format = props.spec.yAxis?.format ?? DEFAULT_FORMAT;\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n  const visual = useMemo(() => {\n    return merge({}, DEFAULT_VISUAL, props.spec.visual);\n  }, [props.spec.visual]);\n\n  // convert Perses dashboard format to be ECharts compatible\n  const echartsYAxis = useMemo(() => {\n    return convertPanelYAxis(yAxis);\n  }, [yAxis]);\n\n  // Collect unique formats from query settings that differ from the base format\n  // These will create additional Y axes on the right side\n  const { additionalFormats, formatToYAxisIndex } = useMemo(() => {\n    const baseUnit = format?.unit ?? 'decimal';\n    const additionalFormats: Array<typeof format> = [];\n    const formatToYAxisIndex = new Map<string, number>();\n\n    // Index 0 is reserved for the base Y axis\n    formatToYAxisIndex.set(baseUnit, 0);\n\n    // Collect unique formats from query settings\n    for (const qs of querySettingsList ?? []) {\n      if (qs.format?.unit && qs.format.unit !== baseUnit) {\n        const unitKey = qs.format.unit;\n        if (!formatToYAxisIndex.has(unitKey)) {\n          // Add new format - index is 1 + position in additionalFormats array\n          formatToYAxisIndex.set(unitKey, 1 + additionalFormats.length);\n          additionalFormats.push(qs.format);\n        }\n      }\n    }\n\n    return { additionalFormats, formatToYAxisIndex };\n  }, [format, querySettingsList]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const { setTimeRange } = useTimeRange();\n\n  const annotationsWithData = usePanelAnnotationsWithData(props.definition?.spec.annotations);\n\n  const annotations: TimeSeriesAnnotation[] = useMemo(\n    () => convertAnnotationToTimeSeriesAnnotation(annotationsWithData),\n    [annotationsWithData],\n  );\n\n  const calculationTypes = legend?.values;\n\n  // Point processing and legend statistics depend on query data, not legend selection.\n  // Reuse these arrays when toggling series instead of rescanning every sample.\n  const { timeScale, preparedQueries } = useMemo(() => {\n    const commonScale = getCommonTimeScaleForQueries(queryResults);\n    const settingsByQuery = new Map(querySettingsList?.map((settings) => [settings.queryIndex, settings]));\n    let seriesIndex = 0;\n    const queries = commonScale\n      ? queryResults.map((result, queryIndex) => {\n          const querySettings = settingsByQuery.get(queryIndex);\n          const series = result.data.series.map((timeSeries) => {\n            const baseValues = getTimeSeriesValues(timeSeries, commonScale);\n            const values = querySettings?.negativeY\n              ? baseValues.map(([t, v]): TimeSeriesValueTuple => [t, v === null ? null : -v])\n              : baseValues;\n            const calculations = calculationTypes\n              ? getCalculations(timeSeries.values, calculationTypes as CalculationType[])\n              : undefined;\n            let maxValue = 0;\n            if (querySettings?.format?.unit) {\n              for (const [, value] of timeSeries.values) {\n                maxValue = Math.max(maxValue, Math.abs(value ?? 0));\n              }\n            }\n            const seriesId = `${chartId}${timeSeries.name}${seriesIndex}`;\n            seriesIndex += 1;\n            return { timeSeries, seriesId, values, calculations, maxValue };\n          });\n          return { querySettings, series, exemplars: result.data.exemplars };\n        })\n      : [];\n    return { timeScale: commonScale, preparedQueries: queries };\n  }, [queryResults, querySettingsList, calculationTypes, chartId]);\n\n  // Prepare all exemplar groups independently of legend selection. The base chart\n  // filters their scatter series without rebuilding marker data for visible groups.\n  const chartExemplars = useMemo(() => {\n    const groups: ExemplarChartData[] = [];\n    let seriesIndex = 0;\n    for (const { querySettings, series, exemplars } of preparedQueries) {\n      // Labels identify a series within a query, not across different queries.\n      const seriesByLabels = new Map<string, ExemplarChartData>();\n      for (const { timeSeries, seriesId } of series) {\n        const seriesName = timeSeries.formattedName ?? timeSeries.name;\n        if (exemplars?.length && timeSeries.labels) {\n          seriesByLabels.set(labelsKey(timeSeries.labels), {\n            seriesId,\n            seriesName,\n            color: getSeriesColor({\n              categoricalPalette: categoricalPalette as string[],\n              visual,\n              muiPrimaryColor: muiTheme.palette.primary.main,\n              seriesName,\n              seriesIndex,\n              querySettings,\n              queryHasMultipleResults: series.length > 1,\n            }),\n            seriesLabels: timeSeries.labels,\n            yAxisIndex: formatToYAxisIndex.get(querySettings?.format?.unit ?? '') ?? 0,\n            negativeY: querySettings?.negativeY,\n            exemplars: [],\n          });\n        }\n        seriesIndex++;\n      }\n      for (const group of exemplars ?? []) {\n        if (group.exemplars.length === 0) continue;\n        const matched = seriesByLabels.get(labelsKey(group.seriesLabels));\n        if (matched) groups.push({ ...matched, exemplars: group.exemplars });\n      }\n    }\n    return groups;\n  }, [preparedQueries, categoricalPalette, visual, muiTheme.palette.primary.main, formatToYAxisIndex]);\n\n  // Populate series data based on query results\n  const {\n    timeChartData,\n    timeSeriesMapping,\n    legendItems,\n    seriesFormatMap: computedSeriesFormatMap,\n    maxValuesByFormat,\n  } = useMemo(() => {\n    if (timeScale === undefined) {\n      return {\n        timeChartData: [] as TimeSeries[],\n        timeSeriesMapping: [] as TimeChartSeriesMapping,\n        legendItems: [] as LegendItem[],\n        seriesFormatMap: new Map(),\n        maxValuesByFormat: new Map<string, number>(),\n      };\n    }\n\n    const legendItems: LegendItem[] = [];\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const timeChartData: TimeSeries[] = [];\n    const timeSeriesMapping: TimeChartSeriesMapping = [];\n\n    // Track max values for each format unit (used for dynamic Y axis offset calculation)\n    const maxValuesByFormat = new Map<string, number>();\n    const seriesFormatMap = new Map<string, typeof format>();\n\n    let visibleSeriesCount = 0;\n    for (const { series } of preparedQueries) {\n      for (const { seriesId } of series) {\n        if (selectedLegendItems === 'ALL' || selectedLegendItems[seriesId]) visibleSeriesCount++;\n      }\n    }\n\n    // Index is counted across multiple queries which ensures the categorical color palette does not reset for every query\n    let seriesIndex = 0;\n\n    for (const { querySettings, series } of preparedQueries) {\n      for (const { timeSeries, seriesId, values, calculations, maxValue } of series) {\n        // Format is determined by seriesNameFormat in query spec\n        const formattedSeriesName = timeSeries.formattedName ?? timeSeries.name;\n\n        // Color is used for line, tooltip, and legend\n        const seriesColor = getSeriesColor({\n          // ECharts type for color is not always an array but it is always an array in ChartsProvider\n          categoricalPalette: categoricalPalette as string[],\n          visual,\n          muiPrimaryColor: muiTheme.palette.primary.main,\n          seriesName: formattedSeriesName,\n          seriesIndex,\n          querySettings: querySettings,\n          queryHasMultipleResults: series.length > 1,\n        });\n\n        // When we initially load the chart, we want to show all series, but\n        // DO NOT want to visualy highlight all the items in the legend.\n        const isSelectAll = selectedLegendItems === 'ALL';\n        const isSelected = !isSelectAll && !!selectedLegendItems[seriesId];\n        const showTimeSeries = isSelected || isSelectAll;\n\n        if (showTimeSeries) {\n          // Use timeChartData.length to ensure the data that is passed into the tooltip accounts for\n          // which legend items are selected. This must happen before timeChartData.push to avoid an\n          // off-by-one error, seriesIndex cannot be used since it's needed to cycle through palette\n          const datasetIndex = timeChartData.length;\n\n          // Determine yAxisIndex based on the query's format setting\n          const queryFormat = querySettings?.format;\n          const yAxisIndex = queryFormat?.unit ? (formatToYAxisIndex.get(queryFormat.unit) ?? 0) : 0;\n\n          // Each series is stored as a separate dataset source.\n          // https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\n          timeSeriesMapping.push(\n            getTimeSeries(\n              seriesId,\n              datasetIndex,\n              formattedSeriesName,\n              visual,\n              timeScale,\n              seriesColor,\n              querySettings,\n              yAxisIndex,\n              visibleSeriesCount,\n            ),\n          );\n\n          // Store the format for this series for tooltip formatting\n          if (queryFormat) {\n            seriesFormatMap.set(seriesId, queryFormat);\n\n            // Track max value for this format unit (used for dynamic Y axis offset calculation)\n            const unitKey = queryFormat.unit;\n            if (unitKey) {\n              const currentMax = maxValuesByFormat.get(unitKey) ?? 0;\n              if (maxValue > currentMax) {\n                maxValuesByFormat.set(unitKey, maxValue);\n              }\n            }\n          }\n\n          timeChartData.push({\n            name: formattedSeriesName,\n            values,\n          });\n        }\n\n        if (legend && legendItems) {\n          legendItems.push({\n            id: seriesId, // Avoids duplicate key console errors when there are duplicate series names\n            label: formattedSeriesName,\n            color: seriesColor,\n            data: calculations,\n          });\n        }\n\n        // Used for repeating colors in Categorical palette\n        seriesIndex += 1;\n      }\n    }\n\n    // map thresholds only if there is at least one time series to avoid displaying thresholds without any data\n    if (thresholds && thresholds.steps && timeChartData.length > 0) {\n      // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.\n      // These are styled with predefined colors and a dashed style to look different than series from query results.\n      // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.\n      const thresholdsColors = chartsTheme.thresholds;\n      const defaultThresholdColor = thresholds.defaultColor ?? thresholdsColors.defaultColor;\n      thresholds.steps.forEach((step: StepOptions, index: number) => {\n        const stepPaletteColor = thresholdsColors.palette[index] ?? defaultThresholdColor;\n        const thresholdLineColor = step.color ?? stepPaletteColor;\n        const stepOption: StepOptions = {\n          color: thresholdLineColor,\n          value:\n            // yAxis is passed here since it corresponds to dashboard JSON instead of the already converted ECharts yAxis\n            thresholds.mode === 'percent'\n              ? convertPercentThreshold(step.value, timeChartData, yAxis?.max, yAxis?.min)\n              : step.value,\n        };\n        const thresholdName = step.name ?? `Threshold ${index + 1}`;\n\n        // Generates array of [time, step.value] where time ranges from timescale.startMs to timescale.endMs with an interval of 15s\n        const thresholdTimeValueTuple: TimeSeriesValueTuple[] = [];\n        let currentTimestamp = timeScale.startMs;\n        while (currentTimestamp <= timeScale.endMs) {\n          thresholdTimeValueTuple.push([currentTimestamp, stepOption.value]);\n          // Used to plot fake thresholds datapoints so correct nearby threshold series shows in tooltip without flicker\n          currentTimestamp += 1000 * THRESHOLD_PLOT_INTERVAL;\n        }\n\n        timeChartData.push({\n          name: thresholdName,\n          values: thresholdTimeValueTuple,\n        });\n        timeSeriesMapping.push(getThresholdSeries(thresholdName, stepOption, seriesIndex));\n        seriesIndex++;\n      });\n    }\n\n    return {\n      timeScale,\n      timeChartData,\n      timeSeriesMapping,\n      legendItems,\n      seriesFormatMap,\n      maxValuesByFormat,\n    };\n  }, [\n    preparedQueries,\n    timeScale,\n    thresholds,\n    selectedLegendItems,\n    legend,\n    visual,\n    yAxis?.max,\n    yAxis?.min,\n    categoricalPalette,\n    chartsTheme.thresholds,\n    muiTheme.palette.primary.main,\n    formatToYAxisIndex,\n  ]);\n\n  // Create multiple Y axes if there are additional formats\n  // Uses max values from data to compute dynamic offsets that adapt to label widths\n  const multipleYAxes = useMemo(() => {\n    if (additionalFormats.length === 0) {\n      return undefined; // Use single Y axis (default behavior)\n    }\n    // Build array of max values for each additional format (in order)\n    const maxValues = additionalFormats.map((fmt) => {\n      const unitKey = fmt.unit;\n      return unitKey ? (maxValuesByFormat?.get(unitKey) ?? 1000) : 1000;\n    });\n    return getFormattedMultipleYAxes(echartsYAxis, format, additionalFormats, maxValues);\n  }, [echartsYAxis, format, additionalFormats, maxValuesByFormat]);\n\n  // Translate the legend values into columns for the table legend.\n  const legendColumns = useMemo(() => {\n    if (!legend?.values) {\n      return [];\n    }\n\n    // Iterating the predefined list of possible values to retain a specific\n    // intended order of values.\n    return legendValues.reduce(\n      (columns, legendValue) => {\n        const legendConfig = LEGEND_VALUE_CONFIG[legendValue];\n\n        if (legendConfig && legend?.values?.includes(legendValue)) {\n          columns.push({\n            accessorKey: `data.${legendValue}`,\n            header: legendConfig.label,\n            headerDescription: legendConfig.description,\n            // Intentionally hardcoding a column width to start based on discussions\n            // with design around keeping this simple to start. This may need\n            // revisiting in the future to handle edge cases with very large values.\n            width: 72,\n            align: 'right',\n            cell: ({ getValue }) => {\n              const cellValue = getValue();\n              return typeof cellValue === 'number' && format ? formatValue(cellValue, format) : cellValue;\n            },\n            cellDescription: true,\n            enableSorting: true,\n          });\n        }\n\n        return columns;\n      },\n      [] as Array<TableColumnConfig<LegendItem>>,\n    );\n  }, [legend?.values, format]);\n\n  const gridOverrides: GridComponentOption = useMemo(() => {\n    // When Y axes are hidden, disable containLabel to prevent auto-spacing, but add bottom padding for X axis\n    return echartsYAxis.show === false\n      ? {\n          left: 0,\n          right: 0,\n          bottom: 30,\n          containLabel: false,\n        }\n      : {\n          left: yAxis && yAxis.label ? 30 : 20,\n          // With containLabel: true in theme, ECharts auto-reserves space for axis labels.\n          // For multiple right axes, add extra padding for the last axis labels that extend beyond the grid.\n          right: additionalFormats.length > 0 ? 10 : 20,\n          bottom: 0,\n          containLabel: true,\n        };\n  }, [echartsYAxis.show, yAxis, additionalFormats.length]);\n\n  const handleDataZoom = useCallback(\n    (event: ZoomEventData): void => {\n      setTimeRange({ start: new Date(event.start), end: new Date(event.end) });\n    },\n    [setTimeRange],\n  );\n\n  if (adjustedContentDimensions === undefined) {\n    return null;\n  }\n\n  // Used to opt in to ECharts trigger item which show subgroup data accurately.\n  // Derived from the actual series mapping rather than `visual.stack` alone so that\n  // bar charts stacked only via per-query overrides also use the right tooltip mode.\n  const isStackedBar =\n    visual.display === 'bar' && timeSeriesMapping.some((s) => s?.type === 'bar' && s.stack === 'all');\n\n  // Turn on tooltip pinning by default but opt out for stacked bar or if explicitly set in tooltip panel spec\n  let enablePinning = true;\n  if (isStackedBar) {\n    enablePinning = false;\n  } else if (tooltip?.enablePinning !== undefined) {\n    enablePinning = tooltip.enablePinning;\n  }\n  const tooltipConfig: TooltipConfig = {\n    ...DEFAULT_TOOLTIP_CONFIG,\n    enablePinning,\n  };\n\n  return (\n    <Box sx={{ padding: `${contentPadding}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions.width}\n        height={adjustedContentDimensions.height}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems || [],\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: legendColumns,\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              {yAxis && yAxis.show && yAxis.label && <YAxisLabel name={yAxis.label} height={height} />}\n              <TimeSeriesChartBase\n                ref={chartRef}\n                height={height}\n                data={timeChartData}\n                seriesMapping={timeSeriesMapping}\n                exemplars={chartExemplars}\n                annotations={annotations}\n                timeScale={timeScale}\n                yAxis={multipleYAxes ?? echartsYAxis}\n                format={format}\n                seriesFormatMap={computedSeriesFormatMap}\n                grid={gridOverrides}\n                isStackedBar={isStackedBar}\n                tooltipConfig={tooltipConfig}\n                syncGroup=\"default-panel-group\" // TODO: make configurable from dashboard settings and per panel-group overrides\n                onDataZoom={handleDataZoom}\n                //  Show an empty chart when there is no data because the user unselected all items in\n                // the legend. Otherwise, show a \"no data\" message.\n                noDataVariant={!timeChartData.length && legendItems && legendItems.length > 0 ? 'chart' : 'message'}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n\n// PanelContent recreates the queryResults array and its wrappers on dashboard\n// hover/focus updates. Compare the underlying references in query order so those\n// updates do not invalidate data preparation or scan the samples and exemplars.\nexport const TimeSeriesChartPanel = memo(\n  TimeSeriesChartPanelComponent,\n  (previous, next): boolean =>\n    previous.spec === next.spec &&\n    previous.definition === next.definition &&\n    previous.contentDimensions?.width === next.contentDimensions?.width &&\n    previous.contentDimensions?.height === next.contentDimensions?.height &&\n    previous.queryResults.length === next.queryResults.length &&\n    previous.queryResults.every(\n      (query, index) =>\n        query.data === next.queryResults[index]?.data && query.definition === next.queryResults[index]?.definition,\n    ),\n);\n"],"names":["Box","useTheme","YAxisLabel","useChartsTheme","ContentWithLegend","useId","DEFAULT_TOOLTIP_CONFIG","getFormattedMultipleYAxes","DEFAULT_LEGEND","formatValue","getTimeSeriesValues","usePanelAnnotationsWithData","LEGEND_VALUE_CONFIG","useTimeRange","validateLegendSpec","legendValues","getCalculations","merge","memo","useCallback","useMemo","useRef","useState","DEFAULT_FORMAT","DEFAULT_VISUAL","THRESHOLD_PLOT_INTERVAL","TimeSeriesChartBase","convertAnnotationToTimeSeriesAnnotation","getTimeSeries","getCommonTimeScaleForQueries","convertPanelYAxis","getThresholdSeries","convertPercentThreshold","getSeriesColor","labelsKey","labels","JSON","stringify","Object","keys","toSorted","map","labelName","TimeSeriesChartPanelComponent","props","spec","thresholds","yAxis","tooltip","querySettings","querySettingsList","contentDimensions","queryResults","chartsTheme","muiTheme","chartId","chartRef","categoricalPalette","echartsTheme","color","contentPadding","container","padding","default","adjustedContentDimensions","width","height","undefined","legend","format","visual","echartsYAxis","additionalFormats","formatToYAxisIndex","baseUnit","unit","Map","set","qs","unitKey","has","length","push","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","setTimeRange","annotationsWithData","definition","annotations","calculationTypes","values","timeScale","preparedQueries","commonScale","settingsByQuery","settings","queryIndex","seriesIndex","queries","result","get","series","data","timeSeries","baseValues","negativeY","t","v","calculations","maxValue","value","Math","max","abs","seriesId","name","exemplars","chartExemplars","groups","seriesByLabels","seriesName","formattedName","muiPrimaryColor","palette","primary","main","queryHasMultipleResults","seriesLabels","yAxisIndex","group","matched","timeChartData","timeSeriesMapping","legendItems","seriesFormatMap","computedSeriesFormatMap","maxValuesByFormat","visibleSeriesCount","formattedSeriesName","seriesColor","isSelectAll","isSelected","showTimeSeries","datasetIndex","queryFormat","currentMax","id","label","steps","thresholdsColors","defaultThresholdColor","defaultColor","forEach","step","index","stepPaletteColor","thresholdLineColor","stepOption","mode","min","thresholdName","thresholdTimeValueTuple","currentTimestamp","startMs","endMs","multipleYAxes","maxValues","fmt","legendColumns","reduce","columns","legendValue","legendConfig","includes","accessorKey","header","headerDescription","description","align","cell","getValue","cellValue","cellDescription","enableSorting","gridOverrides","show","left","right","bottom","containLabel","handleDataZoom","event","start","Date","end","isStackedBar","display","some","s","type","stack","enablePinning","tooltipConfig","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style","ref","seriesMapping","grid","syncGroup","onDataZoom","noDataVariant","TimeSeriesChartPanel","previous","next","every","query"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesChartPanel.tsx"],"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 { Box, useTheme } from '@mui/material';\nimport type {\n  ChartInstance,\n  ZoomEventData,\n  SelectedLegendItemState,\n  TableColumnConfig,\n  LegendItem,\n  LegendProps,\n  TooltipConfig,\n  TimeChartSeriesMapping,\n  StepOptions,\n} from '@perses-dev/components';\nimport {\n  YAxisLabel,\n  useChartsTheme,\n  ContentWithLegend,\n  DEFAULT_TOOLTIP_CONFIG,\n  getFormattedMultipleYAxes,\n  DEFAULT_LEGEND,\n  formatValue,\n  getTimeSeriesValues,\n} from '@perses-dev/components';\nimport { usePanelAnnotationsWithData } from '@perses-dev/dashboards';\nimport type { PanelProps, CalculationType } from '@perses-dev/plugin-system';\nimport {\n  LEGEND_VALUE_CONFIG,\n  useTimeRange,\n  validateLegendSpec,\n  legendValues,\n  getCalculations,\n} from '@perses-dev/plugin-system';\nimport type { Labels, TimeSeries, TimeSeriesData, TimeSeriesValueTuple } from '@perses-dev/spec';\nimport type { GridComponentOption } from 'echarts';\nimport merge from 'lodash/merge';\nimport type { ReactElement } from 'react';\nimport { memo, useCallback, useId, useMemo, useRef, useState } from 'react';\n\nimport type { TimeSeriesChartOptions } from './time-series-chart-model';\nimport { DEFAULT_FORMAT, DEFAULT_VISUAL, THRESHOLD_PLOT_INTERVAL } from './time-series-chart-model';\nimport { TimeSeriesChartBase } from './TimeSeriesChartBase';\nimport type { TimeSeriesAnnotation } from './utils/annotation';\nimport { convertAnnotationToTimeSeriesAnnotation } from './utils/annotation';\nimport type { ExemplarChartData } from './utils/data-transform';\nimport {\n  getTimeSeries,\n  getCommonTimeScaleForQueries,\n  convertPanelYAxis,\n  getThresholdSeries,\n  convertPercentThreshold,\n} from './utils/data-transform';\nimport { getSeriesColor } from './utils/palette-gen';\n\nexport type TimeSeriesChartProps = PanelProps<TimeSeriesChartOptions, TimeSeriesData>;\n\n/**\n * Stable string key for a labels record, so exemplars can be matched to their\n * series regardless of the labels order.\n */\nfunction labelsKey(labels: Labels): string {\n  return JSON.stringify(\n    Object.keys(labels)\n      .toSorted()\n      .map((labelName) => [labelName, labels[labelName]]),\n  );\n}\n\n// Using an \"ALL\" value to handle the case on first loading the chart where we\n// want to select all, but do not want all of the legend items to be visually highlighted.\n// This helps us differentiate those cases more clearly instead of inferring it\n// based on the state of the data. This also helps us avoid some coding\n// complexity around initializing a full record for the initial load that would\n// currently require significantly more refactoring of this component.\n// TODO: simplify this if we switch the list-based legend UI to use checkboxes,\n// where we *would* want to visually select all items in this case.\n\nfunction TimeSeriesChartPanelComponent(props: TimeSeriesChartProps): ReactElement | null {\n  const {\n    spec: { thresholds, yAxis, tooltip, querySettings: querySettingsList },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n  const chartId = useId();\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ECharts theme comes from ChartsProvider, more info: https://echarts.apache.org/en/option.html#color\n  // Colors are manually applied since our legend and tooltip are built custom with React.\n  const categoricalPalette = chartsTheme.echartsTheme.color;\n\n  // TODO: consider refactoring how the layout/spacing/alignment are calculated\n  // the next time significant changes are made to the time series panel (e.g.\n  // when making improvements to the legend to more closely match designs).\n  // This may also want to include moving some of this logic down to the shared,\n  // embeddable components.\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  // populate default 'position' and other future properties\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  // TODO: add support for y_axis_alt.format\n  const format = props.spec.yAxis?.format ?? DEFAULT_FORMAT;\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n  const visual = useMemo(() => {\n    return merge({}, DEFAULT_VISUAL, props.spec.visual);\n  }, [props.spec.visual]);\n\n  // convert Perses dashboard format to be ECharts compatible\n  const echartsYAxis = useMemo(() => {\n    return convertPanelYAxis(yAxis);\n  }, [yAxis]);\n\n  // Collect unique formats from query settings that differ from the base format\n  // These will create additional Y axes on the right side\n  const { additionalFormats, formatToYAxisIndex } = useMemo(() => {\n    const baseUnit = format?.unit ?? 'decimal';\n    const additionalFormats: Array<typeof format> = [];\n    const formatToYAxisIndex = new Map<string, number>();\n\n    // Index 0 is reserved for the base Y axis\n    formatToYAxisIndex.set(baseUnit, 0);\n\n    // Collect unique formats from query settings\n    for (const qs of querySettingsList ?? []) {\n      if (qs.format?.unit && qs.format.unit !== baseUnit) {\n        const unitKey = qs.format.unit;\n        if (!formatToYAxisIndex.has(unitKey)) {\n          // Add new format - index is 1 + position in additionalFormats array\n          formatToYAxisIndex.set(unitKey, 1 + additionalFormats.length);\n          additionalFormats.push(qs.format);\n        }\n      }\n    }\n\n    return { additionalFormats, formatToYAxisIndex };\n  }, [format, querySettingsList]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const { setTimeRange } = useTimeRange();\n\n  const annotationsWithData = usePanelAnnotationsWithData(props.definition?.spec.annotations);\n\n  const annotations: TimeSeriesAnnotation[] = useMemo(\n    () => convertAnnotationToTimeSeriesAnnotation(annotationsWithData),\n    [annotationsWithData],\n  );\n\n  const calculationTypes = legend?.values;\n\n  // Point processing and legend statistics depend on query data, not legend selection.\n  // Reuse these arrays when toggling series instead of rescanning every sample.\n  const { timeScale, preparedQueries } = useMemo(() => {\n    const commonScale = getCommonTimeScaleForQueries(queryResults);\n    const settingsByQuery = new Map(querySettingsList?.map((settings) => [settings.queryIndex, settings]));\n    let seriesIndex = 0;\n    const queries = commonScale\n      ? queryResults.map((result, queryIndex) => {\n          const querySettings = settingsByQuery.get(queryIndex);\n          const series = result.data.series.map((timeSeries) => {\n            const baseValues = getTimeSeriesValues(timeSeries, commonScale);\n            const values = querySettings?.negativeY\n              ? baseValues.map(([t, v]): TimeSeriesValueTuple => [t, v === null ? null : -v])\n              : baseValues;\n            const calculations = calculationTypes\n              ? getCalculations(timeSeries.values, calculationTypes as CalculationType[])\n              : undefined;\n            let maxValue = 0;\n            if (querySettings?.format?.unit) {\n              for (const [, value] of timeSeries.values) {\n                maxValue = Math.max(maxValue, Math.abs(value ?? 0));\n              }\n            }\n            const seriesId = `${chartId}${timeSeries.name}${seriesIndex}`;\n            seriesIndex += 1;\n            return { timeSeries, seriesId, values, calculations, maxValue };\n          });\n          return { querySettings, series, exemplars: result.data.exemplars };\n        })\n      : [];\n    return { timeScale: commonScale, preparedQueries: queries };\n  }, [queryResults, querySettingsList, calculationTypes, chartId]);\n\n  // Prepare all exemplar groups independently of legend selection. The base chart\n  // filters their scatter series without rebuilding marker data for visible groups.\n  const chartExemplars = useMemo(() => {\n    const groups: ExemplarChartData[] = [];\n    let seriesIndex = 0;\n    for (const { querySettings, series, exemplars } of preparedQueries) {\n      // Labels identify a series within a query, not across different queries.\n      const seriesByLabels = new Map<string, ExemplarChartData>();\n      for (const { timeSeries, seriesId } of series) {\n        const seriesName = timeSeries.formattedName ?? timeSeries.name;\n        if (exemplars?.length && timeSeries.labels) {\n          seriesByLabels.set(labelsKey(timeSeries.labels), {\n            seriesId,\n            seriesName,\n            color: getSeriesColor({\n              defaultCategoricalPalette: categoricalPalette as string[],\n              visual,\n              muiPrimaryColor: muiTheme.palette.primary.main,\n              seriesName,\n              seriesIndex,\n              querySettings,\n              queryHasMultipleResults: series.length > 1,\n            }),\n            seriesLabels: timeSeries.labels,\n            yAxisIndex: formatToYAxisIndex.get(querySettings?.format?.unit ?? '') ?? 0,\n            negativeY: querySettings?.negativeY,\n            exemplars: [],\n          });\n        }\n        seriesIndex += 1;\n      }\n      for (const group of exemplars ?? []) {\n        if (group.exemplars.length === 0) continue;\n        const matched = seriesByLabels.get(labelsKey(group.seriesLabels));\n        if (matched) groups.push({ ...matched, exemplars: group.exemplars });\n      }\n    }\n    return groups;\n  }, [preparedQueries, categoricalPalette, visual, muiTheme.palette.primary.main, formatToYAxisIndex]);\n\n  // Populate series data based on query results\n  const {\n    timeChartData,\n    timeSeriesMapping,\n    legendItems,\n    seriesFormatMap: computedSeriesFormatMap,\n    maxValuesByFormat,\n  } = useMemo(() => {\n    if (timeScale === undefined) {\n      return {\n        timeChartData: [] as TimeSeries[],\n        timeSeriesMapping: [] as TimeChartSeriesMapping,\n        legendItems: [] as LegendItem[],\n        seriesFormatMap: new Map(),\n        maxValuesByFormat: new Map<string, number>(),\n      };\n    }\n\n    const legendItems: LegendItem[] = [];\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const timeChartData: TimeSeries[] = [];\n    const timeSeriesMapping: TimeChartSeriesMapping = [];\n\n    // Track max values for each format unit (used for dynamic Y axis offset calculation)\n    const maxValuesByFormat = new Map<string, number>();\n    const seriesFormatMap = new Map<string, typeof format>();\n\n    let visibleSeriesCount = 0;\n    for (const { series } of preparedQueries) {\n      for (const { seriesId } of series) {\n        if (selectedLegendItems === 'ALL' || selectedLegendItems[seriesId]) visibleSeriesCount++;\n      }\n    }\n\n    // Index is counted across multiple queries which ensures the categorical color palette does not reset for every query\n    let seriesIndex = 0;\n\n    for (const { querySettings, series } of preparedQueries) {\n      for (const { timeSeries, seriesId, values, calculations, maxValue } of series) {\n        // Format is determined by seriesNameFormat in query spec\n        const formattedSeriesName = timeSeries.formattedName ?? timeSeries.name;\n\n        // Color is used for line, tooltip, and legend\n        const seriesColor = getSeriesColor({\n          // ECharts type for color is not always an array but it is always an array in ChartsProvider\n          defaultCategoricalPalette: categoricalPalette as string[],\n          visual,\n          muiPrimaryColor: muiTheme.palette.primary.main,\n          seriesName: formattedSeriesName,\n          seriesIndex,\n          querySettings: querySettings,\n          queryHasMultipleResults: series.length > 1,\n        });\n\n        // When we initially load the chart, we want to show all series, but\n        // DO NOT want to visualy highlight all the items in the legend.\n        const isSelectAll = selectedLegendItems === 'ALL';\n        const isSelected = !isSelectAll && !!selectedLegendItems[seriesId];\n        const showTimeSeries = isSelected || isSelectAll;\n\n        if (showTimeSeries) {\n          // Use timeChartData.length to ensure the data that is passed into the tooltip accounts for\n          // which legend items are selected. This must happen before timeChartData.push to avoid an\n          // off-by-one error, seriesIndex cannot be used since it's needed to cycle through palette\n          const datasetIndex = timeChartData.length;\n\n          // Determine yAxisIndex based on the query's format setting\n          const queryFormat = querySettings?.format;\n          const yAxisIndex = queryFormat?.unit ? (formatToYAxisIndex.get(queryFormat.unit) ?? 0) : 0;\n\n          // Each series is stored as a separate dataset source.\n          // https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\n          timeSeriesMapping.push(\n            getTimeSeries(\n              seriesId,\n              datasetIndex,\n              formattedSeriesName,\n              visual,\n              timeScale,\n              seriesColor,\n              querySettings,\n              yAxisIndex,\n              visibleSeriesCount,\n            ),\n          );\n\n          // Store the format for this series for tooltip formatting\n          if (queryFormat) {\n            seriesFormatMap.set(seriesId, queryFormat);\n\n            // Track max value for this format unit (used for dynamic Y axis offset calculation)\n            const unitKey = queryFormat.unit;\n            if (unitKey) {\n              const currentMax = maxValuesByFormat.get(unitKey) ?? 0;\n              if (maxValue > currentMax) {\n                maxValuesByFormat.set(unitKey, maxValue);\n              }\n            }\n          }\n\n          timeChartData.push({\n            name: formattedSeriesName,\n            values,\n          });\n        }\n\n        if (legend && legendItems) {\n          legendItems.push({\n            id: seriesId, // Avoids duplicate key console errors when there are duplicate series names\n            label: formattedSeriesName,\n            color: seriesColor,\n            data: calculations,\n          });\n        }\n\n        // Used for repeating colors in Categorical palette\n        seriesIndex += 1;\n      }\n    }\n\n    // map thresholds only if there is at least one time series to avoid displaying thresholds without any data\n    if (thresholds && thresholds.steps && timeChartData.length > 0) {\n      // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.\n      // These are styled with predefined colors and a dashed style to look different than series from query results.\n      // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.\n      const thresholdsColors = chartsTheme.thresholds;\n      const defaultThresholdColor = thresholds.defaultColor ?? thresholdsColors.defaultColor;\n      thresholds.steps.forEach((step: StepOptions, index: number) => {\n        const stepPaletteColor = thresholdsColors.palette[index] ?? defaultThresholdColor;\n        const thresholdLineColor = step.color ?? stepPaletteColor;\n        const stepOption: StepOptions = {\n          color: thresholdLineColor,\n          value:\n            // yAxis is passed here since it corresponds to dashboard JSON instead of the already converted ECharts yAxis\n            thresholds.mode === 'percent'\n              ? convertPercentThreshold(step.value, timeChartData, yAxis?.max, yAxis?.min)\n              : step.value,\n        };\n        const thresholdName = step.name ?? `Threshold ${index + 1}`;\n\n        // Generates array of [time, step.value] where time ranges from timescale.startMs to timescale.endMs with an interval of 15s\n        const thresholdTimeValueTuple: TimeSeriesValueTuple[] = [];\n        let currentTimestamp = timeScale.startMs;\n        while (currentTimestamp <= timeScale.endMs) {\n          thresholdTimeValueTuple.push([currentTimestamp, stepOption.value]);\n          // Used to plot fake thresholds datapoints so correct nearby threshold series shows in tooltip without flicker\n          currentTimestamp += 1000 * THRESHOLD_PLOT_INTERVAL;\n        }\n\n        timeChartData.push({\n          name: thresholdName,\n          values: thresholdTimeValueTuple,\n        });\n        timeSeriesMapping.push(getThresholdSeries(thresholdName, stepOption, seriesIndex));\n        seriesIndex += 1;\n      });\n    }\n\n    return {\n      timeScale,\n      timeChartData,\n      timeSeriesMapping,\n      legendItems,\n      seriesFormatMap,\n      maxValuesByFormat,\n    };\n  }, [\n    preparedQueries,\n    timeScale,\n    thresholds,\n    selectedLegendItems,\n    legend,\n    visual,\n    yAxis?.max,\n    yAxis?.min,\n    categoricalPalette,\n    chartsTheme.thresholds,\n    muiTheme.palette.primary.main,\n    formatToYAxisIndex,\n  ]);\n\n  // Create multiple Y axes if there are additional formats\n  // Uses max values from data to compute dynamic offsets that adapt to label widths\n  const multipleYAxes = useMemo(() => {\n    if (additionalFormats.length === 0) {\n      return undefined; // Use single Y axis (default behavior)\n    }\n    // Build array of max values for each additional format (in order)\n    const maxValues = additionalFormats.map((fmt) => {\n      const unitKey = fmt.unit;\n      return unitKey ? (maxValuesByFormat?.get(unitKey) ?? 1000) : 1000;\n    });\n    return getFormattedMultipleYAxes(echartsYAxis, format, additionalFormats, maxValues);\n  }, [echartsYAxis, format, additionalFormats, maxValuesByFormat]);\n\n  // Translate the legend values into columns for the table legend.\n  const legendColumns = useMemo(() => {\n    if (!legend?.values) {\n      return [];\n    }\n\n    // Iterating the predefined list of possible values to retain a specific\n    // intended order of values.\n    return legendValues.reduce(\n      (columns, legendValue) => {\n        const legendConfig = LEGEND_VALUE_CONFIG[legendValue];\n\n        if (legendConfig && legend?.values?.includes(legendValue)) {\n          columns.push({\n            accessorKey: `data.${legendValue}`,\n            header: legendConfig.label,\n            headerDescription: legendConfig.description,\n            // Intentionally hardcoding a column width to start based on discussions\n            // with design around keeping this simple to start. This may need\n            // revisiting in the future to handle edge cases with very large values.\n            width: 72,\n            align: 'right',\n            cell: ({ getValue }) => {\n              const cellValue = getValue();\n              return typeof cellValue === 'number' && format ? formatValue(cellValue, format) : cellValue;\n            },\n            cellDescription: true,\n            enableSorting: true,\n          });\n        }\n\n        return columns;\n      },\n      [] as Array<TableColumnConfig<LegendItem>>,\n    );\n  }, [legend?.values, format]);\n\n  const gridOverrides: GridComponentOption = useMemo(() => {\n    // When Y axes are hidden, disable containLabel to prevent auto-spacing, but add bottom padding for X axis\n    return echartsYAxis.show === false\n      ? {\n          left: 0,\n          right: 0,\n          bottom: 30,\n          containLabel: false,\n        }\n      : {\n          left: yAxis && yAxis.label ? 30 : 20,\n          // With containLabel: true in theme, ECharts auto-reserves space for axis labels.\n          // For multiple right axes, add extra padding for the last axis labels that extend beyond the grid.\n          right: additionalFormats.length > 0 ? 10 : 20,\n          bottom: 0,\n          containLabel: true,\n        };\n  }, [echartsYAxis.show, yAxis, additionalFormats.length]);\n\n  const handleDataZoom = useCallback(\n    (event: ZoomEventData): void => {\n      setTimeRange({ start: new Date(event.start), end: new Date(event.end) });\n    },\n    [setTimeRange],\n  );\n\n  if (adjustedContentDimensions === undefined) {\n    return null;\n  }\n\n  // Used to opt in to ECharts trigger item which show subgroup data accurately.\n  // Derived from the actual series mapping rather than `visual.stack` alone so that\n  // bar charts stacked only via per-query overrides also use the right tooltip mode.\n  const isStackedBar =\n    visual.display === 'bar' && timeSeriesMapping.some((s) => s?.type === 'bar' && s.stack === 'all');\n\n  // Turn on tooltip pinning by default but opt out for stacked bar or if explicitly set in tooltip panel spec\n  let enablePinning = true;\n  if (isStackedBar) {\n    enablePinning = false;\n  } else if (tooltip?.enablePinning !== undefined) {\n    enablePinning = tooltip.enablePinning;\n  }\n  const tooltipConfig: TooltipConfig = {\n    ...DEFAULT_TOOLTIP_CONFIG,\n    enablePinning,\n  };\n\n  return (\n    <Box sx={{ padding: `${contentPadding}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions.width}\n        height={adjustedContentDimensions.height}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems || [],\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: legendColumns,\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              {yAxis && yAxis.show && yAxis.label && <YAxisLabel name={yAxis.label} height={height} />}\n              <TimeSeriesChartBase\n                ref={chartRef}\n                height={height}\n                data={timeChartData}\n                seriesMapping={timeSeriesMapping}\n                exemplars={chartExemplars}\n                annotations={annotations}\n                timeScale={timeScale}\n                yAxis={multipleYAxes ?? echartsYAxis}\n                format={format}\n                seriesFormatMap={computedSeriesFormatMap}\n                grid={gridOverrides}\n                isStackedBar={isStackedBar}\n                tooltipConfig={tooltipConfig}\n                syncGroup=\"default-panel-group\" // TODO: make configurable from dashboard settings and per panel-group overrides\n                onDataZoom={handleDataZoom}\n                //  Show an empty chart when there is no data because the user unselected all items in\n                // the legend. Otherwise, show a \"no data\" message.\n                noDataVariant={!timeChartData.length && legendItems && legendItems.length > 0 ? 'chart' : 'message'}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n\n// PanelContent recreates the queryResults array and its wrappers on dashboard\n// hover/focus updates. Compare the underlying references in query order so those\n// updates do not invalidate data preparation or scan the samples and exemplars.\nexport const TimeSeriesChartPanel = memo(\n  TimeSeriesChartPanelComponent,\n  (previous, next): boolean =>\n    previous.spec === next.spec &&\n    previous.definition === next.definition &&\n    previous.contentDimensions?.width === next.contentDimensions?.width &&\n    previous.contentDimensions?.height === next.contentDimensions?.height &&\n    previous.queryResults.length === next.queryResults.length &&\n    previous.queryResults.every(\n      (query, index) =>\n        query.data === next.queryResults[index]?.data && query.definition === next.queryResults[index]?.definition,\n    ),\n);\n"],"names":["Box","useTheme","YAxisLabel","useChartsTheme","ContentWithLegend","DEFAULT_TOOLTIP_CONFIG","getFormattedMultipleYAxes","DEFAULT_LEGEND","formatValue","getTimeSeriesValues","usePanelAnnotationsWithData","LEGEND_VALUE_CONFIG","useTimeRange","validateLegendSpec","legendValues","getCalculations","merge","memo","useCallback","useId","useMemo","useRef","useState","DEFAULT_FORMAT","DEFAULT_VISUAL","THRESHOLD_PLOT_INTERVAL","TimeSeriesChartBase","convertAnnotationToTimeSeriesAnnotation","getTimeSeries","getCommonTimeScaleForQueries","convertPanelYAxis","getThresholdSeries","convertPercentThreshold","getSeriesColor","labelsKey","labels","JSON","stringify","Object","keys","toSorted","map","labelName","TimeSeriesChartPanelComponent","props","spec","thresholds","yAxis","tooltip","querySettings","querySettingsList","contentDimensions","queryResults","chartsTheme","muiTheme","chartId","chartRef","categoricalPalette","echartsTheme","color","contentPadding","container","padding","default","adjustedContentDimensions","width","height","undefined","legend","format","visual","echartsYAxis","additionalFormats","formatToYAxisIndex","baseUnit","unit","Map","set","qs","unitKey","has","length","push","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","setTimeRange","annotationsWithData","definition","annotations","calculationTypes","values","timeScale","preparedQueries","commonScale","settingsByQuery","settings","queryIndex","seriesIndex","queries","result","get","series","data","timeSeries","baseValues","negativeY","t","v","calculations","maxValue","value","Math","max","abs","seriesId","name","exemplars","chartExemplars","groups","seriesByLabels","seriesName","formattedName","defaultCategoricalPalette","muiPrimaryColor","palette","primary","main","queryHasMultipleResults","seriesLabels","yAxisIndex","group","matched","timeChartData","timeSeriesMapping","legendItems","seriesFormatMap","computedSeriesFormatMap","maxValuesByFormat","visibleSeriesCount","formattedSeriesName","seriesColor","isSelectAll","isSelected","showTimeSeries","datasetIndex","queryFormat","currentMax","id","label","steps","thresholdsColors","defaultThresholdColor","defaultColor","forEach","step","index","stepPaletteColor","thresholdLineColor","stepOption","mode","min","thresholdName","thresholdTimeValueTuple","currentTimestamp","startMs","endMs","multipleYAxes","maxValues","fmt","legendColumns","reduce","columns","legendValue","legendConfig","includes","accessorKey","header","headerDescription","description","align","cell","getValue","cellValue","cellDescription","enableSorting","gridOverrides","show","left","right","bottom","containLabel","handleDataZoom","event","start","Date","end","isStackedBar","display","some","s","type","stack","enablePinning","tooltipConfig","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style","ref","seriesMapping","grid","syncGroup","onDataZoom","noDataVariant","TimeSeriesChartPanel","previous","next","every","query"],"mappings":"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"}

package/lib/VisualOptionsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualOptionsEditor.d.ts","sourceRoot":"","sources":["../../src/VisualOptionsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAgB,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAe5F,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,4BAA4B,CAAC;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE,4BAA4B,KAAK,IAAI,CAAC;CAC1D;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAsJ/F"}
+{"version":3,"file":"VisualOptionsEditor.d.ts","sourceRoot":"","sources":["../../src/VisualOptionsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAgB,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAe5F,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,4BAA4B,CAAC;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE,4BAA4B,KAAK,IAAI,CAAC;CAC1D;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAuJ/F"}

package/lib/VisualOptionsEditor.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Slider, Switch, ToggleButton, ToggleButtonGroup } from "@mui/material";
 import { OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from "@perses-dev/components";
 import { produce } from "immer";
+import { PaletteSelector } from "./components/PaletteSelector.js";
 import { DEFAULT_AREA_OPACITY, DEFAULT_CONNECT_NULLS, DEFAULT_LINE_WIDTH, DEFAULT_LINE_STYLE, DEFAULT_POINT_RADIUS, POINT_SIZE_OFFSET, STACK_CONFIG, STACK_OPTIONS, LINE_STYLE_CONFIG, VISUAL_CONFIG, DEFAULT_DISPLAY } from "./time-series-chart-model.js";
 export function VisualOptionsEditor({ value, onChange }) {
     const handleLineWidthChange = (_, sliderValue)=>{
@@ -58,6 +59,13 @@ export function VisualOptionsEditor({ value, onChange }) {
                     disableClearable: true
                 })
             }),
+            /*#__PURE__*/ _jsx(PaletteSelector, {
+                value: value.palette,
+                onChange: (palette)=>onChange({
+                        ...value,
+                        palette
+                    })
+            }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Display",
                 control: /*#__PURE__*/ _jsxs(ToggleButtonGroup, {

package/lib/VisualOptionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/VisualOptionsEditor.tsx"],"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 { Slider, Switch, ToggleButton, ToggleButtonGroup } from '@mui/material';\nimport { OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\nimport { produce } from 'immer';\nimport type { ReactElement } from 'react';\n\nimport type { StackOptions, TimeSeriesChartVisualOptions } from './time-series-chart-model';\nimport {\n  DEFAULT_AREA_OPACITY,\n  DEFAULT_CONNECT_NULLS,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_LINE_STYLE,\n  DEFAULT_POINT_RADIUS,\n  POINT_SIZE_OFFSET,\n  STACK_CONFIG,\n  STACK_OPTIONS,\n  LINE_STYLE_CONFIG,\n  VISUAL_CONFIG,\n  DEFAULT_DISPLAY,\n} from './time-series-chart-model';\n\nexport interface VisualOptionsEditorProps {\n  value: TimeSeriesChartVisualOptions;\n  onChange: (visual: TimeSeriesChartVisualOptions) => void;\n}\n\nexport function VisualOptionsEditor({ value, onChange }: VisualOptionsEditorProps): ReactElement {\n  const handleLineWidthChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    const symbolSize = newValue !== undefined ? newValue + POINT_SIZE_OFFSET : DEFAULT_POINT_RADIUS;\n    onChange(\n      produce(value, (draft) => {\n        draft.lineWidth = newValue;\n        draft.pointRadius = symbolSize;\n      }),\n    );\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    onChange(\n      produce(value, (draft) => {\n        draft.areaOpacity = newValue;\n      }),\n    );\n  };\n\n  const currentStack: StackOptions = value.stack ?? 'none';\n  const stackConfig = STACK_CONFIG[currentStack];\n\n  return (\n    <OptionsEditorGroup title=\"Visual\">\n      <OptionsEditorControl\n        label={VISUAL_CONFIG.stack.label}\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...stackConfig,\n              id: currentStack,\n            }}\n            options={STACK_OPTIONS}\n            onChange={(__, newValue) => {\n              const updatedValue: TimeSeriesChartVisualOptions = {\n                ...value,\n                stack: newValue.id === 'none' ? undefined : newValue.id,\n              };\n              // stacked area chart preset to automatically set area under a curve shading\n              if (newValue.id === 'all' && !value.areaOpacity) {\n                updatedValue.areaOpacity = 0.3;\n              }\n              onChange(updatedValue);\n            }}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Display\"\n        control={\n          <ToggleButtonGroup\n            color=\"primary\"\n            exclusive\n            value={value.display ?? DEFAULT_DISPLAY}\n            onChange={(__, newValue) => {\n              onChange({\n                ...value,\n                display: newValue,\n              });\n            }}\n          >\n            <ToggleButton\n              value=\"line\"\n              selected={value.display === undefined || value.display === 'line'}\n              aria-label=\"display line series\"\n            >\n              Line\n            </ToggleButton>\n            <ToggleButton value=\"bar\" aria-label=\"display bar series\">\n              Bar\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {value.display === 'line' && (\n        <>\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineWidth.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.lineWidth.testId}\n                value={value.lineWidth ?? DEFAULT_LINE_WIDTH}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.lineWidth.step}\n                marks\n                min={VISUAL_CONFIG.lineWidth.min}\n                max={VISUAL_CONFIG.lineWidth.max}\n                onChange={handleLineWidthChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineStyle.label}\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={value.lineStyle ?? DEFAULT_LINE_STYLE}\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    lineStyle: newValue,\n                  });\n                }}\n              >\n                {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                  <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                    {config.label}\n                  </ToggleButton>\n                ))}\n              </ToggleButtonGroup>\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.areaOpacity.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.areaOpacity.testId}\n                value={value.areaOpacity ?? DEFAULT_AREA_OPACITY}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.areaOpacity.step}\n                marks\n                min={VISUAL_CONFIG.areaOpacity.min}\n                max={VISUAL_CONFIG.areaOpacity.max}\n                onChange={handleAreaOpacityChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.connectNulls.label}\n            control={\n              <Switch\n                checked={value.connectNulls ?? DEFAULT_CONNECT_NULLS}\n                onChange={(e) => {\n                  onChange({\n                    ...value,\n                    connectNulls: e.target.checked,\n                  });\n                }}\n              />\n            }\n          />\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Slider","Switch","ToggleButton","ToggleButtonGroup","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","produce","DEFAULT_AREA_OPACITY","DEFAULT_CONNECT_NULLS","DEFAULT_LINE_WIDTH","DEFAULT_LINE_STYLE","DEFAULT_POINT_RADIUS","POINT_SIZE_OFFSET","STACK_CONFIG","STACK_OPTIONS","LINE_STYLE_CONFIG","VISUAL_CONFIG","DEFAULT_DISPLAY","VisualOptionsEditor","value","onChange","handleLineWidthChange","_","sliderValue","newValue","Array","isArray","symbolSize","undefined","draft","lineWidth","pointRadius","handleAreaOpacityChange","areaOpacity","currentStack","stack","stackConfig","title","label","control","id","options","__","updatedValue","disabled","disableClearable","color","exclusive","display","selected","aria-label","data-testid","testId","valueLabelDisplay","step","marks","min","max","lineStyle","Object","entries","map","styleValue","config","connectNulls","checked","e","target"],"mappings":"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"}
+{"version":3,"sources":["../../src/VisualOptionsEditor.tsx"],"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 { Slider, Switch, ToggleButton, ToggleButtonGroup } from '@mui/material';\nimport { OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\nimport { produce } from 'immer';\nimport type { ReactElement } from 'react';\n\nimport { PaletteSelector } from './components/PaletteSelector';\nimport type { StackOptions, TimeSeriesChartVisualOptions } from './time-series-chart-model';\nimport {\n  DEFAULT_AREA_OPACITY,\n  DEFAULT_CONNECT_NULLS,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_LINE_STYLE,\n  DEFAULT_POINT_RADIUS,\n  POINT_SIZE_OFFSET,\n  STACK_CONFIG,\n  STACK_OPTIONS,\n  LINE_STYLE_CONFIG,\n  VISUAL_CONFIG,\n  DEFAULT_DISPLAY,\n} from './time-series-chart-model';\n\nexport interface VisualOptionsEditorProps {\n  value: TimeSeriesChartVisualOptions;\n  onChange: (visual: TimeSeriesChartVisualOptions) => void;\n}\n\nexport function VisualOptionsEditor({ value, onChange }: VisualOptionsEditorProps): ReactElement {\n  const handleLineWidthChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    const symbolSize = newValue !== undefined ? newValue + POINT_SIZE_OFFSET : DEFAULT_POINT_RADIUS;\n    onChange(\n      produce(value, (draft) => {\n        draft.lineWidth = newValue;\n        draft.pointRadius = symbolSize;\n      }),\n    );\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    onChange(\n      produce(value, (draft) => {\n        draft.areaOpacity = newValue;\n      }),\n    );\n  };\n\n  const currentStack: StackOptions = value.stack ?? 'none';\n  const stackConfig = STACK_CONFIG[currentStack];\n\n  return (\n    <OptionsEditorGroup title=\"Visual\">\n      <OptionsEditorControl\n        label={VISUAL_CONFIG.stack.label}\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...stackConfig,\n              id: currentStack,\n            }}\n            options={STACK_OPTIONS}\n            onChange={(__, newValue) => {\n              const updatedValue: TimeSeriesChartVisualOptions = {\n                ...value,\n                stack: newValue.id === 'none' ? undefined : newValue.id,\n              };\n              // stacked area chart preset to automatically set area under a curve shading\n              if (newValue.id === 'all' && !value.areaOpacity) {\n                updatedValue.areaOpacity = 0.3;\n              }\n              onChange(updatedValue);\n            }}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <PaletteSelector value={value.palette} onChange={(palette) => onChange({ ...value, palette })} />\n      <OptionsEditorControl\n        label=\"Display\"\n        control={\n          <ToggleButtonGroup\n            color=\"primary\"\n            exclusive\n            value={value.display ?? DEFAULT_DISPLAY}\n            onChange={(__, newValue) => {\n              onChange({\n                ...value,\n                display: newValue,\n              });\n            }}\n          >\n            <ToggleButton\n              value=\"line\"\n              selected={value.display === undefined || value.display === 'line'}\n              aria-label=\"display line series\"\n            >\n              Line\n            </ToggleButton>\n            <ToggleButton value=\"bar\" aria-label=\"display bar series\">\n              Bar\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {value.display === 'line' && (\n        <>\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineWidth.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.lineWidth.testId}\n                value={value.lineWidth ?? DEFAULT_LINE_WIDTH}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.lineWidth.step}\n                marks\n                min={VISUAL_CONFIG.lineWidth.min}\n                max={VISUAL_CONFIG.lineWidth.max}\n                onChange={handleLineWidthChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineStyle.label}\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={value.lineStyle ?? DEFAULT_LINE_STYLE}\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    lineStyle: newValue,\n                  });\n                }}\n              >\n                {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                  <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                    {config.label}\n                  </ToggleButton>\n                ))}\n              </ToggleButtonGroup>\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.areaOpacity.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.areaOpacity.testId}\n                value={value.areaOpacity ?? DEFAULT_AREA_OPACITY}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.areaOpacity.step}\n                marks\n                min={VISUAL_CONFIG.areaOpacity.min}\n                max={VISUAL_CONFIG.areaOpacity.max}\n                onChange={handleAreaOpacityChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.connectNulls.label}\n            control={\n              <Switch\n                checked={value.connectNulls ?? DEFAULT_CONNECT_NULLS}\n                onChange={(e) => {\n                  onChange({\n                    ...value,\n                    connectNulls: e.target.checked,\n                  });\n                }}\n              />\n            }\n          />\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Slider","Switch","ToggleButton","ToggleButtonGroup","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","produce","PaletteSelector","DEFAULT_AREA_OPACITY","DEFAULT_CONNECT_NULLS","DEFAULT_LINE_WIDTH","DEFAULT_LINE_STYLE","DEFAULT_POINT_RADIUS","POINT_SIZE_OFFSET","STACK_CONFIG","STACK_OPTIONS","LINE_STYLE_CONFIG","VISUAL_CONFIG","DEFAULT_DISPLAY","VisualOptionsEditor","value","onChange","handleLineWidthChange","_","sliderValue","newValue","Array","isArray","symbolSize","undefined","draft","lineWidth","pointRadius","handleAreaOpacityChange","areaOpacity","currentStack","stack","stackConfig","title","label","control","id","options","__","updatedValue","disabled","disableClearable","palette","color","exclusive","display","selected","aria-label","data-testid","testId","valueLabelDisplay","step","marks","min","max","lineStyle","Object","entries","map","styleValue","config","connectNulls","checked","e","target"],"mappings":"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"}

package/lib/annotations/AnnotationTooltip.d.ts

@@ -1,6 +1,7 @@
 import type { CursorCoordinates } from '@perses-dev/components';
-import type { LineSeriesOption } from 'echarts';
+import type { LineSeriesOption, YAXisComponentOption } from 'echarts';
 import type { TimeSeriesAnnotation } from '../utils/annotation';
+export declare const ANNOTATION_Y_AXIS: YAXisComponentOption;
 export interface AnnotationTooltipProps {
     annotation: TimeSeriesAnnotation;
     containerId?: string;
@@ -14,5 +15,5 @@ export declare function AnnotationTooltip({ annotation, containerId, formatWithU
  * Build ECharts series options for rendering annotations as markArea (range),
  * markLine (vertical dashed lines) and markPoint (triangle markers under the X-axis).
  */
-export declare function buildAnnotationSeries(annotations: TimeSeriesAnnotation[] | undefined): LineSeriesOption[];
+export declare function buildAnnotationSeries(annotations: TimeSeriesAnnotation[] | undefined, annotationYAxisIndex: number): LineSeriesOption[];
 //# sourceMappingURL=AnnotationTooltip.d.ts.map

package/lib/annotations/AnnotationTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationTooltip.d.ts","sourceRoot":"","sources":["../../../src/annotations/AnnotationTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAYhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IACrE,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,SAAS,EACT,aAAoB,EACpB,YAAY,GACb,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA2G7C;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,oBAAoB,EAAE,GAAG,SAAS,GAAG,gBAAgB,EAAE,CAwHzG"}
+{"version":3,"file":"AnnotationTooltip.d.ts","sourceRoot":"","sources":["../../../src/annotations/AnnotationTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAYhE,OAAO,KAAK,EAAE,gBAAgB,EAA4B,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAKhG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGhE,eAAO,MAAM,iBAAiB,EAAE,oBAM/B,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IACrE,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,SAAS,EACT,aAAoB,EACpB,YAAY,GACb,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA2G7C;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAC/C,oBAAoB,EAAE,MAAM,GAC3B,gBAAgB,EAAE,CAiIpB"}

package/lib/annotations/AnnotationTooltip.js

@@ -17,6 +17,16 @@ import { DEFAULT_ANNOTATION_COLOR } from "@perses-dev/plugin-system";
 import Pin from "mdi-material-ui/Pin";
 import PinOutline from "mdi-material-ui/PinOutline";
 import useResizeObserver from "use-resize-observer";
+// Hidden Y axis to guarantee annotations being shown
+export const ANNOTATION_Y_AXIS = {
+    type: 'value',
+    show: false,
+    min: 0,
+    max: 1,
+    axisLabel: {
+        show: false
+    }
+};
 export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZone, pinnedPos, enablePinning = true, onUnpinClick }) {
     const mousePos = useMousePosition();
     const { height, width, ref: tooltipRef } = useResizeObserver();
@@ -198,11 +208,10 @@ export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZ
 /**
  * Build ECharts series options for rendering annotations as markArea (range),
  * markLine (vertical dashed lines) and markPoint (triangle markers under the X-axis).
- */ export function buildAnnotationSeries(annotations) {
+ */ export function buildAnnotationSeries(annotations, annotationYAxisIndex) {
     if (!annotations?.length) return [];
     const markAreaData = [];
     const markLineData = [];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const markPointData = [];
     annotations.forEach((annotation, index)=>{
         const color = annotation.color ?? DEFAULT_ANNOTATION_COLOR;
@@ -251,6 +260,7 @@ export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZ
                 false
             ]){
                 markPointData.push({
+                    name: '',
                     coord: [
                         isStart ? annotation.start : annotation.end,
                         0
@@ -292,6 +302,7 @@ export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZ
             });
             // Add point marker
             markPointData.push({
+                name: '',
                 coord: [
                     annotation.start,
                     0
@@ -317,6 +328,7 @@ export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZ
     const series = {
         type: 'line',
         data: [],
+        yAxisIndex: annotationYAxisIndex,
         silent: false,
         markArea: markAreaData.length > 0 ? {
             silent: true,

package/lib/annotations/AnnotationTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/annotations/AnnotationTooltip.tsx"],"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 { Box, Divider, Portal, Stack, Typography } from '@mui/material';\nimport type { CursorCoordinates } from '@perses-dev/components';\nimport {\n  assembleTransform,\n  getDateAndTime,\n  getTooltipStyles,\n  PIN_TOOLTIP_HELP_TEXT,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  UNPIN_TOOLTIP_HELP_TEXT,\n  useMousePosition,\n} from '@perses-dev/components';\nimport { DEFAULT_ANNOTATION_COLOR } from '@perses-dev/plugin-system';\nimport type { LineSeriesOption } from 'echarts';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { TimeSeriesAnnotation } from '../utils/annotation';\n\nexport interface AnnotationTooltipProps {\n  annotation: TimeSeriesAnnotation;\n  containerId?: string;\n  formatWithUserTimeZone: (date: Date, formatString: string) => string;\n  pinnedPos: CursorCoordinates | null;\n  enablePinning?: boolean;\n  onUnpinClick?: () => void;\n}\n\nexport function AnnotationTooltip({\n  annotation,\n  containerId,\n  formatWithUserTimeZone,\n  pinnedPos,\n  enablePinning = true,\n  onUnpinClick,\n}: AnnotationTooltipProps): JSX.Element | null {\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver<HTMLDivElement>();\n\n  const isPinned = pinnedPos !== null;\n  if (!isPinned && mousePos === null) return null;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  const transform = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const start = getDateAndTime(annotation.start, formatWithUserTimeZone);\n  const end = annotation.end !== undefined ? getDateAndTime(annotation.end, formatWithUserTimeZone) : null;\n\n  return (\n    <Portal container={containerElement}>\n      <Box ref={tooltipRef} sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)} style={{ transform }}>\n        <Stack spacing={0.5}>\n          <Box\n            sx={(theme) => ({\n              width: '100%',\n              maxWidth: TOOLTIP_MAX_WIDTH,\n              padding: theme.spacing(1.5, 2, 0.5, 2),\n              backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n              position: 'sticky',\n              top: 0,\n              left: 0,\n            })}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 0.5, width: '100%' }}>\n              <Box\n                sx={{\n                  width: 8,\n                  height: 8,\n                  borderRadius: '50%',\n                  backgroundColor: annotation.color ?? DEFAULT_ANNOTATION_COLOR,\n                  marginRight: 1,\n                  flexShrink: 0,\n                }}\n              />\n              <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n                <Typography variant=\"caption\">\n                  {start.formattedDate} - <strong>{start.formattedTime}</strong>\n                </Typography>\n                {end && (\n                  <>\n                    <Typography variant=\"caption\">{' → '}</Typography>\n                    <Typography variant=\"caption\">\n                      {end.formattedDate} - <strong>{end.formattedTime}</strong>\n                    </Typography>\n                  </>\n                )}\n              </Box>\n              {enablePinning && (\n                <Stack direction=\"row\" alignItems=\"center\" sx={{ marginLeft: 1, flexShrink: 0 }}>\n                  <Typography sx={{ marginRight: 0.5, fontSize: 11, verticalAlign: 'middle' }}>\n                    {isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT}\n                  </Typography>\n                  {isPinned ? (\n                    <Pin\n                      onClick={() => {\n                        if (onUnpinClick !== undefined) onUnpinClick();\n                      }}\n                      sx={{ fontSize: 16, cursor: 'pointer' }}\n                    />\n                  ) : (\n                    <PinOutline sx={{ fontSize: 16 }} />\n                  )}\n                </Stack>\n              )}\n            </Box>\n            <Divider sx={(theme) => ({ width: '100%', borderColor: theme.palette.grey['500'] })} />\n          </Box>\n          <Box sx={(theme) => ({ padding: theme.spacing(0.5, 2, 1.5, 2) })}>\n            {annotation.title && (\n              <Typography variant=\"caption\" sx={{ display: 'block', fontWeight: 'bold', marginBottom: 0.5 }}>\n                {annotation.title}\n              </Typography>\n            )}\n            {annotation.legend && (\n              <Typography variant=\"caption\" sx={{ display: 'block', marginBottom: 0.5 }}>\n                {annotation.legend}\n              </Typography>\n            )}\n            {annotation.tags && Object.keys(annotation.tags).length > 0 && (\n              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, marginTop: 0.5 }}>\n                {Object.entries(annotation.tags).map(([key, value]) => (\n                  <Box\n                    key={key}\n                    sx={(theme) => ({\n                      backgroundColor: theme.palette.grey['700'],\n                      borderRadius: '4px',\n                      padding: '2px 6px',\n                      fontSize: '0.7rem',\n                      fontFamily: 'monospace',\n                    })}\n                  >\n                    {key}: {value}\n                  </Box>\n                ))}\n              </Box>\n            )}\n          </Box>\n        </Stack>\n      </Box>\n    </Portal>\n  );\n}\n\n/**\n * Build ECharts series options for rendering annotations as markArea (range),\n * markLine (vertical dashed lines) and markPoint (triangle markers under the X-axis).\n */\nexport function buildAnnotationSeries(annotations: TimeSeriesAnnotation[] | undefined): LineSeriesOption[] {\n  if (!annotations?.length) return [];\n\n  const markAreaData: Array<[{ xAxis: number; itemStyle?: { color: string; opacity: number } }, { xAxis: number }]> =\n    [];\n  const markLineData: Array<{\n    xAxis: number;\n    lineStyle?: { color: string; width: number; type: 'dashed' | 'solid' | 'dotted' };\n    label?: { show: boolean };\n    annotationIndex?: number;\n  }> = [];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const markPointData: any[] = [];\n\n  annotations.forEach((annotation, index) => {\n    const color = annotation.color ?? DEFAULT_ANNOTATION_COLOR;\n    const opacity = 0.3;\n\n    if (annotation.end !== undefined) {\n      // Range annotation - use markArea and markLine (silent) + markers at start/end\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markLineData.push({\n        xAxis: annotation.end,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markAreaData.push([\n        {\n          xAxis: annotation.start,\n          itemStyle: { color, opacity },\n        },\n        { xAxis: annotation.end },\n      ]);\n\n      // Add start and end markers\n      for (const isStart of [true, false]) {\n        markPointData.push({\n          coord: [isStart ? annotation.start : annotation.end, 0],\n          symbol: 'triangle',\n          symbolSize: [12, 12],\n          symbolRotate: 0,\n          symbolOffset: [0, 4], // Position below X-axis\n          itemStyle: { color },\n          annotationIndex: index,\n          emphasis: {\n            disabled: true,\n          },\n          isStart: isStart,\n          isEnd: !isStart,\n        });\n      }\n    } else {\n      // Point annotation - use markLine (silent) + single marker\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      // Add point marker\n      markPointData.push({\n        coord: [annotation.start, 0],\n        symbol: 'triangle',\n        symbolSize: [12, 10],\n        symbolRotate: 0,\n        symbolOffset: [0, '120%'], // Position below X-axis\n        itemStyle: { color },\n        annotationIndex: index,\n        isPoint: true,\n      });\n    }\n  });\n\n  const series: LineSeriesOption = {\n    type: 'line',\n    data: [],\n    silent: false,\n    markArea:\n      markAreaData.length > 0\n        ? {\n            silent: true, // Make area silent, only markers are interactive\n            data: markAreaData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n    markLine:\n      markLineData.length > 0\n        ? {\n            silent: true, // Non-interactive: hovering the dashed line keeps the TimeSeries tooltip\n            symbol: ['none', 'none'],\n            data: markLineData,\n            lineStyle: {\n              type: 'dashed',\n            },\n          }\n        : undefined,\n    markPoint:\n      markPointData.length > 0\n        ? {\n            silent: false, // Markers are interactive\n            data: markPointData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n  };\n\n  return [series];\n}\n"],"names":["Box","Divider","Portal","Stack","Typography","assembleTransform","getDateAndTime","getTooltipStyles","PIN_TOOLTIP_HELP_TEXT","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","UNPIN_TOOLTIP_HELP_TEXT","useMousePosition","DEFAULT_ANNOTATION_COLOR","Pin","PinOutline","useResizeObserver","AnnotationTooltip","annotation","containerId","formatWithUserTimeZone","pinnedPos","enablePinning","onUnpinClick","mousePos","height","width","ref","tooltipRef","isPinned","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","transform","start","end","container","sx","theme","style","spacing","maxWidth","padding","backgroundColor","palette","designSystem","grey","position","top","left","display","alignItems","paddingBottom","borderRadius","color","marginRight","flexShrink","flexGrow","minWidth","variant","formattedDate","strong","formattedTime","direction","marginLeft","fontSize","verticalAlign","onClick","cursor","borderColor","title","fontWeight","marginBottom","legend","tags","Object","keys","length","flexWrap","gap","marginTop","entries","map","key","value","fontFamily","buildAnnotationSeries","annotations","markAreaData","markLineData","markPointData","forEach","index","opacity","push","xAxis","lineStyle","type","label","show","annotationIndex","itemStyle","isStart","coord","symbol","symbolSize","symbolRotate","symbolOffset","emphasis","disabled","isEnd","isPoint","series","data","silent","markArea","markLine","markPoint"],"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,GAAG,EAAEC,OAAO,EAAEC,MAAM,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAExE,SACEC,iBAAiB,EACjBC,cAAc,EACdC,gBAAgB,EAChBC,qBAAqB,EACrBC,yBAAyB,EACzBC,iBAAiB,EACjBC,uBAAuB,EACvBC,gBAAgB,QACX,yBAAyB;AAChC,SAASC,wBAAwB,QAAQ,4BAA4B;AAErE,OAAOC,SAAS,sBAAsB;AACtC,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,uBAAuB,sBAAsB;AAapD,OAAO,SAASC,kBAAkB,EAChCC,UAAU,EACVC,WAAW,EACXC,sBAAsB,EACtBC,SAAS,EACTC,gBAAgB,IAAI,EACpBC,YAAY,EACW;IACvB,MAAMC,WAAWZ;IACjB,MAAM,EAAEa,MAAM,EAAEC,KAAK,EAAEC,KAAKC,UAAU,EAAE,GAAGZ;IAE3C,MAAMa,WAAWR,cAAc;IAC/B,IAAI,CAACQ,YAAYL,aAAa,MAAM,OAAO;IAE3C,MAAMM,mBAAmBX,cAAcY,SAASC,aAAa,CAACb,eAAec;IAC7E,MAAMC,YAAYJ,mBAAmBA,iBAAiBK,qBAAqB,GAAGV,MAAM,GAAGQ;IACvF,MAAMG,YAAY/B,kBAAkBmB,UAAUH,WAAWI,UAAU,GAAGC,SAAS,GAAGI;IAElF,MAAMO,QAAQ/B,eAAeY,WAAWmB,KAAK,EAAEjB;IAC/C,MAAMkB,MAAMpB,WAAWoB,GAAG,KAAKL,YAAY3B,eAAeY,WAAWoB,GAAG,EAAElB,0BAA0B;IAEpG,qBACE,KAAClB;QAAOqC,WAAWT;kBACjB,cAAA,KAAC9B;YAAI2B,KAAKC;YAAYY,IAAI,CAACC,QAAUlC,iBAAiBkC,OAAOpB,WAAWa;YAAYQ,OAAO;gBAAEN;YAAU;sBACrG,cAAA,MAACjC;gBAAMwC,SAAS;;kCACd,MAAC3C;wBACCwC,IAAI,CAACC,QAAW,CAAA;gCACdf,OAAO;gCACPkB,UAAUlC;gCACVmC,SAASJ,MAAME,OAAO,CAAC,KAAK,GAAG,KAAK;gCACpCG,iBAAiBL,MAAMM,OAAO,CAACC,YAAY,EAAEC,IAAI,CAAC,IAAI,IAAIxC;gCAC1DyC,UAAU;gCACVC,KAAK;gCACLC,MAAM;4BACR,CAAA;;0CAEA,MAACpD;gCAAIwC,IAAI;oCAAEa,SAAS;oCAAQC,YAAY;oCAAUC,eAAe;oCAAK7B,OAAO;gCAAO;;kDAClF,KAAC1B;wCACCwC,IAAI;4CACFd,OAAO;4CACPD,QAAQ;4CACR+B,cAAc;4CACdV,iBAAiB5B,WAAWuC,KAAK,IAAI5C;4CACrC6C,aAAa;4CACbC,YAAY;wCACd;;kDAEF,MAAC3D;wCAAIwC,IAAI;4CAAEoB,UAAU;4CAAGC,UAAU;wCAAE;;0DAClC,MAACzD;gDAAW0D,SAAQ;;oDACjBzB,MAAM0B,aAAa;oDAAC;kEAAG,KAACC;kEAAQ3B,MAAM4B,aAAa;;;;4CAErD3B,qBACC;;kEACE,KAAClC;wDAAW0D,SAAQ;kEAAW;;kEAC/B,MAAC1D;wDAAW0D,SAAQ;;4DACjBxB,IAAIyB,aAAa;4DAAC;0EAAG,KAACC;0EAAQ1B,IAAI2B,aAAa;;;;;;;;oCAKvD3C,+BACC,MAACnB;wCAAM+D,WAAU;wCAAMZ,YAAW;wCAASd,IAAI;4CAAE2B,YAAY;4CAAGR,YAAY;wCAAE;;0DAC5E,KAACvD;gDAAWoC,IAAI;oDAAEkB,aAAa;oDAAKU,UAAU;oDAAIC,eAAe;gDAAS;0DACvExC,WAAWlB,0BAA0BH;;4CAEvCqB,yBACC,KAACf;gDACCwD,SAAS;oDACP,IAAI/C,iBAAiBU,WAAWV;gDAClC;gDACAiB,IAAI;oDAAE4B,UAAU;oDAAIG,QAAQ;gDAAU;+DAGxC,KAACxD;gDAAWyB,IAAI;oDAAE4B,UAAU;gDAAG;;;;;;0CAKvC,KAACnE;gCAAQuC,IAAI,CAACC,QAAW,CAAA;wCAAEf,OAAO;wCAAQ8C,aAAa/B,MAAMM,OAAO,CAACE,IAAI,CAAC,MAAM;oCAAC,CAAA;;;;kCAEnF,MAACjD;wBAAIwC,IAAI,CAACC,QAAW,CAAA;gCAAEI,SAASJ,MAAME,OAAO,CAAC,KAAK,GAAG,KAAK;4BAAG,CAAA;;4BAC3DzB,WAAWuD,KAAK,kBACf,KAACrE;gCAAW0D,SAAQ;gCAAUtB,IAAI;oCAAEa,SAAS;oCAASqB,YAAY;oCAAQC,cAAc;gCAAI;0CACzFzD,WAAWuD,KAAK;;4BAGpBvD,WAAW0D,MAAM,kBAChB,KAACxE;gCAAW0D,SAAQ;gCAAUtB,IAAI;oCAAEa,SAAS;oCAASsB,cAAc;gCAAI;0CACrEzD,WAAW0D,MAAM;;4BAGrB1D,WAAW2D,IAAI,IAAIC,OAAOC,IAAI,CAAC7D,WAAW2D,IAAI,EAAEG,MAAM,GAAG,mBACxD,KAAChF;gCAAIwC,IAAI;oCAAEa,SAAS;oCAAQ4B,UAAU;oCAAQC,KAAK;oCAAKC,WAAW;gCAAI;0CACpEL,OAAOM,OAAO,CAAClE,WAAW2D,IAAI,EAAEQ,GAAG,CAAC,CAAC,CAACC,KAAKC,MAAM,iBAChD,MAACvF;wCAECwC,IAAI,CAACC,QAAW,CAAA;gDACdK,iBAAiBL,MAAMM,OAAO,CAACE,IAAI,CAAC,MAAM;gDAC1CO,cAAc;gDACdX,SAAS;gDACTuB,UAAU;gDACVoB,YAAY;4CACd,CAAA;;4CAECF;4CAAI;4CAAGC;;uCATHD;;;;;;;;AAmBzB;AAEA;;;CAGC,GACD,OAAO,SAASG,sBAAsBC,WAA+C;IACnF,IAAI,CAACA,aAAaV,QAAQ,OAAO,EAAE;IAEnC,MAAMW,eACJ,EAAE;IACJ,MAAMC,eAKD,EAAE;IACP,8DAA8D;IAC9D,MAAMC,gBAAuB,EAAE;IAE/BH,YAAYI,OAAO,CAAC,CAAC5E,YAAY6E;QAC/B,MAAMtC,QAAQvC,WAAWuC,KAAK,IAAI5C;QAClC,MAAMmF,UAAU;QAEhB,IAAI9E,WAAWoB,GAAG,KAAKL,WAAW;YAChC,+EAA+E;YAC/E2D,aAAaK,IAAI,CAAC;gBAChBC,OAAOhF,WAAWmB,KAAK;gBACvB8D,WAAW;oBAAE1C;oBAAO/B,OAAO;oBAAG0E,MAAM;gBAAkB;gBACtDC,OAAO;oBAAEC,MAAM;gBAAM;gBACrBC,iBAAiBR;YACnB;YAEAH,aAAaK,IAAI,CAAC;gBAChBC,OAAOhF,WAAWoB,GAAG;gBACrB6D,WAAW;oBAAE1C;oBAAO/B,OAAO;oBAAG0E,MAAM;gBAAkB;gBACtDC,OAAO;oBAAEC,MAAM;gBAAM;gBACrBC,iBAAiBR;YACnB;YAEAJ,aAAaM,IAAI,CAAC;gBAChB;oBACEC,OAAOhF,WAAWmB,KAAK;oBACvBmE,WAAW;wBAAE/C;wBAAOuC;oBAAQ;gBAC9B;gBACA;oBAAEE,OAAOhF,WAAWoB,GAAG;gBAAC;aACzB;YAED,4BAA4B;YAC5B,KAAK,MAAMmE,WAAW;gBAAC;gBAAM;aAAM,CAAE;gBACnCZ,cAAcI,IAAI,CAAC;oBACjBS,OAAO;wBAACD,UAAUvF,WAAWmB,KAAK,GAAGnB,WAAWoB,GAAG;wBAAE;qBAAE;oBACvDqE,QAAQ;oBACRC,YAAY;wBAAC;wBAAI;qBAAG;oBACpBC,cAAc;oBACdC,cAAc;wBAAC;wBAAG;qBAAE;oBACpBN,WAAW;wBAAE/C;oBAAM;oBACnB8C,iBAAiBR;oBACjBgB,UAAU;wBACRC,UAAU;oBACZ;oBACAP,SAASA;oBACTQ,OAAO,CAACR;gBACV;YACF;QACF,OAAO;YACL,2DAA2D;YAC3Db,aAAaK,IAAI,CAAC;gBAChBC,OAAOhF,WAAWmB,KAAK;gBACvB8D,WAAW;oBAAE1C;oBAAO/B,OAAO;oBAAG0E,MAAM;gBAAkB;gBACtDC,OAAO;oBAAEC,MAAM;gBAAM;gBACrBC,iBAAiBR;YACnB;YAEA,mBAAmB;YACnBF,cAAcI,IAAI,CAAC;gBACjBS,OAAO;oBAACxF,WAAWmB,KAAK;oBAAE;iBAAE;gBAC5BsE,QAAQ;gBACRC,YAAY;oBAAC;oBAAI;iBAAG;gBACpBC,cAAc;gBACdC,cAAc;oBAAC;oBAAG;iBAAO;gBACzBN,WAAW;oBAAE/C;gBAAM;gBACnB8C,iBAAiBR;gBACjBmB,SAAS;YACX;QACF;IACF;IAEA,MAAMC,SAA2B;QAC/Bf,MAAM;QACNgB,MAAM,EAAE;QACRC,QAAQ;QACRC,UACE3B,aAAaX,MAAM,GAAG,IAClB;YACEqC,QAAQ;YACRD,MAAMzB;YACNU,OAAO;gBACLC,MAAM;YACR;QACF,IACArE;QACNsF,UACE3B,aAAaZ,MAAM,GAAG,IAClB;YACEqC,QAAQ;YACRV,QAAQ;gBAAC;gBAAQ;aAAO;YACxBS,MAAMxB;YACNO,WAAW;gBACTC,MAAM;YACR;QACF,IACAnE;QACNuF,WACE3B,cAAcb,MAAM,GAAG,IACnB;YACEqC,QAAQ;YACRD,MAAMvB;YACNQ,OAAO;gBACLC,MAAM;YACR;QACF,IACArE;IACR;IAEA,OAAO;QAACkF;KAAO;AACjB"}
+{"version":3,"sources":["../../../src/annotations/AnnotationTooltip.tsx"],"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 { Box, Divider, Portal, Stack, Typography } from '@mui/material';\nimport type { CursorCoordinates } from '@perses-dev/components';\nimport {\n  assembleTransform,\n  getDateAndTime,\n  getTooltipStyles,\n  PIN_TOOLTIP_HELP_TEXT,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  UNPIN_TOOLTIP_HELP_TEXT,\n  useMousePosition,\n} from '@perses-dev/components';\nimport { DEFAULT_ANNOTATION_COLOR } from '@perses-dev/plugin-system';\nimport type { LineSeriesOption, MarkPointComponentOption, YAXisComponentOption } from 'echarts';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { TimeSeriesAnnotation } from '../utils/annotation';\n\n// Hidden Y axis to guarantee annotations being shown\nexport const ANNOTATION_Y_AXIS: YAXisComponentOption = {\n  type: 'value',\n  show: false,\n  min: 0,\n  max: 1,\n  axisLabel: { show: false },\n};\n\nexport interface AnnotationTooltipProps {\n  annotation: TimeSeriesAnnotation;\n  containerId?: string;\n  formatWithUserTimeZone: (date: Date, formatString: string) => string;\n  pinnedPos: CursorCoordinates | null;\n  enablePinning?: boolean;\n  onUnpinClick?: () => void;\n}\n\nexport function AnnotationTooltip({\n  annotation,\n  containerId,\n  formatWithUserTimeZone,\n  pinnedPos,\n  enablePinning = true,\n  onUnpinClick,\n}: AnnotationTooltipProps): JSX.Element | null {\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver<HTMLDivElement>();\n\n  const isPinned = pinnedPos !== null;\n  if (!isPinned && mousePos === null) return null;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  const transform = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const start = getDateAndTime(annotation.start, formatWithUserTimeZone);\n  const end = annotation.end !== undefined ? getDateAndTime(annotation.end, formatWithUserTimeZone) : null;\n\n  return (\n    <Portal container={containerElement}>\n      <Box ref={tooltipRef} sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)} style={{ transform }}>\n        <Stack spacing={0.5}>\n          <Box\n            sx={(theme) => ({\n              width: '100%',\n              maxWidth: TOOLTIP_MAX_WIDTH,\n              padding: theme.spacing(1.5, 2, 0.5, 2),\n              backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n              position: 'sticky',\n              top: 0,\n              left: 0,\n            })}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 0.5, width: '100%' }}>\n              <Box\n                sx={{\n                  width: 8,\n                  height: 8,\n                  borderRadius: '50%',\n                  backgroundColor: annotation.color ?? DEFAULT_ANNOTATION_COLOR,\n                  marginRight: 1,\n                  flexShrink: 0,\n                }}\n              />\n              <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n                <Typography variant=\"caption\">\n                  {start.formattedDate} - <strong>{start.formattedTime}</strong>\n                </Typography>\n                {end && (\n                  <>\n                    <Typography variant=\"caption\">{' → '}</Typography>\n                    <Typography variant=\"caption\">\n                      {end.formattedDate} - <strong>{end.formattedTime}</strong>\n                    </Typography>\n                  </>\n                )}\n              </Box>\n              {enablePinning && (\n                <Stack direction=\"row\" alignItems=\"center\" sx={{ marginLeft: 1, flexShrink: 0 }}>\n                  <Typography sx={{ marginRight: 0.5, fontSize: 11, verticalAlign: 'middle' }}>\n                    {isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT}\n                  </Typography>\n                  {isPinned ? (\n                    <Pin\n                      onClick={() => {\n                        if (onUnpinClick !== undefined) onUnpinClick();\n                      }}\n                      sx={{ fontSize: 16, cursor: 'pointer' }}\n                    />\n                  ) : (\n                    <PinOutline sx={{ fontSize: 16 }} />\n                  )}\n                </Stack>\n              )}\n            </Box>\n            <Divider sx={(theme) => ({ width: '100%', borderColor: theme.palette.grey['500'] })} />\n          </Box>\n          <Box sx={(theme) => ({ padding: theme.spacing(0.5, 2, 1.5, 2) })}>\n            {annotation.title && (\n              <Typography variant=\"caption\" sx={{ display: 'block', fontWeight: 'bold', marginBottom: 0.5 }}>\n                {annotation.title}\n              </Typography>\n            )}\n            {annotation.legend && (\n              <Typography variant=\"caption\" sx={{ display: 'block', marginBottom: 0.5 }}>\n                {annotation.legend}\n              </Typography>\n            )}\n            {annotation.tags && Object.keys(annotation.tags).length > 0 && (\n              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, marginTop: 0.5 }}>\n                {Object.entries(annotation.tags).map(([key, value]) => (\n                  <Box\n                    key={key}\n                    sx={(theme) => ({\n                      backgroundColor: theme.palette.grey['700'],\n                      borderRadius: '4px',\n                      padding: '2px 6px',\n                      fontSize: '0.7rem',\n                      fontFamily: 'monospace',\n                    })}\n                  >\n                    {key}: {value}\n                  </Box>\n                ))}\n              </Box>\n            )}\n          </Box>\n        </Stack>\n      </Box>\n    </Portal>\n  );\n}\n\n/**\n * Build ECharts series options for rendering annotations as markArea (range),\n * markLine (vertical dashed lines) and markPoint (triangle markers under the X-axis).\n */\nexport function buildAnnotationSeries(\n  annotations: TimeSeriesAnnotation[] | undefined,\n  annotationYAxisIndex: number,\n): LineSeriesOption[] {\n  if (!annotations?.length) return [];\n\n  const markAreaData: Array<[{ xAxis: number; itemStyle?: { color: string; opacity: number } }, { xAxis: number }]> =\n    [];\n  const markLineData: Array<{\n    xAxis: number;\n    lineStyle?: { color: string; width: number; type: 'dashed' | 'solid' | 'dotted' };\n    label?: { show: boolean };\n    annotationIndex?: number;\n  }> = [];\n  const markPointData: Array<\n    NonNullable<MarkPointComponentOption['data']>[number] & {\n      annotationIndex: number;\n      isStart?: boolean;\n      isEnd?: boolean;\n      isPoint?: boolean;\n    }\n  > = [];\n\n  annotations.forEach((annotation, index) => {\n    const color = annotation.color ?? DEFAULT_ANNOTATION_COLOR;\n    const opacity = 0.3;\n\n    if (annotation.end !== undefined) {\n      // Range annotation - use markArea and markLine (silent) + markers at start/end\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markLineData.push({\n        xAxis: annotation.end,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markAreaData.push([\n        {\n          xAxis: annotation.start,\n          itemStyle: { color, opacity },\n        },\n        { xAxis: annotation.end },\n      ]);\n\n      // Add start and end markers\n      for (const isStart of [true, false]) {\n        markPointData.push({\n          name: '',\n          coord: [isStart ? annotation.start : annotation.end, 0],\n          symbol: 'triangle',\n          symbolSize: [12, 12],\n          symbolRotate: 0,\n          symbolOffset: [0, 4], // Position below X-axis\n          itemStyle: { color },\n          annotationIndex: index,\n          emphasis: {\n            disabled: true,\n          },\n          isStart: isStart,\n          isEnd: !isStart,\n        });\n      }\n    } else {\n      // Point annotation - use markLine (silent) + single marker\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      // Add point marker\n      markPointData.push({\n        name: '',\n        coord: [annotation.start, 0],\n        symbol: 'triangle',\n        symbolSize: [12, 10],\n        symbolRotate: 0,\n        symbolOffset: [0, '120%'], // Position below X-axis\n        itemStyle: { color },\n        annotationIndex: index,\n        isPoint: true,\n      });\n    }\n  });\n\n  const series: LineSeriesOption = {\n    type: 'line',\n    data: [],\n    yAxisIndex: annotationYAxisIndex,\n    silent: false,\n    markArea:\n      markAreaData.length > 0\n        ? {\n            silent: true, // Make area silent, only markers are interactive\n            data: markAreaData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n    markLine:\n      markLineData.length > 0\n        ? {\n            silent: true, // Non-interactive: hovering the dashed line keeps the TimeSeries tooltip\n            symbol: ['none', 'none'],\n            data: markLineData,\n            lineStyle: {\n              type: 'dashed',\n            },\n          }\n        : undefined,\n    markPoint:\n      markPointData.length > 0\n        ? {\n            silent: false, // Markers are interactive\n            data: markPointData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n  };\n\n  return [series];\n}\n"],"names":["Box","Divider","Portal","Stack","Typography","assembleTransform","getDateAndTime","getTooltipStyles","PIN_TOOLTIP_HELP_TEXT","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","UNPIN_TOOLTIP_HELP_TEXT","useMousePosition","DEFAULT_ANNOTATION_COLOR","Pin","PinOutline","useResizeObserver","ANNOTATION_Y_AXIS","type","show","min","max","axisLabel","AnnotationTooltip","annotation","containerId","formatWithUserTimeZone","pinnedPos","enablePinning","onUnpinClick","mousePos","height","width","ref","tooltipRef","isPinned","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","transform","start","end","container","sx","theme","style","spacing","maxWidth","padding","backgroundColor","palette","designSystem","grey","position","top","left","display","alignItems","paddingBottom","borderRadius","color","marginRight","flexShrink","flexGrow","minWidth","variant","formattedDate","strong","formattedTime","direction","marginLeft","fontSize","verticalAlign","onClick","cursor","borderColor","title","fontWeight","marginBottom","legend","tags","Object","keys","length","flexWrap","gap","marginTop","entries","map","key","value","fontFamily","buildAnnotationSeries","annotations","annotationYAxisIndex","markAreaData","markLineData","markPointData","forEach","index","opacity","push","xAxis","lineStyle","label","annotationIndex","itemStyle","isStart","name","coord","symbol","symbolSize","symbolRotate","symbolOffset","emphasis","disabled","isEnd","isPoint","series","data","yAxisIndex","silent","markArea","markLine","markPoint"],"mappings":"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"}

package/lib/components/ColorSwatches.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+export declare function ColorSwatches({ colors }: {
+    colors: readonly string[];
+}): ReactElement;
+//# sourceMappingURL=ColorSwatches.d.ts.map

package/lib/components/ColorSwatches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatches.d.ts","sourceRoot":"","sources":["../../../src/components/ColorSwatches.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,GAAG,YAAY,CAiBrF"}

package/lib/components/ColorSwatches.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Box } from "@mui/material";
+export function ColorSwatches({ colors }) {
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'flex',
+            gap: '3px',
+            flexWrap: 'wrap',
+            p: '4px 2px'
+        },
+        children: colors.map((color, i)=>/*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    width: 14,
+                    height: 14,
+                    borderRadius: '2px',
+                    backgroundColor: color,
+                    flexShrink: 0
+                }
+            }, i))
+    });
+}
+
+//# sourceMappingURL=ColorSwatches.js.map

package/lib/components/ColorSwatches.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ColorSwatches.tsx"],"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 { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport function ColorSwatches({ colors }: { colors: readonly string[] }): ReactElement {\n  return (\n    <Box sx={{ display: 'flex', gap: '3px', flexWrap: 'wrap', p: '4px 2px' }}>\n      {colors.map((color, i) => (\n        <Box\n          key={i}\n          sx={{\n            width: 14,\n            height: 14,\n            borderRadius: '2px',\n            backgroundColor: color,\n            flexShrink: 0,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ColorSwatches","colors","sx","display","gap","flexWrap","p","map","color","i","width","height","borderRadius","backgroundColor","flexShrink"],"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,GAAG,QAAQ,gBAAgB;AAGpC,OAAO,SAASC,cAAc,EAAEC,MAAM,EAAiC;IACrE,qBACE,KAACF;QAAIG,IAAI;YAAEC,SAAS;YAAQC,KAAK;YAAOC,UAAU;YAAQC,GAAG;QAAU;kBACpEL,OAAOM,GAAG,CAAC,CAACC,OAAOC,kBAClB,KAACV;gBAECG,IAAI;oBACFQ,OAAO;oBACPC,QAAQ;oBACRC,cAAc;oBACdC,iBAAiBL;oBACjBM,YAAY;gBACd;eAPKL;;AAYf"}

package/lib/components/PaletteSelector.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from 'react';
+import type { TimeSeriesChartPaletteOptions } from '../time-series-chart-model';
+export interface PaletteSelectorProps {
+    value: TimeSeriesChartPaletteOptions | undefined;
+    onChange: (palette: TimeSeriesChartPaletteOptions | undefined) => void;
+}
+export declare function PaletteSelector({ value, onChange }: PaletteSelectorProps): ReactElement;
+//# sourceMappingURL=PaletteSelector.d.ts.map

package/lib/components/PaletteSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaletteSelector.d.ts","sourceRoot":"","sources":["../../../src/components/PaletteSelector.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAA0B,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAexG,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,6BAA6B,GAAG,SAAS,CAAC;IACjD,QAAQ,EAAE,CAAC,OAAO,EAAE,6BAA6B,GAAG,SAAS,KAAK,IAAI,CAAC;CACxE;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,oBAAoB,GAAG,YAAY,CAuEvF"}