feat: add animation toggle for sparkline chart (#1578)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: graphieros

app/components/Package/WeeklyDownloadStats.vue

@@ -13,6 +13,7 @@ const props = defineProps<{
 
 const router = useRouter()
 const route = useRoute()
+const { settings } = useSettings()
 
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
@@ -87,6 +88,12 @@ const { colors } = useCssVariables(
   },
 )
 
+function toggleSparklineAnimation() {
+  settings.value.sidebar.animateSparkline = !settings.value.sidebar.animateSparkline
+}
+
+const hasSparklineAnimation = computed(() => settings.value.sidebar.animateSparkline)
+
 const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const accentColorValueById = computed<Record<string, string>>(() => {
@@ -224,7 +231,7 @@ const config = computed(() => {
       line: {
         color: colors.value.borderHover,
         pulse: {
-          show: true, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
+          show: hasSparklineAnimation.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
           loop: true, // runs only once if false
           radius: 1.5,
           color: pulseColor.value,
@@ -302,6 +309,16 @@ const config = computed(() => {
               </div>
             </template>
           </ClientOnly>
+
+          <div v-if="hasWeeklyDownloads" class="hidden motion-safe:flex justify-end">
+            <ButtonBase size="small" @click="toggleSparklineAnimation">
+              {{
+                hasSparklineAnimation
+                  ? $t('package.trends.pause_animation')
+                  : $t('package.trends.play_animation')
+              }}
+            </ButtonBase>
+          </div>
         </template>
         <p v-else class="py-2 text-sm font-mono text-fg-subtle">
           {{ $t('package.trends.no_data') }}

app/composables/useSettings.ts

@@ -36,6 +36,7 @@ export interface AppSettings {
   }
   sidebar: {
     collapsed: string[]
+    animateSparkline: boolean
   }
 }
 
@@ -52,6 +53,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   },
   sidebar: {
     collapsed: [],
+    animateSparkline: true,
   },
 }
 

i18n/locales/en.json

@@ -367,7 +367,9 @@
         "downloads": "Downloads",
         "likes": "Likes",
         "contributors": "Contributors"
-      }
+      },
+      "play_animation": "Play animation",
+      "pause_animation": "Pause animation"
     },
     "downloads": {
       "title": "Weekly Downloads",

i18n/locales/fr-FR.json

@@ -367,7 +367,9 @@
         "downloads": "Téléchargements",
         "likes": "J'aime",
         "contributors": "Contributeurs"
-      }
+      },
+      "play_animation": "Lancer l'animation",
+      "pause_animation": "Mettre l'animation en pause"
     },
     "downloads": {
       "title": "Téléchargements hebdo.",

i18n/schema.json

@@ -1107,6 +1107,12 @@
                 }
               },
               "additionalProperties": false
+            },
+            "play_animation": {
+              "type": "string"
+            },
+            "pause_animation": {
+              "type": "string"
             }
           },
           "additionalProperties": false

lunaria/files/en-GB.json

@@ -366,7 +366,9 @@
         "downloads": "Downloads",
         "likes": "Likes",
         "contributors": "Contributors"
-      }
+      },
+      "play_animation": "Play animation",
+      "pause_animation": "Pause animation"
     },
     "downloads": {
       "title": "Weekly Downloads",

lunaria/files/en-US.json

@@ -366,7 +366,9 @@
         "downloads": "Downloads",
         "likes": "Likes",
         "contributors": "Contributors"
-      }
+      },
+      "play_animation": "Play animation",
+      "pause_animation": "Pause animation"
     },
     "downloads": {
       "title": "Weekly Downloads",

lunaria/files/fr-FR.json

@@ -366,7 +366,9 @@
         "downloads": "Téléchargements",
         "likes": "J'aime",
         "contributors": "Contributeurs"
-      }
+      },
+      "play_animation": "Lancer l'animation",
+      "pause_animation": "Mettre l'animation en pause"
     },
     "downloads": {
       "title": "Téléchargements hebdo.",