mess

modrinth · Jul 17, 2024 · 14febb1 · 14febb1
1 parent b768490
commit 14febb1
Show file tree

Hide file tree

Showing 5 changed files with 6,855 additions and 8,012 deletions.
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -37,6 +37,7 @@
     "@modrinth/assets": "workspace:*",
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
+    "@tailwindcss/forms": "^0.5.7",
     "@vintl/vintl": "^4.4.1",
     "dayjs": "^1.11.7",
     "floating-vue": "2.0.0-beta.20",
@@ -50,6 +51,7 @@
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
     "vue-multiselect": "3.0.0-alpha.2",
+    "vue-tailwind-datepicker": "^1.7.3",
     "vue3-apexcharts": "^1.5.2",
     "xss": "^1.0.14"
   }

diff --git a/apps/frontend/src/components/ui/DateRangePicker.vue b/apps/frontend/src/components/ui/DateRangePicker.vue
@@ -0,0 +1,40 @@
+<template>
+  <VueTailwindDatepicker v-model="dateValue" />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import VueTailwindDatepicker from "vue-tailwind-datepicker";
+
+const dateValue = ref([]);
+</script>
+
+<style lang="scss">
+.vtd-datepicker {
+  background-color: var(--color-bg) !important;
+  z-index: 9999 !important;
+  box-shadow: var(--shadow-floatin) !important;
+
+  div>div>div>div>span>button {
+    background-color: var(--color-raised-bg) !important;
+  }
+
+  div>div>div>div>div>span>button:hover {
+    background-color: var(--color-button-bg-hover) !important;
+    --tw-ring-color: var(--color-button-bg-hover) !important;
+  }
+
+  div>div>ol>li>a:hover {
+    background-color: var(--color-raised-bg) !important;
+  }
+}
+
+.vtd-datepicker:before {
+  background-color: var(--color-bg) !important;
+}
+
+div.relative>span.absolute,
+div.relative>button.font-bold {
+  background-color: var(--color-raised-bg) !important;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -1,21 +1,5 @@
 <template>
   <div>
-    <Modal header="Select date range" ref="dateRangeModal">
-      <div class="modal-body">
-        <div>
-          <h2>Rolling Ranges</h2>
-          <div class="button-group left">
-            <Button v-for="range in ranges" :key="range.getLabel([dayjs(), dayjs()])" @click="changeRangeModal(range)"
-              :class="`button-base ${selectedRange === range ? 'button-base__selected' : ''}`">
-              {{ range.getLabel([dayjs(), dayjs()]) }}
-            </Button>
-          </div>
-        </div>
-        <div>
-          <h2>Fixed Ranges</h2>
-        </div>
-      </div>
-    </Modal>
     <div v-if="analytics.error.value" class="universal-card">
       <h2>
         <span class="label__title">Error</span>
@@ -33,9 +17,9 @@
             :labels="analytics.formattedData.value.downloads.chart.labels"
             suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
             :class="`clickable chart-button-base button-base ${selectedChart === 'downloads'
-              ? 'chart-button-base__selected button-base__selected'
-              : ''
-              }`" :onclick="() => (selectedChart = 'downloads')" role="button" />
+      ? 'chart-button-base__selected button-base__selected'
+      : ''
+      }`" :onclick="() => (selectedChart = 'downloads')" role="button" />
         </client-only>
         <client-only>
           <CompactChart v-if="analytics.formattedData.value.views" ref="tinyViewChart" :title="`Views`"
@@ -44,14 +28,14 @@
             :labels="analytics.formattedData.value.views.chart.labels"
             suffix="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"
             :class="`clickable chart-button-base button-base ${selectedChart === 'views' ? 'chart-button-base__selected button-base__selected' : ''
-              }`" :onclick="() => (selectedChart = 'views')" role="button" />
+      }`" :onclick="() => (selectedChart = 'views')" role="button" />
         </client-only>
         <client-only>
           <CompactChart v-if="analytics.formattedData.value.revenue" ref="tinyRevenueChart" :title="`Revenue`"
             color="var(--color-purple)" :value="formatMoney(analytics.formattedData.value.revenue.sum, false)"
             :data="analytics.formattedData.value.revenue.chart.sumData"
             :labels="analytics.formattedData.value.revenue.chart.labels" is-money :class="`clickable chart-button-base button-base ${selectedChart === 'revenue' ? 'chart-button-base__selected button-base__selected' : ''
-              }`" :onclick="() => (selectedChart = 'revenue')" role="button" />
+      }`" :onclick="() => (selectedChart = 'revenue')" role="button" />
         </client-only>
       </div>
       <div class="graphs__main-graph">
