clicker in separate component to pointer

needs readme, changelog, tests

packages/d3fc-clicker/CHANGELOG.md

@@ -0,0 +1,160 @@
+# Change Log
+
+# TODO
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.2](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@3.0.1...@d3fc/d3fc-pointer@3.0.2) (2020-09-23)
+
+
+### Bug Fixes
+
+* d3v6 pointer changes ([3776d80](https://github.com/d3fc/d3fc/commit/3776d80))
+
+
+
+
+
+## 3.0.1 (2020-07-14)
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+
+
+
+
+# 3.0.0 (2020-04-16)
+
+
+### chore
+
+* consolidate dependencies ([79b7d1f](https://github.com/d3fc/d3fc/commit/79b7d1f))
+
+
+### BREAKING CHANGES
+
+* d3fc no longer has a direct dependency on d3. Add the
+dependency directly to your package instead.
+
+
+
+
+
+# [2.2.0](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.1.0...@d3fc/d3fc-pointer@2.2.0) (2020-03-19)
+
+
+### Features
+
+* add fill to webgl boxplot ([7ea7859](https://github.com/d3fc/d3fc/commit/7ea7859))
+
+
+
+
+
+# 2.1.0 (2020-02-13)
+
+
+### Bug Fixes
+
+* incorrect main path in d3fc-pointer package ([e9d635a](https://github.com/d3fc/d3fc/commit/e9d635a))
+
+
+### Features
+
+* add equals function to d3fc-series webgl implementations ([0fd7686](https://github.com/d3fc/d3fc/commit/0fd7686))
+
+
+
+
+
+## [2.0.11](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.0.10...@d3fc/d3fc-pointer@2.0.11) (2019-11-28)
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+
+
+
+
+## [2.0.10](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.0.9...@d3fc/d3fc-pointer@2.0.10) (2019-09-04)
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+
+
+
+
+<a name="2.0.9"></a>
+## [2.0.9](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.0.8...@d3fc/d3fc-pointer@2.0.9) (2019-08-12)
+
+
+
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+<a name="2.0.8"></a>
+## 2.0.8 (2019-05-28)
+
+
+
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+<a name="2.0.7"></a>
+## [2.0.7](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.0.6...@d3fc/d3fc-pointer@2.0.7) (2019-01-15)
+
+
+
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+<a name="2.0.6"></a>
+## [2.0.6](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.0.5...@d3fc/d3fc-pointer@2.0.6) (2018-08-29)
+
+
+### Bug Fixes
+
+* use single D3 reference for bundleSpecs ([3d0a47e](https://github.com/d3fc/d3fc/commit/3d0a47e))
+
+
+
+
+<a name="2.0.5"></a>
+## [2.0.5](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.0.4...@d3fc/d3fc-pointer@2.0.5) (2018-08-21)
+
+
+
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+<a name="2.0.4"></a>
+## [2.0.4](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.0.3...@d3fc/d3fc-pointer@2.0.4) (2018-08-21)
+
+
+
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+<a name="2.0.3"></a>
+## [2.0.3](https://github.com/d3fc/d3fc-pointer/compare/@d3fc/d3fc-pointer@2.0.2...@d3fc/d3fc-pointer@2.0.3) (2018-08-21)
+
+
+
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+<a name="2.0.2"></a>
+## [2.0.2](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.0.1...@d3fc/d3fc-pointer@2.0.2) (2018-08-20)
+
+
+
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer
+
+<a name="2.0.1"></a>
+## [2.0.1](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-pointer@2.0.0...@d3fc/d3fc-pointer@2.0.1) (2018-08-15)
+
+
+
+
+**Note:** Version bump only for package @d3fc/d3fc-pointer

packages/d3fc-clicker/README.md

@@ -0,0 +1,25 @@
+# d3fc-clicker
+
+## TODO
+
+Very simple component which emits an event to indicate the current mouse or touch position over a selection. Useful for implementing uni-directional data flow in a visualisation and not a lot else.
+
+[Main D3FC package](https://github.com/d3fc/d3fc)
+
+## Installing
+
+```bash
+npm install @d3fc/d3fc-pointer
+```
+
+## API Reference
+
+<a name="pointer" href="#pointer">#</a> fc.**pointer**()
+
+Constructs a new pointer component instance.
+
+<a name="pointer_on" href="#pointer_on">#</a> *pointer*.**on**(*typenames*[, *callback*])
+
+This component dispatches `point` events. The sole argument to the event handler is an array. If the mouse or touch interaction is over the selection then the array will contain a single object representing the co-ordinate (e.g. `{ x: 10, y: 10 }`). If the mouse or touch interaction is not over the selection then the array will be empty.
+
+See [d3-dispatch's `on`](https://github.com/d3/d3-dispatch#dispatch_on) for a full description.

packages/d3fc-clicker/index.js

@@ -0,0 +1 @@
+export { default as clicker } from './src/clicker';

packages/d3fc-clicker/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@d3fc/d3fc-clicker",
+  "version": "3.0.2",
+  "description": "Component which emits the current mouse or touch position over a selection",
+  "main": "build/d3fc-clicker.js",
+  "module": "index",
+  "scripts": {
+    "bundle": "npx rollup -c ../../scripts/rollup.config.js",
+    "start": "npm start  --prefix ../d3fc -- --configPkg=d3fc-clicker"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/d3fc/d3fc.git"
+  },
+  "keywords": [
+    "d3",
+    "d3fc",
+    "clicker"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/d3fc/d3fc/issues"
+  },
+  "homepage": "https://github.com/d3fc/d3fc",
+  "dependencies": {
+    "@d3fc/d3fc-rebind": "^6.0.1"
+  },
+  "peerDependencies": {
+    "d3-dispatch": "*",
+    "d3-selection": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/d3fc-clicker/src/clicker.js

@@ -0,0 +1,22 @@
+import { dispatch } from 'd3-dispatch';
+import { pointer } from 'd3-selection';
+import { rebind } from '@d3fc/d3fc-rebind';
+
+export default () => {
+    const clickEvent = dispatch('click');
+
+    function mouseclick(event) {
+        const point = pointer(event);
+        clickEvent.call('click', this, [{ x: point[0], y: point[1] }]);
+    }
+
+    const instance = (selection) => {
+        selection
+            .on('click.pointer', mouseclick);
+
+    };
+
+    rebind(instance, clickEvent, 'on');
+
+    return instance;
+};

packages/d3fc-clicker/test/bundleSpec.js

@@ -0,0 +1,22 @@
+import jsdom from 'jsdom';
+
+describe('bundle', function() {
+    it('should corectly wire-up all the dependencies via their UMD-exposed globals', function(done) {
+        jsdom.env({
+            html: '<html></html>',
+            virtualConsole: jsdom.createVirtualConsole().sendTo({
+                error: done
+            }),
+            scripts: [
+                require.resolve('d3/dist/d3.js'),
+                require.resolve('../node_modules/@d3fc/d3fc-rebind/build/d3fc-rebind.js'),
+                require.resolve('../build/d3fc-pointer.js')
+            ],
+            done: (_, win) => {
+                const pointer = win.fc.pointer();
+                expect(pointer).not.toBeUndefined();
+                done();
+            }
+        });
+    });
+});

packages/d3fc-clicker/test/pointerSpec.js

@@ -0,0 +1,82 @@
+import { select } from 'd3-selection';
+import pointer from '../src/pointer';
+
+describe('pointer', () => {
+
+    let element;
+    let pointSpy;
+
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="element"></div>';
+        element = document.querySelector('#element');
+
+        pointSpy = jest.fn();
+        const pointerInstance = pointer()
+            .on('point', pointSpy);
+
+        select(element)
+            .call(pointerInstance);
+    });
+
+    describe('mouseenter', () => {
+        beforeEach(() => {
+            element.dispatchEvent(new document.defaultView.MouseEvent('mouseenter'));
+        });
+
+        it('should call the callback', () => {
+            expect(pointSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('should call the callback with an array', () => {
+            expect(pointSpy).toHaveBeenCalledWith([{
+                x: expect.any(Number),
+                y: expect.any(Number)
+            }]);
+        });
+
+        it('should call the callback with the "this" context as the current DOM element', () => {
+            expect(pointSpy.mock.instances[0]).toBe(element);
+        });
+    });
+
+    describe('mousemove', () => {
+        beforeEach(() => {
+            element.dispatchEvent(new document.defaultView.MouseEvent('mousemove'));
+        });
+
+        it('should call the callback', () => {
+            expect(pointSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('should call the callback with an array', () => {
+            expect(pointSpy).toHaveBeenCalledWith([{
+                x: expect.any(Number),
+                y: expect.any(Number)
+            }]);
+        });
+
+        it('should call the callback with the "this" context as the current DOM element', () => {
+            expect(pointSpy.mock.instances[0]).toBe(element);
+        });
+    });
+
+    describe('mouseleave', () => {
+        beforeEach(() => {
+            element.dispatchEvent(new document.defaultView.MouseEvent('mouseleave'));
+        });
+
+        it('should call the callback', () => {
+            expect(pointSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('should call the callback with an empty array', () => {
+            expect(pointSpy).toHaveBeenCalledWith([]);
+        });
+
+        it('should call the callback with the "this" context as the current DOM element', () => {
+            expect(pointSpy.mock.instances[0]).toBe(element);
+        });
+
+    });
+
+});

packages/d3fc/index.js

@@ -13,6 +13,7 @@ export * from '@d3fc/d3fc-annotation';
 export * from '@d3fc/d3fc-axis';
 export * from '@d3fc/d3fc-element';
 export * from '@d3fc/d3fc-pointer';
+export * from '@d3fc/d3fc-clicker';
 export * from '@d3fc/d3fc-group';
 export * from '@d3fc/d3fc-chart';
 export * from '@d3fc/d3fc-brush';

packages/d3fc/package.json

@@ -35,6 +35,7 @@
     "@d3fc/d3fc-financial-feed": "^7.1.0",
     "@d3fc/d3fc-group": "^3.0.1",
     "@d3fc/d3fc-label-layout": "^7.0.3",
+    "@d3fc/d3fc-clicker": "^3.0.2",
     "@d3fc/d3fc-pointer": "^3.0.2",
     "@d3fc/d3fc-random-data": "^4.0.1",
     "@d3fc/d3fc-rebind": "^6.0.1",