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

package/dist/SettingsAutocomplete/SettingsAutocomplete.js

@@ -0,0 +1,65 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, TextField, Typography, createFilterOptions } from '@mui/material';
+/**
+ * Opinionated autocomplete component useful for providing users with a dropdown
+ * for settings that require selecting one or more options from a list.
+ *
+ * **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 SettingsAutocomplete({ options , renderInput =(params)=>/*#__PURE__*/ _jsx(TextField, {
+        ...params
+    }) , ...otherProps }) {
+    const getOptionLabel = (option)=>{
+        var _label;
+        return (_label = option.label) !== null && _label !== void 0 ? _label : option.id;
+    };
+    // Note: this component currently is not virtualized because it is specific
+    // to being used for settings, which generally have a pretty small list of
+    // options. If this changes to include values with many options, virtualization
+    // should be added using react-virtuoso.
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        isOptionEqualToValue: (option, value)=>option.id === value.id,
+        getOptionDisabled: (option)=>!!option.disabled,
+        getOptionLabel: getOptionLabel,
+        options: options,
+        renderInput: renderInput,
+        renderOption: (props, option)=>{
+            return /*#__PURE__*/ _jsx("li", {
+                ...props,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body1",
+                            component: "div",
+                            children: getOptionLabel(option)
+                        }),
+                        option.description && /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            component: "div",
+                            color: (theme)=>theme.palette.text.secondary,
+                            children: option.description
+                        })
+                    ]
+                })
+            });
+        },
+        filterOptions: createFilterOptions({
+            // Include the label and the description in search.
+            stringify: (option)=>`${getOptionLabel(option)} ${option.description || ''}`
+        }),
+        ...otherProps
+    });
+}
+
+//# sourceMappingURL=SettingsAutocomplete.js.map

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/{model/units/constants.js → SettingsAutocomplete/index.js}

@@ -10,8 +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.
-// Common constants needed across individual unit groups and the overall
-// combined units.
-export const MAX_SIGNIFICANT_DIGITS = 3;
+export * from './SettingsAutocomplete';
 
-//# sourceMappingURL=constants.js.map
+//# 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

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

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