SparklineCell: Allow specifying time range (#69130)

add timeRange optional prop to Table and TablePanel

packages/grafana-ui/src/components/Table/SparklineCell.tsx

@@ -29,8 +29,7 @@ export const defaultSparklineCellConfig: GraphFieldConfig = {
 };
 
 export const SparklineCell = (props: TableCellProps) => {
-  const { field, innerWidth, tableStyles, cell, cellProps } = props;
-
+  const { field, innerWidth, tableStyles, cell, cellProps, timeRange } = props;
   const sparkline = getSparkline(cell.value);
 
   if (!sparkline) {
@@ -45,6 +44,7 @@ export const SparklineCell = (props: TableCellProps) => {
   sparkline.y.config.min = range.min;
   sparkline.y.config.max = range.max;
   sparkline.y.state = { range };
+  sparkline.timeRange = timeRange;
 
   const cellOptions = getTableSparklineCellOptions(field);
 

packages/grafana-ui/src/components/Table/Table.tsx

@@ -54,6 +54,7 @@ export const Table = memo((props: Props) => {
     footerValues,
     enablePagination,
     cellHeight = TableCellHeight.Sm,
+    timeRange,
   } = props;
 
   const listRef = useRef<VariableSizeList>(null);
@@ -258,12 +259,13 @@ export const Table = memo((props: Props) => {
               onCellFilterAdded={onCellFilterAdded}
               columnIndex={index}
               columnCount={row.cells.length}
+              timeRange={timeRange}
             />
           ))}
         </div>
       );
     },
-    [onCellFilterAdded, page, enablePagination, prepareRow, rows, tableStyles, renderSubTable]
+    [onCellFilterAdded, page, enablePagination, prepareRow, rows, tableStyles, renderSubTable, timeRange]
   );
 
   const onNavigate = useCallback(

packages/grafana-ui/src/components/Table/TableCell.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Cell } from 'react-table';
 
+import { TimeRange } from '@grafana/data';
+
 import { TableStyles } from './styles';
 import { GrafanaTableColumn, TableFilterActionCallback } from './types';
 
@@ -10,10 +12,11 @@ export interface Props {
   onCellFilterAdded?: TableFilterActionCallback;
   columnIndex: number;
   columnCount: number;
+  timeRange?: TimeRange;
   userProps?: object;
 }
 
-export const TableCell = ({ cell, tableStyles, onCellFilterAdded, userProps }: Props) => {
+export const TableCell = ({ cell, tableStyles, onCellFilterAdded, timeRange, userProps }: Props) => {
   const cellProps = cell.getCellProps();
   const field = (cell.column as unknown as GrafanaTableColumn).field;
 
@@ -34,6 +37,7 @@ export const TableCell = ({ cell, tableStyles, onCellFilterAdded, userProps }: P
     onCellFilterAdded,
     cellProps,
     innerWidth,
+    timeRange,
     userProps,
   }) as React.ReactElement;
 };

packages/grafana-ui/src/components/Table/types.ts

@@ -2,7 +2,7 @@ import { Property } from 'csstype';
 import { FC } from 'react';
 import { CellProps, Column, Row, TableState, UseExpandedRowProps } from 'react-table';
 
-import { DataFrame, Field, KeyValue, SelectableValue } from '@grafana/data';
+import { DataFrame, Field, KeyValue, SelectableValue, TimeRange } from '@grafana/data';
 import { TableCellHeight } from '@grafana/schema';
 
 import { TableStyles } from './styles';
@@ -87,4 +87,6 @@ export interface Props {
   cellHeight?: TableCellHeight;
   /** @alpha */
   subData?: DataFrame[];
+  /** @alpha Used by SparklineCell when provided */
+  timeRange?: TimeRange;
 }

public/app/plugins/panel/table/TablePanel.tsx

@@ -11,7 +11,7 @@ import { Options } from './panelcfg.gen';
 interface Props extends PanelProps<Options> {}
 
 export function TablePanel(props: Props) {
-  const { data, height, width, options, fieldConfig, id } = props;
+  const { data, height, width, options, fieldConfig, id, timeRange } = props;
 
   const theme = useTheme2();
   const panelContext = usePanelContext();
@@ -54,6 +54,7 @@ export function TablePanel(props: Props) {
       enablePagination={options.footer?.enablePagination}
       subData={subData}
       cellHeight={options.cellHeight}
+      timeRange={timeRange}
     />
   );