Merge pull request #2 from fkleon/feature-mixed-bag

Mixed bag of changes

package.json

@@ -29,7 +29,7 @@
   "devDependencies": {
     "@types/jsdom": "^21.1.6",
     "@types/mithril": "^2.2.6",
-    "@types/node": "20.8.2",
+    "@types/node": "20.11.5",
     "@types/ospec": "^4.0.10",
     "css-loader": "^6.11.0",
     "gts": "^5.3.0",
@@ -59,8 +59,7 @@
     }
   },
   "eslintIgnore": [
-    "build/",
-    "dist/"
+    "build/"
   ],
   "prettier": "gts/.prettierrc.json"
 }

src/data/who.ts

@@ -494,14 +494,22 @@ function options(axisXUnit: string, axisYUnit: string): LineChartOptions {
 }
 
 type ChartConfig = {
+  /** Name of the chart. */
   label: string;
+  /** Percentile data sourced from the WHO growth tables. */
   data: LineChartData;
+  /** Chart options. */
   options: LineChartOptions;
+  /** The resolution of the chart as time unit, e.g. "DAYS" if
+      up to one measurement per day should be displayed. */
   timeUnit: ChronoUnit;
+  /** Offset applied before measurements are included,
+      used for charts that don't start from birth.  */
   offset: Period;
+  /** Sex that this chart applies to. */
   sex: Sex;
+  /**Function to access the relevant data point from measurements. */
   accessorFn: (m: Measurement) => number | undefined;
-  //source: 'weight' | 'length' | 'head';
 };
 type Dict<V> = {
   [key: string]: V;

src/models/export.ts

@@ -10,6 +10,7 @@ function b64EncodeUnicode(str: string) {
   );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const reviver = (key: string, value: any): any => {
   if (key === 'dateOfBirth' || key === 'date') {
     return LocalDate.parse(value);

src/models/state.ts

@@ -1,6 +1,6 @@
 import {LocalDate, Period} from '@js-joda/core';
 import charts, {ChartConfig} from '../data/who';
-import {Series} from 'chartist';
+import {SeriesObject} from 'chartist';
 
 // State and actions definitions
 type MitosisAttr<S, A> = {
@@ -173,7 +173,7 @@ const MeasurementActions = (
 interface Chart {
   name: string;
   config?: ChartConfig;
-  currentData: Series[];
+  data: SeriesObject[];
 }
 
 interface IChartActions {
@@ -183,7 +183,7 @@ interface IChartActions {
 const ChartState = (): Chart => ({
   name: 'who-wfa-boys-13-weeks',
   config: undefined,
-  currentData: [],
+  data: [],
 });
 
 const ChartActions = (chart: Chart): IChartActions => ({

src/styles/chart.scss

@@ -1,100 +1,100 @@
 @use 'chartist/dist/index' as chartist with (
-    $ct-series-colors: (
-        // percentiles
-        #d70206,
-        #e68507,
-        #59922b,
-        // children
-        #0544d3,
-        #d17905,
-        #59922b,
-        #d70206,
-        #6b0392,
-        #f4c63d,
-        #453d3f,
-        #e6805e,
-        #dda458,
-        #eacf7d,
-        #86797d,
-        #b2c326,
-        #6188e2,
-        #a748ca
-    )
+  $ct-series-colors: (
+    // percentiles
+    #d70206,
+    #e68507,
+    #59922b,
+    // children
+    #0544d3,
+    #d17905,
+    #59922b,
+    #d70206,
+    #6b0392,
+    #f4c63d,
+    #453d3f,
+    #e6805e,
+    #dda458,
+    #eacf7d,
+    #86797d,
+    #b2c326,
+    #6188e2,
+    #a748ca,
+  )
 );
 
 #chart {
-    height: 50vh;
+  height: 50vh;
 }
 
 /* Use this selector to override the line style on a given series */
 .ct-series-a .ct-line {
-    /* Set the colour of this series line */
-    //stroke: red;
-    /* Control the thickness of your lines */
-    stroke-width: 1px;
-    /* Create a dashed line with a pattern */
-    stroke-dasharray: 10px 10px;
+  /* Set the colour of this series line */
+  //stroke: red;
+  /* Control the thickness of your lines */
+  stroke-width: 1px;
+  /* Create a dashed line with a pattern */
+  stroke-dasharray: 10px 10px;
 }
 
 .ct-series-b .ct-line {
-    //stroke: orange;
-    stroke-width: 1px;
-    stroke-dasharray: 5px 5px;
+  //stroke: orange;
+  stroke-width: 1px;
+  stroke-dasharray: 5px 5px;
 }
 
 .ct-series-c .ct-line {
-    //stroke: green;
-    stroke-width: 1px;
-    stroke-dasharray: 10px 10px;
+  //stroke: green;
+  stroke-width: 1px;
+  stroke-dasharray: 10px 10px;
 }
 
 // percentiles
 .ct-series-a .ct-point,
 .ct-series-b .ct-point,
 .ct-series-c .ct-point {
-    display: none;
+  display: none;
 }
 
 .ct-legend {
-    margin-top: 1em;
+  margin-top: 1em;
+  position: relative;
+  z-index: 10;
+
+  li {
+    //display: inline flow-root;
     position: relative;
-    z-index: 10;
+    padding-left: 23px;
+    padding-right: 23px;
+    margin-bottom: 3px;
+  }
 
-    li {
-        //display: inline flow-root;
-        position: relative;
-        padding-left: 23px;
-        padding-right: 23px;
-        margin-bottom: 3px;
-    }
+  li:before {
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    left: 0;
+    content: '';
+    border: 3px solid transparent;
+    border-radius: 2px;
+  }
 
-    li:before {
-        width: 12px;
-        height: 12px;
-        position: absolute;
-        left: 0;
-        content: '';
-        border: 3px solid transparent;
-        border-radius: 2px;
-    }
+  li.inactive:before {
+    background: transparent;
+  }
 
-    li.inactive:before {
-        background: transparent;
-    }
+  &.ct-legend-inside {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
 
-    &.ct-legend-inside {
-        position: absolute;
-        top: 0;
-        right: 0;
-    }
-
-    @for $i from 1 through length(chartist.$ct-series-names) {
-        $n: nth(chartist.$ct-series-names, $i);
-        $c: nth(chartist.$ct-series-colors, $i);
+  @for $i from 1 through length(chartist.$ct-series-names) {
+    $n: nth(chartist.$ct-series-names, $i);
+    $c: nth(chartist.$ct-series-colors, $i);
 
-        .ct-series-#{$n}:before {
-            background-color: $c;
-            border-color: $c;
-        }
+    .ct-series-#{$n}:before {
+      background-color: $c;
+      border-color: $c;
     }
-}
+  }
+}