fix and add tooltip
This commit is contained in:
parent
35889239bf
commit
7a2726f34f
5
public/dist/scripts/app-all.js
vendored
5
public/dist/scripts/app-all.js
vendored
|
@ -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;}
|
||||
|
|
5
public/dist/scripts/app.js
vendored
5
public/dist/scripts/app.js
vendored
|
@ -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;}
|
||||
|
|
2
public/dist/styles/default-ltr.css
vendored
2
public/dist/styles/default-ltr.css
vendored
File diff suppressed because one or more lines are too long
2
public/dist/styles/default-rtl.css
vendored
2
public/dist/styles/default-rtl.css
vendored
File diff suppressed because one or more lines are too long
|
@ -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);
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -408,7 +408,7 @@
|
|||
|
||||
.dashboard {
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 2px;
|
||||
|
|
Loading…
Reference in a new issue