@perses-dev/components 0.29.1 → 0.31.0

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

@@ -0,0 +1,83 @@
+/// <reference types="react" />
+import { Theme } from '@mui/material';
+import { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowSelectionState } from '@tanstack/react-table';
+export declare type TableDensity = 'compact' | 'standard';
+export interface TableProps<TableData> {
+    /**
+     * Height of the table.
+     */
+    height: number;
+    /**
+     * Width of the table.
+     */
+    width: number;
+    /**
+     * Array of data to render in the table. Each entry in the array will be
+     * rendered as a row in the table.
+     */
+    data: TableData[];
+    /**
+     * Array of column configuration for the table. Each entry in the array will
+     * be rendered as a column header and impact the rendering of cells within
+     * table rows.
+     */
+    columns: Array<TableColumnConfig<TableData>>;
+    /**
+     * The density of the table layout. This impacts the size and space taken up
+     * by content in the table (e.g. font size, padding).
+     */
+    density?: TableDensity;
+    /**
+     * When `true`, the first column of the table will include checkboxes.
+     */
+    checkboxSelection?: boolean;
+    /**
+     * State of selected rows in the table when `checkboxSelection` is enabled.
+     *
+     * Selected row state is a controlled value that should be managed using a
+     * combination of this prop and `onRowSelectionChange`.
+     */
+    rowSelection?: RowSelectionState;
+    /**
+     * Callback fired when the selected rows in the table changes.
+     */
+    onRowSelectionChange?: (rowSelection: RowSelectionState) => 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
+     * is used as the unique identifier.
+     */
+    getRowId?: CoreOptions<TableData>['getRowId'];
+    /**
+     * Function used to determine the color of the checkbox when `checkboxSelection`
+     * is enabled. If not set, a default color is used.
+     */
+    getCheckboxColor?: (rowData: TableData) => string;
+}
+declare type TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {
+    height: number;
+};
+/**
+ * Returns the properties to lay out the content of table cells based on the
+ * theme and density.
+ */
+export declare function getTableCellLayout(theme: Theme, density: TableDensity): TableCellLayout;
+export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {
+    /**
+     * Text to display in the header for the column.
+     */
+    header: string;
+    /**
+     * Width of the column when rendered in a table. It should be a number in pixels
+     * or "auto" to allow the table to automatically adjust the width to fill
+     * space.
+     * @default 'auto'
+     */
+    width?: number | 'auto';
+}
+/**
+ * Takes in a perses table column and transforms it into a tanstack column.
+ */
+export declare function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>): ColumnDef<TableData, unknown>[];
+export {};
+//# sourceMappingURL=table-model.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAGxG,oBAAY,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,UAAU,CAAC,SAAS;IACnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;IAE7C;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEjE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAE9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,MAAM,CAAC;CACnD;AAWD,aAAK,eAAe,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;IACrG,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,GAAG,eAAe,CAyBvF;AAKD,MAAM,WAAW,iBAAiB,CAAC,SAAS,CAI1C,SAAQ,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC1E;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAIf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,mCA6BrG"}

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

