@perses-dev/components 0.0.0-snapshot-embed-import-errors-8906900 → 0.0.0-snapshot-test-internal-dep-dd238ac

package/dist/ThresholdsEditor/ThresholdsEditor.js

@@ -0,0 +1,215 @@
+// Copyright 2023 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import produce from 'immer';
+import { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import PlusIcon from 'mdi-material-ui/Plus';
+import { Stack } from '@mui/system';
+import { InfoTooltip } from '../InfoTooltip';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { OptionsEditorGroup } from '../OptionsEditorLayout';
+import { ThresholdColorPicker } from './ThresholdColorPicker';
+import { ThresholdInput } from './ThresholdInput';
+const DEFAULT_STEP = 10;
+export function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercentMode  }) {
+    const { thresholds: { defaultColor , palette  } ,  } = useChartsTheme();
+    var ref;
+    const defaultThresholdColor = (ref = thresholds === null || thresholds === void 0 ? void 0 : thresholds.default_color) !== null && ref !== void 0 ? ref : defaultColor;
+    const [steps, setSteps] = useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
+    useEffect(()=>{
+        setSteps(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);
+    }, [
+        thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps
+    ]);
+    // every time a new threshold is added, we want to focus the recently added input
+    const recentlyAddedInputRef = useRef(null);
+    const focusRef = useRef(false);
+    useEffect(()=>{
+        var ref;
+        if (!recentlyAddedInputRef.current || !focusRef.current) return;
+        (ref = recentlyAddedInputRef.current) === null || ref === void 0 ? void 0 : ref.focus();
+        focusRef.current = false;
+    }, [
+        steps === null || steps === void 0 ? void 0 : steps.length
+    ]);
+    const handleThresholdValueChange = (e, i)=>{
+        setSteps(produce(steps, (draft)=>{
+            const step = draft === null || draft === void 0 ? void 0 : draft[i];
+            if (step) {
+                step.value = Number(e.target.value);
+            }
+        }));
+    };
+    const handleThresholdColorChange = (color, i)=>{
+        if (thresholds !== undefined) {
+            onChange(produce(thresholds, (draft)=>{
+                if (draft.steps !== undefined) {
+                    const step = draft.steps[i];
+                    if (step) {
+                        step.color = color;
+                    }
+                }
+            }));
+        }
+    };
+    const handleDefaultColorChange = (color)=>{
+        if (thresholds !== undefined) {
+            onChange(produce(thresholds, (draft)=>{
+                draft.default_color = color;
+            }));
+        }
+    };
+    // sort thresholds in ascending order every time an input blurs
+    const handleThresholdBlur = ()=>{
+        if (steps !== undefined) {
+            const sortedSteps = [
+                ...steps
+            ];
+            sortedSteps.sort((a, b)=>a.value - b.value);
+            if (thresholds !== undefined) {
+                onChange(produce(thresholds, (draft)=>{
+                    draft.steps = sortedSteps;
+                }));
+            }
+        }
+    };
+    const deleteThreshold = (i)=>{
+        if (thresholds !== undefined) {
+            const updatedThresholds = produce(thresholds, (draft)=>{
+                if (draft.steps) {
+                    draft.steps.splice(i, 1);
+                }
+            });
+            onChange(updatedThresholds);
+        }
+    };
+    const addThresholdInput = ()=>{
+        focusRef.current = true;
+        if (thresholds === undefined) {
+            onChange({
+                steps: [
+                    {
+                        value: DEFAULT_STEP
+                    }
+                ]
+            });
+        } else {
+            onChange(produce(thresholds, (draft)=>{
+                const steps = draft.steps;
+                if (steps === null || steps === void 0 ? void 0 : steps.length) {
+                    const lastStep = steps[steps.length - 1];
+                    var _length;
+                    const color = (_length = palette[steps.length]) !== null && _length !== void 0 ? _length : getRandomColor(); // we will assign color from the palette first, then generate random color
+                    var ref;
+                    steps.push({
+                        color,
+                        value: ((ref = lastStep === null || lastStep === void 0 ? void 0 : lastStep.value) !== null && ref !== void 0 ? ref : 0) + DEFAULT_STEP
+                    }); // set new threshold value to last step value + 10
+                } else if (steps) {
+                    steps.push({
+                        value: DEFAULT_STEP
+                    });
+                }
+            }));
+        }
+    };
+    const handleModeChange = (event, value)=>{
+        const mode = value === 'Percent' ? 'Percent' : undefined;
+        if (thresholds !== undefined) {
+            onChange(produce(thresholds, (draft)=>{
+                draft.mode = mode;
+            }));
+        } else {
+            onChange({
+                mode
+            });
+        }
+    };
+    var ref1, _color, ref2;
+    return /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+        title: "Thresholds",
+        icon: /*#__PURE__*/ _jsx(IconButton, {
+            size: "small",
+            "aria-label": "add threshold",
+            onClick: addThresholdInput,
+            children: /*#__PURE__*/ _jsx(PlusIcon, {})
+        }),
+        children: [
+            /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                exclusive: true,
+                disabled: disablePercentMode,
+                value: (ref1 = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && ref1 !== void 0 ? ref1 : 'Absolute',
+                onChange: handleModeChange,
+                sx: {
+                    height: '36px',
+                    marginLeft: 'auto'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(ToggleButton, {
+                        "aria-label": "absolute",
+                        value: "Absolute",
+                        children: /*#__PURE__*/ _jsx(InfoTooltip, {
+                            description: "Absolute",
+                            children: "#"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(ToggleButton, {
+                        "aria-label": "percent",
+                        value: "Percent",
+                        children: /*#__PURE__*/ _jsx(InfoTooltip, {
+                            description: "Percentage means thresholds relative to min & max",
+                            children: "%"
+                        })
+                    })
+                ]
+            }),
+            steps && steps.map((step, i)=>/*#__PURE__*/ _jsx(ThresholdInput, {
+                    inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
+                    label: `T${i + 1}`,
+                    color: (ref2 = (_color = step.color) !== null && _color !== void 0 ? _color : palette[i]) !== null && ref2 !== void 0 ? ref2 : defaultThresholdColor,
+                    value: step.value,
+                    onColorChange: (color)=>handleThresholdColorChange(color, i),
+                    onChange: (e)=>{
+                        handleThresholdValueChange(e, i);
+                    },
+                    onDelete: ()=>{
+                        deleteThreshold(i);
+                    },
+                    onBlur: handleThresholdBlur
+                }, i)).reverse(),
+            !hideDefault && /*#__PURE__*/ _jsxs(Stack, {
+                flex: 1,
+                direction: "row",
+                alignItems: "center",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(ThresholdColorPicker, {
+                        label: "default",
+                        color: defaultThresholdColor,
+                        onColorChange: handleDefaultColorChange
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        children: "Default"
+                    })
+                ]
+            })
+        ]
+    });
+}
+// https://www.paulirish.com/2009/random-hex-color-code-snippets/
+const getRandomColor = ()=>{
+    return '#' + Math.floor(Math.random() * 16777216).toString(16).padStart(6, '0');
+};
+
+//# sourceMappingURL=ThresholdsEditor.js.map

