forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add subtle gradient on modal chart area (#1127)
authored by
Alec Lloyd Probert
and committed by
GitHub
049b4098
9f510b1e
+18
-6
+12
app/components/Package/DownloadAnalytics.vue
+12
app/components/Package/DownloadAnalytics.vue
···
174
174
type: 'line',
175
175
series: dataset.map(d => d.downloads),
176
176
color: accent.value,
177
+
useArea: true,
177
178
},
178
179
],
179
180
dates: dataset.map(d => d.timestampEnd),
···
187
188
type: 'line',
188
189
series: dataset.map(d => d.downloads),
189
190
color: accent.value,
191
+
useArea: true,
190
192
},
191
193
],
192
194
dates: dataset.map(d => d.timestamp),
···
200
202
type: 'line',
201
203
series: dataset.map(d => d.downloads),
202
204
color: accent.value,
205
+
useArea: true,
203
206
},
204
207
],
205
208
dates: dataset.map(d => d.timestamp),
···
213
216
type: 'line',
214
217
series: dataset.map(d => d.downloads),
215
218
color: accent.value,
219
+
useArea: true,
216
220
},
217
221
],
218
222
dates: dataset.map(d => d.timestamp),
···
1044
1048
<ClientOnly v-if="chartData.dataset">
1045
1049
<div>
1046
1050
<VueUiXy :dataset="chartData.dataset" :config="chartConfig" class="[direction:ltr]">
1051
+
<!-- Subtle gradient applied for a unique series (chart modal) -->
1052
+
<template #area-gradient="{ series: chartModalSeries, id: gradientId }">
1053
+
<linearGradient :id="gradientId" x1="0" x2="0" y1="0" y2="1">
1054
+
<stop offset="0%" :stop-color="chartModalSeries.color" stop-opacity="0.2" />
1055
+
<stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
1056
+
</linearGradient>
1057
+
</template>
1058
+
1047
1059
<!-- Custom legend for multiple series -->
1048
1060
<template v-if="isMultiPackageMode" #legend="{ legend }">
1049
1061
<div class="flex gap-4 flex-wrap justify-center">
+1
-1
package.json
+1
-1
package.json
+5
-5
pnpm-lock.yaml
+5
-5
pnpm-lock.yaml
···
201
201
specifier: 3.5.27
202
202
version: 3.5.27(typescript@5.9.3)
203
203
vue-data-ui:
204
-
specifier: 3.14.7
205
-
version: 3.14.7(vue@3.5.27(typescript@5.9.3))
204
+
specifier: 3.14.8
205
+
version: 3.14.8(vue@3.5.27(typescript@5.9.3))
206
206
devDependencies:
207
207
'@e18e/eslint-plugin':
208
208
specifier: 0.1.4
···
9357
9357
vue-component-type-helpers@3.2.4:
9358
9358
resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
9359
9359
9360
-
vue-data-ui@3.14.7:
9361
-
resolution: {integrity: sha512-aA7jNLyqBPGDvxRSJYI+xCnYhjdJgP2csvGCNNmsjJiI+N7yc8YmgcYR34BcVH7BTyO+kbt1xQ7zZry0H0SiMA==}
9360
+
vue-data-ui@3.14.8:
9361
+
resolution: {integrity: sha512-nF6klDiXVzL/zs/ENCR+lR/Xan5UvTR+Va6pUCQqgY7v8apID48xmt6KDjBWGSx0hGWd5rB1u2kNXjDexHteKA==}
9362
9362
peerDependencies:
9363
9363
jspdf: '>=3.0.1'
9364
9364
vue: '>=3.3.0'
···
20865
20865
20866
20866
vue-component-type-helpers@3.2.4: {}
20867
20867
20868
-
vue-data-ui@3.14.7(vue@3.5.27(typescript@5.9.3)):
20868
+
vue-data-ui@3.14.8(vue@3.5.27(typescript@5.9.3)):
20869
20869
dependencies:
20870
20870
vue: 3.5.27(typescript@5.9.3)
20871
20871