quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:foretold-app/estiband

Browse Source 
* 'master' of github.com:foretold-app/estiband:
  Adds stop conditions
  Adds stop conditions
  Fixes lines
  Fixes variables scopes (3)
  Fixes variables scopes (2)
  Fixes variables scopes
  Adds discrete param
  Separates branches
  Adds y axis
  Fixes styles
  Adds a lollipop chart
  Adds a lollipop chart
  Fixes the vector
This commit is contained in:
Ozzie Gooen 2020-02-20 11:17:12 +00:00
commit 73dbd64686
6 changed files with 270 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/charts/CdfChart__Base.re
View File

@ -1,11 +1,19 @@
[@bs.module "./cdfChartReact.js"]
external cdfChart: ReasonReact.reactClass = "default";
type primaryDistribution = {
type primaryDistribution =
option({
.
"xs": array(float),
"ys": array(float),
};
});
type discrete =
option({
.
"xs": array(float),
"ys": array(float),
});
[@react.component]
let make =
@ -17,8 +25,10 @@ let make =
~minX=?,
~onHover=(f: float) => (),
~primaryDistribution=?,
~discrete=?,
~scale=?,
~showDistributionLines=?,
~showDistributionYAxis=?,
~showVerticalLine=?,
~timeScale=?,
~verticalLine=?,
@ -35,8 +45,10 @@ let make =
~minX?,
~onHover,
~primaryDistribution?,
~discrete?,
~scale?,
~showDistributionLines?,
~showDistributionYAxis?,
~showVerticalLine?,
~timeScale?,
~verticalLine?,

32
src/components/charts/CdfChart__Plain.re
View File

