sghimire/pnpm-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Display meal details on the dashboard using Echarts radial charts and update package dependencies.

Browse Source
This commit is contained in:
Sandip Ghimire 2026-01-06 17:31:58 +05:45
parent 8a9a900fec
commit 116d4aa0da
3 changed files with 456 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

638
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -21,10 +21,12 @@
"dependencies": {
"axios": "^1.13.2",
"dolphin-components": "^3.1.0",
"echarts": "^6.0.0",
"nepali-date-library": "^1.1.11",
"pinia": "^3.0.4",
"typescript-eslint": "^8.50.0",
"vue": "^3.5.25",
"typescript-eslint": "^8.52.0",
"vue": "^3.5.26",
"vue-echarts": "^8.0.1",
"vue-router": "^4.6.4"
},
"devDependencies": {
@ -42,6 +44,6 @@
"typescript": "~5.9.3",
"vite": "^7.3.0",
"vite-plugin-vue-devtools": "^8.0.5",
"vue-tsc": "^3.1.8"
"vue-tsc": "^3.2.2"
}
}

98
src/views/Dashboard/Index.vue
View File

@ -1,5 +1,99 @@
<template>
<div>test</div>
<div class="text-[16px] font-[500] pb-[15px]">Meal Details</div>
<div class="grid grid-cols-4 gap-[15px] rounded-default">
<div class="p-[15px] bg-white">
<div class="text-[#2f2f2f]">
<span v-if="data.schedule.running == 1">Running</span>
<span v-else>Previous</span>
Schedule
</div>
<div class="text-[24px] text-[#333131]">
{{ data.schedule.name ? data.schedule.name : "N/A" }}
</div>
</div>
<div class="p-[15px] bg-white">
<div class="text-[#2f2f2f]">Total Employee</div>
<div class="text-[24px] text-[#333131]">
{{ data.total ? data.total : "0" }}
</div>
</div>
<div class="p-[15px] bg-white relative">
<div class="text-[#2f2f2f]">Scanned Employee</div>
<div class="text-[24px] text-[#333131]">
{{ data.scanned ? data.scanned : "0" }}
</div>
<div class="text-[#2f2f2f]">({{ getPercentage(data.total, data.scanned) }} % of {{ data.total }})</div>
<div class="w-[100px] h-[70px] ml-auto absolute right-0 top-[20px]">
<v-chart :option="getRadialOption(getPercentage(data.total, data.scanned))" />
</div>
</div>
<div class="p-[15px] bg-white relative">
<div class="w-fit">
<div class="text-[#2f2f2f]">Pending Employee</div>
<div class="text-[24px] text-[#333131]">
{{ data.pending ? data.pending : "0" }}
</div>
<div class="text-[#2f2f2f]">({{ getPercentage(data.total, data.pending) }} % of {{ data.total }})</div>
</div>
<div class="w-[100px] h-[70px] ml-auto absolute right-0 top-[20px]">
<v-chart :option="getRadialOption(getPercentage(data.total, data.pending))" />
</div>
</div>
</div>
</template>
<script lang="ts" setup></script>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
const data = ref({
total: 10,
pending: 200,
scanned: 100,
schedule: {
name: "Testing",
running: 1,
},
});
const getRadialOption = (percent: number) => ({
series: [
{
type: "pie",
radius: ["80%", "100%"],
avoidLabelOverlap: false,
silent: true,
data: [
{ value: percent, itemStyle: { color: "#4a8e57" } },
{ value: 100 - percent, itemStyle: { color: "#e6edf7" } },
],
label: {
show: true,
position: "center",
formatter: `${Math.round(percent)}%`,
fontSize: 12,
color: "#6b7280", // Tailwind's gray-500
fontWeight: 500,
},
labelLine: { show: false },
emphasis: { disabled: true },
hoverAnimation: false,
},
],
tooltip: { show: false },
legend: { show: false },
});
const getPercentage = (total: number, by: number) => {
if (!by) {
return 0;
}
return parseFloat(((by / total) * 100).toFixed(2));
};
</script>