mirror of
https://github.com/apache/superset.git
synced 2026-04-19 08:04:53 +00:00
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
@@ -0,0 +1,208 @@
|
||||
/*
|
||||
* 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 memoizeOne from 'memoize-one';
|
||||
import { DataRecord, SuperChart, VizType } from '@superset-ui/core';
|
||||
import TableChartPlugin, {
|
||||
TableChartProps,
|
||||
} from '@superset-ui/plugin-chart-table';
|
||||
import { basicFormData, basicData, birthNames } from './testData';
|
||||
import { withResizableChartDemo } from '@storybook-shared';
|
||||
|
||||
export default {
|
||||
title: 'Chart Plugins/plugin-chart-table',
|
||||
decorators: [withResizableChartDemo],
|
||||
args: {
|
||||
rows: 2046,
|
||||
cols: 8,
|
||||
pageLength: 50,
|
||||
includeSearch: true,
|
||||
alignPn: false,
|
||||
showCellBars: true,
|
||||
allowRearrangeColumns: false,
|
||||
},
|
||||
argTypes: {
|
||||
rows: {
|
||||
control: 'number',
|
||||
name: 'Records',
|
||||
min: 0,
|
||||
max: 50000,
|
||||
},
|
||||
cols: {
|
||||
control: 'number',
|
||||
name: 'Columns',
|
||||
min: 1,
|
||||
max: 20,
|
||||
},
|
||||
pageLength: {
|
||||
control: 'number',
|
||||
name: 'Page size',
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
includeSearch: {
|
||||
control: 'boolean',
|
||||
name: 'Include search',
|
||||
},
|
||||
alignPn: {
|
||||
control: 'boolean',
|
||||
name: 'Align PosNeg',
|
||||
},
|
||||
showCellBars: {
|
||||
control: 'boolean',
|
||||
name: 'Show Cell Bars',
|
||||
},
|
||||
allowRearrangeColumns: {
|
||||
control: 'boolean',
|
||||
name: 'Allow end user to drag-and-drop column headers to rearrange them.',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
new TableChartPlugin().configure({ key: VizType.Table }).register();
|
||||
|
||||
function expandArray<T>(input: T[], targetSize: number): T[] {
|
||||
if (!input || input.length === 0) {
|
||||
throw new Error('Cannot expand an empty array');
|
||||
}
|
||||
let arr = input;
|
||||
while (arr.length < targetSize) {
|
||||
arr = arr.concat(arr);
|
||||
}
|
||||
return arr.slice(0, targetSize);
|
||||
}
|
||||
|
||||
// memoize expanded array so to make sure we always return the same
|
||||
// data when changing page sizes
|
||||
const expandRecords = memoizeOne(
|
||||
(input: DataRecord[], targetSize: number): DataRecord[] =>
|
||||
expandArray(input, targetSize),
|
||||
);
|
||||
const expandColumns = memoizeOne(
|
||||
(input: string[], targetSize: number): string[] =>
|
||||
expandArray(input, targetSize),
|
||||
);
|
||||
|
||||
/**
|
||||
* Load sample data for testing
|
||||
* @param props the original props passed to SuperChart
|
||||
* @param pageLength number of records per page
|
||||
* @param rows the target number of records
|
||||
* @param cols the target number of columns
|
||||
*/
|
||||
function loadData(
|
||||
props: TableChartProps,
|
||||
{
|
||||
pageLength = 50,
|
||||
rows = 1042,
|
||||
cols = 8,
|
||||
alignPn = false,
|
||||
showCellBars = true,
|
||||
includeSearch = true,
|
||||
allowRearrangeColumns = false,
|
||||
},
|
||||
): TableChartProps {
|
||||
if (!props.queriesData?.[0]) return props;
|
||||
const records = props.queriesData?.[0].data || [];
|
||||
const columns = props.queriesData?.[0].colnames || [];
|
||||
return {
|
||||
...props,
|
||||
queriesData: [
|
||||
{
|
||||
...props.queriesData[0],
|
||||
data: expandRecords(records, rows),
|
||||
colnames: expandColumns(columns, cols),
|
||||
},
|
||||
],
|
||||
formData: {
|
||||
...props.formData,
|
||||
align_pn: alignPn,
|
||||
page_length: pageLength,
|
||||
show_cell_bars: showCellBars,
|
||||
include_search: includeSearch,
|
||||
allow_rearrange_columns: allowRearrangeColumns,
|
||||
},
|
||||
height: window.innerHeight - 130,
|
||||
};
|
||||
}
|
||||
|
||||
export const Basic = ({ width, height }: { width: number; height: number }) => (
|
||||
<SuperChart
|
||||
chartType={VizType.Table}
|
||||
datasource={{
|
||||
columnFormats: {},
|
||||
}}
|
||||
width={width}
|
||||
height={height}
|
||||
queriesData={[basicData]}
|
||||
formData={basicFormData}
|
||||
/>
|
||||
);
|
||||
Basic.parameters = {
|
||||
initialSize: {
|
||||
width: 680,
|
||||
height: 420,
|
||||
},
|
||||
};
|
||||
|
||||
export const BigTable = ({
|
||||
rows,
|
||||
cols,
|
||||
pageLength,
|
||||
includeSearch,
|
||||
alignPn,
|
||||
showCellBars,
|
||||
allowRearrangeColumns,
|
||||
width,
|
||||
height,
|
||||
}: {
|
||||
rows: number;
|
||||
cols: number;
|
||||
pageLength: number;
|
||||
includeSearch: boolean;
|
||||
alignPn: boolean;
|
||||
showCellBars: boolean;
|
||||
allowRearrangeColumns: boolean;
|
||||
width: number;
|
||||
height: number;
|
||||
}) => {
|
||||
const chartProps = loadData(birthNames, {
|
||||
pageLength,
|
||||
rows,
|
||||
cols,
|
||||
alignPn,
|
||||
showCellBars,
|
||||
includeSearch,
|
||||
allowRearrangeColumns,
|
||||
});
|
||||
return (
|
||||
<SuperChart
|
||||
chartType={VizType.Table}
|
||||
{...chartProps}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
);
|
||||
};
|
||||
BigTable.parameters = {
|
||||
initialSize: {
|
||||
width: 620,
|
||||
height: 440,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"width": 400,
|
||||
"height": 400,
|
||||
"formData": {
|
||||
"datasource": "1__table",
|
||||
"viz_type": "table",
|
||||
"row_limit": 10,
|
||||
"metrics": ["sum__num"],
|
||||
"groupby": ["name"],
|
||||
"order_desc": true
|
||||
},
|
||||
"queriesData": [
|
||||
{
|
||||
"data": [
|
||||
{ "name": "Michael", "sum__num": 2467063 },
|
||||
{ "name": "Christopher", "sum__num": 1725265 },
|
||||
{ "name": "David", "sum__num": 1570516 },
|
||||
{ "name": "James", "sum__num": 1506025 },
|
||||
{ "name": "John", "sum__num": 1426074 }
|
||||
],
|
||||
"colnames": ["name", "sum__num"],
|
||||
"coltypes": [1, 0]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
/**
|
||||
* 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 { ChartDataResponseResult, VizType } from '@superset-ui/core';
|
||||
import { GenericDataType } from '@apache-superset/core/api/core';
|
||||
import {
|
||||
TableChartFormData,
|
||||
TableChartProps,
|
||||
} from '@superset-ui/plugin-chart-table';
|
||||
// eslint-disable-next-line import/extensions
|
||||
// @ts-ignore -- TS6307: this file is outside the tsconfig project scope, @ts-expect-error does not suppress project-level errors
|
||||
import birthNamesJson from './birthNames.json';
|
||||
|
||||
export const birthNames = birthNamesJson as unknown as TableChartProps;
|
||||
|
||||
export const basicFormData: TableChartFormData = {
|
||||
datasource: '1__table',
|
||||
viz_type: VizType.Table,
|
||||
align_pn: false,
|
||||
color_pn: false,
|
||||
include_search: true,
|
||||
metrics: ['sum__num', 'MAX(ds)'],
|
||||
order_desc: true,
|
||||
page_length: 0,
|
||||
percent_metrics: null,
|
||||
show_cell_bars: true,
|
||||
table_filter: false,
|
||||
table_timestamp_format: 'smart_date',
|
||||
};
|
||||
|
||||
export const basicData: Partial<ChartDataResponseResult> = {
|
||||
colnames: ['name', 'sum__num', 'MAX(ds)', 'Abc.com'],
|
||||
coltypes: [
|
||||
GenericDataType.String,
|
||||
GenericDataType.Numeric,
|
||||
GenericDataType.Temporal,
|
||||
GenericDataType.String,
|
||||
],
|
||||
data: [
|
||||
{
|
||||
name: 'Michael',
|
||||
sum__num: 2467063,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 110,
|
||||
},
|
||||
{
|
||||
name: 'Christopher',
|
||||
sum__num: 1725265,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 119,
|
||||
},
|
||||
{
|
||||
name: 'David',
|
||||
sum__num: 1570516,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 120,
|
||||
},
|
||||
{
|
||||
name: 'James',
|
||||
sum__num: 1506025,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 120,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
sum__num: 1426074,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 120,
|
||||
},
|
||||
{
|
||||
name: 'Matthew',
|
||||
sum__num: 1355803,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 120,
|
||||
},
|
||||
{
|
||||
name: 'Robert',
|
||||
sum__num: 1314800,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 120,
|
||||
},
|
||||
{
|
||||
name: 'Daniel',
|
||||
sum__num: 1159354,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 120,
|
||||
},
|
||||
{
|
||||
name: 'Joseph',
|
||||
sum__num: 1114098,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 120,
|
||||
},
|
||||
{
|
||||
name: 'William',
|
||||
sum__num: 1113701,
|
||||
'MAX(ds)': '2008-01-01T00:00:00',
|
||||
'Abc.com': 120,
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -16,8 +16,7 @@
|
||||
"src/**/*.js",
|
||||
"src/**/*.jsx",
|
||||
"src/**/*.test.*",
|
||||
"src/**/*.stories.*"
|
||||
],
|
||||
"src/**/*.stories.*"],
|
||||
"references": [
|
||||
{ "path": "../../packages/superset-core" },
|
||||
{ "path": "../../packages/superset-ui-core" },
|
||||
|
||||
Reference in New Issue
Block a user