feat(TimeTable): add other sparkline type options (#35180)

superset-frontend/src/visualizations/TimeTable/components/Sparkline/Sparkline.tsx

@@ -55,6 +55,7 @@ const Sparkline = ({
       yAxisBounds={yAxisBounds}
       showYAxis={column.showYAxis || false}
       entries={entries}
+      sparkType={column.sparkType || 'line'}
     />
   );
 };

superset-frontend/src/visualizations/TimeTable/components/SparklineCell/SparklineCell.tsx

@@ -23,9 +23,13 @@ import { scaleLinear } from '@visx/scale';
 import {
   Axis,
   LineSeries,
+  BarSeries,
+  AreaSeries,
   Tooltip,
   XYChart,
   buildChartTheme,
+  type SeriesProps,
+  AxisScale,
 } from '@visx/xychart';
 import { extendedDayjs } from '@superset-ui/core/utils/dates';
 import {
@@ -33,6 +37,7 @@ import {
   createYScaleConfig,
   transformChartData,
 } from '../../utils';
+import { SparkType } from '../../types';
 
 interface Entry {
   time: string;
@@ -51,6 +56,7 @@ interface SparklineCellProps {
   showYAxis?: boolean;
   width?: number;
   yAxisBounds?: [number | undefined, number | undefined];
+  sparkType?: SparkType;
 }
 
 const MARGIN = {
@@ -71,6 +77,7 @@ const SparklineCell = ({
   yAxisBounds = [undefined, undefined],
   showYAxis = false,
   entries = [],
+  sparkType = 'line',
 }: SparklineCellProps): ReactElement => {
   const theme = useTheme();
 
@@ -127,6 +134,17 @@ const SparklineCell = ({
   const xAccessor = (d: { x: number; y: number }) => d.x;
   const yAccessor = (d: { x: number; y: number }) => d.y;
 
+  const chartSeriesMap: Record<
+    SparkType,
+    (props: SeriesProps<AxisScale, AxisScale, object>) => JSX.Element
+  > = {
+    line: LineSeries,
+    bar: BarSeries,
+    area: AreaSeries,
+  };
+
+  const SeriesComponent = chartSeriesMap[sparkType] || LineSeries;
+
   if (validData.length === 0) return <div style={{ width, height }} />;
 
   return (
@@ -165,7 +183,7 @@ const SparklineCell = ({
             />
           </>
         )}
-        <LineSeries
+        <SeriesComponent
           data={chartData}
           dataKey={dataKey}
           xAccessor={xAccessor}

superset-frontend/src/visualizations/TimeTable/types.ts

@@ -17,6 +17,8 @@
  * under the License.
  */
 
+export type SparkType = 'line' | 'bar' | 'area';
+
 export interface ColumnConfig {
   key: string;
   label?: string;
@@ -32,6 +34,7 @@ export interface ColumnConfig {
   dateFormat?: string;
   yAxisBounds?: [number | undefined, number | undefined] | null[];
   showYAxis?: boolean;
+  sparkType?: SparkType;
 }
 
 export interface ColumnRow {