first commit
This commit is contained in:
Inshal
246
resources/js/pages/charts/apex-chart.vue
Normal file
246
resources/js/pages/charts/apex-chart.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<script setup>
|
||||
import ApexChartAreaChart from '@/views/charts/apex-chart/ApexChartAreaChart.vue'
|
||||
import ApexChartBalance from '@/views/charts/apex-chart/ApexChartBalance.vue'
|
||||
import ApexChartDailySalesStates from '@/views/charts/apex-chart/ApexChartDailySalesStates.vue'
|
||||
import ApexChartDataScience from '@/views/charts/apex-chart/ApexChartDataScience.vue'
|
||||
import ApexChartExpenseRatio from '@/views/charts/apex-chart/ApexChartExpenseRatio.vue'
|
||||
import ApexChartHorizontalBar from '@/views/charts/apex-chart/ApexChartHorizontalBar.vue'
|
||||
import ApexChartMobileComparison from '@/views/charts/apex-chart/ApexChartMobileComparison.vue'
|
||||
import ApexChartNewTechnologiesData from '@/views/charts/apex-chart/ApexChartNewTechnologiesData.vue'
|
||||
import ApexChartStatistics from '@/views/charts/apex-chart/ApexChartStatistics.vue'
|
||||
import ApexChartStocksPrices from '@/views/charts/apex-chart/ApexChartStocksPrices.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow id="apex-chart-wrapper">
|
||||
<!-- 👉 Area chart -->
|
||||
<VCol cols="12">
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>Area Chart</VCardTitle>
|
||||
<VCardSubtitle>Commercial networks</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="date-picker-wrapper">
|
||||
<AppDateTimePicker
|
||||
:model-value="new Date().toISOString()"
|
||||
prepend-inner-icon="ri-calendar-line"
|
||||
placeholder="Select Date"
|
||||
:config="{ position: 'auto right' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ApexChartAreaChart />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Data Science -->
|
||||
<VCol cols="12">
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>Data Science</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="date-picker-wrapper">
|
||||
<AppDateTimePicker
|
||||
:model-value="new Date().toISOString()"
|
||||
prepend-inner-icon="ri-calendar-line"
|
||||
placeholder="Select Date"
|
||||
:config="{ position: 'auto right' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ApexChartDataScience />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 New Technologies Data -->
|
||||
<VCol cols="12">
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>New Technologies Data</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<VBtnGroup
|
||||
density="compact"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
divided
|
||||
>
|
||||
<VBtn>Daily</VBtn>
|
||||
<VBtn>Monthly</VBtn>
|
||||
<VBtn>Yearly</VBtn>
|
||||
</VBtnGroup>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ApexChartNewTechnologiesData />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Balance Line Chart -->
|
||||
<VCol cols="12">
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>Balance</VCardTitle>
|
||||
<VCardSubtitle>Commercial networks & enterprises</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="d-flex align-center">
|
||||
<h6 class="text-h6 me-3">
|
||||
$221,267
|
||||
</h6>
|
||||
<VChip
|
||||
label
|
||||
color="success"
|
||||
class="font-weight-bold"
|
||||
>
|
||||
<VIcon
|
||||
start
|
||||
icon="ri-arrow-up-line"
|
||||
size="15"
|
||||
/>
|
||||
<span>22%</span>
|
||||
</VChip>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ApexChartBalance />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Balance Horizontal Bar -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>Balance</VCardTitle>
|
||||
<VCardSubtitle>$74,382.72</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="date-picker-wrapper">
|
||||
<AppDateTimePicker
|
||||
:model-value="new Date().toISOString()"
|
||||
prepend-inner-icon="ri-calendar-line"
|
||||
placeholder="Select Date"
|
||||
:config="{ position: 'auto right' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ApexChartHorizontalBar />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Stocks Prices -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>Stocks Prices</VCardTitle>
|
||||
<VCardSubtitle>$50,863.98</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="date-picker-wrapper">
|
||||
<AppDateTimePicker
|
||||
:model-value="new Date().toISOString()"
|
||||
prepend-inner-icon="ri-calendar-line"
|
||||
placeholder="Select Date"
|
||||
:config="{ position: 'auto right' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ApexChartStocksPrices />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Daily Sales States -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="Daily Sales States">
|
||||
<VCardText>
|
||||
<ApexChartDailySalesStates />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Statistics -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="Statistics">
|
||||
<VCardText>
|
||||
<ApexChartStatistics />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Mobile Comparison -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="Mobile Comparison">
|
||||
<VCardText>
|
||||
<ApexChartMobileComparison />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Expense Ratio Chart -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard
|
||||
title="Expense Ratio"
|
||||
subtitle="Spending on various categories"
|
||||
>
|
||||
<VCardText>
|
||||
<ApexChartExpenseRatio />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/libs/apex-chart.scss";
|
||||
|
||||
.date-picker-wrapper {
|
||||
inline-size: 10.5rem;
|
||||
}
|
||||
|
||||
#apex-chart-wrapper {
|
||||
.v-card-item__append {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
203
resources/js/pages/charts/chartjs.vue
Normal file
203
resources/js/pages/charts/chartjs.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<script setup>
|
||||
import ChartJsBarChart from '@/views/charts/chartjs/ChartJsBarChart.vue'
|
||||
import ChartJsBubbleChart from '@/views/charts/chartjs/ChartJsBubbleChart.vue'
|
||||
import ChartJsHorizontalBarChart from '@/views/charts/chartjs/ChartJsHorizontalBarChart.vue'
|
||||
import ChartJsLineAreaChart from '@/views/charts/chartjs/ChartJsLineAreaChart.vue'
|
||||
import ChartJsLineChart from '@/views/charts/chartjs/ChartJsLineChart.vue'
|
||||
import ChartJsPolarAreaChart from '@/views/charts/chartjs/ChartJsPolarAreaChart.vue'
|
||||
import ChartJsRadarChart from '@/views/charts/chartjs/ChartJsRadarChart.vue'
|
||||
import ChartJsScatterChart from '@/views/charts/chartjs/ChartJsScatterChart.vue'
|
||||
|
||||
const chartJsCustomColors = {
|
||||
white: '#fff',
|
||||
yellow: '#ffe802',
|
||||
primary: '#836af9',
|
||||
areaChartBlue: '#2c9aff',
|
||||
barChartYellow: '#ffcf5c',
|
||||
polarChartGrey: '#4f5d70',
|
||||
polarChartInfo: '#299aff',
|
||||
lineChartYellow: '#d4e157',
|
||||
polarChartGreen: '#28dac6',
|
||||
lineChartPrimary: '#9e69fd',
|
||||
lineChartWarning: '#ff9800',
|
||||
horizontalBarInfo: '#26c6da',
|
||||
polarChartWarning: '#ff8131',
|
||||
scatterChartGreen: '#28c76f',
|
||||
warningShade: '#ffbd1f',
|
||||
areaChartBlueLight: '#84d0ff',
|
||||
areaChartGreyLight: '#edf1f4',
|
||||
scatterChartWarning: '#ff9f43',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow id="chartjs-wrapper">
|
||||
<!-- 👉 Statistics Line Chart -->
|
||||
<VCol cols="12">
|
||||
<VCard
|
||||
title="Statistics"
|
||||
subtitle="Commercial networks and enterprises"
|
||||
>
|
||||
<VCardText>
|
||||
<ChartJsLineChart :colors="chartJsCustomColors" />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Radar Chart -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="Radar Chart">
|
||||
<VCardText>
|
||||
<ChartJsRadarChart />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Average Skills Polar Area Chart -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard title="Average Skills">
|
||||
<VCardText>
|
||||
<ChartJsPolarAreaChart :colors="chartJsCustomColors" />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Bubble Chart -->
|
||||
<VCol cols="12">
|
||||
<VCard title="Bubble Chart">
|
||||
<template #append>
|
||||
<span class="text-body-2">$ 100,000</span>
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<ChartJsBubbleChart :colors="chartJsCustomColors" />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 New Product Data Scatter Chart -->
|
||||
<VCol cols="12">
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>New Product Data</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<VBtnGroup
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
divided
|
||||
>
|
||||
<VBtn>Daily</VBtn>
|
||||
<VBtn>Monthly</VBtn>
|
||||
<VBtn>Yearly</VBtn>
|
||||
</VBtnGroup>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ChartJsScatterChart :colors="chartJsCustomColors" />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Data Science Area Line Chart -->
|
||||
<VCol cols="12">
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>
|
||||
Data Science
|
||||
</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="date-picker-wrapper">
|
||||
<AppDateTimePicker
|
||||
:model-value="new Date().toISOString()"
|
||||
prepend-inner-icon="ri-calendar-line"
|
||||
placeholder="Select Date"
|
||||
:config="{ position: 'auto right' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ChartJsLineAreaChart :colors="chartJsCustomColors" />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Latest Statistics -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>Latest Statistics</VCardTitle>
|
||||
|
||||
<template #append>
|
||||
<div class="date-picker-wrapper">
|
||||
<AppDateTimePicker
|
||||
:model-value="new Date().toISOString()"
|
||||
prepend-inner-icon="ri-calendar-line"
|
||||
placeholder="Select Date"
|
||||
:config="{ position: 'auto right' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ChartJsBarChart :colors="chartJsCustomColors" />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Balance Horizontal Bar Chart -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VCard>
|
||||
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
|
||||
<VCardTitle>Balance</VCardTitle>
|
||||
<VCardSubtitle>$74,123</VCardSubtitle>
|
||||
|
||||
<template #append>
|
||||
<div class="date-picker-wrapper">
|
||||
<AppDateTimePicker
|
||||
:model-value="new Date().toISOString()"
|
||||
prepend-inner-icon="ri-calendar-line"
|
||||
placeholder="Select Date"
|
||||
:config="{ position: 'auto right' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<ChartJsHorizontalBarChart :colors="chartJsCustomColors" />
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.date-picker-wrapper {
|
||||
inline-size: 10.5rem;
|
||||
}
|
||||
|
||||
#chartjs-wrapper {
|
||||
.v-card-item__append {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user