small ui change

public/index.html

@@ -27,7 +27,7 @@ <h2>MetricQ Webview erfordert Javascript, aber es ist deaktiviert oder wird nich
     <nav class="navbar navbar-light bg-light">
       <a class="navbar-brand" href="?">
         <img src="img/metricq-logo.png" width="35" height="35" alt="MetricQ-Logo" style="border-radius: .25rem;"/>
-        MetricQ-WebView
+        MetricQ WebView
       </a>
       <label class="btn btn-outline-primary btn-navbar" id="button_configuration"
              v-on:click="configurationButtonClicked"
@@ -47,10 +47,6 @@ <h2>MetricQ Webview erfordert Javascript, aber es ist deaktiviert oder wird nich
         <input type="checkbox" id='checkbox_min_max' v-bind:checked="globalMinMax" v-on:change="toggleMinMaxButton">
         <span>Werteumfang zeichnen</span>
       </label>
-      <label class="btn btn-outline-primary btn-navbar" id="button_palette" v-on:click="colorPaletteClicked"
-             v-b-tooltip.hover title="Metriken eindeutig färben">
-        <b-icon-palette></b-icon-palette>
-      </label>
       <label>
         <time-button id="date_range" class="btn btn-outline-primary btn-navbar"
                      v-if="isWebviewLoaded"
@@ -75,7 +71,8 @@ <h2>MetricQ Webview erfordert Javascript, aber es ist deaktiviert oder wird nich
           :key="metric.name"
           :position="configuration.legendDisplay"
         ></metric-legend>
-        <hide-metrics-button v-bind:position="configuration.legendDisplay"></hide-metrics-button>
+        <hide-metrics-button :position="configuration.legendDisplay"></hide-metrics-button>
+        <recolor-metrics-button :position="configuration.legendDisplay"></recolor-metrics-button>
         <new-metric-legend
           :position="configuration.legendDisplay"></new-metric-legend>
         <clear-metrics-button

src/app.js

@@ -5,6 +5,7 @@ import ExportPopup from './ui/export-popup.vue'
 import LinkPopup from './ui/link-popup.vue'
 import MetricLegend from './ui/metric-legend.vue'
 import HideMetricsButton from './ui/hide-metrics-button.vue'
+import RecolorMetricsButton from './ui/recolor-metrics-button.vue'
 import NewMetricLegend from './ui/new-metric-legend.vue'
 import ClearMetricsButton from './ui/clear-metrics-button.vue'
 import MetricPopup from './ui/metric-popup.vue'
@@ -41,6 +42,7 @@ export const mainApp = new Vue({
     LinkPopup,
     MetricLegend,
     HideMetricsButton,
+    RecolorMetricsButton,
     NewMetricLegend,
     ClearMetricsButton,
     MetricPopup,

src/components/query-points.vue

@@ -5,8 +5,8 @@
   >
     <span>
       <span>Datenpunkte:</span>
-      <span> Raw: {{ performance.raw | withDecimalPlaces(0) }}
-        <span v-if="performance.agg !== null">( Aggregate: {{ performance.agg | withDecimalPlaces(0) }} )</span>
+      <span> {{ performance.raw | withDecimalPlaces(0) }} Punkte
+        <span v-if="performance.agg !== null">in {{ performance.agg | withDecimalPlaces(0) }} Aggregate</span>
       </span>
     </span>
   </li>

src/ui/recolor-metrics-button.vue

@@ -0,0 +1,44 @@
+<template>
+  <li
+    v-if="hasMetrics"
+    :class="'clickable legend_end legend_item legend_item_' + position"
+    @click="onRecolorClicked"
+  >
+    <span>
+      <b-icon-palette />
+      <span class="m-2">
+        Metriken eindeutig einfärben
+      </span>
+    </span>
+  </li>
+</template>
+
+<script>
+import distinctColors from 'distinct-colors'
+
+export default {
+  props: {
+    position: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    hasMetrics () {
+      return this.$store.getters['metrics/length']() > 0
+    }
+  },
+  methods: {
+    onRecolorClicked () {
+      const palette = distinctColors({ count: this.$store.getters['metrics/length'](), lightMin: 25, lightMax: 75 }).values()
+      for (const metric of this.$store.getters['metrics/getAll']()) {
+        const color = palette.next().value.css()
+        this.$store.dispatch('metrics/updateColor', { metricKey: metric.key, color: color })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>