Improve tooltips

ajuvonen · Dec 23, 2024 · 7eb5b81 · 7eb5b81
1 parent 8cec249
commit 7eb5b81
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -96,6 +96,11 @@ export const getChartOptions = <T extends keyof ChartTypeRegistry>(
         bodyFont: {
           size: 14,
         },
+        footerFont: {
+          size: 14,
+          weight: 'normal',
+        },
+        displayColors: false,
         backgroundColor: COLORS.darkBlue,
         bodyColor: COLORS.offWhite,
         titleColor: COLORS.offWhite,