diff --git a/src/assets/main.scss b/src/assets/main.scss index 943d6a3..3cadae1 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -75,13 +75,17 @@ body { @apply outline-sky-500; } +canvas { + image-rendering: pixelated; +} + .tippy-box { @apply mx-2; @apply bg-sky-950; } .tippy-content { - @apply p-2 text-sm; + @apply px-2 text-sm; @apply text-slate-50; } diff --git a/src/components/charts/AllTimeCategoriesChart.vue b/src/components/charts/AllTimeCategoriesChart.vue index be1c5ce..4ad9358 100644 --- a/src/components/charts/AllTimeCategoriesChart.vue +++ b/src/components/charts/AllTimeCategoriesChart.vue @@ -69,7 +69,6 @@ const chartOptions = computed(() => { callbacks: { title: ([{label}]) => t(`categories.${label}`), }, - boxPadding: 5, }, datalabels: { ...defaultOptions.plugins?.datalabels, diff --git a/src/components/charts/CategoryStatusChart.vue b/src/components/charts/CategoryStatusChart.vue index 5ba59ee..82f93bb 100644 --- a/src/components/charts/CategoryStatusChart.vue +++ b/src/components/charts/CategoryStatusChart.vue @@ -37,7 +37,7 @@ const getFavorites = (category: Category) => props.favorites[category].map(([veggie, amount], index) => { let translation = t(`veggies.${veggie}`); translation = translation.charAt(0).toUpperCase() + translation.slice(1); - return t('categoryStatus.entry', [medalEmojis[index], translation, amount]).trim(); + return t('categoryStatus.entry', [medalEmojis[index], translation, amount]); }); const chartData = computed(() => { @@ -73,11 +73,7 @@ const chartOptions = computed(() => { ...defaultOptions.plugins?.tooltip, callbacks: { title: ([{label}]) => t(`categories.${label}`), - label: props.totals - ? ({formattedValue, label}) => { - return [formattedValue, ...getFavorites(label as Category)]; - } - : undefined, + footer: props.totals ? ([{label}]) => [...getFavorites(label as Category)] : undefined, }, }, datalabels: { diff --git a/src/components/charts/WeeklyAmountsChart.vue b/src/components/charts/WeeklyAmountsChart.vue index 71b6f53..76917c0 100644 --- a/src/components/charts/WeeklyAmountsChart.vue +++ b/src/components/charts/WeeklyAmountsChart.vue @@ -44,9 +44,6 @@ const chartOptions = computed(() => { const defaultChartOptions = getChartOptions<'line'>(true, false); return { ...defaultChartOptions, - plugins: { - ...defaultChartOptions.plugins, - }, }; }); diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 7aade79..b78c0fa 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -96,6 +96,11 @@ export const getChartOptions = ( bodyFont: { size: 14, }, + footerFont: { + size: 14, + weight: 'normal', + }, + displayColors: false, backgroundColor: COLORS.darkBlue, bodyColor: COLORS.offWhite, titleColor: COLORS.offWhite,