ibm-js / dtreemap

TreeMap Custom Element

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`dtreemap` is not repositioned when DOM is changed

tkrugg opened this issue · comments

dtreemap is not repositioned when DOM is changed. It could be only a CSS issue.
Below is an example that illustrates it.

  1. when some long text is inserted before the treemap is built
    1
  2. when the same long text is inserted after the treemap is built (ie DOM is modified after treemap is built)
    2

To reproduce this:

require(["dojo/ready", "dojo/dom", "dojox/treemap/TreeMap",
        "dojo/store/Memory", "dojox/color/MeanColorModel", "dojo/_base/Color"],
        function(ready, dom, TreeMap, Memory, MeanColorModel, Color) {
            ready(function(){

                // example from documentation
                var dataStore = new Memory({idProperty: "label", data:
                    [
                { label: "France", sales: 500, profit: 50, region: "EU" },
                { label: "Germany", sales: 450, profit: 48, region: "EU" },
                { label: "UK", sales: 700, profit: 60, region: "EU" },
                { label: "USA", sales: 2000, profit: 250, region: "America" },
                { label: "Canada", sales: 600, profit: 30, region: "America" },
                { label: "Brazil", sales: 450, profit: 30, region: "America" },
                { label: "China", sales: 500, profit: 40, region: "Asia" },
                { label: "Japan", sales: 900, profit: 100, region: "Asia" }
                ]});
                var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
                new TreeMap({store: dataStore,
                    areaAttr: "sales", colorAttr: "profit", groupAttrs: ["region"],
                    colorModel: colorModel }, dom.byId("treeMap"));

                // changing the upper part of the DOM
                var longText = "Lorem ipsum dolor sit ame..."
                setTimeout(function(){
                    document.getElementById("text").innerText = longText;
                }, 500)
            });
        });
<p id="text"></p>
<div>
    <div id="treeMap" style="width:600px;height:600px"></div>
</div>