require(["require", "exports", "knockout", "ojs/ojbootstrap", "ojs/ojarraytreedataprovider", "ojs/ojpalette", "ojs/ojpaletteutils", "ojs/ojknockout", "ojs/ojtreemap"], function (require, exports, ko, ojbootstrap_1, ArrayTreeDataProvider, ojpalette_1, ojpaletteutils_1) { "use strict"; class TreemapModel { /* * Treemapで表示するデータを更新する。 */ update(nodes) { this.treemapData(new ArrayTreeDataProvider(nodes, { keyAttributes: "label", childrenAttribute: "nodes", })); } constructor() { /* * this.treemapDataはknockoutのobservableArrayに変更し、 * データはコンストラクタの外から設定する。 */ this.treemapData = ko.observableArray(); /* this.data = JSON.parse(jsonData); this.treemapData = new ArrayTreeDataProvider(this.data, { keyAttributes: 'label', childrenAttribute: 'nodes' }); */ this.maxIncome = 70000; this.minIncome = 35000; this.colors = (0, ojpalette_1.getColorValuesFromPalette)('viridis'); this.getColor = (meanIncome) => { return (0, ojpaletteutils_1.getColorValue)(this.colors, (meanIncome - this.minIncome) / (this.maxIncome - this.minIncome)); }; this.getShortDesc = (label, population, meanIncome) => { return ('<b>' + label + '</b><br/>Population: ' + population + '<br/>Income: ' + meanIncome); }; } } (0, ojbootstrap_1.whenDocumentReady)().then(() => { treemap = new TreemapModel(); ko.applyBindings(treemap, document.getElementById('treemap-container')); /* ページ・ロード時の表示 */ apex.actions.invoke("update-treemap"); }); }); /* * Treemapを更新する。 */ apex.actions.add([ { name: "update-treemap", action: () => { apex.server.process ( "GET_DATA", {}, { success: (data) => { treemap.update(data); } } ); } } ]);