Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix Legend overlapping problem #96

Merged
merged 6 commits into from
Oct 13, 2021
Merged

fix Legend overlapping problem #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5bc8028
trim text if its length longer than 20
lovedeep92 Oct 7, 2021
2e515d0
Release 1.5.0
lovedeep92 Oct 7, 2021
49eea25
make changes to overlap func
lovedeep92 Oct 8, 2021
b894a2b
Release 1.6.0
lovedeep92 Oct 8, 2021
013ad86
added gap
lovedeep92 Oct 8, 2021
c10a6b5
Release 1.7.0
lovedeep92 Oct 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 63 additions & 24 deletions docs/assets/scripts/hedwig-main.umd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7415,7 +7415,8 @@
group: d.group,
color: d.color,
unit
};
}; // collection properties for Tooltip

lines.selectAll('dot').data(d.datapoints).enter().append("circle").attrs({
"r": 4,
"cx": function (d) {
Expand All @@ -7433,7 +7434,8 @@
select(this).transition().duration(200).style("opacity", 0.9); // add opacity in case of hover

div.transition().duration(200).style("opacity", .9);
div.html(this.toolTipHtml(d, toltipDat)).styles({
div.html(this.tooltipTemplate(d, toltipDat)) // ToolTip Html template binding
.styles({
"left": event.pageX + 10 + "px",
"top": event.pageY - 28 + "px",
"pointer-events": "none"
Expand Down Expand Up @@ -7477,6 +7479,10 @@


setLegend(svg, height, data) {
var j = -1;
var k = 12;
var l = -1;
var m = 12;
var legend = svg.append("g").attrs({
"class": "legend",
'transform': `translate(0,${height - 40})`
Expand All @@ -7491,25 +7497,38 @@
return `rect${cssCls}`;
}).attrs({
"x": (d, i) => {
if (data.length <= 4) {
if (i < 6) {
return 18;
}

if (i <= parseInt((data.length - 1) / 2)) {
return 18;
} else {
if (i >= 6 && i < 12) {
return 200;
}

if (i >= 12 && i < 18) {
return 382;
}

if (i >= 18 && i < 24) {
return 564;
}

if (i >= 24 && i < 30) {
return 746;
}
},
"y": (d, i) => {
if (data.length <= 4) {
if (i < 6) {
return i * 20 + 30;
}

if (i <= parseInt((data.length - 1) / 2)) {
return i * 20 + 30;
} else {
return ((i - data.length) * -1 - 1) * 20 + 30;
if (i >= 6 && i < 12) {
j = j + 2;
return (i - j) * 20 + 30;
}

if (i >= 12 && i < 18) {
return (i - k) * 20 + 30;
}
},
"width": 10,
Expand All @@ -7524,32 +7543,45 @@
return `text${cssCls}`;
}).attrs({
"x": (d, i) => {
if (data.length <= 4) {
if (i < 6) {
return 36;
}

if (i <= parseInt((data.length - 1) / 2)) {
return 36;
} else {
if (i >= 6 && i < 12) {
return 218;
}

if (i >= 12 && i < 18) {
return 400;
}

if (i >= 18 && i < 24) {
return 582;
}

if (i >= 24 && i < 30) {
return 764;
}
},
"y": (d, i) => {
if (data.length <= 4) {
return i * 20 + 38;
if (i < 6) {
return i * 20 + 39;
}

if (i <= parseInt((data.length - 1) / 2)) {
return i * 20 + 39;
} else {
return ((i - data.length) * -1 - 1) * 20 + 39;
if (i >= 6 && i < 12) {
l = l + 2;
return (i - l) * 20 + 39;
}

if (i >= 12 && i < 18) {
return (i - m) * 20 + 39;
}
}
}).text(d => {
if (d.group) {
return d.group;
if (d.group.length >= 20) return d.group.substring(0, 20) + '...';else return d.group;
} else {
return this.dataset.field;
if (this.dataset.field.length >= 20) return this.dataset.field.substring(0, 20) + '...';else return this.dataset.field;
}
}) // Legend text Click
.on('click', function (d, i) {
Expand Down Expand Up @@ -7584,8 +7616,15 @@
});
svg.append("g").attr("id", "brushArea").attr("class", "brush").call(brush);
}
/**
*
* @param d Data points object [value,time]
* @param ttlD An object with key unit and color and group
* @returns Tooltip html body
*/


toolTipHtml(d, ttlD) {
tooltipTemplate(d, ttlD) {
return `
<table>
<tr>
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "hedwig-monitoring-library",
"version": "1.4.0",
"version": "1.7.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should be minor patch releases. e,g. 1.4.1.

"main": "dist/hedwig-main.cjs.js",
"module": "dist/hedwig-main.esm.js",
"browser": "dist/hedwig-main.umd.js",
Expand Down
94 changes: 67 additions & 27 deletions src/line-graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,11 @@ export class LineGraph extends HTMLElement {
* @param {data} data
*/
setLegend(svg, height, data) {
var j = -1;
var k = 12;
var l = -1;
var m = 12;

var legend = svg.append("g")
.attrs({
"class": "legend",
Expand All @@ -298,27 +303,39 @@ export class LineGraph extends HTMLElement {

.attrs({
"x": (d, i) => {
if (data.length <= 4) {
if(i < 6) {
return 18;
}
if (i <= parseInt((data.length - 1) / 2)) {
return 18;
} else {
return 200;

if(i >= 6 && i < 12) {
return 220;
}

if( i >= 12 && i < 18) {
return 422;
}
},
"y": (d, i) => {

if (data.length <= 4) {
return i * 20 + 30;
if( i >= 18 && i < 24) {
return 624;
}
if (i <= parseInt((data.length - 1) / 2)) {
return i * 20 + 30
} else {

return (((i - data.length) * -1) - 1) * 20 + 30;
if( i >= 24 && i < 30) {
return 826;
}
},
"y": (d, i) => {
if(i < 6) {
return i * 20 + 30;
}

if(i >= 6 && i < 12) {
j = j + 2;
return (i - j) * 20 + 30;
}
if(i >= 12 && i < 18) {
return (i - k) * 20 + 30;
}
},
"width": 10,
"height": 10
})
Expand All @@ -335,32 +352,55 @@ export class LineGraph extends HTMLElement {
return `text${cssCls}`
})
.attrs({
"x": (d, i) => {
if (data.length <= 4) {
"x": (d, i) => {


if(i < 6) {
return 36;
}
if (i <= parseInt((data.length - 1) / 2)) {
return 36;
} else {
return 218;

if(i >= 6 && i < 12) {
return 238;
}

if( i >= 12 && i < 18) {
return 440;
}

if( i >= 18 && i < 24) {
return 642;
}

if( i >= 24 && i < 30) {
return 844;
}
},
"y": (d, i) => {
if (data.length <= 4) {
return i * 20 + 38;
}
if (i <= parseInt((data.length - 1) / 2)) {

if(i < 6) {
return i * 20 + 39;
} else {
return (((i - data.length) * -1) - 1) * 20 + 39;
}

if(i >= 6 && i < 12) {
l = l + 2;
return (i -l) * 20 + 39;
}
if(i >= 12 && i < 18) {
return (i - m) * 20 + 39;
}
}
})
.text((d) => {
if (d.group) {
return d.group;
if(d.group.length >= 20)
return d.group.substring(0, 20)+ '...';
else
return d.group;
} else {
return this.dataset.field
if(this.dataset.field.length >= 20)
return this.dataset.field.substring(0, 20)+ '...';
else
return this.dataset.field;
}
})
// Legend text Click
Expand Down