improved legend

public/css/style.css

@@ -61,7 +61,7 @@ body {
     display: inline-flex;
     background-color: #FFFFFF;
     border-radius: 4px;
-    box-shadow: 0px 1px 2px 1px #D0D0D0;
+    box-shadow: 1px 1px 2px 1px #D0D0D0;
 }
 
 .legend_item_bottom {
@@ -77,7 +77,7 @@ body {
 }
 
 .legend_item:hover {
-    box-shadow: 2px 2px 3px 3px #B0B0B0;
+    box-shadow: 2px 2px 2px 1px #B0B0B0;
 }
 
 .legend_item div {

public/index.html

@@ -71,31 +71,29 @@ <h2>MetricQ Webview erfordert Javascript, aber es ist deaktiviert oder wird nich
       <ul id="legend_list" :class="'legend_list legend_list_' + configuration.legendDisplay">
         <metric-legend
           v-for="metric in metricsList"
-          v-bind:metric="metric"
-          v-bind:key="metric.name"
-          v-bind:position="configuration.legendDisplay"
+          :metric="metric"
+          :key="metric.name"
+          :position="configuration.legendDisplay"
         ></metric-legend>
         <hide-metrics-button v-bind:position="configuration.legendDisplay"></hide-metrics-button>
         <new-metric-legend
-          v-bind:position="configuration.legendDisplay"></new-metric-legend>
+          :position="configuration.legendDisplay"></new-metric-legend>
         <clear-metrics-button
-          v-bind:position="configuration.legendDisplay"></clear-metrics-button>
-        <li :class="'legend_end legend_item legend_item_' + configuration.legendDisplay + ' legend_list_' + configuration.legendDisplay + '_bottom'">
-          <query-times
-            v-bind:querytime="performance.querytime"
-            v-bind:totaltime="performance.totaltime"></query-times>
-        </li>
-        <li :class="'legend_end legend_item legend_item_' + configuration.legendDisplay + ' legend_list_' + configuration.legendDisplay + '_last'">
-          <query-points
-            v-bind:agg="performance.agg"
-            v-bind:raw="performance.raw"></query-points>
-        </li>
+          :position="configuration.legendDisplay"></clear-metrics-button>
+        <query-times
+            :performance="performance"
+            :configuration="configuration"
+        ></query-times>
+        <query-points
+            :performance="performance"
+            :configuration="configuration"
+        ></query-points>
       </ul>
       <div id="wrapper_popup_legend">
         <metric-popup
           v-for="metric in metricsList"
-          v-bind:metric="metric"
-          v-bind:key="metric.popupKey"
+          :metric="metric"
+          :key="metric.popupKey"
           v-if="metric.popup"
         ></metric-popup>
         <div id="wrapper_popup_newlegend">
@@ -106,7 +104,7 @@ <h2>MetricQ Webview erfordert Javascript, aber es ist deaktiviert oder wird nich
       </div>
       <div id="wrapper_popup_configuration">
         <configuration-popup
-          v-bind:key="configuration.key"
+          :key="configuration.key"
           v-if="popups.configuration"
         ></configuration-popup>
       </div>

src/components/query-points.vue

@@ -1,24 +1,33 @@
 <template>
-  <li>
+  <li
+    v-if="hasMetrics"
+    :class="'legend_end legend_item legend_item_' + configuration.legendDisplay + ' legend_list_' + configuration.legendDisplay + '_last'"
+  >
     <span>
-      <span>Genutzte Punkte:</span>
-      <span v-if="agg !== null"> Aggregate: {{ agg | withDecimalPlaces(0) }}</span>
-      <span> Raw: {{ raw | withDecimalPlaces(0) }}</span>
+      <span>Datenpunkte:</span>
+      <span> Raw: {{ performance.raw | withDecimalPlaces(0) }}
+        <span v-if="performance.agg !== null">( Aggregate: {{ performance.agg | withDecimalPlaces(0) }} )</span>
+      </span>
     </span>
   </li>
 </template>
 
 <script>
 export default {
   props: {
-    agg: {
-      type: Number,
-      default: null
+    performance: {
+      type: Object,
+      required: true
     },
-    raw: {
-      type: Number,
+    configuration: {
+      type: Object,
       required: true
     }
+  },
+  computed: {
+    hasMetrics () {
+      return this.$store.getters['metrics/length']() > 0
+    }
   }
 }
 </script>

src/components/query-times.vue

@@ -1,23 +1,31 @@
 <template>
-  <li>
+  <li
+    v-if="hasMetrics"
+    :class="'legend_end legend_item legend_item_' + configuration.legendDisplay + ' legend_list_' + configuration.legendDisplay + '_bottom'"
+  >
     <span>
-      Anfragezeit: {{ querytime | withDecimalPlaces(0) }} ms;
-      Gesamtzeit: {{ totaltime | withDecimalPlaces(0) }} ms
+      Anfragezeit: {{ performance.querytime | withDecimalPlaces(0) }} ms;
+      Gesamtzeit: {{ performance.totaltime | withDecimalPlaces(0) }} ms
     </span>
   </li>
 </template>
 
 <script>
 export default {
   props: {
-    querytime: {
-      type: Number,
+    performance: {
+      type: Object,
       required: true
     },
-    totaltime: {
-      type: Number,
+    configuration: {
+      type: Object,
       required: true
     }
+  },
+  computed: {
+    hasMetrics () {
+      return this.$store.getters['metrics/length']() > 0
+    }
   }
 }
 </script>

src/store/metrics.js

@@ -34,6 +34,9 @@ export default {
         return 0
       })
     },
+    length: (state) => () => {
+      return Object.keys(state.metrics).length
+    },
     get: (state) => (metricKey) => {
       return state.metrics[metricKey]
     },

src/ui/clear-metrics-button.vue

@@ -1,5 +1,6 @@
 <template>
   <li
+    v-if="hasMetrics"
     :class="'clickable legend_end legend_item legend_item_' + position"
     @click="clearAllButtonClicked"
   >
@@ -18,6 +19,11 @@ export default {
       required: true
     }
   },
+  computed: {
+    hasMetrics () {
+      return this.$store.getters['metrics/length']() > 0
+    }
+  },
   methods: {
     clearAllButtonClicked: function () {
       this.$store.getters['metrics/getAllKeys']().forEach((metricBase) => window.MetricQWebView.deleteMetric(metricBase))

src/ui/hide-metrics-button.vue

@@ -1,5 +1,6 @@
 <template>
   <li
+    v-if="hasMetrics"
     :class="'legend_double_item legend_item_' + position"
   >
     <span
@@ -34,6 +35,11 @@ export default {
       required: true
     }
   },
+  computed: {
+    hasMetrics () {
+      return this.$store.getters['metrics/length']() > 0
+    }
+  },
   methods: {
     onHideClicked () {
       for (const metric of this.$store.getters['metrics/getAll']()) {