chore(storybook): consolidate storybook and enhance plugin stories (#37771)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Evan Rusackas
2026-02-11 19:06:23 -05:00
committed by GitHub
parent b012b63e5b
commit 981b370fe9
173 changed files with 5307 additions and 18230 deletions

View File

@@ -0,0 +1,93 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you 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 { SuperChart, VizType } from '@superset-ui/core';
import { BigNumberTotalChartPlugin } from '@superset-ui/plugin-chart-echarts';
import { withResizableChartDemo } from '@storybook-shared';
import data from './data';
new BigNumberTotalChartPlugin()
.configure({ key: 'big-number-total' })
.register();
export default {
title: 'Legacy Chart Plugins/legacy-preset-big-number/BigNumberTotal',
decorators: [withResizableChartDemo],
args: {
subheader: 'total female participants',
yAxisFormat: '.3s',
forceTimestampFormatting: false,
},
argTypes: {
subheader: { control: 'text' },
yAxisFormat: {
control: 'select',
options: ['SMART_NUMBER', '.2f', '.0%', '$,.2f', '.3s', ',d'],
},
forceTimestampFormatting: { control: 'boolean' },
},
};
export const TotalBasic = ({
subheader,
yAxisFormat,
forceTimestampFormatting,
width,
height,
}: {
subheader: string;
yAxisFormat: string;
forceTimestampFormatting: boolean;
width: number;
height: number;
}) => (
<SuperChart
chartType="big-number-total"
width={width}
height={height}
queriesData={[{ data }]}
formData={{
metric: 'sum__num',
subheader,
viz_type: VizType.BigNumberTotal,
y_axis_format: yAxisFormat,
force_timestamp_formatting: forceTimestampFormatting,
}}
/>
);
export const TotalNoData = ({
width,
height,
}: {
width: number;
height: number;
}) => (
<SuperChart
chartType="big-number-total"
width={width}
height={height}
queriesData={[{ data: [] }]}
formData={{
metric: 'sum__num',
subheader: 'total female participants',
viz_type: VizType.BigNumberTotal,
y_axis_format: '.3s',
}}
/>
);

View File

@@ -0,0 +1,24 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you 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.
*/
export default [
{
sum__num: 32546308,
},
];

View File

@@ -0,0 +1,176 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you 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 { SuperChart, VizType } from '@superset-ui/core';
import { BigNumberChartPlugin } from '@superset-ui/plugin-chart-echarts';
import { withResizableChartDemo } from '@storybook-shared';
import testData from './data';
new BigNumberChartPlugin().configure({ key: 'big-number' }).register();
const TIME_COLUMN = '__timestamp';
const formData = {
color_picker: {
r: 0,
g: 122,
b: 135,
a: 1,
},
compare_lag: 1,
compare_suffix: 'over 10Y',
metric: 'sum__SP_POP_TOTL',
show_trend_line: true,
start_y_axis_at_zero: true,
time_grain_sqla: 'P1Y',
viz_type: VizType.BigNumber,
x_axis: TIME_COLUMN,
y_axis_format: '.3s',
};
/**
* Add null values to trendline data
* @param data input data
*/
function withNulls(origData: object[], nullPosition = 3) {
const data = [...origData];
data[nullPosition] = {
...data[nullPosition],
sum__SP_POP_TOTL: null,
};
return data;
}
export default {
title: 'Legacy Chart Plugins/legacy-preset-big-number/BigNumberWithTrendline',
decorators: [withResizableChartDemo],
args: {
showTrendLine: true,
startYAxisAtZero: true,
compareLag: 1,
compareSuffix: 'over 10Y',
yAxisFormat: '.3s',
},
argTypes: {
showTrendLine: { control: 'boolean' },
startYAxisAtZero: { control: 'boolean' },
compareLag: {
control: { type: 'range', min: 0, max: 10, step: 1 },
description: 'Number of periods to compare against',
},
compareSuffix: { control: 'text' },
yAxisFormat: {
control: 'select',
options: ['SMART_NUMBER', '.2f', '.0%', '$,.2f', '.3s', ',d'],
},
},
};
export const BasicWithTrendline = ({
width,
height,
showTrendLine,
startYAxisAtZero,
compareLag,
compareSuffix,
yAxisFormat,
}: {
width: number;
height: number;
showTrendLine: boolean;
startYAxisAtZero: boolean;
compareLag: number;
compareSuffix: string;
yAxisFormat: string;
}) => (
<SuperChart
chartType="big-number"
width={width}
height={height}
queriesData={[{ data: testData }]}
formData={{
...formData,
show_trend_line: showTrendLine,
start_y_axis_at_zero: startYAxisAtZero,
compare_lag: compareLag,
compare_suffix: compareSuffix,
y_axis_format: yAxisFormat,
}}
/>
);
export const weeklyTimeGranularity = () => (
<SuperChart
chartType="big-number"
width={400}
height={400}
queriesData={[{ data: testData }]}
formData={{
...formData,
time_grain_sqla: 'P1W',
}}
/>
);
export const nullInTheMiddle = () => (
<SuperChart
chartType="big-number"
width={400}
height={400}
queriesData={[{ data: withNulls(testData, 3) }]}
formData={formData}
/>
);
export const fixedRange = () => (
<SuperChart
chartType="big-number"
width={400}
height={400}
queriesData={[
{
data: testData.slice(0, 9),
from_dttm: testData[testData.length - 1][TIME_COLUMN],
to_dttm: null,
},
]}
formData={{
...formData,
time_range_fixed: true,
}}
/>
);
export const noFixedRange = () => (
<SuperChart
chartType="big-number"
width={400}
height={400}
queriesData={[
{
data: testData.slice(0, 9),
from_dttm: testData[testData.length - 1][TIME_COLUMN],
to_dttm: testData[0][TIME_COLUMN],
},
]}
formData={{
...formData,
time_range_fixed: false,
}}
/>
);

View File

@@ -0,0 +1,78 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you 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.
*/
/* eslint-disable sort-keys */
export default [
{
__timestamp: 1388534400000.0,
sum__SP_POP_TOTL: 7237260256.0,
},
{
__timestamp: 1356998400000.0,
sum__SP_POP_TOTL: 7151135481.0,
},
{
__timestamp: 1325376000000.0,
sum__SP_POP_TOTL: 7066007165.0,
},
{
__timestamp: 1293840000000.0,
sum__SP_POP_TOTL: 6984252419.0,
},
{
__timestamp: 1262304000000.0,
sum__SP_POP_TOTL: 6901110512.0,
},
{
__timestamp: 1230768000000.0,
sum__SP_POP_TOTL: 6818457192.0,
},
{
__timestamp: 1199145600000.0,
sum__SP_POP_TOTL: 6735914031.0,
},
{
__timestamp: 1167609600000.0,
sum__SP_POP_TOTL: 6653571302.0,
},
{
__timestamp: 1136073600000.0,
sum__SP_POP_TOTL: 6572596462.0,
},
{
__timestamp: 1104537600000.0,
sum__SP_POP_TOTL: 6491857539.0,
},
{
__timestamp: 1072915200000.0,
sum__SP_POP_TOTL: 6411615629.0,
},
{
__timestamp: 1041379200000.0,
sum__SP_POP_TOTL: 6331766837.0,
},
{
__timestamp: 1009843200000.0,
sum__SP_POP_TOTL: 6252469127.0,
},
{
__timestamp: 978307200000.0,
sum__SP_POP_TOTL: 617333941.0,
},
];