@perses-dev/components 0.32.0 → 0.34.0

package/dist/Legend/TableLegend.js

@@ -32,7 +32,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-export function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width  }) {
+export function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width , columns: additionalColumns = []  }) {
     const rowSelection = useMemo(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
         // TODO: clean this up if we switch to also using checkboxes in list legend.
@@ -44,13 +44,21 @@ export function TableLegend({ items , selectedItems: initRowSelection , onSelect
         initRowSelection,
         items
     ]);
+    const columns = useMemo(()=>{
+        return [
+            ...COLUMNS,
+            ...additionalColumns
+        ];
+    }, [
+        additionalColumns
+    ]);
     return /*#__PURE__*/ _jsx(Table, {
         height: height,
         width: width,
         rowSelection: rowSelection,
         onRowSelectionChange: onSelectedItemsChange,
         data: items,
-        columns: COLUMNS,
+        columns: columns,
         density: "compact",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,

package/dist/Legend/TableLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/TableLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Table, TableProps, TableColumnConfig } from '../Table';\nimport { LegendItem } from '../model';\n\nexport interface TableLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';\n  onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];\n}\n\nconst COLUMNS: Array<TableColumnConfig<LegendItem>> = [\n  {\n    accessorKey: 'label',\n    header: 'Name',\n\n    // Starting with `title` attr instead of a tooltip because it is easier to\n    // implement. We should try adding a tooltip in the future, but we'll need\n    // to be very careful about performance when doing so with large tables.\n    cell: ({ getValue }) => <span title={getValue()}>{getValue()}</span>,\n  },\n];\n\nconst getRowId: NonNullable<TableProps<LegendItem>['getRowId']> = (data) => {\n  return data.id;\n};\n\nconst getCheckboxColor: TableProps<LegendItem>['getCheckboxColor'] = (data) => {\n  return data.color;\n};\n\nexport function TableLegend({\n  items,\n  selectedItems: initRowSelection,\n  onSelectedItemsChange,\n  height,\n  width,\n}: TableLegendProps) {\n  const rowSelection = useMemo(() => {\n    return typeof initRowSelection !== 'string'\n      ? initRowSelection\n      : // Turn \"ALL\" state into a table component friendly map of all of the selected\n        // items for checkboxes.\n        // TODO: clean this up if we switch to also using checkboxes in list legend.\n        items.reduce((allRowSelection, item, index) => {\n          allRowSelection[getRowId(item, index)] = true;\n          return allRowSelection;\n        }, {} as Record<string, boolean>);\n  }, [initRowSelection, items]);\n\n  return (\n    <Table\n      height={height}\n      width={width}\n      rowSelection={rowSelection}\n      onRowSelectionChange={onSelectedItemsChange}\n      data={items}\n      columns={COLUMNS}\n      density=\"compact\"\n      getRowId={getRowId}\n      getCheckboxColor={getCheckboxColor}\n      checkboxSelection\n    />\n  );\n}\n"],"names":["useMemo","Table","COLUMNS","accessorKey","header","cell","getValue","span","title","getRowId","data","id","getCheckboxColor","color","TableLegend","items","selectedItems","initRowSelection","onSelectedItemsChange","height","width","rowSelection","reduce","allRowSelection","item","index","onRowSelectionChange","columns","density","checkboxSelection"],"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,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,KAAK,QAAuC,UAAU,CAAC;AAWhE,MAAMC,OAAO,GAAyC;IACpD;QACEC,WAAW,EAAE,OAAO;QACpBC,MAAM,EAAE,MAAM;QAEd,0EAA0E;QAC1E,0EAA0E;QAC1E,wEAAwE;QACxEC,IAAI,EAAE,CAAC,EAAEC,QAAQ,CAAA,EAAE,iBAAK,KAACC,MAAI;gBAACC,KAAK,EAAEF,QAAQ,EAAE;0BAAGA,QAAQ,EAAE;cAAQ;KACrE;CACF,AAAC;AAEF,MAAMG,QAAQ,GAAoD,CAACC,IAAI,GAAK;IAC1E,OAAOA,IAAI,CAACC,EAAE,CAAC;AACjB,CAAC,AAAC;AAEF,MAAMC,gBAAgB,GAA+C,CAACF,IAAI,GAAK;IAC7E,OAAOA,IAAI,CAACG,KAAK,CAAC;AACpB,CAAC,AAAC;AAEF,OAAO,SAASC,WAAW,CAAC,EAC1BC,KAAK,CAAA,EACLC,aAAa,EAAEC,gBAAgB,CAAA,EAC/BC,qBAAqB,CAAA,EACrBC,MAAM,CAAA,EACNC,KAAK,CAAA,EACY,EAAE;IACnB,MAAMC,YAAY,GAAGrB,OAAO,CAAC,IAAM;QACjC,OAAO,OAAOiB,gBAAgB,KAAK,QAAQ,GACvCA,gBAAgB,GAEhB,wBAAwB;QACxB,4EAA4E;QAC5EF,KAAK,CAACO,MAAM,CAAC,CAACC,eAAe,EAAEC,IAAI,EAAEC,KAAK,GAAK;YAC7CF,eAAe,CAACd,QAAQ,CAACe,IAAI,EAAEC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;YAC9C,OAAOF,eAAe,CAAC;QACzB,CAAC,EAAE,EAAE,CAA4B,CAAC;IACxC,CAAC,EAAE;QAACN,gBAAgB;QAAEF,KAAK;KAAC,CAAC,AAAC;IAE9B,qBACE,KAACd,KAAK;QACJkB,MAAM,EAAEA,MAAM;QACdC,KAAK,EAAEA,KAAK;QACZC,YAAY,EAAEA,YAAY;QAC1BK,oBAAoB,EAAER,qBAAqB;QAC3CR,IAAI,EAAEK,KAAK;QACXY,OAAO,EAAEzB,OAAO;QAChB0B,OAAO,EAAC,SAAS;QACjBnB,QAAQ,EAAEA,QAAQ;QAClBG,gBAAgB,EAAEA,gBAAgB;QAClCiB,iBAAiB;MACjB,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/TableLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Table, TableProps, TableColumnConfig } from '../Table';\nimport { LegendItem } from './legend-model';\n\nexport interface TableLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';\n  onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];\n  columns?: TableProps<LegendItem>['columns'];\n}\n\nconst COLUMNS: Array<TableColumnConfig<LegendItem>> = [\n  {\n    accessorKey: 'label',\n    header: 'Name',\n\n    // Starting with `title` attr instead of a tooltip because it is easier to\n    // implement. We should try adding a tooltip in the future, but we'll need\n    // to be very careful about performance when doing so with large tables.\n    cell: ({ getValue }) => <span title={getValue()}>{getValue()}</span>,\n  },\n];\n\nconst getRowId: NonNullable<TableProps<LegendItem>['getRowId']> = (data) => {\n  return data.id;\n};\n\nconst getCheckboxColor: TableProps<LegendItem>['getCheckboxColor'] = (data) => {\n  return data.color;\n};\n\nexport function TableLegend({\n  items,\n  selectedItems: initRowSelection,\n  onSelectedItemsChange,\n  height,\n  width,\n  columns: additionalColumns = [],\n}: TableLegendProps) {\n  const rowSelection = useMemo(() => {\n    return typeof initRowSelection !== 'string'\n      ? initRowSelection\n      : // Turn \"ALL\" state into a table component friendly map of all of the selected\n        // items for checkboxes.\n        // TODO: clean this up if we switch to also using checkboxes in list legend.\n        items.reduce((allRowSelection, item, index) => {\n          allRowSelection[getRowId(item, index)] = true;\n          return allRowSelection;\n        }, {} as Record<string, boolean>);\n  }, [initRowSelection, items]);\n\n  const columns = useMemo(() => {\n    return [...COLUMNS, ...additionalColumns];\n  }, [additionalColumns]);\n\n  return (\n    <Table\n      height={height}\n      width={width}\n      rowSelection={rowSelection}\n      onRowSelectionChange={onSelectedItemsChange}\n      data={items}\n      columns={columns}\n      density=\"compact\"\n      getRowId={getRowId}\n      getCheckboxColor={getCheckboxColor}\n      checkboxSelection\n    />\n  );\n}\n"],"names":["useMemo","Table","COLUMNS","accessorKey","header","cell","getValue","span","title","getRowId","data","id","getCheckboxColor","color","TableLegend","items","selectedItems","initRowSelection","onSelectedItemsChange","height","width","columns","additionalColumns","rowSelection","reduce","allRowSelection","item","index","onRowSelectionChange","density","checkboxSelection"],"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,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,KAAK,QAAuC,UAAU,CAAC;AAYhE,MAAMC,OAAO,GAAyC;IACpD;QACEC,WAAW,EAAE,OAAO;QACpBC,MAAM,EAAE,MAAM;QAEd,0EAA0E;QAC1E,0EAA0E;QAC1E,wEAAwE;QACxEC,IAAI,EAAE,CAAC,EAAEC,QAAQ,CAAA,EAAE,iBAAK,KAACC,MAAI;gBAACC,KAAK,EAAEF,QAAQ,EAAE;0BAAGA,QAAQ,EAAE;cAAQ;KACrE;CACF,AAAC;AAEF,MAAMG,QAAQ,GAAoD,CAACC,IAAI,GAAK;IAC1E,OAAOA,IAAI,CAACC,EAAE,CAAC;AACjB,CAAC,AAAC;AAEF,MAAMC,gBAAgB,GAA+C,CAACF,IAAI,GAAK;IAC7E,OAAOA,IAAI,CAACG,KAAK,CAAC;AACpB,CAAC,AAAC;AAEF,OAAO,SAASC,WAAW,CAAC,EAC1BC,KAAK,CAAA,EACLC,aAAa,EAAEC,gBAAgB,CAAA,EAC/BC,qBAAqB,CAAA,EACrBC,MAAM,CAAA,EACNC,KAAK,CAAA,EACLC,OAAO,EAAEC,iBAAiB,GAAG,EAAE,CAAA,EACd,EAAE;IACnB,MAAMC,YAAY,GAAGvB,OAAO,CAAC,IAAM;QACjC,OAAO,OAAOiB,gBAAgB,KAAK,QAAQ,GACvCA,gBAAgB,GAEhB,wBAAwB;QACxB,4EAA4E;QAC5EF,KAAK,CAACS,MAAM,CAAC,CAACC,eAAe,EAAEC,IAAI,EAAEC,KAAK,GAAK;YAC7CF,eAAe,CAAChB,QAAQ,CAACiB,IAAI,EAAEC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;YAC9C,OAAOF,eAAe,CAAC;QACzB,CAAC,EAAE,EAAE,CAA4B,CAAC;IACxC,CAAC,EAAE;QAACR,gBAAgB;QAAEF,KAAK;KAAC,CAAC,AAAC;IAE9B,MAAMM,OAAO,GAAGrB,OAAO,CAAC,IAAM;QAC5B,OAAO;eAAIE,OAAO;eAAKoB,iBAAiB;SAAC,CAAC;IAC5C,CAAC,EAAE;QAACA,iBAAiB;KAAC,CAAC,AAAC;IAExB,qBACE,KAACrB,KAAK;QACJkB,MAAM,EAAEA,MAAM;QACdC,KAAK,EAAEA,KAAK;QACZG,YAAY,EAAEA,YAAY;QAC1BK,oBAAoB,EAAEV,qBAAqB;QAC3CR,IAAI,EAAEK,KAAK;QACXM,OAAO,EAAEA,OAAO;QAChBQ,OAAO,EAAC,SAAS;QACjBpB,QAAQ,EAAEA,QAAQ;QAClBG,gBAAgB,EAAEA,gBAAgB;QAClCkB,iBAAiB;MACjB,CACF;AACJ,CAAC"}

package/dist/Legend/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Legend';
+export * from './legend-model';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Legend/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Legend/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/Legend/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './Legend';
+export * from './legend-model';
 
 //# sourceMappingURL=index.js.map

package/dist/Legend/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/index.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\nexport * from './Legend';\n"],"names":[],"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,cAAc,UAAU,CAAC"}
+{"version":3,"sources":["../../src/Legend/index.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\nexport * from './Legend';\nexport * from './legend-model';\n"],"names":[],"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,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/Legend/legend-model.d.ts

@@ -0,0 +1,24 @@
+import { MouseEventHandler } from 'react';
+import { LegendOptionsBase } from '@perses-dev/core';
+export declare type LegendComponentOptions = LegendOptionsBase;
+export interface LegendItem {
+    id: string;
+    label: string;
+    color: string;
+    /**
+     * Additional data for the legend item. Useful for laying out additional
+     * columns when using a table legend.
+     */
+    data?: Record<string, unknown>;
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+/**
+ * State of selected items in the legend.
+ * - When "ALL", all legend items are selected, but not visually highlighted.
+ * - Otherwise, it is a Record that associates legend item ids with a boolean
+ *   value. When the associated entry for a legend item is `true`, that item
+ *   will be treated as selected and visually highlighted.
+ */
+export declare type SelectedLegendItemState = Record<LegendItem['id'], boolean> | 'ALL';
+export declare function isLegendItemVisuallySelected(item: LegendItem, selectedItems: SelectedLegendItemState): boolean;
+//# sourceMappingURL=legend-model.d.ts.map

package/dist/Legend/legend-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend-model.d.ts","sourceRoot":"","sources":["../../src/Legend/legend-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AASrD,oBAAY,sBAAsB,GAAG,iBAAiB,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE/B,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED;;;;;;GAMG;AACH,oBAAY,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC;AAEhF,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,uBAAuB,WAIpG"}

package/dist/Legend/legend-model.js

@@ -0,0 +1,19 @@
+// 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.
+export function isLegendItemVisuallySelected(item, selectedItems) {
+    // In the "ALL" case, technically all legend items are selected, but we do
+    // not render them differently.
+    return selectedItems !== 'ALL' && !!selectedItems[item.id];
+}
+
+//# sourceMappingURL=legend-model.js.map

package/dist/Legend/legend-model.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Legend/legend-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEventHandler } from 'react';\nimport { LegendOptionsBase } from '@perses-dev/core';\n\n// This file contains legend-related model code specific to the legend component.\n// See the `core` package for common/shared legend model code and the\n// `plugin-system` package for legend model code specific to panel plugin specs.\n\n// Note: explicitly defining different options for the legend component and\n// legend spec that extend from some common options, so we can allow the\n// component and the spec to diverge in some upcoming work.\nexport type LegendComponentOptions = LegendOptionsBase;\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  color: string;\n\n  /**\n   * Additional data for the legend item. Useful for laying out additional\n   * columns when using a table legend.\n   */\n  data?: Record<string, unknown>;\n\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\n/**\n * State of selected items in the legend.\n * - When \"ALL\", all legend items are selected, but not visually highlighted.\n * - Otherwise, it is a Record that associates legend item ids with a boolean\n *   value. When the associated entry for a legend item is `true`, that item\n *   will be treated as selected and visually highlighted.\n */\nexport type SelectedLegendItemState = Record<LegendItem['id'], boolean> | 'ALL';\n\nexport function isLegendItemVisuallySelected(item: LegendItem, selectedItems: SelectedLegendItemState) {\n  // In the \"ALL\" case, technically all legend items are selected, but we do\n  // not render them differently.\n  return selectedItems !== 'ALL' && !!selectedItems[item.id];\n}\n"],"names":["isLegendItemVisuallySelected","item","selectedItems","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAqCjC,OAAO,SAASA,4BAA4B,CAACC,IAAgB,EAAEC,aAAsC,EAAE;IACrG,0EAA0E;IAC1E,+BAA+B;IAC/B,OAAOA,aAAa,KAAK,KAAK,IAAI,CAAC,CAACA,aAAa,CAACD,IAAI,CAACE,EAAE,CAAC,CAAC;AAC7D,CAAC"}

package/dist/LineChart/LineChart.d.ts

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

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

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

package/dist/LineChart/LineChart.js

@@ -37,7 +37,7 @@ use([
 ]);
 export function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , noDataVariant ='message' , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
     var ref;
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
@@ -237,7 +237,8 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , toolt
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 onEvents: handleEvents,
-                _instance: chartRef
+                _instance: chartRef,
+                syncGroup: syncGroup
             })
         ]
     });

