You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ms...@apache.org on 2025/09/18 13:41:13 UTC
(superset) branch master updated: feat(TimeTable): add other sparkline type options (#35180)
This is an automated email from the ASF dual-hosted git repository.
msyavuz pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new b60be9655f feat(TimeTable): add other sparkline type options (#35180)
b60be9655f is described below
commit b60be9655fcd3b79906719a54e87174f05e9f1fd
Author: Mehmet Salih Yavuz <sa...@proton.me>
AuthorDate: Thu Sep 18 16:41:05 2025 +0300
feat(TimeTable): add other sparkline type options (#35180)
---
.../controls/TimeSeriesColumnControl/index.jsx | 21 +++++++++++++++++++++
.../TimeTable/components/Sparkline/Sparkline.tsx | 1 +
.../components/SparklineCell/SparklineCell.tsx | 20 +++++++++++++++++++-
.../src/visualizations/TimeTable/types.ts | 3 +++
4 files changed, 44 insertions(+), 1 deletion(-)
diff --git a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
index 085a3c23de..7a116911fc 100644
--- a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
+++ b/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'),
diff --git a/superset-frontend/src/visualizations/TimeTable/components/Sparkline/Sparkline.tsx b/superset-frontend/src/visualizations/TimeTable/components/Sparkline/Sparkline.tsx
index e4a93871fb..d87f7de99d 100644
--- a/superset-frontend/src/visualizations/TimeTable/components/Sparkline/Sparkline.tsx
+++ b/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'}
/>
);
};
diff --git a/superset-frontend/src/visualizations/TimeTable/components/SparklineCell/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/components/SparklineCell/SparklineCell.tsx
index 0772a606e5..0c8766b3a4 100644
--- a/superset-frontend/src/visualizations/TimeTable/components/SparklineCell/SparklineCell.tsx
+++ b/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}
diff --git a/superset-frontend/src/visualizations/TimeTable/types.ts b/superset-frontend/src/visualizations/TimeTable/types.ts
index 33fa450c9b..c645c7d64d 100644
--- a/superset-frontend/src/visualizations/TimeTable/types.ts
+++ b/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 {