@perses-dev/components 0.33.0 → 0.34.0

package/dist/ContentWithLegend/ContentWithLegend.js

@@ -26,7 +26,7 @@ import { getContentWithLegendLayout } from './model/content-with-legend-model';
     const { content , legend , margin  } = getContentWithLegendLayout({
         width,
         height,
-        legendOptions: legendProps === null || legendProps === void 0 ? void 0 : legendProps.options,
+        legendProps,
         minChildrenHeight,
         minChildrenWidth,
         spacing,

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    legendOptions: legendProps?.options,\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","legendOptions","options","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;QACNQ,aAAa,EAAEV,WAAW,aAAXA,WAAW,WAAS,GAApBA,KAAAA,CAAoB,GAApBA,WAAW,CAAEW,OAAO;QACnCN,iBAAiB;QACjBD,gBAAgB;QAChBD,OAAO;QACPG,KAAK;KACN,CAAC,AAAC;IAEH,qBACE,MAACZ,GAAG;QACFkB,EAAE,EAAE;YACFX,KAAK;YACLC,MAAM;YACNW,QAAQ,EAAE,UAAU;YACpBC,QAAQ,EAAE,QAAQ;SACnB;;0BAED,KAACpB,GAAG;gBACFkB,EAAE,EAAE;oBACFX,KAAK,EAAEM,OAAO,CAACN,KAAK;oBACpBC,MAAM,EAAEK,OAAO,CAACL,MAAM;oBACtBa,WAAW,EAAE,CAAC,EAAEN,MAAM,CAACO,KAAK,CAAC,EAAE,CAAC;oBAChCC,YAAY,EAAE,CAAC,EAAER,MAAM,CAACS,MAAM,CAAC,EAAE,CAAC;oBAClCJ,QAAQ,EAAE,QAAQ;iBACnB;0BAEA,OAAOf,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,CAACW,IAAI,kBAAI,KAACvB,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 { 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"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
+import { LegendPositions } from '@perses-dev/core';
 import { LegendProps } from '../../Legend';
-import { LegendPositions } from '../../model/legend';
 declare type Dimensions = {
     width: number;
     height: number;
@@ -45,7 +45,7 @@ export interface ContentWithLegendProps {
     minChildrenHeight?: number;
 }
 export interface ContentWithLegendLayoutOpts extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {
-    legendOptions?: LegendProps['options'];
+    legendProps?: ContentWithLegendProps['legendProps'];
     theme: Theme;
 }
 export interface ContentWithLegendLayout {
@@ -63,6 +63,6 @@ export declare const TABLE_LEGEND_SIZE: LegendSizeConfig;
 /**
  * Returns information for laying out content alongside a legend.
  */
-export declare function getContentWithLegendLayout({ width, height, legendOptions, minChildrenHeight, minChildrenWidth, spacing, theme, }: ContentWithLegendLayoutOpts): ContentWithLegendLayout;
+export declare function getContentWithLegendLayout({ width, height, legendProps, 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,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAiB,MAAM,oBAAoB,CAAC;AAEpE,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,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,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,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CA4EvD"}
+{"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"}

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

@@ -10,8 +10,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+import { getLegendMode } from '@perses-dev/core';
 import { getTableCellLayout } from '../../Table';
-import { getLegendMode } from '../../model/legend';
 export const TABLE_LEGEND_SIZE = {
     // 5 rows plus header. Value to be multiplied by row height in pixels.
     Bottom: 6,
@@ -23,7 +23,8 @@ const LEGEND_HEIGHT_SM = 40;
 const LEGEND_HEIGHT_LG = 100;
 /**
  * Returns information for laying out content alongside a legend.
- */ export function getContentWithLegendLayout({ width , height , legendOptions , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+ */ export function getContentWithLegendLayout({ width , height , legendProps , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+    const legendOptions = legendProps === null || legendProps === void 0 ? void 0 : legendProps.options;
     const hasLegend = !!legendOptions;
     const noLegendLayout = {
         legend: {
@@ -59,9 +60,17 @@ const LEGEND_HEIGHT_LG = 100;
             legendHeight = LEGEND_HEIGHT_LG;
         }
     } else {
+        var ref;
         // Table mode
         const tableLayout = getTableCellLayout(theme, 'compact');
-        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] : width;
+        const tableColumns = (legendProps === null || legendProps === void 0 ? void 0 : (ref = legendProps.tableProps) === null || ref === void 0 ? void 0 : ref.columns) || [];
+        const columnsWidth = tableColumns.reduce((total, col)=>{
+            if (typeof col.width === 'number') {
+                total += col.width;
+            }
+            return total;
+        }, 0);
+        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] + columnsWidth : width;
         legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;
     }
     const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;

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 { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\nimport { LegendPositions, getLegendMode } from '../../model/legend';\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  legendOptions?: LegendProps['options'];\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  legendOptions,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\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    legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] : 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":["getTableCellLayout","getLegendMode","TABLE_LEGEND_SIZE","Bottom","Right","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendOptions","minChildrenHeight","minChildrenWidth","spacing","theme","hasLegend","noLegendLayout","legend","show","content","margin","right","bottom","position","mode","legendWidth","legendHeight","tableLayout","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 } 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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"}

package/dist/EChart/EChart.d.ts

@@ -54,8 +54,9 @@ export interface EChartsProps<T> {
     sx?: SxProps<Theme>;
     onEvents?: OnEventsType<T>;
     _instance?: React.MutableRefObject<ECharts | undefined>;
+    syncGroup?: string;
     onChartInitialized?: (instance: ECharts) => void;
 }
-export declare const EChart: React.MemoExoticComponent<(<T>({ option, theme, renderer, sx, onEvents, _instance, onChartInitialized, }: EChartsProps<T>) => JSX.Element)>;
+export declare const EChart: React.MemoExoticComponent<(<T>({ option, theme, renderer, sx, onEvents, _instance, syncGroup, onChartInitialized, }: EChartsProps<T>) => JSX.Element)>;
 export {};
 //# sourceMappingURL=EChart.d.ts.map

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

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

package/dist/EChart/EChart.js

@@ -12,9 +12,10 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
-import { init } from 'echarts/core';
+import { init, connect } from 'echarts/core';
 import { Box } from '@mui/material';
-import { isEqual, debounce } from 'lodash-es';
+import isEqual from 'lodash/isEqual';
+import debounce from 'lodash/debounce';
 const mouseEvents = [
     'click',
     'dblclick',
@@ -31,7 +32,7 @@ const batchEvents = [
     'downplay',
     'highlight'
 ];
-export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , onChartInitialized  }) {
+export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , syncGroup , onChartInitialized  }) {
     const initialOption = useRef(option);
     const prevOption = useRef(option);
     const containerRef = useRef(null);
@@ -59,6 +60,17 @@ export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme
         theme,
         renderer
     ]);
+    // When syncGroup is explicitly set, charts within same group share interactions such as crosshair
+    useEffect(()=>{
+        if (!chartElement.current || !syncGroup) return;
+        chartElement.current.group = syncGroup;
+        connect([
+            chartElement.current
+        ]); // more info: https://echarts.apache.org/en/api.html#echarts.connect
+    }, [
+        syncGroup,
+        chartElement
+    ]);
     // Update chart data when option changes
     useEffect(()=>{
         if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;

package/dist/EChart/EChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from '../model';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return () => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return () => {\n      window.removeEventListener('resize', updateSize);\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return () => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  // TODO: re-evaluate how this is triggered. It's technically working right\n  // now because the sx prop is an object that gets re-created, but that also\n  // means it runs unnecessarily some of the time and theoretically might\n  // not run in some other cases. Maybe it should use a resize observer?\n  useEffect(() => {\n    // TODO: fix this debouncing. This likely isn't working as intended because\n    // the debounced function is re-created every time this useEffect is called.\n    const updateSize = debounce(\n      () => {\n        if (!chartElement.current) return;\n        chartElement.current.resize();\n      },\n      200,\n      {\n        leading: true,\n      }\n    );\n    updateSize();\n  }, [sx]);\n\n  return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown) {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","leading","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}
+{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init, connect } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport isEqual from 'lodash/isEqual';\nimport debounce from 'lodash/debounce';\nimport { EChartsTheme } from '../model';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  syncGroup?: string;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\n  syncGroup,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return () => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\n\n  // When syncGroup is explicitly set, charts within same group share interactions such as crosshair\n  useEffect(() => {\n    if (!chartElement.current || !syncGroup) return;\n    chartElement.current.group = syncGroup;\n    connect([chartElement.current]); // more info: https://echarts.apache.org/en/api.html#echarts.connect\n  }, [syncGroup, chartElement]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return () => {\n      window.removeEventListener('resize', updateSize);\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return () => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  // TODO: re-evaluate how this is triggered. It's technically working right\n  // now because the sx prop is an object that gets re-created, but that also\n  // means it runs unnecessarily some of the time and theoretically might\n  // not run in some other cases. Maybe it should use a resize observer?\n  useEffect(() => {\n    // TODO: fix this debouncing. This likely isn't working as intended because\n    // the debounced function is re-created every time this useEffect is called.\n    const updateSize = debounce(\n      () => {\n        if (!chartElement.current) return;\n        chartElement.current.resize();\n      },\n      200,\n      {\n        leading: true,\n      }\n    );\n    updateSize();\n  }, [sx]);\n\n  return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown) {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["React","useEffect","useLayoutEffect","useRef","init","connect","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","syncGroup","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","group","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","leading","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}

package/dist/Legend/CompactLegend.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { LegendItem, SelectedLegendItemState } from '../model';
 import { ListLegendItemProps } from './ListLegendItem';
+import { LegendItem, SelectedLegendItemState } from './legend-model';
 export interface CompactLegendProps {
     height: number;
     items: LegendItem[];

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,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,UAAU,CAAC;AAC7F,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE,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;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,eAkBpG"}

package/dist/Legend/CompactLegend.js

@@ -12,8 +12,8 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { isLegendItemVisuallySelected } from '../model';
 import { ListLegendItem } from './ListLegendItem';
+import { isLegendItemVisuallySelected } from './legend-model';
 /**
  * CompactLegend is default and used when legend items need to show side by side
  * which corresponds to when legend.position is `bottom` with a relatively small

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 { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from '../model';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\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","isLegendItemVisuallySelected","ListLegendItem","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,SAA8CC,4BAA4B,QAAQ,UAAU,CAAC;AAC7F,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AASvE;;;;;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,KAACb,cAAc;gBAEba,IAAI,EAAEA,IAAI;gBACVC,kBAAkB,EAAEf,4BAA4B,CAACc,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}\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"}

package/dist/Legend/Legend.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { LegendOptions, LegendItem, SelectedLegendItemState } from '../model';
+import { TableLegendProps } from './TableLegend';
+import { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';
 export interface LegendProps {
     width: number;
     height: number;
     data: LegendItem[];
-    options: LegendOptions;
+    options: LegendComponentOptions;
     /**
      * State of selected items in the legend.
      *
@@ -16,6 +17,10 @@ export interface LegendProps {
      * Callback fired when the selected items in the legend changes.
      */
     onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;
+    /**
+     * Props specific to legend with `mode` set to `table`.
+     */
+    tableProps?: Pick<TableLegendProps, 'columns'>;
 }
-export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange }: LegendProps): JSX.Element;
+export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange, 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":";AAgBA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,uBAAuB,EAAiB,MAAM,UAAU,CAAC;AAK7F,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;CACvE;AASD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,qBAAqB,EAAE,EAAE,WAAW,eA0FzG"}
+{"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"}

package/dist/Legend/Legend.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { produce } from 'immer';
-import { getLegendMode } from '../model';
+import { getLegendMode } from '@perses-dev/core';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
 import { TableLegend } from './TableLegend';
@@ -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  }) {
+export function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , tableProps  }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = produce(selectedItems, (draft)=>{
@@ -73,7 +73,8 @@ export function Legend({ width , height , options , data , selectedItems , onSel
         legendContent = /*#__PURE__*/ _jsx(TableLegend, {
             ...commonLegendProps,
             onSelectedItemsChange: onSelectedItemsChange,
-            width: width
+            width: width,
+            ...tableProps
         });
     } else if (options.position === 'Right' || needsVirtualization) {
         legendContent = /*#__PURE__*/ _jsx(ListLegend, {

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 { LegendOptions, LegendItem, SelectedLegendItemState, getLegendMode } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend } from './TableLegend';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\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// 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({ width, height, options, data, selectedItems, onSelectedItemsChange }: 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 = <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} />;\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","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';\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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"}

package/dist/Legend/ListLegend.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { LegendItem, SelectedLegendItemState } from '../model';
 import { ListLegendItemProps } from './ListLegendItem';
+import { LegendItem, SelectedLegendItemState } from './legend-model';
 export interface ListLegendProps {
     items: LegendItem[];
     height: number;

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

@@ -1 +1 @@
-{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,UAAU,CAAC;AAC7F,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,eAAe,eA6BrG"}
+{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AAEnG,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,eAAe,eA6BrG"}

package/dist/Legend/ListLegend.js

@@ -12,8 +12,8 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Virtuoso } from 'react-virtuoso';
-import { isLegendItemVisuallySelected } from '../model';
 import { ListLegendItem } from './ListLegendItem';
+import { isLegendItemVisuallySelected } from './legend-model';
 /**
  * ListLegend is used when legend.position is 'right' since legend items are
  * stacked. It is also used for `bottom` positioned legends when there are a

package/dist/Legend/ListLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Virtuoso } from 'react-virtuoso';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from '../model';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({ items, height, width, selectedItems, onLegendItemClick }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            sx={{\n              // Having an explicit width is important for the ellipsizing to\n              // work correctly. Subtract padding to simulate padding.\n              width: width,\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n}\n"],"names":["Virtuoso","isLegendItemVisuallySelected","ListLegendItem","ListLegend","items","height","width","selectedItems","onLegendItemClick","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","sx","wordBreak","overflow","id","role"],"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,QAAQ,gBAAgB,CAAC;AAC1C,SAA8CC,4BAA4B,QAAQ,UAAU,CAAC;AAC7F,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AAUvE;;;;;CAKC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,aAAa,CAAA,EAAEC,iBAAiB,CAAA,EAAmB,EAAE;IACtG,6DAA6D;IAC7D,MAAMC,cAAc,GAAGL,KAAK,CAACM,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAACV,QAAQ;QACPW,KAAK,EAAE;YAAEN,MAAM;YAAEC,KAAK;SAAE;QACxBM,IAAI,EAAER,KAAK;QACXS,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAACb,cAAc;gBAEba,IAAI,EAAEA,IAAI;gBACVC,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEhB,4BAA4B,CAACc,IAAI,EAAER,aAAa,CAAC;gBACrEW,OAAO,EAAEV,iBAAiB;gBAC1BW,EAAE,EAAE;oBACF,+DAA+D;oBAC/D,wDAAwD;oBACxDb,KAAK,EAAEA,KAAK;oBACZc,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAXIN,IAAI,CAACO,EAAE,CAYZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;MACX,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Virtuoso } from 'react-virtuoso';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({ items, height, width, selectedItems, onLegendItemClick }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            sx={{\n              // Having an explicit width is important for the ellipsizing to\n              // work correctly. Subtract padding to simulate padding.\n              width: width,\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n}\n"],"names":["Virtuoso","ListLegendItem","isLegendItemVisuallySelected","ListLegend","items","height","width","selectedItems","onLegendItemClick","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","sx","wordBreak","overflow","id","role"],"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,QAAQ,gBAAgB,CAAC;AAC1C,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AACvE,SAA8CC,4BAA4B,QAAQ,gBAAgB,CAAC;AAUnG;;;;;CAKC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,aAAa,CAAA,EAAEC,iBAAiB,CAAA,EAAmB,EAAE;IACtG,6DAA6D;IAC7D,MAAMC,cAAc,GAAGL,KAAK,CAACM,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAACV,QAAQ;QACPW,KAAK,EAAE;YAAEN,MAAM;YAAEC,KAAK;SAAE;QACxBM,IAAI,EAAER,KAAK;QACXS,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAACd,cAAc;gBAEbc,IAAI,EAAEA,IAAI;gBACVC,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEf,4BAA4B,CAACa,IAAI,EAAER,aAAa,CAAC;gBACrEW,OAAO,EAAEV,iBAAiB;gBAC1BW,EAAE,EAAE;oBACF,+DAA+D;oBAC/D,wDAAwD;oBACxDb,KAAK,EAAEA,KAAK;oBACZc,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAXIN,IAAI,CAACO,EAAE,CAYZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;MACX,CACF;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ListItemProps } from '@mui/material';
-import { LegendItem } from '../model';
+import { LegendItem } from './legend-model';
 export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick'> {
     item: LegendItem;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAChF,IAAI,EAAE,UAAU,CAAC;IAEjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAElF;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAwDD,eAAO,MAAM,cAAc,o6JAAiC,CAAC"}
+{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAChF,IAAI,EAAE,UAAU,CAAC;IAEjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAElF;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAwDD,eAAO,MAAM,cAAc,o6JAAiC,CAAC"}

package/dist/Legend/ListLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegendItem.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { forwardRef, useState } from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\nexport interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick'> {\n  item: LegendItem;\n\n  /**\n   * When true, the item is rendered differently to visually communicate it is\n   * selected.\n   */\n  isVisuallySelected?: boolean;\n\n  onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;\n\n  /**\n   * When `true`, will keep labels to a single line with overflow ellipsized. The\n   * full content will be shown on hover.\n   *\n   * When `false` or unset, will show the full label.\n   */\n  truncateLabel?: boolean;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onClick, isVisuallySelected, ...others },\n  ref\n) {\n  const [noWrap, setNoWrap] = useState(truncateLabel);\n\n  function handleMouseOver() {\n    if (truncateLabel) {\n      setNoWrap(false);\n    }\n  }\n\n  function handleMouseOut() {\n    if (truncateLabel) {\n      setNoWrap(true);\n    }\n  }\n\n  const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    onClick(e, item.id);\n    item.onClick?.(e);\n  };\n\n  return (\n    <ListItem\n      {...others}\n      component=\"div\"\n      role=\"listitem\"\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={handleClick}\n      selected={isVisuallySelected}\n      ref={ref}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ noWrap: noWrap }}\n        onMouseOver={handleMouseOver}\n        onMouseOut={handleMouseOut}\n      ></ListItemText>\n    </ListItem>\n  );\n});\n\nexport const ListLegendItem = React.memo(ListLegendItemBase);\n"],"names":["React","forwardRef","useState","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onClick","isVisuallySelected","others","ref","noWrap","setNoWrap","handleMouseOver","handleMouseOut","handleClick","e","id","component","role","padding","cursor","dense","key","selected","display","alignItems","color","primary","label","primaryTypographyProps","onMouseOver","onMouseOut","memo"],"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,IAAIC,UAAU,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AACpD,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAsBtD,MAAMC,kBAAkB,iBAAGP,UAAU,CAAsC,SAASQ,cAAc,CAChG,EAAEC,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAEC,aAAa,CAAA,EAAEC,OAAO,CAAA,EAAEC,kBAAkB,CAAA,EAAE,GAAGC,MAAM,EAAE,EACnEC,GAAG,EACH;IACA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAACU,aAAa,CAAC,AAAC;IAEpD,SAASO,eAAe,GAAG;QACzB,IAAIP,aAAa,EAAE;YACjBM,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,SAASE,cAAc,GAAG;QACxB,IAAIR,aAAa,EAAE;YACjBM,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAED,MAAMG,WAAW,GAA4C,CAACC,CAAC,GAAK;YAElEZ,GAAY;QADZG,OAAO,CAACS,CAAC,EAAEZ,IAAI,CAACa,EAAE,CAAC,CAAC;QACpBb,CAAAA,GAAY,GAAZA,IAAI,CAACG,OAAO,cAAZH,GAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,GAAY,CAAZA,IAAiB,CAAjBA,IAAI,EAAWY,CAAC,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,qBACE,eAACjB,QAAQ;QACN,GAAGU,MAAM;QACVS,SAAS,EAAC,KAAK;QACfC,IAAI,EAAC,UAAU;QACfd,EAAE,EAAEL,SAAS,CACX;YACEoB,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDhB,EAAE,CACH;QACDiB,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEnB,IAAI,CAACa,EAAE;QACZV,OAAO,EAAEQ,WAAW;QACpBS,QAAQ,EAAEhB,kBAAkB;QAC5BE,GAAG,EAAEA,GAAG;;0BAER,KAACb,GAAG;gBAACQ,EAAE,EAAE;oBAAEoB,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACzB,gBAAgB;oBAAC0B,KAAK,EAAEvB,IAAI,CAACuB,KAAK;kBAAI;cACnC;0BACN,KAAC7B,YAAY;gBACX8B,OAAO,EAAExB,IAAI,CAACyB,KAAK;gBACnBC,sBAAsB,EAAE;oBAAEnB,MAAM,EAAEA,MAAM;iBAAE;gBAC1CoB,WAAW,EAAElB,eAAe;gBAC5BmB,UAAU,EAAElB,cAAc;cACZ;;MACP,CACX;AACJ,CAAC,CAAC,AAAC;AAEH,OAAO,MAAMX,cAAc,iBAAGT,KAAK,CAACuC,IAAI,CAAC/B,kBAAkB,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegendItem.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { forwardRef, useState } from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\nimport { LegendItem } from './legend-model';\n\nexport interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick'> {\n  item: LegendItem;\n\n  /**\n   * When true, the item is rendered differently to visually communicate it is\n   * selected.\n   */\n  isVisuallySelected?: boolean;\n\n  onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;\n\n  /**\n   * When `true`, will keep labels to a single line with overflow ellipsized. The\n   * full content will be shown on hover.\n   *\n   * When `false` or unset, will show the full label.\n   */\n  truncateLabel?: boolean;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onClick, isVisuallySelected, ...others },\n  ref\n) {\n  const [noWrap, setNoWrap] = useState(truncateLabel);\n\n  function handleMouseOver() {\n    if (truncateLabel) {\n      setNoWrap(false);\n    }\n  }\n\n  function handleMouseOut() {\n    if (truncateLabel) {\n      setNoWrap(true);\n    }\n  }\n\n  const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    onClick(e, item.id);\n    item.onClick?.(e);\n  };\n\n  return (\n    <ListItem\n      {...others}\n      component=\"div\"\n      role=\"listitem\"\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={handleClick}\n      selected={isVisuallySelected}\n      ref={ref}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ noWrap: noWrap }}\n        onMouseOver={handleMouseOver}\n        onMouseOut={handleMouseOut}\n      ></ListItemText>\n    </ListItem>\n  );\n});\n\nexport const ListLegendItem = React.memo(ListLegendItemBase);\n"],"names":["React","forwardRef","useState","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onClick","isVisuallySelected","others","ref","noWrap","setNoWrap","handleMouseOver","handleMouseOut","handleClick","e","id","component","role","padding","cursor","dense","key","selected","display","alignItems","color","primary","label","primaryTypographyProps","onMouseOver","onMouseOut","memo"],"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,IAAIC,UAAU,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AACpD,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAC3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAuBtD,MAAMC,kBAAkB,iBAAGP,UAAU,CAAsC,SAASQ,cAAc,CAChG,EAAEC,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAEC,aAAa,CAAA,EAAEC,OAAO,CAAA,EAAEC,kBAAkB,CAAA,EAAE,GAAGC,MAAM,EAAE,EACnEC,GAAG,EACH;IACA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAACU,aAAa,CAAC,AAAC;IAEpD,SAASO,eAAe,GAAG;QACzB,IAAIP,aAAa,EAAE;YACjBM,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,SAASE,cAAc,GAAG;QACxB,IAAIR,aAAa,EAAE;YACjBM,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAED,MAAMG,WAAW,GAA4C,CAACC,CAAC,GAAK;YAElEZ,GAAY;QADZG,OAAO,CAACS,CAAC,EAAEZ,IAAI,CAACa,EAAE,CAAC,CAAC;QACpBb,CAAAA,GAAY,GAAZA,IAAI,CAACG,OAAO,cAAZH,GAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,GAAY,CAAZA,IAAiB,CAAjBA,IAAI,EAAWY,CAAC,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,qBACE,eAACjB,QAAQ;QACN,GAAGU,MAAM;QACVS,SAAS,EAAC,KAAK;QACfC,IAAI,EAAC,UAAU;QACfd,EAAE,EAAEL,SAAS,CACX;YACEoB,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDhB,EAAE,CACH;QACDiB,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEnB,IAAI,CAACa,EAAE;QACZV,OAAO,EAAEQ,WAAW;QACpBS,QAAQ,EAAEhB,kBAAkB;QAC5BE,GAAG,EAAEA,GAAG;;0BAER,KAACb,GAAG;gBAACQ,EAAE,EAAE;oBAAEoB,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACzB,gBAAgB;oBAAC0B,KAAK,EAAEvB,IAAI,CAACuB,KAAK;kBAAI;cACnC;0BACN,KAAC7B,YAAY;gBACX8B,OAAO,EAAExB,IAAI,CAACyB,KAAK;gBACnBC,sBAAsB,EAAE;oBAAEnB,MAAM,EAAEA,MAAM;iBAAE;gBAC1CoB,WAAW,EAAElB,eAAe;gBAC5BmB,UAAU,EAAElB,cAAc;cACZ;;MACP,CACX;AACJ,CAAC,CAAC,AAAC;AAEH,OAAO,MAAMX,cAAc,iBAAGT,KAAK,CAACuC,IAAI,CAAC/B,kBAAkB,CAAC,CAAC"}

package/dist/Legend/TableLegend.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { TableProps } from '../Table';
-import { LegendItem } from '../model';
+import { LegendItem } from './legend-model';
 export interface TableLegendProps {
     items: LegendItem[];
     height: number;
     width: number;
     selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';
     onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];
+    columns?: TableProps<LegendItem>['columns'];
 }
-export declare function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, height, width, }: TableLegendProps): JSX.Element;
+export declare function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, height, width, columns: additionalColumns, }: TableLegendProps): JSX.Element;
 //# sourceMappingURL=TableLegend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/TableLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAS,UAAU,EAAqB,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC;IAC9D,qBAAqB,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,sBAAsB,CAAC,CAAC;CACvE;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EAAE,gBAAgB,EAC/B,qBAAqB,EACrB,MAAM,EACN,KAAK,GACN,EAAE,gBAAgB,eA2BlB"}
+{"version":3,"file":"TableLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/TableLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAS,UAAU,EAAqB,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC;IAC9D,qBAAqB,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,sBAAsB,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC7C;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EAAE,gBAAgB,EAC/B,qBAAqB,EACrB,MAAM,EACN,KAAK,EACL,OAAO,EAAE,iBAAsB,GAChC,EAAE,gBAAgB,eA+BlB"}