@perses-dev/components 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-scatter-chart-embed-8efdfab

package/dist/ThresholdsEditor/ThresholdsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.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 React, { useEffect, useRef, useState } from 'react';\nimport produce from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }: ThresholdsEditorProps) {\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n  const defaultThresholdColor = thresholds?.default_color ?? defaultColor;\n\n  const [steps, setSteps] = useState(thresholds?.steps);\n  useEffect(() => {\n    setSteps(thresholds?.steps);\n  }, [thresholds?.steps]);\n\n  // every time a new threshold 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  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {\n    setSteps(\n      produce(steps, (draft) => {\n        const step = draft?.[i];\n        if (step) {\n          step.value = Number(e.target.value);\n        }\n      })\n    );\n  };\n\n  const handleThresholdColorChange = (color: string, i: number) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.default_color = color;\n        })\n      );\n    } else {\n      onChange({\n        default_color: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = () => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          })\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        })\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        })\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'Percent' ? 'Percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        })\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description={'Add threshold'}>\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'Absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"Absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"Percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .reverse()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <ThresholdColorPicker\n            label=\"default\"\n            color={defaultThresholdColor}\n            onColorChange={handleDefaultColorChange}\n          />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = () => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["React","useEffect","useRef","useState","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","ThresholdColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","defaultColor","palette","defaultThresholdColor","default_color","steps","setSteps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","draft","step","value","Number","target","handleThresholdColorChange","color","undefined","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.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 React, { useEffect, useRef, useState } from 'react';\nimport produce from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }: ThresholdsEditorProps) {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const [steps, setSteps] = useState(thresholds?.steps);\n  useEffect(() => {\n    setSteps(thresholds?.steps);\n  }, [thresholds?.steps]);\n\n  // every time a new threshold 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  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {\n    setSteps(\n      produce(steps, (draft) => {\n        const step = draft?.[i];\n        if (step) {\n          step.value = Number(e.target.value);\n        }\n      })\n    );\n  };\n\n  const handleThresholdColorChange = (color: string, i: number) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        })\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = () => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          })\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        })\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        })\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        })\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description={'Add threshold'}>\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .reverse()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <ThresholdColorPicker\n            label=\"default\"\n            color={defaultThresholdColor}\n            onColorChange={handleDefaultColorChange}\n          />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = () => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["React","useEffect","useRef","useState","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","ThresholdColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","setSteps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","draft","step","value","Number","target","handleThresholdColorChange","color","undefined","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}

package/dist/ThresholdsEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/index.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\nexport * from './ThresholdsEditor';\n"],"names":[],"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;AAEjC,cAAc,oBAAoB,CAAC"}
+{"version":3,"sources":["../../src/ThresholdsEditor/index.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\nexport * from './ThresholdsEditor';\n"],"names":[],"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;AAEjC,cAAc,qBAAqB"}

package/dist/TimeChart/TimeChart.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
-import { TimeScale, UnitOptions, TimeSeries } from '@perses-dev/core';
+import { TimeScale, FormatOptions, TimeSeries } from '@perses-dev/core';
 import type { EChartsCoreOption, GridComponentOption, YAXisComponentOption } from 'echarts';
-import { ChartInstance, TimeChartSeriesMapping } from '../model/graph';
+import { ChartInstance, TimeChartSeriesMapping } from '../model';
 import { ZoomEventData } from '../utils';
 import { TooltipConfig } from '../TimeSeriesTooltip';
 export interface TimeChartProps {
@@ -10,7 +10,7 @@ export interface TimeChartProps {
     seriesMapping: TimeChartSeriesMapping;
     timeScale?: TimeScale;
     yAxis?: YAXisComponentOption;
-    unit?: UnitOptions;
+    format?: FormatOptions;
     grid?: GridComponentOption;
     tooltipConfig?: TooltipConfig;
     noDataVariant?: 'chart' | 'message';

package/dist/TimeChart/TimeChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeChart.d.ts","sourceRoot":"","sources":["../../src/TimeChart/TimeChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAK/F,OAAO,EAAsB,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAEL,aAAa,EACb,sBAAsB,EAGvB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuC,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAkB1F,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,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,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,SAAS,0GA6TpB,CAAC"}
+{"version":3,"file":"TimeChart.d.ts","sourceRoot":"","sources":["../../src/TimeChart/TimeChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAA6D,MAAM,OAAO,CAAC;AAM1G,OAAO,EAAsB,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAA0B,aAAa,EAAE,sBAAsB,EAA4B,MAAM,UAAU,CAAC;AAEnH,OAAO,EAQL,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuC,aAAa,EAA0B,MAAM,sBAAsB,CAAC;AAkBlH,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,SAAS,0GA6WpB,CAAC"}

package/dist/TimeChart/TimeChart.js

@@ -11,9 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import merge from 'lodash/merge';
+import isEqual from 'lodash/isEqual';
 import { utcToZonedTime } from 'date-fns-tz';
 import { getCommonTimeScale } from '@perses-dev/core';
 import { use } from 'echarts/core';
@@ -21,10 +22,10 @@ import { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echa
 import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
-import { DEFAULT_PINNED_CROSSHAIR, PINNED_CROSSHAIR_SERIES_NAME } from '../model/graph';
-import { useChartsTheme } from '../context/ChartsThemeProvider';
-import { clearHighlightedSeries, enableDataZoom, getFormattedAxisLabel, getPointInGrid, getYAxes, restoreChart } from '../utils';
-import { TimeChartTooltip } from '../TimeSeriesTooltip';
+import { DEFAULT_PINNED_CROSSHAIR } from '../model';
+import { useChartsContext } from '../context/ChartsProvider';
+import { clearHighlightedSeries, enableDataZoom, getClosestTimestamp, getFormattedAxisLabel, getPointInGrid, getFormattedAxis, restoreChart } from '../utils';
+import { TimeChartTooltip, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';
 import { useTimeZone } from '../context/TimeZoneProvider';
 use([
     EChartsLineChart,
@@ -40,19 +41,17 @@ use([
     TooltipComponent,
     CanvasRenderer
 ]);
-export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
-    var ref1;
-    const chartsTheme = useChartsTheme();
+export const TimeChart = /*#__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) {
+    var _option_tooltip;
+    const { chartsTheme , enablePinning , lastTooltipPinnedCoords , setLastTooltipPinnedCoords  } = useChartsContext();
+    const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = useRef();
     const [showTooltip, setShowTooltip] = useState(true);
     const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState(null);
+    const [pinnedCrosshair, setPinnedCrosshair] = useState(null);
     const [isDragging, setIsDragging] = useState(false);
     const [startX, setStartX] = useState(0);
     const { timeZone  } = useTimeZone();
-    var ref2;
-    const totalSeries = (ref2 = data === null || data === void 0 ? void 0 : data.length) !== null && ref2 !== void 0 ? ref2 : 0;
     let timeScale;
     if (timeScaleProp === undefined) {
         const commonTimeScale = getCommonTimeScale(data);
@@ -92,12 +91,10 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
                     // when chart undef, do not clear highlight series
                     return;
                 }
-                clearHighlightedSeries(chartRef.current, totalSeries);
+                clearHighlightedSeries(chartRef.current);
             }
         };
-    }, [
-        totalSeries
-    ]);
+    }, []);
     const handleEvents = useMemo(()=>{
         return {
             datazoom: (params)=>{
@@ -156,29 +153,34 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
                 ]
             });
         });
-        var _rangeMs;
+        const updatedSeriesMapping = enablePinning && pinnedCrosshair !== null ? [
+            ...seriesMapping,
+            pinnedCrosshair
+        ] : seriesMapping;
+        var _timeScale_rangeMs;
         const option = {
             dataset: dataset,
-            series: seriesMapping,
+            series: updatedSeriesMapping,
             xAxis: {
                 type: 'time',
                 min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),
                 max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(timeScale.endMs, timeZone),
                 axisLabel: {
                     hideOverlap: true,
-                    formatter: getFormattedAxisLabel((_rangeMs = timeScale.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : 0)
+                    formatter: getFormattedAxisLabel((_timeScale_rangeMs = timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0)
                 },
                 axisPointer: {
                     snap: false
                 }
             },
-            yAxis: getYAxes(yAxis, unit),
+            yAxis: getFormattedAxis(yAxis, format),
             animation: false,
             tooltip: {
                 show: true,
-                trigger: isStackedBar ? 'item' : 'axis',
-                // ECharts tooltip content hidden since we use custom tooltip instead
+                // ECharts tooltip content hidden by default since we use custom tooltip instead.
+                // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
                 showContent: isStackedBar,
+                trigger: isStackedBar ? 'item' : 'axis',
                 appendToBody: true
             },
             // https://echarts.apache.org/en/option.html#axisPointer
@@ -203,73 +205,112 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
             return __experimentalEChartsOptionsOverride(option);
         }
         return option;
-    // tooltipPinnedCoords is needed in dep array so crosshair stays beside pinned tooltip onClick
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         data,
         seriesMapping,
         timeScale,
         yAxis,
-        unit,
+        format,
         grid,
         noDataOption,
         __experimentalEChartsOptionsOverride,
         noDataVariant,
         timeZone,
-        tooltipPinnedCoords,
-        isStackedBar
+        isStackedBar,
+        enablePinning,
+        pinnedCrosshair
+    ]);
+    // Update adjacent charts so tooltip is unpinned when current chart is clicked.
+    useEffect(()=>{
+        // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.
+        // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.
+        const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;
+        if (multipleTooltipsPinned) {
+            if (!isEqual(lastTooltipPinnedCoords, tooltipPinnedCoords)) {
+                setTooltipPinnedCoords(null);
+                if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {
+                    setPinnedCrosshair(null);
+                }
+            }
+        }
+    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        lastTooltipPinnedCoords,
+        seriesMapping
     ]);
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
             height
         },
+        // onContextMenu={(e) => {
+        //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here
+        //   e.preventDefault(); // Prevent the default behaviour when right clicked
+        // }}
         onClick: (e)=>{
-            var ref;
+            // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down
+            const isControlKeyPressed = e.ctrlKey || e.metaKey;
+            if (isControlKeyPressed) {
+                e.preventDefault();
+            }
             // Determine where on chart canvas to plot pinned crosshair as markLine.
             const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);
             if (pointInGrid === null) {
                 return;
             }
-            // Clear previously set pinned crosshair
-            const isCrosshairPinned = ((ref = seriesMapping[seriesMapping.length - 1]) === null || ref === void 0 ? void 0 : ref.name) === PINNED_CROSSHAIR_SERIES_NAME;
-            if (tooltipPinnedCoords !== null && isCrosshairPinned) {
-                seriesMapping.pop();
-            } else if (seriesMapping.length !== data.length + 1) {
-                // Only add pinned crosshair line series when there is not one already in seriesMapping.
-                const pinnedCrosshair = merge(DEFAULT_PINNED_CROSSHAIR, {
-                    markLine: {
-                        data: [
-                            {
-                                xAxis: pointInGrid[0]
-                            }
-                        ]
-                    }
-                });
-                seriesMapping.push(pinnedCrosshair);
-            }
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {
+                // Pin tooltip and update shared charts context to remember these coordinates.
+                const pinnedPos = {
+                    page: {
+                        x: e.pageX,
+                        y: e.pageY
+                    },
+                    client: {
+                        x: e.clientX,
+                        y: e.clientY
+                    },
+                    plotCanvas: {
+                        x: e.nativeEvent.offsetX,
+                        y: e.nativeEvent.offsetY
+                    },
+                    target: e.target
+                };
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
-                        return {
-                            page: {
-                                x: e.pageX,
-                                y: e.pageY
-                            },
-                            client: {
-                                x: e.clientX,
-                                y: e.clientY
-                            },
-                            plotCanvas: {
-                                x: e.nativeEvent.offsetX,
-                                y: e.nativeEvent.offsetY
-                            },
-                            target: e.target
-                        };
+                        return pinnedPos;
                     } else {
+                        setPinnedCrosshair(null);
                         return null;
                     }
                 });
+                setPinnedCrosshair((current)=>{
+                    // Only add pinned crosshair line series when there is not one already in seriesMapping.
+                    if (current === null) {
+                        var _data_;
+                        const cursorX = pointInGrid[0];
+                        // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
+                        const firstTimeSeriesValues = (_data_ = data[0]) === null || _data_ === void 0 ? void 0 : _data_.values;
+                        const closestTimestamp = getClosestTimestamp(firstTimeSeriesValues, cursorX);
+                        // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right
+                        const pinnedCrosshair = merge({}, DEFAULT_PINNED_CROSSHAIR, {
+                            markLine: {
+                                data: [
+                                    {
+                                        xAxis: closestTimestamp
+                                    }
+                                ]
+                            }
+                        });
+                        return pinnedCrosshair;
+                    } else {
+                        // Clear previously set pinned crosshair
+                        return null;
+                    }
+                });
+                if (!isControlKeyPressed) {
+                    setLastTooltipPinnedCoords(pinnedPos);
+                }
             }
         },
         onMouseDown: (e)=>{
@@ -301,7 +342,7 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
                 setShowTooltip(false);
             }
             if (chartRef.current !== undefined) {
-                clearHighlightedSeries(chartRef.current, totalSeries);
+                clearHighlightedSeries(chartRef.current);
             }
         },
         onMouseEnter: ()=>{
@@ -322,18 +363,20 @@ export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height ,
             }
         },
         children: [
-            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeChartTooltip, {
+            showTooltip === true && ((_option_tooltip = option.tooltip) === null || _option_tooltip === void 0 ? void 0 : _option_tooltip.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeChartTooltip, {
                 containerId: chartsTheme.tooltipPortalContainerId,
                 chartRef: chartRef,
                 data: data,
                 seriesMapping: seriesMapping,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: isPinningEnabled,
                 pinnedPos: tooltipPinnedCoords,
-                unit: unit,
+                format: format,
                 onUnpinClick: ()=>{
+                    // Unpins tooltip when clicking Pin icon in TooltipHeader.
                     setTooltipPinnedCoords(null);
-                    // Clear previously set pinned crosshair
-                    seriesMapping.pop();
+                    // Clear previously set pinned crosshair.
+                    setPinnedCrosshair(null);
                 }
             }),
             /*#__PURE__*/ _jsx(EChart, {

package/dist/TimeChart/TimeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeChart/TimeChart.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 { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { DatasetOption } from 'echarts/types/dist/shared';\nimport { utcToZonedTime } from 'date-fns-tz';\nimport { getCommonTimeScale, TimeScale, UnitOptions, 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 { EChart, OnEventsType } from '../EChart';\nimport {\n  ChartInstanceFocusOpts,\n  ChartInstance,\n  TimeChartSeriesMapping,\n  DEFAULT_PINNED_CROSSHAIR,\n  PINNED_CROSSHAIR_SERIES_NAME,\n} from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getFormattedAxisLabel,\n  getPointInGrid,\n  getYAxes,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\nimport { CursorCoordinates, TimeChartTooltip, TooltipConfig } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\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  unit?: UnitOptions;\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 TimeChart = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n  {\n    height,\n    data,\n    seriesMapping,\n    timeScale: timeScaleProp,\n    yAxis,\n    unit,\n    grid,\n    isStackedBar = false,\n    tooltipConfig = { wrapLabels: true },\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const { timeZone } = useTimeZone();\n  const totalSeries = data?.length ?? 0;\n\n  let timeScale: TimeScale;\n  if (timeScaleProp === undefined) {\n    const commonTimeScale = getCommonTimeScale(data);\n    if (commonTimeScale === undefined) {\n      // set default to past 5 years\n      const today = new Date();\n      const pastDate = new Date(today);\n      pastDate.setFullYear(today.getFullYear() - 5);\n      const todayMs = today.getTime();\n      const pastDateMs = pastDate.getTime();\n      timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n    } else {\n      timeScale = commonTimeScale;\n    }\n  } else {\n    timeScale = timeScaleProp;\n  }\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ name }: ChartInstanceFocusOpts) {\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: () => {\n          if (!chartRef.current) {\n            // when chart undef, do not clear highlight series\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, totalSeries);\n        },\n      };\n    },\n    [totalSeries]\n  );\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\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: () => {\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 : utcToZonedTime(timestamp, timeZone), val];\n      });\n      dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n    });\n\n    const option: EChartsCoreOption = {\n      dataset: dataset,\n      series: seriesMapping,\n      xAxis: {\n        type: 'time',\n        min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),\n        max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(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: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: isStackedBar ? 'item' : 'axis',\n        // ECharts tooltip content hidden since we use custom tooltip instead\n        showContent: isStackedBar,\n        appendToBody: true,\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    // tooltipPinnedCoords is needed in dep array so crosshair stays beside pinned tooltip onClick\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    data,\n    seriesMapping,\n    timeScale,\n    yAxis,\n    unit,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    timeZone,\n    tooltipPinnedCoords,\n    isStackedBar,\n  ]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\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        // Clear previously set pinned crosshair\n        const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n        if (tooltipPinnedCoords !== null && isCrosshairPinned) {\n          seriesMapping.pop();\n        } else if (seriesMapping.length !== data.length + 1) {\n          // Only add pinned crosshair line series when there is not one already in seriesMapping.\n          const pinnedCrosshair = merge(DEFAULT_PINNED_CROSSHAIR, {\n            markLine: {\n              data: [\n                {\n                  xAxis: pointInGrid[0],\n                },\n              ],\n            },\n          });\n          seriesMapping.push(pinnedCrosshair);\n        }\n\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\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            } else {\n              return null;\n            }\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, totalSeries);\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            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n              // Clear previously set pinned crosshair\n              seriesMapping.pop();\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={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","merge","utcToZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","EChart","DEFAULT_PINNED_CROSSHAIR","PINNED_CROSSHAIR_SERIES_NAME","useChartsTheme","clearHighlightedSeries","enableDataZoom","getFormattedAxisLabel","getPointInGrid","getYAxes","restoreChart","TimeChartTooltip","useTimeZone","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","unit","grid","isStackedBar","tooltipConfig","wrapLabels","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","isDragging","setIsDragging","startX","setStartX","timeZone","totalSeries","length","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","dataset","isLocalTimeZone","map","d","index","values","timestamp","value","val","push","id","source","dimensions","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","animation","tooltip","show","trigger","showContent","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","pointInGrid","nativeEvent","offsetX","offsetY","isCrosshairPinned","pop","pinnedCrosshair","markLine","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","pinnedPos","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeChart/TimeChart.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 { 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 { DatasetOption } from 'echarts/types/dist/shared';\nimport { utcToZonedTime } 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 { EChart, OnEventsType } from '../EChart';\nimport { ChartInstanceFocusOpts, ChartInstance, TimeChartSeriesMapping, DEFAULT_PINNED_CROSSHAIR } from '../model';\nimport { useChartsContext } from '../context/ChartsProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getClosestTimestamp,\n  getFormattedAxisLabel,\n  getPointInGrid,\n  getFormattedAxis,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\nimport { CursorCoordinates, TimeChartTooltip, TooltipConfig, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\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 TimeChart = 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, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = 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(\n    ref,\n    () => {\n      return {\n        highlightSeries({ name }: ChartInstanceFocusOpts) {\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: () => {\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  );\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\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: () => {\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 : utcToZonedTime(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 : utcToZonedTime(timeScale.startMs, timeZone),\n        max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(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: true,\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      sx={{ 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={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useEffect","useImperativeHandle","useMemo","useRef","useState","Box","merge","isEqual","utcToZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","EChart","DEFAULT_PINNED_CROSSHAIR","useChartsContext","clearHighlightedSeries","enableDataZoom","getClosestTimestamp","getFormattedAxisLabel","getPointInGrid","getFormattedAxis","restoreChart","TimeChartTooltip","DEFAULT_TOOLTIP_CONFIG","useTimeZone","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","format","grid","isStackedBar","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","enablePinning","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","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","sx","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","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/TimeChart/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeChart/index.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\nexport * from './TimeChart';\n"],"names":[],"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;AAEjC,cAAc,aAAa,CAAC"}
+{"version":3,"sources":["../../src/TimeChart/index.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\nexport * from './TimeChart';\n"],"names":[],"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;AAEjC,cAAc,cAAc"}

package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
-import { UnitOptions } from '@perses-dev/core';
+import { FormatOptions } from '@perses-dev/core';
 import { ECharts as EChartsInstance } from 'echarts/core';
 import { EChartsDataFormat } from '../model';
 import { CursorCoordinates } from './tooltip-model';
 export interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
+    enablePinning?: boolean;
     wrapLabels?: boolean;
-    unit?: UnitOptions;
+    format?: FormatOptions;
     onUnpinClick?: () => void;
     pinnedPos: CursorCoordinates | null;
     /**

package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,8DA0F3B,CAAC"}
+{"version":3,"file":"LineChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,8DA6F3B,CAAC"}