feat: add new chart components for opportunity, quotation status, receipt, and sales
This commit is contained in:
puriphatt
Methapon2001
parent
5ec7012119
commit
f168b43b1a
4 changed files with 371 additions and 0 deletions
58
src/pages/15_dash-board/chart/ChartOpportunity.vue
Normal file
58
src/pages/15_dash-board/chart/ChartOpportunity.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import VueApexCharts from 'vue3-apexcharts';
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
series: number[];
|
||||||
|
labels: string[];
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
labels: () => ['series-1', 'series-2', 'series-3', 'series-4'],
|
||||||
|
series: () => [1, 1, 1, 1],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const chartOptions = computed(() => ({
|
||||||
|
labels: props.labels,
|
||||||
|
colors: [
|
||||||
|
'#1F253B',
|
||||||
|
'#1B285C',
|
||||||
|
'#031B7D',
|
||||||
|
'#0023AE',
|
||||||
|
'#0933DA',
|
||||||
|
'#365AE9',
|
||||||
|
'#6380F8',
|
||||||
|
'#7583BB',
|
||||||
|
],
|
||||||
|
chart: {
|
||||||
|
fontFamily: 'Noto Sans Thai',
|
||||||
|
type: 'donut',
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
style: {
|
||||||
|
fontSize: '10px',
|
||||||
|
color: 'red',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
position: 'bottom',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="surface-1 rounded bordered q-pa-md">
|
||||||
|
{{ $t('dashboard.opportunity.title') }}
|
||||||
|
<div class="text-caption app-text-muted">
|
||||||
|
{{ $t('dashboard.opportunity.caption') }}
|
||||||
|
</div>
|
||||||
|
<VueApexCharts
|
||||||
|
type="donut"
|
||||||
|
height="200"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="series"
|
||||||
|
></VueApexCharts>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
107
src/pages/15_dash-board/chart/ChartQuotationStatus.vue
Normal file
107
src/pages/15_dash-board/chart/ChartQuotationStatus.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import VueApexCharts from 'vue3-apexcharts';
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
series: { data: number[] }[];
|
||||||
|
labels: string[];
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
series: () => [
|
||||||
|
{
|
||||||
|
data: [1, 2, 3, 4],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
labels: () => ['1', '2', '3', '4'],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const chartOptions = computed(() => ({
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
fontFamily: 'Noto Sans Thai',
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
barHeight: '100%',
|
||||||
|
distributed: true,
|
||||||
|
horizontal: true,
|
||||||
|
borderRadius: 6,
|
||||||
|
borderRadiusApplication: 'end',
|
||||||
|
dataLabels: {
|
||||||
|
position: 'bottom',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
colors: ['#f59f00', '#035aa1', '#0ca678', '#c92a2a'],
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
textAnchor: 'start',
|
||||||
|
style: {
|
||||||
|
colors: ['#fff'],
|
||||||
|
},
|
||||||
|
formatter: function (
|
||||||
|
val: string,
|
||||||
|
opt: {
|
||||||
|
w: { globals: { labels: { [x: string]: string } } };
|
||||||
|
dataPointIndex: string | number;
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val;
|
||||||
|
},
|
||||||
|
offsetX: 0,
|
||||||
|
dropShadow: {
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
width: 1,
|
||||||
|
colors: ['#fff'],
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: props.labels,
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
theme: 'dark',
|
||||||
|
x: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
title: {
|
||||||
|
formatter: function (
|
||||||
|
val: string,
|
||||||
|
opt: {
|
||||||
|
w: { globals: { labels: { [x: string]: string } } };
|
||||||
|
dataPointIndex: string | number;
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
return opt.w.globals.labels[opt.dataPointIndex] + ':';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="surface-1 rounded bordered q-pa-md">
|
||||||
|
{{ $t('dashboard.quotation.title') }}
|
||||||
|
<div class="text-caption app-text-muted">
|
||||||
|
{{ $t('dashboard.quotation.caption') }}
|
||||||
|
</div>
|
||||||
|
<VueApexCharts
|
||||||
|
type="bar"
|
||||||
|
height="200"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="series"
|
||||||
|
></VueApexCharts>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
131
src/pages/15_dash-board/chart/ChartReceipt.vue
Normal file
131
src/pages/15_dash-board/chart/ChartReceipt.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||||
|
import VueApexCharts from 'vue3-apexcharts';
|
||||||
|
import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
const { locale } = useI18n({ useScope: 'global' });
|
||||||
|
|
||||||
|
withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
series: { name: string; data: number[] }[];
|
||||||
|
summary: number[];
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
series: () => [
|
||||||
|
{ name: 'series-1', data: [0, 0] },
|
||||||
|
{ name: 'series-2', data: [1, 1] },
|
||||||
|
{ name: 'series-3', data: [2, 2] },
|
||||||
|
{ name: 'series-4', data: [3, 3] },
|
||||||
|
],
|
||||||
|
summary: () => [0, 0, 0, 0],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
const chartOptions = computed(() => {
|
||||||
|
const thaiMonths = [
|
||||||
|
'ม.ค.',
|
||||||
|
'ก.พ.',
|
||||||
|
'มี.ค.',
|
||||||
|
'เม.ย.',
|
||||||
|
'พ.ค.',
|
||||||
|
'มิ.ย.',
|
||||||
|
'ก.ค.',
|
||||||
|
'ส.ค.',
|
||||||
|
'ก.ย.',
|
||||||
|
'ต.ค.',
|
||||||
|
'พ.ย.',
|
||||||
|
'ธ.ค.',
|
||||||
|
];
|
||||||
|
|
||||||
|
return {
|
||||||
|
colors: ['#035aa1', '#ae3ec9', '#ffa94d', '#e64980'],
|
||||||
|
chart: {
|
||||||
|
fontFamily: 'Noto Sans Thai',
|
||||||
|
type: 'line',
|
||||||
|
zoom: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'right',
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories:
|
||||||
|
locale.value === 'tha'
|
||||||
|
? thaiMonths
|
||||||
|
: [
|
||||||
|
'Jan',
|
||||||
|
'Feb',
|
||||||
|
'Mar',
|
||||||
|
'Apr',
|
||||||
|
'May',
|
||||||
|
'Jun',
|
||||||
|
'Jul',
|
||||||
|
'Aug',
|
||||||
|
'Sep',
|
||||||
|
'Oct',
|
||||||
|
'Nov',
|
||||||
|
'Dec',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const detail = [
|
||||||
|
{
|
||||||
|
label: 'total',
|
||||||
|
color: 'var(--brand-1)',
|
||||||
|
icon: 'hugeicons:wallet-03',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'paid',
|
||||||
|
color: 'var(--purple-7)',
|
||||||
|
icon: 'material-symbols-light:credit-card-clock-outline-rounded',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'pending',
|
||||||
|
color: 'var(--orange-4)',
|
||||||
|
icon: 'material-symbols-light:credit-card-outline',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'cancel',
|
||||||
|
color: 'var(--pink-7)',
|
||||||
|
icon: 'hugeicons:wallet-remove-02',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="surface-1 rounded bordered q-pa-md">
|
||||||
|
{{ $t('dashboard.receipt.title') }}
|
||||||
|
<div class="text-caption app-text-muted">
|
||||||
|
{{ $t('dashboard.receipt.caption') }}
|
||||||
|
</div>
|
||||||
|
<VueApexCharts
|
||||||
|
type="line"
|
||||||
|
height="150"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="series"
|
||||||
|
></VueApexCharts>
|
||||||
|
|
||||||
|
<div class="row items-center">
|
||||||
|
<span
|
||||||
|
class="col-md col-6 row no-wrap items-center"
|
||||||
|
v-for="(v, i) in detail"
|
||||||
|
:key="v.label"
|
||||||
|
>
|
||||||
|
<q-avatar
|
||||||
|
class="q-mr-sm"
|
||||||
|
size="md"
|
||||||
|
font-size="18px"
|
||||||
|
:style="`background-color: ${v.color}; color: var(--surface-1)`"
|
||||||
|
>
|
||||||
|
<Icon :icon="v.icon" />
|
||||||
|
</q-avatar>
|
||||||
|
<DataDisplay
|
||||||
|
:label="$t(`dashboard.receipt.${v.label}`)"
|
||||||
|
:value="summary[i].toString()"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
75
src/pages/15_dash-board/chart/ChartSales.vue
Normal file
75
src/pages/15_dash-board/chart/ChartSales.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import VueApexCharts from 'vue3-apexcharts';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const series = [
|
||||||
|
{
|
||||||
|
name: 'Net Profit',
|
||||||
|
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Revenue',
|
||||||
|
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Free Cash Flow',
|
||||||
|
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const chartOptions = {
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
fontFamily: 'Noto Sans Thai',
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: false,
|
||||||
|
columnWidth: '55%',
|
||||||
|
borderRadius: 2,
|
||||||
|
borderRadiusApplication: 'end',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 2,
|
||||||
|
colors: ['transparent'],
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: {
|
||||||
|
text: '$ (thousands)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
y: {
|
||||||
|
formatter: function (val: string) {
|
||||||
|
return '$ ' + val + ' thousands';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="surface-1 rounded bordered q-pa-md">
|
||||||
|
{{ $t('dashboard.sales.title') }}
|
||||||
|
<div class="text-caption app-text-muted">
|
||||||
|
{{ $t('dashboard.sales.caption') }}
|
||||||
|
</div>
|
||||||
|
<VueApexCharts
|
||||||
|
type="bar"
|
||||||
|
height="200"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="series"
|
||||||
|
></VueApexCharts>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue