@perses-dev/components 0.23.0 → 0.24.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThresholdColorPicker.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdColorPicker.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,aAAa,EACb,KAAK,GACN,EAAE,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,eAAe,GAAG,OAAO,CAAC,eA8ChE"}

package/dist/ThresholdsEditor/ThresholdColorPicker.js

@@ -0,0 +1,76 @@
+// 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, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { styled, IconButton, Popover } from '@mui/material';
+import CircleIcon from 'mdi-material-ui/Circle';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { ColorPicker } from '../ColorPicker';
+export function ThresholdColorPicker({ color , onColorChange , label  }) {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const isOpen = Boolean(anchorEl);
+    const openColorPicker = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const closeColorPicker = ()=>{
+        setAnchorEl(null);
+    };
+    const { thresholds: { defaultColor , palette  } ,  } = useChartsTheme();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(ColorIconButton, {
+                size: "small",
+                "aria-label": `change threshold ${label} color`,
+                isSelected: isOpen,
+                iconColor: color,
+                onClick: openColorPicker,
+                children: /*#__PURE__*/ _jsx(CircleIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(Popover, {
+                "data-testid": "threshold color picker",
+                open: isOpen,
+                anchorEl: anchorEl,
+                onClose: closeColorPicker,
+                PaperProps: {
+                    sx: {
+                        padding: (theme)=>theme.spacing(2)
+                    }
+                },
+                anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left'
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                },
+                children: /*#__PURE__*/ _jsx(ColorPicker, {
+                    color: color,
+                    onChange: onColorChange,
+                    palette: [
+                        defaultColor,
+                        ...palette
+                    ]
+                })
+            })
+        ]
+    });
+}
+const ColorIconButton = styled(IconButton, {
+    shouldForwardProp: (props)=>props !== 'isSelected' && props !== 'iconColor'
+})(({ iconColor , isSelected  })=>({
+        backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined',
+        color: iconColor
+    }));
+
+//# sourceMappingURL=ThresholdColorPicker.js.map

