Switch to area charts for analytics

apps/frontend/src/components/ui/charts/Chart.client.vue

@@ -169,7 +169,7 @@ const chartOptions = computed(() => {
       toolbar: {
         show: false,
       },
-      stacked: props.stacked,
+      stacked: props.type === "line" ? false : props.stacked,
       stackType: props.percentStacked ? "100%" : "normal",
       zoom: {
         autoScaleYaxis: true,

apps/frontend/src/components/ui/charts/ChartDisplay.vue

@@ -76,6 +76,10 @@
               </span>
             </h2>
             <div class="chart-controls__buttons">
+              <Button v-tooltip="'Cycle chart type'" icon-only @click="cycleChartType">
+                <ChartAreaIcon v-if="cosmetics.analyticsChartType === 'area'" />
+                <ChartLineIcon v-else />
+              </Button>
               <Button v-tooltip="'Toggle project colors'" icon-only @click="onToggleColors">
                 <PaletteIcon />
               </Button>
@@ -102,8 +106,9 @@
                 <Chart
                   v-if="analytics.formattedData.value.downloads && selectedChart === 'downloads'"
                   ref="downloadsChart"
-                  type="line"
+                  :type="cosmetics.analyticsChartType"
                   name="Download data"
+                  stacked="true"
                   :hide-legend="true"
                   :data="analytics.formattedData.value.downloads.chart.data"
                   :labels="analytics.formattedData.value.downloads.chart.labels"
@@ -117,8 +122,9 @@
                 <Chart
                   v-if="analytics.formattedData.value.views && selectedChart === 'views'"
                   ref="viewsChart"
-                  type="line"
+                  :type="cosmetics.analyticsChartType"
                   name="View data"
+                  stacked="true"
                   :hide-legend="true"
                   :data="analytics.formattedData.value.views.chart.data"
                   :labels="analytics.formattedData.value.views.chart.labels"
@@ -132,8 +138,9 @@
                 <Chart
                   v-if="analytics.formattedData.value.revenue && selectedChart === 'revenue'"
                   ref="revenueChart"
-                  type="line"
+                  :type="cosmetics.analyticsChartType"
                   name="Revenue data"
+                  stacked="true"
                   :hide-legend="true"
                   :data="analytics.formattedData.value.revenue.chart.data"
                   :labels="analytics.formattedData.value.revenue.chart.labels"
@@ -306,7 +313,7 @@
 <script setup lang="ts">
 import { Button, Card, DropdownSelect } from "@modrinth/ui";
 import { formatMoney, formatNumber, formatCategoryHeader } from "@modrinth/utils";
-import { UpdatedIcon, DownloadIcon } from "@modrinth/assets";
+import { UpdatedIcon, DownloadIcon, ChartLineIcon, ChartAreaIcon } from "@modrinth/assets";
 import dayjs from "dayjs";
 import { computed } from "vue";
 
@@ -316,8 +323,10 @@ import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart } from "#c
 
 import PaletteIcon from "~/assets/icons/palette.svg?component";
 
+const data = useNuxtApp();
 const router = useNativeRouter();
 const theme = useTheme();
+const cosmetics = useCosmetics();
 
 const props = withDefaults(
   defineProps<{
@@ -411,6 +420,13 @@ const isUsingProjectColors = computed({
   },
 });
 
+function cycleChartType() {
+  cosmetics.value.analyticsChartType = data.$cycleValue(cosmetics.value.analyticsChartType, [
+    "area",
+    "line",
+  ]);
+}
+
 const startDate = ref(dayjs().startOf("day"));
 const endDate = ref(dayjs().endOf("day"));
 const timeResolution = ref(30);

apps/frontend/src/plugins/cosmetics.ts

@@ -12,6 +12,8 @@ export type DisplayLocation =
   | "user"
   | "collection";
 
+export type ChartType = "area" | "line";
+
 export interface Cosmetics {
   rightSearchLayout: boolean;
   leftContentLayout: boolean;
@@ -22,6 +24,8 @@ export interface Cosmetics {
   preferredDarkTheme: DarkTheme;
   searchDisplayMode: Record<DisplayLocation, DisplayMode>;
   hideStagingBanner: boolean;
+  analyticsChartType: ChartType;
+  analyticsProjectColors: boolean;
 }
 
 export default defineNuxtPlugin({
@@ -51,6 +55,8 @@ export default defineNuxtPlugin({
           user: "list",
           collection: "list",
         },
+        analyticsChartType: "line",
+        analyticsProjectColors: true,
         hideStagingBanner: false,
       }),
     });

apps/frontend/src/utils/analytics.js

@@ -68,7 +68,7 @@ export const getDefaultColor = (value) => {
   return defaultColors[value % defaultColors.length];
 };
 
-export const intToRgba = (color, projectId = "Unknown", theme = "dark", alpha = "1") => {
+export const intToRgba = (color, projectId = "Unknown", theme = "dark") => {
   const hash = hashProjectId(projectId);
 
   if (!color || color === 0) {
@@ -110,7 +110,7 @@ export const intToRgba = (color, projectId = "Unknown", theme = "dark", alpha =
   g = Math.min(255, Math.max(0, g));
   b = Math.min(255, Math.max(0, b));
 
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  return `rgb(${r}, ${g}, ${b})`;
 };
 
 const emptyAnalytics = {

packages/assets/index.ts

@@ -58,6 +58,8 @@ import _BracesIcon from './icons/braces.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CardIcon from './icons/card.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
+import _ChartAreaIcon from './icons/chart-area.svg?component'
+import _ChartLineIcon from './icons/chart-line.svg?component'
 import _CheckIcon from './icons/check.svg?component'
 import _CheckCheckIcon from './icons/check-check.svg?component'
 import _CheckCircleIcon from './icons/check-circle.svg?component'
@@ -276,6 +278,8 @@ export const BoxImportIcon = _BoxImportIcon
 export const BracesIcon = _BracesIcon
 export const CalendarIcon = _CalendarIcon
 export const ChartIcon = _ChartIcon
+export const ChartAreaIcon = _ChartAreaIcon
+export const ChartLineIcon = _ChartLineIcon
 export const CheckIcon = _CheckIcon
 export const CheckCheckIcon = _CheckCheckIcon
 export const CheckCircleIcon = _CheckCircleIcon