Merge pull request #772 from /issues/770

Deceased chart - age groups metrics
sledilnik · Dec 31, 2020 · 5c28dfe · 5c28dfe
2 parents d2cdc53 + 34909a9
commit 5c28dfe
Show file tree

Hide file tree

Showing 23 changed files with 648 additions and 420 deletions.
diff --git a/TODO.md b/TODO.md
@@ -1,5 +1,9 @@
 # TODO
 
+- https://github.com/sledilnik/website/issues/770
+    - try using different colors
+        - using color transition from one color to another
+
 - new OWID export
     - return back the official URL, once it has been pushed to production
     - remove properties from DataPoint that we don't use

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -276,10 +276,12 @@
         "deceased": {
             "title": "Deaths",
             "titleMenu": "Deaths",
-            "deceasedToday": "Deaths per Day",
-            "deceasedTodayRelative": "Deaths per Day (relative)",
-            "deceasedToDate": "Deaths to Date",
-            "deceasedToDateRelative": "Deaths to Date (relative)",
+            "deceasedToday": "Deaths per day",
+            "deceasedTodayRelative": "Deaths per day (relative)",
+            "deceasedToDate": "Deaths to date",
+            "deceasedToDateRelative": "Deaths to date (relative)",
+            "deceasedByAgeToday": "Deaths by age (daily)",
+            "deceasedByAgeTodayRelative": "Deaths by age (daily, relative)",
             "deceased-icu": "ICU",
             "deceased-acute": "Acute Medical Unit",
             "deceased-care": "Care Hospital",

diff --git a/src/locales/sl.json b/src/locales/sl.json
@@ -776,6 +776,10 @@
             "deceasedTodayRelative": "Umrli na dan (relativno)",
             "deceasedToDate": "Umrli",
             "deceasedToDateRelative": "Umrli (relativno)",
+            "deceasedByAgeToDate": "Po starosti",
+            "deceasedByAgeToDateRelative": "Po starosti (rel.)",
+            "deceasedByAgeToday": "Po starosti na dan",
+            "deceasedByAgeTodayRelative": "Po starosti na dan (rel.)",
             "deceased-icu": "Intenzivna terapija",
             "deceased-acute": "Akutni oddelek",
             "deceased-care": "Negovalni oddelek",

diff --git a/src/visualizations/AgeGroupsTimelineViz/Analysis.fs b/src/visualizations/AgeGroupsTimelineViz/Analysis.fs
diff --git a/src/visualizations/AgeGroupsTimelineViz/Rendering.fs b/src/visualizations/AgeGroupsTimelineViz/Rendering.fs
@@ -1,8 +1,8 @@
 [<RequireQualifiedAccess>]
 module AgeGroupsTimelineViz.Rendering
 
-open System
-open Analysis
+open DataAnalysis.AgeGroupsTimeline
+open DataVisualization.ChartingTypes
 open Synthesis
 open Highcharts
 open Types
@@ -41,64 +41,10 @@ let update (msg: Msg) (state: State) : State * Cmd<Msg> =
         { state with RangeSelectionButtonIndex = buttonIndex }, Cmd.none
 
 let renderChartOptions state dispatch =
-
-    // map state data into a list needed for calculateCasesByAgeTimeline
-    let totalCasesByAgeGroupsList =
-        state.Data
-        |> List.map (fun point -> (point.Date, point.StatePerAgeToDate))
-
-    let totalCasesByAgeGroups =
-        mapDateTuplesListToArray totalCasesByAgeGroupsList
-
-    // calculate complete merged timeline
-    let timeline = calculateCasesByAgeTimeline totalCasesByAgeGroups
-
-    // get keys of all age groups
-    let allGroupsKeys = listAgeGroups timeline
-
-    let colorOfAgeGroup ageGroupIndex =
-        let colors =
-            [| "#FFEEBA"; "#FFDA6B";"#E9B825";"#AEEFDB";"#52C4A2";"#33AB87"
-               "#189A73";"#F4B2E0";"#D559B0";"#B01C83" |]
-        colors.[ageGroupIndex]
-
-    let mapPoint
-        (startDate: DateTime)
-        (daysFromStartDate: int)
-        (cases: CasesInAgeGroupForDay) =
-        let date = startDate |> Days.add daysFromStartDate
-
-        pojo {|
-             x = date |> jsTime12h :> obj
-             y = cases
-             date = I18N.tOptions "days.longerDate" {| date = date |}
-        |}
-
-    let mapAllPoints (groupTimeline: CasesInAgeGroupTimeline) =
-        let startDate = groupTimeline.StartDate
-        let timelineArray = groupTimeline.Data
-
-        timelineArray
-        |> Array.mapi (fun i cases -> mapPoint startDate i cases)
-
-    // generate all series
     let allSeries =
-        allGroupsKeys
-        |> List.mapi (fun index ageGroupKey ->
-            let points =
-                timeline
-                |> extractTimelineForAgeGroup
-                       ageGroupKey state.Metrics.MetricsType
-                |> mapAllPoints
-
-            pojo {|
-                 visible = true
-                 name = ageGroupKey.Label
-                 color = colorOfAgeGroup index
-                 data = points
-            |}
-        )
-        |> List.toArray
+        getAgeGroupTimelineAllSeriesData
+            state.Data state.Metrics.ValueCalculation
+            (fun dataPoint -> dataPoint.StatePerAgeToDate)
 
     let onRangeSelectorButtonClick(buttonIndex: int) =
         let res (_ : Event) =
@@ -108,7 +54,7 @@ let renderChartOptions state dispatch =
 
     let className = "covid19-infections"
     let baseOptions =
-        Highcharts.basicChartOptions
+        basicChartOptions
             ScaleType.Linear className
             state.RangeSelectionButtonIndex onRangeSelectorButtonClick
 
@@ -138,6 +84,7 @@ let renderChartOptions state dispatch =
                     match state.Metrics.ChartType with
                     | StackedBarNormal -> pojo {| stacking = "normal" |}
                     | StackedBarPercent -> pojo {| stacking = "percent" |}
+                    | _ -> invalidOp "not supported"
             |}
         legend = pojo {| enabled = true ; layout = "horizontal" |}
         tooltip = pojo {|
@@ -153,7 +100,7 @@ let renderChartContainer state dispatch =
         prop.className "highcharts-wrapper"
         prop.children [
             renderChartOptions state dispatch
-            |> Highcharts.chartFromWindow
+            |> chartFromWindow
         ]
     ]
 

