Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chart completed

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-08 00:11:47 +03:00
parent c8f92b0102
commit 17363dfa5d
6 changed files with 195 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/AppFooter.vue
View File

@@ -12,7 +12,7 @@ const logoUrl = () => {
<div class="layout-footer">
<img :src="logoUrl()" alt="Logo" height="20" class="mr-2" />
by
<span class="font-medium ml-2">PrimeNG</span>
<span class="font-medium ml-2">PrimeVue</span>
</div>
</template>
<style lang="scss" scoped></style>

6
src/layout/composables/layoutService.js
View File

@@ -19,17 +19,17 @@ const layoutState = reactive({
menuHoverActive: false
});
export function useLayoutService() {
export function useLayoutService () {
const changeThemeSettings = (theme, darkTheme) => {
layoutConfig.theme = theme;
layoutConfig.darkTheme = darkTheme;
};
const setScale = (scale) => {
const setScale = scale => {
layoutConfig.scale = scale;
};
const setActiveMenuItem = (item) => {
const setActiveMenuItem = item => {
layoutConfig.activeMenuItem = item.value || item;
};

16
src/views/Dashboard.vue
View File

@@ -7,10 +7,10 @@ const { isDarkTheme } = useLayoutService();
const products = ref(null);
const lineData = reactive({
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Revenue',
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
@@ -18,7 +18,7 @@ const lineData = reactive({
tension: 0.4
},
{
label: 'Sales',
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
@@ -76,25 +76,25 @@ const applyDarkTheme = () => {
plugins: {
legend: {
labels: {
color: '#495057'
color: '#ebedef'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
color: '#ebedef'
},
grid: {
color: '#ebedef'
color: 'rgba(160, 167, 181, .3)'
}
},
y: {
ticks: {
color: '#495057'
color: '#ebedef'
},
grid: {
color: '#ebedef'
color: 'rgba(160, 167, 181, .3)'
}
}
}

424
src/views/uikit/Chart.vue
View File

@@ -2,91 +2,17 @@
import { ref, watch } from 'vue';
import { useLayoutService } from '@/layout/composables/layoutService';
const { isDarkTheme } = useLayoutService();
const lineData = ref({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
tension: 0.4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e',
tension: 0.4
}
]
});
const { layoutConfig } = useLayoutService();
const documentStyle = getComputedStyle(document.documentElement);
let textColor = documentStyle.getPropertyValue('--text-color');
let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
const pieData = ref({
labels: ['A', 'B', 'C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}
]
});
const polarData = ref({
datasets: [
{
data: [11, 16, 7, 3, 14],
backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
label: 'My dataset'
}
],
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
});
const barData = ref({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: '#2f4860',
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: '#00bb7e',
data: [28, 48, 40, 19, 86, 27, 90]
}
]
});
const radarData = ref({
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]
});
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);
@@ -94,204 +20,202 @@ const polarOptions = ref(null);
const barOptions = ref(null);
const radarOptions = ref(null);
const applyLightTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
barOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
pieOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
}
};
polarOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
r: {
grid: {
color: '#ebedef'
}
}
}
};
radarOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
r: {
grid: {
color: '#ebedef'
}
}
}
};
const setColorOptions = () => {
textColor = documentStyle.getPropertyValue('--text-color');
textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
surfaceBorder = documentStyle.getPropertyValue('--surface-border');
};
const applyDarkTheme = () => {
lineOptions.value = {
const setChart = () => {
setColorOptions();
barData.value = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-500'),
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--primary-200'),
borderColor: documentStyle.getPropertyValue('--primary-200'),
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
barOptions.value = {
plugins: {
legend: {
labels: {
color: '#ebedef'
fontColor: textColor
}
}
},
scales: {
x: {
ticks: {
color: '#ebedef'
color: textColorSecondary,
font: {
weight: 500
}
},
grid: {
color: 'rgba(160, 167, 181, .3)'
display: false,
drawBorder: false
}
},
y: {
ticks: {
color: '#ebedef'
color: textColorSecondary
},
grid: {
color: 'rgba(160, 167, 181, .3)'
color: surfaceBorder,
drawBorder: false
}
}
}
};
barOptions.value = {
plugins: {
legend: {
labels: {
color: '#ebedef'
}
}
},
scales: {
x: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)'
}
},
y: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)'
}
}
pieData.value = {
labels: ['A', 'B', 'C'],
datasets: [
{
data: [540, 325, 702],
backgroundColor: [documentStyle.getPropertyValue('--indigo-500'), documentStyle.getPropertyValue('--purple-500'), documentStyle.getPropertyValue('--teal-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--indigo-400'), documentStyle.getPropertyValue('--purple-400'), documentStyle.getPropertyValue('--teal-400')]
}
]
};
pieOptions.value = {
plugins: {
legend: {
labels: {
color: '#ebedef'
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('--primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-500'),
tension: 0.4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: documentStyle.getPropertyValue('--primary-200'),
borderColor: documentStyle.getPropertyValue('--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('--indigo-500'), documentStyle.getPropertyValue('--purple-500'), documentStyle.getPropertyValue('--teal-500'), documentStyle.getPropertyValue('--orange-500')],
label: 'My dataset'
}
],
labels: ['Indigo', 'Purple', 'Teal', 'Orange']
};
polarOptions.value = {
plugins: {
legend: {
labels: {
color: '#ebedef'
color: textColor
}
}
},
scales: {
r: {
grid: {
color: 'rgba(160, 167, 181, .3)'
color: surfaceBorder
}
}
}
};
radarData.value = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--indigo-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'),
pointBorderColor: documentStyle.getPropertyValue('--indigo-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400'),
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--purple-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--purple-400'),
pointBorderColor: documentStyle.getPropertyValue('--purple-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'),
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
radarOptions.value = {
plugins: {
legend: {
labels: {
color: '#ebedef'
fontColor: textColor
}
}
},
scales: {
r: {
grid: {
color: 'rgba(160, 167, 181, .3)'
color: textColorSecondary
}
}
}
@@ -299,13 +223,11 @@ const applyDarkTheme = () => {
};
watch(
isDarkTheme,
(val) => {
if (val) {
applyDarkTheme();
} else {
applyLightTheme();
}
layoutConfig.theme,
() => {
setTimeout(() => {
setChart();
}, 100);
},
{ immediate: true }
);
@@ -313,36 +235,40 @@ watch(
<template>
<div class="grid p-fluid">
<div class="col-12 lg:col-6">
<div class="col-12 xl:col-6">
<div class="card">
<h5>Linear Chart</h5>
<Chart type="line" :data="lineData" :options="lineOptions" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Pie Chart</h5>
<Chart type="pie" :data="pieData" :options="pieOptions" style="width: 50%" />
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Polar Area Chart</h5>
<Chart type="polarArea" :data="polarData" :options="polarOptions" style="width: 50%" />
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="col-12 xl:col-6">
<div class="card">
<h5>Bar Chart</h5>
<Chart type="bar" :data="barData" :options="barOptions" />
<Chart type="bar" :data="barData" :options="barOptions"></Chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Doughnut Chart</h5>
<Chart type="doughnut" :data="pieData" :options="pieOptions" style="width: 50%" />
</div>
<div class="col-12 xl:col-6">
<div class="card flex flex-column align-items-center">
<h5 class="align-self-start">Radar Chart</h5>
<Chart type="radar" :data="radarData" :options="radarOptions" style="width: 50%" />
<h5 class="text-left w-full">Pie Chart</h5>
<Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
</div>
</div>
<div class="col-12 xl:col-6">
<div class="card flex flex-column align-items-center">
<h5 class="text-left w-full">Doughnut Chart</h5>
<Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
</div>
</div>
<div class="col-12 xl:col-6">
<div class="card flex flex-column align-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-12 xl:col-6">
<div class="card flex flex-column align-items-center">
<h5 class="text-left w-full">Radar Chart</h5>
<Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
</div>
</div>
</div>

4
src/views/uikit/Input.vue
View File

@@ -66,9 +66,9 @@ onMounted(() => {
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
this.autoFilteredValue = [...this.autoValue];
autoFilteredValue.value = [...autoValue.value];
} else {
this.autoFilteredValue = this.autoValue.filter((country) => {
autoFilteredValue.value = autoValue.value.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}

23
src/views/uikit/Table.vue
View File

@@ -2,22 +2,12 @@
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from '@/layout/service/CustomerService';
import ProductService from '@/layout/service/ProductService';
import { ref, onMounted } from 'vue';
import { ref, onBeforeMount } from 'vue';
const customer1 = ref(null);
const customer2 = ref(null);
const customer3 = ref(null);
const filters1 = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
representative: { value: null, matchMode: FilterMatchMode.IN },
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
});
const filters1 = ref(null);
const loading1 = ref(null);
const loading2 = ref(null);
const idFrozen = ref(false);
@@ -40,7 +30,7 @@ const representatives = ref([
const customerService = new CustomerService();
const productService = new ProductService();
onMounted(() => {
onBeforeMount(() => {
productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
customerService.getCustomersLarge().then((data) => {
customer1.value = data;
@@ -50,6 +40,8 @@ onMounted(() => {
customerService.getCustomersLarge().then((data) => (customer2.value = data));
customerService.getCustomersMedium().then((data) => (customer3.value = data));
loading2.value = false;
initFilters1();
});
const initFilters1 = () => {
@@ -61,10 +53,9 @@ const initFilters1 = () => {
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
activity: { value: [0, 50], matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
};
console.log(filters1);
};
const clearFilter1 = () => {
@@ -208,7 +199,7 @@ const calculateCustomerTotal = (name) => {
<ProgressBar :value="data.activity" :showValue="false" style="height: 0.5rem"></ProgressBar>
</template>
<template #filter="{ filterModel }">
<Slider v-model="filterModel.value" range class="m-3"></Slider>
<Slider v-model="filterModel.value" :range="true" class="m-3"></Slider>
<div class="flex align-items-center justify-content-between px-2">
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>