mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-09 00:18:00 +01:00
refactor: improve feature metrics chart line legibility (#902)
This commit is contained in:
parent
03e04e7c31
commit
ffa91a3758
@ -18,6 +18,15 @@ export const createChartData = (
|
||||
borderColor: theme.palette.primary.light,
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
data: createChartPoints(metrics, locationSettings, m => m.yes + m.no),
|
||||
elements: {
|
||||
point: {
|
||||
radius: 6,
|
||||
pointStyle: 'circle',
|
||||
},
|
||||
line: {
|
||||
borderDash: [8, 4],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const yesSeries = {
|
||||
@ -25,6 +34,12 @@ export const createChartData = (
|
||||
borderColor: theme.palette.success.light,
|
||||
backgroundColor: theme.palette.success.light,
|
||||
data: createChartPoints(metrics, locationSettings, m => m.yes),
|
||||
elements: {
|
||||
point: {
|
||||
radius: 6,
|
||||
pointStyle: 'triangle',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const noSeries = {
|
||||
@ -32,6 +47,13 @@ export const createChartData = (
|
||||
borderColor: theme.palette.error.light,
|
||||
backgroundColor: theme.palette.error.light,
|
||||
data: createChartPoints(metrics, locationSettings, m => m.no),
|
||||
elements: {
|
||||
point: {
|
||||
radius: 6,
|
||||
pointStyle: 'triangle',
|
||||
pointRotation: 180,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return { datasets: [yesSeries, noSeries, requestsSeries] };
|
||||
|
@ -77,14 +77,6 @@ export const createChartOptions = (
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
// If we only have one point, always show a dot (since there's no line).
|
||||
// If we have multiple points, only show dots on hover (looks better).
|
||||
radius: metrics.length === 1 ? 6 : 0,
|
||||
hoverRadius: 6,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user