Merge pull request #26 from geoblink/feature/CORE-7996-fix-scatter-pl…

…ot-for-sales-analysis

fix scatter plot and quadrant & add prop for axes

.vuepress/styles/_geo-chart-demos.scss

@@ -1,3 +1,5 @@
+$DEFAULT_LINE_HEIGHT: 12px;
+
 .u-geo-chart--hidden-axis .geo-chart-axis {
   display: none;
 }
@@ -15,6 +17,25 @@
   }
 }
 
+.geo-chart-axis--with-quadrant {
+  .domain,
+  line {
+    display: none;
+  }
+  &.geo-chart-axis--left text {
+    transform: translate(-$DEFAULT_LINE_HEIGHT, 0)
+  }
+  &.geo-chart-axis--top text {
+    transform: translate(0, -$DEFAULT_LINE_HEIGHT)
+  }
+  &.geo-chart-axis--bottom text {
+    transform: translate(0, $DEFAULT_LINE_HEIGHT)
+  }
+  &.geo-chart-axis--right text {
+    transform: translate($DEFAULT_LINE_HEIGHT, 0)
+  }
+}
+
 // This can't be applied directly in the demo
 .geo-chart-bar {
   fill: $color-blue-light;

CHANGELOG.md

@@ -1,11 +1,21 @@
 # Changelog
 
-## 29.4.1
+## 29.4.2
 
 Fix:
 
-- `GeoCalendar` Row containing day names is now properly aligned
+- label position in `GeoChartQuadrant`
+- handle click event from external component in `GeoChartScatterPlot`
+
+New:
+
+- `forceTickCount` in `ticks` property of `GeoChartAxis`
 
+## 29.4.1
+
+New:
+
+- `GeoCalendar` Row containing day names is now properly aligned
 
 ## 29.4.0
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblink/design-system",
-  "version": "29.4.1",
+  "version": "29.4.2",
   "description": "Geoblink Design System for Vue.js",
   "author": "Geoblink <[email protected]>",
   "main": "dist/system.js",

src/elements/GeoChart/GeoChart.02.chart-axes.examples.md

@@ -62,6 +62,12 @@ config object. The value for that key must be an object with the following
 properties, all of them optional:
 
 - `count` - to customize the amount of ticks displayed. Must be an integer number.
+
+::: tip NOTE
+By default, d3 will only show a number of ticks which is a multiple of 2, 5 or 10. In order to force another number of ticks, use `forceTickCount` associated with `count`.
+:::
+
+- `forceTickCount` - boolean to force the number of ticks displayed. It will create a specific number of ticks between the axis domain range.
 - `format` - function taking as first parameter the value of the axis in the
 domain and as second parameter its index. Should return a string with the text
 to be displayed as value for given tick.
@@ -407,3 +413,80 @@ export default {
 }
 </script>
 ```
+
+#### Forced tick number
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block element-demo__block--chart-container">
+      <geo-chart
+        v-if="chartConfig"
+        :config="chartConfig"
+      />
+    </div>
+    <div class="element-demo__block__config">
+      <geo-primary-button @click="randomizeData()">
+        Randomize data
+      </geo-primary-button>
+    </div>
+  </div>
+</template>
+
+<script>
+const CONSTANTS = require('@/elements/GeoChart/constants')
+
+export default {
+  name: 'GeoChartAxisDemo',
+  data () {
+    return {
+      tickNumber: 5,
+      domainRangeStart: 0,
+      domainRangeEnd: 100,
+      valueForOrigin: 0
+    }
+  },
+  computed: {
+    chartConfig () {
+      return {
+        chart: {
+          margin: {
+            top: 30,
+            right: 30,
+            bottom: 30,
+            left: 200
+          }
+        },
+        axisGroups: [{
+          id: 'demo-linear-axis',
+          keyForValues: 'y',
+          position: {
+            type: CONSTANTS.AXIS.POSITIONS.left
+          },
+          scale: {
+            type: CONSTANTS.SCALES.SCALE_TYPES.linear,
+            valueForOrigin: this.valueForOrigin,
+            domain: {
+              start: this.domainRangeStart,
+              end: this.domainRangeEnd
+            }
+          },
+          ticks: {
+            count: this.tickNumber,
+            forceTickCount: true
+          }
+        }]
+      }
+    }
+  },
+  methods: {
+    randomizeData () {
+      this.domainRangeStart = _.random(-200, 200)
+      this.domainRangeEnd = _.random(-200, 200)
+      this.valueForOrigin = _.random(this.domainRangeStart, this.domainRangeEnd)
+      this.tickNumber = _.random(2, 10)
+    }
+  }
+}
+</script>
+```

src/elements/GeoChart/GeoChart.12.quadrant.examples.md

@@ -240,9 +240,6 @@ export default {
       return {
         id: 'demo-categorical-axis',
         keyForValues: 'category',
-        ticks: {
-          count: 5
-        },
         position: {
           type: CONSTANTS.AXIS.POSITIONS.bottom
         },

src/elements/GeoChart/GeoChart.13.3.scatter-plot-chart-quadrants.examples.md

@@ -11,19 +11,26 @@
         <geo-chart
           v-if="chartConfig && isGraphVisible"
           :config="chartConfig"
-          class2="u-geo-chart--hidden-axis"
         />
       </div>
       <geo-bordered-box
         v-if="isGraphVisible"
-        style="height: 100px"
+        style="height: fit-content"
       >
         <geo-bordered-box-header>
           Click on a dot to get info
         </geo-bordered-box-header>
-        <geo-list-item>
+        <div style="height: 100px">
           {{ popupText }}
-        </geo-list-item>
+        </div>
+        <geo-bordered-box-footer>
+          <geo-secondary-button
+            :disabled="!hasDotClicked"
+            @click="unclickDot"
+          >
+            Unclick dot
+          </geo-secondary-button>
+        </geo-bordered-box-footer>
       </geo-bordered-box>
     </div>
     <geo-primary-button @click="randomizeData()">
@@ -190,6 +197,12 @@ export default {
         this.hasDotClicked = true
         this.popupText = `x=${d.x} y=${d.y}`
       }
+    },
+
+    unclickDot () {
+      const dot = document.querySelector('.is-clicked')
+      const clickEvent = new MouseEvent('click')
+      dot.dispatchEvent(clickEvent)
     }
   }
 }

