diff checks for line charts

This commit is contained in:
Nate Kelley 2025-04-11 10:49:23 -06:00
parent 96a5e54354
commit c24ca755e9
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
5 changed files with 164 additions and 2 deletions

View File

@ -117,7 +117,7 @@ ChartJS.defaults.font = {
});
[ChartJS.defaults.scales.linear, ChartJS.defaults.scales.logarithmic].forEach((scale) => {
scale.ticks.z = 100;
scale.ticks.z = 0; //this used to be a 100, but I changed it for datalabels sake
scale.ticks.backdropColor = backgroundColor;
scale.ticks.showLabelBackdrop = true;
scale.ticks.autoSkipPadding = 2;

View File

@ -9,6 +9,7 @@ export const formatBarAndLineDataLabel = (
columnLabelFormat: ColumnLabelFormat
) => {
if (!percentageMode) {
console.log('formatBarAndLineDataLabel', value, columnLabelFormat);
return formatLabel(value, columnLabelFormat);
}

View File

@ -611,3 +611,162 @@ export const PercentageStackedLineMultipleWithDataLabels: Story = {
}
}
};
export const HasMixedNullAndNumberValuesSingleLineWithMissingDataZero: Story = {
args: {
selectedChartType: ChartType.Line,
data: Array.from({ length: 12 }, (_, i) => ({
date: new Date(2024, 0, i + 1).toISOString(),
revenue: i === 5 ? null : i * 100
})),
barAndLineAxis: {
x: ['date'],
y: ['revenue'],
category: []
},
className: 'w-[800px] h-[400px]',
columnSettings: {
revenue: {
showDataLabels: true
}
},
columnLabelFormats: {
date: {
columnType: 'date',
style: 'date',
dateFormat: 'auto',
minimumFractionDigits: 0,
maximumFractionDigits: 0
} satisfies IColumnLabelFormat,
revenue: {
columnType: 'number',
style: 'currency',
currency: 'USD',
replaceMissingDataWith: 0
} satisfies IColumnLabelFormat
}
}
};
export const HasMixedNullAndNumberValuesSingleLineWithMissingDataNull: Story = {
args: {
selectedChartType: ChartType.Line,
data: Array.from({ length: 12 }, (_, i) => ({
date: new Date(2024, 0, i + 1).toISOString(),
revenue: i === 5 ? null : i * 100
})),
barAndLineAxis: {
x: ['date'],
y: ['revenue'],
category: []
},
className: 'w-[800px] h-[400px]',
columnSettings: {
revenue: {
showDataLabels: true
}
},
columnLabelFormats: {
date: {
columnType: 'date',
style: 'date',
dateFormat: 'auto',
minimumFractionDigits: 0,
maximumFractionDigits: 0
} satisfies IColumnLabelFormat,
revenue: {
columnType: 'number',
style: 'currency',
currency: 'USD',
replaceMissingDataWith: null
} satisfies IColumnLabelFormat
}
}
};
export const HasMixedNullAndNumberValuesSingleMultiLine: Story = {
args: {
selectedChartType: ChartType.Line,
data: Array.from({ length: 12 }, (_, i) => ({
date: new Date(2024, 0, i + 1).toISOString(),
revenue: i % 5 === 0 ? null : i * 100,
profit: i % 7 === 0 ? null : i * 200
})),
barAndLineAxis: {
x: ['date'],
y: ['revenue', 'profit'],
category: []
},
className: 'w-[800px] h-[400px]',
columnSettings: {
revenue: {
showDataLabels: true
},
profit: {
showDataLabels: true
}
},
columnLabelFormats: {
date: {
columnType: 'date',
style: 'date',
dateFormat: 'auto',
minimumFractionDigits: 0,
maximumFractionDigits: 0
} satisfies IColumnLabelFormat,
revenue: {
columnType: 'number',
style: 'currency',
currency: 'USD'
} satisfies IColumnLabelFormat,
profit: {
columnType: 'number',
style: 'currency',
currency: 'USD'
} satisfies IColumnLabelFormat
}
}
};
export const HasNullValuesWithCategoryMultiLine: Story = {
args: {
selectedChartType: ChartType.Line,
data: Array.from({ length: 3 }).flatMap((_, productIndex) => {
const category = ['Product A', 'Product B', 'Product C'][productIndex];
return Array.from({ length: 12 }, (_, i) => ({
date: new Date(2024, 0, i + 1).toISOString(),
revenue:
i % 5 === 0 || (productIndex === 0 && i % 7 === 0) ? null : i * 100 + productIndex * 1000,
category
}));
}),
barAndLineAxis: {
x: ['date'],
y: ['revenue'],
category: ['category']
},
columnSettings: {
revenue: {
showDataLabels: true
}
},
columnLabelFormats: {
date: {
columnType: 'date',
style: 'date',
dateFormat: 'auto'
},
category: {
columnType: 'text',
style: 'string'
},
revenue: {
columnType: 'number',
style: 'currency',
currency: 'USD',
replaceMissingDataWith: 0
}
}
}
};

View File

@ -63,7 +63,7 @@ export const ReasoningMessagePills: React.FC<{
animate={pills.length > 0 ? 'visible' : 'hidden'}
className={'flex w-full flex-wrap gap-1.5 overflow-hidden'}>
{pills.map((pill) => (
<Link href={makeHref(pill)} key={pill.id}>
<Link href={makeHref(pill)} key={pill.id} prefetch={false}>
<Pill useAnimation={useAnimation} {...pill} />
</Link>
))}

View File

@ -1,3 +1,5 @@
'use client';
import { useGetMetric, useGetMetricData } from '@/api/buster_rest/metrics';
import { useGetDashboard } from '@/api/buster_rest/dashboards';
import { RustApiError } from '@/api/buster_rest/errors';