Browse Source

use gitlab core

merge-requests/2/head
vargburz 3 years ago
parent
commit
872e2357a7
  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

@ -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

@ -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

File diff suppressed because one or more lines are too long

5
package-lock.json generated

@ -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

@ -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

@ -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

@ -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);
}

Loading…
Cancel
Save