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

components tag order added

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-07 15:13:51 +03:00
parent 98f567478e
commit 001de2be44
41 changed files with 1677 additions and 1695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/views/Dashboard.vue
View File

@@ -1,3 +1,119 @@
<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import ProductService from '@/layout/service/ProductService';
import { useLayoutService } from '@/layout/composables/layoutService';
const { isDarkTheme } = useLayoutService();
const products = ref(null);
const lineData = reactive({
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Revenue',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
tension: 0.4
},
{
label: 'Sales',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e',
tension: 0.4
}
]
});
const items = ref([
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
{ label: 'Remove', icon: 'pi pi-fw pi-minus' }
]);
const lineOptions = ref(null);
const productService = new ProductService();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
});
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const applyLightTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
};
const applyDarkTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
};
watch(
isDarkTheme,
(val) => {
if (val) {
applyDarkTheme();
} else {
applyLightTheme();
}
},
{ immediate: true }
);
</script>
<template>
<div class="grid">
<div class="col-12 lg:col-6 xl:col-3">
@@ -239,119 +355,3 @@
</div>
</div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import ProductService from '@/layout/service/ProductService';
import { useLayoutService } from '@/layout/composables/layoutService';
const { isDarkTheme } = useLayoutService();
const products = ref(null);
const lineData = reactive({
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Revenue',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
tension: 0.4
},
{
label: 'Sales',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e',
tension: 0.4
}
]
});
const items = ref([
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
{ label: 'Remove', icon: 'pi pi-fw pi-minus' }
]);
const lineOptions = ref(null);
const productService = new ProductService();
onMounted(() => {
productService.getProductsSmall().then((data) => (products.value = data));
});
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const applyLightTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
};
const applyDarkTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
};
watch(
isDarkTheme,
(val) => {
if (val) {
applyDarkTheme();
} else {
applyLightTheme();
}
},
{ immediate: true }
);
</script>