@perses-dev/components 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/ThresholdsEditor/ThresholdColorPicker.js.map

@@ -1 +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"}
+{"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/ChartsProvider';\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,OAAOA,WAAW,QAAQ;AAC1B,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,iBAAiB;AAG7C,OAAO,SAASC,qBAAqB,EACnCC,KAAK,EACLC,aAAa,EACbC,KAAK,EAC0D;IAC/D,MAAM,CAACC,UAAUC,YAAY,GAAGZ,MAAMa,QAAQ,CAA2B;IACzE,MAAMC,SAASC,QAAQJ;IAEvB,MAAMK,kBAAkB,CAACC;QACvBL,YAAYK,MAAMC,aAAa;IACjC;IAEA,MAAMC,mBAAmB;QACvBP,YAAY;IACd;IAEA,MAAM,EACJQ,YAAY,EAAEC,YAAY,EAAEC,OAAO,EAAE,EACtC,GAAGjB;IAEJ,qBACE;;0BACE,KAACkB;gBACCC,MAAK;gBACLC,cAAY,CAAC,iBAAiB,EAAEf,MAAM,MAAM,CAAC;gBAC7CgB,YAAYZ;gBACZa,WAAWnB;gBACXoB,SAASZ;0BAET,cAAA,KAACZ;;0BAEH,KAACD;gBACC0B,eAAY;gBACZC,MAAMhB;gBACNH,UAAUA;gBACVoB,SAASZ;gBACTa,YAAY;oBAAEC,IAAI;wBAAEC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;oBAAG;gBAAE;gBAC3DC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAACjC;oBAAYE,OAAOA;oBAAOiC,UAAUhC;oBAAea,SAAS;wBAACD;2BAAiBC;qBAAQ;;;;;AAI/F;AAEA,MAAMC,kBAAkBtB,OAAOC,YAAY;IACzCwC,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEhB,SAAS,EAAED,UAAU,EAAE,GAAM,CAAA;QACjCkB,iBAAiBlB,cAAcC,YAAY,CAAC,EAAEA,UAAU,EAAE,CAAC,GAAG;QAC9DnB,OAAOmB;IACT,CAAA"}

package/dist/ThresholdsEditor/ThresholdInput.d.ts

@@ -11,5 +11,5 @@ export interface ThresholdInputProps {
     inputRef?: RefObject<HTMLInputElement | null>;
     mode?: ThresholdOptions['mode'];
 }
-export declare function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete, }: ThresholdInputProps): JSX.Element;
+export declare function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete, }: ThresholdInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThresholdInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThresholdInput.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,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;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,eA8BrB"}
+{"version":3,"file":"ThresholdInput.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,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;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,2CA8BrB"}

package/dist/ThresholdsEditor/ThresholdInput.js

