ui/static/structured-streaming-page.js

0001 /*
0002  * Licensed to the Apache Software Foundation (ASF) under one or more
0003  * contributor license agreements.  See the NOTICE file distributed with
0004  * this work for additional information regarding copyright ownership.
0005  * The ASF licenses this file to You under the Apache License, Version 2.0
0006  * (the "License"); you may not use this file except in compliance with
0007  * the License.  You may obtain a copy of the License at
0008  *
0009  *    http://www.apache.org/licenses/LICENSE-2.0
0010  *
0011  * Unless required by applicable law or agreed to in writing, software
0012  * distributed under the License is distributed on an "AS IS" BASIS,
0013  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
0014  * See the License for the specific language governing permissions and
0015  * limitations under the License.
0016  */
0017
0018 // pre-define some colors for legends.
0019 var colorPool = ["#F8C471", "#F39C12", "#B9770E", "#73C6B6", "#16A085", "#117A65", "#B2BABB", "#7F8C8D", "#616A6B"];
0020
0021 function drawAreaStack(id, labels, values, minX, maxX, minY, maxY) {
0022     d3.select(d3.select(id).node().parentNode)
0023         .style("padding", "8px 0 8px 8px")
0024         .style("border-right", "0px solid white");
0025
0026     // Setup svg using Bostock's margin convention
0027     var margin = {top: 20, right: 40, bottom: 30, left: maxMarginLeftForTimeline};
0028     var width = 850 - margin.left - margin.right;
0029     var height = 300 - margin.top - margin.bottom;
0030
0031     var svg = d3.select(id)
0032         .append("svg")
0033         .attr("width", width + margin.left + margin.right)
0034         .attr("height", height + margin.top + margin.bottom)
0035         .append("g")
0036         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
0037
0038     var data = values;
0039
0040     var parse = d3.time.format("%H:%M:%S.%L").parse;
0041
0042     // Transpose the data into layers
0043     var dataset = d3.layout.stack()(labels.map(function(fruit) {
0044         return data.map(function(d) {
0045             return {_x: d.x, x: parse(d.x), y: +d[fruit]};
0046         });
0047     }));
0048
0049
0050     // Set x, y and colors
0051     var x = d3.scale.ordinal()
0052         .domain(dataset[0].map(function(d) { return d.x; }))
0053         .rangeRoundBands([10, width-10], 0.02);
0054
0055     var y = d3.scale.linear()
0056         .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
0057         .range([height, 0]);
0058
0059     var colors = colorPool.slice(0, labels.length)
0060
0061     // Define and draw axes
0062     var yAxis = d3.svg.axis()
0063         .scale(y)
0064         .orient("left")
0065         .ticks(7)
0066         .tickFormat( function(d) { return d } );
0067
0068     var xAxis = d3.svg.axis()
0069         .scale(x)
0070         .orient("bottom")
0071         .tickFormat(d3.time.format("%H:%M:%S.%L"));
0072
0073     // Only show the first and last time in the graph
0074     var xline = []
0075     xline.push(x.domain()[0])
0076     xline.push(x.domain()[x.domain().length - 1])
0077     xAxis.tickValues(xline);
0078
0079     svg.append("g")
0080         .attr("class", "y axis")
0081         .call(yAxis)
0082         .append("text")
0083             .attr("transform", "translate(0," + unitLabelYOffset + ")")
0084             .text("ms");
0085
0086     svg.append("g")
0087         .attr("class", "x axis")
0088         .attr("transform", "translate(0," + height + ")")
0089         .call(xAxis);
0090
0091     // Create groups for each series, rects for each segment
0092     var groups = svg.selectAll("g.cost")
0093         .data(dataset)
0094         .enter().append("g")
0095         .attr("class", "cost")
0096         .style("fill", function(d, i) { return colors[i]; });
0097
0098     var rect = groups.selectAll("rect")
0099         .data(function(d) { return d; })
0100         .enter()
0101         .append("rect")
0102         .attr("x", function(d) { return x(d.x); })
0103         .attr("y", function(d) { return y(d.y0 + d.y); })
0104         .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
0105         .attr("width", x.rangeBand())
0106         .on('mouseover', function(d) {
0107             var tip = '';
0108             var idx = 0;
0109             var _values = formattedTimeToValues[d._x];
0110             _values.forEach(function (k) {
0111                 tip += labels[idx] + ': ' + k + '   ';
0112                 idx += 1;
0113             });
0114             tip += " at " + formattedTimeTipStrings[d._x];
0115             showBootstrapTooltip(d3.select(this).node(), tip);
0116         })
0117         .on('mouseout',  function() {
0118             hideBootstrapTooltip(d3.select(this).node());
0119         })
0120         .on("mousemove", function(d) {
0121             var xPosition = d3.mouse(this)[0] - 15;
0122             var yPosition = d3.mouse(this)[1] - 25;
0123             tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
0124             tooltip.select("text").text(d.y);
0125         });
0126
0127
0128     // Draw legend
0129     var legend = svg.selectAll(".legend")
0130         .data(colors)
0131         .enter().append("g")
0132         .attr("class", "legend")
0133         .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });
0134
0135     legend.append("rect")
0136         .attr("x", width - 20)
0137         .attr("width", 18)
0138         .attr("height", 18)
0139         .style("fill", function(d, i) {return colors.slice().reverse()[i];})
0140         .on('mouseover', function(d, i) {
0141             var len = labels.length
0142             showBootstrapTooltip(d3.select(this).node(), labels[len - 1 - i]);
0143         })
0144         .on('mouseout',  function() {
0145             hideBootstrapTooltip(d3.select(this).node());
0146         })
0147         .on("mousemove", function(d) {
0148             var xPosition = d3.mouse(this)[0] - 15;
0149             var yPosition = d3.mouse(this)[1] - 25;
0150             tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
0151             tooltip.select("text").text(d.y);
0152         });
0153
0154     // Prep the tooltip bits, initial display is hidden
0155     var tooltip = svg.append("g")
0156         .attr("class", "tooltip")
0157         .style("display", "none");
0158
0159     tooltip.append("rect")
0160         .attr("width", 30)
0161         .attr("height", 20)
0162         .attr("fill", "white")
0163         .style("opacity", 0.5);
0164
0165     tooltip.append("text")
0166         .attr("x", 15)
0167         .attr("dy", "1.2em")
0168         .style("text-anchor", "middle")
0169         .attr("font-size", "12px")
0170         .attr("font-weight", "bold");
0171 }