score:1

Accepted answer

after some hours of struggling found my own question-answer. i'm still learning and improving my attention to detail on my programming problems.

solution

let me spoon feed you, so you just copy-paste it and get it done.

some globally declarations:

highcharts;
chartconstructor = "mapchart";
chartoptions: highcharts.options;
updatefrominput = false;
chart;
chartcallback;

put the below code snippet in your component constructor

this.chartcallback = chart => {
    this.chart = chart;
};

put below code in ngoninit()

this.generatemap();

now the main part:

generatemap() {
    const self = this;
    self.highcharts = highcharts;

    const usmapdata = require("@highcharts/map-collection/countries/us/us-all.geo.json");
    const usmap = highcharts.geojson(usmapdata);

    self.chartoptions = {
        chart: {
            height: (8 / 16) * 100 + "%",
            events: {
                drilldown: function (e: any) {
                    settimeout(() => {
                        self.methodmap(e.point.splitname);
                        const mapkey = "countries/us/" + e.point.drilldown + "-all";
                        const mapdata = require(`@highcharts/map-collection/${mapkey}.geo.json`);
                        const provincedata = highcharts.geojson(mapdata);
                        self.chart.hideloading();
                        self.chart.addseriesasdrilldown(e.point, {
                            name: e.point.name,
                            data: provincedata,

                            datalabels: {
                                enabled: true,
                                format: '{point.name}'
                            }
                        } as highcharts.seriesoptionstype);

                        self.chart.settitle(null, { text: e.point.name });
                    }, 100);
                },
                drillup() {
                    self.resetmethod();
                }
            }
        },
        title: {
            text: ""
        },
        coloraxis: {
            min: 0,
            mincolor: "#e6e7e8",
            maxcolor: "#417bcc"
        },

        mapnavigation: {
            enabled: true,
            buttonoptions: {
                verticalalign: "bottom"
            }
        },
        plotoptions: {
            map: {
                states: {
                    hover: {
                        color: "#f8ba03"
                    }
                }
            }
        },
        series: [
            {
                type: "map",
                name: "united states",
                data: null,
                datalabels: {
                    enabled: true,
                    color: '#ffffff',
                    format: `{point.splitname}`,
                    style: {
                        texttransform: 'uppercase',
                    }
                },
            }
        ],
        drilldown: {}
    };

    self.currentvendorservice.getallvendorstates().pipe(
        tap(result => {
            self.chart.showloading();

            usmap.foreach((el: any, i) => {
                el.splitname = el.properties["hc-key"].split('-')[1].touppercase();
                el.drilldown = el.properties["hc-key"];
                const getfirstmatchedvendor = result.data.find(vendorobj => vendorobj.state_code == el.splitname);
                if (getfirstmatchedvendor) {
                    el.value = getfirstmatchedvendor.vendor_count;
                }
            });

            self.chartoptions.series = [
                {
                    type: "map",
                    data: usmap
                }
            ];

            self.updatefrominput = true;
            self.chart.hideloading();
        },
            (error: any) => {
                self.gifloader = false
                self.errormessage = error.error.message;
                self.snackbar.open(self.errormessage, '', {
                    duration: 2000,
                });
                console.log(`error on retriving all vendors state list : ${error}`);
            }
        ),
        finalize(() => { })).subscribe();
}

yes, you will customize the above business logic as per your need. but that's what i want. i've done some modifications in self.chartoptions object and add settimeout.

cheers!


Related Query

More Query from same tag