things are a mess

src/MetricHandler.js

@@ -12,19 +12,10 @@ export class MetricHandler {
 
     this.WIGGLEROOM_PERCENTAGE = 0.05
     this.TIME_MARGIN_FACTOR = 1.00 / 3
-
-    this.initializeMetrics([])
-  }
-
-  initializeMetrics (initialMetricNames) {
-    this.store.commit('metrics/resetAll')
-    for (let i = 0; i < initialMetricNames.length; ++i) {
-      const curMetricName = initialMetricNames[i]
-      window.MetricQWebView.addMetric(curMetricName)
-    }
   }
 
   doRequest (maxDataPoints) {
+    if (maxDataPoints === 0) return
     const timeMargin = (this.stopTime.getUnix() - this.startTime.getUnix()) * this.TIME_MARGIN_FACTOR
     const metrics = []
     const errorProneMetrics = []

src/MetricQWebView.js

@@ -47,8 +47,13 @@ class MetricQWebView {
     registerCallbacks(myCanvas)
   }
 
-  reinitialize (metricsArr, startTime, stopTime) {
-    this.handler.initializeMetrics(metricsArr)
+  async reinitialize (metrics, startTime, stopTime) {
+    this.store.commit('metrics/resetAll')
+
+    for (const metric of metrics) {
+      await this.addMetric(metric)
+    }
+
     this.handler.startTime.updateTime(startTime)
     this.handler.stopTime.updateTime(stopTime)
   }
@@ -197,7 +202,7 @@ function determineTimeRangeOfJsUrl (request) {
   return [timeStart, timeEnd]
 }
 
-export function importMetricUrl () {
+export async function importMetricUrl () {
   const fragment = parseLocationHref()[1]
 
   if (fragment.length === 0) return false
@@ -216,7 +221,9 @@ export function importMetricUrl () {
       return false
     }
     const timeRange = determineTimeRangeOfJsUrl(request)
-    window.MetricQWebView.reinitialize(request.cntr, timeRange[0], timeRange[1])
+    await window.MetricQWebView.reinitialize(request.cntr, timeRange[0], timeRange[1])
+    window.MetricQWebView.store.dispatch('metrics/updateDrawStateGlobally', false)
+    window.MetricQWebView.store.dispatch('metrics/setDistinctColors')
     return true
   } else if (fragment.startsWith('.')) {
     const splitted = fragment.split('*')

src/app.js

@@ -83,11 +83,8 @@ export const mainApp = new Vue({
   },
   methods: {
     colorPaletteClicked () {
-      const palette = distinctColors({ count: this.metricsList.length, lightMin: 25, lightMax: 75 }).values()
-      this.metricsList.forEach((metric) => {
-        const color = palette.next().value.css()
-        this.$store.dispatch('metrics/updateColor', { metricKey: metric.key, color: color })
-      })
+      this.$store.dispatch('metrics/setDistinctColors')
+      window.MetricQWebView.graticule.draw(false)
     },
     exportButtonClicked () {
       this.togglePopup('export')
@@ -103,6 +100,7 @@ export const mainApp = new Vue({
     },
     toggleMinMaxButton (evt) {
       this.$store.dispatch('metrics/updateDrawStateGlobally', evt.target.checked)
+      window.MetricQWebView.graticule.draw(false)
     },
     ...mapMutations([
       'togglePopup'

src/configuration.js

@@ -23,10 +23,10 @@ export async function getMetricQBackendConfig () {
       type: 'GET',
       dataType: 'json'
     })
-    config.backend = json.backend
-    config.user = json.user
-    config.password = json.password
-    config.legacyCharts = json.legacyCharts
+    config.backend = json.backend ?? config.backend
+    config.user = json.user ?? config.user
+    config.password = json.password ?? config.password
+    config.legacyCharts = json.legacyCharts ?? config.legacyCharts
   } catch (exc) {
     console.log('Could not load backend config.')
     console.log(exc)

src/data-handling.js

@@ -1,5 +1,3 @@
-import { crc32 } from '../lib/pseudo-crc32.js'
-import { hslToRgb } from '../lib/color-conversion.js'
 import moment from 'moment'
 import store from './store/'
 
@@ -209,7 +207,7 @@ export class DataCache {
     return units
   }
 
-  initializeCacheWithColor (metricName, newColor) {
+  initializeCache (metricName) {
     const newCache = this.assureMetricExists(metricName)
     Object.keys(newCache.series).forEach((aggregate) => { this.newSeries(metricName, aggregate) })
     if (!newCache.band) {
@@ -218,18 +216,13 @@ export class DataCache {
     const toUpdate = [newCache.band]
     Object.keys(newCache.series).forEach((aggregate) => { toUpdate.push(newCache.series[aggregate]) })
 
-    toUpdate.forEach((val) => {
-      val.styleOptions.color = newColor
-    })
-
     return newCache
   }
 }
 
 class MetricCache {
   constructor (paramMetricQReference, paramMetricName) {
     this.name = paramMetricName
-    this.color = determineColorForMetric(paramMetricName)
     this.series = {
       min: undefined,
       max: undefined,
@@ -340,29 +333,11 @@ class MetricCache {
   }
 
   defaultBandStyling () {
-    const options = matchStylingOptions('band')
-    if (options.color === 'default') {
-      options.color = this.color
-    }
-    return options
+    return matchStylingOptions('band')
   }
 
   defaultSeriesStyling (aggregateName) {
-    const options = matchStylingOptions(aggregateName)
-    if (options.color === 'default') {
-      options.color = this.color
-    }
-    return options
-  }
-
-  updateColor (color) {
-    this.color = color
-    this.band.styleOptions.color = color
-    for (const key in this.series) {
-      if (this.series[key]) {
-        this.series[key].styleOptions.color = color
-      }
-    }
+    return matchStylingOptions(aggregateName)
   }
 }
 
@@ -577,7 +552,6 @@ class Point {
   constructor (paramTime, paramValue) {
     this.time = paramTime
     this.value = paramValue
-    this.count = undefined
   }
 
   clone () {
@@ -589,7 +563,6 @@ const stylingOptions = {
   avg: {
     title: 'AVG Series',
     skip: false,
-    color: 'default',
     connect: 'next',
     width: 8,
     lineWidth: 2,
@@ -599,7 +572,6 @@ const stylingOptions = {
   min: {
     title: 'Min Series',
     skip: true,
-    color: 'default',
     connect: 'next',
     width: 2,
     lineWidth: 2,
@@ -609,7 +581,6 @@ const stylingOptions = {
   max: {
     title: 'Max Series',
     skip: true,
-    color: 'default',
     connect: 'next',
     width: 2,
     lineWidth: 2,
@@ -619,7 +590,6 @@ const stylingOptions = {
   raw: {
     title: 'Raw Series',
     skip: false,
-    color: 'default',
     connect: 'none',
     width: 8,
     dots: true
@@ -628,7 +598,6 @@ const stylingOptions = {
     title: 'All Bands',
     skip: false,
     connect: 'next',
-    color: 'default',
     alpha: 0.3
   }
 }
@@ -639,8 +608,3 @@ function matchStylingOptions (styleType) {
   }
   return JSON.parse(JSON.stringify(stylingOptions[styleType]))
 }
-
-function determineColorForMetric (metricBaseName) {
-  const rgb = hslToRgb((crc32(metricBaseName) >> 24 & 255) / 255.00, 1, 0.46)
-  return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'
-}

src/graticule.js

@@ -725,10 +725,6 @@ export class Graticule {
       }
 
       // second parse Options to be applied to ctx immediatly
-      if (styleOptions.color !== undefined) {
-        ctx.fillStyle = styleOptions.color
-        ctx.strokeStyle = styleOptions.color
-      }
       if (styleOptions.alpha !== undefined) {
         ctx.globalAlpha = parseFloat(styleOptions.alpha)
       }
@@ -747,6 +743,9 @@ export class Graticule {
         const curBand = this.data.metrics[i].band
         if (curBand) {
           const styleOptions = this.parseStyleOptions(curBand.styleOptions, ctx)
+          const color = store.getters['metrics/getColor'](this.data.metrics[i].name)
+          ctx.fillStyle = color
+          ctx.strokeStyle = color
           if (styleOptions.skip || curBand.points.length === 0) {
             this.resetCtx(ctx)
             continue
@@ -826,11 +825,14 @@ export class Graticule {
         const curSeries = this.data.metrics[i].series[curAggregate]
         if (curSeries) {
           const styleOptions = this.parseStyleOptions(curSeries.styleOptions, ctx)
+          const color = store.getters['metrics/getColor'](this.data.metrics[i].name)
+          ctx.fillStyle = color
+          ctx.strokeStyle = color
           if (styleOptions.skip || curSeries.points.length === 0) {
             this.resetCtx(ctx)
             continue
           }
-          const offsiteCanvas = this.generateOffsiteDot(styleOptions)
+          const offsiteCanvas = this.generateOffsiteDot(styleOptions, color)
 
           for (let j = 0, x, y, previousX, previousY; j < curSeries.points.length; ++j) {
             x = graticuleDimensions.x + Math.round((curSeries.points[j].time - timeRange[0]) / timePerPixel)
@@ -951,8 +953,7 @@ export class Graticule {
      *   which then we can use to paste it to wherever we need that kind
      *   of symbol as a marker
      */
-  generateOffsiteDot (styleOptions) {
-    const BODY = document.getElementsByTagName('body')[0]
+  generateOffsiteDot (styleOptions, color) {
     const canvas = document.createElement('canvas')
     const ctxDimensions = [styleOptions.pointWidth,
       styleOptions.pointWidth]
@@ -967,8 +968,8 @@ export class Graticule {
     const canvasCtx = canvas.getContext('2d')
     if (styleOptions.drawDots) {
       canvasCtx.lineWidth = 1
-      canvasCtx.fillStyle = styleOptions.color
-      canvasCtx.strokeStyle = styleOptions.color
+      canvasCtx.fillStyle = color
+      canvasCtx.strokeStyle = color
       styleOptions.drawDots.func(canvasCtx, ctxDimensions[0], ctxDimensions[1])
     }
     return {

src/main.js

@@ -15,7 +15,7 @@ async function startup () {
   let imported = false
 
   try {
-    imported = importMetricUrl()
+    imported = await importMetricUrl()
   } catch (exc) {
     Vue.toasted.error('Ungültige URL: Metriken konnten nicht hinzugefügt werden.', store.state.toastConfiguration)
     console.log('Could not import metrics.')

src/metric.js

@@ -1,6 +1,5 @@
 import { hslToRgb } from '../lib/color-conversion.js'
 import { crc32 } from '../lib/pseudo-crc32.js'
-import store from './store/'
 
 // adapted from https://plot.ly/python/marker-style/
 // not working:

src/store/metrics.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import store from '@/store/index'
 import { MetricHelper } from '@/metric'
 import * as Error from '@/errors'
+import distinctColors from 'distinct-colors'
 
 export default {
   namespaced: true,
@@ -26,6 +27,9 @@ export default {
     },
     get: (state) => (metricKey) => {
       return state.metrics[metricKey]
+    },
+    getColor: (state) => (metric) => {
+      return state.metrics[metric].color
     }
   },
   mutations: {
@@ -197,17 +201,8 @@ export default {
       }
       commit('privateSet', { metricKey, metric: { unit: unit } })
     },
-    updateColor ({ commit, state }, { metricKey, color }) {
+    updateColor ({ commit }, { metricKey, color }) {
       commit('privateSet', { metricKey, metric: { color } })
-      const name = state.metrics[metricKey].name
-      const renderer = window.MetricQWebView
-      if (renderer && renderer.graticule && renderer.graticule.data) {
-        const metricCache = renderer.graticule.data.getMetricCache(name)
-        if (metricCache) {
-          metricCache.updateColor(color)
-          renderer.graticule.draw(false)
-        }
-      }
     },
     redraw () {
       window.MetricQWebView.graticule.draw(false)
@@ -244,9 +239,16 @@ export default {
         }
         commit('privateSet', { metricKey, metric: newDrawStates })
       }
-      window.MetricQWebView.graticule.draw(false)
       commit('setGlobalMinMax', newState, { root: true })
     },
+    setDistinctColors ({ state, dispatch }) {
+      const metrics = Object.keys(state.metrics)
+      const palette = distinctColors({ count: metrics.length, lightMin: 25, lightMax: 75 }).values()
+      metrics.forEach((metric) => {
+        const color = palette.next().value.css()
+        dispatch('updateColor', { metricKey: metric, color: color })
+      })
+    },
     updateDrawState ({ dispatch, commit }, { metricKey, drawState: { drawMin, drawAvg, drawMax } }) {
       commit('privateSet', { metricKey, metric: { drawMin, drawAvg, drawMax } })
       dispatch('checkGlobalDrawState')

src/ui/metric-popup.vue

@@ -219,7 +219,7 @@ export default {
             this.$store.dispatch('metrics/updateMarker', { metricKey, marker: paramMyMetric.marker })
           }
           // don't do a complete repaint
-          // renderMetrics();
+          window.MetricQWebView.graticule.draw(false)
         }
       }
     })(this.metric, this.newMetric)