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

package/lib/TimeSeriesChartBase.js

@@ -11,17 +11,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import merge from 'lodash/merge';
 import isEqual from 'lodash/isEqual';
-import { toZonedTime } from 'date-fns-tz';
 import { getCommonTimeScale } from '@perses-dev/core';
 import { use } from 'echarts/core';
 import { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';
 import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
-import { clearHighlightedSeries, DEFAULT_PINNED_CROSSHAIR, DEFAULT_TOOLTIP_CONFIG, EChart, enableDataZoom, getClosestTimestamp, getFormattedAxis, getFormattedAxisLabel, getPointInGrid, restoreChart, TimeChartTooltip, useChartsContext, useTimeZone } from '@perses-dev/components';
+import { clearHighlightedSeries, DEFAULT_PINNED_CROSSHAIR, DEFAULT_TOOLTIP_CONFIG, EChart, enableDataZoom, getClosestTimestamp, getFormattedAxis, getPointInGrid, restoreChart, TimeChartTooltip, useChartsContext, useTimeZone } from '@perses-dev/components';
+import { createTimezoneAwareAxisFormatter } from './utils/timezone-formatter';
 use([
     EChartsLineChart,
     EChartsBarChart,
@@ -46,6 +46,9 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
     const [isDragging, setIsDragging] = useState(false);
     const [startX, setStartX] = useState(0);
     const { timeZone } = useTimeZone();
+    const getTimezoneAwareAxisFormatter = useCallback((rangeMs)=>createTimezoneAwareAxisFormatter(rangeMs, timeZone), [
+        timeZone
+    ]);
     let timeScale;
     if (timeScaleProp === undefined) {
         const commonTimeScale = getCommonTimeScale(data);
@@ -127,12 +130,11 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
         // Utilizes ECharts dataset so raw data is separate from series option style properties
         // https://apache.github.io/echarts-handbook/en/concepts/dataset/
         const dataset = [];
-        const isLocalTimeZone = timeZone === 'local';
         data.map((d, index)=>{
             const values = d.values.map(([timestamp, value])=>{
                 const val = value === null ? '-' : value; // echarts use '-' to represent null data
                 return [
-                    isLocalTimeZone ? timestamp : toZonedTime(timestamp, timeZone),
+                    timestamp,
                     val
                 ];
             });
@@ -156,11 +158,11 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
             series: updatedSeriesMapping,
             xAxis: {
                 type: 'time',
-                min: isLocalTimeZone ? timeScale.startMs : toZonedTime(timeScale.startMs, timeZone),
-                max: isLocalTimeZone ? timeScale.endMs : toZonedTime(timeScale.endMs, timeZone),
+                min: timeScale.startMs,
+                max: timeScale.endMs,
                 axisLabel: {
                     hideOverlap: true,
-                    formatter: getFormattedAxisLabel(timeScale.rangeMs ?? 0)
+                    formatter: getTimezoneAwareAxisFormatter(timeScale.rangeMs ?? 0)
                 },
                 axisPointer: {
                     snap: false
@@ -209,10 +211,10 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
         noDataOption,
         __experimentalEChartsOptionsOverride,
         noDataVariant,
-        timeZone,
         isStackedBar,
         enablePinning,
-        pinnedCrosshair
+        pinnedCrosshair,
+        getTimezoneAwareAxisFormatter
     ]);
     // Update adjacent charts so tooltip is unpinned when current chart is clicked.
     useEffect(()=>{

package/lib/TimeSeriesChartBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesChartBase.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 { forwardRef, MouseEvent, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport merge from 'lodash/merge';\nimport isEqual from 'lodash/isEqual';\nimport { toZonedTime } from 'date-fns-tz';\nimport { getCommonTimeScale, TimeScale, FormatOptions, TimeSeries } from '@perses-dev/core';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  ChartInstance,\n  ChartInstanceFocusOpts,\n  clearHighlightedSeries,\n  CursorCoordinates,\n  DEFAULT_PINNED_CROSSHAIR,\n  DEFAULT_TOOLTIP_CONFIG,\n  EChart,\n  enableDataZoom,\n  getClosestTimestamp,\n  getFormattedAxis,\n  getFormattedAxisLabel,\n  getPointInGrid,\n  OnEventsType,\n  restoreChart,\n  TimeChartSeriesMapping,\n  TimeChartTooltip,\n  TooltipConfig,\n  useChartsContext,\n  useTimeZone,\n  ZoomEventData,\n} from '@perses-dev/components';\nimport { DatasetOption } from 'echarts/types/dist/shared';\n\nuse([\n  EChartsLineChart,\n  EChartsBarChart,\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n  height: number;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  timeScale?: TimeScale;\n  yAxis?: YAXisComponentOption | YAXisComponentOption[];\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options, used for tooltip formatting when series have different units\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  grid?: GridComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  isStackedBar?: boolean;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n  {\n    height,\n    data,\n    seriesMapping,\n    timeScale: timeScaleProp,\n    yAxis,\n    format,\n    seriesFormatMap,\n    grid,\n    isStackedBar = false,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } =\n    useChartsContext();\n  const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const [pinnedCrosshair, setPinnedCrosshair] = useState<LineSeriesOption | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const { timeZone } = useTimeZone();\n  let timeScale: TimeScale;\n  if (timeScaleProp === undefined) {\n    const commonTimeScale = getCommonTimeScale(data);\n    if (commonTimeScale === undefined) {\n      // set default to past 5 years\n      const today = new Date();\n      const pastDate = new Date(today);\n      pastDate.setFullYear(today.getFullYear() - 5);\n      const todayMs = today.getTime();\n      const pastDateMs = pastDate.getTime();\n      timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n    } else {\n      timeScale = commonTimeScale;\n    }\n  } else {\n    timeScale = timeScaleProp;\n  }\n\n  useImperativeHandle(ref, () => {\n    return {\n      highlightSeries({ name }: ChartInstanceFocusOpts): void {\n        if (!chartRef.current) {\n          // when chart undef, do not highlight series when hovering over legend\n          return;\n        }\n\n        chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n      },\n      clearHighlightedSeries: (): void => {\n        if (!chartRef.current) {\n          // when chart undef, do not clear highlight series\n          return;\n        }\n        clearHighlightedSeries(chartRef.current);\n      },\n    };\n  }, []);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params): void => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const xAxisStartValue = params.batch[0].startValue;\n        const xAxisEndValue = params.batch[0].endValue;\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      finished: (): void => {\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      },\n    };\n  }, [onDataZoom, setTooltipPinnedCoords]);\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\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 dataset: DatasetOption[] = [];\n    const isLocalTimeZone = timeZone === 'local';\n    data.map((d, index) => {\n      const values = d.values.map(([timestamp, value]) => {\n        const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n        return [isLocalTimeZone ? timestamp : toZonedTime(timestamp, timeZone), val];\n      });\n      dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n    });\n\n    const updatedSeriesMapping =\n      enablePinning && pinnedCrosshair !== null ? [...seriesMapping, pinnedCrosshair] : seriesMapping;\n\n    const option: EChartsCoreOption = {\n      dataset: dataset,\n      series: updatedSeriesMapping,\n      xAxis: {\n        type: 'time',\n        min: isLocalTimeZone ? timeScale.startMs : toZonedTime(timeScale.startMs, timeZone),\n        max: isLocalTimeZone ? timeScale.endMs : toZonedTime(timeScale.endMs, timeZone),\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getFormattedAxisLabel(timeScale.rangeMs ?? 0),\n        },\n        axisPointer: {\n          snap: false, // important so shared crosshair does not lag\n        },\n      },\n      // If yAxis is already an array (multiple Y axes), use it directly; otherwise use getFormattedAxis\n      yAxis: Array.isArray(yAxis) ? yAxis : getFormattedAxis(yAxis, format),\n      animation: false,\n      tooltip: {\n        show: true,\n        // ECharts tooltip content hidden by default since we use custom tooltip instead.\n        // Stacked bar uses ECharts tooltip so subgroup data shows correctly.\n        showContent: isStackedBar,\n        trigger: isStackedBar ? 'item' : 'axis',\n        appendToBody: isStackedBar,\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: false, // xAxis.axisPointer.snap takes priority\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n\n    return option;\n  }, [\n    data,\n    seriesMapping,\n    timeScale,\n    yAxis,\n    format,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    timeZone,\n    isStackedBar,\n    enablePinning,\n    pinnedCrosshair,\n  ]);\n\n  // Update adjacent charts so tooltip is unpinned when current chart is clicked.\n  useEffect(() => {\n    // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.\n    // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.\n    const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;\n    if (multipleTooltipsPinned) {\n      if (!isEqual(lastTooltipPinnedCoords, tooltipPinnedCoords)) {\n        setTooltipPinnedCoords(null);\n        if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {\n          setPinnedCrosshair(null);\n        }\n      }\n    }\n    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastTooltipPinnedCoords, seriesMapping]);\n\n  return (\n    <Box\n      style={{ height }}\n      // onContextMenu={(e) => {\n      //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here\n      //   e.preventDefault(); // Prevent the default behaviour when right clicked\n      // }}\n      onClick={(e) => {\n        // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down\n        const isControlKeyPressed = e.ctrlKey || e.metaKey;\n        if (isControlKeyPressed) {\n          e.preventDefault();\n        }\n\n        // Determine where on chart canvas to plot pinned crosshair as markLine.\n        const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);\n        if (pointInGrid === null) {\n          return;\n        }\n\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {\n          // Pin tooltip and update shared charts context to remember these coordinates.\n          const pinnedPos: CursorCoordinates = {\n            page: {\n              x: e.pageX,\n              y: e.pageY,\n            },\n            client: {\n              x: e.clientX,\n              y: e.clientY,\n            },\n            plotCanvas: {\n              x: e.nativeEvent.offsetX,\n              y: e.nativeEvent.offsetY,\n            },\n            target: e.target,\n          };\n\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return pinnedPos;\n            } else {\n              setPinnedCrosshair(null);\n              return null;\n            }\n          });\n\n          setPinnedCrosshair((current) => {\n            // Only add pinned crosshair line series when there is not one already in seriesMapping.\n            if (current === null) {\n              const cursorX = pointInGrid[0];\n\n              // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent\n              const firstTimeSeriesValues = data[0]?.values;\n              const closestTimestamp = getClosestTimestamp(firstTimeSeriesValues, cursorX);\n\n              // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right\n              const pinnedCrosshair = merge({}, DEFAULT_PINNED_CROSSHAIR, {\n                markLine: {\n                  data: [\n                    {\n                      xAxis: closestTimestamp,\n                    },\n                  ],\n                },\n              } as LineSeriesOption);\n              return pinnedCrosshair;\n            } else {\n              // Clear previously set pinned crosshair\n              return null;\n            }\n          });\n\n          if (!isControlKeyPressed) {\n            setLastTooltipPinnedCoords(pinnedPos);\n          }\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeChartTooltip\n            containerId={chartsTheme.tooltipPortalContainerId}\n            chartRef={chartRef}\n            data={data}\n            seriesMapping={seriesMapping}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={isPinningEnabled}\n            pinnedPos={tooltipPinnedCoords}\n            format={format}\n            seriesFormatMap={seriesFormatMap}\n            onUnpinClick={() => {\n              // Unpins tooltip when clicking Pin icon in TooltipHeader.\n              setTooltipPinnedCoords(null);\n              // Clear previously set pinned crosshair.\n              setPinnedCrosshair(null);\n            }}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={enableSyncGrouping ? syncGroup : undefined}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useEffect","useImperativeHandle","useMemo","useRef","useState","Box","merge","isEqual","toZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","clearHighlightedSeries","DEFAULT_PINNED_CROSSHAIR","DEFAULT_TOOLTIP_CONFIG","EChart","enableDataZoom","getClosestTimestamp","getFormattedAxis","getFormattedAxisLabel","getPointInGrid","restoreChart","TimeChartTooltip","useChartsContext","useTimeZone","TimeSeriesChartBase","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","format","seriesFormatMap","grid","isStackedBar","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","chartsTheme","enablePinning","enableSyncGrouping","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","isPinningEnabled","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","pinnedCrosshair","setPinnedCrosshair","isDragging","setIsDragging","startX","setStartX","timeZone","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","rangeMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","finished","noDataOption","option","length","dataset","isLocalTimeZone","map","d","index","values","timestamp","value","val","push","id","source","dimensions","updatedSeriesMapping","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","Array","isArray","animation","tooltip","show","showContent","trigger","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","multipleTooltipsPinned","style","onClick","e","isControlKeyPressed","ctrlKey","metaKey","preventDefault","pointInGrid","nativeEvent","offsetX","offsetY","target","HTMLCanvasElement","pinnedPos","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","cursorX","firstTimeSeriesValues","closestTimestamp","markLine","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","wrapLabels","onUnpinClick","sx","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesChartBase.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 { forwardRef, MouseEvent, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport merge from 'lodash/merge';\nimport isEqual from 'lodash/isEqual';\nimport { getCommonTimeScale, TimeScale, FormatOptions, TimeSeries } from '@perses-dev/core';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  ChartInstance,\n  ChartInstanceFocusOpts,\n  clearHighlightedSeries,\n  CursorCoordinates,\n  DEFAULT_PINNED_CROSSHAIR,\n  DEFAULT_TOOLTIP_CONFIG,\n  EChart,\n  enableDataZoom,\n  getClosestTimestamp,\n  getFormattedAxis,\n  getPointInGrid,\n  OnEventsType,\n  restoreChart,\n  TimeChartSeriesMapping,\n  TimeChartTooltip,\n  TooltipConfig,\n  useChartsContext,\n  useTimeZone,\n  ZoomEventData,\n} from '@perses-dev/components';\nimport { DatasetOption } from 'echarts/types/dist/shared';\nimport { createTimezoneAwareAxisFormatter } from './utils/timezone-formatter';\n\nuse([\n  EChartsLineChart,\n  EChartsBarChart,\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n  height: number;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  timeScale?: TimeScale;\n  yAxis?: YAXisComponentOption | YAXisComponentOption[];\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options, used for tooltip formatting when series have different units\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  grid?: GridComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  isStackedBar?: boolean;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n  {\n    height,\n    data,\n    seriesMapping,\n    timeScale: timeScaleProp,\n    yAxis,\n    format,\n    seriesFormatMap,\n    grid,\n    isStackedBar = false,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } =\n    useChartsContext();\n  const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const [pinnedCrosshair, setPinnedCrosshair] = useState<LineSeriesOption | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const { timeZone } = useTimeZone();\n\n  const getTimezoneAwareAxisFormatter = useCallback(\n    (rangeMs: number): ((value: number) => string) => createTimezoneAwareAxisFormatter(rangeMs, timeZone),\n    [timeZone]\n  );\n\n  let timeScale: TimeScale;\n  if (timeScaleProp === undefined) {\n    const commonTimeScale = getCommonTimeScale(data);\n    if (commonTimeScale === undefined) {\n      // set default to past 5 years\n      const today = new Date();\n      const pastDate = new Date(today);\n      pastDate.setFullYear(today.getFullYear() - 5);\n      const todayMs = today.getTime();\n      const pastDateMs = pastDate.getTime();\n      timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n    } else {\n      timeScale = commonTimeScale;\n    }\n  } else {\n    timeScale = timeScaleProp;\n  }\n\n  useImperativeHandle(ref, () => {\n    return {\n      highlightSeries({ name }: ChartInstanceFocusOpts): void {\n        if (!chartRef.current) {\n          // when chart undef, do not highlight series when hovering over legend\n          return;\n        }\n\n        chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n      },\n      clearHighlightedSeries: (): void => {\n        if (!chartRef.current) {\n          // when chart undef, do not clear highlight series\n          return;\n        }\n        clearHighlightedSeries(chartRef.current);\n      },\n    };\n  }, []);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params): void => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const xAxisStartValue = params.batch[0].startValue;\n        const xAxisEndValue = params.batch[0].endValue;\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      finished: (): void => {\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      },\n    };\n  }, [onDataZoom, setTooltipPinnedCoords]);\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\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 dataset: DatasetOption[] = [];\n    data.map((d, index) => {\n      const values = d.values.map(([timestamp, value]) => {\n        const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n        return [timestamp, val];\n      });\n      dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n    });\n\n    const updatedSeriesMapping =\n      enablePinning && pinnedCrosshair !== null ? [...seriesMapping, pinnedCrosshair] : seriesMapping;\n\n    const option: EChartsCoreOption = {\n      dataset: dataset,\n      series: updatedSeriesMapping,\n      xAxis: {\n        type: 'time',\n        min: timeScale.startMs,\n        max: timeScale.endMs,\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getTimezoneAwareAxisFormatter(timeScale.rangeMs ?? 0),\n        },\n        axisPointer: {\n          snap: false, // important so shared crosshair does not lag\n        },\n      },\n      // If yAxis is already an array (multiple Y axes), use it directly; otherwise use getFormattedAxis\n      yAxis: Array.isArray(yAxis) ? yAxis : getFormattedAxis(yAxis, format),\n      animation: false,\n      tooltip: {\n        show: true,\n        // ECharts tooltip content hidden by default since we use custom tooltip instead.\n        // Stacked bar uses ECharts tooltip so subgroup data shows correctly.\n        showContent: isStackedBar,\n        trigger: isStackedBar ? 'item' : 'axis',\n        appendToBody: isStackedBar,\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: false, // xAxis.axisPointer.snap takes priority\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n\n    return option;\n  }, [\n    data,\n    seriesMapping,\n    timeScale,\n    yAxis,\n    format,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    isStackedBar,\n    enablePinning,\n    pinnedCrosshair,\n    getTimezoneAwareAxisFormatter,\n  ]);\n\n  // Update adjacent charts so tooltip is unpinned when current chart is clicked.\n  useEffect(() => {\n    // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.\n    // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.\n    const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;\n    if (multipleTooltipsPinned) {\n      if (!isEqual(lastTooltipPinnedCoords, tooltipPinnedCoords)) {\n        setTooltipPinnedCoords(null);\n        if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {\n          setPinnedCrosshair(null);\n        }\n      }\n    }\n    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastTooltipPinnedCoords, seriesMapping]);\n\n  return (\n    <Box\n      style={{ height }}\n      // onContextMenu={(e) => {\n      //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here\n      //   e.preventDefault(); // Prevent the default behaviour when right clicked\n      // }}\n      onClick={(e) => {\n        // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down\n        const isControlKeyPressed = e.ctrlKey || e.metaKey;\n        if (isControlKeyPressed) {\n          e.preventDefault();\n        }\n\n        // Determine where on chart canvas to plot pinned crosshair as markLine.\n        const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);\n        if (pointInGrid === null) {\n          return;\n        }\n\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {\n          // Pin tooltip and update shared charts context to remember these coordinates.\n          const pinnedPos: CursorCoordinates = {\n            page: {\n              x: e.pageX,\n              y: e.pageY,\n            },\n            client: {\n              x: e.clientX,\n              y: e.clientY,\n            },\n            plotCanvas: {\n              x: e.nativeEvent.offsetX,\n              y: e.nativeEvent.offsetY,\n            },\n            target: e.target,\n          };\n\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return pinnedPos;\n            } else {\n              setPinnedCrosshair(null);\n              return null;\n            }\n          });\n\n          setPinnedCrosshair((current) => {\n            // Only add pinned crosshair line series when there is not one already in seriesMapping.\n            if (current === null) {\n              const cursorX = pointInGrid[0];\n\n              // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent\n              const firstTimeSeriesValues = data[0]?.values;\n              const closestTimestamp = getClosestTimestamp(firstTimeSeriesValues, cursorX);\n\n              // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right\n              const pinnedCrosshair = merge({}, DEFAULT_PINNED_CROSSHAIR, {\n                markLine: {\n                  data: [\n                    {\n                      xAxis: closestTimestamp,\n                    },\n                  ],\n                },\n              } as LineSeriesOption);\n              return pinnedCrosshair;\n            } else {\n              // Clear previously set pinned crosshair\n              return null;\n            }\n          });\n\n          if (!isControlKeyPressed) {\n            setLastTooltipPinnedCoords(pinnedPos);\n          }\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeChartTooltip\n            containerId={chartsTheme.tooltipPortalContainerId}\n            chartRef={chartRef}\n            data={data}\n            seriesMapping={seriesMapping}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={isPinningEnabled}\n            pinnedPos={tooltipPinnedCoords}\n            format={format}\n            seriesFormatMap={seriesFormatMap}\n            onUnpinClick={() => {\n              // Unpins tooltip when clicking Pin icon in TooltipHeader.\n              setTooltipPinnedCoords(null);\n              // Clear previously set pinned crosshair.\n              setPinnedCrosshair(null);\n            }}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={enableSyncGrouping ? syncGroup : undefined}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Box","merge","isEqual","getCommonTimeScale","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","clearHighlightedSeries","DEFAULT_PINNED_CROSSHAIR","DEFAULT_TOOLTIP_CONFIG","EChart","enableDataZoom","getClosestTimestamp","getFormattedAxis","getPointInGrid","restoreChart","TimeChartTooltip","useChartsContext","useTimeZone","createTimezoneAwareAxisFormatter","TimeSeriesChartBase","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","format","seriesFormatMap","grid","isStackedBar","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","chartsTheme","enablePinning","enableSyncGrouping","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","isPinningEnabled","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","pinnedCrosshair","setPinnedCrosshair","isDragging","setIsDragging","startX","setStartX","timeZone","getTimezoneAwareAxisFormatter","rangeMs","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","finished","noDataOption","option","length","dataset","map","d","index","values","timestamp","value","val","push","id","source","dimensions","updatedSeriesMapping","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","Array","isArray","animation","tooltip","show","showContent","trigger","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","multipleTooltipsPinned","style","onClick","e","isControlKeyPressed","ctrlKey","metaKey","preventDefault","pointInGrid","nativeEvent","offsetX","offsetY","target","HTMLCanvasElement","pinnedPos","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","cursorX","firstTimeSeriesValues","closestTimestamp","markLine","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","wrapLabels","onUnpinClick","sx","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/lib/cjs/QuerySettingsEditor.js

@@ -212,19 +212,20 @@ function QuerySettingsEditor(props) {
             qs.areaOpacity = undefined;
         });
     };
-    const addUnit = (i)=>{
+    const addFormat = (i)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = {
-                unit: 'decimal'
+                unit: 'decimal',
+                shortValues: true
             };
         });
     };
-    const removeUnit = (i)=>{
+    const removeFormat = (i)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = undefined;
         });
     };
-    const handleUnitChange = (i, format)=>{
+    const handleFormatChange = (i, format)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = format;
         });
@@ -288,9 +289,9 @@ function QuerySettingsEditor(props) {
                     onRemoveLineStyle: ()=>removeLineStyle(i),
                     onAddAreaOpacity: ()=>addAreaOpacity(i),
                     onRemoveAreaOpacity: ()=>removeAreaOpacity(i),
-                    onAddUnit: ()=>addUnit(i),
-                    onRemoveUnit: ()=>removeUnit(i),
-                    onUnitChange: (format)=>handleUnitChange(i, format)
+                    onAddFormat: ()=>addFormat(i),
+                    onRemoveFormat: ()=>removeFormat(i),
+                    onFormatChange: (format)=>handleFormatChange(i, format)
                 }, i)),
             queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                 variant: "contained",
@@ -304,7 +305,7 @@ function QuerySettingsEditor(props) {
         ]
     });
 }
