jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Merge 3ec31560e9f3851ef6469b4244b643664f872bc7 into master

Browse Source
This commit is contained in:
Arjun Choudhary 2022-11-22 11:00:51 +05:30
commit aefc788932
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/css/charts.scss
View File

@ -98,7 +98,6 @@
text-align: left; text-align: left;
padding: 0px; padding: 0px;
pointer-events: none; pointer-events: none;
.title { .title {
display: block; display: block;
padding: 16px; padding: 16px;
@ -114,6 +113,12 @@
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
list-style: none; list-style: none;
&.tooltip-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px;
}
} }
li { li {

9
src/js/objects/SvgTip.js
View File

@ -42,6 +42,7 @@ export default class SvgTip {
this.hideTip(); this.hideTip();
this.title = this.container.querySelector('.title'); this.title = this.container.querySelector('.title');
this.list = this.container.querySelector('.data-point-list');
this.dataPointList = this.container.querySelector('.data-point-list'); this.dataPointList = this.container.querySelector('.data-point-list');
this.parent.addEventListener('mouseleave', () => { this.parent.addEventListener('mouseleave', () => {
@ -59,13 +60,19 @@ export default class SvgTip {
} else { } else {
title = `${this.titleName}<strong>${this.titleValue}</strong>`; title = `${this.titleName}<strong>${this.titleValue}</strong>`;
} }
if (this.listValues.length > 4) {
this.list.classList.add('tooltip-grid');
} else {
this.list.classList.remove('tooltip-grid');
}
this.title.innerHTML = title; this.title.innerHTML = title;
this.dataPointList.innerHTML = ''; this.dataPointList.innerHTML = '';
this.listValues.map((set, i) => { this.listValues.map((set, i) => {
const color = this.colors[i] || 'black'; const color = this.colors[i] || 'black';
let value = set.formatted === 0 || set.formatted ? set.formatted : set.value; let value = set.formatted === 0 || set.formatted ? set.formatted : set.value;
let li = $.create('li', { let li = $.create('li', {
innerHTML: `<div class="tooltip-legend" style="background: ${color};"></div> innerHTML: `<div class="tooltip-legend" style="background: ${color};"></div>
<div> <div>