From 6b7adefebbfe70f82bfa89c083f405dd1b131261 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Thu, 25 Sep 2025 08:27:45 -0600 Subject: [PATCH] Added 2 more problematic cases --- .../stories/BusterChart.LineChart.stories.tsx | 724 +++++++++++------- 1 file changed, 441 insertions(+), 283 deletions(-) diff --git a/apps/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx b/apps/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx index 83366e24f..df5badc85 100644 --- a/apps/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx +++ b/apps/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx @@ -2631,289 +2631,6 @@ export const WithQuarterAndYearXAxis: Story = { }, }; -export const WithQuarterNumber_PermantBroken: Story = { - args: { - colors: [ - '#B399FD', - '#FC8497', - '#FBBC30', - '#279EFF', - '#E83562', - '#41F8FF', - '#F3864F', - '#C82184', - '#31FCB4', - '#E83562', - ], - barLayout: 'vertical', - barSortBy: [], - goalLines: [], - gridLines: true, - pieSortBy: 'value', - showLegend: null, - trendlines: [], - scatterAxis: { - x: [], - y: [], - size: [], - tooltip: null, - category: [], - }, - barGroupType: 'group', - metricHeader: null, - pieChartAxis: { - x: [], - y: [], - tooltip: null, - }, - lineGroupType: null, - pieDonutWidth: 40, - xAxisDataZoom: false, - barAndLineAxis: { - x: ['year', 'quarter'], - y: ['avg_gross_margin'], - tooltip: null, - category: [], - }, - columnSettings: {}, - comboChartAxis: { - x: [], - y: [], - y2: [], - tooltip: null, - category: [], - }, - disableTooltip: false, - metricColumnId: '', - scatterDotSize: [3, 15], - xAxisAxisTitle: null, - yAxisAxisTitle: null, - yAxisScaleType: 'linear', - metricSubHeader: null, - y2AxisAxisTitle: null, - y2AxisScaleType: 'linear', - metricValueLabel: null, - pieLabelPosition: 'none', - tableColumnOrder: null, - barShowTotalAtTop: false, - categoryAxisTitle: null, - pieDisplayLabelAs: 'number', - pieShowInnerLabel: true, - selectedChartType: 'line', - tableColumnWidths: null, - xAxisTimeInterval: null, - columnLabelFormats: { - year: { - isUTC: false, - style: 'number', - prefix: '', - suffix: '', - currency: 'USD', - columnType: 'number', - dateFormat: 'auto', - multiplier: 1, - displayName: '', - compactNumbers: false, - convertNumberTo: null, - useRelativeTime: false, - numberSeparatorStyle: null, - maximumFractionDigits: 2, - minimumFractionDigits: 0, - makeLabelHumanReadable: true, - replaceMissingDataWith: 0, - }, - quarter: { - isUTC: false, - style: 'number', - prefix: '', - suffix: '', - currency: 'USD', - columnType: 'number', - dateFormat: 'auto', - multiplier: 1, - displayName: '', - compactNumbers: false, - convertNumberTo: 'quarter', - useRelativeTime: false, - numberSeparatorStyle: null, - maximumFractionDigits: 2, - minimumFractionDigits: 0, - makeLabelHumanReadable: true, - replaceMissingDataWith: 0, - }, - negative_count: { - isUTC: false, - style: 'number', - prefix: '', - suffix: '', - currency: 'USD', - columnType: 'number', - dateFormat: 'auto', - multiplier: 1, - displayName: 'Negative Products', - compactNumbers: false, - convertNumberTo: null, - useRelativeTime: false, - numberSeparatorStyle: ',', - maximumFractionDigits: 2, - minimumFractionDigits: 0, - makeLabelHumanReadable: true, - replaceMissingDataWith: 0, - }, - avg_gross_margin: { - isUTC: false, - style: 'percent', - prefix: '', - suffix: '', - currency: 'USD', - columnType: 'number', - dateFormat: 'auto', - multiplier: 1, - displayName: 'Average Gross Margin', - compactNumbers: false, - convertNumberTo: null, - useRelativeTime: false, - numberSeparatorStyle: ',', - maximumFractionDigits: 1, - minimumFractionDigits: 1, - makeLabelHumanReadable: true, - replaceMissingDataWith: 0, - }, - }, - pieInnerLabelTitle: null, - showLegendHeadline: false, - xAxisLabelRotation: 'auto', - xAxisShowAxisLabel: true, - xAxisShowAxisTitle: true, - yAxisShowAxisLabel: true, - yAxisShowAxisTitle: true, - y2AxisShowAxisLabel: true, - y2AxisShowAxisTitle: true, - metricValueAggregate: 'sum', - tableColumnFontColor: null, - tableHeaderFontColor: null, - yAxisStartAxisAtZero: null, - y2AxisStartAxisAtZero: true, - pieInnerLabelAggregate: 'sum', - pieMinimumSlicePercentage: 0, - tableHeaderBackgroundColor: null, - columnMetadata: [ - { - name: 'year', - min_value: 2022, - max_value: 2025, - unique_values: 4, - simple_type: 'number', - type: 'numeric', - }, - { - name: 'quarter', - min_value: 1, - max_value: 4, - unique_values: 4, - simple_type: 'number', - type: 'numeric', - }, - { - name: 'avg_gross_margin', - min_value: -15.38538138267754, - max_value: 13.535758480065276, - unique_values: 13, - simple_type: 'number', - type: 'numeric', - }, - { - name: 'negative_count', - min_value: 0, - max_value: 37, - unique_values: 9, - simple_type: 'number', - type: 'int8', - }, - ], - data: [ - { - year: 2022, - quarter: 3, - avg_gross_margin: 5.104114056564919, - negative_count: 13, - }, - { - year: 2022, - quarter: 4, - avg_gross_margin: 1.8996067873773883, - negative_count: 17, - }, - { - year: 2023, - quarter: 1, - avg_gross_margin: 2.3518147641617744, - negative_count: 17, - }, - { - year: 2023, - quarter: 2, - avg_gross_margin: 2.253994159993576, - negative_count: 17, - }, - { - year: 2023, - quarter: 3, - avg_gross_margin: -15.38538138267754, - negative_count: 37, - }, - { - year: 2023, - quarter: 4, - avg_gross_margin: -0.37097575793903026, - negative_count: 17, - }, - { - year: 2024, - quarter: 1, - avg_gross_margin: 1.4841226527352336, - negative_count: 14, - }, - { - year: 2024, - quarter: 2, - avg_gross_margin: 1.6647203835444542, - negative_count: 15, - }, - { - year: 2024, - quarter: 3, - avg_gross_margin: -4.72213972473674, - negative_count: 28, - }, - { - year: 2024, - quarter: 4, - avg_gross_margin: 5.114081768462615, - negative_count: 17, - }, - { - year: 2025, - quarter: 1, - avg_gross_margin: 13.535758480065276, - negative_count: 0, - }, - { - year: 2025, - quarter: 2, - avg_gross_margin: 10.910645447490767, - negative_count: 6, - }, - { - year: 2025, - quarter: 3, - avg_gross_margin: 11.49792588896277, - negative_count: 5, - }, - ], - }, -}; - export const WithProblematicXAxis: Story = { args: { colors: [ @@ -3116,3 +2833,444 @@ export const WithProblematicXAxis: Story = { ], }, }; + +export const WithProblematicXAxisQuarter: Story = { + args: { + colors: [ + '#B399FD', + '#FC8497', + '#FBBC30', + '#279EFF', + '#E83562', + '#41F8FF', + '#F3864F', + '#C82184', + '#31FCB4', + '#E83562', + ], + barLayout: 'vertical', + barSortBy: [], + goalLines: [], + gridLines: true, + pieSortBy: 'value', + showLegend: null, + trendlines: [], + scatterAxis: { + x: [], + y: [], + size: [], + tooltip: null, + category: [], + }, + barGroupType: 'group', + metricHeader: null, + pieChartAxis: { + x: [], + y: [], + tooltip: null, + }, + lineGroupType: null, + pieDonutWidth: 40, + xAxisDataZoom: false, + barAndLineAxis: { + x: ['quarter', 'year'], + y: ['metric_qoq_salesgrowthrate'], + tooltip: null, + category: [], + }, + columnSettings: {}, + comboChartAxis: { + x: [], + y: [], + y2: [], + tooltip: null, + category: [], + }, + disableTooltip: false, + metricColumnId: '', + scatterDotSize: [3, 15], + xAxisAxisTitle: null, + yAxisAxisTitle: null, + yAxisScaleType: 'linear', + metricSubHeader: null, + y2AxisAxisTitle: null, + y2AxisScaleType: 'linear', + metricValueLabel: null, + pieLabelPosition: 'none', + tableColumnOrder: null, + barShowTotalAtTop: false, + categoryAxisTitle: null, + pieDisplayLabelAs: 'number', + pieShowInnerLabel: true, + selectedChartType: 'line', + tableColumnWidths: null, + xAxisTimeInterval: null, + columnLabelFormats: { + year: { + isUTC: false, + style: 'number', + prefix: '', + suffix: '', + currency: 'USD', + columnType: 'number', + dateFormat: 'auto', + multiplier: 1, + displayName: '', + compactNumbers: false, + convertNumberTo: null, + useRelativeTime: false, + numberSeparatorStyle: null, + maximumFractionDigits: 2, + minimumFractionDigits: 0, + makeLabelHumanReadable: true, + replaceMissingDataWith: 0, + }, + quarter: { + isUTC: false, + style: 'date', + prefix: '', + suffix: '', + currency: 'USD', + columnType: 'number', + dateFormat: 'auto', + multiplier: 1, + displayName: '', + compactNumbers: false, + convertNumberTo: 'quarter', + useRelativeTime: false, + numberSeparatorStyle: null, + maximumFractionDigits: 2, + minimumFractionDigits: 0, + makeLabelHumanReadable: true, + replaceMissingDataWith: 0, + }, + metric_qoq_salesgrowthrate: { + isUTC: false, + style: 'percent', + prefix: '', + suffix: '', + currency: 'USD', + columnType: 'number', + dateFormat: 'auto', + multiplier: 1, + displayName: '', + compactNumbers: false, + convertNumberTo: null, + useRelativeTime: false, + numberSeparatorStyle: ',', + maximumFractionDigits: 1, + minimumFractionDigits: 1, + makeLabelHumanReadable: true, + replaceMissingDataWith: 0, + }, + }, + pieInnerLabelTitle: null, + showLegendHeadline: false, + xAxisLabelRotation: 'auto', + xAxisShowAxisLabel: true, + xAxisShowAxisTitle: true, + yAxisShowAxisLabel: true, + yAxisShowAxisTitle: true, + y2AxisShowAxisLabel: true, + y2AxisShowAxisTitle: true, + metricValueAggregate: 'sum', + tableColumnFontColor: null, + tableHeaderFontColor: null, + yAxisStartAxisAtZero: null, + y2AxisStartAxisAtZero: true, + pieInnerLabelAggregate: 'sum', + pieMinimumSlicePercentage: 0, + tableHeaderBackgroundColor: null, + data: [ + { + year: 2023, + quarter: 2, + metric_qoq_salesgrowthrate: 5.372278721135275, + }, + { + year: 2023, + quarter: 3, + metric_qoq_salesgrowthrate: 35.02527368847452, + }, + { + year: 2023, + quarter: 4, + metric_qoq_salesgrowthrate: 2.391177929746946, + }, + { + year: 2024, + quarter: 1, + metric_qoq_salesgrowthrate: -19.277232094329378, + }, + { + year: 2024, + quarter: 2, + metric_qoq_salesgrowthrate: 7.70139644758294, + }, + { + year: 2024, + quarter: 3, + metric_qoq_salesgrowthrate: 38.95753848578902, + }, + { + year: 2024, + quarter: 4, + metric_qoq_salesgrowthrate: 17.800138052087753, + }, + { + year: 2025, + quarter: 1, + metric_qoq_salesgrowthrate: -5.299916315807864, + }, + { + year: 2025, + quarter: 2, + metric_qoq_salesgrowthrate: 6.26104974814219, + }, + { + year: 2025, + quarter: 3, + metric_qoq_salesgrowthrate: -45.868163261472425, + }, + ], + columnMetadata: [ + { + name: 'year', + min_value: 2023, + max_value: 2025, + unique_values: 3, + simple_type: 'number', + type: 'numeric', + }, + { + name: 'quarter', + min_value: 1, + max_value: 4, + unique_values: 4, + simple_type: 'number', + type: 'numeric', + }, + { + name: 'metric_qoq_salesgrowthrate', + min_value: -45.868163261472425, + max_value: 38.95753848578902, + unique_values: 10, + simple_type: 'number', + type: 'numeric', + }, + ], + }, +}; + +export const WithProblematicXAxisQuarter2: Story = { + args: { + colors: [ + '#B399FD', + '#FC8497', + '#FBBC30', + '#279EFF', + '#E83562', + '#41F8FF', + '#F3864F', + '#C82184', + '#31FCB4', + '#E83562', + ], + barLayout: 'vertical', + barSortBy: [], + goalLines: [], + gridLines: true, + pieSortBy: 'value', + showLegend: null, + trendlines: [], + scatterAxis: { + x: [], + y: [], + size: [], + tooltip: null, + category: [], + }, + barGroupType: 'group', + metricHeader: null, + pieChartAxis: { + x: [], + y: [], + tooltip: null, + }, + lineGroupType: null, + pieDonutWidth: 40, + xAxisDataZoom: false, + barAndLineAxis: { + x: ['fiscal_quarter'], + y: ['quarterly_revenue'], + tooltip: null, + category: ['fiscal_year'], + }, + columnSettings: {}, + comboChartAxis: { + x: [], + y: [], + y2: [], + tooltip: null, + category: [], + }, + disableTooltip: false, + metricColumnId: '', + scatterDotSize: [3, 15], + xAxisAxisTitle: null, + yAxisAxisTitle: null, + yAxisScaleType: 'linear', + metricSubHeader: null, + y2AxisAxisTitle: null, + y2AxisScaleType: 'linear', + metricValueLabel: null, + pieLabelPosition: 'none', + tableColumnOrder: null, + barShowTotalAtTop: false, + categoryAxisTitle: null, + pieDisplayLabelAs: 'number', + pieShowInnerLabel: true, + selectedChartType: 'line', + tableColumnWidths: null, + xAxisTimeInterval: null, + columnLabelFormats: { + fiscal_year: { + isUTC: false, + style: 'number', + prefix: '', + suffix: '', + currency: 'USD', + columnType: 'number', + dateFormat: 'auto', + multiplier: 1, + displayName: '', + compactNumbers: false, + convertNumberTo: null, + useRelativeTime: false, + numberSeparatorStyle: null, + maximumFractionDigits: 2, + minimumFractionDigits: 0, + makeLabelHumanReadable: true, + replaceMissingDataWith: 0, + }, + fiscal_quarter: { + isUTC: false, + style: 'date', + prefix: '', + suffix: '', + currency: 'USD', + columnType: 'number', + dateFormat: 'auto', + multiplier: 1, + displayName: '', + compactNumbers: false, + convertNumberTo: 'quarter', + useRelativeTime: false, + numberSeparatorStyle: null, + maximumFractionDigits: 2, + minimumFractionDigits: 0, + makeLabelHumanReadable: true, + replaceMissingDataWith: 0, + }, + quarterly_revenue: { + isUTC: false, + style: 'currency', + prefix: '', + suffix: '', + currency: 'USD', + columnType: 'number', + dateFormat: 'auto', + multiplier: 1, + displayName: '', + compactNumbers: true, + convertNumberTo: null, + useRelativeTime: false, + numberSeparatorStyle: ',', + maximumFractionDigits: 0, + minimumFractionDigits: 0, + makeLabelHumanReadable: true, + replaceMissingDataWith: 0, + }, + }, + pieInnerLabelTitle: null, + showLegendHeadline: false, + xAxisLabelRotation: 'auto', + xAxisShowAxisLabel: true, + xAxisShowAxisTitle: true, + yAxisShowAxisLabel: true, + yAxisShowAxisTitle: true, + y2AxisShowAxisLabel: true, + y2AxisShowAxisTitle: true, + metricValueAggregate: 'sum', + tableColumnFontColor: null, + tableHeaderFontColor: null, + yAxisStartAxisAtZero: null, + y2AxisStartAxisAtZero: true, + pieInnerLabelAggregate: 'sum', + pieMinimumSlicePercentage: 0, + tableHeaderBackgroundColor: null, + data: [ + { + fiscal_quarter: 1, + fiscal_year: 2024, + quarterly_revenue: 8167805.1981, + }, + { + fiscal_quarter: 1, + fiscal_year: 2025, + quarterly_revenue: 13594780.2633, + }, + { + fiscal_quarter: 2, + fiscal_year: 2024, + quarterly_revenue: 8796451.8102, + }, + { + fiscal_quarter: 2, + fiscal_year: 2025, + quarterly_revenue: 14448044.519, + }, + { + fiscal_quarter: 3, + fiscal_year: 2024, + quarterly_revenue: 12262691.4094, + }, + { + fiscal_quarter: 3, + fiscal_year: 2025, + quarterly_revenue: 7799857.48, + }, + { + fiscal_quarter: 4, + fiscal_year: 2024, + quarterly_revenue: 14415296.7546, + }, + ], + columnMetadata: [ + { + name: 'fiscal_quarter', + min_value: 1, + max_value: 4, + unique_values: 4, + simple_type: 'number', + type: 'numeric', + }, + { + name: 'fiscal_year', + min_value: 2024, + max_value: 2025, + unique_values: 2, + simple_type: 'number', + type: 'numeric', + }, + { + name: 'quarterly_revenue', + min_value: 7799857.48, + max_value: 14448044.519, + unique_values: 7, + simple_type: 'number', + type: 'numeric', + }, + ], + }, +};