@perses-dev/components 0.0.0-snapshot-datasource-browser-test-28cbb71 → 0.0.0-snapshot-datasource-create-transform-e9f8493

package/dist/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface ColorPickerProps {
+    color: string;
+    onChange?: (color: string) => void;
+    /**
+     * Preset color palette
+     */
+    palette?: string[];
+}
+export declare const ColorPicker: ({ color, onChange, palette }: ColorPickerProps) => JSX.Element;
+export {};
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/ColorPicker/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":";AAkBA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,iCAAkC,gBAAgB,gBA4CzE,CAAC"}

package/dist/ColorPicker/ColorPicker.js

@@ -0,0 +1,78 @@
+// 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 { IconButton, Stack, TextField } from '@mui/material';
+import React, { useState } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import CircleIcon from 'mdi-material-ui/Circle';
+export const ColorPicker = ({ color , onChange , palette  })=>{
+    // value is the visible value for the controlled text input
+    const [value, setValue] = useState(color);
+    const handleColorChange = (color)=>{
+        setValue(color);
+        onChange && onChange(color);
+    };
+    // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved
+    const handleInputChange = (e)=>{
+        const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);
+        setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format
+        // only set color if input value is a valid hex color
+        if (isValidHex(e.target.value)) {
+            onChange && onChange(e.target.value);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(HexColorPicker, {
+                color: color,
+                onChange: handleColorChange
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-evenly",
+                width: '200px',
+                children: palette && palette.map((color, i)=>/*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": `change color to ${color}`,
+                        sx: {
+                            color
+                        },
+                        onClick: ()=>handleColorChange(color),
+                        children: /*#__PURE__*/ _jsx(CircleIcon, {})
+                    }, i))
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                inputProps: {
+                    'aria-label': 'enter hex color'
+                },
+                fullWidth: true,
+                value: value,
+                onChange: handleInputChange
+            })
+        ]
+    });
+};
+const isValidHex = (value, alpha)=>{
+    const matcher = /^#?([0-9A-F]{3,8})$/i;
+    const match = matcher.exec(value);
+    const length = match && match[1] ? match[1].length : 0;
+    return length === 3 || // '#rgb' format
+    length === 6 || // '#rrggbb' format
+    !!alpha && length === 4 || // '#rgba' format
+    !!alpha && length === 8 // '#rrggbbaa' format
+    ;
+};
+
+//# sourceMappingURL=ColorPicker.js.map

