66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
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
|
|
}
|
|
}
|
|
}
|