Merge pull request #29 from geoblink/feature/CORE-8000-GeoScatterPlot…

…-dot-coordinates

Feature/core 8000 geo scatter plot dot coordinates

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 29.5.1
+
+New:
+
+- `GeoChartScatterPlot` returns coordinates on click event
+
 ## 29.4.3
 
 Changed:

package.json

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

src/elements/GeoChart/GeoChartScatterPlot/GeoChartScatterPlot.js

@@ -245,7 +245,7 @@ function renderSingleGroup (group, d3TipInstance, singleGroupOptions, globalOpti
 
     if (d.isClicked) {
       unclickedStyle(d3.select(this), d)
-      return singleGroupOptions.onDotClick(null, null)
+      return singleGroupOptions.onDotClick(null, null, null)
     }
 
     const previouslyClickedDot = getPreviouslyClickedDot()
@@ -255,8 +255,10 @@ function renderSingleGroup (group, d3TipInstance, singleGroupOptions, globalOpti
       unclickedStyle(dotToUnclick, previouslyClickedDot)
     }
 
-    clickedStyle(d3.select(this), d)
-    return singleGroupOptions.onDotClick(d, d.index)
+    const clickedDot = d3.select(this)
+    const dotCoordinates = [parseFloat(clickedDot.attr('cx')), parseFloat(clickedDot.attr('cy'))]
+    clickedStyle(clickedDot, d)
+    return singleGroupOptions.onDotClick(d, d.index, dotCoordinates)
   }
 
   function clickedStyle (element, d) {

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

@@ -48,6 +48,8 @@ const axisDimensions = {
   }
 }
 
+const mockHandleClick = jest.fn()
+
 describe('GeoChartScatterPlot', function () {
   const stubGetBBox = stubGetBBoxFactory()
   const stubGetScreenCTM = stubGetScreenCTMFactory()
@@ -96,6 +98,7 @@ describe('GeoChartScatterPlot', function () {
           idHorizontalAxis: numericalAxisConfig.id,
           mainDimension: GeoChart.constants.DIMENSIONS.DIMENSIONS_2D.horizontal,
           data: scatterPlotData,
+          onDotClick: mockHandleClick,
           getRadius: function () { return 4 },
           getFillColor: function (d, i) { return i < (mockDomain1 / 2) ? 'orange' : 'green' },
           tooltip: {
@@ -164,5 +167,20 @@ describe('GeoChartScatterPlot', function () {
 
       wrapper.destroy()
     })
+
+    it('Should return dot coordinates (array) on click', () => {
+      const wrapper = mount(GeoChart, {
+        propsData: {
+          config: scatterPlotConfig
+        }
+      })
+
+      flushD3Transitions()
+
+      wrapper.find('.geo-chart .geo-chart-scatter-plot-group--0 .geo-chart-scatter-plot__dot').trigger('click')
+      expect(mockHandleClick.mock.calls.length).toBe(1)
+      expect(Array.isArray(mockHandleClick.mock.calls[0][2])).toBe(true)
+      wrapper.destroy()
+    })
   })
 })