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

starting charting

Browse Source
This commit is contained in:
Andrew Croce 2018-09-06 16:29:36 -04:00
parent f69396ac73
commit d882c552dc
7 changed files with 324 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
atst/domain/reports.py
View File

@ -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
}

1
atst/routes/workspaces.py
View File

@ -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,

65
js/components/charts/budget_chart.js Normal file
View File

@ -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
}
}
}

4
js/index.js
View File

@ -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")

2
package.json
View File

@ -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",

13
templates/workspaces/reports/index.html
View File

@ -94,6 +94,19 @@
{% set prev_month_index = prev_month.strftime('%m/%Y') %}
{% set two_months_ago_index = two_months_ago.strftime('%m/%Y') %}
<budget-chart current-month='{{ current_month_index }}' v-bind:months='{{ cumulative_budget.months | tojson }}' inline-template>
<div class='budget-chart panel' ref='panel'>
<header class='panel__heading panel__heading--tight'>
<h2 class='h3'>Cumulative Budget</h2>
</header>
<svg v-bind:height="height" v-bind:width="width">
<g v-for='month in displayedMonths'>
<rect v-if='month.budget' width='20' height='100' v-bind:x='month.metrics.x' />
</g>
</svg>
</div>
</budget-chart>
<div class='spend-table responsive-table-wrapper'>
<div class='spend-table__header'>
<h2 class='spend-table__title'>Total spend per month</h2>

234
yarn.lock
View File

