Bar charts (#89)

* Bar charts * Update package.json
modrinth · Aug 21, 2023 · a7191e8 · a7191e8
1 parent e1f4d79
commit a7191e8
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 6 deletions.
diff --git a/docs/components/analytics.md b/docs/components/analytics.md
@@ -28,6 +28,33 @@
           ]
         }"
     />
+    <BarChart 
+        :data="{
+          labels: [
+            '2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
+            '2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
+            '2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
+            '2021-01-16', '2021-01-17'
+          ],
+          data: [
+            {
+              title: 'Spirit',
+              color: 16711680,
+              data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
+            },
+            {
+              title: 'Ad Astra',
+              color: 65280,
+              data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
+            },
+            {
+              title: 'Tempad',
+              color: 255,
+              data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
+            },
+          ]
+        }"
+    />
     <PieChart
         :data="{
             title: 'Downloads',

diff --git a/lib/components/base/BarChart.vue b/lib/components/base/BarChart.vue
@@ -0,0 +1,115 @@
+<script setup>
+import { defineProps, ref } from 'vue'
+import { Bar } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+} from 'chart.js'
+import dayjs from 'dayjs'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  formatLabels: {
+    type: Function,
+    default: (label) => dayjs(label).format('MMM D'),
+  },
+})
+
+const decimalToRgba = (decimalColor, alpha = 0.75) => {
+  const red = (decimalColor >> 16) & 255
+  const green = (decimalColor >> 8) & 255
+  const blue = decimalColor & 255
+
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`
+}
+
+const chartData = ref({
+  labels: props.data.labels.map((date) => props.formatLabels(date)),
+  datasets: props.data.data.map((project) => ({
+    label: project.title,
+    borderColor: decimalToRgba(project.color, 1),
+    borderWidth: 2,
+    borderSkipped: 'bottom',
+    backgroundColor: decimalToRgba(project.color, 0.5),
+    data: project.data,
+  })),
+})
+
+const chartOptions = ref({
+  responsive: true,
+  scales: {
+    x: {
+      stacked: true,
+      grid: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
+      },
+      ticks: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
+      },
+    },
+    y: {
+      stacked: true,
+      grid: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
+      },
+      ticks: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
+      },
+    },
+  },
+  interaction: {
+    mode: 'index',
+  },
+  plugins: {
+    legend: {
+      position: 'right',
+      align: 'start',
+      labels: {
+        color: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
+        font: {
+          size: 12,
+          family: 'Inter',
+        },
+      },
+    },
+    tooltip: {
+      position: 'nearest',
+      backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(
+        '--color-raised-bg'
+      ),
+      borderColor: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
+      borderWidth: 1,
+      titleColor: getComputedStyle(document.documentElement).getPropertyValue('--color-contrast'),
+      titleFont: {
+        size: 16,
+        family: 'Inter',
+      },
+      bodyColor: getComputedStyle(document.documentElement).getPropertyValue('--color-base'),
+      bodyFont: {
+        size: 12,
+        family: 'Inter',
+      },
+      boxPadding: 8,
+      intersect: false,
+      padding: 12,
+      displayColors: false,
+    },
+  },
+})
+</script>
+
+<template>
+  <Bar id="my-chart-id" :options="chartOptions" :data="chartData" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/lib/components/base/LineChart.vue b/lib/components/base/LineChart.vue
@@ -42,7 +42,7 @@ const chartData = ref({
   labels: props.data.labels.map((date) => props.formatLabels(date)),
   datasets: props.data.data.map((project) => ({
     label: project.title,
-    backgroundColor: decimalToRgba(project.color, 0.75),
+    backgroundColor: decimalToRgba(project.color, 0.5),
     borderColor: decimalToRgba(project.color),
     data: project.data,
   })),
@@ -69,7 +69,9 @@ const chartOptions = ref({
     },
   },
   interaction: {
-    mode: 'x',
+    mode: 'index',
+    intersect: false,
+    axis: 'xy',
   },
   plugins: {
     legend: {

diff --git a/lib/components/base/PieChart.vue b/lib/components/base/PieChart.vue
@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const decimalToRgba = (decimalColor, alpha = 0.75) => {
+const decimalToRgba = (decimalColor, alpha = 1) => {
   const red = (decimalColor >> 16) & 255
   const green = (decimalColor >> 8) & 255
   const blue = decimalColor & 255
@@ -34,8 +34,8 @@ const chartData = ref({
   datasets: [
     {
       label: props.data.title,
-      backgroundColor: props.data.data.map((project) => decimalToRgba(project.color)),
-      borderColor: getComputedStyle(document.documentElement).getPropertyValue('--color-button-bg'),
+      backgroundColor: props.data.data.map((project) => decimalToRgba(project.color, 0.5)),
+      borderColor: props.data.data.map((project) => decimalToRgba(project.color)),
       data: props.data.data.map((project) => project.data),
       fill: true,
     },

diff --git a/lib/components/index.js b/lib/components/index.js
@@ -26,6 +26,7 @@ export { default as DropdownButton } from './base/DropdownButton.vue'
 export { default as ShareModal } from './base/ShareModal.vue'
 export { default as LineChart } from './base/LineChart.vue'
 export { default as PieChart } from './base/PieChart.vue'
+export { default as BarChart } from './base/BarChart.vue'
 
 export { default as Categories } from './search/Categories.vue'
 export { default as SearchFilter } from './search/SearchFilter.vue'

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.39",
+  "version": "0.4.40",
   "files": [
     "dist",
     "lib"