Merge pull request #18 from foretold-app/improvements/1103

Improvements/1103
This commit is contained in:
Ozzie Gooen 2020-03-04 12:06:41 +00:00 committed by GitHub
commit e71a3ad1b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 15 deletions

View File

@ -4,9 +4,14 @@ const moment = require('moment');
require('./styles.css'); require('./styles.css');
/** /**
* @todo: To rename as "DistPlotD3". * @param arr
* @returns {*}
*/ */
export class CdfChartD3 { function exists(arr) {
return arr.find(num => _.isFinite(num));
}
export class DistPlotD3 {
constructor() { constructor() {
this.attrs = { this.attrs = {
@ -178,15 +183,27 @@ export class CdfChartD3 {
*/ */
getCommonThings() { getCommonThings() {
// Boundaries. // Boundaries.
const xMin = this.attrs.minX const xMin = exists([
|| d3.min(this.attrs.data.continuous.xs) this.attrs.minX,
|| d3.min(this.attrs.data.discrete.xs); d3.min(this.attrs.data.continuous.xs),
const xMax = this.attrs.maxX d3.min(this.attrs.data.discrete.xs),
|| d3.max(this.attrs.data.continuous.xs) ]);
|| d3.max(this.attrs.data.discrete.xs); const xMax = exists([
this.attrs.maxX,
d3.max(this.attrs.data.continuous.xs),
d3.max(this.attrs.data.discrete.xs),
]);
const yMin = d3.min(this.attrs.data.continuous.ys); const yMin = exists([
const yMax = d3.max(this.attrs.data.continuous.ys); this.attrs.minY,
d3.min(this.attrs.data.continuous.ys),
d3.min(this.attrs.data.discrete.ys),
]);
const yMax = exists([
this.attrs.maxY,
d3.max(this.attrs.data.continuous.ys),
d3.max(this.attrs.data.discrete.ys),
]);
// Errors. // Errors.
if (!_.isFinite(xMin)) throw new Error('xMin is undefined'); if (!_.isFinite(xMin)) throw new Error('xMin is undefined');

View File

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useSize } from 'react-use'; import { useSize } from 'react-use';
import { CdfChartD3 } from './distPlotD3'; import { DistPlotD3 } from './distPlotD3';
/** /**
* @param min * @param min
@ -14,12 +14,11 @@ function getRandomInt(min, max) {
} }
/** /**
* @todo: To rename as "DistPlotReact".
* @param props * @param props
* @returns {*} * @returns {*}
* @constructor * @constructor
*/ */
function CdfChartReact(props) { function DistPlotReact(props) {
const containerRef = React.createRef(); const containerRef = React.createRef();
const key = "cdf-chart-react-" + getRandomInt(0, 1000); const key = "cdf-chart-react-" + getRandomInt(0, 1000);
const scale = props.scale || 'linear'; const scale = props.scale || 'linear';
@ -35,7 +34,7 @@ function CdfChartReact(props) {
useEffect(() => { useEffect(() => {
try { try {
new CdfChartD3() new DistPlotD3()
.set('svgWidth', width) .set('svgWidth', width)
.set('svgHeight', props.height) .set('svgHeight', props.height)
.set('maxX', props.maxX) .set('maxX', props.maxX)
@ -79,4 +78,4 @@ function CdfChartReact(props) {
]); ]);
} }
export default CdfChartReact; export default DistPlotReact;