@ -1444,6 +1444,10 @@ command-exists@^1.2.6:
version "1.2.7"
resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.7.tgz#16828f0c3ff2b0c58805861ef211b64fc15692a8"
commander@2:
version "2.17.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
commander@^2.11.0, commander@^2.9.0, commander@~2.16.0:
version "2.16.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.16.0.tgz#f16390593996ceb4f3eeb020b31d78528f7f8a50"
@ -1805,12 +1809,232 @@ cyclist@~0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
version "1.2.4"
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
d3-axis@1:
version "1.0.12"
resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.12.tgz#cdf20ba210cfbb43795af33756886fb3638daac9"
d3-brush@1:
version "1.0.6"
resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.0.6.tgz#33691f2032d9db6c5d8cb684ff255a9883629e21"
dependencies:
d3-dispatch "1"
d3-drag "1"
d3-interpolate "1"
d3-selection "1"
d3-transition "1"
d3-chord@1:
version "1.0.6"
resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.6.tgz#309157e3f2db2c752f0280fedd35f2067ccbb15f"
dependencies:
d3-array "1"
d3-path "1"
d3-collection@1:
version "1.0.7"
resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"
d3-color@1:
version "1.2.3"
resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.3.tgz#6c67bb2af6df3cc8d79efcc4d3a3e83e28c8048f"
d3-contour@1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.3.2.tgz#652aacd500d2264cb3423cee10db69f6f59bead3"
dependencies:
d3-array "^1.1.1"
d3-dispatch@1:
version "1.0.5"
resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.5.tgz#e25c10a186517cd6c82dd19ea018f07e01e39015"
d3-drag@1:
version "1.2.3"
resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.3.tgz#46e206ad863ec465d88c588098a1df444cd33c64"
dependencies:
d3-dispatch "1"
d3-selection "1"
d3-dsv@1:
version "1.0.10"
resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.10.tgz#4371c489a2a654a297aca16fcaf605a6f31a6f51"
dependencies:
commander "2"
iconv-lite "0.4"
rw "1"
d3-ease@1:
version "1.0.5"
resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.5.tgz#8ce59276d81241b1b72042d6af2d40e76d936ffb"
d3-fetch@1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-1.1.2.tgz#957c8fbc6d4480599ba191b1b2518bf86b3e1be2"
dependencies:
d3-dsv "1"
d3-force@1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.2.tgz#16664d0ac71d8727ef5effe0b374feac8050d6cd"
dependencies:
d3-collection "1"
d3-dispatch "1"
d3-quadtree "1"
d3-timer "1"
d3-format@1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.3.2.tgz#6a96b5e31bcb98122a30863f7d92365c00603562"
d3-geo@1:
version "1.11.1"
resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.11.1.tgz#3f35e582c0d29296618b02a8ade0fdffb2c0e63c"
dependencies:
d3-array "1"
d3-hierarchy@1:
version "1.1.8"
resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz#7a6317bd3ed24e324641b6f1e76e978836b008cc"
d3-interpolate@1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.3.2.tgz#417d3ebdeb4bc4efcc8fd4361c55e4040211fd68"
dependencies:
d3-color "1"
d3-path@1:
version "1.0.7"
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.7.tgz#8de7cd693a75ac0b5480d3abaccd94793e58aae8"
d3-polygon@1:
version "1.0.5"
resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.5.tgz#9a645a0a64ff6cbf9efda96ee0b4a6909184c363"
d3-quadtree@1:
version "1.0.5"
resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.5.tgz#305394840b01f51a341a0da5008585e837fe7e9b"
d3-random@1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.2.tgz#2833be7c124360bf9e2d3fd4f33847cfe6cab291"
d3-scale-chromatic@1:
version "1.3.3"
resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-1.3.3.tgz#dad4366f0edcb288f490128979c3c793583ed3c0"
dependencies:
d3-color "1"
d3-interpolate "1"
d3-scale@2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-2.1.2.tgz#4e932b7b60182aee9073ede8764c98423e5f9a94"
dependencies:
d3-array "^1.2.0"
d3-collection "1"
d3-format "1"
d3-interpolate "1"
d3-time "1"
d3-time-format "2"
d3-selection@1, d3-selection@^1.1.0:
version "1.3.2"
resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.3.2.tgz#6e70a9df60801c8af28ac24d10072d82cbfdf652"
d3-shape@1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.2.tgz#f9dba3777a5825f9a8ce8bc928da08c17679e9a7"
dependencies:
d3-path "1"
d3-time-format@2:
version "2.1.3"
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.3.tgz#ae06f8e0126a9d60d6364eac5b1533ae1bac826b"
dependencies:
d3-time "1"
d3-time@1:
version "1.0.10"
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.10.tgz#8259dd71288d72eeacfd8de281c4bf5c7393053c"
d3-timer@1:
version "1.0.9"
resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.9.tgz#f7bb8c0d597d792ff7131e1c24a36dd471a471ba"
d3-transition@1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.1.3.tgz#3a435b05ce9cef9524fe0d38121cfb6905331ca6"
dependencies:
d3-color "1"
d3-dispatch "1"
d3-ease "1"
d3-interpolate "1"
d3-selection "^1.1.0"
d3-timer "1"
d3-voronoi@1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
d3-zoom@1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.7.3.tgz#f444effdc9055c38077c4299b4df999eb1d47ccb"
dependencies:
d3-dispatch "1"
d3-drag "1"
d3-interpolate "1"
d3-selection "1"
d3-transition "1"
d3@^5.7.0:
version "5.7.0"
resolved "https://registry.yarnpkg.com/d3/-/d3-5.7.0.tgz#f189d338bdde62acf02f308918e0ec34dd7568f9"
dependencies:
d3-array "1"
d3-axis "1"
d3-brush "1"
d3-chord "1"
d3-collection "1"
d3-color "1"
d3-contour "1"
d3-dispatch "1"
d3-drag "1"
d3-dsv "1"
d3-ease "1"
d3-fetch "1"
d3-force "1"
d3-format "1"
d3-geo "1"
d3-hierarchy "1"
d3-interpolate "1"
d3-path "1"
d3-polygon "1"
d3-quadtree "1"
d3-random "1"
d3-scale "2"
d3-scale-chromatic "1"
d3-selection "1"
d3-shape "1"
d3-time "1"
d3-time-format "2"
d3-timer "1"
d3-transition "1"
d3-voronoi "1"
d3-zoom "1"
dashdash@^1.12.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
dependencies:
assert-plus "^1.0.0"
date-fns@^1.29.0:
version "1.29.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
date-now@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@ -2806,6 +3030,12 @@ humanize-ms@^1.2.1:
dependencies:
ms "^2.0.0"
iconv-lite@0.4:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
dependencies:
safer-buffer ">= 2.1.2 < 3"
iconv-lite@^0.4.4, iconv-lite@~0.4.13:
version "0.4.23"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
@ -5693,6 +5923,10 @@ run-queue@^1.0.0, run-queue@^1.0.3:
dependencies:
aproba "^1.1.1"
rw@1:
version "1.3.3"
resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"