ayanova/src/components/dash-labor-hours-personal.vue

@@ -9,8 +9,27 @@
     v-on="$listeners"
   >
     <template slot="main">
-      {{ settings }}
+      <div>
+        <!-- <gz-chart-line
+        :width="400"
+        :height="240"
+        :chart-data="obj"
+        :options="{
+          responsive: true,
+          maintainAspectRatio: false,
+          legend: { display: false }
+        }"
+      ></gz-chart-line> -->
+
+        <gz-chart-line
+          :width="400"
+          :height="240"
+          :chart-data="chartData"
+          :options="timeLineChartOptions"
+        />
+      </div>
     </template>
+
     <template slot="settings">
       <div></div>
       <v-col v-if="context" cols="12">
@@ -71,6 +90,7 @@
 </template>
 <script>
 import GzDash from "./dash-base.vue";
+import Palette from "../api/palette";
 export default {
   components: {
     GzDash
@@ -87,10 +107,52 @@ export default {
         dateFilterTokens: [],
         tagFilterOperators: [],
         units: []
+      },
+      timeLineChartOptions: {
+        responsive: true,
+        maintainAspectRatio: false,
+        // legend: { display: false },
+        scales: {
+          xAxes: [
+            {
+              type: "time",
+              gridLines: {
+                drawOnChartArea: false
+              }
+            }
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                drawOnChartArea: false
+              },
+              ticks: {
+                beginAtZero: true
+              }
+            }
+          ]
+        }
       }
     };
   },
-  computed: {},
+  computed: {
+    chartData() {
+      return {
+        datasets: [
+          {
+            label: this.$ay.t("BillableHours"),
+            borderColor: Palette.color.soft_deep_blue,
+            backgroundColor: Palette.color.soft_deep_blue,
+            fill: false,
+            radius: 0,
+            hoverRadius: 10,
+            hitRadius: 4,
+            data: this.obj
+          }
+        ]
+      };
+    }
+  },
   async created() {
     await initWidget(this);
   },
@@ -111,6 +173,7 @@ export default {
       this.settings.unit = this.localSettings.unit;
       this.$emit("dash-change");
       this.context = false;
+      this.getDataFromApi();
     },
 
     async getDataFromApi() {
@@ -177,6 +240,7 @@ ORDER BY timeframe ASC
           this.errorMessage = res.error;
         } else {
           console.log(res);
+          this.obj = res.data;
         }
       } catch (error) {
         this.errorMessage = error.toString();

ayanova/src/views/home-dashboard.vue

@@ -2,7 +2,7 @@
   <div>
     <v-row v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
-      {{ effectiveView }}
+
       <v-col v-if="showSelector" cols="12">
         <v-dialog
           v-model="showSelector"