0.6.9

Reviewed-on: #2

.gitignore

@@ -2,7 +2,7 @@ node_modules
 dist
 
 # yarn
-.yarn/*
+.yarn
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases

build/webpack.base.conf.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
 
 
 function resolve(dir) {
@@ -8,7 +9,14 @@ function resolve(dir) {
 module.exports = {
   context: resolve('src'),
   entry: './index.ts',
-  plugins: [],
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        { from: '../react/dist/index.js', to: 'react/index.js' },
+        { from: '../react/dist/index.d.ts', to: 'react/index.d.ts' },
+      ],
+    })
+  ],
   module: {
     rules: [
       {
@@ -25,6 +33,10 @@ module.exports = {
   },
   resolve: {
     extensions: ['.ts', '.js'],
+    // this is necessary for resolution of external libs like d3 in dev mode
+    // when core is linked: webpack will take d3 from this node_modules but not from
+    // internal so you get one version of d3
+    modules: [path.resolve(__dirname, '../node_modules'), 'node_modules']
   },
   output: {
     filename: 'index.js',

examples/demo.html

@@ -28,6 +28,7 @@
             lineType: 'dashed',
             pointType: 'circle',
             colorFormatter: (values, idx) => datapoints1[idx][2] === 0 ? 'blue' : 'green',
+            clickCallback: (metricData, pointData) => { console.log('click', metricData, pointData) }
           },
           {
             target: 'test2',
@@ -45,11 +46,13 @@
           axis: {
             x: {
               format: 'numeric',
-              range: [-100, 300]
+              range: [-100, 300],
+              label: 'x'
             },
             y: {
               invert: true,
-              range: [-100, 250]
+              range: [-100, 250],
+              label: 'y'
             },
             y1: {
               isActive: true,
@@ -58,8 +61,8 @@
           },
           zoomEvents: {
             mouse: {
-              pan: { isActive: false, orientation: 'both', keyEvent: 'main' },
+              pan: { isActive: true, orientation: 'both', keyEvent: 'main' },
-              zoom: { isActive: true, keyEvent: 'shift' },
+              zoom: { isActive: false, keyEvent: 'shift' },
             },
             scroll: {
               pan: { isActive: false },
@@ -70,10 +73,6 @@
             orientation: 'both',
             color: 'gray'
           },
-          labelFormat: {
-            yAxis: 'y',
-            xAxis: 'x'
-          },
           eventsCallbacks: {
             zoomOut: () => { pod.render() }
           },

package.json

@@ -1,12 +1,16 @@
 {
   "name": "@chartwerk/scatter-pod",
-  "version": "0.5.1",
+  "version": "0.6.9",
   "description": "Chartwerk scatter pod",
   "main": "dist/index.js",
+  "files": [
+    "/dist"
+  ],
   "scripts": {
-    "build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
+    "build": "rm -rf dist && cd react && yarn build && cd .. && webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
     "dev": "webpack --watch --config build/webpack.dev.conf.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "update-core": "yarn up @chartwerk/core && yarn up @chartwerk/core@latest"
   },
   "repository": {},
   "author": "CorpGlory",
@@ -15,13 +19,17 @@
     "@chartwerk/core": "latest"
   },
   "devDependencies": {
-    "css-loader": "^3.4.2",
+    "copy-webpack-plugin": "^11.0.0",
-    "d3-delaunay": "^6.0.2",
+    "css-loader": "^6.8.1",
-    "style-loader": "^1.1.3",
+    "d3-delaunay": "^6.0.4",
-    "ts-loader": "^6.2.1",
+    "style-loader": "^3.3.3",
-    "typescript": "^3.8.3",
+    "ts-loader": "^9.4.3",
-    "webpack": "^4.42.0",
+    "typescript": "^5.1.3",
-    "webpack-cli": "^3.3.11"
+    "webpack": "^5.87.0",
+    "webpack-cli": "^5.1.4"
   },
-  "packageManager": "yarn@3.2.1"
+  "packageManager": "yarn@3.2.1",
+  "workspaces": [
+    "react/*"
+  ]
 }

react/build/webpack.base.conf.js

@@ -0,0 +1,26 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.tsx',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, '../dist'),
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+  },
+  externals: [
+    '@chartwerk/scatter-pod', 'react'
+  ]
+};

react/build/webpack.dev.conf.js

@@ -0,0 +1,8 @@
+const baseWebpackConfig = require('./webpack.base.conf');
+
+var conf = baseWebpackConfig;
+conf.devtool = 'inline-source-map';
+conf.mode = 'development';
+conf.output.filename = 'index.dev.js';
+
+module.exports = conf;

react/build/webpack.prod.conf.js

@@ -0,0 +1,6 @@
+const baseWebpackConfig = require('./webpack.base.conf');
+
+var conf = baseWebpackConfig;
+conf.mode = 'production';
+
+module.exports = baseWebpackConfig;

react/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "scatter-pod-react",
+  "version": "0.0.1",
+  "description": "React wrapper around scatter-pod",
+  "main": "dist/index.js",
+  "repository": "http://code.corpglory.net/chartwerk/scatter-pod.git",
+  "author": "CorpGlory Inc.",
+  "license": "ISC",
+  "scripts": {
+    "build": "webpack --config build/webpack.prod.conf.js",
+    "dev": "webpack --config build/webpack.dev.conf.js"
+  },
+  "dependencies": {
+    "@chartwerk/scatter-pod": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.3",
+    "webpack": "^5.87.0"
+  }
+}

react/src/index.tsx

@@ -0,0 +1,62 @@
+import { ScatterData, ScatterOptions, ChartwerkScatterPod } from '@chartwerk/scatter-pod';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import _ from 'lodash';
+
+
+export type ChartwerkScatterPodReactProps = {
+  id?: string;
+  series: ScatterData[];
+  options?: ScatterOptions;
+  className?: string;
+}
+
+export function ChartwerkScatterPodReact(props: ChartwerkScatterPodReactProps) {
+
+  const [pod, setPod] = useState<ChartwerkScatterPod | null>(null);
+  const [hack, setHack] = useState<number | null>(null);
+
+  const chartRef = useRef(null);
+  const chart = chartRef.current;
+
+  useEffect(() => {
+    // this function will be called on component unmount
+    return () => {
+      if(pod === null) { return; }
+      // @ts-ignore
+      pod.removeEventListeners();
+    }
+  }, []);
+
+  useEffect(() => {
+    if(chart === null) { return; }
+    if(pod === null) {
+      const newPod = new ChartwerkScatterPod(
+        // @ts-ignore
+        chart,
+        props.series,
+        props.options,
+      );
+      setPod(newPod);
+      newPod.render();
+    } else {
+      // TODO: actually it's wrong logic with updates
+      // because it creates new pod anyway
+      pod.updateData(props.series, props.options);
+    }
+  }, [chart, props.id, props.options]);
+
+  // TODO: it's a hack to render the ScatterPod right after the div appears in DOM
+  setTimeout(() => {
+    if(hack === null) {
+      setHack(1);
+    }
+  }, 1);
+
+  return (
+    <div id={props.id} className={props.className} ref={chartRef}></div>
+  );
+}
+
+export default ChartwerkScatterPodReact;

react/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "rootDir": "./src",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationDir": "dist",
+    "allowSyntheticDefaultImports": true,
+    "inlineSourceMap": false,
+    "sourceMap": true,
+    "noEmitOnError": false,
+    "emitDecoratorMetadata": false,
+    "experimentalDecorators": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": false,
+    "noImplicitUseStrict": false,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "baseUrl": "./src",
+    "jsx": "react"
+  }
+}

src/index.ts

@@ -1,35 +1,34 @@
-import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, yAxisOrientation, CrosshairOrientation } from '@chartwerk/core';
+import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, yAxisOrientation, CrosshairOrientation } from '@chartwerk/core';
-import { ScatterData, ScatterOptions, PointType, LineType, Datapoint } from './types';
+import { ScatterData, ScatterOptions, PointType, LineType, HighlightedData, MouseMoveEvent, DelaunayDataRow } from './types';
 
-import { DelaunayDiagram } from './delaunay';
+import { DelaunayDiagram } from './models/delaunay';
+import { ScatterSeries } from './models/scatter_series';
 
 import * as d3 from 'd3';
 import * as _ from 'lodash';
 
-// TODO: use pod state with defaults
-const DEFAULT_POINT_SIZE = 4;
 const POINT_HIGHLIGHT_DIAMETER = 4;
 const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
-const DEFAULT_POINT_TYPE = PointType.CIRCLE;
-const DEFAULT_LINE_TYPE = LineType.NONE;
 const DEFAULT_LINE_DASHED_AMOUNT = 4;
 
 export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOptions> {
   metricContainer: any;
   _delaunayDiagram: DelaunayDiagram;
+  series: ScatterSeries;
 
   constructor(el: HTMLElement, _series: ScatterData[] = [], _options: ScatterOptions = {}) {
     super(el, _series, _options);
+    this.series = new ScatterSeries(_series);
   }
 
   renderMetrics(): void {
-    if(this.series.length === 0) {
+    if(!this.series.isSeriesAvailable) {
       this.renderNoDataPointsMessage();
       return;
     }
     this.updateCrosshair();
 
-    this._delaunayDiagram = new DelaunayDiagram(this.series, this.xScale, this.getYScale.bind(this));
+    this._delaunayDiagram = new DelaunayDiagram(this.series, this.state.xScale, this.getYScale.bind(this));
 
     this.renderLines();
     this.renderPoints();
@@ -47,21 +46,20 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
   }
 
   appendCrosshairPoints(): void {
-    this.series.forEach((serie: ScatterData, serieIdx: number) => {
+    this.series.visibleSeries.forEach((serie: ScatterData) => {
-      this.appendCrosshairPoint(serieIdx);
+      this.appendCrosshairPoint(serie.idx, serie.pointType, serie.pointSize);
     });
   }
 
-  protected appendCrosshairPoint(serieIdx: number): void {
+  protected appendCrosshairPoint(serieIdx: number, pointType: PointType, size: number): void {
     // TODO: add Crosshair type options
-    const pointType = this.series[serieIdx].pointType || DEFAULT_POINT_TYPE;
     switch(pointType) {
       case PointType.NONE:
         return;
       case PointType.CIRCLE:
         this.crosshair.append('circle')
           .attr('class', `crosshair-point crosshair-point-${serieIdx} crosshair-background`)
-          .attr('r', this.getCrosshairCircleBackgroundSize(serieIdx))
+          .attr('r', this.getCrosshairCircleBackgroundSize(size, pointType))
           .attr('clip-path', `url(#${this.rectClipId})`)
           .style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
           .style('pointer-events', 'none')
@@ -70,8 +68,8 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
       case PointType.RECTANGLE:
         this.crosshair.append('rect')
           .attr('class', `crosshair-point crosshair-point-${serieIdx} crosshair-background`)
-          .attr('width', this.getCrosshairCircleBackgroundSize(serieIdx))
+          .attr('width', this.getCrosshairCircleBackgroundSize(size, pointType))
-          .attr('height', this.getCrosshairCircleBackgroundSize(serieIdx))
+          .attr('height', this.getCrosshairCircleBackgroundSize(size, pointType))
           .attr('clip-path', `url(#${this.rectClipId})`)
           .style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
           .style('pointer-events', 'none')
@@ -83,134 +81,137 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
   }
 
   protected renderLines(): void {
-    this.series.forEach((serie, serieIdx) => {
+    this.series.visibleSeries.forEach(serie => {
-      if(serie.visible === false) {
+      this.renderLine(serie);
-        return;
-      }
-      const lineType = serie.lineType || DEFAULT_LINE_TYPE;
-      this.renderLine(serie.datapoints, lineType, this.getSerieColor(serieIdx), serie.yOrientation);
     });
   }
 
-  renderLine(datapoints: number[][], lineType: LineType, color: string, orientation: yAxisOrientation): void {
+  renderLine(serie: ScatterData): void {
-    if(lineType === LineType.NONE) {
+    if(serie.lineType === LineType.NONE) {
       return;
     }
     let strokeDasharray;
     // TODO: move to option
-    if(lineType === LineType.DASHED) {
+    if(serie.lineType === LineType.DASHED) {
       strokeDasharray = DEFAULT_LINE_DASHED_AMOUNT;
     }
     const lineGenerator = d3.line()
-      .x((d: [number, number]) => this.xScale(d[0]))
+      .x((d: [number, number]) => this.state.xScale(d[0]))
-      .y((d: [number, number]) => this.getYScale(orientation)(d[1]));
+      .y((d: [number, number]) => this.getYScale(serie.yOrientation)(d[1]));
 
     this.metricContainer
       .append('path')
-      .datum(datapoints)
+      .datum(serie.datapoints)
       .attr('class', 'metric-path')
+      .attr('d', lineGenerator)
       .attr('fill', 'none')
-      .style('pointer-events', 'none')
+      .attr('stroke', serie.color)
-      .attr('stroke', color)
       .attr('stroke-width', 1)
       .attr('stroke-opacity', 0.7)
       .attr('stroke-dasharray', strokeDasharray)
-      .attr('d', lineGenerator);
+      .style('pointer-events', serie.clickCallback ? 'auto' : 'none')
+      .style('cursor', serie.clickCallback ? 'pointer' : 'crosshair')
+      .on('click', () => { serie.clickCallback({ target: serie.target, class: serie.class, alias: serie.alias }) });
   }
 
   protected renderPoints(): void {
     if(!this._delaunayDiagram.data) {
       return;
     }
-
     this.metricContainer.selectAll(null)
       .data(this._delaunayDiagram.data)
       .enter()
       .append('circle')
-      .filter((d: number[]) => this.series[_.last(d)].pointType !== PointType.RECTANGLE)
+      .filter((d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointType !== PointType.RECTANGLE)
       .attr('class', (d, i: number) => `metric-element metric-circle point-${i}`)
-      .attr('r', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE)
+      .attr('r', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointSize)
-      .style('fill', (d: number[], i: number) => this.getSeriesColorFromDataRow(d, i))
+      .attr('cx', (d: DelaunayDataRow) => this.state.xScale(d[0]))
-      .style('pointer-events', 'none')
+      .attr('cy', (d: DelaunayDataRow) => this.getYScale(this.series.getSerieByTarget(d[4])?.yOrientation)(d[1]))
-      .attr('cx', (d: any[]) => this.xScale(d[0]))
+      .style('fill', (d: DelaunayDataRow, i: number) => this.getSeriesColorFromDataRow(d, i))
-      .attr('cy', (d: any[]) => this.getYScale(this.series[_.last(d)].yOrientation)(d[1]));
+      .style('pointer-events', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.clickCallback ? 'auto' : 'none')
+      .style('cursor', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.clickCallback ? 'pointer' : 'crosshair')
+      .on('click', (d: DelaunayDataRow) => {
+        d3.event.stopPropagation();
+        const serie = this.series.getSerieByTarget(d[4]);
+        const serieData = { target: serie?.target, class: serie?.class, alias: serie?.alias };
+        serie?.clickCallback(serieData, d);
+      });
   
     this.metricContainer.selectAll(null)
       .data(this._delaunayDiagram.data)
       .enter()
       .append('rect')
-      .filter((d: number[]) => this.series[_.last(d)].pointType === PointType.RECTANGLE)
+      .filter((d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointType === PointType.RECTANGLE)
       .attr('class', (d, i: number) => `metric-element metric-circle point-${i}`)
-      .attr('r', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE)
+      .attr('r', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointSize)
-      .style('fill', (d: number[]) => this.getSerieColor(_.last(d)))
+      .attr('x', (d: DelaunayDataRow) => this.state.xScale(d[0]) - this.series.getSerieByTarget(d[4])?.pointSize / 2)
-      .style('pointer-events', 'none')
+      .attr('y', (d: DelaunayDataRow) => this.getYScale(this.series.getSerieByTarget(d[4])?.yOrientation)(d[1]) - this.series.getSerieByTarget(d[4])?.pointSize / 2)
-      .attr('x', (d: number[]) => this.xScale(d[0]) - (this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE) / 2)
+      .attr('width', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointSize)
-      .attr('y', (d: number[]) => this.getYScale(this.series[_.last(d)].yOrientation)(d[1]) - (this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE) / 2)
+      .attr('height', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.pointSize)
-      .attr('width', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE)
+      .style('fill', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.color)
-      .attr('height', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE);
+      .style('pointer-events', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.clickCallback ? 'auto' : 'none')
+      .style('cursor', (d: DelaunayDataRow) => this.series.getSerieByTarget(d[4])?.clickCallback ? 'pointer' : 'crosshair')
+      .on('click', (d: DelaunayDataRow) => {
+        d3.event.stopPropagation();
+        const serie = this.series.getSerieByTarget(d[4]);
+        const serieData = { target: serie?.target, class: serie?.class, alias: serie?.alias };
+        serie?.clickCallback(serieData, d);
+      });
   }
 
-  getSeriesColorFromDataRow(datapoint: Datapoint): string {
+  getSeriesColorFromDataRow(values: DelaunayDataRow, rowIdx: number): string {
-    const serieIdx = datapoint.serieIdx;
+    const serie = this.series.getSerieByTarget(values[4]);
-    if(this.series[serieIdx].colorFormatter) {
+    if(serie?.colorFormatter) {
-      return this.series[serieIdx].colorFormatter(datapoint);
+      return serie.colorFormatter(values, rowIdx);
     }
-    return this.getSerieColor(serieIdx);
+    return serie.color;
   }
 
   onPanningEnd(): void {
     this.isPanning = false;
     this.onMouseOut();
-    this._delaunayDiagram.setDelaunayDiagram(this.xScale, this.getYScale.bind(this));
+    this._delaunayDiagram.setDelaunayDiagram(this.state.xScale, this.getYScale.bind(this));
-    if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.panningEnd !== undefined) {
+    this.options.callbackPanningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]);
-      this.options.eventsCallbacks.panningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]);
-    } else {
-      console.log('on panning end, but there is no callback');
-    }
   }
 
   unhighlight(): void {
     this.crosshair.selectAll('.crosshair-point').style('display', 'none');
   }
 
-  highlight(datapoint: Datapoint): void {
+  highlight(pointIdx: number): void {
     this.unhighlight();
 
-    const serieIdx = datapoint.serieIdx;
+    const row = this._delaunayDiagram.getDataRowByIndex(pointIdx);
-    const serieOrientation = this.series[serieIdx].yOrientation;
+    if(row === undefined || row === null) {
-    const size = this.getCrosshairCircleBackgroundSize(serieIdx);
+      return;
-    this.crosshair.selectAll(`.crosshair-point-${serieIdx}`)
+    }
-      .attr('cx', this.xScale(datapoint.x))
+    const serie = this.series.getSerieByTarget(row[4]);
-      .attr('cy', this.getYScale(serieOrientation)(datapoint.y))
+    const size = this.getCrosshairCircleBackgroundSize(serie.pointSize, serie.pointType);
-      .attr('x', this.xScale(datapoint.x - size / 2))
+    this.crosshair.selectAll(`.crosshair-point-${serie.idx}`)
-      .attr('y', this.getYScale(serieOrientation)(datapoint.y) - size / 2)
+      .attr('cx', this.state.xScale(row[0]))
-      .attr('fill', this.getSeriesColorFromDataRow(datapoint))
+      .attr('cy', this.getYScale(serie.yOrientation)(row[1]))
+      .attr('x', this.state.xScale(row[0]) - size / 2)
+      .attr('y', this.getYScale(serie.yOrientation)(row[1]) - size / 2)
+      .attr('fill', this.getSeriesColorFromDataRow(row, pointIdx))
       .style('display', null);
   }
 
-  protected getCrosshairCircleBackgroundSize(serieIdx: number): number {
+  protected getCrosshairCircleBackgroundSize(pointSize: number, pointType: PointType): number {
-    const seriePointSize = this.series[serieIdx].pointSize || DEFAULT_POINT_SIZE;
-    const pointType = this.series[serieIdx].pointType || DEFAULT_POINT_TYPE;
     let highlightDiameter = POINT_HIGHLIGHT_DIAMETER;
     if(pointType === PointType.RECTANGLE) {
       highlightDiameter = highlightDiameter * 2;
     }
-    return seriePointSize + highlightDiameter;
+    return pointSize + highlightDiameter;
   }
 
   public renderSharedCrosshair(values: { x?: number, y?: number }): void {
     this.onMouseOver(); // TODO: refactor to use it once
-    const eventX = this.xScale(values.x);
+    const eventX = this.state.xScale(values.x);
-    const eventY = this.yScale(values.y);
+    const eventY = this.state.yScale(values.y);
     this.moveCrosshairLine(eventX, eventY);
-    const datapoints = this.findDatapoint(values.x, values.y);
+    const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
 
-    if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.sharedCrosshairMove === undefined) {
+    this.options.callbackSharedCrosshairMove({
-      console.log('Shared crosshair move, but there is no callback');
-      return;
-    }
-
-    this.options.eventsCallbacks.sharedCrosshairMove({
       datapoints,
       eventX, eventY
     });
@@ -241,48 +242,44 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
     }
   }
 
-  highlightDatapoint(datapoint?: Datapoint): void {
+  findAndHighlightDatapoints(eventX: number, eventY: number): {
-    if(_.isNil(datapoint)) {
+    xValue: number, yValue: number, customValue: number,
-      return;
+    pointIdx: number, totalPointIdx: number,
-    }
+    serieInfo: { target: string, alias?: string, class?: string, idx?: number }
-    this.highlight(datapoint); 
+  } | null {
-  }
+    if(!this.series.isSeriesAvailable) {
-
-  findDatapoint(eventX: number, eventY: number): Datapoint | null {
-    if(this.series === undefined || this.series.length === 0) {
       return null;
     }
-    
+
     const pointIndex = this._delaunayDiagram.findPointIndex(eventX, eventY);
-    const datapoint = this._delaunayDiagram.getDataRowByIndex(pointIndex);
+    if(pointIndex === undefined) {
-    if(_.isNil(datapoint)) {
+      this.unhighlight();
-      // TODO: maybe throw an error?
       return null;
     }
-    const serieIdx = _.last(datapoint);
+    this.highlight(pointIndex);
-    let seriePointIdx = pointIndex
+    const row = this._delaunayDiagram.data[pointIndex];
-    for(let i = 0; i < serieIdx; i++) {
+    const serie = this.series.getSerieByTarget(row[4]);
-      seriePointIdx -= this.series[serieIdx].datapoints.length;
-    }
-
     return {
-      x: datapoint[0],
+      xValue: row[0],
-      y: datapoint[1],
+      yValue: row[1],
-      rawValues: datapoint,
+      customValue: row[2],
-      serieIdx,
+      pointIdx: row[3],
-      pointIdx: seriePointIdx,
+      serieInfo: {
+        target: serie.target,
+        alias: serie.alias,
+        class: serie.class,
+        idx: serie.idx,
+      },
+      totalPointIdx: pointIndex,
     };
   }
 
   protected getYScale(orientation: yAxisOrientation): d3.ScaleLinear<number, number> {
-    if(orientation === undefined || orientation === yAxisOrientation.BOTH) {
-      return this.yScale;
-    }
     switch(orientation) {
       case yAxisOrientation.LEFT:
-        return this.yScale;
+        return this.state.yScale;
       case yAxisOrientation.RIGHT:
-        return this.y1Scale;
+        return this.state.y1Scale;
       default:
         throw new Error(`Unknown type of y axis orientation: ${orientation}`)   
     }
@@ -292,14 +289,12 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
     this.crosshair.style('display', 'none');
   }
 
-  // @ts-ignore
+  onMouseMove(): void {
-  onMouseMove(d: any): void {
     const mousePosition = d3.mouse(this.chartContainer.node());
     const eventX = mousePosition[0];
     const eventY = mousePosition[1];
 
-    // TODO: seems isOutOfChart is deprecated (check clippath correctness)
+    if(this.isPanning === true || this.isBrushing === true) {
-    if(this.isOutOfChart() === true || this.isPanning === true || this.isBrushing === true) {
       this.crosshair.style('display', 'none');
       return;
     } else {
@@ -309,26 +304,26 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
     this.moveCrosshairLine(eventX, eventY);
 
     // TOOD: it should be two different methods
-    const datapoint = this.findDatapoint(eventX, eventY);
+    const highlighted = this.findAndHighlightDatapoints(eventX, eventY);
-    this.highlightDatapoint(datapoint);
+    this.options.callbackMouseMove({
-    if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.mouseMove === undefined) {
+      bbox: {
-      console.log('Mouse move, but there is no callback');
+        clientX: d3.event.clientX,
-      return;
+        clientY: d3.event.clientY,
-    }
+        x: eventX,
-    // TODO: group fields
+        y: eventY,
-    this.options.eventsCallbacks.mouseMove({
+        chartWidth: this.width,
-      x: d3.event.clientX,
+        chartHeight: this.height,
-      y: d3.event.clientY,
+      },
-      xval: this.xScale.invert(eventX),
+      data: {
-      yval: this.xScale.invert(eventY),
+        xval: this.state.xScale.invert(eventX),
-      highlighted: datapoint,
+        yval: this.state.xScale.invert(eventY),
-      chartX: eventX,
+        highlighted,
-      chartWidth: this.width
+      }
     });
   }
 
   onMouseOver(): void {
-    if(this.isOutOfChart() === true || this.isPanning === true || this.isBrushing === true) {
+    if(this.isPanning === true || this.isBrushing === true) {
       this.crosshair.style('display', 'none');
       return;
     }
@@ -336,9 +331,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
   }
 
   onMouseOut(): void {
-    if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.mouseOut !== undefined) {
+    this.options.callbackMouseOut();
-      this.options.eventsCallbacks.mouseOut();
-    }
     this.crosshair.style('display', 'none');
   }
 }
@@ -368,4 +361,4 @@ export const VueChartwerkScatterPodObject = {
   }
 };
 
-export { ScatterData, ScatterOptions, TickOrientation, TimeFormat, PointType, LineType };
+export { ScatterData, ScatterOptions, TimeFormat, PointType, LineType, HighlightedData, MouseMoveEvent };

src/models/delaunay.ts

@@ -1,24 +1,24 @@
-import { ScatterData, PointType } from './types';
+import { ScatterData, PointType, DelaunayDataRow } from '../types';
+import { ScatterSeries } from './scatter_series';
 
 import { Delaunay } from 'd3-delaunay';
 
 import * as _ from 'lodash';
 import * as d3 from 'd3'; // only types
 
-
 export class DelaunayDiagram {
-  private _delaunayData: number[][]; // [ 0:y, 1:x, ..., last:serieIdx ][]
+  private _delaunayData: DelaunayDataRow[];
   private _delaunayDiagram: any;
 
   constructor(
-      protected series: ScatterData[],
+    protected series: ScatterSeries,
       xScale: d3.ScaleLinear<number, number>, yScale: (string) => d3.ScaleLinear<number, number>, // TODO: bad, but idk how to do it better
     ) {
     this._delaunayData = this.getDatapointsForDelaunay();
     this.setDelaunayDiagram(xScale, yScale);
   }
 
-  public get data(): number[][] | undefined {
+  public get data(): DelaunayDataRow[] | undefined {
     if(!this._delaunayData || this._delaunayData.length === 0) {
       return undefined;
     }
@@ -33,8 +33,8 @@ export class DelaunayDiagram {
     console.time('delaunay-init');
     this._delaunayDiagram = Delaunay.from(
       this._delaunayData,
-      (d: number[]) => xScale(d[0]),
+      (d: DelaunayDataRow) => xScale(d[0]),
-      (d: number[]) => yScale(this.series[_.last(d)].yOrientation)(d[1]),
+      (d: DelaunayDataRow) => yScale(this.series.getSerieByTarget(d[4])?.yOrientation)(d[1]),
     );
     console.timeEnd('delaunay-init');
   }
@@ -51,39 +51,29 @@ export class DelaunayDiagram {
     return pointIndex;
   }
 
-  public getDataRowByIndex(index: number): number[] | undefined {
+  public getDataRowByIndex(index: number): DelaunayDataRow | undefined {
     if(!this.data) {
       return undefined;
     }
     return this.data[index];
   }
 
-  private getDatapointsForDelaunay(): number[][] | undefined {
+  private getDatapointsForDelaunay(): DelaunayDataRow[] | undefined {
     // here we union all datapoints with point render type(circle or rectangle)
     // it means that circles and rectangles will be highlighted(not lines)
     // TODO: set Defaults (if pointType === undefined, Circle type will be used futher)
-    const seriesForPointType = this.series.filter((serie: ScatterData) => serie.pointType !== PointType.NONE);
+    const seriesForPointType = this.series.visibleSeries.filter((serie: ScatterData) => serie.pointType !== PointType.NONE);
     if(seriesForPointType.length === 0) {
       return undefined; // to avoid ts error
     }
     return this.concatSeriesDatapoints(seriesForPointType);
   }
 
-  private concatSeriesDatapoints(series: ScatterData[]): number[][] {
+  private concatSeriesDatapoints(series: ScatterData[]): DelaunayDataRow[] {
-    // return type row: [ 0:x, 1:y, 2?:custom value, last-1:serieIdx, last:pointIdx ]
     const datapointsList = _.map(series, serie => {
-      const serieIdx = this.getSerieIdxByTarget(serie.target);
+      const datapointsWithOptions = _.map(serie.datapoints, (row, rowIdx) => [row[0], row[1], row[2] || null, rowIdx, serie.target]);
-      const datapointsWithOptions = _.map(serie.datapoints, row => _.concat(row, serieIdx));
       return datapointsWithOptions;
     });
-    return _.concat(...datapointsList);
+    return _.union(...datapointsList);
-  }
-
-  private getSerieIdxByTarget(target: string): number {
-    const idx = _.findIndex(this.series, serie => serie.target === target);
-    if(idx === -1) {
-      throw new Error(`Can't find serie with target: ${target}`);
-    }
-    return idx;
   }
 }

src/models/scatter_series.ts

@@ -0,0 +1,26 @@
+import { CoreSeries } from '@chartwerk/core';
+import { ScatterData, PointType, LineType, ScatterDataParams } from '../types';
+
+import * as _ from 'lodash';
+
+const DEFAULT_POINT_SIZE = 4;
+
+const SCATTER_DATA_DEFAULTS: ScatterDataParams = {
+  pointType: PointType.CIRCLE,
+  lineType: LineType.NONE,
+  pointSize: DEFAULT_POINT_SIZE,
+  colorFormatter: undefined,
+  clickCallback: undefined,
+};
+
+export class ScatterSeries extends CoreSeries<ScatterData> {
+
+  constructor(series: ScatterData[]) {
+    super(series, _.cloneDeep(SCATTER_DATA_DEFAULTS));
+  }
+
+  // move to parent
+  public getSerieByTarget(target: string): ScatterData | undefined {
+    return _.find(this.visibleSeries, serie => serie.target === target);
+  }
+}

src/types.ts

@@ -1,18 +1,18 @@
-import { TimeSerie, Options } from '@chartwerk/core';
+import { Serie, Options } from '@chartwerk/core';
 
 
-type ScatterDataParams = {
+export type ScatterDataParams = {
   pointType: PointType;
   lineType: LineType;
   pointSize: number;
-  colorFormatter?: ColorFormatter
+  colorFormatter?: ColorFormatter;
+  clickCallback?: ( metricData: { target: Target, class: string, alias: string }, pointData?: DelaunayDataRow) => void;
 }
 type ScatterOptionsParams = {
+  // TODO: this options is not used anywhere, let's remove it
   voronoiRadius: number;
-  circleView: boolean;
-  renderGrid: boolean;
 }
-export type ScatterData = TimeSerie & Partial<ScatterDataParams>;
+export type ScatterData = Serie & Partial<ScatterDataParams>;
 export type ScatterOptions = Options & Partial<ScatterOptionsParams>;
 
 export enum PointType {
@@ -27,4 +27,33 @@ export enum LineType {
   DASHED = 'dashed'
 }
 
-export type ColorFormatter = (datapoint: Datapoint) => string;
+export type ColorFormatter = (datapointsRow: any[], pointIdx) => string;
+
+export type MouseMoveEvent = {
+  bbox: {
+    clientX: number,
+    clientY: number,
+    x: number,
+    y: number,
+    chartWidth: number,
+    chartHeight: number,
+  },
+  data: {
+    xval: number,
+    yval: number,
+    highlighted?: HighlightedData,
+  }
+}
+
+export type HighlightedData = {
+  xValue: number, yValue: number, customValue: number,
+  pointIdx: number, totalPointIdx: number,
+  serieInfo: { target: string, alias?: string, class?: string, idx?: number }
+}
+
+
+type Value = number;
+type PointIdx = number;
+type Target = string;
+// type row: [ 0:x, 1:y, 2:(custom value | null), 3:pointIdx, 4:serie.target ]
+export type DelaunayDataRow = [Value, Value, Value | null, PointIdx, Target];

tsconfig.json

@@ -18,5 +18,6 @@
     "noImplicitAny": false,
     "noUnusedLocals": false,
     "baseUrl": "./src"
-  }
+  },
+  "include": ["src/**/*"]
 }