@perses-dev/components 0.51.0-beta.1 → 0.51.0-rc.0

package/dist/Table/VirtualizedTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/VirtualizedTable.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 { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo, ReactElement } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth' | 'defaultColumnHeight'>\n> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {\n    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n    rows: Array<Row<TableData>>;\n    columns: Array<Column<TableData, unknown>>;\n    headers: Array<HeaderGroup<TableData>>;\n    cellConfigs?: TableCellConfigs;\n  };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  defaultColumnWidth,\n  defaultColumnHeight,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n  cellConfigs,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props): ReactElement => {\n        return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n      },\n      TableHead,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }): ReactElement | null => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n        return (\n          <TableRow\n            {...props}\n            onClick={(e) => onRowClick(e, row.id)}\n            density={density}\n            onMouseOver={(e) => {\n              onRowMouseOver?.(e, rowEventOpts);\n            }}\n            onMouseOut={(e) => {\n              onRowMouseOut?.(e, rowEventOpts);\n            }}\n          />\n        );\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, rows, width]);\n\n  return (\n    <Box style={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={column.getSize() || defaultColumnWidth}\n                          defaultColumnHeight={defaultColumnHeight}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          description={column.columnDef.meta?.headerDescription}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i, cells) => {\n                const position: TableCellPosition = {\n                  // Add 1 to the row index because the header is row 0\n                  row: index + 1,\n                  column: i,\n                };\n\n                const cellContext = cell.getContext();\n                const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n                const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n                let description: string | undefined = undefined;\n                if (typeof cellDescriptionDef === 'function') {\n                  // If the cell description is a function, set the value using\n                  // the function.\n                  description = cellDescriptionDef(cellContext);\n                } else if (cellDescriptionDef && typeof cellContent === 'string') {\n                  // If the cell description is `true` AND the cell content is\n                  // a string (and thus viable as a `title` attribute), use the\n                  // cell content.\n                  description = cellContent;\n                }\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    data-testid={cell.id}\n                    title={description || cellConfig?.text || cellContent}\n                    width={cell.column.getSize() || defaultColumnWidth}\n                    defaultColumnHeight={defaultColumnHeight}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                    description={description}\n                    color={cellConfig?.textColor ?? undefined}\n                    backgroundColor={cellConfig?.backgroundColor ?? undefined}\n                  >\n                    {cellConfig?.text || cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","data-testid","title","text","color","textColor","backgroundColor"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/VirtualizedTable.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 { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo, ReactElement } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { TableFoot } from './TableFoot';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth' | 'defaultColumnHeight'>\n> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {\n    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n    rows: Array<Row<TableData>>;\n    columns: Array<Column<TableData, unknown>>;\n    headers: Array<HeaderGroup<TableData>>;\n    cellConfigs?: TableCellConfigs;\n    rowCount: number;\n  };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  defaultColumnWidth,\n  defaultColumnHeight,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n  cellConfigs,\n  pagination,\n  onPaginationChange,\n  rowCount,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props): ReactElement => {\n        return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n      },\n      TableHead,\n      TableFoot,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }): ReactElement | null => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n        return (\n          <TableRow\n            {...props}\n            onClick={(e) => onRowClick(e, row.id)}\n            density={density}\n            onMouseOver={(e) => {\n              onRowMouseOver?.(e, rowEventOpts);\n            }}\n            onMouseOut={(e) => {\n              onRowMouseOut?.(e, rowEventOpts);\n            }}\n          />\n        );\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, rows, width]);\n\n  const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ ...pagination, pageIndex: newPage });\n  };\n\n  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ pageIndex: 0, pageSize: parseInt(event.target.value, 10) });\n  };\n\n  return (\n    <Box style={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={column.getSize() || defaultColumnWidth}\n                          defaultColumnHeight={defaultColumnHeight}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          description={column.columnDef.meta?.headerDescription}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        fixedFooterContent={\n          pagination\n            ? (): ReactElement => (\n                <MuiTableRow sx={{ backgroundColor: (theme) => theme.palette.background.default }}>\n                  <TablePagination\n                    colSpan={columns.length}\n                    count={rowCount}\n                    page={pagination.pageIndex}\n                    rowsPerPage={pagination.pageSize}\n                    onPageChange={handleChangePage}\n                    onRowsPerPageChange={handleChangeRowsPerPage}\n                  />\n                </MuiTableRow>\n              )\n            : undefined\n        }\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i, cells) => {\n                const position: TableCellPosition = {\n                  // Add 1 to the row index because the header is row 0\n                  row: index + 1,\n                  column: i,\n                };\n\n                const cellContext = cell.getContext();\n                const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n                const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n                let description: string | undefined = undefined;\n                if (typeof cellDescriptionDef === 'function') {\n                  // If the cell description is a function, set the value using\n                  // the function.\n                  description = cellDescriptionDef(cellContext);\n                } else if (cellDescriptionDef && typeof cellContent === 'string') {\n                  // If the cell description is `true` AND the cell content is\n                  // a string (and thus viable as a `title` attribute), use the\n                  // cell content.\n                  description = cellContent;\n                }\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    data-testid={cell.id}\n                    title={description || cellConfig?.text || cellContent}\n                    width={cell.column.getSize() || defaultColumnWidth}\n                    defaultColumnHeight={defaultColumnHeight}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                    description={description}\n                    color={cellConfig?.textColor ?? undefined}\n                    backgroundColor={cellConfig?.backgroundColor ?? undefined}\n                  >\n                    {cellConfig?.text || cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TablePagination","TableRow","MuiTableRow","TableVirtuoso","useRef","useMemo","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","TableFoot","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","pagination","onPaginationChange","rowCount","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","handleChangePage","_event","newPage","pageIndex","handleChangeRowsPerPage","event","pageSize","parseInt","target","value","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","fixedFooterContent","sx","backgroundColor","theme","palette","background","default","colSpan","count","page","rowsPerPage","onPageChange","onRowsPerPageChange","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","data-testid","title","text","color","textColor"],"mappings":"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"}

package/dist/Table/model/table-model.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
-import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, PaginationState, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
 export declare const DEFAULT_COLUMN_WIDTH = 150;
 export declare const DEFAULT_COLUMN_HEIGHT = 40;
 export type TableDensity = 'compact' | 'standard' | 'comfortable';
@@ -101,6 +101,15 @@ export interface TableProps<TableData> {
      * Callback fired when the table sorting changes.
      */
     onSortingChange?: (sorting: SortingState) => void;
+    /**
+     * State of the pagination in the table.
+     * Default: undefined, i.e. pagination is disabled.
+     */
+    pagination?: PaginationState;
+    /**
+     * Callback fired when the table pagination changes.
+     */
+    onPaginationChange?: (pagination: PaginationState) => void;
     /**
      * Function used to determine the unique identifier used for each row. This
      * value is used to key `rowSelection`. If this value is not set, the index

package/dist/Table/model/table-model.d.ts.map

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

package/dist/Table/model/table-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-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 {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   *  When using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : (lineHeight ?? 0);\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>\n): Array<ColumnDef<TableData>> {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}
+{"version":3,"sources":["../../../src/Table/model/table-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 {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  PaginationState,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   *  When using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * State of the pagination in the table.\n   * Default: undefined, i.e. pagination is disabled.\n   */\n  pagination?: PaginationState;\n\n  /**\n   * Callback fired when the table pagination changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : (lineHeight ?? 0);\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>\n): Array<ColumnDef<TableData>> {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}

package/dist/TimeRangeSelector/TimeRangeSelector.d.ts

@@ -8,7 +8,7 @@ interface TimeRangeSelectorProps {
     value: TimeRangeValue;
     /**
      * The list of time options to display in the dropdown.
-     * The component will automatically add the last option as a custom absolute time range.
+     * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.
      */
     timeOptions: TimeOption[];
     /**

package/dist/TimeRangeSelector/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright 2024 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, MenuItem, Popover, Select } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, isRelativeTimeRange, AbsoluteTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { useTimeZone } from '../context';\nimport { TimeOption } from '../model';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n  /**\n   * The current value of the time range.\n   */\n  value: TimeRangeValue;\n  /**\n   * The list of time options to display in the dropdown.\n   * The component will automatically add the last option as a custom absolute time range.\n   */\n  timeOptions: TimeOption[];\n  /**\n   * The callback to call when the time range changes.\n   */\n  onChange: (value: TimeRangeValue) => void;\n  /**\n   * Custom line height for the select component.\n   */\n  height?: string;\n  /**\n   * Whether to show the custom time range option.\n   * Defaults to true.\n   */\n  showCustomTimeRange?: boolean;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n  value,\n  timeOptions,\n  onChange,\n  height,\n  showCustomTimeRange = true,\n}: TimeRangeSelectorProps): ReactElement {\n  const { timeZone } = useTimeZone();\n\n  const anchorEl = useRef(); // Used to position the absolute time range picker\n\n  // Control the open state of the absolute time range picker\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n  // Build the initial value of the absolute time range picker\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  // Last option is the absolute time range option (custom)\n  // If the value is an absolute time range, we display this time range\n  // If the value is a relative time range, we make a default CustomTimeOption built from undefined value\n  const lastOption = useMemo(\n    () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n    [value, timeZone]\n  );\n\n  // Control the open state of the select component to prevent the menu from closing when the custom date picker is\n  // opened.\n  //\n  // Note that the value state of the select is here for display only. The real value (the one from props) is managed\n  // by click events on each menu item.\n  // This is a trick to get around the limitation of select with menu item that doesn't support objects as value...\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <DateTimeRangePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n            setOpen(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n        />\n      </Popover>\n      <Box ref={anchorEl}>\n        <Select\n          open={open}\n          value={formatTimeRange(value, timeZone)}\n          onClick={() => setOpen(!open)}\n          IconComponent={Calendar}\n          inputProps={{\n            'aria-label': `Select time range. Currently set to ${value}`,\n          }}\n          sx={{\n            // `transform: none` prevents calendar icon from flipping over when menu is open\n            '.MuiSelect-icon': {\n              marginTop: '1px',\n              transform: 'none',\n            },\n            // paddingRight creates more space for the calendar icon (it's a bigger icon)\n            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n              paddingRight: '36px',\n            },\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              value={formatTimeRange(item.value, timeZone)}\n              onClick={() => {\n                onChange(item.value);\n              }}\n            >\n              {item.display}\n            </MenuItem>\n          ))}\n          {showCustomTimeRange && (\n            <MenuItem\n              value={formatTimeRange(lastOption.value, timeZone)}\n              onClick={() => setShowCustomDateSelector(true)}\n            >\n              {lastOption.display}\n            </MenuItem>\n          )}\n        </Select>\n      </Box>\n    </>\n  );\n}\n"],"names":["Box","MenuItem","Popover","Select","Calendar","isRelativeTimeRange","toAbsoluteTimeRange","useMemo","useRef","useState","useTimeZone","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","anchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","current","anchorOrigin","vertical","horizontal","onClose","sx","theme","padding","spacing","initialTimeRange","onCancel","ref","onClick","IconComponent","inputProps","marginTop","transform","paddingRight","lineHeight","paddingY","map","item","idx","display"],"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,SAASA,GAAG,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,MAAM,QAAQ,gBAAgB;AAC/D,OAAOC,cAAc,2BAA2B;AAChD,SAAyBC,mBAAmB,EAAqBC,mBAAmB,QAAQ,mBAAmB;AAC/G,SAAuBC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,qBAAqB,EAAEC,eAAe,QAAQ,UAAU;AA2BjE;;;;;CAKC,GACD,OAAO,SAASC,kBAAkB,EAChCC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,MAAM,EACNC,sBAAsB,IAAI,EACH;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGV;IAErB,MAAMW,WAAWb,UAAU,kDAAkD;IAE7E,2DAA2D;IAC3D,MAAM,CAACc,wBAAwBC,0BAA0B,GAAGd,SAAS;IAErE,4DAA4D;IAC5D,MAAMe,qBAAqBjB,QAAQ;QACjC,OAAOF,oBAAoBU,SAAST,oBAAoBS,SAASA;IACnE,GAAG;QAACA;KAAM;IAEV,yDAAyD;IACzD,qEAAqE;IACrE,uGAAuG;IACvG,MAAMU,aAAalB,QACjB,IAAMK,sBAAsBP,oBAAoBU,SAASW,YAAYX,OAAOK,WAC5E;QAACL;QAAOK;KAAS;IAGnB,iHAAiH;IACjH,UAAU;IACV,EAAE;IACF,mHAAmH;IACnH,qCAAqC;IACrC,iHAAiH;IACjH,MAAM,CAACO,MAAMC,QAAQ,GAAGnB,SAAS;IAEjC,qBACE;;0BACE,KAACP;gBACCmB,UAAUA,SAASQ,OAAO;gBAC1BC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAL,MAAML;gBACNW,SAAS,IAAMV,0BAA0B;gBACzCW,IAAI,CAACC,QAAW,CAAA;wBACdC,SAASD,MAAME,OAAO,CAAC;oBACzB,CAAA;0BAEA,cAAA,KAAC1B;oBACC2B,kBAAkBd;oBAClBP,UAAU,CAACF;wBACTE,SAASF;wBACTQ,0BAA0B;wBAC1BK,QAAQ;oBACV;oBACAW,UAAU,IAAMhB,0BAA0B;;;0BAG9C,KAACvB;gBAAIwC,KAAKnB;0BACR,cAAA,MAAClB;oBACCwB,MAAMA;oBACNZ,OAAOF,gBAAgBE,OAAOK;oBAC9BqB,SAAS,IAAMb,QAAQ,CAACD;oBACxBe,eAAetC;oBACfuC,YAAY;wBACV,cAAc,CAAC,oCAAoC,EAAE5B,OAAO;oBAC9D;oBACAmB,IAAI;wBACF,gFAAgF;wBAChF,mBAAmB;4BACjBU,WAAW;4BACXC,WAAW;wBACb;wBACA,6EAA6E;wBAC7E,2DAA2D;4BACzDC,cAAc;wBAChB;wBACA,qBAAqB5B,SAAS;4BAAE6B,YAAY7B;4BAAQ8B,UAAU;wBAAE,IAAI,CAAC;oBACvE;;wBAEChC,YAAYiC,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAAClD;gCAECc,OAAOF,gBAAgBqC,KAAKnC,KAAK,EAAEK;gCACnCqB,SAAS;oCACPxB,SAASiC,KAAKnC,KAAK;gCACrB;0CAECmC,KAAKE,OAAO;+BANRD;wBASRhC,qCACC,KAAClB;4BACCc,OAAOF,gBAAgBY,WAAWV,KAAK,EAAEK;4BACzCqB,SAAS,IAAMlB,0BAA0B;sCAExCE,WAAW2B,OAAO;;;;;;;AAOjC"}
+{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright 2024 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, MenuItem, Popover, Select } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, isRelativeTimeRange, AbsoluteTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { useTimeZone } from '../context';\nimport { TimeOption } from '../model';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n  /**\n   * The current value of the time range.\n   */\n  value: TimeRangeValue;\n  /**\n   * The list of time options to display in the dropdown.\n   * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.\n   */\n  timeOptions: TimeOption[];\n  /**\n   * The callback to call when the time range changes.\n   */\n  onChange: (value: TimeRangeValue) => void;\n  /**\n   * Custom line height for the select component.\n   */\n  height?: string;\n  /**\n   * Whether to show the custom time range option.\n   * Defaults to true.\n   */\n  showCustomTimeRange?: boolean;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n  value,\n  timeOptions,\n  onChange,\n  height,\n  showCustomTimeRange = true,\n}: TimeRangeSelectorProps): ReactElement {\n  const { timeZone } = useTimeZone();\n\n  const anchorEl = useRef(); // Used to position the absolute time range picker\n\n  // Control the open state of the absolute time range picker\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n  // Build the initial value of the absolute time range picker\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  // Last option is the absolute time range option (custom)\n  // If the value is an absolute time range, we display this time range\n  // If the value is a relative time range, we make a default CustomTimeOption built from undefined value\n  const lastOption = useMemo(\n    () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n    [value, timeZone]\n  );\n\n  // Control the open state of the select component to prevent the menu from closing when the custom date picker is\n  // opened.\n  //\n  // Note that the value state of the select is here for display only. The real value (the one from props) is managed\n  // by click events on each menu item.\n  // This is a trick to get around the limitation of select with menu item that doesn't support objects as value...\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <DateTimeRangePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n            setOpen(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n        />\n      </Popover>\n      <Box ref={anchorEl}>\n        <Select\n          open={open}\n          value={formatTimeRange(value, timeZone)}\n          onClick={() => setOpen(!open)}\n          IconComponent={Calendar}\n          inputProps={{\n            'aria-label': `Select time range. Currently set to ${value}`,\n          }}\n          sx={{\n            // `transform: none` prevents calendar icon from flipping over when menu is open\n            '.MuiSelect-icon': {\n              marginTop: '1px',\n              transform: 'none',\n            },\n            // paddingRight creates more space for the calendar icon (it's a bigger icon)\n            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n              paddingRight: '36px',\n            },\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              value={formatTimeRange(item.value, timeZone)}\n              onClick={() => {\n                onChange(item.value);\n              }}\n            >\n              {item.display}\n            </MenuItem>\n          ))}\n          {showCustomTimeRange && (\n            <MenuItem\n              value={formatTimeRange(lastOption.value, timeZone)}\n              onClick={() => setShowCustomDateSelector(true)}\n            >\n              {lastOption.display}\n            </MenuItem>\n          )}\n        </Select>\n      </Box>\n    </>\n  );\n}\n"],"names":["Box","MenuItem","Popover","Select","Calendar","isRelativeTimeRange","toAbsoluteTimeRange","useMemo","useRef","useState","useTimeZone","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","anchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","current","anchorOrigin","vertical","horizontal","onClose","sx","theme","padding","spacing","initialTimeRange","onCancel","ref","onClick","IconComponent","inputProps","marginTop","transform","paddingRight","lineHeight","paddingY","map","item","idx","display"],"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,SAASA,GAAG,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,MAAM,QAAQ,gBAAgB;AAC/D,OAAOC,cAAc,2BAA2B;AAChD,SAAyBC,mBAAmB,EAAqBC,mBAAmB,QAAQ,mBAAmB;AAC/G,SAAuBC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,qBAAqB,EAAEC,eAAe,QAAQ,UAAU;AA2BjE;;;;;CAKC,GACD,OAAO,SAASC,kBAAkB,EAChCC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,MAAM,EACNC,sBAAsB,IAAI,EACH;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGV;IAErB,MAAMW,WAAWb,UAAU,kDAAkD;IAE7E,2DAA2D;IAC3D,MAAM,CAACc,wBAAwBC,0BAA0B,GAAGd,SAAS;IAErE,4DAA4D;IAC5D,MAAMe,qBAAqBjB,QAAQ;QACjC,OAAOF,oBAAoBU,SAAST,oBAAoBS,SAASA;IACnE,GAAG;QAACA;KAAM;IAEV,yDAAyD;IACzD,qEAAqE;IACrE,uGAAuG;IACvG,MAAMU,aAAalB,QACjB,IAAMK,sBAAsBP,oBAAoBU,SAASW,YAAYX,OAAOK,WAC5E;QAACL;QAAOK;KAAS;IAGnB,iHAAiH;IACjH,UAAU;IACV,EAAE;IACF,mHAAmH;IACnH,qCAAqC;IACrC,iHAAiH;IACjH,MAAM,CAACO,MAAMC,QAAQ,GAAGnB,SAAS;IAEjC,qBACE;;0BACE,KAACP;gBACCmB,UAAUA,SAASQ,OAAO;gBAC1BC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAL,MAAML;gBACNW,SAAS,IAAMV,0BAA0B;gBACzCW,IAAI,CAACC,QAAW,CAAA;wBACdC,SAASD,MAAME,OAAO,CAAC;oBACzB,CAAA;0BAEA,cAAA,KAAC1B;oBACC2B,kBAAkBd;oBAClBP,UAAU,CAACF;wBACTE,SAASF;wBACTQ,0BAA0B;wBAC1BK,QAAQ;oBACV;oBACAW,UAAU,IAAMhB,0BAA0B;;;0BAG9C,KAACvB;gBAAIwC,KAAKnB;0BACR,cAAA,MAAClB;oBACCwB,MAAMA;oBACNZ,OAAOF,gBAAgBE,OAAOK;oBAC9BqB,SAAS,IAAMb,QAAQ,CAACD;oBACxBe,eAAetC;oBACfuC,YAAY;wBACV,cAAc,CAAC,oCAAoC,EAAE5B,OAAO;oBAC9D;oBACAmB,IAAI;wBACF,gFAAgF;wBAChF,mBAAmB;4BACjBU,WAAW;4BACXC,WAAW;wBACb;wBACA,6EAA6E;wBAC7E,2DAA2D;4BACzDC,cAAc;wBAChB;wBACA,qBAAqB5B,SAAS;4BAAE6B,YAAY7B;4BAAQ8B,UAAU;wBAAE,IAAI,CAAC;oBACvE;;wBAEChC,YAAYiC,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAAClD;gCAECc,OAAOF,gBAAgBqC,KAAKnC,KAAK,EAAEK;gCACnCqB,SAAS;oCACPxB,SAASiC,KAAKnC,KAAK;gCACrB;0CAECmC,KAAKE,OAAO;+BANRD;wBASRhC,qCACC,KAAClB;4BACCc,OAAOF,gBAAgBY,WAAWV,KAAK,EAAEK;4BACzCqB,SAAS,IAAMlB,0BAA0B;sCAExCE,WAAW2B,OAAO;;;;;;;AAOjC"}

package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAQ,gBAAgB,EAAkC,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,8DA6F3B,CAAC"}
+{"version":3,"file":"LineChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/LineChartTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAQ,gBAAgB,EAAkC,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAMlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,SAAS,EAAE,iBAAiB,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,8DA2F3B,CAAC"}

package/dist/TimeSeriesTooltip/LineChartTooltip.js

@@ -17,7 +17,7 @@ import useResizeObserver from 'use-resize-observer';
 import { TooltipContent } from './TooltipContent';
 import { TooltipHeader } from './TooltipHeader';
 import { legacyGetNearbySeriesData } from './nearby-series';
-import { FALLBACK_CHART_WIDTH, TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, TOOLTIP_MIN_WIDTH, useMousePosition } from './tooltip-model';
+import { TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, TOOLTIP_MIN_WIDTH, useMousePosition } from './tooltip-model';
 import { assembleTransform } from './utils';
 export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ chartRef, chartData, enablePinning = true, wrapLabels, format, onUnpinClick, pinnedPos, containerId }) {
     const [showAllSeries, setShowAllSeries] = useState(false);
@@ -29,7 +29,6 @@ export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ c
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     // Get series nearby the cursor and pass into tooltip content children.
     const nearbySeries = legacyGetNearbySeriesData({
         mousePos,
@@ -46,9 +45,7 @@ export const LineChartTooltip = /*#__PURE__*/ memo(function LineChartTooltip({ c
     const containerElement = containerId ? document.querySelector(containerId) : undefined;
     // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
     const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
-    if (!isTooltipPinned) {
-        transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);
-    }
+    transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
     return /*#__PURE__*/ _jsx(Portal, {
         container: containerElement,
         children: /*#__PURE__*/ _jsx(Box, {

package/dist/TimeSeriesTooltip/LineChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/LineChartTooltip.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, Portal, Stack } from '@mui/material';\nimport { FormatOptions } from '@perses-dev/core';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, MutableRefObject, ReactElement, useRef, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { legacyGetNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MIN_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  enablePinning?: boolean;\n  wrapLabels?: boolean;\n  format?: FormatOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n}\n\nexport const LineChartTooltip = memo(function LineChartTooltip({\n  chartRef,\n  chartData,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  onUnpinClick,\n  pinnedPos,\n  containerId,\n}: TimeSeriesTooltipProps): ReactElement | null {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n  const transform = useRef<string | undefined>();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = legacyGetNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    format,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = chartData.timeSeries.length;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  if (!isTooltipPinned) {\n    transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);\n  }\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: maxHeight ?? TOOLTIP_MAX_HEIGHT,\n          padding: 0,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n          zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: transform.current,\n          display: transform.current ? 'block' : 'none',\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useRef","useState","useResizeObserver","TooltipContent","TooltipHeader","legacyGetNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","LineChartTooltip","chartRef","chartData","enablePinning","wrapLabels","format","onUnpinClick","pinnedPos","containerId","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","transform","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","nearbySeries","length","totalSeries","timeSeries","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","container","sx","theme","minWidth","maxWidth","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","display","spacing","onShowAllClick","checked","series"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/LineChartTooltip.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, Portal, Stack } from '@mui/material';\nimport { FormatOptions } from '@perses-dev/core';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, MutableRefObject, ReactElement, useRef, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { legacyGetNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MIN_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  enablePinning?: boolean;\n  wrapLabels?: boolean;\n  format?: FormatOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n}\n\nexport const LineChartTooltip = memo(function LineChartTooltip({\n  chartRef,\n  chartData,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  onUnpinClick,\n  pinnedPos,\n  containerId,\n}: TimeSeriesTooltipProps): ReactElement | null {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n  const transform = useRef<string | undefined>();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = legacyGetNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    format,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = chartData.timeSeries.length;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: maxHeight ?? TOOLTIP_MAX_HEIGHT,\n          padding: 0,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n          zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: transform.current,\n          display: transform.current ? 'block' : 'none',\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useRef","useState","useResizeObserver","TooltipContent","TooltipHeader","legacyGetNearbySeriesData","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","LineChartTooltip","chartRef","chartData","enablePinning","wrapLabels","format","onUnpinClick","pinnedPos","containerId","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","transform","isTooltipPinned","target","tagName","chart","current","nearbySeries","length","totalSeries","timeSeries","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","container","sx","theme","minWidth","maxWidth","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","display","spacing","onShowAllClick","checked","series"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAA0C,MAAM,iBAAiB,CAAC;AAM5F,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DA2E3B,CAAC"}
+{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAoB,MAAM,iBAAiB,CAAC;AAMtE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DAwE3B,CAAC"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useRef, useState } from 'react';
 import { Box, Portal, Stack } from '@mui/material';
 import useResizeObserver from 'use-resize-observer';
-import { FALLBACK_CHART_WIDTH, useMousePosition } from './tooltip-model';
+import { useMousePosition } from './tooltip-model';
 import { assembleTransform, getTooltipStyles } from './utils';
 import { getNearbySeriesData } from './nearby-series';
 import { TooltipHeader } from './TooltipHeader';
@@ -29,13 +29,10 @@ export const TimeChartTooltip = /*#__PURE__*/ memo(function TimeChartTooltip({ c
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const containerElement = containerId ? document.querySelector(containerId) : undefined;
     // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
     const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
-    if (!isTooltipPinned) {
-        transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);
-    }
+    transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
     // Get series nearby the cursor and pass into tooltip content children.
     const nearbySeries = getNearbySeriesData({
         mousePos,

package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.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 { memo, MutableRefObject, useRef, useState } from 'react';\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { FormatOptions, TimeSeries } from '@perses-dev/core';\nimport useResizeObserver from 'use-resize-observer';\nimport { TimeChartSeriesMapping } from '../model';\nimport { CursorCoordinates, FALLBACK_CHART_WIDTH, useMousePosition } from './tooltip-model';\nimport { assembleTransform, getTooltipStyles } from './utils';\nimport { getNearbySeriesData } from './nearby-series';\nimport { TooltipHeader } from './TooltipHeader';\nimport { TooltipContent } from './TooltipContent';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef<string | undefined>();\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  if (mousePos === null || mousePos.target === null || data === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  if (!isTooltipPinned) {\n    transform.current = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0, containerElement);\n  }\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    format,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["memo","useRef","useState","Box","Portal","Stack","useResizeObserver","FALLBACK_CHART_WIDTH","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","format","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","nearbySeries","length","totalSeries","container","sx","theme","style","spacing","onShowAllClick","checked","series"],"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,SAASA,IAAI,EAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACjE,SAASC,GAAG,EAAEC,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAGnD,OAAOC,uBAAuB,sBAAsB;AAEpD,SAA4BC,oBAAoB,EAAEC,gBAAgB,QAAQ,kBAAkB;AAC5F,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,UAAU;AAC9D,SAASC,mBAAmB,QAAQ,kBAAkB;AACtD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,mBAAmB;AAkBlD,OAAO,MAAMC,iCAAmBd,KAAK,SAASc,iBAAiB,EAC7DC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,aAAa,EACbC,gBAAgB,IAAI,EACpBC,UAAU,EACVC,MAAM,EACNC,YAAY,EACZC,SAAS,EACa;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGvB,SAAS;IACnD,MAAMwB,YAAYzB;IAElB,MAAM0B,WAAWnB;IACjB,MAAM,EAAEoB,MAAM,EAAEC,KAAK,EAAEC,KAAKC,UAAU,EAAE,GAAGzB;IAE3C,MAAM0B,kBAAkBT,cAAc,QAAQJ;IAE9C,IAAIQ,aAAa,QAAQA,SAASM,MAAM,KAAK,QAAQhB,SAAS,MAAM,OAAO;IAE3E,0EAA0E;IAC1E,IAAIM,cAAc,QAAQ,AAACI,SAASM,MAAM,CAAiBC,OAAO,KAAK,UAAU,OAAO;IAExF,MAAMC,QAAQnB,SAASoB,OAAO;IAC9B,MAAMC,aAAaF,OAAOG,cAAc/B,sBAAsB,+CAA+C;IAE7G,MAAMgC,mBAAmBxB,cAAcyB,SAASC,aAAa,CAAC1B,eAAe2B;IAC7E,uHAAuH;IACvH,MAAMC,YAAYJ,mBAAmBA,iBAAiBK,qBAAqB,GAAGhB,MAAM,GAAGc;IAEvF,IAAI,CAACV,iBAAiB;QACpBN,UAAUU,OAAO,GAAG3B,kBAAkBkB,UAAUU,YAAYd,WAAWK,UAAU,GAAGC,SAAS,GAAGU;IAClG;IAEA,uEAAuE;IACvE,MAAMM,eAAelC,oBAAoB;QACvCgB;QACAV;QACAC;QACAK;QACAY;QACAd;QACAG;IACF;IACA,IAAIqB,aAAaC,MAAM,KAAK,GAAG;QAC7B,OAAO;IACT;IAEA,MAAMC,cAAc9B,KAAK6B,MAAM;IAE/B,qBACE,KAAC1C;QAAO4C,WAAWT;kBACjB,cAAA,KAACpC;YACC2B,KAAKC;YACLkB,IAAI,CAACC,QAAUxC,iBAAiBwC,OAAO3B,WAAWoB;YAClDQ,OAAO;gBACLzB,WAAWA,UAAUU,OAAO;YAC9B;sBAEA,cAAA,MAAC/B;gBAAM+C,SAAS;;kCACd,KAACxC;wBACCiC,cAAcA;wBACdE,aAAaA;wBACb5B,eAAeA;wBACfa,iBAAiBA;wBACjBR,eAAeA;wBACf6B,gBAAgB,CAACC,UAAY7B,iBAAiB6B;wBAC9ChC,cAAcA;;kCAEhB,KAACT;wBAAe0C,QAAQV;wBAAczB,YAAYA;;;;;;AAK5D,GAAG"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.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 { memo, MutableRefObject, useRef, useState } from 'react';\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { FormatOptions, TimeSeries } from '@perses-dev/core';\nimport useResizeObserver from 'use-resize-observer';\nimport { TimeChartSeriesMapping } from '../model';\nimport { CursorCoordinates, useMousePosition } from './tooltip-model';\nimport { assembleTransform, getTooltipStyles } from './utils';\nimport { getNearbySeriesData } from './nearby-series';\nimport { TooltipHeader } from './TooltipHeader';\nimport { TooltipContent } from './TooltipContent';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef<string | undefined>();\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  if (mousePos === null || mousePos.target === null || data === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    format,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["memo","useRef","useState","Box","Portal","Stack","useResizeObserver","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","format","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","nearbySeries","length","totalSeries","container","sx","theme","style","spacing","onShowAllClick","checked","series"],"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,SAASA,IAAI,EAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACjE,SAASC,GAAG,EAAEC,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAGnD,OAAOC,uBAAuB,sBAAsB;AAEpD,SAA4BC,gBAAgB,QAAQ,kBAAkB;AACtE,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,UAAU;AAC9D,SAASC,mBAAmB,QAAQ,kBAAkB;AACtD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,cAAc,QAAQ,mBAAmB;AAkBlD,OAAO,MAAMC,iCAAmBb,KAAK,SAASa,iBAAiB,EAC7DC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,aAAa,EACbC,gBAAgB,IAAI,EACpBC,UAAU,EACVC,MAAM,EACNC,YAAY,EACZC,SAAS,EACa;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGtB,SAAS;IACnD,MAAMuB,YAAYxB;IAElB,MAAMyB,WAAWnB;IACjB,MAAM,EAAEoB,MAAM,EAAEC,KAAK,EAAEC,KAAKC,UAAU,EAAE,GAAGxB;IAE3C,MAAMyB,kBAAkBT,cAAc,QAAQJ;IAE9C,IAAIQ,aAAa,QAAQA,SAASM,MAAM,KAAK,QAAQhB,SAAS,MAAM,OAAO;IAE3E,0EAA0E;IAC1E,IAAIM,cAAc,QAAQ,AAACI,SAASM,MAAM,CAAiBC,OAAO,KAAK,UAAU,OAAO;IAExF,MAAMC,QAAQnB,SAASoB,OAAO;IAE9B,MAAMC,mBAAmBtB,cAAcuB,SAASC,aAAa,CAACxB,eAAeyB;IAC7E,uHAAuH;IACvH,MAAMC,YAAYJ,mBAAmBA,iBAAiBK,qBAAqB,GAAGd,MAAM,GAAGY;IAEvFd,UAAUU,OAAO,GAAG3B,kBAAkBkB,UAAUJ,WAAWK,UAAU,GAAGC,SAAS,GAAGQ;IAEpF,uEAAuE;IACvE,MAAMM,eAAehC,oBAAoB;QACvCgB;QACAV;QACAC;QACAK;QACAY;QACAd;QACAG;IACF;IACA,IAAImB,aAAaC,MAAM,KAAK,GAAG;QAC7B,OAAO;IACT;IAEA,MAAMC,cAAc5B,KAAK2B,MAAM;IAE/B,qBACE,KAACvC;QAAOyC,WAAWT;kBACjB,cAAA,KAACjC;YACC0B,KAAKC;YACLgB,IAAI,CAACC,QAAUtC,iBAAiBsC,OAAOzB,WAAWkB;YAClDQ,OAAO;gBACLvB,WAAWA,UAAUU,OAAO;YAC9B;sBAEA,cAAA,MAAC9B;gBAAM4C,SAAS;;kCACd,KAACtC;wBACC+B,cAAcA;wBACdE,aAAaA;wBACb1B,eAAeA;wBACfa,iBAAiBA;wBACjBR,eAAeA;wBACf2B,gBAAgB,CAACC,UAAY3B,iBAAiB2B;wBAC9C9B,cAAcA;;kCAEhB,KAACT;wBAAewC,QAAQV;wBAAcvB,YAAYA;;;;;;AAK5D,GAAG"}

package/dist/TimeSeriesTooltip/tooltip-model.d.ts

@@ -57,14 +57,7 @@ type ZREventProperties = {
     zrEventControl?: 'no_globalout' | 'only_globalout';
     zrByTouch?: boolean;
 };
-export type ZRRawMouseEvent = (MouseEvent | PointerEvent) & ZREventProperties;
-type ZRBrowser = {
-    ie: RegExpMatchArray | null;
-    edge: RegExpMatchArray | null;
-};
-export declare const browser: ZRBrowser;
-export declare const pointerEventsSupported: boolean | "" | RegExpMatchArray | null | undefined;
-export declare const trackingEventName: string;
+export type ZRRawMouseEvent = MouseEvent & ZREventProperties;
 export declare const useMousePosition: () => CursorData['coords'];
 export type TooltipConfig = {
     wrapLabels: boolean;

package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAChE,eAAO,MAAM,+BAA+B,OAAO,CAAC;AACpD,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,eAAO,MAAM,yBAAyB,qCAAqC,CAAC;AAC5E,eAAO,MAAM,6BAA6B,iDAAiD,CAAC;AAE5F,eAAO,MAAM,yBAAyB,YAAY,CAAC;AAEnD,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAa7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAAsB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,EAAE,YAAY,CAAC;IACzB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACxC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,CAAC,UAAU,GAAG,YAAY,CAAC,GAAG,iBAAiB,CAAC;AAE9E,KAAK,SAAS,GAAG;IACf,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC5B,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,SAKrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,oDACmE,CAAC;AAEvG,eAAO,MAAM,iBAAiB,QAAuD,CAAC;AAEtF,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAqCtD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,aAGpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,uBAAuB,CAAC;AAE1D,eAAO,MAAM,uBAAuB,yBAAyB,CAAC"}
+{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAChE,eAAO,MAAM,+BAA+B,OAAO,CAAC;AACpD,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,eAAO,MAAM,yBAAyB,qCAAqC,CAAC;AAC5E,eAAO,MAAM,6BAA6B,iDAAiD,CAAC;AAE5F,eAAO,MAAM,yBAAyB,YAAY,CAAC;AAEnD,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAa7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAAsB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,EAAE,YAAY,CAAC;IACzB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACxC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAkCtD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,aAGpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,uBAAuB,CAAC;AAE1D,eAAO,MAAM,uBAAuB,yBAAyB,CAAC"}

package/dist/TimeSeriesTooltip/tooltip-model.js

@@ -45,14 +45,6 @@ export const defaultCursorData = {
     chartWidth: 0
 };
 export const EMPTY_TOOLTIP_DATA = [];
-export const browser = {
-    // IE 11 Trident/7.0; rv:11.0
-    ie: navigator.userAgent.match(/MSIE\s([\d.]+)/) || navigator.userAgent.match(/Trident\/.+?rv:(([\d.]+))/),
-    // IE 12 and 12+
-    edge: navigator.userAgent.match(/Edge?\/([\d.]+)/)
-};
-export const pointerEventsSupported = 'onpointerdown' in window && (browser.edge || browser.ie && browser.ie[1] && +browser.ie[1] >= 11);
-export const trackingEventName = pointerEventsSupported ? 'pointermove' : 'mousemove';
 export const useMousePosition = ()=>{
     const [coords, setCoords] = useState(null);
     useEffect(()=>{
@@ -67,22 +59,20 @@ export const useMousePosition = ()=>{
                     y: e.clientY
                 },
                 plotCanvas: {
-                    // Always use zrender mousemove coords since they handle browser inconsistencies for us
+                    // Default to zrender mousemove coords since they handle browser inconsistencies for us
                     // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY
                     // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120
-                    x: e.zrX,
-                    y: e.zrY
+                    // Fallback to offsetX and offsetY to ensure tooltip works correctly in Edge
+                    x: e.zrX ?? e.offsetX,
+                    y: e.zrY ?? e.offsetY
                 },
                 // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)
                 target: e.target
             });
         };
-        // Devices that both enabled touch and mouse don't trigger touch events correctly
-        // which leads to missing zrender mousemove coordinates
-        // {@link https://github.com/ecomfe/zrender/blob/ae8cfaae186e6c1bf66b5dc431b2cdda5e67dacf/src/dom/HandlerProxy.ts#L423-L428 }
-        window.addEventListener(trackingEventName, setFromEvent);
+        window.addEventListener('mousemove', setFromEvent);
         return ()=>{
-            window.removeEventListener(trackingEventName, setFromEvent);
+            window.removeEventListener('mousemove', setFromEvent);
         };
     }, []);
     return coords;

package/dist/TimeSeriesTooltip/tooltip-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-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 { useEffect, useState } from 'react';\nimport { NearbySeriesArray } from './nearby-series';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 650;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\nexport const TOOLTIP_PADDING = 8;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const EMPTY_TOOLTIP_DATA: NearbySeriesArray = [];\n\n/**\n * ECharts is built with zrender, zrX and zrY are undefined when not hovering over a chart canvas\n */\nexport interface ZRCoordinate {\n  x?: number;\n  y?: number;\n}\n\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport interface CursorCoordinates {\n  page: Coordinate;\n  client: Coordinate;\n  plotCanvas: ZRCoordinate;\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = (MouseEvent | PointerEvent) & ZREventProperties;\n\ntype ZRBrowser = {\n  ie: RegExpMatchArray | null;\n  edge: RegExpMatchArray | null;\n};\n\nexport const browser: ZRBrowser = {\n  // IE 11 Trident/7.0; rv:11.0\n  ie: navigator.userAgent.match(/MSIE\\s([\\d.]+)/) || navigator.userAgent.match(/Trident\\/.+?rv:(([\\d.]+))/),\n  // IE 12 and 12+\n  edge: navigator.userAgent.match(/Edge?\\/([\\d.]+)/),\n};\n\nexport const pointerEventsSupported =\n  'onpointerdown' in window && (browser.edge || (browser.ie && browser.ie[1] && +browser.ie[1] >= 11));\n\nexport const trackingEventName = pointerEventsSupported ? 'pointermove' : 'mousemove';\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent): void => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          // Always use zrender mousemove coords since they handle browser inconsistencies for us\n          // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY\n          // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120\n          x: e.zrX,\n          y: e.zrY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n\n    // Devices that both enabled touch and mouse don't trigger touch events correctly\n    // which leads to missing zrender mousemove coordinates\n    // {@link https://github.com/ecomfe/zrender/blob/ae8cfaae186e6c1bf66b5dc431b2cdda5e67dacf/src/dom/HandlerProxy.ts#L423-L428 }\n    window.addEventListener(trackingEventName, setFromEvent);\n\n    return (): void => {\n      window.removeEventListener(trackingEventName, setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n  enablePinning?: boolean;\n};\n\nexport const DEFAULT_TOOLTIP_CONFIG: TooltipConfig = {\n  wrapLabels: true,\n  enablePinning: true,\n};\n\nexport const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';\n\nexport const UNPIN_TOOLTIP_HELP_TEXT = 'Click chart to unpin';\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_PADDING","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","EMPTY_TOOLTIP_DATA","browser","ie","navigator","userAgent","match","edge","pointerEventsSupported","window","trackingEventName","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","zrX","zrY","addEventListener","removeEventListener","DEFAULT_TOOLTIP_CONFIG","wrapLabels","enablePinning","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT"],"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,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAG5C,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,qBAAqB,IAAI;AACtC,OAAO,MAAMC,2BAA2BF,oBAAoB,IAAI;AAChE,OAAO,MAAMG,kCAAkC,KAAK;AACpD,OAAO,MAAMC,kBAAkB,EAAE;AAEjC,OAAO,MAAMC,uBAAuB,IAAI;AAExC,OAAO,MAAMC,4BAA4B,mCAAmC;AAC5E,OAAO,MAAMC,gCAAgC,+CAA+C;AAE5F,OAAO,MAAMC,4BAA4B,UAAU;AAEnD,OAAO,MAAMC,sBAAsB,IAAIC,KAAKC,cAAc,CAACC,WAAW;IACpEC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB;IAC/BC,QAAQ;QACNC,YAAY;YACVC,GAAG;YACHC,GAAG;QACL;QACAC,SAAS;YACPF,GAAG;YACHC,GAAG;QACL;QACAE,QAAQ;IACV;IACAC,YAAY;AACd,EAAE;AAEF,OAAO,MAAMC,qBAAwC,EAAE,CAAC;AA+CxD,OAAO,MAAMC,UAAqB;IAChC,6BAA6B;IAC7BC,IAAIC,UAAUC,SAAS,CAACC,KAAK,CAAC,qBAAqBF,UAAUC,SAAS,CAACC,KAAK,CAAC;IAC7E,gBAAgB;IAChBC,MAAMH,UAAUC,SAAS,CAACC,KAAK,CAAC;AAClC,EAAE;AAEF,OAAO,MAAME,yBACX,mBAAmBC,UAAWP,CAAAA,QAAQK,IAAI,IAAKL,QAAQC,EAAE,IAAID,QAAQC,EAAE,CAAC,EAAE,IAAI,CAACD,QAAQC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAG;AAEvG,OAAO,MAAMO,oBAAoBF,yBAAyB,gBAAgB,YAAY;AAEtF,OAAO,MAAMG,mBAAmB;IAC9B,MAAM,CAACjB,QAAQkB,UAAU,GAAGzC,SAA+B;IAE3DD,UAAU;QACR,MAAM2C,eAAe,CAACC;YACpB,OAAOF,UAAU;gBACfG,MAAM;oBACJnB,GAAGkB,EAAEE,KAAK;oBACVnB,GAAGiB,EAAEG,KAAK;gBACZ;gBACAC,QAAQ;oBACNtB,GAAGkB,EAAEK,OAAO;oBACZtB,GAAGiB,EAAEM,OAAO;gBACd;gBACAzB,YAAY;oBACV,uFAAuF;oBACvF,wFAAwF;oBACxF,qFAAqF;oBACrFC,GAAGkB,EAAEO,GAAG;oBACRxB,GAAGiB,EAAEQ,GAAG;gBACV;gBACA,0HAA0H;gBAC1HvB,QAAQe,EAAEf,MAAM;YAClB;QACF;QAEA,iFAAiF;QACjF,uDAAuD;QACvD,6HAA6H;QAC7HU,OAAOc,gBAAgB,CAACb,mBAAmBG;QAE3C,OAAO;YACLJ,OAAOe,mBAAmB,CAACd,mBAAmBG;QAChD;IACF,GAAG,EAAE;IAEL,OAAOnB;AACT,EAAE;AAQF,OAAO,MAAM+B,yBAAwC;IACnDC,YAAY;IACZC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,wBAAwB,qBAAqB;AAE1D,OAAO,MAAMC,0BAA0B,uBAAuB"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-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 { useEffect, useState } from 'react';\nimport { NearbySeriesArray } from './nearby-series';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 650;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\nexport const TOOLTIP_PADDING = 8;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const EMPTY_TOOLTIP_DATA: NearbySeriesArray = [];\n\n/**\n * ECharts is built with zrender, zrX and zrY are undefined when not hovering over a chart canvas\n */\nexport interface ZRCoordinate {\n  x?: number;\n  y?: number;\n}\n\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport interface CursorCoordinates {\n  page: Coordinate;\n  client: Coordinate;\n  plotCanvas: ZRCoordinate;\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent): void => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          // Default to zrender mousemove coords since they handle browser inconsistencies for us\n          // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY\n          // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120\n          // Fallback to offsetX and offsetY to ensure tooltip works correctly in Edge\n          x: e.zrX ?? e.offsetX,\n          y: e.zrY ?? e.offsetY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return (): void => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n  enablePinning?: boolean;\n};\n\nexport const DEFAULT_TOOLTIP_CONFIG: TooltipConfig = {\n  wrapLabels: true,\n  enablePinning: true,\n};\n\nexport const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';\n\nexport const UNPIN_TOOLTIP_HELP_TEXT = 'Click chart to unpin';\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_PADDING","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","EMPTY_TOOLTIP_DATA","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","zrX","offsetX","zrY","offsetY","window","addEventListener","removeEventListener","DEFAULT_TOOLTIP_CONFIG","wrapLabels","enablePinning","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT"],"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,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAG5C,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,qBAAqB,IAAI;AACtC,OAAO,MAAMC,2BAA2BF,oBAAoB,IAAI;AAChE,OAAO,MAAMG,kCAAkC,KAAK;AACpD,OAAO,MAAMC,kBAAkB,EAAE;AAEjC,OAAO,MAAMC,uBAAuB,IAAI;AAExC,OAAO,MAAMC,4BAA4B,mCAAmC;AAC5E,OAAO,MAAMC,gCAAgC,+CAA+C;AAE5F,OAAO,MAAMC,4BAA4B,UAAU;AAEnD,OAAO,MAAMC,sBAAsB,IAAIC,KAAKC,cAAc,CAACC,WAAW;IACpEC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB;IAC/BC,QAAQ;QACNC,YAAY;YACVC,GAAG;YACHC,GAAG;QACL;QACAC,SAAS;YACPF,GAAG;YACHC,GAAG;QACL;QACAE,QAAQ;IACV;IACAC,YAAY;AACd,EAAE;AAEF,OAAO,MAAMC,qBAAwC,EAAE,CAAC;AA0CxD,OAAO,MAAMC,mBAAmB;IAC9B,MAAM,CAACR,QAAQS,UAAU,GAAGhC,SAA+B;IAE3DD,UAAU;QACR,MAAMkC,eAAe,CAACC;YACpB,OAAOF,UAAU;gBACfG,MAAM;oBACJV,GAAGS,EAAEE,KAAK;oBACVV,GAAGQ,EAAEG,KAAK;gBACZ;gBACAC,QAAQ;oBACNb,GAAGS,EAAEK,OAAO;oBACZb,GAAGQ,EAAEM,OAAO;gBACd;gBACAhB,YAAY;oBACV,uFAAuF;oBACvF,wFAAwF;oBACxF,qFAAqF;oBACrF,4EAA4E;oBAC5EC,GAAGS,EAAEO,GAAG,IAAIP,EAAEQ,OAAO;oBACrBhB,GAAGQ,EAAES,GAAG,IAAIT,EAAEU,OAAO;gBACvB;gBACA,0HAA0H;gBAC1HhB,QAAQM,EAAEN,MAAM;YAClB;QACF;QACAiB,OAAOC,gBAAgB,CAAC,aAAab;QAErC,OAAO;YACLY,OAAOE,mBAAmB,CAAC,aAAad;QAC1C;IACF,GAAG,EAAE;IAEL,OAAOV;AACT,EAAE;AAQF,OAAO,MAAMyB,yBAAwC;IACnDC,YAAY;IACZC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,wBAAwB,qBAAqB;AAE1D,OAAO,MAAMC,0BAA0B,uBAAuB"}

package/dist/TimeSeriesTooltip/utils.d.ts

@@ -3,7 +3,7 @@ import { CursorCoordinates, CursorData } from './tooltip-model';
 /**
  * Determine position of tooltip depending on chart dimensions and the number of focused series
  */
-export declare function assembleTransform(mousePos: CursorData['coords'], chartWidth: number, pinnedPos: CursorCoordinates | null, tooltipHeight: number, tooltipWidth: number, containerElement?: Element | null): string | undefined;
+export declare function assembleTransform(mousePos: CursorData['coords'], pinnedPos: CursorCoordinates | null, tooltipHeight: number, tooltipWidth: number, containerElement?: Element | null): string | undefined;
 /**
  * Helper for tooltip positioning styles
  */

package/dist/TimeSeriesTooltip/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,UAAU,EAOX,MAAM,iBAAiB,CAAC;AAEzB;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,GAChC,MAAM,GAAG,SAAS,CAgDpB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAwBzB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,UAAU,EAMX,MAAM,iBAAiB,CAAC;AAEzB;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,GAChC,MAAM,GAAG,SAAS,CAmDpB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAwBzB"}