@perses-dev/components 0.21.1 → 0.22.0

package/dist/JSONEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":";AAgBA,UAAU,eAAe,CAAC,IAAI;IAC5B,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,eAmCtD"}
+{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,aAAK,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IAC/G,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,eAgCtD"}

package/dist/JSONEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -12,37 +12,42 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { TextField } from '@mui/material';
+import CodeMirror from '@uiw/react-codemirror';
+import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { linter, lintGutter } from '@codemirror/lint';
+import { useTheme } from '@mui/material';
 export function JSONEditor(props) {
+    const theme = useTheme();
+    const isDarkMode = theme.palette.mode === 'dark';
     const [value, setValue] = useState(()=>JSON.stringify(props.value, null, 2));
-    const [invalidJSON, setInvalidJSON] = useState(false);
     useEffect(()=>{
         setValue(JSON.stringify(props.value, null, 2));
-        setInvalidJSON(false);
     }, [
         props.value
     ]);
-    // TODO: replace with CodeMirror editor
-    return /*#__PURE__*/ _jsx(TextField, {
-        label: "JSON",
-        error: invalidJSON,
-        helperText: invalidJSON ? 'Invalid JSON' : '',
-        multiline: true,
-        fullWidth: true,
+    return /*#__PURE__*/ _jsx(CodeMirror, {
+        ...props,
+        style: {
+            border: `1px solid ${theme.palette.divider}`
+        },
+        theme: isDarkMode ? 'dark' : 'light',
+        extensions: [
+            json(),
+            linter(jsonParseLinter()),
+            lintGutter()
+        ],
         value: value,
-        onChange: (event)=>{
-            setValue(event.target.value);
+        onChange: (newValue)=>{
+            setValue(newValue);
         },
-        maxRows: 20,
         onBlur: ()=>{
             try {
                 const json = JSON.parse(value !== null && value !== void 0 ? value : '{}');
-                setInvalidJSON(false);
                 if (props.onChange !== undefined) {
                     props.onChange(json);
                 }
             } catch (e) {
-                setInvalidJSON(true);
+            // ignore this error
             }
         }
     });

package/dist/JSONEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/JSONEditor.tsx"],"sourcesContent":["// Copyright 2022 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 { useEffect, useState } from 'react';\nimport { TextField } from '@mui/material';\n\ninterface JSONEditorProps<Spec> {\n  value: Spec;\n  onChange?: (next: Spec) => void;\n}\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>) {\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [invalidJSON, setInvalidJSON] = useState(false);\n\n  useEffect(() => {\n    setValue(JSON.stringify(props.value, null, 2));\n    setInvalidJSON(false);\n  }, [props.value]);\n\n  // TODO: replace with CodeMirror editor\n  return (\n    <TextField\n      label=\"JSON\"\n      error={invalidJSON}\n      helperText={invalidJSON ? 'Invalid JSON' : ''}\n      multiline\n      fullWidth\n      value={value}\n      onChange={(event) => {\n        setValue(event.target.value);\n      }}\n      maxRows={20}\n      onBlur={() => {\n        try {\n          const json = JSON.parse(value ?? '{}');\n          setInvalidJSON(false);\n          if (props.onChange !== undefined) {\n            props.onChange(json);\n          }\n        } catch (e) {\n          setInvalidJSON(true);\n        }\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useState","TextField","JSONEditor","props","value","setValue","JSON","stringify","invalidJSON","setInvalidJSON","label","error","helperText","multiline","fullWidth","onChange","event","target","maxRows","onBlur","json","parse","undefined","e"],"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,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,SAAS,QAAQ,eAAe,CAAC;AAO1C,OAAO,SAASC,UAAU,CAAIC,KAAyB,EAAE;IACvD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAAC,IAAMM,IAAI,CAACC,SAAS,CAACJ,KAAK,CAACC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,AAAC;IAC/E,MAAM,CAACI,WAAW,EAAEC,cAAc,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC,AAAC;IAEtDD,SAAS,CAAC,IAAM;QACdM,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACJ,KAAK,CAACC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/CK,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE;QAACN,KAAK,CAACC,KAAK;KAAC,CAAC,CAAC;IAElB,uCAAuC;IACvC,qBACE,KAACH,SAAS;QACRS,KAAK,EAAC,MAAM;QACZC,KAAK,EAAEH,WAAW;QAClBI,UAAU,EAAEJ,WAAW,GAAG,cAAc,GAAG,EAAE;QAC7CK,SAAS;QACTC,SAAS;QACTV,KAAK,EAAEA,KAAK;QACZW,QAAQ,EAAE,CAACC,KAAK,GAAK;YACnBX,QAAQ,CAACW,KAAK,CAACC,MAAM,CAACb,KAAK,CAAC,CAAC;QAC/B,CAAC;QACDc,OAAO,EAAE,EAAE;QACXC,MAAM,EAAE,IAAM;YACZ,IAAI;gBACF,MAAMC,IAAI,GAAGd,IAAI,CAACe,KAAK,CAACjB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAAC,AAAC;gBACvCK,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,IAAIN,KAAK,CAACY,QAAQ,KAAKO,SAAS,EAAE;oBAChCnB,KAAK,CAACY,QAAQ,CAACK,IAAI,CAAC,CAAC;gBACvB,CAAC;YACH,EAAE,OAAOG,CAAC,EAAE;gBACVd,cAAc,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;MACD,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../src/JSONEditor.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 { useEffect, useState } from 'react';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\nimport { ReactCodeMirrorProps } from '@uiw/react-codemirror/src';\n\ntype JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {\n  value: T;\n  onChange?: (next: T) => void;\n};\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>) {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n\n  useEffect(() => {\n    setValue(JSON.stringify(props.value, null, 2));\n  }, [props.value]);\n\n  return (\n    <CodeMirror\n      {...props}\n      style={{ border: `1px solid ${theme.palette.divider}` }}\n      theme={isDarkMode ? 'dark' : 'light'}\n      extensions={[json(), linter(jsonParseLinter()), lintGutter()]}\n      value={value}\n      onChange={(newValue) => {\n        setValue(newValue);\n      }}\n      onBlur={() => {\n        try {\n          const json = JSON.parse(value ?? '{}');\n          if (props.onChange !== undefined) {\n            props.onChange(json);\n          }\n        } catch (e) {\n          // ignore this error\n        }\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useState","CodeMirror","json","jsonParseLinter","linter","lintGutter","useTheme","JSONEditor","props","theme","isDarkMode","palette","mode","value","setValue","JSON","stringify","style","border","divider","extensions","onChange","newValue","onBlur","parse","undefined","e"],"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,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAC5C,OAAOC,UAAU,MAAM,uBAAuB,CAAC;AAC/C,SAASC,IAAI,EAAEC,eAAe,QAAQ,uBAAuB,CAAC;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,kBAAkB,CAAC;AACtD,SAASC,QAAQ,QAAQ,eAAe,CAAC;AAQzC,OAAO,SAASC,UAAU,CAAIC,KAAyB,EAAE;IACvD,MAAMC,KAAK,GAAGH,QAAQ,EAAE,AAAC;IACzB,MAAMI,UAAU,GAAGD,KAAK,CAACE,OAAO,CAACC,IAAI,KAAK,MAAM,AAAC;IAEjD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGd,QAAQ,CAAC,IAAMe,IAAI,CAACC,SAAS,CAACR,KAAK,CAACK,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,AAAC;IAE/Ed,SAAS,CAAC,IAAM;QACde,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACR,KAAK,CAACK,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE;QAACL,KAAK,CAACK,KAAK;KAAC,CAAC,CAAC;IAElB,qBACE,KAACZ,UAAU;QACR,GAAGO,KAAK;QACTS,KAAK,EAAE;YAAEC,MAAM,EAAE,CAAC,UAAU,EAAET,KAAK,CAACE,OAAO,CAACQ,OAAO,CAAC,CAAC;SAAE;QACvDV,KAAK,EAAEC,UAAU,GAAG,MAAM,GAAG,OAAO;QACpCU,UAAU,EAAE;YAAClB,IAAI,EAAE;YAAEE,MAAM,CAACD,eAAe,EAAE,CAAC;YAAEE,UAAU,EAAE;SAAC;QAC7DQ,KAAK,EAAEA,KAAK;QACZQ,QAAQ,EAAE,CAACC,QAAQ,GAAK;YACtBR,QAAQ,CAACQ,QAAQ,CAAC,CAAC;QACrB,CAAC;QACDC,MAAM,EAAE,IAAM;YACZ,IAAI;gBACF,MAAMrB,IAAI,GAAGa,IAAI,CAACS,KAAK,CAACX,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAAC,AAAC;gBACvC,IAAIL,KAAK,CAACa,QAAQ,KAAKI,SAAS,EAAE;oBAChCjB,KAAK,CAACa,QAAQ,CAACnB,IAAI,CAAC,CAAC;gBACvB,CAAC;YACH,EAAE,OAAOwB,CAAC,EAAE;YACV,oBAAoB;YACtB,CAAC;QACH,CAAC;MACD,CACF;AACJ,CAAC"}

package/dist/Legend/CompactLegend.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright 2022 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 { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom`\n */\nexport function CompactLegend({ height, items }: CompactLegendProps) {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","CompactLegend","height","items","component","sx","width","padding","overflowY","margin","map","item","float","paddingRight","id"],"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,cAAc,QAAQ,kBAAkB,CAAC;AAOlD;;;CAGC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAsB,EAAE;IACnE,qBACE,KAACJ,GAAG;QAACK,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEJ,MAAM;YAAEK,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,iBACd,KAACX,cAAc;gBAEbW,IAAI,EAAEA,IAAI;gBACVN,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbM,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eANIF,IAAI,CAACG,EAAE,CAOZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/CompactLegend.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 { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom`\n */\nexport function CompactLegend({ height, items }: CompactLegendProps) {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","CompactLegend","height","items","component","sx","width","padding","overflowY","margin","map","item","float","paddingRight","id"],"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,cAAc,QAAQ,kBAAkB,CAAC;AAOlD;;;CAGC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAsB,EAAE;IACnE,qBACE,KAACJ,GAAG;QAACK,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEJ,MAAM;YAAEK,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,iBACd,KAACX,cAAc;gBAEbW,IAAI,EAAEA,IAAI;gBACVN,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbM,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eANIF,IAAI,CAACG,EAAE,CAOZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}

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,eAmBnE"}
+{"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"}

package/dist/Legend/Legend.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -10,12 +10,12 @@
 // 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 } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
 export function Legend({ width , height , options , data  }) {
-    if (options.position === 'right') {
+    if (options.position === 'Right') {
         return /*#__PURE__*/ _jsx(Box, {
             sx: {
                 width: width,
@@ -23,6 +23,7 @@ export function Legend({ width , height , options , data  }) {
                 position: 'absolute',
                 top: 0,
                 right: 0,
+                overflowX: 'hidden',
                 overflowY: 'scroll'
             },
             children: /*#__PURE__*/ _jsx(ListLegend, {
@@ -30,9 +31,20 @@ export function Legend({ width , height , options , data  }) {
             })
         });
     }
-    return /*#__PURE__*/ _jsx(CompactLegend, {
-        items: data,
-        height: height
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            width: width,
+            height: height,
+            position: 'absolute',
+            bottom: 0
+        },
+        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 2022 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          overflowY: 'scroll',\n        }}\n      >\n        <ListLegend items={data} />\n      </Box>\n    );\n  }\n\n  return <CompactLegend items={data} height={height} />;\n}\n"],"names":["Box","ListLegend","CompactLegend","Legend","width","height","options","data","position","sx","top","right","overflowY","items"],"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;aACpB;sBAED,cAAA,KAACX,UAAU;gBAACY,KAAK,EAAEN,IAAI;cAAI;UACvB,CACN;IACJ,CAAC;IAED,qBAAO,KAACL,aAAa;QAACW,KAAK,EAAEN,IAAI;QAAEF,MAAM,EAAEA,MAAM;MAAI,CAAC;AACxD,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\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"}

package/dist/Legend/LegendColorBadge.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/Legend/LegendColorBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/LegendColorBadge.tsx"],"sourcesContent":["// Copyright 2022 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 { Box, BoxProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = React.memo(function LegendColorBadge({ color, sx, ...others }: LegendColorBadgeProps) {\n  return (\n    <Box\n      {...others}\n      sx={combineSx(\n        {\n          height: 4,\n          width: 16,\n          margin: (theme) => theme.spacing(0.5),\n        },\n        sx\n      )}\n      style={{ backgroundColor: color }}\n    />\n  );\n});\n"],"names":["React","Box","combineSx","LegendColorBadge","memo","color","sx","others","height","width","margin","theme","spacing","style","backgroundColor"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,SAAS,QAAQ,UAAU,CAAC;AAMrC,OAAO,MAAMC,gBAAgB,iBAAGH,KAAK,CAACI,IAAI,CAAC,SAASD,gBAAgB,CAAC,EAAEE,KAAK,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAyB,EAAE;IACpH,qBACE,KAACN,GAAG;QACD,GAAGM,MAAM;QACVD,EAAE,EAAEJ,SAAS,CACX;YACEM,MAAM,EAAE,CAAC;YACTC,KAAK,EAAE,EAAE;YACTC,MAAM,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,GAAG,CAAC;SACtC,EACDN,EAAE,CACH;QACDO,KAAK,EAAE;YAAEC,eAAe,EAAET,KAAK;SAAE;MACjC,CACF;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Legend/LegendColorBadge.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 { Box, BoxProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = React.memo(function LegendColorBadge({ color, sx, ...others }: LegendColorBadgeProps) {\n  return (\n    <Box\n      {...others}\n      sx={combineSx(\n        {\n          height: 4,\n          width: 16,\n          margin: (theme) => theme.spacing(0.5),\n        },\n        sx\n      )}\n      style={{ backgroundColor: color }}\n    />\n  );\n});\n"],"names":["React","Box","combineSx","LegendColorBadge","memo","color","sx","others","height","width","margin","theme","spacing","style","backgroundColor"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,SAAS,QAAQ,UAAU,CAAC;AAMrC,OAAO,MAAMC,gBAAgB,iBAAGH,KAAK,CAACI,IAAI,CAAC,SAASD,gBAAgB,CAAC,EAAEE,KAAK,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAyB,EAAE;IACpH,qBACE,KAACN,GAAG;QACD,GAAGM,MAAM;QACVD,EAAE,EAAEJ,SAAS,CACX;YACEM,MAAM,EAAE,CAAC;YACTC,KAAK,EAAE,EAAE;YACTC,MAAM,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,GAAG,CAAC;SACtC,EACDN,EAAE,CACH;QACDO,KAAK,EAAE;YAAEC,eAAe,EAAET,KAAK;SAAE;MACjC,CACF;AACJ,CAAC,CAAC,CAAC"}

package/dist/Legend/ListLegend.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/Legend/ListLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 2022 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 { List } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface ListLegendProps {\n  items: LegendItem[];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are stacked\n */\nexport function ListLegend({ items }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  return (\n    <List>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 190,\n            textOverflow: 'ellipsis',\n            wordBreak: 'break-word',\n            overflow: truncateLabels ? 'hidden' : 'visible',\n            whiteSpace: truncateLabels ? 'nowrap' : 'normal',\n            // TODO: add optional hover effect to show unformatted label\n            '&:hover': {\n              overflow: 'visible',\n              whiteSpace: 'normal', // this allow you to see the full label on hover\n            },\n          }}\n        />\n      ))}\n    </List>\n  );\n}\n"],"names":["List","ListLegendItem","ListLegend","items","truncateLabels","length","map","item","sx","width","textOverflow","wordBreak","overflow","whiteSpace","id"],"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,IAAI,QAAQ,eAAe,CAAC;AAErC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAMlD;;CAEC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAmB,EAAE;IACrD,6DAA6D;IAC7D,MAAMC,cAAc,GAAGD,KAAK,CAACE,MAAM,GAAG,CAAC,AAAC;IACxC,qBACE,KAACL,IAAI;kBACFG,KAAK,CAACG,GAAG,CAAC,CAACC,IAAI,iBACd,KAACN,cAAc;gBAEbM,IAAI,EAAEA,IAAI;gBACVC,EAAE,EAAE;oBACFC,KAAK,EAAE,GAAG;oBACVC,YAAY,EAAE,UAAU;oBACxBC,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAER,cAAc,GAAG,QAAQ,GAAG,SAAS;oBAC/CS,UAAU,EAAET,cAAc,GAAG,QAAQ,GAAG,QAAQ;oBAChD,4DAA4D;oBAC5D,SAAS,EAAE;wBACTQ,QAAQ,EAAE,SAAS;wBACnBC,UAAU,EAAE,QAAQ;qBACrB;iBACF;eAbIN,IAAI,CAACO,EAAE,CAcZ,AACH,CAAC;MACG,CACP;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegend.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 { List } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface ListLegendProps {\n  items: LegendItem[];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are stacked\n */\nexport function ListLegend({ items }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  return (\n    <List>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 190,\n            textOverflow: 'ellipsis',\n            wordBreak: 'break-word',\n            overflow: truncateLabels ? 'hidden' : 'visible',\n            whiteSpace: truncateLabels ? 'nowrap' : 'normal',\n            // TODO: add optional hover effect to show unformatted label\n            '&:hover': {\n              overflow: 'visible',\n              whiteSpace: 'normal', // this allow you to see the full label on hover\n            },\n          }}\n        />\n      ))}\n    </List>\n  );\n}\n"],"names":["List","ListLegendItem","ListLegend","items","truncateLabels","length","map","item","sx","width","textOverflow","wordBreak","overflow","whiteSpace","id"],"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,IAAI,QAAQ,eAAe,CAAC;AAErC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAMlD;;CAEC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAmB,EAAE;IACrD,6DAA6D;IAC7D,MAAMC,cAAc,GAAGD,KAAK,CAACE,MAAM,GAAG,CAAC,AAAC;IACxC,qBACE,KAACL,IAAI;kBACFG,KAAK,CAACG,GAAG,CAAC,CAACC,IAAI,iBACd,KAACN,cAAc;gBAEbM,IAAI,EAAEA,IAAI;gBACVC,EAAE,EAAE;oBACFC,KAAK,EAAE,GAAG;oBACVC,YAAY,EAAE,UAAU;oBACxBC,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAER,cAAc,GAAG,QAAQ,GAAG,SAAS;oBAC/CS,UAAU,EAAET,cAAc,GAAG,QAAQ,GAAG,QAAQ;oBAChD,4DAA4D;oBAC5D,SAAS,EAAE;wBACTQ,QAAQ,EAAE,SAAS;wBACnBC,UAAU,EAAE,QAAQ;qBACrB;iBACF;eAbIN,IAAI,CAACO,EAAE,CAcZ,AACH,CAAC;MACG,CACP;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/Legend/ListLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegendItem.tsx"],"sourcesContent":["// Copyright 2022 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 { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps extends ListItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item, sx, ...others }: ListLegendItemProps) {\n  return (\n    <ListItem\n      {...others}\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={item.onClick}\n      selected={item.isSelected}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText primary={item.label}></ListItemText>\n    </ListItem>\n  );\n});\n"],"names":["React","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItem","memo","item","sx","others","padding","cursor","dense","key","id","onClick","selected","isSelected","display","alignItems","color","primary","label"],"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,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGN,KAAK,CAACO,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAuB,EAAE;IAC7G,qBACE,eAACP,QAAQ;QACN,GAAGO,MAAM;QACVD,EAAE,EAAEL,SAAS,CACX;YACEO,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDH,EAAE,CACH;QACDI,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEN,IAAI,CAACO,EAAE;QACZC,OAAO,EAAER,IAAI,CAACQ,OAAO;QACrBC,QAAQ,EAAET,IAAI,CAACU,UAAU;;0BAEzB,KAACjB,GAAG;gBAACQ,EAAE,EAAE;oBAAEU,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACf,gBAAgB;oBAACgB,KAAK,EAAEb,IAAI,CAACa,KAAK;kBAAI;cACnC;0BACN,KAACnB,YAAY;gBAACoB,OAAO,EAAEd,IAAI,CAACe,KAAK;cAAiB;;MACzC,CACX;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegendItem.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 { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps extends ListItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item, sx, ...others }: ListLegendItemProps) {\n  return (\n    <ListItem\n      {...others}\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={item.onClick}\n      selected={item.isSelected}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText primary={item.label}></ListItemText>\n    </ListItem>\n  );\n});\n"],"names":["React","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItem","memo","item","sx","others","padding","cursor","dense","key","id","onClick","selected","isSelected","display","alignItems","color","primary","label"],"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,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGN,KAAK,CAACO,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAuB,EAAE;IAC7G,qBACE,eAACP,QAAQ;QACN,GAAGO,MAAM;QACVD,EAAE,EAAEL,SAAS,CACX;YACEO,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDH,EAAE,CACH;QACDI,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEN,IAAI,CAACO,EAAE;QACZC,OAAO,EAAER,IAAI,CAACQ,OAAO;QACrBC,QAAQ,EAAET,IAAI,CAACU,UAAU;;0BAEzB,KAACjB,GAAG;gBAACQ,EAAE,EAAE;oBAAEU,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACf,gBAAgB;oBAACgB,KAAK,EAAEb,IAAI,CAACa,KAAK;kBAAI;cACnC;0BACN,KAACnB,YAAY;gBAACoB,OAAO,EAAEd,IAAI,CAACe,KAAK;cAAiB;;MACzC,CACX;AACJ,CAAC,CAAC,CAAC"}

package/dist/Legend/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/Legend/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/index.ts"],"sourcesContent":["// Copyright 2022 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 './Legend';\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"}
+{"version":3,"sources":["../../src/Legend/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 './Legend';\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/LegendOptionsEditor/LegendOptionsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../src/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAkB,aAAa,EAAE,MAAM,UAAU,CAAC;AAyBzD,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eAyChF"}
+{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../src/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":";AAeA,OAAO,EAKL,aAAa,EAEd,MAAM,UAAU,CAAC;AAYlB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eA2ChF"}

package/dist/LegendOptionsEditor/LegendOptionsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -12,20 +12,9 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Autocomplete, Switch, TextField } from '@mui/material';
-import { DEFAULT_LEGEND } from '../model';
+import { ErrorAlert } from '../ErrorAlert';
+import { DEFAULT_LEGEND, getLegendPosition, validateLegendSpec, LEGEND_POSITIONS_CONFIG } from '../model';
 import { OptionsEditorControl } from '../OptionsEditorLayout';
-const LEGEND_POSITIONS = [
-    'bottom',
-    'right'
-];
-const LEGEND_POSITIONS_CONFIG = {
-    bottom: {
-        label: 'Bottom'
-    },
-    right: {
-        label: 'Right'
-    }
-};
 const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,
@@ -46,11 +35,17 @@ export function LegendOptionsEditor({ value , onChange  }) {
             position: newValue.id
         });
     };
-    var ref;
-    const legendConfig = LEGEND_POSITIONS_CONFIG[(ref = value === null || value === void 0 ? void 0 : value.position) !== null && ref !== void 0 ? ref : DEFAULT_LEGEND.position];
-    var ref1;
+    const isValidLegend = validateLegendSpec(value);
+    const currentPosition = getLegendPosition(value === null || value === void 0 ? void 0 : value.position);
+    const legendConfig = LEGEND_POSITIONS_CONFIG[currentPosition];
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
+            !isValidLegend && /*#__PURE__*/ _jsx(ErrorAlert, {
+                error: {
+                    name: 'invalid-legend',
+                    message: 'Invalid legend spec'
+                }
+            }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Show",
                 control: /*#__PURE__*/ _jsx(Switch, {
@@ -63,7 +58,7 @@ export function LegendOptionsEditor({ value , onChange  }) {
                 control: /*#__PURE__*/ _jsx(Autocomplete, {
                     value: {
                         ...legendConfig,
-                        id: (ref1 = value === null || value === void 0 ? void 0 : value.position) !== null && ref1 !== void 0 ? ref1 : DEFAULT_LEGEND.position
+                        id: currentPosition
                     },
                     options: POSITION_OPTIONS,
                     isOptionEqualToValue: (option, value)=>option.id === value.id,

package/dist/LegendOptionsEditor/LegendOptionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright 2022 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 { Autocomplete, Switch, SwitchProps, TextField } from '@mui/material';\nimport { DEFAULT_LEGEND, LegendOptions } from '../model';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\n\ntype LegendPositionConfig = {\n  label: string;\n};\n\nconst LEGEND_POSITIONS = ['bottom', 'right'] as const;\n\ntype LegendPositions = typeof LEGEND_POSITIONS[number];\n\nconst LEGEND_POSITIONS_CONFIG: Readonly<Record<LegendPositions, LegendPositionConfig>> = {\n  bottom: { label: 'Bottom' },\n  right: { label: 'Right' },\n};\n\ntype LegendPositionOption = LegendPositionConfig & { id: LegendOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendOptions['position'],\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendOptions;\n  onChange: (legend?: LegendOptions) => void;\n}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const legendConfig = LEGEND_POSITIONS_CONFIG[value?.position ?? DEFAULT_LEGEND.position];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Position\"\n        control={\n          <Autocomplete\n            value={{\n              ...legendConfig,\n              id: value?.position ?? DEFAULT_LEGEND.position,\n            }}\n            options={POSITION_OPTIONS}\n            isOptionEqualToValue={(option, value) => option.id === value.id}\n            renderInput={(params) => <TextField {...params} />}\n            onChange={handleLegendPositionChange}\n            disabled={value === undefined}\n            disableClearable\n          ></Autocomplete>\n        }\n      />\n    </>\n  );\n}\n"],"names":["Autocomplete","Switch","TextField","DEFAULT_LEGEND","OptionsEditorControl","LEGEND_POSITIONS","LEGEND_POSITIONS_CONFIG","bottom","label","right","POSITION_OPTIONS","Object","entries","map","id","config","LegendOptionsEditor","value","onChange","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","legendConfig","control","options","isOptionEqualToValue","option","renderInput","params","disabled","disableClearable"],"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,YAAY,EAAEC,MAAM,EAAeC,SAAS,QAAQ,eAAe,CAAC;AAC7E,SAASC,cAAc,QAAuB,UAAU,CAAC;AACzD,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAM9D,MAAMC,gBAAgB,GAAG;IAAC,QAAQ;IAAE,OAAO;CAAC,AAAS,AAAC;AAItD,MAAMC,uBAAuB,GAA4D;IACvFC,MAAM,EAAE;QAAEC,KAAK,EAAE,QAAQ;KAAE;IAC3BC,KAAK,EAAE;QAAED,KAAK,EAAE,OAAO;KAAE;CAC1B,AAAC;AAIF,MAAME,gBAAgB,GAA2BC,MAAM,CAACC,OAAO,CAACN,uBAAuB,CAAC,CAACO,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,MAAM,CAAC,GAAK;IAC7G,OAAO;QACLD,EAAE,EAAEA,EAAE;QACN,GAAGC,MAAM;KACV,CAAC;AACJ,CAAC,CAAC,AAAC;AAOH,OAAO,SAASC,mBAAmB,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAA4B,EAAE;IACjF,MAAMC,sBAAsB,GAA4B,CAACC,CAAU,EAAEC,OAAgB,GAAK;QACxF,gDAAgD;QAChD,MAAMC,WAAW,GAAGD,OAAO,KAAK,IAAI,GAAG;YAAEE,QAAQ,EAAEpB,cAAc,CAACoB,QAAQ;SAAE,GAAGC,SAAS,AAAC;QACzFN,QAAQ,CAACI,WAAW,CAAC,CAAC;IACxB,CAAC,AAAC;IAEF,MAAMG,0BAA0B,GAAG,CAACL,CAAU,EAAEM,QAA8B,GAAK;QACjFR,QAAQ,CAAC;YACP,GAAGD,KAAK;YACRM,QAAQ,EAAEG,QAAQ,CAACZ,EAAE;SACtB,CAAC,CAAC;IACL,CAAC,AAAC;QAE2CG,GAAe;IAA5D,MAAMU,YAAY,GAAGrB,uBAAuB,CAACW,CAAAA,GAAe,GAAfA,KAAK,aAALA,KAAK,WAAU,GAAfA,KAAAA,CAAe,GAAfA,KAAK,CAAEM,QAAQ,cAAfN,GAAe,cAAfA,GAAe,GAAId,cAAc,CAACoB,QAAQ,CAAC,AAAC;QAczEN,IAAe;IAZ/B,qBACE;;0BACE,KAACb,oBAAoB;gBACnBI,KAAK,EAAC,MAAM;gBACZoB,OAAO,gBAAE,KAAC3B,MAAM;oBAACoB,OAAO,EAAEJ,KAAK,KAAKO,SAAS;oBAAEN,QAAQ,EAAEC,sBAAsB;kBAAI;cACnF;0BACF,KAACf,oBAAoB;gBACnBI,KAAK,EAAC,UAAU;gBAChBoB,OAAO,gBACL,KAAC5B,YAAY;oBACXiB,KAAK,EAAE;wBACL,GAAGU,YAAY;wBACfb,EAAE,EAAEG,CAAAA,IAAe,GAAfA,KAAK,aAALA,KAAK,WAAU,GAAfA,KAAAA,CAAe,GAAfA,KAAK,CAAEM,QAAQ,cAAfN,IAAe,cAAfA,IAAe,GAAId,cAAc,CAACoB,QAAQ;qBAC/C;oBACDM,OAAO,EAAEnB,gBAAgB;oBACzBoB,oBAAoB,EAAE,CAACC,MAAM,EAAEd,KAAK,GAAKc,MAAM,CAACjB,EAAE,KAAKG,KAAK,CAACH,EAAE;oBAC/DkB,WAAW,EAAE,CAACC,MAAM,iBAAK,KAAC/B,SAAS;4BAAE,GAAG+B,MAAM;0BAAI;oBAClDf,QAAQ,EAAEO,0BAA0B;oBACpCS,QAAQ,EAAEjB,KAAK,KAAKO,SAAS;oBAC7BW,gBAAgB;kBACF;cAElB;;MACD,CACH;AACJ,CAAC"}
+{"version":3,"sources":["../../src/LegendOptionsEditor/LegendOptionsEditor.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 { Autocomplete, Switch, SwitchProps, TextField } from '@mui/material';\nimport { ErrorAlert } from '../ErrorAlert';\nimport {\n  DEFAULT_LEGEND,\n  getLegendPosition,\n  validateLegendSpec,\n  LEGEND_POSITIONS_CONFIG,\n  LegendOptions,\n  LegendPositionConfig,\n} from '../model';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\n\ntype LegendPositionOption = LegendPositionConfig & { id: LegendOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendOptions['position'],\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendOptions;\n  onChange: (legend?: LegendOptions) => void;\n}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const isValidLegend = validateLegendSpec(value);\n  const currentPosition = getLegendPosition(value?.position);\n  const legendConfig = LEGEND_POSITIONS_CONFIG[currentPosition];\n  return (\n    <>\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Position\"\n        control={\n          <Autocomplete\n            value={{\n              ...legendConfig,\n              id: currentPosition,\n            }}\n            options={POSITION_OPTIONS}\n            isOptionEqualToValue={(option, value) => option.id === value.id}\n            renderInput={(params) => <TextField {...params} />}\n            onChange={handleLegendPositionChange}\n            disabled={value === undefined}\n            disableClearable\n          ></Autocomplete>\n        }\n      />\n    </>\n  );\n}\n"],"names":["Autocomplete","Switch","TextField","ErrorAlert","DEFAULT_LEGEND","getLegendPosition","validateLegendSpec","LEGEND_POSITIONS_CONFIG","OptionsEditorControl","POSITION_OPTIONS","Object","entries","map","id","config","LegendOptionsEditor","value","onChange","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","isValidLegend","currentPosition","legendConfig","error","name","message","label","control","options","isOptionEqualToValue","option","renderInput","params","disabled","disableClearable"],"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,YAAY,EAAEC,MAAM,EAAeC,SAAS,QAAQ,eAAe,CAAC;AAC7E,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SACEC,cAAc,EACdC,iBAAiB,EACjBC,kBAAkB,EAClBC,uBAAuB,QAGlB,UAAU,CAAC;AAClB,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAI9D,MAAMC,gBAAgB,GAA2BC,MAAM,CAACC,OAAO,CAACJ,uBAAuB,CAAC,CAACK,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,MAAM,CAAC,GAAK;IAC7G,OAAO;QACLD,EAAE,EAAEA,EAAE;QACN,GAAGC,MAAM;KACV,CAAC;AACJ,CAAC,CAAC,AAAC;AAOH,OAAO,SAASC,mBAAmB,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAA4B,EAAE;IACjF,MAAMC,sBAAsB,GAA4B,CAACC,CAAU,EAAEC,OAAgB,GAAK;QACxF,gDAAgD;QAChD,MAAMC,WAAW,GAAGD,OAAO,KAAK,IAAI,GAAG;YAAEE,QAAQ,EAAElB,cAAc,CAACkB,QAAQ;SAAE,GAAGC,SAAS,AAAC;QACzFN,QAAQ,CAACI,WAAW,CAAC,CAAC;IACxB,CAAC,AAAC;IAEF,MAAMG,0BAA0B,GAAG,CAACL,CAAU,EAAEM,QAA8B,GAAK;QACjFR,QAAQ,CAAC;YACP,GAAGD,KAAK;YACRM,QAAQ,EAAEG,QAAQ,CAACZ,EAAE;SACtB,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,MAAMa,aAAa,GAAGpB,kBAAkB,CAACU,KAAK,CAAC,AAAC;IAChD,MAAMW,eAAe,GAAGtB,iBAAiB,CAACW,KAAK,aAALA,KAAK,WAAU,GAAfA,KAAAA,CAAe,GAAfA,KAAK,CAAEM,QAAQ,CAAC,AAAC;IAC3D,MAAMM,YAAY,GAAGrB,uBAAuB,CAACoB,eAAe,CAAC,AAAC;IAC9D,qBACE;;YACG,CAACD,aAAa,kBAAI,KAACvB,UAAU;gBAAC0B,KAAK,EAAE;oBAAEC,IAAI,EAAE,gBAAgB;oBAAEC,OAAO,EAAE,qBAAqB;iBAAE;cAAI;0BACpG,KAACvB,oBAAoB;gBACnBwB,KAAK,EAAC,MAAM;gBACZC,OAAO,gBAAE,KAAChC,MAAM;oBAACmB,OAAO,EAAEJ,KAAK,KAAKO,SAAS;oBAAEN,QAAQ,EAAEC,sBAAsB;kBAAI;cACnF;0BACF,KAACV,oBAAoB;gBACnBwB,KAAK,EAAC,UAAU;gBAChBC,OAAO,gBACL,KAACjC,YAAY;oBACXgB,KAAK,EAAE;wBACL,GAAGY,YAAY;wBACff,EAAE,EAAEc,eAAe;qBACpB;oBACDO,OAAO,EAAEzB,gBAAgB;oBACzB0B,oBAAoB,EAAE,CAACC,MAAM,EAAEpB,KAAK,GAAKoB,MAAM,CAACvB,EAAE,KAAKG,KAAK,CAACH,EAAE;oBAC/DwB,WAAW,EAAE,CAACC,MAAM,iBAAK,KAACpC,SAAS;4BAAE,GAAGoC,MAAM;0BAAI;oBAClDrB,QAAQ,EAAEO,0BAA0B;oBACpCe,QAAQ,EAAEvB,KAAK,KAAKO,SAAS;oBAC7BiB,gBAAgB;kBACF;cAElB;;MACD,CACH;AACJ,CAAC"}

package/dist/LegendOptionsEditor/LegendOptionsEditor.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -28,12 +28,33 @@ describe('LegendOptionsEditor', ()=>{
             name: 'Show'
         });
     };
+    const getLegendPositionSelector = ()=>{
+        return screen.getByRole('combobox', {
+            name: 'Position'
+        });
+    };
     it('can change legend visibility by clicking', ()=>{
         const onChange = jest.fn();
         renderLegendOptionsEditor(undefined, onChange);
+        expect(getLegendPositionSelector()).toBeDisabled();
         userEvent.click(getLegendShowSwitch());
         expect(onChange).toHaveBeenCalledWith({
-            position: 'bottom'
+            position: 'Bottom'
+        });
+    });
+    it('should allow changing legend position', ()=>{
+        const onChange = jest.fn();
+        renderLegendOptionsEditor({
+            position: 'Bottom'
+        }, onChange);
+        expect(getLegendPositionSelector()).toBeEnabled();
+        userEvent.click(getLegendPositionSelector());
+        const positionRightOption = screen.getByRole('option', {
+            name: 'Right'
+        });
+        userEvent.click(positionRightOption);
+        expect(onChange).toHaveBeenCalledWith({
+            position: 'Right'
         });
     });
 });

package/dist/LegendOptionsEditor/LegendOptionsEditor.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LegendOptionsEditor/LegendOptionsEditor.test.tsx"],"sourcesContent":["// Copyright 2022 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 { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { LegendOptions } from '../model';\nimport { LegendOptionsEditor } from './LegendOptionsEditor';\n\ndescribe('LegendOptionsEditor', () => {\n  const renderLegendOptionsEditor = (value?: LegendOptions, onChange = jest.fn()) => {\n    render(\n      <div>\n        <LegendOptionsEditor value={value} onChange={onChange} />\n      </div>\n    );\n  };\n\n  const getLegendShowSwitch = () => {\n    return screen.getByRole('checkbox', { name: 'Show' });\n  };\n\n  it('can change legend visibility by clicking', () => {\n    const onChange = jest.fn();\n    renderLegendOptionsEditor(undefined, onChange);\n    userEvent.click(getLegendShowSwitch());\n    expect(onChange).toHaveBeenCalledWith({ position: 'bottom' });\n  });\n});\n"],"names":["render","screen","userEvent","LegendOptionsEditor","describe","renderLegendOptionsEditor","value","onChange","jest","fn","div","getLegendShowSwitch","getByRole","name","it","undefined","click","expect","toHaveBeenCalledWith","position"],"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,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AAEpD,SAASC,mBAAmB,QAAQ,uBAAuB,CAAC;AAE5DC,QAAQ,CAAC,qBAAqB,EAAE,IAAM;IACpC,MAAMC,yBAAyB,GAAG,CAACC,KAAqB,EAAEC,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,GAAK;QACjFT,MAAM,eACJ,KAACU,KAAG;sBACF,cAAA,KAACP,mBAAmB;gBAACG,KAAK,EAAEA,KAAK;gBAAEC,QAAQ,EAAEA,QAAQ;cAAI;UACrD,CACP,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,IAAM;QAChC,OAAOV,MAAM,CAACW,SAAS,CAAC,UAAU,EAAE;YAAEC,IAAI,EAAE,MAAM;SAAE,CAAC,CAAC;IACxD,CAAC,AAAC;IAEFC,EAAE,CAAC,0CAA0C,EAAE,IAAM;QACnD,MAAMP,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,yBAAyB,CAACU,SAAS,EAAER,QAAQ,CAAC,CAAC;QAC/CL,SAAS,CAACc,KAAK,CAACL,mBAAmB,EAAE,CAAC,CAAC;QACvCM,MAAM,CAACV,QAAQ,CAAC,CAACW,oBAAoB,CAAC;YAAEC,QAAQ,EAAE,QAAQ;SAAE,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/LegendOptionsEditor/LegendOptionsEditor.test.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 { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { LegendOptions } from '../model';\nimport { LegendOptionsEditor } from './LegendOptionsEditor';\n\ndescribe('LegendOptionsEditor', () => {\n  const renderLegendOptionsEditor = (value?: LegendOptions, onChange = jest.fn()) => {\n    render(\n      <div>\n        <LegendOptionsEditor value={value} onChange={onChange} />\n      </div>\n    );\n  };\n\n  const getLegendShowSwitch = () => {\n    return screen.getByRole('checkbox', { name: 'Show' });\n  };\n\n  const getLegendPositionSelector = () => {\n    return screen.getByRole('combobox', { name: 'Position' });\n  };\n\n  it('can change legend visibility by clicking', () => {\n    const onChange = jest.fn();\n    renderLegendOptionsEditor(undefined, onChange);\n    expect(getLegendPositionSelector()).toBeDisabled();\n    userEvent.click(getLegendShowSwitch());\n    expect(onChange).toHaveBeenCalledWith({ position: 'Bottom' });\n  });\n\n  it('should allow changing legend position', () => {\n    const onChange = jest.fn();\n    renderLegendOptionsEditor({ position: 'Bottom' }, onChange);\n    expect(getLegendPositionSelector()).toBeEnabled();\n    userEvent.click(getLegendPositionSelector());\n    const positionRightOption = screen.getByRole('option', {\n      name: 'Right',\n    });\n    userEvent.click(positionRightOption);\n    expect(onChange).toHaveBeenCalledWith({ position: 'Right' });\n  });\n});\n"],"names":["render","screen","userEvent","LegendOptionsEditor","describe","renderLegendOptionsEditor","value","onChange","jest","fn","div","getLegendShowSwitch","getByRole","name","getLegendPositionSelector","it","undefined","expect","toBeDisabled","click","toHaveBeenCalledWith","position","toBeEnabled","positionRightOption"],"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,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AAEpD,SAASC,mBAAmB,QAAQ,uBAAuB,CAAC;AAE5DC,QAAQ,CAAC,qBAAqB,EAAE,IAAM;IACpC,MAAMC,yBAAyB,GAAG,CAACC,KAAqB,EAAEC,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,GAAK;QACjFT,MAAM,eACJ,KAACU,KAAG;sBACF,cAAA,KAACP,mBAAmB;gBAACG,KAAK,EAAEA,KAAK;gBAAEC,QAAQ,EAAEA,QAAQ;cAAI;UACrD,CACP,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,IAAM;QAChC,OAAOV,MAAM,CAACW,SAAS,CAAC,UAAU,EAAE;YAAEC,IAAI,EAAE,MAAM;SAAE,CAAC,CAAC;IACxD,CAAC,AAAC;IAEF,MAAMC,yBAAyB,GAAG,IAAM;QACtC,OAAOb,MAAM,CAACW,SAAS,CAAC,UAAU,EAAE;YAAEC,IAAI,EAAE,UAAU;SAAE,CAAC,CAAC;IAC5D,CAAC,AAAC;IAEFE,EAAE,CAAC,0CAA0C,EAAE,IAAM;QACnD,MAAMR,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,yBAAyB,CAACW,SAAS,EAAET,QAAQ,CAAC,CAAC;QAC/CU,MAAM,CAACH,yBAAyB,EAAE,CAAC,CAACI,YAAY,EAAE,CAAC;QACnDhB,SAAS,CAACiB,KAAK,CAACR,mBAAmB,EAAE,CAAC,CAAC;QACvCM,MAAM,CAACV,QAAQ,CAAC,CAACa,oBAAoB,CAAC;YAAEC,QAAQ,EAAE,QAAQ;SAAE,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEHN,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMR,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,yBAAyB,CAAC;YAAEgB,QAAQ,EAAE,QAAQ;SAAE,EAAEd,QAAQ,CAAC,CAAC;QAC5DU,MAAM,CAACH,yBAAyB,EAAE,CAAC,CAACQ,WAAW,EAAE,CAAC;QAClDpB,SAAS,CAACiB,KAAK,CAACL,yBAAyB,EAAE,CAAC,CAAC;QAC7C,MAAMS,mBAAmB,GAAGtB,MAAM,CAACW,SAAS,CAAC,QAAQ,EAAE;YACrDC,IAAI,EAAE,OAAO;SACd,CAAC,AAAC;QACHX,SAAS,CAACiB,KAAK,CAACI,mBAAmB,CAAC,CAAC;QACrCN,MAAM,CAACV,QAAQ,CAAC,CAACa,oBAAoB,CAAC;YAAEC,QAAQ,EAAE,OAAO;SAAE,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/LegendOptionsEditor/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/LegendOptionsEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LegendOptionsEditor/index.ts"],"sourcesContent":["// Copyright 2022 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 './LegendOptionsEditor';\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,uBAAuB,CAAC"}
+{"version":3,"sources":["../../src/LegendOptionsEditor/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 './LegendOptionsEditor';\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,uBAAuB,CAAC"}

package/dist/LineChart/LineChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -20,7 +20,7 @@ import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
 import { OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
-import { Tooltip } from '../Tooltip/Tooltip';
+import { TimeSeriesTooltip } from '../TimeSeriesTooltip';
 import { useTimeZone } from '../context/TimeZoneProvider';
 import { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
 use([
@@ -168,7 +168,7 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , onDat
         },
         onDoubleClick: handleOnDoubleClick,
         children: [
-            showTooltip === true && /*#__PURE__*/ _jsx(Tooltip, {
+            showTooltip === true && /*#__PURE__*/ _jsx(TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: true,

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2022 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 { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\ninterface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({ height, data, yAxis, unit, grid, legend, onDataZoom, onDoubleClick }: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n  const { timeZone } = useTimeZone();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;\n\n    // show symbols and axisPointer dashed line on hover\n    const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: !isOptimizedMode,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: isOptimizedMode ? 'none' : 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={() => {\n        setPinTooltip((current) => !current);\n      }}\n      onMouseDown={(e) => {\n        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n        if (e.target instanceof HTMLCanvasElement) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseUp={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n        setPinTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={handleOnDoubleClick}\n    >\n      {showTooltip === true && (\n        <Tooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit}></Tooltip>\n      )}\n\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","Tooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","option","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.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 { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\ninterface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({ height, data, yAxis, unit, grid, legend, onDataZoom, onDoubleClick }: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n  const { timeZone } = useTimeZone();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;\n\n    // show symbols and axisPointer dashed line on hover\n    const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: !isOptimizedMode,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: isOptimizedMode ? 'none' : 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={() => {\n        setPinTooltip((current) => !current);\n      }}\n      onMouseDown={(e) => {\n        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n        if (e.target instanceof HTMLCanvasElement) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseUp={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n        setPinTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={handleOnDoubleClick}\n    >\n      {showTooltip === true && (\n        <TimeSeriesTooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit} />\n      )}\n\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","option","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/LineChart/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/LineChart/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/index.ts"],"sourcesContent":["// Copyright 2022 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 './LineChart';\nexport type { ZoomEventData } from './utils';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa,CAAC"}
+{"version":3,"sources":["../../src/LineChart/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 './LineChart';\nexport type { ZoomEventData } from './utils';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa,CAAC"}

package/dist/LineChart/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at