add totals

src/App.vue

@@ -110,6 +110,10 @@
           <v-icon class="mr-2">mdi-poll</v-icon>
           Chart
         </v-btn>
+        <v-btn to="/totals">
+          <v-icon class="mr-2">mdi-poll</v-icon>
+          Totals
+        </v-btn>
         <!-- <v-btn>
           <v-icon>mdi-format-align-right</v-icon>
         </v-btn>
@@ -263,7 +267,6 @@ export default Vue.extend({
 
         setTimeout(() => {
           // it seems that the div is not ready (mounted ?) try with next tick
-          console.log("cat", this.categories);
           if (this.allDataReady) {
             this.computeAndRender();
           } else {
@@ -306,11 +309,9 @@ export default Vue.extend({
       // this.$router.push("chart");
     },
     getColor: function (categoryName: string) {
-      console.log("cat", categoryName);
       let categoryObj = this.categories
         .filter(c => c.name == categoryName)
         .pop();
-      console.log("obj", categoryObj ? categoryObj.color : "?");
 
       return categoryObj ? categoryObj.color : "gray";
     },

src/api.charts.ts

@@ -182,15 +182,57 @@ export function drawLineChart(expenses: any, getColor: (a: string) => string) {
     }))
     .filter((ld: any) => ld.value);
 
-  console.log(labelsData);
-
   Plotly.newPlot("chart", chartData.concat(labelsData), layout, {
     responsive: true
   });
 
   const graphDiv = <PlotHTMLElement>document.getElementById("chart")!;
   graphDiv.on("plotly_selected", function (eventData: any) {
-    console.log(eventData);
+    console.warn(
+      "total selected",
+      _.sum(eventData.points.map((p: any) => p.value))
+    );
+  });
+}
+
+export function drawTotalsChart(
+  expenses: any,
+  getColor: (a: string) => string
+) {
+  console.log(expenses);
+
+  // const chartData: Plotly.BarData[] = [
+  const chartData: any = {
+    type: "bar",
+    x: expenses.map(exp => exp.category),
+    y: expenses.map(exp => exp.value),
+    name: expenses.map(exp => exp.category),
+    marker: {
+      color: expenses.map(exp => getColor(exp.category))
+    }
+  };
+
+  const layout: Partial<Plotly.Layout> = {
+    height: 600,
+    title: "Sum by category",
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    font: {
+      family: "Avenir, Helvetica, Arial, sans-serif",
+      size: 14,
+      color: "#afafaf"
+    }
+    // barmode: "stack"
+  };
+
+  console.log(chartData);
+
+  Plotly.newPlot("chart2", [chartData], layout, {
+    responsive: true
+  });
+
+  const graphDiv = <PlotHTMLElement>document.getElementById("chart2")!;
+  graphDiv.on("plotly_selected", function (eventData: any) {
     console.warn(
       "total selected",
       _.sum(eventData.points.map((p: any) => p.value))

src/router/index.ts

@@ -2,6 +2,7 @@ import Vue from "vue";
 import VueRouter, { RouteConfig } from "vue-router";
 import Table from "@/views/Table.vue";
 import Chart from "@/views/Chart.vue";
+import Chart2 from "@/views/Chart2.vue";
 
 Vue.use(VueRouter);
 
@@ -19,6 +20,12 @@ const routes: Array<RouteConfig> = [
     // which is lazy-loaded when the route is visited.
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/Chart.vue")
+  },
+  {
+    path: "/totals",
+    name: "Totals",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/Chart2.vue")
   }
 ];
 

src/views/Chart2.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-row>
+    <v-col>
+      <v-card>
+        <v-card-text>
+          <div id="chart2"></div>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from "vue";
+
+import { Category } from "../types";
+
+import { drawTotalsChart } from "../api.charts";
+
+export default Vue.extend({
+  name: "Table",
+  data: () => ({
+    search: "" as string
+  }),
+  props: {
+    jsonData: { type: [] as PropType<any[]>, required: true },
+    expenses: { type: [] as PropType<any[]>, required: true },
+    categories: { type: [] as PropType<Category[]>, required: true },
+    getColorFn: {
+      type: [] as PropType<(arg0: string) => string>,
+      required: true
+    }
+  },
+  mounted: function () {
+    drawTotalsChart(this.expenses, this.getColorFn);
+  },
+  computed: {},
+  methods: {}
+});
+</script>