chartwerk
/
scatter-pod
4
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity
Browse Source

sync_890b61a13852b9f4b7f430954faf7c41e44183af

target-master
vargburz 3 years ago
parent
126ceaf8c1
commit
ea743b0db7
16 changed files with 5466 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 2
      README.md
  3. 35
      build/webpack.base.conf.js
  4. 8
      build/webpack.dev.conf.js
  5. 6
      build/webpack.prod.conf.js
  6. 86
      demo.html
  7. 15
      dist/delaunay.d.ts
  8. 88
      dist/index.d.ts
  9. 9
      dist/index.js
  10. 26
      dist/types.d.ts
  11. 4662
      package-lock.json
  12. 30
      package.json
  13. 89
      src/delaunay.ts
  14. 359
      src/index.ts
  15. 30
      src/types.ts
  16. 22
      tsconfig.json

1
.gitignore vendored
Unescape View File

@ -0,0 +1 @@
node_modules

2
README.md
Unescape View File

@ -1,3 +1 @@
# scatter-pod # scatter-pod
Scatter Pod

35
build/webpack.base.conf.js
Unescape View File

@ -0,0 +1,35 @@
const path = require('path');
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: resolve('src'),
entry: './index.ts',
plugins: [],
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
exclude: /node_modules/
}
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'index.js',
path: resolve('dist'),
libraryTarget: 'umd',
umdNamedDefine: true
}
};

8
build/webpack.dev.conf.js
Unescape View File

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

6
build/webpack.prod.conf.js
Unescape View File

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

86
demo.html
Unescape View File

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="./dist/index.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 500px; height: 500px;"></div>
<script type="text/javascript">
var pod = new ChartwerkScatterPod(
document.getElementById('chart'),
[
{
target: 'test1',
datapoints: [
[100, -50, 0],
[200, 150, 0],
[100, 160, 1],
[150, 170, 1],
[150, 180, 0],
[150, 250, 1]
],
color: 'red',
lineType: 'dashed',
pointType: 'circle'
},
{
target: 'test2',
datapoints: [
[200, 50, 1],
[175, 60, 0],
[150, 70, 1]
],
color: 'purple',
pointType: 'rectangle',
pointSize: 5,
yOrientation: 'right',
}
],
{
axis: {
x: {
format: 'numeric',
range: [-100, 300]
},
y: {
invert: true,
range: [-100, 250]
},
y1: {
isActive: true,
range: [0, 250]
}
},
zoomEvents: {
mouse: {
pan: { isActive: false, orientation: 'both', keyEvent: 'main' },
zoom: { isActive: true, keyEvent: 'shift' },
},
scroll: {
pan: { isActive: false },
zoom: { isActive: true, keyEvent: 'main' }
}
},
crosshair: {
orientation: 'both',
color: 'gray'
},
labelFormat: {
yAxis: 'y',
xAxis: 'x'
},
eventsCallbacks: {
zoomOut: () => { pod.render() }
},
margin: { top: 30, right: 30, bottom: 40, left: 30 },
circleView: true,
}
);
pod.render();
</script>
</body>
</html>

15
dist/delaunay.d.ts vendored
Unescape View File

@ -0,0 +1,15 @@
import { ScatterData } from './types';
import * as d3 from 'd3';
export declare class DelaunayDiagram {
protected series: ScatterData[];
private _delaunayData;
private _delaunayDiagram;
constructor(series: ScatterData[], xScale: d3.ScaleLinear<number, number>, yScale: (string: any) => d3.ScaleLinear<number, number>);
get data(): number[][] | undefined;
setDelaunayDiagram(xScale: d3.ScaleLinear<number, number>, yScale: (string: any) => d3.ScaleLinear<number, number>): void;
findPointIndex(eventX: number, eventY: number): number | undefined;
getDataRowByIndex(index: number): number[] | undefined;
private getDatapointsForDelaunay;
private concatSeriesDatapoints;
private getSerieIdxByTarget;
}

88
dist/index.d.ts vendored
Unescape View File

