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

Author: msyavuz

superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx

@@ -47,6 +47,7 @@ const propTypes = {
   bounds: PropTypes.array,
   d3format: PropTypes.string,
   dateFormat: PropTypes.string,
+  sparkType: PropTypes.string,
   onChange: PropTypes.func,
 };
 
@@ -64,6 +65,7 @@ const defaultProps = {
   bounds: [null, null],
   d3format: '',
   dateFormat: '',
+  sparkType: 'line',
 };
 
 const comparisonTypeOptions = [
@@ -80,6 +82,12 @@ const colTypeOptions = [
   { value: 'avg', label: t('Period average'), key: 'avg' },
 ];
 
+const sparkTypeOptions = [
+  { value: 'line', label: t('Line Chart'), key: 'line' },
+  { value: 'bar', label: t('Bar Chart'), key: 'bar' },
+  { value: 'area', label: t('Area Chart'), key: 'area' },
+];
+
 const StyledRow = styled(Row)`
   margin-top: ${({ theme }) => theme.sizeUnit * 2}px;
   display: flex;
@@ -130,6 +138,7 @@ export default class TimeSeriesColumnControl extends Component {
       bounds: this.props.bounds,
       d3format: this.props.d3format,
       dateFormat: this.props.dateFormat,
+      sparkType: this.props.sparkType,
       popoverVisible: false,
     };
   }
@@ -229,6 +238,18 @@ export default class TimeSeriesColumnControl extends Component {
           />,
         )}
         <Divider />
+        {this.state.colType === 'spark' &&
+          this.formRow(
+            t('Chart type'),
+            t('Type of chart to display in sparkline'),
+            'spark-type',
+            <Select
+              ariaLabel={t('Chart Type')}
+              value={this.state.sparkType || undefined}
+              onChange={this.onSelectChange.bind(this, 'sparkType')}
+              options={sparkTypeOptions}
+            />,
+          )}
         {this.state.colType === 'spark' &&
           this.formRow(
             t('Width'),

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,16 +23,21 @@ 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 {
   getSparklineTextWidth,
   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 {