general-template/components/widgets/charts/CurrentValue.vue

<script setup lang="ts">
import { ref } from 'vue';
import { computed } from 'vue';
import { useTheme } from 'vuetify';
/* Chart Color */
const theme = useTheme();
const primary = theme.current.value.colors.primary;
const lightprimary = theme.current.value.colors.lightprimary;
const secondary = theme.current.value.colors.secondary;
/* Chart 1 */
const chartOptions = computed(() => {
    return {
        chart: {
            type: 'bar',
            height: 200,
            fontFamily: `inherit`,
            toolbar: {
                show: false
            },
            stacked: true,
            sparkline: {
                enabled: true
            }
        },
        colors: [primary, primary],
        plotOptions: {
            bar: {
                horizontal: false,
                barHeight: '60%',
                columnWidth: '20%',
                borderRadius: [6],
                borderRadiusApplication: 'end',
                borderRadiusWhenStacked: 'all'
            }
        },
        stroke: {
            show: false
        },
        dataLabels: {
            enabled: false
        },
        legend: {
            show: false
        },
        grid: {
            show: false,
            padding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            }
        },
        yaxis: {
            min: -5,
            max: 5,
            tickAmount: 4
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
            axisTicks: {
                show: false
            }
        },
        tooltip: {
            theme: 'light'
        }
    };
});
const Chart = [
    {
        name: '',
        data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
    },
    {
        name: '',
        data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8]
    }
];

/* Chart 2 */
const chartOptions2 = computed(() => {
    return {
        chart: {
            type: 'bar',
            height: 200,
            fontFamily: `inherit`,
            toolbar: {
                show: false
            },
            stacked: true,
            sparkline: {
                enabled: true
            }
        },
        colors: [secondary, secondary],
        plotOptions: {
            bar: {
                horizontal: false,
                barHeight: '60%',
                columnWidth: '20%',
                borderRadius: [6],
                borderRadiusApplication: 'end',
                borderRadiusWhenStacked: 'all'
            }
        },
        stroke: {
            show: false
        },
        dataLabels: {
            enabled: false
        },
        legend: {
            show: false
        },
        grid: {
            show: false,
            padding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            }
        },
        yaxis: {
            min: -5,
            max: 5,
            tickAmount: 4
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
            axisTicks: {
                show: false
            }
        },
        tooltip: {
            theme: 'light'
        }
    };
});
const Chart2 = [
    {
        name: '',
        data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5]
    },
    {
        name: '',
        data: [-2.8, -1.1, -3.0, -1.5, -1.9, -2.8]
    }
];

/* Chart 3 */
const chartOptions3 = computed(() => {
    return {
        chart: {
            type: 'donut',
            height: 180,
            fontFamily: `inherit`,
            toolbar: {
                show: false
            },
            stacked: true,
            sparkline: {
                enabled: true
            }
        },
        labels: ['Income', 'Current', 'Expance'],
        colors: [primary, 'rgba(var(--v-theme-light))', secondary],
        plotOptions: {
            pie: {
                startAngle: 0,
                endAngle: 360,
                donut: {
                    size: '89%',
                    background: 'transparent',

                    labels: {
                        show: true,
                        name: {
                            show: true,
                            offsetY: 7
                        },
                        value: {
                            show: false
                        },
                        total: {
                            show: true,
                            fontSize: '20px',
                            fontWeight: '600',
                            label: '$98,260'
                        }
                    }
                }
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            show: false
        },
        legend: {
            show: false
        },
        tooltip: {
            theme: 'dark',
            fillSeriesColor: false,
        }
    };
});
const Chart3 = [55,55,55];

</script>
<template>
    <v-card elevation="10" >
        <v-card-item>
            <div class="d-flex align-center justify-space-between">
                <v-card-title class="text-h5">Current Value</v-card-title>
                <div class="">
                    <v-btn color="primary" flat>buy</v-btn>
                    <v-btn color="primary" variant="outlined" flat class="ml-2">sell</v-btn>
                </div>
            </div>
            <v-row class="mt-4 mb-1">
                <!--Income Chart-->
                <v-col cols="12" sm="4">
                    <v-card variant="outlined" >
                        <v-card-item>
                            <apexchart type="bar" height="200" :options="chartOptions" :series="Chart"> </apexchart>
                            <v-card-subtitle class="text-subtitle-1">Income</v-card-subtitle>
                            <div class="d-flex align-center justify-space-between mt-1">
                                <h4 class="text-h4">$25,260</h4>
                                <p class="text-body-1 text-success">+1.25%</p>
                            </div>
                        </v-card-item>
                    </v-card>
                </v-col>
                <!--Expence Chart-->
                <v-col cols="12" sm="4">
                    <v-card variant="outlined" >
                        <v-card-item>
                            <apexchart type="bar" height="200" :options="chartOptions2" :series="Chart2"> </apexchart>
                            <v-card-subtitle class="text-subtitle-1">Expance</v-card-subtitle>
                            <div class="d-flex align-center justify-space-between mt-1">
                                <h4 class="text-h4">$12,260</h4>
                                <p class="text-body-1 text-success">+4.25%</p>
                            </div>
                        </v-card-item>
                    </v-card>
                </v-col>
                <!--Current Year Chart-->
                <v-col cols="12" sm="4">
                    <v-card variant="outlined" >
                        <v-card-item>
                            <apexchart class="mb-5" type="donut" height="180" :options="chartOptions3" :series="Chart3"> </apexchart>
                            <v-card-subtitle class="text-subtitle-1">Current Year</v-card-subtitle>
                            <div class="d-flex align-center justify-space-between mt-1">
                                <h4 class="text-h4">$98,260</h4>
                                <p class="text-subtitle-1 text-success">+2.5%</p>
                            </div>
                        </v-card-item>
                    </v-card>
                </v-col>
            </v-row>
        </v-card-item>
    </v-card>
</template>