From ea8740d639b3f7659a592939b69b7fc7681c0b61 Mon Sep 17 00:00:00 2001 From: NandiniMGawade Date: Mon, 1 Apr 2019 11:02:29 +0530 Subject: [PATCH 1/5] Resolved merge conflicts. --- ui/src/app/widget/lib/well-log-viewer/lineGraph.js | 2 ++ .../app/widget/lib/well-log-viewer/logViewer.css | 14 ++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js index f23ce89bb..2c5e726b4 100644 --- a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js +++ b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js @@ -50,6 +50,7 @@ var lineGraph = function(lineConfig, areaFillConfig, state, currentComponentInde let yScale = d3.scaleLinear().domain(d3.extent(data.data.map(d => d[0]))).range([h, 0]); + if(state === "init"){ let $lineGraph = context.select('.linearGrid') .attr("width", w + margin.right + 1) @@ -147,6 +148,7 @@ var lineGraph = function(lineConfig, areaFillConfig, state, currentComponentInde } update(); }); + } lineChart.order = 2; return lineChart; diff --git a/ui/src/app/widget/lib/well-log-viewer/logViewer.css b/ui/src/app/widget/lib/well-log-viewer/logViewer.css index 8e790a8e2..761d0b86e 100644 --- a/ui/src/app/widget/lib/well-log-viewer/logViewer.css +++ b/ui/src/app/widget/lib/well-log-viewer/logViewer.css @@ -92,6 +92,20 @@ svg { stroke: #A9A9A9 !important; stroke-width: 3px !important; } +.overlay { + fill: none; + pointer-events: all; +} +.hover-line { + stroke: #B74779; + stroke-width: 2px; + stroke-dasharray: 3,3; +} +.g_main { + cursor:pointer; + pointer-events: all; + } + /*.axis text { font: 10px sans-serif; From 8ea2a16acd2200550574399955de66e1474a46ae Mon Sep 17 00:00:00 2001 From: NandiniMGawade Date: Mon, 8 Apr 2019 14:40:35 +0530 Subject: [PATCH 2/5] Mouse over data. --- .../lib/well-log-viewer/headerLegend.js | 17 +- .../widget/lib/well-log-viewer/lineGraph.js | 368 +++++++++++------- 2 files changed, 247 insertions(+), 138 deletions(-) diff --git a/ui/src/app/widget/lib/well-log-viewer/headerLegend.js b/ui/src/app/widget/lib/well-log-viewer/headerLegend.js index 8a210bd4a..7535385ed 100644 --- a/ui/src/app/widget/lib/well-log-viewer/headerLegend.js +++ b/ui/src/app/widget/lib/well-log-viewer/headerLegend.js @@ -53,8 +53,8 @@ var headerLegend = function(lineConfig, state, index, width) { context = d3.select(this); var margin = {top: 30, right: 10, bottom: 30, left: 10}, - width = o.width*140 - margin.right - margin.left, - height = 60 - margin.top - margin.bottom; + width = o.width*140 - margin.right - margin.left; + //height = 60 - margin.top - margin.bottom; var x = d3.scaleLinear() .domain([o.min, o.max]) @@ -69,7 +69,7 @@ var headerLegend = function(lineConfig, state, index, width) { .append("svg") .attr("class", "header"+ index) .attr("width", width + margin.right + margin.left) - .attr("height", height + margin.top + margin.bottom) + .attr("height","80") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(xAxis) @@ -80,7 +80,6 @@ var headerLegend = function(lineConfig, state, index, width) { .style("fill", "none") .style("stroke", o.color) .style("stroke-width", o.lineWeight) - context.select('.header'+ index) .append("text") .attr("transform", @@ -89,6 +88,16 @@ var headerLegend = function(lineConfig, state, index, width) { .style("text-anchor", "middle") .text(o.label); + context.select(".header"+ index) + + .append("text") + .attr("class", "log-data"+ index) + .attr("transform", + "translate(" + (width/2) + " ," + + (60) + ")") + .style("text-anchor", "middle") + .text(""); + } header.order = 0; return header; diff --git a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js index 2c5e726b4..8c73c944a 100644 --- a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js +++ b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js @@ -14,151 +14,251 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - /* eslint-disable */ +/* eslint-disable */ //import * as d3 from 'well-log-viewer/node_modules/d3/build/d3'; "use strict"; import * as d3 from 'd3'; -import {dataGenerator} from './dataGenerator'; +import { + dataGenerator +} from './dataGenerator'; import './logViewer.css'; /*@ngInject*/ -var lineGraph = function(lineConfig, areaFillConfig, state, currentComponentIndex, width) { - - function lineChart(group) { - group.each(render); - } - - function render() { - var context; - - context = d3.select(this); - - let margin = {top: 30, right: 10, bottom: 30, left: 10}, - w = width*140 - margin.right - margin.left, - h = 700 - margin.top; - - lineConfig.forEach(function(element, index) { - - - let lineToBeRendered = element.line; - let data = element.data; - - let xScale = d3.scaleLinear().domain([lineToBeRendered.headerMin, lineToBeRendered.headerMax]).range([-20 , w-20]); - let yScale = d3.scaleLinear().domain(d3.extent(data.data.map(d => d[0]))).range([h, 0]); - - - - if(state === "init"){ - let $lineGraph = context.select('.linearGrid') - .attr("width", w + margin.right + 1) - .attr("height", h) - .append('g') - .attr("class", 'linepath'+index+currentComponentIndex) - .append('path') - .attr('stroke', lineToBeRendered.color) - .attr('fill', 'none') - .attr('stroke-width', lineToBeRendered.lineWeight); - - if(angular.isDefined(areaFillConfig) && areaFillConfig.enable){ - if(areaFillConfig.referenceLine === lineToBeRendered.headerName){ - context.select('.linearGrid') - .append('g') - .attr("class", 'areapath'+index+currentComponentIndex) - .append('path') - .attr('fill', areaFillConfig.color) - .style("opacity", areaFillConfig.opacity); - } - } - } - - function update() { - - //line painting - - let line = d3.line() - .y(d => yScale(d[0])) - .x(d => xScale(d[1])) - .curve(d3.curveLinear); - - context.select('.linearGrid').select('.linepath'+index+currentComponentIndex).select('path') - .data([data.data]) - .attr('class', 'grid') - .attr('d', line) - .attr("transform", "translate(" + margin.left + ", 0)") - .attr('stroke', lineToBeRendered.color) - .attr('fill', 'none') - .attr('stroke-width', lineToBeRendered.lineWeight); - - //area painting - - let area; - - if(angular.isDefined(areaFillConfig) && areaFillConfig.enable){ - if(areaFillConfig.referenceLine === lineToBeRendered.headerName){ - if(areaFillConfig.fill === "left"){ - - area = d3.area() - .x0(-14) - .x1((d) => xScale(d[1])) - .y((d) => yScale(d[0])) - .curve(d3.curveLinear); - - paintArea(data.data); - } - if(areaFillConfig.fill === "right"){ - area = d3.area() - .x0((d) => xScale(d[1])) - .x1(w) - .y((d) => yScale(d[0])) - .curve(d3.curveLinear); - - paintArea(data.data); - } - if(areaFillConfig.fill === "between"){ - let otherLineConfig = lineConfig[Math.abs(index-1)]; - let xScaleOfOtherLine = d3.scaleLinear().domain(d3.min(otherLineConfig.data.data, function(d) { return d[1]; }),d3.max(otherLineConfig.data.data, function(d) { return d[1]; })).range([0 , w]); - let otherLineData = lineConfig[Math.abs(index-1)].data.data; - let combinedData = []; - data.data.forEach(dataElement => - combinedData.push([dataElement[0], dataElement[1], findCorrespondingDataPoint(dataElement, otherLineData)])); - combinedData = combinedData.filter(element => angular.isDefined(element[2])); - - area = d3.area() - .x0((d) => xScale(combinedData[d][1])) - .x1((d) => xScaleOfOtherLine(combinedData[d][2])) - .y((d) => yScale(combinedData[d][0])) - .curve(d3.curveLinear); - paintArea(d3.range(combinedData.length)); - } - } - } - function paintArea(dataToBeUsed) { - context.select('.linearGrid') - .select('.areapath' + index + currentComponentIndex) - .select('path') - .data([dataToBeUsed]) - .attr("transform", "translate(" + margin.left + ", 0)") - .attr('d', area) - .attr('fill', areaFillConfig.color) - .style("opacity", areaFillConfig.opacity); - } - } - update(); - }); - - } - lineChart.order = 2; - return lineChart; +var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentIndex, width) { + + function lineChart(group) { + group.each(render); + } + + function render() { + var context; + + context = d3.select(this); + + let margin = { + top: 30, + right: 10, + bottom: 30, + left: 10 + }, + w = width * 140 - margin.right - margin.left, + h = 700 - margin.top, + headerOne, headerSecond, firstLineData, secondLineData; + + if (lineConfig.length === 2) { + headerOne = context.select(".header0"); + headerSecond = context.select(".header1"); + firstLineData = lineConfig[0].data.data; + secondLineData = lineConfig[1].data.data; + } else { + headerOne = context.select(".header0"); + firstLineData = lineConfig[0].data.data; + } + + lineConfig.forEach(function (element, index) { + + + let lineToBeRendered = element.line; + let data = element.data; + + let xScale = d3.scaleLinear().domain([lineToBeRendered.headerMin, lineToBeRendered.headerMax]).range([-20, w - 20]); + let yScale = d3.scaleLinear().domain(d3.extent(data.data.map(d => d[0]))).range([h, 0]); + + + if (state === "init") { + let $lineGraph = context.select('.linearGrid') + .attr("width", w + margin.right + 1) + .attr("height", h) + .append('g') + .attr("class", 'linepath' + index + currentComponentIndex) + .append('path') + .attr('stroke', lineToBeRendered.color) + .attr('fill', 'none') + .attr('stroke-width', lineToBeRendered.lineWeight); + + + if (angular.isDefined(areaFillConfig) && areaFillConfig.enable) { + if (areaFillConfig.referenceLine === lineToBeRendered.headerName) { + context.select('.linearGrid') + .append('g') + .attr("class", 'areapath' + index + currentComponentIndex) + .append('path') + .attr('fill', areaFillConfig.color) + .style("opacity", areaFillConfig.opacity); + } + } + } + + function update() { + + let cx, cy; + let bisect = d3.bisector(function (d) { + return d[0]; + }).right; + + //line painting + + let line = d3.line() + .y(d => yScale(d[0])) + .x(d => xScale(d[1])) + .curve(d3.curveLinear); + + context.select('.linearGrid').select('.linepath' + index + currentComponentIndex).select('path') + .data([data.data]) + .attr('class', 'grid') + .attr('d', line) + .attr("transform", "translate(" + margin.left + ", 0)") + .attr('stroke', lineToBeRendered.color) + .attr('fill', 'none') + .attr('stroke-width', lineToBeRendered.lineWeight); + + + let svg = context.select('.linearGrid'); + + let g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + svg.on("mousemove", function () { + cx = d3.mouse(this)[0]; + cy = d3.mouse(this)[1]; + redrawMouseOverline(cx, cy, w, margin); + + let yValue = yScale.invert(d3.mouse(this)[0]); + + + if (firstLineData) { + let i = bisect(firstLineData, yValue); + let startData = firstLineData[i - 1]; + let endData = firstLineData[i]; + + let data = yValue - startData[0] > endData[0] - yValue ? endData : startData; + headerOne._groups[0][0].childNodes[2].textContent = data[1] + } + + if (secondLineData) { + let ind = bisect(secondLineData, yValue); + let startData1 = secondLineData[ind - 1]; + let endData1 = secondLineData[ind]; + + let data = yValue - startData1[0] > endData1[0] - yValue ? endData1 : startData1; + headerSecond._groups[0][0].childNodes[2].textContent = data[1] + } + + + }) + .on("mouseover", function () { + d3.selectAll('.line_over').style("display", "block"); + }) + .on("mouseout", function () { + d3.selectAll('.line_over').style("display", "none"); + headerOne._groups[0][0].childNodes[2].textContent = ""; + headerSecond._groups[0][0].childNodes[2].textContent = ""; + }) + .append('rect') + .attr('class', 'click-capture') + .style('visibility', 'hidden') + .attr('x', 0) + .attr('y', 0) + .attr('width', w) + .attr('height', h); + + svg.append("line") + .attr("class", 'line_over') + .attr("x1", 0) + .attr("y1", 0) + .attr("x2", w + margin.right) + .attr("y2", 0) + .style("stroke", "gray") + .attr("stroke-dasharray", ("5,5")) + .style("stroke-width", "1.5") + .style("display", "none") + .style("width", "100px"); + + function redrawMouseOverline(cx, cy, w, margin) { + d3.selectAll('.line_over') + .attr("x1", 0) + .attr("y1", cy) + .attr("x2", w + margin.right + 1) + .attr("y2", cy) + .style("display", "block") + } + + //area painting + + let area; + + if (angular.isDefined(areaFillConfig) && areaFillConfig.enable) { + if (areaFillConfig.referenceLine === lineToBeRendered.headerName) { + if (areaFillConfig.fill === "left") { + + area = d3.area() + .x0(-14) + .x1((d) => xScale(d[1])) + .y((d) => yScale(d[0])) + .curve(d3.curveLinear); + + paintArea(data.data); + } + if (areaFillConfig.fill === "right") { + area = d3.area() + .x0((d) => xScale(d[1])) + .x1(w) + .y((d) => yScale(d[0])) + .curve(d3.curveLinear); + + paintArea(data.data); + } + if (areaFillConfig.fill === "between") { + let otherLineConfig = lineConfig[Math.abs(index - 1)]; + let xScaleOfOtherLine = d3.scaleLinear().domain(d3.min(otherLineConfig.data.data, function (d) { + return d[1]; + }), d3.max(otherLineConfig.data.data, function (d) { + return d[1]; + })).range([0, w]); + let otherLineData = lineConfig[Math.abs(index - 1)].data.data; + let combinedData = []; + data.data.forEach(dataElement => + combinedData.push([dataElement[0], dataElement[1], findCorrespondingDataPoint(dataElement, otherLineData)])); + combinedData = combinedData.filter(element => angular.isDefined(element[2])); + + area = d3.area() + .x0((d) => xScale(combinedData[d][1])) + .x1((d) => xScaleOfOtherLine(combinedData[d][2])) + .y((d) => yScale(combinedData[d][0])) + .curve(d3.curveLinear); + paintArea(d3.range(combinedData.length)); + } + } + } + + function paintArea(dataToBeUsed) { + context.select('.linearGrid') + .select('.areapath' + index + currentComponentIndex) + .select('path') + .data([dataToBeUsed]) + .attr("transform", "translate(" + margin.left + ", 0)") + .attr('d', area) + .attr('fill', areaFillConfig.color) + .style("opacity", areaFillConfig.opacity); + } + } + update(); + }); + + } + lineChart.order = 2; + return lineChart; +}; +export { + lineGraph }; -export {lineGraph}; function findCorrespondingDataPoint(dataElement, otherLineData) { - let dataPoint = otherLineData.find(element => Math.abs(element[0] - dataElement[0]) < 0.03); - if(dataPoint) { - return dataPoint[1]; - } + let dataPoint = otherLineData.find(element => Math.abs(element[0] - dataElement[0]) < 0.03); + if (dataPoint) { + return dataPoint[1]; + } } \ No newline at end of file From 92988474f299e763f252a5152ada778f1eefcdea Mon Sep 17 00:00:00 2001 From: NandiniMGawade Date: Mon, 8 Apr 2019 15:34:13 +0530 Subject: [PATCH 3/5] Code refactor. --- .../lib/well-log-viewer/headerLegend.js | 17 +++++----- .../widget/lib/well-log-viewer/lineGraph.js | 32 ++++++++++--------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/ui/src/app/widget/lib/well-log-viewer/headerLegend.js b/ui/src/app/widget/lib/well-log-viewer/headerLegend.js index 7535385ed..7b8849734 100644 --- a/ui/src/app/widget/lib/well-log-viewer/headerLegend.js +++ b/ui/src/app/widget/lib/well-log-viewer/headerLegend.js @@ -53,8 +53,8 @@ var headerLegend = function(lineConfig, state, index, width) { context = d3.select(this); var margin = {top: 30, right: 10, bottom: 30, left: 10}, - width = o.width*140 - margin.right - margin.left; - //height = 60 - margin.top - margin.bottom; + width = o.width*140 - margin.right - margin.left, + height = 80; var x = d3.scaleLinear() .domain([o.min, o.max]) @@ -69,7 +69,7 @@ var headerLegend = function(lineConfig, state, index, width) { .append("svg") .attr("class", "header"+ index) .attr("width", width + margin.right + margin.left) - .attr("height","80") + .attr("height",height) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(xAxis) @@ -89,14 +89,13 @@ var headerLegend = function(lineConfig, state, index, width) { .text(o.label); context.select(".header"+ index) - .append("text") .attr("class", "log-data"+ index) - .attr("transform", - "translate(" + (width/2) + " ," + - (60) + ")") - .style("text-anchor", "middle") - .text(""); + .attr("transform", + "translate(" + (width/2) + " ," + + (60) + ")") + .style("text-anchor", "middle") + .text(""); } header.order = 0; diff --git a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js index 8c73c944a..eb97bb531 100644 --- a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js +++ b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js @@ -60,7 +60,6 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd lineConfig.forEach(function (element, index) { - let lineToBeRendered = element.line; let data = element.data; @@ -79,7 +78,6 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd .attr('fill', 'none') .attr('stroke-width', lineToBeRendered.lineWeight); - if (angular.isDefined(areaFillConfig) && areaFillConfig.enable) { if (areaFillConfig.referenceLine === lineToBeRendered.headerName) { context.select('.linearGrid') @@ -127,34 +125,38 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd let yValue = yScale.invert(d3.mouse(this)[0]); - if (firstLineData) { let i = bisect(firstLineData, yValue); let startData = firstLineData[i - 1]; let endData = firstLineData[i]; - let data = yValue - startData[0] > endData[0] - yValue ? endData : startData; - headerOne._groups[0][0].childNodes[2].textContent = data[1] - } + if(startData && endData){ + let data = yValue - startData[0] > endData[0] - yValue ? endData : startData; + headerOne._groups[0][0].childNodes[2].textContent = data[1] + } + } if (secondLineData) { let ind = bisect(secondLineData, yValue); - let startData1 = secondLineData[ind - 1]; - let endData1 = secondLineData[ind]; - - let data = yValue - startData1[0] > endData1[0] - yValue ? endData1 : startData1; - headerSecond._groups[0][0].childNodes[2].textContent = data[1] + let startData = secondLineData[ind - 1]; + let endData = secondLineData[ind]; + if(startData && endData){ + let data = yValue - startData[0] > endData[0] - yValue ? endData : startData; + headerSecond._groups[0][0].childNodes[2].textContent = data[1]; + } } - - }) .on("mouseover", function () { d3.selectAll('.line_over').style("display", "block"); }) .on("mouseout", function () { d3.selectAll('.line_over').style("display", "none"); - headerOne._groups[0][0].childNodes[2].textContent = ""; - headerSecond._groups[0][0].childNodes[2].textContent = ""; + if (firstLineData) { + headerOne._groups[0][0].childNodes[2].textContent = ""; + } + if(secondLineData){ + headerSecond._groups[0][0].childNodes[2].textContent = ""; + } }) .append('rect') .attr('class', 'click-capture') From fbb14eb8bbe085a864efd209503f70b90cc52fec Mon Sep 17 00:00:00 2001 From: NandiniMGawade Date: Tue, 9 Apr 2019 14:57:02 +0530 Subject: [PATCH 4/5] Refactore code for mouse over. --- .../lib/well-log-viewer/headerLegend.js | 32 +++++++++++++------ .../widget/lib/well-log-viewer/lineGraph.js | 11 +++---- .../widget/lib/well-log-viewer/logViewer.js | 1 + 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/ui/src/app/widget/lib/well-log-viewer/headerLegend.js b/ui/src/app/widget/lib/well-log-viewer/headerLegend.js index 7b8849734..d7056363b 100644 --- a/ui/src/app/widget/lib/well-log-viewer/headerLegend.js +++ b/ui/src/app/widget/lib/well-log-viewer/headerLegend.js @@ -54,7 +54,7 @@ var headerLegend = function(lineConfig, state, index, width) { var margin = {top: 30, right: 10, bottom: 30, left: 10}, width = o.width*140 - margin.right - margin.left, - height = 80; + height = 40; var x = d3.scaleLinear() .domain([o.min, o.max]) @@ -81,21 +81,33 @@ var headerLegend = function(lineConfig, state, index, width) { .style("stroke", o.color) .style("stroke-width", o.lineWeight) context.select('.header'+ index) - .append("text") + .append("text") .attr("transform", "translate(" + (width/2) + " ," + (20) + ")") .style("text-anchor", "middle") .text(o.label); - context.select(".header"+ index) - .append("text") - .attr("class", "log-data"+ index) - .attr("transform", - "translate(" + (width/2) + " ," + - (60) + ")") - .style("text-anchor", "middle") - .text(""); + context.select(".header") + .append("svg") + .attr("class", "log-data"+ index) + .attr("width", width + margin.right + margin.left) + .attr("height",height) + .append("g") + .style("fill", "none") + .style("stroke", o.color) + .style("stroke-width", "1") + .selectAll("path") + .style("fill", "none") + .style("stroke", o.color) + .style("stroke-width", o.lineWeight) + context.select('.log-data'+ index) + .append("text") + .attr("transform", + "translate(" + (width/2) + " ," + + (20) + ")") + .style("text-anchor", "middle") + .text(""); } header.order = 0; diff --git a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js index eb97bb531..034eb2a77 100644 --- a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js +++ b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js @@ -49,12 +49,12 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd headerOne, headerSecond, firstLineData, secondLineData; if (lineConfig.length === 2) { - headerOne = context.select(".header0"); - headerSecond = context.select(".header1"); + headerOne = context.select(".log-data0"); + headerSecond = context.select(".log-data1"); firstLineData = lineConfig[0].data.data; secondLineData = lineConfig[1].data.data; } else { - headerOne = context.select(".header0"); + headerOne = context.select(".log-data0"); firstLineData = lineConfig[0].data.data; } @@ -132,9 +132,8 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd if(startData && endData){ let data = yValue - startData[0] > endData[0] - yValue ? endData : startData; - headerOne._groups[0][0].childNodes[2].textContent = data[1] + headerOne._groups[0][0].childNodes[1].textContent = data[1] } - } if (secondLineData) { let ind = bisect(secondLineData, yValue); @@ -142,7 +141,7 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd let endData = secondLineData[ind]; if(startData && endData){ let data = yValue - startData[0] > endData[0] - yValue ? endData : startData; - headerSecond._groups[0][0].childNodes[2].textContent = data[1]; + headerSecond._groups[0][0].childNodes[1].textContent = data[1]; } } }) diff --git a/ui/src/app/widget/lib/well-log-viewer/logViewer.js b/ui/src/app/widget/lib/well-log-viewer/logViewer.js index 09be600fc..ecfe026bd 100644 --- a/ui/src/app/widget/lib/well-log-viewer/logViewer.js +++ b/ui/src/app/widget/lib/well-log-viewer/logViewer.js @@ -123,6 +123,7 @@ export default function loadLogViewer(ctx, sequence){ d3.select(trackId) .append("div") .attr("class", "header") + .attr("margin-bottom", "10px") d3.select(trackId) .append("div") .attr("class", "track-div") From 9c2daae48594e41c2678955ac2a65684b1d4e802 Mon Sep 17 00:00:00 2001 From: NandiniMGawade Date: Thu, 11 Apr 2019 14:57:42 +0530 Subject: [PATCH 5/5] Resolved header min length issue. --- .../widget/lib/well-log-viewer/headerLegend.js | 2 +- .../app/widget/lib/well-log-viewer/lineGraph.js | 15 +++++++-------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/ui/src/app/widget/lib/well-log-viewer/headerLegend.js b/ui/src/app/widget/lib/well-log-viewer/headerLegend.js index d7056363b..d7d90c9d9 100644 --- a/ui/src/app/widget/lib/well-log-viewer/headerLegend.js +++ b/ui/src/app/widget/lib/well-log-viewer/headerLegend.js @@ -52,7 +52,7 @@ var headerLegend = function(lineConfig, state, index, width) { context = d3.select(this); - var margin = {top: 30, right: 10, bottom: 30, left: 10}, + var margin = {top: 30, right: 10, bottom: 30, left: 15}, width = o.width*140 - margin.right - margin.left, height = 40; diff --git a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js index 034eb2a77..c9c3ca499 100644 --- a/ui/src/app/widget/lib/well-log-viewer/lineGraph.js +++ b/ui/src/app/widget/lib/well-log-viewer/lineGraph.js @@ -47,14 +47,13 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd w = width * 140 - margin.right - margin.left, h = 700 - margin.top, headerOne, headerSecond, firstLineData, secondLineData; - if (lineConfig.length === 2) { - headerOne = context.select(".log-data0"); - headerSecond = context.select(".log-data1"); + headerOne = document.querySelectorAll("[class^=log-data]")[0]; + headerSecond = document.querySelectorAll("[class^=log-data]")[1]; firstLineData = lineConfig[0].data.data; secondLineData = lineConfig[1].data.data; } else { - headerOne = context.select(".log-data0"); + headerOne = document.querySelectorAll("[class^=log-data]")[0]; firstLineData = lineConfig[0].data.data; } @@ -132,7 +131,7 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd if(startData && endData){ let data = yValue - startData[0] > endData[0] - yValue ? endData : startData; - headerOne._groups[0][0].childNodes[1].textContent = data[1] + headerOne.childNodes[1].textContent = data[1] } } if (secondLineData) { @@ -141,7 +140,7 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd let endData = secondLineData[ind]; if(startData && endData){ let data = yValue - startData[0] > endData[0] - yValue ? endData : startData; - headerSecond._groups[0][0].childNodes[1].textContent = data[1]; + headerSecond.childNodes[1].textContent = data[1]; } } }) @@ -151,10 +150,10 @@ var lineGraph = function (lineConfig, areaFillConfig, state, currentComponentInd .on("mouseout", function () { d3.selectAll('.line_over').style("display", "none"); if (firstLineData) { - headerOne._groups[0][0].childNodes[2].textContent = ""; + headerOne.childNodes[1].textContent = ""; } if(secondLineData){ - headerSecond._groups[0][0].childNodes[2].textContent = ""; + headerSecond.childNodes[1].textContent = ""; } }) .append('rect')