GeoJSON based Map support

package.json

@@ -47,7 +47,9 @@
     "d3-brush": "^3.0.0",
     "d3-color": "^3.1.0",
     "d3-ease": "^3.0.1",
+    "d3-fetch": "^3.0.1",
     "d3-format": "^3.1.0",
+    "d3-geo": "^3.1.1",
     "d3-hierarchy": "^3.1.0",
     "d3-interpolate": "^3.0.1",
     "d3-sankey": "^0.12.3",
@@ -56,12 +58,15 @@
     "d3-shape": "^3.2.0",
     "d3-time-format": "^3.0.0",
     "d3-transition": "^3.0.1",
+    "d3-zoom": "^3.0.0",
     "emoji-flags": "^1.2.0",
+    "lodash": "^4.17.21",
     "moment-timezone": "^0.5.40",
     "ng-in-viewport": "^6.1.5",
     "ngx-moment": "^5.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.5.3 || ^7.4.0",
+    "topojson-client": "^3.1.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
@@ -80,15 +85,20 @@
     "@swimlane/prettier-config-swimlane": "^3.0.2",
     "@types/d3-array": "^2.12.1",
     "@types/d3-ease": "^2.0.0",
+    "@types/d3-fetch": "^3.0.7",
+    "@types/d3-geo": "^3.1.0",
     "@types/d3-interpolate": "^2.0.0",
     "@types/d3-scale": "^3.3.0",
     "@types/d3-selection": "^2.0.0",
     "@types/d3-shape": "^2.1.0",
     "@types/d3-transition": "^2.0.0",
+    "@types/d3-zoom": "^3.0.8",
     "@types/jasmine": "^3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/json-schema": "^7.0.4",
+    "@types/lodash": "^4.17.1",
     "@types/node": "^12.11.1",
+    "@types/topojson-client": "^3.1.4",
     "@typescript-eslint/eslint-plugin": "5.11.0",
     "@typescript-eslint/parser": "5.11.0",
     "angular-cli-ghpages": "^0.6.2",

projects/swimlane/ngx-charts/package.json

@@ -32,8 +32,8 @@
   "peerDependencies": {
     "@angular/animations": ">=12.0.0",
     "@angular/cdk": ">=12.0.0",
-    "@angular/core": ">=12.0.0",
     "@angular/common": ">=12.0.0",
+    "@angular/core": ">=12.0.0",
     "@angular/forms": ">=12.0.0",
     "@angular/platform-browser": ">=12.0.0",
     "@angular/platform-browser-dynamic": ">=12.0.0",
@@ -45,6 +45,7 @@
     "d3-color": "^3.1.0",
     "d3-ease": "^3.0.1",
     "d3-format": "^3.1.0",
+    "d3-geo": "^3.1.1",
     "d3-hierarchy": "^3.1.0",
     "d3-interpolate": "^3.0.1",
     "d3-sankey": "^0.12.3",
@@ -53,6 +54,7 @@
     "d3-shape": "^3.2.0",
     "d3-time-format": "^3.0.0",
     "d3-transition": "^3.0.1",
+    "lodash": "^4.17.21",
     "rfdc": "^1.3.0",
     "tslib": "^2.0.0"
   },

projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts

@@ -1,20 +1,21 @@
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 import {
-  ElementRef,
-  NgZone,
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
-  Input,
-  Output,
+  ElementRef,
   EventEmitter,
-  AfterViewInit,
-  OnDestroy,
+  Inject,
+  Input,
+  NgZone,
   OnChanges,
-  SimpleChanges,
+  OnDestroy,
+  OnInit,
+  Output,
   PLATFORM_ID,
-  Inject,
-  OnInit
+  SimpleChanges
 } from '@angular/core';
