diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue index 456adebbc..9382bd35b 100644 --- a/assets/js/components/Energyflow/Energyflow.vue +++ b/assets/js/components/Energyflow/Energyflow.vue @@ -112,7 +112,11 @@ :vehicleIcons="vehicleIcons" :power="loadpointsPower" :powerInKw="powerInKw" - :details="detailsValue(tariffEffectivePrice, tariffEffectiveCo2)" + :details=" + activeLoadpointsCount + ? detailsValue(tariffEffectivePrice, tariffEffectiveCo2) + : undefined + " :detailsFmt="detailsFmt" :detailsTooltip=" detailsTooltip(tariffEffectivePrice, tariffEffectiveCo2) diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue index 75d3d7161..57745dd67 100644 --- a/assets/js/components/Energyflow/Visualization.vue +++ b/assets/js/components/Energyflow/Visualization.vue @@ -20,7 +20,7 @@ :style="{ width: widthTotal(selfConsumptionAdjusted) }" > 0) - setTimeout(() => { - this.visualizationReady = true; - }, 500); + visualizationReady: function () { + return this.totalAdjusted > 0 && this.width > 0; }, }, + mounted: function () { this.$nextTick(function () { window.addEventListener("resize", this.updateElementWidth); @@ -147,8 +143,8 @@ export default { return (100 / this.totalAdjusted) * power + "%"; }, fmtBarValue: function (watt) { - const valueInKw = this.powerLabelEnoughSpace(watt); - return this.fmtKw(watt, this.powerInKw, valueInKw); + const withUnit = this.powerLabelEnoughSpace(watt); + return this.fmtKw(watt, this.powerInKw, withUnit); }, powerLabelAvailableSpace(power) { if (this.totalAdjusted === 0) return 0; @@ -158,9 +154,6 @@ export default { powerLabelEnoughSpace(power) { return this.powerLabelAvailableSpace(power) > 60; }, - powerLabelSomeSpace(power) { - return this.powerLabelAvailableSpace(power) > 35; - }, hideLabelIcon(power, minWidth = 32) { if (this.totalAdjusted === 0) return true; const percent = (100 / this.totalAdjusted) * power;