Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bar charts (#89)

Browse Source 
* Bar charts

* Update package.json
This commit is contained in:
Adrian O.V 2023-08-21 15:55:50 -04:00 committed by GitHub
parent e1f4d791ae
commit a7191e8efb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 151 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
docs/components/analytics.md
View File

@ -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',

115
lib/components/base/BarChart.vue Normal file
View File

@ -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>

6
lib/components/base/LineChart.vue
View File

@ -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: {

6
lib/components/base/PieChart.vue
View File

@ -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,
},

1
lib/components/index.js
View File

@ -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'

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "omorphia",
"type": "module",
"version": "0.4.39",
"version": "0.4.40",
"files": [
"dist",
"lib"