diff --git a/atst/domain/reports.py b/atst/domain/reports.py
index 15df3ba4..e3e71319 100644
--- a/atst/domain/reports.py
+++ b/atst/domain/reports.py
@@ -196,3 +196,9 @@ class Reports:
"projects": project_totals,
"workspace": workspace_totals,
}
+
+ @classmethod
+ def cumulative_budget(cls, alternate):
+ return {
+ "months": CUMULATIVE_BUDGET_BELUGA if alternate else CUMULATIVE_BUDGET_AARDVARK
+ }
diff --git a/atst/routes/workspaces.py b/atst/routes/workspaces.py
index e8d0df8d..f13f6ec1 100644
--- a/atst/routes/workspaces.py
+++ b/atst/routes/workspaces.py
@@ -87,6 +87,7 @@ def workspace_reports(workspace_id):
return render_template(
"workspaces/reports/index.html",
+ cumulative_budget=Reports.cumulative_budget(alternate_reports),
workspace_totals=Reports.workspace_totals(alternate_reports),
monthly_totals=Reports.monthly_totals(alternate_reports),
current_month=current_month,
diff --git a/js/components/charts/budget_chart.js b/js/components/charts/budget_chart.js
new file mode 100644
index 00000000..bc721f42
--- /dev/null
+++ b/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
+ }
+ }
+}
diff --git a/js/index.js b/js/index.js
index 2ce01476..aa659d3a 100644
--- a/js/index.js
+++ b/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")
diff --git a/package.json b/package.json
index 4c942980..10e57947 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
"dependencies": {
"autoprefixer": "^9.1.3",
"babel-polyfill": "^6.26.0",
+ "d3": "^5.7.0",
+ "date-fns": "^1.29.0",
"npm": "^6.0.1",
"parcel": "^1.9.7",
"text-mask-addons": "^3.8.0",
diff --git a/templates/workspaces/reports/index.html b/templates/workspaces/reports/index.html
index 0bc1e503..b6a8f2ac 100644
--- a/templates/workspaces/reports/index.html
+++ b/templates/workspaces/reports/index.html
@@ -94,6 +94,19 @@
{% set prev_month_index = prev_month.strftime('%m/%Y') %}
{% set two_months_ago_index = two_months_ago.strftime('%m/%Y') %}
+
+
+
+
+
+
+