forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: improve large chart readability on mobile (#447)
authored by
Alec Lloyd Probert
and committed by
GitHub
75e50e8f
7ae58e69
+5
-3
+5
-3
app/components/PackageDownloadAnalytics.vue
+5
-3
app/components/PackageDownloadAnalytics.vue
···
463
463
return {
464
464
theme: isDarkMode.value ? 'dark' : 'default',
465
465
chart: {
466
-
height: isMobile.value ? 850 : 600,
466
+
height: isMobile.value ? 950 : 600,
467
467
userOptions: {
468
468
buttons: {
469
469
pdf: false,
···
508
508
grid: {
509
509
stroke: colors.value.border,
510
510
labels: {
511
+
fontSize: isMobile.value ? 24 : 16,
511
512
axis: {
512
513
yLabel: $t('package.downloads.y_axis_label', {
513
514
granularity: $t(`package.downloads.granularity_${selectedGranularity.value}`),
514
515
}),
515
516
xLabel: packageName,
516
517
yLabelOffsetX: 12,
517
-
fontSize: 24,
518
+
fontSize: isMobile.value ? 32 : 24,
518
519
},
519
520
xAxisLabels: {
521
+
show: !isMobile.value,
520
522
values: chartData.value?.dates,
521
523
showOnlyAtModulo: true,
522
524
modulo: 12,
···
554
556
},
555
557
},
556
558
zoom: {
557
-
maxWidth: 500,
559
+
maxWidth: isMobile.value ? 350 : 500,
558
560
customFormat:
559
561
displayedGranularity.value !== 'weekly'
560
562
? undefined