@ -0,0 +1,88 @@
import { ChartwerkPod, TickOrientation, TimeFormat, yAxisOrientation } from '@chartwerk/core';
import { ScatterData, ScatterOptions, PointType, LineType } from './types';
import { DelaunayDiagram } from './delaunay';
import * as d3 from 'd3';
export declare class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOptions> {
_metricsContainer: any;
_delaunayDiagram: DelaunayDiagram;
constructor(el: HTMLElement, _series?: ScatterData[], _options?: ScatterOptions);
renderMetrics(): void;
renderMetricContainer(): void;
protected updateCrosshair(): void;
appendCrosshairPoints(): void;
protected appendCrosshairPoint(serieIdx: number): void;
protected renderLines(): void;
renderLine(datapoints: number[][], lineType: LineType, color: string, orientation: yAxisOrientation): void;
protected renderPoints(): void;
onPanningEnd(): void;
unhighlight(): void;
highlight(pointIdx: number): void;
protected getCrosshairCircleBackgroundSize(serieIdx: number): number;
renderSharedCrosshair(values: {
x?: number;
y?: number;
}): void;
moveCrosshairLine(xPosition: number, yPosition: number): void;
findAndHighlightDatapoints(eventX: number, eventY: number): {
values: any[];
pointIdx: number;
} | null;
protected getYScale(orientation: yAxisOrientation): d3.ScaleLinear<number, number>;
hideSharedCrosshair(): void;
onMouseMove(): void;
onMouseOver(): void;
onMouseOut(): void;
}
export declare const VueChartwerkScatterPodObject: {
render(createElement: any): any;
mixins: {
props: {
id: {
type: StringConstructor;
required: boolean;
};
series: {
type: ArrayConstructor;
required: boolean;
default: () => any[];
};
options: {
type: ObjectConstructor;
required: boolean;
default: () => {};
};
};
watch: {
id(): void;
series(): void;
options(): void;
};
mounted(): void;
destroyed(): void;
methods: {
render(): void;
renderSharedCrosshair(values: {
x?: number;
y?: number;
}): void;
hideSharedCrosshair(): void;
onPanningRescale(event: any): void;
renderChart(): void;
appendEvents(): void;
zoomIn(range: any): void;
zoomOut(centers: any): void;
mouseMove(evt: any): void;
mouseOut(): void;
onLegendClick(idx: any): void;
panningEnd(range: any): void;
panning(range: any): void;
contextMenu(evt: any): void;
sharedCrosshairMove(event: any): void;
renderEnd(): void;
};
}[];
methods: {
render(): void;
};
};
export { ScatterData, ScatterOptions, TickOrientation, TimeFormat, PointType, LineType };

9
dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

26
dist/types.d.ts vendored
Unescape View File

@ -0,0 +1,26 @@
import { TimeSerie, Options } from '@chartwerk/core';
declare type ScatterDataParams = {
pointType: PointType;
lineType: LineType;
pointSize: number;
colorFormatter?: ColorFormatter;
};
declare type ScatterOptionsParams = {
voronoiRadius: number;
circleView: boolean;
renderGrid: boolean;
};
export declare type ScatterData = TimeSerie & Partial<ScatterDataParams>;
export declare type ScatterOptions = Options & Partial<ScatterOptionsParams>;
export declare enum PointType {
NONE = "none",
CIRCLE = "circle",
RECTANGLE = "rectangle"
}
export declare enum LineType {
NONE = "none",
SOLID = "solid",
DASHED = "dashed"
}
export declare type ColorFormatter = (datapoint: number[]) => string;
export {};

4662
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

30
package.json
Unescape View File

