Create component for easily adding charts for single entities

- SingleEntityTitheChart.vue

Tithe-Vue/src/components/Charts/SingleEntityTitheChart.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { computed, toRef, ref, watch } from "vue";
+
+import LineChart from "@/components/Charts/LineChart.vue";
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const chartColors = {
+  default: {
+    primary: "#00D1B2",
+    info: "#209CEE",
+    danger: "#FF3860",
+  },
+};
+
+const datasetObject = (color, titheAmounts) => {
+  return {
+    fill: false,
+    borderColor: chartColors.default[color],
+    borderWidth: 2,
+    borderDash: [],
+    borderDashOffset: 0.0,
+    pointBackgroundColor: chartColors.default[color],
+    pointBorderColor: "rgba(255,255,255,0)",
+    pointHoverBackgroundColor: chartColors.default[color],
+    pointBorderWidth: 20,
+    pointHoverRadius: 4,
+    pointHoverBorderWidth: 15,
+    pointRadius: 4,
+    data: titheAmounts,
+    tension: 0.5,
+    cubicInterpolationMode: "default",
+  };
+};
+
+const chartData = computed(() => {
+  return {
+    labels: props.data.map((obj) => obj.timeStamp),
+    datasets: [
+      datasetObject(
+        "primary",
+        props.data.map((obj) => obj.titheAmount)
+      ),
+    ],
+  };
+});
+</script>
+
+<template>
+  <div v-if="props.data">
+    <LineChart :data="chartData" class="h-96" />
+  </div>
+</template>

Tithe-Vue/src/components/Charts/chart.config.js

@@ -47,8 +47,8 @@ export const sampleChartData = (points = 9) => {
     labels,
     datasets: [
       datasetObject("primary", points),
-      datasetObject("info", points),
-      datasetObject("danger", points),
+      // datasetObject("info", points),
+      // datasetObject("danger", points),
     ],
   };
 };

Tithe-Vue/src/views/HomeView.vue

@@ -17,7 +17,8 @@ import gql from "graphql-tag";
 import { useQuery, useLazyQuery } from "@vue/apollo-composable";
 
 import * as chartConfig from "@/components/Charts/chart.config.js";
-import LineChart from "@/components/Charts/LineChart.vue";
+// import LineChart from "@/components/Charts/LineChart.vue";
+import SingleEntityTitheChart from "@/components/Charts/SingleEntityTitheChart.vue";
 import SectionMain from "@/components/SectionMain.vue";
 import CardBoxWidget from "@/components/CardBoxWidget.vue";
 import CardBox from "@/components/CardBox.vue";
@@ -44,18 +45,50 @@ import {
   homepageActivePersonTableQuery,
 } from "@/externalized-data/graphqlQueries";
 
-const chartData = ref(null);
-
 const tableTabTitle = homepageTableTabTitle;
 
+// onMounted(() => {
+//   fillChartData();
+// });
+
+const somanData = ref([]);
+
+somanData.value = [
+  {
+    timeStamp: "2004",
+    titheAmount: 400,
+  },
+  {
+    timeStamp: "2005",
+    titheAmount: 700,
+  },
+  {
+    timeStamp: "2006",
+    titheAmount: 12000,
+  },
+];
+
 const fillChartData = () => {
-  chartData.value = chartConfig.sampleChartData();
+  somanData.value = [
+    {
+      timeStamp: "2004",
+      titheAmount: 400,
+    },
+    {
+      timeStamp: "2005",
+      titheAmount: 800,
+    },
+    {
+      timeStamp: "2006",
+      titheAmount: 12000,
+    },
+    {
+      timeStamp: "2007",
+      titheAmount: 14000,
+    },
+  ];
 };
 
-onMounted(() => {
-  fillChartData();
-});
-
 // const mainStore = useMainStore();
 
 // const clientBarItems = computed(() => mainStore.clients.slice(0, 4));
@@ -195,10 +228,14 @@ const getActivePersonRows = computed(() => {
         />
       </SectionTitleLineWithButton>
 
-      <CardBox class="mb-6">
+      <!-- <CardBox class="mb-6">
         <div v-if="chartData">
           <line-chart :data="chartData" class="h-96" />
         </div>
+      </CardBox> -->
+
+      <CardBox class="mb-6">
+        <SingleEntityTitheChart :data="somanData" />
       </CardBox>
 
       <!-- List of cardboxes -->