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

circles not working

merge-requests/5/head
vargburz 2 years ago
parent
9f7d2cd182
commit
5634e9e615
6 changed files with 96 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      package.json
  2. 150
      src/index.ts
  3. 13
      src/models/delaunay.ts
  4. 23
      src/models/scatter_series.ts
  5. 6
      src/types.ts
  6. 6
      yarn.lock

3
package.json
Unescape View File

@ -6,7 +6,8 @@
"scripts": {
"build": "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",

150
src/index.ts
Unescape View File

@ -1,17 +1,14 @@
import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, yAxisOrientation, CrosshairOrientation } from '@chartwerk/core';
import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, yAxisOrientation, CrosshairOrientation } from '@chartwerk/core';
import { ScatterData, ScatterOptions, PointType, LineType } 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> {
@ -20,16 +17,17 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
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.visibleSeries, this.state.xScale, this.getYScale.bind(this));
this.renderLines();
this.renderPoints();
@ -47,21 +45,20 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
}
appendCrosshairPoints(): void {
this.series.forEach((serie: ScatterData, serieIdx: number) => {
this.appendCrosshairPoint(serieIdx);
this.series.visibleSeries.forEach((serie: ScatterData) => {
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 +67,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('height', this.getCrosshairCircleBackgroundSize(serieIdx))
.attr('width', this.getCrosshairCircleBackgroundSize(size, pointType))
.attr('height', this.getCrosshairCircleBackgroundSize(size, pointType))
.attr('clip-path', `url(#${this.rectClipId})`)
.style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
.style('pointer-events', 'none')
@ -83,35 +80,31 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
}
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);
this.series.visibleSeries.forEach(serie => {
this.renderLine(serie);
});
}
renderLine(datapoints: number[][], lineType: LineType, color: string, orientation: yAxisOrientation): void {
if(lineType === LineType.NONE) {
renderLine(serie: ScatterData): void {
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]))
.y((d: [number, number]) => this.getYScale(orientation)(d[1]));
.x((d: [number, number]) => this.state.xScale(d[0]))
.y((d: [number, number]) => this.getYScale(serie.yOrientation)(d[1]));
this.metricContainer
.append('path')
.datum(datapoints)
.datum(serie.datapoints)
.attr('class', 'metric-path')
.attr('fill', 'none')
.style('pointer-events', 'none')
.attr('stroke', color)
.attr('stroke', serie.color)
.attr('stroke-width', 1)
.attr('stroke-opacity', 0.7)
.attr('stroke-dasharray', strokeDasharray)
@ -127,46 +120,47 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
.data(this._delaunayDiagram.data)
.enter()
.append('circle')
.filter((d: number[]) => this.series[_.last(d)].pointType !== PointType.RECTANGLE)
.filter((d: number[]) => this.getSerieByIdx(_.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)
.attr('r', (d: number[]) => this.getSerieByIdx(_.last(d))?.pointSize)
.style('fill', (d: number[], i: number) => this.getSeriesColorFromDataRow(d, i))
.style('pointer-events', 'none')
.attr('cx', (d: any[]) => this.xScale(d[0]))
.attr('cy', (d: any[]) => this.getYScale(this.series[_.last(d)].yOrientation)(d[1]));
.attr('cx', (d: any[]) => this.state.xScale(d[0]))
.attr('cy', (d: any[]) => this.getYScale(this.getSerieByIdx(_.last(d))?.yOrientation)(d[1]));
this.metricContainer.selectAll(null)
.data(this._delaunayDiagram.data)
.enter()
.append('rect')
.filter((d: number[]) => this.series[_.last(d)].pointType === PointType.RECTANGLE)
.filter((d: number[]) => this.getSerieByIdx(_.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)))
.attr('r', (d: number[]) => this.getSerieByIdx(_.last(d))?.pointSize)
.style('fill', (d: number[]) => this.getSerieByIdx(_.last(d))?.color)
.style('pointer-events', 'none')
.attr('x', (d: number[]) => this.xScale(d[0]) - (this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE) / 2)
.attr('y', (d: number[]) => this.getYScale(this.series[_.last(d)].yOrientation)(d[1]) - (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);
.attr('x', (d: number[]) => this.state.xScale(d[0]) - this.getSerieByIdx(_.last(d))?.pointSize / 2)
.attr('y', (d: number[]) => this.getYScale(this.getSerieByIdx(_.last(d)).yOrientation)(d[1]) - this.getSerieByIdx(_.last(d))?.pointSize / 2)
.attr('width', (d: number[]) => this.getSerieByIdx(_.last(d))?.pointSize)
.attr('height', (d: number[]) => this.getSerieByIdx(_.last(d))?.pointSize);
}
getSerieByIdx(idx: number): ScatterData | undefined {
return _.find(this.series.visibleSeries, serie => serie.idx = idx);
}
getSeriesColorFromDataRow(values: number[], rowIdx: number): string {
const seriesIdx = _.last(values);
if(this.series[seriesIdx].colorFormatter) {
return this.series[seriesIdx].colorFormatter(values, rowIdx);
const serie = this.getSerieByIdx(seriesIdx);
if(serie?.colorFormatter) {
return serie.colorFormatter(values, rowIdx);
}
return this.getSerieColor(seriesIdx);
return serie.color;
}
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');
}
this._delaunayDiagram.setDelaunayDiagram(this.state.xScale, this.getYScale.bind(this));
this.options.callbackPanningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]);
}
unhighlight(): void {
@ -182,40 +176,33 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
}
const serieIdx = _.last(datapoint);
const serieOrientation = this.series[serieIdx].yOrientation;
const size = this.getCrosshairCircleBackgroundSize(serieIdx);
const serie = this.getSerieByIdx(serieIdx);
const size = this.getCrosshairCircleBackgroundSize(serie.pointSize, serie.pointType);
this.crosshair.selectAll(`.crosshair-point-${serieIdx}`)
.attr('cx', this.xScale(datapoint[0]))
.attr('cy', this.getYScale(serieOrientation)(datapoint[1]))
.attr('x', this.xScale(datapoint[0]) - size / 2)
.attr('y', this.getYScale(serieOrientation)(datapoint[1]) - size / 2)
.attr('cx', this.state.xScale(datapoint[0]))
.attr('cy', this.getYScale(serie.yOrientation)(datapoint[1]))
.attr('x', this.state.xScale(datapoint[0]) - size / 2)
.attr('y', this.getYScale(serie.yOrientation)(datapoint[1]) - size / 2)
.attr('fill', this.getSeriesColorFromDataRow(datapoint, pointIdx))
.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;
protected getCrosshairCircleBackgroundSize(pointSize: number, pointType: PointType): number {
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 eventY = this.yScale(values.y);
const eventX = this.state.xScale(values.x);
const eventY = this.state.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({
this.options.callbackSharedCrosshairMove({
datapoints,
eventX, eventY
});
@ -247,7 +234,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
}
findAndHighlightDatapoints(eventX: number, eventY: number): { values: any[], pointIdx: number } | null {
if(this.series === undefined || this.series.length === 0) {
if(!this.series.isSeriesAvailable) {
return null;
}
@ -265,14 +252,11 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
}
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}`)
}
@ -287,8 +271,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
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) {
if(this.isPanning === true || this.isBrushing === true) {
this.crosshair.style('display', 'none');
return;
} else {
@ -299,16 +282,13 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
// 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({
this.options.callbackMouseMove({
x: d3.event.clientX,
y: d3.event.clientY,
xval: this.xScale.invert(eventX),
yval: this.xScale.invert(eventY),
xval: this.state.xScale.invert(eventX),
yval: this.state.xScale.invert(eventY),
highlighted,
chartX: eventX,
chartWidth: this.width
@ -316,7 +296,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
}
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;
}
@ -324,9 +304,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
}
onMouseOut(): void {
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.mouseOut !== undefined) {
this.options.eventsCallbacks.mouseOut();
}
this.options.callbackMouseOut();
this.crosshair.style('display', 'none');
}
}
@ -356,4 +334,4 @@ export const VueChartwerkScatterPodObject = {
}
};
export { ScatterData, ScatterOptions, TickOrientation, TimeFormat, PointType, LineType };
export { ScatterData, ScatterOptions, TimeFormat, PointType, LineType };

13
src/delaunay.ts → src/models/delaunay.ts
Unescape View File

@ -1,4 +1,4 @@
import { ScatterData, PointType } from './types';
import { ScatterData, PointType } from '../types';
import { Delaunay } from 'd3-delaunay';
@ -72,18 +72,9 @@ export class DelaunayDiagram {
private concatSeriesDatapoints(series: ScatterData[]): number[][] {
// return type row: [ 0:x, 1:y, 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));
const datapointsWithOptions = _.map(serie.datapoints, row => _.concat(row, serie.idx));
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;
}
}

23
src/models/scatter_series.ts
Unescape View File

@ -0,0 +1,23 @@
import { CoreSeries } from '@chartwerk/core';
import { ScatterData, PointType, LineType } from '../types';
const DEFAULT_POINT_SIZE = 4;
const SCATTER_DATA_DEFAULTS = {
pointType: PointType.CIRCLE,
lineType: LineType.NONE,
pointSize: DEFAULT_POINT_SIZE,
colorFormatter: undefined
};
export class ScatterSeries extends CoreSeries<ScatterData> {
constructor(series: ScatterData[]) {
super(series);
}
protected get defaults(): ScatterData {
return { ...this._coreDefaults, ...SCATTER_DATA_DEFAULTS };
}
}

6
src/types.ts
Unescape View File

@ -1,4 +1,4 @@
import { TimeSerie, Options } from '@chartwerk/core';
import { Serie, Options } from '@chartwerk/core';
type ScatterDataParams = {
@ -9,10 +9,8 @@ type ScatterDataParams = {
}
type ScatterOptionsParams = {
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 {

6
yarn.lock
Unescape View File

@ -6,12 +6,12 @@ __metadata:
cacheKey: 8
"@chartwerk/core@npm:latest":
version: 0.5.4
resolution: "@chartwerk/core@npm:0.5.4"
version: 0.6.0
resolution: "@chartwerk/core@npm:0.6.0"
dependencies:
d3: ^5.7.2
lodash: ^4.14.149
checksum: 0d686409377d6880f0012db3d9c1e1910cf3660885ac13196dabe93f57eca53984cf52dcf781b2876373fe9efc7b9d0209117cbcd811c50892b1de4f38a4a37f
checksum: db368ea1ba1f9b48583c3da953998206329ea552eaff4e9f13cb02b25e0289464eca268baa86f045d62552a0859fc3ee2ccf70e7df95b58327bba217f9888169
languageName: node
linkType: hard

Write Preview
Loading…
Cancel
Save