moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
resources/js/views/dashboards/crm/CrmOrderBarChart.vue Normal file
View File

@@ -0,0 +1,186 @@
<script setup>
const series = [{
name: '2020',
data: [
60,
50,
20,
45,
50,
30,
70,
],
}]
const chartOptions = computed(() => {
return {
chart: {
height: 90,
parentHeightOffset: 0,
type: 'bar',
toolbar: { show: false },
},
tooltip: { enabled: false },
plotOptions: {
bar: {
barHeight: '100%',
columnWidth: '30%',
startingShape: 'rounded',
endingShape: 'rounded',
borderRadius: 4,
colors: {
backgroundBarColors: [
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
'rgba(var(--v-track-bg))',
],
backgroundBarRadius: 4,
},
},
},
colors: ['rgba(var(--v-theme-primary),1)'],
grid: {
show: false,
padding: {
top: -30,
left: -16,
bottom: 0,
right: -6,
},
},
dataLabels: { enabled: false },
legend: { show: false },
xaxis: {
categories: [
'M',
'T',
'W',
'T',
'F',
'S',
'S',
],
axisBorder: { show: false },
axisTicks: { show: false },
labels: { show: false },
},
yaxis: { labels: { show: false } },
responsive: [
{
breakpoint: 1441,
options: {
plotOptions: {
bar: {
columnWidth: '30%',
borderRadius: 4,
},
},
},
},
{
breakpoint: 1368,
options: { plotOptions: { bar: { columnWidth: '48%' } } },
},
{
breakpoint: 1264,
options: {
plotOptions: {
bar: {
borderRadius: 6,
columnWidth: '30%',
colors: { backgroundBarRadius: 6 },
},
},
},
},
{
breakpoint: 960,
options: {
plotOptions: {
bar: {
columnWidth: '15%',
borderRadius: 4,
},
},
},
},
{
breakpoint: 883,
options: { plotOptions: { bar: { columnWidth: '20%' } } },
},
{
breakpoint: 768,
options: { plotOptions: { bar: { columnWidth: '25%' } } },
},
{
breakpoint: 600,
options: {
plotOptions: {
bar: {
columnWidth: '15%',
borderRadius: 4,
},
colors: { backgroundBarRadius: 9 },
},
},
},
{
breakpoint: 479,
options: {
plotOptions: {
bar: { borderRadius: 4 },
colors: { backgroundBarRadius: 9 },
},
grid: {
padding: {
right: -15,
left: -15,
},
},
},
},
{
breakpoint: 400,
options: { plotOptions: { bar: { borderRadius: 4 } } },
},
],
}
})
</script>
<template>
<VCard>
<VCardItem class="pb-3">
<VCardTitle>Orders</VCardTitle>
<VCardSubtitle>Last Week</VCardSubtitle>
</VCardItem>
<VCardText>
<VueApexCharts
:options="chartOptions"
:series="series"
:height="62"
/>
<div class="d-flex align-center justify-space-between gap-x-2 mt-3">
<h4 class="text-h4 text-center">
124k
</h4>
<div class="text-sm text-success">
+12.6%
</div>
</div>
</VCardText>
</VCard>
</template>