Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

chore: Use custom highlighter for archive:creation chart

Browse Source
This commit is contained in:
Thomas Heartman 2025-09-01 15:46:23 +02:00
parent 5b7f069705
commit 022852ac4a
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
View File

@ -44,6 +44,40 @@ interface ICreationArchiveChartProps {
isLoading?: boolean;
}
// Vertical line on the hovered chart, filled with gradient. Highlights a section of a chart when you hover over datapoints
const customHighlightPlugin = {
id: 'customLine',
afterDraw: (chart: ChartJS) => {
const defaultCategoryPercentage = 0.8;
const width =
(chart.width / chart.scales.x.ticks.length) *
(chart.options.datasets?.bar?.categoryPercentage ??
defaultCategoryPercentage);
if (chart.tooltip?.opacity && chart.tooltip.x) {
const x = chart.tooltip.caretX;
const yAxis = chart.scales.y;
const ctx = chart.ctx;
ctx.save();
const gradient = ctx.createLinearGradient(
x,
yAxis.top,
x,
yAxis.bottom,
);
gradient.addColorStop(0, 'rgba(129, 122, 254, 0)');
gradient.addColorStop(1, 'rgba(129, 122, 254, 0.12)');
ctx.fillStyle = gradient;
ctx.fillRect(
x - width / 2,
yAxis.top,
width,
yAxis.bottom - yAxis.top,
);
ctx.restore();
}
},
};
export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
creationArchiveTrends,
isLoading,
@ -108,6 +142,8 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
data: weeks,
backgroundColor: theme.palette.charts.A2,
borderColor: theme.palette.charts.A2,
hoverBackgroundColor: theme.palette.charts.A2,
hoverBorderColor: theme.palette.charts.A2,
parsing: { yAxisKey: 'archivedFlags', xAxisKey: 'date' },
order: 1,
},
@ -116,6 +152,8 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
data: weeks,
backgroundColor: theme.palette.charts.A1,
borderColor: theme.palette.charts.A1,
hoverBackgroundColor: theme.palette.charts.A1,
hoverBorderColor: theme.palette.charts.A1,
parsing: {
yAxisKey: 'totalCreatedFlags',
xAxisKey: 'date',
@ -203,6 +241,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
options={options}
height={100}
width={250}
plugins={[customHighlightPlugin]}
/>
<CreationArchiveRatioTooltip tooltip={tooltip} />
</>