Log values

src/plugins/charts/BarGraphPlot.vue

@@ -123,7 +123,10 @@ export default {
                     automargin: true,
                     fixedrange: true
                 },
-                yaxis: primaryYaxis,
+                yaxis: {
+                    ...primaryYaxis,
+                    type: 'log'
+                },
                 margin: {
                     l: 5,
                     r: 5,

src/plugins/charts/BarGraphView.vue

@@ -62,6 +62,8 @@ export default {
         }
     },
     mounted() {
+        this.xValues = [];
+        this.yValues = [];
         this.refreshData = this.refreshData.bind(this);
         this.setTimeContext();
 
@@ -156,7 +158,7 @@ export default {
 
             const yAxisMetadata = metadata.valuesForHints(['range'])[0];
             //Exclude 'name' and 'time' based metadata specifically, from the x-Axis values by using range hints only
-            const xAxisMetadata = metadata.valuesForHints(['range']);
+            const xAxisMetadata = metadata.valuesForHints(['domain'])[0];
 
             return {
                 xAxisMetadata,
@@ -236,29 +238,29 @@ export default {
             let yValues = [];
 
             //populate X and Y values for plotly
-            axisMetadata.xAxisMetadata.forEach((metadata) => {
-                xValues.push(metadata.name);
-                if (data[metadata.key]) {
-                    const formattedValue = this.format(key, metadata.key, data);
+            xValues.push(this.format(key, axisMetadata.xAxisMetadata.key, data));
+            if (data[axisMetadata.yAxisMetadata.key]) {
+                const formattedValue = this.format(key, axisMetadata.yAxisMetadata.key, data);
                 yValues.push(formattedValue);
             } else {
                 yValues.push(null);
             }
-            });
+
+            this.xValues = this.xValues.concat(xValues);
+            this.yValues = this.yValues.concat(yValues);
 
             const trace = {
                 key,
                 name: telemetryObject.name,
-                x: xValues,
-                y: yValues,
+                x: this.xValues,
+                y: this.yValues,
                 text: yValues.map(String),
                 xAxisMetadata: axisMetadata.xAxisMetadata,
                 yAxisMetadata: axisMetadata.yAxisMetadata,
-                type: 'bar',
+                type: 'scatter',
                 marker: {
                     color: this.domainObject.configuration.barStyles.series[key].color
-                },
-                hoverinfo: 'skip'
+                }
             };
 
             this.addTrace(trace, key);

src/plugins/plot/MctTicks.vue

@@ -44,7 +44,7 @@
         <div v-for="tick in ticks"
              :key="tick.value"
              class="gl-plot-tick gl-plot-y-tick-label"
-             :style="{ top: (100 * (max - tick.value) / interval) + '%' }"
+             :style="{ top: tick.top }"
              :title="tick.fullText || tick.text"
              style="margin-top: -0.50em; direction: ltr;"
         >
@@ -76,7 +76,7 @@
 
 <script>
 import eventHelpers from "./lib/eventHelpers";
-import { ticks, getFormattedTicks } from "./tickUtils";
+import {d3Ticks, ticks, getFormattedTicks, d3TicksLog} from "./tickUtils";
 import configStore from "./configuration/ConfigStore";
 
 export default {
@@ -172,7 +172,7 @@ export default {
                 }, this);
             }
 
-            return ticks(range.min, range.max, number);
+            return d3Ticks(range.min, range.max, number);
         },
 
         updateTicksForceRegeneration() {
@@ -210,6 +210,27 @@ export default {
 
                 newTicks = getFormattedTicks(newTicks, format);
 
+                if (this.axisType !== 'xAxis') {
+                    let min = this.min;
+                    let max = this.max;
+                    newTicks = newTicks.map((tick) => {
+                        let value;
+                        if (tick.value !== 0) {
+                            value = (Math.log10(max) - Math.log10(tick.value)) / (Math.log10(max) - Math.log10(min)) * (100);
+                        }
+
+                        if (value < 0) {
+                            value = -value;
+                        }
+
+                        tick.top = value + '%';
+
+                        return tick;
+                    });
+                    console.log(this.min, this.max, newTicks.map(tick => `${tick.value} + ${tick.top}`));
+
+                }
+
                 this.ticks = newTicks;
                 this.shouldCheckWidth = true;
             }

src/plugins/plot/configuration/PlotSeries.js

@@ -233,7 +233,9 @@ export default class PlotSeries extends Model {
             return this.limitEvaluator.evaluate(datum, valueMetadata);
         }.bind(this);
         const format = this.formats[newKey];
-        this.getYVal = format.parse.bind(format);
+        this.getYVal = (point) => {
+            return Math.log(format.parse(point));
+        };
     }
 
     formatX(point) {

src/plugins/plot/tickUtils.js

@@ -1,3 +1,6 @@
+import * as d3Scale from 'd3-scale';
+import * as d3Axis from 'd3-axis';
+
 const e10 = Math.sqrt(50);
 const e5 = Math.sqrt(10);
 const e2 = Math.sqrt(2);
@@ -40,6 +43,33 @@ function getPrecision(step) {
     return precision;
 }
 
+export function d3Ticks(start, stop, count) {
+    let scale = d3Scale.scaleLinear();
+    scale.domain([start, stop]);
+
+    const axis = d3Axis.axisLeft(scale);
+
+    return axis.scale().ticks(count);
+}
+
+export function d3TicksLog(start, stop, count) {
+    if (start < 0) {
+        start = 0.1;
+    }
+
+    let scale = d3Scale.scaleLog().domain([start, stop]);
+
+    const axis = d3Axis.axisBottom(scale);
+
+    const generatedTicks = axis.scale().ticks(count);
+    if (generatedTicks.length < 1) {
+        // if the difference between start, stop is small, the ticks might not be generated for log
+        return d3Ticks(start, stop, count);
+    }
+
+    return generatedTicks;
+}
+
 /**
  * Linear tick generation from d3-array.
  */