package/dist/LineChart/LineChart.js.map

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

package/dist/LineChart/utils.js

@@ -10,7 +10,7 @@
 // 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 { merge } from 'lodash-es';
+import merge from 'lodash/merge';
 import { formatValue } from '../model';
 import { dateFormatOptionsWithTimeZone } from '../utils';
 /**

package/dist/LineChart/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/utils.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 { merge } from 'lodash-es';\nimport type { YAXisComponentOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions } from '../model';\nimport { dateFormatOptionsWithTimeZone } from '../utils';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  startIndex: number;\n  endIndex: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number, timeZone?: string) {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = dateFormatOptionsWithTimeZone(\n    {\n      hour: 'numeric',\n      minute: 'numeric',\n      hourCycle: 'h23',\n    },\n    timeZone\n  );\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n/*\n * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future\n */\nexport function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions) {\n  // TODO: support alternate yAxis that shows on right side\n  const Y_AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number) => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(Y_AXIS_DEFAULT, yAxis)];\n}\n"],"names":["merge","formatValue","dateFormatOptionsWithTimeZone","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","timeZone","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace","getYAxes","yAxis","unit","Y_AXIS_DEFAULT","boundaryGap","axisLabel","formatter"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/utils.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 merge from 'lodash/merge';\nimport type { YAXisComponentOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions } from '../model';\nimport { dateFormatOptionsWithTimeZone } from '../utils';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  startIndex: number;\n  endIndex: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number, timeZone?: string) {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = dateFormatOptionsWithTimeZone(\n    {\n      hour: 'numeric',\n      minute: 'numeric',\n      hourCycle: 'h23',\n    },\n    timeZone\n  );\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n/*\n * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future\n */\nexport function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions) {\n  // TODO: support alternate yAxis that shows on right side\n  const Y_AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number) => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(Y_AXIS_DEFAULT, yAxis)];\n}\n"],"names":["merge","formatValue","dateFormatOptionsWithTimeZone","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","timeZone","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace","getYAxes","yAxis","unit","Y_AXIS_DEFAULT","boundaryGap","axisLabel","formatter"],"mappings":"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"}

package/dist/StatChart/StatChart.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Box, Typography } from '@mui/material';
-import { merge } from 'lodash-es';
+import merge from 'lodash/merge';
 import { use } from 'echarts/core';
 import { LineChart as EChartsLineChart } from 'echarts/charts';
 import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';

