@perses-dev/components 0.35.0 → 0.36.0

package/dist/ContentWithLegend/ContentWithLegend.d.ts

@@ -7,5 +7,5 @@ import { ContentWithLegendProps } from './model/content-with-legend-model';
  * See the documentation for the `Legend` component for more details about the
  * features and configuration of the legend.
  */
-export declare function ContentWithLegend({ children, legendProps, width, height, spacing, minChildrenWidth, minChildrenHeight, }: ContentWithLegendProps): JSX.Element;
+export declare function ContentWithLegend({ children, legendProps, width, height, spacing, legendSize, minChildrenWidth, minChildrenHeight, }: ContentWithLegendProps): JSX.Element;
 //# sourceMappingURL=ContentWithLegend.d.ts.map

package/dist/ContentWithLegend/ContentWithLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentWithLegend.d.ts","sourceRoot":"","sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,sBAAsB,EAA8B,MAAM,mCAAmC,CAAC;AAEvG;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAW,EACX,gBAAsB,EACtB,iBAAuB,GACxB,EAAE,sBAAsB,eAmCxB"}
+{"version":3,"file":"ContentWithLegend.d.ts","sourceRoot":"","sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,sBAAsB,EAA8B,MAAM,mCAAmC,CAAC;AAEvG;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAW,EACX,UAAU,EACV,gBAAsB,EACtB,iBAAuB,GACxB,EAAE,sBAAsB,eAoCxB"}

package/dist/ContentWithLegend/ContentWithLegend.js