@@ -15,7 +15,7 @@ import { useState } from 'react';
 import { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import { ThresholdColorPicker } from './ThresholdColorPicker';
-export function ThresholdInput({ inputRef , label , color , value , mode , onChange , onColorChange , onBlur , onDelete  }) {
+export function ThresholdInput({ inputRef, label, color, value, mode, 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,
@@ -48,7 +48,7 @@ export function ThresholdInput({ inputRef , label , color , value , mode , onCha
                     }
                 },
                 InputProps: {
-                    endAdornment: mode === 'Percent' ? /*#__PURE__*/ _jsx(Box, {
+                    endAdornment: mode === 'percent' ? /*#__PURE__*/ _jsx(Box, {
                         paddingX: 1,
                         children: "%"
                     }) : undefined

package/dist/ThresholdsEditor/ThresholdInput.js.map

@@ -1 +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, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdOptions } from '@perses-dev/core';\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  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\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 ? '' : 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        InputProps={{\n          endAdornment: mode === 'Percent' ? <Box paddingX={1}>%</Box> : undefined,\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","Box","DeleteIcon","ThresholdColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","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,EAAEC,GAAG,QAAQ,eAAe,CAAC;AAC7E,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AAEvD,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAc9D,OAAO,SAASC,cAAc,CAAC,EAC7BC,QAAQ,CAAA,EACRC,KAAK,CAAA,EACLC,KAAK,CAAA,EACLC,KAAK,CAAA,EACLC,IAAI,CAAA,EACJC,QAAQ,CAAA,EACRC,aAAa,CAAA,EACbC,MAAM,CAAA,EACNC,QAAQ,CAAA,EACY,EAAE;IACtB,MAAM,CAACC,GAAG,EAAEC,MAAM,CAAC,GAAGnB,QAAQ,CAAC,CAAC,CAAC,AAAC,EAAC,2DAA2D;IAC9F,qBACE,MAACC,KAAK;QAACmB,IAAI,EAAE,CAAC;QAAEC,SAAS,EAAC,KAAK;QAACC,UAAU,EAAC,QAAQ;QAACC,cAAc,EAAC,eAAe;QAACC,OAAO,EAAE,CAAC;;0BAC3F,KAACjB,oBAAoB;gBAACG,KAAK,EAAEA,KAAK;gBAAEC,KAAK,EAAEA,KAAK;gBAAEI,aAAa,EAAEA,aAAa;cAAI;0BAClF,KAACb,SAAS;gBAACuB,OAAO,EAAEf,KAAK;0BAAGA,KAAK;cAAa;0BAC9C,KAACP,SAAS;gBACRuB,EAAE,EAAEhB,KAAK;gBAETD,QAAQ,EAAEA,QAAQ;gBAClBkB,IAAI,EAAC,QAAQ;gBACbf,KAAK,EAAEA,KAAK,KAAK,CAAC,GAAG,EAAE,GAAGA,KAAK;gBAC/BgB,WAAW,EAAC,GAAG;gBACfd,QAAQ,EAAEA,QAAQ;gBAClBE,MAAM,EAAEA,MAAM;gBACda,SAAS,EAAE,CAACC,CAAC,GAAK;oBAChB,IAAIA,CAAC,CAACZ,GAAG,KAAK,OAAO,EAAE;wBACrBF,MAAM,EAAE,CAAC;wBACTG,MAAM,CAACD,GAAG,GAAG,CAAC,CAAC,CAAC;oBAClB,CAAC;gBACH,CAAC;gBACDa,UAAU,EAAE;oBACVC,YAAY,EAAEnB,IAAI,KAAK,SAAS,iBAAG,KAACR,GAAG;wBAAC4B,QAAQ,EAAE,CAAC;kCAAE,GAAC;sBAAM,GAAGC,SAAS;iBACzE;eAfIhB,GAAG,CAgBR;0BACF,KAACd,UAAU;gBAAC+B,YAAU,EAAE,CAAC,iBAAiB,EAAEzB,KAAK,CAAC,CAAC;gBAAE0B,IAAI,EAAC,OAAO;gBAACC,OAAO,EAAEpB,QAAQ;0BACjF,cAAA,KAACX,UAAU,KAAG;cACH;;MACP,CACR;AACJ,CAAC"}
+{"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, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdOptions } from '@perses-dev/core';\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  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\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 ? '' : 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        InputProps={{\n          endAdornment: mode === 'percent' ? <Box paddingX={1}>%</Box> : undefined,\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","Box","DeleteIcon","ThresholdColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","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,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AAEvD,SAASC,oBAAoB,QAAQ,yBAAyB;AAc9D,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACY;IACpB,MAAM,CAACC,KAAKC,OAAO,GAAGnB,SAAS,IAAI,2DAA2D;IAC9F,qBACE,MAACC;QAAMmB,MAAM;QAAGC,WAAU;QAAMC,YAAW;QAASC,gBAAe;QAAgBC,SAAS;;0BAC1F,KAACjB;gBAAqBG,OAAOA;gBAAOC,OAAOA;gBAAOI,eAAeA;;0BACjE,KAACb;gBAAUuB,SAASf;0BAAQA;;0BAC5B,KAACP;gBACCuB,IAAIhB;gBAEJD,UAAUA;gBACVkB,MAAK;gBACLf,OAAOA,UAAU,IAAI,KAAKA;gBAC1BgB,aAAY;gBACZd,UAAUA;gBACVE,QAAQA;gBACRa,WAAW,CAACC;oBACV,IAAIA,EAAEZ,GAAG,KAAK,SAAS;wBACrBF;wBACAG,OAAOD,MAAM;oBACf;gBACF;gBACAa,YAAY;oBACVC,cAAcnB,SAAS,0BAAY,KAACR;wBAAI4B,UAAU;kCAAG;yBAAUC;gBACjE;eAfKhB;0BAiBP,KAACd;gBAAW+B,cAAY,CAAC,iBAAiB,EAAEzB,MAAM,CAAC;gBAAE0B,MAAK;gBAAQC,SAASpB;0BACzE,cAAA,KAACX;;;;AAIT"}

package/dist/ThresholdsEditor/ThresholdsEditor.d.ts

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

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

@@ -1 +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,eA+LhH"}
+{"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,2CAgMhH"}

package/dist/ThresholdsEditor/ThresholdsEditor.js

@@ -16,16 +16,17 @@ 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 { useChartsTheme } from '../context/ChartsThemeProvider';
+import { useChartsTheme } from '../context/ChartsProvider';
 import { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';
 import { InfoTooltip } from '../InfoTooltip';
 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;
+export function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }) {
+    const chartsTheme = useChartsTheme();
+    const { thresholds: { defaultColor, palette } } = chartsTheme;
+    var _thresholds_defaultColor;
+    const defaultThresholdColor = (_thresholds_defaultColor = thresholds === null || thresholds === void 0 ? void 0 : thresholds.defaultColor) !== null && _thresholds_defaultColor !== void 0 ? _thresholds_defaultColor : 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);
@@ -36,9 +37,9 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
     const recentlyAddedInputRef = useRef(null);
     const focusRef = useRef(false);
     useEffect(()=>{
-        var ref;
+        var _recentlyAddedInputRef_current;
         if (!recentlyAddedInputRef.current || !focusRef.current) return;
-        (ref = recentlyAddedInputRef.current) === null || ref === void 0 ? void 0 : ref.focus();
+        (_recentlyAddedInputRef_current = recentlyAddedInputRef.current) === null || _recentlyAddedInputRef_current === void 0 ? void 0 : _recentlyAddedInputRef_current.focus();
         focusRef.current = false;
     }, [
         steps === null || steps === void 0 ? void 0 : steps.length
@@ -66,11 +67,11 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
     const handleDefaultColorChange = (color)=>{
         if (thresholds !== undefined) {
             onChange(produce(thresholds, (draft)=>{
-                draft.default_color = color;
+                draft.defaultColor = color;
             }));
         } else {
             onChange({
-                default_color: color
+                defaultColor: color
             });
         }
     };
@@ -121,12 +122,12 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
                 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;
+                    var _palette_steps_length;
+                    const color = (_palette_steps_length = palette[steps.length]) !== null && _palette_steps_length !== void 0 ? _palette_steps_length : getRandomColor(); // we will assign color from the palette first, then generate random color
+                    var _lastStep_value;
                     steps.push({
                         color,
-                        value: ((ref = lastStep === null || lastStep === void 0 ? void 0 : lastStep.value) !== null && ref !== void 0 ? ref : 0) + DEFAULT_STEP
+                        value: ((_lastStep_value = lastStep === null || lastStep === void 0 ? void 0 : lastStep.value) !== null && _lastStep_value !== void 0 ? _lastStep_value : 0) + DEFAULT_STEP
                     }); // set new threshold value to last step value + 10
                 } else if (steps) {
                     steps.push({
@@ -137,7 +138,7 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
         }
     };
     const handleModeChange = (event, value)=>{
-        const mode = value === 'Percent' ? 'Percent' : undefined;
+        const mode = value === 'percent' ? 'percent' : undefined;
         if (thresholds !== undefined) {
             onChange(produce(thresholds, (draft)=>{
                 draft.mode = mode;
@@ -148,7 +149,7 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
             });
         }
     };
-    var ref1, _color, ref2;
+    var _thresholds_mode;
     return /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
         title: "Thresholds",
         icon: /*#__PURE__*/ _jsx(InfoTooltip, {
@@ -167,7 +168,7 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
                 control: /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
                     exclusive: true,
                     disabled: disablePercentMode,
-                    value: (ref1 = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && ref1 !== void 0 ? ref1 : 'Absolute',
+                    value: (_thresholds_mode = thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode) !== null && _thresholds_mode !== void 0 ? _thresholds_mode : 'absolute',
                     onChange: handleModeChange,
                     sx: {
                         height: '36px',
@@ -176,7 +177,7 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
                     children: [
                         /*#__PURE__*/ _jsx(ToggleButton, {
                             "aria-label": "absolute",
-                            value: "Absolute",
+                            value: "absolute",
                             sx: {
                                 fontWeight: 500
                             },
@@ -184,7 +185,7 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
                         }),
                         /*#__PURE__*/ _jsx(ToggleButton, {
                             "aria-label": "percent",
-                            value: "Percent",
+                            value: "percent",
                             sx: {
                                 fontWeight: 500
                             },
@@ -193,11 +194,12 @@ export function ThresholdsEditor({ thresholds , onChange , hideDefault , disable
                     ]
                 })
             }),
-            steps && steps.map((step, i)=>{
-                /*#__PURE__*/ return _jsx(ThresholdInput, {
+            steps && steps.map((step, i)=>/*#__PURE__*/ {
+                var _step_color, _ref;
+                return _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,
+                    color: (_ref = (_step_color = step.color) !== null && _step_color !== void 0 ? _step_color : palette[i]) !== null && _ref !== void 0 ? _ref : defaultThresholdColor,
                     value: step.value,
                     mode: thresholds === null || thresholds === void 0 ? void 0 : thresholds.mode,
                     onColorChange: (color)=>handleThresholdColorChange(color, i),

package/dist/ThresholdsEditor/ThresholdsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport produce from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }: ThresholdsEditorProps) {\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n  const defaultThresholdColor = thresholds?.default_color ?? defaultColor;\n\n  const [steps, setSteps] = useState(thresholds?.steps);\n  useEffect(() => {\n    setSteps(thresholds?.steps);\n  }, [thresholds?.steps]);\n\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {\n    setSteps(\n      produce(steps, (draft) => {\n        const step = draft?.[i];\n        if (step) {\n          step.value = Number(e.target.value);\n        }\n      })\n    );\n  };\n\n  const handleThresholdColorChange = (color: string, i: number) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.default_color = color;\n        })\n      );\n    } else {\n      onChange({\n        default_color: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = () => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          })\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        })\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        })\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'Percent' ? 'Percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        })\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description={'Add threshold'}>\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'Absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"Absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"Percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .reverse()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <ThresholdColorPicker\n            label=\"default\"\n            color={defaultThresholdColor}\n            onColorChange={handleDefaultColorChange}\n          />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = () => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["React","useEffect","useRef","useState","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","ThresholdColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","defaultColor","palette","defaultThresholdColor","default_color","steps","setSteps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","draft","step","value","Number","target","handleThresholdColorChange","color","undefined","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport produce from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }: ThresholdsEditorProps) {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const [steps, setSteps] = useState(thresholds?.steps);\n  useEffect(() => {\n    setSteps(thresholds?.steps);\n  }, [thresholds?.steps]);\n\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number) => {\n    setSteps(\n      produce(steps, (draft) => {\n        const step = draft?.[i];\n        if (step) {\n          step.value = Number(e.target.value);\n        }\n      })\n    );\n  };\n\n  const handleThresholdColorChange = (color: string, i: number) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string) => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        })\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = () => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          })\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        })\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        })\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        })\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description={'Add threshold'}>\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .reverse()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <ThresholdColorPicker\n            label=\"default\"\n            color={defaultThresholdColor}\n            onColorChange={handleDefaultColorChange}\n          />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = () => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["React","useEffect","useRef","useState","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","ThresholdColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","setSteps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","draft","step","value","Number","target","handleThresholdColorChange","color","undefined","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}

package/dist/ThresholdsEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ThresholdsEditor';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,oBAAoB,CAAC"}
+{"version":3,"sources":["../../src/ThresholdsEditor/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ThresholdsEditor';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB"}

package/dist/TimeChart/TimeChart.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"TimeChart.d.ts","sourceRoot":"","sources":["../../src/TimeChart/TimeChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAK/F,OAAO,EAAsB,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAEL,aAAa,EACb,sBAAsB,EAGvB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuC,aAAa,EAA0B,MAAM,sBAAsB,CAAC;AAkBlH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GA+TpB,CAAC"}
+{"version":3,"file":"TimeChart.d.ts","sourceRoot":"","sources":["../../src/TimeChart/TimeChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAA6D,MAAM,OAAO,CAAC;AAM1G,OAAO,EAAsB,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAA0B,aAAa,EAAE,sBAAsB,EAA4B,MAAM,UAAU,CAAC;AAEnH,OAAO,EAQL,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuC,aAAa,EAA0B,MAAM,sBAAsB,CAAC;AAkBlH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GA6WpB,CAAC"}