Initial commit
This commit is contained in:
andrea.terzani
283
src/views/uikit/ChartDoc.vue
Normal file
283
src/views/uikit/ChartDoc.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<script setup>
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const { layoutConfig } = useLayout();
|
||||
let documentStyle = getComputedStyle(document.documentElement);
|
||||
let textColor = documentStyle.getPropertyValue('--text-color');
|
||||
let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||
|
||||
const lineData = ref(null);
|
||||
const pieData = ref(null);
|
||||
const polarData = ref(null);
|
||||
const barData = ref(null);
|
||||
const radarData = ref(null);
|
||||
|
||||
const lineOptions = ref(null);
|
||||
const pieOptions = ref(null);
|
||||
const polarOptions = ref(null);
|
||||
const barOptions = ref(null);
|
||||
const radarOptions = ref(null);
|
||||
|
||||
const setColorOptions = () => {
|
||||
documentStyle = getComputedStyle(document.documentElement);
|
||||
textColor = documentStyle.getPropertyValue('--text-color');
|
||||
textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||
};
|
||||
|
||||
const setChart = () => {
|
||||
barData.value = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
barOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary,
|
||||
font: {
|
||||
weight: 500
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
pieData.value = {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [540, 325, 702],
|
||||
backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500')],
|
||||
hoverBackgroundColor: [documentStyle.getPropertyValue('--p-indigo-400'), documentStyle.getPropertyValue('--p-purple-400'), documentStyle.getPropertyValue('--p-teal-400')]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
pieOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
lineData.value = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-500'),
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
borderColor: documentStyle.getPropertyValue('--p-primary-200'),
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
lineOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
polarData.value = {
|
||||
datasets: [
|
||||
{
|
||||
data: [11, 16, 7, 3],
|
||||
backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500'), documentStyle.getPropertyValue('--p-orange-500')],
|
||||
label: 'My dataset'
|
||||
}
|
||||
],
|
||||
labels: ['Indigo', 'Purple', 'Teal', 'Orange']
|
||||
};
|
||||
|
||||
polarOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
radarData.value = {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
borderColor: documentStyle.getPropertyValue('--p-indigo-400'),
|
||||
pointBackgroundColor: documentStyle.getPropertyValue('--p-indigo-400'),
|
||||
pointBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
borderColor: documentStyle.getPropertyValue('--p-purple-400'),
|
||||
pointBackgroundColor: documentStyle.getPropertyValue('--p-purple-400'),
|
||||
pointBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
radarOptions.value = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: textColorSecondary
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
layoutConfig.primary,
|
||||
() => {
|
||||
setColorOptions();
|
||||
setChart();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
layoutConfig.darkTheme,
|
||||
() => {
|
||||
setColorOptions();
|
||||
setChart();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fluid class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Linear Chart</h5>
|
||||
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card">
|
||||
<h5>Bar Chart</h5>
|
||||
<Chart type="bar" :data="barData" :options="barOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Pie Chart</h5>
|
||||
<Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Doughnut Chart</h5>
|
||||
<Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Polar Area Chart</h5>
|
||||
<Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<div class="card flex flex-col items-center">
|
||||
<h5 class="text-left w-full">Radar Chart</h5>
|
||||
<Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
</Fluid>
|
||||
</template>
|
||||
Reference in New Issue
Block a user