@perses-dev/components 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-time-chart-rewrite-4667058

package/dist/UnitSelector/UnitSelector.js

@@ -11,10 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Switch, TextField, Autocomplete } from '@mui/material';
-import { UNIT_CONFIG, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '../model';
-import { shouldAbbreviate } from '../model/units/utils';
+import { Switch } from '@mui/material';
+import { shouldAbbreviate, UNIT_CONFIG, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '@perses-dev/core';
 import { OptionsEditorControl } from '../OptionsEditorLayout';
+import { SettingsAutocomplete } from '../SettingsAutocomplete';
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
     return {
         id: id,
@@ -23,26 +23,32 @@ const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
 }).filter((config)=>!config.disableSelectorOption);
 const DECIMAL_PLACES_OPTIONS = [
     {
+        id: 'default',
         label: 'Default',
         decimal_places: undefined
     },
     {
+        id: '0',
         label: '0',
         decimal_places: 0
     },
     {
+        id: '1',
         label: '1',
         decimal_places: 1
     },
     {
+        id: '2',
         label: '2',
         decimal_places: 2
     },
     {
+        id: '3',
         label: '3',
         decimal_places: 3
     },
     {
+        id: '4',
         label: '4',
         decimal_places: 4
     }
@@ -87,42 +93,23 @@ export function UnitSelector({ value , onChange  }) {
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Unit",
-                control: /*#__PURE__*/ _jsx(Autocomplete, {
+                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
                     value: {
                         id: value.kind,
                         ...kindConfig
                     },
                     options: KIND_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
                     groupBy: (option)=>option.group,
-                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                            ...params
-                        }),
-                    renderOption: (renderOptsProps, option)=>{
-                        // Custom option needed to get some increased left padding to make
-                        // the items more distinct from the group label.
-                        return /*#__PURE__*/ _jsx("li", {
-                            ...renderOptsProps,
-                            children: /*#__PURE__*/ _jsx(Box, {
-                                paddingLeft: (theme)=>theme.spacing(1),
-                                children: option.label
-                            })
-                        });
-                    },
                     onChange: handleKindChange,
                     disableClearable: true
                 })
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Decimals",
-                control: /*#__PURE__*/ _jsx(Autocomplete, {
+                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
                     value: getOptionByDecimalPlaces(value.decimal_places),
                     options: DECIMAL_PLACES_OPTIONS,
                     getOptionLabel: (o)=>o.label,
-                    isOptionEqualToValue: (option, value)=>option.label === value.label,
-                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                            ...params
-                        }),
                     onChange: handleDecimalPlacesChange,
                     disabled: !hasDecimalPlaces,
                     disableClearable: true

package/dist/UnitSelector/UnitSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/UnitSelector/UnitSelector.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.\nimport { Box, Switch, TextField, Autocomplete, SwitchProps } from '@mui/material';\nimport { UnitOptions, UNIT_CONFIG, UnitConfig, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '../model';\nimport { shouldAbbreviate } from '../model/units/utils';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\n  { label: 'Default', decimal_places: undefined },\n  { label: '0', decimal_places: 0 },\n  { label: '1', decimal_places: 1 },\n  { label: '2', decimal_places: 2 },\n  { label: '3', decimal_places: 3 },\n  { label: '4', decimal_places: 4 },\n];\n\nfunction getOptionByDecimalPlaces(decimal_places?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimal_places === decimal_places);\n}\n\nexport function UnitSelector({ value, onChange }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimal_places }: { decimal_places: number | undefined }) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: decimal_places,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={\n          <Autocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            isOptionEqualToValue={(option, value) => option.id === value.id}\n            groupBy={(option) => option.group}\n            renderInput={(params) => <TextField {...params} />}\n            renderOption={(renderOptsProps, option) => {\n              // Custom option needed to get some increased left padding to make\n              // the items more distinct from the group label.\n              return (\n                <li {...renderOptsProps}>\n                  <Box paddingLeft={(theme) => theme.spacing(1)}>{option.label}</Box>\n                </li>\n              );\n            }}\n            onChange={handleKindChange}\n            disableClearable\n          ></Autocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <Autocomplete\n            value={getOptionByDecimalPlaces(value.decimal_places)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            isOptionEqualToValue={(option, value) => option.label === value.label}\n            renderInput={(params) => <TextField {...params} />}\n            onChange={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Box","Switch","TextField","Autocomplete","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithAbbreviate","shouldAbbreviate","OptionsEditorControl","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimal_places","undefined","getOptionByDecimalPlaces","find","o","UnitSelector","value","onChange","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalPlacesChange","handleAbbreviateChange","checked","abbreviate","kindConfig","control","disabled","options","isOptionEqualToValue","option","groupBy","group","renderInput","params","renderOption","renderOptsProps","li","paddingLeft","theme","spacing","disableClearable","getOptionLabel"],"mappings":"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"}
+{"version":3,"sources":["../../src/UnitSelector/UnitSelector.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.\nimport { Switch, SwitchProps } from '@mui/material';\nimport {\n  shouldAbbreviate,\n  UnitOptions,\n  UNIT_CONFIG,\n  UnitConfig,\n  isUnitWithDecimalPlaces,\n  isUnitWithAbbreviate,\n} from '@perses-dev/core';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\n  { id: 'default', label: 'Default', decimal_places: undefined },\n  { id: '0', label: '0', decimal_places: 0 },\n  { id: '1', label: '1', decimal_places: 1 },\n  { id: '2', label: '2', decimal_places: 2 },\n  { id: '3', label: '3', decimal_places: 3 },\n  { id: '4', label: '4', decimal_places: 4 },\n];\n\nfunction getOptionByDecimalPlaces(decimal_places?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimal_places === decimal_places);\n}\n\nexport function UnitSelector({ value, onChange }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimal_places }: { decimal_places: number | undefined }) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: decimal_places,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={\n          <SettingsAutocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            groupBy={(option) => option.group}\n            onChange={handleKindChange}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimal_places)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","shouldAbbreviate","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithAbbreviate","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimal_places","undefined","getOptionByDecimalPlaces","find","o","UnitSelector","value","onChange","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalPlacesChange","handleAbbreviateChange","checked","abbreviate","kindConfig","control","disabled","options","groupBy","option","group","disableClearable","getOptionLabel"],"mappings":"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"}

package/dist/YAxisLabel.js

@@ -18,7 +18,7 @@ export function YAxisLabel({ name , height  }) {
             display: 'inline-block',
             maxWidth: height,
             position: 'absolute',
-            top: '45%',
+            top: `calc(${height}px / 2)`,
             transform: 'translateX(-50%) rotate(-90deg)',
             transformOrigin: 'top',
             textAlign: 'center',

package/dist/YAxisLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/YAxisLabel.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, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: '45%',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAOhD,OAAO,SAASC,UAAU,CAAC,EAAEC,IAAI,CAAA,EAAEC,MAAM,CAAA,EAAmB,EAAE;IAC5D,qBACE,KAACJ,GAAG;QACFK,EAAE,EAAE;YACFC,OAAO,EAAE,cAAc;YACvBC,QAAQ,EAAEH,MAAM;YAChBI,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,SAAS,EAAE,iCAAiC;YAC5CC,eAAe,EAAE,KAAK;YACtBC,SAAS,EAAE,QAAQ;YACnBC,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACZ,UAAU;YACTa,OAAO,EAAC,OAAO;YACfC,YAAU,EAAC,cAAc;YACzBV,EAAE,EAAE;gBACFW,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEAf,IAAI;UACM;MACT,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../src/YAxisLabel.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, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: `calc(${height}px / 2)`,\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAOhD,OAAO,SAASC,UAAU,CAAC,EAAEC,IAAI,CAAA,EAAEC,MAAM,CAAA,EAAmB,EAAE;IAC5D,qBACE,KAACJ,GAAG;QACFK,EAAE,EAAE;YACFC,OAAO,EAAE,cAAc;YACvBC,QAAQ,EAAEH,MAAM;YAChBI,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,CAAC,KAAK,EAAEL,MAAM,CAAC,OAAO,CAAC;YAC5BM,SAAS,EAAE,iCAAiC;YAC5CC,eAAe,EAAE,KAAK;YACtBC,SAAS,EAAE,QAAQ;YACnBC,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACZ,UAAU;YACTa,OAAO,EAAC,OAAO;YACfC,YAAU,EAAC,cAAc;YACzBV,EAAE,EAAE;gBACFW,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEAf,IAAI;UACM;MACT,CACN;AACJ,CAAC"}

package/dist/cjs/ContentWithLegend/ContentWithLegend.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "ContentWithLegend", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
 const _legend = require("../Legend");
 const _contentWithLegendModel = require("./model/content-with-legend-model");
 function _interopRequireDefault(obj) {
@@ -28,16 +29,17 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function ContentWithLegend({ children , legendProps , width , height , spacing =0 , minChildrenWidth =100 , minChildrenHeight =100  }) {
+function ContentWithLegend({ children , legendProps , width , height , spacing =0 , legendSize , minChildrenWidth =100 , minChildrenHeight =100  }) {
     const theme = (0, _material.useTheme)();
     const { content , legend , margin  } = (0, _contentWithLegendModel.getContentWithLegendLayout)({
         width,
         height,
-        legendOptions: legendProps === null || legendProps === void 0 ? void 0 : legendProps.options,
+        legendProps,
         minChildrenHeight,
         minChildrenWidth,
         spacing,
-        theme
+        theme,
+        legendSize: (0, _core.getLegendSize)(legendSize)
     });
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {

package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js

@@ -24,18 +24,27 @@ _export(exports, {
     TABLE_LEGEND_SIZE: ()=>TABLE_LEGEND_SIZE,
     getContentWithLegendLayout: ()=>getContentWithLegendLayout
 });
+const _core = require("@perses-dev/core");
 const _table = require("../../Table");
-const _legend = require("../../model/legend");
 const TABLE_LEGEND_SIZE = {
-    // 5 rows plus header. Value to be multiplied by row height in pixels.
-    Bottom: 6,
-    // Pixel value
-    Right: 250
+    Medium: {
+        // 5 rows plus header. Value to be multiplied by row height in pixels.
+        Bottom: 6,
+        // Pixel value
+        Right: 250
+    },
+    Small: {
+        // 3 rows plus header. Value to be multiplied by row height in pixels.
+        Bottom: 4,
+        // Pixel value
+        Right: 150
+    }
 };
 const PANEL_HEIGHT_LG_BREAKPOINT = 300;
 const LEGEND_HEIGHT_SM = 40;
 const LEGEND_HEIGHT_LG = 100;
-function getContentWithLegendLayout({ width , height , legendOptions , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+function getContentWithLegendLayout({ width , height , legendProps , legendSize , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+    const legendOptions = legendProps === null || legendProps === void 0 ? void 0 : legendProps.options;
     const hasLegend = !!legendOptions;
     const noLegendLayout = {
         legend: {
@@ -56,7 +65,7 @@ function getContentWithLegendLayout({ width , height , legendOptions , minChildr
         return noLegendLayout;
     }
     const { position  } = legendOptions;
-    const mode = (0, _legend.getLegendMode)(legendOptions.mode);
+    const mode = (0, _core.getLegendMode)(legendOptions.mode);
     let legendWidth;
     let legendHeight;
     if (mode === 'List') {
@@ -71,10 +80,20 @@ function getContentWithLegendLayout({ width , height , legendOptions , minChildr
             legendHeight = LEGEND_HEIGHT_LG;
         }
     } else {
+        var ref;
         // Table mode
         const tableLayout = (0, _table.getTableCellLayout)(theme, 'compact');
-        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] : width;
-        legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;
+        const tableColumns = (legendProps === null || legendProps === void 0 ? void 0 : (ref = legendProps.tableProps) === null || ref === void 0 ? void 0 : ref.columns) || [];
+        const columnsWidth = tableColumns.reduce((total, col)=>{
+            if (typeof col.width === 'number') {
+                total += col.width;
+            }
+            return total;
+        }, 0);
+        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE[legendSize]['Right'] + columnsWidth : width;
+        // Use the smaller of the size-based row count or the number of legend items + 1 for the header.
+        const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['Bottom'], legendProps.data.length + 1);
+        legendHeight = position === 'Bottom' ? rowsToShow * tableLayout.height : height;
     }
     const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;
     const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;

package/dist/cjs/Drawer/Drawer.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "Drawer", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _utils = require("../utils");
-const DRAWER_DEFAULT_WIDTH = 900;
+const DRAWER_DEFAULT_WIDTH = 1080;
 const Drawer = ({ anchor ='right' , isOpen , onClose , PaperProps , children , ...rest })=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
         ...rest,

package/dist/cjs/EChart/EChart.js

@@ -22,7 +22,13 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _core = require("echarts/core");
 const _material = require("@mui/material");
-const _lodashEs = require("lodash-es");
+const _isEqual = /*#__PURE__*/ _interopRequireDefault(require("lodash/isEqual"));
+const _debounce = /*#__PURE__*/ _interopRequireDefault(require("lodash/debounce"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -78,7 +84,7 @@ const batchEvents = [
     'downplay',
     'highlight'
 ];
-const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , onChartInitialized  }) {
+const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , syncGroup , onChartInitialized  }) {
     const initialOption = (0, _react.useRef)(option);
     const prevOption = (0, _react.useRef)(option);
     const containerRef = (0, _react.useRef)(null);
@@ -106,9 +112,20 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
         theme,
         renderer
     ]);
+    // When syncGroup is explicitly set, charts within same group share interactions such as crosshair
+    (0, _react.useEffect)(()=>{
+        if (!chartElement.current || !syncGroup) return;
+        chartElement.current.group = syncGroup;
+        (0, _core.connect)([
+            chartElement.current
+        ]); // more info: https://echarts.apache.org/en/api.html#echarts.connect
+    }, [
+        syncGroup,
+        chartElement
+    ]);
     // Update chart data when option changes
     (0, _react.useEffect)(()=>{
-        if (prevOption.current === undefined || (0, _lodashEs.isEqual)(prevOption.current, option)) return;
+        if (prevOption.current === undefined || (0, _isEqual.default)(prevOption.current, option)) return;
         if (!chartElement.current) return;
         chartElement.current.setOption(option, true);
         prevOption.current = option;
@@ -117,7 +134,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     ]);
     // Resize chart, cleanup listener on unmount
     (0, _react.useLayoutEffect)(()=>{
-        const updateSize = (0, _lodashEs.debounce)(()=>{
+        const updateSize = (0, _debounce.default)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200);
@@ -149,7 +166,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     (0, _react.useEffect)(()=>{
         // TODO: fix this debouncing. This likely isn't working as intended because
         // the debounced function is re-created every time this useEffect is called.
-        const updateSize = (0, _lodashEs.debounce)(()=>{
+        const updateSize = (0, _debounce.default)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200, {

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -31,7 +31,6 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _units = require("../model/units");
 const _echart = require("../EChart");
 (0, _core1.use)([
     _charts.GaugeChart,
@@ -49,7 +48,7 @@ function GaugeChart(props) {
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{
         var ref;
-        if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;
+        if (data.value === undefined) return chartsTheme.noDataOption;
         // adjusts fontSize depending on number of characters
         const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);
         var ref1;
@@ -167,8 +166,11 @@ function GaugeChart(props) {
                         ],
                         color: 'inherit',
                         fontSize: valueSizeClamp,
-                        formatter: (value)=>{
-                            return (0, _units.formatValue)(value, unit);
+                        formatter: data.value === null ? // at this level because the `formatter` function argument is `NaN`
+                        // when the value is `null`, making it difficult to differentiate
+                        // `null` from a true `NaN` case.
+                        ()=>'null' : (value)=>{
+                            return (0, _core.formatValue)(value, unit);
                         }
                     },
                     data: [
@@ -216,7 +218,7 @@ function getResponsiveValueSize(value, unit, width, height) {
     const MIN_SIZE = 3;
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
-    const formattedValue = (0, _units.formatValue)(value, unit);
+    const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, unit) : `${value}`;
     var _length;
     const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;

package/dist/cjs/Legend/CompactLegend.js

@@ -20,9 +20,9 @@ Object.defineProperty(exports, "CompactLegend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
-function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
+const _legendModel = require("./legend-model");
+function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         component: "ul",
         sx: {
@@ -37,9 +37,12 @@ function CompactLegend({ height , items , selectedItems , onLegendItemClick  })
             overflowY: 'scroll',
             margin: 0
         },
-        children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+        children: items.map((item, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
-                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                index: index,
+                isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',

package/dist/cjs/Legend/Legend.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "Legend", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _immer = require("immer");
-const _model = require("../model");
+const _core = require("@perses-dev/core");
 const _listLegend = require("./ListLegend");
 const _compactLegend = require("./CompactLegend");
 const _tableLegend = require("./TableLegend");
@@ -31,7 +31,7 @@ const _tableLegend = require("./TableLegend");
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange  }) {
+function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , tableProps  }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
@@ -64,7 +64,7 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         });
         onSelectedItemsChange(newSelected);
     };
-    const mode = (0, _model.getLegendMode)(options.mode);
+    const mode = (0, _core.getLegendMode)(options.mode);
     // The bottom legend is displayed as a list when the number of items is too
     // large and requires virtualization. Otherwise, it is rendered more compactly.
     // We do not need this check for the right-side legend because it is always
@@ -74,14 +74,17 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         height,
         items: data,
         selectedItems,
-        onLegendItemClick
+        onLegendItemClick,
+        onItemMouseOver,
+        onItemMouseOut
     };
     let legendContent;
     if (mode === 'Table') {
         legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableLegend.TableLegend, {
             ...commonLegendProps,
             onSelectedItemsChange: onSelectedItemsChange,
-            width: width
+            width: width,
+            ...tableProps
         });
     } else if (options.position === 'Right' || needsVirtualization) {
         legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {

package/dist/cjs/Legend/ListLegend.js

@@ -20,9 +20,9 @@ Object.defineProperty(exports, "ListLegend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _reactVirtuoso = require("react-virtuoso");
-const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
-function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
+const _legendModel = require("./legend-model");
+function ListLegend({ items , height , width , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
@@ -34,13 +34,14 @@ function ListLegend({ items , height , width , selectedItems , onLegendItemClick
         itemContent: (index, item)=>{
             return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
+                index: index,
                 truncateLabel: truncateLabels,
-                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
                 onClick: onLegendItemClick,
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 sx: {
-                    // Having an explicit width is important for the ellipsizing to
-                    // work correctly. Subtract padding to simulate padding.
-                    width: width,
+                    width: '100%',
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,14 +62,14 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , onMouseOver , onMouseOut , index , ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
-    function handleMouseOver() {
+    function handleTextMouseOver() {
         if (truncateLabel) {
             setNoWrap(false);
         }
     }
-    function handleMouseOut() {
+    function handleTextMouseOut() {
         if (truncateLabel) {
             setNoWrap(true);
         }
@@ -90,6 +90,18 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         dense: true,
         key: item.id,
         onClick: handleClick,
+        onMouseOver: (e)=>{
+            return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+                id: item.id,
+                index
+            });
+        },
+        onMouseOut: (e)=>{
+            return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+                id: item.id,
+                index
+            });
+        },
         selected: isVisuallySelected,
         ref: ref,
         children: [
@@ -107,8 +119,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
                 primaryTypographyProps: {
                     noWrap: noWrap
                 },
-                onMouseOver: handleMouseOver,
-                onMouseOut: handleMouseOut
+                onMouseOver: handleTextMouseOver,
+                onMouseOut: handleTextMouseOut
             })
         ]
     });

package/dist/cjs/Legend/TableLegend.js

@@ -25,6 +25,7 @@ const COLUMNS = [
     {
         accessorKey: 'label',
         header: 'Name',
+        enableSorting: true,
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
@@ -40,7 +41,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width  }) {
+function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , height , width , columns: additionalColumns = [] , sorting , onSortingChange  }) {
     const rowSelection = (0, _react.useMemo)(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
         // TODO: clean this up if we switch to also using checkboxes in list legend.
@@ -52,16 +53,29 @@ function TableLegend({ items , selectedItems: initRowSelection , onSelectedItems
         initRowSelection,
         items
     ]);
+    const columns = (0, _react.useMemo)(()=>{
+        return [
+            ...COLUMNS,
+            ...additionalColumns
+        ];
+    }, [
+        additionalColumns
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_table.Table, {
         height: height,
         width: width,
         rowSelection: rowSelection,
         onRowSelectionChange: onSelectedItemsChange,
+        onRowMouseOver: onItemMouseOver,
+        onRowMouseOut: onItemMouseOut,
+        sorting: sorting,
+        onSortingChange: onSortingChange,
         data: items,
-        columns: COLUMNS,
+        columns: columns,
         density: "compact",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,
-        checkboxSelection: true
+        checkboxSelection: true,
+        rowSelectionVariant: "legend"
     });
 }

package/dist/cjs/Legend/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./Legend"), exports);
+_exportStar(require("./legend-model"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/{model/units/types.js → Legend/legend-model.js}

@@ -10,19 +10,16 @@
 // 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.
-// Common types needed across individual unit groups and the overall combined
-// units.
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "UNIT_GROUPS", {
+Object.defineProperty(exports, "isLegendItemVisuallySelected", {
     enumerable: true,
-    get: ()=>UNIT_GROUPS
+    get: ()=>isLegendItemVisuallySelected
 });
-const UNIT_GROUPS = [
-    'Time',
-    'Percent',
-    'Decimal',
-    'Bytes'
-];
+function isLegendItemVisuallySelected(item, selectedItems) {
+    // In the "ALL" case, technically all legend items are selected, but we do
+    // not render them differently.
+    return selectedItems !== 'ALL' && !!selectedItems[item.id];
+}