datalets/treemap-datalet/treemap-datalet.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../base-datalet/base-datalet.html">

<dom-module id="treemap-datalet">
    <template>
        <style is="custom-style">

            :host ::content h6 {
                color: red;
            }

            :host ::content #treemap_placeholder {
                width: 100%;
                height: 70%;
                min-height: 500px;
                background: #ddd;
            }

            :host ::content text {
                pointer-events: none;
            }

            :host ::content .grandparent text {
                font-weight: bold;
            }

            :host ::content rect {
                fill: none;
                stroke: #fff;
            }

            :host ::content rect.parent,
            .grandparent rect {
                stroke-width: 2px;
            }

            :host ::content .grandparent rect {
                fill: orange;
            }

            :host ::content .grandparent:hover rect {
                fill: #ee9700;
            }

            :host ::content .children rect.parent,
            .grandparent rect {
                cursor: pointer;
            }

            :host ::content .children rect.parent {
                fill: #bbb;
                fill-opacity: .5;
            }

            :host ::content .children:hover rect.child {
                fill: #bbb;
            }
        </style>
        <div id="treemap_placeholder"></div>
        <base-datalet data-url="{{dataUrl}}" query="{{query}}"></base-datalet>
    </template>

    <script src="../shared_js/d3.js"></script>
    <script src="js/buildtreemap.js"></script>
    <script>
        var TreemapBehavior = {
            map : {
                name : "Expenses",
                children : []
            },
            selectData: function(e){
                var queries =  this._component.query.split("###");

                if(queries.length > 1) {
                    for (i = 0; i < queries.length; i++) {
                        var propName = this.getPropertyName(queries[i]);

                        temp = jsonPath(this.properties.json_results.value, queries[i]);
                        for (j = 0; j < temp.length; j++) {
                            if (i == 0) this.properties.data.value[j] = {};
                            currObj = {};
                            currObj[propName] = temp[j];
                            jQuery.extend(this.properties.data.value[j], currObj);
                        }
                    }
                }else{
                    this.properties.data.value = jsonPath(this.properties.json_results.value, queries[0]);
                }

                this.map.children = [];

                for(var i = 0; i < this.properties.data.value.length; i++){
                    this.checkAggragationField(this.properties.data.value[i], queries.length , queries.length - 1);
                }
                var json = JSON.stringify(this.map);
            },
            findChild: function(child, category){
                var children = child.children;
                for (var i=0; i<children.length; i++) {
                    if (children[i].name == category)
                        return children[i];
                }
                var nchild = {name : category , children : []};
                children.push(nchild);
                return nchild;
            },
            checkAggragationField: function(object, levels, value_index){
                var curchild = this.map;
                var keys = Object.keys(object);
                for(var level= 0; level < levels; level++){

                    var child = this.findChild(curchild, object[keys[level]]);
                    curchild = child;
                }

                if (curchild.value === undefined)
                    curchild.value = 0;

                var value = curchild.value + parseFloat(object[keys[value_index]]);
                curchild.children = null;
                curchild.value = value;
            },
            transformData: function(){
                build(this.map, "treemap_placeholder");
            }
        };


        Polymer({
            is : 'treemap-datalet' ,
            ready: function(){
                var TreemapComponentBehavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior,AjaxJsonDataRequestBehavior, TreemapBehavior);
                TreemapComponentBehavior.init(this);
            }

        });
    </script>
</dom-module>