@perses-dev/components 0.29.1 → 0.31.0

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 { useTheme } from '@mui/material';\nimport { VariableSizeList, ListChildComponentProps } from 'react-window';\nimport { useRef, useEffect, forwardRef, useCallback } from 'react';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n\n  /**\n   * The height used when initially laying out items in the list. Once items\n   * render, the height is determined based on the content. This is needed\n   * because the list is virtualized.\n   */\n  initialRowHeight?: number;\n}\n\nconst DEFAULT_INITIAL_ROW_HEIGHT = 26;\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, initialRowHeight = DEFAULT_INITIAL_ROW_HEIGHT }: ListLegendProps) {\n  // Storing a ref to the react-window `VariableSizeList`, so we can call\n  // `resetAfterIndex` to resize the list after mouseover/out events to account\n  // for the change in list items on hover.\n  const listRef = useRef<VariableSizeList>(null);\n  // Storing row heights, so we can use dynamic heights, which enables the\n  // user the hover to show the full label, while still having a virtualized\n  // list.\n  const rowHeights = useRef<Record<number, number>>({});\n\n  const theme = useTheme();\n  // Padding value used throughout to adjust the react-window virtual layouts\n  // to simulate padding per the guidance from:\n  // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list\n  const LIST_PADDING = parseInt(theme.spacing(1), 10);\n\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\n  // Gets the row height for a given item to enable the virtualized list to\n  // render the row properly.\n  function getRowHeight(index: number) {\n    const currentHeight = rowHeights.current[index];\n    return currentHeight ?? initialRowHeight;\n  }\n\n  // Set the height for a given item to enable the virtualized list to\n  // adjust to size changes.\n  function setRowHeight(index: number, size: number) {\n    // Tell the virtualized list that items changed size and need to be\n    // re-evaluated.\n    listRef.current?.resetAfterIndex(0);\n    rowHeights.current = { ...rowHeights.current, [index]: size };\n  }\n\n  // Renderer for virtualized rows in `VariableSizeList`.\n  function ListLegendRow({ index, style }: ListChildComponentProps) {\n    // Storing a ref to the row's `ListLegendItem`, so we can get the \"real\"\n    // height and adjust the height of the row based on it, enabling the dynamic\n    // heights on hover.\n    const rowRef = useRef<HTMLDivElement | null>(null);\n\n    // useCallback is important here to avoid constantly running the useEffect\n    // that calls this in `ListLegendItem`.\n    const handleRowLayoutChange = useCallback(() => {\n      // Handle size changes from hovering on a list item.\n      if (rowRef.current) {\n        setRowHeight(index, rowRef.current.clientHeight);\n      }\n    }, [index]);\n\n    // Adjust row heights when the row being rendered changes.\n    useEffect(() => {\n      handleRowLayoutChange();\n    }, [handleRowLayoutChange]);\n\n    const item = items[index];\n\n    if (!item) {\n      // This shouldn't happen if configured correctly, but covering\n      // the case to appease the type checking and to cover any edge\n      // cases.\n      return null;\n    }\n\n    const originalTop = parseFloat(`${style.top}`);\n\n    return (\n      <div\n        style={{\n          ...style,\n          // Adjust the top position to simulate top padding on the list.\n          top: `${originalTop + LIST_PADDING}px`,\n        }}\n      >\n        <ListLegendItem\n          ref={rowRef}\n          key={item.id}\n          item={item}\n          truncateLabel={truncateLabels}\n          onLayoutChange={handleRowLayoutChange}\n          sx={{\n            // Having an explicit width is important for the ellipsizing to\n            // work correctly. Subtract padding to simulate padding.\n            width: width - LIST_PADDING,\n            wordBreak: 'break-word',\n            overflow: 'hidden',\n          }}\n        />\n      </div>\n    );\n  }\n\n  // Renderer for the inner container element of the `VariableSizeList` used\n  // to adjust styles to simulate padding on the list per:\n  // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list\n  const InnerElementType = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(function InnerElementType(\n    { style, ...rest },\n    ref\n  ) {\n    const originalHeight = style?.height ? parseFloat(`${style?.height}`) : 0;\n\n    return (\n      <div\n        ref={ref}\n        role=\"list\"\n        style={{\n          ...style,\n          // Adjust height to account for simulated padding.\n          height: `${originalHeight + LIST_PADDING * 2}px`,\n        }}\n        {...rest}\n      />\n    );\n  });\n\n  return (\n    <VariableSizeList\n      height={height}\n      width={width}\n      itemCount={items.length}\n      itemSize={getRowHeight}\n      innerElementType={InnerElementType}\n      ref={listRef}\n    >\n      {ListLegendRow}\n    </VariableSizeList>\n  );\n}\n"],"names":["useTheme","VariableSizeList","useRef","useEffect","forwardRef","useCallback","ListLegendItem","DEFAULT_INITIAL_ROW_HEIGHT","ListLegend","items","height","width","initialRowHeight","listRef","rowHeights","theme","LIST_PADDING","parseInt","spacing","truncateLabels","length","getRowHeight","index","currentHeight","current","setRowHeight","size","resetAfterIndex","ListLegendRow","style","rowRef","handleRowLayoutChange","clientHeight","item","originalTop","parseFloat","top","div","ref","truncateLabel","onLayoutChange","sx","wordBreak","overflow","id","InnerElementType","rest","originalHeight","role","itemCount","itemSize","innerElementType"],"mappings":"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"}
+{"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 { useTheme, Box } from '@mui/material';\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  const theme = useTheme();\n  // Padding value used in the react virtuoso header/footer components to\n  // simulate top/bottom padding based on recommendation in this\n  // issue.\n  // https://github.com/petyosi/react-virtuoso/issues/238\n  const LIST_PADDING = parseInt(theme.spacing(1), 10);\n  const mockPadding = <Box sx={{ width: '100%', height: `${LIST_PADDING}px` }}></Box>;\n\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 - LIST_PADDING,\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n      components={{\n        Header: () => {\n          return mockPadding;\n        },\n        Footer: () => {\n          return mockPadding;\n        },\n      }}\n    />\n  );\n}\n"],"names":["useTheme","Box","Virtuoso","isLegendItemVisuallySelected","ListLegendItem","ListLegend","items","height","width","selectedItems","onLegendItemClick","theme","LIST_PADDING","parseInt","spacing","mockPadding","sx","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","wordBreak","overflow","id","role","components","Header","Footer"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAEC,GAAG,QAAQ,eAAe,CAAC;AAC9C,SAASC,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,MAAMC,KAAK,GAAGX,QAAQ,EAAE,AAAC;IACzB,uEAAuE;IACvE,8DAA8D;IAC9D,SAAS;IACT,uDAAuD;IACvD,MAAMY,YAAY,GAAGC,QAAQ,CAACF,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,AAAC;IACpD,MAAMC,WAAW,iBAAG,KAACd,GAAG;QAACe,EAAE,EAAE;YAAER,KAAK,EAAE,MAAM;YAAED,MAAM,EAAE,CAAC,EAAEK,YAAY,CAAC,EAAE,CAAC;SAAE;MAAQ,AAAC;IAEpF,6DAA6D;IAC7D,MAAMK,cAAc,GAAGX,KAAK,CAACY,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAAChB,QAAQ;QACPiB,KAAK,EAAE;YAAEZ,MAAM;YAAEC,KAAK;SAAE;QACxBY,IAAI,EAAEd,KAAK;QACXe,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAACnB,cAAc;gBAEbmB,IAAI,EAAEA,IAAI;gBACVC,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEtB,4BAA4B,CAACoB,IAAI,EAAEd,aAAa,CAAC;gBACrEiB,OAAO,EAAEhB,iBAAiB;gBAC1BM,EAAE,EAAE;oBACF,+DAA+D;oBAC/D,wDAAwD;oBACxDR,KAAK,EAAEA,KAAK,GAAGI,YAAY;oBAC3Be,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAXIL,IAAI,CAACM,EAAE,CAYZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;QACXC,UAAU,EAAE;YACVC,MAAM,EAAE,IAAM;gBACZ,OAAOjB,WAAW,CAAC;YACrB,CAAC;YACDkB,MAAM,EAAE,IAAM;gBACZ,OAAOlB,WAAW,CAAC;YACrB,CAAC;SACF;MACD,CACF;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
 import { ListItemProps } from '@mui/material';
 import { LegendItem } from '../model';
-interface ListLegendItemProps extends ListItemProps<'div'> {
+export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick'> {
     item: LegendItem;
+    /**
+     * When true, the item is rendered differently to visually communicate it is
+     * selected.
+     */
+    isVisuallySelected?: boolean;
+    onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;
     /**
      * When `true`, will keep labels to a single line with overflow ellipsized. The
      * full content will be shown on hover.
@@ -10,12 +16,6 @@ interface ListLegendItemProps extends ListItemProps<'div'> {
      * When `false` or unset, will show the full label.
      */
     truncateLabel?: boolean;
-    /**
-     * Called when the layout of the legend item changes as a result of the hover
-     * behavior when `truncateLabel` is `true`.
-     */
-    onLayoutChange?: () => void;
 }
-export declare const ListLegendItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListLegendItemProps, "classes" | "className" | "style" | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "alignItems" | "disabled" | "selected" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "dense" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction" | "item" | "truncateLabel" | "onLayoutChange"> & React.RefAttributes<HTMLDivElement>>>;
-export {};
+export declare const ListLegendItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListLegendItemProps, "classes" | "className" | "style" | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "alignItems" | "disabled" | "selected" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "dense" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction" | "item" | "isVisuallySelected" | "truncateLabel"> & React.RefAttributes<HTMLDivElement>>>;
 //# sourceMappingURL=ListLegendItem.d.ts.map

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,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,mBAAoB,SAAQ,aAAa,CAAC,KAAK,CAAC;IACxD,IAAI,EAAE,UAAU,CAAC;IAEjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAyDD,eAAO,MAAM,cAAc,g6JAAiC,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;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"}

package/dist/Legend/ListLegendItem.js

@@ -12,11 +12,11 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import React, { forwardRef, useState, useEffect } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { Box, ListItemText, ListItem } from '@mui/material';
 import { combineSx } from '../utils';
 import { LegendColorBadge } from './LegendColorBadge';
-const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ item , sx , truncateLabel , onLayoutChange , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
     const [noWrap, setNoWrap] = useState(truncateLabel);
     function handleMouseOver() {
         if (truncateLabel) {
@@ -28,14 +28,11 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
             setNoWrap(true);
         }
     }
-    useEffect(()=>{
-        // When `noWrap` changes, so does the layout of the component. Notifies the
-        // parent, so it can handle those changes.
-        onLayoutChange === null || onLayoutChange === void 0 ? void 0 : onLayoutChange();
-    }, [
-        noWrap,
-        onLayoutChange
-    ]);
+    const handleClick = (e)=>{
+        var ref;
+        onClick(e, item.id);
+        (ref = item.onClick) === null || ref === void 0 ? void 0 : ref.call(item, e);
+    };
     return /*#__PURE__*/ _createElement(ListItem, {
         ...others,
         component: "div",
@@ -46,8 +43,8 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
         }, sx),
         dense: true,
         key: item.id,
-        onClick: item.onClick,
-        selected: item.isSelected,
+        onClick: handleClick,
+        selected: isVisuallySelected,
         ref: ref,
         children: [
             /*#__PURE__*/ _jsx(Box, {

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, useEffect } from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps extends ListItemProps<'div'> {\n  item: LegendItem;\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  /**\n   * Called when the layout of the legend item changes as a result of the hover\n   * behavior when `truncateLabel` is `true`.\n   */\n  onLayoutChange?: () => void;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onLayoutChange, ...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  useEffect(() => {\n    // When `noWrap` changes, so does the layout of the component. Notifies the\n    // parent, so it can handle those changes.\n    onLayoutChange?.();\n  }, [noWrap, onLayoutChange]);\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={item.onClick}\n      selected={item.isSelected}\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","useEffect","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onLayoutChange","others","ref","noWrap","setNoWrap","handleMouseOver","handleMouseOut","component","role","padding","cursor","dense","key","id","onClick","selected","isSelected","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,EAAEC,SAAS,QAAQ,OAAO,CAAC;AAC/D,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAoBtD,MAAMC,kBAAkB,iBAAGR,UAAU,CAAsC,SAASS,cAAc,CAChG,EAAEC,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAEC,aAAa,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGC,MAAM,EAAE,EACtDC,GAAG,EACH;IACA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAACW,aAAa,CAAC,AAAC;IAEpD,SAASM,eAAe,GAAG;QACzB,IAAIN,aAAa,EAAE;YACjBK,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,SAASE,cAAc,GAAG;QACxB,IAAIP,aAAa,EAAE;YACjBK,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAEDf,SAAS,CAAC,IAAM;QACd,2EAA2E;QAC3E,0CAA0C;QAC1CW,cAAc,aAAdA,cAAc,WAAI,GAAlBA,KAAAA,CAAkB,GAAlBA,cAAc,EAAI,CAAC;IACrB,CAAC,EAAE;QAACG,MAAM;QAAEH,cAAc;KAAC,CAAC,CAAC;IAE7B,qBACE,eAACR,QAAQ;QACN,GAAGS,MAAM;QACVM,SAAS,EAAC,KAAK;QACfC,IAAI,EAAC,UAAU;QACfV,EAAE,EAAEL,SAAS,CACX;YACEgB,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDZ,EAAE,CACH;QACDa,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEf,IAAI,CAACgB,EAAE;QACZC,OAAO,EAAEjB,IAAI,CAACiB,OAAO;QACrBC,QAAQ,EAAElB,IAAI,CAACmB,UAAU;QACzBd,GAAG,EAAEA,GAAG;;0BAER,KAACZ,GAAG;gBAACQ,EAAE,EAAE;oBAAEmB,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACxB,gBAAgB;oBAACyB,KAAK,EAAEtB,IAAI,CAACsB,KAAK;kBAAI;cACnC;0BACN,KAAC5B,YAAY;gBACX6B,OAAO,EAAEvB,IAAI,CAACwB,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,MAAMV,cAAc,iBAAGV,KAAK,CAACuC,IAAI,CAAC9B,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 { 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"}

package/dist/LineChart/LineChart.d.ts

@@ -18,9 +18,10 @@ export interface LineChartProps {
     grid?: GridComponentOption;
     legend?: LegendComponentOption;
     tooltipConfig?: TooltipConfig;
+    noDataVariant?: 'chart' | 'message';
     onDataZoom?: (e: ZoomEventData) => void;
     onDoubleClick?: (e: MouseEvent) => void;
     __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;
 }
-export declare function LineChart({ height, data, yAxis, unit, grid, legend, tooltipConfig, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride, }: LineChartProps): JSX.Element;
+export declare function LineChart({ height, data, yAxis, unit, grid, legend, tooltipConfig, noDataVariant, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride, }: LineChartProps): JSX.Element;
 //# sourceMappingURL=LineChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAoC,EACpC,UAAU,EACV,aAAa,EACb,oCAAoC,GACrC,EAAE,cAAc,eAkJhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAoC,EACpC,aAAyB,EACzB,UAAU,EACV,aAAa,EACb,oCAAoC,GACrC,EAAE,cAAc,eAoKhB"}

package/dist/LineChart/LineChart.js

@@ -18,7 +18,6 @@ import { LineChart as EChartsLineChart } from 'echarts/charts';
 import { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
-import { OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
 import { TimeSeriesTooltip } from '../TimeSeriesTooltip';
 import { useTimeZone } from '../context/TimeZoneProvider';
@@ -38,12 +37,12 @@ use([
 ]);
 export function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+} , noDataVariant ='message' , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
     var ref;
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
     const [showTooltip, setShowTooltip] = useState(true);
-    const [pinTooltip, setPinTooltip] = useState(false);
+    const [isTooltipPinned, setIsTooltipPinned] = useState(false);
     const { timeZone  } = useTimeZone();
     const handleEvents = useMemo(()=>{
         return {
@@ -51,7 +50,7 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
                 if (onDataZoom === undefined) {
                     setTimeout(()=>{
                         // workaround so unpin happens after click event
-                        setPinTooltip(false);
+                        setIsTooltipPinned(false);
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
@@ -75,13 +74,13 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
     }, [
         data,
         onDataZoom,
-        setPinTooltip
+        setIsTooltipPinned
     ]);
     if (chartRef.current !== undefined) {
         enableDataZoom(chartRef.current);
     }
     const handleOnDoubleClick = (e)=>{
-        setPinTooltip(false);
+        setIsTooltipPinned(false);
         // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
         if (onDoubleClick === undefined) {
             if (chartRef.current !== undefined) {
@@ -94,9 +93,9 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
     const { noDataOption  } = chartsTheme;
     const option = useMemo(()=>{
         if (data.timeSeries === undefined) return {};
-        if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;
-        // show symbols and axisPointer dashed line on hover
-        const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;
+        // The "chart" `noDataVariant` is only used when the `timeSeries` is an
+        // empty array because a `null` value will throw an error.
+        if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : getDateRange(data.xAxis);
         const option = {
@@ -114,13 +113,17 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
             yAxis: getYAxes(yAxis, unit),
             animation: false,
             tooltip: {
-                show: !isOptimizedMode,
+                show: true,
                 trigger: 'axis',
-                showContent: false,
-                axisPointer: {
-                    type: isOptimizedMode ? 'none' : 'line',
-                    z: 0
-                }
+                showContent: false
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: true
             },
             toolbox: {
                 feature: {
@@ -145,17 +148,21 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
         legend,
         noDataOption,
         timeZone,
-        __experimentalEChartsOptionsOverride
+        __experimentalEChartsOptionsOverride,
+        noDataVariant
     ]);
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
             height
         },
-        onClick: ()=>{
-            setPinTooltip((current)=>!current);
+        onClick: (e)=>{
+            // Pin and unpin when clicking on chart canvas but not tooltip text.
+            if (e.target instanceof HTMLCanvasElement) {
+                setIsTooltipPinned((current)=>!current);
+            }
         },
         onMouseDown: (e)=>{
-            // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
+            // Hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels.
             if (e.target instanceof HTMLCanvasElement) {
                 setShowTooltip(false);
             }
@@ -165,7 +172,6 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
         },
         onMouseLeave: ()=>{
             setShowTooltip(false);
-            setPinTooltip(false);
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -179,10 +185,17 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
-                pinTooltip: pinTooltip,
-                unit: unit
+                isTooltipPinned: isTooltipPinned,
+                unit: unit,
+                onUnpinClick: ()=>{
+                    setIsTooltipPinned(false);
+                }
             }),
             /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 onEvents: handleEvents,

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n};\n\nexport interface LineChartProps {\n  /**\n   * Height of the chart\n   */\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  tooltipConfig = { wrapLabels: true },\n  onDataZoom,\n  onDoubleClick,\n  __experimentalEChartsOptionsOverride,\n}: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n  const { timeZone } = useTimeZone();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;\n\n    // show symbols and axisPointer dashed line on hover\n    const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: !isOptimizedMode,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n        axisPointer: {\n          type: isOptimizedMode ? 'none' : 'line',\n          z: 0, // ensure point symbol shows on top of dashed line\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={() => {\n        setPinTooltip((current) => !current);\n      }}\n      onMouseDown={(e) => {\n        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n        if (e.target instanceof HTMLCanvasElement) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseUp={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n        setPinTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={handleOnDoubleClick}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeSeriesTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinTooltip={pinTooltip}\n            unit={unit}\n          />\n        )}\n      <EChart option={option} theme={chartsTheme.echartsTheme} onEvents={handleEvents} _instance={chartRef} />\n    </Box>\n  );\n}\n"],"names":["React","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","option","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n};\n\nexport interface LineChartProps {\n  /**\n   * Height of the chart\n   */\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport function LineChart({\n  height,\n  data,\n  yAxis,\n  unit,\n  grid,\n  legend,\n  tooltipConfig = { wrapLabels: true },\n  noDataVariant = 'message',\n  onDataZoom,\n  onDoubleClick,\n  __experimentalEChartsOptionsOverride,\n}: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [isTooltipPinned, setIsTooltipPinned] = useState<boolean>(false);\n  const { timeZone } = useTimeZone();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setIsTooltipPinned(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setIsTooltipPinned]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setIsTooltipPinned(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (e.target instanceof HTMLCanvasElement) {\n          setIsTooltipPinned((current) => !current);\n        }\n      }}\n      onMouseDown={(e) => {\n        // Hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels.\n        if (e.target instanceof HTMLCanvasElement) {\n          setShowTooltip(false);\n        }\n      }}\n      onMouseUp={() => {\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        setShowTooltip(false);\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={handleOnDoubleClick}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeSeriesTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            isTooltipPinned={isTooltipPinned}\n            unit={unit}\n            onUnpinClick={() => {\n              setIsTooltipPinned(false);\n            }}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    </Box>\n  );\n}\n"],"names":["React","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","noDataVariant","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","option","chartsTheme","chartRef","showTooltip","setShowTooltip","isTooltipPinned","setIsTooltipPinned","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","timeSeries","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","target","HTMLCanvasElement","onMouseDown","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/StatChart/StatChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAqF9C"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAiG9C"}

package/dist/StatChart/StatChart.js

@@ -109,11 +109,15 @@ export function StatChart(props) {
                 sx: (theme)=>({
                         color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
                         fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
-                        padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
+                        padding: sparkline ? `${containerPadding} ${containerPadding} 0 ${containerPadding}` : ` 0 ${containerPadding}`
                     }),
                 children: formattedValue
             }),
             sparkline !== undefined && /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 renderer: "svg"

package/dist/StatChart/StatChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.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 { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        data: [...series.values],\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: color ?? theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n          padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && <EChart option={option} theme={chartsTheme.echartsTheme} renderer=\"svg\" />}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","Typography","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","color","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","min","containerPadding","container","padding","default","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","variant","theme","palette","text","primary","fontSize","echartsTheme","renderer"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatChart/StatChart.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 { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        data: [...series.values],\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: color ?? theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n          padding: sparkline\n            ? `${containerPadding} ${containerPadding} 0 ${containerPadding}`\n            : ` 0 ${containerPadding}`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: '100%',\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","Typography","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","color","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","min","containerPadding","container","padding","default","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","variant","theme","palette","text","primary","fontSize","echartsTheme","renderer"],"mappings":"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"}

package/dist/Table/InnerTable.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TableProps as MuiTableProps } from '@mui/material';
+import { TableDensity } from './model/table-model';
+declare type InnerTableProps = Omit<MuiTableProps, 'size'> & {
+    density: TableDensity;
+};
+export declare const InnerTable: import("react").ForwardRefExoticComponent<Pick<InnerTableProps, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "slot" | "summary" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "border" | "bgcolor" | "padding" | "align" | "cellPadding" | "cellSpacing" | "frame" | "rules" | "density" | "stickyHeader"> & import("react").RefAttributes<HTMLTableElement>>;
+export {};
+//# sourceMappingURL=InnerTable.d.ts.map

package/dist/Table/InnerTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InnerTable.d.ts","sourceRoot":"","sources":["../../src/Table/InnerTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6B,UAAU,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,aAAK,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG;IACnD,OAAO,EAAE,YAAY,CAAC;CACvB,CAAC;AAOF,eAAO,MAAM,UAAU,8yJAerB,CAAC"}

package/dist/Table/InnerTable.js

@@ -0,0 +1,38 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Table as MuiTable, styled } from '@mui/material';
+import { forwardRef } from 'react';
+const StyledMuiTable = styled(MuiTable)(({ theme  })=>({
+        // This value is needed to have a consistent table layout when scrolling.
+        tableLayout: 'fixed',
+        borderCollapse: 'separate',
+        backgroundColor: theme.palette.background.paper
+    }));
+const TABLE_DENSITY_CONFIG = {
+    compact: 'small',
+    standard: 'medium'
+};
+export const InnerTable = /*#__PURE__*/ forwardRef(function InnerTable({ density , width , ...otherProps }, ref) {
+    return /*#__PURE__*/ _jsx(StyledMuiTable, {
+        ...otherProps,
+        tabIndex: -1,
+        size: TABLE_DENSITY_CONFIG[density],
+        ref: ref,
+        sx: {
+            width: width
+        }
+    });
+});
+
+//# sourceMappingURL=InnerTable.js.map

package/dist/Table/InnerTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/InnerTable.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 { Table as MuiTable, styled, TableProps as MuiTableProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\nconst StyledMuiTable = styled(MuiTable)(({ theme }) => ({\n  // This value is needed to have a consistent table layout when scrolling.\n  tableLayout: 'fixed',\n  borderCollapse: 'separate',\n  backgroundColor: theme.palette.background.paper,\n}));\n\ntype InnerTableProps = Omit<MuiTableProps, 'size'> & {\n  density: TableDensity;\n};\n\nconst TABLE_DENSITY_CONFIG: Record<TableDensity, MuiTableProps['size']> = {\n  compact: 'small',\n  standard: 'medium',\n};\n\nexport const InnerTable = forwardRef<HTMLTableElement, InnerTableProps>(function InnerTable(\n  { density, width, ...otherProps },\n  ref\n) {\n  return (\n    <StyledMuiTable\n      {...otherProps}\n      tabIndex={-1}\n      size={TABLE_DENSITY_CONFIG[density]}\n      ref={ref}\n      sx={{\n        width: width,\n      }}\n    />\n  );\n});\n"],"names":["Table","MuiTable","styled","forwardRef","StyledMuiTable","theme","tableLayout","borderCollapse","backgroundColor","palette","background","paper","TABLE_DENSITY_CONFIG","compact","standard","InnerTable","density","width","otherProps","ref","tabIndex","size","sx"],"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,KAAK,IAAIC,QAAQ,EAAEC,MAAM,QAAqC,eAAe,CAAC;AACvF,SAASC,UAAU,QAAQ,OAAO,CAAC;AAGnC,MAAMC,cAAc,GAAGF,MAAM,CAACD,QAAQ,CAAC,CAAC,CAAC,EAAEI,KAAK,CAAA,EAAE,GAAM,CAAA;QACtD,yEAAyE;QACzEC,WAAW,EAAE,OAAO;QACpBC,cAAc,EAAE,UAAU;QAC1BC,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACC,UAAU,CAACC,KAAK;KAChD,CAAA,AAAC,CAAC,AAAC;AAMJ,MAAMC,oBAAoB,GAAgD;IACxEC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,QAAQ;CACnB,AAAC;AAEF,OAAO,MAAMC,UAAU,iBAAGZ,UAAU,CAAoC,SAASY,UAAU,CACzF,EAAEC,OAAO,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGC,UAAU,EAAE,EACjCC,GAAG,EACH;IACA,qBACE,KAACf,cAAc;QACZ,GAAGc,UAAU;QACdE,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAET,oBAAoB,CAACI,OAAO,CAAC;QACnCG,GAAG,EAAEA,GAAG;QACRG,EAAE,EAAE;YACFL,KAAK,EAAEA,KAAK;SACb;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}

package/dist/Table/Table.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TableProps } from './model/table-model';
+/**
+ * Component used to render tabular data in Perses use cases. This component is
+ * **not** intended to be a general use data table for use cases unrelated to Perses.
+ *
+ * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**
+ */
+export declare function Table<TableData>({ data, columns, density, checkboxSelection, onRowSelectionChange, getCheckboxColor, getRowId, rowSelection, ...otherProps }: TableProps<TableData>): JSX.Element;
+//# sourceMappingURL=Table.d.ts.map

package/dist/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,UAAU,EAAkC,MAAM,qBAAqB,CAAC;AAMjF;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,EAC/B,IAAI,EACJ,OAAO,EACP,OAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,QAA6B,EAC7B,YAAiB,EACjB,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,SAAS,CAAC,eA+EvB"}