Merge pull request #8 from reside-ic/mrc-1876

mrc-1876 proof of concept for cost calculations in tables
reside-ic · Nov 17, 2020 · d906e73 · d906e73
2 parents 7253cc0 + fa69a10
commit d906e73
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 53 deletions.
diff --git a/mint/DynamicTable.vue b/mint/DynamicTable.vue
@@ -0,0 +1,51 @@
+<template>
+    <table>
+        <thead>
+        <tr>
+            <th v-for="col in config">{{col.displayName}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="row in filteredData">
+            <td v-for="col in config">
+                <span>{{evaluateCell(col, row)}}</span>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</template>
+<script lang="ts">
+    import {defineComponent} from "@vue/composition-api";
+    import {FilteringProps, useFiltering} from "./filteredData";
+    import {ColumnDefinition} from "./fakeAPIData";
+    import {useTransformation} from "./tranformedData";
+    import numeral from "numeral";
+
+    interface Props extends FilteringProps {
+        config: ColumnDefinition[]
+    }
+
+    export default defineComponent({
+        props: {data: Array, config: Array, settings: Object},
+        setup(props: Props) {
+            const {filteredData} = useFiltering(props);
+            const {evaluateFormula} = useTransformation(props);
+            const evaluateCell = (col: ColumnDefinition, row: any) => {
+                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.format) {
+                    value = numeral(value).format(col.format)
+                }
+                return value;
+            };
+            return {
+                filteredData,
+                evaluateCell
+            }
+        }
+    })
+</script>
diff --git a/mint/Impact.vue b/mint/Impact.vue
@@ -28,23 +28,23 @@
                           :layout="cases.layout"></plotly-graph>
         </div>
         <div class="my-5">
-            <impact-table :columns="columns" :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 {casesAvertedGraph, columns, prevGraph, settings, wideData} from "./fakeAPIData";
+    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,
-                columns: columns,
+                tableConfig: tableConfig,
                 wideData: wideData,
                 longData: [] as any[],
                 prevalence: prevGraph,

diff --git a/mint/ImpactTable.vue b/mint/ImpactTable.vue
diff --git 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,46 @@ 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",
+            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",
+            format: "0.0"
+        },
+        {
+            displayName: "Total costs",
+            valueCol: "intervention",
+            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
+    valueTransform?: Dictionary<string>
+    format?: string
+}
 
 export interface SeriesDefinition {
     x?: any[]
@@ -222,6 +253,7 @@ export interface SeriesDefinition {
     id?: string,
     name?: string,
     type?: string
+
     [propName: string]: any;
 }
 

diff --git 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
@@ -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[]

diff --git 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
diff --git 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",