Fixes the vector

This commit is contained in:
Roman Galochkin 2020-02-20 09:11:01 +03:00
parent 25f83d5290
commit 802b0a89da

View File

@ -28,9 +28,16 @@ export class CdfChartD3 {
onHover: (e) => { onHover: (e) => {
}, },
}; };
this.calc = {};
this.chart = null;
this.svg = null;
this._container = null;
this.hoverLine = null; this.hoverLine = null;
this.xScale = null; this.xScale = null;
this.dataPoints = null; this.dataPoints = null;
this.mouseover = this.mouseover.bind(this); this.mouseover = this.mouseover.bind(this);
this.mouseout = this.mouseout.bind(this); this.mouseout = this.mouseout.bind(this);
this.formatDates = this.formatDates.bind(this); this.formatDates = this.formatDates.bind(this);
@ -116,67 +123,65 @@ export class CdfChartD3 {
return this; return this;
} }
/**
* @param key
* @returns {[]}
*/
getDataPoints(key) {
const dt = [];
const data = this.attrs.data[key];
const len = data.xs.length;
for (let i = 0; i < len; i++) {
dt.push({ x: data.xs[i], y: data.ys[i] });
}
return dt;
}
render() { render() {
const attrs = this.attrs; this._container = d3.select(this.attrs.container);
const container = d3.select(attrs.container); if (this._container.node() === null) {
if (container.node() === null) {
console.error('Container for D3 is not defined.'); console.error('Container for D3 is not defined.');
return; return;
} }
// Sets the width from the DOM element. // Sets the width from the DOM element.
const containerRect = container.node().getBoundingClientRect(); const containerRect = this._container.node().getBoundingClientRect();
if (containerRect.width > 0) { if (containerRect.width > 0) {
attrs.svgWidth = containerRect.width; this.attrs.svgWidth = containerRect.width;
} }
// Calculated properties. // Calculated properties.
const calc = {}; this.calc.chartLeftMargin = this.attrs.marginLeft;
calc.chartLeftMargin = attrs.marginLeft; this.calc.chartTopMargin = this.attrs.marginTop;
calc.chartTopMargin = attrs.marginTop; this.calc.chartWidth = this.attrs.svgWidth - this.attrs.marginRight - this.attrs.marginLeft;
calc.chartWidth = attrs.svgWidth - attrs.marginRight - attrs.marginLeft; this.calc.chartHeight = this.attrs.svgHeight - this.attrs.marginBottom - this.attrs.marginTop;
calc.chartHeight = attrs.svgHeight - attrs.marginBottom - attrs.marginTop;
const areaColorRange = d3.scaleOrdinal().range(attrs.areaColors); // Add svg.
this.svg = this._container
.createObject({ tag: 'svg', selector: 'svg-chart-container' })
.attr('width', "100%")
.attr('height', this.attrs.svgHeight)
.attr('pointer-events', 'none');
// Add container g element.
this.chart = this.svg
.createObject({ tag: 'g', selector: 'chart' })
.attr(
'transform',
'translate(' + this.calc.chartLeftMargin + ',' + this.calc.chartTopMargin + ')',
);
// A
const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors);
this.dataPoints = [this.getDataPoints('primary')]; this.dataPoints = [this.getDataPoints('primary')];
// Scales. // Scales.
const xMin = d3.min(attrs.data.primary.xs); const xMin = d3.min(this.attrs.data.primary.xs);
const xMax = d3.max(attrs.data.primary.xs); const xMax = d3.max(this.attrs.data.primary.xs);
if (attrs.scale === 'linear') { if (this.attrs.scale === 'linear') {
this.xScale = d3.scaleLinear() this.xScale = d3.scaleLinear()
.domain([attrs.minX || xMin, attrs.maxX || xMax]) .domain([this.attrs.minX || xMin, this.attrs.maxX || xMax])
.range([0, calc.chartWidth]); .range([0, this.calc.chartWidth]);
} else { } else {
this.xScale = d3.scaleLog() this.xScale = d3.scaleLog()
.base(attrs.logBase) .base(this.attrs.logBase)
.domain([attrs.minX, attrs.maxX]) .domain([this.attrs.minX, this.attrs.maxX])
.range([0, calc.chartWidth]); .range([0, this.calc.chartWidth]);
} }
const yMin = d3.min(attrs.data.primary.ys); const yMin = d3.min(this.attrs.data.primary.ys);
const yMax = d3.max(attrs.data.primary.ys); const yMax = d3.max(this.attrs.data.primary.ys);
this.yScale = d3.scaleLinear() this.yScale = d3.scaleLinear()
.domain([yMin, yMax]) .domain([yMin, yMax])
.range([calc.chartHeight, 0]); .range([this.calc.chartHeight, 0]);
// Axis generator. // Axis generator.
if (!!this.attrs.timeScale) { if (!!this.attrs.timeScale) {
@ -189,7 +194,7 @@ export class CdfChartD3 {
const xScaleTime = d3.scaleTime() const xScaleTime = d3.scaleTime()
.domain([left.toDate(), right.toDate()]) .domain([left.toDate(), right.toDate()])
.nice() .nice()
.range([0, calc.chartWidth]); .range([0, this.calc.chartWidth]);
this.xAxis = d3.axisBottom() this.xAxis = d3.axisBottom()
.scale(xScaleTime) .scale(xScaleTime)
@ -219,26 +224,11 @@ export class CdfChartD3 {
const area = d3.area() const area = d3.area()
.x(d => this.xScale(d.x)) .x(d => this.xScale(d.x))
.y1(d => this.yScale(d.y)) .y1(d => this.yScale(d.y))
.y0(calc.chartHeight); .y0(this.calc.chartHeight);
// Add svg.
const svg = container
.createObject({ tag: 'svg', selector: 'svg-chart-container' })
.attr('width', "100%")
.attr('height', attrs.svgHeight)
.attr('pointer-events', 'none');
// Add container g element.
this.chart = svg
.createObject({ tag: 'g', selector: 'chart' })
.attr(
'transform',
'translate(' + calc.chartLeftMargin + ',' + calc.chartTopMargin + ')',
);
// Add axis. // Add axis.
this.chart.createObject({ tag: 'g', selector: 'axis' }) this.chart.createObject({ tag: 'g', selector: 'axis' })
.attr('transform', 'translate(' + 0 + ',' + calc.chartHeight + ')') .attr('transform', 'translate(' + 0 + ',' + this.calc.chartHeight + ')')
.call(this.xAxis); .call(this.xAxis);
// Draw area. // Draw area.
@ -253,7 +243,7 @@ export class CdfChartD3 {
.attr('opacity', (d, i) => i === 0 ? 0.7 : 0.5); .attr('opacity', (d, i) => i === 0 ? 0.7 : 0.5);
// Draw line. // Draw line.
if (attrs.showDistributionLines) { if (this.attrs.showDistributionLines) {
this.chart this.chart
.createObjectsWithData({ .createObjectsWithData({
tag: 'path', tag: 'path',
@ -266,13 +256,13 @@ export class CdfChartD3 {
.attr('fill', 'none'); .attr('fill', 'none');
} }
if (attrs.showVerticalLine) { if (this.attrs.showVerticalLine) {
this.chart this.chart
.createObject({ tag: 'line', selector: 'v-line' }) .createObject({ tag: 'line', selector: 'v-line' })
.attr('x1', this.xScale(attrs.verticalLine)) .attr('x1', this.xScale(this.attrs.verticalLine))
.attr('x2', this.xScale(attrs.verticalLine)) .attr('x2', this.xScale(this.attrs.verticalLine))
.attr('y1', 0) .attr('y1', 0)
.attr('y2', calc.chartHeight) .attr('y2', this.calc.chartHeight)
.attr('stroke-width', 1.5) .attr('stroke-width', 1.5)
.attr('stroke-dasharray', '6 6') .attr('stroke-dasharray', '6 6')
.attr('stroke', 'steelblue'); .attr('stroke', 'steelblue');
@ -283,7 +273,7 @@ export class CdfChartD3 {
.attr('x1', 0) .attr('x1', 0)
.attr('x2', 0) .attr('x2', 0)
.attr('y1', 0) .attr('y1', 0)
.attr('y2', calc.chartHeight) .attr('y2', this.calc.chartHeight)
.attr('opacity', 0) .attr('opacity', 0)
.attr('stroke-width', 1.5) .attr('stroke-width', 1.5)
.attr('stroke-dasharray', '6 6') .attr('stroke-dasharray', '6 6')
@ -293,8 +283,8 @@ export class CdfChartD3 {
const thi$ = this; const thi$ = this;
this.chart this.chart
.createObject({ tag: 'rect', selector: 'mouse-rect' }) .createObject({ tag: 'rect', selector: 'mouse-rect' })
.attr('width', calc.chartWidth) .attr('width', this.calc.chartWidth)
.attr('height', calc.chartHeight) .attr('height', this.calc.chartHeight)
.attr('fill', 'transparent') .attr('fill', 'transparent')
.attr('pointer-events', 'all') .attr('pointer-events', 'all')
.on('mouseover', function () { .on('mouseover', function () {
@ -305,6 +295,8 @@ export class CdfChartD3 {
}) })
.on('mouseout', this.mouseout); .on('mouseout', this.mouseout);
// B
return this; return this;
} }
@ -368,6 +360,22 @@ export class CdfChartD3 {
return d3.timeYear.every(1); return d3.timeYear.every(1);
} }
} }
/**
* @param key
* @returns {[]}
*/
getDataPoints(key) {
const dt = [];
const data = this.attrs.data[key];
const len = data.xs.length;
for (let i = 0; i < len; i++) {
dt.push({ x: data.xs[i], y: data.ys[i] });
}
return dt;
}
} }
/** /**