Map chart

angular.json

@@ -26,7 +26,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": ["node_modules/leaflet/dist/leaflet.css", "src/styles.scss"],
             "scripts": [],
             "allowedCommonJsDependencies": [
               "emoji-flags",

package.json

@@ -56,6 +56,7 @@
     "d3-time-format": "^3.0.0",
     "d3-transition": "^3.0.1",
     "emoji-flags": "^1.2.0",
+    "leaflet": "^1.9.4",
     "moment-timezone": "^0.5.40",
     "ng-in-viewport": "^6.1.5",
     "ngx-moment": "^5.0.0",
@@ -87,6 +88,7 @@
     "@types/jasmine": "^3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/json-schema": "^7.0.4",
+    "@types/leaflet": "^1.9.3",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "5.11.0",
     "@typescript-eslint/parser": "5.11.0",

projects/swimlane/ngx-charts/src/lib/common/legend/legend-entry.component.ts

@@ -4,7 +4,7 @@ import { Component, Input, Output, ChangeDetectionStrategy, HostListener, EventE
   selector: 'ngx-charts-legend-entry',
   template: `
     <span [title]="formattedLabel" tabindex="-1" [class.active]="isActive" (click)="select.emit(formattedLabel)">
-      <span class="legend-label-color" [style.background-color]="color" (click)="toggle.emit(formattedLabel)"> </span>
+      <span class="legend-label-color" [style.background-color]="isIncluded ? color : '#ffffff'" (click)="toggle.emit(formattedLabel)"> </span>
       <span class="legend-label-text">
         {{ trimmedLabel }}
       </span>
@@ -17,6 +17,7 @@ export class LegendEntryComponent {
   @Input() label: string;
   @Input() formattedLabel: string;
   @Input() isActive: boolean = false;
+  @Input() isIncluded: boolean = true;
 
   @Output() select: EventEmitter<string> = new EventEmitter();
   @Output() activate: EventEmitter<{ name: string }> = new EventEmitter();

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

@@ -33,6 +33,7 @@ export interface LegendEntry {
               [formattedLabel]="entry.formattedLabel"
               [color]="entry.color"
               [isActive]="isActive(entry)"
+              [isIncluded]="isIncluded(entry)"
               (select)="labelClick.emit($event)"
               (activate)="activate($event)"
               (deactivate)="deactivate($event)"
@@ -53,7 +54,8 @@ export class LegendComponent implements OnChanges {
   @Input() colors: ColorHelper;
   @Input() height: number;
   @Input() width: number;
-  @Input() activeEntries;
+  @Input() activeEntries: any[];
+  @Input() includedEntries: any[];
   @Input() horizontal = false;
 
   @Output() labelClick: EventEmitter<string> = new EventEmitter();
@@ -102,6 +104,14 @@ export class LegendComponent implements OnChanges {
     return item !== undefined;
   }
 
+  isIncluded(entry: LegendEntry): boolean {
+    if (!this.includedEntries) return true;
+    const item = this.includedEntries.find(d => {
+      return entry.label === d;
+    })
+    return item !== undefined;
+  }
+
   activate(item: { name: string }) {
     this.labelActivate.emit(item);
   }

src/app/app.component.html

@@ -597,6 +597,25 @@
         (select)="onSelect($event)"
       >
       </combo-chart-component>
+      <map-chart-component
+        *ngIf="chartType === 'map-chart'"
+        class="chart-container"
+        [view]="view"
+        [legend]="showLegend"
+        [legendTitle]="legendTitle"
+        [legendPosition]="legendPosition"
+        [scheme]="colorScheme"
+        [results]="mapChartData"
+        [mapZoom]="mapZoom"
+        [initCoordX]="initCoordX"
+        [initCoordY]="initCoordY"
+        [centerMapAt]="centerMapAt"
+        [latitude]="latitude"
+        [longitude]="longitude"
+        [mapLanguage]="mapLanguage"
+        (select)="onSelect($event)"
+      >
+      </map-chart-component>
       <ngx-charts-heat-map
         *ngIf="chartType === 'heat-map'"
         class="chart-container"
@@ -1143,6 +1162,7 @@ <h3 (click)="dataVisible = !dataVisible" style="cursor: pointer">
         <pre *ngIf="chart.inputFormat === 'comboChart'">{{ barChart | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'comboChart'">{{ lineChartSeries | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'timelineFilter'">{{ timelineFilterBarData | json }}</pre>
+        <pre *ngIf="chart.inputFormat === 'mapChart'">{{ mapChartData | json }}</pre>
         <div>
           <label>
             <input type="checkbox" [(ngModel)]="realTimeData" />
@@ -1181,6 +1201,7 @@ <h3 (click)="colorVisible = !colorVisible" style="cursor: pointer">
         <strong>Color Scheme</strong>
       </h3>
       <select
+        *ngIf="chart.options.includes('colorScheme')"
         [hidden]="!colorVisible"
         style="margin-left: 10px"
         [ngModel]="selectedColorScheme"
@@ -1556,6 +1577,34 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
           <label>Maximum Y-Scale value</label><br />
           <input type="number" [(ngModel)]="yScaleMax" /><br />
         </div>
+
+        <div *ngIf="chart.options.includes('mapZoom')">
+          <label>Initial Zoom</label><br />
+          <input type="number" [(ngModel)]="mapZoom" /><br />
+        </div>
+        <div *ngIf="chart.options.includes('initCoordX')">
+          <label>Initial Center X Coordinate</label><br />
+          <input type="number" [(ngModel)]="initCoordX" /><br />
+        </div>
+        <div *ngIf="chart.options.includes('initCoordY')">
+          <label>Initial Center Y Coordinate</label><br />
+          <input type="number" [(ngModel)]="initCoordY" /><br />
+        </div>
+        <div *ngIf="chart.options.includes('mapLanguage')">
+          <label>Map Language:</label><br />
+          <select  [(ngModel)]="mapLanguage">
+            <option value="native">Native</option>
+            <option value="german">German</option>
+            <option value="english">English</option></select
+          ><br />
+        </div>
+        <div *ngIf="chart.options.includes('centerMapAt')">
+          <label>Latitude:</label><br />
+          <input type="number" [(ngModel)]="latitude" /><br />
+          <label>Longitude:</label><br />
+          <input type="number" [(ngModel)]="longitude" /><br />
+          <button class="btn btn-primary" (click)="mapChangePosition()">Change Map Center</button>
+        </div>
       </div>
       <h3><a href="https://swimlane.gitbooks.io/ngx-charts/content/" target="_blank">Documentation</a></h3>
     </div>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
 import { Location, LocationStrategy, HashLocationStrategy } from '@angular/common';
 import * as shape from 'd3-shape';
 import * as d3Array from 'd3-array';
@@ -25,6 +25,7 @@ import pkg from '../../projects/swimlane/ngx-charts/package.json';
 import { InputTypes } from '@swimlane/ngx-ui';
 import { LegendPosition } from '@swimlane/ngx-charts/common/types/legend.model';
 import { ScaleType } from '@swimlane/ngx-charts/common/types/scale-type.enum';
+import { MapChartComponent } from './custom-charts/map-chart/map-chart.component';
 
 const monthName = new Intl.DateTimeFormat('en-us', { month: 'short' });
 const weekdayName = new Intl.DateTimeFormat('en-us', { weekday: 'short' });
@@ -117,6 +118,10 @@ export class AppComponent implements OnInit {
   strokeColor: string = '#FFFFFF';
   strokeWidth: number = 2;
   wrapTicks = false;
+  latitude: number = 39.8282;
+  longitude: number = -98.5795;
+  mapLanguage: string = 'native';
+  centerMapAt: boolean = false;
 
   curves = {
     Basis: shape.curveBasis,
@@ -256,6 +261,46 @@ export class AppComponent implements OnInit {
     { value: 33000, name: 'Minimum' }
   ];
 
+  mapChartData = [
+    {
+      name: 'United States',
+      series: [
+        {
+          name: 'New York',
+          value: [40.7128, -74.0060]
+        },
+        {
+          name: 'Austin',
+          value: [30, -97.7431]
+        },
+        {
+          name: 'Los Angeles',
+          value: [34.0522, -118.2437]
+        }
+      ]
+    },
+    {
+      name: 'International',
+      series: [
+        {
+          name: 'Tokyo',
+          value: [35.6895, 139.6917]
+        },
+        {
+          name: 'Sydney',
+          value: [-33.8688, 151.2093]
+        },
+        {
+          name: 'Guangzhou',
+          value: [23.1291, 113.2644]
+        }
+      ]
+    }
+  ];
+  mapZoom = 3;
+  initCoordX = 39.8282;
+  initCoordY = -98.5795;
+
   // data
   plotData: any;
 
@@ -265,6 +310,8 @@ export class AppComponent implements OnInit {
   dimVisible: boolean = true;
   optsVisible: boolean = true;
 
+  @ViewChild(MapChartComponent) mapComponent: MapChartComponent;
+
   constructor(public location: Location) {
     this.mathFunction = this.getFunction();
 
@@ -482,6 +529,10 @@ export class AppComponent implements OnInit {
     this.view = [this.width, this.height];
   }
 
+  mapChangePosition() {
+    this.mapComponent.changePosition();
+  }
+
   toggleFitContainer() {
     if (this.fitContainer) {
       this.view = undefined;

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { NgxChartsModule } from '@swimlane/ngx-charts/ngx-charts.module';
 import { NgxUIModule } from '@swimlane/ngx-ui';
 import { ComboChartComponent, ComboSeriesVerticalComponent } from './custom-charts/combo-chart';
 import { BubbleChartInteractiveModule } from './custom-charts/bubble-chart-interactive';
+import { MapChartComponent } from './custom-charts/map-chart/map-chart.component';
 
 @NgModule({
   providers: [
@@ -31,7 +32,8 @@ import { BubbleChartInteractiveModule } from './custom-charts/bubble-chart-inter
     SparklineComponent,
     TimelineFilterBarChartComponent,
     ComboChartComponent,
-    ComboSeriesVerticalComponent
+    ComboSeriesVerticalComponent,
+    MapChartComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/chartTypes.ts

@@ -704,6 +704,25 @@ const chartGroups = [
           'tooltipDisabled'
         ]
       },
+      {
+        name: 'Map Chart',
+        selector: 'map-chart',
+        inputFormat: 'mapChart',
+        options: [
+          'showLegend',
+          'legendTitle',
+          'legendPosition',
+          'colorScheme',
+          'mapZoom',
+          'initCoordX',
+          'initCoordY',
+          'view',
+          'centerMapAt',
+          'latitude',
+          'longitude',
+          'mapLanguage'
+        ]
+      },
       {
         name: 'Heat Map - Calendar',
         selector: 'calendar',