package/dist/ThresholdsEditor/ThresholdColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdColorPicker.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 from 'react';\nimport { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { ColorPicker } from '../ColorPicker';\nimport { ThresholdInputProps } from './ThresholdInput';\n\nexport function ThresholdColorPicker({\n  color,\n  onColorChange,\n  label,\n}: Pick<ThresholdInputProps, 'color' | 'onColorChange' | 'label'>) {\n  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = () => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size=\"small\"\n        aria-label={`change threshold ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"threshold color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        PaperProps={{ sx: { padding: (theme) => theme.spacing(2) } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} onChange={onColorChange} palette={[defaultColor, ...palette]} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["React","styled","IconButton","Popover","CircleIcon","useChartsTheme","ColorPicker","ThresholdColorPicker","color","onColorChange","label","anchorEl","setAnchorEl","useState","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","size","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","PaperProps","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","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,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,eAAe,CAAC;AAC5D,OAAOC,UAAU,MAAM,wBAAwB,CAAC;AAChD,SAASC,cAAc,QAAQ,gCAAgC,CAAC;AAChE,SAASC,WAAW,QAAQ,gBAAgB,CAAC;AAG7C,OAAO,SAASC,oBAAoB,CAAC,EACnCC,KAAK,CAAA,EACLC,aAAa,CAAA,EACbC,KAAK,CAAA,EAC0D,EAAE;IACjE,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGZ,KAAK,CAACa,QAAQ,CAA2B,IAAI,CAAC,AAAC;IAC/E,MAAMC,MAAM,GAAGC,OAAO,CAACJ,QAAQ,CAAC,AAAC;IAEjC,MAAMK,eAAe,GAAG,CAACC,KAA0C,GAAK;QACtEL,WAAW,CAACK,KAAK,CAACC,aAAa,CAAC,CAAC;IACnC,CAAC,AAAC;IAEF,MAAMC,gBAAgB,GAAG,IAAM;QAC7BP,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,MAAM,EACJQ,UAAU,EAAE,EAAEC,YAAY,CAAA,EAAEC,OAAO,CAAA,EAAE,CAAA,IACtC,GAAGjB,cAAc,EAAE,AAAC;IAErB,qBACE;;0BACE,KAACkB,eAAe;gBACdC,IAAI,EAAC,OAAO;gBACZC,YAAU,EAAE,CAAC,iBAAiB,EAAEf,KAAK,CAAC,MAAM,CAAC;gBAC7CgB,UAAU,EAAEZ,MAAM;gBAClBa,SAAS,EAAEnB,KAAK;gBAChBoB,OAAO,EAAEZ,eAAe;0BAExB,cAAA,KAACZ,UAAU,KAAG;cACE;0BAClB,KAACD,OAAO;gBACN0B,aAAW,EAAC,wBAAwB;gBACpCC,IAAI,EAAEhB,MAAM;gBACZH,QAAQ,EAAEA,QAAQ;gBAClBoB,OAAO,EAAEZ,gBAAgB;gBACzBa,UAAU,EAAE;oBAAEC,EAAE,EAAE;wBAAEC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;qBAAE;iBAAE;gBAC5DC,YAAY,EAAE;oBACZC,QAAQ,EAAE,KAAK;oBACfC,UAAU,EAAE,MAAM;iBACnB;gBACDC,eAAe,EAAE;oBACfF,QAAQ,EAAE,KAAK;oBACfC,UAAU,EAAE,OAAO;iBACpB;0BAED,cAAA,KAACjC,WAAW;oBAACE,KAAK,EAAEA,KAAK;oBAAEiC,QAAQ,EAAEhC,aAAa;oBAAEa,OAAO,EAAE;wBAACD,YAAY;2BAAKC,OAAO;qBAAC;kBAAI;cACnF;;MACT,CACH;AACJ,CAAC;AAED,MAAMC,eAAe,GAAGtB,MAAM,CAACC,UAAU,EAAE;IACzCwC,iBAAiB,EAAE,CAACC,KAAK,GAAKA,KAAK,KAAK,YAAY,IAAIA,KAAK,KAAK,WAAW;CAC9E,CAAC,CAGC,CAAC,EAAEhB,SAAS,CAAA,EAAED,UAAU,CAAA,EAAE,GAAM,CAAA;QACjCkB,eAAe,EAAElB,UAAU,IAAIC,SAAS,GAAG,CAAC,EAAEA,SAAS,CAAC,EAAE,CAAC,GAAG,WAAW;QACzEnB,KAAK,EAAEmB,SAAS;KACjB,CAAA,AAAC,CAAC,AAAC"}

package/dist/ThresholdsEditor/ThresholdInput.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+export interface ThresholdInputProps {
+    label: string;
+    color: string;
+    value: number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onColorChange: (color: string) => void;
+    onBlur: () => void;
+    onDelete: () => void;
+    inputRef?: RefObject<HTMLInputElement | null>;
+}
+export declare function ThresholdInput({ inputRef, label, color, value, onChange, onColorChange, onBlur, onDelete, }: ThresholdInputProps): JSX.Element;
+//# sourceMappingURL=ThresholdInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThresholdInput.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,eA2BrB"}

package/dist/ThresholdsEditor/ThresholdInput.js

@@ -0,0 +1,61 @@
+// 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 { useState } from 'react';
+import { Stack, FormLabel, TextField, IconButton } from '@mui/material';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import { ThresholdColorPicker } from './ThresholdColorPicker';
+export function ThresholdInput({ inputRef , label , color , value , onChange , onColorChange , onBlur , onDelete  }) {
+    const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter
+    return /*#__PURE__*/ _jsxs(Stack, {
+        flex: 1,
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(ThresholdColorPicker, {
+                label: label,
+                color: color,
+                onColorChange: onColorChange
+            }),
+            /*#__PURE__*/ _jsx(FormLabel, {
+                htmlFor: label,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                id: label,
+                inputRef: inputRef,
+                type: "number",
+                value: value === 0 ? undefined : value,
+                placeholder: "0",
+                onChange: onChange,
+                onBlur: onBlur,
+                onKeyDown: (e)=>{
+                    if (e.key === 'Enter') {
+                        onBlur();
+                        setKey(key + 1);
+                    }
+                }
+            }, key),
+            /*#__PURE__*/ _jsx(IconButton, {
+                "aria-label": `delete threshold ${label}`,
+                size: "small",
+                onClick: onDelete,
+                children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ThresholdInput.js.map

package/dist/ThresholdsEditor/ThresholdInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.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 { RefObject, useState } from 'react';\nimport { Stack, FormLabel, TextField, IconButton } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps) {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <ThresholdColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? undefined : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["useState","Stack","FormLabel","TextField","IconButton","DeleteIcon","ThresholdColorPicker","ThresholdInput","inputRef","label","color","value","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","undefined","placeholder","onKeyDown","e","aria-label","size","onClick"],"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,SAAoBA,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACxE,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAa9D,OAAO,SAASC,cAAc,CAAC,EAC7BC,QAAQ,CAAA,EACRC,KAAK,CAAA,EACLC,KAAK,CAAA,EACLC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACRC,aAAa,CAAA,EACbC,MAAM,CAAA,EACNC,QAAQ,CAAA,EACY,EAAE;IACtB,MAAM,CAACC,GAAG,EAAEC,MAAM,CAAC,GAAGjB,QAAQ,CAAC,CAAC,CAAC,AAAC,EAAC,2DAA2D;IAC9F,qBACE,MAACC,KAAK;QAACiB,IAAI,EAAE,CAAC;QAAEC,SAAS,EAAC,KAAK;QAACC,UAAU,EAAC,QAAQ;QAACC,cAAc,EAAC,eAAe;QAACC,OAAO,EAAE,CAAC;;0BAC3F,KAAChB,oBAAoB;gBAACG,KAAK,EAAEA,KAAK;gBAAEC,KAAK,EAAEA,KAAK;gBAAEG,aAAa,EAAEA,aAAa;cAAI;0BAClF,KAACX,SAAS;gBAACqB,OAAO,EAAEd,KAAK;0BAAGA,KAAK;cAAa;0BAC9C,KAACN,SAAS;gBACRqB,EAAE,EAAEf,KAAK;gBAETD,QAAQ,EAAEA,QAAQ;gBAClBiB,IAAI,EAAC,QAAQ;gBACbd,KAAK,EAAEA,KAAK,KAAK,CAAC,GAAGe,SAAS,GAAGf,KAAK;gBACtCgB,WAAW,EAAC,GAAG;gBACff,QAAQ,EAAEA,QAAQ;gBAClBE,MAAM,EAAEA,MAAM;gBACdc,SAAS,EAAE,CAACC,CAAC,GAAK;oBAChB,IAAIA,CAAC,CAACb,GAAG,KAAK,OAAO,EAAE;wBACrBF,MAAM,EAAE,CAAC;wBACTG,MAAM,CAACD,GAAG,GAAG,CAAC,CAAC,CAAC;oBAClB,CAAC;gBACH,CAAC;eAZIA,GAAG,CAaR;0BACF,KAACZ,UAAU;gBAAC0B,YAAU,EAAE,CAAC,iBAAiB,EAAErB,KAAK,CAAC,CAAC;gBAAEsB,IAAI,EAAC,OAAO;gBAACC,OAAO,EAAEjB,QAAQ;0BACjF,cAAA,KAACV,UAAU,KAAG;cACH;;MACP,CACR;AACJ,CAAC"}

package/dist/ThresholdsEditor/ThresholdsEditor.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ThresholdOptions } from '@perses-dev/core';
+export interface ThresholdsEditorProps {
+    onChange: (thresholds: ThresholdOptions) => void;
+    thresholds?: ThresholdOptions;
+    hideDefault?: boolean;
+    disablePercentMode?: boolean;
+}
+export declare function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }: ThresholdsEditorProps): JSX.Element;
+//# sourceMappingURL=ThresholdsEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAOpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,qBAAqB,eA4KhH"}

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/TimeSeriesTooltip/focused-series.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focused-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,UAAU,EAA0C,MAAM,iBAAiB,CAAC;AAErF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,WAAW,GACjB,kBAAkB,CA4CpB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC/B,KAAK,CAAC,EAAE,eAAe,EACvB,IAAI,CAAC,EAAE,WAAW,sBA2CnB"}
+{"version":3,"file":"focused-series.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAe,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,UAAU,EAA0C,MAAM,iBAAiB,CAAC;AAErF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,iBAAiB,EACvB,WAAW,EAAE,MAAM,EAAE,EACrB,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,WAAW,GACjB,kBAAkB,CA6CpB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC/B,KAAK,CAAC,EAAE,eAAe,EACvB,IAAI,CAAC,EAAE,WAAW,sBA2CnB"}

package/dist/TimeSeriesTooltip/focused-series.js

@@ -36,9 +36,9 @@ import { TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './tooltip-model';
                     for(let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++){
                         var _datumIdx;
                         const xValue = (_datumIdx = data.xAxis[datumIdx]) !== null && _datumIdx !== void 0 ? _datumIdx : 0;
-                        var _datumIdx1;
-                        const yValue = (_datumIdx1 = currentSeries.data[datumIdx]) !== null && _datumIdx1 !== void 0 ? _datumIdx1 : 0;
-                        if (focusedX === datumIdx) {
+                        const yValue = currentSeries.data[datumIdx];
+                        // ensure null values not displayed in tooltip
+                        if (yValue !== undefined && yValue !== null && focusedX === datumIdx) {
                             if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {
                                 // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
                                 const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;

package/dist/TimeSeriesTooltip/focused-series.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions, EChartsDataFormat } from '../model';\nimport { CursorData, TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './tooltip-model';\n\nexport interface FocusedSeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  date: string;\n  markerColor: string;\n  x: number;\n  y: number;\n  formattedY: string;\n}\n\nexport type FocusedSeriesArray = FocusedSeriesInfo[];\n\n/**\n * Returns formatted series data for the points that are close to the user's cursor\n * Adjust yBuffer to increase or decrease number of series shown\n */\nexport function getNearbySeries(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  unit?: UnitOptions\n): FocusedSeriesArray {\n  const currentFocusedData: FocusedSeriesArray = [];\n  const focusedX: number | null = pointInGrid[0] ?? null;\n  const focusedY: number | null = pointInGrid[1] ?? null;\n\n  if (focusedX === null || focusedY === null) {\n    return currentFocusedData;\n  }\n\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentFocusedData.length >= TOOLTIP_MAX_ITEMS) break;\n      if (currentSeries !== undefined) {\n        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';\n        const markerColor = currentSeries.color ?? '#000';\n        if (Array.isArray(currentSeries.data)) {\n          for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {\n            const xValue = data.xAxis[datumIdx] ?? 0;\n            const yValue = currentSeries.data[datumIdx] ?? 0;\n            if (focusedX === datumIdx) {\n              if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {\n                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201\n                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;\n                const formattedDate = TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);\n                const formattedY = formatValue(yValue, unit);\n                currentFocusedData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  date: formattedDate,\n                  x: xValue,\n                  y: yValue,\n                  formattedY: formattedY,\n                  markerColor: markerColor.toString(),\n                });\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  return currentFocusedData;\n}\n\n/**\n * Uses mouse position to determine whether user is hovering over a chart canvas\n * If yes, convert from pixel values to logical cartesian coordinates and return all focused series\n */\nexport function getFocusedSeriesData(\n  mousePos: CursorData['coords'],\n  chartData: EChartsDataFormat,\n  pinnedPos: CursorData['coords'],\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n) {\n  if (chart === undefined || mousePos === null) return [];\n\n  // prevents multiple tooltips showing from adjacent charts\n  let cursorTargetMatchesChart = false;\n  if (mousePos.target !== null) {\n    const currentParent = (<HTMLElement>mousePos.target).parentElement;\n    if (currentParent !== null) {\n      const currentGrandparent = currentParent.parentElement;\n      if (currentGrandparent !== null) {\n        const chartDom = chart.getDom();\n        if (chartDom === currentGrandparent) {\n          cursorTargetMatchesChart = true;\n        }\n      }\n    }\n  }\n\n  // allows moving cursor inside tooltip\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n    cursorTargetMatchesChart = true;\n  }\n\n  if (cursorTargetMatchesChart === false) return [];\n\n  if (chart['_model'] === undefined) return [];\n  const chartModel = chart['_model'];\n  const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n\n  // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range\n  const seriesNum = chartData.timeSeries.length;\n  const yBuffer = seriesNum > TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;\n\n  const pointInPixel = [mousePos.plotCanvas.x ?? 0, mousePos.plotCanvas.y ?? 0];\n  if (chart.containPixel('grid', pointInPixel)) {\n    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);\n    if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {\n      return getNearbySeries(chartData, pointInGrid, yBuffer, unit);\n    }\n  }\n  return [];\n}\n"],"names":["formatValue","TOOLTIP_DATE_FORMAT","TOOLTIP_MAX_ITEMS","getNearbySeries","data","pointInGrid","yBuffer","unit","currentFocusedData","focusedX","focusedY","Array","isArray","xAxis","timeSeries","seriesIdx","length","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","xValueMilliSeconds","formattedDate","format","formattedY","push","seriesName","date","x","y","getFocusedSeriesData","mousePos","chartData","pinnedPos","chart","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yAxisInterval","getComponent","axis","scale","_interval","seriesNum","pointInPixel","plotCanvas","containPixel","convertFromPixel"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions, EChartsDataFormat } from '../model';\nimport { CursorData, TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './tooltip-model';\n\nexport interface FocusedSeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  date: string;\n  markerColor: string;\n  x: number;\n  y: number;\n  formattedY: string;\n}\n\nexport type FocusedSeriesArray = FocusedSeriesInfo[];\n\n/**\n * Returns formatted series data for the points that are close to the user's cursor\n * Adjust yBuffer to increase or decrease number of series shown\n */\nexport function getNearbySeries(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  unit?: UnitOptions\n): FocusedSeriesArray {\n  const currentFocusedData: FocusedSeriesArray = [];\n  const focusedX: number | null = pointInGrid[0] ?? null;\n  const focusedY: number | null = pointInGrid[1] ?? null;\n\n  if (focusedX === null || focusedY === null) {\n    return currentFocusedData;\n  }\n\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentFocusedData.length >= TOOLTIP_MAX_ITEMS) break;\n      if (currentSeries !== undefined) {\n        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';\n        const markerColor = currentSeries.color ?? '#000';\n        if (Array.isArray(currentSeries.data)) {\n          for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {\n            const xValue = data.xAxis[datumIdx] ?? 0;\n            const yValue = currentSeries.data[datumIdx];\n            // ensure null values not displayed in tooltip\n            if (yValue !== undefined && yValue !== null && focusedX === datumIdx) {\n              if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {\n                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201\n                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;\n                const formattedDate = TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);\n                const formattedY = formatValue(yValue, unit);\n                currentFocusedData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  date: formattedDate,\n                  x: xValue,\n                  y: yValue,\n                  formattedY: formattedY,\n                  markerColor: markerColor.toString(),\n                });\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  return currentFocusedData;\n}\n\n/**\n * Uses mouse position to determine whether user is hovering over a chart canvas\n * If yes, convert from pixel values to logical cartesian coordinates and return all focused series\n */\nexport function getFocusedSeriesData(\n  mousePos: CursorData['coords'],\n  chartData: EChartsDataFormat,\n  pinnedPos: CursorData['coords'],\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n) {\n  if (chart === undefined || mousePos === null) return [];\n\n  // prevents multiple tooltips showing from adjacent charts\n  let cursorTargetMatchesChart = false;\n  if (mousePos.target !== null) {\n    const currentParent = (<HTMLElement>mousePos.target).parentElement;\n    if (currentParent !== null) {\n      const currentGrandparent = currentParent.parentElement;\n      if (currentGrandparent !== null) {\n        const chartDom = chart.getDom();\n        if (chartDom === currentGrandparent) {\n          cursorTargetMatchesChart = true;\n        }\n      }\n    }\n  }\n\n  // allows moving cursor inside tooltip\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n    cursorTargetMatchesChart = true;\n  }\n\n  if (cursorTargetMatchesChart === false) return [];\n\n  if (chart['_model'] === undefined) return [];\n  const chartModel = chart['_model'];\n  const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n\n  // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range\n  const seriesNum = chartData.timeSeries.length;\n  const yBuffer = seriesNum > TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;\n\n  const pointInPixel = [mousePos.plotCanvas.x ?? 0, mousePos.plotCanvas.y ?? 0];\n  if (chart.containPixel('grid', pointInPixel)) {\n    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);\n    if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {\n      return getNearbySeries(chartData, pointInGrid, yBuffer, unit);\n    }\n  }\n  return [];\n}\n"],"names":["formatValue","TOOLTIP_DATE_FORMAT","TOOLTIP_MAX_ITEMS","getNearbySeries","data","pointInGrid","yBuffer","unit","currentFocusedData","focusedX","focusedY","Array","isArray","xAxis","timeSeries","seriesIdx","length","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","xValueMilliSeconds","formattedDate","format","formattedY","push","seriesName","date","x","y","getFocusedSeriesData","mousePos","chartData","pinnedPos","chart","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yAxisInterval","getComponent","axis","scale","_interval","seriesNum","pointInPixel","plotCanvas","containPixel","convertFromPixel"],"mappings":"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"}