@perses-dev/timeseries-chart-plugin 0.12.0 → 0.12.1

package/lib/QuerySettingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuerySettingsEditor.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 {\n  Box,\n  Button,\n  IconButton,\n  Menu,\n  MenuItem,\n  Slider,\n  Stack,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport { OptionsColorPicker, UnitSelector } from '@perses-dev/components';\nimport { FormatOptions } from '@perses-dev/core';\nimport React, { ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { produce } from 'immer';\nimport { useQueryCountContext } from '@perses-dev/plugin-system';\nimport {\n  TimeSeriesChartOptions,\n  TimeSeriesChartOptionsEditorProps,\n  QuerySettingsOptions,\n  DEFAULT_AREA_OPACITY,\n  OPACITY_CONFIG,\n  LINE_STYLE_CONFIG,\n} from './time-series-chart-model';\n\nconst DEFAULT_COLOR_VALUE = '#555';\nconst NO_INDEX_AVAILABLE = -1; // invalid array index value used to represent the fact that no query index is available\n\nexport function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const querySettingsList = value.querySettings;\n\n  const handleQuerySettingsChange = (newQuerySettings: QuerySettingsOptions[]) => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.querySettings = newQuerySettings;\n      })\n    );\n  };\n  // Every time a new query settings input is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [querySettingsList?.length]);\n\n  const handleQueryIndexChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const querySettings = draft?.[i];\n          if (querySettings) {\n            querySettings.queryIndex = parseInt(e.target.value);\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorModeChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              const newColorMode = e.target.value;\n              if (!newColorMode) {\n                querySettings.colorMode = undefined;\n                querySettings.colorValue = undefined;\n              } else {\n                querySettings.colorMode = newColorMode as QuerySettingsOptions['colorMode'];\n              }\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorValueChange = (colorValue: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.colorValue = colorValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleLineStyleChange = (lineStyle: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.lineStyle = lineStyle as QuerySettingsOptions['lineStyle'];\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[], i: number): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.areaOpacity = newValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  // Helper function to update query settings at a specific index\n  const updateQuerySettings = (i: number, updater: (qs: QuerySettingsOptions) => void): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const qs = draft[i];\n          if (qs) {\n            updater(qs);\n          }\n        })\n      );\n    }\n  };\n\n  const deleteQuerySettingsInput = (i: number): void => {\n    if (querySettingsList !== undefined) {\n      const updatedQuerySettingsList = produce(querySettingsList, (draft) => {\n        draft.splice(i, 1);\n      });\n      handleQuerySettingsChange(updatedQuerySettingsList);\n    }\n  };\n\n  const addColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = 'fixed-single';\n      qs.colorValue = DEFAULT_COLOR_VALUE;\n    });\n  };\n\n  const removeColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = undefined;\n      qs.colorValue = undefined;\n    });\n  };\n\n  const addLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = 'solid';\n    });\n  };\n\n  const removeLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = undefined;\n    });\n  };\n\n  const addAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = DEFAULT_AREA_OPACITY;\n    });\n  };\n\n  const removeAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = undefined;\n    });\n  };\n\n  const addUnit = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = { unit: 'decimal' };\n    });\n  };\n\n  const removeUnit = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = undefined;\n    });\n  };\n\n  const handleUnitChange = (i: number, format?: FormatOptions): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = format;\n    });\n  };\n\n  const queryCount = useQueryCountContext();\n\n  // Compute the list of query indexes for which query settings are not already defined.\n  // This is to avoid already-booked indexes to still be selectable in the dropdown(s)\n  const availableQueryIndexes = useMemo(() => {\n    const bookedQueryIndexes = querySettingsList?.map((querySettings) => querySettings.queryIndex) ?? [];\n    const allQueryIndexes = Array.from({ length: queryCount }, (_, i) => i);\n    return allQueryIndexes.filter((_, queryIndex) => !bookedQueryIndexes.includes(queryIndex));\n  }, [querySettingsList, queryCount]);\n\n  const firstAvailableQueryIndex = useMemo(() => {\n    return availableQueryIndexes[0] ?? NO_INDEX_AVAILABLE;\n  }, [availableQueryIndexes]);\n\n  const defaultQuerySettings: QuerySettingsOptions = {\n    queryIndex: firstAvailableQueryIndex,\n  };\n\n  const addQuerySettingsInput = (): void => {\n    focusRef.current = true;\n    if (querySettingsList === undefined) {\n      handleQuerySettingsChange([defaultQuerySettings]);\n    } else {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          draft.push(defaultQuerySettings);\n        })\n      );\n    }\n  };\n\n  return (\n    <Stack>\n      {queryCount === 0 ? (\n        <Typography mb={2} fontStyle=\"italic\">\n          No query defined\n        </Typography>\n      ) : (\n        querySettingsList?.length &&\n        querySettingsList.map((querySettings, i) => (\n          <QuerySettingsInput\n            inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}\n            key={i}\n            querySettings={querySettings}\n            availableQueryIndexes={availableQueryIndexes}\n            onQueryIndexChange={(e) => {\n              handleQueryIndexChange(e, i);\n            }}\n            onColorModeChange={(e) => handleColorModeChange(e, i)}\n            onColorValueChange={(color) => handleColorValueChange(color, i)}\n            onLineStyleChange={(lineStyle) => handleLineStyleChange(lineStyle, i)}\n            onAreaOpacityChange={(event, value) => handleAreaOpacityChange(event, value, i)}\n            onDelete={() => {\n              deleteQuerySettingsInput(i);\n            }}\n            onAddColor={() => addColor(i)}\n            onRemoveColor={() => removeColor(i)}\n            onAddLineStyle={() => addLineStyle(i)}\n            onRemoveLineStyle={() => removeLineStyle(i)}\n            onAddAreaOpacity={() => addAreaOpacity(i)}\n            onRemoveAreaOpacity={() => removeAreaOpacity(i)}\n            onAddUnit={() => addUnit(i)}\n            onRemoveUnit={() => removeUnit(i)}\n            onUnitChange={(format) => handleUnitChange(i, format)}\n          />\n        ))\n      )}\n      {queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && (\n        <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={addQuerySettingsInput}>\n          Add Query Settings\n        </Button>\n      )}\n    </Stack>\n  );\n}\n\ninterface QuerySettingsInputProps {\n  querySettings: QuerySettingsOptions;\n  availableQueryIndexes: number[];\n  onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorValueChange: (colorValue: string) => void;\n  onLineStyleChange: (lineStyle: string) => void;\n  onAreaOpacityChange: (event: Event, value: number | number[]) => void;\n  onDelete: () => void;\n  inputRef?: React.RefObject<HTMLInputElement | null>;\n  // Optional control handlers\n  onAddColor: () => void;\n  onRemoveColor: () => void;\n  onAddLineStyle: () => void;\n  onRemoveLineStyle: () => void;\n  onAddAreaOpacity: () => void;\n  onRemoveAreaOpacity: () => void;\n  onAddUnit: () => void;\n  onRemoveUnit: () => void;\n  onUnitChange: (format?: FormatOptions) => void;\n}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format },\n  availableQueryIndexes,\n  onQueryIndexChange,\n  onColorModeChange,\n  onColorValueChange,\n  onLineStyleChange,\n  onAreaOpacityChange,\n  onDelete,\n  inputRef,\n  onAddColor: onAddColor,\n  onRemoveColor: onRemoveColor,\n  onAddLineStyle,\n  onRemoveLineStyle,\n  onAddAreaOpacity,\n  onRemoveAreaOpacity,\n  onAddUnit,\n  onRemoveUnit,\n  onUnitChange,\n}: QuerySettingsInputProps): ReactElement {\n  // current query index should also be selectable\n  const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b) => a - b);\n\n  // State for dropdown menu\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  // Calculate available options\n  const availableOptions = useMemo(() => {\n    const options = [];\n    if (!colorMode) options.push({ key: 'color', label: 'Color', action: onAddColor });\n    if (!lineStyle) options.push({ key: 'lineStyle', label: 'Line Style', action: onAddLineStyle });\n    if (areaOpacity === undefined) options.push({ key: 'opacity', label: 'Opacity', action: onAddAreaOpacity });\n    if (format === undefined) options.push({ key: 'unit', label: 'Unit', action: onAddUnit });\n    return options;\n  }, [colorMode, lineStyle, areaOpacity, format, onAddColor, onAddLineStyle, onAddAreaOpacity, onAddUnit]);\n\n  const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>) => {\n    if (availableOptions.length === 1 && availableOptions[0]) {\n      // If only one option left, add it directly\n      availableOptions[0].action();\n    } else {\n      // Show dropdown\n      setAnchorEl(event.currentTarget);\n    }\n  };\n\n  const handleMenuClose = () => {\n    setAnchorEl(null);\n  };\n\n  const handleMenuItemClick = (action: () => void) => {\n    action();\n    handleMenuClose();\n  };\n\n  return (\n    <Stack sx={{ borderBottom: '1px solid', borderColor: 'divider', borderRadius: 1, p: 2 }}>\n      <Stack direction=\"row\" alignItems=\"center\" sx={{ flexWrap: 'wrap', gap: 2 }}>\n        {/* Query Index Selection */}\n        <TextField\n          select\n          inputRef={inputRef}\n          value={queryIndex}\n          label=\"Query\"\n          onChange={onQueryIndexChange}\n          sx={{ minWidth: '75px' }}\n        >\n          {selectableQueryIndexes.map((qi) => (\n            <MenuItem key={`query-${qi}`} value={qi}>\n              #{qi + 1}\n            </MenuItem>\n          ))}\n        </TextField>\n\n        {/* Color section */}\n        {colorMode && (\n          <SettingsSection label=\"Color\" onRemove={onRemoveColor}>\n            <TextField select value={colorMode} onChange={onColorModeChange} size=\"small\" sx={{ flexGrow: 1 }}>\n              <MenuItem value=\"fixed-single\">Fixed (single)</MenuItem>\n              <MenuItem value=\"fixed\">Fixed</MenuItem>\n            </TextField>\n            <OptionsColorPicker\n              label={`Query n°${queryIndex + 1}`}\n              color={colorValue || DEFAULT_COLOR_VALUE}\n              onColorChange={onColorValueChange}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Line Style section */}\n        {lineStyle && (\n          <SettingsSection label=\"Line Style\" onRemove={onRemoveLineStyle}>\n            <ToggleButtonGroup\n              color=\"primary\"\n              exclusive\n              value={lineStyle}\n              onChange={(__, newValue) => {\n                if (newValue !== null) {\n                  onLineStyleChange(newValue);\n                }\n              }}\n              size=\"small\"\n            >\n              {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                  {config.label}\n                </ToggleButton>\n              ))}\n            </ToggleButtonGroup>\n            {/* Spacer to push delete button to the right */}\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Area Opacity section */}\n        {areaOpacity !== undefined && (\n          <SettingsSection label=\"Opacity\" onRemove={onRemoveAreaOpacity}>\n            {/* Spacer as I don't want to add a prop to SettingsSection for left-padding just for that case.. */}\n            <Box />\n            <Slider\n              value={areaOpacity}\n              valueLabelDisplay=\"auto\"\n              step={OPACITY_CONFIG.step}\n              marks\n              min={OPACITY_CONFIG.min}\n              max={OPACITY_CONFIG.max}\n              onChange={onAreaOpacityChange}\n              sx={{ flexGrow: 1 }}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Unit section */}\n        {format !== undefined && (\n          <SettingsSection label=\"Unit\" onRemove={onRemoveUnit}>\n            <Box sx={{ minWidth: '180px' }}>\n              <UnitSelector value={format} onChange={onUnitChange} />\n            </Box>\n          </SettingsSection>\n        )}\n\n        {/* Add Options Button - only show if there are available options */}\n        {availableOptions.length > 0 && (\n          <>\n            <IconButton onClick={handleAddMenuClick} aria-label=\"Add option\">\n              <AddIcon />\n            </IconButton>\n\n            {/* Dropdown Menu */}\n            <Menu\n              anchorEl={anchorEl}\n              open={Boolean(anchorEl)}\n              onClose={handleMenuClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left',\n              }}\n            >\n              {availableOptions.map((option) => (\n                <MenuItem\n                  key={option.key}\n                  onClick={() => handleMenuItemClick(option.action)}\n                  sx={{ minWidth: '120px' }}\n                >\n                  <AddIcon sx={{ mr: 1, fontSize: '1rem' }} />\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Menu>\n          </>\n        )}\n\n        {/* Spacer to push delete button to the right */}\n        <Box sx={{ flexGrow: 1 }} />\n\n        {/* Delete Button for this query settings */}\n        <IconButton aria-label={`delete settings for query n°${queryIndex + 1}`} onClick={onDelete}>\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\n    </Stack>\n  );\n}\n\ninterface SettingsSectionProps {\n  label: string;\n  children: React.ReactNode;\n  onRemove: () => void;\n}\n\n// Reusable section component\nfunction SettingsSection(props: SettingsSectionProps): ReactElement {\n  const { label, children, onRemove } = props;\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'relative', minWidth: '250px' }}>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          position: 'absolute',\n          top: -8,\n          left: 12,\n          backgroundColor: theme.palette.background.code,\n          px: 0.5,\n          color: 'text.secondary',\n          zIndex: 1,\n        }}\n      >\n        {label}\n      </Typography>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        spacing={1}\n        sx={{\n          border: '1px solid',\n          borderColor: 'divider',\n          borderRadius: 1,\n          p: 1,\n        }}\n      >\n        {children}\n        <IconButton size=\"small\" onClick={onRemove} aria-label={`Remove ${label}`}>\n          <CloseIcon />\n        </IconButton>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["Box","Button","IconButton","Menu","MenuItem","Slider","Stack","TextField","ToggleButton","ToggleButtonGroup","Typography","useTheme","OptionsColorPicker","UnitSelector","React","useEffect","useMemo","useRef","useState","DeleteIcon","AddIcon","CloseIcon","produce","useQueryCountContext","DEFAULT_AREA_OPACITY","OPACITY_CONFIG","LINE_STYLE_CONFIG","DEFAULT_COLOR_VALUE","NO_INDEX_AVAILABLE","QuerySettingsEditor","props","onChange","value","querySettingsList","querySettings","handleQuerySettingsChange","newQuerySettings","draft","recentlyAddedInputRef","focusRef","current","focus","length","handleQueryIndexChange","e","i","undefined","queryIndex","parseInt","target","handleColorModeChange","newColorMode","colorMode","colorValue","handleColorValueChange","handleLineStyleChange","lineStyle","handleAreaOpacityChange","_","sliderValue","newValue","Array","isArray","areaOpacity","updateQuerySettings","updater","qs","deleteQuerySettingsInput","updatedQuerySettingsList","splice","addColor","removeColor","addLineStyle","removeLineStyle","addAreaOpacity","removeAreaOpacity","addUnit","format","unit","removeUnit","handleUnitChange","queryCount","availableQueryIndexes","bookedQueryIndexes","map","allQueryIndexes","from","filter","includes","firstAvailableQueryIndex","defaultQuerySettings","addQuerySettingsInput","push","mb","fontStyle","QuerySettingsInput","inputRef","onQueryIndexChange","onColorModeChange","onColorValueChange","color","onLineStyleChange","onAreaOpacityChange","event","onDelete","onAddColor","onRemoveColor","onAddLineStyle","onRemoveLineStyle","onAddAreaOpacity","onRemoveAreaOpacity","onAddUnit","onRemoveUnit","onUnitChange","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","sort","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","borderBottom","borderColor","borderRadius","p","direction","alignItems","flexWrap","gap","select","minWidth","qi","SettingsSection","onRemove","size","flexGrow","onColorChange","exclusive","__","Object","entries","styleValue","config","aria-label","valueLabelDisplay","step","marks","min","max","open","Boolean","onClose","anchorOrigin","vertical","horizontal","option","mr","fontSize","children","theme","position","top","left","backgroundColor","palette","background","code","px","zIndex","spacing","border"],"mappings":"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"}
+{"version":3,"sources":["../../src/QuerySettingsEditor.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 {\n  Box,\n  Button,\n  IconButton,\n  Menu,\n  MenuItem,\n  Slider,\n  Stack,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport { OptionsColorPicker, UnitSelector } from '@perses-dev/components';\nimport { FormatOptions } from '@perses-dev/core';\nimport React, { ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { produce } from 'immer';\nimport { useQueryCountContext } from '@perses-dev/plugin-system';\nimport {\n  TimeSeriesChartOptions,\n  TimeSeriesChartOptionsEditorProps,\n  QuerySettingsOptions,\n  DEFAULT_AREA_OPACITY,\n  OPACITY_CONFIG,\n  LINE_STYLE_CONFIG,\n} from './time-series-chart-model';\n\nconst DEFAULT_COLOR_VALUE = '#555';\nconst NO_INDEX_AVAILABLE = -1; // invalid array index value used to represent the fact that no query index is available\n\nexport function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const querySettingsList = value.querySettings;\n\n  const handleQuerySettingsChange = (newQuerySettings: QuerySettingsOptions[]): void => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.querySettings = newQuerySettings;\n      })\n    );\n  };\n  // Every time a new query settings input is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [querySettingsList?.length]);\n\n  const handleQueryIndexChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const querySettings = draft?.[i];\n          if (querySettings) {\n            querySettings.queryIndex = parseInt(e.target.value);\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorModeChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              const newColorMode = e.target.value;\n              if (!newColorMode) {\n                querySettings.colorMode = undefined;\n                querySettings.colorValue = undefined;\n              } else {\n                querySettings.colorMode = newColorMode as QuerySettingsOptions['colorMode'];\n              }\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorValueChange = (colorValue: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.colorValue = colorValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleLineStyleChange = (lineStyle: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.lineStyle = lineStyle as QuerySettingsOptions['lineStyle'];\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[], i: number): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.areaOpacity = newValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  // Helper function to update query settings at a specific index\n  const updateQuerySettings = (i: number, updater: (qs: QuerySettingsOptions) => void): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const qs = draft[i];\n          if (qs) {\n            updater(qs);\n          }\n        })\n      );\n    }\n  };\n\n  const deleteQuerySettingsInput = (i: number): void => {\n    if (querySettingsList !== undefined) {\n      const updatedQuerySettingsList = produce(querySettingsList, (draft) => {\n        draft.splice(i, 1);\n      });\n      handleQuerySettingsChange(updatedQuerySettingsList);\n    }\n  };\n\n  const addColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = 'fixed-single';\n      qs.colorValue = DEFAULT_COLOR_VALUE;\n    });\n  };\n\n  const removeColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = undefined;\n      qs.colorValue = undefined;\n    });\n  };\n\n  const addLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = 'solid';\n    });\n  };\n\n  const removeLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = undefined;\n    });\n  };\n\n  const addAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = DEFAULT_AREA_OPACITY;\n    });\n  };\n\n  const removeAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = undefined;\n    });\n  };\n\n  const addUnit = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = { unit: 'decimal' };\n    });\n  };\n\n  const removeUnit = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = undefined;\n    });\n  };\n\n  const handleUnitChange = (i: number, format?: FormatOptions): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = format;\n    });\n  };\n\n  const queryCount = useQueryCountContext();\n\n  // Compute the list of query indexes for which query settings are not already defined.\n  // This is to avoid already-booked indexes to still be selectable in the dropdown(s)\n  const availableQueryIndexes = useMemo(() => {\n    const bookedQueryIndexes = querySettingsList?.map((querySettings) => querySettings.queryIndex) ?? [];\n    const allQueryIndexes = Array.from({ length: queryCount }, (_, i) => i);\n    return allQueryIndexes.filter((_, queryIndex) => !bookedQueryIndexes.includes(queryIndex));\n  }, [querySettingsList, queryCount]);\n\n  const firstAvailableQueryIndex = useMemo(() => {\n    return availableQueryIndexes[0] ?? NO_INDEX_AVAILABLE;\n  }, [availableQueryIndexes]);\n\n  const defaultQuerySettings: QuerySettingsOptions = {\n    queryIndex: firstAvailableQueryIndex,\n  };\n\n  const addQuerySettingsInput = (): void => {\n    focusRef.current = true;\n    if (querySettingsList === undefined) {\n      handleQuerySettingsChange([defaultQuerySettings]);\n    } else {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          draft.push(defaultQuerySettings);\n        })\n      );\n    }\n  };\n\n  return (\n    <Stack>\n      {queryCount === 0 ? (\n        <Typography mb={2} fontStyle=\"italic\">\n          No query defined\n        </Typography>\n      ) : (\n        querySettingsList?.length &&\n        querySettingsList.map((querySettings, i) => (\n          <QuerySettingsInput\n            inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}\n            key={i}\n            querySettings={querySettings}\n            availableQueryIndexes={availableQueryIndexes}\n            onQueryIndexChange={(e) => {\n              handleQueryIndexChange(e, i);\n            }}\n            onColorModeChange={(e) => handleColorModeChange(e, i)}\n            onColorValueChange={(color) => handleColorValueChange(color, i)}\n            onLineStyleChange={(lineStyle) => handleLineStyleChange(lineStyle, i)}\n            onAreaOpacityChange={(event, value) => handleAreaOpacityChange(event, value, i)}\n            onDelete={() => {\n              deleteQuerySettingsInput(i);\n            }}\n            onAddColor={() => addColor(i)}\n            onRemoveColor={() => removeColor(i)}\n            onAddLineStyle={() => addLineStyle(i)}\n            onRemoveLineStyle={() => removeLineStyle(i)}\n            onAddAreaOpacity={() => addAreaOpacity(i)}\n            onRemoveAreaOpacity={() => removeAreaOpacity(i)}\n            onAddUnit={() => addUnit(i)}\n            onRemoveUnit={() => removeUnit(i)}\n            onUnitChange={(format) => handleUnitChange(i, format)}\n          />\n        ))\n      )}\n      {queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && (\n        <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={addQuerySettingsInput}>\n          Add Query Settings\n        </Button>\n      )}\n    </Stack>\n  );\n}\n\ninterface QuerySettingsInputProps {\n  querySettings: QuerySettingsOptions;\n  availableQueryIndexes: number[];\n  onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorValueChange: (colorValue: string) => void;\n  onLineStyleChange: (lineStyle: string) => void;\n  onAreaOpacityChange: (event: Event, value: number | number[]) => void;\n  onDelete: () => void;\n  inputRef?: React.RefObject<HTMLInputElement | null>;\n  // Optional control handlers\n  onAddColor: () => void;\n  onRemoveColor: () => void;\n  onAddLineStyle: () => void;\n  onRemoveLineStyle: () => void;\n  onAddAreaOpacity: () => void;\n  onRemoveAreaOpacity: () => void;\n  onAddUnit: () => void;\n  onRemoveUnit: () => void;\n  onUnitChange: (format?: FormatOptions) => void;\n}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format },\n  availableQueryIndexes,\n  onQueryIndexChange,\n  onColorModeChange,\n  onColorValueChange,\n  onLineStyleChange,\n  onAreaOpacityChange,\n  onDelete,\n  inputRef,\n  onAddColor: onAddColor,\n  onRemoveColor: onRemoveColor,\n  onAddLineStyle,\n  onRemoveLineStyle,\n  onAddAreaOpacity,\n  onRemoveAreaOpacity,\n  onAddUnit,\n  onRemoveUnit,\n  onUnitChange,\n}: QuerySettingsInputProps): ReactElement {\n  // current query index should also be selectable\n  const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b) => a - b);\n\n  // State for dropdown menu\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  // Calculate available options\n  const availableOptions = useMemo(() => {\n    const options = [];\n    if (!colorMode) options.push({ key: 'color', label: 'Color', action: onAddColor });\n    if (!lineStyle) options.push({ key: 'lineStyle', label: 'Line Style', action: onAddLineStyle });\n    if (areaOpacity === undefined) options.push({ key: 'opacity', label: 'Opacity', action: onAddAreaOpacity });\n    if (format === undefined) options.push({ key: 'unit', label: 'Unit', action: onAddUnit });\n    return options;\n  }, [colorMode, lineStyle, areaOpacity, format, onAddColor, onAddLineStyle, onAddAreaOpacity, onAddUnit]);\n\n  const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>): void => {\n    if (availableOptions.length === 1 && availableOptions[0]) {\n      // If only one option left, add it directly\n      availableOptions[0].action();\n    } else {\n      // Show dropdown\n      setAnchorEl(event.currentTarget);\n    }\n  };\n\n  const handleMenuClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const handleMenuItemClick = (action: () => void): void => {\n    action();\n    handleMenuClose();\n  };\n\n  return (\n    <Stack sx={{ borderBottom: '1px solid', borderColor: 'divider', borderRadius: 1, p: 2 }}>\n      <Stack direction=\"row\" alignItems=\"center\" sx={{ flexWrap: 'wrap', gap: 2 }}>\n        {/* Query Index Selection */}\n        <TextField\n          select\n          inputRef={inputRef}\n          value={queryIndex}\n          label=\"Query\"\n          onChange={onQueryIndexChange}\n          sx={{ minWidth: '75px' }}\n        >\n          {selectableQueryIndexes.map((qi) => (\n            <MenuItem key={`query-${qi}`} value={qi}>\n              #{qi + 1}\n            </MenuItem>\n          ))}\n        </TextField>\n\n        {/* Color section */}\n        {colorMode && (\n          <SettingsSection label=\"Color\" onRemove={onRemoveColor}>\n            <TextField select value={colorMode} onChange={onColorModeChange} size=\"small\" sx={{ flexGrow: 1 }}>\n              <MenuItem value=\"fixed-single\">Fixed (single)</MenuItem>\n              <MenuItem value=\"fixed\">Fixed</MenuItem>\n            </TextField>\n            <OptionsColorPicker\n              label={`Query n°${queryIndex + 1}`}\n              color={colorValue || DEFAULT_COLOR_VALUE}\n              onColorChange={onColorValueChange}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Line Style section */}\n        {lineStyle && (\n          <SettingsSection label=\"Line Style\" onRemove={onRemoveLineStyle}>\n            <ToggleButtonGroup\n              color=\"primary\"\n              exclusive\n              value={lineStyle}\n              onChange={(__, newValue) => {\n                if (newValue !== null) {\n                  onLineStyleChange(newValue);\n                }\n              }}\n              size=\"small\"\n            >\n              {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                  {config.label}\n                </ToggleButton>\n              ))}\n            </ToggleButtonGroup>\n            {/* Spacer to push delete button to the right */}\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Area Opacity section */}\n        {areaOpacity !== undefined && (\n          <SettingsSection label=\"Opacity\" onRemove={onRemoveAreaOpacity}>\n            {/* Spacer as I don't want to add a prop to SettingsSection for left-padding just for that case.. */}\n            <Box />\n            <Slider\n              value={areaOpacity}\n              valueLabelDisplay=\"auto\"\n              step={OPACITY_CONFIG.step}\n              marks\n              min={OPACITY_CONFIG.min}\n              max={OPACITY_CONFIG.max}\n              onChange={onAreaOpacityChange}\n              sx={{ flexGrow: 1 }}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Unit section */}\n        {format !== undefined && (\n          <SettingsSection label=\"Unit\" onRemove={onRemoveUnit}>\n            <Box sx={{ minWidth: '180px' }}>\n              <UnitSelector value={format} onChange={onUnitChange} />\n            </Box>\n          </SettingsSection>\n        )}\n\n        {/* Add Options Button - only show if there are available options */}\n        {availableOptions.length > 0 && (\n          <>\n            <IconButton onClick={handleAddMenuClick} aria-label=\"Add option\">\n              <AddIcon />\n            </IconButton>\n\n            {/* Dropdown Menu */}\n            <Menu\n              anchorEl={anchorEl}\n              open={Boolean(anchorEl)}\n              onClose={handleMenuClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left',\n              }}\n            >\n              {availableOptions.map((option) => (\n                <MenuItem\n                  key={option.key}\n                  onClick={() => handleMenuItemClick(option.action)}\n                  sx={{ minWidth: '120px' }}\n                >\n                  <AddIcon sx={{ mr: 1, fontSize: '1rem' }} />\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Menu>\n          </>\n        )}\n\n        {/* Spacer to push delete button to the right */}\n        <Box sx={{ flexGrow: 1 }} />\n\n        {/* Delete Button for this query settings */}\n        <IconButton aria-label={`delete settings for query n°${queryIndex + 1}`} onClick={onDelete}>\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\n    </Stack>\n  );\n}\n\ninterface SettingsSectionProps {\n  label: string;\n  children: React.ReactNode;\n  onRemove: () => void;\n}\n\n// Reusable section component\nfunction SettingsSection(props: SettingsSectionProps): ReactElement {\n  const { label, children, onRemove } = props;\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'relative', minWidth: '250px' }}>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          position: 'absolute',\n          top: -8,\n          left: 12,\n          backgroundColor: theme.palette.background.code,\n          px: 0.5,\n          color: 'text.secondary',\n          zIndex: 1,\n        }}\n      >\n        {label}\n      </Typography>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        spacing={1}\n        sx={{\n          border: '1px solid',\n          borderColor: 'divider',\n          borderRadius: 1,\n          p: 1,\n        }}\n      >\n        {children}\n        <IconButton size=\"small\" onClick={onRemove} aria-label={`Remove ${label}`}>\n          <CloseIcon />\n        </IconButton>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["Box","Button","IconButton","Menu","MenuItem","Slider","Stack","TextField","ToggleButton","ToggleButtonGroup","Typography","useTheme","OptionsColorPicker","UnitSelector","React","useEffect","useMemo","useRef","useState","DeleteIcon","AddIcon","CloseIcon","produce","useQueryCountContext","DEFAULT_AREA_OPACITY","OPACITY_CONFIG","LINE_STYLE_CONFIG","DEFAULT_COLOR_VALUE","NO_INDEX_AVAILABLE","QuerySettingsEditor","props","onChange","value","querySettingsList","querySettings","handleQuerySettingsChange","newQuerySettings","draft","recentlyAddedInputRef","focusRef","current","focus","length","handleQueryIndexChange","e","i","undefined","queryIndex","parseInt","target","handleColorModeChange","newColorMode","colorMode","colorValue","handleColorValueChange","handleLineStyleChange","lineStyle","handleAreaOpacityChange","_","sliderValue","newValue","Array","isArray","areaOpacity","updateQuerySettings","updater","qs","deleteQuerySettingsInput","updatedQuerySettingsList","splice","addColor","removeColor","addLineStyle","removeLineStyle","addAreaOpacity","removeAreaOpacity","addUnit","format","unit","removeUnit","handleUnitChange","queryCount","availableQueryIndexes","bookedQueryIndexes","map","allQueryIndexes","from","filter","includes","firstAvailableQueryIndex","defaultQuerySettings","addQuerySettingsInput","push","mb","fontStyle","QuerySettingsInput","inputRef","onQueryIndexChange","onColorModeChange","onColorValueChange","color","onLineStyleChange","onAreaOpacityChange","event","onDelete","onAddColor","onRemoveColor","onAddLineStyle","onRemoveLineStyle","onAddAreaOpacity","onRemoveAreaOpacity","onAddUnit","onRemoveUnit","onUnitChange","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","sort","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","borderBottom","borderColor","borderRadius","p","direction","alignItems","flexWrap","gap","select","minWidth","qi","SettingsSection","onRemove","size","flexGrow","onColorChange","exclusive","__","Object","entries","styleValue","config","aria-label","valueLabelDisplay","step","marks","min","max","open","Boolean","onClose","anchorOrigin","vertical","horizontal","option","mr","fontSize","children","theme","position","top","left","backgroundColor","palette","background","code","px","zIndex","spacing","border"],"mappings":"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"}

package/lib/TimeSeriesChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChartPanel.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAIhE,OAAO,EAQL,cAAc,EAEf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAEL,UAAU,EAIX,MAAM,2BAA2B,CAAC;AAiBnC,OAAO,EACL,sBAAsB,EAKvB,MAAM,2BAA2B,CAAC;AAWnC,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,sBAAsB,EAAE,cAAc,CAAC,CAAC;AAWtF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAubrF"}
+{"version":3,"file":"TimeSeriesChartPanel.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAIhE,OAAO,EAQL,cAAc,EAEf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAEL,UAAU,EAIX,MAAM,2BAA2B,CAAC;AAiBnC,OAAO,EACL,sBAAsB,EAKvB,MAAM,2BAA2B,CAAC;AAWnC,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,sBAAsB,EAAE,cAAc,CAAC,CAAC;AAWtF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAwbrF"}

package/lib/TimeSeriesChartPanel.js

@@ -209,7 +209,8 @@ export function TimeSeriesChartPanel(props) {
                 }
             }
         }
-        if (thresholds && thresholds.steps) {
+        // map thresholds only if there is at least one time series to avoid displaying thresholds without any data
+        if (thresholds && thresholds.steps && timeChartData.length > 0) {
             // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.
             // These are styled with predefined colors and a dashed style to look different than series from query results.
             // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.

package/lib/TimeSeriesChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesChartPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport type { GridComponentOption } from 'echarts';\nimport merge from 'lodash/merge';\nimport {\n  getTimeSeriesValues,\n  DEFAULT_LEGEND,\n  getCalculations,\n  formatValue,\n  StepOptions,\n  TimeSeries,\n  TimeSeriesValueTuple,\n  TimeSeriesData,\n  CalculationType,\n} from '@perses-dev/core';\nimport {\n  LEGEND_VALUE_CONFIG,\n  PanelProps,\n  useTimeRange,\n  validateLegendSpec,\n  legendValues,\n} from '@perses-dev/plugin-system';\nimport {\n  ChartInstance,\n  YAxisLabel,\n  ZoomEventData,\n  useChartsTheme,\n  SelectedLegendItemState,\n  ContentWithLegend,\n  TableColumnConfig,\n  LegendItem,\n  LegendProps,\n  useId,\n  TooltipConfig,\n  DEFAULT_TOOLTIP_CONFIG,\n  TimeChartSeriesMapping,\n  getFormattedMultipleYAxes,\n} from '@perses-dev/components';\nimport {\n  TimeSeriesChartOptions,\n  DEFAULT_FORMAT,\n  DEFAULT_VISUAL,\n  THRESHOLD_PLOT_INTERVAL,\n  QuerySettingsOptions,\n} from './time-series-chart-model';\nimport {\n  getTimeSeries,\n  getCommonTimeScaleForQueries,\n  convertPanelYAxis,\n  getThresholdSeries,\n  convertPercentThreshold,\n} from './utils/data-transform';\nimport { getSeriesColor } from './utils/palette-gen';\nimport { TimeSeriesChartBase } from './TimeSeriesChartBase';\n\nexport type TimeSeriesChartProps = PanelProps<TimeSeriesChartOptions, TimeSeriesData>;\n\n// Using an \"ALL\" value to handle the case on first loading the chart where we\n// want to select all, but do not want all of the legend items to be visually highlighted.\n// This helps us differentiate those cases more clearly instead of inferring it\n// based on the state of the data. This also helps us avoid some coding\n// complexity around initializing a full record for the initial load that would\n// currently require significantly more refactoring of this component.\n// TODO: simplify this if we switch the list-based legend UI to use checkboxes,\n// where we *would* want to visually select all items in this case.\n\nexport function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement | null {\n  const {\n    spec: { thresholds, yAxis, tooltip, querySettings: querySettingsList },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n  const chartId = useId('time-series-panel');\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ECharts theme comes from ChartsProvider, more info: https://echarts.apache.org/en/option.html#color\n  // Colors are manually applied since our legend and tooltip are built custom with React.\n  const categoricalPalette = chartsTheme.echartsTheme.color;\n\n  // TODO: consider refactoring how the layout/spacing/alignment are calculated\n  // the next time significant changes are made to the time series panel (e.g.\n  // when making improvements to the legend to more closely match designs).\n  // This may also want to include moving some of this logic down to the shared,\n  // embeddable components.\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  // populate default 'position' and other future properties\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  // TODO: add support for y_axis_alt.format\n  const format = props.spec.yAxis?.format ?? DEFAULT_FORMAT;\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n  const visual = useMemo(() => {\n    return merge({}, DEFAULT_VISUAL, props.spec.visual);\n  }, [props.spec.visual]);\n\n  // convert Perses dashboard format to be ECharts compatible\n  const echartsYAxis = useMemo(() => {\n    return convertPanelYAxis(yAxis);\n  }, [yAxis]);\n\n  // Collect unique formats from query settings that differ from the base format\n  // These will create additional Y axes on the right side\n  const { additionalFormats, formatToYAxisIndex, seriesFormatMap } = useMemo(() => {\n    const baseUnit = format?.unit ?? 'decimal';\n    const additionalFormats: Array<typeof format> = [];\n    const formatToYAxisIndex = new Map<string, number>();\n    const seriesFormatMap = new Map<string, typeof format>();\n\n    // Index 0 is reserved for the base Y axis\n    formatToYAxisIndex.set(baseUnit, 0);\n\n    // Collect unique formats from query settings\n    for (const qs of querySettingsList ?? []) {\n      if (qs.format?.unit && qs.format.unit !== baseUnit) {\n        const unitKey = qs.format.unit;\n        if (!formatToYAxisIndex.has(unitKey)) {\n          // Add new format - index is 1 + position in additionalFormats array\n          formatToYAxisIndex.set(unitKey, 1 + additionalFormats.length);\n          additionalFormats.push(qs.format);\n        }\n      }\n    }\n\n    return { additionalFormats, formatToYAxisIndex, seriesFormatMap };\n  }, [format, querySettingsList]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const { setTimeRange } = useTimeRange();\n\n  // Populate series data based on query results\n  const {\n    timeScale,\n    timeChartData,\n    timeSeriesMapping,\n    legendItems,\n    seriesFormatMap: computedSeriesFormatMap,\n    maxValuesByFormat,\n  } = useMemo(() => {\n    const timeScale = getCommonTimeScaleForQueries(queryResults);\n    if (timeScale === undefined) {\n      return {\n        timeChartData: [],\n        timeSeriesMapping: [],\n        seriesFormatMap: new Map(),\n        maxValuesByFormat: new Map<string, number>(),\n      };\n    }\n\n    const legendItems: LegendItem[] = [];\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const timeChartData: TimeSeries[] = [];\n    const timeSeriesMapping: TimeChartSeriesMapping = [];\n\n    // Track max values for each format unit (used for dynamic Y axis offset calculation)\n    const maxValuesByFormat = new Map<string, number>();\n\n    // Index is counted across multiple queries which ensures the categorical color palette does not reset for every query\n    let seriesIndex = 0;\n\n    // Mapping of each set of query results to be ECharts option compatible\n    // TODO: Look into performance optimizations and moving parts of mapping to the lower level chart\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      // Retrieve querySettings for this query, if exists.\n      // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute\n      let querySettings: QuerySettingsOptions | undefined;\n      for (const item of querySettingsList ?? []) {\n        if (item.queryIndex === queryIndex) {\n          querySettings = item;\n          // We don't break the loop here just in case there are multiple querySettings defined for the\n          // same queryIndex, because in that case we want the last one to take precedence.\n        }\n      }\n\n      if (result) {\n        for (let i = 0; i < result.data.series.length; i++) {\n          const timeSeries: TimeSeries | undefined = result.data.series[i];\n          if (timeSeries === undefined) {\n            return { timeChartData: [], timeSeriesMapping: [], legendItems: [] };\n          }\n\n          // Format is determined by seriesNameFormat in query spec\n          const formattedSeriesName = timeSeries.formattedName ?? timeSeries.name;\n\n          // Color is used for line, tooltip, and legend\n          const seriesColor = getSeriesColor({\n            // ECharts type for color is not always an array but it is always an array in ChartsProvider\n            categoricalPalette: categoricalPalette as string[],\n            visual,\n            muiPrimaryColor: muiTheme.palette.primary.main,\n            seriesName: formattedSeriesName,\n            seriesIndex,\n            querySettings: querySettings,\n            queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1,\n          });\n\n          // We add a unique id for the chart to disambiguate items across charts\n          // when there are multiple on the page.\n          const seriesId = chartId + timeSeries.name + seriesIndex;\n\n          const legendCalculations = legend?.values\n            ? getCalculations(timeSeries.values, legend.values as CalculationType[])\n            : undefined;\n\n          // When we initially load the chart, we want to show all series, but\n          // DO NOT want to visualy highlight all the items in the legend.\n          const isSelectAll = selectedLegendItems === 'ALL';\n          const isSelected = !isSelectAll && !!selectedLegendItems[seriesId];\n          const showTimeSeries = isSelected || isSelectAll;\n\n          if (showTimeSeries) {\n            // Use timeChartData.length to ensure the data that is passed into the tooltip accounts for\n            // which legend items are selected. This must happen before timeChartData.push to avoid an\n            // off-by-one error, seriesIndex cannot be used since it's needed to cycle through palette\n            const datasetIndex = timeChartData.length;\n\n            // Determine yAxisIndex based on the query's format setting\n            const queryFormat = querySettings?.format;\n            const yAxisIndex = queryFormat?.unit ? (formatToYAxisIndex.get(queryFormat.unit) ?? 0) : 0;\n\n            // Each series is stored as a separate dataset source.\n            // https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\n            timeSeriesMapping.push(\n              getTimeSeries(\n                seriesId,\n                datasetIndex,\n                formattedSeriesName,\n                visual,\n                timeScale,\n                seriesColor,\n                querySettings,\n                yAxisIndex\n              )\n            );\n\n            // Store the format for this series for tooltip formatting\n            if (queryFormat) {\n              seriesFormatMap.set(seriesId, queryFormat);\n\n              // Track max value for this format unit (used for dynamic Y axis offset calculation)\n              const unitKey = queryFormat.unit;\n              if (unitKey) {\n                const seriesMax = Math.max(...timeSeries.values.map((v) => Math.abs(v[1] ?? 0)));\n                const currentMax = maxValuesByFormat.get(unitKey) ?? 0;\n                if (seriesMax > currentMax) {\n                  maxValuesByFormat.set(unitKey, seriesMax);\n                }\n              }\n            }\n\n            timeChartData.push({\n              name: formattedSeriesName,\n              values: getTimeSeriesValues(timeSeries, timeScale),\n            });\n          }\n\n          if (legend && legendItems) {\n            legendItems.push({\n              id: seriesId, // Avoids duplicate key console errors when there are duplicate series names\n              label: formattedSeriesName,\n              color: seriesColor,\n              data: legendCalculations,\n            });\n          }\n\n          // Used for repeating colors in Categorical palette\n          seriesIndex++;\n        }\n      }\n    }\n\n    if (thresholds && thresholds.steps) {\n      // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.\n      // These are styled with predefined colors and a dashed style to look different than series from query results.\n      // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.\n      const thresholdsColors = chartsTheme.thresholds;\n      const defaultThresholdColor = thresholds.defaultColor ?? thresholdsColors.defaultColor;\n      thresholds.steps.forEach((step: StepOptions, index: number) => {\n        const stepPaletteColor = thresholdsColors.palette[index] ?? defaultThresholdColor;\n        const thresholdLineColor = step.color ?? stepPaletteColor;\n        const stepOption: StepOptions = {\n          color: thresholdLineColor,\n          value:\n            // yAxis is passed here since it corresponds to dashboard JSON instead of the already converted ECharts yAxis\n            thresholds.mode === 'percent'\n              ? convertPercentThreshold(step.value, timeChartData, yAxis?.max, yAxis?.min)\n              : step.value,\n        };\n        const thresholdName = step.name ?? `Threshold ${index + 1}`;\n\n        // Generates array of [time, step.value] where time ranges from timescale.startMs to timescale.endMs with an interval of 15s\n        const thresholdTimeValueTuple: TimeSeriesValueTuple[] = [];\n        let currentTimestamp = timeScale.startMs;\n        while (currentTimestamp <= timeScale.endMs) {\n          thresholdTimeValueTuple.push([currentTimestamp, stepOption.value]);\n          // Used to plot fake thresholds datapoints so correct nearby threshold series shows in tooltip without flicker\n          currentTimestamp += 1000 * THRESHOLD_PLOT_INTERVAL;\n        }\n\n        timeChartData.push({\n          name: thresholdName,\n          values: thresholdTimeValueTuple,\n        });\n        timeSeriesMapping.push(getThresholdSeries(thresholdName, stepOption, seriesIndex));\n        seriesIndex++;\n      });\n    }\n\n    return {\n      timeScale,\n      timeChartData,\n      timeSeriesMapping,\n      legendItems,\n      seriesFormatMap,\n      maxValuesByFormat,\n    };\n  }, [\n    queryResults,\n    thresholds,\n    selectedLegendItems,\n    legend,\n    visual,\n    querySettingsList,\n    yAxis?.max,\n    yAxis?.min,\n    categoricalPalette,\n    chartId,\n    chartsTheme.thresholds,\n    muiTheme.palette.primary.main,\n    formatToYAxisIndex,\n    seriesFormatMap,\n  ]);\n\n  // Create multiple Y axes if there are additional formats\n  // Uses max values from data to compute dynamic offsets that adapt to label widths\n  const multipleYAxes = useMemo(() => {\n    if (additionalFormats.length === 0) {\n      return undefined; // Use single Y axis (default behavior)\n    }\n    // Build array of max values for each additional format (in order)\n    const maxValues = additionalFormats.map((fmt) => {\n      const unitKey = fmt.unit;\n      return unitKey ? (maxValuesByFormat?.get(unitKey) ?? 1000) : 1000;\n    });\n    return getFormattedMultipleYAxes(echartsYAxis, format, additionalFormats, maxValues);\n  }, [echartsYAxis, format, additionalFormats, maxValuesByFormat]);\n\n  // Translate the legend values into columns for the table legend.\n  const legendColumns = useMemo(() => {\n    if (!legend?.values) {\n      return [];\n    }\n\n    // Iterating the predefined list of possible values to retain a specific\n    // intended order of values.\n    return legendValues.reduce(\n      (columns, legendValue) => {\n        const legendConfig = LEGEND_VALUE_CONFIG[legendValue];\n\n        if (legendConfig && legend?.values?.includes(legendValue)) {\n          columns.push({\n            accessorKey: `data.${legendValue}`,\n            header: legendConfig.label,\n            headerDescription: legendConfig.description,\n            // Intentionally hardcoding a column width to start based on discussions\n            // with design around keeping this simple to start. This may need\n            // revisiting in the future to handle edge cases with very large values.\n            width: 72,\n            align: 'right',\n            cell: ({ getValue }) => {\n              const cellValue = getValue();\n              return typeof cellValue === 'number' && format ? formatValue(cellValue, format) : cellValue;\n            },\n            cellDescription: true,\n            enableSorting: true,\n          });\n        }\n\n        return columns;\n      },\n      [] as Array<TableColumnConfig<LegendItem>>\n    );\n  }, [legend?.values, format]);\n\n  const gridOverrides: GridComponentOption = useMemo(() => {\n    // When Y axes are hidden, disable containLabel to prevent auto-spacing, but add bottom padding for X axis\n    return echartsYAxis.show === false\n      ? {\n          left: 0,\n          right: 0,\n          bottom: 30,\n          containLabel: false,\n        }\n      : {\n          left: yAxis && yAxis.label ? 30 : 20,\n          // With containLabel: true in theme, ECharts auto-reserves space for axis labels.\n          // For multiple right axes, add extra padding for the last axis labels that extend beyond the grid.\n          right: additionalFormats.length > 0 ? 10 : 20,\n          bottom: 0,\n          containLabel: true,\n        };\n  }, [echartsYAxis.show, yAxis, additionalFormats.length]);\n\n  if (adjustedContentDimensions === undefined) {\n    return null;\n  }\n\n  const handleDataZoom = (event: ZoomEventData): void => {\n    // TODO: add ECharts transition animation on zoom\n    setTimeRange({ start: new Date(event.start), end: new Date(event.end) });\n  };\n\n  // Used to opt in to ECharts trigger item which show subgroup data accurately\n  const isStackedBar = visual.display === 'bar' && visual.stack === 'all';\n\n  // Turn on tooltip pinning by default but opt out for stacked bar or if explicitly set in tooltip panel spec\n  let enablePinning = true;\n  if (isStackedBar) {\n    enablePinning = false;\n  } else if (tooltip?.enablePinning !== undefined) {\n    enablePinning = tooltip.enablePinning;\n  }\n  const tooltipConfig: TooltipConfig = {\n    ...DEFAULT_TOOLTIP_CONFIG,\n    enablePinning,\n  };\n\n  return (\n    <Box sx={{ padding: `${contentPadding}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions.width}\n        height={adjustedContentDimensions.height}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems || [],\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: legendColumns,\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              {yAxis && yAxis.show && yAxis.label && <YAxisLabel name={yAxis.label} height={height} />}\n              <TimeSeriesChartBase\n                ref={chartRef}\n                height={height}\n                data={timeChartData}\n                seriesMapping={timeSeriesMapping}\n                timeScale={timeScale}\n                yAxis={multipleYAxes ?? echartsYAxis}\n                format={format}\n                seriesFormatMap={computedSeriesFormatMap}\n                grid={gridOverrides}\n                isStackedBar={isStackedBar}\n                tooltipConfig={tooltipConfig}\n                syncGroup=\"default-panel-group\" // TODO: make configurable from dashboard settings and per panel-group overrides\n                onDataZoom={handleDataZoom}\n                //  Show an empty chart when there is no data because the user unselected all items in\n                // the legend. Otherwise, show a \"no data\" message.\n                noDataVariant={!timeChartData.length && legendItems && legendItems.length > 0 ? 'chart' : 'message'}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","useTheme","merge","getTimeSeriesValues","DEFAULT_LEGEND","getCalculations","formatValue","LEGEND_VALUE_CONFIG","useTimeRange","validateLegendSpec","legendValues","YAxisLabel","useChartsTheme","ContentWithLegend","useId","DEFAULT_TOOLTIP_CONFIG","getFormattedMultipleYAxes","DEFAULT_FORMAT","DEFAULT_VISUAL","THRESHOLD_PLOT_INTERVAL","getTimeSeries","getCommonTimeScaleForQueries","convertPanelYAxis","getThresholdSeries","convertPercentThreshold","getSeriesColor","TimeSeriesChartBase","TimeSeriesChartPanel","props","spec","thresholds","yAxis","tooltip","querySettings","querySettingsList","contentDimensions","queryResults","chartsTheme","muiTheme","chartId","chartRef","categoricalPalette","echartsTheme","color","contentPadding","container","padding","default","adjustedContentDimensions","width","height","undefined","legend","format","visual","echartsYAxis","additionalFormats","formatToYAxisIndex","seriesFormatMap","baseUnit","unit","Map","set","qs","unitKey","has","length","push","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","setTimeRange","timeScale","timeChartData","timeSeriesMapping","legendItems","computedSeriesFormatMap","maxValuesByFormat","seriesIndex","queryIndex","result","item","i","data","series","timeSeries","formattedSeriesName","formattedName","name","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","queryHasMultipleResults","seriesId","legendCalculations","values","isSelectAll","isSelected","showTimeSeries","datasetIndex","queryFormat","yAxisIndex","get","seriesMax","Math","max","map","v","abs","currentMax","id","label","steps","thresholdsColors","defaultThresholdColor","defaultColor","forEach","step","index","stepPaletteColor","thresholdLineColor","stepOption","value","mode","min","thresholdName","thresholdTimeValueTuple","currentTimestamp","startMs","endMs","multipleYAxes","maxValues","fmt","legendColumns","reduce","columns","legendValue","legendConfig","includes","accessorKey","header","headerDescription","description","align","cell","getValue","cellValue","cellDescription","enableSorting","gridOverrides","show","left","right","bottom","containLabel","handleDataZoom","event","start","Date","end","isStackedBar","display","stack","enablePinning","tooltipConfig","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style","ref","seriesMapping","grid","syncGroup","onDataZoom","noDataVariant"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesChartPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport type { GridComponentOption } from 'echarts';\nimport merge from 'lodash/merge';\nimport {\n  getTimeSeriesValues,\n  DEFAULT_LEGEND,\n  getCalculations,\n  formatValue,\n  StepOptions,\n  TimeSeries,\n  TimeSeriesValueTuple,\n  TimeSeriesData,\n  CalculationType,\n} from '@perses-dev/core';\nimport {\n  LEGEND_VALUE_CONFIG,\n  PanelProps,\n  useTimeRange,\n  validateLegendSpec,\n  legendValues,\n} from '@perses-dev/plugin-system';\nimport {\n  ChartInstance,\n  YAxisLabel,\n  ZoomEventData,\n  useChartsTheme,\n  SelectedLegendItemState,\n  ContentWithLegend,\n  TableColumnConfig,\n  LegendItem,\n  LegendProps,\n  useId,\n  TooltipConfig,\n  DEFAULT_TOOLTIP_CONFIG,\n  TimeChartSeriesMapping,\n  getFormattedMultipleYAxes,\n} from '@perses-dev/components';\nimport {\n  TimeSeriesChartOptions,\n  DEFAULT_FORMAT,\n  DEFAULT_VISUAL,\n  THRESHOLD_PLOT_INTERVAL,\n  QuerySettingsOptions,\n} from './time-series-chart-model';\nimport {\n  getTimeSeries,\n  getCommonTimeScaleForQueries,\n  convertPanelYAxis,\n  getThresholdSeries,\n  convertPercentThreshold,\n} from './utils/data-transform';\nimport { getSeriesColor } from './utils/palette-gen';\nimport { TimeSeriesChartBase } from './TimeSeriesChartBase';\n\nexport type TimeSeriesChartProps = PanelProps<TimeSeriesChartOptions, TimeSeriesData>;\n\n// Using an \"ALL\" value to handle the case on first loading the chart where we\n// want to select all, but do not want all of the legend items to be visually highlighted.\n// This helps us differentiate those cases more clearly instead of inferring it\n// based on the state of the data. This also helps us avoid some coding\n// complexity around initializing a full record for the initial load that would\n// currently require significantly more refactoring of this component.\n// TODO: simplify this if we switch the list-based legend UI to use checkboxes,\n// where we *would* want to visually select all items in this case.\n\nexport function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement | null {\n  const {\n    spec: { thresholds, yAxis, tooltip, querySettings: querySettingsList },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n  const chartId = useId('time-series-panel');\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ECharts theme comes from ChartsProvider, more info: https://echarts.apache.org/en/option.html#color\n  // Colors are manually applied since our legend and tooltip are built custom with React.\n  const categoricalPalette = chartsTheme.echartsTheme.color;\n\n  // TODO: consider refactoring how the layout/spacing/alignment are calculated\n  // the next time significant changes are made to the time series panel (e.g.\n  // when making improvements to the legend to more closely match designs).\n  // This may also want to include moving some of this logic down to the shared,\n  // embeddable components.\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  // populate default 'position' and other future properties\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  // TODO: add support for y_axis_alt.format\n  const format = props.spec.yAxis?.format ?? DEFAULT_FORMAT;\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n  const visual = useMemo(() => {\n    return merge({}, DEFAULT_VISUAL, props.spec.visual);\n  }, [props.spec.visual]);\n\n  // convert Perses dashboard format to be ECharts compatible\n  const echartsYAxis = useMemo(() => {\n    return convertPanelYAxis(yAxis);\n  }, [yAxis]);\n\n  // Collect unique formats from query settings that differ from the base format\n  // These will create additional Y axes on the right side\n  const { additionalFormats, formatToYAxisIndex, seriesFormatMap } = useMemo(() => {\n    const baseUnit = format?.unit ?? 'decimal';\n    const additionalFormats: Array<typeof format> = [];\n    const formatToYAxisIndex = new Map<string, number>();\n    const seriesFormatMap = new Map<string, typeof format>();\n\n    // Index 0 is reserved for the base Y axis\n    formatToYAxisIndex.set(baseUnit, 0);\n\n    // Collect unique formats from query settings\n    for (const qs of querySettingsList ?? []) {\n      if (qs.format?.unit && qs.format.unit !== baseUnit) {\n        const unitKey = qs.format.unit;\n        if (!formatToYAxisIndex.has(unitKey)) {\n          // Add new format - index is 1 + position in additionalFormats array\n          formatToYAxisIndex.set(unitKey, 1 + additionalFormats.length);\n          additionalFormats.push(qs.format);\n        }\n      }\n    }\n\n    return { additionalFormats, formatToYAxisIndex, seriesFormatMap };\n  }, [format, querySettingsList]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const { setTimeRange } = useTimeRange();\n\n  // Populate series data based on query results\n  const {\n    timeScale,\n    timeChartData,\n    timeSeriesMapping,\n    legendItems,\n    seriesFormatMap: computedSeriesFormatMap,\n    maxValuesByFormat,\n  } = useMemo(() => {\n    const timeScale = getCommonTimeScaleForQueries(queryResults);\n    if (timeScale === undefined) {\n      return {\n        timeChartData: [],\n        timeSeriesMapping: [],\n        seriesFormatMap: new Map(),\n        maxValuesByFormat: new Map<string, number>(),\n      };\n    }\n\n    const legendItems: LegendItem[] = [];\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const timeChartData: TimeSeries[] = [];\n    const timeSeriesMapping: TimeChartSeriesMapping = [];\n\n    // Track max values for each format unit (used for dynamic Y axis offset calculation)\n    const maxValuesByFormat = new Map<string, number>();\n\n    // Index is counted across multiple queries which ensures the categorical color palette does not reset for every query\n    let seriesIndex = 0;\n\n    // Mapping of each set of query results to be ECharts option compatible\n    // TODO: Look into performance optimizations and moving parts of mapping to the lower level chart\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      // Retrieve querySettings for this query, if exists.\n      // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute\n      let querySettings: QuerySettingsOptions | undefined;\n      for (const item of querySettingsList ?? []) {\n        if (item.queryIndex === queryIndex) {\n          querySettings = item;\n          // We don't break the loop here just in case there are multiple querySettings defined for the\n          // same queryIndex, because in that case we want the last one to take precedence.\n        }\n      }\n\n      if (result) {\n        for (let i = 0; i < result.data.series.length; i++) {\n          const timeSeries: TimeSeries | undefined = result.data.series[i];\n          if (timeSeries === undefined) {\n            return { timeChartData: [], timeSeriesMapping: [], legendItems: [] };\n          }\n\n          // Format is determined by seriesNameFormat in query spec\n          const formattedSeriesName = timeSeries.formattedName ?? timeSeries.name;\n\n          // Color is used for line, tooltip, and legend\n          const seriesColor = getSeriesColor({\n            // ECharts type for color is not always an array but it is always an array in ChartsProvider\n            categoricalPalette: categoricalPalette as string[],\n            visual,\n            muiPrimaryColor: muiTheme.palette.primary.main,\n            seriesName: formattedSeriesName,\n            seriesIndex,\n            querySettings: querySettings,\n            queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1,\n          });\n\n          // We add a unique id for the chart to disambiguate items across charts\n          // when there are multiple on the page.\n          const seriesId = chartId + timeSeries.name + seriesIndex;\n\n          const legendCalculations = legend?.values\n            ? getCalculations(timeSeries.values, legend.values as CalculationType[])\n            : undefined;\n\n          // When we initially load the chart, we want to show all series, but\n          // DO NOT want to visualy highlight all the items in the legend.\n          const isSelectAll = selectedLegendItems === 'ALL';\n          const isSelected = !isSelectAll && !!selectedLegendItems[seriesId];\n          const showTimeSeries = isSelected || isSelectAll;\n\n          if (showTimeSeries) {\n            // Use timeChartData.length to ensure the data that is passed into the tooltip accounts for\n            // which legend items are selected. This must happen before timeChartData.push to avoid an\n            // off-by-one error, seriesIndex cannot be used since it's needed to cycle through palette\n            const datasetIndex = timeChartData.length;\n\n            // Determine yAxisIndex based on the query's format setting\n            const queryFormat = querySettings?.format;\n            const yAxisIndex = queryFormat?.unit ? (formatToYAxisIndex.get(queryFormat.unit) ?? 0) : 0;\n\n            // Each series is stored as a separate dataset source.\n            // https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\n            timeSeriesMapping.push(\n              getTimeSeries(\n                seriesId,\n                datasetIndex,\n                formattedSeriesName,\n                visual,\n                timeScale,\n                seriesColor,\n                querySettings,\n                yAxisIndex\n              )\n            );\n\n            // Store the format for this series for tooltip formatting\n            if (queryFormat) {\n              seriesFormatMap.set(seriesId, queryFormat);\n\n              // Track max value for this format unit (used for dynamic Y axis offset calculation)\n              const unitKey = queryFormat.unit;\n              if (unitKey) {\n                const seriesMax = Math.max(...timeSeries.values.map((v) => Math.abs(v[1] ?? 0)));\n                const currentMax = maxValuesByFormat.get(unitKey) ?? 0;\n                if (seriesMax > currentMax) {\n                  maxValuesByFormat.set(unitKey, seriesMax);\n                }\n              }\n            }\n\n            timeChartData.push({\n              name: formattedSeriesName,\n              values: getTimeSeriesValues(timeSeries, timeScale),\n            });\n          }\n\n          if (legend && legendItems) {\n            legendItems.push({\n              id: seriesId, // Avoids duplicate key console errors when there are duplicate series names\n              label: formattedSeriesName,\n              color: seriesColor,\n              data: legendCalculations,\n            });\n          }\n\n          // Used for repeating colors in Categorical palette\n          seriesIndex++;\n        }\n      }\n    }\n\n    // map thresholds only if there is at least one time series to avoid displaying thresholds without any data\n    if (thresholds && thresholds.steps && timeChartData.length > 0) {\n      // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.\n      // These are styled with predefined colors and a dashed style to look different than series from query results.\n      // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.\n      const thresholdsColors = chartsTheme.thresholds;\n      const defaultThresholdColor = thresholds.defaultColor ?? thresholdsColors.defaultColor;\n      thresholds.steps.forEach((step: StepOptions, index: number) => {\n        const stepPaletteColor = thresholdsColors.palette[index] ?? defaultThresholdColor;\n        const thresholdLineColor = step.color ?? stepPaletteColor;\n        const stepOption: StepOptions = {\n          color: thresholdLineColor,\n          value:\n            // yAxis is passed here since it corresponds to dashboard JSON instead of the already converted ECharts yAxis\n            thresholds.mode === 'percent'\n              ? convertPercentThreshold(step.value, timeChartData, yAxis?.max, yAxis?.min)\n              : step.value,\n        };\n        const thresholdName = step.name ?? `Threshold ${index + 1}`;\n\n        // Generates array of [time, step.value] where time ranges from timescale.startMs to timescale.endMs with an interval of 15s\n        const thresholdTimeValueTuple: TimeSeriesValueTuple[] = [];\n        let currentTimestamp = timeScale.startMs;\n        while (currentTimestamp <= timeScale.endMs) {\n          thresholdTimeValueTuple.push([currentTimestamp, stepOption.value]);\n          // Used to plot fake thresholds datapoints so correct nearby threshold series shows in tooltip without flicker\n          currentTimestamp += 1000 * THRESHOLD_PLOT_INTERVAL;\n        }\n\n        timeChartData.push({\n          name: thresholdName,\n          values: thresholdTimeValueTuple,\n        });\n        timeSeriesMapping.push(getThresholdSeries(thresholdName, stepOption, seriesIndex));\n        seriesIndex++;\n      });\n    }\n\n    return {\n      timeScale,\n      timeChartData,\n      timeSeriesMapping,\n      legendItems,\n      seriesFormatMap,\n      maxValuesByFormat,\n    };\n  }, [\n    queryResults,\n    thresholds,\n    selectedLegendItems,\n    legend,\n    visual,\n    querySettingsList,\n    yAxis?.max,\n    yAxis?.min,\n    categoricalPalette,\n    chartId,\n    chartsTheme.thresholds,\n    muiTheme.palette.primary.main,\n    formatToYAxisIndex,\n    seriesFormatMap,\n  ]);\n\n  // Create multiple Y axes if there are additional formats\n  // Uses max values from data to compute dynamic offsets that adapt to label widths\n  const multipleYAxes = useMemo(() => {\n    if (additionalFormats.length === 0) {\n      return undefined; // Use single Y axis (default behavior)\n    }\n    // Build array of max values for each additional format (in order)\n    const maxValues = additionalFormats.map((fmt) => {\n      const unitKey = fmt.unit;\n      return unitKey ? (maxValuesByFormat?.get(unitKey) ?? 1000) : 1000;\n    });\n    return getFormattedMultipleYAxes(echartsYAxis, format, additionalFormats, maxValues);\n  }, [echartsYAxis, format, additionalFormats, maxValuesByFormat]);\n\n  // Translate the legend values into columns for the table legend.\n  const legendColumns = useMemo(() => {\n    if (!legend?.values) {\n      return [];\n    }\n\n    // Iterating the predefined list of possible values to retain a specific\n    // intended order of values.\n    return legendValues.reduce(\n      (columns, legendValue) => {\n        const legendConfig = LEGEND_VALUE_CONFIG[legendValue];\n\n        if (legendConfig && legend?.values?.includes(legendValue)) {\n          columns.push({\n            accessorKey: `data.${legendValue}`,\n            header: legendConfig.label,\n            headerDescription: legendConfig.description,\n            // Intentionally hardcoding a column width to start based on discussions\n            // with design around keeping this simple to start. This may need\n            // revisiting in the future to handle edge cases with very large values.\n            width: 72,\n            align: 'right',\n            cell: ({ getValue }) => {\n              const cellValue = getValue();\n              return typeof cellValue === 'number' && format ? formatValue(cellValue, format) : cellValue;\n            },\n            cellDescription: true,\n            enableSorting: true,\n          });\n        }\n\n        return columns;\n      },\n      [] as Array<TableColumnConfig<LegendItem>>\n    );\n  }, [legend?.values, format]);\n\n  const gridOverrides: GridComponentOption = useMemo(() => {\n    // When Y axes are hidden, disable containLabel to prevent auto-spacing, but add bottom padding for X axis\n    return echartsYAxis.show === false\n      ? {\n          left: 0,\n          right: 0,\n          bottom: 30,\n          containLabel: false,\n        }\n      : {\n          left: yAxis && yAxis.label ? 30 : 20,\n          // With containLabel: true in theme, ECharts auto-reserves space for axis labels.\n          // For multiple right axes, add extra padding for the last axis labels that extend beyond the grid.\n          right: additionalFormats.length > 0 ? 10 : 20,\n          bottom: 0,\n          containLabel: true,\n        };\n  }, [echartsYAxis.show, yAxis, additionalFormats.length]);\n\n  if (adjustedContentDimensions === undefined) {\n    return null;\n  }\n\n  const handleDataZoom = (event: ZoomEventData): void => {\n    // TODO: add ECharts transition animation on zoom\n    setTimeRange({ start: new Date(event.start), end: new Date(event.end) });\n  };\n\n  // Used to opt in to ECharts trigger item which show subgroup data accurately\n  const isStackedBar = visual.display === 'bar' && visual.stack === 'all';\n\n  // Turn on tooltip pinning by default but opt out for stacked bar or if explicitly set in tooltip panel spec\n  let enablePinning = true;\n  if (isStackedBar) {\n    enablePinning = false;\n  } else if (tooltip?.enablePinning !== undefined) {\n    enablePinning = tooltip.enablePinning;\n  }\n  const tooltipConfig: TooltipConfig = {\n    ...DEFAULT_TOOLTIP_CONFIG,\n    enablePinning,\n  };\n\n  return (\n    <Box sx={{ padding: `${contentPadding}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions.width}\n        height={adjustedContentDimensions.height}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems || [],\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: legendColumns,\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              {yAxis && yAxis.show && yAxis.label && <YAxisLabel name={yAxis.label} height={height} />}\n              <TimeSeriesChartBase\n                ref={chartRef}\n                height={height}\n                data={timeChartData}\n                seriesMapping={timeSeriesMapping}\n                timeScale={timeScale}\n                yAxis={multipleYAxes ?? echartsYAxis}\n                format={format}\n                seriesFormatMap={computedSeriesFormatMap}\n                grid={gridOverrides}\n                isStackedBar={isStackedBar}\n                tooltipConfig={tooltipConfig}\n                syncGroup=\"default-panel-group\" // TODO: make configurable from dashboard settings and per panel-group overrides\n                onDataZoom={handleDataZoom}\n                //  Show an empty chart when there is no data because the user unselected all items in\n                // the legend. Otherwise, show a \"no data\" message.\n                noDataVariant={!timeChartData.length && legendItems && legendItems.length > 0 ? 'chart' : 'message'}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","useTheme","merge","getTimeSeriesValues","DEFAULT_LEGEND","getCalculations","formatValue","LEGEND_VALUE_CONFIG","useTimeRange","validateLegendSpec","legendValues","YAxisLabel","useChartsTheme","ContentWithLegend","useId","DEFAULT_TOOLTIP_CONFIG","getFormattedMultipleYAxes","DEFAULT_FORMAT","DEFAULT_VISUAL","THRESHOLD_PLOT_INTERVAL","getTimeSeries","getCommonTimeScaleForQueries","convertPanelYAxis","getThresholdSeries","convertPercentThreshold","getSeriesColor","TimeSeriesChartBase","TimeSeriesChartPanel","props","spec","thresholds","yAxis","tooltip","querySettings","querySettingsList","contentDimensions","queryResults","chartsTheme","muiTheme","chartId","chartRef","categoricalPalette","echartsTheme","color","contentPadding","container","padding","default","adjustedContentDimensions","width","height","undefined","legend","format","visual","echartsYAxis","additionalFormats","formatToYAxisIndex","seriesFormatMap","baseUnit","unit","Map","set","qs","unitKey","has","length","push","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","setTimeRange","timeScale","timeChartData","timeSeriesMapping","legendItems","computedSeriesFormatMap","maxValuesByFormat","seriesIndex","queryIndex","result","item","i","data","series","timeSeries","formattedSeriesName","formattedName","name","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","queryHasMultipleResults","seriesId","legendCalculations","values","isSelectAll","isSelected","showTimeSeries","datasetIndex","queryFormat","yAxisIndex","get","seriesMax","Math","max","map","v","abs","currentMax","id","label","steps","thresholdsColors","defaultThresholdColor","defaultColor","forEach","step","index","stepPaletteColor","thresholdLineColor","stepOption","value","mode","min","thresholdName","thresholdTimeValueTuple","currentTimestamp","startMs","endMs","multipleYAxes","maxValues","fmt","legendColumns","reduce","columns","legendValue","legendConfig","includes","accessorKey","header","headerDescription","description","align","cell","getValue","cellValue","cellDescription","enableSorting","gridOverrides","show","left","right","bottom","containLabel","handleDataZoom","event","start","Date","end","isStackedBar","display","stack","enablePinning","tooltipConfig","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style","ref","seriesMapping","grid","syncGroup","onDataZoom","noDataVariant"],"mappings":"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"}

package/lib/TimeSeriesExportAction.js

@@ -15,7 +15,7 @@ import { IconButton } from '@mui/material';
 import { InfoTooltip } from '@perses-dev/components';
 import DownloadIcon from 'mdi-material-ui/Download';
 import React, { useCallback, useMemo } from 'react';
-import { exportDataAsCSV, extractExportableData, isExportableData, sanitizeFilename } from './CSVExportUtils';
+import { exportDataAsCSV, extractExportableData, isExportableData, sanitizeFilename } from '@perses-dev/plugin-system';
 export const TimeSeriesExportAction = ({ queryResults, definition })=>{
     const exportableData = useMemo(()=>{
         return extractExportableData(queryResults);

package/lib/TimeSeriesExportAction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesExportAction.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 { IconButton } from '@mui/material';\nimport { InfoTooltip } from '@perses-dev/components';\nimport DownloadIcon from 'mdi-material-ui/Download';\nimport React, { useCallback, useMemo } from 'react';\nimport { exportDataAsCSV, extractExportableData, isExportableData, sanitizeFilename } from './CSVExportUtils';\nimport { TimeSeriesChartProps } from './TimeSeriesChartPanel';\n\nexport const TimeSeriesExportAction: React.FC<TimeSeriesChartProps> = ({ queryResults, definition }) => {\n  const exportableData = useMemo(() => {\n    return extractExportableData(queryResults);\n  }, [queryResults]);\n\n  const canExport = useMemo(() => {\n    return isExportableData(exportableData);\n  }, [exportableData]);\n\n  const handleExport = useCallback(() => {\n    if (!exportableData || !canExport) return;\n\n    try {\n      const title = definition?.spec?.display?.name || 'Time Series Data';\n\n      const csvBlob = exportDataAsCSV({\n        data: exportableData,\n      });\n\n      const baseFilename = sanitizeFilename(title);\n      const filename = `${baseFilename}_data.csv`;\n\n      const link = document.createElement('a');\n      link.href = URL.createObjectURL(csvBlob);\n      link.download = filename;\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n      URL.revokeObjectURL(link.href);\n    } catch (error) {\n      console.error('Time series export failed:', error);\n    }\n  }, [exportableData, canExport, definition]);\n\n  if (!canExport) {\n    return null;\n  }\n\n  return (\n    <InfoTooltip description=\"Export as CSV\">\n      <IconButton size=\"small\" onClick={handleExport} aria-label=\"Export time series data as CSV\">\n        <DownloadIcon fontSize=\"inherit\" />\n      </IconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["IconButton","InfoTooltip","DownloadIcon","React","useCallback","useMemo","exportDataAsCSV","extractExportableData","isExportableData","sanitizeFilename","TimeSeriesExportAction","queryResults","definition","exportableData","canExport","handleExport","title","spec","display","name","csvBlob","data","baseFilename","filename","link","document","createElement","href","URL","createObjectURL","download","body","appendChild","click","removeChild","revokeObjectURL","error","console","description","size","onClick","aria-label","fontSize"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,OAAOC,kBAAkB,2BAA2B;AACpD,OAAOC,SAASC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AACpD,SAASC,eAAe,EAAEC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,mBAAmB;AAG9G,OAAO,MAAMC,yBAAyD,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAE;IACjG,MAAMC,iBAAiBR,QAAQ;QAC7B,OAAOE,sBAAsBI;IAC/B,GAAG;QAACA;KAAa;IAEjB,MAAMG,YAAYT,QAAQ;QACxB,OAAOG,iBAAiBK;IAC1B,GAAG;QAACA;KAAe;IAEnB,MAAME,eAAeX,YAAY;QAC/B,IAAI,CAACS,kBAAkB,CAACC,WAAW;QAEnC,IAAI;YACF,MAAME,QAAQJ,YAAYK,MAAMC,SAASC,QAAQ;YAEjD,MAAMC,UAAUd,gBAAgB;gBAC9Be,MAAMR;YACR;YAEA,MAAMS,eAAeb,iBAAiBO;YACtC,MAAMO,WAAW,GAAGD,aAAa,SAAS,CAAC;YAE3C,MAAME,OAAOC,SAASC,aAAa,CAAC;YACpCF,KAAKG,IAAI,GAAGC,IAAIC,eAAe,CAACT;YAChCI,KAAKM,QAAQ,GAAGP;YAChBE,SAASM,IAAI,CAACC,WAAW,CAACR;YAC1BA,KAAKS,KAAK;YACVR,SAASM,IAAI,CAACG,WAAW,CAACV;YAC1BI,IAAIO,eAAe,CAACX,KAAKG,IAAI;QAC/B,EAAE,OAAOS,OAAO;YACdC,QAAQD,KAAK,CAAC,8BAA8BA;QAC9C;IACF,GAAG;QAACvB;QAAgBC;QAAWF;KAAW;IAE1C,IAAI,CAACE,WAAW;QACd,OAAO;IACT;IAEA,qBACE,KAACb;QAAYqC,aAAY;kBACvB,cAAA,KAACtC;YAAWuC,MAAK;YAAQC,SAASzB;YAAc0B,cAAW;sBACzD,cAAA,KAACvC;gBAAawC,UAAS;;;;AAI/B,EAAE"}
+{"version":3,"sources":["../../src/TimeSeriesExportAction.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 { IconButton } from '@mui/material';\nimport { InfoTooltip } from '@perses-dev/components';\nimport DownloadIcon from 'mdi-material-ui/Download';\nimport React, { useCallback, useMemo } from 'react';\nimport { exportDataAsCSV, extractExportableData, isExportableData, sanitizeFilename } from '@perses-dev/plugin-system';\nimport { TimeSeriesChartProps } from './TimeSeriesChartPanel';\n\nexport const TimeSeriesExportAction: React.FC<TimeSeriesChartProps> = ({ queryResults, definition }) => {\n  const exportableData = useMemo(() => {\n    return extractExportableData(queryResults);\n  }, [queryResults]);\n\n  const canExport = useMemo(() => {\n    return isExportableData(exportableData);\n  }, [exportableData]);\n\n  const handleExport = useCallback(() => {\n    if (!exportableData || !canExport) return;\n\n    try {\n      const title = definition?.spec?.display?.name || 'Time Series Data';\n\n      const csvBlob = exportDataAsCSV({\n        data: exportableData,\n      });\n\n      const baseFilename = sanitizeFilename(title);\n      const filename = `${baseFilename}_data.csv`;\n\n      const link = document.createElement('a');\n      link.href = URL.createObjectURL(csvBlob);\n      link.download = filename;\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n      URL.revokeObjectURL(link.href);\n    } catch (error) {\n      console.error('Time series export failed:', error);\n    }\n  }, [exportableData, canExport, definition]);\n\n  if (!canExport) {\n    return null;\n  }\n\n  return (\n    <InfoTooltip description=\"Export as CSV\">\n      <IconButton size=\"small\" onClick={handleExport} aria-label=\"Export time series data as CSV\">\n        <DownloadIcon fontSize=\"inherit\" />\n      </IconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["IconButton","InfoTooltip","DownloadIcon","React","useCallback","useMemo","exportDataAsCSV","extractExportableData","isExportableData","sanitizeFilename","TimeSeriesExportAction","queryResults","definition","exportableData","canExport","handleExport","title","spec","display","name","csvBlob","data","baseFilename","filename","link","document","createElement","href","URL","createObjectURL","download","body","appendChild","click","removeChild","revokeObjectURL","error","console","description","size","onClick","aria-label","fontSize"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,OAAOC,kBAAkB,2BAA2B;AACpD,OAAOC,SAASC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AACpD,SAASC,eAAe,EAAEC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGvH,OAAO,MAAMC,yBAAyD,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAE;IACjG,MAAMC,iBAAiBR,QAAQ;QAC7B,OAAOE,sBAAsBI;IAC/B,GAAG;QAACA;KAAa;IAEjB,MAAMG,YAAYT,QAAQ;QACxB,OAAOG,iBAAiBK;IAC1B,GAAG;QAACA;KAAe;IAEnB,MAAME,eAAeX,YAAY;QAC/B,IAAI,CAACS,kBAAkB,CAACC,WAAW;QAEnC,IAAI;YACF,MAAME,QAAQJ,YAAYK,MAAMC,SAASC,QAAQ;YAEjD,MAAMC,UAAUd,gBAAgB;gBAC9Be,MAAMR;YACR;YAEA,MAAMS,eAAeb,iBAAiBO;YACtC,MAAMO,WAAW,GAAGD,aAAa,SAAS,CAAC;YAE3C,MAAME,OAAOC,SAASC,aAAa,CAAC;YACpCF,KAAKG,IAAI,GAAGC,IAAIC,eAAe,CAACT;YAChCI,KAAKM,QAAQ,GAAGP;YAChBE,SAASM,IAAI,CAACC,WAAW,CAACR;YAC1BA,KAAKS,KAAK;YACVR,SAASM,IAAI,CAACG,WAAW,CAACV;YAC1BI,IAAIO,eAAe,CAACX,KAAKG,IAAI;QAC/B,EAAE,OAAOS,OAAO;YACdC,QAAQD,KAAK,CAAC,8BAA8BA;QAC9C;IACF,GAAG;QAACvB;QAAgBC;QAAWF;KAAW;IAE1C,IAAI,CAACE,WAAW;QACd,OAAO;IACT;IAEA,qBACE,KAACb;QAAYqC,aAAY;kBACvB,cAAA,KAACtC;YAAWuC,MAAK;YAAQC,SAASzB;YAAc0B,cAAW;sBACzD,cAAA,KAACvC;gBAAawC,UAAS;;;;AAI/B,EAAE"}

package/lib/cjs/TimeSeriesChartPanel.js

@@ -216,7 +216,8 @@ function TimeSeriesChartPanel(props) {
                 }
             }
         }
-        if (thresholds && thresholds.steps) {
+        // map thresholds only if there is at least one time series to avoid displaying thresholds without any data
+        if (thresholds && thresholds.steps && timeChartData.length > 0) {
             // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.
             // These are styled with predefined colors and a dashed style to look different than series from query results.
             // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.

package/lib/cjs/TimeSeriesExportAction.js

@@ -25,7 +25,7 @@ const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _Download = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Download"));
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _CSVExportUtils = require("./CSVExportUtils");
+const _pluginsystem = require("@perses-dev/plugin-system");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -74,12 +74,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const TimeSeriesExportAction = ({ queryResults, definition })=>{
     const exportableData = (0, _react.useMemo)(()=>{
-        return (0, _CSVExportUtils.extractExportableData)(queryResults);
+        return (0, _pluginsystem.extractExportableData)(queryResults);
     }, [
         queryResults
     ]);
     const canExport = (0, _react.useMemo)(()=>{
-        return (0, _CSVExportUtils.isExportableData)(exportableData);
+        return (0, _pluginsystem.isExportableData)(exportableData);
     }, [
         exportableData
     ]);
@@ -87,10 +87,10 @@ const TimeSeriesExportAction = ({ queryResults, definition })=>{
         if (!exportableData || !canExport) return;
         try {
             const title = definition?.spec?.display?.name || 'Time Series Data';
-            const csvBlob = (0, _CSVExportUtils.exportDataAsCSV)({
+            const csvBlob = (0, _pluginsystem.exportDataAsCSV)({
                 data: exportableData
             });
-            const baseFilename = (0, _CSVExportUtils.sanitizeFilename)(title);
+            const baseFilename = (0, _pluginsystem.sanitizeFilename)(title);
             const filename = `${baseFilename}_data.csv`;
             const link = document.createElement('a');
             link.href = URL.createObjectURL(csvBlob);

package/lib/cjs/index.js

@@ -29,7 +29,6 @@ _export_star(require("./YAxisOptionsEditor"), exports);
 _export_star(require("./TimeSeriesChartPanel"), exports);
 _export_star(require("./TimeSeriesChartBase"), exports);
 _export_star(require("./time-series-chart-model"), exports);
-_export_star(require("./CSVExportUtils"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/lib/index.d.ts

@@ -7,5 +7,4 @@ export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';
 export * from './TimeSeriesChartBase';
 export * from './time-series-chart-model';
-export * from './CSVExportUtils';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}

package/lib/index.js

@@ -19,6 +19,5 @@ export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';
 export * from './TimeSeriesChartBase';
 export * from './time-series-chart-model';
-export * from './CSVExportUtils';
 
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport { getPluginModule } from './getPluginModule';\nexport * from './TimeSeriesChart';\nexport * from './GeneralSettingsEditor';\nexport * from './QuerySettingsEditor';\nexport * from './VisualOptionsEditor';\nexport * from './YAxisOptionsEditor';\nexport * from './TimeSeriesChartPanel';\nexport * from './TimeSeriesChartBase';\nexport * from './time-series-chart-model';\nexport * from './CSVExportUtils';\n"],"names":["getPluginModule"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,wBAAwB;AACtC,cAAc,4BAA4B;AAC1C,cAAc,mBAAmB"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport { getPluginModule } from './getPluginModule';\nexport * from './TimeSeriesChart';\nexport * from './GeneralSettingsEditor';\nexport * from './QuerySettingsEditor';\nexport * from './VisualOptionsEditor';\nexport * from './YAxisOptionsEditor';\nexport * from './TimeSeriesChartPanel';\nexport * from './TimeSeriesChartBase';\nexport * from './time-series-chart-model';\n"],"names":["getPluginModule"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,wBAAwB;AACtC,cAAc,4BAA4B"}

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "TimeSeriesChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.12.0",
+      "buildVersion": "0.12.1",
       "buildName": "@perses-dev/timeseries-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TimeSeriesChart.e51aefbf.js",
+      "name": "__mf/js/TimeSeriesChart.734ed3ec.js",
       "path": "",
       "type": "global"
     },
@@ -87,14 +87,14 @@
     {
       "id": "TimeSeriesChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.53.0",
+      "version": "0.53.1",
       "singleton": true,
-      "requiredVersion": "^0.53.0",
+      "requiredVersion": "^0.53.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/97.3f27a901.js"
+            "__mf/js/async/472.fd3069f0.js"
           ]
         },
         "css": {
@@ -106,14 +106,14 @@
     {
       "id": "TimeSeriesChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.53.0",
+      "version": "0.53.1",
       "singleton": true,
-      "requiredVersion": "^0.53.0",
+      "requiredVersion": "^0.53.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/648.128f31b8.js"
+            "__mf/js/async/634.8646a5de.js"
           ]
         },
         "css": {
@@ -250,7 +250,7 @@
             "__mf/js/async/78.362ece9d.js",
             "__mf/js/async/544.4dd63985.js",
             "__mf/js/async/489.8bb61ec9.js",
-            "__mf/js/async/__federation_expose_TimeSeriesChart.8cacec73.js"
+            "__mf/js/async/__federation_expose_TimeSeriesChart.54276867.js"
           ],
           "async": [
             "__mf/js/async/71.e481dbdb.js",

package/mf-stats.json

@@ -5,11 +5,11 @@
     "name": "TimeSeriesChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.12.0",
+      "buildVersion": "0.12.1",
       "buildName": "@perses-dev/timeseries-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TimeSeriesChart.e51aefbf.js",
+      "name": "__mf/js/TimeSeriesChart.734ed3ec.js",
       "path": "",
       "type": "global"
     },
@@ -95,17 +95,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.53.0",
+      "requiredVersion": "^0.53.1",
       "shareScope": "default",
       "name": "@perses-dev/components",
-      "version": "0.53.0",
+      "version": "0.53.1",
       "eager": false,
       "id": "TimeSeriesChart:@perses-dev/components",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/97.3f27a901.js"
+            "__mf/js/async/472.fd3069f0.js"
           ]
         },
         "css": {
@@ -119,17 +119,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.53.0",
+      "requiredVersion": "^0.53.1",
       "shareScope": "default",
       "name": "@perses-dev/plugin-system",
-      "version": "0.53.0",
+      "version": "0.53.1",
       "eager": false,
       "id": "TimeSeriesChart:@perses-dev/plugin-system",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/648.128f31b8.js"
+            "__mf/js/async/634.8646a5de.js"
           ]
         },
         "css": {
@@ -299,7 +299,7 @@
             "__mf/js/async/78.362ece9d.js",
             "__mf/js/async/544.4dd63985.js",
             "__mf/js/async/489.8bb61ec9.js",
-            "__mf/js/async/__federation_expose_TimeSeriesChart.8cacec73.js"
+            "__mf/js/async/__federation_expose_TimeSeriesChart.54276867.js"
           ],
           "async": [
             "__mf/js/async/71.e481dbdb.js",