<commit_before><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="plutonium-chart-behavior.html">

<!--
`plutonium-line-chart`
Visualization widget.

@demo demo/index-waterfall-chart.html 
-->

<dom-module id="plutonium-waterfall-chart">
    <template>
        <style>
            :host {
                display: block;
                height: 400px;
            }
            text {
                fill: white;
            }
            .controls {
                display: inline-block;
                margin: 0 0 0 20px;
            }
            svg {
                float: right;
                margin: 0;
            }
            .axis--x path {
                display: none;
            }

            .line {
                fill: none;
                stroke: steelblue;
                stroke-width: 1.5px;
            }
        </style>
        <content select="plutonium-axis"></content>
        <!--        <div class="controls">
                    <template is="dom-repeat" items="{{data}}" as="d">
                        <p>A
                            <label for="input">{{d.type}}: </label>
                            <input id="input"
                                   type="range"
                                   value="{{d.amount}}"
                                   min="0" max="500" />
                            <span>[[d.amount]]</span>
                        </p>
                    </template>
                </div>-->
        <svg id="svg"></svg>
    </template>

    <script>
        Polymer({
            is: 'plutonium-waterfall-chart',
            extends: 'div',
            properties: {
                _resolution: {
                    type: Object,
                    notify: true,
                    value: {
                        width: 40,
                        height: 40
                    }
                },
                _cellSizeX: {
                    type: Number,
                    computed: '_computeCellSizeX(_resolution, _height)'
                },
                _cellSizeY: {
                    type: Number,
                    computed: '_computeCellSizeY(_resolution, _width)'
                }
            },
            behaviors: [
                Plutonium.ChartBehavior
            ],
            observers: [
                '_observeWaterfall(_cellSizeX, _cellSizeY, _g, data)'
            ],

            _computeCellSizeX: function (resolution, height) {
                return height / resolution.height;
            },
            _computeCellSizeY: function (resolution, width) {
                return width / resolution.width;
            },

            _observeWaterfall: function (_cellSizeX, _cellSizeY, _g, data) {
                console.debug((this.id ? this.is + '#' + this.id : this.is), 'observe-data');

                this.fire('d3-render', {});




            },
            draw: function () {
                console.debug((this.id ? this.is + '#' + this.id : this.is), 'draw');

                var zScale = d3.scaleQuantile().domain([-10, 0, 10]).range(this.data.domains.z);
                var self = this;

                this._graph = this._g.append('g').attr('class', 'mapg').selectAll('.cellg')
                        .data(this.data.data, function (d) {
                            return d.x + ":" + d.y;
                        })
                        .enter()
                        .append("rect")
                        .attr("y", function (d) {
                            return d.x * self._cellSizeY;
                        })
                        .attr("x", function (d) {
                            return d.y * self._cellSizeX;
                        })
                        .attr("class", function (d) {
                            return "cell cell-border cr" + (d.x - 1) + " cc" + (d.y - 1);
                        })
                        .attr("width", self._cellSizeX).attr("height", self._cellSizeY)
                        .style("fill", function (d) {
                            return zScale(d.z).name;
                        });


                // TODO: separate component
                this._xAxis = this._g.append("g")
                        .selectAll(".rowLabelg")
                        .data(this.data.domains.x)
                        .enter()
                        .append("text")
                        .attr("font-size", (self._cellSizeY - 1) + "px")
                        .text(function (d) {
                            return d.name;
                        })
                        .attr("x", 0)
                        .attr("y", function (d, i) {
                            return self._cellSizeY * i;
                        })
                        .style("text-anchor", "end")
                        .attr("transform", "translate(-6," + self._cellSizeX / 1.5 + ")")
                        .attr("class", function (d, i) {
                            return "rowLabel mono r" + i;
                        });

                this._yAxis = this._g.append("g")
                        .selectAll(".colLabelg")
                        .data(this.data.domains.y)
                        .enter()
                        .append("text")
                        .attr("font-size", (self._cellSizeX - 1) + "px")
                        .text(function (d) {
                            return d.name;
                        })
                        .attr("x", 0)
                        .attr("y", function (d, i) {
                            return self._cellSizeX * i;
                        })
                        .style("text-anchor", "left")
                        .attr("transform", "translate(" + self._cellSizeY + ",-6) rotate (-90)")
                        .attr("class", function (d, i) {
                            return "colLabel mono c" + i;
                        });
            },
            update: function (data) {
                if (this.data) {

                    if (this.data.deltaRows) {
                        this._g.remove();
//                        delete this._g;
                        this._g = this._svg.append("g").attr("transform", "translate(" + this._margin.left + "," + this._margin.top + ")");
                        console.debug('Dataset size before shrink:', this.data.data.length);
//
                        var newData = [];
                        this.data.data.forEach(function (item, index, arr) {
                            if (item.x < this.data.deltaRows) {
//                                arr.splice(index, 1);
                            } else {
                                item.x = item.x - this.data.deltaRows;
                                newData.push(item);
                            }
                        }, this);
                        console.debug('Dataset size after shrink:', this.data.data.length);
                        if (data.data) {
                            newData = newData.concat(data.data);
//                            data.data.forEach(function (item, index, arr) {
//                                item.x = item.x - data.deltaRows;
//                            }, this);
                        }
                        this.data.data = newData;
                    }
//                    this.data = Object.assign(this.data, data);
                    console.debug('Dataset size after MERGE:', this.data.data.length);

//                    this.set('data', Object.assign(this.data, data));
                } else {
                    this.data = data;
                }



//                this.fire('d3-render', {});
            }
        });
    </script>
