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

use gitlab core

merge-requests/2/head
vargburz 3 years ago
parent
63475dcc2c
commit
872e2357a7
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
Unified 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', color: 'purple',
pointType: 'rectangle', pointType: 'rectangle',
pointSize: 5, pointSize: 5,
yOrientation: 'right',
} }
], ],
{ {
@ -77,7 +76,6 @@
zoomOut: () => { pod.render() } zoomOut: () => { pod.render() }
}, },
margin: { top: 30, right: 30, bottom: 40, left: 30 }, margin: { top: 30, right: 30, bottom: 40, left: 30 },
circleView: true,
} }
); );
pod.render(); 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 { DelaunayDiagram } from './delaunay';
import * as d3 from 'd3'; import * as d3 from 'd3';
export declare class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOptions> { export declare class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOptions> {
_metricsContainer: any; metricContainer: any;
_delaunayDiagram: DelaunayDiagram; _delaunayDiagram: DelaunayDiagram;
constructor(el: HTMLElement, _series?: ScatterData[], _options?: ScatterOptions); constructor(el: HTMLElement, _series?: ScatterData[], _options?: ScatterOptions);
renderMetrics(): void; renderMetrics(): void;
renderMetricContainer(): void; clearAllMetrics(): void;
protected updateCrosshair(): void; protected updateCrosshair(): void;
appendCrosshairPoints(): void; appendCrosshairPoints(): void;
protected appendCrosshairPoint(serieIdx: number): 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, "requires": true,
"dependencies": { "dependencies": {
"@chartwerk/core": { "@chartwerk/core": {
"version": "github:chartwerk/core#532eddbc8ad938091b1d9ec1693cec5eddfdbfc2", "version": "0.3.4",
"from": "github:chartwerk/core#532eddbc8ad938091b1d9ec1693cec5eddfdbfc2" "resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.4.tgz",
"integrity": "sha512-dDk+xjcR0XVzTrsQnXlQh6syg41gdn2yh6+q+HPMHwG28+OpFoyRufIPhxzobWp8orINn0PtlfnzgYkfnuSIPg=="
}, },
"@types/d3": { "@types/d3": {
"version": "5.16.4", "version": "5.16.4",

4
package.json
Unescape View File

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

6
src/delaunay.ts
Unescape View File

@ -33,8 +33,8 @@ export class DelaunayDiagram {
console.time('delaunay-init'); console.time('delaunay-init');
this._delaunayDiagram = Delaunay.from( this._delaunayDiagram = Delaunay.from(
this._delaunayData, this._delaunayData,
(d: number[]) => xScale(d[1]), (d: number[]) => xScale(d[0]),
(d: number[]) => yScale(this.series[_.last(d)].yOrientation)(d[0]), (d: number[]) => yScale(this.series[_.last(d)].yOrientation)(d[1]),
); );
console.timeEnd('delaunay-init'); console.timeEnd('delaunay-init');
} }
@ -70,7 +70,7 @@ export class DelaunayDiagram {
} }
private concatSeriesDatapoints(series: ScatterData[]): number[][] { 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 datapointsList = _.map(series, serie => {
const serieIdx = this.getSerieIdxByTarget(serie.target); const serieIdx = this.getSerieIdxByTarget(serie.target);
const datapointsWithOptions = _.map(serie.datapoints, row => _.concat(row, serieIdx)); 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; const DEFAULT_LINE_DASHED_AMOUNT = 4;
export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOptions> { export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOptions> {
_metricsContainer: any; metricContainer: any;
_delaunayDiagram: DelaunayDiagram; _delaunayDiagram: DelaunayDiagram;
constructor(el: HTMLElement, _series: ScatterData[] = [], _options: ScatterOptions = {}) { constructor(el: HTMLElement, _series: ScatterData[] = [], _options: ScatterOptions = {}) {
@ -27,8 +27,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
this.renderNoDataPointsMessage(); this.renderNoDataPointsMessage();
return; return;
} }
this.updateCrosshair(); this.updateCrosshair();
this.renderMetricContainer();
this._delaunayDiagram = new DelaunayDiagram(this.series, this.xScale, this.getYScale.bind(this)); 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(); this.renderPoints();
} }
renderMetricContainer(): void { clearAllMetrics(): void {
// container for clip path // TODO: temporary hack before it will be implemented in core.
const clipContatiner = this.chartContainer this.chartContainer.selectAll('.metric-el').remove();
.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 { protected updateCrosshair(): void {
this.crosshair.selectAll('circle').remove();
// TODO: Crosshair class, which can be used as Pod // TODO: Crosshair class, which can be used as Pod
this.appendCrosshairPoints(); this.appendCrosshairPoints();
} }
@ -109,10 +102,10 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
strokeDasharray = DEFAULT_LINE_DASHED_AMOUNT; strokeDasharray = DEFAULT_LINE_DASHED_AMOUNT;
} }
const lineGenerator = this.d3.line() const lineGenerator = this.d3.line()
.x((d: [number, number]) => this.xScale(d[1])) .x((d: [number, number]) => this.xScale(d[0]))
.y((d: [number, number]) => this.getYScale(orientation)(d[0])); .y((d: [number, number]) => this.getYScale(orientation)(d[1]));
this._metricsContainer this.metricContainer
.append('path') .append('path')
.datum(datapoints) .datum(datapoints)
.attr('class', 'metric-path') .attr('class', 'metric-path')
@ -130,7 +123,7 @@ export class ChartwerkScatterPod extends ChartwerkPod<ScatterData, ScatterOption
return; return;
} }
this._metricsContainer.selectAll(null) this.metricContainer.selectAll(null)
.data(this._delaunayDiagram.data) .data(this._delaunayDiagram.data)
.enter() .enter()
.append('circle') .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) .attr('r', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE)
.style('fill', (d: number[]) => this.getSerieColor(_.last(d))) .style('fill', (d: number[]) => this.getSerieColor(_.last(d)))
.style('pointer-events', 'none') .style('pointer-events', 'none')
.attr('cx', (d: any[]) => this.xScale(d[1])) .attr('cx', (d: any[]) => this.xScale(d[0]))
.attr('cy', (d: any[]) => this.getYScale(this.series[_.last(d)].yOrientation)(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) .data(this._delaunayDiagram.data)
.enter() .enter()
.append('rect') .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) .attr('r', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE)
.style('fill', (d: number[]) => this.getSerieColor(_.last(d))) .style('fill', (d: number[]) => this.getSerieColor(_.last(d)))
.style('pointer-events', 'none') .style('pointer-events', 'none')
.attr('x', (d: number[]) => this.xScale(d[1]) - (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[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('width', (d: number[]) => this.series[_.last(d)].pointSize || DEFAULT_POINT_SIZE)
.attr('height', (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 size = this.getCrosshairCircleBackgroundSize(serieIdx);
const colorFormatter = this.series[serieIdx].colorFormatter; const colorFormatter = this.series[serieIdx].colorFormatter;
this.crosshair.selectAll(`.crosshair-point-${serieIdx}`) this.crosshair.selectAll(`.crosshair-point-${serieIdx}`)
.attr('cx', this.xScale(datapoint[1])) .attr('cx', this.xScale(datapoint[0]))
.attr('cy', this.getYScale(serieOrientation)(datapoint[0])) .attr('cy', this.getYScale(serieOrientation)(datapoint[1]))
.attr('x', this.xScale(datapoint[1]) - size / 2) .attr('x', this.xScale(datapoint[0]) - size / 2)
.attr('y', this.getYScale(serieOrientation)(datapoint[0]) - size / 2) .attr('y', this.getYScale(serieOrientation)(datapoint[1]) - size / 2)
.attr('fill', colorFormatter !== undefined ? colorFormatter(datapoint) : this.series[serieIdx].color) .attr('fill', colorFormatter !== undefined ? colorFormatter(datapoint) : this.series[serieIdx].color)
.style('display', null); .style('display', null);
} }

Write Preview
Loading…
Cancel
Save