74 lines
5.3 KiB
Twig
74 lines
5.3 KiB
Twig
<div class="tile charge-curve-tile" style="grid-column: span 3; grid-row: span 2;">
|
|
<div class="tile-title">Ladekurve</div>
|
|
<div class="charge-curve-container" style="position: relative; height: 120px; margin-top: 10px;">
|
|
<svg width="100%" height="100%" viewBox="0 0 300 100" style="overflow: visible;">
|
|
<!-- Grid lines -->
|
|
{% for i in 0..10 %}
|
|
<line x1="{{ i * 30 }}" y1="0" x2="{{ i * 30 }}" y2="100"
|
|
stroke="#f0f0f0" stroke-width="0.5"/>
|
|
{% endfor %}
|
|
{% for i in 0..5 %}
|
|
<line x1="0" y1="{{ i * 20 }}" x2="300" y2="{{ i * 20 }}"
|
|
stroke="#f0f0f0" stroke-width="0.5"/>
|
|
{% endfor %}
|
|
|
|
<!-- Charge curve path -->
|
|
<path d="M0,{{ 100 - ((tile.chargeCurve.averagePowerSoc0 ? tile.chargeCurve.averagePowerSoc0.kilowatts : 0) / 200 * 80) }}
|
|
L30,{{ 100 - ((tile.chargeCurve.averagePowerSoc10 ? tile.chargeCurve.averagePowerSoc10.kilowatts : 0) / 200 * 80) }}
|
|
L60,{{ 100 - ((tile.chargeCurve.averagePowerSoc20 ? tile.chargeCurve.averagePowerSoc20.kilowatts : 0) / 200 * 80) }}
|
|
L90,{{ 100 - ((tile.chargeCurve.averagePowerSoc30 ? tile.chargeCurve.averagePowerSoc30.kilowatts : 0) / 200 * 80) }}
|
|
L120,{{ 100 - ((tile.chargeCurve.averagePowerSoc40 ? tile.chargeCurve.averagePowerSoc40.kilowatts : 0) / 200 * 80) }}
|
|
L150,{{ 100 - ((tile.chargeCurve.averagePowerSoc50 ? tile.chargeCurve.averagePowerSoc50.kilowatts : 0) / 200 * 80) }}
|
|
L180,{{ 100 - ((tile.chargeCurve.averagePowerSoc60 ? tile.chargeCurve.averagePowerSoc60.kilowatts : 0) / 200 * 80) }}
|
|
L210,{{ 100 - ((tile.chargeCurve.averagePowerSoc70 ? tile.chargeCurve.averagePowerSoc70.kilowatts : 0) / 200 * 80) }}
|
|
L240,{{ 100 - ((tile.chargeCurve.averagePowerSoc80 ? tile.chargeCurve.averagePowerSoc80.kilowatts : 0) / 200 * 80) }}
|
|
L270,{{ 100 - ((tile.chargeCurve.averagePowerSoc90 ? tile.chargeCurve.averagePowerSoc90.kilowatts : 0) / 200 * 80) }}
|
|
L300,{{ 100 - ((tile.chargeCurve.averagePowerSoc100 ? tile.chargeCurve.averagePowerSoc100.kilowatts : 0) / 200 * 80) }}"
|
|
fill="none" stroke="#007acc" stroke-width="2" opacity="0.8"/>
|
|
|
|
<!-- Peak power indicator -->
|
|
{% set maxPower = 0 %}
|
|
{% if tile.chargeCurve.averagePowerSoc0 and tile.chargeCurve.averagePowerSoc0.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc0.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc10 and tile.chargeCurve.averagePowerSoc10.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc10.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc20 and tile.chargeCurve.averagePowerSoc20.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc20.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc30 and tile.chargeCurve.averagePowerSoc30.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc30.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc40 and tile.chargeCurve.averagePowerSoc40.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc40.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc50 and tile.chargeCurve.averagePowerSoc50.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc50.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc60 and tile.chargeCurve.averagePowerSoc60.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc60.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc70 and tile.chargeCurve.averagePowerSoc70.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc70.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc80 and tile.chargeCurve.averagePowerSoc80.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc80.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc90 and tile.chargeCurve.averagePowerSoc90.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc90.kilowatts %}
|
|
{% endif %}
|
|
{% if tile.chargeCurve.averagePowerSoc100 and tile.chargeCurve.averagePowerSoc100.kilowatts > maxPower %}
|
|
{% set maxPower = tile.chargeCurve.averagePowerSoc100.kilowatts %}
|
|
{% endif %}
|
|
|
|
{% if maxPower > 0 %}
|
|
<text x="5" y="15" font-size="10" fill="#666">{{ maxPower|round }}kW</text>
|
|
{% endif %}
|
|
<text x="5" y="95" font-size="10" fill="#666">0kW</text>
|
|
<text x="5" y="105" font-size="8" fill="#999">0%</text>
|
|
<text x="285" y="105" font-size="8" fill="#999">100%</text>
|
|
</svg>
|
|
</div>
|
|
<small style="color: #666; font-size: 11px;">Ladeleistung über Batteriestand (SOC)</small>
|
|
</div> |