@@ -0,0 +1,73 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+function calculateTableCellHeight(lineHeight, paddingY) {
+    // Doing a bunch of math to enforce height to avoid weirdness with mismatched
+    // heights based on customization of cell contents.
+    const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight !== null && lineHeight !== void 0 ? lineHeight : 0;
+    const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
+    return lineHeightNum + verticalPaddingNum * 2;
+}
+/**
+ * Returns the properties to lay out the content of table cells based on the
+ * theme and density.
+ */ export function getTableCellLayout(theme, density) {
+    if (density === 'compact') {
+        const paddingY = theme.spacing(0.5);
+        const paddingX = theme.spacing(0.25);
+        const lineHeight = theme.typography.body2.lineHeight;
+        return {
+            padding: `${paddingY} ${paddingX}`,
+            height: calculateTableCellHeight(lineHeight, paddingY),
+            fontSize: theme.typography.body2.fontSize,
+            lineHeight: lineHeight
+        };
+    }
+    // standard density
+    const paddingY1 = theme.spacing(1);
+    const paddingX1 = theme.spacing(1.25);
+    const lineHeight1 = theme.typography.body1.lineHeight;
+    return {
+        padding: `${paddingY1} ${paddingX1}`,
+        height: calculateTableCellHeight(lineHeight1, paddingY1),
+        fontSize: theme.typography.body1.fontSize,
+        lineHeight: lineHeight1
+    };
+}
+/**
+ * Takes in a perses table column and transforms it into a tanstack column.
+ */ export function persesColumnsToTanstackColumns(columns) {
+    const tableCols = columns.map(({ width , ...otherProps })=>{
+        // Tanstack Table does not support an "auto" value to naturally size to fit
+        // the space in a table. We translate our custom "auto" setting to 0 size
+        // for these columns, so it is easy to fall back to auto when rendering.
+        // Taking from a recommendation in this github discussion:
+        // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326
+        const sizeProps = width === 'auto' || width === undefined ? {
+            // All zero values are used as shorthand for "auto" when rendering
+            // because it makes it easy to fall back. (e.g. `row.size || "auto"`)
+            size: 0,
+            minSize: 0,
+            maxSize: 0
+        } : {
+            size: width
+        };
+        const result = {
+            ...otherProps,
+            ...sizeProps
+        };
+        return result;
+    });
+    return tableCols;
+}
+
+//# sourceMappingURL=table-model.js.map

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

