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 => let graph = chartColor =>
style([ style([
position(`relative), position(`relative),
selector(".axis", [fontSize(`px(9))]), selector(".x-axis", [fontSize(`px(9))]),
selector(".domain", [display(`none)]), selector(".x-axis .domain", [display(`none)]),
selector(".tick line", [display(`none)]), selector(".x-axis .tick line", [display(`none)]),
selector(".tick text", [color(`hex("bfcad4"))]), selector(".x-axis .tick text", [color(`hex("bfcad4"))]),
selector(".chart .area-path", [SVG.fill(chartColor)]), 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); .y0(this.calc.chartHeight);
// Add axis. // Add axis.
this.chart.createObject({ tag: 'g', selector: 'xAxis' }) this.chart.createObject({ tag: 'g', selector: 'x-axis' })
.attr('transform', 'translate(0,' + this.calc.chartHeight + ')') .attr('transform', 'translate(0,' + this.calc.chartHeight + ')')
.call(this.xAxis); .call(this.xAxis);
@ -316,9 +316,9 @@ export class CdfChartD3 {
.padding(1); .padding(1);
this.chart.append("g") this.chart.append("g")
.attr("class", 'lollipops-x-axis')
.attr("transform", "translate(0," + this.calc.chartHeight + ")") .attr("transform", "translate(0," + this.calc.chartHeight + ")")
.call(d3.axisBottom(x)) .call(d3.axisBottom(x));
.selectAll("text");
// Add Y axis // Add Y axis
const y = d3.scaleLinear() const y = d3.scaleLinear()
@ -326,6 +326,7 @@ export class CdfChartD3 {
.range([this.calc.chartHeight, 0]); .range([this.calc.chartHeight, 0]);
this.chart.append("g") this.chart.append("g")
.attr("class", 'lollipops-y-axis')
.attr("transform", "translate(" + this.calc.chartWidth + ",0)") .attr("transform", "translate(" + this.calc.chartWidth + ",0)")
.call(d3.axisLeft(y)); .call(d3.axisLeft(y));
@ -334,22 +335,21 @@ export class CdfChartD3 {
.data(data) .data(data)
.enter() .enter()
.append("line") .append("line")
.attr("class", 'lollipops-line')
.attr("x1", d => x(d.x)) .attr("x1", d => x(d.x))
.attr("x2", d => x(d.x)) .attr("x2", d => x(d.x))
.attr("y1", d => y(d.y)) .attr("y1", d => y(d.y))
.attr("y2", y(0)) .attr("y2", y(0));
.attr("stroke", "red");
// Circles // Circles
this.chart.selectAll("lollipops-circle") this.chart.selectAll("lollipops-circle")
.data(data) .data(data)
.enter() .enter()
.append("circle") .append("circle")
.attr("class", 'lollipops-circle')
.attr("cx", d => x(d.x)) .attr("cx", d => x(d.x))
.attr("cy", d => y(d.y)) .attr("cy", d => y(d.y))
.attr("r", "4") .attr("r", "4");
.style("fill", "yellow")
.attr("stroke", "green");
} }
return this; return this;
} }

16
src/lib/Chart.re
View File

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