package/dist/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ColorPicker/ColorPicker.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 { IconButton, Stack, TextField } from '@mui/material';\nimport React, { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\nimport CircleIcon from 'mdi-material-ui/Circle';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange?: (color: string) => void;\n  /**\n   * Preset color palette\n   */\n  palette?: string[];\n}\n\nexport const ColorPicker = ({ color, onChange, palette }: ColorPickerProps) => {\n  // value is the visible value for the controlled text input\n  const [value, setValue] = useState(color);\n\n  const handleColorChange = (color: string) => {\n    setValue(color);\n    onChange && onChange(color);\n  };\n\n  // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);\n    setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format\n    // only set color if input value is a valid hex color\n    if (isValidHex(e.target.value)) {\n      onChange && onChange(e.target.value);\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <HexColorPicker color={color} onChange={handleColorChange} />\n      <Stack direction=\"row\" flexWrap=\"wrap\" justifyContent=\"space-evenly\" width={'200px'}>\n        {palette &&\n          palette.map((color, i) => (\n            <IconButton\n              key={i}\n              size=\"small\"\n              aria-label={`change color to ${color}`}\n              sx={{ color }}\n              onClick={() => handleColorChange(color)}\n            >\n              <CircleIcon />\n            </IconButton>\n          ))}\n      </Stack>\n      <TextField\n        inputProps={{ 'aria-label': 'enter hex color' }}\n        fullWidth\n        value={value}\n        onChange={handleInputChange}\n      />\n    </Stack>\n  );\n};\n\nconst isValidHex = (value: string, alpha?: boolean): boolean => {\n  const matcher = /^#?([0-9A-F]{3,8})$/i;\n  const match = matcher.exec(value);\n  const length = match && match[1] ? match[1].length : 0;\n  return (\n    length === 3 || // '#rgb' format\n    length === 6 || // '#rrggbb' format\n    (!!alpha && length === 4) || // '#rgba' format\n    (!!alpha && length === 8) // '#rrggbbaa' format\n  );\n};\n"],"names":["IconButton","Stack","TextField","React","useState","HexColorPicker","CircleIcon","ColorPicker","color","onChange","palette","value","setValue","handleColorChange","handleInputChange","e","inputValue","target","replace","substring","isValidHex","spacing","direction","flexWrap","justifyContent","width","map","i","size","aria-label","sx","onClick","inputProps","fullWidth","alpha","matcher","match","exec","length"],"mappings":"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"}

package/dist/ColorPicker/index.d.ts

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

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

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

package/dist/ColorPicker/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 './ColorPicker';
+
+//# sourceMappingURL=index.js.map

package/dist/ColorPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ColorPicker/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 './ColorPicker';\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,eAAe,CAAC"}

package/dist/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps, DialogActions, DialogContentProps as MuiDialogContentProps, DialogProps, DialogTitleProps } from '@mui/material';
+import { ButtonProps, DialogActions, DialogContentProps as MuiDialogContentProps, DialogProps, DialogTitleProps, Theme } from '@mui/material';
 export interface DialogHeaderProps extends DialogTitleProps {
     /**
      * Callback fired when close button is clicked. If undefined, close button will not appear in header.
@@ -16,6 +16,7 @@ export interface DialogContentProps extends MuiDialogContentProps {
 export declare const Dialog: {
     ({ children, ...props }: DialogProps): JSX.Element;
     Header: ({ children, onClose, ...props }: DialogHeaderProps) => JSX.Element;
+    Form: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
     Content: ({ children, width, sx, ...props }: DialogContentProps) => JSX.Element;
     PrimaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;
     SecondaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGjB,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,oBAAY,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyCD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAvCT,iBAAiB;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CAcyC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGhB,KAAK,EACN,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,oBAAY,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqDD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAnDT,iBAAiB;;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CA0ByC,CAAC"}

package/dist/Dialog/Dialog.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material';
+import { Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogTitle, IconButton, styled } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
 import { combineSx } from '../utils';
 const Header = ({ children , onClose , ...props })=>{
@@ -51,6 +51,16 @@ const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ _jsx(Button, {
         ...props,
         children: children
     });
+/*
+ * Material-ui has a prop "scroll=paper" that is specifically for dialog header and actions to be sticky and body to scroll,
+ * but that doesn't work when dialog content is wrapped in form.
+ * https://github.com/mui-org/material-ui/issues/13253
+ * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog
+ */ const Form = styled('form')({
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column'
+});
 /**
  * Render the CSS of the dialog's close button, according to the given material theme.
  * @param theme material theme
@@ -66,6 +76,7 @@ export const Dialog = ({ children , ...props })=>/*#__PURE__*/ _jsx(MuiDialog, {
         children: children
     });
 Dialog.Header = Header;
+Dialog.Form = Form;
 Dialog.Content = Content;
 Dialog.PrimaryButton = PrimaryButton;
 Dialog.SecondaryButton = SecondaryButton;

package/dist/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/Dialog.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 {\n  Button,\n  ButtonProps,\n  Dialog as MuiDialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps as MuiDialogContentProps,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport interface DialogContentProps extends MuiDialogContentProps {\n  /**\n   * @default 500\n   */\n  width?: number;\n}\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n  return (\n    <>\n      <DialogTitle {...props}>{children}</DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, width = 500, sx, ...props }: DialogContentProps) => (\n  <DialogContent dividers {...props} sx={combineSx({ width: `${width}px` }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","theme","position","top","spacing","right","Actions"],"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,SACEC,MAAM,EAENC,MAAM,IAAIC,SAAS,EACnBC,aAAa,EACbC,aAAa,EAGbC,WAAW,EAEXC,UAAU,QAEL,eAAe,CAAC;AACvB,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,SAAS,QAAQ,UAAU,CAAC;AAkBrC,MAAMC,MAAM,GAAG,CAAC,EAAEC,QAAQ,CAAA,EAAEC,OAAO,CAAA,EAAE,GAAGC,KAAK,EAAqB,GAAK;IACrE,qBACE;;0BACE,KAACP,WAAW;gBAAE,GAAGO,KAAK;0BAAGF,QAAQ;cAAe;YAC/CC,OAAO,kBACN,KAACL,UAAU;gBAACO,YAAU,EAAC,OAAO;gBAACC,OAAO,EAAEH,OAAO;gBAAEI,EAAE,EAAEC,0BAA0B;0BAC7E,cAAA,KAACT,SAAS,KAAG;cACF,AACd;;MACA,CACH;AACJ,CAAC,AAAC;AAEF,MAAMU,OAAO,GAAG,CAAC,EAAEP,QAAQ,CAAA,EAAEQ,KAAK,EAAG,GAAG,CAAA,EAAEH,EAAE,CAAA,EAAE,GAAGH,KAAK,EAAsB,iBAC1E,KAACR,aAAa;QAACe,QAAQ;QAAE,GAAGP,KAAK;QAAEG,EAAE,EAAEP,SAAS,CAAC;YAAEU,KAAK,EAAE,CAAC,EAAEA,KAAK,CAAC,EAAE,CAAC;SAAE,EAAEH,EAAE,CAAC;kBAC1EL,QAAQ;MACK,AACjB,AAAC;AAEF,MAAMU,aAAa,GAAG,CAAC,EAAEV,QAAQ,CAAA,EAAE,GAAGE,KAAK,EAAqB,iBAC9D,KAACZ,MAAM;QAACqB,OAAO,EAAC,WAAW;QAACC,IAAI,EAAC,QAAQ;QAAE,GAAGV,KAAK;kBAChDF,QAAQ;MACF,AACV,AAAC;AAEF,MAAMa,eAAe,GAAG,CAAC,EAAEb,QAAQ,CAAA,EAAE,GAAGE,KAAK,EAAqB,iBAChE,KAACZ,MAAM;QAACqB,OAAO,EAAC,UAAU;QAACG,KAAK,EAAC,WAAW;QAAE,GAAGZ,KAAK;kBACnDF,QAAQ;MACF,AACV,AAAC;AAEF;;;CAGC,GACD,MAAMM,0BAA0B,GAAG,CAACS,KAAY,GAAK;IACnD,OAAO;QAAEC,QAAQ,EAAE,UAAU;QAAEC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;QAAEC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;KAAE,CAAC;AACtF,CAAC,AAAC;AAEF,OAAO,MAAM3B,MAAM,GAAG,CAAC,EAAES,QAAQ,CAAA,EAAE,GAAGE,KAAK,EAAe,iBAAK,KAACV,SAAS;QAAE,GAAGU,KAAK;kBAAGF,QAAQ;MAAa,CAAC;AAE5GT,MAAM,CAACQ,MAAM,GAAGA,MAAM,CAAC;AACvBR,MAAM,CAACgB,OAAO,GAAGA,OAAO,CAAC;AACzBhB,MAAM,CAACmB,aAAa,GAAGA,aAAa,CAAC;AACrCnB,MAAM,CAACsB,eAAe,GAAGA,eAAe,CAAC;AACzCtB,MAAM,CAAC6B,OAAO,GAAG3B,aAAa,CAAC"}
+{"version":3,"sources":["../../src/Dialog/Dialog.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 {\n  Button,\n  ButtonProps,\n  Dialog as MuiDialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps as MuiDialogContentProps,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  styled,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport interface DialogContentProps extends MuiDialogContentProps {\n  /**\n   * @default 500\n   */\n  width?: number;\n}\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n  return (\n    <>\n      <DialogTitle {...props}>{children}</DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, width = 500, sx, ...props }: DialogContentProps) => (\n  <DialogContent dividers {...props} sx={combineSx({ width: `${width}px` }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/*\n * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n});\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","styled","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"mappings":"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"}

package/dist/{EChart.d.ts → EChart/EChart.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ECharts, EChartsCoreOption } from 'echarts/core';
 import { SxProps, Theme } from '@mui/material';
-import { EChartsTheme } from './model';
+import { EChartsTheme } from '../model';
 export interface MouseEventsParameters<T> {
     componentType: string;
     seriesType: string;
@@ -17,7 +17,7 @@ export interface MouseEventsParameters<T> {
 }
 declare type OnEventFunction<T> = (params: MouseEventsParameters<T>, instance?: ECharts) => void;
 declare const mouseEvents: readonly ["click", "dblclick", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout", "globalout", "contextmenu"];
-export declare type MouseEventName = typeof mouseEvents[number];
+export declare type MouseEventName = (typeof mouseEvents)[number];
 export interface DataZoomPayloadBatchItem {
     dataZoomId: string;
     start?: number;
@@ -38,7 +38,7 @@ export interface BatchEventsParameters {
 }
 declare type OnBatchEventFunction = (params: BatchEventsParameters) => void;
 declare const batchEvents: readonly ["datazoom", "downplay", "highlight"];
-export declare type BatchEventName = typeof batchEvents[number];
+export declare type BatchEventName = (typeof batchEvents)[number];
 declare type ChartEventName = 'finished';
 export declare type OnEventsType<T> = {
     [mouseEventName in MouseEventName]?: OnEventFunction<T>;

package/dist/EChart/EChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}

package/dist/EChart/EChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/EChart/EChart.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, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from '../model';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return () => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return () => {\n      window.removeEventListener('resize', updateSize);\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return () => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  useEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    updateSize();\n  }, [sx]);\n\n  return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown) {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}

package/dist/EChart/index.d.ts

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

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

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

package/dist/EChart/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 './EChart';
+
+//# sourceMappingURL=index.js.map

package/dist/EChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/EChart/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 './EChart';\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,UAAU,CAAC"}

package/dist/GaugeChart/GaugeChart.d.ts

@@ -6,7 +6,7 @@ export declare type GaugeSeries = {
     value: GaugeChartValue;
     label: string;
 };
-interface GaugeChartProps {
+export interface GaugeChartProps {
     width: number;
     height: number;
     data: GaugeSeries;
@@ -20,5 +20,4 @@ export declare function GaugeChart(props: GaugeChartProps): JSX.Element;
  * to ensure size stays within given range
  */
 export declare function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number): string;
-export {};
 //# sourceMappingURL=GaugeChart.d.ts.map

package/dist/GaugeChart/GaugeChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU1D,oBAAY,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAgJhD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAQrG"}
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU1D,oBAAY,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAgJhD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAQrG"}

package/dist/GaugeChart/GaugeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GaugeChart/GaugeChart.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 { useDeepMemo } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\ninterface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  unit: UnitOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, unit, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter: (value: number) => {\n              return formatValue(value, unit);\n            },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, unit, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n        padding: `${chartsTheme.container.padding.default}px`,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number) {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = formatValue(value, unit);\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}
+{"version":3,"sources":["../../src/GaugeChart/GaugeChart.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 { useDeepMemo } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\nexport interface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  unit: UnitOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, unit, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter: (value: number) => {\n              return formatValue(value, unit);\n            },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, unit, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n        padding: `${chartsTheme.container.padding.default}px`,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number) {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = formatValue(value, unit);\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}

package/dist/InfoTooltip/InfoTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,gBAalB,CAAC"}
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,gBAkBlB,CAAC"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -14,6 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { styled, Tooltip as MuiTooltip, tooltipClasses, Typography } from '@mui/material';
 export const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
+    // Only wrap in a div if passed a non-element. This enables the tooltip to
+    // support text with a wrapper div while avoiding breaking css on element
+    // children by unnecessarily wrapping them.
+    const formattedChildren = /*#__PURE__*/ React.isValidElement(children) ? children : /*#__PURE__*/ _jsx("div", {
+        children: children
+    });
     return /*#__PURE__*/ _jsx(StyledTooltip, {
         arrow: true,
         id: id,
@@ -24,9 +30,7 @@ export const InfoTooltip = ({ id , title , description , placement , children ,
         }),
         enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
         enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
-        children: /*#__PURE__*/ _jsx("div", {
-            children: children
-        })
+        children: formattedChildren
     });
 };
 const TooltipContent = ({ title , description  })=>{

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps) => {\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      <div>{children}</div>\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","StyledTooltip","arrow","TooltipContent","div","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"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,SACEC,MAAM,EAENC,OAAO,IAAIC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,eAAe,CAAC;AAcvB,OAAO,MAAMC,WAAW,GAAG,CAAC,EAC1BC,EAAE,CAAA,EACFC,KAAK,CAAA,EACLC,WAAW,CAAA,EACXC,SAAS,CAAA,EACTC,QAAQ,CAAA,EACRC,UAAU,CAAA,EACVC,cAAc,CAAA,EACG,GAAK;IACtB,qBACE,KAACC,aAAa;QACZC,KAAK;QACLR,EAAE,EAAEA,EAAE;QACNG,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,KAAK;QAC7BF,KAAK,gBAAE,KAACQ,cAAc;YAACR,KAAK,EAAEA,KAAK;YAAEC,WAAW,EAAEA,WAAW;UAAI;QACjEG,UAAU,EAAEA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,GAAG;QAC7BC,cAAc,EAAEA,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,GAAG;kBAErC,cAAA,KAACI,KAAG;sBAAEN,QAAQ;UAAO;MACP,CAChB;AACJ,CAAC,CAAC;AAEF,MAAMK,cAAc,GAAG,CAAC,EAAER,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAmD,GAAK;IAClG,qBACE;;YACGD,KAAK,kBACJ,KAACH,UAAU;gBACTa,OAAO,EAAC,OAAO;gBACfC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,UAAU,EAAEL,KAAK,CAACM,UAAU,CAACC,gBAAgB;qBAC9C,CAAA,AAAC;0BAEDnB,KAAK;cACK,AACd;0BACD,KAACH,UAAU;gBACTa,OAAO,EAAC,SAAS;gBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;qBAClC,CAAA,AAAC;0BAEDf,WAAW;cACD;;MACZ,CACH;AACJ,CAAC,AAAC;AAEF,MAAMK,aAAa,GAAGb,MAAM,CAAC,CAAC,EAAE2B,SAAS,CAAA,EAAE,GAAGC,KAAK,EAAmB,iBACpE,KAAC1B,UAAU;QAAE,GAAG0B,KAAK;QAAEC,OAAO,EAAE;YAAEC,MAAM,EAAEH,SAAS;SAAE;MAAI,AAC1D,CAAC,CAAC,CAAC,EAAER,KAAK,CAAA,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEhB,cAAc,CAAC4B,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCC,eAAe,EAAEb,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;YACjDX,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCW,QAAQ,EAAE,OAAO;YACjBC,OAAO,EAAEhB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC;YACzBC,SAAS,EAAElB,KAAK,CAACmB,OAAO,CAAC,CAAC,CAAC;SAC5B;QACD,CAAC,CAAC,GAAG,EAAEnC,cAAc,CAACW,KAAK,CAAC,CAAC,CAAC,EAAE;YAC9BM,KAAK,EAAED,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;SACxC;KACF,CAAA,AAAC,CAAC,AAAC"}
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps) => {\n  // Only wrap in a div if passed a non-element. This enables the tooltip to\n  // support text with a wrapper div while avoiding breaking css on element\n  // children by unnecessarily wrapping them.\n  const formattedChildren = React.isValidElement(children) ? children : <div>{children}</div>;\n\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      {formattedChildren}\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","formattedChildren","isValidElement","div","StyledTooltip","arrow","TooltipContent","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"mappings":"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"}

package/dist/Legend/Legend.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 import { LegendOptions, LegendItem } from '../model';
-interface LegendProps {
+export interface LegendProps {
     width: number;
     height: number;
     data: LegendItem[];
     options: LegendOptions;
 }
 export declare function Legend({ width, height, options, data }: LegendProps): JSX.Element;
-export {};
 //# sourceMappingURL=Legend.d.ts.map

package/dist/Legend/Legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAIrD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAW,eA+BnE"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAW,eA+BnE"}

package/dist/Legend/Legend.js

@@ -10,7 +10,7 @@
 // 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 { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
@@ -31,20 +31,17 @@ export function Legend({ width , height , options , data  }) {
             })
         });
     }
-    return /*#__PURE__*/ _jsxs(Box, {
+    return /*#__PURE__*/ _jsx(Box, {
         sx: {
             width: width,
             height: height,
             position: 'absolute',
             bottom: 0
         },
-        children: [
-            /*#__PURE__*/ _jsx(CompactLegend, {
-                items: data,
-                height: height
-            }),
-            ";"
-        ]
+        children: /*#__PURE__*/ _jsx(CompactLegend, {
+            items: data,
+            height: height
+        })
     });
 }
 

package/dist/Legend/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { LegendOptions, LegendItem } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\ninterface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n}\n\nexport function Legend({ width, height, options, data }: LegendProps) {\n  if (options.position === 'Right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: '100%',\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          overflowX: 'hidden',\n          overflowY: 'scroll',\n        }}\n      >\n        <ListLegend items={data} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\n      }}\n    >\n      <CompactLegend items={data} height={height} />;\n    </Box>\n  );\n}\n"],"names":["Box","ListLegend","CompactLegend","Legend","width","height","options","data","position","sx","top","right","overflowX","overflowY","items","bottom"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAC1C,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAShD,OAAO,SAASC,MAAM,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAe,EAAE;IACpE,IAAID,OAAO,CAACE,QAAQ,KAAK,OAAO,EAAE;QAChC,qBACE,KAACR,GAAG;YACFS,EAAE,EAAE;gBACFL,KAAK,EAAEA,KAAK;gBACZC,MAAM,EAAE,MAAM;gBACdG,QAAQ,EAAE,UAAU;gBACpBE,GAAG,EAAE,CAAC;gBACNC,KAAK,EAAE,CAAC;gBACRC,SAAS,EAAE,QAAQ;gBACnBC,SAAS,EAAE,QAAQ;aACpB;sBAED,cAAA,KAACZ,UAAU;gBAACa,KAAK,EAAEP,IAAI;cAAI;UACvB,CACN;IACJ,CAAC;IAED,qBACE,MAACP,GAAG;QACFS,EAAE,EAAE;YACFL,KAAK,EAAEA,KAAK;YACZC,MAAM,EAAEA,MAAM;YACdG,QAAQ,EAAE,UAAU;YACpBO,MAAM,EAAE,CAAC;SACV;;0BAED,KAACb,aAAa;gBAACY,KAAK,EAAEP,IAAI;gBAAEF,MAAM,EAAEA,MAAM;cAAI;YAAA,GAChD;;MAAM,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { LegendOptions, LegendItem } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n}\n\nexport function Legend({ width, height, options, data }: LegendProps) {\n  if (options.position === 'Right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: '100%',\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          overflowX: 'hidden',\n          overflowY: 'scroll',\n        }}\n      >\n        <ListLegend items={data} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\n      }}\n    >\n      <CompactLegend items={data} height={height} />\n    </Box>\n  );\n}\n"],"names":["Box","ListLegend","CompactLegend","Legend","width","height","options","data","position","sx","top","right","overflowX","overflowY","items","bottom"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAC1C,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAShD,OAAO,SAASC,MAAM,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAe,EAAE;IACpE,IAAID,OAAO,CAACE,QAAQ,KAAK,OAAO,EAAE;QAChC,qBACE,KAACR,GAAG;YACFS,EAAE,EAAE;gBACFL,KAAK,EAAEA,KAAK;gBACZC,MAAM,EAAE,MAAM;gBACdG,QAAQ,EAAE,UAAU;gBACpBE,GAAG,EAAE,CAAC;gBACNC,KAAK,EAAE,CAAC;gBACRC,SAAS,EAAE,QAAQ;gBACnBC,SAAS,EAAE,QAAQ;aACpB;sBAED,cAAA,KAACZ,UAAU;gBAACa,KAAK,EAAEP,IAAI;cAAI;UACvB,CACN;IACJ,CAAC;IAED,qBACE,KAACP,GAAG;QACFS,EAAE,EAAE;YACFL,KAAK,EAAEA,KAAK;YACZC,MAAM,EAAEA,MAAM;YACdG,QAAQ,EAAE,UAAU;YACpBO,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACb,aAAa;YAACY,KAAK,EAAEP,IAAI;YAAEF,MAAM,EAAEA,MAAM;UAAI;MAC1C,CACN;AACJ,CAAC"}

package/dist/LineChart/LineChart.d.ts

@@ -3,7 +3,10 @@ import type { GridComponentOption, LegendComponentOption, YAXisComponentOption }
 import { EChartsDataFormat } from '../model/graph';
 import { UnitOptions } from '../model/units';
 import { ZoomEventData } from './utils';
-interface LineChartProps {
+export interface LineChartProps {
+    /**
+     * Height of the chart
+     */
     height: number;
     data: EChartsDataFormat;
     yAxis?: YAXisComponentOption;
@@ -14,5 +17,4 @@ interface LineChartProps {
     onDoubleClick?: (e: MouseEvent) => void;
 }
 export declare function LineChart({ height, data, yAxis, unit, grid, legend, onDataZoom, onDoubleClick }: LineChartProps): JSX.Element;
-export {};
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,cAAc,eAgJ/G"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE,cAAc,eAgJ/G"}

package/dist/LineChart/LineChart.js

@@ -11,7 +11,7 @@
 // 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 { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { use } from 'echarts/core';
 import { LineChart as EChartsLineChart } from 'echarts/charts';