72 lines
2.5 KiB
Svelte
72 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
|
|
import { BedarfsausweisWohnenClient, GebaeudeClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./types";
|
|
|
|
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
|
|
export let gebaeude: GebaeudeClient;
|
|
|
|
let maxPerformance = 250;
|
|
|
|
/**
|
|
* We use linear interpolation to scale the value between the given boundaries.
|
|
*/
|
|
function centerValueBetweenBoundaries(value: number, newMinimum: number, newMaximum: number, oldMinimum: number = 0, oldMaximum: number = 100): number {
|
|
// Calculate the center point of the current range
|
|
const center = (oldMinimum + oldMaximum) / 2;
|
|
|
|
// Shift the value to be centered around zero
|
|
const shiftedValue = value - center;
|
|
|
|
// Calculate the current range width
|
|
const rangeWidth = oldMaximum - oldMinimum;
|
|
|
|
// Calculate the new range width
|
|
const newRangeWidth = newMaximum - newMinimum;
|
|
|
|
// Calculate the scaling factor
|
|
const scalingFactor = newRangeWidth / rangeWidth;
|
|
|
|
// Scale the shifted value to fit within the new range
|
|
const scaledValue = shiftedValue * scalingFactor;
|
|
|
|
// Shift the scaled value back to the center of the new range
|
|
const centeredValue = scaledValue + ((newMaximum + newMinimum) / 2);
|
|
|
|
return centeredValue;
|
|
}
|
|
|
|
|
|
let translation_1 = 0;
|
|
let translation_2 = 0;
|
|
$: {
|
|
(async () => {
|
|
const result = (await endEnergieVerbrauchVerbrauchsausweis_2016({ ...ausweis, gebaeude_stammdaten: gebaeude}));
|
|
|
|
if (!result) {
|
|
return
|
|
}
|
|
//const primaerEnergieVerbrauch = (await ausweis.primaerEnergieBedarf);
|
|
translation_1 = Math.max(0, Math.min(100, result.endEnergieVerbrauchGesamt / maxPerformance * 100))
|
|
//translation_2 = Math.max(0, Math.min(100, primaerEnergieVerbrauch / maxPerformance * 100))
|
|
})()
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="w-full rounded-lg border border-[#ffcc03] relative p-2">
|
|
<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala">
|
|
<img
|
|
class="absolute top-1 transition-left duration-1000 ease-in-out"
|
|
width="20px"
|
|
src="/images/pfeil2.png"
|
|
alt=""
|
|
style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(translation_1, 50, -150, 0, 100)}%)"
|
|
/>
|
|
<img
|
|
class="absolute bottom-1 transition-left duration-1000 ease-in-out"
|
|
width="20px"
|
|
src="/images/pfeil.png"
|
|
style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(translation_2, 50, -150, 0, 100)}%)"
|
|
alt=""
|
|
/>
|
|
</div> |