@@ -13,6 +13,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box, useTheme } from '@mui/material';
+import { getLegendSize } from '@perses-dev/core';
 import { Legend } from '../Legend';
 import { getContentWithLegendLayout } from './model/content-with-legend-model';
 /**
@@ -21,7 +22,7 @@ import { getContentWithLegendLayout } from './model/content-with-legend-model';
  *
  * See the documentation for the `Legend` component for more details about the
  * features and configuration of the legend.
- */ export function ContentWithLegend({ children , legendProps , width , height , spacing =0 , minChildrenWidth =100 , minChildrenHeight =100  }) {
+ */ export function ContentWithLegend({ children , legendProps , width , height , spacing =0 , legendSize , minChildrenWidth =100 , minChildrenHeight =100  }) {
     const theme = useTheme();
     const { content , legend , margin  } = getContentWithLegendLayout({
         width,
@@ -30,7 +31,8 @@ import { getContentWithLegendLayout } from './model/content-with-legend-model';
         minChildrenHeight,
         minChildrenWidth,
         spacing,
-        theme
+        theme,
+        legendSize: getLegendSize(legendSize)
     });
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {

package/dist/ContentWithLegend/ContentWithLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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, useTheme } from '@mui/material';\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps) {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n  });\n\n  return (\n    <Box\n      sx={{\n        width,\n        height,\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        sx={{\n          width: content.width,\n          height: content.height,\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n          overflow: 'hidden',\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["React","Box","useTheme","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"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,QAAQ,QAAQ,eAAe,CAAC;AAC9C,SAASC,MAAM,QAAQ,WAAW,CAAC;AACnC,SAAiCC,0BAA0B,QAAQ,mCAAmC,CAAC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,iBAAiB,CAAC,EAChCC,QAAQ,CAAA,EACRC,WAAW,CAAA,EACXC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNC,OAAO,EAAG,CAAC,CAAA,EACXC,gBAAgB,EAAG,GAAG,CAAA,EACtBC,iBAAiB,EAAG,GAAG,CAAA,EACA,EAAE;IACzB,MAAMC,KAAK,GAAGX,QAAQ,EAAE,AAAC;IACzB,MAAM,EAAEY,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGZ,0BAA0B,CAAC;QAC7DI,KAAK;QACLC,MAAM;QACNF,WAAW;QACXK,iBAAiB;QACjBD,gBAAgB;QAChBD,OAAO;QACPG,KAAK;KACN,CAAC,AAAC;IAEH,qBACE,MAACZ,GAAG;QACFgB,EAAE,EAAE;YACFT,KAAK;YACLC,MAAM;YACNS,QAAQ,EAAE,UAAU;YACpBC,QAAQ,EAAE,QAAQ;SACnB;;0BAED,KAAClB,GAAG;gBACFgB,EAAE,EAAE;oBACFT,KAAK,EAAEM,OAAO,CAACN,KAAK;oBACpBC,MAAM,EAAEK,OAAO,CAACL,MAAM;oBACtBW,WAAW,EAAE,CAAC,EAAEJ,MAAM,CAACK,KAAK,CAAC,EAAE,CAAC;oBAChCC,YAAY,EAAE,CAAC,EAAEN,MAAM,CAACO,MAAM,CAAC,EAAE,CAAC;oBAClCJ,QAAQ,EAAE,QAAQ;iBACnB;0BAEA,OAAOb,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;oBAAEE,KAAK,EAAEM,OAAO,CAACN,KAAK;oBAAEC,MAAM,EAAEK,OAAO,CAACL,MAAM;iBAAE,CAAC,GAAGH,QAAQ;cACnG;YACLC,WAAW,IAAIQ,MAAM,CAACS,IAAI,kBAAI,KAACrB,MAAM;gBAAE,GAAGI,WAAW;gBAAEE,MAAM,EAAEM,MAAM,CAACN,MAAM;gBAAED,KAAK,EAAEO,MAAM,CAACP,KAAK;cAAI;;MAClG,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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, useTheme } from '@mui/material';\nimport { getLegendSize } from '@perses-dev/core';\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps) {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      sx={{\n        width,\n        height,\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        sx={{\n          width: content.width,\n          height: content.height,\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n          overflow: 'hidden',\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["React","Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"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,QAAQ,QAAQ,eAAe,CAAC;AAC9C,SAASC,aAAa,QAAQ,kBAAkB,CAAC;AACjD,SAASC,MAAM,QAAQ,WAAW,CAAC;AACnC,SAAiCC,0BAA0B,QAAQ,mCAAmC,CAAC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,iBAAiB,CAAC,EAChCC,QAAQ,CAAA,EACRC,WAAW,CAAA,EACXC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNC,OAAO,EAAG,CAAC,CAAA,EACXC,UAAU,CAAA,EACVC,gBAAgB,EAAG,GAAG,CAAA,EACtBC,iBAAiB,EAAG,GAAG,CAAA,EACA,EAAE;IACzB,MAAMC,KAAK,GAAGb,QAAQ,EAAE,AAAC;IACzB,MAAM,EAAEc,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGb,0BAA0B,CAAC;QAC7DI,KAAK;QACLC,MAAM;QACNF,WAAW;QACXM,iBAAiB;QACjBD,gBAAgB;QAChBF,OAAO;QACPI,KAAK;QACLH,UAAU,EAAET,aAAa,CAACS,UAAU,CAAC;KACtC,CAAC,AAAC;IAEH,qBACE,MAACX,GAAG;QACFkB,EAAE,EAAE;YACFV,KAAK;YACLC,MAAM;YACNU,QAAQ,EAAE,UAAU;YACpBC,QAAQ,EAAE,QAAQ;SACnB;;0BAED,KAACpB,GAAG;gBACFkB,EAAE,EAAE;oBACFV,KAAK,EAAEO,OAAO,CAACP,KAAK;oBACpBC,MAAM,EAAEM,OAAO,CAACN,MAAM;oBACtBY,WAAW,EAAE,CAAC,EAAEJ,MAAM,CAACK,KAAK,CAAC,EAAE,CAAC;oBAChCC,YAAY,EAAE,CAAC,EAAEN,MAAM,CAACO,MAAM,CAAC,EAAE,CAAC;oBAClCJ,QAAQ,EAAE,QAAQ;iBACnB;0BAEA,OAAOd,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;oBAAEE,KAAK,EAAEO,OAAO,CAACP,KAAK;oBAAEC,MAAM,EAAEM,OAAO,CAACN,MAAM;iBAAE,CAAC,GAAGH,QAAQ;cACnG;YACLC,WAAW,IAAIS,MAAM,CAACS,IAAI,kBAAI,KAACtB,MAAM;gBAAE,GAAGI,WAAW;gBAAEE,MAAM,EAAEO,MAAM,CAACP,MAAM;gBAAED,KAAK,EAAEQ,MAAM,CAACR,KAAK;cAAI;;MAClG,CACN;AACJ,CAAC"}

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
-import { LegendPositions } from '@perses-dev/core';
+import { LegendPositions, LegendSize } from '@perses-dev/core';
 import { LegendProps } from '../../Legend';
 declare type Dimensions = {
     width: number;
@@ -22,6 +22,12 @@ export interface ContentWithLegendProps {
      * to chart components.
      */
     children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);
+    /**
+     * Size used for the legend.
+     *
+     * @default 'Medium'
+     */
+    legendSize?: LegendSize;
     /**
      * Props to configure the legend. If not set, the content is rendered without
      * a legend.
@@ -58,11 +64,11 @@ export interface ContentWithLegendLayout {
         bottom: number;
     };
 }
-declare type LegendSizeConfig = Record<LegendPositions, number>;
+declare type LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;
 export declare const TABLE_LEGEND_SIZE: LegendSizeConfig;
 /**
  * Returns information for laying out content alongside a legend.
  */
-export declare function getContentWithLegendLayout({ width, height, legendProps, minChildrenHeight, minChildrenWidth, spacing, theme, }: ContentWithLegendLayoutOpts): ContentWithLegendLayout;
+export declare function getContentWithLegendLayout({ width, height, legendProps, legendSize, minChildrenHeight, minChildrenWidth, spacing, theme, }: ContentWithLegendLayoutOpts): ContentWithLegendLayout;
 export {};
 //# sourceMappingURL=content-with-legend-model.d.ts.map

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-with-legend-model.d.ts","sourceRoot":"","sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAiB,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACjF;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IACpD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,2BACf,SAAQ,QAAQ,CAAC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CAAC;IAC1E,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,GAAG;QACnB,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,gBAM/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CAqFvD"}
+{"version":3,"file":"content-with-legend-model.d.ts","sourceRoot":"","sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAiB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAEjF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAEpD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,2BACf,SAAQ,QAAQ,CAAC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CAAC;IAC1E,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,GAAG;QACnB,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,iBAAiB,EAAE,gBAe/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CAwFvD"}

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

@@ -13,17 +13,25 @@
 import { getLegendMode } from '@perses-dev/core';
 import { getTableCellLayout } from '../../Table';
 export 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;
 /**
  * Returns information for laying out content alongside a legend.
- */ export function getContentWithLegendLayout({ width , height , legendProps , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+ */ export 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 = {
@@ -70,8 +78,10 @@ const LEGEND_HEIGHT_LG = 100;
             }
             return total;
         }, 0);
-        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] + columnsWidth : width;
-        legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;
+        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/ContentWithLegend/model/content-with-legend-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { LegendPositions, getLegendMode } from '@perses-dev/core';\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts\n  extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendPositions, number>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  // 5 rows plus header. Value to be multiplied by row height in pixels.\n  Bottom: 6,\n\n  // Pixel value\n  Right: 250,\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'List') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'Right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'Right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] + columnsWidth : width;\n    legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'Right' && contentWidth < minChildrenWidth) ||\n    (position === 'Bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'Right' ? spacing : 0,\n      bottom: position === 'Bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","Bottom","Right","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","right","bottom","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","contentWidth","contentHeight"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { LegendPositions, getLegendMode, LegendSize } from '@perses-dev/core';\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n\n  /**\n   * Size used for the legend.\n   *\n   * @default 'Medium'\n   */\n  legendSize?: LegendSize;\n\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts\n  extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  Medium: {\n    // 5 rows plus header. Value to be multiplied by row height in pixels.\n    Bottom: 6,\n\n    // Pixel value\n    Right: 250,\n  },\n  Small: {\n    // 3 rows plus header. Value to be multiplied by row height in pixels.\n    Bottom: 4,\n\n    // Pixel value\n    Right: 150,\n  },\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  legendSize,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'List') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'Right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'Right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE[legendSize]['Right'] + columnsWidth : width;\n\n    // Use the smaller of the size-based row count or the number of legend items + 1 for the header.\n    const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['Bottom'], legendProps.data.length + 1);\n    legendHeight = position === 'Bottom' ? rowsToShow * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'Right' && contentWidth < minChildrenWidth) ||\n    (position === 'Bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'Right' ? spacing : 0,\n      bottom: position === 'Bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","Medium","Bottom","Right","Small","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","legendSize","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","right","bottom","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","rowsToShow","Math","min","data","length","contentWidth","contentHeight"],"mappings":"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"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TimeRangeValue } from '@perses-dev/core';
-import { TimeOption } from './TimeRangeSelector';
+import { TimeOption } from '../model';
 interface DateTimeRangePickerProps {
     value: TimeRangeValue;
     onChange: (value: TimeRangeValue) => void;

package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":";AAeA,OAAO,EAML,cAAc,EACf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAqB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEpE,UAAU,wBAAwB;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAwDlE"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":";AAeA,OAAO,EAML,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,wBAAwB;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAwDlE"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.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 { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  TimeRangeValue,\n} from '@perses-dev/core';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector, TimeOption } from './TimeRangeSelector';\n\ninterface DateTimeRangePickerProps {\n  value: TimeRangeValue;\n  onChange: (value: TimeRangeValue) => void;\n  timeOptions: TimeOption[];\n  height?: string;\n}\n\nexport function DateTimeRangePicker(props: DateTimeRangePickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  return (\n    <Stack direction=\"row\" spacing={1} height={height}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={timeOptions}\n            value={value}\n            height={height}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              onChange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","isRelativeTimeRange","toAbsoluteTimeRange","AbsoluteTimePicker","TimeRangeSelector","DateTimeRangePicker","props","value","onChange","timeOptions","height","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onCancel","fullWidth","ref","onSelectChange","event","duration","target","relativeTimeInput","pastDuration","end","Date","onCustomClick"],"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,QAAQ,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,eAAe,CAAC;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,kBAAkB,CAAC;AAC1B,SAASC,kBAAkB,QAAQ,sBAAsB,CAAC;AAC1D,SAASC,iBAAiB,QAAoB,qBAAqB,CAAC;AASpE,OAAO,SAASC,mBAAmB,CAACC,KAA+B,EAAE;IACnE,MAAM,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGJ,KAAK,AAAC;IAEvD,MAAM,CAACK,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC5E,MAAMkB,QAAQ,GAAGnB,MAAM,EAAE,AAAC;IAE1B,MAAMoB,kBAAkB,GAAGlB,OAAO,CAAC,IAAM;QACvC,OAAOK,mBAAmB,CAACM,KAAK,CAAC,GAAGL,mBAAmB,CAACK,KAAK,CAAC,GAAGA,KAAK,CAAC;IACzE,CAAC,EAAE;QAACA,KAAK;KAAC,CAAC,AAAC;IAEZ,qBACE,MAACP,KAAK;QAACe,SAAS,EAAC,KAAK;QAACC,OAAO,EAAE,CAAC;QAAEN,MAAM,EAAEA,MAAM;;0BAC/C,KAACX,OAAO;gBACNc,QAAQ,EAAEA,QAAQ,CAACI,OAAO;gBAC1BC,YAAY,EAAE;oBACZC,QAAQ,EAAE,QAAQ;oBAClBC,UAAU,EAAE,QAAQ;iBACrB;gBACDC,IAAI,EAAEV,sBAAsB;gBAC5BW,OAAO,EAAE,IAAMV,yBAAyB,CAAC,KAAK,CAAC;gBAC/CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,OAAO,EAAED,KAAK,CAACR,OAAO,CAAC,CAAC,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACb,kBAAkB;oBACjBuB,gBAAgB,EAAEZ,kBAAkB;oBACpCN,QAAQ,EAAE,CAACD,KAAwB,GAAK;wBACtCC,QAAQ,CAACD,KAAK,CAAC,CAAC;wBAChBK,yBAAyB,CAAC,KAAK,CAAC,CAAC;oBACnC,CAAC;oBACDe,QAAQ,EAAE,IAAMf,yBAAyB,CAAC,KAAK,CAAC;kBAChD;cACM;0BACV,KAACd,WAAW;gBAAC8B,SAAS;0BACpB,cAAA,KAAC/B,GAAG;oBAACgC,GAAG,EAAEhB,QAAQ;8BAChB,cAAA,KAACT,iBAAiB;wBAChBK,WAAW,EAAEA,WAAW;wBACxBF,KAAK,EAAEA,KAAK;wBACZG,MAAM,EAAEA,MAAM;wBACdoB,cAAc,EAAE,CAACC,KAAK,GAAK;4BACzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAAC1B,KAAK,AAAC;4BACpC,MAAM2B,iBAAiB,GAAsB;gCAC3CC,YAAY,EAAEH,QAAQ;gCACtBI,GAAG,EAAE,IAAIC,IAAI,EAAE;6BAChB,AAAC;4BACF7B,QAAQ,CAAC0B,iBAAiB,CAAC,CAAC;4BAC5BtB,yBAAyB,CAAC,KAAK,CAAC,CAAC;wBACnC,CAAC;wBACD0B,aAAa,EAAE,IAAM;4BACnB1B,yBAAyB,CAAC,IAAI,CAAC,CAAC;wBAClC,CAAC;sBACD;kBACE;cACM;;MACR,CACR;AACJ,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.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 { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  TimeRangeValue,\n} from '@perses-dev/core';\nimport { TimeOption } from '../model';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector } from './TimeRangeSelector';\n\ninterface DateTimeRangePickerProps {\n  value: TimeRangeValue;\n  onChange: (value: TimeRangeValue) => void;\n  timeOptions: TimeOption[];\n  height?: string;\n}\n\nexport function DateTimeRangePicker(props: DateTimeRangePickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  return (\n    <Stack direction=\"row\" spacing={1} height={height}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={timeOptions}\n            value={value}\n            height={height}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              onChange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","isRelativeTimeRange","toAbsoluteTimeRange","AbsoluteTimePicker","TimeRangeSelector","DateTimeRangePicker","props","value","onChange","timeOptions","height","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onCancel","fullWidth","ref","onSelectChange","event","duration","target","relativeTimeInput","pastDuration","end","Date","onCustomClick"],"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,QAAQ,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,eAAe,CAAC;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,kBAAkB,CAAC;AAE1B,SAASC,kBAAkB,QAAQ,sBAAsB,CAAC;AAC1D,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AASxD,OAAO,SAASC,mBAAmB,CAACC,KAA+B,EAAE;IACnE,MAAM,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGJ,KAAK,AAAC;IAEvD,MAAM,CAACK,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC5E,MAAMkB,QAAQ,GAAGnB,MAAM,EAAE,AAAC;IAE1B,MAAMoB,kBAAkB,GAAGlB,OAAO,CAAC,IAAM;QACvC,OAAOK,mBAAmB,CAACM,KAAK,CAAC,GAAGL,mBAAmB,CAACK,KAAK,CAAC,GAAGA,KAAK,CAAC;IACzE,CAAC,EAAE;QAACA,KAAK;KAAC,CAAC,AAAC;IAEZ,qBACE,MAACP,KAAK;QAACe,SAAS,EAAC,KAAK;QAACC,OAAO,EAAE,CAAC;QAAEN,MAAM,EAAEA,MAAM;;0BAC/C,KAACX,OAAO;gBACNc,QAAQ,EAAEA,QAAQ,CAACI,OAAO;gBAC1BC,YAAY,EAAE;oBACZC,QAAQ,EAAE,QAAQ;oBAClBC,UAAU,EAAE,QAAQ;iBACrB;gBACDC,IAAI,EAAEV,sBAAsB;gBAC5BW,OAAO,EAAE,IAAMV,yBAAyB,CAAC,KAAK,CAAC;gBAC/CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,OAAO,EAAED,KAAK,CAACR,OAAO,CAAC,CAAC,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACb,kBAAkB;oBACjBuB,gBAAgB,EAAEZ,kBAAkB;oBACpCN,QAAQ,EAAE,CAACD,KAAwB,GAAK;wBACtCC,QAAQ,CAACD,KAAK,CAAC,CAAC;wBAChBK,yBAAyB,CAAC,KAAK,CAAC,CAAC;oBACnC,CAAC;oBACDe,QAAQ,EAAE,IAAMf,yBAAyB,CAAC,KAAK,CAAC;kBAChD;cACM;0BACV,KAACd,WAAW;gBAAC8B,SAAS;0BACpB,cAAA,KAAC/B,GAAG;oBAACgC,GAAG,EAAEhB,QAAQ;8BAChB,cAAA,KAACT,iBAAiB;wBAChBK,WAAW,EAAEA,WAAW;wBACxBF,KAAK,EAAEA,KAAK;wBACZG,MAAM,EAAEA,MAAM;wBACdoB,cAAc,EAAE,CAACC,KAAK,GAAK;4BACzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAAC1B,KAAK,AAAC;4BACpC,MAAM2B,iBAAiB,GAAsB;gCAC3CC,YAAY,EAAEH,QAAQ;gCACtBI,GAAG,EAAE,IAAIC,IAAI,EAAE;6BAChB,AAAC;4BACF7B,QAAQ,CAAC0B,iBAAiB,CAAC,CAAC;4BAC5BtB,yBAAyB,CAAC,KAAK,CAAC,CAAC;wBACnC,CAAC;wBACD0B,aAAa,EAAE,IAAM;4BACnB1B,yBAAyB,CAAC,IAAI,CAAC,CAAC;wBAClC,CAAC;sBACD;kBACE;cACM;;MACR,CACR;AACJ,CAAC"}

package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts

@@ -1,10 +1,7 @@
 /// <reference types="react" />
 import { SelectChangeEvent } from '@mui/material';
-import { TimeRangeValue, RelativeTimeRange } from '@perses-dev/core';
-export interface TimeOption {
-    value: RelativeTimeRange;
-    display: string;
-}
+import { TimeRangeValue } from '@perses-dev/core';
+import { TimeOption } from '../model';
 interface TimeRangeSelectorProps {
     value: TimeRangeValue;
     timeOptions: TimeOption[];

package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAqD9D"}
+{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAqD9D"}

package/dist/DateTimeRangePicker/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      inputProps={{\n        'aria-label': `Select time range. Currently set to ${formattedValue}`,\n      }}\n      sx={{\n        // `transform: none` prevents calendar icon from flipping over when menu is open\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n          transform: 'none',\n        },\n        // paddingRight creates more space for the calendar icon (it's a bigger icon)\n        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n          paddingRight: '36px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","inputProps","sx","marginTop","transform","paddingRight","lineHeight","paddingY","map","item","idx","display","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAC1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAe/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGL,KAAK,AAAC;IAC5E,MAAM,EAAEM,QAAQ,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IACnC,MAAMW,cAAc,GAAG,CAACZ,mBAAmB,CAACM,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,EAAEQ,QAAQ,CAAC,GACtDL,KAAK,CAACO,YAAY,AAAC;IACvB,qBACE,MAACf,MAAM;QACLQ,KAAK,EAAEM,cAAc;QACrBE,QAAQ,EAAEN,cAAc;QACxBO,aAAa,EAAEhB,QAAQ;QACvBiB,UAAU,EAAE;YACV,YAAY,EAAE,CAAC,oCAAoC,EAAEJ,cAAc,CAAC,CAAC;SACtE;QACDK,EAAE,EAAE;YACF,gFAAgF;YAChF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;gBAChBC,SAAS,EAAE,MAAM;aAClB;YACD,6EAA6E;YAC7E,yDAAyD,EAAE;gBACzDC,YAAY,EAAE,MAAM;aACrB;YACD,mBAAmB,EAAEV,MAAM,GAAG;gBAAEW,UAAU,EAAEX,MAAM;gBAAEY,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAf,WAAW,CAACgB,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAAC5B,QAAQ;oBAAWS,KAAK,EAAEkB,IAAI,CAAClB,KAAK,CAACO,YAAY;8BAC/CW,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDzB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP8B,OAAO,EAAE,IAAM;oBACblB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBe,OAAO,EAAE,IAAM;oBACblB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAG,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { TimeOption } from '../model';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      inputProps={{\n        'aria-label': `Select time range. Currently set to ${formattedValue}`,\n      }}\n      sx={{\n        // `transform: none` prevents calendar icon from flipping over when menu is open\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n          transform: 'none',\n        },\n        // paddingRight creates more space for the calendar icon (it's a bigger icon)\n        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n          paddingRight: '36px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","inputProps","sx","marginTop","transform","paddingRight","lineHeight","paddingY","map","item","idx","display","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAAyBC,mBAAmB,QAAQ,kBAAkB,CAAC;AACvE,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAE1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAU/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGL,KAAK,AAAC;IAC5E,MAAM,EAAEM,QAAQ,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IACnC,MAAMW,cAAc,GAAG,CAACZ,mBAAmB,CAACM,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,EAAEQ,QAAQ,CAAC,GACtDL,KAAK,CAACO,YAAY,AAAC;IACvB,qBACE,MAACf,MAAM;QACLQ,KAAK,EAAEM,cAAc;QACrBE,QAAQ,EAAEN,cAAc;QACxBO,aAAa,EAAEhB,QAAQ;QACvBiB,UAAU,EAAE;YACV,YAAY,EAAE,CAAC,oCAAoC,EAAEJ,cAAc,CAAC,CAAC;SACtE;QACDK,EAAE,EAAE;YACF,gFAAgF;YAChF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;gBAChBC,SAAS,EAAE,MAAM;aAClB;YACD,6EAA6E;YAC7E,yDAAyD,EAAE;gBACzDC,YAAY,EAAE,MAAM;aACrB;YACD,mBAAmB,EAAEV,MAAM,GAAG;gBAAEW,UAAU,EAAEX,MAAM;gBAAEY,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAf,WAAW,CAACgB,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAAC5B,QAAQ;oBAAWS,KAAK,EAAEkB,IAAI,CAAClB,KAAK,CAACO,YAAY;8BAC/CW,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDzB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP8B,OAAO,EAAE,IAAM;oBACblB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBe,OAAO,EAAE,IAAM;oBACblB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAG,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}

package/dist/GaugeChart/GaugeChart.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { UnitOptions } from '@perses-dev/core';
 import { GaugeSeriesOption } from 'echarts/charts';
-import { UnitOptions } from '../model/units';
 export declare type GaugeChartValue = number | null | undefined;
 export declare type GaugeSeries = {
     value: GaugeChartValue;

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

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

package/dist/GaugeChart/GaugeChart.js

@@ -11,13 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useDeepMemo } from '@perses-dev/core';
+import { formatValue, useDeepMemo } from '@perses-dev/core';
 import { use } from 'echarts/core';
 import { GaugeChart as EChartsGaugeChart } from 'echarts/charts';
 import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
-import { formatValue } from '../model/units';
 import { EChart } from '../EChart';
 use([
     EChartsGaugeChart,

package/dist/GaugeChart/GaugeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GaugeChart/GaugeChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useDeepMemo } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\nexport interface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  unit: UnitOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, unit, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter:\n              data.value === null\n                ? // We use a different function when we *know* the value is null\n                  // at this level because the `formatter` function argument is `NaN`\n                  // when the value is `null`, making it difficult to differentiate\n                  // `null` from a true `NaN` case.\n                  () => 'null'\n                : (value: number) => {\n                    return formatValue(value, unit);\n                  },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, unit, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n        padding: `${chartsTheme.container.padding.default}px`,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number | null, unit: UnitOptions, width: number, height: number) {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = typeof value === 'number' ? formatValue(value, unit) : `${value}`;\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}
+{"version":3,"sources":["../../src/GaugeChart/GaugeChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { formatValue, useDeepMemo, UnitOptions } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\nexport interface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  unit: UnitOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, unit, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter:\n              data.value === null\n                ? // We use a different function when we *know* the value is null\n                  // at this level because the `formatter` function argument is `NaN`\n                  // when the value is `null`, making it difficult to differentiate\n                  // `null` from a true `NaN` case.\n                  () => 'null'\n                : (value: number) => {\n                    return formatValue(value, unit);\n                  },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, unit, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n        padding: `${chartsTheme.container.padding.default}px`,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number | null, unit: UnitOptions, width: number, height: number) {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = typeof value === 'number' ? formatValue(value, unit) : `${value}`;\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["formatValue","useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}

package/dist/Legend/CompactLegend.d.ts

@@ -6,6 +6,8 @@ export interface CompactLegendProps {
     items: LegendItem[];
     selectedItems: SelectedLegendItemState;
     onLegendItemClick: ListLegendItemProps['onClick'];
+    onItemMouseOver: ListLegendItemProps['onMouseOver'];
+    onItemMouseOut: ListLegendItemProps['onMouseOut'];
 }
 /**
  * CompactLegend is default and used when legend items need to show side by side
@@ -13,5 +15,5 @@ export interface CompactLegendProps {
  * number of items. The `ListLegend` is used for cases with large numbers of items
  * because it is virtualized.
  */
-export declare function CompactLegend({ height, items, selectedItems, onLegendItemClick }: CompactLegendProps): JSX.Element;
+export declare function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut, }: CompactLegendProps): JSX.Element;
 //# sourceMappingURL=CompactLegend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AAEnG,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,eAkBpG"}
+{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AAEnG,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAClD,eAAe,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,cAAc,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,kBAAkB,eAqBpB"}

package/dist/Legend/CompactLegend.js

@@ -19,7 +19,7 @@ import { isLegendItemVisuallySelected } from './legend-model';
  * which corresponds to when legend.position is `bottom` with a relatively small
  * number of items. The `ListLegend` is used for cases with large numbers of items
  * because it is virtualized.
- */ export function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
+ */ export function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     return /*#__PURE__*/ _jsx(Box, {
         component: "ul",
         sx: {
@@ -34,9 +34,12 @@ import { isLegendItemVisuallySelected } from './legend-model';
             overflowY: 'scroll',
             margin: 0
         },
-        children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
+        children: items.map((item, index)=>/*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,
+                index: index,
                 isVisuallySelected: isLegendItemVisuallySelected(item, selectedItems),
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"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 { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\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` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({ height, items, selectedItems, onLegendItemClick }: 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          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","isLegendItemVisuallySelected","CompactLegend","height","items","selectedItems","onLegendItemClick","component","sx","width","padding","overflowY","margin","map","item","isVisuallySelected","onClick","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;AACpC,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AACvE,SAA8CC,4BAA4B,QAAQ,gBAAgB,CAAC;AASnG;;;;;CAKC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,aAAa,CAAA,EAAEC,iBAAiB,CAAA,EAAsB,EAAE;IACrG,qBACE,KAACP,GAAG;QAACQ,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEN,MAAM;YAAEO,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGR,KAAK,CAACS,GAAG,CAAC,CAACC,IAAI,iBACd,KAACd,cAAc;gBAEbc,IAAI,EAAEA,IAAI;gBACVC,kBAAkB,EAAEd,4BAA4B,CAACa,IAAI,EAAET,aAAa,CAAC;gBACrEW,OAAO,EAAEV,iBAAiB;gBAC1BE,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbQ,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eARIJ,IAAI,CAACK,EAAE,CASZ,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 { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\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` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({\n  height,\n  items,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: CompactLegendProps) {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item, index) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          index={index}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onMouseOver={onItemMouseOver}\n          onMouseOut={onItemMouseOut}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","isLegendItemVisuallySelected","CompactLegend","height","items","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","component","sx","width","padding","overflowY","margin","map","item","index","isVisuallySelected","onMouseOver","onMouseOut","onClick","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;AACpC,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AACvE,SAA8CC,4BAA4B,QAAQ,gBAAgB,CAAC;AAWnG;;;;;CAKC,GACD,OAAO,SAASC,aAAa,CAAC,EAC5BC,MAAM,CAAA,EACNC,KAAK,CAAA,EACLC,aAAa,CAAA,EACbC,iBAAiB,CAAA,EACjBC,eAAe,CAAA,EACfC,cAAc,CAAA,EACK,EAAE;IACrB,qBACE,KAACT,GAAG;QAACU,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAER,MAAM;YAAES,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGV,KAAK,CAACW,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,iBACrB,KAACjB,cAAc;gBAEbgB,IAAI,EAAEA,IAAI;gBACVC,KAAK,EAAEA,KAAK;gBACZC,kBAAkB,EAAEjB,4BAA4B,CAACe,IAAI,EAAEX,aAAa,CAAC;gBACrEc,WAAW,EAAEZ,eAAe;gBAC5Ba,UAAU,EAAEZ,cAAc;gBAC1Ba,OAAO,EAAEf,iBAAiB;gBAC1BI,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbW,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eAXIP,IAAI,CAACQ,EAAE,CAYZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}

package/dist/Legend/Legend.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TableLegendProps } from './TableLegend';
 import { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';
+import { ListLegendItemProps } from './ListLegendItem';
 export interface LegendProps {
     width: number;
     height: number;
@@ -17,10 +18,18 @@ export interface LegendProps {
      * Callback fired when the selected items in the legend changes.
      */
     onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;
+    /**
+     * Callback fired when the mouse is moved over a legend item.
+     */
+    onItemMouseOver?: ListLegendItemProps['onMouseOver'];
+    /**
+     * Callback fired when the mouse is moved out of a legend item.
+     */
+    onItemMouseOut?: ListLegendItemProps['onMouseOut'];
     /**
      * Props specific to legend with `mode` set to `table`.
      */
-    tableProps?: Pick<TableLegendProps, 'columns'>;
+    tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;
 }
-export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange, tableProps, }: LegendProps): JSX.Element;
+export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, tableProps, }: LegendProps): JSX.Element;
 //# sourceMappingURL=Legend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE7F,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC;IAEhC;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEtE;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;CAChD;AASD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,aAAa,EACb,qBAAqB,EACrB,UAAU,GACX,EAAE,WAAW,eA4Fb"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC;IAEhC;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEtE;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IAErD;;OAEG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAEnD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAAC,CAAC;CAChF;AASD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,aAAa,EACb,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,UAAU,GACX,EAAE,WAAW,eA8Fb"}

package/dist/Legend/Legend.js

@@ -23,7 +23,7 @@ import { TableLegend } from './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;
-export function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , tableProps  }) {
+export function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , tableProps  }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = produce(selectedItems, (draft)=>{
@@ -66,7 +66,9 @@ export function Legend({ width , height , options , data , selectedItems , onSel
         height,
         items: data,
         selectedItems,
-        onLegendItemClick
+        onLegendItemClick,
+        onItemMouseOver,
+        onItemMouseOut
     };
     let legendContent;
     if (mode === 'Table') {

package/dist/Legend/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { produce } from 'immer';\nimport { ReactNode } from 'react';\nimport { getLegendMode } from '@perses-dev/core';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend, TableLegendProps } from './TableLegend';\nimport { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendComponentOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n\n  /**\n   * Props specific to legend with `mode` set to `table`.\n   */\n  tableProps?: Pick<TableLegendProps, 'columns'>;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({\n  width,\n  height,\n  options,\n  data,\n  selectedItems,\n  onSelectedItemsChange,\n  tableProps,\n}: LegendProps) {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const mode = getLegendMode(options.mode);\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n\n  const commonLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n  };\n\n  let legendContent: ReactNode;\n  if (mode === 'Table') {\n    legendContent = (\n      <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} {...tableProps} />\n    );\n  } else if (options.position === 'Right' || needsVirtualization) {\n    legendContent = <ListLegend {...commonLegendProps} width={width} onLegendItemClick={onLegendItemClick} />;\n  } else {\n    legendContent = <CompactLegend {...commonLegendProps} onLegendItemClick={onLegendItemClick} />;\n  }\n\n  if (options.position === 'Right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: height,\n          position: 'absolute',\n          top: 0,\n          right: 0,\n        }}\n      >\n        {legendContent}\n      </Box>\n    );\n  }\n\n  // Position bottom\n  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\n      }}\n    >\n      {legendContent}\n    </Box>\n  );\n}\n"],"names":["Box","produce","getLegendMode","ListLegend","CompactLegend","TableLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","tableProps","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","sx","top","right","bottom"],"mappings":"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"}
+{"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 { produce } from 'immer';\nimport { ReactNode } from 'react';\nimport { getLegendMode } from '@perses-dev/core';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend, TableLegendProps } from './TableLegend';\nimport { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';\nimport { ListLegendItemProps } from './ListLegendItem';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendComponentOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n\n  /**\n   * Callback fired when the mouse is moved over a legend item.\n   */\n  onItemMouseOver?: ListLegendItemProps['onMouseOver'];\n\n  /**\n   * Callback fired when the mouse is moved out of a legend item.\n   */\n  onItemMouseOut?: ListLegendItemProps['onMouseOut'];\n\n  /**\n   * Props specific to legend with `mode` set to `table`.\n   */\n  tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({\n  width,\n  height,\n  options,\n  data,\n  selectedItems,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  tableProps,\n}: LegendProps) {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const mode = getLegendMode(options.mode);\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n\n  const commonLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n    onItemMouseOver,\n    onItemMouseOut,\n  };\n\n  let legendContent: ReactNode;\n  if (mode === 'Table') {\n    legendContent = (\n      <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} {...tableProps} />\n    );\n  } else if (options.position === 'Right' || needsVirtualization) {\n    legendContent = <ListLegend {...commonLegendProps} width={width} onLegendItemClick={onLegendItemClick} />;\n  } else {\n    legendContent = <CompactLegend {...commonLegendProps} onLegendItemClick={onLegendItemClick} />;\n  }\n\n  if (options.position === 'Right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: height,\n          position: 'absolute',\n          top: 0,\n          right: 0,\n        }}\n      >\n        {legendContent}\n      </Box>\n    );\n  }\n\n  // Position bottom\n  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\n      }}\n    >\n      {legendContent}\n    </Box>\n  );\n}\n"],"names":["Box","produce","getLegendMode","ListLegend","CompactLegend","TableLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","tableProps","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","sx","top","right","bottom"],"mappings":"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"}