@iapps/d2-visualizer - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

 {
   "name": "@iapps/d2-visualizer",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "commonjs",
@@ -5,0 +5,0 @@ "main": "./src/index.js",

src/lib/d2-visualizer.d.ts

 import { LegendSet } from './modules/map/models/legend-set.model';
+import { D2VisualizerMapControl } from './modules/map/models/map-control.model';
+import { MapDashboardExtensionItem } from './modules/map/models/map-dashboard-extension.model';
+import { MapDashboardItem } from './modules/map/models/map-dashboard-item.model';
 import { VisualizationConfiguration } from './shared/visualization-configuration';
 import { VisualizationLayout } from './shared/visualization-layout';
 import { VisualizationType } from './shared/visualization-type';
+import { TableAnalytics } from './modules/table/models/table-analytics.model';
+import { TableDashboardItem } from './modules/table/models/table-dashboard-item.model';
+import { TableConfiguration } from './modules/table/models/table-config.model';
 export declare class D2Visualizer {
     dataSelections: any[];
-    geoFeatures: any[];
-    dataAnalytics: unknown;
-    legendSet: LegendSet | undefined | any;
     type: VisualizationType;
@@ -15,3 +18,53 @@ visualizationType: VisualizationType;
     id: string;
+    d2VisualizerMapControl: D2VisualizerMapControl | any;
+    legendSets: LegendSet[] | any;
+    mapDashboardItem: MapDashboardItem | any;
+    mapDashboardExtensionItem: MapDashboardExtensionItem | any;
+    geoFeatures: any[];
+    dataAnalytics: unknown;
+    layerStyle: string;
+    tableDashboardItem: TableDashboardItem | any;
+    tableAnalytics: TableAnalytics | any;
+    tableConfiguration: TableConfiguration | any;
+    tableLegendSets: LegendSet[] | any;
     /**
+     *
+     * @param tableDashboardItem
+     * @returns
+     */
+    setTableDashboardItem(tableDashboardItem: TableDashboardItem): this;
+    /**
+     *
+     * @returns
+     */
+    getTableDashboardItem(): TableDashboardItem;
+    /**
+     *
+     * @param tableAnalytics
+     * @returns
+     */
+    setTableAnalytics(tableAnalytics: TableAnalytics): this;
+    /**
+     *
+     * @returns
+     */
+    getTableAnalytics(): TableAnalytics;
+    /**
+     *
+     * @param tableConfiguration
+     * @returns
+     */
+    setTableConfiguration(tableConfiguration: TableConfiguration): this;
+    /**
+     *
+     * @param tableLegendSets
+     * @returns
+     */
+    setTableLegendSet(tableLegendSets: LegendSet[]): this;
+    /**
+     *
+     * @returns
+     */
+    getTableLegendSet(): LegendSet[];
+    /**
      * @description Set id to be used in rendering intended visualization
@@ -60,6 +113,6 @@ * @param id String
      *
-     * @param legendSet
+     * @param legendSets
      * @returns
      */
-    setLegendSet(legendSet: LegendSet): this;
+    setLegendSet(legendSets: LegendSet[]): this;
     /**
@@ -70,5 +123,60 @@ * @description Get data selection layout orientation
     get layout(): VisualizationLayout | null;
+    /**
+     *
+     * @param d2VisualizerMapControl
+     * @returns
+     */
+    setD2VisualizerMapControl(d2VisualizerMapControl: D2VisualizerMapControl): this;
+    /**
+     *
+     * @returns
+     */
+    getD2VisualizerMapControl(): D2VisualizerMapControl;
+    /**
+     *
+     * @param layerStyle
+     * @returns
+     */
+    setLayerStyle(layerStyle: string): this;
+    /**
+     *
+     * @returns
+     */
+    getLayerStyle(): string;
+    /**
+     *
+     */
+    setDashboardItem(dashboardItem: MapDashboardItem): this;
+    /**
+     *
+     * @returns
+     */
+    getDashboardItem(): MapDashboardItem;
+    /**
+     *
+     * @param dashboardExtensionItem
+     * @returns
+     */
+    setDashboardExtensionItem(dashboardExtensionItem: MapDashboardExtensionItem): this;
+    /**
+     *
+     * @returns
+     */
+    getDashboardExtensionItem(): MapDashboardExtensionItem;
+    /**
+     *
+     * @returns
+     */
     private getData;
+    /**
+     *
+     * @returns
+     */
     draw(): Promise<any>;
+    /**
+     *
+     * @param downloadFormat
+     * @returns
+     */
     download(downloadFormat: any): Promise<any>;
 }

src/lib/d2-visualizer.js

@@ -7,14 +7,72 @@ "use strict";
 const chart_visualizer_1 = require("./modules/chart/chart-visualizer");
-const table_visualizer_1 = require("./modules/table/table-visualizer");
 const map_util_1 = require("./modules/map/utils/map.util");
 const visualization_configuration_1 = require("./shared/visualization-configuration");
 const visualization_layout_1 = require("./shared/visualization-layout");
+const table_util_1 = require("./modules/table/utils/table.util");
 class D2Visualizer {
     constructor() {
         this.dataSelections = [];
+        this.legendSets = null;
         this.geoFeatures = [];
         this.dataAnalytics = null;
-        this.legendSet = null;
+        this.layerStyle = 'default';
     }
     /**
+     *
+     * @param tableDashboardItem
+     * @returns
+     */
+    setTableDashboardItem(tableDashboardItem) {
+        this.tableDashboardItem = tableDashboardItem;
+        return this;
+    }
+    /**
+     *
+     * @returns
+     */
+    getTableDashboardItem() {
+        return this.tableDashboardItem;
+    }
+    /**
+     *
+     * @param tableAnalytics
+     * @returns
+     */
+    setTableAnalytics(tableAnalytics) {
+        this.tableAnalytics = tableAnalytics;
+        return this;
+    }
+    /**
+     *
+     * @returns
+     */
+    getTableAnalytics() {
+        return this.tableAnalytics;
+    }
+    /**
+     *
+     * @param tableConfiguration
+     * @returns
+     */
+    setTableConfiguration(tableConfiguration) {
+        this.tableConfiguration = tableConfiguration;
+        return this;
+    }
+    /**
+     *
+     * @param tableLegendSets
+     * @returns
+     */
+    setTableLegendSet(tableLegendSets) {
+        this.tableLegendSets = tableLegendSets;
+        return this;
+    }
+    /**
+     *
+     * @returns
+     */
+    getTableLegendSet() {
+        return this.tableLegendSets;
+    }
+    /**
      * @description Set id to be used in rendering intended visualization
@@ -84,7 +142,7 @@ * @param id String
      *
-     * @param legendSet
+     * @param legendSets
      * @returns
      */
-    setLegendSet(legendSet) {
-        this.legendSet = legendSet;
+    setLegendSet(legendSets) {
+        this.legendSets = legendSets;
         return this;
@@ -100,2 +158,68 @@ }
     }
+    /**
+     *
+     * @param d2VisualizerMapControl
+     * @returns
+     */
+    setD2VisualizerMapControl(d2VisualizerMapControl) {
+        this.d2VisualizerMapControl = d2VisualizerMapControl;
+        return this;
+    }
+    /**
+     *
+     * @returns
+     */
+    getD2VisualizerMapControl() {
+        return this.d2VisualizerMapControl;
+    }
+    /**
+     *
+     * @param layerStyle
+     * @returns
+     */
+    setLayerStyle(layerStyle) {
+        this.layerStyle = layerStyle;
+        return this;
+    }
+    /**
+     *
+     * @returns
+     */
+    getLayerStyle() {
+        return this.layerStyle;
+    }
+    /**
+     *
+     */
+    setDashboardItem(dashboardItem) {
+        this.mapDashboardItem = dashboardItem;
+        return this;
+    }
+    /**
+     *
+     * @returns
+     */
+    getDashboardItem() {
+        return this.mapDashboardItem;
+    }
+    /**
+     *
+     * @param dashboardExtensionItem
+     * @returns
+     */
+    setDashboardExtensionItem(dashboardExtensionItem) {
+        this.mapDashboardExtensionItem = dashboardExtensionItem;
+        return this;
+    }
+    /**
+     *
+     * @returns
+     */
+    getDashboardExtensionItem() {
+        return this.mapDashboardExtensionItem;
+    }
+    /**
+     *
+     * @returns
+     */
     getData() {
@@ -127,60 +251,51 @@ const analyticPromise = new function_analytics_1.Fn.Analytics();
     }
+    /**
+     *
+     * @returns
+     */
     draw() {
+        var _a, _b, _c, _d, _e, _f;
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
-            console.log("should be CHART | MAP | REPORT_TABLE");
-            console.log(this.visualizationType);
-            if (this.dataAnalytics) {
-                switch (this.visualizationType) {
-                    case 'CHART':
-                        return new chart_visualizer_1.ChartVisualization()
-                            .setId(this.id)
-                            .setConfig(this.config.config)
-                            .setData(this.dataAnalytics)
-                            .setVisualizationType(this.visualizationType)
-                            .setChartType(this.chartType)
-                            .draw();
-                    case 'MAP':
-                        return new map_util_1.MapUtil()
-                            .setMapAnalytics(this.dataAnalytics)
-                            .setGeofeature(this.geoFeatures)
-                            .setLegendSet(this.legendSet)
-                            .setContainer('map-container-demo')
-                            .setType('thematic')
-                            .setShowLabel(true)
-                            .draw();
-                    case 'REPORT_TABLE':
-                        return new table_visualizer_1.TableVisualization()
-                            .setId(this.id)
-                            .setConfig(this.config)
-                            .setData(this.dataAnalytics)
-                            .draw();
-                    default:
-                        return null;
-                }
+            switch (this.visualizationType) {
+                case 'CHART':
+                    return new chart_visualizer_1.ChartVisualization()
+                        .setId(this.id)
+                        .setConfig(this.config.config)
+                        .setData(this.dataAnalytics)
+                        .setVisualizationType(this.visualizationType)
+                        .setChartType(this.chartType)
+                        .draw();
+                case 'MAP':
+                    return new map_util_1.MapUtil()
+                        .setMapAnalytics(this.dataAnalytics)
+                        .setGeofeature(this.geoFeatures)
+                        .setLegendSet(this.legendSets)
+                        .setMapDashboardItem(this.mapDashboardItem)
+                        .setMapDashboardExtensionItem(this.mapDashboardExtensionItem)
+                        .setContainer(this.id)
+                        .setStyle(this.layerStyle)
+                        .setShowLegend((_a = this.d2VisualizerMapControl) === null || _a === void 0 ? void 0 : _a.showMapLegend)
+                        .setShowLabel((_b = this.d2VisualizerMapControl) === null || _b === void 0 ? void 0 : _b.showMapLabel)
+                        .setShowValue((_c = this.d2VisualizerMapControl) === null || _c === void 0 ? void 0 : _c.showMapValue)
+                        .setShowMapTitle((_d = this.d2VisualizerMapControl) === null || _d === void 0 ? void 0 : _d.showMapTitle)
+                        .setShowBoundary((_e = this.d2VisualizerMapControl) === null || _e === void 0 ? void 0 : _e.showMapBoundary)
+                        .setShowMapSummary((_f = this.d2VisualizerMapControl) === null || _f === void 0 ? void 0 : _f.showMapSummary)
+                        .draw();
+                case 'REPORT_TABLE':
+                    return new table_util_1.TableUtil()
+                        .setTableDashboardItem(this.tableDashboardItem)
+                        .setTableConfiguration(this.tableConfiguration)
+                        .setTableAnalytics(this.tableAnalytics)
+                        .setLegendSet(this.legendSets)
+                        .draw();
+                default:
+                    return null;
             }
-            if (!this.dataAnalytics) {
-                const data = yield this.getData();
-                switch (this.visualizationType) {
-                    case 'CHART':
-                        return new chart_visualizer_1.ChartVisualization()
-                            .setId(this.id)
-                            .setConfig(this.config)
-                            .setData(data.data)
-                            .setVisualizationType(this.visualizationType)
-                            .setChartType(this.chartType)
-                            .draw();
-                    case 'MAP':
-                        return new map_util_1.MapUtil()
-                            .setMapAnalytics(this.dataAnalytics)
-                            .setGeofeature(this.geoFeatures)
-                            .setLegendSet(this.legendSet)
-                            .setContainer('map-container-demo')
-                            .setShowLabel(true)
-                            .draw();
-                    default:
-                        return null;
-                }
-            }
         });
     }
+    /**
+     *
+     * @param downloadFormat
+     * @returns
+     */
     download(downloadFormat) {
@@ -187,0 +302,0 @@ return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {

src/lib/modules/map/class/map-drawable.class.d.ts

 import { LegendSet } from '../models/legend-set.model';
-import { MapAnalytic } from '../models/map-analytic.model';
+import { MapAnalytics } from '../models/map-analytic.model';
+import { MapView } from '../models/map-dashboard-item.model';
 import { MapDrawablePayload } from '../models/map-drawable-payload.model';
@@ -10,3 +11,3 @@ import { GeoFeature } from '../models/map-geofeature.model';
      */
-    abstract getMapFeaturePayload(mapUtil: MapUtil, geoFeature: GeoFeature, mapAnalytic: MapAnalytic): MapDrawablePayload;
+    abstract getMapFeaturePayload(mapUtil: MapUtil, mapView: MapView, geoFeature: GeoFeature[], mapAnalytic: MapAnalytics): MapDrawablePayload;
     /**
@@ -17,3 +18,3 @@ *
      */
-    abstract getAnalyticHeaderMetadataIndex(mapAnalytic: MapAnalytic, lookUp: string): number;
+    abstract getAnalyticHeaderMetadataIndex(mapAnalytic: MapAnalytics, lookUp: string): number;
     /**
@@ -20,0 +21,0 @@ *

src/lib/modules/map/models/map-analytic.model.d.ts

@@ -1,2 +0,3 @@
-export interface MapAnalytic {
+export interface MapAnalytics {
+    id?: string;
     headers: Header[];
@@ -3,0 +4,0 @@ metaData: MetaData;

src/lib/modules/map/models/map-drawable-payload.model.d.ts

 export interface MapDrawablePayload {
+    id?: string;
+    mapType?: string;
+    legendSet?: string;
     type: string;
@@ -3,0 +6,0 @@ data: Data;

src/lib/modules/map/models/map-geofeature.model.d.ts

@@ -8,5 +8,5 @@ export interface GeoFeature {
     le: number;
-    pg: string;
-    pi: string;
-    pn: string;
+    pg?: string;
+    pi?: string;
+    pn?: string;
     ty: number;
@@ -13,0 +13,0 @@ co: string;

src/lib/modules/map/utils/map.util.d.ts

@@ -1,6 +0,6 @@
-import * as mapboxgl from 'mapbox-gl';
 import { LegendSet } from '../models/legend-set.model';
-import { MapAnalytic } from '../models/map-analytic.model';
+import { MapAnalytics } from '../models/map-analytic.model';
 import { GeoFeature } from '../models/map-geofeature.model';
-import { D2MapEngine } from './map-type.util';
+import { MapDashboardItem } from '../models/map-dashboard-item.model';
+import { MapDashboardExtensionItem } from '../models/map-dashboard-extension.model';
 export declare class MapUtil {
@@ -56,5 +56,2 @@ private accessToken;
     private zoom;
-    private mapAnalytic;
-    private geoFeature;
-    private legendSet;
     private showLegend;
@@ -64,5 +61,10 @@ private showLabel;
     private showBoundary;
-    private showMapSummary;
-    private showMapTitle;
+    private showSummary;
+    private showTitle;
     private type;
+    private mapDashboardItem;
+    private mapDashboardExtensionItem;
+    private mapAnalytics;
+    private geoFeatures;
+    private legendSets;
     constructor();
@@ -862,12 +864,12 @@ /**
      */
-    getMapAnalytics(): MapAnalytic;
+    getMapAnalytics(): MapAnalytics;
     /**
      *
-     * @param mapAnalytic
+     * @param mapAnalytics
      * @returns
      */
-    setMapAnalytics(mapAnalytic: MapAnalytic): MapUtil;
+    setMapAnalytics(mapAnalytics: MapAnalytics): MapUtil;
     /**
      *
-     * @returns {MapAnalytic}
+     * @returns {MapAnalytics}
      */
@@ -886,7 +888,7 @@ getGeofeature(): GeoFeature;
      */
-    setLegendSet(legendSet: LegendSet): MapUtil;
+    setLegendSet(legendSet: LegendSet[]): MapUtil;
     /**
      *
      */
-    getLegendSet(): LegendSet;
+    getLegendSet(): LegendSet[];
     /**
@@ -966,3 +968,3 @@ *
      */
-    setType(type: string): MapUtil;
+    setMapType(type: string): MapUtil;
     /**
@@ -973,15 +975,42 @@ *
     getType(): string;
-    draw(): void;
     /**
      *
+     * @returns
      */
-    createLegendSet(d2MapEngine: D2MapEngine): void;
+    getLegendSetContainerId(): string;
     /**
      *
      */
-    createHoverDetails(mapboxGeoJSONFeature: mapboxgl.MapboxGeoJSONFeature[]): void;
+    getInfoContainerId(): string;
     /**
      *
+     * @returns
      */
-    createMapTitle(): void;
+    getMapTitleContainerId(): string;
+    /**
+     *
+     * @param mapDrawableItems
+     * @returns
+     */
+    setMapDashboardItem(mapDrawableItem: MapDashboardItem): MapUtil;
+    /**
+     *
+     * @returns
+     */
+    getMapDownloadItem(): MapDashboardItem;
+    /**
+     *
+     * @param mapDashboardExtensionItem
+     * @returns
+     */
+    setMapDashboardExtensionItem(mapDashboardExtensionItem: MapDashboardExtensionItem): MapUtil;
+    /**
+     *
+     * @returns
+     */
+    getMapDashboardExtensionItem(): MapDashboardExtensionItem;
+    /**
+     *
+     */
+    draw(): void;
 }

src/lib/modules/map/utils/map.util.js

@@ -5,4 +5,3 @@ "use strict";
 const mapboxgl = require("mapbox-gl");
-const _ = require("lodash");
-const map_type_util_1 = require("./map-type.util");
+const map_engine_util_1 = require("./map-engine.util");
 class MapUtil {
@@ -63,5 +62,5 @@ constructor() {
         this.zoom = 5.6;
-        this.mapAnalytic = null;
-        this.geoFeature = null;
-        this.legendSet = null;
+        this.mapAnalytics = null;
+        this.geoFeatures = null;
+        this.legendSets = null;
         this.showLegend = false;
@@ -71,5 +70,7 @@ this.showLabel = true;
         this.showBoundary = true;
-        this.showMapSummary = true;
-        this.showMapTitle = true;
+        this.showSummary = true;
+        this.showTitle = true;
         this.type = 'thematic';
+        this.mapDashboardItem = null;
+        this.mapDashboardExtensionItem = null;
     }
@@ -1138,11 +1139,11 @@ /**
     getMapAnalytics() {
-        return this.mapAnalytic;
+        return this.mapAnalytics;
     }
     /**
      *
-     * @param mapAnalytic
+     * @param mapAnalytics
      * @returns
      */
-    setMapAnalytics(mapAnalytic) {
-        this.mapAnalytic = mapAnalytic;
+    setMapAnalytics(mapAnalytics) {
+        this.mapAnalytics = mapAnalytics;
         return this;
@@ -1152,6 +1153,6 @@ }
      *
-     * @returns {MapAnalytic}
+     * @returns {MapAnalytics}
      */
     getGeofeature() {
-        return this.geoFeature;
+        return this.geoFeatures;
     }
@@ -1164,3 +1165,3 @@ /**
     setGeofeature(geoFeature) {
-        this.geoFeature = geoFeature;
+        this.geoFeatures = geoFeature;
         return this;
@@ -1174,3 +1175,3 @@ }
     setLegendSet(legendSet) {
-        this.legendSet = legendSet;
+        this.legendSets = legendSet;
         return this;
@@ -1182,3 +1183,3 @@ }
     getLegendSet() {
-        return this.legendSet;
+        return this.legendSets;
     }
@@ -1208,2 +1209,3 @@ /**
         this.showLabel = showLabel;
+        this.setShowValue(false);
         return this;
@@ -1256,3 +1258,3 @@ }
     setShowMapSummary(showMapSummary) {
-        this.showMapSummary = showMapSummary;
+        this.showSummary = showMapSummary;
         return this;
@@ -1265,3 +1267,3 @@ }
     getShowMapSummary() {
-        return this.showMapSummary;
+        return this.showSummary;
     }
@@ -1277,3 +1279,3 @@ /**
     setShowMapTitle(showMapTitle) {
-        this.showMapTitle = showMapTitle;
+        this.showTitle = showMapTitle;
         return this;
@@ -1286,3 +1288,3 @@ }
     getShowMapTitle() {
-        return this.showMapTitle;
+        return this.showTitle;
     }
@@ -1294,3 +1296,3 @@ /**
      */
-    setType(type) {
+    setMapType(type) {
         this.type = type;
@@ -1306,2 +1308,57 @@ return this;
     }
+    /**
+     *
+     * @returns
+     */
+    getLegendSetContainerId() {
+        return `${this.container}-legend`;
+    }
+    /**
+     *
+     */
+    getInfoContainerId() {
+        return `${this.container}-info`;
+    }
+    /**
+     *
+     * @returns
+     */
+    getMapTitleContainerId() {
+        return `${this.container}-map-title`;
+    }
+    /**
+     *
+     * @param mapDrawableItems
+     * @returns
+     */
+    setMapDashboardItem(mapDrawableItem) {
+        this.mapDashboardItem = mapDrawableItem;
+        return this;
+    }
+    /**
+     *
+     * @returns
+     */
+    getMapDownloadItem() {
+        return this.mapDashboardItem;
+    }
+    /**
+     *
+     * @param mapDashboardExtensionItem
+     * @returns
+     */
+    setMapDashboardExtensionItem(mapDashboardExtensionItem) {
+        this.mapDashboardExtensionItem = mapDashboardExtensionItem;
+        return this;
+    }
+    /**
+     *
+     * @returns
+     */
+    getMapDashboardExtensionItem() {
+        return this.mapDashboardExtensionItem;
+    }
+    /**
+     *
+     */
     draw() {
@@ -1317,2 +1374,9 @@ try {
             const mapContainerSourceId = this.getContainer();
+            // Remove Legend Set On Map Start
+            const legendSetContainerId = this.getLegendSetContainerId();
+            const legendDOMElement = document.getElementById(legendSetContainerId);
+            const showMapLegend = this.getShowLegend();
+            if (legendDOMElement && showMapLegend) {
+                legendDOMElement.style.display = 'none';
+            }
             // On Map Load
@@ -1323,118 +1387,17 @@ map.on('load', () => {
                  */
-                const d2MapEngine = new map_type_util_1.D2MapEngine();
+                const d2MapEngine = new map_engine_util_1.D2MapEngine();
                 // Get Drawable Map Payload
-                const mapDrawablePayload = d2MapEngine.getMapDrawablePayload(this.type, this, this.geoFeature, this.mapAnalytic);
-                // Add Map Source
-                map.addSource(mapContainerSourceId, mapDrawablePayload);
-                // Get Legend Set
-                const legendSet = this.getLegendSet();
-                // Legend Set for MAP
-                const mapLegendSet = d2MapEngine.getMapLegendSet(legendSet);
-                map.addLayer({
-                    id: `${mapContainerSourceId}`,
-                    type: 'fill',
-                    source: mapContainerSourceId,
-                    layout: {},
-                    paint: {
-                        'fill-color': [
-                            'interpolate',
-                            ['linear'],
-                            ['get', 'datavalue'],
-                            ...mapLegendSet,
-                        ],
-                        'fill-opacity': 1,
-                    },
-                });
-                // Map Typograph Management
-                if (this.getShowLabel()) {
-                    map.addLayer({
-                        id: `${mapContainerSourceId}_label`,
-                        type: 'symbol',
-                        source: mapContainerSourceId,
-                        layout: {
-                            'text-field': [
-                                'format',
-                                ['upcase', ['get', 'description']],
-                                { 'font-scale': 0.6 },
-                                '\n',
-                                {},
-                                ['downcase', ['get', 'value']],
-                                { 'font-scale': 0.6 },
-                            ],
-                            'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
-                            'text-radial-offset': 0.8,
-                            'text-justify': 'auto',
-                            'icon-image': ['get', 'icon'],
-                            'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
-                        },
-                    });
+                const mapDrawablePayloads = d2MapEngine.getMapDrawablePayload(this.type, this, this.geoFeatures, this.mapAnalytics, this.mapDashboardItem, this.mapDashboardExtensionItem);
+                if (mapDrawablePayloads && mapDrawablePayloads.length) {
+                    for (const mapDrawablePayload of mapDrawablePayloads) {
+                        if (mapDrawablePayload && mapDrawablePayload.mapType === 'BUBBLE') {
+                            // Bubble MapBox Map Drawable Item
+                            d2MapEngine.drawBubbleThematicLayer(this, d2MapEngine, map, mapDrawablePayload, mapContainerSourceId);
+                        }
+                        else {
+                            // Thematic MapBox Map Drawable Item
+                            d2MapEngine.drawNormalThematicLayer(this, d2MapEngine, map, mapContainerSourceId, mapDrawablePayload, legendSetContainerId, this.getMapTitleContainerId(), this.mapAnalytics);
+                        }
+                    }
                 }
-                if (this.showBoundary) {
-                    // Adding Boundary Layer
-                    map.addLayer({
-                        id: `${mapContainerSourceId}_boundary`,
-                        type: 'line',
-                        source: mapContainerSourceId,
-                        layout: {},
-                        paint: {
-                            'line-color': '#000',
-                            'line-width': 1,
-                        },
-                    });
-                }
-                // Appending Legend To The DOM
-                if (this.legendSet &&
-                    this.legendSet.legends &&
-                    this.legendSet.legends.length) {
-                    this.createLegendSet(d2MapEngine);
-                }
-                if (this.showMapTitle) {
-                    // Added Map Title
-                    this.createMapTitle();
-                }
-                // Remove Details Section On Start
-                const featuresDOMElement = document.getElementById('features');
-                if (featuresDOMElement) {
-                    featuresDOMElement.style.display = 'none';
-                }
-                // When a click event occurs on a feature in the states layer,
-                // open a popup at the location of the click, with description
-                // HTML from the click event's properties.
-                map.on('click', mapContainerSourceId, (mapMouseEvent) => {
-                    const description = mapMouseEvent.features[0].properties.description;
-                    const value = mapMouseEvent.features[0].properties.value;
-                    const popUpMessage = `<p>${description} (${value})</p>`;
-                    // Create a popup, but don't add it to the map yet.
-                    const mapBoxPopUp = new mapboxgl.Popup({
-                        closeButton: true,
-                        closeOnClick: true,
-                    });
-                    mapBoxPopUp
-                        .setLngLat(mapMouseEvent.lngLat)
-                        .setHTML(popUpMessage)
-                        .addTo(map);
-                    map.flyTo({
-                        center: mapMouseEvent.features[0].geometry.coordinates,
-                    });
-                });
-                // On Mouse Move
-                map.on('mousemove', mapContainerSourceId, (event) => {
-                    map.getCanvas().style.cursor = 'pointer';
-                    // Create a popup, but don't add it to the map yet.
-                    const mapBoxPopUp = new mapboxgl.Popup({
-                        closeButton: false,
-                        closeOnClick: false,
-                    });
-                    if (this.showMapSummary) {
-                        const mapboxGeoJSONFeature = map.queryRenderedFeatures(event.point, {
-                            layers: [mapContainerSourceId],
-                        });
-                        // Added support for hover details on map
-                        this.createHoverDetails(mapboxGeoJSONFeature);
-                    }
-                });
-                // Change it back to a pointer when it leaves.
-                map.on('mouseleave', mapContainerSourceId, () => {
-                    map.getCanvas().style.cursor = '';
-                });
             });
@@ -1447,176 +1410,4 @@ // Implement some methods
     }
-    /**
-     *
-     */
-    createLegendSet(d2MapEngine) {
-        var _a;
-        const legendDOMElement = document.getElementById('legend');
-        const legendDIVItem = document.createElement('div');
-        const legendTableItem = document.createElement('table');
-        const legendTableBodyItem = document.createElement('tbody');
-        const legendTableHead = document.createElement('thead');
-        const legendTableHeadItem = document.createElement('tr');
-        const legendTableHRLineItem = document.createElement('tr');
-        const legendTableHRLineTDItem = document.createElement('td');
-        const legendTableDataItemTitleSection = document.createElement('th');
-        const legendTableHeadHorizontalLine = document.createElement('hr');
-        legendTableHeadHorizontalLine.setAttribute('style', `width: 100%`);
-        legendTableDataItemTitleSection.innerHTML = `${(_a = this.legendSet) === null || _a === void 0 ? void 0 : _a.name}`;
-        legendTableDataItemTitleSection.setAttribute('colspan', '3');
-        legendTableHRLineTDItem.setAttribute('colspan', '3');
-        legendTableHeadItem.appendChild(legendTableDataItemTitleSection);
-        legendTableHead.appendChild(legendTableHeadItem);
-        legendTableItem.appendChild(legendTableHead);
-        legendTableHRLineTDItem.appendChild(legendTableHeadHorizontalLine);
-        legendTableHRLineItem.appendChild(legendTableHRLineTDItem);
-        legendTableHead.appendChild(legendTableHRLineItem);
-        const dataValueIndex = d2MapEngine.getAnalyticHeaderMetadataIndex(this.mapAnalytic, 'value');
-        const values = _.map(this.mapAnalytic.rows, (row) => +row[dataValueIndex]);
-        const legendsWithCountValues = _.map(this.legendSet.legends, (legend) => {
-            var _a;
-            return Object.assign(Object.assign({}, legend), { itemCount: (_a = _.filter(values, (value) => {
-                    return value >= legend.startValue && value <= legend.endValue;
-                })) === null || _a === void 0 ? void 0 : _a.length });
-        });
-        const legends = _.orderBy(legendsWithCountValues, [
-            'startValue',
-        ]);
-        for (const legend of legends) {
-            const legendTableRowItem = document.createElement('tr');
-            const legendTableDataItemColorSection = document.createElement('td');
-            legendTableDataItemColorSection.setAttribute('style', `width: 20px; margin-right: 10px !important; font-weight: bold !important;`);
-            const legendTableDataItemLabel = document.createElement('td');
-            const legendTableDataItemCount = document.createElement('td');
-            legendTableDataItemColorSection.style.backgroundColor = legend === null || legend === void 0 ? void 0 : legend.color;
-            legendTableDataItemLabel.innerHTML = `${legend === null || legend === void 0 ? void 0 : legend.name} ${legend === null || legend === void 0 ? void 0 : legend.startValue} - ${legend === null || legend === void 0 ? void 0 : legend.endValue} (${legend === null || legend === void 0 ? void 0 : legend.itemCount})`;
-            // legendTableDataItemCount.innerHTML = `${legend?.name}`;
-            legendTableRowItem.appendChild(legendTableDataItemColorSection);
-            legendTableRowItem.appendChild(legendTableDataItemLabel);
-            legendTableRowItem.appendChild(legendTableDataItemCount);
-            legendTableBodyItem.appendChild(legendTableRowItem);
-            legendTableItem.appendChild(legendTableBodyItem);
-            legendDIVItem.appendChild(legendTableItem);
-            legendDOMElement === null || legendDOMElement === void 0 ? void 0 : legendDOMElement.appendChild(legendDIVItem);
-        }
-    }
-    /**
-     *
-     */
-    createHoverDetails(mapboxGeoJSONFeature) {
-        var _a;
-        const dataName = this.mapAnalytic &&
-            this.mapAnalytic.metaData &&
-            this.mapAnalytic.metaData.dimensions &&
-            this.mapAnalytic.metaData.dimensions.dx &&
-            _.head(this.mapAnalytic.metaData.dimensions.dx)
-            ? _.head(this.mapAnalytic.metaData.dimensions.dx)
-            : '';
-        if (dataName) {
-            const indicatorName = this.mapAnalytic &&
-                this.mapAnalytic.metaData &&
-                this.mapAnalytic.metaData.items &&
-                this.mapAnalytic.metaData.items[dataName] &&
-                this.mapAnalytic.metaData.items[dataName].name
-                ? this.mapAnalytic.metaData.items[dataName].name
-                : '';
-            const periodId = this.mapAnalytic &&
-                this.mapAnalytic.metaData &&
-                this.mapAnalytic.metaData.dimensions &&
-                this.mapAnalytic.metaData.dimensions.pe &&
-                _.head(this.mapAnalytic.metaData.dimensions.pe)
-                ? _.head(this.mapAnalytic.metaData.dimensions.pe)
-                : '';
-            const periodName = this.mapAnalytic &&
-                periodId &&
-                this.mapAnalytic.metaData &&
-                this.mapAnalytic.metaData.items &&
-                this.mapAnalytic.metaData.items[periodId] &&
-                this.mapAnalytic.metaData.items[periodId].name
-                ? this.mapAnalytic.metaData.items[periodId].name
-                : '';
-            const featuresDOMElement = document.getElementById('features');
-            const info = _.head(mapboxGeoJSONFeature);
-            let htmlCode = ``;
-            if (featuresDOMElement) {
-                featuresDOMElement.style.display = 'block';
-                if (dataName && mapboxGeoJSONFeature) {
-                    htmlCode += `<table>`;
-                    htmlCode += `<thead>`;
-                    htmlCode += `</thead>`;
-                    htmlCode += `<tbody>`;
-                    if (info &&
-                        info.properties &&
-                        info.properties.value &&
-                        info.properties.value) {
-                        htmlCode += `<tr>`;
-                        htmlCode += `<td><b>Region:</b> ${(_a = info.properties) === null || _a === void 0 ? void 0 : _a.description}</td>`;
-                        htmlCode += `</tr>`;
-                        htmlCode += `<tr>`;
-                        htmlCode += `<td><b>Data:</b> ${indicatorName}</td>`;
-                        htmlCode += `</tr>`;
-                        htmlCode += `<tr>`;
-                        htmlCode += `<td><b>Period:</b> ${periodName}</td>`;
-                        htmlCode += `</tr>`;
-                        htmlCode += `<tr>`;
-                        htmlCode += `<td><b>Value:</b> ${info.properties.value}</td>`;
-                        htmlCode += `</tr>`;
-                    }
-                    else {
-                        htmlCode += `<td>Hover on the map for more info! </td>`;
-                        htmlCode += `</tr>`;
-                        htmlCode += `</tr>`;
-                    }
-                    htmlCode += `<tfoot>`;
-                    htmlCode += `</tfoot>`;
-                    featuresDOMElement.innerHTML = htmlCode;
-                }
-                else {
-                    featuresDOMElement.innerHTML = `<p>Hover over a state!</p>`;
-                }
-            }
-        }
-    }
-    /**
-     *
-     */
-    createMapTitle() {
-        const dataName = this.mapAnalytic &&
-            this.mapAnalytic.metaData &&
-            this.mapAnalytic.metaData.dimensions &&
-            this.mapAnalytic.metaData.dimensions.dx &&
-            _.head(this.mapAnalytic.metaData.dimensions.dx)
-            ? _.head(this.mapAnalytic.metaData.dimensions.dx)
-            : '';
-        if (dataName) {
-            const indicatorName = this.mapAnalytic &&
-                this.mapAnalytic.metaData &&
-                this.mapAnalytic.metaData.items &&
-                this.mapAnalytic.metaData.items[dataName] &&
-                this.mapAnalytic.metaData.items[dataName].name
-                ? this.mapAnalytic.metaData.items[dataName].name
-                : '';
-            const periodId = this.mapAnalytic &&
-                this.mapAnalytic.metaData &&
-                this.mapAnalytic.metaData.dimensions &&
-                this.mapAnalytic.metaData.dimensions.pe &&
-                _.head(this.mapAnalytic.metaData.dimensions.pe)
-                ? _.head(this.mapAnalytic.metaData.dimensions.pe)
-                : '';
-            const mapTitleDOMElement = document.getElementById('map-title');
-            if (mapTitleDOMElement && periodId && indicatorName) {
-                const periodName = this.mapAnalytic &&
-                    this.mapAnalytic.metaData &&
-                    this.mapAnalytic.metaData.items &&
-                    this.mapAnalytic.metaData.items[periodId] &&
-                    this.mapAnalytic.metaData.items[periodId].name
-                    ? this.mapAnalytic.metaData.items[periodId].name
-                    : '';
-                let htmlCode = ``;
-                htmlCode += `<h4>${indicatorName} - ${periodName}</h4>`;
-                mapTitleDOMElement.innerHTML = htmlCode;
-            }
-        }
-    }
 }
 exports.MapUtil = MapUtil;
 //# sourceMappingURL=map.util.js.map

src/lib/modules/table/helpers/table-helper.js

@@ -8,4 +8,2 @@ "use strict";
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    console.log('body id');
-    console.log(id);
     var body = document.getElementById(id);
@@ -66,2 +64,3 @@ var tbl = document.createElement('table');
     });
+    console.log(dataObject);
     (0, lodash_1.each)((_j = (_h = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _h === void 0 ? void 0 : _h.dimensions) === null || _j === void 0 ? void 0 : _j.dx, (dx) => {
@@ -71,5 +70,3 @@ var _a, _b, _c, _d, _e;
         var dxNameTableData = document.createElement('td');
-        dxNameTableData.appendChild(document.createTextNode(((_a = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _a === void 0 ? void 0 : _a.names)
-            ? (_b = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _b === void 0 ? void 0 : _b.names[dx]
-            : (_c = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _c === void 0 ? void 0 : _c.items[dx]['name']));
+        dxNameTableData.appendChild(document.createTextNode(((_a = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _a === void 0 ? void 0 : _a.names) ? (_b = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _b === void 0 ? void 0 : _b.names[dx] : (_c = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _c === void 0 ? void 0 : _c.items[dx]['name']));
         dxNameTableData.style.backgroundColor = '#afc9e3';
@@ -79,2 +76,3 @@ dxTableRow.appendChild(dxNameTableData);
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            console.log(dataObject, peItem, dx, index);
             var dataForTheYear = document.createElement('td');
@@ -95,2 +93,6 @@ dataForTheYear.appendChild(document.createTextNode(dataObject[dx] && dataObject[dx][peItem['id']]
                     : null;
+                // console.log('data diffs');
+                // console.log(previosPeriodData);
+                // console.log(currentData);
+                // console.log(currentData - previosPeriodData);
                 var difference = document.createElement('td');
@@ -139,5 +141,3 @@ difference.appendChild(document.createTextNode(currentData == null || previosPeriodData == null
         var _a, _b, _c;
-        return ((_a = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _a === void 0 ? void 0 : _a.names)
-            ? (_b = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _b === void 0 ? void 0 : _b.names[analyticsRow[ouIndex]]
-            : (_c = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _c === void 0 ? void 0 : _c.items[analyticsRow[ouIndex]]['name'];
+        return ((_a = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _a === void 0 ? void 0 : _a.names) ? (_b = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _b === void 0 ? void 0 : _b.names[analyticsRow[ouIndex]] : (_c = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) === null || _c === void 0 ? void 0 : _c.items[analyticsRow[ouIndex]]['name'];
     }));
@@ -144,0 +144,0 @@ return ousArray === null || ousArray === void 0 ? void 0 : ousArray.join(',');

No alert changes

Improved metrics

Total package byte prevSize

362012

increased by38.14%

Number of package files

107

increased by50.7%

Lines of code

7074

increased by42.33%

No dependency changes