Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

make line stories

This commit is contained in:
Nate Kelley 2025-04-18 11:02:58 -06:00
parent c1fd00b0db
commit 47f20b463a
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 110 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts
View File

@ -211,7 +211,7 @@ export const useXAxis = ({
ticks: {
...rotation,
major: {
enabled: true //test
enabled: false //test
},
autoSkip: false,
maxTicksLimit: type === 'time' ? 18 : undefined,

115
web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx
View File

@ -51,7 +51,63 @@ export const Default: Story = {
}
};
export const TimeIntervalTest_MonthWithForcedUnit: Story = {
export const AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit_ManyMonths: Story = {
args: {
selectedChartType: ChartType.Line,
xAxisTimeInterval: 'month',
data: Array.from({ length: 99 }, (_, i) => ({
date: dayjs('2024-01-01').add(i, 'month').toISOString(),
sales: addNoise(i * 15 + 55, 10)
})),
className: 'resize overflow-auto min-w-[250px] h-[400px]',
barAndLineAxis: {
x: ['date'],
y: ['sales'],
category: []
},
columnLabelFormats: {
date: {
columnType: 'date',
style: 'date',
dateFormat: 'auto'
} satisfies IColumnLabelFormat,
sales: {
columnType: 'number',
style: 'currency',
currency: 'USD'
} satisfies IColumnLabelFormat
}
}
};
export const AutoDateFormat_TimeIntervalTest_MonthWithAutoUnit_ManyMonths: Story = {
args: {
...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit_ManyMonths.args,
xAxisTimeInterval: undefined
}
};
export const AutoDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit_ManyMonths: Story = {
args: {
...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit_ManyMonths.args,
data: Array.from({ length: 99 })
.map((_, i) => ({
index: i,
date: dayjs('2024-01-01').add(i, 'month').toISOString(),
sales: addNoise(i * 15 + 55, 10)
}))
.filter(({ index }) => index !== 3 && index !== 5)
}
};
export const AutoDateFormat_TimeIntervalTest_UnevenMonthsAutoUnit_ManyMonths: Story = {
args: {
...AutoDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit_ManyMonths.args,
xAxisTimeInterval: undefined
}
};
export const AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit: Story = {
args: {
selectedChartType: ChartType.Line,
xAxisTimeInterval: 'month',
@ -80,14 +136,34 @@ export const TimeIntervalTest_MonthWithForcedUnit: Story = {
}
};
export const TimeIntervalTest_MonthWithAutoUnit: Story = {
export const AutoDateFormat_TimeIntervalTest_MonthWithAutoUnit: Story = {
args: {
...TimeIntervalTest_MonthWithForcedUnit.args,
...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit.args,
xAxisTimeInterval: undefined
}
};
export const TimeIntervalTest_Days_WithForcedUnit: Story = {
export const AutoDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit: Story = {
args: {
...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit.args,
data: Array.from({ length: 12 })
.map((_, i) => ({
index: i,
date: dayjs('2024-01-01').add(i, 'month').toISOString(),
sales: addNoise(i * 15 + 55, 10)
}))
.filter(({ index }) => index !== 3 && index !== 5)
}
};
export const AutoDateFormat_TimeIntervalTest_UnevenMonthsAutoUnit: Story = {
args: {
...AutoDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit.args,
xAxisTimeInterval: undefined
}
};
export const AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit: Story = {
args: {
selectedChartType: ChartType.Line,
xAxisTimeInterval: 'day',
@ -116,13 +192,40 @@ export const TimeIntervalTest_Days_WithForcedUnit: Story = {
}
};
export const TimeIntervalTest_Days_WithAutoUnit: Story = {
export const AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit_UnevenDays: Story = {
args: {
...TimeIntervalTest_Days_WithForcedUnit.args,
...AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit.args,
data: Array.from({ length: 31 })
.filter((_, i) => i !== 1 && i !== 15 && i !== 16)
.map((_, i) => ({
date: dayjs('2024-01-01').add(i, 'day').toISOString(),
sales: addNoise(i * 15 + 55, 10)
}))
}
};
export const AutoDateFormat_TimeIntervalTest_Days_WithAutoUnit_UnevenDays: Story = {
args: {
...AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit_UnevenDays.args,
xAxisTimeInterval: undefined
}
};
export const FixedDateFormat_TimeIntervalTest_MonthWithForcedUnit: Story = {
args: {
...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit.args,
xAxisTimeInterval: 'month',
columnLabelFormats: {
...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit.args!.columnLabelFormats,
date: {
columnType: 'date',
style: 'date',
dateFormat: 'MMM'
} satisfies IColumnLabelFormat
}
}
};
// Simple X and Y axis with numeric values
export const NumericXY: Story = {
args: {