@ -7,11 +7,19 @@ module Styles = {
let graph = chartColor =>
style([
position(`relative),
selector(".axis", [fontSize(`px(9))]),
selector(".domain", [display(`none)]),
selector(".tick line", [display(`none)]),
selector(".tick text", [color(`hex("bfcad4"))]),
selector(".x-axis", [fontSize(`px(9))]),
selector(".x-axis .domain", [display(`none)]),
selector(".x-axis .tick line", [display(`none)]),
selector(".x-axis .tick text", [color(`hex("bfcad4"))]),
selector(".chart .area-path", [SVG.fill(chartColor)]),
selector(".lollipops-line", [SVG.stroke(`hex("bfcad4"))]),
selector(
".lollipops-circle",
[SVG.stroke(`hex("bfcad4")), SVG.fill(`hex("bfcad4"))],
),
selector(".lollipops-x-axis .domain", [display(`none)]),
selector(".lollipops-x-axis .tick line", [display(`none)]),
selector(".lollipops-x-axis .tick text", [display(`none)]),
]);
};
@ -19,12 +27,16 @@ module Styles = {
let make =
(
~color=`hex("111"),
~data,
~discrete=?,
~height=200,
~maxX=?,
~minX=?,
~onHover: float => unit,
~primaryDistribution=?,
~scale=?,
~showDistributionLines=false,
~showDistributionYAxis=false,
~showVerticalLine=false,
~timeScale=?,
) => {
<div className={Styles.graph(color)}>
@ -33,13 +45,17 @@ let make =
?minX
?scale
?timeScale
discrete={discrete |> E.O.fmap(d => d |> Shape.Discrete.toJs)}
height
marginBottom=50
marginTop=0
onHover
primaryDistribution={data |> Shape.XYShape.toJs}
showDistributionLines=false
showVerticalLine=false
primaryDistribution={
primaryDistribution |> E.O.fmap(pd => pd |> Shape.XYShape.toJs)
}
showDistributionLines
showDistributionYAxis
showVerticalLine
/>
</div>;
};

6
src/components/charts/GenericDistributionChart.re
View File

@ -7,10 +7,12 @@ module Mixed = {
React.useMemo1(
() =>
<CdfChart__Plain
data={data.continuous}
primaryDistribution={data.continuous}
discrete={data.discrete}
color={`hex("333")}
timeScale
onHover={r => setX(_ => r)}
showDistributionYAxis=true
/>,
[|data|],
);
@ -68,7 +70,7 @@ module Cont = {
React.useMemo1(
() =>
<CdfChart__Plain
data=continuous
primaryDistribution=continuous
color={`hex("333")}
onHover
timeScale

342
src/components/charts/cdfChartD3.js
View File

@ -20,19 +20,30 @@ export class CdfChartD3 {
scale: 'linear',
timeScale: null,
showDistributionLines: true,
showDistributionYAxis: false,
areaColors: ['#E1E5EC', '#E1E5EC'],
logBase: 10,
verticalLine: 110,
showVerticalLine: true,
data: null,
data: {
primary: null,
discrete: null,
},
onHover: (e) => {
},
};
this.hoverLine = null;
this.xScale = null;
this.dataPoints = null;
this.mouseover = this.mouseover.bind(this);
this.mouseout = this.mouseout.bind(this);
this.calc = {
chartLeftMargin: null,
chartTopMargin: null,
chartWidth: null,
chartHeight: null,
};
this.chart = null;
this.svg = null;
this._container = null;
this.formatDates = this.formatDates.bind(this);
}
@ -96,6 +107,11 @@ export class CdfChartD3 {
return this;
}
showDistributionYAxis(showDistributionYAxis) {
this.attrs.showDistributionYAxis = showDistributionYAxis;
return this;
}
verticalLine(verticalLine) {
this.attrs.verticalLine = verticalLine;
return this;
@ -116,69 +132,77 @@ export class CdfChartD3 {
return this;
}
/**
* @param key
* @returns {[]}
*/
getDataPoints(key) {
const dt = [];
const data = this.attrs.data[key];
const len = data.xs.length;
for (let i = 0; i < len; i++) {
dt.push({ x: data.xs[i], y: data.ys[i] });
}
return dt;
}
render() {
const attrs = this.attrs;
const container = d3.select(attrs.container);
if (container.node() === null) {
this._container = d3.select(this.attrs.container);
if (this._container.node() === null) {
console.error('Container for D3 is not defined.');
return;
}
// Sets the width from the DOM element.
const containerRect = container.node().getBoundingClientRect();
const containerRect = this._container.node().getBoundingClientRect();
if (containerRect.width > 0) {
attrs.svgWidth = containerRect.width;
this.attrs.svgWidth = containerRect.width;
}
// Calculated properties.
const calc = {};
calc.chartLeftMargin = attrs.marginLeft;
calc.chartTopMargin = attrs.marginTop;
calc.chartWidth = attrs.svgWidth - attrs.marginRight - attrs.marginLeft;
calc.chartHeight = attrs.svgHeight - attrs.marginBottom - attrs.marginTop;
this.calc.chartLeftMargin = this.attrs.marginLeft;
this.calc.chartTopMargin = this.attrs.marginTop;
this.calc.chartWidth = this.attrs.svgWidth - this.attrs.marginRight - this.attrs.marginLeft;
this.calc.chartHeight = this.attrs.svgHeight - this.attrs.marginBottom - this.attrs.marginTop;
const areaColorRange = d3.scaleOrdinal().range(attrs.areaColors);
this.dataPoints = [this.getDataPoints('primary')];
// Add svg.
this.svg = this._container
.createObject({ tag: 'svg', selector: 'svg-chart-container' })
.attr('width', "100%")
.attr('height', this.attrs.svgHeight)
.attr('pointer-events', 'none');
// Scales.
const xMin = d3.min(attrs.data.primary.xs);
const xMax = d3.max(attrs.data.primary.xs);
// Add container g element.
this.chart = this.svg
.createObject({ tag: 'g', selector: 'chart' })
.attr(
'transform',
'translate(' + this.calc.chartLeftMargin + ',' + this.calc.chartTopMargin + ')',
);
if (attrs.scale === 'linear') {
this.xScale = d3.scaleLinear()
.domain([attrs.minX || xMin, attrs.maxX || xMax])
.range([0, calc.chartWidth]);
} else {
this.xScale = d3.scaleLog()
.base(attrs.logBase)
.domain([attrs.minX, attrs.maxX])
.range([0, calc.chartWidth]);
if(this.hasDate('primary')){
const distributionChart = this.addDistributionChart();
if(this.hasDate('discrete')) {
this.addLollipopsChart(distributionChart);
}
}
return this;
}
const yMin = d3.min(attrs.data.primary.ys);
const yMax = d3.max(attrs.data.primary.ys);
addDistributionChart() {
const areaColorRange = d3.scaleOrdinal().range(this.attrs.areaColors);
const dataPoints = [this.getDataPoints('primary')];
this.yScale = d3.scaleLinear()
// Boundaries.
const xMin = this.attrs.minX || d3.min(this.attrs.data.primary.xs);
const xMax = this.attrs.maxX || d3.max(this.attrs.data.primary.xs);
const yMin = d3.min(this.attrs.data.primary.ys);
const yMax = d3.max(this.attrs.data.primary.ys);
// Scales.
let xScale = null;
if (this.attrs.scale === 'linear') {
xScale = d3.scaleLinear()
.domain([xMin, xMax])
.range([0, this.calc.chartWidth]);
} else {
xScale = d3.scaleLog()
.base(this.attrs.logBase)
.domain([xMin, xMax])
.range([0, this.calc.chartWidth]);
}
const yScale = d3.scaleLinear()
.domain([yMin, yMax])
.range([calc.chartHeight, 0]);
.range([this.calc.chartHeight, 0]);
// Axis generator.
let xAxis = null;
if (!!this.attrs.timeScale) {
const zero = _.get(this.attrs.timeScale, 'zero', moment());
const unit = _.get(this.attrs.timeScale, 'unit', 'years');
@ -189,14 +213,14 @@ export class CdfChartD3 {
const xScaleTime = d3.scaleTime()
.domain([left.toDate(), right.toDate()])
.nice()
.range([0, calc.chartWidth]);
.range([0, this.calc.chartWidth]);
this.xAxis = d3.axisBottom()
xAxis = d3.axisBottom()
.scale(xScaleTime)
.ticks(this.getTimeTicksByStr(unit))
.tickFormat(this.formatDates);
} else {
this.xAxis = d3.axisBottom(this.xScale)
xAxis = d3.axisBottom(xScale)
.ticks(3)
.tickFormat(d => {
if (Math.abs(d) < 1) {
@ -211,54 +235,46 @@ export class CdfChartD3 {
});
}
const yAxis = d3.axisRight(yScale);
// Objects.
const line = d3.line()
.x(d => this.xScale(d.x))
.y(d => this.yScale(d.y));
.x(d => xScale(d.x))
.y(d => yScale(d.y));
const area = d3.area()
.x(d => this.xScale(d.x))
.y1(d => this.yScale(d.y))
.y0(calc.chartHeight);
// Add svg.
const svg = container
.createObject({ tag: 'svg', selector: 'svg-chart-container' })
.attr('width', "100%")
.attr('height', attrs.svgHeight)
.attr('pointer-events', 'none');
// Add container g element.
this.chart = svg
.createObject({ tag: 'g', selector: 'chart' })
.attr(
'transform',
'translate(' + calc.chartLeftMargin + ',' + calc.chartTopMargin + ')',
);
.x(d => xScale(d.x))
.y1(d => yScale(d.y))
.y0(this.calc.chartHeight);
// Add axis.
this.chart.createObject({ tag: 'g', selector: 'axis' })
.attr('transform', 'translate(' + 0 + ',' + calc.chartHeight + ')')
.call(this.xAxis);
this.chart.createObject({ tag: 'g', selector: 'x-axis' })
.attr('transform', 'translate(0,' + this.calc.chartHeight + ')')
.call(xAxis);
if (this.attrs.showDistributionYAxis) {
this.chart.createObject({ tag: 'g', selector: 'y-axis' })
.call(yAxis);
}
// Draw area.
this.chart
.createObjectsWithData({
tag: 'path',
selector: 'area-path',
data: this.dataPoints,
data: dataPoints,
})
.attr('d', area)
.attr('fill', (d, i) => areaColorRange(i))
.attr('opacity', (d, i) => i === 0 ? 0.7 : 0.5);
// Draw line.
if (attrs.showDistributionLines) {
if (this.attrs.showDistributionLines) {
this.chart
.createObjectsWithData({
tag: 'path',
selector: 'line-path',
data: this.dataPoints,
data: dataPoints,
})
.attr('d', line)
.attr('id', (d, i) => 'line-' + (i + 1))
@ -266,74 +282,109 @@ export class CdfChartD3 {
.attr('fill', 'none');
}
if (attrs.showVerticalLine) {
if (this.attrs.showVerticalLine) {
this.chart
.createObject({ tag: 'line', selector: 'v-line' })
.attr('x1', this.xScale(attrs.verticalLine))
.attr('x2', this.xScale(attrs.verticalLine))
.attr('x1', xScale(this.attrs.verticalLine))
.attr('x2', xScale(this.attrs.verticalLine))
.attr('y1', 0)
.attr('y2', calc.chartHeight)
.attr('y2', this.calc.chartHeight)
.attr('stroke-width', 1.5)
.attr('stroke-dasharray', '6 6')
.attr('stroke', 'steelblue');
}
this.hoverLine = this.chart
const hoverLine = this.chart
.createObject({ tag: 'line', selector: 'hover-line' })
.attr('x1', 0)
.attr('x2', 0)
.attr('y1', 0)
.attr('y2', calc.chartHeight)
.attr('y2', this.calc.chartHeight)
.attr('opacity', 0)
.attr('stroke-width', 1.5)
.attr('stroke-dasharray', '6 6')
.attr('stroke', '#22313F');
// Add drawing rectangle.
const thi$ = this;
this.chart
.createObject({ tag: 'rect', selector: 'mouse-rect' })
.attr('width', calc.chartWidth)
.attr('height', calc.chartHeight)
.attr('fill', 'transparent')
.attr('pointer-events', 'all')
.on('mouseover', function () {
thi$.mouseover(this);
})
.on('mousemove', function () {
thi$.mouseover(this);
})
.on('mouseout', this.mouseout);
return this;
}
mouseover(constructor) {
const mouse = d3.mouse(constructor);
this.hoverLine.attr('opacity', 1)
.attr('x1', mouse[0])
.attr('x2', mouse[0]);
const xValue = this.xScale.invert(mouse[0]).toFixed(2);
{
const context = this;
const range = [
this.xScale(this.dataPoints[this.dataPoints.length - 1][0].x),
this.xScale(
this.dataPoints
[this.dataPoints.length - 1]
[this.dataPoints[this.dataPoints.length - 1].length - 1].x,
xScale(dataPoints[dataPoints.length - 1][0].x),
xScale(
dataPoints
[dataPoints.length - 1]
[dataPoints[dataPoints.length - 1].length - 1].x,
),
];
if (mouse[0] > range[0] && mouse[0] < range[1]) {
this.attrs.onHover(xValue);
} else {
this.attrs.onHover(0.0);
}
function mouseover() {
const mouse = d3.mouse(this);
hoverLine.attr('opacity', 1).attr('x1', mouse[0]).attr('x2', mouse[0]);
const xValue = mouse[0] > range[0] && mouse[0] < range[1]
? xScale.invert(mouse[0]).toFixed(2)
: 0;
context.attrs.onHover(xValue);
}
mouseout() {
this.hoverLine.attr('opacity', 0)
function mouseout() {
hoverLine.attr('opacity', 0)
}
this.chart
.createObject({ tag: 'rect', selector: 'mouse-rect' })
.attr('width', this.calc.chartWidth)
.attr('height', this.calc.chartHeight)
.attr('fill', 'transparent')
.attr('pointer-events', 'all')
.on('mouseover', mouseover)
.on('mousemove', mouseover)
.on('mouseout', mouseout);
}
return { xScale, yScale };
}
addLollipopsChart(distributionChart) {
const data = this.getDataPoints('discrete');
const ys = data.map(item => item.y);
const yMax = d3.max(ys);
// X axis
this.chart.append("g")
.attr("class", 'lollipops-x-axis')
.attr("transform", "translate(0," + this.calc.chartHeight + ")")
.call(d3.axisBottom(distributionChart.xScale));
// Y axis
const yScale = d3.scaleLinear()
.domain([0, yMax])
.range([this.calc.chartHeight, 0]);
this.chart.append("g")
.attr("class", 'lollipops-y-axis')
.attr("transform", "translate(" + this.calc.chartWidth + ",0)")
.call(d3.axisLeft(yScale));
// Lines
this.chart.selectAll("lollipops-line")
.data(data)
.enter()
.append("line")
.attr("class", 'lollipops-line')
.attr("x1", d => distributionChart.xScale(d.x))
.attr("x2", d => distributionChart.xScale(d.x))
.attr("y1", d => yScale(d.y))
.attr("y2", yScale(0));
// Circles
this.chart.selectAll("lollipops-circle")
.data(data)
.enter()
.append("circle")
.attr("class", 'lollipops-circle')
.attr("cx", d => distributionChart.xScale(d.x))
.attr("cy", d => yScale(d.y))
.attr("r", "4");
}
formatDates(ts) {
@ -368,11 +419,39 @@ export class CdfChartD3 {
return d3.timeYear.every(10);
}
}
/**
* @param {name} key
* @returns {{x: number[], y: number[]}}
*/
getDataPoints(key) {
const dt = [];
const emptyShape = { xs: [], ys: [] };
const data = _.get(this.attrs.data, key, emptyShape);
const len = data.xs.length;
for (let i = 0; i < len; i++) {
dt.push({ x: data.xs[i], y: data.ys[i] });
}
return dt;
}
/**
* @param {string} key
* @returns {boolean}
*/
hasDate(key) {
const data = _.get(this.attrs.data, key);
return !!data;
}
}
/**
* @docs: https://github.com/d3/d3-selection
* @param params
* @param {object} params
* @param {string} params.selector
* @param {string} params.tag
* @returns {*}
*/
d3.selection.prototype.createObject = function createObject(params) {
@ -382,16 +461,11 @@ d3.selection.prototype.createObject = function createObject(params) {
};
/**
* @example:
* This call example
* createObjectsByData({
* tag: 'path',
* selector: 'line-path',
* data: this.dataPoints,
* })
* will create a new tag "<path class="line-path">1,2,3</path>".
* @docs: https://github.com/d3/d3-selection
* @param params
* @param {object} params
* @param {string} params.selector
* @param {string} params.tag
* @param {*[]} params.data
* @returns {*}
*/
d3.selection.prototype.createObjectsWithData = function createObjectsWithData(params) {

6
src/components/charts/cdfChartReact.js
View File

@ -45,10 +45,14 @@ function CdfChartReact(props) {
.marginRight(5)
.marginTop(5)
.showDistributionLines(props.showDistributionLines)
.showDistributionYAxis(props.showDistributionYAxis)
.verticalLine(props.verticalLine)
.showVerticalLine(props.showVerticalLine)
.container(containerRef.current)
.data({ primary: props.primaryDistribution })
.data({
primary: props.primaryDistribution,
discrete: props.discrete,
})
.scale(scale)
.timeScale(props.timeScale)
.render();

16
src/lib/Chart.re
View File

@ -2,11 +2,19 @@ module Styles = {
open Css;
let graph = chartColor =>
style([
selector(".axis", [fontSize(`px(9))]),
selector(".domain", [display(`none)]),
selector(".tick line", [display(`none)]),
selector(".tick text", [color(`hex("bfcad4"))]),
selector(".x-axis", [fontSize(`px(9))]),
selector(".x-axis .domain", [display(`none)]),
selector(".x-axis .tick line", [display(`none)]),
selector(".x-axis .tick text", [color(`hex("bfcad4"))]),
selector(".chart .area-path", [SVG.fill(chartColor)]),
selector(".lollipops-line", [SVG.stroke(`hex("bfcad4"))]),
selector(
".lollipops-circle",
[SVG.stroke(`hex("bfcad4")), SVG.fill(`hex("bfcad4"))],
),
selector(".lollipops-x-axis .domain", [display(`none)]),
selector(".lollipops-x-axis .tick line", [display(`none)]),
selector(".lollipops-x-axis .tick text", [display(`none)]),
]);
};