src/elements/GeoChart/GeoChartAxis/GeoChartAxis.d.ts

@@ -68,6 +68,7 @@ declare namespace GeoChart {
     cssClasses?: (originalClasses: string[]) => string[]
     ticks: {
       count?: number
+      forceTickCount?: boolean
       cssClasses?: (originalClasses: string[], value: Domain, index: number) => string[]
       format?: (d: object, i: number) => {
         text: string

src/elements/GeoChart/GeoChartAxis/GeoChartAxis.js

@@ -184,9 +184,17 @@ export function getAxis (singleAxisOptions) {
   const d3Axis = getD3Axis()
 
   const tickCount = _.get(singleAxisOptions, 'ticks.count')
+  const isForcedCustomizedTick = _.get(singleAxisOptions, 'ticks.forceTickCount')
   const isTickCountForced = _.isFinite(tickCount)
+
   if (isTickCountForced) {
-    d3Axis.ticks(tickCount)
+    if (!isForcedCustomizedTick || tickCount === 1) {
+      d3Axis.ticks(tickCount)
+    } else {
+      const axisDomain = scale.domain()
+      const tickToDisplay = createCustomizedTickArray(_.first(axisDomain), _.last(axisDomain), tickCount)
+      d3Axis.tickValues(tickToDisplay)
+    }
   }
 
   const tickFormat = _.get(singleAxisOptions, 'ticks.format')
@@ -402,3 +410,15 @@ function positionLabel (label, singleAxisOptions, globalAxesConfig) {
       break
   }
 }
+
+export function createCustomizedTickArray (firstOfDomain, lastOfDomain, tickCount) {
+  const domainRange = Math.abs(firstOfDomain - lastOfDomain)
+  const ticksStep = domainRange / (tickCount - 1)
+  const tickToDisplay = _.map(_.times(tickCount), (id) => {
+    return _.round(firstOfDomain < lastOfDomain
+      ? firstOfDomain + (ticksStep * id)
+      : firstOfDomain - (ticksStep * id)
+    , 3)
+  })
+  return tickToDisplay
+}

src/elements/GeoChart/GeoChartConfigs/GeoChartConfig.js

@@ -231,6 +231,9 @@ export const axisConfigJsonSchema = {
           type: ['integer', 'null'],
           minimum: 0
         },
+        forceTickCount: {
+          type: 'boolean'
+        },
         // Function taking as first parameter an array of CSS classes that would
         // be set by default. Should return the array of CSS classes to be
         // finally set. Some additional CSS classes required by D3 might be added

src/elements/GeoChart/GeoChartQuadrant/GeoChartQuadrant.js

@@ -326,19 +326,19 @@ function renderQuadrantLabels (group, d3TipInstance, singleQuadrantOptions, allQ
     switch (d.id) {
       case QUADRANT_LABEL.topLeft:
         translation.x = axesMargin.left
-        translation.y = axesMargin.bottom - (DEFAULT_LINE_HEIGHT / 2)
+        translation.y = axesMargin.top - (DEFAULT_LINE_HEIGHT / 2)
         break
       case QUADRANT_LABEL.topRight:
-        translation.x = axesSize.width - textWidth
-        translation.y = axesMargin.bottom - (DEFAULT_LINE_HEIGHT / 2)
+        translation.x = axesSize.width - axesMargin.right - textWidth
+        translation.y = axesMargin.top - (DEFAULT_LINE_HEIGHT / 2)
         break
       case QUADRANT_LABEL.bottomLeft:
         translation.x = axesMargin.left
-        translation.y = axesSize.height - DEFAULT_LINE_HEIGHT
+        translation.y = axesSize.height - axesMargin.bottom + DEFAULT_LINE_HEIGHT
         break
       case QUADRANT_LABEL.bottomRight:
-        translation.x = axesSize.width - textWidth
-        translation.y = axesSize.height - DEFAULT_LINE_HEIGHT
+        translation.x = axesSize.width - axesMargin.right - textWidth
+        translation.y = axesSize.height - axesMargin.bottom + DEFAULT_LINE_HEIGHT
         break
     }
     return `translate(${translation.x}, ${translation.y})`

src/elements/GeoChart/GeoChartScatterPlot/GeoChartScatterPlot.js

@@ -267,6 +267,7 @@ function renderSingleGroup (group, d3TipInstance, singleGroupOptions, globalOpti
       .style('stroke', '#9B9B9B')
       .style('stroke-width', '8')
       .style('stroke-opacity', '0.4')
+      .classed('is-clicked', true)
   }
 
   function unclickedStyle (element, d) {
@@ -277,5 +278,6 @@ function renderSingleGroup (group, d3TipInstance, singleGroupOptions, globalOpti
       .style('stroke', 'white')
       .style('stroke-width', '2')
       .style('stroke-opacity', '1')
+      .classed('is-clicked', false)
   }
 }

src/styles/elements/GeoChart/_geo-chart.scss

@@ -1,6 +1,4 @@
 
-$DEFAULT_LINE_HEIGHT: 12px;
-
 .geo-chart {
   &, svg {
     height: 100%;
@@ -42,25 +40,6 @@ $DEFAULT_LINE_HEIGHT: 12px;
   color: $color-blue;
 }
 
-.geo-chart-axis--with-quadrant {
-  .domain,
-  line {
-    display: none;
-  }
-  &.geo-chart-axis--left text {
-    transform: translate(-$DEFAULT_LINE_HEIGHT, 0)
-  }
-  &.geo-chart-axis--top text {
-    transform: translate(0, -$DEFAULT_LINE_HEIGHT)
-  }
-  &.geo-chart-axis--bottom text {
-    transform: translate(0, $DEFAULT_LINE_HEIGHT)
-  }
-  &.geo-chart-axis--right text {
-    transform: translate($DEFAULT_LINE_HEIGHT, 0)
-  }
-}
-
 .geo-chart-tooltip {
   // These styles are directly taken from vue-directive-tooltip so Chart
   // tooltips look like regular tooltips.

test/unit/specs/elements/GeoChart/GeoChartAxis.spec.js

@@ -121,6 +121,33 @@ describe('GeoChartAxis', function () {
     })
   })
 
+  describe('#createCustomizedTickArray', function () {
+    it('With start domain bigger then end domain', function () {
+      const ticksArray = [100, 75, 50, 25, 0]
+      expect(GeoChartAxis.createCustomizedTickArray(100, 0, 5)).toMatchObject(ticksArray)
+    })
+    it('With negative domain', function () {
+      const ticksArray = [-20, -15, -10]
+      expect(GeoChartAxis.createCustomizedTickArray(-20, -10, 3)).toMatchObject(ticksArray)
+    })
+    it('With negative domain and start bigger then end', function () {
+      const ticksArray = [-100, -150, -200]
+      expect(GeoChartAxis.createCustomizedTickArray(-100, -200, 3)).toMatchObject(ticksArray)
+    })
+    it('With null domain', function () {
+      const ticksArray = [0, 0, 0]
+      expect(GeoChartAxis.createCustomizedTickArray(0, 0, 3)).toMatchObject(ticksArray)
+    })
+    it('With small domain', function () {
+      const ticksArray = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+      expect(GeoChartAxis.createCustomizedTickArray(0, 1, 11)).toMatchObject(ticksArray)
+    })
+    it('With no ticks', function () {
+      const ticksArray = []
+      expect(GeoChartAxis.createCustomizedTickArray(100, 200, 0)).toMatchObject(ticksArray)
+    })
+  })
+
   describe('#render', function () {
     const tickCount = 5
     const linearAxisConfig = {