Adds a tooltip

This commit is contained in:
Roman Galochkin 2020-02-27 13:44:04 +03:00
parent 22a9646bf1
commit 444966ba90
4 changed files with 70 additions and 4 deletions

View File

@ -86,6 +86,21 @@ module Styles = {
selector(".lollipops-x-axis .domain", [display(`none)]), selector(".lollipops-x-axis .domain", [display(`none)]),
selector(".lollipops-x-axis .tick line", [display(`none)]), selector(".lollipops-x-axis .tick line", [display(`none)]),
selector(".lollipops-x-axis .tick text", [display(`none)]), selector(".lollipops-x-axis .tick text", [display(`none)]),
selector(
".lollipop-tooltip",
[
position(`absolute),
textAlign(`center),
padding(px(2)),
backgroundColor(hex("bfcad4")),
borderRadius(px(3)),
],
),
selector(
".lollipops-circle-mouseover",
[SVG.fill(hex("ffa500")), SVG.stroke(`hex("fff"))],
),
selector(".lollipops-line-mouseover", [SVG.stroke(`hex("ffa500"))]),
]); ]);
}; };
@ -126,4 +141,4 @@ let make =
showVerticalLine showVerticalLine
/> />
</div>; </div>;
}; };

View File

@ -2,6 +2,9 @@ const _ = require('lodash');
const d3 = require('d3'); const d3 = require('d3');
const moment = require('moment'); const moment = require('moment');
/**
* @todo: To rename as "DistPlotD3".
*/
export class CdfChartD3 { export class CdfChartD3 {
constructor() { constructor() {
@ -320,16 +323,48 @@ export class CdfChartD3 {
.attr('transform', `translate(${this.calc.chartWidth}, 0)`) .attr('transform', `translate(${this.calc.chartWidth}, 0)`)
.call(d3.axisLeft(yScale)); .call(d3.axisLeft(yScale));
function showTooltip(d) {
d3.select('#lollipops-line-' + d.id)
.classed('lollipops-line-mouseover', true);
d3.select('#lollipops-circle-' + d.id)
.classed('lollipops-circle-mouseover', true)
.attr('r', 6);
tooltip.transition()
.style("opacity", .9);
tooltip.html(`X: ${d.x}, Y: ${d.y}`)
.style("left", (distributionChart.xScale(d.x) + 60) + "px")
.style("top", yScale(d.y) + "px");
}
function hideTooltip(d) {
d3.select('#lollipops-line-' + d.id)
.classed('lollipops-line-mouseover', false);
d3.select('#lollipops-circle-' + d.id)
.classed('lollipops-circle-mouseover', false)
.attr('r', 4);
tooltip.transition()
.style("opacity", 0);
}
// Lines. // Lines.
this.chart.selectAll('lollipops-line') this.chart.selectAll('lollipops-line')
.data(data) .data(data)
.enter() .enter()
.append('line') .append('line')
.attr('class', 'lollipops-line') .attr('class', 'lollipops-line')
.attr('id', d => 'lollipops-line-' + d.id)
.attr('x1', d => distributionChart.xScale(d.x)) .attr('x1', d => distributionChart.xScale(d.x))
.attr('x2', d => distributionChart.xScale(d.x)) .attr('x2', d => distributionChart.xScale(d.x))
.attr('y1', d => yScale(d.y)) .attr('y1', d => yScale(d.y))
.attr('y2', yScale(0)); .attr('y2', yScale(0))
.attr('pointer-events', 'all')
.on("mouseover", showTooltip)
.on("mouseout", hideTooltip);
// Define the div for the tooltip
const tooltip = this._container.append("div")
.attr("class", "lollipop-tooltip")
.style("opacity", 0);
// Circles. // Circles.
this.chart.selectAll('lollipops-circle') this.chart.selectAll('lollipops-circle')
@ -337,9 +372,13 @@ export class CdfChartD3 {
.enter() .enter()
.append('circle') .append('circle')
.attr('class', 'lollipops-circle') .attr('class', 'lollipops-circle')
.attr('id', d => 'lollipops-circle-' + d.id)
.attr('cx', d => distributionChart.xScale(d.x)) .attr('cx', d => distributionChart.xScale(d.x))
.attr('cy', d => yScale(d.y)) .attr('cy', d => yScale(d.y))
.attr('r', '4'); .attr('r', '4')
.attr('pointer-events', 'all')
.on("mouseover", showTooltip)
.on("mouseout", hideTooltip);
} }
/** /**
@ -390,7 +429,7 @@ export class CdfChartD3 {
const len = data.xs.length; const len = data.xs.length;
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
dt.push({ x: data.xs[i], y: data.ys[i] }); dt.push({ x: data.xs[i], y: data.ys[i], id: i });
} }
return dt; return dt;

View File

@ -14,6 +14,7 @@ function getRandomInt(min, max) {
} }
/** /**
* @todo: To rename as "DistPlotReact".
* @param props * @param props
* @returns {*} * @returns {*}
* @constructor * @constructor

View File

@ -3,3 +3,14 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.lollipops-line-mouseover {
stroke-dasharray: 4;
animation: dash 2s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 1000;
}
}