107 lines
2.8 KiB
Svelte
107 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
|
|
import ThickArrowDown from "radix-svelte-icons/src/lib/icons/ThickArrowDown.svelte";
|
|
import {
|
|
BedarfsausweisWohnenClient,
|
|
GebaeudeAufnahmeClient,
|
|
GebaeudeClient,
|
|
VerbrauchsausweisGewerbeClient,
|
|
VerbrauchsausweisWohnenClient,
|
|
} from "./types";
|
|
import ThickArrowUp from "radix-svelte-icons/src/lib/icons/ThickArrowUp.svelte";
|
|
|
|
export let ausweis: VerbrauchsausweisWohnenClient;
|
|
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
|
|
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_aufnahme_allgemein: {
|
|
...gebaeude_aufnahme_allgemein,
|
|
gebaeude_stammdaten: gebaeude,
|
|
},
|
|
});
|
|
|
|
console.log(result, ausweis);
|
|
|
|
if (!result) {
|
|
return;
|
|
}
|
|
translation_1 = Math.max(
|
|
0,
|
|
Math.min(
|
|
100,
|
|
(result.endEnergieVerbrauchGesamt / maxPerformance) * 100
|
|
)
|
|
);
|
|
translation_2 = Math.max(0, Math.min(100, result.primaerEnergieVerbrauchGesamt / maxPerformance * 100))
|
|
})();
|
|
}
|
|
</script>
|
|
|
|
|
|
<img class="" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
|
|
<ThickArrowDown
|
|
size={28}
|
|
class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
|
|
style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
|
|
translation_1,
|
|
50,
|
|
-150,
|
|
0,
|
|
100
|
|
)}%)"
|
|
/>
|
|
<ThickArrowUp
|
|
size={28}
|
|
class="fill-base-content absolute bottom-0 transition-left duration-1000 ease-in-out"
|
|
style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
|
|
translation_2,
|
|
50,
|
|
-150,
|
|
0,
|
|
100
|
|
)}%)"
|
|
/>
|
|
|