Skip to content

Commit 70cd71a

Browse files
danimart1991danimart1991
authored
fix: format date, number and hours by user settings (#81)
1 parent 8cef723 commit 70cd71a

File tree

1 file changed

+63
-66
lines changed

1 file changed

+63
-66
lines changed

‎dist/pvpc-hourly-pricing-card.js

+63-66
Original file line numberDiff line numberDiff line change
@@ -532,7 +532,7 @@ class PVPCHourlyPricingCard extends LitElement {
532532
</svg>
533533
534534
<span class="currentPrice"
535-
>${this._getFixedFloat(this.pvpcHourlyPricingObj.state)}</span
535+
>${this._formatNumber(this.pvpcHourlyPricingObj.state)}</span
536536
>
537537
<span class="currentPriceUnit">
538538
${this.pvpcHourlyPricingObj.attributes.unit_of_measurement}</span
@@ -546,37 +546,25 @@ class PVPCHourlyPricingCard extends LitElement {
546546
return html``;
547547
}
548548

549-
const minPrice = this._getFixedFloat(this.despiction.minPrice);
550-
const minPriceFrom = this._getTimeString(
551-
new Date().setHours(this.despiction.minIndex, 0)
549+
const minPrice = this._formatNumber(this.despiction.minPrice);
550+
const minPriceFrom = this._formatHour(this.despiction.minIndex);
551+
const minPriceTo = this._formatHour(this.despiction.minIndex + 1);
552+
const maxPrice = this._formatNumber(this.despiction.maxPrice);
553+
const maxPriceFrom = this._formatHour(this.despiction.maxIndex);
554+
const maxPriceTo = this._formatHour(this.despiction.maxIndex + 1);
555+
const minPriceNextDay = this._formatNumber(this.despiction.minPriceNextDay);
556+
const minPriceFromNextDay = this._formatHour(
557+
this.despiction.minIndexNextDay
552558
);
553-
const minPriceTo = this._getTimeString(
554-
new Date().setHours(this.despiction.minIndex + 1, 0)
559+
const minPriceToNextDay = this._formatHour(
560+
this.despiction.minIndexNextDay + 1
555561
);
556-
const maxPrice = this._getFixedFloat(this.despiction.maxPrice);
557-
const maxPriceFrom = this._getTimeString(
558-
new Date().setHours(this.despiction.maxIndex, 0)
562+
const maxPriceNextDay = this._formatNumber(this.despiction.maxPriceNextDay);
563+
const maxPriceFromNextDay = this._formatHour(
564+
this.despiction.maxIndexNextDay
559565
);
560-
const maxPriceTo = this._getTimeString(
561-
new Date().setHours(this.despiction.maxIndex + 1, 0)
562-
);
563-
const minPriceNextDay = this._getFixedFloat(
564-
this.despiction.minPriceNextDay
565-
);
566-
const minPriceFromNextDay = this._getTimeString(
567-
new Date().setHours(this.despiction.minIndexNextDay, 0)
568-
);
569-
const minPriceToNextDay = this._getTimeString(
570-
new Date().setHours(this.despiction.minIndexNextDay + 1, 0)
571-
);
572-
const maxPriceNextDay = this._getFixedFloat(
573-
this.despiction.maxPriceNextDay
574-
);
575-
const maxPriceFromNextDay = this._getTimeString(
576-
new Date().setHours(this.despiction.maxIndexNextDay, 0)
577-
);
578-
const maxPriceToNextDay = this._getTimeString(
579-
new Date().setHours(this.despiction.maxIndexNextDay + 1, 0)
566+
const maxPriceToNextDay = this._formatHour(
567+
this.despiction.maxIndexNextDay + 1
580568
);
581569

582570
this.numberElements++;
@@ -588,30 +576,28 @@ class PVPCHourlyPricingCard extends LitElement {
588576
>
589577
<li>
590578
<ha-icon icon="mdi:thumb-up-outline"></ha-icon>
591-
${this._ll("minPrice")}
592-
${minPrice}${this.pvpcHourlyPricingObj.attributes.unit_of_measurement}
579+
${this._ll("minPrice")} ${minPrice}
580+
${this.pvpcHourlyPricingObj.attributes.unit_of_measurement}
593581
${this._ll("from")} ${minPriceFrom} ${this._ll("to")} ${minPriceTo}
594582
</li>
595583
<li>
596584
<ha-icon icon="mdi:thumb-down-outline"></ha-icon>
597-
${this._ll("maxPrice")}
598-
${maxPrice}${this.pvpcHourlyPricingObj.attributes.unit_of_measurement}
585+
${this._ll("maxPrice")} ${maxPrice}
586+
${this.pvpcHourlyPricingObj.attributes.unit_of_measurement}
599587
${this._ll("from")} ${maxPriceFrom} ${this._ll("to")} ${maxPriceTo}
600588
</li>
601589
${this.despiction.minPriceNextDay
602590
? html` <li>
603591
<ha-icon icon="mdi:thumb-up-outline"></ha-icon>
604-
${this._ll("minPriceNextDay")}
605-
${minPriceNextDay}${this.pvpcHourlyPricingObj.attributes
606-
.unit_of_measurement}
592+
${this._ll("minPriceNextDay")} ${minPriceNextDay}
593+
${this.pvpcHourlyPricingObj.attributes.unit_of_measurement}
607594
${this._ll("from")} ${minPriceFromNextDay} ${this._ll("to")}
608595
${minPriceToNextDay}
609596
</li>
610597
<li>
611598
<ha-icon icon="mdi:thumb-down-outline"></ha-icon>
612-
${this._ll("maxPriceNextDay")}
613-
${maxPriceNextDay}${this.pvpcHourlyPricingObj.attributes
614-
.unit_of_measurement}
599+
${this._ll("maxPriceNextDay")} ${maxPriceNextDay}
600+
${this.pvpcHourlyPricingObj.attributes.unit_of_measurement}
615601
${this._ll("from")} ${maxPriceFromNextDay} ${this._ll("to")}
616602
${maxPriceToNextDay}
617603
</li>`
@@ -742,9 +728,9 @@ class PVPCHourlyPricingCard extends LitElement {
742728
},
743729
formatter: (params) => {
744730
const hours = Math.min(Number(params[0].axisValue.split(":")[0]), 23);
745-
let tooltipContent = `${this._getCategoryHour(
746-
hours
747-
)} - ${this._getCategoryHour(hours + 1)}<br/>`;
731+
let tooltipContent = `${this._formatHour(hours)} - ${this._formatHour(
732+
hours + 1
733+
)}<br/>`;
748734
params.forEach((item) => {
749735
tooltipContent += `${item.marker} ${item.seriesName}: ${item.value} ${this.pvpcHourlyPricingObj.attributes.unit_of_measurement}<br/>`;
750736
});
@@ -776,14 +762,14 @@ class PVPCHourlyPricingCard extends LitElement {
776762
},
777763
series: [
778764
Object.assign({}, baseSeries, {
779-
name: this._getDateString(today),
765+
name: this._formatDate(today),
780766
data: data.prices,
781767
markArea: {
782768
itemStyle: { color: splitLineColor },
783769
data: [
784770
[
785-
{ xAxis: this._getCategoryHour(now.getHours()) },
786-
{ xAxis: this._getCategoryHour(now.getHours() + 1) },
771+
{ xAxis: this._formatHour(now.getHours()) },
772+
{ xAxis: this._formatHour(now.getHours() + 1) },
787773
],
788774
],
789775
},
@@ -797,7 +783,7 @@ class PVPCHourlyPricingCard extends LitElement {
797783
) {
798784
options.series.push(
799785
Object.assign({}, baseSeries, {
800-
name: this._getDateString(tomorrow),
786+
name: this._formatDate(tomorrow),
801787
data: data.pricesTomorrow,
802788
})
803789
);
@@ -806,7 +792,7 @@ class PVPCHourlyPricingCard extends LitElement {
806792
if (data.injectionPrices.some((value) => value !== 0)) {
807793
options.series.push(
808794
Object.assign({}, baseSeries, {
809-
name: this._getDateString(today),
795+
name: this._formatDate(today),
810796
data: data.injectionPrices,
811797
lineStyle: { type: "dotted" },
812798
})
@@ -819,7 +805,7 @@ class PVPCHourlyPricingCard extends LitElement {
819805
) {
820806
options.series.push(
821807
Object.assign({}, baseSeries, {
822-
name: this._getDateString(tomorrow),
808+
name: this._formatDate(tomorrow),
823809
data: data.injectionPricesTomorrow,
824810
lineStyle: { type: "dotted" },
825811
})
@@ -845,7 +831,7 @@ class PVPCHourlyPricingCard extends LitElement {
845831
const injectionPricesTomorrow = [];
846832

847833
for (let i = 0; i < 24; i++) {
848-
categories.push(this._getCategoryHour(i));
834+
categories.push(this._formatHour(i));
849835
prices.push(attributes[`price_${this._getPadStartNumber(i)}h`] || 0);
850836
pricesTomorrow.push(
851837
attributes[`price_next_day_${this._getPadStartNumber(i)}h`] || 0
@@ -859,7 +845,7 @@ class PVPCHourlyPricingCard extends LitElement {
859845
);
860846
}
861847

862-
categories.push(this._getCategoryHour(24));
848+
categories.push(this._formatHour(24));
863849
prices.push(prices[23]);
864850
pricesTomorrow.push(pricesTomorrow[23]);
865851
injectionPrices.push(injectionPrices[23]);
@@ -913,28 +899,39 @@ class PVPCHourlyPricingCard extends LitElement {
913899
return data;
914900
}
915901

916-
_getDateString(datetime) {
917-
return new Date(datetime).toLocaleDateString(this.lang, {
918-
day: "2-digit",
919-
month: "2-digit",
902+
_formatDate(value, language) {
903+
if (!language) {
904+
if (this.hass?.locale?.date_format === "language") {
905+
language = this.hass.locale.language;
906+
} else {
907+
language = undefined;
908+
}
909+
}
910+
911+
return new Intl.DateTimeFormat(language, {
920912
year: "numeric",
921-
});
913+
month: "numeric",
914+
day: "numeric",
915+
}).format(value);
922916
}
923917

924-
_getTimeString(datetime) {
925-
return new Date(datetime).toLocaleTimeString(this.lang, {
926-
hour: "2-digit",
927-
minute: "2-digit",
928-
hour12: false,
929-
});
930-
}
918+
_formatNumber(value, language) {
919+
if (!language) {
920+
if (this.hass?.locale?.number_format === "language") {
921+
language = this.hass.locale.language;
922+
} else {
923+
language = undefined;
924+
}
925+
}
931926

932-
_getFixedFloat(number) {
933-
return parseFloat(number).toFixed(5);
927+
return new Intl.NumberFormat(language, {
928+
maximumFractionDigits: 5,
929+
minimumFractionDigits: 5,
930+
}).format(value);
934931
}
935932

936-
_getCategoryHour(hours) {
937-
const padHours = this._getPadStartNumber(hours);
933+
_formatHour(index) {
934+
const padHours = this._getPadStartNumber(index);
938935
return `${padHours}:00`;
939936
}
940937

0 commit comments

Comments
 (0)