@perses-dev/components 0.34.0 → 0.36.0

package/dist/StatChart/StatChart.js

@@ -12,15 +12,16 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Box, Typography } from '@mui/material';
+import { formatValue } from '@perses-dev/core';
+import { Box, Typography, styled } from '@mui/material';
 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';
 import { CanvasRenderer } from 'echarts/renderers';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
-import { formatValue } from '../model/units';
 import { EChart } from '../EChart';
+import { useOptimalFontSize } from './calculateFontSize';
 use([
     EChartsLineChart,
     GridComponent,
@@ -29,12 +30,48 @@ use([
     TooltipComponent,
     CanvasRenderer
 ]);
-const MIN_VALUE_SIZE = 12;
-const MAX_VALUE_SIZE = 36;
+const LINE_HEIGHT = 1.2;
+const SERIES_NAME_MAX_FONT_SIZE = 30;
+const SERIES_NAME_FONT_WEIGHT = 400;
+const VALUE_FONT_WEIGHT = 700;
 export function StatChart(props) {
-    const { width , height , data , unit , color , sparkline  } = props;
+    var ref, ref1;
+    const { width , height , data , unit , color , sparkline , showSeriesName  } = props;
     const chartsTheme = useChartsTheme();
-    const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);
+    let formattedValue = '';
+    if (data.calculatedValue === null) {
+        formattedValue = 'null';
+    } else if (typeof data.calculatedValue === 'number') {
+        formattedValue = formatValue(data.calculatedValue, unit);
+    }
+    const containerPadding = chartsTheme.container.padding.default;
+    var ref2;
+    // calculate series name font size and height
+    let seriesNameFontSize = useOptimalFontSize({
+        text: (ref2 = data === null || data === void 0 ? void 0 : (ref = data.seriesData) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : '',
+        fontWeight: SERIES_NAME_FONT_WEIGHT,
+        width,
+        height: height * 0.125,
+        lineHeight: LINE_HEIGHT,
+        maxSize: SERIES_NAME_MAX_FONT_SIZE
+    });
+    const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;
+    // calculate value font size and height
+    const availableWidth = width - containerPadding * 2;
+    const availableHeight = height - seriesNameHeight;
+    const valueFontSize = useOptimalFontSize({
+        text: formattedValue,
+        fontWeight: VALUE_FONT_WEIGHT,
+        // without sparkline, use only 50% of the available width so it looks better for multiseries
+        width: sparkline ? availableWidth : availableWidth * 0.5,
+        // with sparkline, use only 25% of available height to leave room for chart
+        // without sparkline, value should take up 90% of available space
+        height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
+        lineHeight: LINE_HEIGHT
+    });
+    const valueFontHeight = valueFontSize * LINE_HEIGHT;
+    // make sure the series name font size is slightly smaller than value font size
+    seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);
     const option = useMemo(()=>{
         if (data.seriesData === undefined) return chartsTheme.noDataOption;
         const series = data.seriesData;
@@ -42,9 +79,8 @@ export function StatChart(props) {
         if (sparkline !== undefined) {
             const lineSeries = {
                 type: 'line',
-                data: [
-                    ...series.values
-                ],
+                name: series.name,
+                data: series.values,
                 zlevel: 1,
                 symbol: 'none',
                 animation: false,
@@ -92,11 +128,6 @@ export function StatChart(props) {
         chartsTheme,
         sparkline
     ]);
-    const isLargePanel = width > 250 && height > 180;
-    // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
-    const charactersAdjust = formattedValue.length;
-    const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
-    const containerPadding = `${chartsTheme.container.padding.default}px`;
     const textAlignment = sparkline ? 'auto' : 'center';
     const textStyles = {
         display: 'flex',
@@ -111,19 +142,22 @@ export function StatChart(props) {
             ...textStyles
         },
         children: [
-            /*#__PURE__*/ _jsx(Typography, {
+            showSeriesName && /*#__PURE__*/ _jsx(SeriesName, {
+                padding: containerPadding,
+                fontSize: seriesNameFontSize,
+                children: (ref1 = data.seriesData) === null || ref1 === void 0 ? void 0 : ref1.name
+            }),
+            /*#__PURE__*/ _jsx(Value, {
                 variant: "h3",
-                sx: (theme)=>({
-                        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
-                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
-                        padding: sparkline ? `${containerPadding} ${containerPadding} 0 ${containerPadding}` : ` 0 ${containerPadding}`
-                    }),
+                color: color,
+                fontSize: valueFontSize,
+                padding: containerPadding,
                 children: formattedValue
             }),
             sparkline !== undefined && /*#__PURE__*/ _jsx(EChart, {
                 sx: {
                     width: '100%',
-                    height: '100%'
+                    height: height - seriesNameHeight - valueFontHeight
                 },
                 option: option,
                 theme: chartsTheme.echartsTheme,
@@ -132,5 +166,24 @@ export function StatChart(props) {
         ]
     });
 }
+const SeriesName = styled(Typography, {
+    shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
+})(({ theme , padding , fontSize  })=>({
+        color: theme.palette.text.secondary,
+        padding: `${padding}px`,
+        fontSize: `${fontSize}px`,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    }));
+const Value = styled(Typography, {
+    shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
+})(({ theme , color , padding , fontSize , sparkline  })=>({
+        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
+        fontSize: `${fontSize}px`,
+        padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
+        whiteSpace: 'nowrap',
+        lineHeight: LINE_HEIGHT
+    }));
 
 //# sourceMappingURL=StatChart.js.map

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/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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"}
+{"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 { formatValue, UnitOptions } from '@perses-dev/core';\nimport { Box, Typography, styled } 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 { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\nimport { useOptimalFontSize } from './calculateFontSize';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\n\nexport interface StatChartData {\n  calculatedValue?: number | null;\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  showSeriesName?: boolean;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline, showSeriesName } = props;\n  const chartsTheme = useChartsTheme();\n\n  let formattedValue = '';\n  if (data.calculatedValue === null) {\n    formattedValue = 'null';\n  } else if (typeof data.calculatedValue === 'number') {\n    formattedValue = formatValue(data.calculatedValue, unit);\n  }\n\n  const containerPadding = chartsTheme.container.padding.default;\n\n  // calculate series name font size and height\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.125, // assume series name will take 12.5% of available height\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  // calculate value font size and height\n  const availableWidth = width - containerPadding * 2;\n  const availableHeight = height - seriesNameHeight;\n  const valueFontSize = useOptimalFontSize({\n    text: formattedValue,\n    fontWeight: VALUE_FONT_WEIGHT,\n    // without sparkline, use only 50% of the available width so it looks better for multiseries\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    // with sparkline, use only 25% of available height to leave room for chart\n    // without sparkline, value should take up 90% of available space\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = valueFontSize * LINE_HEIGHT;\n\n  // make sure the series name font size is slightly smaller than value font size\n  seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);\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        name: series.name,\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 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      {showSeriesName && (\n        <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n          {data.seriesData?.name}\n        </SeriesName>\n      )}\n      <Value variant=\"h3\" color={color} fontSize={valueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: height - seriesNameHeight - valueFontHeight,\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n\nconst SeriesName = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string }>(({ theme, padding, fontSize }) => ({\n  color: theme.palette.text.secondary,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","formatValue","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","useOptimalFontSize","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","data","width","height","unit","color","sparkline","showSeriesName","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","valueFontSize","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}

package/dist/StatChart/calculateFontSize.d.ts

@@ -0,0 +1,14 @@
+interface CalculateFontSize {
+    text: string;
+    fontWeight: number;
+    width: number;
+    height: number;
+    lineHeight: number;
+    maxSize?: number;
+}
+/**
+ * Find the optimal font size given available space
+ */
+export declare function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize }: CalculateFontSize): number;
+export {};
+//# sourceMappingURL=calculateFontSize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calculateFontSize.d.ts","sourceRoot":"","sources":["../../src/StatChart/calculateFontSize.ts"],"names":[],"mappings":"AAeA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAcD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,iBAAiB,UAqB7G"}

package/dist/StatChart/calculateFontSize.js

@@ -0,0 +1,47 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+let canvasContext;
+function getGlobalCanvasContext() {
+    if (!canvasContext) {
+        canvasContext = document.createElement('canvas').getContext('2d');
+        if (canvasContext === null) {
+            throw new Error('Canvas context is null.');
+        }
+    }
+    return canvasContext;
+}
+/**
+ * Find the optimal font size given available space
+ */ export function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize  }) {
+    const ctx = getGlobalCanvasContext();
+    const chartsTheme = useChartsTheme();
+    const textStyle = chartsTheme.echartsTheme.textStyle;
+    var ref;
+    const fontSize = (ref = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && ref !== void 0 ? ref : 12;
+    var ref1;
+    const fontFamily = (ref1 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontFamily) !== null && ref1 !== void 0 ? ref1 : 'Lato';
+    // set the font on the canvas context
+    const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    ctx.font = fontStyle;
+    // measure the width of the text with the given font style
+    const textMetrics = ctx.measureText(text);
+    // check how much bigger we can make the font while staying within the width and height
+    const fontSizeBasedOnWidth = width / textMetrics.width * fontSize;
+    const fontSizeBasedOnHeight = height / lineHeight;
+    // return the smaller font size
+    const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
+    return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;
+}
+
+//# sourceMappingURL=calculateFontSize.js.map

package/dist/StatChart/calculateFontSize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/StatChart/calculateFontSize.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 { useChartsTheme } from '../context/ChartsThemeProvider';\n\ninterface CalculateFontSize {\n  text: string;\n  fontWeight: number;\n  width: number;\n  height: number;\n  lineHeight: number;\n  maxSize?: number;\n}\n\nlet canvasContext: CanvasRenderingContext2D | null;\n\nfunction getGlobalCanvasContext() {\n  if (!canvasContext) {\n    canvasContext = document.createElement('canvas').getContext('2d');\n    if (canvasContext === null) {\n      throw new Error('Canvas context is null.');\n    }\n  }\n  return canvasContext;\n}\n\n/**\n * Find the optimal font size given available space\n */\nexport function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize }: CalculateFontSize) {\n  const ctx = getGlobalCanvasContext();\n  const chartsTheme = useChartsTheme();\n\n  const textStyle = chartsTheme.echartsTheme.textStyle;\n  const fontSize = Number(textStyle?.fontSize) ?? 12;\n  const fontFamily = textStyle?.fontFamily ?? 'Lato';\n\n  // set the font on the canvas context\n  const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.font = fontStyle;\n  // measure the width of the text with the given font style\n  const textMetrics: TextMetrics = ctx.measureText(text);\n\n  // check how much bigger we can make the font while staying within the width and height\n  const fontSizeBasedOnWidth = (width / textMetrics.width) * fontSize;\n  const fontSizeBasedOnHeight = height / lineHeight;\n\n  // return the smaller font size\n  const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);\n  return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;\n}\n"],"names":["useChartsTheme","canvasContext","getGlobalCanvasContext","document","createElement","getContext","Error","useOptimalFontSize","text","fontWeight","width","height","lineHeight","maxSize","ctx","chartsTheme","textStyle","echartsTheme","Number","fontSize","fontFamily","fontStyle","font","textMetrics","measureText","fontSizeBasedOnWidth","fontSizeBasedOnHeight","finalFontSize","Math","min"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,cAAc,QAAQ,gCAAgC,CAAC;AAWhE,IAAIC,aAAa,AAAiC,AAAC;AAEnD,SAASC,sBAAsB,GAAG;IAChC,IAAI,CAACD,aAAa,EAAE;QAClBA,aAAa,GAAGE,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC,CAACC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClE,IAAIJ,aAAa,KAAK,IAAI,EAAE;YAC1B,MAAM,IAAIK,KAAK,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IACD,OAAOL,aAAa,CAAC;AACvB,CAAC;AAED;;CAEC,GACD,OAAO,SAASM,kBAAkB,CAAC,EAAEC,IAAI,CAAA,EAAEC,UAAU,CAAA,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,UAAU,CAAA,EAAEC,OAAO,CAAA,EAAqB,EAAE;IAC9G,MAAMC,GAAG,GAAGZ,sBAAsB,EAAE,AAAC;IACrC,MAAMa,WAAW,GAAGf,cAAc,EAAE,AAAC;IAErC,MAAMgB,SAAS,GAAGD,WAAW,CAACE,YAAY,CAACD,SAAS,AAAC;QACpCE,GAA2B;IAA5C,MAAMC,QAAQ,GAAGD,CAAAA,GAA2B,GAA3BA,MAAM,CAACF,SAAS,aAATA,SAAS,WAAU,GAAnBA,KAAAA,CAAmB,GAAnBA,SAAS,CAAEG,QAAQ,CAAC,cAA3BD,GAA2B,cAA3BA,GAA2B,GAAI,EAAE,AAAC;QAChCF,IAAqB;IAAxC,MAAMI,UAAU,GAAGJ,CAAAA,IAAqB,GAArBA,SAAS,aAATA,SAAS,WAAY,GAArBA,KAAAA,CAAqB,GAArBA,SAAS,CAAEI,UAAU,cAArBJ,IAAqB,cAArBA,IAAqB,GAAI,MAAM,AAAC;IAEnD,qCAAqC;IACrC,MAAMK,SAAS,GAAG,CAAC,EAAEZ,UAAU,CAAC,CAAC,EAAEU,QAAQ,CAAC,GAAG,EAAEC,UAAU,CAAC,CAAC,AAAC;IAC9DN,GAAG,CAACQ,IAAI,GAAGD,SAAS,CAAC;IACrB,0DAA0D;IAC1D,MAAME,WAAW,GAAgBT,GAAG,CAACU,WAAW,CAAChB,IAAI,CAAC,AAAC;IAEvD,uFAAuF;IACvF,MAAMiB,oBAAoB,GAAG,AAACf,KAAK,GAAGa,WAAW,CAACb,KAAK,GAAIS,QAAQ,AAAC;IACpE,MAAMO,qBAAqB,GAAGf,MAAM,GAAGC,UAAU,AAAC;IAElD,+BAA+B;IAC/B,MAAMe,aAAa,GAAGC,IAAI,CAACC,GAAG,CAACH,qBAAqB,EAAED,oBAAoB,CAAC,AAAC;IAC5E,OAAOZ,OAAO,GAAGe,IAAI,CAACC,GAAG,CAACF,aAAa,EAAEd,OAAO,CAAC,GAAGc,aAAa,CAAC;AACpE,CAAC"}

package/dist/Table/InnerTable.js

@@ -23,14 +23,14 @@ const TABLE_DENSITY_CONFIG = {
     compact: 'small',
     standard: 'medium'
 };
-export const InnerTable = /*#__PURE__*/ forwardRef(function InnerTable({ density , width , ...otherProps }, ref) {
+export const InnerTable = /*#__PURE__*/ forwardRef(function InnerTable({ density , ...otherProps }, ref) {
     return /*#__PURE__*/ _jsx(StyledMuiTable, {
         ...otherProps,
         tabIndex: -1,
         size: TABLE_DENSITY_CONFIG[density],
         ref: ref,
         sx: {
-            width: width
+            width: '100%'
         }
     });
 });

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.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"}
+{"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, ...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: '100%',\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","otherProps","ref","tabIndex","size","sx","width"],"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,EAAE,GAAGC,UAAU,EAAE,EAC1BC,GAAG,EACH;IACA,qBACE,KAACd,cAAc;QACZ,GAAGa,UAAU;QACdE,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAER,oBAAoB,CAACI,OAAO,CAAC;QACnCE,GAAG,EAAEA,GAAG;QACRG,EAAE,EAAE;YACFC,KAAK,EAAE,MAAM;SACd;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}

package/dist/Table/Table.d.ts

@@ -6,5 +6,5 @@ import { TableProps } from './model/table-model';
  *
  * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**
  */
-export declare function Table<TableData>({ data, columns, density, checkboxSelection, onRowSelectionChange, getCheckboxColor, getRowId, rowSelection, ...otherProps }: TableProps<TableData>): JSX.Element;
+export declare function Table<TableData>({ data, columns, density, checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId, rowSelection, sorting, rowSelectionVariant, ...otherProps }: TableProps<TableData>): JSX.Element;
 //# sourceMappingURL=Table.d.ts.map

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

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

package/dist/Table/Table.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import { useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { useTheme } from '@mui/material';
 import { useCallback, useMemo } from 'react';
 import { VirtualizedTable } from './VirtualizedTable';
@@ -20,17 +20,54 @@ import { persesColumnsToTanstackColumns } from './model/table-model';
 const DEFAULT_GET_ROW_ID = (data, index)=>{
     return `${index}`;
 };
+// Setting these defaults one enables them to be consistent across renders instead
+// of being recreated every time, which can be important for perf because react
+// does not do deep equality checking for objects and arrays.
+const DEFAULT_ROW_SELECTION = {};
+const DEFAULT_SORTING = [];
 /**
  * Component used to render tabular data in Perses use cases. This component is
  * **not** intended to be a general use data table for use cases unrelated to Perses.
  *
  * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**
- */ export function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection ={} , ...otherProps }) {
+ */ export function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , onSortingChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection =DEFAULT_ROW_SELECTION , sorting =DEFAULT_SORTING , rowSelectionVariant ='standard' , ...otherProps }) {
     const theme = useTheme();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
         onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
     };
+    const handleRowSelectionEvent = useCallback((table, row, isModified)=>{
+        if (rowSelectionVariant === 'standard' || isModified) {
+            row.toggleSelected();
+        } else {
+            // Legend variant (when action not modified with shift/meta key).
+            // Note that this behavior needs to be kept in sync with behavior in
+            // the Legend component for list-based legends.
+            if (row.getIsSelected() && !table.getIsAllRowsSelected()) {
+                // Row was already selected. Revert to select all.
+                table.toggleAllRowsSelected();
+            } else {
+                // Focus the selected row.
+                onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange({
+                    [row.id]: true
+                });
+            }
+        }
+    }, [
+        onRowSelectionChange,
+        rowSelectionVariant
+    ]);
+    const handleCheckboxChange = useCallback((e, table, row)=>{
+        const nativePointerEvent = e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent) ? e.nativeEvent : undefined;
+        const isModifed = !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.metaKey) || !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.shiftKey);
+        handleRowSelectionEvent(table, row, isModifed);
+    }, [
+        handleRowSelectionEvent
+    ]);
+    const handleSortingChange = (sortingUpdater)=>{
+        const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;
+        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
+    };
     const checkboxColumn = useMemo(()=>{
         return {
             id: 'checkboxRowSelect',
@@ -44,22 +81,24 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
                     density: density
                 });
             },
-            cell: ({ row  })=>{
+            cell: ({ row , table  })=>{
                 return /*#__PURE__*/ _jsx(TableCheckbox, {
                     checked: row.getIsSelected(),
                     indeterminate: row.getIsSomeSelected(),
                     onChange: (e)=>{
-                        row.getToggleSelectedHandler()(e);
+                        handleCheckboxChange(e, table, row);
                     },
                     color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
                     density: density
                 });
-            }
+            },
+            enableSorting: false
         };
     }, [
+        theme.palette.text.primary,
         density,
         getCheckboxColor,
-        theme.palette.text.primary
+        handleCheckboxChange
     ]);
     const tableColumns = useMemo(()=>{
         const initTableColumns = persesColumnsToTanstackColumns(columns);
@@ -77,15 +116,24 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
         columns: tableColumns,
         getRowId,
         getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
         enableRowSelection: !!checkboxSelection,
         onRowSelectionChange: handleRowSelectionChange,
+        onSortingChange: handleSortingChange,
+        // For now, defaulting to sort by descending first. We can expose the ability
+        // to customize it if/when we have use cases for it.
+        sortDescFirst: true,
         state: {
-            rowSelection
+            rowSelection,
+            sorting
         }
     });