-function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddUnit, onRemoveUnit, onUnitChange }) {
+function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddFormat, onRemoveFormat, onFormatChange }) {
     // current query index should also be selectable
     const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b)=>a - b);
     // State for dropdown menu
@@ -328,9 +329,9 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
             action: onAddAreaOpacity
         });
         if (format === undefined) options.push({
-            key: 'unit',
-            label: 'Unit',
-            action: onAddUnit
+            key: 'format',
+            label: 'Format',
+            action: onAddFormat
         });
         return options;
     }, [
@@ -341,7 +342,7 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         onAddColor,
         onAddLineStyle,
         onAddAreaOpacity,
-        onAddUnit
+        onAddFormat
     ]);
     const handleAddMenuClick = (event)=>{
         if (availableOptions.length === 1 && availableOptions[0]) {
@@ -359,172 +360,183 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         action();
         handleMenuClose();
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         sx: {
             borderBottom: '1px solid',
             borderColor: 'divider',
             borderRadius: 1,
-            p: 2
+            p: 2,
+            display: 'flex',
+            flexWrap: 'nowrap',
+            flexDirection: 'row'
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-            direction: "row",
-            alignItems: "center",
-            sx: {
-                flexWrap: 'wrap',
-                gap: 2
-            },
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                    select: true,
-                    inputRef: inputRef,
-                    value: queryIndex,
-                    label: "Query",
-                    onChange: onQueryIndexChange,
-                    sx: {
-                        minWidth: '75px'
-                    },
-                    children: selectableQueryIndexes.map((qi)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
-                            value: qi,
-                            children: [
-                                "#",
-                                qi + 1
-                            ]
-                        }, `query-${qi}`))
-                }),
-                colorMode && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
-                    label: "Color",
-                    onRemove: onRemoveColor,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
-                            select: true,
-                            value: colorMode,
-                            onChange: onColorModeChange,
-                            size: "small",
-                            sx: {
-                                flexGrow: 1
-                            },
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                    value: "fixed-single",
-                                    children: "Fixed (single)"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                    value: "fixed",
-                                    children: "Fixed"
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
-                            label: `Query n°${queryIndex + 1}`,
-                            color: colorValue || DEFAULT_COLOR_VALUE,
-                            onColorChange: onColorValueChange
-                        })
-                    ]
-                }),
-                lineStyle && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
-                    label: "Line Style",
-                    onRemove: onRemoveLineStyle,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButtonGroup, {
-                            color: "primary",
-                            exclusive: true,
-                            value: lineStyle,
-                            onChange: (__, newValue)=>{
-                                if (newValue !== null) {
-                                    onLineStyleChange(newValue);
-                                }
-                            },
-                            size: "small",
-                            children: Object.entries(_timeserieschartmodel.LINE_STYLE_CONFIG).map(([styleValue, config])=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
-                                    value: styleValue,
-                                    "aria-label": `${styleValue} line style`,
-                                    children: config.label
-                                }, styleValue))
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                            sx: {
-                                flexGrow: 1
-                            }
-                        })
-                    ]
-                }),
-                areaOpacity !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
-                    label: "Opacity",
-                    onRemove: onRemoveAreaOpacity,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {}),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, {
-                            value: areaOpacity,
-                            valueLabelDisplay: "auto",
-                            step: _timeserieschartmodel.OPACITY_CONFIG.step,
-                            marks: true,
-                            min: _timeserieschartmodel.OPACITY_CONFIG.min,
-                            max: _timeserieschartmodel.OPACITY_CONFIG.max,
-                            onChange: onAreaOpacityChange,
-                            sx: {
-                                flexGrow: 1
-                            }
-                        })
-                    ]
-                }),
-                format !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(SettingsSection, {
-                    label: "Unit",
-                    onRemove: onRemoveUnit,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                sx: {
+                    flexWrap: 'wrap',
+                    gap: 2,
+                    flexGrow: 1
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        select: true,
+                        inputRef: inputRef,
+                        value: queryIndex,
+                        label: "Query",
+                        onChange: onQueryIndexChange,
                         sx: {
-                            minWidth: '180px'
+                            minWidth: '75px'
                         },
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.UnitSelector, {
-                            value: format,
-                            onChange: onUnitChange
-                        })
-                    })
-                }),
-                availableOptions.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                            onClick: handleAddMenuClick,
-                            "aria-label": "Add option",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
-                            anchorEl: anchorEl,
-                            open: Boolean(anchorEl),
-                            onClose: handleMenuClose,
-                            anchorOrigin: {
-                                vertical: 'bottom',
-                                horizontal: 'left'
+                        children: selectableQueryIndexes.map((qi)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
+                                value: qi,
+                                children: [
+                                    "#",
+                                    qi + 1
+                                ]
+                            }, `query-${qi}`))
+                    }),
+                    colorMode && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
+                        label: "Color",
+                        onRemove: onRemoveColor,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                                select: true,
+                                value: colorMode,
+                                onChange: onColorModeChange,
+                                size: "small",
+                                sx: {
+                                    flexGrow: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: "fixed-single",
+                                        children: "Fixed (single)"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        value: "fixed",
+                                        children: "Fixed"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
+                                label: `Query n°${queryIndex + 1}`,
+                                color: colorValue || DEFAULT_COLOR_VALUE,
+                                onColorChange: onColorValueChange
+                            })
+                        ]
+                    }),
+                    lineStyle && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
+                        label: "Line Style",
+                        onRemove: onRemoveLineStyle,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButtonGroup, {
+                                color: "primary",
+                                exclusive: true,
+                                value: lineStyle,
+                                onChange: (__, newValue)=>{
+                                    if (newValue !== null) {
+                                        onLineStyleChange(newValue);
+                                    }
+                                },
+                                size: "small",
+                                children: Object.entries(_timeserieschartmodel.LINE_STYLE_CONFIG).map(([styleValue, config])=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                                        value: styleValue,
+                                        "aria-label": `${styleValue} line style`,
+                                        children: config.label
+                                    }, styleValue))
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                sx: {
+                                    flexGrow: 1
+                                }
+                            })
+                        ]
+                    }),
+                    areaOpacity !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(SettingsSection, {
+                        label: "Opacity",
+                        onRemove: onRemoveAreaOpacity,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {}),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, {
+                                value: areaOpacity,
+                                valueLabelDisplay: "auto",
+                                step: _timeserieschartmodel.OPACITY_CONFIG.step,
+                                marks: true,
+                                min: _timeserieschartmodel.OPACITY_CONFIG.min,
+                                max: _timeserieschartmodel.OPACITY_CONFIG.max,
+                                onChange: onAreaOpacityChange,
+                                sx: {
+                                    flexGrow: 1
+                                }
+                            })
+                        ]
+                    }),
+                    format !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(SettingsSection, {
+                        label: "Format",
+                        onRemove: onRemoveFormat,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            sx: {
+                                minWidth: '180px',
+                                display: 'flex',
+                                gap: 1,
+                                flexDirection: 'column'
                             },
-                            children: availableOptions.map((option)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
-                                    onClick: ()=>handleMenuItemClick(option.action),
-                                    sx: {
-                                        minWidth: '120px'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {
-                                            sx: {
-                                                mr: 1,
-                                                fontSize: '1rem'
-                                            }
-                                        }),
-                                        option.label
-                                    ]
-                                }, option.key))
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
+                                value: format,
+                                onChange: onFormatChange
+                            })
                         })
-                    ]
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    sx: {
-                        flexGrow: 1
-                    }
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                    }),
+                    availableOptions.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                onClick: handleAddMenuClick,
+                                "aria-label": "Add option",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                                anchorEl: anchorEl,
+                                open: Boolean(anchorEl),
+                                onClose: handleMenuClose,
+                                anchorOrigin: {
+                                    vertical: 'bottom',
+                                    horizontal: 'left'
+                                },
+                                children: availableOptions.map((option)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
+                                        onClick: ()=>handleMenuItemClick(option.action),
+                                        sx: {
+                                            minWidth: '120px'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {
+                                                sx: {
+                                                    mr: 1,
+                                                    fontSize: '1rem'
+                                                }
+                                            }),
+                                            option.label
+                                        ]
+                                    }, option.key))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                     "aria-label": `delete settings for query n°${queryIndex + 1}`,
                     onClick: onDelete,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
                 })
-            ]
-        })
+            })
+        ]
     });
 }
 // Reusable section component