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

Merge branch 'core-from-gitlab' into 'main' 

npm core

See merge request chartwerk/scatter-pod!2
merge-requests/3/merge
Alexander Velikiy 2 years ago
parent
63475dcc2c 872e2357a7
commit
ba5641640b
7 changed files with 30 additions and 38 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. 2
      demo.html
  2. 4
      dist/index.d.ts
  3. 2
      dist/index.js
  4. 5
      package-lock.json
  5. 4
      package.json
  6. 6
      src/delaunay.ts
  7. 45
      src/index.ts

2
demo.html
Unescape View File

@ -37,7 +37,6 @@
color: 'purple',
pointType: 'rectangle',
pointSize: 5,
yOrientation: 'right',
}
],
{
@ -77,7 +76,6 @@
zoomOut: () => { pod.render() }
},
margin: { top: 30, right: 30, bottom: 40, left: 30 },
circleView: true,
}
);
pod.render();

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

@ -3,11 +3,11 @@ 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;
metricContainer: any;
_delaunayDiagram: DelaunayDiagram;
constructor(el: HTMLElement, _series?: ScatterData[], _options?: ScatterOptions);
renderMetrics(): void;
renderMetricContainer(): void;
clearAllMetrics(): void;
protected updateCrosshair(): void;
appendCrosshairPoints(): void;
protected appendCrosshairPoint(serieIdx: number): void;

2
dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

5
package-lock.json generated
Unescape View File

@ -5,8 +5,9 @@
"requires": true,
"dependencies": {
"@chartwerk/core": {
"version": "github:chartwerk/core#532eddbc8ad938091b1d9ec1693cec5eddfdbfc2",
"from": "github:chartwerk/core#532eddbc8ad938091b1d9ec1693cec5eddfdbfc2"
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.4.tgz",
"integrity": "sha512-dDk+xjcR0XVzTrsQnXlQh6syg41gdn2yh6+q+HPMHwG28+OpFoyRufIPhxzobWp8orINn0PtlfnzgYkfnuSIPg=="
},
"@types/d3": {
"version": "5.16.4",

4
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "@chartwerk/scatter-pod",
"version": "0.2.4",
"version": "0.3.0",
"description": "Chartwerk scatter pod",
"main": "dist/index.js",
"scripts": {
@ -12,7 +12,7 @@
"author": "CorpGlory",
"license": "Apache-2.0",
"dependencies": {
"@chartwerk/core": "github:chartwerk/core#532eddbc8ad938091b1d9ec1693cec5eddfdbfc2"
"@chartwerk/core": "^0.3.4"
},
"devDependencies": {
"@types/d3": "^5.7.2",

6
src/delaunay.ts
Unescape View File

@ -33,8 +33,8 @@ export class DelaunayDiagram {
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]),
(d: number[]) => xScale(d[0]),
(d: number[]) => yScale(this.series[_.last(d)].yOrientation)(d[1]),
);
console.timeEnd('delaunay-init');
}
@ -70,7 +70,7 @@ export class DelaunayDiagram {
}
private concatSeriesDatapoints(series: ScatterData[]): number[][] {
// return type row: [ 0:y, 1:x, 2?:custom value, last:serieIdx ]
// 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));

45
src/index.ts
Unescape View File

@ -15,7 +15,7 @@ const DEFAULT_LINE_TYPE = LineType.NONE;
const DEFAULT_LINE_DASHED_AMOUNT = 4;
export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOptions> {
_metricsContainer: any;
metricContainer: any;
_delaunayDiagram: DelaunayDiagram;
constructor(el: HTMLElement, _series: ScatterData[] = [], _options: ScatterOptions = {}) {
@ -27,8 +27,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
this.renderNoDataPointsMessage();
return;
}
this.updateCrosshair();
this.renderMetricContainer();
this.updateCrosshair();
this._delaunayDiagram = new DelaunayDiagram(this.series, this.xScale, this.getYScale.bind(this));
@ -36,19 +35,13 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
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');
clearAllMetrics(): void {
// TODO: temporary hack before it will be implemented in core.
this.chartContainer.selectAll('.metric-el').remove();
}
protected updateCrosshair(): void {
this.crosshair.selectAll('circle').remove();
// TODO: Crosshair class, which can be used as Pod
this.appendCrosshairPoints();
}
@ -109,10 +102,10 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
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]));
.x((d: [number, number]) => this.xScale(d[0]))
.y((d: [number, number]) => this.getYScale(orientation)(d[1]));
this._metricsContainer
this.metricContainer
.append('path')
.datum(datapoints)
.attr('class', 'metric-path')
@ -130,7 +123,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
return;
}
this._metricsContainer.selectAll(null)
this.metricContainer.selectAll(null)
.data(this._delaunayDiagram.data)
.enter()
.append('circle')
@ -139,10 +132,10 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
.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]));
.attr('cx', (d: any[]) => this.xScale(d[0]))
.attr('cy', (d: any[]) => this.getYScale(this.series[_.last(d)].yOrientation)(d[1]));
this._metricsContainer.selectAll(null)
this.metricContainer.selectAll(null)
.data(this._delaunayDiagram.data)
.enter()
.append('rect')
@ -151,8 +144,8 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
.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('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);
}
@ -185,10 +178,10 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
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('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('fill', colorFormatter !== undefined ? colorFormatter(datapoint) : this.series[serieIdx].color)
.style('display', null);
}

Write Preview
Loading…
Cancel
Save