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

36
frontend/src/components/common/TodoChart.vue
View file

@ -21,7 +21,7 @@
</template>
<script setup>
import { ref, onMounted, watch, nextTick, computed, onUnmounted} from "vue";
import { ref, onMounted, watch, nextTick, computed, onUnmounted, toRaw} from "vue";
import { Chart, registerables } from "chart.js";
// Register Chart.js components
@ -29,8 +29,7 @@ Chart.register(...registerables);
const props = defineProps({
title: String,
todoNumber: Number,
completedNumber: Number,
categories: Object,
loading: {
type: Boolean,
default: false,
@ -38,7 +37,7 @@ const props = defineProps({
});
//Constants
const categories = ["To-do", "Completed"];
//const categories = ["To-do", "Completed"];
//Reactive data
const centerData = ref(null);
@ -56,21 +55,19 @@ const getHoveredCategoryIndex = () => {
}
const getCategoryValue = (categoryIndex) => {
if (categoryIndex === 0) {
return props.todoNumber
} else {
return props.completedNumber
}
return props.categories.data[categoryIndex];
}
const getChartData = () => {
const categoryData = props.categories.data;
const categoryColors = props.categories.colors;
const chartData = {
name: props.title,
datasets: [
{
label: "",
data: [props.todoNumber, props.completedNumber],
backgroundColor: ["#b22222", "#4caf50"]
data: categoryData,
backgroundColor: categoryColors
},
]
};
@ -79,8 +76,11 @@ const getChartData = () => {
const updateCenterData = () => {
const total = props.todoNumber + props.completedNumber;
const todos = props.todoNumber;
let total = 0;
for (let i=0; i<props.categories.data.length; i++) {
total += props.categories.data[i];
}
const todos = props.categories.data[0];
if (todos === 0 && total > 0) {
centerData.value = {
@ -107,14 +107,14 @@ const updateCenterData = () => {
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) + "%" : "0%";
centerData.value = {
label: categories[hoveredCategoryIndex],
label: props.categories.labels[hoveredCategoryIndex],
value: value,
percentage: percentage,
};
} else {
centerData.value = {
label: "To-do",
value: props.todoNumber,
value: todos,
percentage: null,
};
}
@ -180,8 +180,6 @@ const getChartOptions = () => {
const createChart = () => {
if (!chartCanvas.value || props.loading) return;
console.log(`DEBUG: Creating chart for ${props.title}`);
console.log(props);
const ctx = chartCanvas.value.getContext("2d");
if (chartInstance.value) {
@ -214,9 +212,9 @@ onMounted(() => {
createChart();
});
watch(() => props.completedNumber, (newValue) => {
watch(() => props.categories, (newValue) => {
updateChart();
});
}, {deep: true});
</script>

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>