react-sparklines
react-sparklines copied to clipboard
borisyankov
Tooltip
Since this is a 'sparklines' component, I consider this is out of scope. You can always try adding it yourself, and ask me questions if you need help.
I see. Then, how about passing the prop onMouseMove so we can do something like this:
<Sparklines data={[1, 4, 6, 1, 2, 4, 6]}>
<text ref="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
<SparklinesBars onMouseMove={this.showTooltip}/>
</Sparklines>
And onMouseMove is passed down to every
EDIT:
Wasn't a huge fan of the feature, but since it is requested so much, I'll add this next.
@fermuch @borisyankov Is there code cooking for this or would you welcome a PR? :)
EDIT: first draft https://github.com/borisyankov/react-sparklines/pull/54
added mouseover feature in https://github.com/borisyankov/react-sparklines/commit/f1dbc9ea65b7a6c5653da997328ddc2b31e10850
@borisyankov do you mind publishing version with tooltip to https://www.npmjs.com/package/react-sparklines?
Now i see that SparklinesLine accepts onMouseMove prop, but it never gets called. Do you have a working demo? There is nothing about it in docs
Was this feature added? If so, can you please provide an example of usage or documentation?
<Sparklines data={[1, 4, 6, 1, 2, 4, 6]}>
<text ref="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
<SparklinesLine onMouseMove={this.showTooltip}/>
</Sparklines>
should work, what happens when this is run? @1eddy87
tested it out using the code you provided and I don't anything showing up, no errors in the console. Just don't work.
Do I need to import something else?
This is what I'm using at the moment:
import { Sparklines, SparklinesLine, SparklinesSpots, SparklinesReferenceLine } from 'react-sparklines';
@gabrielcsapo
<Sparklines data={[1, 4, 6, 1, 2, 4, 6]}> <text ref="tooltip" x="0" y="0" visibility="hidden">Tooltip</text> <SparklinesLine onMouseMove={this.showTooltip}/> </Sparklines>should work, what happens when this is run? @1eddy87
Hi gabrielcsapo, thank you for posting the snippet. May I ask if you have a demo snippet code to show how to define this.showTooltip?
FWIW:
- Related new ticket #92
- Fork that "seems" to be having tooltip https://github.com/vegetableman/react-sparklines (no demo)
I have found a very hacky solution:
export function SparklineDemo() {
const [displayTooltip, setDisplayTooltip] = useState(false);
const [tooltipData, setTooltipData] = useState(null);
const [eventPosition, setEventPosition] = useState(null);
const [hoverPosition, setHoverPosition] = useState(null);
const sparklineData = [0, 1, 2, 3, 4, 5, 6, 7, 8];
// this is used to calculate a custom reference line point
const max = Math.max.apply(Math, sparklineData);
const min = 0;
const margin = 2;
const limit = 1;
const width = 100;
const height = 20;
const referencePoint = 5; // draw the reference line a the y value for the datapoint 5
const vfactor = (height - margin * 2) / (max - min || 2);
const y = (max - referencePoint) * vfactor;
return (
<>
<div
onMouseMove={(event) => {
if (displayTooltip && hoverPosition) {
const horizontalDisplacement = Math.abs(event.pageY - hoverPosition.y);
const verticalDisplacement = Math.abs(event.pageX - hoverPosition.x);
// hide the tooltip if the cursor moved more than 10 px in any direction
if (horizontalDisplacement > 10 || verticalDisplacement > 10) {
setDisplayTooltip(false);
setHoverPosition(null);
}
}
setEventPosition({ x: event.pageX, y: event.pageY });
}}
onMouseLeave={() => {
setDisplayTooltip(false);
setHoverPosition(null);
}}
className="text-center"
>
{displayTooltip && (
<div
className={`${
displayTooltip ? 'visible' : 'invisible'
} absolute z-50 bg-white rounded border-gray-300 shadow-lg p-1`}
style={{
top: eventPosition?.y + 10 ?? 0,
left: eventPosition?.x + 10 ?? 0,
}}
>
{tooltipData.text}
</div>
)}
<Sparklines
data={sparklineData}
width={width}
height={height}
min={min}
max={max}
margin={margin}
>
<SparklinesLine
style={{ stroke: '#4a5568', fill: '#edf2f7', fillOpacity: 1 }}
onMouseMove={(e, data, point) => {
setDisplayTooltip(true);
setHoverPosition(eventPosition);
setTooltipData({
point: point,
text: data,
});
}}
/>
<SparklinesReferenceLine type={SparklinesReferenceLineTypes.custom} value={y} />
</Sparklines>
</div>
</div>
</>
);
}
The CSS classes are from Tailwindcss so you would neet to adopt some stuff like visible oder invisible. Also this is taken from a Typescript-based project and I didn't test the snippet, so there might be some bugs. The general idea should be clear however.
Is the tooltip added or still not? If added how can we use it for sparklinebars