package/dist/StatChart/StatChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        data: [...series.values],\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n        min: (value: { min: number; max: number }) => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with PercentDecimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: color ?? theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n          padding: sparkline\n            ? `${containerPadding} ${containerPadding} 0 ${containerPadding}`\n            : ` 0 ${containerPadding}`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: '100%',\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","Typography","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","color","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","min","value","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","containerPadding","container","padding","default","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","variant","theme","palette","text","primary","fontSize","echartsTheme","renderer"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        data: [...series.values],\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n        min: (value: { min: number; max: number }) => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with PercentDecimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: color ?? theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n          padding: sparkline\n            ? `${containerPadding} ${containerPadding} 0 ${containerPadding}`\n            : ` 0 ${containerPadding}`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: '100%',\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","Typography","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","color","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","min","value","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","containerPadding","container","padding","default","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","variant","theme","palette","text","primary","fontSize","echartsTheme","renderer"],"mappings":"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"}

package/dist/Table/InnerTable.js

@@ -17,7 +17,7 @@ const StyledMuiTable = styled(MuiTable)(({ theme  })=>({
         // This value is needed to have a consistent table layout when scrolling.
         tableLayout: 'fixed',
         borderCollapse: 'separate',
-        backgroundColor: theme.palette.background.paper
+        backgroundColor: theme.palette.background.default
     }));
 const TABLE_DENSITY_CONFIG = {
     compact: 'small',

package/dist/Table/InnerTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/InnerTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Table as MuiTable, styled, TableProps as MuiTableProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\nconst StyledMuiTable = styled(MuiTable)(({ theme }) => ({\n  // This value is needed to have a consistent table layout when scrolling.\n  tableLayout: 'fixed',\n  borderCollapse: 'separate',\n  backgroundColor: theme.palette.background.paper,\n}));\n\ntype InnerTableProps = Omit<MuiTableProps, 'size'> & {\n  density: TableDensity;\n};\n\nconst TABLE_DENSITY_CONFIG: Record<TableDensity, MuiTableProps['size']> = {\n  compact: 'small',\n  standard: 'medium',\n};\n\nexport const InnerTable = forwardRef<HTMLTableElement, InnerTableProps>(function InnerTable(\n  { density, width, ...otherProps },\n  ref\n) {\n  return (\n    <StyledMuiTable\n      {...otherProps}\n      tabIndex={-1}\n      size={TABLE_DENSITY_CONFIG[density]}\n      ref={ref}\n      sx={{\n        width: width,\n      }}\n    />\n  );\n});\n"],"names":["Table","MuiTable","styled","forwardRef","StyledMuiTable","theme","tableLayout","borderCollapse","backgroundColor","palette","background","paper","TABLE_DENSITY_CONFIG","compact","standard","InnerTable","density","width","otherProps","ref","tabIndex","size","sx"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,KAAK,IAAIC,QAAQ,EAAEC,MAAM,QAAqC,eAAe,CAAC;AACvF,SAASC,UAAU,QAAQ,OAAO,CAAC;AAGnC,MAAMC,cAAc,GAAGF,MAAM,CAACD,QAAQ,CAAC,CAAC,CAAC,EAAEI,KAAK,CAAA,EAAE,GAAM,CAAA;QACtD,yEAAyE;QACzEC,WAAW,EAAE,OAAO;QACpBC,cAAc,EAAE,UAAU;QAC1BC,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACC,UAAU,CAACC,KAAK;KAChD,CAAA,AAAC,CAAC,AAAC;AAMJ,MAAMC,oBAAoB,GAAgD;IACxEC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,QAAQ;CACnB,AAAC;AAEF,OAAO,MAAMC,UAAU,iBAAGZ,UAAU,CAAoC,SAASY,UAAU,CACzF,EAAEC,OAAO,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGC,UAAU,EAAE,EACjCC,GAAG,EACH;IACA,qBACE,KAACf,cAAc;QACZ,GAAGc,UAAU;QACdE,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAET,oBAAoB,CAACI,OAAO,CAAC;QACnCG,GAAG,EAAEA,GAAG;QACRG,EAAE,EAAE;YACFL,KAAK,EAAEA,KAAK;SACb;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Table/InnerTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Table as MuiTable, styled, TableProps as MuiTableProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\nconst StyledMuiTable = styled(MuiTable)(({ theme }) => ({\n  // This value is needed to have a consistent table layout when scrolling.\n  tableLayout: 'fixed',\n  borderCollapse: 'separate',\n  backgroundColor: theme.palette.background.default,\n}));\n\ntype InnerTableProps = Omit<MuiTableProps, 'size'> & {\n  density: TableDensity;\n};\n\nconst TABLE_DENSITY_CONFIG: Record<TableDensity, MuiTableProps['size']> = {\n  compact: 'small',\n  standard: 'medium',\n};\n\nexport const InnerTable = forwardRef<HTMLTableElement, InnerTableProps>(function InnerTable(\n  { density, width, ...otherProps },\n  ref\n) {\n  return (\n    <StyledMuiTable\n      {...otherProps}\n      tabIndex={-1}\n      size={TABLE_DENSITY_CONFIG[density]}\n      ref={ref}\n      sx={{\n        width: width,\n      }}\n    />\n  );\n});\n"],"names":["Table","MuiTable","styled","forwardRef","StyledMuiTable","theme","tableLayout","borderCollapse","backgroundColor","palette","background","default","TABLE_DENSITY_CONFIG","compact","standard","InnerTable","density","width","otherProps","ref","tabIndex","size","sx"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,KAAK,IAAIC,QAAQ,EAAEC,MAAM,QAAqC,eAAe,CAAC;AACvF,SAASC,UAAU,QAAQ,OAAO,CAAC;AAGnC,MAAMC,cAAc,GAAGF,MAAM,CAACD,QAAQ,CAAC,CAAC,CAAC,EAAEI,KAAK,CAAA,EAAE,GAAM,CAAA;QACtD,yEAAyE;QACzEC,WAAW,EAAE,OAAO;QACpBC,cAAc,EAAE,UAAU;QAC1BC,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACC,UAAU,CAACC,OAAO;KAClD,CAAA,AAAC,CAAC,AAAC;AAMJ,MAAMC,oBAAoB,GAAgD;IACxEC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,QAAQ;CACnB,AAAC;AAEF,OAAO,MAAMC,UAAU,iBAAGZ,UAAU,CAAoC,SAASY,UAAU,CACzF,EAAEC,OAAO,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGC,UAAU,EAAE,EACjCC,GAAG,EACH;IACA,qBACE,KAACf,cAAc;QACZ,GAAGc,UAAU;QACdE,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAET,oBAAoB,CAACI,OAAO,CAAC;QACnCG,GAAG,EAAEA,GAAG;QACRG,EAAE,EAAE;YACFL,KAAK,EAAEA,KAAK;SACb;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}

package/dist/Table/Table.js

@@ -34,7 +34,7 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
     const checkboxColumn = useMemo(()=>{
         return {
             id: 'checkboxRowSelect',
-            size: 32,
+            size: 28,
             header: ({ table  })=>{
                 return /*#__PURE__*/ _jsx(TableCheckbox, {
                     checked: table.getIsAllRowsSelected(),

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/Table.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 { useReactTable, getCoreRowModel, ColumnDef, RowSelectionState, OnChangeFn } from '@tanstack/react-table';\nimport { useTheme } from '@mui/material';\nimport { useCallback, useMemo } from 'react';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { TableCheckbox } from './TableCheckbox';\nimport { TableProps, persesColumnsToTanstackColumns } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number) => {\n  return `${index}`;\n};\n\n/**\n * Component used to render tabular data in Perses use cases. This component is\n * **not** intended to be a general use data table for use cases unrelated to Perses.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function Table<TableData>({\n  data,\n  columns,\n  density = 'standard',\n  checkboxSelection,\n  onRowSelectionChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = {},\n  ...otherProps\n}: TableProps<TableData>) {\n  const theme = useTheme();\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {\n    const newRowSelection =\n      typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;\n    onRowSelectionChange?.(newRowSelection);\n  };\n\n  const checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 32,\n      header: ({ table }) => {\n        return (\n          <TableCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n            color={theme.palette.text.primary}\n            density={density}\n          />\n        );\n      },\n      cell: ({ row }) => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              row.getToggleSelectedHandler()(e);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n    };\n  }, [density, getCheckboxColor, theme.palette.text.primary]);\n\n  const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {\n    const initTableColumns = persesColumnsToTanstackColumns(columns);\n\n    if (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (rowId: string) => {\n      table.getRow(rowId).toggleSelected();\n    },\n    [table]\n  );\n\n  return (\n    <VirtualizedTable\n      {...otherProps}\n      density={density}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n    />\n  );\n}\n"],"names":["useReactTable","getCoreRowModel","useTheme","useCallback","useMemo","VirtualizedTable","TableCheckbox","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","Table","columns","density","checkboxSelection","onRowSelectionChange","getCheckboxColor","getRowId","rowSelection","otherProps","theme","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","checkboxColumn","id","size","header","table","checked","getIsAllRowsSelected","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","cell","row","getIsSelected","getIsSomeSelected","e","getToggleSelectedHandler","original","tableColumns","initTableColumns","unshift","enableRowSelection","state","handleRowClick","rowId","getRow","toggleSelected","onRowClick","rows","getRowModel","getAllFlatColumns","headers","getHeaderGroups"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/Table.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 { useReactTable, getCoreRowModel, ColumnDef, RowSelectionState, OnChangeFn } from '@tanstack/react-table';\nimport { useTheme } from '@mui/material';\nimport { useCallback, useMemo } from 'react';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { TableCheckbox } from './TableCheckbox';\nimport { TableProps, persesColumnsToTanstackColumns } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number) => {\n  return `${index}`;\n};\n\n/**\n * Component used to render tabular data in Perses use cases. This component is\n * **not** intended to be a general use data table for use cases unrelated to Perses.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function Table<TableData>({\n  data,\n  columns,\n  density = 'standard',\n  checkboxSelection,\n  onRowSelectionChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = {},\n  ...otherProps\n}: TableProps<TableData>) {\n  const theme = useTheme();\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {\n    const newRowSelection =\n      typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;\n    onRowSelectionChange?.(newRowSelection);\n  };\n\n  const checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 28,\n      header: ({ table }) => {\n        return (\n          <TableCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n            color={theme.palette.text.primary}\n            density={density}\n          />\n        );\n      },\n      cell: ({ row }) => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              row.getToggleSelectedHandler()(e);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n    };\n  }, [density, getCheckboxColor, theme.palette.text.primary]);\n\n  const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {\n    const initTableColumns = persesColumnsToTanstackColumns(columns);\n\n    if (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (rowId: string) => {\n      table.getRow(rowId).toggleSelected();\n    },\n    [table]\n  );\n\n  return (\n    <VirtualizedTable\n      {...otherProps}\n      density={density}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n    />\n  );\n}\n"],"names":["useReactTable","getCoreRowModel","useTheme","useCallback","useMemo","VirtualizedTable","TableCheckbox","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","Table","columns","density","checkboxSelection","onRowSelectionChange","getCheckboxColor","getRowId","rowSelection","otherProps","theme","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","checkboxColumn","id","size","header","table","checked","getIsAllRowsSelected","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","cell","row","getIsSelected","getIsSomeSelected","e","getToggleSelectedHandler","original","tableColumns","initTableColumns","unshift","enableRowSelection","state","handleRowClick","rowId","getRow","toggleSelected","onRowClick","rows","getRowModel","getAllFlatColumns","headers","getHeaderGroups"],"mappings":"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"}

package/dist/Table/TableCell.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 import { TableCellProps as MuiTableCellProps } from '@mui/material';
-import { TableDensity } from './model/table-model';
-export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex'> {
+import { TableCellAlignment, TableDensity } from './model/table-model';
+export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {
     density: TableDensity;
+    isLastColumn: boolean;
+    isFirstColumn: boolean;
+    align?: TableCellAlignment;
     /**
      * How the cell should behave related to focus.
      * - `trigger-focus`: the cell should be auto-focused when it renders.
@@ -14,5 +17,5 @@ export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex'> {
     focusState?: 'trigger-focus' | 'focus-next' | 'none';
     onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;
 }
-export declare function TableCell({ children, density, variant, width, focusState, onFocusTrigger, ...otherProps }: TableCellProps): JSX.Element;
+export declare function TableCell({ children, density, variant, width, focusState, onFocusTrigger, isFirstColumn, isLastColumn, ...otherProps }: TableCellProps): JSX.Element;
 //# sourceMappingURL=TableCell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqC,cAAc,IAAI,iBAAiB,EAAiB,MAAM,eAAe,CAAC;AAEtH,OAAO,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAmBvE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACzE,OAAO,EAAE,YAAY,CAAC;IAEtB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAmB,EACnB,cAAc,EACd,GAAG,UAAU,EACd,EAAE,cAAc,eAqEhB"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqC,cAAc,IAAI,iBAAiB,EAAiB,MAAM,eAAe,CAAC;AAEtH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAmB3F,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IAGtB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,GAAG,UAAU,EACd,EAAE,cAAc,eAqEhB"}

package/dist/Table/TableCell.js

@@ -19,7 +19,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(({ theme  })=>({
         backgroundColor: 'inherit',
         '&.MuiTableCell-head': {
             // Important to avoid scrolling behind the header showing through.
-            backgroundColor: theme.palette.background.paper
+            backgroundColor: theme.palette.background.default
         },
         '&:focus-visible': {
             outline: `solid 1px ${theme.palette.primary.main}`,
@@ -29,7 +29,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(({ theme  })=>({
             borderRadius: 0
         }
     }));
-export function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , ...otherProps }) {
+export function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , ...otherProps }) {
     const theme = useTheme();
     const elRef = useRef();
     const isHeader = variant === 'head';
@@ -75,7 +75,10 @@ export function TableCell({ children , density , variant , width , focusState ='
         ref: elRef,
         children: /*#__PURE__*/ _jsx(Box, {
             sx: {
-                ...getTableCellLayout(theme, density),
+                ...getTableCellLayout(theme, density, {
+                    isLastColumn,
+                    isFirstColumn
+                }),
                 position: 'relative',
                 // Text truncation. Currently enforced on all cells. We may control
                 // this with a prop on column config in the future.

package/dist/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCell.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 { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.paper,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex'> {\n  density: TableDensity;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","paper","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/TableCell.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 { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density, { isLastColumn, isFirstColumn }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","isFirstColumn","isLastColumn","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,aAAc,SAAQ,gBAAgB,CAAC,KAAK,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,iqJAanB,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAS,MAAM,eAAe,CAAC;AAElG,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,aAAc,SAAQ,gBAAgB,CAAC,KAAK,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,iqJAanB,CAAC"}