Fixes names of options

This commit is contained in:
Roman Galochkin 2020-03-04 13:24:51 +03:00
parent caaff9d802
commit b171b0af46
2 changed files with 23 additions and 19 deletions

View File

@ -18,23 +18,27 @@ export class CdfChartD3 {
marginLeft: 5, marginLeft: 5,
container: null, container: null,
// X
minX: null, minX: null,
maxX: null, maxX: null,
scale: 'linear', xScaleType: 'linear',
timeScale: null, xScaleTimeOptions: null,
showDistributionLines: true, xScaleLogBase: 10,
// Y
yMaxContinuousDomainFactor: 1,
yMaxDiscreteDomainFactor: 1,
showDistributionYAxis: false, showDistributionYAxis: false,
showDistributionLines: true,
areaColors: ['#E1E5EC', '#E1E5EC'], areaColors: ['#E1E5EC', '#E1E5EC'],
logBase: 10,
verticalLine: 110, verticalLine: 110,
showVerticalLine: true, showVerticalLine: true,
data: { data: {
continuous: null, continuous: null,
discrete: null, discrete: null,
}, },
yMaxContinuousDomainFactor: 1,
yMaxDiscreteDomainFactor: 1,
options: {},
onHover: (e) => { onHover: (e) => {
}, },
}; };
@ -90,17 +94,17 @@ export class CdfChartD3 {
throw new Error('Container for D3 is not defined.'); throw new Error('Container for D3 is not defined.');
} }
if (!['log', 'linear'].includes(this.attrs.scale)) { if (!['log', 'linear'].includes(this.attrs.xScaleType)) {
throw new Error('Scale should be either "log" or "linear".'); throw new Error('X-scale type should be either "log" or "linear".');
} }
// Log Scale. // Log Scale.
if (this.attrs.scale === 'log') { if (this.attrs.xScaleType === 'log') {
this.logFilter('continuous'); this.logFilter('continuous');
this.logFilter('discrete'); this.logFilter('discrete');
} }
if ( if (
this.attrs.scale === 'log' this.attrs.xScaleType === 'log'
&& this.attrs.minX !== null && this.attrs.minX !== null
&& this.attrs.minX < 0 && this.attrs.minX < 0
) { ) {
@ -115,7 +119,7 @@ export class CdfChartD3 {
'svgWidth', 'svgHeight', 'svgWidth', 'svgHeight',
'yMaxContinuousDomainFactor', 'yMaxContinuousDomainFactor',
'yMaxDiscreteDomainFactor', 'yMaxDiscreteDomainFactor',
'logBase', 'xScaleLogBase',
]; ];
for (const field of fields) { for (const field of fields) {
if (!_.isNumber(this.attrs[field])) { if (!_.isNumber(this.attrs[field])) {
@ -198,12 +202,12 @@ export class CdfChartD3 {
const yMaxDomain = yMax * yMaxDomainFactor; const yMaxDomain = yMax * yMaxDomainFactor;
// X-scale. // X-scale.
const xScale = this.attrs.scale === 'linear' const xScale = this.attrs.xScaleType === 'linear'
? d3.scaleLinear() ? d3.scaleLinear()
.domain([xMinDomain, xMaxDomain]) .domain([xMinDomain, xMaxDomain])
.range([0, this.calc.chartWidth]) .range([0, this.calc.chartWidth])
: d3.scaleLog() : d3.scaleLog()
.base(this.attrs.logBase) .base(this.attrs.xScaleLogBase)
.domain([xMinDomain, xMaxDomain]) .domain([xMinDomain, xMaxDomain])
.range([0, this.calc.chartWidth]); .range([0, this.calc.chartWidth]);
@ -229,10 +233,10 @@ export class CdfChartD3 {
// X-axis. // X-axis.
let xAxis = null; let xAxis = null;
if (!!this.attrs.timeScale) { if (!!this.attrs.xScaleTimeOptions) {
// Calculates the projection on X-axis. // Calculates the projection on X-axis.
const zero = _.get(this.attrs, 'timeScale.zero', moment()); const zero = _.get(this.attrs, 'xScaleTimeOptions.zero', moment());
const unit = _.get(this.attrs, 'timeScale.unit', 'years'); const unit = _.get(this.attrs, 'xScaleTimeOptions.unit', 'years');
const diff = Math.abs(xMax - xMin); const diff = Math.abs(xMax - xMin);
const left = zero.clone().add(xMin, unit); const left = zero.clone().add(xMin, unit);
const right = left.clone().add(diff, unit); const right = left.clone().add(diff, unit);

View File

@ -50,8 +50,8 @@ function CdfChartReact(props) {
.set('verticalLine', props.verticalLine || 110) .set('verticalLine', props.verticalLine || 110)
.set('showVerticalLine', props.showVerticalLine) .set('showVerticalLine', props.showVerticalLine)
.set('container', containerRef.current) .set('container', containerRef.current)
.set('scale', scale) .set('xScaleType', scale)
.set('timeScale', props.timeScale) .set('xScaleTimeOptions', props.timeScale)
.set('yMaxContinuousDomainFactor', props.yMaxContinuousDomainFactor || 1) .set('yMaxContinuousDomainFactor', props.yMaxContinuousDomainFactor || 1)
.set('yMaxDiscreteDomainFactor', props.yMaxDiscreteDomainFactor || 1) .set('yMaxDiscreteDomainFactor', props.yMaxDiscreteDomainFactor || 1)
.data({ .data({