@perses-dev/components 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-time-chart-rewrite-4667058

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

@@ -1,7 +1,18 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
-import { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowSelectionState } from '@tanstack/react-table';
+import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
 export declare type TableDensity = 'compact' | 'standard';
+export declare type SortDirection = 'asc' | 'desc' | undefined;
+export declare type TableRowEventOpts = {
+    /**
+     * Unique identifier for the row.
+     */
+    id: string;
+    /**
+     * Index of the row in the original data.
+     */
+    index: number;
+};
 export interface TableProps<TableData> {
     /**
      * Height of the table.
@@ -31,6 +42,18 @@ export interface TableProps<TableData> {
      * When `true`, the first column of the table will include checkboxes.
      */
     checkboxSelection?: boolean;
+    /**
+     * Determines the behavior of row selection.
+     *
+     * - `standard`: clicking a checkbox will toggle that rows's selected/unselected
+     *    state and will not impact other rows.
+     * - `legend`: clicking a checkbox will "focus" that row by selecting it and
+     *    unselecting other rows. Clicking a checkbox with a modifier key pressed,
+     *    will change this behavior to behave like `standard`.
+     *
+     * @default 'standard'
+     */
+    rowSelectionVariant?: 'standard' | 'legend';
     /**
      * State of selected rows in the table when `checkboxSelection` is enabled.
      *
@@ -38,10 +61,29 @@ export interface TableProps<TableData> {
      * combination of this prop and `onRowSelectionChange`.
      */
     rowSelection?: RowSelectionState;
+    /**
+     * Callback fired when the mouse is moved over a table row.
+     */
+    onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;
+    /**
+     * Callback fired when the mouse is moved out of a table row.
+     */
+    onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;
+    /**
+     * State of the column sorting in the table.
+     *
+     * The column sorting is a controlled value that should be managed using a
+     * combination fo this prop and `onSortingChange`.
+     */
+    sorting?: SortingState;
     /**
      * Callback fired when the selected rows in the table changes.
      */
     onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
+    /**
+     * Callback fired when the table sorting changes.
+     */
+    onSortingChange?: (sorting: SortingState) => 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
@@ -57,16 +99,52 @@ export interface TableProps<TableData> {
 declare type TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {
     height: number;
 };
+declare type GetTableCellLayoutOpts = {
+    isLastColumn?: boolean;
+    isFirstColumn?: boolean;
+};
 /**
  * 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'> {
+export declare function getTableCellLayout(theme: Theme, density: TableDensity, { isLastColumn, isFirstColumn }?: GetTableCellLayoutOpts): TableCellLayout;
+export declare type TableCellAlignment = 'left' | 'right' | 'center';
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        align?: TableColumnConfig<TData>['align'];
+        headerDescription?: TableColumnConfig<TData>['headerDescription'];
+        cellDescription?: TableColumnConfig<TData>['cellDescription'];
+    }
+}
+export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {
     /**
      * Text to display in the header for the column.
      */
     header: string;
+    /**
+     * Alignment of the content in the cell.
+     */
+    align?: TableCellAlignment;
+    /**
+     * Text to display when hovering over a cell. This can be useful for
+     * providing additional information about the column when the content is
+     * ellipsized to fit in the space.
+     *
+     * If set to `true`, it will use the value generated by the `cell` prop if it
+     * can be treated as a string.
+     */
+    cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;
+    /**
+     * When `true`, the column will be sortable.
+     * @default false
+     */
+    enableSorting?: boolean;
+    /**
+     * Text to display when hovering over the header text. This can be useful for
+     * providing additional information about the column when you want to keep the
+     * header text relatively short to manage the column width.
+     */
+    headerDescription?: 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

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":";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"}
+{"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

@@ -20,13 +20,16 @@ function calculateTableCellHeight(lineHeight, paddingY) {
 /**
  * Returns the properties to lay out the content of table cells based on the
  * theme and density.
- */ export function getTableCellLayout(theme, density) {
+ */ export function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } = {}) {
     if (density === 'compact') {
         const paddingY = theme.spacing(0.5);
-        const paddingX = theme.spacing(0.25);
+        const basePaddingX = theme.spacing(0.5);
+        const edgePaddingX = theme.spacing(1);
+        const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
+        const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
         const lineHeight = theme.typography.body2.lineHeight;
         return {
-            padding: `${paddingY} ${paddingX}`,
+            padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
             height: calculateTableCellHeight(lineHeight, paddingY),
             fontSize: theme.typography.body2.fontSize,
             lineHeight: lineHeight
@@ -34,10 +37,13 @@ function calculateTableCellHeight(lineHeight, paddingY) {
     }
     // standard density
     const paddingY1 = theme.spacing(1);
-    const paddingX1 = theme.spacing(1.25);
+    const basePaddingX1 = theme.spacing(1.25);
+    const edgePaddingX1 = theme.spacing(2);
+    const paddingLeft1 = isFirstColumn ? edgePaddingX1 : basePaddingX1;
+    const paddingRight1 = isLastColumn ? edgePaddingX1 : basePaddingX1;
     const lineHeight1 = theme.typography.body1.lineHeight;
     return {
-        padding: `${paddingY1} ${paddingX1}`,
+        padding: `${paddingY1} ${paddingRight1} ${paddingY1} ${paddingLeft1}`,
         height: calculateTableCellHeight(lineHeight1, paddingY1),
         fontSize: theme.typography.body1.fontSize,
         lineHeight: lineHeight1
@@ -46,7 +52,7 @@ function calculateTableCellHeight(lineHeight, paddingY) {
 /**
  * Takes in a perses table column and transforms it into a tanstack column.
  */ export function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , ...otherProps })=>{
+    const tableCols = columns.map(({ width , align , headerDescription , cellDescription , enableSorting , ...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.
@@ -63,7 +69,16 @@ function calculateTableCellHeight(lineHeight, paddingY) {
         };
         const result = {
             ...otherProps,
-            ...sizeProps
+            ...sizeProps,
+            // Default sorting to false, so it is very explicitly set per column.
+            enableSorting: !!enableSorting,
+            // Open-ended store for extra metadata in TanStack Table, so you can bake
+            // in your own features.
+            meta: {
+                align,
+                headerDescription,
+                cellDescription
+            }
         };
         return result;
     });

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 { 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"}
+{"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 type TableDensity = 'compact' | 'standard';\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   * 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   * 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  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\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  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n\n    const basePaddingX = theme.spacing(0.5);\n    const edgePaddingX = theme.spacing(1);\n    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\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 basePaddingX = theme.spacing(1.25);\n  const edgePaddingX = theme.spacing(2);\n  const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\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>(columns: Array<TableColumnConfig<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":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}

package/dist/TimeChart/TimeChart.d.ts

@@ -0,0 +1,23 @@
+import { MouseEvent } from 'react';
+import { TimeScale, UnitOptions, TimeSeries } from '@perses-dev/core';
+import type { EChartsCoreOption, GridComponentOption, YAXisComponentOption } from 'echarts';
+import { ChartHandle, TimeChartSeriesMapping } from '../model/graph';
+import { ZoomEventData } from '../utils';
+import { TooltipConfig } from '../TimeSeriesTooltip';
+export interface TimeChartProps {
+    height: number;
+    data: TimeSeries[];
+    seriesMapping: TimeChartSeriesMapping;
+    timeScale?: TimeScale;
+    yAxis?: YAXisComponentOption;
+    unit?: UnitOptions;
+    grid?: GridComponentOption;
+    tooltipConfig?: TooltipConfig;
+    noDataVariant?: 'chart' | 'message';
+    syncGroup?: string;
+    onDataZoom?: (e: ZoomEventData) => void;
+    onDoubleClick?: (e: MouseEvent) => void;
+    __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;
+}
+export declare const TimeChart: import("react").ForwardRefExoticComponent<TimeChartProps & import("react").RefAttributes<ChartHandle>>;
+//# sourceMappingURL=TimeChart.d.ts.map

package/dist/TimeChart/TimeChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeChart.d.ts","sourceRoot":"","sources":["../../src/TimeChart/TimeChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAG/F,OAAO,EAAsB,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAwB,WAAW,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAE3F,OAAO,EAML,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuC,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAkB1F,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,wGAsRpB,CAAC"}

package/dist/TimeChart/TimeChart.js

@@ -0,0 +1,314 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import { utcToZonedTime } from 'date-fns-tz';
+import { getCommonTimeScale } from '@perses-dev/core';
+import { use } from 'echarts/core';
+import { LineChart as EChartsLineChart } from 'echarts/charts';
+import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { EChart } from '../EChart';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { clearHighlightedSeries, enableDataZoom, getFormattedAxisLabel, getYAxes, restoreChart } from '../utils';
+import { TimeChartTooltip } from '../TimeSeriesTooltip';
+import { useTimeZone } from '../context/TimeZoneProvider';
+use([
+    EChartsLineChart,
+    GridComponent,
+    DatasetComponent,
+    DataZoomComponent,
+    MarkAreaComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    TitleComponent,
+    ToolboxComponent,
+    TooltipComponent,
+    LegendComponent,
+    CanvasRenderer
+]);
+export const TimeChart = /*#__PURE__*/ forwardRef(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , tooltipConfig ={
+    wrapLabels: true
+} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+    var ref1;
+    const chartsTheme = useChartsTheme();
+    const chartRef = useRef();
+    const [showTooltip, setShowTooltip] = useState(true);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const { timeZone  } = useTimeZone();
+    var ref2;
+    const totalSeries = (ref2 = data === null || data === void 0 ? void 0 : data.length) !== null && ref2 !== void 0 ? ref2 : 0;
+    let timeScale;
+    if (timeScaleProp === undefined) {
+        const commonTimeScale = getCommonTimeScale(data);
+        if (commonTimeScale === undefined) {
+            // set default to past 5 years
+            const today = new Date();
+            const pastDate = new Date(today);
+            pastDate.setFullYear(today.getFullYear() - 5);
+            const todayMs = today.getTime();
+            const pastDateMs = pastDate.getTime();
+            timeScale = {
+                startMs: pastDateMs,
+                endMs: todayMs,
+                stepMs: 1,
+                rangeMs: todayMs - pastDateMs
+            };
+        } else {
+            timeScale = commonTimeScale;
+        }
+    } else {
+        timeScale = timeScaleProp;
+    }
+    useImperativeHandle(ref, ()=>{
+        return {
+            highlightSeries ({ name  }) {
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: name
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                clearHighlightedSeries(chartRef.current, totalSeries);
+            }
+        };
+    }, [
+        totalSeries
+    ]);
+    const handleEvents = useMemo(()=>{
+        return {
+            datazoom: (params)=>{
+                if (onDataZoom === undefined) {
+                    setTimeout(()=>{
+                        // workaround so unpin happens after click event
+                        setTooltipPinnedCoords(null);
+                    }, 10);
+                }
+                if (onDataZoom === undefined || params.batch[0] === undefined) return;
+                const xAxisStartValue = params.batch[0].startValue;
+                const xAxisEndValue = params.batch[0].endValue;
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue
+                    };
+                    onDataZoom(zoomEvent);
+                }
+            }
+        };
+    }, [
+        onDataZoom,
+        setTooltipPinnedCoords
+    ]);
+    if (chartRef.current !== undefined) {
+        enableDataZoom(chartRef.current);
+    }
+    const { noDataOption  } = chartsTheme;
+    const option = useMemo(()=>{
+        // TODO: fix loading state and noData variants
+        // if (data === undefined) return {};
+        // The "chart" `noDataVariant` is only used when the `timeSeries` is an
+        // empty array because a `null` value will throw an error.
+        if (data === null || data.length === 0 && noDataVariant === 'message') return noDataOption;
+        // Utilizes ECharts dataset so raw data is separate from series option style properties
+        // https://apache.github.io/echarts-handbook/en/concepts/dataset/
+        const dataset = [];
+        const isLocalTimeZone = timeZone === 'local';
+        data.map((d, index)=>{
+            const values = d.values.map(([timestamp, value])=>{
+                const val = value === null ? '-' : value; // echarts use '-' to represent null data
+                return [
+                    isLocalTimeZone ? timestamp : utcToZonedTime(timestamp, timeZone),
+                    val
+                ];
+            });
+            dataset.push({
+                id: index,
+                source: [
+                    ...values
+                ],
+                dimensions: [
+                    'time',
+                    'value'
+                ]
+            });
+        });
+        var _rangeMs;
+        const option = {
+            dataset: dataset,
+            series: seriesMapping,
+            xAxis: {
+                type: 'time',
+                min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),
+                max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(timeScale.endMs, timeZone),
+                axisLabel: {
+                    hideOverlap: true,
+                    formatter: getFormattedAxisLabel((_rangeMs = timeScale.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : 0)
+                }
+            },
+            yAxis: getYAxes(yAxis, unit),
+            animation: false,
+            tooltip: {
+                show: true,
+                trigger: 'axis',
+                showContent: false
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: true
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none'
+                    }
+                }
+            },
+            grid
+        };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
+        return option;
+    }, [
+        data,
+        seriesMapping,
+        timeScale,
+        yAxis,
+        unit,
+        grid,
+        noDataOption,
+        __experimentalEChartsOptionsOverride,
+        noDataVariant,
+        timeZone
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            height
+        },
+        onClick: (e)=>{
+            // Pin and unpin when clicking on chart canvas but not tooltip text.
+            if (e.target instanceof HTMLCanvasElement) {
+                setTooltipPinnedCoords((current)=>{
+                    if (current === null) {
+                        return {
+                            page: {
+                                x: e.pageX,
+                                y: e.pageY
+                            },
+                            client: {
+                                x: e.clientX,
+                                y: e.clientY
+                            },
+                            plotCanvas: {
+                                x: e.nativeEvent.offsetX,
+                                y: e.nativeEvent.offsetY
+                            },
+                            target: e.target
+                        };
+                    } else {
+                        return null;
+                    }
+                });
+            }
+        },
+        onMouseDown: (e)=>{
+            const { clientX  } = e;
+            setIsDragging(true);
+            setStartX(clientX);
+        },
+        onMouseMove: (e)=>{
+            // Allow clicking inside tooltip to copy labels.
+            if (!(e.target instanceof HTMLCanvasElement)) {
+                return;
+            }
+            const { clientX  } = e;
+            if (isDragging) {
+                const deltaX = clientX - startX;
+                if (deltaX > 0) {
+                    // Hide tooltip when user drags to zoom.
+                    setShowTooltip(false);
+                }
+            }
+        },
+        onMouseUp: ()=>{
+            setIsDragging(false);
+            setStartX(0);
+            setShowTooltip(true);
+        },
+        onMouseLeave: ()=>{
+            if (tooltipPinnedCoords === null) {
+                setShowTooltip(false);
+            }
+            if (chartRef.current !== undefined) {
+                clearHighlightedSeries(chartRef.current, totalSeries);
+            }
+        },
+        onMouseEnter: ()=>{
+            setShowTooltip(true);
+            if (chartRef.current !== undefined) {
+                enableDataZoom(chartRef.current);
+            }
+        },
+        onDoubleClick: (e)=>{
+            setTooltipPinnedCoords(null);
+            // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+            if (onDoubleClick === undefined) {
+                if (chartRef.current !== undefined) {
+                    restoreChart(chartRef.current);
+                }
+            } else {
+                onDoubleClick(e);
+            }
+        },
+        children: [
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeChartTooltip, {
+                chartRef: chartRef,
+                data: data,
+                seriesMapping: seriesMapping,
+                wrapLabels: tooltipConfig.wrapLabels,
+                pinnedPos: tooltipPinnedCoords,
+                unit: unit
+            }),
+            /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                onEvents: handleEvents,
+                _instance: chartRef,
+                syncGroup: syncGroup
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=TimeChart.js.map

package/dist/TimeChart/TimeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeChart/TimeChart.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 { DatasetOption } from 'echarts/types/dist/shared';\nimport { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport { utcToZonedTime } from 'date-fns-tz';\nimport { getCommonTimeScale, TimeScale, UnitOptions, TimeSeries } from '@perses-dev/core';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { ChartHandleFocusOpts, ChartHandle, TimeChartSeriesMapping } from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getFormattedAxisLabel,\n  getYAxes,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\nimport { CursorCoordinates, TimeChartTooltip, TooltipConfig } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n  height: number;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  timeScale?: TimeScale;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeChart = forwardRef<ChartHandle, TimeChartProps>(function TimeChart(\n  {\n    height,\n    data,\n    seriesMapping,\n    timeScale: timeScaleProp,\n    yAxis,\n    unit,\n    grid,\n    tooltipConfig = { wrapLabels: true },\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const { timeZone } = useTimeZone();\n  const totalSeries = data?.length ?? 0;\n\n  let timeScale: TimeScale;\n  if (timeScaleProp === undefined) {\n    const commonTimeScale = getCommonTimeScale(data);\n    if (commonTimeScale === undefined) {\n      // set default to past 5 years\n      const today = new Date();\n      const pastDate = new Date(today);\n      pastDate.setFullYear(today.getFullYear() - 5);\n      const todayMs = today.getTime();\n      const pastDateMs = pastDate.getTime();\n      timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n    } else {\n      timeScale = commonTimeScale;\n    }\n  } else {\n    timeScale = timeScaleProp;\n  }\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ name }: ChartHandleFocusOpts) {\n          if (!chartRef.current) {\n            // No chart. Do nothing.\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // No chart. Do nothing.\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, totalSeries);\n        },\n      };\n    },\n    [totalSeries]\n  );\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const xAxisStartValue = params.batch[0].startValue;\n        const xAxisEndValue = params.batch[0].endValue;\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n    };\n  }, [onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    // TODO: fix loading state and noData variants\n    // if (data === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const dataset: DatasetOption[] = [];\n    const isLocalTimeZone = timeZone === 'local';\n    data.map((d, index) => {\n      const values = d.values.map(([timestamp, value]) => {\n        const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n        return [isLocalTimeZone ? timestamp : utcToZonedTime(timestamp, timeZone), val];\n      });\n      dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n    });\n\n    const option: EChartsCoreOption = {\n      dataset: dataset,\n      series: seriesMapping,\n      xAxis: {\n        type: 'time',\n        min: isLocalTimeZone ? timeScale.startMs : utcToZonedTime(timeScale.startMs, timeZone),\n        max: isLocalTimeZone ? timeScale.endMs : utcToZonedTime(timeScale.endMs, timeZone),\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getFormattedAxisLabel(timeScale.rangeMs ?? 0),\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [\n    data,\n    seriesMapping,\n    timeScale,\n    yAxis,\n    unit,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    timeZone,\n  ]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\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                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current, totalSeries);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeChartTooltip\n            chartRef={chartRef}\n            data={data}\n            seriesMapping={seriesMapping}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","utcToZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","clearHighlightedSeries","enableDataZoom","getFormattedAxisLabel","getYAxes","restoreChart","TimeChartTooltip","useTimeZone","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","unit","grid","tooltipConfig","wrapLabels","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","isDragging","setIsDragging","startX","setStartX","timeZone","totalSeries","length","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","rangeMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","noDataOption","dataset","isLocalTimeZone","map","d","index","values","timestamp","value","val","push","id","source","dimensions","series","xAxis","min","max","axisLabel","hideOverlap","formatter","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","pinnedPos","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}