From 6c7093b6ff608b99378c150783e0912a6251d7b9 Mon Sep 17 00:00:00 2001
From: Alex <alex.hill@gmail.com>
Date: Tue, 17 Nov 2020 12:41:01 +0000
Subject: [PATCH 1/4] proof of concept for cost table

---
 mint/Impact.vue              |  6 +++---
 mint/ImpactTable.vue         | 31 +++++++++++++++++++++----------
 mint/fakeAPIData.ts          | 36 +++++++++++++++++++++++++-----------
 mint/index.ts                |  1 +
 mint/longFormatDataSeries.ts |  1 -
 5 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/mint/Impact.vue b/mint/Impact.vue
index 313046a..d196058 100644
--- a/mint/Impact.vue
+++ b/mint/Impact.vue
@@ -28,7 +28,7 @@
                           :layout="cases.layout"></plotly-graph>
         </div>
         <div class="my-5">
-            <impact-table :columns="columns" :data="wideData" :settings="selectedSettings"></impact-table>
+            <impact-table :config="tableConfig" :data="wideData" :settings="selectedSettings"></impact-table>
         </div>
     </div>
 </template>
@@ -36,7 +36,7 @@
 
     import Vue from "vue";
     import ImpactTable from "./ImpactTable.vue";
-    import {casesAvertedGraph, columns, prevGraph, settings, wideData} from "./fakeAPIData";
+    import {casesAvertedGraph, prevGraph, settings, tableConfig, wideData} from "./fakeAPIData";
     import PlotlyGraph from "./PlotlyGraph.vue";
 
     export default Vue.extend({
@@ -44,7 +44,7 @@
         data() {
             return {
                 settings: settings,
-                columns: columns,
+                tableConfig: tableConfig,
                 wideData: wideData,
                 longData: [] as any[],
                 prevalence: prevGraph,
diff --git a/mint/ImpactTable.vue b/mint/ImpactTable.vue
index 15cd234..79200ed 100644
--- a/mint/ImpactTable.vue
+++ b/mint/ImpactTable.vue
@@ -2,13 +2,13 @@
     <table>
         <thead>
         <tr>
-            <th v-for="key in Object.keys(columns)">{{columns[key]}}</th>
+            <th v-for="col in config">{{col.displayName}}</th>
         </tr>
         </thead>
         <tbody>
         <tr v-for="row in filteredData">
-            <td v-for="cell in row">
-                {{cell}}
+            <td v-for="col in config">
+                <span>{{evaluateCell(col, row)}}</span>
             </td>
         </tr>
         </tbody>
@@ -17,19 +17,30 @@
 <script lang="ts">
     import {defineComponent} from "@vue/composition-api";
     import {FilteringProps, useFiltering} from "./filteredData";
-    import {Dictionary} from "vuex";
+    import {ColumnDefinition} from "./fakeAPIData";
+    import {useTransformation} from "./tranformedData";
 
     interface Props extends FilteringProps {
-        columns: Dictionary<string>
+        config: ColumnDefinition[]
     }
-    
+
     export default defineComponent({
-        props: {data: Array, columns: Object, settings: Object},
+        props: {data: Array, config: Array, settings: Object},
         setup(props: Props) {
-            const {filteredData} = useFiltering(props)
+            const {filteredData} = useFiltering(props);
+            const {evaluateFormula} = useTransformation(props);
+            const evaluateCell = (col: ColumnDefinition, row: any) => {
+                if (!col.valueFormula) {
+                    return row[col.valueCol]
+                }
+                if (col.valueFormula[row[col.valueCol]]) {
+                    return evaluateFormula(col.valueFormula[row[col.valueCol]])
+                } else return "";
+            };
             return {
-                filteredData
+                filteredData,
+                evaluateCell
             }
         }
     })
-</script>
\ No newline at end of file
+</script>
diff --git a/mint/fakeAPIData.ts b/mint/fakeAPIData.ts
index ccd5dcb..a5634ae 100644
--- a/mint/fakeAPIData.ts
+++ b/mint/fakeAPIData.ts
@@ -1,4 +1,6 @@
 // this is the table data that would be returned after the baseline inputs are set
+import {Dictionary} from "vuex";
+
 export const wideData = [
     {
         "intervention": "none",
@@ -203,17 +205,28 @@ export const wideData = [
     }
 ];
 
-export const columns =
-    {
-        "intervention": "Intervention",
-        "net_use": "Net use",
-        "prev_year_1": "Prevalence Under 5 yrs: Yr 1 post intervention",
-        "prev_year_2": "Prevalence Under 5 yrs: Yr 2 post intervention",
-        "prev_year_3": "Prevalence Under 5 yrs: Yr 3 post intervention",
-        "cases_averted": "Cases averted across 3 yrs since intervention",
-        "cases_averted_high": "Upper bound for cases averted",
-        "cases_averted_low": "Lower bound for cases averted"
-    };
+export const tableConfig: ColumnDefinition[] =
+    [
+        {displayName: "Intervention", valueCol: "intervention"},
+        {displayName: "Net use", valueCol: "net_use"},
+        {displayName: "Prevalence Under 5 yrs: Yr 1 post intervention", valueCol: "prev_year_1"},
+        {
+            displayName: "Total costs",
+            valueCol: "intervention",
+            valueFormula: {
+                "none": "({population} / {procure_people_per_net}) * {price_net_standard}",
+                "ITN": "({population} / {procure_people_per_net}) * {price_net_standard}  + ({price_delivery} * {population} * (({procure_buffer} + 100)/ 100))",
+                "IRS": "({population} / {procure_people_per_net}) * {price_net_standard} + 3 * ({price_irs_per_person} * {population})",
+                "IRS + ITN": "({population} / {procure_people_per_net}) * {price_net_standard} + ({price_delivery} * {population} * (({procure_buffer} + 100) / 100)) + 3 * ({price_irs_per_person} * {population})"
+            }
+        }
+    ];
+
+export interface ColumnDefinition {
+    displayName: string
+    valueCol: string
+    valueFormula?: Dictionary<string>
+}
 
 export interface SeriesDefinition {
     x?: any[]
@@ -222,6 +235,7 @@ export interface SeriesDefinition {
     id?: string,
     name?: string,
     type?: string
+
     [propName: string]: any;
 }
 
diff --git a/mint/index.ts b/mint/index.ts
index e1f8e65..0bfd502 100644
--- a/mint/index.ts
+++ b/mint/index.ts
@@ -14,3 +14,4 @@ new Vue({
         Cost
     }
 });
+
diff --git a/mint/longFormatDataSeries.ts b/mint/longFormatDataSeries.ts
index e1dce5d..a5502b3 100644
--- a/mint/longFormatDataSeries.ts
+++ b/mint/longFormatDataSeries.ts
@@ -3,7 +3,6 @@ import {LongFormatSeriesMetadata, SeriesDefinition, SeriesMetadata, WideFormatSe
 import {FilteringProps, useFiltering} from "./filteredData";
 import {Dictionary} from "vuex";
 import {useTransformation} from "./tranformedData";
-import {def} from "@vue/composition-api/dist/utils";
 
 interface Props extends FilteringProps {
     series: SeriesDefinition[]

From 2dba11c4d69934dbea539a6b75b4b081a8ae5cb1 Mon Sep 17 00:00:00 2001
From: Alex <alex.hill@gmail.com>
Date: Tue, 17 Nov 2020 12:42:34 +0000
Subject: [PATCH 2/4] rename table

---
 mint/{ImpactTable.vue => DynamicTable.vue} | 0
 mint/Impact.vue                            | 6 +++---
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename mint/{ImpactTable.vue => DynamicTable.vue} (100%)

diff --git a/mint/ImpactTable.vue b/mint/DynamicTable.vue
similarity index 100%
rename from mint/ImpactTable.vue
rename to mint/DynamicTable.vue
diff --git a/mint/Impact.vue b/mint/Impact.vue
index d196058..864cac3 100644
--- a/mint/Impact.vue
+++ b/mint/Impact.vue
@@ -28,19 +28,19 @@
                           :layout="cases.layout"></plotly-graph>
         </div>
         <div class="my-5">
-            <impact-table :config="tableConfig" :data="wideData" :settings="selectedSettings"></impact-table>
+            <dynamic-table :config="tableConfig" :data="wideData" :settings="selectedSettings"></dynamic-table>
         </div>
     </div>
 </template>
 <script lang="ts">
 
     import Vue from "vue";
-    import ImpactTable from "./ImpactTable.vue";
+    import DynamicTable from "./DynamicTable.vue";
     import {casesAvertedGraph, prevGraph, settings, tableConfig, wideData} from "./fakeAPIData";
     import PlotlyGraph from "./PlotlyGraph.vue";
 
     export default Vue.extend({
-        components: {PlotlyGraph, ImpactTable},
+        components: {PlotlyGraph, DynamicTable},
         data() {
             return {
                 settings: settings,

From 89fbda8df64049f8bcf4c4056186237bcc4d78d7 Mon Sep 17 00:00:00 2001
From: Alex <alex.hill@gmail.com>
Date: Tue, 17 Nov 2020 13:07:54 +0000
Subject: [PATCH 3/4] allow string transforms and rounding

---
 mint/DynamicTable.vue  | 15 ++++++++++-----
 mint/fakeAPIData.ts    | 24 +++++++++++++++++++-----
 mint/tranformedData.ts |  2 +-
 package-lock.json      | 12 ++++++++++++
 package.json           |  2 ++
 5 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/mint/DynamicTable.vue b/mint/DynamicTable.vue
index 79200ed..344cf4b 100644
--- a/mint/DynamicTable.vue
+++ b/mint/DynamicTable.vue
@@ -19,6 +19,7 @@
     import {FilteringProps, useFiltering} from "./filteredData";
     import {ColumnDefinition} from "./fakeAPIData";
     import {useTransformation} from "./tranformedData";
+    import numeral from "numeral";
 
     interface Props extends FilteringProps {
         config: ColumnDefinition[]
@@ -30,12 +31,16 @@
             const {filteredData} = useFiltering(props);
             const {evaluateFormula} = useTransformation(props);
             const evaluateCell = (col: ColumnDefinition, row: any) => {
-                if (!col.valueFormula) {
-                    return row[col.valueCol]
+                let value = "";
+                if (!col.valueTransform) {
+                    value = row[col.valueCol]
+                } else if (col.valueTransform[row[col.valueCol]]) {
+                    value = evaluateFormula(col.valueTransform[row[col.valueCol]])
                 }
-                if (col.valueFormula[row[col.valueCol]]) {
-                    return evaluateFormula(col.valueFormula[row[col.valueCol]])
-                } else return "";
+                if (col.format) {
+                    value = numeral(value).format(col.format)
+                }
+                return value;
             };
             return {
                 filteredData,
diff --git a/mint/fakeAPIData.ts b/mint/fakeAPIData.ts
index a5634ae..1437425 100644
--- a/mint/fakeAPIData.ts
+++ b/mint/fakeAPIData.ts
@@ -207,25 +207,39 @@ export const wideData = [
 
 export const tableConfig: ColumnDefinition[] =
     [
-        {displayName: "Intervention", valueCol: "intervention"},
+        {
+            displayName: "Intervention",
+            valueCol: "intervention",
+            valueTransform: {
+                "none": "'none'",
+                "ITN": "'display name for ITN'",
+                "IRS": "'display name for IRS'",
+                "IRS + ITN": "'display name for IRS + ITN'"
+            }
+        },
         {displayName: "Net use", valueCol: "net_use"},
-        {displayName: "Prevalence Under 5 yrs: Yr 1 post intervention", valueCol: "prev_year_1"},
+        {
+            displayName: "Prevalence Under 5 yrs: Yr 1 post intervention", valueCol: "prev_year_1",
+            format: "0.0"
+        },
         {
             displayName: "Total costs",
             valueCol: "intervention",
-            valueFormula: {
+            valueTransform: {
                 "none": "({population} / {procure_people_per_net}) * {price_net_standard}",
                 "ITN": "({population} / {procure_people_per_net}) * {price_net_standard}  + ({price_delivery} * {population} * (({procure_buffer} + 100)/ 100))",
                 "IRS": "({population} / {procure_people_per_net}) * {price_net_standard} + 3 * ({price_irs_per_person} * {population})",
                 "IRS + ITN": "({population} / {procure_people_per_net}) * {price_net_standard} + ({price_delivery} * {population} * (({procure_buffer} + 100) / 100)) + 3 * ({price_irs_per_person} * {population})"
-            }
+            },
+            format: "0.00"
         }
     ];
 
 export interface ColumnDefinition {
     displayName: string
     valueCol: string
-    valueFormula?: Dictionary<string>
+    valueTransform?: Dictionary<string>
+    format?: string
 }
 
 export interface SeriesDefinition {
diff --git a/mint/tranformedData.ts b/mint/tranformedData.ts
index f7d8de0..b52b9cd 100644
--- a/mint/tranformedData.ts
+++ b/mint/tranformedData.ts
@@ -9,7 +9,7 @@ export function useTransformation(props: TransformationProps) {
     const evaluateFormula = (formula: string) => {
         const interpolatedFormula = formula.replace(/\{([^}]+)\}/g,
             (match) => props.settings[match.replace(/\{|\}/g, "")]);
-       return Math.round(evaluate(interpolatedFormula));
+        return evaluate(interpolatedFormula);
     };
     return {evaluateFormula}
 }
diff --git a/package-lock.json b/package-lock.json
index 0137457..86bc08d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2563,6 +2563,12 @@
         "decimal.js": "^10.0.0"
       }
     },
+    "@types/numeral": {
+      "version": "0.0.28",
+      "resolved": "https://registry.npmjs.org/@types/numeral/-/numeral-0.0.28.tgz",
+      "integrity": "sha512-Sjsy10w6XFHDktJJdXzBJmoondAKW+LcGpRFH+9+zXEDj0cOH8BxJuZA9vUDSMAzU1YRJlsPKmZEEiTYDlICLw==",
+      "dev": true
+    },
     "@types/plotly.js": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/@types/plotly.js/-/plotly.js-0.0.4.tgz",
@@ -13510,6 +13516,12 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
       "dev": true
     },
+    "numeral": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz",
+      "integrity": "sha1-StCAk21EPCVhrtnyGX7//iX05QY=",
+      "dev": true
+    },
     "numeric": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/numeric/-/numeric-1.2.6.tgz",
diff --git a/package.json b/package.json
index 2545463..1016fa1 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@types/d3-scale-chromatic": "^1.3.1",
     "@types/jest": "^24.0.15",
     "@types/mathjs": "^6.0.6",
+    "@types/numeral": "0.0.28",
     "@types/qs": "^6.5.3",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^7.0.0-bridge.0",
@@ -39,6 +40,7 @@
     "jest-teamcity-reporter": "^0.9.0",
     "jquery": "^3.4.1",
     "mathjs": "^7.5.1",
+    "numeral": "^2.0.6",
     "qs": "^6.8.0",
     "ts-jest": "^24.0.2",
     "ts-loader": "^6.0.4",

From fa69a1015fea8fd4201780352ed59fa3b35edf8e Mon Sep 17 00:00:00 2001
From: Alex <alex.hill@gmail.com>
Date: Tue, 17 Nov 2020 13:08:50 +0000
Subject: [PATCH 4/4] format for clarity

---
 mint/fakeAPIData.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/mint/fakeAPIData.ts b/mint/fakeAPIData.ts
index 1437425..2b825fa 100644
--- a/mint/fakeAPIData.ts
+++ b/mint/fakeAPIData.ts
@@ -217,9 +217,13 @@ export const tableConfig: ColumnDefinition[] =
                 "IRS + ITN": "'display name for IRS + ITN'"
             }
         },
-        {displayName: "Net use", valueCol: "net_use"},
         {
-            displayName: "Prevalence Under 5 yrs: Yr 1 post intervention", valueCol: "prev_year_1",
+            displayName: "Net use",
+            valueCol: "net_use"
+        },
+        {
+            displayName: "Prevalence Under 5 yrs: Yr 1 post intervention",
+            valueCol: "prev_year_1",
             format: "0.0"
         },
         {