import { Palette } from "@hpcc-js/common";
import { Layered, TopoJSONChoropleth, topoJsonFolder } from "@hpcc-js/map";
import { Workunit } from "@hpcc-js/comms";

topoJsonFolder("https://unpkg.com/@hpcc-js/map/TopoJSON");

var myPal = Palette.rainbow("boysGirls", ["#3182bd", "#9ecae1", "#deebf7", "white", "#fee0d2", "#fc9272", "#de2d26"]);

var nd = new TopoJSONChoropleth()   //  Northern Ireland
    .region("ND")
    .opacity(0.75)
    ;

var ie = new TopoJSONChoropleth()   //  Republic of Ireland
    .region("IE")
    .paletteID("boysGirls")
    .opacity(0.75)
    ;

var layeredMap = new Layered()
    .target("placeholder")
    .layers([
        nd,
        ie
    ])
    .projection("Mercator")
    ;

var wu = Workunit.attach({ baseUrl: "https://play.hpccsystems.com:18010" }, "W20181021-065153");
wu.fetchResults().then(results => {
    return results[0].fetchRows();
}).then(rows => {
    var data = rows.map(row => [row.location, ((row.females - row.males) / row.total) * 100]);
    ie.data(data.concat([["min", -5], ["max", 5]]));  //  Force colors to be balanced around 0
    layeredMap.render().render();
});