97 lines
2.7 KiB
Vue
97 lines
2.7 KiB
Vue
<script setup>
|
|
import { useLayout } from '@/layout/composables/layout';
|
|
import { onMounted, ref, watch } from 'vue';
|
|
|
|
const { getPrimary, getSurface, isDarkTheme } = useLayout();
|
|
|
|
const chartData = ref(null);
|
|
const chartOptions = ref(null);
|
|
|
|
function setChartData() {
|
|
const documentStyle = getComputedStyle(document.documentElement);
|
|
|
|
return {
|
|
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
|
datasets: [
|
|
{
|
|
type: 'bar',
|
|
label: 'Subscriptions',
|
|
backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
|
|
data: [4000, 10000, 15000, 4000],
|
|
barThickness: 32
|
|
},
|
|
{
|
|
type: 'bar',
|
|
label: 'Advertising',
|
|
backgroundColor: documentStyle.getPropertyValue('--p-primary-300'),
|
|
data: [2100, 8400, 2400, 7500],
|
|
barThickness: 32
|
|
},
|
|
{
|
|
type: 'bar',
|
|
label: 'Affiliate',
|
|
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
|
|
data: [4100, 5200, 3400, 7400],
|
|
borderRadius: {
|
|
topLeft: 8,
|
|
topRight: 8
|
|
},
|
|
borderSkipped: true,
|
|
barThickness: 32
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
function setChartOptions() {
|
|
const documentStyle = getComputedStyle(document.documentElement);
|
|
const borderColor = documentStyle.getPropertyValue('--surface-border');
|
|
const textMutedColor = documentStyle.getPropertyValue('--text-color-secondary');
|
|
|
|
return {
|
|
maintainAspectRatio: false,
|
|
aspectRatio: 0.8,
|
|
scales: {
|
|
x: {
|
|
stacked: true,
|
|
ticks: {
|
|
color: textMutedColor
|
|
},
|
|
grid: {
|
|
color: 'transparent',
|
|
borderColor: 'transparent'
|
|
}
|
|
},
|
|
y: {
|
|
stacked: true,
|
|
ticks: {
|
|
color: textMutedColor
|
|
},
|
|
grid: {
|
|
color: borderColor,
|
|
borderColor: 'transparent',
|
|
drawTicks: false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
watch([getPrimary, getSurface, isDarkTheme], () => {
|
|
chartData.value = setChartData();
|
|
chartOptions.value = setChartOptions();
|
|
});
|
|
|
|
onMounted(() => {
|
|
chartData.value = setChartData();
|
|
chartOptions.value = setChartOptions();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card">
|
|
<div class="font-semibold text-xl mb-4">Revenue Stream</div>
|
|
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
|
|
</div>
|
|
</template>
|