-
Notifications
You must be signed in to change notification settings - Fork 119
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Removed any listeners from the canvas elements. Using a map for each geometry on the chart: mappings x value and any relative Y values associated. We invert the mouse coordinates using the xScale to get the right X key to use on that map. This increase the performance on highly/medium dense charts. Two new props are added to the `Settings` specs: `tooltipType` to specify the tooltip type (vertical cursor, crosshair, follow, none) and the `tooltipSnap` to snap the cursor to the grid for linear charts. close #80, close #58, close #88
- Loading branch information
Showing
65 changed files
with
6,174 additions
and
1,185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,4 @@ | ||
@import 'legend'; | ||
@import 'tooltip'; | ||
@import 'crosshair'; | ||
@import 'highlighter'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
.elasticChartsCrosshair { | ||
position: absolute; | ||
pointer-events: none; | ||
} | ||
|
||
.elasticChartsCrosshair__band { | ||
position: absolute; | ||
pointer-events: none; | ||
} | ||
|
||
.elasticChartsCrosshair__line { | ||
position: absolute; | ||
pointer-events: none; | ||
z-index: $euiZLevel8; | ||
background: 'transparent'; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
.elasticChartsHighlighter { | ||
position: absolute; | ||
z-index: 1000; | ||
pointer-events: none; | ||
top: 0; | ||
bottom: 0; | ||
left: 0; | ||
right: 0; | ||
width: 100%; | ||
height: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
import { inject, observer } from 'mobx-react'; | ||
import React, { CSSProperties } from 'react'; | ||
import { TooltipType } from '../lib/utils/interactions'; | ||
import { ChartStore } from '../state/chart_state'; | ||
import { isHorizontalRotation } from '../state/utils'; | ||
|
||
interface CrosshairProps { | ||
chartStore?: ChartStore; | ||
} | ||
|
||
function canRenderBand(type: TooltipType, visible: boolean) { | ||
return visible && (type === TooltipType.Crosshairs || type === TooltipType.VerticalCursor); | ||
} | ||
function canRenderHelpLine(type: TooltipType, visible: boolean) { | ||
return visible && type === TooltipType.Crosshairs; | ||
} | ||
|
||
class CrosshairComponent extends React.Component<CrosshairProps> { | ||
static displayName = 'Crosshair'; | ||
|
||
render() { | ||
const { isCrosshairVisible } = this.props.chartStore!; | ||
if (!isCrosshairVisible.get()) { | ||
return <div className="elasticChartsCrosshair" />; | ||
} | ||
|
||
return ( | ||
<div className="elasticChartsCrosshair"> | ||
{this.renderBand()} | ||
{this.renderLine()} | ||
</div> | ||
); | ||
} | ||
|
||
renderBand() { | ||
const { | ||
chartTheme: { | ||
crosshair: { band }, | ||
}, | ||
cursorBandPosition, | ||
tooltipType, | ||
} = this.props.chartStore!; | ||
|
||
if (!canRenderBand(tooltipType.get(), band.visible)) { | ||
return null; | ||
} | ||
const style: CSSProperties = { | ||
...cursorBandPosition, | ||
background: band.fill, | ||
}; | ||
|
||
return <div className="elasticChartsCrosshair__band" style={style} />; | ||
} | ||
|
||
renderLine() { | ||
const { | ||
chartTheme: { | ||
crosshair: { line }, | ||
}, | ||
cursorLinePosition, | ||
tooltipType, | ||
chartRotation, | ||
} = this.props.chartStore!; | ||
|
||
if (!canRenderHelpLine(tooltipType.get(), line.visible)) { | ||
return null; | ||
} | ||
const isHorizontalRotated = isHorizontalRotation(chartRotation); | ||
let style: CSSProperties; | ||
if (isHorizontalRotated) { | ||
style = { | ||
...cursorLinePosition, | ||
borderTopWidth: line.strokeWidth, | ||
borderTopColor: line.stroke, | ||
borderTopStyle: line.dash ? 'dashed' : 'solid', | ||
}; | ||
} else { | ||
style = { | ||
...cursorLinePosition, | ||
borderLeftWidth: line.strokeWidth, | ||
borderLeftColor: line.stroke, | ||
borderLeftStyle: line.dash ? 'dashed' : 'solid', | ||
}; | ||
} | ||
return <div className="elasticChartsCrosshair__line" style={style} />; | ||
} | ||
} | ||
|
||
export const Crosshair = inject('chartStore')(observer(CrosshairComponent)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import { inject, observer } from 'mobx-react'; | ||
import React from 'react'; | ||
import { ChartStore } from '../state/chart_state'; | ||
|
||
interface HighlighterProps { | ||
chartStore?: ChartStore; | ||
} | ||
|
||
class HighlighterComponent extends React.Component<HighlighterProps> { | ||
static displayName = 'Highlighter'; | ||
|
||
render() { | ||
const { | ||
highlightedGeometries, | ||
chartTransform, | ||
chartDimensions, | ||
chartRotation, | ||
} = this.props.chartStore!; | ||
const left = chartDimensions.left + chartTransform.x; | ||
const top = chartDimensions.top + chartTransform.y; | ||
return ( | ||
<svg className="elasticChartsHighlighter"> | ||
<g transform={`translate(${left}, ${top}) rotate(${chartRotation})`}> | ||
{highlightedGeometries.map((highlightedGeometry, i) => { | ||
const { | ||
color, | ||
geom: { x, y, width, height, isPoint }, | ||
} = highlightedGeometry; | ||
if (isPoint) { | ||
return ( | ||
<circle | ||
key={i} | ||
cx={x} | ||
cy={y} | ||
r={width} | ||
stroke={color} | ||
strokeWidth={4} | ||
fill="transparent" | ||
/> | ||
); | ||
} | ||
return ( | ||
<rect key={i} x={x} y={y} width={width} height={height} fill="white" opacity={0.4} /> | ||
); | ||
})} | ||
</g> | ||
</svg> | ||
); | ||
} | ||
} | ||
|
||
export const Highlighter = inject('chartStore')(observer(HighlighterComponent)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.