Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 1x 1x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x | import React from "react"
import { TextWrap } from "../text/TextWrap"
import { first, last, compact, uniq } from "../../clientUtils/Util"
import { observer } from "mobx-react"
import { ScatterTooltipProps, SeriesPoint } from "./ScatterPlotChartConstants"
@observer
export class ScatterTooltip extends React.Component<ScatterTooltipProps> {
formatValueY(value: SeriesPoint): string {
return "Y Axis: " + this.props.yColumn.formatValueLong(value.y)
}
formatValueX(value: SeriesPoint): string {
let s = `X Axis: ${this.props.xColumn.formatValueLong(value.x)}`
if (!value.time.span && value.time.y !== value.time.x)
s += ` (data from ${this.props.xColumn.originalTimeColumn.formatValue(
value.time.x
)})`
return s
}
render(): JSX.Element {
const { x, y, maxWidth, fontSize, series } = this.props
const lineHeight = 5
const firstValue = first(series.points)
const lastValue = last(series.points)
const values = compact(uniq([firstValue, lastValue]))
const elements: Array<{ x: number; y: number; wrap: TextWrap }> = []
let offset = 0
const heading = {
x: x,
y: y + offset,
wrap: new TextWrap({
maxWidth: maxWidth,
fontSize: 0.75 * fontSize,
text: series.label,
}),
}
elements.push(heading)
offset += heading.wrap.height + lineHeight
const { yColumn } = this.props
values.forEach((v) => {
const year = {
x: x,
y: y + offset,
wrap: new TextWrap({
maxWidth: maxWidth,
fontSize: 0.65 * fontSize,
text: v.time.span
? `${yColumn.table.formatTime(
v.time.span[0]
)} to ${yColumn.originalTimeColumn.formatValue(
v.time.span[1]
)}`
: yColumn.originalTimeColumn.formatValue(v.time.y),
}),
}
offset += year.wrap.height
const line1 = {
x: x,
y: y + offset,
wrap: new TextWrap({
maxWidth: maxWidth,
fontSize: 0.55 * fontSize,
text: this.formatValueY(v),
}),
}
offset += line1.wrap.height
const line2 = {
x: x,
y: y + offset,
wrap: new TextWrap({
maxWidth: maxWidth,
fontSize: 0.55 * fontSize,
text: this.formatValueX(v),
}),
}
offset += line2.wrap.height + lineHeight
elements.push(...[year, line1, line2])
})
return (
<g className="scatterTooltip">
{elements.map((el, i) =>
el.wrap.render(el.x, el.y, { key: i })
)}
</g>
)
}
}
|