</dom-module><commit_msg>Domain refresh.<commit_after><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="plutonium-chart-behavior.html">

<!--
`plutonium-line-chart`
Visualization widget.

@demo demo/index-waterfall-chart.html 
-->

<dom-module id="plutonium-waterfall-chart">
    <template>
        <style>
            :host {
                display: block;
                height: 400px;
            }
            text {
                fill: white;
            }
            .controls {
                display: inline-block;
                margin: 0 0 0 20px;
            }
            svg {
                float: right;
                margin: 0;
            }
            .axis--x path {
                display: none;
            }

            .line {
                fill: none;
                stroke: steelblue;
                stroke-width: 1.5px;
            }
        </style>
        <content select="plutonium-axis"></content>
        <!--        <div class="controls">
                    <template is="dom-repeat" items="{{data}}" as="d">
                        <p>A
                            <label for="input">{{d.type}}: </label>
                            <input id="input"
                                   type="range"
                                   value="{{d.amount}}"
                                   min="0" max="500" />
                            <span>[[d.amount]]</span>
                        </p>
                    </template>
                </div>-->
        <svg id="svg"></svg>
    </template>

    <script>
        Polymer({
            is: 'plutonium-waterfall-chart',
            extends: 'div',
            properties: {
                _resolution: {
                    type: Object,
                    notify: true,
                    value: {
                        width: 40,
                        height: 40
                    }
                },
                _cellSizeX: {
                    type: Number,
                    computed: '_computeCellSizeX(_resolution, _height)'
                },
                _cellSizeY: {
                    type: Number,
                    computed: '_computeCellSizeY(_resolution, _width)'
                }
            },
            behaviors: [
                Plutonium.ChartBehavior
            ],
            observers: [
                '_observeWaterfall(_cellSizeX, _cellSizeY, _g, data)'
            ],

            _computeCellSizeX: function (resolution, height) {
                return height / resolution.height;
            },
            _computeCellSizeY: function (resolution, width) {
                return width / resolution.width;
            },

            _observeWaterfall: function (_cellSizeX, _cellSizeY, _g, data) {
                console.debug((this.id ? this.is + '#' + this.id : this.is), 'observe-data');

                this.fire('d3-render', {});




            },
            draw: function () {
                console.debug((this.id ? this.is + '#' + this.id : this.is), 'draw');

                var zScale = d3.scaleQuantile().domain([-10, 0, 10]).range(this.data.domains.z);
                var self = this;

                this._graph = this._g.append('g').attr('class', 'mapg').selectAll('.cellg')
                        .data(this.data.data, function (d) {
                            return d.x + ":" + d.y;
                        })
                        .enter()
                        .append("rect")
                        .attr("y", function (d) {
                            return d.x * self._cellSizeY;
                        })
                        .attr("x", function (d) {
                            return d.y * self._cellSizeX;
                        })
                        .attr("class", function (d) {
                            return "cell cell-border cr" + (d.x - 1) + " cc" + (d.y - 1);
                        })
                        .attr("width", self._cellSizeX).attr("height", self._cellSizeY)
                        .style("fill", function (d) {
                            return zScale(d.z).name;
                        });


                // TODO: separate component
                this._xAxis = this._g.append("g")
                        .selectAll(".rowLabelg")
                        .data(this.data.domains.x)
                        .enter()
                        .append("text")
                        .attr("font-size", (self._cellSizeY - 1) + "px")
                        .text(function (d) {
                            return d.name;
                        })
                        .attr("x", 0)
                        .attr("y", function (d, i) {
                            return self._cellSizeY * i;
                        })
                        .style("text-anchor", "end")
                        .attr("transform", "translate(-6," + self._cellSizeX / 1.5 + ")")
                        .attr("class", function (d, i) {
                            return "rowLabel mono r" + i;
                        });

                this._yAxis = this._g.append("g")
                        .selectAll(".colLabelg")
                        .data(this.data.domains.y)
                        .enter()
                        .append("text")
                        .attr("font-size", (self._cellSizeX - 1) + "px")
                        .text(function (d) {
                            return d.name;
                        })
                        .attr("x", 0)
                        .attr("y", function (d, i) {
                            return self._cellSizeX * i;
                        })
                        .style("text-anchor", "left")
                        .attr("transform", "translate(" + self._cellSizeY + ",-6) rotate (-90)")
                        .attr("class", function (d, i) {
                            return "colLabel mono c" + i;
                        });
            },
            update: function (data) {
                if (this.data) {

                    if (this.data.deltaRows) {
                        this._g.remove();
//                        delete this._g;
                        this._g = this._svg.append("g").attr("transform", "translate(" + this._margin.left + "," + this._margin.top + ")");
                        console.debug('Dataset size before shrink:', this.data.data.length);
//
                        var newData = [];
                        this.data.data.forEach(function (item, index, arr) {
                            if (item.x < this.data.deltaRows) {
//                                arr.splice(index, 1);
                            } else {
                                item.x = item.x - this.data.deltaRows;
                                newData.push(item);
                            }
                        }, this);
                        console.debug('Dataset size after shrink:', this.data.data.length);
                        if (data.data) {
                            newData = newData.concat(data.data);
//                            data.data.forEach(function (item, index, arr) {
//                                item.x = item.x - data.deltaRows;
//                            }, this);
                            delete data.data;
                        }
                        
                        this.data.data = newData;
                        this.data = Object.assign(this.data, data);
                    }
//                    this.data = Object.assign(this.data, data);
                    console.debug('Dataset size after MERGE:', this.data.data.length);

//                    this.set('data', Object.assign(this.data, data));
                } else {
                    this.data = data;
                }



//                this.fire('d3-render', {});
            }
        });
    </script>
</dom-module>
{'fraction_non_alphanumeric': 0.12690676625102854, 'fraction_numerical': 0.00506361162098867, 'mean_word_length': 0.8496839147740576, 'pattern_counts': {'":': 2, '<': 61, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7634925', 'n_tokens_mistral': 4103, 'n_tokens_neox': 3746, 'n_words': 705}