-    const handleRowClick = useCallback((rowId)=>{
-        table.getRow(rowId).toggleSelected();
+    const handleRowClick = useCallback((e, rowId)=>{
+        const row = table.getRow(rowId);
+        const isModifiedClick = e.metaKey || e.shiftKey;
+        handleRowSelectionEvent(table, row, isModifiedClick);
     }, [
+        handleRowSelectionEvent,
         table
     ]);
     return /*#__PURE__*/ _jsx(VirtualizedTable, {

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: 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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"}
+{"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 {\n  useReactTable,\n  getCoreRowModel,\n  ColumnDef,\n  RowSelectionState,\n  OnChangeFn,\n  Row,\n  Table as TanstackTable,\n  SortingState,\n  getSortedRowModel,\n} 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// Setting these defaults one enables them to be consistent across renders instead\n// of being recreated every time, which can be important for perf because react\n// does not do deep equality checking for objects and arrays.\nconst DEFAULT_ROW_SELECTION: NonNullable<TableProps<unknown>['rowSelection']> = {};\nconst DEFAULT_SORTING: NonNullable<TableProps<unknown>['sorting']> = [];\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  onSortingChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = DEFAULT_ROW_SELECTION,\n  sorting = DEFAULT_SORTING,\n  rowSelectionVariant = 'standard',\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 handleRowSelectionEvent = useCallback(\n    (table: TanstackTable<TableData>, row: Row<TableData>, isModified: boolean) => {\n      if (rowSelectionVariant === 'standard' || isModified) {\n        row.toggleSelected();\n      } else {\n        // Legend variant (when action not modified with shift/meta key).\n        // Note that this behavior needs to be kept in sync with behavior in\n        // the Legend component for list-based legends.\n        if (row.getIsSelected() && !table.getIsAllRowsSelected()) {\n          // Row was already selected. Revert to select all.\n          table.toggleAllRowsSelected();\n        } else {\n          // Focus the selected row.\n          onRowSelectionChange?.({\n            [row.id]: true,\n          });\n        }\n      }\n    },\n    [onRowSelectionChange, rowSelectionVariant]\n  );\n\n  const handleCheckboxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, table: TanstackTable<TableData>, row: Row<TableData>) => {\n      const nativePointerEvent =\n        e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent)\n          ? (e.nativeEvent as PointerEvent)\n          : undefined;\n      const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;\n      handleRowSelectionEvent(table, row, isModifed);\n    },\n    [handleRowSelectionEvent]\n  );\n\n  const handleSortingChange: OnChangeFn<SortingState> = (sortingUpdater) => {\n    const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;\n    onSortingChange?.(newSorting);\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, table }) => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              handleCheckboxChange(e, table, row);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n      enableSorting: false,\n    };\n  }, [theme.palette.text.primary, density, getCheckboxColor, handleCheckboxChange]);\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    getSortedRowModel: getSortedRowModel(),\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    onSortingChange: handleSortingChange,\n    // For now, defaulting to sort by descending first. We can expose the ability\n    // to customize it if/when we have use cases for it.\n    sortDescFirst: true,\n    state: {\n      rowSelection,\n      sorting,\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>, rowId: string) => {\n      const row = table.getRow(rowId);\n      const isModifiedClick = e.metaKey || e.shiftKey;\n      handleRowSelectionEvent(table, row, isModifiedClick);\n    },\n    [handleRowSelectionEvent, 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","getSortedRowModel","useTheme","useCallback","useMemo","VirtualizedTable","TableCheckbox","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","density","checkboxSelection","onRowSelectionChange","onSortingChange","getCheckboxColor","getRowId","rowSelection","sorting","rowSelectionVariant","otherProps","theme","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","handleRowSelectionEvent","table","row","isModified","toggleSelected","getIsSelected","getIsAllRowsSelected","toggleAllRowsSelected","id","handleCheckboxChange","e","nativePointerEvent","nativeEvent","MouseEvent","KeyboardEvent","undefined","isModifed","metaKey","shiftKey","handleSortingChange","sortingUpdater","newSorting","checkboxColumn","size","header","checked","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","cell","getIsSomeSelected","original","enableSorting","tableColumns","initTableColumns","unshift","enableRowSelection","sortDescFirst","state","handleRowClick","rowId","getRow","isModifiedClick","onRowClick","rows","getRowModel","getAllFlatColumns","headers","getHeaderGroups"],"mappings":"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"}

package/dist/Table/TableCell.d.ts

@@ -6,6 +6,16 @@ export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'al
     isLastColumn: boolean;
     isFirstColumn: boolean;
     align?: TableCellAlignment;
+    /**
+     * Additional information to be displayed when hovering over the cell. This
+     * may be the full cell value (e.g. to enable the user to see the full value
+     * if it is ellipsized to fit into the space) or some other descriptive text
+     * that is useful for the user.
+     *
+     * The hover behavior is currently managed with the `title` attribute, but this
+     * may be changed to a tooltip in the future.
+     */
+    description?: string;
     /**
      * How the cell should behave related to focus.
      * - `trigger-focus`: the cell should be auto-focused when it renders.
@@ -17,5 +27,5 @@ export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'al
     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, isFirstColumn, isLastColumn, ...otherProps }: TableCellProps): JSX.Element;
+export declare function TableCell({ children, density, variant, width, focusState, onFocusTrigger, isFirstColumn, isLastColumn, description, ...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,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"}
+{"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;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;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,WAAW,EACX,GAAG,UAAU,EACd,EAAE,cAAc,eA2EhB"}

package/dist/Table/TableCell.js

@@ -29,7 +29,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(({ theme  })=>({
             borderRadius: 0
         }
     }));
-export function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , ...otherProps }) {
+export function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , description , ...otherProps }) {
     const theme = useTheme();
     const elRef = useRef();
     const isHeader = variant === 'head';
@@ -43,7 +43,7 @@ export function TableCell({ children , density , variant , width , focusState ='
     const handleFocus = (e)=>{
         var ref;
         // From https://zellwk.com/blog/keyboard-focusable-elements/
-        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details');
+        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
         if (nestedFocusTarget) {
             // If the cell has a focusable child, focus it instead. Mostly used for
             // checkbox cells, but could have other uses.
@@ -84,8 +84,13 @@ export function TableCell({ children , density , variant , width , focusState ='
                 // this with a prop on column config in the future.
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                textOverflow: 'ellipsis',
+                // Need to inherit from the MUI cell because this manages some ordering
+                // that the `TableSortLabel` uses to determine the location of the icon
+                // in headers.
+                flexDirection: 'inherit'
             },
+            title: description,
             children: children
         })
     });