@perses-dev/timeseries-chart-plugin 0.10.0 → 0.10.2

package/lib/utils/data-transform.js

@@ -29,56 +29,8 @@ export const BLUR_FADEOUT_OPACITY = 0.5;
     return getCommonTimeScale(seriesData);
 }
 /**
- * [DEPRECATED] Gets ECharts line series option properties for legacy LineChart
- */ export function getLineSeries(id, formattedName, data, visual, paletteColor) {
-    const lineWidth = visual.lineWidth ?? DEFAULT_LINE_WIDTH;
-    const pointRadius = visual.pointRadius ?? DEFAULT_POINT_RADIUS;
-    // Shows datapoint symbols when selected time range is roughly 15 minutes or less
-    let showPoints = data !== undefined && data.length <= HIDE_DATAPOINTS_LIMIT;
-    // Allows overriding default behavior and opt-in to always show all symbols (can hurt performance)
-    if (visual.showPoints === 'always') {
-        showPoints = true;
-    }
-    return {
-        type: 'line',
-        id: id,
-        name: formattedName,
-        data: data,
-        connectNulls: visual.connectNulls ?? DEFAULT_CONNECT_NULLS,
-        color: paletteColor,
-        stack: visual.stack === 'all' ? visual.stack : undefined,
-        sampling: 'lttb',
-        progressiveThreshold: OPTIMIZED_MODE_SERIES_LIMIT,
-        showSymbol: showPoints,
-        showAllSymbol: true,
-        symbolSize: pointRadius,
-        lineStyle: {
-            width: lineWidth,
-            opacity: 0.8
-        },
-        areaStyle: {
-            opacity: visual.areaOpacity ?? DEFAULT_AREA_OPACITY
-        },
-        // https://echarts.apache.org/en/option.html#series-line.emphasis
-        emphasis: {
-            focus: 'series',
-            disabled: visual.areaOpacity !== undefined && visual.areaOpacity > 0,
-            lineStyle: {
-                width: lineWidth + 1.5,
-                opacity: 1
-            }
-        },
-        blur: {
-            lineStyle: {
-                width: lineWidth,
-                opacity: BLUR_FADEOUT_OPACITY
-            }
-        }
-    };
-}
-/**
- * Gets ECharts line series option properties for recommended TimeChart
- */ export function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, paletteColor) {
+ * Gets ECharts line series option properties for regular trends
+ */ export function getTimeSeries(id, datasetIndex, formattedName, visual, timeScale, paletteColor, querySettings) {
     const lineWidth = visual.lineWidth ?? DEFAULT_LINE_WIDTH;
     const pointRadius = visual.pointRadius ?? DEFAULT_POINT_RADIUS;
     // Shows datapoint symbols when selected time range is roughly 15 minutes or less
@@ -117,10 +69,10 @@ export const BLUR_FADEOUT_OPACITY = 0.5;
         symbolSize: pointRadius,
         lineStyle: {
             width: lineWidth,
-            opacity: 0.95
+            type: querySettings?.lineStyle ?? visual.lineStyle
         },
         areaStyle: {
-            opacity: visual.areaOpacity ?? DEFAULT_AREA_OPACITY
+            opacity: querySettings?.areaOpacity ?? visual.areaOpacity ?? DEFAULT_AREA_OPACITY
         },
         // https://echarts.apache.org/en/option.html#series-line.emphasis
         emphasis: {
@@ -128,7 +80,8 @@ export const BLUR_FADEOUT_OPACITY = 0.5;
             disabled: visual.areaOpacity !== undefined && visual.areaOpacity > 0,
             lineStyle: {
                 width: lineWidth + 1,
-                opacity: 1
+                opacity: 1,
+                type: visual.lineStyle
             }
         },
         selectedMode: 'single',
@@ -141,7 +94,8 @@ export const BLUR_FADEOUT_OPACITY = 0.5;
         blur: {
             lineStyle: {
                 width: lineWidth,
-                opacity: BLUR_FADEOUT_OPACITY
+                opacity: BLUR_FADEOUT_OPACITY,
+                type: visual.lineStyle
             }
         }
     };

package/lib/utils/data-transform.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/data-transform.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { YAXisComponentOption } from 'echarts';\nimport { LineSeriesOption, BarSeriesOption } from 'echarts/charts';\nimport {\n  StepOptions,\n  TimeScale,\n  TimeSeries,\n  TimeSeriesValueTuple,\n  getCommonTimeScale,\n  TimeSeriesData,\n} from '@perses-dev/core';\nimport {\n  OPTIMIZED_MODE_SERIES_LIMIT,\n  LegacyTimeSeries,\n  EChartsDataFormat,\n  EChartsValues,\n  TimeSeriesOption,\n} from '@perses-dev/components';\nimport { useTimeSeriesQueries, PanelData } from '@perses-dev/plugin-system';\nimport {\n  DEFAULT_AREA_OPACITY,\n  DEFAULT_CONNECT_NULLS,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_POINT_RADIUS,\n  DEFAULT_Y_AXIS,\n  POSITIVE_MIN_VALUE_MULTIPLIER,\n  NEGATIVE_MIN_VALUE_MULTIPLIER,\n  TimeSeriesChartVisualOptions,\n  TimeSeriesChartYAxisOptions,\n} from '../time-series-chart-model';\n\nexport type RunningQueriesState = ReturnType<typeof useTimeSeriesQueries>;\n\nexport const EMPTY_GRAPH_DATA: EChartsDataFormat = {\n  timeSeries: [],\n  xAxis: [],\n  legendItems: [],\n};\n\nexport const HIDE_DATAPOINTS_LIMIT = 70;\n\nexport const BLUR_FADEOUT_OPACITY = 0.5;\n\n/**\n * Given a list of running queries, calculates a common time scale for use on\n * the x axis (i.e. start/end dates and a step that is divisible into all of\n * the queries' steps).\n */\nexport function getCommonTimeScaleForQueries(queries: Array<PanelData<TimeSeriesData>>): TimeScale | undefined {\n  const seriesData = queries.map((query) => query.data);\n  return getCommonTimeScale(seriesData);\n}\n\n/**\n * [DEPRECATED] Gets ECharts line series option properties for legacy LineChart\n */\nexport function getLineSeries(\n  id: string,\n  formattedName: string,\n  data: LegacyTimeSeries['data'],\n  visual: TimeSeriesChartVisualOptions,\n  paletteColor?: string\n): LegacyTimeSeries {\n  const lineWidth = visual.lineWidth ?? DEFAULT_LINE_WIDTH;\n  const pointRadius = visual.pointRadius ?? DEFAULT_POINT_RADIUS;\n\n  // Shows datapoint symbols when selected time range is roughly 15 minutes or less\n  let showPoints = data !== undefined && data.length <= HIDE_DATAPOINTS_LIMIT;\n  // Allows overriding default behavior and opt-in to always show all symbols (can hurt performance)\n  if (visual.showPoints === 'always') {\n    showPoints = true;\n  }\n\n  return {\n    type: 'line',\n    id: id,\n    name: formattedName,\n    data: data,\n    connectNulls: visual.connectNulls ?? DEFAULT_CONNECT_NULLS,\n    color: paletteColor,\n    stack: visual.stack === 'all' ? visual.stack : undefined,\n    sampling: 'lttb',\n    progressiveThreshold: OPTIMIZED_MODE_SERIES_LIMIT, // https://echarts.apache.org/en/option.html#series-lines.progressiveThreshold\n    showSymbol: showPoints,\n    showAllSymbol: true,\n    symbolSize: pointRadius,\n    lineStyle: {\n      width: lineWidth,\n      opacity: 0.8,\n    },\n    areaStyle: {\n      opacity: visual.areaOpacity ?? DEFAULT_AREA_OPACITY,\n    },\n    // https://echarts.apache.org/en/option.html#series-line.emphasis\n    emphasis: {\n      focus: 'series',\n      disabled: visual.areaOpacity !== undefined && visual.areaOpacity > 0, // prevents flicker when moving cursor between shaded regions\n      lineStyle: {\n        width: lineWidth + 1.5,\n        opacity: 1,\n      },\n    },\n    blur: {\n      lineStyle: {\n        width: lineWidth,\n        opacity: BLUR_FADEOUT_OPACITY,\n      },\n    },\n  };\n}\n\n/**\n * Gets ECharts line series option properties for recommended TimeChart\n */\nexport function getTimeSeries(\n  id: string,\n  datasetIndex: number,\n  formattedName: string,\n  visual: TimeSeriesChartVisualOptions,\n  timeScale: TimeScale,\n  paletteColor: string\n): TimeSeriesOption {\n  const lineWidth = visual.lineWidth ?? DEFAULT_LINE_WIDTH;\n  const pointRadius = visual.pointRadius ?? DEFAULT_POINT_RADIUS;\n\n  // Shows datapoint symbols when selected time range is roughly 15 minutes or less\n  const minuteMs = 60000;\n  let showPoints = timeScale.rangeMs <= minuteMs * 15;\n  // Allows overriding default behavior and opt-in to always show all symbols (can hurt performance)\n  if (visual.showPoints === 'always') {\n    showPoints = true;\n  }\n\n  if (visual.display === 'bar') {\n    const series: BarSeriesOption = {\n      type: 'bar',\n      id: id,\n      datasetIndex,\n      name: formattedName,\n      color: paletteColor,\n      stack: visual.stack === 'all' ? visual.stack : undefined,\n      label: {\n        show: false,\n      },\n    };\n    return series;\n  }\n\n  const series: LineSeriesOption = {\n    type: 'line',\n    id: id,\n    datasetIndex,\n    name: formattedName,\n    connectNulls: visual.connectNulls ?? DEFAULT_CONNECT_NULLS,\n    color: paletteColor,\n    stack: visual.stack === 'all' ? visual.stack : undefined,\n    sampling: 'lttb',\n    progressiveThreshold: OPTIMIZED_MODE_SERIES_LIMIT, // https://echarts.apache.org/en/option.html#series-lines.progressiveThreshold\n    showSymbol: showPoints,\n    showAllSymbol: true,\n    symbolSize: pointRadius,\n    lineStyle: {\n      width: lineWidth,\n      opacity: 0.95,\n    },\n    areaStyle: {\n      opacity: visual.areaOpacity ?? DEFAULT_AREA_OPACITY,\n    },\n    // https://echarts.apache.org/en/option.html#series-line.emphasis\n    emphasis: {\n      focus: 'series',\n      disabled: visual.areaOpacity !== undefined && visual.areaOpacity > 0, // prevents flicker when moving cursor between shaded regions\n      lineStyle: {\n        width: lineWidth + 1,\n        opacity: 1,\n      },\n    },\n    selectedMode: 'single',\n    select: {\n      itemStyle: {\n        borderColor: paletteColor,\n        borderWidth: pointRadius + 0.5,\n      },\n    },\n    blur: {\n      lineStyle: {\n        width: lineWidth,\n        opacity: BLUR_FADEOUT_OPACITY,\n      },\n    },\n  };\n  return series;\n}\n\n/**\n * Gets threshold-specific line series styles\n * markLine cannot be used since it does not update yAxis max / min\n * and threshold data needs to show in the tooltip\n */\nexport function getThresholdSeries(name: string, threshold: StepOptions, seriesIndex: number): LineSeriesOption {\n  return {\n    type: 'line',\n    name: name,\n    id: name,\n    datasetId: name,\n    datasetIndex: seriesIndex,\n    color: threshold.color,\n    label: {\n      show: false,\n    },\n    lineStyle: {\n      type: 'dashed',\n      width: 2,\n    },\n    emphasis: {\n      focus: 'series',\n      lineStyle: {\n        width: 2.5,\n      },\n    },\n    blur: {\n      lineStyle: {\n        opacity: BLUR_FADEOUT_OPACITY,\n      },\n    },\n  };\n}\n\n/**\n * Converts percent threshold into absolute step value\n * If max is undefined, use the max value from time series data as default\n */\nexport function convertPercentThreshold(\n  percent: number,\n  data: LegacyTimeSeries[] | TimeSeries[],\n  max?: number,\n  min?: number\n): number {\n  const percentDecimal = percent / 100;\n  const adjustedMax = max ?? findMax(data);\n  const adjustedMin = min ?? 0;\n  const total = adjustedMax - adjustedMin;\n  return percentDecimal * total + adjustedMin;\n}\n\nfunction findMax(data: LegacyTimeSeries[] | TimeSeries[]): number {\n  let max = 0;\n  if (data.length && data[0] !== undefined && (data as TimeSeries[])[0]?.values) {\n    (data as TimeSeries[]).forEach((series) => {\n      series.values.forEach((valueTuple: TimeSeriesValueTuple) => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        const [_, value] = valueTuple;\n        if (typeof value === 'number' && value > max) {\n          max = value;\n        }\n      });\n    });\n  } else {\n    (data as LegacyTimeSeries[]).forEach((series) => {\n      if (series.data !== undefined) {\n        series.data.forEach((value: EChartsValues) => {\n          if (typeof value === 'number' && value > max) {\n            max = value;\n          }\n        });\n      }\n    });\n  }\n  return max;\n}\n\n/**\n * Converts Perses panel yAxis from dashboard spec to ECharts supported yAxis options\n */\nexport function convertPanelYAxis(inputAxis: TimeSeriesChartYAxisOptions = {}): YAXisComponentOption {\n  const yAxis: YAXisComponentOption = {\n    show: true,\n    axisLabel: {\n      show: inputAxis?.show ?? DEFAULT_Y_AXIS.show,\n    },\n    min: inputAxis?.min,\n    max: inputAxis?.max,\n  };\n\n  // Set the y-axis minimum relative to the data\n  if (inputAxis?.min === undefined) {\n    // https://echarts.apache.org/en/option.html#yAxis.min\n    yAxis.min = (value): number => {\n      if (value.min >= 0 && value.min <= 1) {\n        // Helps with PercentDecimal units, or datasets that return 0 or 1 booleans\n        return 0;\n      }\n\n      // Note: We can tweak the MULTIPLIER constants if we want\n      // TODO: Experiment with using a padding that is based on the difference between max value and min value\n      if (value.min > 0) {\n        return roundDown(value.min * POSITIVE_MIN_VALUE_MULTIPLIER);\n      } else {\n        return roundDown(value.min * NEGATIVE_MIN_VALUE_MULTIPLIER);\n      }\n    };\n  }\n\n  return yAxis;\n}\n\n/**\n * Rounds down to nearest number with one significant digit.\n *\n * Examples:\n * 1. 675 --> 600\n * 2. 0.567 --> 0.5\n * 3. -12 --> -20\n */\nexport function roundDown(num: number): number {\n  const magnitude = Math.floor(Math.log10(Math.abs(num)));\n  const firstDigit = Math.floor(num / Math.pow(10, magnitude));\n  return firstDigit * Math.pow(10, magnitude);\n}\n"],"names":["getCommonTimeScale","OPTIMIZED_MODE_SERIES_LIMIT","DEFAULT_AREA_OPACITY","DEFAULT_CONNECT_NULLS","DEFAULT_LINE_WIDTH","DEFAULT_POINT_RADIUS","DEFAULT_Y_AXIS","POSITIVE_MIN_VALUE_MULTIPLIER","NEGATIVE_MIN_VALUE_MULTIPLIER","EMPTY_GRAPH_DATA","timeSeries","xAxis","legendItems","HIDE_DATAPOINTS_LIMIT","BLUR_FADEOUT_OPACITY","getCommonTimeScaleForQueries","queries","seriesData","map","query","data","getLineSeries","id","formattedName","visual","paletteColor","lineWidth","pointRadius","showPoints","undefined","length","type","name","connectNulls","color","stack","sampling","progressiveThreshold","showSymbol","showAllSymbol","symbolSize","lineStyle","width","opacity","areaStyle","areaOpacity","emphasis","focus","disabled","blur","getTimeSeries","datasetIndex","timeScale","minuteMs","rangeMs","display","series","label","show","selectedMode","select","itemStyle","borderColor","borderWidth","getThresholdSeries","threshold","seriesIndex","datasetId","convertPercentThreshold","percent","max","min","percentDecimal","adjustedMax","findMax","adjustedMin","total","values","forEach","valueTuple","_","value","convertPanelYAxis","inputAxis","yAxis","axisLabel","roundDown","num","magnitude","Math","floor","log10","abs","firstDigit","pow"],"mappings":"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"}
+{"version":3,"sources":["../../../src/utils/data-transform.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { YAXisComponentOption } from 'echarts';\nimport { LineSeriesOption, BarSeriesOption } from 'echarts/charts';\nimport {\n  StepOptions,\n  TimeScale,\n  TimeSeries,\n  TimeSeriesValueTuple,\n  getCommonTimeScale,\n  TimeSeriesData,\n} from '@perses-dev/core';\nimport {\n  OPTIMIZED_MODE_SERIES_LIMIT,\n  LegacyTimeSeries,\n  EChartsDataFormat,\n  EChartsValues,\n  TimeSeriesOption,\n} from '@perses-dev/components';\nimport { useTimeSeriesQueries, PanelData } from '@perses-dev/plugin-system';\nimport {\n  DEFAULT_AREA_OPACITY,\n  DEFAULT_CONNECT_NULLS,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_POINT_RADIUS,\n  DEFAULT_Y_AXIS,\n  POSITIVE_MIN_VALUE_MULTIPLIER,\n  NEGATIVE_MIN_VALUE_MULTIPLIER,\n  TimeSeriesChartVisualOptions,\n  TimeSeriesChartYAxisOptions,\n  LineStyleType,\n} from '../time-series-chart-model';\n\nexport type RunningQueriesState = ReturnType<typeof useTimeSeriesQueries>;\n\nexport const EMPTY_GRAPH_DATA: EChartsDataFormat = {\n  timeSeries: [],\n  xAxis: [],\n  legendItems: [],\n};\n\nexport const HIDE_DATAPOINTS_LIMIT = 70;\n\nexport const BLUR_FADEOUT_OPACITY = 0.5;\n\n/**\n * Given a list of running queries, calculates a common time scale for use on\n * the x axis (i.e. start/end dates and a step that is divisible into all of\n * the queries' steps).\n */\nexport function getCommonTimeScaleForQueries(queries: Array<PanelData<TimeSeriesData>>): TimeScale | undefined {\n  const seriesData = queries.map((query) => query.data);\n  return getCommonTimeScale(seriesData);\n}\n\n/**\n * Gets ECharts line series option properties for regular trends\n */\nexport function getTimeSeries(\n  id: string,\n  datasetIndex: number,\n  formattedName: string,\n  visual: TimeSeriesChartVisualOptions,\n  timeScale: TimeScale,\n  paletteColor: string,\n  querySettings?: { lineStyle?: LineStyleType; areaOpacity?: number }\n): TimeSeriesOption {\n  const lineWidth = visual.lineWidth ?? DEFAULT_LINE_WIDTH;\n  const pointRadius = visual.pointRadius ?? DEFAULT_POINT_RADIUS;\n\n  // Shows datapoint symbols when selected time range is roughly 15 minutes or less\n  const minuteMs = 60000;\n  let showPoints = timeScale.rangeMs <= minuteMs * 15;\n  // Allows overriding default behavior and opt-in to always show all symbols (can hurt performance)\n  if (visual.showPoints === 'always') {\n    showPoints = true;\n  }\n\n  if (visual.display === 'bar') {\n    const series: BarSeriesOption = {\n      type: 'bar',\n      id: id,\n      datasetIndex,\n      name: formattedName,\n      color: paletteColor,\n      stack: visual.stack === 'all' ? visual.stack : undefined,\n      label: {\n        show: false,\n      },\n    };\n    return series;\n  }\n\n  const series: LineSeriesOption = {\n    type: 'line',\n    id: id,\n    datasetIndex,\n    name: formattedName,\n    connectNulls: visual.connectNulls ?? DEFAULT_CONNECT_NULLS,\n    color: paletteColor,\n    stack: visual.stack === 'all' ? visual.stack : undefined,\n    sampling: 'lttb',\n    progressiveThreshold: OPTIMIZED_MODE_SERIES_LIMIT, // https://echarts.apache.org/en/option.html#series-lines.progressiveThreshold\n    showSymbol: showPoints,\n    showAllSymbol: true,\n    symbolSize: pointRadius,\n    lineStyle: {\n      width: lineWidth,\n      type: (querySettings?.lineStyle ?? visual.lineStyle) as LineStyleType,\n    },\n    areaStyle: {\n      opacity: querySettings?.areaOpacity ?? visual.areaOpacity ?? DEFAULT_AREA_OPACITY,\n    },\n    // https://echarts.apache.org/en/option.html#series-line.emphasis\n    emphasis: {\n      focus: 'series',\n      disabled: visual.areaOpacity !== undefined && visual.areaOpacity > 0, // prevents flicker when moving cursor between shaded regions\n      lineStyle: {\n        width: lineWidth + 1,\n        opacity: 1,\n        type: visual.lineStyle,\n      },\n    },\n    selectedMode: 'single',\n    select: {\n      itemStyle: {\n        borderColor: paletteColor,\n        borderWidth: pointRadius + 0.5,\n      },\n    },\n    blur: {\n      lineStyle: {\n        width: lineWidth,\n        opacity: BLUR_FADEOUT_OPACITY,\n        type: visual.lineStyle,\n      },\n    },\n  };\n  return series;\n}\n\n/**\n * Gets threshold-specific line series styles\n * markLine cannot be used since it does not update yAxis max / min\n * and threshold data needs to show in the tooltip\n */\nexport function getThresholdSeries(name: string, threshold: StepOptions, seriesIndex: number): LineSeriesOption {\n  return {\n    type: 'line',\n    name: name,\n    id: name,\n    datasetId: name,\n    datasetIndex: seriesIndex,\n    color: threshold.color,\n    label: {\n      show: false,\n    },\n    lineStyle: {\n      type: 'dashed',\n      width: 2,\n    },\n    emphasis: {\n      focus: 'series',\n      lineStyle: {\n        width: 2.5,\n      },\n    },\n    blur: {\n      lineStyle: {\n        opacity: BLUR_FADEOUT_OPACITY,\n      },\n    },\n  };\n}\n\n/**\n * Converts percent threshold into absolute step value\n * If max is undefined, use the max value from time series data as default\n */\nexport function convertPercentThreshold(\n  percent: number,\n  data: LegacyTimeSeries[] | TimeSeries[],\n  max?: number,\n  min?: number\n): number {\n  const percentDecimal = percent / 100;\n  const adjustedMax = max ?? findMax(data);\n  const adjustedMin = min ?? 0;\n  const total = adjustedMax - adjustedMin;\n  return percentDecimal * total + adjustedMin;\n}\n\nfunction findMax(data: LegacyTimeSeries[] | TimeSeries[]): number {\n  let max = 0;\n  if (data.length && data[0] !== undefined && (data as TimeSeries[])[0]?.values) {\n    (data as TimeSeries[]).forEach((series) => {\n      series.values.forEach((valueTuple: TimeSeriesValueTuple) => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        const [_, value] = valueTuple;\n        if (typeof value === 'number' && value > max) {\n          max = value;\n        }\n      });\n    });\n  } else {\n    (data as LegacyTimeSeries[]).forEach((series) => {\n      if (series.data !== undefined) {\n        series.data.forEach((value: EChartsValues) => {\n          if (typeof value === 'number' && value > max) {\n            max = value;\n          }\n        });\n      }\n    });\n  }\n  return max;\n}\n\n/**\n * Converts Perses panel yAxis from dashboard spec to ECharts supported yAxis options\n */\nexport function convertPanelYAxis(inputAxis: TimeSeriesChartYAxisOptions = {}): YAXisComponentOption {\n  const yAxis: YAXisComponentOption = {\n    show: true,\n    axisLabel: {\n      show: inputAxis?.show ?? DEFAULT_Y_AXIS.show,\n    },\n    min: inputAxis?.min,\n    max: inputAxis?.max,\n  };\n\n  // Set the y-axis minimum relative to the data\n  if (inputAxis?.min === undefined) {\n    // https://echarts.apache.org/en/option.html#yAxis.min\n    yAxis.min = (value): number => {\n      if (value.min >= 0 && value.min <= 1) {\n        // Helps with PercentDecimal units, or datasets that return 0 or 1 booleans\n        return 0;\n      }\n\n      // Note: We can tweak the MULTIPLIER constants if we want\n      // TODO: Experiment with using a padding that is based on the difference between max value and min value\n      if (value.min > 0) {\n        return roundDown(value.min * POSITIVE_MIN_VALUE_MULTIPLIER);\n      } else {\n        return roundDown(value.min * NEGATIVE_MIN_VALUE_MULTIPLIER);\n      }\n    };\n  }\n\n  return yAxis;\n}\n\n/**\n * Rounds down to nearest number with one significant digit.\n *\n * Examples:\n * 1. 675 --> 600\n * 2. 0.567 --> 0.5\n * 3. -12 --> -20\n */\nexport function roundDown(num: number): number {\n  const magnitude = Math.floor(Math.log10(Math.abs(num)));\n  const firstDigit = Math.floor(num / Math.pow(10, magnitude));\n  return firstDigit * Math.pow(10, magnitude);\n}\n"],"names":["getCommonTimeScale","OPTIMIZED_MODE_SERIES_LIMIT","DEFAULT_AREA_OPACITY","DEFAULT_CONNECT_NULLS","DEFAULT_LINE_WIDTH","DEFAULT_POINT_RADIUS","DEFAULT_Y_AXIS","POSITIVE_MIN_VALUE_MULTIPLIER","NEGATIVE_MIN_VALUE_MULTIPLIER","EMPTY_GRAPH_DATA","timeSeries","xAxis","legendItems","HIDE_DATAPOINTS_LIMIT","BLUR_FADEOUT_OPACITY","getCommonTimeScaleForQueries","queries","seriesData","map","query","data","getTimeSeries","id","datasetIndex","formattedName","visual","timeScale","paletteColor","querySettings","lineWidth","pointRadius","minuteMs","showPoints","rangeMs","display","series","type","name","color","stack","undefined","label","show","connectNulls","sampling","progressiveThreshold","showSymbol","showAllSymbol","symbolSize","lineStyle","width","areaStyle","opacity","areaOpacity","emphasis","focus","disabled","selectedMode","select","itemStyle","borderColor","borderWidth","blur","getThresholdSeries","threshold","seriesIndex","datasetId","convertPercentThreshold","percent","max","min","percentDecimal","adjustedMax","findMax","adjustedMin","total","length","values","forEach","valueTuple","_","value","convertPanelYAxis","inputAxis","yAxis","axisLabel","roundDown","num","magnitude","Math","floor","log10","abs","firstDigit","pow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,SAKEA,kBAAkB,QAEb,mBAAmB;AAC1B,SACEC,2BAA2B,QAKtB,yBAAyB;AAEhC,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,kBAAkB,EAClBC,oBAAoB,EACpBC,cAAc,EACdC,6BAA6B,EAC7BC,6BAA6B,QAIxB,6BAA6B;AAIpC,OAAO,MAAMC,mBAAsC;IACjDC,YAAY,EAAE;IACdC,OAAO,EAAE;IACTC,aAAa,EAAE;AACjB,EAAE;AAEF,OAAO,MAAMC,wBAAwB,GAAG;AAExC,OAAO,MAAMC,uBAAuB,IAAI;AAExC;;;;CAIC,GACD,OAAO,SAASC,6BAA6BC,OAAyC;IACpF,MAAMC,aAAaD,QAAQE,GAAG,CAAC,CAACC,QAAUA,MAAMC,IAAI;IACpD,OAAOpB,mBAAmBiB;AAC5B;AAEA;;CAEC,GACD,OAAO,SAASI,cACdC,EAAU,EACVC,YAAoB,EACpBC,aAAqB,EACrBC,MAAoC,EACpCC,SAAoB,EACpBC,YAAoB,EACpBC,aAAmE;IAEnE,MAAMC,YAAYJ,OAAOI,SAAS,IAAIzB;IACtC,MAAM0B,cAAcL,OAAOK,WAAW,IAAIzB;IAE1C,iFAAiF;IACjF,MAAM0B,WAAW;IACjB,IAAIC,aAAaN,UAAUO,OAAO,IAAIF,WAAW;IACjD,kGAAkG;IAClG,IAAIN,OAAOO,UAAU,KAAK,UAAU;QAClCA,aAAa;IACf;IAEA,IAAIP,OAAOS,OAAO,KAAK,OAAO;QAC5B,MAAMC,SAA0B;YAC9BC,MAAM;YACNd,IAAIA;YACJC;YACAc,MAAMb;YACNc,OAAOX;YACPY,OAAOd,OAAOc,KAAK,KAAK,QAAQd,OAAOc,KAAK,GAAGC;YAC/CC,OAAO;gBACLC,MAAM;YACR;QACF;QACA,OAAOP;IACT;IAEA,MAAMA,SAA2B;QAC/BC,MAAM;QACNd,IAAIA;QACJC;QACAc,MAAMb;QACNmB,cAAclB,OAAOkB,YAAY,IAAIxC;QACrCmC,OAAOX;QACPY,OAAOd,OAAOc,KAAK,KAAK,QAAQd,OAAOc,KAAK,GAAGC;QAC/CI,UAAU;QACVC,sBAAsB5C;QACtB6C,YAAYd;QACZe,eAAe;QACfC,YAAYlB;QACZmB,WAAW;YACTC,OAAOrB;YACPO,MAAOR,eAAeqB,aAAaxB,OAAOwB,SAAS;QACrD;QACAE,WAAW;YACTC,SAASxB,eAAeyB,eAAe5B,OAAO4B,WAAW,IAAInD;QAC/D;QACA,iEAAiE;QACjEoD,UAAU;YACRC,OAAO;YACPC,UAAU/B,OAAO4B,WAAW,KAAKb,aAAaf,OAAO4B,WAAW,GAAG;YACnEJ,WAAW;gBACTC,OAAOrB,YAAY;gBACnBuB,SAAS;gBACThB,MAAMX,OAAOwB,SAAS;YACxB;QACF;QACAQ,cAAc;QACdC,QAAQ;YACNC,WAAW;gBACTC,aAAajC;gBACbkC,aAAa/B,cAAc;YAC7B;QACF;QACAgC,MAAM;YACJb,WAAW;gBACTC,OAAOrB;gBACPuB,SAAStC;gBACTsB,MAAMX,OAAOwB,SAAS;YACxB;QACF;IACF;IACA,OAAOd;AACT;AAEA;;;;CAIC,GACD,OAAO,SAAS4B,mBAAmB1B,IAAY,EAAE2B,SAAsB,EAAEC,WAAmB;IAC1F,OAAO;QACL7B,MAAM;QACNC,MAAMA;QACNf,IAAIe;QACJ6B,WAAW7B;QACXd,cAAc0C;QACd3B,OAAO0B,UAAU1B,KAAK;QACtBG,OAAO;YACLC,MAAM;QACR;QACAO,WAAW;YACTb,MAAM;YACNc,OAAO;QACT;QACAI,UAAU;YACRC,OAAO;YACPN,WAAW;gBACTC,OAAO;YACT;QACF;QACAY,MAAM;YACJb,WAAW;gBACTG,SAAStC;YACX;QACF;IACF;AACF;AAEA;;;CAGC,GACD,OAAO,SAASqD,wBACdC,OAAe,EACfhD,IAAuC,EACvCiD,GAAY,EACZC,GAAY;IAEZ,MAAMC,iBAAiBH,UAAU;IACjC,MAAMI,cAAcH,OAAOI,QAAQrD;IACnC,MAAMsD,cAAcJ,OAAO;IAC3B,MAAMK,QAAQH,cAAcE;IAC5B,OAAOH,iBAAiBI,QAAQD;AAClC;AAEA,SAASD,QAAQrD,IAAuC;IACtD,IAAIiD,MAAM;IACV,IAAIjD,KAAKwD,MAAM,IAAIxD,IAAI,CAAC,EAAE,KAAKoB,aAAa,AAACpB,IAAqB,CAAC,EAAE,EAAEyD,QAAQ;QAC5EzD,KAAsB0D,OAAO,CAAC,CAAC3C;YAC9BA,OAAO0C,MAAM,CAACC,OAAO,CAAC,CAACC;gBACrB,6DAA6D;gBAC7D,MAAM,CAACC,GAAGC,MAAM,GAAGF;gBACnB,IAAI,OAAOE,UAAU,YAAYA,QAAQZ,KAAK;oBAC5CA,MAAMY;gBACR;YACF;QACF;IACF,OAAO;QACJ7D,KAA4B0D,OAAO,CAAC,CAAC3C;YACpC,IAAIA,OAAOf,IAAI,KAAKoB,WAAW;gBAC7BL,OAAOf,IAAI,CAAC0D,OAAO,CAAC,CAACG;oBACnB,IAAI,OAAOA,UAAU,YAAYA,QAAQZ,KAAK;wBAC5CA,MAAMY;oBACR;gBACF;YACF;QACF;IACF;IACA,OAAOZ;AACT;AAEA;;CAEC,GACD,OAAO,SAASa,kBAAkBC,YAAyC,CAAC,CAAC;IAC3E,MAAMC,QAA8B;QAClC1C,MAAM;QACN2C,WAAW;YACT3C,MAAMyC,WAAWzC,QAAQpC,eAAeoC,IAAI;QAC9C;QACA4B,KAAKa,WAAWb;QAChBD,KAAKc,WAAWd;IAClB;IAEA,8CAA8C;IAC9C,IAAIc,WAAWb,QAAQ9B,WAAW;QAChC,sDAAsD;QACtD4C,MAAMd,GAAG,GAAG,CAACW;YACX,IAAIA,MAAMX,GAAG,IAAI,KAAKW,MAAMX,GAAG,IAAI,GAAG;gBACpC,2EAA2E;gBAC3E,OAAO;YACT;YAEA,yDAAyD;YACzD,wGAAwG;YACxG,IAAIW,MAAMX,GAAG,GAAG,GAAG;gBACjB,OAAOgB,UAAUL,MAAMX,GAAG,GAAG/D;YAC/B,OAAO;gBACL,OAAO+E,UAAUL,MAAMX,GAAG,GAAG9D;YAC/B;QACF;IACF;IAEA,OAAO4E;AACT;AAEA;;;;;;;CAOC,GACD,OAAO,SAASE,UAAUC,GAAW;IACnC,MAAMC,YAAYC,KAAKC,KAAK,CAACD,KAAKE,KAAK,CAACF,KAAKG,GAAG,CAACL;IACjD,MAAMM,aAAaJ,KAAKC,KAAK,CAACH,MAAME,KAAKK,GAAG,CAAC,IAAIN;IACjD,OAAOK,aAAaJ,KAAKK,GAAG,CAAC,IAAIN;AACnC"}

package/lib/utils/palette-gen.js

@@ -17,9 +17,9 @@ import { getConsistentColor } from './palette';
     const { categoricalPalette, visual, muiPrimaryColor, seriesName, seriesIndex, querySettings, queryHasMultipleResults } = props;
     // Use color overrides defined in query settings in priority, if applicable
     if (querySettings) {
-        if (querySettings.colorMode === 'fixed') {
+        if (querySettings.colorMode === 'fixed' && querySettings.colorValue) {
             return querySettings.colorValue;
-        } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults) {
+        } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults && querySettings.colorValue) {
             return querySettings.colorValue;
         }
     }

package/lib/utils/palette-gen.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/palette-gen.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QuerySettingsOptions, TimeSeriesChartVisualOptions } from '../time-series-chart-model';\nimport { getConsistentColor } from './palette';\n\nexport interface SeriesColorProps {\n  categoricalPalette: string[];\n  visual: TimeSeriesChartVisualOptions;\n  muiPrimaryColor: string;\n  seriesName: string;\n  seriesIndex: number;\n  querySettings?: QuerySettingsOptions;\n  queryHasMultipleResults?: boolean;\n}\n\n/**\n * Get line color as well as color for tooltip and legend, account for whether palette is 'categorical' or 'auto' aka generative\n */\nexport function getSeriesColor(props: SeriesColorProps): string {\n  const {\n    categoricalPalette,\n    visual,\n    muiPrimaryColor,\n    seriesName,\n    seriesIndex,\n    querySettings,\n    queryHasMultipleResults,\n  } = props;\n\n  // Use color overrides defined in query settings in priority, if applicable\n  if (querySettings) {\n    if (querySettings.colorMode === 'fixed') {\n      return querySettings.colorValue;\n    } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults) {\n      return querySettings.colorValue;\n    }\n  }\n\n  // Fallback is unlikely to set unless echarts theme palette in charts theme provider is undefined.\n  const fallbackColor =\n    Array.isArray(categoricalPalette) && categoricalPalette[0]\n      ? (categoricalPalette[0] as string) // Needed since echarts color property isn't always an array.\n      : muiPrimaryColor;\n\n  // Explicit way to always cycle through classical palette instead of changing when based on number of series.\n  if (visual.palette?.mode === 'categorical') {\n    return getCategoricalPaletteColor(categoricalPalette, seriesIndex, fallbackColor);\n  }\n\n  return getAutoPaletteColor(seriesName, fallbackColor);\n}\n\n/**\n * Get color from generative color palette, this approaches uses series name as the seed and\n * allows for consistent colors across panels (when all panels use this approach).\n */\nexport function getAutoPaletteColor(name: string, fallbackColor: string): string {\n  // corresponds to 'Auto' in palette.kind for generative color palette\n  const generatedColor = getConsistentSeriesNameColor(name);\n  return generatedColor ?? fallbackColor;\n}\n\n/**\n * Default classical qualitative palette that cycles through the colors array by index.\n */\nexport function getCategoricalPaletteColor(palette: string[], seriesIndex: number, fallbackColor: string): string {\n  if (palette === undefined) {\n    return fallbackColor;\n  }\n  // Loop through predefined static color palette\n  const paletteTotalColors = palette.length ?? 1;\n  const paletteIndex = seriesIndex % paletteTotalColors;\n  // fallback color comes from echarts theme\n  const seriesColor = palette[paletteIndex] ?? fallbackColor;\n  return seriesColor;\n}\n\n/*\n * Generate a consistent series name color (if series name includes 'error', it will have a red hue).\n */\nexport function getConsistentSeriesNameColor(inputString: string): string {\n  return getConsistentColor(inputString, inputString.toLowerCase().includes('error'));\n}\n"],"names":["getConsistentColor","getSeriesColor","props","categoricalPalette","visual","muiPrimaryColor","seriesName","seriesIndex","querySettings","queryHasMultipleResults","colorMode","colorValue","fallbackColor","Array","isArray","palette","mode","getCategoricalPaletteColor","getAutoPaletteColor","name","generatedColor","getConsistentSeriesNameColor","undefined","paletteTotalColors","length","paletteIndex","seriesColor","inputString","toLowerCase","includes"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,kBAAkB,QAAQ,YAAY;AAY/C;;CAEC,GACD,OAAO,SAASC,eAAeC,KAAuB;IACpD,MAAM,EACJC,kBAAkB,EAClBC,MAAM,EACNC,eAAe,EACfC,UAAU,EACVC,WAAW,EACXC,aAAa,EACbC,uBAAuB,EACxB,GAAGP;IAEJ,2EAA2E;IAC3E,IAAIM,eAAe;QACjB,IAAIA,cAAcE,SAAS,KAAK,SAAS;YACvC,OAAOF,cAAcG,UAAU;QACjC,OAAO,IAAIH,cAAcE,SAAS,KAAK,kBAAkB,CAACD,yBAAyB;YACjF,OAAOD,cAAcG,UAAU;QACjC;IACF;IAEA,kGAAkG;IAClG,MAAMC,gBACJC,MAAMC,OAAO,CAACX,uBAAuBA,kBAAkB,CAAC,EAAE,GACrDA,kBAAkB,CAAC,EAAE,CAAY,6DAA6D;OAC/FE;IAEN,6GAA6G;IAC7G,IAAID,OAAOW,OAAO,EAAEC,SAAS,eAAe;QAC1C,OAAOC,2BAA2Bd,oBAAoBI,aAAaK;IACrE;IAEA,OAAOM,oBAAoBZ,YAAYM;AACzC;AAEA;;;CAGC,GACD,OAAO,SAASM,oBAAoBC,IAAY,EAAEP,aAAqB;IACrE,qEAAqE;IACrE,MAAMQ,iBAAiBC,6BAA6BF;IACpD,OAAOC,kBAAkBR;AAC3B;AAEA;;CAEC,GACD,OAAO,SAASK,2BAA2BF,OAAiB,EAAER,WAAmB,EAAEK,aAAqB;IACtG,IAAIG,YAAYO,WAAW;QACzB,OAAOV;IACT;IACA,+CAA+C;IAC/C,MAAMW,qBAAqBR,QAAQS,MAAM,IAAI;IAC7C,MAAMC,eAAelB,cAAcgB;IACnC,0CAA0C;IAC1C,MAAMG,cAAcX,OAAO,CAACU,aAAa,IAAIb;IAC7C,OAAOc;AACT;AAEA;;CAEC,GACD,OAAO,SAASL,6BAA6BM,WAAmB;IAC9D,OAAO3B,mBAAmB2B,aAAaA,YAAYC,WAAW,GAAGC,QAAQ,CAAC;AAC5E"}
+{"version":3,"sources":["../../../src/utils/palette-gen.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QuerySettingsOptions, TimeSeriesChartVisualOptions } from '../time-series-chart-model';\nimport { getConsistentColor } from './palette';\n\nexport interface SeriesColorProps {\n  categoricalPalette: string[];\n  visual: TimeSeriesChartVisualOptions;\n  muiPrimaryColor: string;\n  seriesName: string;\n  seriesIndex: number;\n  querySettings?: QuerySettingsOptions;\n  queryHasMultipleResults?: boolean;\n}\n\n/**\n * Get line color as well as color for tooltip and legend, account for whether palette is 'categorical' or 'auto' aka generative\n */\nexport function getSeriesColor(props: SeriesColorProps): string {\n  const {\n    categoricalPalette,\n    visual,\n    muiPrimaryColor,\n    seriesName,\n    seriesIndex,\n    querySettings,\n    queryHasMultipleResults,\n  } = props;\n\n  // Use color overrides defined in query settings in priority, if applicable\n  if (querySettings) {\n    if (querySettings.colorMode === 'fixed' && querySettings.colorValue) {\n      return querySettings.colorValue;\n    } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults && querySettings.colorValue) {\n      return querySettings.colorValue;\n    }\n  }\n\n  // Fallback is unlikely to set unless echarts theme palette in charts theme provider is undefined.\n  const fallbackColor =\n    Array.isArray(categoricalPalette) && categoricalPalette[0]\n      ? (categoricalPalette[0] as string) // Needed since echarts color property isn't always an array.\n      : muiPrimaryColor;\n\n  // Explicit way to always cycle through classical palette instead of changing when based on number of series.\n  if (visual.palette?.mode === 'categorical') {\n    return getCategoricalPaletteColor(categoricalPalette, seriesIndex, fallbackColor);\n  }\n\n  return getAutoPaletteColor(seriesName, fallbackColor);\n}\n\n/**\n * Get color from generative color palette, this approaches uses series name as the seed and\n * allows for consistent colors across panels (when all panels use this approach).\n */\nexport function getAutoPaletteColor(name: string, fallbackColor: string): string {\n  // corresponds to 'Auto' in palette.kind for generative color palette\n  const generatedColor = getConsistentSeriesNameColor(name);\n  return generatedColor ?? fallbackColor;\n}\n\n/**\n * Default classical qualitative palette that cycles through the colors array by index.\n */\nexport function getCategoricalPaletteColor(palette: string[], seriesIndex: number, fallbackColor: string): string {\n  if (palette === undefined) {\n    return fallbackColor;\n  }\n  // Loop through predefined static color palette\n  const paletteTotalColors = palette.length ?? 1;\n  const paletteIndex = seriesIndex % paletteTotalColors;\n  // fallback color comes from echarts theme\n  const seriesColor = palette[paletteIndex] ?? fallbackColor;\n  return seriesColor;\n}\n\n/*\n * Generate a consistent series name color (if series name includes 'error', it will have a red hue).\n */\nexport function getConsistentSeriesNameColor(inputString: string): string {\n  return getConsistentColor(inputString, inputString.toLowerCase().includes('error'));\n}\n"],"names":["getConsistentColor","getSeriesColor","props","categoricalPalette","visual","muiPrimaryColor","seriesName","seriesIndex","querySettings","queryHasMultipleResults","colorMode","colorValue","fallbackColor","Array","isArray","palette","mode","getCategoricalPaletteColor","getAutoPaletteColor","name","generatedColor","getConsistentSeriesNameColor","undefined","paletteTotalColors","length","paletteIndex","seriesColor","inputString","toLowerCase","includes"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,kBAAkB,QAAQ,YAAY;AAY/C;;CAEC,GACD,OAAO,SAASC,eAAeC,KAAuB;IACpD,MAAM,EACJC,kBAAkB,EAClBC,MAAM,EACNC,eAAe,EACfC,UAAU,EACVC,WAAW,EACXC,aAAa,EACbC,uBAAuB,EACxB,GAAGP;IAEJ,2EAA2E;IAC3E,IAAIM,eAAe;QACjB,IAAIA,cAAcE,SAAS,KAAK,WAAWF,cAAcG,UAAU,EAAE;YACnE,OAAOH,cAAcG,UAAU;QACjC,OAAO,IAAIH,cAAcE,SAAS,KAAK,kBAAkB,CAACD,2BAA2BD,cAAcG,UAAU,EAAE;YAC7G,OAAOH,cAAcG,UAAU;QACjC;IACF;IAEA,kGAAkG;IAClG,MAAMC,gBACJC,MAAMC,OAAO,CAACX,uBAAuBA,kBAAkB,CAAC,EAAE,GACrDA,kBAAkB,CAAC,EAAE,CAAY,6DAA6D;OAC/FE;IAEN,6GAA6G;IAC7G,IAAID,OAAOW,OAAO,EAAEC,SAAS,eAAe;QAC1C,OAAOC,2BAA2Bd,oBAAoBI,aAAaK;IACrE;IAEA,OAAOM,oBAAoBZ,YAAYM;AACzC;AAEA;;;CAGC,GACD,OAAO,SAASM,oBAAoBC,IAAY,EAAEP,aAAqB;IACrE,qEAAqE;IACrE,MAAMQ,iBAAiBC,6BAA6BF;IACpD,OAAOC,kBAAkBR;AAC3B;AAEA;;CAEC,GACD,OAAO,SAASK,2BAA2BF,OAAiB,EAAER,WAAmB,EAAEK,aAAqB;IACtG,IAAIG,YAAYO,WAAW;QACzB,OAAOV;IACT;IACA,+CAA+C;IAC/C,MAAMW,qBAAqBR,QAAQS,MAAM,IAAI;IAC7C,MAAMC,eAAelB,cAAcgB;IACnC,0CAA0C;IAC1C,MAAMG,cAAcX,OAAO,CAACU,aAAa,IAAIb;IAC7C,OAAOc;AACT;AAEA;;CAEC,GACD,OAAO,SAASL,6BAA6BM,WAAmB;IAC9D,OAAO3B,mBAAmB2B,aAAaA,YAAYC,WAAW,GAAGC,QAAQ,CAAC;AAC5E"}

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "TimeSeriesChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.10.0",
+      "buildVersion": "0.10.2",
       "buildName": "@perses-dev/timeseries-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TimeSeriesChart.d3742b3b.js",
+      "name": "__mf/js/TimeSeriesChart.2e93229a.js",
       "path": "",
       "type": "global"
     },
@@ -20,7 +20,7 @@
       "api": ""
     },
     "globalName": "TimeSeriesChart",
-    "pluginVersion": "0.18.1",
+    "pluginVersion": "0.19.1",
     "prefetchInterface": false,
     "publicPath": "/plugins/TimeSeriesChart/"
   },
@@ -87,14 +87,14 @@
     {
       "id": "TimeSeriesChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.52.0-beta.5",
+      "version": "0.52.0",
       "singleton": true,
-      "requiredVersion": "^0.52.0-beta.5",
+      "requiredVersion": "^0.52.0",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/547.bb4f1e58.js"
+            "__mf/js/async/547.a80ef962.js"
           ]
         },
         "css": {
@@ -106,14 +106,14 @@
     {
       "id": "TimeSeriesChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.52.0-beta.5",
+      "version": "0.52.0",
       "singleton": true,
-      "requiredVersion": "^0.52.0-beta.5",
+      "requiredVersion": "^0.52.0",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/109.bf4f02fe.js"
+            "__mf/js/async/109.f05e61af.js"
           ]
         },
         "css": {
@@ -208,7 +208,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.719c530c.js"
+            "__mf/js/async/110.8b9c7f4b.js"
           ]
         },
         "css": {
@@ -246,18 +246,18 @@
         "js": {
           "sync": [
             "__mf/js/async/797.72ff552e.js",
-            "__mf/js/async/133.c48c8cc8.js",
-            "__mf/js/async/686.0cd9a75c.js",
+            "__mf/js/async/964.e89cbd3b.js",
+            "__mf/js/async/186.b17dcce5.js",
             "__mf/js/async/53.8edfe937.js",
             "__mf/js/async/613.20f15bb7.js",
-            "__mf/js/async/__federation_expose_TimeSeriesChart.f20a0aca.js"
+            "__mf/js/async/__federation_expose_TimeSeriesChart.f017c9e5.js"
           ],
           "async": [
             "__mf/js/async/224.2d3ce51f.js",
             "__mf/js/async/238.767e5398.js",
             "__mf/js/async/292.9efc6a73.js",
             "__mf/js/async/476.23a59a72.js",
-            "__mf/js/async/580.5f4b0dbd.js",
+            "__mf/js/async/971.6fcf317e.js",
             "__mf/js/async/lib-router.25a1f509.js",
             "__mf/js/async/488.031fc875.js"
           ]

package/mf-stats.json

@@ -5,11 +5,11 @@
     "name": "TimeSeriesChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.10.0",
+      "buildVersion": "0.10.2",
       "buildName": "@perses-dev/timeseries-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TimeSeriesChart.d3742b3b.js",
+      "name": "__mf/js/TimeSeriesChart.2e93229a.js",
       "path": "",
       "type": "global"
     },
@@ -20,7 +20,7 @@
       "api": ""
     },
     "globalName": "TimeSeriesChart",
