From 798a19794ae811a9e7be853d09f1f62f99471352 Mon Sep 17 00:00:00 2001 From: Roman Galochkin Date: Fri, 28 Feb 2020 13:29:17 +0300 Subject: [PATCH] Shows discrete graph --- src/components/DistBuilder.re | 118 ++++++++++-------- src/components/DistBuilder2.re | 3 +- .../charts/DistributionPlot/distPlotD3.js | 68 ++++++---- 3 files changed, 109 insertions(+), 80 deletions(-) diff --git a/src/components/DistBuilder.re b/src/components/DistBuilder.re index 5c1e6147..70dde01d 100644 --- a/src/components/DistBuilder.re +++ b/src/components/DistBuilder.re @@ -375,60 +375,68 @@ let make = () => { } /> - - - E.ste}> - { - e |> handleChange; - _ => (); - }} - /> - - } - /> - - - - E.ste}> - e |> handleChange}> - - {"Days" |> E.ste} - - - {"Hours" |> E.ste} - - - {"Milliseconds" |> E.ste} - - - {"Minutes" |> E.ste} - - - {"Months" |> E.ste} - - - {"Quarters" |> E.ste} - - - {"Seconds" |> E.ste} - - - {"Weeks" |> E.ste} - - - {"Years" |> E.ste} - - - - } - /> - + {<> + + + E.ste}> + { + e |> handleChange; + _ => (); + }} + /> + + } + /> + + + + E.ste}> + e |> handleChange}> + + {"Days" |> E.ste} + + + {"Hours" |> E.ste} + + + {"Milliseconds" |> E.ste} + + + {"Minutes" |> E.ste} + + + {"Months" |> E.ste} + + + {"Quarters" |> E.ste} + + + {"Seconds" |> E.ste} + + + {"Weeks" |> E.ste} + + + {"Years" |> E.ste} + + + + } + /> + + + |> E.showIf( + E.L.contains( + reform.state.values.unitType, + ["TimeDistribution"], + ), + )} @@ -453,4 +461,4 @@ let make = () => {
; -}; \ No newline at end of file +}; diff --git a/src/components/DistBuilder2.re b/src/components/DistBuilder2.re index d6cb3eb0..b077f57b 100644 --- a/src/components/DistBuilder2.re +++ b/src/components/DistBuilder2.re @@ -34,8 +34,7 @@ module Styles = { module DemoDist = { [@react.component] let make = (~guesstimatorString: string) => { - let (ys, xs) = - DistEditor.getPdfFromUserInput("normal(1, 1) / normal(10, 1)"); + let (ys, xs) = DistEditor.getPdfFromUserInput(guesstimatorString); let continuous: DistTypes.xyShape = {xs, ys}; E.ste}>
diff --git a/src/components/charts/DistributionPlot/distPlotD3.js b/src/components/charts/DistributionPlot/distPlotD3.js index dfdc4af6..e781576d 100644 --- a/src/components/charts/DistributionPlot/distPlotD3.js +++ b/src/components/charts/DistributionPlot/distPlotD3.js @@ -109,22 +109,28 @@ export class CdfChartD3 { `translate(${this.calc.chartLeftMargin}, ${this.calc.chartTopMargin})`, ); + const common = this.getCommonThings(); if (this.hasDate('continuous')) { - const distributionChart = this.addDistributionChart(); - if (this.hasDate('discrete')) { - this.addLollipopsChart(distributionChart); - } + this.addDistributionChart(common); + } + if (this.hasDate('discrete')) { + this.addLollipopsChart(common); } return this; } - addDistributionChart() { - const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors); - const dataPoints = [this.getDataPoints('continuous')]; - + /** + * @returns {*} + */ + 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 = 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 yMin = d3.min(this.attrs.data.continuous.ys); const yMax = d3.max(this.attrs.data.continuous.ys); @@ -150,6 +156,21 @@ export class CdfChartD3 { .domain([yMinDomain, yMaxDomain]) .range([this.calc.chartHeight, 0]); + return { + xMin, xMax, + xScale, yScale, + }; + } + + /** + * @param common + */ + addDistributionChart(common) { + const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors); + const dataPoints = [this.getDataPoints('continuous')]; + + const { xMin, xMax, xScale, yScale } = common; + // X-axis. let xAxis = null; if (!!this.attrs.timeScale) { @@ -287,16 +308,14 @@ export class CdfChartD3 { .on('mousemove', mouseover) .on('mouseout', mouseout); } - - return { xScale, yScale }; } /** - * @param {object} distributionChart - * @param {object} distributionChart.xScale - * @param {object} distributionChart.yScale + * @param {object} common + * @param {object} common.xScale + * @param {object} common.yScale */ - addLollipopsChart(distributionChart) { + addLollipopsChart(common) { const data = this.getDataPoints('discrete'); const _yMin = d3.min(this.attrs.data.discrete.ys); @@ -306,7 +325,7 @@ export class CdfChartD3 { this.chart.append('g') .attr('class', 'lollipops-x-axis') .attr('transform', `translate(0, ${this.calc.chartHeight})`) - .call(d3.axisBottom(distributionChart.xScale)); + .call(d3.axisBottom(common.xScale)); // Y-domain. const yMaxDomainFactor = _.get(this.attrs, 'yMaxDiscreteDomainFactor', 1); @@ -333,7 +352,7 @@ export class CdfChartD3 { tooltip.transition() .style('opacity', .9); tooltip.html(`X: ${d.x}, Y: ${d.y}`) - .style('left', (distributionChart.xScale(d.x) + 60) + 'px') + .style('left', (common.xScale(d.x) + 60) + 'px') .style('top', yScale(d.y) + 'px'); } @@ -354,8 +373,8 @@ export class CdfChartD3 { .append('line') .attr('class', 'lollipops-line') .attr('id', d => 'lollipops-line-' + d.id) - .attr('x1', d => distributionChart.xScale(d.x)) - .attr('x2', d => distributionChart.xScale(d.x)) + .attr('x1', d => common.xScale(d.x)) + .attr('x2', d => common.xScale(d.x)) .attr('y1', d => yScale(d.y)) .attr('y2', yScale(0)); @@ -371,7 +390,7 @@ export class CdfChartD3 { .append('circle') .attr('class', 'lollipops-circle') .attr('id', d => 'lollipops-circle-' + d.id) - .attr('cx', d => distributionChart.xScale(d.x)) + .attr('cx', d => common.xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('r', '4'); @@ -382,7 +401,7 @@ export class CdfChartD3 { .append('rect') .attr('width', 30) .attr('height', this.calc.chartHeight) - .attr('x', d => distributionChart.xScale(d.x) - 15) + .attr('x', d => common.xScale(d.x) - 15) .attr('y', 0) .attr('opacity', 0) .attr('pointer-events', 'all') @@ -439,7 +458,10 @@ export class CdfChartD3 { const len = data.xs.length; for (let i = 0; i < len; i++) { - dt.push({ x: data.xs[i], y: data.ys[i], id: i }); + const x = data.xs[i]; + const y = data.ys[i]; + const id = i; + dt.push({ x, y, id }); } return dt;