@ -0,0 +1,30 @@
{
"name": "@chartwerk/scatter-pod",
"version": "0.2.4",
"description": "Chartwerk scatter pod",
"main": "dist/index.js",
"scripts": {
"build": "webpack --config build/webpack.prod.conf.js",
"dev": "webpack --config build/webpack.dev.conf.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {},
"author": "CorpGlory",
"license": "Apache-2.0",
"dependencies": {
"@chartwerk/core": "github:chartwerk/core#532eddbc8ad938091b1d9ec1693cec5eddfdbfc2"
},
"devDependencies": {
"@types/d3": "^5.7.2",
"@types/lodash": "^4.14.149",
"css-loader": "^3.4.2",
"d3": "^5.15.0",
"d3-delaunay": "^6.0.2",
"lodash": "^4.17.15",
"style-loader": "^1.1.3",
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}

89
src/delaunay.ts
Unescape View File

@ -0,0 +1,89 @@
import { ScatterData, PointType } from './types';
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 _delaunayDiagram: any;
constructor(
protected series: ScatterData[],
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 {
if(!this._delaunayData || this._delaunayData.length === 0) {
return undefined;
}
return this._delaunayData;
}
public setDelaunayDiagram(xScale: d3.ScaleLinear<number, number>, yScale: (string) => d3.ScaleLinear<number, number>) {
if(!this._delaunayData) {
console.warn('No data for delaunay initialization');
return;
}
console.time('delaunay-init');
this._delaunayDiagram = Delaunay.from(
this._delaunayData,
(d: number[]) => xScale(d[1]),
(d: number[]) => yScale(this.series[_.last(d)].yOrientation)(d[0]),
);
console.timeEnd('delaunay-init');
}
public findPointIndex(eventX: number, eventY: number): number | undefined {
if(!this._delaunayDiagram) {
return undefined;
}
let pointIndex = this._delaunayDiagram.find(eventX, eventY);
if(pointIndex === -1) {
return undefined;
}
// TODO: add search radius via https://github.com/d3/d3-delaunay/issues/45
return pointIndex;
}
public getDataRowByIndex(index: number): number[] | undefined {
if(!this.data) {
return undefined;
}
return this.data[index];
}
private getDatapointsForDelaunay(): number[][] | 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);
if(seriesForPointType.length === 0) {
return undefined; // to avoid ts error
}
return this.concatSeriesDatapoints(seriesForPointType);
}
private concatSeriesDatapoints(series: ScatterData[]): number[][] {
// return type row: [ 0:y, 1:x, 2?:custom value, last:serieIdx ]
const datapointsList = _.map(series, serie => {
const serieIdx = this.getSerieIdxByTarget(serie.target);
const datapointsWithOptions = _.map(serie.datapoints, row => _.concat(row, serieIdx));
return datapointsWithOptions;
});
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;
}
}

359
src/index.ts
Unescape View File

