Refactor before implementing appending territory of other level than country

Author: 64json

src/d3/geo-map.d3.ts

@@ -3,21 +3,21 @@ import { BaseD3, RenderOptions as BaseRenderOptions } from './base.d3';
 import * as topojson from 'topojson';
 import { GeometryCollection, Topology } from 'topojson-specification';
 import { Observable } from 'rxjs';
-import { GeoDatum } from '../datasets/queries/geo.query';
+import { GeoDatum, TerritoryLevel } from '../datasets/queries/geo.query';
 import * as GeoJSON from 'geojson';
 import { linearScale } from '../utils/misc';
 
 type CountryGeometry = GeoJSON.Polygon | GeoJSON.MultiPolygon;
-type CountrySelectionDatum =
-  GeoJSON.Feature<GeoJSON.Geometry, CountryGeometry>
-  | GeoJSON.FeatureCollection<GeoJSON.Geometry, CountryGeometry>;
 type WorldTopology = Topology<{ land: GeometryCollection, countries: GeometryCollection<CountryGeometry> }>;
 
 export interface RenderOptions extends BaseRenderOptions {
   topoJsonUrl: string;
   data$: Observable<GeoDatum[]>;
 }
 
+type AppendTerritoryPathFunction<L extends TerritoryLevel> =
+  (datum: GeoDatum<L>, maxValue: number) => d3.Selection<SVGPathElement, any, null, undefined> | null;
+
 export class GeoMapD3 extends BaseD3<RenderOptions> {
   static minOpacity = .2;
   static latitudeBounds = [-84, 84];
@@ -33,7 +33,7 @@ export class GeoMapD3 extends BaseD3<RenderOptions> {
   private landPath: d3.Selection<SVGPathElement, GeoJSON.FeatureCollection<GeoJSON.Geometry, {}>, null, undefined>;
   private boundaryPath: d3.Selection<SVGPathElement, GeoJSON.MultiLineString, null, undefined>;
   private dataG: d3.Selection<SVGGElement, unknown, null, undefined>;
-  private dataPaths: d3.Selection<SVGPathElement, CountrySelectionDatum, null, undefined>[];
+  private territoryPaths: d3.Selection<SVGPathElement, any, null, undefined>[];
 
   private static accessValue(datum: GeoDatum) {
     return datum.values.activeUsers;
@@ -181,7 +181,7 @@ export class GeoMapD3 extends BaseD3<RenderOptions> {
 
     this.lastTransform = transform;
 
-    [this.landPath, this.boundaryPath, ...this.dataPaths]
+    [this.landPath, this.boundaryPath, ...this.territoryPaths]
       .forEach(dataPath => dataPath.attr('d', this.geoPath));
   }
 
@@ -190,29 +190,63 @@ export class GeoMapD3 extends BaseD3<RenderOptions> {
 
   private renderData() {
     this.dataG = this.svg.insert('g', '.geo_map-boundary');
-    this.dataPaths = [];
+    this.territoryPaths = [];
   }
 
-  private updateData(data: GeoDatum[]) {
+  private updateData<L extends TerritoryLevel>(data: GeoDatum<L>[]) {
     this.dataG.html('');
 
-    const { colorPrimary, minOpacity, accessValue } = GeoMapD3;
+    const { accessValue } = GeoMapD3;
+    const maxValue = data.reduce((acc, datum) => Math.max(acc, accessValue(datum)), 0);
+    this.territoryPaths = data
+      .map(datum => this.appendTerritoryPath(datum, maxValue))
+      .filter((dataPath): dataPath is d3.Selection<SVGPathElement, any, null, undefined> => dataPath !== null);
+  }
+
+  private appendTerritoryPath<L extends TerritoryLevel>(datum: GeoDatum<L>, maxValue: number) {
+    const appendFunction = {
+      [TerritoryLevel.CONTINENT]: this.appendContinentPath,
+      [TerritoryLevel.SUBCONTINENT]: this.appendSubcontinentPath,
+      [TerritoryLevel.COUNTRY]: this.appendCountryPath,
+      [TerritoryLevel.CITY]: this.appendCityPath,
+    }[datum.territory.level] as AppendTerritoryPathFunction<L>;
+    return appendFunction.call(this, datum, maxValue);
+  }
+
+  private appendContinentPath: AppendTerritoryPathFunction<TerritoryLevel.CONTINENT> = (datum, maxValue) => {
+    return null;
+  };
+
+  private appendSubcontinentPath: AppendTerritoryPathFunction<TerritoryLevel.SUBCONTINENT> = (datum, maxValue) => {
+    return null;
+  };
 
+  private appendCountryPath: AppendTerritoryPathFunction<TerritoryLevel.COUNTRY> = (datum, maxValue) => {
+    const { accessValue } = GeoMapD3;
     const { countries } = this.worldTopology.objects;
-    const maxValue = data.reduce((acc, datum) => Math.max(acc, accessValue(datum)), 0);
+    const countryGeometryObject = countries.geometries.find(geometry => geometry.id === datum.territory.id);
+    if (!countryGeometryObject) {
+      return null;
+    }
+    const valueRatio = accessValue(datum) / maxValue;
+    return this.dataG
+      .append('path')
+      .datum(topojson.feature(this.worldTopology, countryGeometryObject))
+      .attr('d', this.geoPath)
+      .call(this.styleTerritory(valueRatio));
+  };
+
+  private appendCityPath: AppendTerritoryPathFunction<TerritoryLevel.CITY> = (datum, maxValue) => {
+    return null;
+  };
+
+  private styleTerritory<T extends SVGGraphicsElement>(valueRatio: number) {
+    const { colorPrimary, minOpacity } = GeoMapD3;
 
-    this.dataPaths = data.map(datum => {
-      const countryGeometryObject = countries.geometries.find(geometry => geometry.id === datum.id);
-      if (!countryGeometryObject) {
-        return null;
-      }
-      const valueRatio = accessValue(datum) / maxValue;
-      return this.dataG
-        .append('path')
-        .datum(topojson.feature(this.worldTopology, countryGeometryObject))
-        .attr('d', this.geoPath)
+    return (selection: d3.Selection<SVGPathElement, any, null, undefined>) => {
+      selection
         .attr('fill', colorPrimary)
         .attr('opacity', minOpacity + valueRatio * (1 - minOpacity));
-    }).filter((dataPath): dataPath is d3.Selection<SVGPathElement, CountrySelectionDatum, null, undefined> => dataPath !== null);
+    };
   }
 }

src/d3/line-chart.d3.ts

@@ -105,8 +105,8 @@ export class LineChartD3 extends XYChartD3<LegendItemStyle> {
       ...LineChartD3.defaultLegendItemStyle,
       ...style ?? {},
     };
-    return (stylePath: d3.Selection<T, unknown, null, undefined>) => {
-      stylePath
+    return (selection: d3.Selection<T, unknown, null, undefined>) => {
+      selection
         .attr('stroke', color)
         .attr('stroke-width', width)
         .attr('opacity', opacity)

src/datasets/queries/geo.query.ts

@@ -9,26 +9,26 @@ export enum TerritoryLevel {
   CITY,
 }
 
-export interface Territory {
-  level: TerritoryLevel;
+export interface Territory<L extends TerritoryLevel> {
+  level: L;
   id: string;
 }
 
-export interface GeoQueryOptions {
+export interface GeoQueryOptions<L extends TerritoryLevel> {
   /** The date range to filter geo data with. */
   range: [Date, Date];
   /** The territory to filter geo data with. */
-  territory?: Territory;
+  territory?: Territory<TerritoryLevel>;
   /** The territory level of each geo datum. */
-  unit: TerritoryLevel;
+  unit: L;
 }
 
-export interface GeoDatum {
-  id: string;
+export interface GeoDatum<L extends TerritoryLevel = TerritoryLevel> {
+  territory: Territory<L>;
   values: MeasureValues;
 }
 
-export type GeoQuery = (options: GeoQueryOptions) => GeoDatum[];
+export type GeoQuery<L extends TerritoryLevel = TerritoryLevel> = (options: GeoQueryOptions<L>) => GeoDatum<L>[];
 
 export interface City {
   countryId: string;
@@ -47,11 +47,11 @@ export interface City {
  * @param measureNames The measures to query.
  * @param cities The mapping from city id to city object.
  */
-export function createGeoQuery<S>(
+export function createGeoQuery<L extends TerritoryLevel = TerritoryLevel>(
   dataCube: DataCube,
   measureNames: string[],
   cities: Record<string, City>,
-): GeoQuery {
+): GeoQuery<L> {
   return queryOptions => {
     const [startDate, endDate] = queryOptions.range;
 
@@ -85,11 +85,17 @@ export function createGeoQuery<S>(
       }
     }
 
-    return Object.entries(rowGroups).map(([id, values]) => ({ id, values }));
+    return Object.entries(rowGroups).map(([id, values]) => ({
+      territory: {
+        level: queryOptions.unit,
+        id,
+      },
+      values,
+    }));
   };
 }
 
-function getCityIds(cities: Record<string, City>, territory: Territory) {
+function getCityIds(cities: Record<string, City>, territory: Territory<TerritoryLevel>) {
   const idAccessor = getIdAccessor(territory.level);
   return Object.entries(cities)
     .filter(cityEntry => idAccessor(cityEntry) === territory.id)

tsconfig.json

@@ -19,6 +19,7 @@
     "strictFunctionTypes": true,
     "removeComments": true,
     "preserveConstEnums": true,
+    "strictBindCallApply": true,
     "resolveJsonModule": true
   },
   "angularCompilerOptions": {

tslint.json

@@ -82,7 +82,8 @@
     ],
     "semicolon": {
       "options": [
-        "always"
+        "always",
+        "strict-bound-class-methods"
       ]
     },
     "space-before-function-paren": {