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

View File

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