vrehm · December 10, 2019 11:22 · Dec 10, 2019 · Dec 10, 2019 · Dec 10, 2019 · Dec 10, 2019
diff --git a/vue-sandbox.html b/vue-sandbox.html
@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+{% load static %}
+{% load render_bundle from webpack_loader %}
+
+{% block content %}
+    <div id="app" class="w-full flex flex-col items-center">
+        <p class="text-gray-500 text-2xl my-6">Vue sandbox</p>
+        <p class="text-gray-500 text-2xl my-6">{{ request.get_full_path }}</p>
+        <the-app id="vue-portal"></the-app>
+    </div>
+{% endblock content %}
+
+{% block extrascripts %}
+    {% render_bundle 'vue' %}
+{% endblock extrascripts %}
diff --git a/TheApp.vue b/TheApp.vue
@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="container mx-auto flex flex-wrap justify-center items-center my-12"
+  >
+    <link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
+
+    <div class="flex justify-center w-full text-gray-500">
+      <div class="w-1/4 mx-6 flex flex-col items-start">
+        <span class="my-2">X Axis</span>
+        <v-select :options="availableKeys" v-model="xSelected" class="w-full" />
+      </div>
+
+      <div class="w-1/4 mx-6 flex flex-col items-start">
+        <span class="my-2">Y Axis</span>
+        <v-select :options="availableKeys" v-model="ySelected" class="w-full" />
+      </div>
+    </div>
+
+    <scatter-plot-chart
+      :x-axis="xSelected"
+      :x-axis-text="xAxisText"
+      :y-axis="ySelected"
+      :y-axis-text="yAxisText"
+      :description="chartDescription"
+      :title="chartTitle"
+      :subtitle="chartSubTitle"
+      :x-unit="chartUnitX"
+      :y-unit="chartUnitY"
+      class="w-2/3"
+    />
+  </div>
+</template>
+
+<script>
+import ScatterPlotChart from "./components/ScatterPlotChart.vue"
+
+const UNITS = ['s', 'ms', 'mAP', 'fps']
+
+export default {
+  props: {
+    test: {
+      type: String,
+      required: false
+    },
+  },
+  components: {
+    ScatterPlotChart,
+  },
+  data: () => {
+    return {
+      xSelected: 'avg_time_ms',
+      ySelected: 'avg_fps',
+      availableKeys: [],
+      chartTitle: 'Title',
+      chartSubTitle: 'Subtitle',
+    }
+  },
+  computed: {
+    keys() {
+      return this.$store.state.result.keys
+    },
+    selectedKeys() {
+      return { x: this.xSelected, y: this.ySelected }
+    },
+    xAxisText() {
+      return this.xSelected
+        ? this.xSelected.split('_').join(' ')
+        : 'avg time ms'
+    },
+    yAxisText() {
+      return this.ySelected ? this.ySelected.split('_').join(' ') : 'avg fps'
+    },
+    chartDescription() {
+      return this.chartTitle + ' ' + this.chartSubTitle
+    },
+    chartUnitX() {
+      const xSplit = this.xSelected ? this.xSelected.split('_') : ['']
+      const last = xSplit.pop()
+      return UNITS.includes(last) ? last : 's'
+    },
+    chartUnitY() {
+      const ySplit = this.ySelected ? this.ySelected.split('_') : ['']
+      const last = ySplit.pop()
+      return UNITS.includes(last) ? last : 's'
+    }
+  },
+  watch: {
+    xSelected() {
+      this.updateAvailableKeys()
+      this.$store.dispatch(
+        'result/getTwoMeasurementsForOneSolution',
+        this.selectedKeys
+      )
+    },
+    ySelected() {
+      this.updateAvailableKeys()
+      this.$store.dispatch(
+        'result/getTwoMeasurementsForOneSolution',
+        this.selectedKeys
+      )
+    }
+  },
+  created() {
+    this.$store.dispatch('result/getPastResults')
+  },
+  mounted() {
+    this.updateAvailableKeys()
+    this.$store.dispatch(
+      'result/getTwoMeasurementsForOneSolution',
+      this.selectedKeys
+    )
+  },
+  methods: {
+    updateAvailableKeys() {
+      const initialKeys = this.keys
+      const availableKeys = []
+      initialKeys.forEach((element) => {
+        if (element !== this.xSelected && element !== this.ySelected) {
+          availableKeys.push(element)
+        }
+      })
+      this.availableKeys = availableKeys
+    }
+  }
+}
+</script>
+
+<style>
+/*! purgecss start ignore */
+.vs__search::placeholder,
+.vs__dropdown-toggle,
+.vs__dropdown-menu {
+  @apply text-sm border-none bg-gray-800 text-gray-300;
+}
+
+.vs__clear,
+.vs__open-indicator,
+.vs__selected,
+.vs__dropdown-option,
+.vs__no-options {
+  @apply text-gray-300 fill-current;
+}
+/*! purgecss end ignore */
+</style>
diff --git a/main.js b/main.js
@@ -0,0 +1,28 @@
+import store from './store/index'
+import Vue from 'vue'
+import TheApp from './TheApp.vue'
+
+import Highcharts from 'highcharts'
+import HighchartsVue from 'highcharts-vue'
+import accessibility from 'highcharts/modules/accessibility'
+import exporting from 'highcharts/modules/export-data'
+// import darkUnica from 'highcharts/themes/dark-unica'
+import vSelect from 'vue-select'
+
+Vue.component('v-select', vSelect)
+
+Vue.use(HighchartsVue)
+exporting(Highcharts)
+accessibility(Highcharts)
+    // darkUnica(Highcharts)
+
+window.Vue = Vue
+Vue.config.productionTip = false
+
+/* eslint-disable */
+new Vue({
+    delimiters: ['[[', ']]'],
+    el: '#vue-portal',
+    store,
+    render: h => h(TheApp)
+})
diff --git a/ScatterPlotChart.vue b/ScatterPlotChart.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="container mx-auto flex flex-wrap justify-center my-6">
+    <highcharts :options="chartOptions" class="w-full" />
+  </div>
+</template>
+
+<script>
+import Highcharts from 'highcharts'
+
+export default {
+  props: {
+    description: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    subtitle: {
+      type: String,
+      required: true
+    },
+    xAxis: {
+      type: String,
+      required: true
+    },
+    yAxis: {
+      type: String,
+      required: true
+    },
+    xAxisText: {
+      type: String,
+      required: true
+    },
+    yAxisText: {
+      type: String,
+      required: true
+    },
+    xUnit: {
+      type: String,
+      required: true
+    },
+    yUnit: {
+      type: String,
+      required: true
+    }
+  },
+  mounted() {
+    window.dispatchEvent(new Event('resize'))
+  },
+  computed: {
+    chartOptions() {
+      return {
+        chart: {
+          type: 'scatter',
+          zoomType: 'xy',
+          backgroundColor: 'transparent'
+        },
+        accessibility: {
+          description: this.description
+        },
+        title: {
+          text: this.title,
+          align: 'center'
+        },
+        subtitle: {
+          text: this.subtitle
+        },
+        xAxis: {
+          title: {
+            enabled: true,
+            text: this.xAxisText
+          },
+          startOnTick: true,
+          endOnTick: true,
+          showLastLabel: true
+        },
+        yAxis: {
+          title: {
+            text: this.yAxisText
+          }
+        },
+        legend: {
+          layout: 'vertical',
+          align: 'right',
+          verticalAlign: 'top',
+          x: 0,
+          y: 10,
+          floating: true,
+          backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
+          borderWidth: 1
+        },
+        plotOptions: {
+          scatter: {
+            marker: {
+              radius: 5,
+              states: {
+                hover: {
+                  enabled: true,
+                  lineColor: 'rgb(100,100,100)'
+                }
+              }
+            },
+            states: {
+              hover: {
+                marker: {
+                  enabled: false
+                }
+              }
+            },
+            tooltip: {
+              valueDecimals: 2,
+              headerFormat: '<b>{series.name}</b><br>',
+              pointFormat: `{point.runId}<br>{point.x:.2f} ${this.xUnit}<br>{point.y} ${this.yUnit}`
+            }
+          },
+          series: {
+            allowPointSelect: true,
+            cursor: 'pointer',
+            point: {
+              events: {
+                click: (event) => {
+                  this.clickDataPoint(event)
+                }
+              }
+            }
+          }
+        },
+        series: this.$store.state.result.series,
+        exporting: {
+          showTable: true,
+          allowHTML: true,
+          useMultiLevelHeaders: false,
+          csv: {
+            // Uncomment for custom column header formatter.
+            // This function is called for each column header.
+            columnHeaderFormatter: (item, key) => {
+              const xText = this.xAxisText
+              const yText = this.yAxisText
+
+              if (!item || item instanceof Highcharts.Axis) {
+                return xText
+                // return item.options.title.text
+              }
+
+              // Item is not axis, now we are working with series.
+              // Key is the property on the series we show in this column.
+              if (key === 'y') {
+                return { columnTitle: yText }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    clickDataPoint(event) {
+      const point = event.point
+      alert(`${point.x} - ${point.y}`)
+    }
+  }
+}
+</script>
+
+<style>
+.highcharts-data-table table {
+  @apply text-left w-full border-collapse my-6 outline-none bg-gray-100;
+}
+
+.highcharts-data-table thead {
+  @apply bg-gray-600;
+}
+
+.highcharts-data-table td,
+.highcharts-data-table th,
+.highcharts-data-table caption {
+  @apply py-4 px-6 font-bold uppercase text-sm text-gray-500 border-b border-gray-400;
+}
+
+.highcharts-data-table tr:nth-child(even),
+.highcharts-data-table thead tr {
+  @apply text-gray-500;
+}
+
+.highcharts-data-table tr:hover {
+  @apply bg-gray-800;
+}
+</style>