diff --git a/js/components/charts/budget_chart.js b/js/components/charts/budget_chart.js deleted file mode 100644 index 11fee9b0..00000000 --- a/js/components/charts/budget_chart.js +++ /dev/null @@ -1,189 +0,0 @@ -import { - format, - isWithinRange, - addMonths, - isSameMonth, - getMonth, -} from 'date-fns' -import { abbreviateDollars, formatDollars } from '../../lib/dollars' - -const TOP_OFFSET = 20 -const BOTTOM_OFFSET = 70 -const CHART_HEIGHT = 360 - -export default { - name: 'budget-chart', - props: { - currentMonth: String, - expirationDate: String, - months: Object, - budget: String, - }, - - 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, - baseHeight: CHART_HEIGHT - BOTTOM_OFFSET, - width: 0, - displayedMonths: [], - spendPath: '', - projectedPath: '', - displayBudget: formatDollars(parseFloat(this.budget)), - } - }, - - mounted: function() { - this._setDisplayedMonths() - this._setMetrics() - addEventListener('load', this._setMetrics) - addEventListener('resize', this._setMetrics) - }, - - methods: { - _setMetrics: function() { - this.width = this.$refs.panel.clientWidth - this.spendPath = '' - this.projectedPath = '' - - let lastSpend = 0 - 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 blockX = blockWidth * i - 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 cumulativePoint = `${cumulativeX} ${cumulativeY}` - - this.displayedMonths[i].metrics = Object.assign(metrics, { - blockWidth, - blockX, - barHeight, - barWidth: 30, - barX: blockX + (blockWidth / 2 - 15), - barY: this.height - barHeight - BOTTOM_OFFSET, - cumulativeR: 2.5, - cumulativeY, - 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 += cumulativePoint - } - } - }, - - _setDisplayedMonths: function() { - const [month, year] = this.currentMonth.split('/') - const [expYear, expMonth, expDate] = this.expirationDate.split('-') // assumes format 'YYYY-MM-DD' - const monthsRange = [] - const monthsBack = this.focusedMonthPosition + 1 - const monthsForward = this.numMonths - this.focusedMonthPosition - 1 - - // currently focused date - const current = new Date(year, month) - - // starting date of the chart - const start = addMonths(current, -monthsBack) - - // ending date of the chart - const end = addMonths(start, this.numMonths + 1) - - // expiration date - const expires = new Date(expYear, expMonth - 1, expDate) - - // is the expiration date within the displayed date range? - const expirationWithinRange = isWithinRange(expires, start, end) - - let rollingAverage = 0 - let cumulativeTotal = 0 - - for (let i = 0; i < this.numMonths; i++) { - const date = addMonths(start, i) - const dateMinusOne = addMonths(date, -1) - const dateMinusTwo = addMonths(date, -2) - const dateMinusThree = addMonths(date, -3) - - const index = format(date, 'MM/YYYY') - const indexMinusOne = format(dateMinusOne, 'MM/YYYY') - const indexMinusTwo = format(dateMinusTwo, 'MM/YYYY') - const indexMinusThree = format(dateMinusThree, 'MM/YYYY') - - 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 isExpirationMonth = isSameMonth(date, expires) - - if (budget && budget.cumulative) { - cumulativeTotal = budget.cumulative - } else { - cumulativeTotal += spendAmount - } - - rollingAverage = - (spendAmount + spendMinusOne + spendMinusTwo + spendMinusThree) / 4 - - monthsRange.push({ - budget, - rollingAverage, - cumulativeTotal, - isExpirationMonth, - spendAmount: formatDollars(spendAmount), - abbreviatedSpend: abbreviateDollars(spendAmount), - cumulativeAmount: formatDollars(cumulativeTotal), - abbreviatedCumulative: abbreviateDollars(cumulativeTotal), - date: { - monthIndex: format(date, 'M'), - month: format(date, 'MMM'), - year: format(date, 'YYYY'), - }, - showYear: isExpirationMonth || i === 0 || getMonth(date) === 0, - isHighlighted: this.currentMonth === index, - metrics: { - blockWidth: 0, - blockX: 0, - barHeight: 0, - barWidth: 0, - barX: 0, - barY: 0, - cumulativeY: 0, - cumulativeX: 0, - cumulativeR: 0, - }, - }) - } - this.displayedMonths = monthsRange - }, - }, -} diff --git a/js/index.js b/js/index.js index 390dbe1c..dd5ef06a 100644 --- a/js/index.js +++ b/js/index.js @@ -17,7 +17,6 @@ import ApplicationEnvironments from './components/forms/new_application/environm import MultiStepModalForm from './components/forms/multi_step_modal_form' import uploadinput from './components/upload_input' import Modal from './mixins/modal' -import BudgetChart from './components/charts/budget_chart' import SpendTable from './components/tables/spend_table' import LocalDatetime from './components/local_datetime' import { isNotInVerticalViewport } from './lib/viewport' @@ -49,7 +48,6 @@ const app = new Vue({ textinput, checkboxinput, ApplicationEnvironments, - BudgetChart, SpendTable, LocalDatetime, MultiStepModalForm, diff --git a/styles/atat.scss b/styles/atat.scss index 346b5d44..c3fd1a55 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -33,7 +33,6 @@ @import "components/progress_menu.scss"; @import "components/forms"; @import "components/selector"; -@import "components/budget_chart"; @import "components/audit_log"; @import "components/usa_banner"; @import "components/dod_login_notice.scss"; diff --git a/styles/components/_budget_chart.scss b/styles/components/_budget_chart.scss deleted file mode 100644 index d5930236..00000000 --- a/styles/components/_budget_chart.scss +++ /dev/null @@ -1,169 +0,0 @@ -.budget-chart { - svg { - display: block; - - .filter__text-background { - feFlood { - flood-color: $color-white; - flood-opacity: 1; - } - - &--highlighted { - feFlood { - flood-color: $color-aqua-lightest; - flood-opacity: 1; - } - } - } - - a { - text-decoration: none; - - &:focus { - outline: none; - stroke: $color-gray-light; - stroke-dasharray: 2px; - } - - &:hover { - .filter__text-background { - feFlood { - flood-color: $color-aqua-lightest; - flood-opacity: 1; - } - } - } - } - } - - &__header { - border-bottom: 1px solid $color-gray-light; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - } - - &__legend { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - dl { - margin: 0 0 0 ($gap * 2); - - > div { - margin: 0; - display: flex; - flex-direction: row-reverse; - align-items: center; - - dt { - @include small-label; - } - } - } - - &__dot { - width: $gap; - height: $gap; - border-radius: $gap / 2; - margin: 0 $gap; - - &.accumulated { - background-color: $color-gold; - } - - &.monthly { - background-color: $color-blue; - } - } - - &__line { - height: 2px; - width: $gap * 3; - border-top-width: 2px; - border-top-style: dashed; - margin: $gap; - - &.spend { - border-color: $color-blue; - } - - &.accumulated { - border-color: $color-gold; - } - } - } - - &__block { - fill: transparent; - cursor: pointer; - - &--highlighted { - fill: rgba($color-aqua, 0.15); - } - - &--is-expiration { - border-left: 2px dotted $color-gray; - } - - &:hover { - fill: rgba($color-aqua, 0.15); - } - } - - &__bar { - fill: $color-blue; - - &--projected { - fill: transparent; - stroke-width: 2px; - stroke: $color-blue; - stroke-dasharray: 4px; - } - } - - &__expiration-line { - stroke-width: 2px; - stroke: $color-gray-light; - stroke-dasharray: 4px; - } - - &__cumulative { - &__dot { - fill: $color-gold; - } - } - - &__projected-path { - stroke-width: 1px; - stroke: $color-gold; - stroke-dasharray: 4px; - fill: none; - } - - &__spend-path { - stroke-width: 1px; - stroke: $color-gold; - fill: none; - } - - &__budget-line { - stroke-width: 2px; - stroke: $color-gray-light; - stroke-dasharray: 4px; - } - - &__label { - @include small-label; - - fill: $color-gray; - pointer-events: none; - - &--strong { - fill: $color-black; - } - } -}