patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use correct locale for number formatting

Browse Source 
Also moved numberFormat method so separate file
This commit is contained in:
Thomas Basler 2022-10-31 15:08:56 +01:00
parent 68423179cc
commit 20e856ecfc
5 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/src/components/InverterChannelInfo.vue
View File

@ -28,6 +28,7 @@
<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import type { InverterStatistics } from '@/types/LiveDataStatus';
import { formatNumber } from '@/utils';
export default defineComponent({
props: {
@ -35,11 +36,7 @@ export default defineComponent({
channelNumber: { type: Number, required: true },
},
methods: {
formatNumber(num: number, digits: number) {
return new Intl.NumberFormat(
undefined, { minimumFractionDigits: digits, maximumFractionDigits: digits }
).format(num);
},
formatNumber,
},
});
</script>

15
webapp/src/components/LimitSettingsCurrent.vue
View File

@ -3,7 +3,7 @@
<tbody>
<tr>
<td>Current Limit</td>
<td>{{ formatNumber(limitData.limit) }}%</td>
<td>{{ formatNumber(limitData.limit, 2) }}%</td>
</tr>
</tbody>
</table>
@ -11,6 +11,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { formatNumber } from '@/utils';
declare interface LimitData {
limit: number,
@ -20,14 +21,8 @@ export default defineComponent({
props: {
limitData: { type: Object as () => LimitData, required: true },
},
computed: {
formatNumber() {
return (num: number) => {
return new Intl.NumberFormat(
undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }
).format(num)
};
},
},
methods: {
formatNumber,
}
});
</script>

3
webapp/src/utils/index.ts
View File

@ -1,9 +1,12 @@
import { timestampToString } from './time';
import { formatNumber } from './number';
export {
timestampToString,
formatNumber,
};
export default {
timestampToString,
formatNumber,
}

5
webapp/src/utils/number.ts Normal file
View File

@ -0,0 +1,5 @@
export const formatNumber = (num: number, digits: number): string => {
return new Intl.NumberFormat(
undefined, { minimumFractionDigits: digits, maximumFractionDigits: digits }
).format(num);
}

30
webapp/src/views/HomeView.vue
View File

@ -15,8 +15,10 @@
</div>
</div>
<div class="tab-content" id="v-pills-tabContent" :class="{'col-sm-9 col-md-10': inverterData.length > 1,
'col-sm-12 col-md-12': inverterData.length == 1 }">
<div class="tab-content" id="v-pills-tabContent" :class="{
'col-sm-9 col-md-10': inverterData.length > 1,
'col-sm-12 col-md-12': inverterData.length == 1
}">
<div v-for="inverter in inverterData" :key="inverter.serial" class="tab-pane fade show"
:id="'v-pills-' + inverter.serial" role="tabpanel"
:aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
@ -37,9 +39,8 @@
</div>
<div style="padding-right: 2em;">
Current Limit: <template v-if="inverter.limit_absolute > -1"> {{
inverter.limit_absolute.toFixed(0) }}W | </template>{{
inverter.limit_relative.toFixed(0)
}}%
formatNumber(inverter.limit_absolute, 0)
}}W | </template>{{ formatNumber(inverter.limit_relative, 0) }}%
</div>
<div style="padding-right: 2em;">
Data Age: {{ inverter.data_age }} seconds
@ -178,15 +179,16 @@
Limit:</label>
<div class="col-sm-4">
<div class="input-group">
<input type="number" class="form-control" id="inputCurrentLimit"
aria-describedby="currentLimitType" v-model="currentLimitRelative" disabled />
<input type="text" class="form-control" id="inputCurrentLimit"
aria-describedby="currentLimitType" v-model="currentLimitRelative"
disabled />
<span class="input-group-text" id="currentLimitType">%</span>
</div>
</div>
<div class="col-sm-4" v-if="currentLimitList.max_power > 0">
<div class="input-group">
<input type="number" class="form-control" id="inputCurrentLimitAbsolute"
<input type="text" class="form-control" id="inputCurrentLimitAbsolute"
aria-describedby="currentLimitTypeAbsolute" v-model="currentLimitAbsolute"
disabled />
<span class="input-group-text" id="currentLimitTypeAbsolute">W</span>
@ -333,6 +335,7 @@ import type { EventlogItems } from '@/types/EventlogStatus';
import type { Inverters } from '@/types/LiveDataStatus';
import type { LimitStatus } from '@/types/LimitStatus';
import type { LimitConfig } from '@/types/LimitConfig';
import { formatNumber } from '@/utils';
export default defineComponent({
components: {
@ -424,17 +427,18 @@ export default defineComponent({
}
},
computed: {
currentLimitAbsolute(): number {
currentLimitAbsolute(): string {
if (this.currentLimitList.max_power > 0) {
return Number((this.currentLimitList.limit_relative * this.currentLimitList.max_power / 100).toFixed(1));
return formatNumber(this.currentLimitList.limit_relative * this.currentLimitList.max_power / 100, 2);
}
return 0;
return "0";
},
currentLimitRelative(): number {
return Number((this.currentLimitList.limit_relative).toFixed(1));
currentLimitRelative(): string {
return formatNumber(this.currentLimitList.limit_relative, 2);
}
},
methods: {
formatNumber,
getInitialData() {
this.dataLoading = true;
fetch("/api/livedata/status")