pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettier format all js files

Browse Source
This commit is contained in:
George Drummond
2019-01-24 09:38:43 -05:00
parent 20604e6ca9
commit 619bc9fe59
32 changed files with 553 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
js/components/charts/budget_chart.js
View File

@@ -1,4 +1,10 @@
import { format, isWithinRange, addMonths, isSameMonth, getMonth } from 'date-fns'
import {
format,
isWithinRange,
addMonths,
isSameMonth,
getMonth,
} from 'date-fns'
import { abbreviateDollars, formatDollars } from '../../lib/dollars'
const TOP_OFFSET = 20
@@ -11,27 +17,28 @@ export default {
currentMonth: String,
expirationDate: String,
months: Object,
budget: String
budget: String,
},
data: function () {
const heightScale = this.budget / (CHART_HEIGHT - TOP_OFFSET - BOTTOM_OFFSET)
data: function() {
const heightScale =
this.budget / (CHART_HEIGHT - TOP_OFFSET - BOTTOM_OFFSET)
return {
numMonths: 10,
focusedMonthPosition: 4,
height: CHART_HEIGHT,
heightScale,
budgetHeight: CHART_HEIGHT - BOTTOM_OFFSET - (this.budget / heightScale),
budgetHeight: CHART_HEIGHT - BOTTOM_OFFSET - this.budget / heightScale,
baseHeight: CHART_HEIGHT - BOTTOM_OFFSET,
width: 0,
displayedMonths: [],
spendPath: '',
projectedPath: '',
displayBudget: formatDollars(parseFloat(this.budget))
displayBudget: formatDollars(parseFloat(this.budget)),
}
},
mounted: function () {
mounted: function() {
this._setDisplayedMonths()
this._setMetrics()
addEventListener('load', this._setMetrics)
@@ -39,7 +46,7 @@ export default {
},
methods: {
_setMetrics: function () {
_setMetrics: function() {
this.width = this.$refs.panel.clientWidth
this.spendPath = ''
this.projectedPath = ''
@@ -48,16 +55,20 @@ export default {
let lastSpendPoint = ''
for (let i = 0; i < this.numMonths; i++) {
const { metrics, budget, rollingAverage, cumulativeTotal } = this.displayedMonths[i]
const blockWidth = (this.width / this.numMonths)
const {
metrics,
budget,
rollingAverage,
cumulativeTotal,
} = this.displayedMonths[i]
const blockWidth = this.width / this.numMonths
const blockX = blockWidth * i
const spend = budget && budget.spend
? budget.spend
: rollingAverage
const spend = budget && budget.spend ? budget.spend : rollingAverage
const barHeight = spend / this.heightScale
lastSpend = spend
const cumulativeY = this.height - (cumulativeTotal / this.heightScale) - BOTTOM_OFFSET
const cumulativeX = blockX + blockWidth/2
const cumulativeY =
this.height - cumulativeTotal / this.heightScale - BOTTOM_OFFSET
const cumulativeX = blockX + blockWidth / 2
const cumulativePoint = `${cumulativeX} ${cumulativeY}`
this.displayedMonths[i].metrics = Object.assign(metrics, {
@@ -65,26 +76,26 @@ export default {
blockX,
barHeight,
barWidth: 30,
barX: blockX + (blockWidth/2 - 15),
barX: blockX + (blockWidth / 2 - 15),
barY: this.height - barHeight - BOTTOM_OFFSET,
cumulativeR: 2.5,
cumulativeY,
cumulativeX
cumulativeX,
})
if (budget && budget.spend) {
this.spendPath += this.spendPath === '' ? 'M' : ' L'
this.spendPath += cumulativePoint
lastSpendPoint = cumulativePoint
} else if (lastSpendPoint !== '') {
this.projectedPath += this.projectedPath === '' ? `M${lastSpendPoint} L` : ' L'
this.projectedPath +=
this.projectedPath === '' ? `M${lastSpendPoint} L` : ' L'
this.projectedPath += cumulativePoint
}
}
},
_setDisplayedMonths: function () {
_setDisplayedMonths: function() {
const [month, year] = this.currentMonth.split('/')
const [expYear, expMonth, expDate] = this.expirationDate.split('-') // assumes format 'YYYY-MM-DD'
const monthsRange = []
@@ -101,7 +112,7 @@ export default {
const end = addMonths(start, this.numMonths + 1)
// expiration date
const expires = new Date(expYear, expMonth-1, expDate)
const expires = new Date(expYear, expMonth - 1, expDate)
// is the expiration date within the displayed date range?
const expirationWithinRange = isWithinRange(expires, start, end)
@@ -122,9 +133,15 @@ export default {
const budget = this.months[index] || null
const spendAmount = budget ? budget.spend : rollingAverage
const spendMinusOne = this.months[indexMinusOne] ? this.months[indexMinusOne].spend : rollingAverage
const spendMinusTwo = this.months[indexMinusTwo] ? this.months[indexMinusTwo].spend : rollingAverage
const spendMinusThree = this.months[indexMinusThree] ? this.months[indexMinusThree].spend : rollingAverage
const spendMinusOne = this.months[indexMinusOne]
? this.months[indexMinusOne].spend
: rollingAverage
const spendMinusTwo = this.months[indexMinusTwo]
? this.months[indexMinusTwo].spend
: rollingAverage
const spendMinusThree = this.months[indexMinusThree]
? this.months[indexMinusThree].spend
: rollingAverage
const isExpirationMonth = isSameMonth(date, expires)
@@ -134,12 +151,8 @@ export default {
cumulativeTotal += spendAmount
}
rollingAverage = (
spendAmount
+ spendMinusOne
+ spendMinusTwo
+ spendMinusThree
) / 4
rollingAverage =
(spendAmount + spendMinusOne + spendMinusTwo + spendMinusThree) / 4
monthsRange.push({
budget,
@@ -153,9 +166,9 @@ export default {
date: {
monthIndex: format(date, 'M'),
month: format(date, 'MMM'),
year: format(date,'YYYY')
year: format(date, 'YYYY'),
},
showYear: isExpirationMonth || (i === 0) || getMonth(date) === 0,
showYear: isExpirationMonth || i === 0 || getMonth(date) === 0,
isHighlighted: this.currentMonth === index,
metrics: {
blockWidth: 0,
@@ -166,12 +179,11 @@ export default {
barY: 0,
cumulativeY: 0,
cumulativeX: 0,
cumulativeR: 0
}
cumulativeR: 0,
},
})
}
this.displayedMonths = monthsRange
}
}
},
},
}