bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated the TodoChart to have arbitrary categories, labels, data, and colors.

Browse source
This commit is contained in:
rocketdebris 2026-01-22 10:46:49 -05:00
parent c0b1f3f37a
commit f386edf769
2 changed files with 55 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

78
frontend/src/components/pages/Home.vue
View file

@ -15,8 +15,7 @@
<div class="widget-content">
<TodoChart
title="Locates"
:todoNumber="chartData.locates.todo"
:completedNumber="chartData.locates.done"
:categories="chartData.locates"
>
</TodoChart>
<button class="sidebar-button" @click="navigateTo('/tasks?subject=Locate')">
@ -37,8 +36,7 @@
<div class="widget-content">
<TodoChart
title="Permits"
:todoNumber="chartData.permits.todo"
:completedNumber="chartData.permits.done"
:categories="chartData.permits"
>
</TodoChart>
<button class="sidebar-button" @click="navigateTo('/tasks?subject=Permit')">
@ -59,8 +57,7 @@
<div class="widget-content">
<TodoChart
title="Permit Finalization"
:todoNumber="permitFinalizationsTodoNumber"
:completedNumber="permitFinalizationsCompletedNumber"
:categories="chartData.permitFinalizations"
>
</TodoChart>
<button class="sidebar-button" @click="navigateTo('/jobs')">
@ -81,8 +78,7 @@
<div class="widget-content">
<TodoChart
title="Warranty Claims"
:todoNumber="warrantyTodoNumber"
:completedNumber="warrantyCompletedNumber"
:categories="chartData.warranties"
>
</TodoChart>
<button class="sidebar-button" @click="navigateTo('/jobs')">
@ -103,8 +99,7 @@
<div class="widget-content">
<TodoChart
title="Incomplete Bids"
:todoNumber="bidsTodoNumber"
:completedNumber="bidsCompletedNumber"
:categories="chartData.bids"
>
</TodoChart>
<button class="sidebar-button"
@ -126,8 +121,7 @@
<div class="widget-content">
<TodoChart
title="Unapproved Estimates"
:todoNumber="estimatesTodoNumber"
:completedNumber="estimatesCompletedNumber"
:categories="chartData.estimates"
>
</TodoChart>
<button class="sidebar-button"
@ -149,8 +143,7 @@
<div class="widget-content">
<TodoChart
title="Half Down Payments"
:todoNumber="halfDownTodoNumber"
:completedNumber="halfDownCompletedNumber"
:categories="chartData.halfDown"
>
</TodoChart>
<button class="sidebar-button"
@ -172,8 +165,7 @@
<div class="widget-content">
<TodoChart
title="15 Day Follow Ups"
:todoNumber="fifteenDayTodoNumber"
:completedNumber="fifteenDayCompletedNumber"
:categories="chartData.fifteenDayFollowups"
>
</TodoChart>
<button class="sidebar-button"
@ -195,8 +187,7 @@
<div class="widget-content">
<TodoChart
title="Late Balances"
:todoNumber="balancesTodoNumber"
:completedNumber="balancesCompletedNumber"
:categories="chartData.lateBalances"
>
</TodoChart>
<button class="sidebar-button"
@ -218,8 +209,7 @@
<div class="widget-content">
<TodoChart
title="Backflow Tests"
:todoNumber="backflowsTodoNumber"
:completedNumber="backflowsCompletedNumber"
:categories="chartData.backflows"
>
</TodoChart>
<button class="sidebar-button"
@ -241,8 +231,7 @@
<div class="widget-content">
<TodoChart
title="Curbing"
:todoNumber="chartData.curbing.todo"
:completedNumber="chartData.curbing.done"
:categories="chartData.curbing"
>
</TodoChart>
<button class="sidebar-button"
@ -264,8 +253,7 @@
<div class="widget-content">
<TodoChart
title="Hydroseeding"
:todoNumber="chartData.hydroseed.todo"
:completedNumber="chartData.hydroseed.done"
:categories="chartData.hydroseed"
>
</TodoChart>
<button class="sidebar-button"
@ -287,8 +275,7 @@
<div class="widget-content">
<TodoChart
title="Machines"
:todoNumber="machinesTodoNumber"
:completedNumber="machinesCompletedNumber"
:categories="chartData.machines"
>
</TodoChart>
<button class="sidebar-button"
@ -310,8 +297,7 @@
<div class="widget-content">
<TodoChart
title="Deliveries"
:todoNumber="deliveriesTodoNumber"
:completedNumber="delivieriesCompletedNumber"
:categories="chartData.deliveries"
>
</TodoChart>
<button class="sidebar-button"
@ -342,6 +328,8 @@ import TodoChart from "../common/TodoChart.vue";
const router = useRouter();
const defaultColors = ['blue', 'green', 'red'];
// Dummy data from utils
const clientData = ref(DataUtils.dummyClientData);
const jobData = ref(DataUtils.dummyJobData);
@ -355,10 +343,20 @@ const warrantyTodoNumber = ref(0);
const warrantyCompletedNumber = ref(10);
const chartData = ref({
locates: {todo: 0, done: 0},
permits: {todo: 0, done: 0},
curbing: {todo: 0, done: 0},
hydroseed: {todo: 0, done: 0},
locates: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
permits: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
curbing: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
hydroseed: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
permitFinalizations: {labels: ["Todo", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
warranties: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
bids: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
estimates: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
halfDown: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
fifteenDayFollowups: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
lateBalances: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
backflows: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
machines: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
deliveries: {labels: ["To-do", "Completed", "Overdue"], data: [0, 0, 0], colors: defaultColors},
});
const notifications = useNotificationStore();
@ -375,14 +373,14 @@ const navigateTo = (path) => {
};
onMounted(async() => {
notifications.addWarning("Dashboard metrics are based on dummy data for demonstration purposes. UPDATES COMING SOON!");
chartData.value.locates.todo = await Api.getTasksDue("Locate");
chartData.value.locates.done = await Api.getTasksCompleted("Locate");
chartData.value.permits.todo = await Api.getTasksDue("Permit");
chartData.value.permits.done = await Api.getTasksCompleted("Permit");
chartData.value.curbing.todo = await Api.getTasksDue("Curbing");
chartData.value.curbing.done = await Api.getTasksCompleted("Curbing");
chartData.value.hydroseed.todo = await Api.getTasksDue("Hydroseed");
chartData.value.hydroseed.done = await Api.getTasksCompleted("Hydroseed");
chartData.value.locates.data[0] = await Api.getTasksDue("Locate");
chartData.value.locates.data[1] = await Api.getTasksCompleted("Locate");
chartData.value.permits.data[0] = await Api.getTasksDue("Permit");
chartData.value.permits.data[1] = await Api.getTasksCompleted("Permit");
chartData.value.curbing.data[0] = await Api.getTasksDue("Curbing");
chartData.value.curbing.data[1] = await Api.getTasksCompleted("Curbing");
chartData.value.hydroseed.data[0] = await Api.getTasksDue("Hydroseed");
chartData.value.hydroseed.data[1] = await Api.getTasksCompleted("Hydroseed");
});
</script>