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

package/lib/QuerySettingsEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -12,7 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Box, Button, IconButton, Menu, MenuItem, Slider, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
-import { OptionsColorPicker } from '@perses-dev/components';
+import { OptionsColorPicker, UnitSelector } from '@perses-dev/components';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import AddIcon from 'mdi-material-ui/Plus';
@@ -156,6 +156,23 @@ export function QuerySettingsEditor(props) {
             qs.areaOpacity = undefined;
         });
     };
+    const addUnit = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.format = {
+                unit: 'decimal'
+            };
+        });
+    };
+    const removeUnit = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.format = undefined;
+        });
+    };
+    const handleUnitChange = (i, format)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.format = format;
+        });
+    };
     const queryCount = useQueryCountContext();
     // Compute the list of query indexes for which query settings are not already defined.
     // This is to avoid already-booked indexes to still be selectable in the dropdown(s)
@@ -214,7 +231,10 @@ export function QuerySettingsEditor(props) {
                     onAddLineStyle: ()=>addLineStyle(i),
                     onRemoveLineStyle: ()=>removeLineStyle(i),
                     onAddAreaOpacity: ()=>addAreaOpacity(i),
-                    onRemoveAreaOpacity: ()=>removeAreaOpacity(i)
+                    onRemoveAreaOpacity: ()=>removeAreaOpacity(i),
+                    onAddUnit: ()=>addUnit(i),
+                    onRemoveUnit: ()=>removeUnit(i),
+                    onUnitChange: (format)=>handleUnitChange(i, format)
                 }, i)),
             queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && /*#__PURE__*/ _jsx(Button, {
                 variant: "contained",
@@ -228,7 +248,7 @@ export function QuerySettingsEditor(props) {
         ]
     });
 }
-function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity }) {
+function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddUnit, onRemoveUnit, onUnitChange }) {
     // current query index should also be selectable
     const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b)=>a - b);
     // State for dropdown menu
@@ -251,14 +271,21 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
             label: 'Opacity',
             action: onAddAreaOpacity
         });
+        if (format === undefined) options.push({
+            key: 'unit',
+            label: 'Unit',
+            action: onAddUnit
+        });
         return options;
     }, [
         colorMode,
         lineStyle,
         areaOpacity,
+        format,
         onAddColor,
         onAddLineStyle,
-        onAddAreaOpacity
+        onAddAreaOpacity,
+        onAddUnit
     ]);
     const handleAddMenuClick = (event)=>{
         if (availableOptions.length === 1 && availableOptions[0]) {
@@ -277,7 +304,6 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         handleMenuClose();
     };
     return /*#__PURE__*/ _jsx(Stack, {
-        spacing: 2,
         sx: {
             borderBottom: '1px solid',
             borderColor: 'divider',
@@ -287,10 +313,9 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         children: /*#__PURE__*/ _jsxs(Stack, {
             direction: "row",
             alignItems: "center",
-            spacing: 1,
             sx: {
                 flexWrap: 'wrap',
-                gap: 1
+                gap: 2
             },
             children: [
                 /*#__PURE__*/ _jsx(TextField, {
@@ -386,6 +411,19 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
                         })
                     ]
                 }),
+                format !== undefined && /*#__PURE__*/ _jsx(SettingsSection, {
+                    label: "Unit",
+                    onRemove: onRemoveUnit,
+                    children: /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            minWidth: '180px'
+                        },
+                        children: /*#__PURE__*/ _jsx(UnitSelector, {
+                            value: format,
+                            onChange: onUnitChange
+                        })
+                    })
+                }),
                 availableOptions.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
                         /*#__PURE__*/ _jsx(IconButton, {

package/lib/QuerySettingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuerySettingsEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\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 } from '@perses-dev/components';\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 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          />\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}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity },\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}: 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    return options;\n  }, [colorMode, lineStyle, areaOpacity, onAddColor, onAddLineStyle, onAddAreaOpacity]);\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 spacing={2} sx={{ borderBottom: '1px solid', borderColor: 'divider', borderRadius: 1, p: 2 }}>\n      <Stack direction=\"row\" alignItems=\"center\" spacing={1} sx={{ flexWrap: 'wrap', gap: 1 }}>\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        {/* 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","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","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","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","sort","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","spacing","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","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[]) => {\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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"}

package/lib/TimeSeriesChart.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/TimeSeriesChart.js.map

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

package/lib/TimeSeriesChartBase.d.ts

@@ -7,8 +7,12 @@ export interface TimeChartProps {
     data: TimeSeries[];
     seriesMapping: TimeChartSeriesMapping;
     timeScale?: TimeScale;
-    yAxis?: YAXisComponentOption;
+    yAxis?: YAXisComponentOption | YAXisComponentOption[];
     format?: FormatOptions;
+    /**
+     * Map of series ID to format options, used for tooltip formatting when series have different units
+     */
+    seriesFormatMap?: Map<string, FormatOptions>;
     grid?: GridComponentOption;
     tooltipConfig?: TooltipConfig;
     noDataVariant?: 'chart' | 'message';

package/lib/TimeSeriesChartBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChartBase.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartBase.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAA6D,MAAM,OAAO,CAAC;AAK1G,OAAO,EAAsB,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAejB,OAAO,EACL,aAAa,EAcb,sBAAsB,EAEtB,aAAa,EAGb,aAAa,EACd,MAAM,wBAAwB,CAAC;AAkBhC,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,mBAAmB,0GA0W9B,CAAC"}
+{"version":3,"file":"TimeSeriesChartBase.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartBase.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAA6D,MAAM,OAAO,CAAC;AAK1G,OAAO,EAAsB,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAejB,OAAO,EACL,aAAa,EAcb,sBAAsB,EAEtB,aAAa,EAGb,aAAa,EACd,MAAM,wBAAwB,CAAC;AAkBhC,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,mBAAmB,0GA6W9B,CAAC"}

package/lib/TimeSeriesChartBase.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -36,7 +36,7 @@ use([
     TooltipComponent,
     CanvasRenderer
 ]);
-export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, grid, isStackedBar = false, tooltipConfig = DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
+export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, seriesFormatMap, grid, isStackedBar = false, tooltipConfig = DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = useChartsContext();
     const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = useRef();
@@ -166,7 +166,8 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
                     snap: false
                 }
             },
-            yAxis: getFormattedAxis(yAxis, format),
+            // If yAxis is already an array (multiple Y axes), use it directly; otherwise use getFormattedAxis
+            yAxis: Array.isArray(yAxis) ? yAxis : getFormattedAxis(yAxis, format),
             animation: false,
             tooltip: {
                 show: true,
@@ -364,6 +365,7 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
                 enablePinning: isPinningEnabled,
                 pinnedPos: tooltipPinnedCoords,
                 format: format,
+                seriesFormatMap: seriesFormatMap,
                 onUnpinClick: ()=>{
                     // Unpins tooltip when clicking Pin icon in TooltipHeader.
                     setTooltipPinnedCoords(null);

package/lib/TimeSeriesChartBase.js.map

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

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;AAgBnC,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,CAuVrF"}
+{"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"}