package/dist/ThresholdsEditor/ThresholdsEditor.js.map

@@ -0,0 +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 { InfoTooltip } from '../InfoTooltip';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { OptionsEditorGroup } from '../OptionsEditorLayout';\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    }\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 {\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        <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n          <PlusIcon />\n        </IconButton>\n      }\n    >\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\">\n          <InfoTooltip description=\"Absolute\">#</InfoTooltip>\n        </ToggleButton>\n        <ToggleButton aria-label=\"percent\" value=\"Percent\">\n          <InfoTooltip description=\"Percentage means thresholds relative to min & max\">%</InfoTooltip>\n        </ToggleButton>\n      </ToggleButtonGroup>\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              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","InfoTooltip","useChartsTheme","OptionsEditorGroup","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","size","aria-label","onClick","exclusive","disabled","sx","height","marginLeft","description","map","inputRef","label","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}

package/dist/ThresholdsEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ThresholdsEditor';
+//# sourceMappingURL=index.d.ts.map

package/dist/ThresholdsEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}

package/dist/ThresholdsEditor/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './ThresholdsEditor';
+
+//# sourceMappingURL=index.js.map

package/dist/ThresholdsEditor/index.js.map

@@ -0,0 +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"}

package/dist/{Tooltip → TimeSeriesTooltip}/SeriesInfo.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface SeriesInfoProps {
+export interface SeriesInfoProps {
     seriesName: string;
     y: number;
     formattedY: string;
@@ -8,5 +8,4 @@ interface SeriesInfoProps {
     wrapLabels?: boolean;
 }
 export declare function SeriesInfo(props: SeriesInfoProps): JSX.Element;
-export {};
 //# sourceMappingURL=SeriesInfo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAuEhD"}

package/dist/TimeSeriesTooltip/SeriesInfo.js

@@ -0,0 +1,89 @@
+// Copyright 2023 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SeriesMarker } from './SeriesMarker';
+import { SeriesLabelsStack } from './SeriesLabelsStack';
+import { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';
+export function SeriesInfo(props) {
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
+    // metric __name__ comes before opening curly brace, ignore if not populated
+    // ex with metric name: node_load15{env="demo",job="node"}
+    // ex without metric name: {env="demo",job="node"}
+    const splitName = seriesName.split('{');
+    var ref;
+    const seriesLabels = (ref = splitName[1]) !== null && ref !== void 0 ? ref : seriesName;
+    // remove curly braces that wrap labels
+    const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');
+    // determine whether to show labels on separate lines
+    const splitLabels = formattedSeriesLabels.split(',');
+    if (totalSeries === 1 && splitLabels.length > 1) {
+        const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';
+        return /*#__PURE__*/ _jsx(SeriesLabelsStack, {
+            formattedY: formattedY,
+            metricName: metricName,
+            metricLabels: splitLabels,
+            markerColor: markerColor
+        });
+    }
+    // add space after commas when more than one focused series
+    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            display: 'table-row',
+            paddingTop: 0.5
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'table-cell',
+                    maxWidth: '520px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(SeriesMarker, {
+                        markerColor: markerColor,
+                        sx: {
+                            marginTop: 0.5
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        component: "span",
+                        sx: (theme)=>({
+                                display: 'inline-block',
+                                width: 'calc(100% - 20px)',
+                                minWidth: 150,
+                                maxWidth: TOOLTIP_LABELS_MAX_WIDTH,
+                                overflow: 'hidden',
+                                color: theme.palette.common.white,
+                                textOverflow: 'ellipsis',
+                                whiteSpace: wrapLabels ? 'normal' : 'nowrap'
+                            }),
+                        children: inlineSeriesLabels
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'table-cell',
+                    paddingLeft: 1.5,
+                    textAlign: 'right',
+                    verticalAlign: 'top',
+                    fontWeight: '700'
+                },
+                children: formattedY
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SeriesInfo.js.map

package/dist/TimeSeriesTooltip/SeriesInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.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 { Box } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  formattedY: string;\n  markerColor: string;\n  totalSeries: number;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n  const { seriesName, formattedY, markerColor, totalSeries, wrapLabels } = props;\n\n  // metric __name__ comes before opening curly brace, ignore if not populated\n  // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n  // ex without metric name: {env=\"demo\",job=\"node\"}\n  const splitName = seriesName.split('{');\n  const seriesLabels = splitName[1] ?? seriesName;\n\n  // remove curly braces that wrap labels\n  const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n  // determine whether to show labels on separate lines\n  const splitLabels = formattedSeriesLabels.split(',');\n  if (totalSeries === 1 && splitLabels.length > 1) {\n    const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n    return (\n      <SeriesLabelsStack\n        formattedY={formattedY}\n        metricName={metricName}\n        metricLabels={splitLabels}\n        markerColor={markerColor}\n      />\n    );\n  }\n\n  // add space after commas when more than one focused series\n  const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            display: 'inline-block',\n            width: 'calc(100% - 20px)',\n            minWidth: 150,\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            color: theme.palette.common.white,\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n          })}\n        >\n          {inlineSeriesLabels}\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          display: 'table-cell',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n          fontWeight: '700',\n        }}\n      >\n        {formattedY}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","SeriesMarker","SeriesLabelsStack","TOOLTIP_LABELS_MAX_WIDTH","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","wrapLabels","splitName","split","seriesLabels","formattedSeriesLabels","replace","splitLabels","length","metricName","metricLabels","inlineSeriesLabels","sx","display","paddingTop","maxWidth","marginTop","component","theme","width","minWidth","overflow","color","palette","common","white","textOverflow","whiteSpace","paddingLeft","textAlign","verticalAlign","fontWeight"],"mappings":"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"}

package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface SeriesLabelsStackProps {
+    formattedY: string;
+    metricName: string;
+    metricLabels: string[];
+    markerColor: string;
+}
+export declare function SeriesLabelsStack(props: SeriesLabelsStackProps): JSX.Element;
+//# sourceMappingURL=SeriesLabelsStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesLabelsStack.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesLabelsStack.tsx"],"names":[],"mappings":";AAgBA,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAiE9D"}

package/dist/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -0,0 +1,99 @@
+// Copyright 2023 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Stack, Typography } from '@mui/material';
+import { SeriesMarker } from './SeriesMarker';
+export function SeriesLabelsStack(props) {
+    const { formattedY , markerColor , metricName , metricLabels  } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 0.5,
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: (theme)=>({
+                        display: 'flex',
+                        height: '16px',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'left',
+                        color: theme.palette.common.white,
+                        fontSize: '11px'
+                    }),
+                children: [
+                    /*#__PURE__*/ _jsx(SeriesMarker, {
+                        markerColor: markerColor,
+                        sx: {
+                            marginTop: 0.25
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        component: "span",
+                        children: [
+                            metricName,
+                            /*#__PURE__*/ _jsx(Box, {
+                                component: "span",
+                                sx: (theme)=>({
+                                        color: theme.palette.common.white,
+                                        fontWeight: 700,
+                                        paddingLeft: '2px'
+                                    }),
+                                children: formattedY
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Divider, {
+                sx: (theme)=>({
+                        borderColor: theme.palette.grey['500']
+                    })
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: (theme)=>({
+                        color: theme.palette.common.white
+                    }),
+                children: metricLabels.map((label)=>{
+                    // show labels on separate lines when many labels and only one focused series
+                    if (label) {
+                        const [name, value] = label.split('=');
+                        const formattedName = value !== undefined ? `${name}: ` : name;
+                        const formattedValue = value !== undefined ? value.replace(/(^"|"$)/g, '') : value;
+                        return /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                display: 'flex',
+                                gap: '4px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    sx: {
+                                        fontSize: '11px'
+                                    },
+                                    children: formattedName
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    sx: (theme)=>({
+                                            color: theme.palette.common.white,
+                                            fontWeight: 700,
+                                            fontSize: '11px'
+                                        }),
+                                    children: formattedValue
+                                })
+                            ]
+                        }, label);
+                    }
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SeriesLabelsStack.js.map

package/dist/TimeSeriesTooltip/SeriesLabelsStack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesLabelsStack.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 { Box, Divider, Stack, Typography } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\n\nexport interface SeriesLabelsStackProps {\n  formattedY: string;\n  metricName: string;\n  metricLabels: string[];\n  markerColor: string;\n}\n\nexport function SeriesLabelsStack(props: SeriesLabelsStackProps) {\n  const { formattedY, markerColor, metricName, metricLabels } = props;\n  return (\n    <Stack spacing={0.5}>\n      <Box\n        sx={(theme) => ({\n          display: 'flex',\n          height: '16px',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'left',\n          color: theme.palette.common.white,\n          fontSize: '11px',\n        })}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.25 }} />\n        <Box component=\"span\">\n          {metricName}\n          <Box\n            component=\"span\"\n            sx={(theme) => ({\n              color: theme.palette.common.white,\n              fontWeight: 700,\n              paddingLeft: '2px',\n            })}\n          >\n            {formattedY}\n          </Box>\n        </Box>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n      <Box\n        sx={(theme) => ({\n          color: theme.palette.common.white,\n        })}\n      >\n        {metricLabels.map((label) => {\n          // show labels on separate lines when many labels and only one focused series\n          if (label) {\n            const [name, value] = label.split('=');\n            const formattedName = value !== undefined ? `${name}: ` : name;\n            const formattedValue = value !== undefined ? value.replace(/(^\"|\"$)/g, '') : value;\n            return (\n              <Box key={label} sx={{ display: 'flex', gap: '4px' }}>\n                <Typography sx={{ fontSize: '11px' }}>{formattedName}</Typography>\n                <Typography\n                  sx={(theme) => ({\n                    color: theme.palette.common.white,\n                    fontWeight: 700,\n                    fontSize: '11px',\n                  })}\n                >\n                  {formattedValue}\n                </Typography>\n              </Box>\n            );\n          }\n        })}\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Divider","Stack","Typography","SeriesMarker","SeriesLabelsStack","props","formattedY","markerColor","metricName","metricLabels","spacing","sx","theme","display","height","flexDirection","alignItems","justifyContent","color","palette","common","white","fontSize","marginTop","component","fontWeight","paddingLeft","borderColor","grey","map","label","name","value","split","formattedName","undefined","formattedValue","replace","gap"],"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;AAAA,SAASA,GAAG,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAChE,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAS9C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAEC,UAAU,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGJ,KAAK,AAAC;IACpE,qBACE,MAACJ,KAAK;QAACS,OAAO,EAAE,GAAG;;0BACjB,MAACX,GAAG;gBACFY,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,OAAO,EAAE,MAAM;wBACfC,MAAM,EAAE,MAAM;wBACdC,aAAa,EAAE,KAAK;wBACpBC,UAAU,EAAE,QAAQ;wBACpBC,cAAc,EAAE,MAAM;wBACtBC,KAAK,EAAEN,KAAK,CAACO,OAAO,CAACC,MAAM,CAACC,KAAK;wBACjCC,QAAQ,EAAE,MAAM;qBACjB,CAAA,AAAC;;kCAEF,KAACnB,YAAY;wBAACI,WAAW,EAAEA,WAAW;wBAAEI,EAAE,EAAE;4BAAEY,SAAS,EAAE,IAAI;yBAAE;sBAAI;kCACnE,MAACxB,GAAG;wBAACyB,SAAS,EAAC,MAAM;;4BAClBhB,UAAU;0CACX,KAACT,GAAG;gCACFyB,SAAS,EAAC,MAAM;gCAChBb,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wCACdM,KAAK,EAAEN,KAAK,CAACO,OAAO,CAACC,MAAM,CAACC,KAAK;wCACjCI,UAAU,EAAE,GAAG;wCACfC,WAAW,EAAE,KAAK;qCACnB,CAAA,AAAC;0CAEDpB,UAAU;8BACP;;sBACF;;cACF;0BACN,KAACN,OAAO;gBACNW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACde,WAAW,EAAEf,KAAK,CAACO,OAAO,CAACS,IAAI,CAAC,KAAK,CAAC;qBACvC,CAAA,AAAC;cACF;0BACF,KAAC7B,GAAG;gBACFY,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdM,KAAK,EAAEN,KAAK,CAACO,OAAO,CAACC,MAAM,CAACC,KAAK;qBAClC,CAAA,AAAC;0BAEDZ,YAAY,CAACoB,GAAG,CAAC,CAACC,KAAK,GAAK;oBAC3B,6EAA6E;oBAC7E,IAAIA,KAAK,EAAE;wBACT,MAAM,CAACC,IAAI,EAAEC,KAAK,CAAC,GAAGF,KAAK,CAACG,KAAK,CAAC,GAAG,CAAC,AAAC;wBACvC,MAAMC,aAAa,GAAGF,KAAK,KAAKG,SAAS,GAAG,CAAC,EAAEJ,IAAI,CAAC,EAAE,CAAC,GAAGA,IAAI,AAAC;wBAC/D,MAAMK,cAAc,GAAGJ,KAAK,KAAKG,SAAS,GAAGH,KAAK,CAACK,OAAO,aAAa,EAAE,CAAC,GAAGL,KAAK,AAAC;wBACnF,qBACE,MAACjC,GAAG;4BAAaY,EAAE,EAAE;gCAAEE,OAAO,EAAE,MAAM;gCAAEyB,GAAG,EAAE,KAAK;6BAAE;;8CAClD,KAACpC,UAAU;oCAACS,EAAE,EAAE;wCAAEW,QAAQ,EAAE,MAAM;qCAAE;8CAAGY,aAAa;kCAAc;8CAClE,KAAChC,UAAU;oCACTS,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4CACdM,KAAK,EAAEN,KAAK,CAACO,OAAO,CAACC,MAAM,CAACC,KAAK;4CACjCI,UAAU,EAAE,GAAG;4CACfH,QAAQ,EAAE,MAAM;yCACjB,CAAA,AAAC;8CAEDc,cAAc;kCACJ;;2BAVLN,KAAK,CAWT,CACN;oBACJ,CAAC;gBACH,CAAC,CAAC;cACE;;MACA,CACR;AACJ,CAAC"}

package/dist/{Tooltip → TimeSeriesTooltip}/SeriesMarker.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-interface SeriesMarkerProps {
+import { BoxProps } from '@mui/material';
+interface SeriesMarkerProps extends BoxProps<'div'> {
     markerColor: string;
 }
 export declare function SeriesMarker(props: SeriesMarkerProps): JSX.Element;

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

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesMarker.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesMarker.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,UAAU,iBAAkB,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACjD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAkBpD"}

package/dist/{Tooltip → TimeSeriesTooltip}/SeriesMarker.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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,18 +12,18 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { combineSx } from '../utils';
 export function SeriesMarker(props) {
-    const { markerColor  } = props;
+    const { markerColor , sx  } = props;
     return /*#__PURE__*/ _jsx(Box, {
-        sx: {
+        sx: combineSx({
             display: 'inline-block',
-            width: '12px',
+            width: '11px',
+            height: '11px',
             borderRadius: '2px',
-            height: '12px',
-            marginTop: 0.25,
             marginRight: 1,
             verticalAlign: 'top'
-        },
+        }, sx),
         style: {
             backgroundColor: markerColor
         }

package/dist/TimeSeriesTooltip/SeriesMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesMarker.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 { Box, BoxProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\ninterface SeriesMarkerProps extends BoxProps<'div'> {\n  markerColor: string;\n}\n\nexport function SeriesMarker(props: SeriesMarkerProps) {\n  const { markerColor, sx } = props;\n  return (\n    <Box\n      sx={combineSx(\n        {\n          display: 'inline-block',\n          width: '11px',\n          height: '11px',\n          borderRadius: '2px',\n          marginRight: 1,\n          verticalAlign: 'top',\n        },\n        sx\n      )}\n      style={{ backgroundColor: markerColor }}\n    ></Box>\n  );\n}\n"],"names":["Box","combineSx","SeriesMarker","props","markerColor","sx","display","width","height","borderRadius","marginRight","verticalAlign","style","backgroundColor"],"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;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,SAAS,QAAQ,UAAU,CAAC;AAMrC,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EAAEC,WAAW,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGF,KAAK,AAAC;IAClC,qBACE,KAACH,GAAG;QACFK,EAAE,EAAEJ,SAAS,CACX;YACEK,OAAO,EAAE,cAAc;YACvBC,KAAK,EAAE,MAAM;YACbC,MAAM,EAAE,MAAM;YACdC,YAAY,EAAE,KAAK;YACnBC,WAAW,EAAE,CAAC;YACdC,aAAa,EAAE,KAAK;SACrB,EACDN,EAAE,CACH;QACDO,KAAK,EAAE;YAAEC,eAAe,EAAET,WAAW;SAAE;MAClC,CACP;AACJ,CAAC"}

package/dist/{Tooltip/Tooltip.d.ts → TimeSeriesTooltip/TimeSeriesTooltip.d.ts}

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ECharts as EChartsInstance } from 'echarts/core';
 import { EChartsDataFormat, UnitOptions } from '../model';
-interface TooltipProps {
+interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
     pinTooltip: boolean;
     wrapLabels?: boolean;
     unit?: UnitOptions;
 }
-declare const Tooltip: React.NamedExoticComponent<TooltipProps>;
-export { Tooltip };
-//# sourceMappingURL=Tooltip.d.ts.map
+export declare const TimeSeriesTooltip: React.NamedExoticComponent<TimeSeriesTooltipProps>;
+export {};
+//# sourceMappingURL=TimeSeriesTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oDA2D5B,CAAC"}

package/dist/{Tooltip/Tooltip.js → TimeSeriesTooltip/TimeSeriesTooltip.js}

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -17,7 +17,7 @@ import { getFocusedSeriesData } from './focused-series';
 import { TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
 import { TooltipContent } from './TooltipContent';
 import { assembleTransform } from './utils';
-const Tooltip = /*#__PURE__*/ React.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = useState(null);
     const mousePos = useMousePosition();
     if (mousePos === null || mousePos.target === null) return null;
@@ -67,6 +67,5 @@ const Tooltip = /*#__PURE__*/ React.memo(function Tooltip({ chartRef , chartData
         })
     });
 });
-export { Tooltip };
 
-//# sourceMappingURL=Tooltip.js.map
+//# sourceMappingURL=TimeSeriesTooltip.js.map