@perses-dev/components 0.33.0 → 0.35.0

package/dist/SettingsAutocomplete/SettingsAutocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SettingsAutocomplete/SettingsAutocomplete.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  Autocomplete,\n  AutocompleteProps,\n  TextField,\n  Typography,\n  UseAutocompleteProps,\n  createFilterOptions,\n} from '@mui/material';\nimport { ReactNode } from 'react';\n\n/**\n * Interface to extend from for `options` when using `SettingsAutocomplete`.\n */\nexport interface SettingsAutocompleteOption {\n  /**\n   * Unique identifier for the option.\n   */\n  id: string;\n\n  /**\n   * Optional value that is presented to the user for each option. If not set,\n   * the `id` will be used instead.\n   */\n  label?: string;\n\n  /**\n   * Optional description that will be rendered below the `label` to provide the\n   * user with additional information about the option.\n   */\n  description?: ReactNode;\n\n  /**\n   * When `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n}\n\nexport interface SettingsAutocompleteProps<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined,\n  DisableClearable extends boolean | undefined\n  // Note that the last `false` in the generic arguments sets the `freeSolo` option to `false`.\n  // This component is intended to be used with a discrete list of options, so `freeSolo` never\n  // needs to be `true`.\n> extends Omit<AutocompleteProps<OptionType, Multiple, DisableClearable, false>, 'renderInput'> {\n  // Modifying this to optional, so we can define a sensible default below that\n  // is used in many of the simple cases.\n  renderInput?: AutocompleteProps<OptionType, Multiple, DisableClearable, false>['renderInput'];\n}\n\n/**\n * Opinionated autocomplete component useful for providing users with a dropdown\n * for settings that require selecting one or more options from a list.\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 SettingsAutocomplete<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined = false,\n  DisableClearable extends boolean | undefined = false\n>({\n  options,\n  renderInput = (params) => <TextField {...params} />,\n  ...otherProps\n}: SettingsAutocompleteProps<OptionType, Multiple, DisableClearable>) {\n  const getOptionLabel: UseAutocompleteProps<OptionType, undefined, boolean, undefined>['getOptionLabel'] = (\n    option\n  ) => {\n    return option.label ?? option.id;\n  };\n\n  // Note: this component currently is not virtualized because it is specific\n  // to being used for settings, which generally have a pretty small list of\n  // options. If this changes to include values with many options, virtualization\n  // should be added using react-virtuoso.\n  return (\n    <Autocomplete\n      isOptionEqualToValue={(option, value) => option.id === value.id}\n      getOptionDisabled={(option) => !!option.disabled}\n      getOptionLabel={getOptionLabel}\n      options={options}\n      renderInput={renderInput}\n      renderOption={(props, option) => {\n        return (\n          <li {...props}>\n            <div>\n              <Typography variant=\"body1\" component=\"div\">\n                {getOptionLabel(option)}\n              </Typography>\n              {option.description && (\n                <Typography variant=\"body2\" component=\"div\" color={(theme) => theme.palette.text.secondary}>\n                  {option.description}\n                </Typography>\n              )}\n            </div>\n          </li>\n        );\n      }}\n      filterOptions={createFilterOptions({\n        // Include the label and the description in search.\n        stringify: (option) => `${getOptionLabel(option)} ${option.description || ''}`,\n      })}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["Autocomplete","TextField","Typography","createFilterOptions","SettingsAutocomplete","options","renderInput","params","otherProps","getOptionLabel","option","label","id","isOptionEqualToValue","value","getOptionDisabled","disabled","renderOption","props","li","div","variant","component","description","color","theme","palette","text","secondary","filterOptions","stringify"],"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,SACEA,YAAY,EAEZC,SAAS,EACTC,UAAU,EAEVC,mBAAmB,QACd,eAAe,CAAC;AA2CvB;;;;;CAKC,GACD,OAAO,SAASC,oBAAoB,CAIlC,EACAC,OAAO,CAAA,EACPC,WAAW,EAAG,CAACC,MAAM,iBAAK,KAACN,SAAS;QAAE,GAAGM,MAAM;MAAI,CAAA,EACnD,GAAGC,UAAU,EACqD,EAAE;IACpE,MAAMC,cAAc,GAAsF,CACxGC,MAAM,GACH;YACIA,MAAY;QAAnB,OAAOA,CAAAA,MAAY,GAAZA,MAAM,CAACC,KAAK,cAAZD,MAAY,cAAZA,MAAY,GAAIA,MAAM,CAACE,EAAE,CAAC;IACnC,CAAC,AAAC;IAEF,2EAA2E;IAC3E,0EAA0E;IAC1E,+EAA+E;IAC/E,wCAAwC;IACxC,qBACE,KAACZ,YAAY;QACXa,oBAAoB,EAAE,CAACH,MAAM,EAAEI,KAAK,GAAKJ,MAAM,CAACE,EAAE,KAAKE,KAAK,CAACF,EAAE;QAC/DG,iBAAiB,EAAE,CAACL,MAAM,GAAK,CAAC,CAACA,MAAM,CAACM,QAAQ;QAChDP,cAAc,EAAEA,cAAc;QAC9BJ,OAAO,EAAEA,OAAO;QAChBC,WAAW,EAAEA,WAAW;QACxBW,YAAY,EAAE,CAACC,KAAK,EAAER,MAAM,GAAK;YAC/B,qBACE,KAACS,IAAE;gBAAE,GAAGD,KAAK;0BACX,cAAA,MAACE,KAAG;;sCACF,KAAClB,UAAU;4BAACmB,OAAO,EAAC,OAAO;4BAACC,SAAS,EAAC,KAAK;sCACxCb,cAAc,CAACC,MAAM,CAAC;0BACZ;wBACZA,MAAM,CAACa,WAAW,kBACjB,KAACrB,UAAU;4BAACmB,OAAO,EAAC,OAAO;4BAACC,SAAS,EAAC,KAAK;4BAACE,KAAK,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,IAAI,CAACC,SAAS;sCACvFlB,MAAM,CAACa,WAAW;0BACR,AACd;;kBACG;cACH,CACL;QACJ,CAAC;QACDM,aAAa,EAAE1B,mBAAmB,CAAC;YACjC,mDAAmD;YACnD2B,SAAS,EAAE,CAACpB,MAAM,GAAK,CAAC,EAAED,cAAc,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEA,MAAM,CAACa,WAAW,IAAI,EAAE,CAAC,CAAC;SAC/E,CAAC;QACD,GAAGf,UAAU;MACd,CACF;AACJ,CAAC"}

package/dist/SettingsAutocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SettingsAutocomplete';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SettingsAutocomplete/index.ts"],"names":[],"mappings":"AAaA,cAAc,wBAAwB,CAAC"}

package/dist/{LegendOptionsEditor → SettingsAutocomplete}/index.js

@@ -10,6 +10,6 @@
 // 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 * from './LegendOptionsEditor';
+export * from './SettingsAutocomplete';
 
 //# sourceMappingURL=index.js.map

package/dist/SettingsAutocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SettingsAutocomplete/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 './SettingsAutocomplete';\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,wBAAwB,CAAC"}

package/dist/StatChart/StatChart.d.ts

@@ -3,7 +3,7 @@ import { LineSeriesOption } from 'echarts/charts';
 import { UnitOptions } from '../model/units';
 import { GraphSeries } from '../model/graph';
 export interface StatChartData {
-    calculatedValue?: number;
+    calculatedValue?: number | null;
     seriesData?: GraphSeries;
 }
 export interface StatChartProps {
@@ -13,6 +13,7 @@ export interface StatChartProps {
     unit: UnitOptions;
     color?: string;
     sparkline?: LineSeriesOption;
+    showSeriesName?: boolean;
 }
 export declare function StatChart(props: StatChartProps): JSX.Element;
 //# sourceMappingURL=StatChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAwG9C"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAkI9C"}

package/dist/StatChart/StatChart.js

@@ -12,8 +12,8 @@
 // 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 { merge } from 'lodash-es';
+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';
@@ -21,6 +21,7 @@ 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-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":"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,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAChD,SAASC,KAAK,QAAQ,WAAW,CAAC;AAClC,SAASC,GAAG,QAA2B,cAAc,CAAC;AACtD,SAASC,SAAS,IAAIC,gBAAgB,QAA0B,gBAAgB,CAAC;AACjF,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,oBAAoB,CAAC;AACvG,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,cAAc,QAAQ,gCAAgC,CAAC;AAChE,SAASC,WAAW,QAAqB,gBAAgB,CAAC;AAC1D,SAASC,MAAM,QAAQ,WAAW,CAAC;AAGnCV,GAAG,CAAC;IAACE,gBAAgB;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC,cAAc;IAAEC,gBAAgB;IAAEC,cAAc;CAAC,CAAC,CAAC;AAE3G,MAAMI,cAAc,GAAG,EAAE,AAAC;AAC1B,MAAMC,cAAc,GAAG,EAAE,AAAC;AAgB1B,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAM,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,IAAI,CAAA,EAAEC,IAAI,CAAA,EAAEC,KAAK,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGN,KAAK,AAAC;IAC9D,MAAMO,WAAW,GAAGb,cAAc,EAAE,AAAC;IAErC,MAAMc,cAAc,GAAGL,IAAI,CAACM,eAAe,KAAKC,SAAS,GAAG,EAAE,GAAGf,WAAW,CAACQ,IAAI,CAACM,eAAe,EAAEL,IAAI,CAAC,AAAC;IAEzG,MAAMO,MAAM,GAAsB7B,OAAO,CAAC,IAAM;QAC9C,IAAIqB,IAAI,CAACS,UAAU,KAAKF,SAAS,EAAE,OAAOH,WAAW,CAACM,YAAY,CAAC;QAEnE,MAAMC,MAAM,GAAGX,IAAI,CAACS,UAAU,AAAC;QAC/B,MAAMG,UAAU,GAAuB,EAAE,AAAC;QAE1C,IAAIT,SAAS,KAAKI,SAAS,EAAE;YAC3B,MAAMM,UAAU,GAAG;gBACjBC,IAAI,EAAE,MAAM;gBACZd,IAAI,EAAE;uBAAIW,MAAM,CAACI,MAAM;iBAAC;gBACxBC,MAAM,EAAE,CAAC;gBACTC,MAAM,EAAE,MAAM;gBACdC,SAAS,EAAE,KAAK;gBAChBC,MAAM,EAAE,IAAI;aACb,AAAC;YACF,MAAMC,YAAY,GAAGtC,KAAK,CAAC+B,UAAU,EAAEV,SAAS,CAAC,AAAC;YAClDS,UAAU,CAACS,IAAI,CAACD,YAAY,CAAC,CAAC;QAChC,CAAC;QAED,MAAMZ,MAAM,GAAG;YACbc,KAAK,EAAE;gBACLC,IAAI,EAAE,KAAK;aACZ;YACDC,IAAI,EAAE;gBACJD,IAAI,EAAE,KAAK;gBACXE,GAAG,EAAE,KAAK;gBACVC,KAAK,EAAE,CAAC;gBACRC,MAAM,EAAE,CAAC;gBACTC,IAAI,EAAE,CAAC;gBACPC,YAAY,EAAE,KAAK;aACpB;YACDC,KAAK,EAAE;gBACLhB,IAAI,EAAE,MAAM;gBACZS,IAAI,EAAE,KAAK;gBACXQ,WAAW,EAAE,KAAK;aACnB;YACDC,KAAK,EAAE;gBACLlB,IAAI,EAAE,OAAO;gBACbS,IAAI,EAAE,KAAK;gBACXU,GAAG,EAAE,CAACC,KAAmC,GAAK;oBAC5C,IAAIA,KAAK,CAACD,GAAG,IAAI,CAAC,IAAIC,KAAK,CAACD,GAAG,IAAI,CAAC,EAAE;wBACpC,2EAA2E;wBAC3E,OAAO,CAAC,CAAC;oBACX,CAAC;oBACD,OAAOC,KAAK,CAACD,GAAG,CAAC;gBACnB,CAAC;aACF;YACDE,OAAO,EAAE;gBACPZ,IAAI,EAAE,KAAK;aACZ;YACDZ,MAAM,EAAEC,UAAU;SACnB,AAAC;QAEF,OAAOJ,MAAM,CAAC;IAChB,CAAC,EAAE;QAACR,IAAI;QAAEI,WAAW;QAAED,SAAS;KAAC,CAAC,AAAC;IAEnC,MAAMiC,YAAY,GAAGtC,KAAK,GAAG,GAAG,IAAIC,MAAM,GAAG,GAAG,AAAC;IACjD,4FAA4F;IAC5F,MAAMsC,gBAAgB,GAAGhC,cAAc,CAACiC,MAAM,AAAC;IAC/C,MAAMC,SAAS,GAAGH,YAAY,KAAK,IAAI,GAAGzC,cAAc,GAAG6C,IAAI,CAACP,GAAG,CAACnC,KAAK,EAAEC,MAAM,CAAC,GAAGsC,gBAAgB,AAAC;IAEtG,MAAMI,gBAAgB,GAAG,CAAC,EAAErC,WAAW,CAACsC,SAAS,CAACC,OAAO,CAACC,OAAO,CAAC,EAAE,CAAC,AAAC;IAEtE,MAAMC,aAAa,GAAG1C,SAAS,GAAG,MAAM,GAAG,QAAQ,AAAC;IACpD,MAAM2C,UAAU,GAAG;QACjBC,OAAO,EAAE,MAAM;QACfC,aAAa,EAAE,QAAQ;QACvBC,cAAc,EAAEJ,aAAa;QAC7BK,UAAU,EAAEL,aAAa;KAC1B,AAAC;IAEF,qBACE,MAACjE,GAAG;QAACuE,EAAE,EAAE;YAAEpD,MAAM,EAAE,MAAM;YAAED,KAAK,EAAE,MAAM;YAAE,GAAGgD,UAAU;SAAE;;0BACvD,KAACjE,UAAU;gBACTuE,OAAO,EAAC,IAAI;gBACZD,EAAE,EAAE,CAACE,KAAK,GAAM,CAAA;wBACdnD,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAImD,KAAK,CAACC,OAAO,CAACC,IAAI,CAACC,OAAO;wBAC1CC,QAAQ,EAAE,CAAC,MAAM,EAAE/D,cAAc,CAAC,IAAI,EAAE6C,SAAS,CAAC,IAAI,EAAE5C,cAAc,CAAC,GAAG,CAAC;wBAC3EgD,OAAO,EAAExC,SAAS,GACd,CAAC,EAAEsC,gBAAgB,CAAC,CAAC,EAAEA,gBAAgB,CAAC,GAAG,EAAEA,gBAAgB,CAAC,CAAC,GAC/D,CAAC,GAAG,EAAEA,gBAAgB,CAAC,CAAC;qBAC7B,CAAA,AAAC;0BAEDpC,cAAc;cACJ;YACZF,SAAS,KAAKI,SAAS,kBACtB,KAACd,MAAM;gBACL0D,EAAE,EAAE;oBACFrD,KAAK,EAAE,MAAM;oBACbC,MAAM,EAAE,MAAM;iBACf;gBACDS,MAAM,EAAEA,MAAM;gBACd6C,KAAK,EAAEjD,WAAW,CAACsD,YAAY;gBAC/BC,QAAQ,EAAC,KAAK;cACd,AACH;;MACG,CACN;AACJ,CAAC"}
+{"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, 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 { formatValue, UnitOptions } from '../model/units';\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","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","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":"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,GAAG,EAAEC,UAAU,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACxD,OAAOC,KAAK,MAAM,cAAc,CAAC;AACjC,SAASC,GAAG,QAA2B,cAAc,CAAC;AACtD,SAASC,SAAS,IAAIC,gBAAgB,QAA0B,gBAAgB,CAAC;AACjF,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,oBAAoB,CAAC;AACvG,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,cAAc,QAAQ,gCAAgC,CAAC;AAChE,SAASC,WAAW,QAAqB,gBAAgB,CAAC;AAC1D,SAASC,MAAM,QAAQ,WAAW,CAAC;AAEnC,SAASC,kBAAkB,QAAQ,qBAAqB,CAAC;AAEzDX,GAAG,CAAC;IAACE,gBAAgB;IAAEC,aAAa;IAAEC,gBAAgB;IAAEC,cAAc;IAAEC,gBAAgB;IAAEC,cAAc;CAAC,CAAC,CAAC;AAE3G,MAAMK,WAAW,GAAG,GAAG,AAAC;AACxB,MAAMC,yBAAyB,GAAG,EAAE,AAAC;AACrC,MAAMC,uBAAuB,GAAG,GAAG,AAAC;AACpC,MAAMC,iBAAiB,GAAG,GAAG,AAAC;AAiB9B,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;QAevCC,GAAgB,EAgGfA,IAAe;IA9GxB,MAAM,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEF,IAAI,CAAA,EAAEG,IAAI,CAAA,EAAEC,KAAK,CAAA,EAAEC,SAAS,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGP,KAAK,AAAC;IAC9E,MAAMQ,WAAW,GAAGjB,cAAc,EAAE,AAAC;IAErC,IAAIkB,cAAc,GAAG,EAAE,AAAC;IACxB,IAAIR,IAAI,CAACS,eAAe,KAAK,IAAI,EAAE;QACjCD,cAAc,GAAG,MAAM,CAAC;IAC1B,OAAO,IAAI,OAAOR,IAAI,CAACS,eAAe,KAAK,QAAQ,EAAE;QACnDD,cAAc,GAAGjB,WAAW,CAACS,IAAI,CAACS,eAAe,EAAEN,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,MAAMO,gBAAgB,GAAGH,WAAW,CAACI,SAAS,CAACC,OAAO,CAACC,OAAO,AAAC;QAIvDb,IAAsB;IAF9B,6CAA6C;IAC7C,IAAIc,kBAAkB,GAAGrB,kBAAkB,CAAC;QAC1CsB,IAAI,EAAEf,CAAAA,IAAsB,GAAtBA,IAAI,aAAJA,IAAI,WAAY,GAAhBA,KAAAA,CAAgB,GAAhBA,CAAAA,GAAgB,GAAhBA,IAAI,CAAEgB,UAAU,cAAhBhB,GAAgB,WAAA,GAAhBA,KAAAA,CAAgB,GAAhBA,GAAgB,CAAEiB,IAAI,AAAN,cAAhBjB,IAAsB,cAAtBA,IAAsB,GAAI,EAAE;QAClCkB,UAAU,EAAEtB,uBAAuB;QACnCK,KAAK;QACLC,MAAM,EAAEA,MAAM,GAAG,KAAK;QACtBiB,UAAU,EAAEzB,WAAW;QACvB0B,OAAO,EAAEzB,yBAAyB;KACnC,CAAC,AAAC;IACH,MAAM0B,gBAAgB,GAAGf,cAAc,GAAGQ,kBAAkB,GAAGpB,WAAW,GAAGgB,gBAAgB,GAAG,CAAC,AAAC;IAElG,uCAAuC;IACvC,MAAMY,cAAc,GAAGrB,KAAK,GAAGS,gBAAgB,GAAG,CAAC,AAAC;IACpD,MAAMa,eAAe,GAAGrB,MAAM,GAAGmB,gBAAgB,AAAC;IAClD,MAAMG,aAAa,GAAG/B,kBAAkB,CAAC;QACvCsB,IAAI,EAAEP,cAAc;QACpBU,UAAU,EAAErB,iBAAiB;QAC7B,4FAA4F;QAC5FI,KAAK,EAAEI,SAAS,GAAGiB,cAAc,GAAGA,cAAc,GAAG,GAAG;QACxD,2EAA2E;QAC3E,iEAAiE;QACjEpB,MAAM,EAAEG,SAAS,GAAGkB,eAAe,GAAG,IAAI,GAAGA,eAAe,GAAG,GAAG;QAClEJ,UAAU,EAAEzB,WAAW;KACxB,CAAC,AAAC;IACH,MAAM+B,eAAe,GAAGD,aAAa,GAAG9B,WAAW,AAAC;IAEpD,+EAA+E;IAC/EoB,kBAAkB,GAAGY,IAAI,CAACC,GAAG,CAACH,aAAa,GAAG,GAAG,EAAEV,kBAAkB,CAAC,CAAC;IAEvE,MAAMc,MAAM,GAAsBnD,OAAO,CAAC,IAAM;QAC9C,IAAIuB,IAAI,CAACgB,UAAU,KAAKa,SAAS,EAAE,OAAOtB,WAAW,CAACuB,YAAY,CAAC;QAEnE,MAAMC,MAAM,GAAG/B,IAAI,CAACgB,UAAU,AAAC;QAC/B,MAAMgB,UAAU,GAAuB,EAAE,AAAC;QAE1C,IAAI3B,SAAS,KAAKwB,SAAS,EAAE;YAC3B,MAAMI,UAAU,GAAG;gBACjBC,IAAI,EAAE,MAAM;gBACZjB,IAAI,EAAEc,MAAM,CAACd,IAAI;gBACjBjB,IAAI,EAAE+B,MAAM,CAACI,MAAM;gBACnBC,MAAM,EAAE,CAAC;gBACTC,MAAM,EAAE,MAAM;gBACdC,SAAS,EAAE,KAAK;gBAChBC,MAAM,EAAE,IAAI;aACb,AAAC;YACF,MAAMC,YAAY,GAAG3D,KAAK,CAACoD,UAAU,EAAE5B,SAAS,CAAC,AAAC;YAClD2B,UAAU,CAACS,IAAI,CAACD,YAAY,CAAC,CAAC;QAChC,CAAC;QAED,MAAMZ,MAAM,GAAG;YACbc,KAAK,EAAE;gBACLC,IAAI,EAAE,KAAK;aACZ;YACDC,IAAI,EAAE;gBACJD,IAAI,EAAE,KAAK;gBACXE,GAAG,EAAE,KAAK;gBACVC,KAAK,EAAE,CAAC;gBACRC,MAAM,EAAE,CAAC;gBACTC,IAAI,EAAE,CAAC;gBACPC,YAAY,EAAE,KAAK;aACpB;YACDC,KAAK,EAAE;gBACLhB,IAAI,EAAE,MAAM;gBACZS,IAAI,EAAE,KAAK;gBACXQ,WAAW,EAAE,KAAK;aACnB;YACDC,KAAK,EAAE;gBACLlB,IAAI,EAAE,OAAO;gBACbS,IAAI,EAAE,KAAK;gBACXhB,GAAG,EAAE,CAAC0B,KAAmC,GAAK;oBAC5C,IAAIA,KAAK,CAAC1B,GAAG,IAAI,CAAC,IAAI0B,KAAK,CAAC1B,GAAG,IAAI,CAAC,EAAE;wBACpC,2EAA2E;wBAC3E,OAAO,CAAC,CAAC;oBACX,CAAC;oBACD,OAAO0B,KAAK,CAAC1B,GAAG,CAAC;gBACnB,CAAC;aACF;YACD2B,OAAO,EAAE;gBACPX,IAAI,EAAE,KAAK;aACZ;YACDZ,MAAM,EAAEC,UAAU;SACnB,AAAC;QAEF,OAAOJ,MAAM,CAAC;IAChB,CAAC,EAAE;QAAC5B,IAAI;QAAEO,WAAW;QAAEF,SAAS;KAAC,CAAC,AAAC;IAEnC,MAAMkD,aAAa,GAAGlD,SAAS,GAAG,MAAM,GAAG,QAAQ,AAAC;IACpD,MAAMmD,UAAU,GAAG;QACjBC,OAAO,EAAE,MAAM;QACfC,aAAa,EAAE,QAAQ;QACvBC,cAAc,EAAEJ,aAAa;QAC7BK,UAAU,EAAEL,aAAa;KAC1B,AAAC;IAEF,qBACE,MAAC7E,GAAG;QAACmF,EAAE,EAAE;YAAE3D,MAAM,EAAE,MAAM;YAAED,KAAK,EAAE,MAAM;YAAE,GAAGuD,UAAU;SAAE;;YACtDlD,cAAc,kBACb,KAACwD,UAAU;gBAAClD,OAAO,EAAEF,gBAAgB;gBAAEqD,QAAQ,EAAEjD,kBAAkB;0BAChEd,CAAAA,IAAe,GAAfA,IAAI,CAACgB,UAAU,cAAfhB,IAAe,WAAM,GAArBA,KAAAA,CAAqB,GAArBA,IAAe,CAAEiB,IAAI;cACX,AACd;0BACD,KAAC+C,KAAK;gBAACC,OAAO,EAAC,IAAI;gBAAC7D,KAAK,EAAEA,KAAK;gBAAE2D,QAAQ,EAAEvC,aAAa;gBAAEZ,OAAO,EAAEF,gBAAgB;0BACjFF,cAAc;cACT;YACPH,SAAS,KAAKwB,SAAS,kBACtB,KAACrC,MAAM;gBACLqE,EAAE,EAAE;oBACF5D,KAAK,EAAE,MAAM;oBACbC,MAAM,EAAEA,MAAM,GAAGmB,gBAAgB,GAAGI,eAAe;iBACpD;gBACDG,MAAM,EAAEA,MAAM;gBACdsC,KAAK,EAAE3D,WAAW,CAAC4D,YAAY;gBAC/BC,QAAQ,EAAC,KAAK;cACd,AACH;;MACG,CACN;AACJ,CAAC;AAED,MAAMN,UAAU,GAAGlF,MAAM,CAACD,UAAU,EAAE;IACpC0F,iBAAiB,EAAE,CAACC,IAAI,GAAKA,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,UAAU;CACvE,CAAC,CAAkE,CAAC,EAAEJ,KAAK,CAAA,EAAEtD,OAAO,CAAA,EAAEmD,QAAQ,CAAA,EAAE,GAAM,CAAA;QACrG3D,KAAK,EAAE8D,KAAK,CAACK,OAAO,CAACxD,IAAI,CAACyD,SAAS;QACnC5D,OAAO,EAAE,CAAC,EAAEA,OAAO,CAAC,EAAE,CAAC;QACvBmD,QAAQ,EAAE,CAAC,EAAEA,QAAQ,CAAC,EAAE,CAAC;QACzBU,QAAQ,EAAE,QAAQ;QAClBC,YAAY,EAAE,UAAU;QACxBC,UAAU,EAAE,QAAQ;KACrB,CAAA,AAAC,CAAC,AAAC;AAEJ,MAAMX,KAAK,GAAGpF,MAAM,CAACD,UAAU,EAAE;IAC/B0F,iBAAiB,EAAE,CAACC,IAAI,GAAKA,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,UAAU,IAAIA,IAAI,KAAK,WAAW;CACnH,CAAC,CACA,CAAC,EAAEJ,KAAK,CAAA,EAAE9D,KAAK,CAAA,EAAEQ,OAAO,CAAA,EAAEmD,QAAQ,CAAA,EAAE1D,SAAS,CAAA,EAAE,GAAM,CAAA;QACnDD,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI8D,KAAK,CAACK,OAAO,CAACxD,IAAI,CAAC6D,OAAO;QAC1Cb,QAAQ,EAAE,CAAC,EAAEA,QAAQ,CAAC,EAAE,CAAC;QACzBnD,OAAO,EAAEP,SAAS,GAAG,CAAC,EAAEO,OAAO,CAAC,GAAG,EAAEA,OAAO,CAAC,KAAK,EAAEA,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,EAAEA,OAAO,CAAC,EAAE,CAAC;QACnF+D,UAAU,EAAE,QAAQ;QACpBxD,UAAU,EAAEzB,WAAW;KACxB,CAAA,AAAC,CACH,AAAC"}

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/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

@@ -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.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'> {\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","default","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/VirtualizedTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAU7E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAQjD,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAAG;IACrH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eA+HlC"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAU7E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAQjD,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAAG;IACrH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eAqIlC"}

package/dist/Table/VirtualizedTable.js

@@ -102,7 +102,8 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                     children: headers.map((headerGroup)=>{
                         return /*#__PURE__*/ _jsx(TableRow, {
                             density: density,
-                            children: headerGroup.headers.map((header, i)=>{
+                            children: headerGroup.headers.map((header, i, headers)=>{
+                                var ref;
                                 const column = header.column;
                                 const position = {
                                     row: 0,
@@ -110,10 +111,13 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                                 };
                                 return /*#__PURE__*/ _jsx(TableCell, {
                                     width: column.getSize() || 'auto',
+                                    align: (ref = column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
                                     variant: "head",
                                     density: density,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                    isFirstColumn: i === 0,
+                                    isLastColumn: i === headers.length - 1,
                                     children: flexRender(column.columnDef.header, header.getContext())
                                 }, header.id);
                             })
@@ -127,19 +131,21 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                     return null;
                 }
                 return /*#__PURE__*/ _jsx(_Fragment, {
-                    children: row.getVisibleCells().map((cell, i)=>{
+                    children: row.getVisibleCells().map((cell, i, cells)=>{
+                        var ref;
                         const position = {
                             // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
                         return /*#__PURE__*/ _jsx(TableCell, {
-                            sx: {
-                                width: cell.column.getSize() || 'auto'
-                            },
+                            width: cell.column.getSize() || 'auto',
+                            align: (ref = cell.column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                            isFirstColumn: i === 0,
+                            isLastColumn: i === cells.length - 1,
                             children: flexRender(cell.column.columnDef.cell, cell.getContext())
                         }, cell.id);
                     })