chart = { // Initialize svg const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const tooltip = d3.select('body') .append('div') .attr('id', 'barchart-tooltip') .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff'); // Append the grid lines on X axis svg.append("g") .attr("class", "grid") .attr("transform", `translate(${x.bandwidth()/2}, ${height - margin.bottom})`) .call(make_x_gridlines() .tickSize(-height) .tickFormat("") ) // Append the bars const bar = svg.append("g") .selectAll("g") .data(series2) .join('g') .attr("fill", function(d) {return color(d.key)}) .attr("class", function (d) { return d.key}) .selectAll("rect") .data(d => d) .join("rect") .attr("class", function (d) { return "temp " + d.data.code}) .attr("width", x.bandwidth) .attr("x", d => x(d.data.code)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .on("mouseover", function(event, d) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", event.pageX - tooltipWidth/10 +'px') .style("top", event.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible') .html(`Stock: ${d.data.code}
Profit/Loss: ${d.data.PL}
Residual : ${(d.data.Residual)}
Total : ${(d.data.total)}`); }) .on('mousemove', function (event) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", event.pageX - tooltipWidth/10 +'px') .style("top", event.pageY-tooltipHeight - 10+'px') }) .on("mouseout", function(event, d) { tooltip .style('visibility', 'hidden'); }); // Append ust & lst lines svg.append("path") .datum(line_series) .attr("fill", "none") .attr("stroke", "darkgreen") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); const gx = svg.append("g") .call(xAxis); // Append the Y-axis let y_axis = svg.append("g") .attr("transform", `translate(${margin.left},0)`) .attr("id", "y-axis") .attr("class", "y axis") .call(yAxis) // Replace 0 tick on y-axis with - y_axis.selectAll("g.tick") // Y label svg.append("g") .attr("transform", `translate(${margin.left/2}, ${(height - margin.top)/2})`) .attr("class", "y-axis-label") .append("text") .attr("transform", "rotate(-90)") .text("£ GBP"); // Bar chart legends const legend = svg.selectAll('.legend') .data(color.domain()) .enter() .append('g') .attr('class', 'legend') .attr('transform', (d, i) => { let legendHeight = legendRectSize + legendSpacing; let x = width - margin.right; let y = (i+1) * legendHeight + margin.top + 5; return `translate(${x}, ${y})`; }); legend.append('rect') .attr('width', legendRectSize) .attr('height', legendRectSize) .style('fill', color) .style('stroke', color); const altext = ["PL from base", "Total PL","today's PL"] legend.append('text') .attr("class", "legend-text") .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize) .text(d => d); // svg.selectAll("rect." + owner) // .style("stroke", "Black") // .style("stroke-width", 1); return Object.assign(svg.node(), { update(order) { // svg.selectAll("rect") // .style("stroke", "Black") // .style("stroke-width", 0); // svg.selectAll("rect." + owner) // .style("stroke", "Black") // .style("stroke-width", 1); // x.domain(data2.sort(order).map(d => d.code)); const t = svg.transition() .duration(750); // d3.selectAll(".temp") // .data(series, d => d) // .order() // .transition(t) // .delay((d, i) => i * 10) ; // .attr("x", d => x(d.data2.code)); // d3.selectAll(".temp").filter(function(d) { // return d.data["PL from Base"] > 10 }) // .transition(t) // .delay((d, i) => i * 10) // .attr("fill", d => color("PL from Base")) //.raise(); // d3.select(this).moveToFront(); gx.transition(t) .call(xAxis) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".55em") .style("font-size", 12) .style('fill', 'navy') .attr("transform", "rotate(90)") .style("text-anchor", "start"); } }); }