From c26b10a719c5a75a5eba0d90ab92f871b2f7c153 Mon Sep 17 00:00:00 2001
From: Ralf Bauer <Ralf@Bauer-NSU.de>
Date: Sun, 21 May 2023 15:49:11 +0200
Subject: [PATCH] fixed formatting of the DatabaseChart

---
 webapp/src/components/DatabaseChart.vue |  1 +
 webapp/src/views/HomeView.vue           | 82 ++++++++++++++-----------
 2 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/webapp/src/components/DatabaseChart.vue b/webapp/src/components/DatabaseChart.vue
index 67ade66c..ffb2e20c 100644
--- a/webapp/src/components/DatabaseChart.vue
+++ b/webapp/src/components/DatabaseChart.vue
@@ -63,6 +63,7 @@ export default defineComponent({
 
                 var options = {
                     height: 600,
+                    chartArea:{ top:25, width:'85%', height:'80%' },
                     legend: {
                         position: 'none'
                     },
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 19ac0958..127478a7 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -18,15 +18,14 @@
             </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
-            }">
+                    '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">
                     <div class="card">
-                        <div class="card-header d-flex justify-content-between align-items-center"
-                            :class="{
+                        <div class="card-header d-flex justify-content-between align-items-center" :class="{
                                 'text-bg-tertiary': !inverter.poll_enabled,
                                 'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
                                 'text-bg-warning': inverter.poll_enabled && inverter.reachable && !inverter.producing,
@@ -42,11 +41,11 @@
                                     </div>
                                     <div style="padding-right: 2em;">
                                         {{ $t('home.CurrentLimit') }}<template v-if="inverter.limit_absolute > -1"> {{
-                                                $n(inverter.limit_absolute, 'decimalNoDigits')
+                                            $n(inverter.limit_absolute, 'decimalNoDigits')
                                         }} W | </template>{{ $n(inverter.limit_relative / 100, 'percent') }}
                                     </div>
                                     <div style="padding-right: 2em;">
-                                        {{ $t('home.DataAge') }} {{ $t('home.Seconds', {'val': $n(inverter.data_age) }) }}
+                                        {{ $t('home.DataAge') }} {{ $t('home.Seconds', { 'val': $n(inverter.data_age) }) }}
                                         <template v-if="inverter.data_age > 300">
                                             / {{ calculateAbsoluteTime(inverter.data_age) }}
                                         </template>
@@ -56,7 +55,8 @@
                             <div class="btn-toolbar p-2" role="toolbar">
                                 <div class="btn-group me-2" role="group">
                                     <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowLimitSettings(inverter.serial)" v-tooltip :title="$t('home.ShowSetInverterLimit')">
+                                        @click="onShowLimitSettings(inverter.serial)" v-tooltip
+                                        :title="$t('home.ShowSetInverterLimit')">
                                         <BIconSpeedometer style="font-size:24px;" />
 
                                     </button>
@@ -64,7 +64,8 @@
 
                                 <div class="btn-group me-2" role="group">
                                     <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowPowerSettings(inverter.serial)" v-tooltip :title="$t('home.TurnOnOff')">
+                                        @click="onShowPowerSettings(inverter.serial)" v-tooltip
+                                        :title="$t('home.TurnOnOff')">
                                         <BIconPower style="font-size:24px;" />
 
                                     </button>
@@ -72,7 +73,8 @@
 
                                 <div class="btn-group me-2" role="group">
                                     <button type="button" class="btn btn-sm btn-info"
-                                        @click="onShowDevInfo(inverter.serial)" v-tooltip :title="$t('home.ShowInverterInfo')">
+                                        @click="onShowDevInfo(inverter.serial)" v-tooltip
+                                        :title="$t('home.ShowInverterInfo')">
                                         <BIconCpu style="font-size:24px;" />
 
                                     </button>
@@ -94,22 +96,23 @@
                         </div>
                         <div class="card-body">
                             <div class="row flex-row-reverse flex-wrap-reverse g-3">
-                                <template v-for="chanType in [{obj: inverter.INV, name: 'INV'}, {obj: inverter.AC, name: 'AC'}, {obj: inverter.DC, name: 'DC'}].reverse()">
-                                    <template v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x=>+x)" :key="channel">
+                                <template
+                                    v-for="chanType in [{ obj: inverter.INV, name: 'INV' }, { obj: inverter.AC, name: 'AC' }, { obj: inverter.DC, name: 'DC' }].reverse()">
+                                    <template v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x => +x)"
+                                        :key="channel">
                                         <template v-if="(chanType.name != 'DC') ||
                                             (chanType.name == 'DC' && getSumIrridiation(inverter) == 0) ||
                                             (chanType.name == 'DC' && getSumIrridiation(inverter) > 0 && chanType.obj[channel].Irradiation?.v || 0 > 0)
                                             ">
                                             <div class="col">
                                                 <InverterChannelInfo :channelData="chanType.obj[channel]"
