Show amount of completed challenges

e2e/stats.spec.ts

@@ -43,13 +43,14 @@ test('shows all time stats', async ({page}) => {
   await page.getByTestId('home-start-button').click();
   await page.getByTestId('veggie-search-button').click();
   await page.getByText('Apricot').click();
-  await page.getByText('Avocado').click();
+  await page.getByTestId('veggie-search-challenge').locator('.veggie-search__option').click();
   await page.goto('stats');
   await page.getByTestId('stats-tab-2').click();
   await expect(page.getByTestId('all-time-weeks')).toHaveText('In Total 1 Weeks');
   await expect(page.getByTestId('all-time-over-30')).toHaveText('Over 30 Veggies in 0 Weeks');
   await expect(page.getByTestId('all-time-unique')).toHaveText('In Total 2 Unique Veggies');
   await expect(page.getByTestId('all-time-at-most')).toHaveText('At Most 2 Veggies in a Week');
+  await expect(page.getByTestId('all-time-challenges')).toHaveText('Completed 1 Weekly Challenges');
 });
 
 test('shows veggie list', async ({page}) => {

src/components/AllTimeStatus.vue

@@ -3,7 +3,8 @@ import {storeToRefs} from 'pinia';
 import {useActivityStore} from '@/stores/activityStore';
 
 const activitysStore = useActivityStore();
-const {over30Veggies, atMostVeggies, getWeekStarts, uniqueVeggies} = storeToRefs(activitysStore);
+const {over30Veggies, atMostVeggies, getWeekStarts, uniqueVeggies, completedChallenges} =
+  storeToRefs(activitysStore);
 </script>
 <template>
   <div class="status__container">
@@ -51,12 +52,24 @@ const {over30Veggies, atMostVeggies, getWeekStarts, uniqueVeggies} = storeToRefs
       <span class="text-5xl">{{ atMostVeggies }}</span>
       <span>{{ $t('stats.grid4.bottomLabel') }}</span>
     </i18n-t>
+    <i18n-t
+      scope="global"
+      keypath="categoryStatus.centerLabel"
+      tag="div"
+      class="status__item col-span-2"
+      data-test-id="all-time-challenges"
+    >
+      <span>{{ $t('stats.grid5.topLabel') }}</span>
+      <span class="text-5xl">{{ completedChallenges }}</span>
+      <span>{{ $t('stats.grid5.bottomLabel') }}</span>
+    </i18n-t>
   </div>
 </template>
 <style lang="scss" scoped>
 .status__container {
-  @apply grid grid-cols-2 grid-rows-2 gap-4 max-h-[50%];
+  @apply grid grid-cols-2 grid-rows-3;
   @apply text-center;
+  row-gap: 1rem;
 }
 
 .status__item {

src/components/__tests__/__snapshots__/AllTimeStatus.spec.ts.snap

@@ -6,5 +6,6 @@ exports[`AllTimeStatus > renders 1`] = `
   <div data-v-900f68cf="" class="status__item" data-test-id="all-time-over-30"><span data-v-900f68cf="">Over 30 Veggies in</span> <span data-v-900f68cf="" class="text-5xl">0</span> <span data-v-900f68cf="">Weeks</span></div>
   <div data-v-900f68cf="" class="status__item" data-test-id="all-time-unique"><span data-v-900f68cf="">In Total</span> <span data-v-900f68cf="" class="text-5xl">0</span> <span data-v-900f68cf="">Unique Veggies</span></div>
   <div data-v-900f68cf="" class="status__item" data-test-id="all-time-at-most"><span data-v-900f68cf="">At Most</span> <span data-v-900f68cf="" class="text-5xl">0</span> <span data-v-900f68cf="">Veggies in a Week</span></div>
+  <div data-v-900f68cf="" class="status__item col-span-2" data-test-id="all-time-challenges"><span data-v-900f68cf="">Completed</span> <span data-v-900f68cf="" class="text-5xl">0</span> <span data-v-900f68cf="">Weekly challenges</span></div>
 </div>"
 `;

src/components/charts/CategoryStatusChart.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import {computed} from 'vue';
+import {computed, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
+import {useElementSize} from '@vueuse/core';
 import {Chart as ChartJS, ArcElement, Tooltip, type ChartOptions} from 'chart.js';
 import {Doughnut} from 'vue-chartjs';
 import ChartDataLabels, {type Context} from 'chartjs-plugin-datalabels';
@@ -28,6 +29,9 @@ const props = withDefaults(
 
 const {t} = useI18n();
 
+const container = ref<HTMLDivElement | null>(null);
+const {height} = useElementSize(container);
+
 const medalEmojis = ['🥇', '🥈', '🥉'];
 const getFavorites = (category: Category) =>
   props.favorites[category].map(([veggie, amount], index) => {
@@ -62,6 +66,7 @@ const chartOptions = computed(() => {
   const defaultOptions = getChartOptions<'doughnut'>(false, false, true);
   return {
     ...defaultOptions,
+    cutout: height.value < 280 ? '60%' : undefined,
     plugins: {
       ...defaultOptions.plugins,
       tooltip: {
@@ -77,6 +82,8 @@ const chartOptions = computed(() => {
       },
       datalabels: {
         ...defaultOptions.plugins?.datalabels,
+        textShadowColor: COLORS.offWhite,
+        textShadowBlur: 10,
         formatter: (_, context: Context) =>
           CATEGORY_EMOJI[context.chart.data.labels![context.dataIndex] as Category],
       },
@@ -87,7 +94,7 @@ const chartOptions = computed(() => {
 defineExpose({chartData});
 </script>
 <template>
-  <div class="category-status-chart__background">
+  <div ref="container" class="category-status-chart__background">
     <Doughnut
       :data="chartData"
       :options="chartOptions"
@@ -123,8 +130,8 @@ defineExpose({chartData});
 }
 
 .category-status-chart__background {
-  @apply relative max-h-[50%];
-  @apply flex justify-center;
+  @apply relative max-h-[50%] min-h-0;
+  @apply flex-grow flex justify-center;
 }
 
 .category-status-chart__center-label {

src/i18n/en.json

@@ -767,6 +767,10 @@
       "topLabel": "At Most",
       "bottomLabel": "Veggies in a Week"
     },
+    "grid5": {
+      "topLabel": "Completed",
+      "bottomLabel": "Weekly Challenges"
+    },
     "week": "Wk {0}",
     "weeklyAmounts": "Weekly Amounts",
     "weeklyCategories": "Weekly Categories"

src/i18n/fi.json

@@ -775,6 +775,10 @@
       "topLabel": "Enimmillään",
       "bottomLabel": "Kasvista viikossa"
     },
+    "grid5": {
+      "topLabel": "Suoritettu",
+      "bottomLabel": "Viikkohaastetta"
+    },
     "week": "Vko {0}",
     "weeklyAmounts": "Lukumäärät viikoittain",
     "weeklyCategories": "Ryhmät viikoittain"