Adds options

This commit is contained in:
Roman Galochkin 2020-02-26 10:39:57 +03:00
parent ca7cf60f5c
commit 98c26da6eb
2 changed files with 29 additions and 95 deletions

View File

@ -29,6 +29,9 @@ export class CdfChartD3 {
continuous: null,
discrete: null,
},
yMaxContinuousDomainFactor: 1,
yMaxDiscreteDomainFactor: 1,
options: {},
onHover: (e) => {
},
};
@ -47,83 +50,8 @@ export class CdfChartD3 {
this.formatDates = this.formatDates.bind(this);
}
svgWidth(svgWidth) {
this.attrs.svgWidth = svgWidth;
return this;
}
svgHeight(height) {
this.attrs.svgHeight = height;
return this;
}
maxX(maxX) {
this.attrs.maxX = maxX;
return this;
}
minX(minX) {
this.attrs.minX = minX;
return this;
}
scale(scale) {
this.attrs.scale = scale;
return this;
}
timeScale(timeScale) {
this.attrs.timeScale = timeScale;
return this;
}
onHover(onHover) {
this.attrs.onHover = onHover;
return this;
}
marginBottom(marginBottom) {
this.attrs.marginBottom = marginBottom;
return this;
}
marginLeft(marginLeft) {
this.attrs.marginLeft = marginLeft;
return this;
}
marginRight(marginRight) {
this.attrs.marginRight = marginRight;
return this;
}
marginTop(marginTop) {
this.attrs.marginTop = marginTop;
return this;
}
showDistributionLines(showDistributionLines) {
this.attrs.showDistributionLines = showDistributionLines;
return this;
}
showDistributionYAxis(showDistributionYAxis) {
this.attrs.showDistributionYAxis = showDistributionYAxis;
return this;
}
verticalLine(verticalLine) {
this.attrs.verticalLine = verticalLine;
return this;
}
showVerticalLine(showVerticalLine) {
this.attrs.showVerticalLine = showVerticalLine;
return this;
}
container(container) {
this.attrs.container = container;
set(name, value) {
_.set(this.attrs, [name], value);
return this;
}
@ -197,8 +125,11 @@ export class CdfChartD3 {
const yMax = d3.max(this.attrs.data.continuous.ys);
// X-domains.
const yMaxDomainFactor = _.get(this.attrs, 'yMaxContinuousDomainFactor', 1);
const xMinDomain = xMin;
const xMaxDomain = xMax;
const yMinDomain = yMin;
const yMaxDomain = yMax * yMaxDomainFactor;
// X-scale.
let xScale = this.attrs.scale === 'linear'
@ -212,7 +143,7 @@ export class CdfChartD3 {
// Y-scale.
const yScale = d3.scaleLinear()
.domain([yMin, yMax])
.domain([yMinDomain, yMaxDomain])
.range([this.calc.chartHeight, 0]);
// X-axis.
@ -374,8 +305,9 @@ export class CdfChartD3 {
.call(d3.axisBottom(distributionChart.xScale));
// Y-domain.
const yMaxDomainFactor = _.get(this.attrs, 'yMaxDiscreteDomainFactor', 1);
const yMinDomain = 0;
const yMaxDomain = yMax * 2;
const yMaxDomain = yMax * yMaxDomainFactor;
// Y-scale.
const yScale = d3.scaleLinear()

View File

@ -34,26 +34,28 @@ function CdfChartReact(props) {
useEffect(() => {
new CdfChartD3()
.svgWidth(width)
.svgHeight(props.height)
.maxX(props.maxX)
.minX(props.minX)
.onHover(props.onHover)
.marginBottom(props.marginBottom || 15)
.marginLeft(30)
.marginRight(30)
.marginTop(5)
.showDistributionLines(props.showDistributionLines)
.showDistributionYAxis(props.showDistributionYAxis)
.verticalLine(props.verticalLine)
.showVerticalLine(props.showVerticalLine)
.container(containerRef.current)
.set('svgWidth', width)
.set('svgHeight', props.height)
.set('maxX', props.maxX)
.set('minX', props.minX)
.set('onHover', props.onHover)
.set('marginBottom',props.marginBottom || 15)
.set('marginLeft', 30)
.set('marginRight', 30)
.set('marginTop', 5)
.set('showDistributionLines', props.showDistributionLines)
.set('showDistributionYAxis', props.showDistributionYAxis)
.set('verticalLine', props.verticalLine)
.set('showVerticalLine', props.showVerticalLine)
.set('container', containerRef.current)
.set('scale', scale)
.set('timeScale', props.timeScale)
.set('yMaxContinuousDomainFactor', 1)
.set('yMaxDiscreteDomainFactor', 1)
.data({
continuous: props.continuous,
discrete: props.discrete,
})
.scale(scale)
.timeScale(props.timeScale)
.render();
});