-                                                    :channelType="chanType.name"
-                                                    :channelNumber="channel" />
+                                                    :channelType="chanType.name" :channelNumber="channel" />
                                             </div>
                                         </template>
                                     </template>
                                 </template>
+                                <DatabaseChart />
                             </div>
-                            <DatabaseChart/>
                         </div>
                     </div>
                 </div>
@@ -135,8 +138,8 @@
                 </div>
 
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @click="onHideEventlog"
-                        data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
+                    <button type="button" class="btn btn-secondary" @click="onHideEventlog" data-bs-dismiss="modal">{{
+                        $t('home.Close') }}</button>
                 </div>
 
             </div>
@@ -161,8 +164,8 @@
                 </div>
 
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @click="onHideDevInfo"
-                        data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
+                    <button type="button" class="btn btn-secondary" @click="onHideDevInfo" data-bs-dismiss="modal">{{
+                        $t('home.Close') }}</button>
                 </div>
             </div>
         </div>
@@ -190,12 +193,12 @@
                         <template v-if="!limitSettingLoading">
 
                             <div class="row mb-3">
-                                <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }} </label>
+                                <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }}
+                                </label>
                                 <div class="col-sm-4">
                                     <div class="input-group">
                                         <input type="text" class="form-control" id="inputCurrentLimit"
-                                            aria-describedby="currentLimitType" v-model="currentLimitRelative"
-                                            disabled />
+                                            aria-describedby="currentLimitType" v-model="currentLimitRelative" disabled />
                                         <span class="input-group-text" id="currentLimitType">%</span>
                                     </div>
                                 </div>
@@ -227,7 +230,8 @@
                             </div>
 
                             <div class="row mb-3">
-                                <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit') }}</label>
+                                <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit')
+                                }}</label>
                                 <div class="col-sm-9">
                                     <div class="input-group">
                                         <input type="number" name="inputTargetLimit" class="form-control"
@@ -237,11 +241,14 @@
                                             data-bs-toggle="dropdown" aria-expanded="false">{{ targetLimitTypeText
                                             }}</button>
                                         <ul class="dropdown-menu dropdown-menu-end">
-                                            <li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{ $t('home.Relative') }}</a></li>
-                                            <li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{ $t('home.Absolute') }}</a></li>
+                                            <li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{
+                                                $t('home.Relative') }}</a></li>
+                                            <li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{
+                                                $t('home.Absolute') }}</a></li>
                                         </ul>
                                     </div>
-                                    <div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert" v-html="$t('home.LimitHint')"></div>
+                                    <div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert"
+                                        v-html="$t('home.LimitHint')"></div>
                                 </div>
                             </div>
                         </template>
@@ -249,11 +256,14 @@
                     </div>
 
                     <div class="modal-footer">
-                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(true)">{{ $t('home.SetPersistent') }}</button>
+                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(true)">{{
+                            $t('home.SetPersistent') }}</button>
 
-                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(false)">{{ $t('home.SetNonPersistent') }}</button>
+                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(false)">{{
+                            $t('home.SetNonPersistent') }}</button>
 
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close')
+                        }}</button>
                     </div>
                 </form>
             </div>
@@ -280,14 +290,15 @@
 
                     <template v-if="!powerSettingLoading">
                         <div class="row mb-3 align-items-center">
-                            <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus') }}</label>
+                            <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus')
+                            }}</label>
                             <div class="col">
                                 <span class="badge" :class="{
-                                    'text-bg-danger': successCommandPower == 'Failure',
-                                    'text-bg-warning': successCommandPower == 'Pending',
-                                    'text-bg-success': successCommandPower == 'Ok',
-                                    'text-bg-secondary': successCommandPower == 'Unknown',
-                                }">
+                                        'text-bg-danger': successCommandPower == 'Failure',
+                                        'text-bg-warning': successCommandPower == 'Pending',
+                                        'text-bg-success': successCommandPower == 'Ok',
+                                        'text-bg-secondary': successCommandPower == 'Unknown',
+                                    }">
                                     {{ $t('home.' + successCommandPower) }}
                                 </span>
                             </div>
@@ -314,7 +325,6 @@
             </div>
         </div>
     </div>
-
 </template>
 
 <script lang="ts">