diff --git a/src/visualizations/AgeGroupsTimelineViz/Synthesis.fs b/src/visualizations/AgeGroupsTimelineViz/Synthesis.fs
@@ -1,69 +1,29 @@
 module AgeGroupsTimelineViz.Synthesis
 
-open Types
-open AgeGroupsTimelineViz.Analysis
-open System.Collections.Generic
+open DataAnalysis.AgeGroupsTimeline
+open DataVisualization.ChartingTypes
 open System.Text
 open Fable.Core
 open JsInterop
 
-type CasesInAgeGroupForDay = int
-type CasesInAgeGroupTimeline = DatedArray<CasesInAgeGroupForDay>
-type CasesInAgeGroupSeries = {
-    AgeGroupKey: AgeGroupKey
-    Timeline: CasesInAgeGroupTimeline
-}
-
-type AllCasesInAgeGroupSeries = IDictionary<AgeGroupKey, CasesInAgeGroupSeries>
-
-type ChartType =
-    | StackedBarNormal
-    | StackedBarPercent
 
-type DisplayMetricsType = NewCases | ActiveCases
 type DisplayMetrics = {
     Id: string
-    MetricsType: DisplayMetricsType
+    ValueCalculation: ValueCalculationFormula
     ChartType: ChartType
 }
 
 let availableDisplayMetrics = [|
-    { Id = "newCases"; MetricsType = NewCases
+    { Id = "newCases"; ValueCalculation = Daily
       ChartType = StackedBarNormal }
-    { Id = "newCasesRelative"; MetricsType = NewCases
+    { Id = "newCasesRelative"; ValueCalculation = Daily
       ChartType = StackedBarPercent }
-    { Id = "activeCases"; MetricsType = ActiveCases
+    { Id = "activeCases"; ValueCalculation = Active
       ChartType = StackedBarNormal }
-    { Id = "activeCasesRelative"; MetricsType = ActiveCases
+    { Id = "activeCasesRelative"; ValueCalculation = Active
       ChartType = StackedBarPercent }
 |]
 
-let listAgeGroups (timeline: CasesByAgeGroupsTimeline): AgeGroupKey list  =
-    timeline.Data.[0]
-    |> List.map (fun group -> group.GroupKey)
-    |> List.sortBy (fun groupKey -> groupKey.AgeFrom)
-
-let extractTimelineForAgeGroup
-    ageGroupKey
-    (metricsType: DisplayMetricsType)
-    (casesTimeline: CasesByAgeGroupsTimeline)
-    : CasesInAgeGroupTimeline =
-
-    let newCasesTimeline =
-        casesTimeline
-        |> mapDatedArrayItems (fun dayGroupsData ->
-                    let dataForGroup =
-                        dayGroupsData
-                        |> List.find(fun group -> group.GroupKey = ageGroupKey)
-                    dataForGroup.All
-                    |> Utils.optionToInt
-                )
-    match metricsType with
-    | NewCases -> newCasesTimeline
-    | ActiveCases ->
-        newCasesTimeline
-        |> mapDatedArray (Statistics.calculateWindowedSumInt 14)
-
 let tooltipFormatter jsThis =
     let points: obj[] = jsThis?points
 
@@ -93,7 +53,7 @@ let tooltipFormatter jsThis =
                     let dataValue: int = dataPoint?y
 
                     match dataValue with
-                    | 0 -> ignore()
+                    | 0 -> ()
                     | _ ->
                         let format =
                             "<td style='color: {0}'>●</td>"+