+import { cloneDeep } from 'lodash';
 
 import { fromEvent as observableFromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -80,7 +81,7 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
     if (this.results) {
       this.results = this.cloneData(this.results);
     } else {
-      this.results = [];
+      (<any>this.results) = [];
     }
 
     if (this.view) {
@@ -181,42 +182,6 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
    * @memberOf BaseChart
    */
   private cloneData(data): any {
-    const results = [];
-
-    for (const item of data) {
-      const copy = {};
-
-      if (item['name'] !== undefined) {
-        copy['name'] = item['name'];
-      }
-
-      if (item['value'] !== undefined) {
-        copy['value'] = item['value'];
-      }
-
-      if (item['series'] !== undefined) {
-        copy['series'] = [];
-        for (const seriesItem of item['series']) {
-          const seriesItemCopy = Object.assign({}, seriesItem);
-          copy['series'].push(seriesItemCopy);
-        }
-      }
-
-      if (item['extra'] !== undefined) {
-        copy['extra'] = JSON.parse(JSON.stringify(item['extra']));
-      }
-
-      if (item['source'] !== undefined) {
-        copy['source'] = item['source'];
-      }
-
-      if (item['target'] !== undefined) {
-        copy['target'] = item['target'];
-      }
-
-      results.push(copy);
-    }
-
-    return results;
+    return cloneDeep(data);
   }
 }

projects/swimlane/ngx-charts/src/lib/common/types/view-dimension.interface.ts

@@ -4,3 +4,7 @@ export interface ViewDimensions {
   xOffset?: number;
   yOffset?: number;
 }
+
+export interface Results {
+  [key: string]: any;
+}

projects/swimlane/ngx-charts/src/lib/geo-map/geo-map.component.ts

@@ -0,0 +1,141 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
+import { BaseChartComponent } from '@swimlane/ngx-charts/common/base-chart.component';
+import { LegendOptions, LegendPosition } from '@swimlane/ngx-charts/common/types/legend.model';
+import { DataItem, GeoMapChartSeries } from '@swimlane/ngx-charts/models/chart-data.model';
+import { ColorHelper } from '@swimlane/ngx-charts/common/color.helper';
+import { ScaleType } from '@swimlane/ngx-charts/common/types/scale-type.enum';
+import { Results, ViewDimensions } from '@swimlane/ngx-charts/common/types/view-dimension.interface';
+import { geoEquirectangular, geoMercator, geoPath } from 'd3-geo';
+import { select } from 'd3-selection';
+
+@Component({
+  selector: 'ngx-charts-geo-map',
+  template: ` <ngx-charts-chart
+    [view]="[width, height]"
+    [showLegend]="legend"
+    [legendOptions]="legendOptions"
+    [activeEntries]="activeEntries"
+    [animations]="animations"
+    (legendLabelClick)="onClick($event)"
+  >
+  </ngx-charts-chart>`,
+  styleUrls: ['../common/base-chart.component.scss', './geo-map.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GeoMapComponent<T extends GeoMapChartSeries> extends BaseChartComponent implements OnInit {
+  @Input() results: T;
+  @Input() labels: boolean = false;
+  @Input() legend: boolean = false;
+  @Input() legendTitle: string = 'Legend';
+  @Input() legendPosition: LegendPosition = LegendPosition.Right;
+  @Input() explodeSlices: boolean = false;
+  @Input() doughnut: boolean = false;
+  @Input() arcWidth: number = 0.25;
+  @Input() gradient: boolean;
+  @Input() activeEntries: any[] = [];
+  @Input() tooltipDisabled: boolean = false;
+  @Input() labelFormatting: any;
+  @Input() trimLabels: boolean = true;
+  @Input() maxLabelLength: number = 10;
+  @Input() tooltipText: any;
+  @Input() painter: (params: {
+    element: ElementRef;
+    selector: string;
+    results: T;
+    compInstance: GeoMapComponent<T>;
+  }) => any;
+  @Output() dblclick = new EventEmitter();
+  // optional margins
+  @Input() margins: number[];
+  @Output() select = new EventEmitter();
+  @Output() activate = new EventEmitter();
+  @Output() deactivate = new EventEmitter();
+
+  @ContentChild('mapTpl') mapTpl: TemplateRef<any>;
+
+  data: DataItem[];
+  colors: ColorHelper;
+  domain: string[];
+  dims: ViewDimensions;
+  legendOptions: LegendOptions;
+  geoJSON: any;
+  projections: any;
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.projections = geoEquirectangular()
+      .scale(150) // 地图缩放比例
+      .translate([this.width / 2, this.height / 2]); // 平移至中心
+  }
+
+  update() {
+    super.update();
+    this.legendOptions = this.getLegendOptions();
+    this.geoJSON = (this.results as GeoMapChartSeries).GeoJSON;
+
+    if (!this.geoJSON) return;
+
+    if (this.painter) {
+      this.painter({
+        element: this.chartElement,
+        selector: '.ngx-charts',
+        results: this.results,
+        compInstance: this
+      });
+    } else {
+      /**
+       * TODO: 感觉有问题，我怎么知道需要绘制多少轮廓线，可能州级别和国家轮廓线清晰度不一样
+       */
+      const projection = geoMercator()
+        .center([107, 31]) //地图中心位置,107是经度，31是纬度
+        .scale(600) //设置缩放量
+        .translate([this.width / 2, this.height / 2]); // 设置平移量
+
+      const path = geoPath(projection);
+      const svg = select(this.chartElement.nativeElement).select('.ngx-charts');
+      const g = svg.append('g');
+      const states = g
+        .selectAll('path')
+        .data(this.geoJSON['features']) // 绑定数据
+        .enter()
+        .append('path')
+        .style('fill', 'white')
+        .style('stroke-width', '10px')
+        .attr('d', path);
+    }
+  }
+
+  getDomain(): string[] {
+    return this.results.map(d => d.label);
+  }
+
+  onClick(data: DataItem | string): void {
+    this.select.emit(data);
+  }
+
+  setColors(): void {
+    this.colors = new ColorHelper(this.scheme, ScaleType.Ordinal, this.domain, this.customColors);
+  }
+
+  getLegendOptions(): LegendOptions {
+    return {
+      scaleType: ScaleType.Ordinal,
+      domain: this.domain,
+      colors: this.colors,
+      title: this.legendTitle,
+      position: this.legendPosition
+    };
+  }
+}

projects/swimlane/ngx-charts/src/lib/geo-map/geo-map.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { GeoMapComponent } from '@swimlane/ngx-charts/geo-map/geo-map.component';
+import { ChartCommonModule } from '@swimlane/ngx-charts/common/chart-common.module';
+import {PieChartModule} from "@swimlane/ngx-charts/pie-chart/pie-chart.module";
+
+@NgModule({
+  imports: [ChartCommonModule, PieChartModule],
+  declarations: [GeoMapComponent],
+  exports: [GeoMapComponent]
+})
+export class GeoMapModule {}

projects/swimlane/ngx-charts/src/lib/models/chart-data.model.ts

@@ -103,3 +103,12 @@ export interface IBoxModel {
   // TODO: Replace by IColorGradient Interface
   gradientStops?: Array<{ offset: number; color: string; opacity: number }>;
 }
+
+export interface GeoMapChartSeries {
+  /**
+   * GeoJSON or TopoJSON
+   */
+  GeoJSON: any;
+
+  [key: string]: any;
+}

projects/swimlane/ngx-charts/src/lib/ngx-charts.module.ts

@@ -13,6 +13,7 @@ import { TreeMapModule } from './tree-map/tree-map.module';
 import { GaugeModule } from './gauge/gauge.module';
 import { ngxChartsPolyfills } from './polyfills';
 import { SankeyModule } from './sankey/sankey.module';
+import { GeoMapModule } from '@swimlane/ngx-charts/geo-map/geo-map.module';
 
 @NgModule({
   exports: [
@@ -28,7 +29,8 @@ import { SankeyModule } from './sankey/sankey.module';
     NumberCardModule,
     PieChartModule,
     TreeMapModule,
-    GaugeModule
+    GaugeModule,
+    GeoMapModule
   ]
 })
 export class NgxChartsModule {