1
0
Fork 0
mirror of synced 2024-06-01 10:29:48 +12:00

fix and add tooltip

This commit is contained in:
Torsten Dittmann 2021-08-22 11:53:06 +02:00
parent 35889239bf
commit 7a2726f34f
7 changed files with 27 additions and 27 deletions

View file

@ -2329,9 +2329,8 @@ if(chart){chart.destroy();}
else{}
chart=new Chart(child.getContext("2d"),config);wrapper.dataset["canvas"]=true;}
check();element.addEventListener('change',check);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-chart-bars",controller:(element)=>{let observer=null;let populateChart=()=>{let history=element.dataset?.history;if(history==0){history=new Array(10).fill({percentage:0,value:0});}else{history=JSON.parse(history);}
element.innerHTML='';history.forEach(({percentage,value})=>{const bar=document.createElement('span');bar.classList.add('bar')
bar.classList.add(`bar-${percentage}`)
element.appendChild(bar);})}
element.innerHTML='';history.forEach(({percentage,value},index)=>{const seconds=50-(index*5)
const bar=document.createElement('span');bar.classList.add('bar');bar.classList.add(`bar-${percentage}`);bar.classList.add('tooltip');bar.classList.add('down');bar.setAttribute('data-tooltip',`${value} (${seconds} seconds ago)`);element.appendChild(bar);})}
if(observer){observer.disconnect();}else{observer=new MutationObserver(populateChart);observer.observe(element,{attributes:true,attributeFilter:['data-history']});}
populateChart();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);element.style.display='none';div.className="ide";div.dataset['langLabel']=element.dataset["langLabel"]||'JSON';div.dataset['lang']=element.dataset["lang"]||'json';pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.textContent="Click Here to Copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(code);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
window.getSelection().removeAllRanges();});let check=function(){if(!element.value){return;}

View file

@ -354,9 +354,8 @@ if(chart){chart.destroy();}
else{}
chart=new Chart(child.getContext("2d"),config);wrapper.dataset["canvas"]=true;}
check();element.addEventListener('change',check);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-chart-bars",controller:(element)=>{let observer=null;let populateChart=()=>{let history=element.dataset?.history;if(history==0){history=new Array(10).fill({percentage:0,value:0});}else{history=JSON.parse(history);}
element.innerHTML='';history.forEach(({percentage,value})=>{const bar=document.createElement('span');bar.classList.add('bar')
bar.classList.add(`bar-${percentage}`)
element.appendChild(bar);})}
element.innerHTML='';history.forEach(({percentage,value},index)=>{const seconds=50-(index*5)
const bar=document.createElement('span');bar.classList.add('bar');bar.classList.add(`bar-${percentage}`);bar.classList.add('tooltip');bar.classList.add('down');bar.setAttribute('data-tooltip',`${value} (${seconds} seconds ago)`);element.appendChild(bar);})}
if(observer){observer.disconnect();}else{observer=new MutationObserver(populateChart);observer.observe(element,{attributes:true,attributeFilter:['data-history']});}
populateChart();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);element.style.display='none';div.className="ide";div.dataset['langLabel']=element.dataset["langLabel"]||'JSON';div.dataset['lang']=element.dataset["lang"]||'json';pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.textContent="Click Here to Copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(code);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
window.getSelection().removeAllRanges();});let check=function(){if(!element.value){return;}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -16,13 +16,14 @@
history = JSON.parse(history);
}
element.innerHTML = '';
history.forEach(({ percentage, value }) => {
history.forEach(({ percentage, value }, index) => {
const seconds = 50- (index * 5)
const bar = document.createElement('span');
bar.classList.add('bar')
bar.classList.add(`bar-${percentage}`)
// bar.classList.add('tooltip')
// bar.classList.add('down')
//ar.setAttribute('data-tooltip', `${value} connections (x seconds ago)`)
bar.classList.add('bar');
bar.classList.add(`bar-${percentage}`);
bar.classList.add('tooltip');
bar.classList.add('down');
bar.setAttribute('data-tooltip', `${value} (${seconds} seconds ago)`);
element.appendChild(bar);
})
}

View file

@ -466,7 +466,7 @@ fieldset {
white-space: nowrap;
background: var(--config-color-tooltip-background);
border-radius: 5px;
bottom: 26px;
bottom: calc(100% + 6px);
color: var(--config-color-tooltip-text);
content: attr(data-tooltip);
padding: 5px 15px;
@ -483,22 +483,23 @@ fieldset {
border: solid;
border-color: var(--config-color-tooltip-background) transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
bottom: 100%;
content: "";
position: absolute;
z-index: 99;
.func-start(5px);
.func-start(3px);
}
&.down:hover:after {
top: 26px;
bottom: inherit;
}
&.down:hover:before {
top: 20px;
border-width: 0 6px 6px 6px;
bottom: inherit;
&.down:hover {
&:after {
top: calc(100% + 6px);
bottom: inherit;
}
&:before {
top: 100%;
border-width: 0 6px 6px 6px;
bottom: inherit;
}
}
}

View file

@ -408,7 +408,7 @@
.dashboard {
padding: 20px;
overflow: hidden;
overflow: visible;
position: relative;
z-index: 1;
margin-bottom: 2px;