-
+
)
}
-ResizingPivotTable.propTypes = {
- visualization: PropTypes.object.isRequired,
-}
-storiesOf('PivotTable', module).add(
- 'deep - resize',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...deepVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- }
- return
- }
-)
+LegendFixedDarkFill.story = {
+ name: 'legend - fixed (dark fill)',
+}
-storiesOf('PivotTable', module).add(
- 'deep - totals',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...deepVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- rowTotals: true,
- colTotals: true,
- }
- return (
-
- )
+export const LegendFixedText = (_, { pivotTableOptions }) => {
+ const visualization = {
+ ...targetVisualization,
+ ...visualizationReset,
+ ...pivotTableOptions,
+ legendDisplayStyle: 'TEXT',
+ legendSet: {
+ id: underAbove100LegendSet.id,
+ },
}
-)
+ return (
+
+ )
+}
-storiesOf('PivotTable', module).add(
- 'deep - subtotals',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...deepVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- rowSubTotals: true,
- colSubTotals: true,
- }
- return (
-
- )
- }
-)
+LegendFixedText.story = {
+ name: 'legend - fixed (text)',
+}
-storiesOf('PivotTable', module).add(
- 'deep - all totals',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...deepVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- rowSubTotals: true,
- colSubTotals: true,
- rowTotals: true,
- colTotals: true,
- }
- return (
-
- )
+export const LegendFixedRow = (_, { pivotTableOptions }) => {
+ const visualization = {
+ ...targetVisualization,
+ ...visualizationReset,
+ ...pivotTableOptions,
+ rowSubTotals: true,
+ colSubTotals: true,
+ numberType: NUMBER_TYPE_ROW_PERCENTAGE,
+ legendDisplayStyle: 'FILL',
+ legendSet: {
+ id: underAbove100LegendSet.id,
+ },
}
-)
-storiesOf('PivotTable', module).add(
- 'small empty rows - shown',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...diseaseWeeksVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- colTotals: true,
- rowTotals: true,
- colSubTotals: true,
- rowSubTotals: true,
- }
-
- return (
-
- )
- }
-)
+ return (
+
+ )
+}
-storiesOf('PivotTable', module).add(
- 'small empty rows - hidden',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...diseaseWeeksVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- colTotals: true,
- rowTotals: true,
- colSubTotals: true,
- rowSubTotals: true,
- hideEmptyRows: true,
- }
-
- return (
-
- )
- }
-)
+LegendFixedRow.story = {
+ name: 'legend - fixed (% row)',
+}
-storiesOf('PivotTable', module).add(
- 'empty rows - shown',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...emptyRowsVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- rowSubTotals: true,
- colSubTotals: true,
- rowTotals: true,
- colTotals: true,
- }
- return (
-
- )
+export const LegendByDataItem = (_, { pivotTableOptions }) => {
+ const visualization = {
+ ...targetVisualization,
+ ...visualizationReset,
+ ...pivotTableOptions,
+ rowSubTotals: true,
+ colSubTotals: true,
+ legendDisplayStrategy: 'BY_DATA_ITEM',
+ legendSet: undefined,
}
-)
+ const data = cloneDeep(targetData)
-storiesOf('PivotTable', module).add(
- 'empty rows - hidden',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...emptyRowsVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- hideEmptyRows: true,
- }
- return (
-
- )
- }
-)
+ const customLegendSet = cloneDeep(underAbove100LegendSet)
+ customLegendSet.id = 'TESTID'
+ customLegendSet.legends[0].color = '#000000'
+ customLegendSet.legends[1].color = '#666666'
-storiesOf('PivotTable', module).add(
- 'empty columns - shown',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...lastFiveYearsVisualization,
- ...pivotTableOptions,
- hideEmptyColumns: false,
- }
- return (
-
- )
- }
-)
+ data.metaData.items[visualization.columns[0].items[1].id].legendSet =
+ underAbove100LegendSet.id
+ data.metaData.items[visualization.columns[0].items[3].id].legendSet =
+ customLegendSet.id
-storiesOf('PivotTable', module).add(
- 'empty columns - hidden',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...lastFiveYearsVisualization,
- ...pivotTableOptions,
- hideEmptyColumns: true,
- }
- return (
-
- )
- }
-)
+ return (
+
+ )
+}
-storiesOf('PivotTable', module).add(
- 'empty columns (weekly) - shown',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...weeklyColumnsVisualization,
- ...pivotTableOptions,
- hideEmptyColumns: false,
- }
- return (
-
- )
- }
-)
+LegendByDataItem.story = {
+ name: 'legend - by data item',
+}
-storiesOf('PivotTable', module).add(
- 'cumulative + empty columns (weekly) - shown',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...weeklyColumnsVisualization,
- ...pivotTableOptions,
- hideEmptyColumns: false,
- cumulativeValues: true,
- }
- return (
-
- )
+export const HierarchyNone = (_, { pivotTableOptions }) => {
+ const visualization = {
+ ...hierarchyVisualization,
+ ...visualizationReset,
+ ...pivotTableOptions,
+ showHierarchy: false,
+ colTotals: true,
+ rowTotals: true,
+ colSubTotals: true,
+ rowSubTotals: true,
}
-)
-storiesOf('PivotTable', module).add(
- 'empty columns (weekly) - hidden',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...weeklyColumnsVisualization,
- ...pivotTableOptions,
- hideEmptyColumns: true,
- }
- return (
-
- )
- }
-)
+ return (
+
+ )
+}
-storiesOf('PivotTable', module).add(
- 'cumulative + empty columns (weekly) - hidden',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...weeklyColumnsVisualization,
- ...pivotTableOptions,
- hideEmptyColumns: true,
- cumulativeValues: true,
- }
- return (
-
- )
- }
-)
+HierarchyNone.story = {
+ name: 'hierarchy - none',
+}
-storiesOf('PivotTable', module).add(
- 'empty columns + assigned cats (shown)',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...emptyColumnsVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- hideEmptyColumns: false,
- }
- return (
-
- )
+export const HierarchyRows = (_, { pivotTableOptions }) => {
+ const visualization = {
+ ...hierarchyVisualization,
+ ...visualizationReset,
+ ...pivotTableOptions,
+ colTotals: true,
+ rowTotals: true,
+ colSubTotals: true,
+ rowSubTotals: true,
}
-)
-storiesOf('PivotTable', module).add(
- 'empty columns + assigned cats (hidden)',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...emptyColumnsVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- hideEmptyColumns: true,
- }
- return (
-
- )
- }
-)
+ return (
+
+ )
+}
-storiesOf('PivotTable', module).add(
- 'legend - fixed (light fill)',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...targetVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- rowSubTotals: true,
- colSubTotals: true,
- rowTotals: true,
- colTotals: true,
- legendDisplayStyle: 'FILL',
- legendSet: {
- id: underAbove100LegendSet.id,
- },
- }
- return (
-
- )
- }
-)
+HierarchyRows.story = {
+ name: 'hierarchy - rows',
+}
-storiesOf('PivotTable', module).add(
- 'legend - fixed (dark fill)',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...targetVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- rowSubTotals: true,
- colSubTotals: true,
- legendDisplayStyle: 'FILL',
- legendSet: {
- id: underAbove100LegendSet.id,
- },
- }
-
- const legendSet = cloneDeep(underAbove100LegendSet)
- legendSet.legends[0].color = '#000000'
- legendSet.legends[1].color = '#666666'
-
- return (
-
- )
+export const HierarchyColumns = (_, { pivotTableOptions }) => {
+ const visualization = {
+ ...hierarchyVisualization,
+ ...visualizationReset,
+ ...pivotTableOptions,
+ columns: hierarchyVisualization.rows,
+ rows: hierarchyVisualization.columns,
+ colTotals: true,
+ rowTotals: true,
+ colSubTotals: true,
+ rowSubTotals: true,
}
-)
-storiesOf('PivotTable', module).add(
- 'legend - fixed (text)',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...targetVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- legendDisplayStyle: 'TEXT',
- legendSet: {
- id: underAbove100LegendSet.id,
- },
- }
- return (
-
- )
- }
-)
+ return (
+
+ )
+}
-storiesOf('PivotTable', module).add(
- 'legend - fixed (% row)',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...targetVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- rowSubTotals: true,
- colSubTotals: true,
- numberType: NUMBER_TYPE_ROW_PERCENTAGE,
- legendDisplayStyle: 'FILL',
- legendSet: {
- id: underAbove100LegendSet.id,
- },
- }
-
- return (
-
- )
- }
-)
+HierarchyColumns.story = {
+ name: 'hierarchy - columns',
+}
-storiesOf('PivotTable', module).add(
- 'legend - by data item',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...targetVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- rowSubTotals: true,
- colSubTotals: true,
- legendDisplayStrategy: 'BY_DATA_ITEM',
- legendSet: undefined,
- }
- const data = cloneDeep(targetData)
-
- const customLegendSet = cloneDeep(underAbove100LegendSet)
- customLegendSet.id = 'TESTID'
- customLegendSet.legends[0].color = '#000000'
- customLegendSet.legends[1].color = '#666666'
-
- data.metaData.items[visualization.columns[0].items[1].id].legendSet =
- underAbove100LegendSet.id
- data.metaData.items[visualization.columns[0].items[3].id].legendSet =
- customLegendSet.id
-
- return (
-
- )
+export const Narrative = (_, { pivotTableOptions }) => {
+ const visualization = {
+ ...narrativeVisualization,
+ ...visualizationReset,
+ ...pivotTableOptions,
+ rowTotals: true,
+ colTotals: true,
}
-)
-storiesOf('PivotTable', module).add(
- 'hierarchy - none',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...hierarchyVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- showHierarchy: false,
- colTotals: true,
- rowTotals: true,
- colSubTotals: true,
- rowSubTotals: true,
- }
-
- return (
-
- )
- }
-)
-storiesOf('PivotTable', module).add(
- 'hierarchy - rows',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...hierarchyVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- colTotals: true,
- rowTotals: true,
- colSubTotals: true,
- rowSubTotals: true,
- }
-
- return (
-
- )
- }
-)
+ return (
+
+ )
+}
-storiesOf('PivotTable', module).add(
- 'hierarchy - columns',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...hierarchyVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- columns: hierarchyVisualization.rows,
- rows: hierarchyVisualization.columns,
- colTotals: true,
- rowTotals: true,
- colSubTotals: true,
- rowSubTotals: true,
- }
-
- return (
-
- )
- }
-)
+Narrative.story = {
+ name: 'narrative',
+}
-storiesOf('PivotTable', module).add('narrative', (_, { pivotTableOptions }) => {
+export const NarrativeDataAsFilter = (_, { pivotTableOptions }) => {
const visualization = {
...narrativeVisualization,
...visualizationReset,
...pivotTableOptions,
+ columns: narrativeVisualization.filters,
+ filters: narrativeVisualization.columns,
rowTotals: true,
colTotals: true,
}
+ const data = {
+ ...narrativeData,
+ rows: [narrativeData.rows[0]],
+ }
+
return (
)
-})
+}
-storiesOf('PivotTable', module).add(
- 'narrative - data as filter',
- (_, { pivotTableOptions }) => {
- const visualization = {
- ...narrativeVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- columns: narrativeVisualization.filters,
- filters: narrativeVisualization.columns,
- rowTotals: true,
- colTotals: true,
- }
-
- const data = {
- ...narrativeData,
- rows: [narrativeData.rows[0]],
- }
-
- return (
-
- )
- }
-)
+NarrativeDataAsFilter.story = {
+ name: 'narrative - data as filter',
+}
-storiesOf('PivotTable', module).add('DEGS', (_, { pivotTableOptions }) => {
+export const Degs = (_, { pivotTableOptions }) => {
const visualization = {
...degsVisualization,
...visualizationReset,
@@ -1158,45 +1196,50 @@ storiesOf('PivotTable', module).add('DEGS', (_, { pivotTableOptions }) => {
)
-})
+}
-storiesOf('PivotTable', module).add(
- 'Truncated header cell',
- (_, { pivotTableOptions }) => {
- const widths = [250, 200, 500]
- const [width, setWidth] = useState(250)
- const toggleWidth = () =>
- setWidth(
- (currentWidth) =>
- widths[widths.indexOf(currentWidth) + 1] ?? widths[0]
- )
- const visualization = {
- ...narrativeVisualization,
- ...visualizationReset,
- ...pivotTableOptions,
- columns: narrativeVisualization.filters,
- filters: narrativeVisualization.columns,
- rowTotals: true,
- colTotals: true,
- }
-
- const data = {
- ...narrativeData,
- rows: [narrativeData.rows[0]],
- }
-
- return (
-