111

src/utils/timechart.js

+import * as d3 from 'd3';
+export default   function legend() {
+
+    var legendValues=[{color: "red", stop: [0,1]},{color: "blue", stop: [1,2]},{color: "purple", stop: [2,3]},{color: "yellow", stop: [3,4]},{color: "Aquamarine", stop: [4,5]}];
+    var legendScale;
+    var cellWidth = 30;
+    var cellHeight = 20;
+    var adjustable = false;
+    var labelFormat = d3.format(".01f");
+    var coordinates = {x:0, y:0};
+    var labelUnits = "units";
+    var lastValue = 6;
+    var changeValue = 1;
+    var orientation = "horizontal";
+    var cellPadding = 0;
+
+
+    function legend(svg) {
+
+        updateBGSize = function(legend){
+
+            var margin = 10;
+            dim = legend.target.node().getBBox();
+            dim.height += margin * 2;
+            dim.width += margin * 2;
+            dim.y -= margin;
+            dim.x -= margin;
+
+            legend.parentGroup.select(".mutLegendBG")
+                .attr(dim)
+        };
+
+        drag = d3.behavior.drag()
+            .on("drag", function(d,i) {
+                console.log(this);
+                d.x += d3.event.dx;
+                d.y += d3.event.dy;
+                d3.select(this).attr("transform", function(d,i){
+                    return "translate(" + [ d.x,d.y ] + ")"
+                })
+            })
+            .on("dragstart", function() {
+                d3.event.sourceEvent.stopPropagation(); // silence other listeners
+            });
+
+        function init() {
+            var mutLegendGroup = svg.append("g")
+                .attr("class", "mutLegendGroup")
+                .data([ coordinates ])
+                .attr("transform", "translate(" + coordinates.x + "," + coordinates.y + ")");
+            var target = mutLegendGroup
+                .insert("g")
+                .attr("class", "mutLegendGroupText");
+
+
+            // set legend background
+            var mutLegendBG = mutLegendGroup
+                .insert("rect", ":first-child")
+                .attr("class", "mutLegendBG")
+                .attr("fill", "white")
+                .attr("stroke", "black")
+                .attr("stroke-width", "1px");
+
+
+            return {
+                parentGroup: mutLegendGroup,
+                target: target
+            }
+        };
+
+
+
+        function cellRange(valuePosition, changeVal) {
+            legendValues[valuePosition].stop[0] += changeVal;
+            legendValues[valuePosition - 1].stop[1] += changeVal;
+            redraw();
+        }
+
+        function redraw() {
+
+
+            legend.target.selectAll("g.legendCells").data(legendValues).exit().remove();
+            legend.target.selectAll("g.legendCells").select("rect").style("fill", function(d) {return d.color});
+            if (orientation == "vertical") {
+                legend.target.selectAll("g.legendCells").select("text.breakLabels").style("display", "block").style("text-anchor", "start").attr("x", cellWidth + cellPadding).attr("y", 5 + (cellHeight / 2)).text(function(d) {return labelFormat(d.stop[0]) + (d.stop[1].length > 0 ? " - " + labelFormat(d.stop[1]) : "")})
+                legend.target.selectAll("g.legendCells").attr("transform", function(d,i) {return "translate(0," + (i * (cellHeight + cellPadding)) + ")" });
+            }
+            else {
+                legend.target.selectAll("g.legendCells").attr("transform", function(d,i) {return "translate(" + (i * cellWidth) + ",0)" });
+                legend.target.selectAll("text.breakLabels").style("text-anchor", "middle").attr("x", 0).attr("y", -7).style("display", function(d,i) {return i == 0 ? "none" : "block"}).text(function(d) {return labelFormat(d.stop[0])});
+            }
+        }
+
+        // init
+        if (!legend.initDone) {
+            var initObj = init();
+            legend.target = initObj.target;
+            legend.parentGroup = initObj.parentGroup;
+            legend.parentGroup.call(drag);
+            legend.initDone = true;
+        }
+
+
+        // remove previously painted rect and text
+        legend.target.selectAll("g.legendCells").select("text.breakLabels").remove();
+        legend.target.selectAll("g.legendCells").select("rect").remove();
+        legend.target.selectAll(".legendTitle").remove();
+
+
+        legend.target.selectAll("g.legendCells")
+            .data(legendValues)
+            .enter()
+            .append("g")
+            .attr("class", "legendCells")
+            .attr("transform", function(d,i) {return "translate(" + (i * (cellWidth + cellPadding)) + ",0)" })
+
+        legend.target.selectAll("g.legendCells")
+            .append("rect")
+            .attr("class", "breakRect")
+            .attr("height", cellHeight)
+            .attr("width", cellWidth)
+            .style("fill", function(d) {return d.color})
+            .style("stroke", function(d) {return d3.rgb(d.color).darker();});
+
+        legend.target.selectAll("g.legendCells")
+            .append("text")
+            .attr("class", "breakLabels")
+            .style("pointer-events", "none");
+
+        legend.target.append("text")
+            .text(labelUnits)
+            .attr("y", -7)
+            .attr("class", "legendTitle");
+
+        redraw();
+        updateBGSize(legend);
+    }
+
+    legend.initDone = false;
+    legend.target;
+
+    legend.inputScale = function(newScale) {
+        if (!arguments.length) return scale;
+        scale = newScale;
+        legendValues = [];
+        if (scale.invertExtent) {
+            //Is a quantile scale
+            scale.range().forEach(function(el) {
+                var cellObject = {color: el, stop: scale.invertExtent(el)}
+                legendValues.push(cellObject)
+            })
+        }
+        else {
+            scale.domain().forEach(function (el) {
+                var cellObject = {color: scale(el), stop: [el,""]}
+                legendValues.push(cellObject)
+            })
+        }
+        return this;
+    }
+
+    legend.scale = function(testValue) {
+        var foundColor = legendValues[legendValues.length - 1].color;
+        for (el in legendValues) {
+            if(testValue < legendValues[el].stop[1]) {
+                foundColor = legendValues[el].color;
+                break;
+            }
+        }
+        return foundColor;
+    }
+
+    legend.cellWidth = function(newCellSize) {
+        if (!arguments.length) return cellWidth;
+        cellWidth = newCellSize;
+        return this;
+    }
+
+    legend.cellHeight = function(newCellSize) {
+        if (!arguments.length) return cellHeight;
+        cellHeight = newCellSize;
+        return this;
+    }
+
+    legend.cellPadding = function(newCellPadding) {
+        if (!arguments.length) return cellPadding;
+        cellPadding = newCellPadding;
+        return this;
+    }
+
+    legend.cellExtent = function(incColor,newExtent) {
+        var selectedStop = legendValues.filter(function(el) {return el.color == incColor})[0].stop;
+        if (arguments.length == 1) return selectedStop;
+        legendValues.filter(function(el) {return el.color == incColor})[0].stop = newExtent;
+        return this;
+    }
+
+    legend.cellStepping = function(incStep) {
+        if (!arguments.length) return changeValue;
+        changeValue = incStep;
+        return this;
+    }
+
+    legend.units = function(incUnits) {
+        if (!arguments.length) return labelUnits;
+        labelUnits = incUnits;
+        return this;
+    }
+
+    legend.orientation = function(incOrient) {
+        if (!arguments.length) return orientation;
+        orientation = incOrient;
+        return this;
+    }
+
+    legend.labelFormat = function(incFormat) {
+        if (!arguments.length) return labelFormat;
+        labelFormat = incFormat;
+        if (incFormat == "none") {
+            labelFormat = function(inc) {return inc};
+        }
+        return this;
+    }
+
+    legend.place = function(incCoordinates) {
+        if (!arguments.length) return incCoordinates;
+        coordinates = incCoordinates;
+        return this;
+    }
+
+    return legend;
+
+}
+export function timechart(g, width, height, duration, mode) {
+
+
+    var x_values = [];
+    var y_values = [];
+    var y = d3.scaleLog()
+        .range([height, 0])
+        .domain([1, 18])
+    var x = d3.scaleLinear()
+        .range([0, width])
+        .domain([duration, 0])
+    // y = d3.scaleLinear().range([height, 0]),
+    console.log(mode)
+    if (mode == "rate") {
+
+        y = d3.scaleLinear()
+            .range([height, 0])
+            .domain([1, 18])
+        var y_axis = g.append("g")
+            .attr("class", "axis y")
+            .attr("transform", "translate(" + width + ")")
+            .call(d3.axisRight(y)
+                // .tickFormat(d3.format('.2s'))
+                //.tickValues([1000000, 2000000, 4000000,8000000,16000000, 32000000])
+                // .tickSize(-width)
+            );
+
+    }
+    else {
+        y = d3.scaleSqrt()
+            .range([height, 0])
+            .domain([0, 400])
+        var y_axis = g.append("g")
+            .attr("class", "axis y")
+            .attr("transform", "translate(" + width + ")")
+            .call(d3.axisRight(y)
+                .tickFormat(d3.format('.2s'))
+                .tickValues([30, 100,400])
+                // .tickSize(-width)
+            );
+    }
+
+
+    var z = d3.scaleOrdinal(d3.schemeCategory10);
+
+    var x_axis = g.append("g")
+        .attr("class", "axis x")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(x)
+            .ticks(5)
+            .tickSize(2)
+            .tickPadding(1));
+
+
+    var paths = g.append("g").attr("class", "linepath");
+
+    var line = d3.line()
+        // .curve(d3.curveBasis)
+        .curve(d3.curveMonotoneX)
+        .x(function (_, i) { return x(x_values[x_values.length - 1] - x_values[i]); })
+        .y(function (d, i) { return y(Math.max(d, 1)); });
+
+    var smooth_transform = 'translate(-' + width + ')';
+
+    function append(time, sample) {
+
+        while (y_values.length < sample.length) {
+            var data = {
+                values: d3.range(x_values.length).map(function (d) { return undefined; })
+            };
+            data.path = paths.append('path')
+                .data([data.values])
+                .attr('fill', 'none')
+                .style('stroke', z(y_values.length));
+            y_values.push(data);
+            data.path.call(hover, data.path);
+        }
+
+        x_values.push(time);
+        // Prune off too old values (at least one sample remains)
+        var dropoff = time - duration;
+        while (x_values[0] < dropoff) {
+            x_values.shift();
+            for (i = 0; i < y_values.length; ++i)
+                y_values[i].values.shift();
+        }
+        for (var i = 0; i < y_values.length; ++i) {
+            y_values[i].values.push(sample[i]);
+            y_values[i].path.attr('d', line);
+        }
+        // Smooth update (optional -- remove if gets heavy)
+        console.log(paths)
+        // paths.attr('transform', null)
+        //     .transition()
+        //     .duration(1000*duration)
+        //     .ease(d3.easeLinear)
+        //     .attr('transform', smooth_transform);
+    }
+
+    function hover(svg, path) {
+
+        if ("ontouchstart" in document) svg
+            .style("-webkit-tap-highlight-color", "transparent")
+            .on("touchmove", moved)
+            .on("touchstart", entered)
+            .on("touchend", left)
+        else svg
+            .on("mousemove", moved)
+            .on("mouseenter", entered)
+            .on("mouseleave", left);
+
+        const dot = svg.append("g")
+            .attr("display", "none");
+
+        dot.append("circle")
+            .attr("r", 2.5);
+
+        dot.append("text")
+            .attr("font-family", "sans-serif")
+            .attr("font-size", 10)
+            .attr("text-anchor", "middle")
+            .attr("y", -8);
+
+        function moved(event) {
+            console.log("moved ")
+            console.log(event)
+
+            // event.preventDefault();
+            // const pointer = d3.pointer(event, this);
+            // const xm = x.invert(pointer[0]);
+            // const ym = y.invert(pointer[1]);
+            // const i = d3.bisectCenter(data.dates, xm);
+            // const s = d3.least(data.series, d => Math.abs(d.values[i] - ym));
+            // path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise();
+            // dot.attr("transform", `translate(${x(data.dates[i])},${y(s.values[i])})`);
+            // dot.select("text").text(s.name);
+        }
+
+        function entered() {
+            console.log("entered")
+            path.style("mix-blend-mode", null).attr("stroke", "#ddd");
+            dot.attr("display", null);
+        }
+
+        function left() {
+            console.log("left ")
+
+        }
+    }
+
+
+
+
+    return {
+        append: append
+    };
+}
+export function append(time, sample) {
+
+}