@@ -75,9 +59,10 @@
               <Button v-tooltip="'Refresh the chart'" icon-only @click="resetCharts">
                 <UpdatedIcon />
               </Button>
-              <Button v-tooltip="'Select date range'" icon-only @click="openDateRangeModal">
+              <DateRangePicker />
+              <!-- <Button v-tooltip="'Select date range'" icon-only @click="openDateRangeModal">
                 <CalendarIcon />
-              </Button>
+              </Button> -->
               <!-- <DropdownSelect
                 v-model="selectedRange"
                 :options="selectableRanges"
@@ -97,44 +82,44 @@
                   :labels="analytics.formattedData.value.downloads.chart.labels"
                   suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
                   :colors="isUsingProjectColors
-              ? analytics.formattedData.value.downloads.chart.colors
-              : analytics.formattedData.value.downloads.chart.defaultColors
-              " />
+      ? analytics.formattedData.value.downloads.chart.colors
+      : analytics.formattedData.value.downloads.chart.defaultColors
+      " />
                 <Chart v-if="analytics.formattedData.value.views && selectedChart === 'views'" ref="viewsChart"
                   type="line" name="View data" :hide-legend="true"
                   :data="analytics.formattedData.value.views.chart.data"
                   :labels="analytics.formattedData.value.views.chart.labels"
                   suffix="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"
                   :colors="isUsingProjectColors
-              ? analytics.formattedData.value.views.chart.colors
-              : analytics.formattedData.value.views.chart.defaultColors
-              " />
+      ? analytics.formattedData.value.views.chart.colors
+      : analytics.formattedData.value.views.chart.defaultColors
+      " />
                 <Chart v-if="analytics.formattedData.value.revenue && selectedChart === 'revenue'" ref="revenueChart"
                   type="line" name="Revenue data" :hide-legend="true"
                   :data="analytics.formattedData.value.revenue.chart.data"
                   :labels="analytics.formattedData.value.revenue.chart.labels" is-money
                   suffix="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='2' x2='12' y2='22'></line><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'></path></svg>"
                   :colors="isUsingProjectColors
-              ? analytics.formattedData.value.revenue.chart.colors
-              : analytics.formattedData.value.revenue.chart.defaultColors
-              " />
+      ? analytics.formattedData.value.revenue.chart.colors
+      : analytics.formattedData.value.revenue.chart.defaultColors
+      " />
               </client-only>
             </div>
             <div class="legend">
               <div class="legend__items">
                 <template v-for="project in selectedDataSetProjects" :key="project">
                   <button v-tooltip="project.title" :class="`legend__item button-base btn-transparent ${!projectIsOnDisplay(project.id) ? 'btn-dimmed' : ''
-              }`" @click="() =>
-              projectIsOnDisplay(project.id) &&
-                analytics.validProjectIds.value.includes(project.id)
-                ? removeProjectFromDisplay(project.id)
-                : addProjectToDisplay(project.id)
-              ">
+      }`" @click="() =>
+      projectIsOnDisplay(project.id) &&
+        analytics.validProjectIds.value.includes(project.id)
+        ? removeProjectFromDisplay(project.id)
+        : addProjectToDisplay(project.id)
+      ">
                     <div :style="{
-              '--color-brand': isUsingProjectColors
-                ? intToRgba(project.color, project.id, theme.active ?? undefined)
-                : getDefaultColor(project.id),
-            }" class="legend__item__color"></div>
+      '--color-brand': isUsingProjectColors
+        ? intToRgba(project.color, project.id, theme.active ?? undefined)
+        : getDefaultColor(project.id),
+    }" class="legend__item__color"></div>
                     <div class="legend__item__text">{{ project.title }}</div>
                   </button>
                 </template>
@@ -144,9 +129,9 @@
         </div>
         <div class="country-data">
           <Card v-if="analytics.formattedData.value?.downloadsByCountry &&
-              selectedChart === 'downloads' &&
-              analytics.formattedData.value.downloadsByCountry.data.length > 0
-              " class="country-downloads">
+      selectedChart === 'downloads' &&
+      analytics.formattedData.value.downloadsByCountry.data.length > 0
+      " class="country-downloads">
             <label>
               <span class="label__title">Downloads by region</span>
             </label>
@@ -155,9 +140,9 @@
                 class="country-value">
                 <div class="country-flag-container">
                   <img :src="name.toLowerCase() === 'xx' || !name
-              ? 'https://cdn.modrinth.com/placeholder-banner.svg'
-              : countryCodeToFlag(name)
-              " alt="Hidden country" class="country-flag" />
+      ? 'https://cdn.modrinth.com/placeholder-banner.svg'
+      : countryCodeToFlag(name)
+      " alt="Hidden country" class="country-flag" />
                 </div>
                 <div class="country-text">
                   <strong class="country-name"><template v-if="name.toLowerCase() === 'xx' || !name">Hidden</template>
