Templating the Budget Overview with Mixins

_src/fy2016-budget-overview.jade

@@ -1,19 +1,3 @@
-.container#chartContainer
-  style.
+include mixins/budget-overview.jade
 
-  .row
-  .intro.col-md-8
-    h1 FY2016 Budget Overview
-    p.description Click on a fund to see the departments that receive its funding. Click on that department to see its spending or revenue. To step out of the department, click ‘Budget’ until you reach the desired department.
-
-  .row#chart(data-json-file = "data/fy2016/c4okc_fy2016_final.json")
-  table.row.treemap.table-striped#chart-table
-    thead
-      th Item
-      th Expense
-    tbody
-
-script(src="http://code.jquery.com/jquery-1.7.2.min.js",charset='utf-8')
-script(src="http://d3js.org/d3.v3.min.js"              ,charset='utf-8')
-script(src="/js/data.js",charset='utf-8')
-script(src="/js/okc-budget-tree.js",charset='utf-8')
++budgetOverview(2016,"data/fy2016/c4okc_fy2016_final.json")

_src/fy2017-budget-overview.jade

@@ -1,20 +1,3 @@
-.container#chartContainer
-  style.
+include mixins/budget-overview.jade
 
-  .row
-  .intro.col-md-8
-    h1 FY2017 Budget Overview
-    p.description Click on a fund to see the departments that receive its funding. Click on that department to see its spending or revenue. To step out of the department, click ‘Budget’ until you reach the desired department.
-
-  .row#chart(data-json-file = "data/fy2017/c4okc_fy2017.json")
-  table.row.treemap.table-striped#chart-table
-    thead
-      th Item
-      th Expense
-    tbody
-
-script(src="http://code.jquery.com/jquery-1.7.2.min.js",charset='utf-8')
-script(src="http://d3js.org/d3.v3.min.js"              ,charset='utf-8')
-script(src="/js/data.js",charset='utf-8')
-script(src="/js/okc-budget-tree.js",charset='utf-8')
-
++budgetOverview(2017,"data/fy2017/c4okc_fy2017.json")

_src/mixins/budget-overview.jade

@@ -0,0 +1,22 @@
+mixin budgetOverview(myYear,dataFilePath)
+
+  .container#chartContainer
+    style.
+
+    .row
+    .intro.col-md-8
+      h1 FY#{myYear} Budget Overview
+
+      p.description Click on a fund to see the departments that receive its funding. Click on that department to see its spending or revenue. To step out of the department, click ‘Budget’ until you reach the desired department.
+
+    .row#chart(data-json-file = "#{dataFilePath}")
+    table.row.treemap.table-striped#chart-table
+      thead
+        th Item
+        th Expense
+      tbody
+
+  script(src="http://code.jquery.com/jquery-1.7.2.min.js",charset='utf-8')
+  script(src="http://d3js.org/d3.v3.min.js"              ,charset='utf-8')
+  script(src="/js/data.js",charset='utf-8')
+  script(src="/js/okc-budget-tree.js",charset='utf-8')