@@ -0,0 +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 { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowSelectionState } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\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   * 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 `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\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 selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => 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\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(theme: Theme, density: TableDensity): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n    const paddingX = theme.spacing(0.25);\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingX}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const paddingX = theme.spacing(1.25);\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingX}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: 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>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(({ width, ...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\n    return result;\n  });\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","spacing","paddingX","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","otherProps","sizeProps","undefined","size","minSize","maxSize","result"],"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;AAsEjC,SAASA,wBAAwB,CAACC,UAAuC,EAAEC,QAAgB,EAAU;IACnG,6EAA6E;IAC7E,mDAAmD;IACnD,MAAMC,aAAa,GAAG,OAAOF,UAAU,KAAK,QAAQ,GAAGG,QAAQ,CAACH,UAAU,EAAE,EAAE,CAAC,GAAGA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,AAAC;IAClG,MAAMI,kBAAkB,GAAG,OAAOH,QAAQ,KAAK,QAAQ,GAAGE,QAAQ,CAACF,QAAQ,EAAE,EAAE,CAAC,GAAGA,QAAQ,AAAC;IAE5F,OAAOC,aAAa,GAAGE,kBAAkB,GAAG,CAAC,CAAC;AAChD,CAAC;AAMD;;;CAGC,GACD,OAAO,SAASC,kBAAkB,CAACC,KAAY,EAAEC,OAAqB,EAAmB;IACvF,IAAIA,OAAO,KAAK,SAAS,EAAE;QACzB,MAAMN,QAAQ,GAAGK,KAAK,CAACE,OAAO,CAAC,GAAG,CAAC,AAAC;QACpC,MAAMC,QAAQ,GAAGH,KAAK,CAACE,OAAO,CAAC,IAAI,CAAC,AAAC;QACrC,MAAMR,UAAU,GAAGM,KAAK,CAACI,UAAU,CAACC,KAAK,CAACX,UAAU,AAAC;QAErD,OAAO;YACLY,OAAO,EAAE,CAAC,EAAEX,QAAQ,CAAC,CAAC,EAAEQ,QAAQ,CAAC,CAAC;YAClCI,MAAM,EAAEd,wBAAwB,CAACC,UAAU,EAAEC,QAAQ,CAAC;YACtDa,QAAQ,EAAER,KAAK,CAACI,UAAU,CAACC,KAAK,CAACG,QAAQ;YACzCd,UAAU,EAAEA,UAAU;SACvB,CAAC;IACJ,CAAC;IAED,mBAAmB;IACnB,MAAMC,SAAQ,GAAGK,KAAK,CAACE,OAAO,CAAC,CAAC,CAAC,AAAC;IAClC,MAAMC,SAAQ,GAAGH,KAAK,CAACE,OAAO,CAAC,IAAI,CAAC,AAAC;IACrC,MAAMR,WAAU,GAAGM,KAAK,CAACI,UAAU,CAACK,KAAK,CAACf,UAAU,AAAC;IAErD,OAAO;QACLY,OAAO,EAAE,CAAC,EAAEX,SAAQ,CAAC,CAAC,EAAEQ,SAAQ,CAAC,CAAC;QAClCI,MAAM,EAAEd,wBAAwB,CAACC,WAAU,EAAEC,SAAQ,CAAC;QACtDa,QAAQ,EAAER,KAAK,CAACI,UAAU,CAACK,KAAK,CAACD,QAAQ;QACzCd,UAAU,EAAEA,WAAU;KACvB,CAAC;AACJ,CAAC;AA0BD;;CAEC,GACD,OAAO,SAASgB,8BAA8B,CAAYC,OAA4C,EAAE;IACtG,MAAMC,SAAS,GAAgCD,OAAO,CAACE,GAAG,CAAC,CAAC,EAAEC,KAAK,CAAA,EAAE,GAAGC,UAAU,EAAE,GAAK;QACvF,2EAA2E;QAC3E,yEAAyE;QACzE,wEAAwE;QACxE,0DAA0D;QAC1D,+EAA+E;QAC/E,MAAMC,SAAS,GACbF,KAAK,KAAK,MAAM,IAAIA,KAAK,KAAKG,SAAS,GACnC;YACE,kEAAkE;YAClE,qEAAqE;YACrEC,IAAI,EAAE,CAAC;YACPC,OAAO,EAAE,CAAC;YACVC,OAAO,EAAE,CAAC;SACX,GACD;YACEF,IAAI,EAAEJ,KAAK;SACZ,AAAC;QAER,MAAMO,MAAM,GAAG;YACb,GAAGN,UAAU;YACb,GAAGC,SAAS;SACb,AAAC;QAEF,OAAOK,MAAM,CAAC;IAChB,CAAC,CAAC,AAAC;IAEH,OAAOT,SAAS,CAAC;AACnB,CAAC"}

package/dist/TimeSeriesTooltip/SeriesInfo.d.ts

@@ -5,6 +5,7 @@ export interface SeriesInfoProps {
     formattedY: string;
     markerColor: string;
     totalSeries: number;
+    emphasizeText?: boolean;
     wrapLabels?: boolean;
 }
 export declare function SeriesInfo(props: SeriesInfoProps): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAwEhD"}
+{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA0EhD"}

package/dist/TimeSeriesTooltip/SeriesInfo.js

@@ -14,9 +14,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { SeriesMarker } from './SeriesMarker';
 import { SeriesLabelsStack } from './SeriesLabelsStack';
-import { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';
+import { TOOLTIP_LABELS_MAX_WIDTH, EMPHASIZED_SERIES_DESCRIPTION, NEARBY_SERIES_DESCRIPTION } from './tooltip-model';
 export function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels =true  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , emphasizeText =false , wrapLabels =true  } = props;
     // metric __name__ comes before opening curly brace, ignore if not populated
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
@@ -65,21 +65,23 @@ export function SeriesInfo(props) {
                                 maxWidth: TOOLTIP_LABELS_MAX_WIDTH,
                                 overflow: 'hidden',
                                 color: theme.palette.common.white,
+                                fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
+                        "aria-label": emphasizeText ? EMPHASIZED_SERIES_DESCRIPTION : NEARBY_SERIES_DESCRIPTION,
                         children: formattedSeriesInfo
                     })
                 ]
             }),
             /*#__PURE__*/ _jsx(Box, {
-                sx: {
-                    display: 'table-cell',
-                    paddingLeft: 1.5,
-                    textAlign: 'right',
-                    verticalAlign: 'top',
-                    fontWeight: '700'
-                },
+                sx: (theme)=>({
+                        display: 'table-cell',
+                        paddingLeft: 1.5,
+                        textAlign: 'right',
+                        verticalAlign: 'top',
+                        fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular
+                    }),
                 children: formattedY
             })
         ]

package/dist/TimeSeriesTooltip/SeriesInfo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  formattedY: string;\n  markerColor: string;\n  totalSeries: number;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n  const { seriesName, formattedY, markerColor, totalSeries, wrapLabels = true } = props;\n\n  // metric __name__ comes before opening curly brace, ignore if not populated\n  // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n  // ex without metric name: {env=\"demo\",job=\"node\"}\n  const splitName = seriesName.split('{');\n  const seriesLabels = splitName[1] ?? seriesName;\n\n  // remove curly braces that wrap labels\n  const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n  // determine whether to show labels on separate lines\n  const splitLabels = formattedSeriesLabels.split(',');\n  if (totalSeries === 1 && splitLabels.length > 1) {\n    const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n    return (\n      <SeriesLabelsStack\n        formattedY={formattedY}\n        metricName={metricName}\n        metricLabels={splitLabels}\n        markerColor={markerColor}\n      />\n    );\n  }\n\n  // add space after commas so wrapLabels works\n  const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');\n\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            display: 'inline-block',\n            width: 'calc(100% - 20px)',\n            minWidth: 150,\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            color: theme.palette.common.white,\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n          })}\n        >\n          {formattedSeriesInfo}\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          display: 'table-cell',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n          fontWeight: '700',\n        }}\n      >\n        {formattedY}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","SeriesMarker","SeriesLabelsStack","TOOLTIP_LABELS_MAX_WIDTH","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","wrapLabels","splitName","split","seriesLabels","formattedSeriesLabels","replace","splitLabels","length","metricName","metricLabels","formattedSeriesInfo","sx","display","paddingTop","maxWidth","marginTop","component","theme","width","minWidth","overflow","color","palette","common","white","textOverflow","whiteSpace","paddingLeft","textAlign","verticalAlign","fontWeight"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AACpC,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAC9C,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AACxD,SAASC,wBAAwB,QAAQ,iBAAiB,CAAC;AAW3D,OAAO,SAASC,UAAU,CAACC,KAAsB,EAAE;IACjD,MAAM,EAAEC,UAAU,CAAA,EAAEC,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAEC,WAAW,CAAA,EAAEC,UAAU,EAAG,IAAI,CAAA,EAAE,GAAGL,KAAK,AAAC;IAEtF,4EAA4E;IAC5E,0DAA0D;IAC1D,kDAAkD;IAClD,MAAMM,SAAS,GAAGL,UAAU,CAACM,KAAK,CAAC,GAAG,CAAC,AAAC;QACnBD,GAAY;IAAjC,MAAME,YAAY,GAAGF,CAAAA,GAAY,GAAZA,SAAS,CAAC,CAAC,CAAC,cAAZA,GAAY,cAAZA,GAAY,GAAIL,UAAU,AAAC;IAEhD,uCAAuC;IACvC,MAAMQ,qBAAqB,GAAGD,YAAY,CAACE,OAAO,UAAU,EAAE,CAAC,AAAC;IAEhE,qDAAqD;IACrD,MAAMC,WAAW,GAAGF,qBAAqB,CAACF,KAAK,CAAC,GAAG,CAAC,AAAC;IACrD,IAAIH,WAAW,KAAK,CAAC,IAAIO,WAAW,CAACC,MAAM,GAAG,CAAC,EAAE;QAC/C,MAAMC,UAAU,GAAGP,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,EAAEA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,AAAC;QAChE,qBACE,KAACT,iBAAiB;YAChBK,UAAU,EAAEA,UAAU;YACtBW,UAAU,EAAEA,UAAU;YACtBC,YAAY,EAAEH,WAAW;YACzBR,WAAW,EAAEA,WAAW;UACxB,CACF;IACJ,CAAC;IAED,6CAA6C;IAC7C,MAAMY,mBAAmB,GAAGd,UAAU,CAACS,OAAO,SAAS,IAAI,CAAC,AAAC;IAE7D,qBACE,MAACf,GAAG;QACFqB,EAAE,EAAE;YACFC,OAAO,EAAE,WAAW;YACpBC,UAAU,EAAE,GAAG;SAChB;;0BAED,MAACvB,GAAG;gBACFqB,EAAE,EAAE;oBACFC,OAAO,EAAE,YAAY;oBACrBE,QAAQ,EAAE,OAAO;iBAClB;;kCAED,KAACvB,YAAY;wBAACO,WAAW,EAAEA,WAAW;wBAAEa,EAAE,EAAE;4BAAEI,SAAS,EAAE,GAAG;yBAAE;sBAAI;kCAClE,KAACzB,GAAG;wBACF0B,SAAS,EAAC,MAAM;wBAChBL,EAAE,EAAE,CAACM,KAAK,GAAM,CAAA;gCACdL,OAAO,EAAE,cAAc;gCACvBM,KAAK,EAAE,mBAAmB;gCAC1BC,QAAQ,EAAE,GAAG;gCACbL,QAAQ,EAAErB,wBAAwB;gCAClC2B,QAAQ,EAAE,QAAQ;gCAClBC,KAAK,EAAEJ,KAAK,CAACK,OAAO,CAACC,MAAM,CAACC,KAAK;gCACjCC,YAAY,EAAE,UAAU;gCACxBC,UAAU,EAAE1B,UAAU,GAAG,QAAQ,GAAG,QAAQ;6BAC7C,CAAA,AAAC;kCAEDU,mBAAmB;sBAChB;;cACF;0BACN,KAACpB,GAAG;gBACFqB,EAAE,EAAE;oBACFC,OAAO,EAAE,YAAY;oBACrBe,WAAW,EAAE,GAAG;oBAChBC,SAAS,EAAE,OAAO;oBAClBC,aAAa,EAAE,KAAK;oBACpBC,UAAU,EAAE,KAAK;iBAClB;0BAEAjC,UAAU;cACP;;MACF,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { TOOLTIP_LABELS_MAX_WIDTH, EMPHASIZED_SERIES_DESCRIPTION, NEARBY_SERIES_DESCRIPTION } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  formattedY: string;\n  markerColor: string;\n  totalSeries: number;\n  emphasizeText?: boolean;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n  const { seriesName, formattedY, markerColor, totalSeries, emphasizeText = false, wrapLabels = true } = props;\n\n  // metric __name__ comes before opening curly brace, ignore if not populated\n  // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n  // ex without metric name: {env=\"demo\",job=\"node\"}\n  const splitName = seriesName.split('{');\n  const seriesLabels = splitName[1] ?? seriesName;\n\n  // remove curly braces that wrap labels\n  const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n  // determine whether to show labels on separate lines\n  const splitLabels = formattedSeriesLabels.split(',');\n  if (totalSeries === 1 && splitLabels.length > 1) {\n    const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n    return (\n      <SeriesLabelsStack\n        formattedY={formattedY}\n        metricName={metricName}\n        metricLabels={splitLabels}\n        markerColor={markerColor}\n      />\n    );\n  }\n\n  // add space after commas so wrapLabels works\n  const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');\n\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            display: 'inline-block',\n            width: 'calc(100% - 20px)',\n            minWidth: 150,\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            color: theme.palette.common.white,\n            fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n          })}\n          aria-label={emphasizeText ? EMPHASIZED_SERIES_DESCRIPTION : NEARBY_SERIES_DESCRIPTION}\n        >\n          {formattedSeriesInfo}\n        </Box>\n      </Box>\n      <Box\n        sx={(theme) => ({\n          display: 'table-cell',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n          fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,\n        })}\n      >\n        {formattedY}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","SeriesMarker","SeriesLabelsStack","TOOLTIP_LABELS_MAX_WIDTH","EMPHASIZED_SERIES_DESCRIPTION","NEARBY_SERIES_DESCRIPTION","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","emphasizeText","wrapLabels","splitName","split","seriesLabels","formattedSeriesLabels","replace","splitLabels","length","metricName","metricLabels","formattedSeriesInfo","sx","display","paddingTop","maxWidth","marginTop","component","theme","width","minWidth","overflow","color","palette","common","white","fontWeight","typography","fontWeightBold","fontWeightRegular","textOverflow","whiteSpace","aria-label","paddingLeft","textAlign","verticalAlign"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts

@@ -1,12 +1,13 @@
-import React from 'react';
 import { ECharts as EChartsInstance } from 'echarts/core';
+import React from 'react';
 import { EChartsDataFormat, UnitOptions } from '../model';
 interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
-    pinTooltip: boolean;
+    isTooltipPinned: boolean;
     wrapLabels?: boolean;
     unit?: UnitOptions;
+    onUnpinClick?: () => void;
 }
 export declare const TimeSeriesTooltip: React.NamedExoticComponent<TimeSeriesTooltipProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oDA2D5B,CAAC"}
+{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAa1D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,oDAwG5B,CAAC"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -10,37 +10,52 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Portal, Typography, Stack, Switch } from '@mui/material';
 import React, { useState } from 'react';
-import { Box, Portal } from '@mui/material';
-import { getFocusedSeriesData } from './focused-series';
-import { TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
+import useResizeObserver from 'use-resize-observer';
 import { TooltipContent } from './TooltipContent';
+import { getNearbySeriesData } from './nearby-series';
+import { FALLBACK_CHART_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
 import { assembleTransform } from './utils';
-export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , isTooltipPinned , unit , onUnpinClick  }) {
+    const [showAllSeries, setShowAllSeries] = useState(false);
     const [pinnedPos, setPinnedPos] = useState(null);
     const mousePos = useMousePosition();
+    const { height , width , ref: tooltipRef  } = useResizeObserver();
     if (mousePos === null || mousePos.target === null) return null;
-    // ensure user is hovering over a chart before checking for nearby series
+    // 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 focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit);
     var ref;
-    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : 750;
-    var ref1;
-    const chartHeight = (ref1 = chart === null || chart === void 0 ? void 0 : chart.getHeight()) !== null && ref1 !== void 0 ? ref1 : 230;
-    const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : FALLBACK_CHART_WIDTH; // Fallback width not likely to every be needed.
+    const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    // Get series nearby the cursor and pass into tooltip content children.
+    const focusedSeries = getNearbySeriesData({
+        mousePos,
+        chartData,
+        pinnedPos,
+        chart,
+        unit,
+        showAllSeries
+    });
     if (focusedSeries.length === 0) {
         return null;
     }
-    if (pinTooltip === true && pinnedPos === null) {
+    if (isTooltipPinned === true && pinnedPos === null) {
         setPinnedPos(mousePos);
     }
+    // Option for user to see all series instead of only the nearby focused series.
+    // Only relevant when there are more total series than are visible.
+    const showAllSeriesToggle = isTooltipPinned === true && showAllSeries === false && chartData.timeSeries.length > 1 && focusedSeries.length !== chartData.timeSeries.length;
     return /*#__PURE__*/ _jsx(Portal, {
-        children: /*#__PURE__*/ _jsx(Box, {
+        children: /*#__PURE__*/ _jsxs(Box, {
+            ref: tooltipRef,
             sx: (theme)=>({
+                    minWidth: TOOLTIP_MIN_WIDTH,
                     maxWidth: TOOLTIP_MAX_WIDTH,
                     maxHeight: TOOLTIP_MAX_HEIGHT,
+                    padding: theme.spacing(0.5, 2),
                     position: 'absolute',
                     top: 0,
                     left: 0,
@@ -60,10 +75,41 @@ export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesToo
             style: {
                 transform: cursorTransform
             },
-            children: /*#__PURE__*/ _jsx(TooltipContent, {
-                focusedSeries: focusedSeries,
-                wrapLabels: wrapLabels
-            })
+            children: [
+                /*#__PURE__*/ _jsx(TooltipContent, {
+                    series: focusedSeries,
+                    wrapLabels: wrapLabels,
+                    isTooltipPinned: isTooltipPinned,
+                    onUnpinClick: ()=>{
+                        setPinnedPos(null);
+                        if (onUnpinClick !== undefined) {
+                            onUnpinClick();
+                        }
+                    }
+                }),
+                showAllSeriesToggle && /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    gap: 1,
+                    alignItems: "center",
+                    sx: {
+                        textAlign: 'right'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            children: "Show All?"
+                        }),
+                        /*#__PURE__*/ _jsx(Switch, {
+                            checked: showAllSeries,
+                            onChange: (_, checked)=>setShowAllSeries(checked),
+                            sx: (theme)=>({
+                                    '& .MuiSwitch-switchBase': {
+                                        color: theme.palette.common.white
+                                    }
+                                })
+                        })
+                    ]
+                })
+            ]
         })
     });
 });

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useState } from 'react';\nimport { Box, Portal } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { getFocusedSeriesData } from './focused-series';\nimport { CursorCoordinates, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  pinTooltip: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  pinTooltip,\n  unit,\n}: TimeSeriesTooltipProps) {\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\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 focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit);\n  const chartWidth = chart?.getWidth() ?? 750;\n  const chartHeight = chart?.getHeight() ?? 230;\n  const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);\n\n  if (focusedSeries.length === 0) {\n    return null;\n  }\n\n  if (pinTooltip === true && pinnedPos === null) {\n    setPinnedPos(mousePos);\n  }\n\n  return (\n    <Portal>\n      <Box\n        sx={(theme) => ({\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <TooltipContent focusedSeries={focusedSeries} wrapLabels={wrapLabels} />\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["React","useState","Box","Portal","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","TooltipContent","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","pinTooltip","unit","pinnedPos","setPinnedPos","mousePos","target","tagName","chart","current","focusedSeries","chartWidth","getWidth","chartHeight","getHeight","cursorTransform","length","sx","theme","maxWidth","maxHeight","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.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, Typography, Stack, Switch } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport React, { useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_MAX_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  isTooltipPinned: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  isTooltipPinned,\n  unit,\n  onUnpinClick,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\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 every be needed.\n  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const focusedSeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (focusedSeries.length === 0) {\n    return null;\n  }\n\n  if (isTooltipPinned === true && pinnedPos === null) {\n    setPinnedPos(mousePos);\n  }\n\n  // Option for user to see all series instead of only the nearby focused series.\n  // Only relevant when there are more total series than are visible.\n  const showAllSeriesToggle =\n    isTooltipPinned === true &&\n    showAllSeries === false &&\n    chartData.timeSeries.length > 1 &&\n    focusedSeries.length !== chartData.timeSeries.length;\n\n  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          padding: theme.spacing(0.5, 2),\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <TooltipContent\n          series={focusedSeries}\n          wrapLabels={wrapLabels}\n          isTooltipPinned={isTooltipPinned}\n          onUnpinClick={() => {\n            setPinnedPos(null);\n            if (onUnpinClick !== undefined) {\n              onUnpinClick();\n            }\n          }}\n        />\n        {showAllSeriesToggle && (\n          <Stack direction=\"row\" gap={1} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n            <Typography>Show All?</Typography>\n            <Switch\n              checked={showAllSeries}\n              onChange={(_, checked) => setShowAllSeries(checked)}\n              sx={(theme) => ({\n                '& .MuiSwitch-switchBase': {\n                  color: theme.palette.common.white,\n                },\n              })}\n            />\n          </Stack>\n        )}\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Typography","Stack","Switch","React","useState","useResizeObserver","TooltipContent","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","isTooltipPinned","unit","onUnpinClick","showAllSeries","setShowAllSeries","pinnedPos","setPinnedPos","mousePos","height","width","ref","tooltipRef","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","focusedSeries","length","showAllSeriesToggle","timeSeries","sx","theme","minWidth","maxWidth","maxHeight","padding","spacing","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","series","undefined","direction","gap","alignItems","textAlign","checked","onChange","_","palette","common","white"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TooltipContent.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
-import { FocusedSeriesArray } from './focused-series';
+import { NearbySeriesArray } from './nearby-series';
 export interface TooltipContentProps {
-    focusedSeries: FocusedSeriesArray | null;
+    series: NearbySeriesArray | null;
+    isTooltipPinned: boolean;
     wrapLabels?: boolean;
+    onUnpinClick: () => void;
 }
-export declare function TooltipContent(props: TooltipContentProps): JSX.Element;
+export declare function TooltipContent(props: TooltipContentProps): JSX.Element | null;
 //# sourceMappingURL=TooltipContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAqExD"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sBAyFxD"}