starting charting

js/components/charts/budget_chart.js

@@ -0,0 +1,65 @@
+import * as d3 from 'd3'
+import { format } from 'date-fns'
+
+export default {
+  name: 'budget-chart',
+  props: {
+    currentMonth: String,
+    months: Object
+  },
+
+  data: function () {
+    return {
+      numMonths: 10,
+      focusedMonthPosition: 4, // 5th spot in zero-based index,
+      height: 300,
+      width: 0,
+      displayedMonths: []
+    }
+  },
+
+  computed: {
+
+  },
+
+  mounted: function () {
+    console.log(this.displayedMonths)
+    this._setDisplayedMonths()
+    this._setMetrics()
+  },
+
+  methods: {
+    _setMetrics: function () {
+      this.width = this.$refs.panel.clientWidth
+      // for (let i = 0; i < this.numMonths; i++) {
+      //   this.displayedMonths[i].metrics.x = (this.width / this.numMonths)
+      // }
+    },
+
+    _setDisplayedMonths: function () {
+      const [month, year] = this.currentMonth.split('/')
+      const monthsRange = []
+      const monthsBack = this.focusedMonthPosition
+      const monthsForward = this.numMonths - this.focusedMonthPosition - 1
+      const start = new Date(year, month - 1 - monthsBack)
+
+      for (let i = 0; i < this.numMonths; i++) {
+        const date = new Date(start.getFullYear(), start.getMonth() + i)
+        const index = format(date, 'MM/YYYY')
+        monthsRange.push({
+          date: {
+            month: format(date, 'MMM'),
+            year: format(date,'YYYY')
+          },
+          budget: this.months[index] || null,
+          isHighlighted: this.currentMonth === index,
+          metrics: {
+            x: 0,
+            width: 0
+          }
+        })
+      }
+      this.displayedMonths = monthsRange
+    }
+  }
+}

js/index.js

@@ -14,6 +14,7 @@ import toggler from './components/toggler'
 import NewProject from './components/forms/new_project'
 import Modal from './mixins/modal'
 import selector from './components/selector'
+import BudgetChart from './components/charts/budget_chart'
 
 Vue.use(VTooltip)
 
@@ -30,7 +31,8 @@ const app = new Vue({
     poc,
     financial,
     NewProject,
-    selector
+    selector,
+    BudgetChart
   },
   mounted: function() {
     const modalOpen = document.querySelector("#modalOpen")