@ -0,0 +1,359 @@
import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, yAxisOrientation, CrosshairOrientation, PanOrientation } from '@chartwerk/core';
import { ScatterData, ScatterOptions, PointType, LineType, ColorFormatter } from './types';
import { DelaunayDiagram } from './delaunay';
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> {
_metricsContainer: any;
_delaunayDiagram: DelaunayDiagram;
constructor(el: HTMLElement, _series: ScatterData[] = [], _options: ScatterOptions = {}) {
super(d3, el, _series, _options);
}
renderMetrics(): void {
if(this.series.length === 0) {
this.renderNoDataPointsMessage();
return;
}
this.updateCrosshair();
this.renderMetricContainer();
this._delaunayDiagram = new DelaunayDiagram(this.series, this.xScale, this.getYScale.bind(this));
this.renderLines();
this.renderPoints();
}
renderMetricContainer(): void {
// container for clip path
const clipContatiner = this.chartContainer
.append('g')
.attr('clip-path', `url(#${this.rectClipId})`)
.attr('class', 'metrics-container');
// container for panning
this._metricsContainer = clipContatiner
.append('g')
.attr('class', ' metrics-rect');
}
protected updateCrosshair(): void {
// TODO: Crosshair class, which can be used as Pod
this.appendCrosshairPoints();
}
appendCrosshairPoints(): void {
this.series.forEach((serie: ScatterData, serieIdx: number) => {
this.appendCrosshairPoint(serieIdx);
});
}
protected appendCrosshairPoint(serieIdx: 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('clip-path', `url(#${this.rectClipId})`)
.style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
.style('pointer-events', 'none')
.style('display', 'none');
return;
case PointType.RECTANGLE:
this.crosshair.append('rect')
.attr('class', `crosshair-point crosshair-point-${serieIdx} crosshair-background`)
.attr('width', this.getCrosshairCircleBackgroundSize(serieIdx))
.attr('height', this.getCrosshairCircleBackgroundSize(serieIdx))
.attr('clip-path', `url(#${this.rectClipId})`)
.style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
.style('pointer-events', 'none')
.style('display', 'none');
return;
default:
throw new Error(`Unknown render point type: ${pointType}`);
}
}
protected renderLines(): void {
this.series.forEach((serie, serieIdx) => {
if(serie.visible === false) {
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 {
if(lineType === LineType.NONE) {
return;
}
let strokeDasharray;
// TODO: move to option
if(lineType === LineType.DASHED) {
strokeDasharray = DEFAULT_LINE_DASHED_AMOUNT;
}
const lineGenerator = this.d3.line()
.x((d: [number, number]) => this.xScale(d[1]))
.y((d: [number, number]) => this.getYScale(orientation)(d[0]));
this._metricsContainer
.append('path')
.datum(datapoints)
.attr('class', 'metric-path')
.attr('fill', 'none')
.style('pointer-events', 'none')
.attr('stroke', color)
.attr('stroke-width', 1)
.attr('stroke-opacity', 0.7)
.attr('stroke-dasharray', strokeDasharray)
.attr('d', lineGenerator);
}
protected renderPoints(): void {
if(!this._delaunayDiagram.data) {
return;
}
this._metricsContainer.selectAll(null)
.data(this._delaunayDiagram.data)
.enter()
.append('circle')
.filter((d: number[]) => this.series[_.last(d)].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)
.style('fill', (d: number[]) => this.getSerieColor(_.last(d)))
.style('pointer-events', 'none')
.attr('cx', (d: any[]) => this.xScale(d[1]))
.attr('cy', (d: any[]) => this.getYScale(this.series[_.last(d)].yOrientation)(d[0]));
this._metricsContainer.selectAll(null)
.data(this._delaunayDiagram.data)
.enter()
.append('rect')
.filter((d: number[]) => this.series[_.last(d)].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)
.style('fill', (d: number[]) => this.getSerieColor(_.last(d)))
.style('pointer-events', 'none')
.attr('x', (d: number[]) => this.xScale(d[1]) - (this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE) / 2)
.attr('y', (d: number[]) => this.getYScale(this.series[_.last(d)].yOrientation)(d[0]) - (this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE) / 2)
.attr('width', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE)
.attr('height', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE);
}
onPanningEnd(): void {
this.isPanning = false;
this.onMouseOut();
this._delaunayDiagram.setDelaunayDiagram(this.xScale, this.getYScale.bind(this));
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.panningEnd !== undefined) {
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(pointIdx: number): void {
this.unhighlight();
const datapoint = this._delaunayDiagram.getDataRowByIndex(pointIdx);
if(datapoint === undefined || datapoint === null) {
return;
}
const serieIdx = _.last(datapoint);
const serieOrientation = this.series[serieIdx].yOrientation;
const size = this.getCrosshairCircleBackgroundSize(serieIdx);
const colorFormatter = this.series[serieIdx].colorFormatter;
this.crosshair.selectAll(`.crosshair-point-${serieIdx}`)
.attr('cx', this.xScale(datapoint[1]))
.attr('cy', this.getYScale(serieOrientation)(datapoint[0]))
.attr('x', this.xScale(datapoint[1]) - size / 2)
.attr('y', this.getYScale(serieOrientation)(datapoint[0]) - size / 2)
.attr('fill', colorFormatter !== undefined ? colorFormatter(datapoint) : this.series[serieIdx].color)
.style('display', null);
}
protected getCrosshairCircleBackgroundSize(serieIdx: number): 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;
}
public renderSharedCrosshair(values: { x?: number, y?: number }): void {
this.onMouseOver(); // TODO: refactor to use it once
const eventX = this.xScale(values.x);
const eventY = this.yScale(values.y);
this.moveCrosshairLine(eventX, eventY);
const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.sharedCrosshairMove === undefined) {
console.log('Shared crosshair move, but there is no callback');
return;
}
this.options.eventsCallbacks.sharedCrosshairMove({
datapoints,
eventX, eventY
});
}
moveCrosshairLine(xPosition: number, yPosition: number): void {
switch (this.options.crosshair.orientation) {
case CrosshairOrientation.VERTICAL:
this.crosshair.select('#crosshair-line-x')
.attr('x1', xPosition)
.attr('x2', xPosition);
return;
case CrosshairOrientation.HORIZONTAL:
this.crosshair.select('#crosshair-line-y')
.attr('y1', yPosition)
.attr('y2', yPosition);
return;
case CrosshairOrientation.BOTH:
this.crosshair.select('#crosshair-line-x')
.attr('x1', xPosition)
.attr('x2', xPosition);
this.crosshair.select('#crosshair-line-y')
.attr('y1', yPosition)
.attr('y2', yPosition);
return;
default:
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`);
}
}
findAndHighlightDatapoints(eventX: number, eventY: number): { values: any[], pointIdx: number } | null {
if(this.series === undefined || this.series.length === 0) {
return null;
}
const pointIndex = this._delaunayDiagram.findPointIndex(eventX, eventY);
if(pointIndex === undefined) {
this.unhighlight();
return null;
}
this.highlight(pointIndex);
return {
values: this._delaunayDiagram.data[pointIndex],
pointIdx: 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;
case yAxisOrientation.RIGHT:
return this.y1Scale;
default:
throw new Error(`Unknown type of y axis orientation: ${orientation}`)
}
}
public hideSharedCrosshair(): void {
this.crosshair.style('display', 'none');
}
onMouseMove(): void {
const mousePosition = this.d3.mouse(this.chartContainer.node());
const eventX = mousePosition[0];
const eventY = mousePosition[1];
// TODO: seems isOutOfChart is deprecated (check clippath correctness)
if(this.isOutOfChart() === true || this.isPanning === true || this.isBrushing === true) {
this.crosshair.style('display', 'none');
return;
} else {
this.crosshair.style('display', null);
}
this.moveCrosshairLine(eventX, eventY);
// TOOD: it should be two different methods
const highlighted = this.findAndHighlightDatapoints(eventX, eventY);
if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.mouseMove === undefined) {
console.log('Mouse move, but there is no callback');
return;
}
// TODO: group fields
this.options.eventsCallbacks.mouseMove({
x: this.d3.event.clientX,
y: this.d3.event.clientY,
xval: this.xScale.invert(eventX),
yval: this.xScale.invert(eventY),
highlighted,
chartX: eventX,
chartWidth: this.width
});
}
onMouseOver(): void {
if(this.isOutOfChart() === true || this.isPanning === true || this.isBrushing === true) {
this.crosshair.style('display', 'none');
return;
}
this.crosshair.style('display', null);
}
onMouseOut(): void {
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.mouseOut !== undefined) {
this.options.eventsCallbacks.mouseOut();
}
this.crosshair.style('display', 'none');
}
}
// it is used with Vue.component, e.g.: Vue.component('chartwerk-scatter-pod', VueChartwerkScatterPodObject)
export const VueChartwerkScatterPodObject = {
// alternative to `template: '<div class="chartwerk-scatter-pod" :id="id" />'`
render(createElement) {
return createElement(
'div',
{
class: { 'chartwerk-scatter-pod': true },
attrs: { id: this.id }
}
);
},
mixins: [VueChartwerkPodMixin],
methods: {
render() {
if(this.pod === undefined) {
this.pod = new ChartwerkScatterPod(document.getElementById(this.id), this.series, this.options);
this.pod.render();
} else {
this.pod.updateData(this.series, this.options);
}
},
}
};
export { ScatterData, ScatterOptions, TickOrientation, TimeFormat, PointType, LineType };

30
src/types.ts
Unescape View File

@ -0,0 +1,30 @@
import { TimeSerie, Options } from '@chartwerk/core';
type ScatterDataParams = {
pointType: PointType;
lineType: LineType;
pointSize: number;
colorFormatter?: ColorFormatter
}
type ScatterOptionsParams = {
voronoiRadius: number;
circleView: boolean;
renderGrid: boolean;
}
export type ScatterData = TimeSerie & Partial<ScatterDataParams>;
export type ScatterOptions = Options & Partial<ScatterOptionsParams>;
export enum PointType {
NONE = 'none',
CIRCLE = 'circle',
RECTANGLE = 'rectangle'
}
export enum LineType {
NONE = 'none',
SOLID = 'solid',
DASHED = 'dashed'
}
export type ColorFormatter = (datapoint: number[]) => string;

22
tsconfig.json
Unescape View File

@ -0,0 +1,22 @@
{
"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"
}
}
Write Preview
Loading…
Cancel
Save