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

fix typing for line series builder

This commit is contained in:
Nate Kelley 2025-04-11 09:44:10 -06:00
parent 187d0afffe
commit ba6e57bc4b
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
3 changed files with 192 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts
View File

@ -1,6 +1,7 @@
'use client';
import { isServer } from '@tanstack/react-query';
import { ChartProps } from '../../core';
const backgroundColor = isServer
? '#e6e6e6'
@ -30,4 +31,4 @@ export const defaultLabelOptionConfig = {
size: 10,
weight: 'normal' as const
}
};
} satisfies ChartProps<'line'>['data']['datasets'][number]['datalabels'];

21
web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/lineSeriesBuilder.ts
View File

@ -133,23 +133,28 @@ export const lineBuilder = (
formatter: (value, context) =>
formatBarAndLineDataLabel(value, context, percentageMode, columnLabelFormat),
...getLabelPosition(isStackedArea),
...defaultLabelOptionConfig
}
} as ChartProps<'line'>['data']['datasets'][number];
...defaultLabelOptionConfig,
...(percentageMode === 'data-label' && {
color: 'white'
})
} satisfies ChartProps<'line'>['data']['datasets'][number]['datalabels']
} as ChartProps<'line'>['data']['datasets'][number] & { xAxisKeys: string[] };
};
const getLabelPosition = (isStackedArea: boolean) => {
const getLabelPosition = (
isStackedArea: boolean
): ChartProps<'line'>['data']['datasets'][number]['datalabels'] => {
if (isStackedArea) {
return {
anchor: 'start',
align: 'bottom',
yAdjust: -10
align: 'bottom'
// offset: -10
};
}
return {
anchor: 'end',
align: 'top',
yAdjust: 17
align: 'top'
// offset:0
};
};

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

@ -384,10 +384,10 @@ export const PercentageStackedLineSingle: Story = {
},
className: 'w-[800px] h-[400px]',
columnLabelFormats: {
month: {
date: {
columnType: 'number',
style: 'date',
dateFormat: 'MMM',
dateFormat: 'LLL',
minimumFractionDigits: 0,
maximumFractionDigits: 0
} satisfies IColumnLabelFormat,
@ -420,7 +420,7 @@ export const PercentageStackedLineMultiple: Story = {
date: {
columnType: 'number',
style: 'date',
dateFormat: 'll',
dateFormat: 'lll',
minimumFractionDigits: 0,
maximumFractionDigits: 0
} satisfies IColumnLabelFormat,
@ -437,3 +437,177 @@ export const PercentageStackedLineMultiple: Story = {
}
}
};
export const PercentageStackedLineSingleWithDataLabels: Story = {
args: {
selectedChartType: ChartType.Line,
data: generateLineChartData(),
lineGroupType: 'percentage-stack',
barAndLineAxis: {
x: ['date'],
y: ['revenue'],
category: []
},
className: 'w-[800px] h-[400px]',
columnSettings: {
revenue: {
showDataLabels: true
}
},
columnLabelFormats: {
date: {
columnType: 'number',
style: 'date',
dateFormat: 'auto',
minimumFractionDigits: 0,
maximumFractionDigits: 0
} satisfies IColumnLabelFormat,
revenue: {
columnType: 'number',
style: 'currency',
currency: 'EUR'
} satisfies IColumnLabelFormat,
customers: {
columnType: 'number',
style: 'number',
numberSeparatorStyle: ','
} satisfies IColumnLabelFormat
}
}
};
export const StackedAreaLineMultipleWithDataLabels: Story = {
args: {
selectedChartType: ChartType.Line,
data: generateLineChartData(),
lineGroupType: 'stack',
barAndLineAxis: {
x: ['date'],
y: ['revenue', 'profit', 'customers'],
category: []
},
className: 'w-[800px] h-[400px]',
columnSettings: {
revenue: {
showDataLabels: true
},
profit: {
showDataLabels: true
},
customers: {
showDataLabels: true
}
},
columnLabelFormats: {
date: {
columnType: 'number',
style: 'date',
dateFormat: 'auto',
minimumFractionDigits: 0,
maximumFractionDigits: 0
} satisfies IColumnLabelFormat,
sales: {
columnType: 'number',
style: 'currency',
currency: 'USD'
} satisfies IColumnLabelFormat,
profit: {
columnType: 'number',
style: 'currency',
currency: 'USD'
} satisfies IColumnLabelFormat,
customers: {
columnType: 'number',
style: 'number',
numberSeparatorStyle: ','
} satisfies IColumnLabelFormat
}
}
};
export const StackedAreaLineSingleWithDataLabels: Story = {
args: {
selectedChartType: ChartType.Line,
data: generateLineChartData(),
lineGroupType: 'stack',
barAndLineAxis: {
x: ['date'],
y: ['revenue'],
category: []
},
className: 'w-[800px] h-[400px]',
columnSettings: {
revenue: {
showDataLabels: true
}
},
columnLabelFormats: {
date: {
columnType: 'number',
style: 'date',
dateFormat: 'auto',
minimumFractionDigits: 0,
maximumFractionDigits: 0
} satisfies IColumnLabelFormat,
revenue: {
columnType: 'number',
style: 'currency',
currency: 'EUR'
} satisfies IColumnLabelFormat,
customers: {
columnType: 'number',
style: 'number',
numberSeparatorStyle: ','
} satisfies IColumnLabelFormat
}
}
};
export const PercentageStackedLineMultipleWithDataLabels: Story = {
args: {
selectedChartType: ChartType.Line,
data: generateLineChartData(),
lineGroupType: 'percentage-stack',
barAndLineAxis: {
x: ['date'],
y: ['revenue', 'profit', 'customers'],
category: []
},
className: 'w-[800px] h-[400px]',
columnSettings: {
revenue: {
showDataLabels: true
},
profit: {
showDataLabels: true
},
customers: {
showDataLabels: true
}
},
columnLabelFormats: {
date: {
columnType: 'number',
style: 'date',
dateFormat: 'auto',
minimumFractionDigits: 0,
maximumFractionDigits: 0
} satisfies IColumnLabelFormat,
sales: {
columnType: 'number',
style: 'currency',
currency: 'USD'
} satisfies IColumnLabelFormat,
profit: {
columnType: 'number',
style: 'currency',
currency: 'USD'
} satisfies IColumnLabelFormat,
customers: {
columnType: 'number',
style: 'number',
numberSeparatorStyle: ','
} satisfies IColumnLabelFormat
}
}
};