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

Fixes styles

Browse Source
This commit is contained in:
Roman Galochkin 2020-02-20 12:21:58 +03:00
parent a9bfc0dd47
commit f784c2fcb2
3 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
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)]),
]);
};

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

@ -232,7 +232,7 @@ export class CdfChartD3 {
.y0(this.calc.chartHeight);
// Add axis.
this.chart.createObject({ tag: 'g', selector: 'xAxis' })
this.chart.createObject({ tag: 'g', selector: 'x-axis' })
.attr('transform', 'translate(0,' + this.calc.chartHeight + ')')
.call(this.xAxis);
@ -316,9 +316,9 @@ export class CdfChartD3 {
.padding(1);
this.chart.append("g")
.attr("class", 'lollipops-x-axis')
.attr("transform", "translate(0," + this.calc.chartHeight + ")")
.call(d3.axisBottom(x))
.selectAll("text");
.call(d3.axisBottom(x));
// Add Y axis
const y = d3.scaleLinear()
@ -326,6 +326,7 @@ export class CdfChartD3 {
.range([this.calc.chartHeight, 0]);
this.chart.append("g")
.attr("class", 'lollipops-y-axis')
.attr("transform", "translate(" + this.calc.chartWidth + ",0)")
.call(d3.axisLeft(y));
@ -334,22 +335,21 @@ export class CdfChartD3 {
.data(data)
.enter()
.append("line")
.attr("class", 'lollipops-line')
.attr("x1", d => x(d.x))
.attr("x2", d => x(d.x))
.attr("y1", d => y(d.y))
.attr("y2", y(0))
.attr("stroke", "red");
.attr("y2", y(0));
// Circles
this.chart.selectAll("lollipops-circle")
.data(data)
.enter()
.append("circle")
.attr("class", 'lollipops-circle')
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", "4")
.style("fill", "yellow")
.attr("stroke", "green");
.attr("r", "4");
}
return this;
}

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)]),
]);
};