Colours and toptip for chart now working

This commit is contained in:
Connor Yoh 2025-03-25 16:20:16 +00:00
parent 610cc7cc9c
commit 947a1441d8
2 changed files with 11 additions and 11 deletions

View File

@ -29,9 +29,9 @@ function getChartColors() {
textColor: style.getPropertyValue('--md-sys-color-on-surface') , textColor: style.getPropertyValue('--md-sys-color-on-surface') ,
primaryColor: style.getPropertyValue('--md-sys-color-primary'), primaryColor: style.getPropertyValue('--md-sys-color-primary'),
backgroundColor: style.getPropertyValue('--md-sys-color-background'), backgroundColor: style.getPropertyValue('--md-sys-color-background'),
gridColor: style.getPropertyValue('--md-sys-color-surface-variant'), gridColor: style.getPropertyValue('--md-sys-color-on-surface'),
tooltipBgColor: style.getPropertyValue('--md-sys-color-inverse-on-surface'), tooltipBgColor: style.getPropertyValue('--md-sys-color-inverse-on-surface'),
tooltipTextColor: style.getPropertyValue('rgb(238, 241, 250)') tooltipTextColor: style.getPropertyValue('--md-sys-color-inverse-surface')
} }
return colours; return colours;
} }
@ -232,7 +232,7 @@ function updateChart(dataLimit) {
display: true, display: true,
position: 'top', position: 'top',
labels: { labels: {
color: colors.textColor, color: colors.primaryColor,
font: { font: {
weight: 'bold' weight: 'bold'
} }
@ -242,7 +242,7 @@ function updateChart(dataLimit) {
backgroundColor: colors.tooltipBgColor, backgroundColor: colors.tooltipBgColor,
titleColor: colors.tooltipTextColor, titleColor: colors.tooltipTextColor,
bodyColor: colors.tooltipTextColor, bodyColor: colors.tooltipTextColor,
borderColor: colors.gridColor, borderColor: colors.tooltipBgColor,
borderWidth: 1, borderWidth: 1,
padding: 12, padding: 12,
cornerRadius: 8, cornerRadius: 8,
@ -263,8 +263,8 @@ function updateChart(dataLimit) {
// e.g. "Visits: 12 (34% of total)" // e.g. "Visits: 12 (34% of total)"
// If your translation includes placeholders, you'd parse them here: // If your translation includes placeholders, you'd parse them here:
return endpointStatsTranslations.visitsTooltip return endpointStatsTranslations.visitsTooltip
.replace('{value}', value.toLocaleString()) .replace('{0}', value.toLocaleString())
.replace('{percentage}', percentage); .replace('{1}', percentage);
} }
} }
} }
@ -275,7 +275,7 @@ function updateChart(dataLimit) {
color: colors.gridColor color: colors.gridColor
}, },
ticks: { ticks: {
color: colors.textColor, color: colors.gridColor,
font: { font: {
size: 12 size: 12
}, },
@ -285,7 +285,7 @@ function updateChart(dataLimit) {
} }
}, },
grid: { grid: {
color: `${colors.gridColor}33` color: `${colors.gridColor}`
} }
}, },
y: { y: {
@ -294,14 +294,14 @@ function updateChart(dataLimit) {
}, },
min: 0, min: 0,
ticks: { ticks: {
color: colors.textColor, color: colors.gridColor,
font: { font: {
size: 12 size: 12
}, },
precision: 0 precision: 0
}, },
grid: { grid: {
color: `${colors.gridColor}33` color: `${colors.gridColor}`
} }
} }
} }

View File

@ -98,7 +98,7 @@
login: /*[[#{endpointStatistics.login}]]*/ 'Login', login: /*[[#{endpointStatistics.login}]]*/ 'Login',
top: /*[[#{endpointStatistics.top}]]*/ 'Top ', top: /*[[#{endpointStatistics.top}]]*/ 'Top ',
numberOfVisits: /*[[#{endpointStatistics.numberOfVisits}]]*/ 'Number of Visits', numberOfVisits: /*[[#{endpointStatistics.numberOfVisits}]]*/ 'Number of Visits',
visitsTooltip: /*[[#{endpointStatistics.visitsTooltip}]]*/ 'Visits: {value} ({percentage}% of total)', visitsTooltip: /*[[#{endpointStatistics.visitsTooltip}]]*/ 'Visits: {0} ({1}% of total)',
retry: /*[[#{endpointStatistics.retry}]]*/ 'Retry' retry: /*[[#{endpointStatistics.retry}]]*/ 'Retry'
}; };
</script> </script>