From 1715ac99b9739496c802505004bb241ffeb249ef Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 17 Sep 2018 15:06:38 -0400 Subject: [PATCH 01/10] SpendTable Vue component --- js/components/tables/spend_table.js | 45 +++++++++++++++++++++++++++++ js/index.js | 4 ++- 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 js/components/tables/spend_table.js diff --git a/js/components/tables/spend_table.js b/js/components/tables/spend_table.js new file mode 100644 index 00000000..be1b2be7 --- /dev/null +++ b/js/components/tables/spend_table.js @@ -0,0 +1,45 @@ +import { set } from 'vue/dist/vue' +import { formatDollars } from '../../lib/dollars' + +export default { + name: 'spend-table', + + props: { + projects: Object, + workspace: Object, + environments: Object, + currentMonthIndex: String, + prevMonthIndex: String, + twoMonthsAgoIndex: String + }, + + data: function () { + return { + projectsState: this.projects + } + }, + + created: function () { + Object.keys(this.projects).forEach(project => { + set(this.projectsState[project], 'isVisible', false) + }) + }, + + methods: { + toggle: function (e, projectName) { + this.projectsState = Object.assign(this.projectsState, { + [projectName]: { + isVisible: !this.projectsState[projectName].isVisible + } + }) + }, + + formatDollars: function (value) { + return formatDollars(value, false) + }, + + round: function (value) { + return Math.round(value) + } + } +} diff --git a/js/index.js b/js/index.js index f5e9613d..375a90f2 100644 --- a/js/index.js +++ b/js/index.js @@ -16,6 +16,7 @@ import NewProject from './components/forms/new_project' import Modal from './mixins/modal' import selector from './components/selector' import BudgetChart from './components/charts/budget_chart' +import SpendTable from './components/tables/spend_table' Vue.use(VTooltip) @@ -33,7 +34,8 @@ const app = new Vue({ financial, NewProject, selector, - BudgetChart + BudgetChart, + SpendTable }, mounted: function() { const modalOpen = document.querySelector("#modalOpen") From 9dd710ff94d99b27cb0b15887fa921692786672d Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 17 Sep 2018 15:07:14 -0400 Subject: [PATCH 02/10] Fallback meter --- styles/elements/_graphs.scss | 6 ++++++ templates/workspaces/reports/index.html | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/styles/elements/_graphs.scss b/styles/elements/_graphs.scss index 930f2d71..d4586210 100644 --- a/styles/elements/_graphs.scss +++ b/styles/elements/_graphs.scss @@ -15,4 +15,10 @@ meter { &::-moz-meter-bar { background: $color-primary; } + + .meter__fallback { + display: inline-block; + background: $color-primary; + height: 100%; + } } diff --git a/templates/workspaces/reports/index.html b/templates/workspaces/reports/index.html index 3da4987d..d31a9ea3 100644 --- a/templates/workspaces/reports/index.html +++ b/templates/workspaces/reports/index.html @@ -35,7 +35,9 @@
- + +
+
Total spend to date
From 1818113409e55e356448c52bfda164df538f2fe3 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 17 Sep 2018 15:07:38 -0400 Subject: [PATCH 03/10] reimplement spend table as a vue component --- templates/workspaces/reports/index.html | 78 ++++++++++++++++++++++--- 1 file changed, 71 insertions(+), 7 deletions(-) diff --git a/templates/workspaces/reports/index.html b/templates/workspaces/reports/index.html index d31a9ea3..6490f5bb 100644 --- a/templates/workspaces/reports/index.html +++ b/templates/workspaces/reports/index.html @@ -225,14 +225,22 @@
-

Total spend per month

+

Total spend per month

- + +
@@ -253,9 +261,63 @@ - {% for project_name, project_totals in monthly_totals['projects'].items() %} - - - {% endfor %} -
Spending scope {{ two_months_ago.strftime('%B %Y') }}
+ {% endfor %} #} + +
{% endblock %} From 221836c8cf19a74ea5514428961e273a893d8009 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 17 Sep 2018 15:08:10 -0400 Subject: [PATCH 04/10] Add transparent background to meter value --- styles/sections/_reports.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss index ba23c580..732fa94b 100644 --- a/styles/sections/_reports.scss +++ b/styles/sections/_reports.scss @@ -217,7 +217,7 @@ } &.previous-month { - opacity: 0.65; + color: $color-gray; } &.meter-cell { @@ -250,9 +250,12 @@ @include media($medium-screen) { display: block; color: $color-white; + background-color: rgba($color-blue, 0.65); + border-radius: $gap/2; position: absolute; top: 2.3rem; - left: $gap; + left: $gap / 2; + padding: 0 ($gap / 2); } } } From 24acfb501004e797b8cd05202bd3bc72bf612a2c Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 17 Sep 2018 15:08:45 -0400 Subject: [PATCH 05/10] Add type checking on formatDollars add param to hide cents --- js/lib/dollars.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/lib/dollars.js b/js/lib/dollars.js index 65fc69ff..6555c2f9 100644 --- a/js/lib/dollars.js +++ b/js/lib/dollars.js @@ -1,4 +1,11 @@ -export const formatDollars = value => `$${value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}` +export const formatDollars = (value, cents = true) => { + if (typeof value === 'number') { + return cents + ? `$${value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}` + : `$${value.toFixed(0).replace(/\d(?=(\d{3}))/g, '$&,')}` + } + return '' +} export const abbreviateDollars = (value, decimals = 1) => { if (value === null) { return null } // terminate early From cef2c448e6e7e00f37ac530a2d79d16f76e01b2b Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Tue, 18 Sep 2018 09:41:16 -0400 Subject: [PATCH 06/10] Merge project values with previous version on toggle --- js/components/tables/spend_table.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/tables/spend_table.js b/js/components/tables/spend_table.js index be1b2be7..fd694ce7 100644 --- a/js/components/tables/spend_table.js +++ b/js/components/tables/spend_table.js @@ -28,9 +28,9 @@ export default { methods: { toggle: function (e, projectName) { this.projectsState = Object.assign(this.projectsState, { - [projectName]: { + [projectName]: Object.assign(this.projectsState[projectName],{ isVisible: !this.projectsState[projectName].isVisible - } + }) }) }, From 651e503a0c9d9304ba69e93272fb1c85ff8cb962 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Tue, 18 Sep 2018 09:41:26 -0400 Subject: [PATCH 07/10] fix dollar formatter --- js/lib/dollars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/lib/dollars.js b/js/lib/dollars.js index 6555c2f9..e1b60ac0 100644 --- a/js/lib/dollars.js +++ b/js/lib/dollars.js @@ -2,7 +2,7 @@ export const formatDollars = (value, cents = true) => { if (typeof value === 'number') { return cents ? `$${value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}` - : `$${value.toFixed(0).replace(/\d(?=(\d{3}))/g, '$&,')}` + : `$${value.toFixed(0).replace(/\d(?=(\d{3})+(?!\d))/g, '$&,')}` } return '' } From 9fcd725238af582f1ebec5c6deb3615d1640ccd7 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Tue, 18 Sep 2018 09:41:46 -0400 Subject: [PATCH 08/10] use project state data add missing class name --- templates/workspaces/reports/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/workspaces/reports/index.html b/templates/workspaces/reports/index.html index 6490f5bb..0f763890 100644 --- a/templates/workspaces/reports/index.html +++ b/templates/workspaces/reports/index.html @@ -261,7 +261,7 @@ - +