chart = ({ controls: null, country1: null, country2:null, data1: null, data2: null, yMax: null, yearData: null, maxSequence: null, sequence: null, mode: 1, bioColors: { 'fairShare350': '#1c693b', 'fairShare15C' : '#ffdf00', 'fairShare2C' : '#ff0000', 'historical' : 'black', 'BAUmid' : '#3d3d3d', 'BAUlwr' : '#828282', 'BAUupr' : '#828282', 'netZero' : '#0000e6' }, biophysicalSVG1: null, biophysicalSVG2: null, bioIndexes: [ 'fairShare350', 'fairShare15C', 'fairShare2C', 'historical', 'BAUmid', 'BAUlwr', 'BAUupr', 'netZero' ], bioEnabled: { 'fairShare350': 1, 'fairShare15C' : 1, 'fairShare2C' : 1, 'historical' : 1, 'BAUmid' : 1, 'BAUlwr' : 1, 'BAUupr' : 1, 'netZero' : 1 }, bioLabels: [ '350 ppm fair share', '1.5 °C fair share', '2 °C fair share', '', 'Business-as-usual (BAU)', 'BAU lower bound', 'BAU upper bound', 'Net zero' ], bioUnits: { 'cumCO2': 'cumulative megatonnes CO2' }, areaNames: [ 'area350', 'area15C', 'area2C', 'areaMax', 'areaHist' ], areaColors: { 'area350': '#1c693b', 'area15C': '#ffdf00', 'area2C': '#ed7d79', 'areaMax': '#ff0000', 'areaHist' : 'black' }, setControls(controls) { this.controls = controls; }, setCountry1: function (iso3c, mode) { function getByISO(arr, value) { for (var i=0, iLen=arr.length; i= 0) { x = Math.round(ptx / xStep); if (x > Self.maxSequence) { x = Self.maxSequence; } if (ptx <= xStep * Self.maxSequence) { showTooltip = true; } } d3 .select(`#${domain}_vertical_line1`) .style("display", "none") ; d3 .select(`#${domain}_vertical_line1`) .selectAll('circle') .remove() ; if (showTooltip) { d3 .select(`#${domain}_vertical_line1`) .attr("transform", `translate(${xScale(x)},0)`) .style("display", "block") ; d3 .select(`#${domain}_vertical_line1`) .selectAll('circle') .data(Self.data1[domain].ratio) .enter() .append("circle") .attr("cx", 0) .attr("cy", function (d) { return yScale(Self.data1[domain].ratio[d][x]); }) .attr("r", 5) .attr("stroke", d => palette[d]) .attr("fill", d => palette[d]) // .style("opacity", 0.8) ; d3 .select(`#${domain}_vertical_line1`) .append('circle') .attr("cx", 0) .attr("cy", yScale(1)) .attr("r", 5) .attr("stroke", "green") .attr("fill", "green") .style("opacity", 0.8) ; d3 .select(`#${domain}_chart1 div`) .remove() ; /* let table1 = ``; table1 += ''; for (let i in indexes) { const id = indexes[i]; if (id !== 'H2OfootPerCap') { let v = id !== 'CO2footCum' ? Math.round(Self.data1[domain].value[id][x] / 1000000) : Math.round(Self.data1[domain].value[id][x] / 1000); v = (v !== -1 ? v : ''); let t = id !== 'CO2footCum' ? Math.round(Self.data1[domain].fairShare[id][x] / 1000000) : Math.round(Self.data1[domain].fairShare[id][x] / 1000); t = (t !== -1 ? t : ''); table1 += ``; } } table1 += ''; table1 += '

${x + 1970}	Value	Fair Share	Unit
${labels[i]}	${v.toLocaleString()}	${t.toLocaleString()}	${units[id]}

'; d3 .select(`#${domain}_chart1`) .append('div') .style("position", "absolute") //.style("left", `${rx}px`) .style("top", `${ry + 10}px`) .style("z-Index", "10000") .html(table1) ; d3 .select(`#${domain}_chart1 div table`) .selectAll('td, th') .each(function () { d3 .select(this) .style('padding-left', '4px') .style('padding-right', '4px') .style('padding-top', '0') .style('padding-bottom', '0') .style('margin', '0') ; }) ; const bounds3 = d3.select(`#${domain}_chart1 div table`).node().getBoundingClientRect(); if (rx + bounds3.width > bounds2.width) { d3 .select(`#${domain}_chart1 div`) .style('left', `${bounds2.width - bounds3.width}px`) .style('width', `${bounds3.width}px`) ; d3 .select(`#${domain}_chart1 div table`) .style('width', `${bounds3.width}px`) ; } else { d3 .select(`#${domain}_chart1 div`) .style("left", `${rx}px`) ; } } }) .on("mouseout", function (d) { d3.select(`#${domain}_vertical_line1`).style("display", " none"); d3.select(`#${domain}_chart1 div`).remove(); }) ; */ const xAxis = d3.axisBottom() .ticks(5) .tickFormat(this.mode === 1 ? x => `${x + 1960}` : this.mode === 0 ? x => `${x + 1850}` : x => `${x + 1992}`) .scale(xScale); svg .append("g") .style("font-family", "sans-serif") .style("font-size", "1em") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("x", (width / 2) + "px") .attr("y", 60) .style("fill", "#333") .style("shape-rendering", "crispEdges") .style("font-family", "sans-serif") .style("font-size", "1.5em") .style("line-height", "100%") .style("text-anchor", "middle") .text("Year") ; const yAxis = d3.axisLeft().scale(yScale); svg .append("g") .style("font-family", "sans-serif") .style("font-size", "1em") .attr("class", "axis") .call(yAxis); var myPaths; if (this.mode === 1) { myPaths = this.data1.ratio.start1960; } else { if (this.mode === 0) { myPaths = this.data1.ratio.start1850; } else { myPaths = this.data1.ratio.start1992; } } var areaVars; if (this.mode === 1) { areaVars = this.getAreaVars(this.data1.ratio.start1960, this.areaNames); } else { if (this.mode === 0) { areaVars = this.getAreaVars(this.data1.ratio.start1850, this.areaNames); } else { areaVars = this.getAreaVars(this.data1.ratio.start1992, this.areaNames); } } var area = d3.area() .x(function (d) { return xScale(d.data.date); }) .y0(function (d) { return yScale(d[0]); }) .y1(function (d) { return yScale(d[1]); }); svg.append("g") .attr("id", "area_" + domain + "_group") .selectAll(".myArea1") .data(areaVars) .enter() .append("g") .attr("id", function (d) { return d.id; }) .append("path") .attr("d", function (d) { return area(d); }) .style("fill", d => areaCols(d.id)) .style("opacity", d => d.id === 'areaHist' ? 0.8 : 0.4); var labelPositions; if (this.mode === 1) { labelPositions = this.calculateLineLabelPositions1(this.data1.ratio.start1960, yScale, null, enabled); } else { if (this.mode === 0) { labelPositions = this.calculateLineLabelPositions1(this.data1.ratio.start1850, yScale, null, enabled); } else { labelPositions = this.calculateLineLabelPositions1(this.data1.ratio.start1992, yScale, null, enabled); } } let lines = svg .append("g") .attr("id", "path_" + domain + "_group") ; for (let label in labelPositions) { const i = labelPositions[label].id; const id = "path_" + domain + "_" + i; lines .selectAll("#" + id) .data([i]) .enter() .append("g") .attr("id", id) .attr("data-stroke", palette[i]) .on('mouseover', function (d, e) { const g = this; d3 .select(this.parentElement) .selectAll("g:not(#path_biophysical_fairShare350):not(#path_biophysical_fairShare15C):not(#path_biophysical_fairShare2C):not(#path_biophysical_historical)") .each(function () { const g2 = this; d3.select(this) .selectAll("*") .each(function () { const color = g !== g2 ? "#e0e0e0" : d3.select(g2).attr("data-stroke"); const opa = g !== g2 ? 0.4 : 0.8; d3 .select(this) .style("stroke", color) .style("opacity", opa); }) }) }) .on('mouseout', function (d, e) { const g = this; d3 .select(this.parentElement) .selectAll("g:not(#path_biophysical_fairShare350):not(#path_biophysical_fairShare15C):not(#path_biophysical_fairShare2C):not(#path_biophysical_historical)") //.selectAll("g") .each(function () { const g2 = this; d3.select(this) .selectAll("*") .each(function () { const color = d3.select(g2).attr("data-stroke"); d3 .select(this) .style("stroke", color) .style("opacity", 0.8); ; }) }) }) .append("path") .attr("stroke-linejoin", "bevel") .attr("stroke-linecap", "round") .style("fill", "none") .style("stroke", palette[i]) .style("stroke-width", 4) .style("opacity", 0.8) .style("cursor", "pointer") .attr("d", function (d) { let path = d3.path(); if (i !== 'threshold') { let moved = false; if (myPaths[d][0] !== 1.00001) { path.moveTo( xScale(0), yScale(myPaths[d][0]) ); moved = true; } for (let i = 1; i <= Self.maxSequence; i++) { if (myPaths[d][i] !== 1.00001) { if (moved) { path.lineTo( xScale(i), yScale(myPaths[d][i]) ); } else { path.moveTo( xScale(i), yScale(myPaths[d][i]) ); moved = true; } } } } else { path.moveTo(xScale(0), yScale(1)); path.lineTo(xScale(Self.maxSequence), yScale(1)); } return path; }) .each(function () { const posData = labelPositions[label]; const posX = xScale(Self.maxSequence); d3 .select(this.parentElement) .append("path") .attr("stroke-width", 1) .attr("d", `M${posX + 4},${posData.origin},${posX + 25},${posData.y - 5}`) .style("stroke", d => i === 'historical' ? 'none' : palette[i]) .style("cursor", "pointer") ; d3 .select(this.parentElement) .append("text") .attr("x", posX + 28) .attr("y", posData.y) .attr("stroke", i !== 'historical' ? palette[i] : "transparent") .style("vertical-align", "middle") .style("cursor", "pointer") .text(i !== 'historical' ? labels[indexes.indexOf(i)]: '') ; }) ; } svg .append("g") .attr("id", domain + "_vertical_line1") .attr("transform", `translate(${xScale(12)}, 0)`) .style("display", "none") .append("path") .attr("stroke-width", 2) .attr("stroke-dasharray", "4 4") .attr("stroke", "#aaa") .attr("d", `M0,0,0,${height}`) ; }, plotLine2: function (svg, domain, palette, areaColors, indexes, labels, units, enabled) { const Self = this; const adj = 90; let parent = svg.node().parentElement; let bounds = parent.getBoundingClientRect(); const width = bounds.width; const height = bounds.width; const xScale = d3.scaleLinear([0, width]); xScale.domain([0, this.maxSequence]); const yScale = d3.scaleLinear([height, 0]); //yScale.domain([Math.min(0, this.data2[domain].min), this.data2[domain].max]); yScale.domain([0, this.yMax]); const areaCols = d3.scaleOrdinal() .domain(Object.keys(areaColors)) .range(Object.values(areaColors)); const xStep = xScale(1); const pt = svg.node().createSVGPoint(); svg .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", "-" + (adj / 2) + " -" + (adj / 2) + " " + (width + (adj * 3)) + " " + (height + (adj * 2))) ; /* d3.select(svg.node().parentElement) .on("mousemove", function (d) { const bounds2 = svg.node().parentElement.getBoundingClientRect(); let rx = d.pageX - window.scrollX - bounds2.left; let ry = d.pageY - window.scrollY - bounds2.top; pt.x = d.clientX; pt.y = d.clientY; let showTooltip = false; let x = 0; let ptx = pt.matrixTransform(svg.node().getScreenCTM().inverse()).x; if (ptx >= 0) { x = Math.round(ptx / xStep); if (x > Self.maxSequence) { x = Self.maxSequence; } if (ptx <= xStep * Self.maxSequence) { showTooltip = true; } } d3 .select(`#${domain}_vertical_line2`) .style("display", "none") ; d3 .select(`#${domain}_vertical_line2`) .selectAll('circle') .remove() ; if (showTooltip) { d3 .select(`#${domain}_vertical_line2`) .attr("transform", `translate(${xScale(x)},0)`) .style("display", "block") ; d3 .select(`#${domain}_vertical_line2`) .selectAll('circle') //.data(Self.computeVisibleIndexes(domain, indexes, x, enabled)) .data(Self.data2[domain].ratio) .enter() .append("circle") .attr("cx", 0) .attr("cy", function (d) { return yScale(Self.data2[domain].ratio[d][x]); }) .attr("r", 5) .attr("stroke", d => palette[d]) .attr("fill", d => palette[d]) // .style("opacity", 0.8) ; d3 .select(`#${domain}_vertical_line2`) .append('circle') .attr("cx", 0) .attr("cy", yScale(1)) .attr("r", 5) .attr("stroke", "green") .attr("fill", "green") .style("opacity", 0.8) ; d3 .select(`#${domain}_chart2 div`) .remove() ; let table = ``; table += ''; for (let i in indexes) { const id = indexes[i]; if (id !== 'H2OfootPerCap') { let v = id !== 'CO2footCum' ? Math.round(Self.data2[domain].value[id][x] / 1000000) : Math.round(Self.data2[domain].value[id][x] / 1000); v = (v !== -1 ? v : ''); let t = id !== 'CO2footCum' ? Math.round(Self.data2[domain].fairShare[id][x] / 1000000) : Math.round(Self.data2[domain].fairShare[id][x] / 1000); t = (t !== -1 ? t : ''); table += ``; } } table += ''; table += '

${x + 1970}	Value	Fair Share	Unit
${labels[i]}	${v.toLocaleString()}	${t.toLocaleString()}	${units[id]}

'; d3 .select(`#${domain}_chart2`) .append('div') .style("position", "absolute") //.style("left", `${rx}px`) .style("top", `${ry + 10}px`) .style("z-Index", "10000") .html(table) ; d3 .select(`#${domain}_chart2 div table`) .selectAll('td, th') .each(function () { d3 .select(this) .style('padding-left', '4px') .style('padding-right', '4px') .style('padding-top', '0') .style('padding-bottom', '0') .style('margin', '0') ; }) ; const bounds3 = d3.select(`#${domain}_chart2 div table`).node().getBoundingClientRect(); if (rx + bounds3.width > bounds2.width) { d3 .select(`#${domain}_chart2 div`) .style('left', `${bounds2.width - bounds3.width}px`) .style('width', `${bounds3.width}px`) ; d3 .select(`#${domain}_chart2 div table`) .style('width', `${bounds3.width}px`) ; } else { d3 .select(`#${domain}_chart2 div`) .style("left", `${rx}px`) ; } } }) .on("mouseout", function (d) { d3.select(`#${domain}_vertical_line2`).style("display", " none"); d3.select(`#${domain}_chart2 div`).remove(); }) ; */ const xAxis = d3.axisBottom() .ticks(5) .tickFormat(this.mode === 1 ? x => `${x + 1960}` : this.mode === 0 ? x => `${x + 1850}` : x => `${x + 1992}`) .scale(xScale); svg .append("g") .style("font-family", "sans-serif") .style("font-size", "1em") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("x", (width / 2) + "px") .attr("y", 60) .style("fill", "#333") .style("shape-rendering", "crispEdges") .style("font-family", "sans-serif") .style("font-size", "1.5em") .style("line-height", "100%") .style("text-anchor", "middle") .text("Year") ; const yAxis = d3.axisLeft().scale(yScale); svg .append("g") .style("font-family", "sans-serif") .style("font-size", "1em") .attr("class", "axis") .call(yAxis); var myPaths; if (this.mode === 1) { myPaths = this.data2.ratio.start1960; } else { if (this.mode === 0) { myPaths = this.data2.ratio.start1850; } else { myPaths = this.data2.ratio.start1992; } } var areaVars; if (this.mode === 1) { areaVars = this.getAreaVars(this.data2.ratio.start1960, this.areaNames); } else { if (this.mode === 0) { areaVars = this.getAreaVars(this.data2.ratio.start1850, this.areaNames); } else { areaVars = this.getAreaVars(this.data2.ratio.start1992, this.areaNames); } } var area = d3.area() .x(function (d) { return xScale(d.data.date); }) .y0(function (d) { return yScale(d[0]); }) .y1(function (d) { return yScale(d[1]); }); svg.append("g") .attr("id", "area2_" + domain + "_group") .selectAll(".myArea2") .data(areaVars) .enter() .append("g") .attr("id", function (d) { return d.id; }) .append("path") .attr("d", function (d) { return area(d); }) .style("fill", d => areaCols(d.id)) .style("opacity", d => d.id === 'areaHist' ? 0.8 : 0.4); var labelPositions; if (this.mode === 1) { labelPositions = this.calculateLineLabelPositions1(this.data2.ratio.start1960, yScale, null, enabled); } else { if (this.mode === 0) { labelPositions = this.calculateLineLabelPositions1(this.data2.ratio.start1850, yScale, null, enabled); } else { labelPositions = this.calculateLineLabelPositions1(this.data2.ratio.start1992, yScale, null, enabled); } } let lines = svg .append("g") .attr("id", "path2_" + domain + "_group") ; for (let label in labelPositions) { const i = labelPositions[label].id; const id = "path2_" + domain + "_" + i; lines .selectAll("#" + id) .data([i]) .enter() .append("g") .attr("id", id) .attr("data-stroke", palette[i]) .on('mouseover', function (d, e) { const g = this; d3 .select(this.parentElement) .selectAll("g:not(#path2_biophysical_fairShare350):not(#path2_biophysical_fairShare15C):not(#path2_biophysical_fairShare2C):not(#path2_biophysical_historical)") .each(function () { const g2 = this; d3.select(this) .selectAll("*") .each(function () { const color = g !== g2 ? "#e0e0e0" : d3.select(g2).attr("data-stroke"); const opa = g !== g2 ? 0.4 : 0.8; d3 .select(this) .style("stroke", color) .style("opacity", opa); }) }) }) .on('mouseout', function (d, e) { const g = this; d3 .select(this.parentElement) .selectAll("g:not(#path2_biophysical_fairShare350):not(#path2_biophysical_fairShare15C):not(#path2_biophysical_fairShare2C):not(#path2_biophysical_historical)") //.selectAll("g") .each(function () { const g2 = this; d3.select(this) .selectAll("*") .each(function () { const color = d3.select(g2).attr("data-stroke"); d3 .select(this) .style("stroke", color) .style("opacity", 0.8); ; }) }) }) .append("path") .attr("stroke-linejoin", "bevel") .attr("stroke-linecap", "round") .style("fill", "none") .style("stroke", palette[i]) .style("stroke-width", 4) .style("opacity", 0.8) .style("cursor", "pointer") .attr("d", function (d) { let path = d3.path(); if (i !== 'threshold') { let moved = false; if (myPaths[d][0] !== 1.00001) { path.moveTo( xScale(0), yScale(myPaths[d][0]) ); moved = true; } for (let i = 1; i <= Self.maxSequence; i++) { if (myPaths[d][i] !== 1.00001) { if (moved) { path.lineTo( xScale(i), yScale(myPaths[d][i]) ); } else { path.moveTo( xScale(i), yScale(myPaths[d][i]) ); moved = true; } } } } else { path.moveTo(xScale(0), yScale(1)); path.lineTo(xScale(Self.maxSequence), yScale(1)); } return path; }) .each(function () { const posData = labelPositions[label]; const posX = xScale(Self.maxSequence); d3 .select(this.parentElement) .append("path") .attr("stroke-width", 1) .attr("d", `M${posX + 4},${posData.origin},${posX + 25},${posData.y - 5}`) .style("stroke", d => i === 'historical' ? 'none' : palette[i]) .style("cursor", "pointer") ; d3 .select(this.parentElement) .append("text") .attr("x", posX + 28) .attr("y", posData.y) .attr("stroke", i !== 'historical' ? palette[i] : "transparent") .style("vertical-align", "middle") .style("cursor", "pointer") .text(i !== 'historical' ? labels[indexes.indexOf(i)]: '') ; }) ; } svg .append("g") .attr("id", domain + "_vertical_line1") .attr("transform", `translate(${xScale(12)}, 0)`) .style("display", "none") .append("path") .attr("stroke-width", 2) .attr("stroke-dasharray", "4 4") .attr("stroke", "#aaa") .attr("d", `M0,0,0,${height}`) ; }, getAreaVars: function (ratio, areaNames) { //create array of strings for fairShare categories const keys = Object.keys(ratio); const fairKeys = keys.slice(0,4); const subset = Object.fromEntries(fairKeys.filter(key => key in ratio) .map(key => [key, ratio[key]]) ); var arr1 = []; var arr2 = []; var arr3 = []; var arr4 = []; for (let i = 0; i < this.maxSequence+1; i++) { arr1.push(i); arr2.push(this.yMax); arr3.push(0); i <= this.maxSequence - 31 ? arr4[i] = subset.historical[i] : arr4[i] = 0 ; } subset.xBottom = arr1; subset.yTop = arr2; subset.yBottom = arr3; subset.areaHist = arr4; var y0 = []; var y1 = []; var date = []; var areas = []; for(let i = 0; i < areaNames.length; i++){ const id = areaNames[i]; if (id === 'area350') { y0.push(subset.yBottom); y1.push(subset.fairShare350); date.push(subset.xBottom); } else { if (id === 'area15C') { y0.push(subset.fairShare350); y1.push(subset.fairShare15C); date.push(subset.xBottom); } else { if (id === 'area2C') { y0.push(subset.fairShare15C); y1.push(subset.fairShare2C); date.push(subset.xBottom); } else { if (id === 'areaHist') { y0.push(subset.areaHist); y1.push(subset.yBottom); date.push(subset.xBottom); } else{ y0.push(subset.fairShare2C); y1.push(subset.yTop); date.push(subset.xBottom); } } } } } //transform data into (hopefully) friendly format for area charts const combine0 = y0[0].map((value, index) => ([value, y1[0][index]])); for (let i = 0; i <= this.maxSequence; i++){ combine0[i].data = {'date': date[0][i]}; } combine0.id = 'area350'; const combine1 = y0[1].map((value, index) => ([value, y1[1][index]])); for (let i = 0; i <= this.maxSequence; i++){ combine1[i].data = {'date': date[1][i]}; } combine1.id = 'area15C'; const combine2 = y0[2].map((value, index) => ([value, y1[2][index]])); for (let i = 0; i <= this.maxSequence; i++){ combine2[i].data = {'date': date[2][i]}; } combine2.id = 'area2C'; const combine3 = y0[3].map((value, index) => ([value, y1[3][index]])); for (let i = 0; i <= this.maxSequence; i++){ combine3[i].data = {'date': date[3][i]}; } combine3.id = 'areaMax'; const combine4 = y0[4].map((value, index) => ([value, y1[4][index]])); for (let i = 0; i <= this.maxSequence; i++){ combine4[i].data = {'date': date[4][i]}; } combine4.id = 'areaHist'; const myArr = []; myArr.push(combine0, combine1, combine2, combine3, combine4); return myArr; }, calculateLineLabelPositions1: function (ratio, yScale, currentPosition, enabled) { const keys = Object.keys(ratio); if (!currentPosition) { // let inserted = false; currentPosition = []; for (let i = 0; i < keys.length; i++) { const id = keys[i]; if (enabled[id]) { let y = ratio[id][this.maxSequence]; // if (y < 1.0 && !inserted) { // currentPosition.push({ // 'id': 'threshold', // 'origin': yScale(1), // 'y': yScale(1) + 5 // }); // inserted = true; // } currentPosition.push({ 'id': id, 'origin': yScale(ratio[id][this.maxSequence]), 'y': yScale(y) + 5 }); } } // if (!inserted) { // currentPosition.push({ // 'id': 'threshold', // 'origin': yScale(1), // 'y': yScale(1) + 5 // }); // } currentPosition.sort((a, b) => a.y - b.y); } const max = currentPosition.length; let lastY = currentPosition[0].y; let lastP = 0; const gap = 24; let modified = false; for (let i = 1; i < max; i++) { let distance = (currentPosition[i].y + gap - lastY) / (i + 1 - lastP); if (distance >= gap || i + 1 === max) { if (lastP + 1 < i || (i + 1 === max && distance < gap)) { const items = (i + 1 === max && distance < gap) ? max - lastP : i - lastP; const topP = lastP + items - 1; const originSpace = currentPosition[topP].origin - currentPosition[lastP].origin; const requiredSpace = items * gap; let adjust = (requiredSpace - originSpace) / 2; let startY = (lastY - adjust) + (gap / 2); let step = gap; if (startY < 0) { startY = 0; } else if (lastP > 0 && startY < currentPosition[lastP - 1].y) { startY = currentPosition[lastP - 1].y + 1; } if (topP + 1 < max && (startY + requiredSpace) > currentPosition[topP + 1].y) { step = (currentPosition[i].y - startY - (gap / 2)) / items; } for (let j = lastP; j < lastP + items; j++) { currentPosition[j].y = startY; startY += step; } modified = true; } lastY = currentPosition[i].y; lastP = i; } } return modified ? this.calculateLineLabelPositions1(ratio, yScale, currentPosition, enabled) : currentPosition; }, calculateLineLabelPositions2: function (ratio, yScale, currentPosition, enabled) { const keys = Object.keys(ratio); if (!currentPosition) { let inserted = false; currentPosition = []; for (let i = 0; i < keys.length; i++) { const id = keys[i]; if (enabled[id]) { let y = ratio[id][this.maxSequence]; if (y < 1.0 && !inserted) { currentPosition.push({ 'id': 'threshold', 'origin': yScale(1), 'y': yScale(1) + 5 }); inserted = true; } currentPosition.push({ 'id': id, 'origin': yScale(ratio[id][this.maxSequence]), 'y': yScale(y) + 5 }); } } if (!inserted) { currentPosition.push({ 'id': 'threshold', 'origin': yScale(1), 'y': yScale(1) + 5 }); } currentPosition.sort((a, b) => a.y - b.y); } const max = currentPosition.length; let lastY = currentPosition[0].y; let lastP = 0; const gap = 24; let modified = false; for (let i = 1; i < max; i++) { let distance = (currentPosition[i].y + gap - lastY) / (i + 1 - lastP); if (distance >= gap || i + 1 === max) { if (lastP + 1 < i || (i + 1 === max && distance < gap)) { const items = (i + 1 === max && distance < gap) ? max - lastP : i - lastP; const topP = lastP + items - 1; const originSpace = currentPosition[topP].origin - currentPosition[lastP].origin; const requiredSpace = items * gap; let adjust = (requiredSpace - originSpace) / 2; let startY = (lastY - adjust) + (gap / 2); let step = gap; if (startY < 0) { startY = 0; } else if (lastP > 0 && startY < currentPosition[lastP - 1].y) { startY = currentPosition[lastP - 1].y + 1; } if (topP + 1 < max && (startY + requiredSpace) > currentPosition[topP + 1].y) { step = (currentPosition[i].y - startY - (gap / 2)) / items; } for (let j = lastP; j < lastP + items; j++) { currentPosition[j].y = startY; startY += step; } modified = true; } lastY = currentPosition[i].y; lastP = i; } } return modified ? this.calculateLineLabelPositions2(ratio, yScale, currentPosition, enabled) : currentPosition; }, });