mirror of
https://github.com/UtilitechAS/amsreader-firmware.git
synced 2026-01-12 00:02:53 +00:00
Tooltip added to bar charts
This commit is contained in:
Gunnar Skjold
parent
e11fac3d11
commit
a31132f2e6
2
lib/SvelteUi/app/dist/index.css
vendored
2
lib/SvelteUi/app/dist/index.css
vendored
File diff suppressed because one or more lines are too long
12
lib/SvelteUi/app/dist/index.js
vendored
12
lib/SvelteUi/app/dist/index.js
vendored
File diff suppressed because one or more lines are too long
@ -188,3 +188,22 @@ svg {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tooltip::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -9px;
|
||||
border-width: 9px;
|
||||
border-style: solid;
|
||||
border-color: #ddd transparent transparent transparent;
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import { Link } from "svelte-navigator";
|
||||
import { tooltip } from './tooltip';
|
||||
|
||||
export let config;
|
||||
|
||||
@ -83,7 +84,7 @@
|
||||
<g class='bars'>
|
||||
{#each config.points as point, i}
|
||||
{#if !isNaN(xScale(i)) && !isNaN(yScale(point.value))}
|
||||
<g>
|
||||
<g data-title="{point.title}" use:tooltip>
|
||||
{#if point.value !== undefined}
|
||||
<rect
|
||||
x="{xScale(i) + 2}"
|
||||
@ -102,9 +103,6 @@
|
||||
transform="translate({xScale(i) + barWidth/2} {yScale(point.value) > yScale(0) - labelOffset ? yScale(point.value) - labelOffset : yScale(point.value) + 10}) rotate({point.labelAngle ? point.labelAngle : barWidth < vertSwitch ? 90 : 0})"
|
||||
|
||||
>{point.label}</text>
|
||||
{#if point.title}
|
||||
<title>{point.title}</title>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</g>
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
let peak = tariffData.p[i];
|
||||
points.push({
|
||||
label: peak.v.toFixed(2),
|
||||
title: peak.v.toFixed(2) + ' kWh',
|
||||
value: peak.v,
|
||||
color: dark ? '#5c2da5' : '#7c3aed'
|
||||
});
|
||||
|
||||
14
lib/SvelteUi/app/src/lib/Tooltip.svelte
Normal file
14
lib/SvelteUi/app/src/lib/Tooltip.svelte
Normal file
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
export let title;
|
||||
export let x;
|
||||
export let y;
|
||||
|
||||
let width;
|
||||
let height;
|
||||
</script>
|
||||
<div
|
||||
class="tooltip"
|
||||
style="top: {y - height - 10}px; left: {x - (width / 2)}px;"
|
||||
bind:clientHeight={height}
|
||||
bind:clientWidth={width}
|
||||
>{title}</div>
|
||||
41
lib/SvelteUi/app/src/lib/tooltip.js
Normal file
41
lib/SvelteUi/app/src/lib/tooltip.js
Normal file
@ -0,0 +1,41 @@
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
|
||||
export function tooltip(element) {
|
||||
let title;
|
||||
let tooltipComponent;
|
||||
|
||||
function click(event) {
|
||||
if(tooltipComponent) tooltipComponent.$destroy();
|
||||
|
||||
title = element.dataset.title || element.getAttribute('title');
|
||||
var rect = element.getBoundingClientRect();
|
||||
|
||||
tooltipComponent = new Tooltip({
|
||||
props: {
|
||||
title: title,
|
||||
x: rect.left + window.scrollX + (rect.width / 2),
|
||||
y: rect.top + window.scrollY,
|
||||
},
|
||||
target: document.body,
|
||||
});
|
||||
}
|
||||
|
||||
function mouseLeave() {
|
||||
if(tooltipComponent) {
|
||||
setTimeout(() => {
|
||||
tooltipComponent.$destroy();
|
||||
tooltipComponent = null;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
element.addEventListener('click', click);
|
||||
element.addEventListener('mouseleave', mouseLeave);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
element.removeEventListener('click', click);
|
||||
element.removeEventListener('mouseleave', mouseLeave);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -17,27 +17,27 @@ export default defineConfig({
|
||||
plugins: [svelte()],
|
||||
server: {
|
||||
proxy: {
|
||||
"/data.json": "http://192.168.21.192",
|
||||
"/energyprice.json": "http://192.168.21.192",
|
||||
"/dayplot.json": "http://192.168.21.192",
|
||||
"/monthplot.json": "http://192.168.21.192",
|
||||
"/temperature.json": "http://192.168.21.192",
|
||||
"/sysinfo.json": "http://192.168.21.192",
|
||||
"/configuration.json": "http://192.168.21.192",
|
||||
"/tariff.json": "http://192.168.21.192",
|
||||
"/realtime.json": "http://192.168.21.192",
|
||||
"/priceconfig.json": "http://192.168.21.192",
|
||||
"/translations.json": "http://192.168.21.192",
|
||||
"/cloudkey.json": "http://192.168.21.192",
|
||||
"/wifiscan.json": "http://192.168.21.192",
|
||||
"/save": "http://192.168.21.192",
|
||||
"/reboot": "http://192.168.21.192",
|
||||
"/configfile": "http://192.168.21.192",
|
||||
"/upgrade": "http://192.168.21.192",
|
||||
"/mqtt-ca": "http://192.168.21.192",
|
||||
"/mqtt-cert": "http://192.168.21.192",
|
||||
"/mqtt-key": "http://192.168.21.192",
|
||||
"/logo.svg": "http://192.168.21.192",
|
||||
"/data.json": "http://192.168.233.49",
|
||||
"/energyprice.json": "http://192.168.233.49",
|
||||
"/dayplot.json": "http://192.168.233.49",
|
||||
"/monthplot.json": "http://192.168.233.49",
|
||||
"/temperature.json": "http://192.168.233.49",
|
||||
"/sysinfo.json": "http://192.168.233.49",
|
||||
"/configuration.json": "http://192.168.233.49",
|
||||
"/tariff.json": "http://192.168.233.49",
|
||||
"/realtime.json": "http://192.168.233.49",
|
||||
"/priceconfig.json": "http://192.168.233.49",
|
||||
"/translations.json": "http://192.168.233.49",
|
||||
"/cloudkey.json": "http://192.168.233.49",
|
||||
"/wifiscan.json": "http://192.168.233.49",
|
||||
"/save": "http://192.168.233.49",
|
||||
"/reboot": "http://192.168.233.49",
|
||||
"/configfile": "http://192.168.233.49",
|
||||
"/upgrade": "http://192.168.233.49",
|
||||
"/mqtt-ca": "http://192.168.233.49",
|
||||
"/mqtt-cert": "http://192.168.233.49",
|
||||
"/mqtt-key": "http://192.168.233.49",
|
||||
"/logo.svg": "http://192.168.233.49",
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user