@@ -166,22 +151,22 @@
                   <span class="data-point">{{ formatNumber(count) }}</span>
                 </div>
                 <div v-tooltip="formatPercent(count, analytics.formattedData.value.downloadsByCountry.sum)
-              " class="percentage-bar">
+      " class="percentage-bar">
                   <span :style="{
-              width: formatPercent(
-                count,
-                analytics.formattedData.value.downloadsByCountry.sum,
-              ),
-              backgroundColor: 'var(--color-brand)',
-            }"></span>
+      width: formatPercent(
+        count,
+        analytics.formattedData.value.downloadsByCountry.sum,
+      ),
+      backgroundColor: 'var(--color-brand)',
+    }"></span>
                 </div>
               </div>
             </div>
           </Card>
           <Card v-if="analytics.formattedData.value?.viewsByCountry &&
-              selectedChart === 'views' &&
-              analytics.formattedData.value.viewsByCountry.data.length > 0
-              " class="country-downloads">
+      selectedChart === 'views' &&
+      analytics.formattedData.value.viewsByCountry.data.length > 0
+      " class="country-downloads">
             <label>
               <span class="label__title">Page views by region</span>
             </label>
@@ -190,9 +175,9 @@
                 class="country-value">
                 <div class="country-flag-container">
                   <img :src="name.toLowerCase() === 'xx' || !name
-              ? 'https://cdn.modrinth.com/placeholder-banner.svg'
-              : countryCodeToFlag(name)
-              " alt="Hidden country" class="country-flag" />
+      ? 'https://cdn.modrinth.com/placeholder-banner.svg'
+      : countryCodeToFlag(name)
+      " alt="Hidden country" class="country-flag" />
                 </div>
                 <div class="country-text">
                   <strong class="country-name">
@@ -202,14 +187,14 @@
                   <span class="data-point">{{ formatNumber(count) }}</span>
                 </div>
                 <div v-tooltip="`${Math.round(
-              (count / analytics.formattedData.value.viewsByCountry.sum) * 10000,
-            ) / 100
-              }%`
-              " class="percentage-bar">
+      (count / analytics.formattedData.value.viewsByCountry.sum) * 10000,
+    ) / 100
+      }%`
+      " class="percentage-bar">
                   <span :style="{
-              width: `${(count / analytics.formattedData.value.viewsByCountry.sum) * 100}%`,
-              backgroundColor: 'var(--color-blue)',
-            }"></span>
+      width: `${(count / analytics.formattedData.value.viewsByCountry.sum) * 100}%`,
+      backgroundColor: 'var(--color-blue)',
+    }"></span>
                 </div>
               </div>
             </div>
@@ -229,7 +214,7 @@ import { computed } from "vue";
 
 import { analyticsSetToCSVString, intToRgba } from "~/utils/analytics.js";
 
-import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart } from "#components";
+import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart, UiDateRangePicker as DateRangePicker } from "#components";
 
 import PaletteIcon from "~/assets/icons/palette.svg?component";
 

diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     "./src/plugins/**/*.{js,ts}",
     "./src/app.vue",
     "./src/error.vue",
+    "./node_modules/vue-tailwind-datepicker/**/*.js",
     // monorepo - TODO: migrate this to its own package
     "../../packages/**/*.{js,vue,ts}",
   ],
@@ -97,6 +98,32 @@ module.exports = {
           border: "var(--color-table-border)",
           alternateRow: " var(--color-table-alternate-row)",
         },
+        "vtd-primary": {
+          50: "var(--color-text)",
+          100: "var(--color-raised-bg)",
+          200: "var(--color-text)",
+          300: "var(--color-text)",
+          400: "var(--color-text)",
+          500: "var(--color-raised-bg)",
+          600: "var(--color-text)",
+          700: "var(--color-text)",
+          800: "var(--color-text)",
+          900: "var(--color-text)",
+          950: "var(--color-text)",
+        },
+        "vtd-secondary": {
+          50: "var(--color-raised-bg)",
+          100: "var(--color-text)",
+          200: "var(--color-raised-bg)",
+          300: "var(--color-text)",
+          400: "var(--color-text)",
+          500: "var(--color-raised-bg)",
+          600: "var(--color-text)",
+          700: "var(--color-text)",
+          800: "var(--color-raised-bg)",
+          900: "var(--color-raised-bg)",
+          950: "var(--color-raised-bg)",
+        },
       },
       backgroundImage: {
         mazeBg: "var(--landing-maze-bg)",
@@ -122,5 +149,8 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    // Used by vue-tailwind-datepicker
+    require("@tailwindcss/forms"),
+  ],
 };