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

package/lib/TimeSeriesChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesChart.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelPlugin } from '@perses-dev/plugin-system';\nimport { createInitialTimeSeriesChartOptions, TimeSeriesChartOptions } from './time-series-chart-model';\nimport { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';\nimport { QuerySettingsEditor } from './QuerySettingsEditor';\nimport { TimeSeriesChartPanel, TimeSeriesChartProps } from './TimeSeriesChartPanel';\nimport { TimeSeriesExportAction } from './TimeSeriesExportAction';\n\nexport const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps> = {\n  PanelComponent: TimeSeriesChartPanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TimeSeriesChartGeneralSettings },\n    { label: 'Query Settings', content: QuerySettingsEditor },\n  ],\n  createInitialOptions: createInitialTimeSeriesChartOptions,\n  actions: [\n    {\n      component: TimeSeriesExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["createInitialTimeSeriesChartOptions","TimeSeriesChartGeneralSettings","QuerySettingsEditor","TimeSeriesChartPanel","TimeSeriesExportAction","TimeSeriesChart","PanelComponent","supportedQueryTypes","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"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;AAGjC,SAASA,mCAAmC,QAAgC,4BAA4B;AACxG,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,oBAAoB,QAA8B,yBAAyB;AACpF,SAASC,sBAAsB,QAAQ,2BAA2B;AAElE,OAAO,MAAMC,kBAA6E;IACxFC,gBAAgBH;IAChBI,qBAAqB;QAAC;KAAkB;IACxCC,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAAST;QAA+B;QACrE;YAAEQ,OAAO;YAAkBC,SAASR;QAAoB;KACzD;IACDS,sBAAsBX;IACtBY,SAAS;QACP;YACEC,WAAWT;YACXU,UAAU;QACZ;KACD;AACH,EAAE"}
+{"version":3,"sources":["../../src/TimeSeriesChart.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelPlugin } from '@perses-dev/plugin-system';\nimport { createInitialTimeSeriesChartOptions, TimeSeriesChartOptions } from './time-series-chart-model';\nimport { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';\nimport { QuerySettingsEditor } from './QuerySettingsEditor';\nimport { TimeSeriesChartPanel, TimeSeriesChartProps } from './TimeSeriesChartPanel';\nimport { TimeSeriesExportAction } from './TimeSeriesExportAction';\n\nexport const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps> = {\n  PanelComponent: TimeSeriesChartPanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  supportsAnnotations: true,\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TimeSeriesChartGeneralSettings },\n    { label: 'Query Settings', content: QuerySettingsEditor },\n  ],\n  createInitialOptions: createInitialTimeSeriesChartOptions,\n  actions: [\n    {\n      component: TimeSeriesExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["createInitialTimeSeriesChartOptions","TimeSeriesChartGeneralSettings","QuerySettingsEditor","TimeSeriesChartPanel","TimeSeriesExportAction","TimeSeriesChart","PanelComponent","supportedQueryTypes","supportsAnnotations","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"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;AAGjC,SAASA,mCAAmC,QAAgC,4BAA4B;AACxG,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,oBAAoB,QAA8B,yBAAyB;AACpF,SAASC,sBAAsB,QAAQ,2BAA2B;AAElE,OAAO,MAAMC,kBAA6E;IACxFC,gBAAgBH;IAChBI,qBAAqB;QAAC;KAAkB;IACxCC,qBAAqB;IACrBC,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAASV;QAA+B;QACrE;YAAES,OAAO;YAAkBC,SAAST;QAAoB;KACzD;IACDU,sBAAsBZ;IACtBa,SAAS;QACP;YACEC,WAAWV;YACXW,UAAU;QACZ;KACD;AACH,EAAE"}

package/lib/TimeSeriesChartPanel.js

@@ -16,7 +16,7 @@ import { Box, useTheme } from '@mui/material';
 import merge from 'lodash/merge';
 import { LEGEND_VALUE_CONFIG, useTimeRange, validateLegendSpec, legendValues, getCalculations } from '@perses-dev/plugin-system';
 import { YAxisLabel, useChartsTheme, ContentWithLegend, useId, DEFAULT_TOOLTIP_CONFIG, getFormattedMultipleYAxes, DEFAULT_LEGEND, formatValue, getTimeSeriesValues } from '@perses-dev/components';
-import { useAnnotationsWithData } from '@perses-dev/dashboards';
+import { usePanelAnnotationsWithData } from '@perses-dev/dashboards';
 import { DEFAULT_FORMAT, DEFAULT_VISUAL, THRESHOLD_PLOT_INTERVAL } from './time-series-chart-model';
 import { getTimeSeries, getCommonTimeScaleForQueries, convertPanelYAxis, getThresholdSeries, convertPercentThreshold } from './utils/data-transform';
 import { getSeriesColor } from './utils/palette-gen';
@@ -102,7 +102,7 @@ export function TimeSeriesChartPanel(props) {
     const [selectedLegendItems, setSelectedLegendItems] = useState('ALL');
     const [legendSorting, setLegendSorting] = useState();
     const { setTimeRange } = useTimeRange();
-    const annotationsWithData = useAnnotationsWithData();
+    const annotationsWithData = usePanelAnnotationsWithData(props.definition?.spec.annotations);
     const annotations = useMemo(()=>convertAnnotationToTimeSeriesAnnotation(annotationsWithData), [
         annotationsWithData
     ]);

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 { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport type { GridComponentOption } from 'echarts';\nimport merge from 'lodash/merge';\nimport {\n  LEGEND_VALUE_CONFIG,\n  PanelProps,\n  useTimeRange,\n  validateLegendSpec,\n  legendValues,\n  getCalculations,\n  CalculationType,\n} from '@perses-dev/plugin-system';\nimport {\n  ChartInstance,\n  YAxisLabel,\n  ZoomEventData,\n  useChartsTheme,\n  SelectedLegendItemState,\n  ContentWithLegend,\n  TableColumnConfig,\n  LegendItem,\n  LegendProps,\n  useId,\n  TooltipConfig,\n  DEFAULT_TOOLTIP_CONFIG,\n  TimeChartSeriesMapping,\n  getFormattedMultipleYAxes,\n  DEFAULT_LEGEND,\n  StepOptions,\n  formatValue,\n  getTimeSeriesValues,\n} from '@perses-dev/components';\nimport { TimeSeries, TimeSeriesData, TimeSeriesValueTuple } from '@perses-dev/spec';\nimport { useAnnotationsWithData } from '@perses-dev/dashboards';\nimport {\n  TimeSeriesChartOptions,\n  DEFAULT_FORMAT,\n  DEFAULT_VISUAL,\n  THRESHOLD_PLOT_INTERVAL,\n  QuerySettingsOptions,\n} from './time-series-chart-model';\nimport {\n  getTimeSeries,\n  getCommonTimeScaleForQueries,\n  convertPanelYAxis,\n  getThresholdSeries,\n  convertPercentThreshold,\n} from './utils/data-transform';\nimport { getSeriesColor } from './utils/palette-gen';\nimport { TimeSeriesChartBase } from './TimeSeriesChartBase';\nimport { convertAnnotationToTimeSeriesAnnotation, TimeSeriesAnnotation } from './utils/annotation';\n\nexport type TimeSeriesChartProps = PanelProps<TimeSeriesChartOptions, TimeSeriesData>;\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\nexport function TimeSeriesChartPanel(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, seriesFormatMap } = useMemo(() => {\n    const baseUnit = format?.unit ?? 'decimal';\n    const additionalFormats: Array<typeof format> = [];\n    const formatToYAxisIndex = new Map<string, number>();\n    const seriesFormatMap = new Map<string, typeof format>();\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, seriesFormatMap };\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 = useAnnotationsWithData();\n\n  const annotations: TimeSeriesAnnotation[] = useMemo(\n    () => convertAnnotationToTimeSeriesAnnotation(annotationsWithData),\n    [annotationsWithData]\n  );\n\n  // Populate series data based on query results\n  const {\n    timeScale,\n    timeChartData,\n    timeSeriesMapping,\n    legendItems,\n    seriesFormatMap: computedSeriesFormatMap,\n    maxValuesByFormat,\n  } = useMemo(() => {\n    const timeScale = getCommonTimeScaleForQueries(queryResults);\n    if (timeScale === undefined) {\n      return {\n        timeChartData: [],\n        timeSeriesMapping: [],\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\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    // Mapping of each set of query results to be ECharts option compatible\n    // TODO: Look into performance optimizations and moving parts of mapping to the lower level chart\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      // Retrieve querySettings for this query, if exists.\n      // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute\n      let querySettings: QuerySettingsOptions | undefined;\n      for (const item of querySettingsList ?? []) {\n        if (item.queryIndex === queryIndex) {\n          querySettings = item;\n          // We don't break the loop here just in case there are multiple querySettings defined for the\n          // same queryIndex, because in that case we want the last one to take precedence.\n        }\n      }\n\n      if (result) {\n        for (let i = 0; i < result.data.series.length; i++) {\n          const timeSeries: TimeSeries | undefined = result.data.series[i];\n          if (timeSeries === undefined) {\n            return { timeChartData: [], timeSeriesMapping: [], legendItems: [] };\n          }\n\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: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1,\n          });\n\n          // We add a unique id for the chart to disambiguate items across charts\n          // when there are multiple on the page.\n          const seriesId = chartId + timeSeries.name + seriesIndex;\n\n          const legendCalculations = legend?.values\n            ? getCalculations(timeSeries.values, legend.values as CalculationType[])\n            : undefined;\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              )\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 seriesMax = Math.max(...timeSeries.values.map((v) => Math.abs(v[1] ?? 0)));\n                const currentMax = maxValuesByFormat.get(unitKey) ?? 0;\n                if (seriesMax > currentMax) {\n                  maxValuesByFormat.set(unitKey, seriesMax);\n                }\n              }\n            }\n\n            // When negativeY is set on this query, negate the rendered values so the\n            // series renders below the X axis. The original (positive) values are\n            // preserved in `timeSeries.values` (used for legend calculations) and in\n            // `queryResults` (used for CSV export).\n            const baseValues: TimeSeriesValueTuple[] = getTimeSeriesValues(timeSeries, timeScale);\n            const renderedValues: TimeSeriesValueTuple[] = querySettings?.negativeY\n              ? baseValues.map((tuple: TimeSeriesValueTuple): TimeSeriesValueTuple => {\n                  const [t, v] = tuple;\n                  return [t, v === null ? null : -v];\n                })\n              : baseValues;\n\n            timeChartData.push({\n              name: formattedSeriesName,\n              values: renderedValues,\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: legendCalculations,\n            });\n          }\n\n          // Used for repeating colors in Categorical palette\n          seriesIndex++;\n        }\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    queryResults,\n    thresholds,\n    selectedLegendItems,\n    legend,\n    visual,\n    querySettingsList,\n    yAxis?.max,\n    yAxis?.min,\n    categoricalPalette,\n    chartId,\n    chartsTheme.thresholds,\n    muiTheme.palette.primary.main,\n    formatToYAxisIndex,\n    seriesFormatMap,\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  if (adjustedContentDimensions === undefined) {\n    return null;\n  }\n\n  const handleDataZoom = (event: ZoomEventData): void => {\n    // TODO: add ECharts transition animation on zoom\n    setTimeRange({ start: new Date(event.start), end: new Date(event.end) });\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                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"],"names":["useMemo","useRef","useState","Box","useTheme","merge","LEGEND_VALUE_CONFIG","useTimeRange","validateLegendSpec","legendValues","getCalculations","YAxisLabel","useChartsTheme","ContentWithLegend","useId","DEFAULT_TOOLTIP_CONFIG","getFormattedMultipleYAxes","DEFAULT_LEGEND","formatValue","getTimeSeriesValues","useAnnotationsWithData","DEFAULT_FORMAT","DEFAULT_VISUAL","THRESHOLD_PLOT_INTERVAL","getTimeSeries","getCommonTimeScaleForQueries","convertPanelYAxis","getThresholdSeries","convertPercentThreshold","getSeriesColor","TimeSeriesChartBase","convertAnnotationToTimeSeriesAnnotation","TimeSeriesChartPanel","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","seriesFormatMap","baseUnit","unit","Map","set","qs","unitKey","has","length","push","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","setTimeRange","annotationsWithData","annotations","timeScale","timeChartData","timeSeriesMapping","legendItems","computedSeriesFormatMap","maxValuesByFormat","seriesIndex","queryIndex","result","item","i","data","series","timeSeries","formattedSeriesName","formattedName","name","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","queryHasMultipleResults","seriesId","legendCalculations","values","isSelectAll","isSelected","showTimeSeries","datasetIndex","queryFormat","yAxisIndex","get","seriesMax","Math","max","map","v","abs","currentMax","baseValues","renderedValues","negativeY","tuple","t","id","label","steps","thresholdsColors","defaultThresholdColor","defaultColor","forEach","step","index","stepPaletteColor","thresholdLineColor","stepOption","value","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"],"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 { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport type { GridComponentOption } from 'echarts';\nimport merge from 'lodash/merge';\nimport {\n  LEGEND_VALUE_CONFIG,\n  PanelProps,\n  useTimeRange,\n  validateLegendSpec,\n  legendValues,\n  getCalculations,\n  CalculationType,\n} from '@perses-dev/plugin-system';\nimport {\n  ChartInstance,\n  YAxisLabel,\n  ZoomEventData,\n  useChartsTheme,\n  SelectedLegendItemState,\n  ContentWithLegend,\n  TableColumnConfig,\n  LegendItem,\n  LegendProps,\n  useId,\n  TooltipConfig,\n  DEFAULT_TOOLTIP_CONFIG,\n  TimeChartSeriesMapping,\n  getFormattedMultipleYAxes,\n  DEFAULT_LEGEND,\n  StepOptions,\n  formatValue,\n  getTimeSeriesValues,\n} from '@perses-dev/components';\nimport { TimeSeries, TimeSeriesData, TimeSeriesValueTuple } from '@perses-dev/spec';\nimport { usePanelAnnotationsWithData } from '@perses-dev/dashboards';\nimport {\n  TimeSeriesChartOptions,\n  DEFAULT_FORMAT,\n  DEFAULT_VISUAL,\n  THRESHOLD_PLOT_INTERVAL,\n  QuerySettingsOptions,\n} from './time-series-chart-model';\nimport {\n  getTimeSeries,\n  getCommonTimeScaleForQueries,\n  convertPanelYAxis,\n  getThresholdSeries,\n  convertPercentThreshold,\n} from './utils/data-transform';\nimport { getSeriesColor } from './utils/palette-gen';\nimport { TimeSeriesChartBase } from './TimeSeriesChartBase';\nimport { convertAnnotationToTimeSeriesAnnotation, TimeSeriesAnnotation } from './utils/annotation';\n\nexport type TimeSeriesChartProps = PanelProps<TimeSeriesChartOptions, TimeSeriesData>;\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\nexport function TimeSeriesChartPanel(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, seriesFormatMap } = useMemo(() => {\n    const baseUnit = format?.unit ?? 'decimal';\n    const additionalFormats: Array<typeof format> = [];\n    const formatToYAxisIndex = new Map<string, number>();\n    const seriesFormatMap = new Map<string, typeof format>();\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, seriesFormatMap };\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  // Populate series data based on query results\n  const {\n    timeScale,\n    timeChartData,\n    timeSeriesMapping,\n    legendItems,\n    seriesFormatMap: computedSeriesFormatMap,\n    maxValuesByFormat,\n  } = useMemo(() => {\n    const timeScale = getCommonTimeScaleForQueries(queryResults);\n    if (timeScale === undefined) {\n      return {\n        timeChartData: [],\n        timeSeriesMapping: [],\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\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    // Mapping of each set of query results to be ECharts option compatible\n    // TODO: Look into performance optimizations and moving parts of mapping to the lower level chart\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      // Retrieve querySettings for this query, if exists.\n      // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute\n      let querySettings: QuerySettingsOptions | undefined;\n      for (const item of querySettingsList ?? []) {\n        if (item.queryIndex === queryIndex) {\n          querySettings = item;\n          // We don't break the loop here just in case there are multiple querySettings defined for the\n          // same queryIndex, because in that case we want the last one to take precedence.\n        }\n      }\n\n      if (result) {\n        for (let i = 0; i < result.data.series.length; i++) {\n          const timeSeries: TimeSeries | undefined = result.data.series[i];\n          if (timeSeries === undefined) {\n            return { timeChartData: [], timeSeriesMapping: [], legendItems: [] };\n          }\n\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: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1,\n          });\n\n          // We add a unique id for the chart to disambiguate items across charts\n          // when there are multiple on the page.\n          const seriesId = chartId + timeSeries.name + seriesIndex;\n\n          const legendCalculations = legend?.values\n            ? getCalculations(timeSeries.values, legend.values as CalculationType[])\n            : undefined;\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              )\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 seriesMax = Math.max(...timeSeries.values.map((v) => Math.abs(v[1] ?? 0)));\n                const currentMax = maxValuesByFormat.get(unitKey) ?? 0;\n                if (seriesMax > currentMax) {\n                  maxValuesByFormat.set(unitKey, seriesMax);\n                }\n              }\n            }\n\n            // When negativeY is set on this query, negate the rendered values so the\n            // series renders below the X axis. The original (positive) values are\n            // preserved in `timeSeries.values` (used for legend calculations) and in\n            // `queryResults` (used for CSV export).\n            const baseValues: TimeSeriesValueTuple[] = getTimeSeriesValues(timeSeries, timeScale);\n            const renderedValues: TimeSeriesValueTuple[] = querySettings?.negativeY\n              ? baseValues.map((tuple: TimeSeriesValueTuple): TimeSeriesValueTuple => {\n                  const [t, v] = tuple;\n                  return [t, v === null ? null : -v];\n                })\n              : baseValues;\n\n            timeChartData.push({\n              name: formattedSeriesName,\n              values: renderedValues,\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: legendCalculations,\n            });\n          }\n\n          // Used for repeating colors in Categorical palette\n          seriesIndex++;\n        }\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    queryResults,\n    thresholds,\n    selectedLegendItems,\n    legend,\n    visual,\n    querySettingsList,\n    yAxis?.max,\n    yAxis?.min,\n    categoricalPalette,\n    chartId,\n    chartsTheme.thresholds,\n    muiTheme.palette.primary.main,\n    formatToYAxisIndex,\n    seriesFormatMap,\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  if (adjustedContentDimensions === undefined) {\n    return null;\n  }\n\n  const handleDataZoom = (event: ZoomEventData): void => {\n    // TODO: add ECharts transition animation on zoom\n    setTimeRange({ start: new Date(event.start), end: new Date(event.end) });\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                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"],"names":["useMemo","useRef","useState","Box","useTheme","merge","LEGEND_VALUE_CONFIG","useTimeRange","validateLegendSpec","legendValues","getCalculations","YAxisLabel","useChartsTheme","ContentWithLegend","useId","DEFAULT_TOOLTIP_CONFIG","getFormattedMultipleYAxes","DEFAULT_LEGEND","formatValue","getTimeSeriesValues","usePanelAnnotationsWithData","DEFAULT_FORMAT","DEFAULT_VISUAL","THRESHOLD_PLOT_INTERVAL","getTimeSeries","getCommonTimeScaleForQueries","convertPanelYAxis","getThresholdSeries","convertPercentThreshold","getSeriesColor","TimeSeriesChartBase","convertAnnotationToTimeSeriesAnnotation","TimeSeriesChartPanel","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","seriesFormatMap","baseUnit","unit","Map","set","qs","unitKey","has","length","push","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","setTimeRange","annotationsWithData","definition","annotations","timeScale","timeChartData","timeSeriesMapping","legendItems","computedSeriesFormatMap","maxValuesByFormat","seriesIndex","queryIndex","result","item","i","data","series","timeSeries","formattedSeriesName","formattedName","name","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","queryHasMultipleResults","seriesId","legendCalculations","values","isSelectAll","isSelected","showTimeSeries","datasetIndex","queryFormat","yAxisIndex","get","seriesMax","Math","max","map","v","abs","currentMax","baseValues","renderedValues","negativeY","tuple","t","id","label","steps","thresholdsColors","defaultThresholdColor","defaultColor","forEach","step","index","stepPaletteColor","thresholdLineColor","stepOption","value","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"],"mappings":"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"}

package/lib/cjs/TimeSeriesChart.js

@@ -30,6 +30,7 @@ const TimeSeriesChart = {
     supportedQueryTypes: [
         'TimeSeriesQuery'
     ],
+    supportsAnnotations: true,
     panelOptionsEditorComponents: [
         {
             label: 'General Settings',

package/lib/cjs/TimeSeriesChartPanel.js

@@ -109,7 +109,7 @@ function TimeSeriesChartPanel(props) {
     const [selectedLegendItems, setSelectedLegendItems] = (0, _react.useState)('ALL');
     const [legendSorting, setLegendSorting] = (0, _react.useState)();
     const { setTimeRange } = (0, _pluginsystem.useTimeRange)();
-    const annotationsWithData = (0, _dashboards.useAnnotationsWithData)();
+    const annotationsWithData = (0, _dashboards.usePanelAnnotationsWithData)(props.definition?.spec.annotations);
     const annotations = (0, _react.useMemo)(()=>(0, _annotation.convertAnnotationToTimeSeriesAnnotation)(annotationsWithData), [
         annotationsWithData
     ]);

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "TimeSeriesChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.13.0",
+      "buildVersion": "0.14.0-beta.0",
       "buildName": "@perses-dev/timeseries-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TimeSeriesChart.42841bce.js",
+      "name": "__mf/js/TimeSeriesChart.7c5da441.js",
       "path": "",
       "type": "global"
     },
@@ -89,9 +89,9 @@
     {
       "id": "TimeSeriesChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.54.0",
+      "version": "0.55.0-beta.1",
       "singleton": true,
-      "requiredVersion": "^0.54.0",
+      "requiredVersion": "^0.55.0-beta.1",
       "assets": {
         "js": {
           "async": [],
@@ -111,14 +111,14 @@
     {
       "id": "TimeSeriesChart:@perses-dev/dashboards",
       "name": "@perses-dev/dashboards",
-      "version": "0.54.0",
+      "version": "0.55.0-beta.1",
       "singleton": true,
-      "requiredVersion": "^0.54.0",
+      "requiredVersion": "^0.55.0-beta.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/984.83bd5c6d.js"
+            "__mf/js/async/163.cce4c882.js"
           ]
         },
         "css": {
@@ -131,14 +131,14 @@
     {
       "id": "TimeSeriesChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.54.0",
+      "version": "0.55.0-beta.1",
       "singleton": true,
-      "requiredVersion": "^0.54.0",
+      "requiredVersion": "^0.55.0-beta.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/546.5fecffa4.js"
+            "__mf/js/async/682.971bf8bf.js"
           ]
         },
         "css": {
@@ -282,14 +282,14 @@
             "__mf/js/async/527.f97d1b86.js",
             "__mf/js/async/52.0d78de2b.js",
             "__mf/js/async/724.c45dcf5b.js",
-            "__mf/js/async/__federation_expose_TimeSeriesChart.0ab11cd4.js"
+            "__mf/js/async/__federation_expose_TimeSeriesChart.0f989a8c.js"
           ],
           "async": [
             "__mf/js/async/lib-router.319c02cd.js",
-            "__mf/js/async/655.2f794f77.js",
-            "__mf/js/async/518.2ac1df43.js",
+            "__mf/js/async/996.bd40c9c2.js",
+            "__mf/js/async/202.29f2b119.js",
             "__mf/js/async/356.8170c96d.js",
-            "__mf/js/async/603.3b771310.js",
+            "__mf/js/async/626.9d2c051c.js",
             "__mf/js/async/694.0fb9ee5a.js",
             "__mf/js/async/588.0a1aa144.js",
             "__mf/js/async/71.8c6cf914.js",

package/mf-stats.json

@@ -5,11 +5,11 @@
     "name": "TimeSeriesChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.13.0",
+      "buildVersion": "0.14.0-beta.0",
       "buildName": "@perses-dev/timeseries-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TimeSeriesChart.42841bce.js",
+      "name": "__mf/js/TimeSeriesChart.7c5da441.js",
       "path": "",
       "type": "global"
     },
@@ -100,10 +100,10 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.54.0",
+      "requiredVersion": "^0.55.0-beta.1",
       "shareScope": "default",
       "name": "@perses-dev/components",
-      "version": "0.54.0",
+      "version": "0.55.0-beta.1",
       "eager": false,
       "id": "TimeSeriesChart:@perses-dev/components",
       "assets": {
@@ -128,17 +128,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.54.0",
+      "requiredVersion": "^0.55.0-beta.1",
       "shareScope": "default",
       "name": "@perses-dev/dashboards",
-      "version": "0.54.0",
+      "version": "0.55.0-beta.1",
       "eager": false,
       "id": "TimeSeriesChart:@perses-dev/dashboards",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/984.83bd5c6d.js"
+            "__mf/js/async/163.cce4c882.js"
           ]
         },
         "css": {
@@ -154,17 +154,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.54.0",
+      "requiredVersion": "^0.55.0-beta.1",
       "shareScope": "default",
       "name": "@perses-dev/plugin-system",
-      "version": "0.54.0",
+      "version": "0.55.0-beta.1",
       "eager": false,
       "id": "TimeSeriesChart:@perses-dev/plugin-system",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/546.5fecffa4.js"
+            "__mf/js/async/682.971bf8bf.js"
           ]
         },
         "css": {
@@ -346,14 +346,14 @@
             "__mf/js/async/527.f97d1b86.js",
             "__mf/js/async/52.0d78de2b.js",
             "__mf/js/async/724.c45dcf5b.js",
-            "__mf/js/async/__federation_expose_TimeSeriesChart.0ab11cd4.js"
+            "__mf/js/async/__federation_expose_TimeSeriesChart.0f989a8c.js"
           ],
           "async": [
             "__mf/js/async/lib-router.319c02cd.js",
-            "__mf/js/async/655.2f794f77.js",
-            "__mf/js/async/518.2ac1df43.js",
+            "__mf/js/async/996.bd40c9c2.js",
+            "__mf/js/async/202.29f2b119.js",
             "__mf/js/async/356.8170c96d.js",
-            "__mf/js/async/603.3b771310.js",
+            "__mf/js/async/626.9d2c051c.js",
             "__mf/js/async/694.0fb9ee5a.js",
             "__mf/js/async/588.0a1aa144.js",
             "__mf/js/async/71.8c6cf914.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/timeseries-chart-plugin",
-  "version": "0.13.0",
+  "version": "0.14.0-beta.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/plugins/blob/main/README.md",
   "repository": {
@@ -31,10 +31,10 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.54.0",
-    "@perses-dev/dashboards": "^0.54.0",
-    "@perses-dev/plugin-system": "^0.54.0",
-    "@perses-dev/spec": "^0.2.0",
+    "@perses-dev/components": "^0.55.0-beta.1",
+    "@perses-dev/dashboards": "^0.55.0-beta.1",
+    "@perses-dev/plugin-system": "^0.55.0-beta.1",
+    "@perses-dev/spec": "^0.3.0-beta.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",