mirror of https://github.com/buster-so/buster.git
diff checks for line charts
This commit is contained in:
parent
96a5e54354
commit
c24ca755e9
|
@ -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;
|
||||
|
|
|
@ -9,6 +9,7 @@ export const formatBarAndLineDataLabel = (
|
|||
columnLabelFormat: ColumnLabelFormat
|
||||
) => {
|
||||
if (!percentageMode) {
|
||||
console.log('formatBarAndLineDataLabel', value, columnLabelFormat);
|
||||
return formatLabel(value, columnLabelFormat);
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
@ -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';
|
||||
|
|
Loading…
Reference in New Issue