2c:null 2d:["$","title",null,{"children":"RIC Soft Report | Steve Pegg | Observable"}] 32:T283c,chart = { let parent = this; parent = document.createElement("div"); const tooltip = d3.select(document.createElement("div")).call(createTooltip); const svg = d3.select(DOM.svg(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("") ) //------------------ const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`); //---------------- svg.append("g") .selectAll("g").data(datax).enter() .filter(function(d) { return d.values.owner === order }) .append("g") .attr("x", d => x(d.name)) .attr("y", d => y(0)) .attr("class", "bar-container") .attr("fill", "white") .attr("id", d => d.name); variables.forEach(letter => { svg.selectAll('.bar-container') .append("rect") .attr("class", function (d) { return "temp " + letter}) .attr("id", d => letter + d.name) .attr("x", d => x(d.name) + xBars(letter)) .attr("y", function (d) {if (d.values[letter] > 1) { return y(d.values[letter])} else { return y(0) } }) //.attr("height", d => y(d[0]) - y(d[1])) .attr("height", function (d) {if (d.values[letter] > 0) { return y(0) - y(d.values[letter])} else {return y(d.values[letter]) - y(0) } }) .attr("width", x.bandwidth() / variables.length) .attr("fill", "black") // color(letter)) .on("mouseover", function(event, d) { // d3.select(this).select("rect").attr("fill", d.color.darker()) tooltip .style("opacity", 1) .html(getTooltipContent(d)) }) .on("mouseleave", function(event, d) { // d3.select(this).select("rect").attr("fill", d.color) tooltip.style("opacity", 0) }) }); const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none"); svg.append("path") .datum(datax) .attr("fill", "none") .attr("stroke", "darkgreen") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", uline); svg.append("path") .datum(datax) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", lline); const gx = svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const t = svg.transition() .duration(750); gx.transition(t) .call(xAxis) .selectAll("text") .attr("class", "legend-text") .attr("y", 0) .attr("x", 9) // .attr("dy", ".55em") // .style("font-size", 12) .attr('fill', 'navy') .attr("transform", "rotate(90)") .attr("text-anchor", "start"); svg.on("mousemove", function(event) { let [x,y] = d3.pointer(event, g.node()); line.attr("transform", `translate(${x+40} 0)`); y +=20; if(x>width/2) x-= 100; tooltip .style("left", x + "px") .style("top", y + "px") }) parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); return Object.assign(parent, { update(order) { //fixed order = 'owner' // console.log(order) const t = svg.transition() .duration(750); switch(order) { case 'owner': x.domain(datar.sort((a, b) => d3.ascending(a.owner, b.owner)).map(d => d.code)); color.domain(datar.map(d => d.owner)); // console.log("color.domain()") d3.selectAll(".temp.Total.PL") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('Total PL')) .attr("fill", d => color(d.values.owner)); d3.selectAll(".temp.PL.from.Base") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('PL from Base')); break; case 'type': x.domain(datar.sort((a, b) => d3.ascending(a.type, b.type)).map(d => d.code)); color.domain(datar.map(d => d.type)); console.log(color.domain()) d3.selectAll(".temp.Total.PL") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('Total PL')) .attr("fill", d => color(d.values.type)); d3.selectAll(".temp.PL.from.Base") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('PL from Base')); break; case 'sector': x.domain(datar.sort((a, b) => d3.ascending(a.sector, b.sector)).map(d => d.code)); color.domain(datar.map(d => d.sector)); console.log(color.domain()) d3.selectAll(".temp.Total.PL") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('Total PL')) .attr("fill", d => color(d.values.sector)); d3.selectAll(".temp.PL.from.Base") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('PL from Base')); break; case 'country': x.domain(datar.sort((a, b) => d3.ascending(a.country, b.country)).map(d => d.code)); color.domain(datar.map(d => d.country)); console.log(color.domain()) d3.selectAll(".temp.Total.PL") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('Total PL')) .attr("fill", d => color(d.values.country)); d3.selectAll(".temp.PL.from.Base") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('PL from Base')); break; case 'Total PL': x.domain(datar.sort((a, b) => d3.ascending(a["Total PL"], b["Total PL"])).map(d => d.code)); color.domain(datar.map(d => d.owner)); console.log(color.domain()) d3.selectAll(".temp.PL.from.Base") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('PL from Base')) .attr("fill", "Black") //d => color(d.values.owner)); d3.selectAll(".temp.Total.PL") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('Total PL')) .attr("fill", d => color(d.values.owner)); d3.selectAll(".temp.PL.from.Base") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('PL from Base')); break; case 'PL from Base': x.domain(datar.sort((a, b) => d3.ascending(a["PL from Base"], b["PL from Base"])).map(d => d.code)); color.domain(datar.map(d => d.owner)); console.log(color.domain()) d3.selectAll(".temp.PL.from.Base") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('PL from Base')) .attr("fill", "Black") //d => color(d.values.owner)); d3.selectAll(".temp.Total.PL") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('Total PL')) .attr("fill", d => color(d.values.owner)); d3.selectAll(".temp.PL.from.Base") .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.name) + xBars('PL from Base')); break; } gx.transition(t) .call(xAxis) .selectAll("text") .attr("class", "legend-text") .attr("y", 0) .attr("x", 9) .style("font-family", "sans-serif") .style('font-size', '10px') .attr('fill', 'navy') .attr("transform", "rotate(90)") .attr("text-anchor", "start"); } }); } 33:T663,function swatches({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }34:[] 30:{"id":"b9c1ba2987ee05c5","slug":"ric-soft-report","title":"RIC Soft Report","thumbnail":"8865f1b79883c09edd39d094762070605de6f2faf2d1645cfe48341656998398","access_level":"public","create_time":"$D2021-02-16T09:16:50.745Z","update_time":"$D2021-03-18T14:54:21.107Z","view_time":null,"first_public_time":"$D2021-02-16T11:04:59.354Z","has_unpublished_edits":null,"fork":{"id":"c35fdd894cb8dca7","slug":"ric-profit-loss","title":"Profit /Loss mods","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":"starter_2024","bio":"Mainly coding for fun these days!"},"version":1027,"publish_version":1027,"role":null,"authored":false,"authors":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"bio":"Mainly coding for fun these days!"}],"members":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6ff40e8e4a2133a9","slug":"ric","title":"RIC","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"type":"notebook","body":{"titling":"auto","title":"RIC Soft Report","cells":[{"id":0,"value":"md`# RIC Soft Report`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`*Black bars indicate Profit/Loss rebased to today - 30d. *`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"viewof order = { const options = [\n {label: \"Steve\", value: \"Steve\"}, //(a, b) => d3.ascending(a.owner, b.owner)},\n {label: \"Chris\", value: \"Chris\"}, \n {label: \"Bryan\", value: \"Bryan\"}, \n {label: \"Richard\", value: \"Richard\"}, \n {label: \"Mike\", value: \"Mike\"}, \n {label: \"Terry\", value: \"Terry\"}, \n {label: \"Tom\", value: \"Tom\"}\n ];\n const form = html`