From afc64511473eca8f75c4f9b4b66695954af34727 Mon Sep 17 00:00:00 2001 From: graphieros Date: Sun, 22 Feb 2026 17:18:19 +0100 Subject: [PATCH 1/3] feat: add animation toggle for sparkline chart --- .../Package/WeeklyDownloadStats.vue | 27 ++++++++++++++++++- app/composables/useSettings.ts | 2 ++ i18n/locales/en.json | 4 ++- i18n/locales/fr-FR.json | 4 ++- i18n/schema.json | 6 +++++ lunaria/files/en-GB.json | 4 ++- lunaria/files/en-US.json | 4 ++- lunaria/files/fr-FR.json | 4 ++- 8 files changed, 49 insertions(+), 6 deletions(-) diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue index abae8b366..e0783d8e1 100644 --- a/app/components/Package/WeeklyDownloadStats.vue +++ b/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>(() => { @@ -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,24 @@ const config = computed(() => { + +

{{ $t('package.trends.no_data') }} diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts index 8502bfda7..254804215 100644 --- a/app/composables/useSettings.ts +++ b/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, }, } diff --git a/i18n/locales/en.json b/i18n/locales/en.json index e51377c3e..bd30ad861 100644 --- a/i18n/locales/en.json +++ b/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", diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json index 2c83961f5..9e2555190 100644 --- a/i18n/locales/fr-FR.json +++ b/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.", diff --git a/i18n/schema.json b/i18n/schema.json index 93a83fef1..5511972b1 100644 --- a/i18n/schema.json +++ b/i18n/schema.json @@ -1107,6 +1107,12 @@ } }, "additionalProperties": false + }, + "play_animation": { + "type": "string" + }, + "pause_animation": { + "type": "string" } }, "additionalProperties": false diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json index 1b792cd47..ddfa1c6a7 100644 --- a/lunaria/files/en-GB.json +++ b/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", diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json index fc97f7df2..42c9f3f20 100644 --- a/lunaria/files/en-US.json +++ b/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", diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json index 0e96f083b..179381c21 100644 --- a/lunaria/files/fr-FR.json +++ b/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.", From af8c3ac013dad4c11c565d9478227cebd7272e81 Mon Sep 17 00:00:00 2001 From: Alec Lloyd Probert <55991794+graphieros@users.noreply.github.com> Date: Sun, 22 Feb 2026 17:41:37 +0100 Subject: [PATCH 2/3] fix: show toggle if has weekly downloads Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- app/components/Package/WeeklyDownloadStats.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue index e0783d8e1..4378acc49 100644 --- a/app/components/Package/WeeklyDownloadStats.vue +++ b/app/components/Package/WeeklyDownloadStats.vue @@ -310,7 +310,7 @@ const config = computed(() => { -