Implemented icon component

package.json

@@ -43,6 +43,7 @@
     "sass-loader": "^6.0.3",
     "node-sass": "^4.5.2",
     "url-loader": "^0.5.8",
+    "file-loader": "^0.11.1",
 
     "eslint": "^3.17.1",
     "eslint-config-standard": "^7.0.1",

src/components/Icon.vue

+<template>
+  <path class="fjs-icon" :d="path"></path>
+</template>
+
+<script>
+  export default {
+    name: 'icon',
+    props: {
+      shape: {
+        type: String,
+        required: true
+      },
+      size: {
+        type: Number,
+        required: true
+      },
+      cx: {
+        type: Number,
+        required: true
+      },
+      cy: {
+        type: Number,
+        required: true
+      }
+    },
+    data () {
+      return {
+        shapes: {
+          'rectangle': `M ${this.cx} ${this.cy} m ${-0.5 * this.size} ${-0.5 * this.size} h ${this.size} v ${this.size} h ${-this.size} Z`,
+          'diamond': `M ${this.cx} ${this.cy} m 0 ${-0.5 * this.size} l ${0.5 * this.size} ${0.5 * this.size} l ${-0.5 * this.size} ${0.5 * this.size} l ${-0.5 * this.size} ${-0.5 * this.size} Z`,
+          'triangle': `M ${this.cx} ${this.cy} m 0 ${-0.5 * this.size} l ${0.5 * this.size} ${this.size} h ${-this.size} Z`
+        }
+      }
+    },
+    computed: {
+      path () {
+        return this.shapes[this.shape]
+      }
+    }
+  }
+</script>
+
+<style lang="sass" scoped>
+</style>

src/components/charts/CorrelationAnalysis.vue

@@ -66,14 +66,15 @@
                 :transform="`rotate(90 ${padded.width + 10} ${padded.height / 2})`">
             {{ shownAnalysisResults.y_label }}
           </text>
-          <circle class="fjs-scatterplot-point"
-                  :cx="scales.x(point.x)"
-                  :cy="scales.y(point.y)"
-                  r="4"
-                  :data-idx="idx"
-                  v-for="(point, idx) in shownPoints.all"
-                  v-svgtooltip="point.tooltip">
-          </circle>
+          <icon class="fjs-scatterplot-point"
+                shape="diamond"
+                :cx="scales.x(point.x)"
+                :cy="scales.y(point.y)"
+                :size="10"
+                v-for="point in shownPoints.all"
+                :key="point.id"
+                v-svgtooltip="point.tooltip">
+          </icon>
           <line class="fjs-lin-reg-line"
                 :x1="tweened.regLine.x1"
                 :x2="tweened.regLine.x2"
@@ -105,11 +106,12 @@
 
 <script>
   import DataBox from '../DataBox.vue'
+  import Icon from '../Icon.vue'
   import store from '../../store/store'
   import types from '../../store/mutation-types'
-  import requestHandling from '../mixins/request-handling'
+  import requestHandling from '../methods/request-handling'
   import * as d3 from 'd3'
-  import svgtooltip from '../mixins/v-svgtooltip'
+  import svgtooltip from '../directives/v-svgtooltip'
   import { TweenLite } from 'gsap'
   import $ from 'jquery'
   export default {
@@ -309,6 +311,7 @@
               })
               if (this.selectedPoints.length > 0 && this.selectedPoints.length < 3) {
                 this.error = 'Selection must be zero (everything is selected) or greater than two.'
+                return
               } else {
                 this.runAnalysisWrapper({init: false, args: this.args})
               }
@@ -397,7 +400,7 @@
           while (i--) {
             const ii = i
             let xAttr = oldHistogramAttr.xAttr[i] ? oldHistogramAttr.xAttr[i]
-: { x: this.padded.width / 2, y: this.padded.height, width: 0, height: 0 }
+              : { x: this.padded.width / 2, y: this.padded.height, width: 0, height: 0 }
             const xAttrTarget = newHistogramAttr.xAttr[i] ? newHistogramAttr.xAttr[i] : { width: 0 }
             xAttrTarget.onUpdate = () => { this.tweened.histogramAttr.xAttr[ii] = xAttr }
             TweenLite.to(xAttr, 0.5, xAttrTarget)
@@ -406,7 +409,7 @@
           while (j--) {
             const jj = j
             const yAttr = oldHistogramAttr.yAttr[j] ? oldHistogramAttr.yAttr[j]
-: { x: 0, y: this.padded.height / 2, width: 0, height: 0 }
+              : { x: 0, y: this.padded.height / 2, width: 0, height: 0 }
             const yAttrTarget = newHistogramAttr.yAttr[j] ? newHistogramAttr.yAttr[j] : { height: 0 }
             yAttrTarget.onUpdate = () => { this.tweened.histogramAttr.yAttr[jj] = yAttr }
             TweenLite.to(yAttr, 0.5, yAttrTarget)
@@ -435,7 +438,8 @@
       window.removeEventListener('resize', this.onResize)
     },
     components: {
-      DataBox
+      DataBox,
+      Icon
     },
     mixins: [
       requestHandling,
@@ -529,9 +533,11 @@
         border: 1px #ccc solid
         border-collapse: collapse
         padding: 5px
+      .fjs-scatterplot-point
+        fill: #000
+        shape-rendering: crispEdges
       .fjs-scatterplot-point:hover
         fill: #f00
-        opacity: 0.4
       .fjs-brush
         stroke-width: 0
 </style>

test/charts/test-chart.html

@@ -61,5 +61,4 @@
     }
   ])
   fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder1'})
-  fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder2'})
 </script>