chartFocus = { //TODO: define width in vue let height = 350 let margin = {top: 60, right: 70, bottom: 60, left: 60} //let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let innerHeight = 150; let contextHeight = 150; let chartid = "chart-metrics"; //TODO: selectType -> metric const selectType = "Jitter"; let extData = d3.extent(setData, d => d[selectType]); let extDates = d3.extent(setData, d => d.TestTime); let selectSeries = d3.groups(setData, d => d.Type); let selectLookup = d3.group(setData, d => d.TestTime.toISOString()); let selectDates = Array.from(selectLookup).map(d => d[1][0].TestTime); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); svg.append("defs") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", width - margin.left - margin.right) .attr("height", innerHeight); //---------------------------------------------------------------------------------------- // Focus View //---------------------------------------------------------------------------------------- const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let xScale = d3.scaleUtc() .range([0, width - margin.left - margin.right]) .domain(extDates) let yScale = d3.scaleLinear() .range([innerHeight, 0]) .domain([0, extData[1]]) .nice(); let xAxis = d3.axisBottom(xScale); let yAxis = d3.axisRight(yScale).ticks(4); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0) .on('click', (d) => { console.log("element clicked with val ", d); }); group.append("g") .attr("class", "x-axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y-axis") .attr("transform", "translate("+ innerWidth + "," + 0+ ")") .call(yAxis); let area = d3.area() .curve(d3.curveStep) .x(d => xScale(d.TestTime)) .y1(d => yScale(d[selectType])) .y0(innerHeight) let line = d3.line() .curve(d3.curveStep) .x(d => xScale(d.TestTime)) .y(d => yScale(d[selectType])) let lineGroup = group.append("g") .attr('class', 'line-group') lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr("class", function(d) { return 'area-' + dataDict[d[0]].name; }) .attr('clip-path', 'url(#clip)') .attr('d', (d) => area(d[1])) .style("fill", function(d) { if(dataDict[d[0]].name =="general"){ return dataDict[d[0]].rgb } return "none" }) .style("opacity", "0.5"); lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'line-' + dataDict[d[0]].name; }) .attr('clip-path', 'url(#clip)') .attr("fill", "none") .style("stroke", function(d) { return dataDict[d[0]].rgb }) .style("opacity", "0.8"); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.type = d[0]; obj.label = dataDict[obj.type].name; obj.color = dataDict[obj.type].rgb; obj.val = d[1][d[1].length - 1][selectType]; return obj }) // Force Line Labels - Basic Version let forceLabelOffset = 14 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabel = forceLabels.selectAll('g') .data(labelset) .join('g') .attr('transform', function(d) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; d.y = yScale(d.val); return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + chartid + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + chartid + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-leader") .transition().style('opacity', 1 ); }); // Group for line highligt points, sits below tootTip area so point don't interfere with hover let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mousemove', (event) => { // Get the date on the y axis for the mouse position let invert = xScale.invert(d3.pointer(event)[0]) let bisect = d3.bisector(function(d) { return d; }).right; let hoverDate = (selectDates[bisect(selectDates, invert)]); //it would return 2. // 1) Lookup/Get values by date 2) Filter by selection group 3) Sort by top values let lookup = selectLookup.get(hoverDate.toISOString()).sort((a, b) => d3.descending(a[selectType], b[selectType])); // Display and position vertical line d3.select("#" + chartid + " .y-highlight") .attr('x1',xScale(hoverDate)) .attr('x2',xScale(hoverDate)) .style('opacity', 1); // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(lookup, d => d.Type) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', function(d) { return `translate(${xScale(d.TestTime)},${yScale(d[selectType])})` }) .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', d => dataDict[d.Type].rgb), update => update .attr('transform', function(d) { return `translate(${xScale(d.TestTime)},${yScale(d[selectType])})` }) .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += ``; // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` tipContent += `` }); tipContent += `

	RoundId	Value
${dataDict[d.Type].name}	${d.RoundId}	${d[selectType]}

`; chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (50+240) + "px"; } else { return event.pageX + 50 + "px"; } }) .style("top", event.pageY + 50 + "px") .style("display", "inline-block") .html(`${hoverDate}
${tipContent}`); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartid + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartid + " .y-highlight-point").remove(); // Remove y-highlight points }) .on('click', (event) => { let invert = xScale.invert(d3.pointer(event)[0]) let bisect = d3.bisector(function(d) { return d; }).right; let hoverDate = (selectDates[bisect(selectDates, invert)]); let lookup = selectLookup.get(hoverDate.toISOString()); //TODO: pass this value as props for the path trace visualization let selectedRoundId = lookup[0].RoundId; console.log("selected round Id", selectedRoundId) }) ; //---------------------------------------------------------------------------------------- // Context View //---------------------------------------------------------------------------------------- const context = svg.append("g") .attr('transform', `translate(${ margin.left },${ margin.top + innerHeight })`) let x2 = d3.scaleUtc() .range([0, width - margin.left - margin.right]) .domain(extDates) let y2 = d3.scaleLinear() .range([contextHeight - margin.bottom, 50]) .domain([0, extData[1]]) .nice(); let xAxis2 = d3.axisBottom(x2); let yAxis2 = d3.axisLeft(y2); context.append("g") .attr("class", "x-axis") .attr('transform', `translate(0,${ contextHeight - margin.bottom })`) .call(xAxis2); let area2 = d3.area() .x(d => x2(d.TestTime)) .y1(d => y2(d[selectType])) .y0(contextHeight - margin.bottom) let line2 = d3.line() .curve(d3.curveStep) .x(d => x2(d.TestTime)) .y(d => y2(d[selectType])) let contextGroup = context.append("g") .attr('class', 'context-group') contextGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr("class", function(d) { return 'ts-area ts-area-' + d[0]; // }) .attr('d', (d) => area2(d[1])) .style("fill", function(d) { if(dataDict[d[0]].name =="general"){ return dataDict[d[0]].rgb } return "none" }) .style("opacity", "0.5"); contextGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line2(d[1])) .attr("class", function(d) { return 'ts-line ts-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return dataDict[d[0]].rgb }) .style("opacity", "0.8"); //Brush settings const brush = d3.brushX(x2) .extent([[0 , 40], [width - margin.right - margin.left, contextHeight - margin.bottom]]) .on('brush', brushed) .on('end', brushended); //TODO: set defaultSelection according to input //24 hours = -1 --> [xScale(d3.utcDay.offset(xScale.domain()[1], -1)), xScale.range()[1]]; // 7 days = -7 --> [xScale(d3.utcDay.offset(xScale.domain()[1], -7)), xScale.range()[1]]; //14 days = -14 --> [xScale(d3.utcDay.offset(xScale.domain()[1], -14)), xScale.range()[1]]; const defaultSelection = [500, xScale.range()[1]]; const gb = contextGroup.append("g") .call(brush) .call(brush.move, defaultSelection); //TODO: Verify that if these brush functions should be located elsewhere function brushed({ selection }){ let extent = selection.map(d => x2.invert(d)); xScale.domain(extent); //console.log("extent values ", extent[0]); let minX = extent[0]; let maxX = extent[1]; const maxY = d3.max(setData, d =>{ if(minX <= d.TestTime && d.TestTime <= maxX){ return d[selectType]; } return NaN}); yScale.domain([0, maxY]).nice(); d3.select("#chart-metrics").select(".line-general").attr('d', (d) => line(d[1])); d3.select("#chart-metrics").select(".line-agent").attr('d', (d) => line(d[1])); d3.select("#chart-metrics").select(".area-general").attr('d', (d) => area(d[1])); d3.select("#chart-metrics").select(".area-agent").attr('d', (d) => area(d[1])); d3.select("#chart-metrics").select(".x-axis").call(xAxis); d3.select("#chart-metrics").select(".y-axis").call(yAxis); } function brushended({selection}) { if (!selection) { gb.call(brush.move, defaultSelection); } } return svg.node(); }