feat: use accent color on charts

Author: graphieros

app/components/PackageDownloadAnalytics.vue

@@ -16,6 +16,21 @@ const {
   createdIso: string | null
 }>()
 
+const { accentColors, selectedAccentColor } = useAccentColor()
+
+const accentColorValueById = computed<Record<string, string>>(() => {
+  const map: Record<string, string> = {}
+  for (const item of accentColors) {
+    map[item.id] = item.value
+  }
+  return map
+})
+
+const accent = computed(() => {
+  const id = selectedAccentColor.value
+  return id ? (accentColorValueById.value[id] ?? '#8A8A8A') : '#8A8A8A'
+})
+
 type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
 type EvolutionData =
   | DailyDownloadPoint[]
@@ -81,7 +96,7 @@ function formatXyDataset(
           name: packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
-          color: '#8A8A8A',
+          color: accent.value,
         },
       ],
       dates: dataset.map(d => `${d.weekStart}\nto ${d.weekEnd}`),
@@ -94,7 +109,7 @@ function formatXyDataset(
           name: packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
-          color: '#8A8A8A',
+          color: accent.value,
         },
       ],
       dates: dataset.map(d => d.day),
@@ -107,7 +122,7 @@ function formatXyDataset(
           name: packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
-          color: '#8A8A8A',
+          color: accent.value,
         },
       ],
       dates: dataset.map(d => d.month),
@@ -120,7 +135,7 @@ function formatXyDataset(
           name: packageName,
           type: 'line',
           series: dataset.map(d => d.downloads),
-          color: '#8A8A8A',
+          color: accent.value,
         },
       ],
       dates: dataset.map(d => d.year),

app/components/PackageWeeklyDownloadStats.vue

@@ -6,6 +6,23 @@ const { packageName } = defineProps<{
   packageName: string
 }>()
 
+const { accentColors, selectedAccentColor } = useAccentColor()
+
+const accentColorValueById = computed<Record<string, string>>(() => {
+  const map: Record<string, string> = {}
+  for (const item of accentColors) {
+    map[item.id] = item.value
+  }
+  return map
+})
+
+const accent = computed(() => {
+  const id = selectedAccentColor.value
+  return id ? (accentColorValueById.value[id] ?? '#6A6A6A') : '#6A6A6A'
+})
+
+const pulseColor = computed(() => (selectedAccentColor.value ? '#FAFAFA90' : '#8A8A8A'))
+
 const showModal = ref(false)
 
 const { data: packument } = usePackage(() => packageName)
@@ -56,15 +73,15 @@ const config = computed(() => ({
   style: {
     backgroundColor: 'transparent',
     animation: { show: false },
-    area: { color: '#6A6A6A', useGradient: false, opacity: 10 },
+    area: { color: accent.value, useGradient: false, opacity: 10 },
     dataLabel: { offsetX: -10, fontSize: 28, bold: false, color: '#FAFAFA' },
     line: {
-      color: '#6A6A6A',
+      color: accent.value,
       pulse: {
         show: true,
         loop: true,
         radius: 2,
-        color: '#8A8A8A',
+        color: pulseColor.value,
         easing: 'ease-in-out',
         trail: { show: true, length: 6 },
       },