-    "pluginVersion": "0.18.1",
+    "pluginVersion": "0.19.1",
     "prefetchInterface": false,
     "publicPath": "/plugins/TimeSeriesChart/"
   },
@@ -95,17 +95,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.52.0-beta.5",
+      "requiredVersion": "^0.52.0",
       "shareScope": "default",
       "name": "@perses-dev/components",
-      "version": "0.52.0-beta.5",
+      "version": "0.52.0",
       "eager": false,
       "id": "TimeSeriesChart:@perses-dev/components",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/547.bb4f1e58.js"
+            "__mf/js/async/547.a80ef962.js"
           ]
         },
         "css": {
@@ -119,17 +119,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.52.0-beta.5",
+      "requiredVersion": "^0.52.0",
       "shareScope": "default",
       "name": "@perses-dev/plugin-system",
-      "version": "0.52.0-beta.5",
+      "version": "0.52.0",
       "eager": false,
       "id": "TimeSeriesChart:@perses-dev/plugin-system",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/109.bf4f02fe.js"
+            "__mf/js/async/109.f05e61af.js"
           ]
         },
         "css": {
@@ -241,7 +241,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.719c530c.js"
+            "__mf/js/async/110.8b9c7f4b.js"
           ]
         },
         "css": {
@@ -295,18 +295,18 @@
         "js": {
           "sync": [
             "__mf/js/async/797.72ff552e.js",
-            "__mf/js/async/133.c48c8cc8.js",
-            "__mf/js/async/686.0cd9a75c.js",
+            "__mf/js/async/964.e89cbd3b.js",
+            "__mf/js/async/186.b17dcce5.js",
             "__mf/js/async/53.8edfe937.js",
             "__mf/js/async/613.20f15bb7.js",
-            "__mf/js/async/__federation_expose_TimeSeriesChart.f20a0aca.js"
+            "__mf/js/async/__federation_expose_TimeSeriesChart.f017c9e5.js"
           ],
           "async": [
             "__mf/js/async/224.2d3ce51f.js",
             "__mf/js/async/238.767e5398.js",
             "__mf/js/async/292.9efc6a73.js",
             "__mf/js/async/476.23a59a72.js",
-            "__mf/js/async/580.5f4b0dbd.js",
+            "__mf/js/async/971.6fcf317e.js",
             "__mf/js/async/lib-router.25a1f509.js",
             "__mf/js/async/488.031fc875.js"
           ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/timeseries-chart-plugin",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "homepage": "https://github.com/perses/plugins/blob/main/README.md",
   "repository": {
     "type": "git",
@@ -30,9 +30,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.52.0-beta.5",
-    "@perses-dev/core": "^0.52.0-beta.5",
-    "@perses-dev/plugin-system": "^0.52.0-beta.5",
+    "@perses-dev/components": "^0.52.0",
+    "@perses-dev/core": "^0.52.0",
+    "@perses-dev/plugin-system": "^0.52.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",
@@ -61,4 +61,4 @@
       }
     ]
   }
-}
+}