Remove log viewer histogram code
Christopher Henn
Chris Henn
parent
fe04ef3476
commit
757fd82ac5
|
|
@ -1,96 +0,0 @@
|
|||
import React from 'react'
|
||||
import {mount} from 'enzyme'
|
||||
|
||||
import HistogramChart from 'src/shared/components/HistogramChart'
|
||||
import HistogramChartTooltip from 'src/shared/components/HistogramChartTooltip'
|
||||
|
||||
import {RemoteDataState} from 'src/types'
|
||||
|
||||
describe('HistogramChart', () => {
|
||||
test('displays a HistogramChartSkeleton if empty data is passed', () => {
|
||||
const props = {
|
||||
data: [],
|
||||
dataStatus: RemoteDataState.Done,
|
||||
width: 600,
|
||||
height: 400,
|
||||
colorScale: () => 'blue',
|
||||
colors: [],
|
||||
sortBarGroups: (a, b) => a.value - b.value,
|
||||
}
|
||||
|
||||
const wrapper = mount(<HistogramChart {...props} />)
|
||||
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('displays a nothing if passed width and height of 0', () => {
|
||||
const props = {
|
||||
data: [],
|
||||
dataStatus: RemoteDataState.Done,
|
||||
width: 0,
|
||||
height: 0,
|
||||
colorScale: () => 'blue',
|
||||
colors: [],
|
||||
sortBarGroups: (a, b) => a.value - b.value,
|
||||
}
|
||||
|
||||
const wrapper = mount(<HistogramChart {...props} />)
|
||||
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('displays the visualization with bars if nonempty data is passed', () => {
|
||||
const props = {
|
||||
data: [
|
||||
{key: '0', time: 0, value: 0, group: 'a'},
|
||||
{key: '1', time: 1, value: 1, group: 'a'},
|
||||
{key: '2', time: 2, value: 2, group: 'b'},
|
||||
],
|
||||
dataStatus: RemoteDataState.Done,
|
||||
width: 600,
|
||||
height: 400,
|
||||
colorScale: () => 'blue',
|
||||
colors: [],
|
||||
sortBarGroups: (a, b) => a.value - b.value,
|
||||
}
|
||||
|
||||
const wrapper = mount(<HistogramChart {...props} />)
|
||||
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('displays a HistogramChartTooltip when hovering over bars', () => {
|
||||
const props = {
|
||||
data: [
|
||||
{key: '0', time: 0, value: 0, group: 'a'},
|
||||
{key: '1', time: 1, value: 1, group: 'a'},
|
||||
{key: '2', time: 2, value: 2, group: 'b'},
|
||||
],
|
||||
dataStatus: RemoteDataState.Done,
|
||||
width: 600,
|
||||
height: 400,
|
||||
colorScale: () => 'blue',
|
||||
colors: [],
|
||||
sortBarGroups: (a, b) => a.value - b.value,
|
||||
}
|
||||
|
||||
const wrapper = mount(<HistogramChart {...props} />)
|
||||
|
||||
const fakeMouseOverEvent = {
|
||||
target: {
|
||||
getBoundingClientRect() {
|
||||
return {top: 10, right: 10, bottom: 5, left: 5}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
wrapper
|
||||
.find('.histogram-chart-bars--bars')
|
||||
.first()
|
||||
.simulate('mouseover', fakeMouseOverEvent)
|
||||
|
||||
const tooltip = wrapper.find(HistogramChartTooltip)
|
||||
|
||||
expect(tooltip).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import _ from 'lodash'
|
||||
import {scaleLinear, scaleTime, ScaleLinear, ScaleTime} from 'd3-scale'
|
||||
|
||||
import HistogramChartAxes from 'src/shared/components/HistogramChartAxes'
|
||||
import HistogramChartBars from 'src/shared/components/HistogramChartBars'
|
||||
import HistogramChartTooltip from 'src/shared/components/HistogramChartTooltip'
|
||||
import HistogramChartSkeleton from 'src/shared/components/HistogramChartSkeleton'
|
||||
|
||||
import extentBy from 'src/utils/extentBy'
|
||||
|
||||
import {
|
||||
HistogramData,
|
||||
Margins,
|
||||
HoverData,
|
||||
ColorScale,
|
||||
HistogramColor,
|
||||
SortFn,
|
||||
} from 'src/types/histogram'
|
||||
|
||||
const PADDING_TOP = 0.2
|
||||
|
||||
// Rather than use these magical constants, we could also render a digit and
|
||||
// capture its measured width with as state before rendering anything else.
|
||||
// Doing so would be robust but overkill.
|
||||
const DIGIT_WIDTH = 7
|
||||
const PERIOD_DIGIT_WIDTH = 4
|
||||
|
||||
interface RenderPropArgs {
|
||||
xScale: ScaleTime<number, number>
|
||||
yScale: ScaleLinear<number, number>
|
||||
adjustedWidth: number
|
||||
adjustedHeight: number
|
||||
margins: Margins
|
||||
}
|
||||
|
||||
interface Props {
|
||||
data: HistogramData
|
||||
width: number
|
||||
height: number
|
||||
colors: HistogramColor[]
|
||||
colorScale: ColorScale
|
||||
onBarClick?: (time: string) => void
|
||||
sortBarGroups: SortFn
|
||||
children?: (args: RenderPropArgs) => JSX.Element
|
||||
}
|
||||
|
||||
interface State {
|
||||
hoverData?: HoverData
|
||||
}
|
||||
|
||||
class HistogramChart extends PureComponent<Props, State> {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.state = {}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
data,
|
||||
colorScale,
|
||||
colors,
|
||||
onBarClick,
|
||||
sortBarGroups,
|
||||
children,
|
||||
} = this.props
|
||||
const {margins} = this
|
||||
|
||||
if (width === 0 || height === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (!data.length) {
|
||||
return (
|
||||
<HistogramChartSkeleton
|
||||
width={width}
|
||||
height={height}
|
||||
margins={margins}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const {hoverData} = this.state
|
||||
const {xScale, yScale, adjustedWidth, adjustedHeight, bodyTransform} = this
|
||||
|
||||
const renderPropArgs = {
|
||||
xScale,
|
||||
yScale,
|
||||
adjustedWidth,
|
||||
adjustedHeight,
|
||||
margins,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="histogram-chart">
|
||||
<svg width={width} height={height} className="histogram-chart">
|
||||
<defs>
|
||||
<clipPath id="histogram-chart--bars-clip">
|
||||
<rect x="0" y="0" width={adjustedWidth} height={adjustedHeight} />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g className="histogram-chart--axes">
|
||||
<HistogramChartAxes
|
||||
width={width}
|
||||
height={height}
|
||||
margins={margins}
|
||||
xScale={xScale}
|
||||
yScale={yScale}
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform={bodyTransform}
|
||||
className="histogram-chart--bars"
|
||||
clipPath="url(#histogram-chart--bars-clip)"
|
||||
>
|
||||
<HistogramChartBars
|
||||
width={adjustedWidth}
|
||||
height={adjustedHeight}
|
||||
data={data}
|
||||
xScale={xScale}
|
||||
yScale={yScale}
|
||||
colorScale={colorScale}
|
||||
hoverData={hoverData}
|
||||
onHover={this.handleHover}
|
||||
colors={colors}
|
||||
onBarClick={onBarClick}
|
||||
sortBarGroups={sortBarGroups}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div className="histogram-chart--overlays">
|
||||
{!!children && children(renderPropArgs)}
|
||||
{hoverData && (
|
||||
<HistogramChartTooltip
|
||||
data={hoverData}
|
||||
colorScale={colorScale}
|
||||
colors={colors}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private get xScale(): ScaleTime<number, number> {
|
||||
const {adjustedWidth} = this
|
||||
const {data} = this.props
|
||||
|
||||
const [t0, t1] = extentBy(data, d => d.time)
|
||||
|
||||
return scaleTime()
|
||||
.domain([new Date(t0.time), new Date(t1.time)])
|
||||
.range([0, adjustedWidth])
|
||||
}
|
||||
|
||||
private get yScale(): ScaleLinear<number, number> {
|
||||
const {adjustedHeight, maxAggregateCount} = this
|
||||
|
||||
return scaleLinear()
|
||||
.domain([0, maxAggregateCount + PADDING_TOP * maxAggregateCount])
|
||||
.range([adjustedHeight, 0])
|
||||
}
|
||||
|
||||
private get adjustedWidth(): number {
|
||||
const {margins} = this
|
||||
|
||||
return this.props.width - margins.left - margins.right
|
||||
}
|
||||
|
||||
private get adjustedHeight(): number {
|
||||
const {margins} = this
|
||||
|
||||
return this.props.height - margins.top - margins.bottom
|
||||
}
|
||||
|
||||
private get bodyTransform(): string {
|
||||
const {margins} = this
|
||||
|
||||
return `translate(${margins.left}, ${margins.top})`
|
||||
}
|
||||
|
||||
private get margins(): Margins {
|
||||
const {maxAggregateCount} = this
|
||||
|
||||
const domainTop = maxAggregateCount + PADDING_TOP * maxAggregateCount
|
||||
const left = domainTop.toString().length * DIGIT_WIDTH + PERIOD_DIGIT_WIDTH
|
||||
|
||||
return {top: 5, right: 0, bottom: 20, left}
|
||||
}
|
||||
|
||||
private get maxAggregateCount(): number {
|
||||
const {data} = this.props
|
||||
|
||||
if (!data.length) {
|
||||
return 0
|
||||
}
|
||||
|
||||
const groups = _.groupBy(data, 'time')
|
||||
const counts = Object.values(groups).map(group =>
|
||||
group.reduce((sum, current) => sum + current.value, 0)
|
||||
)
|
||||
|
||||
return Math.max(...counts)
|
||||
}
|
||||
|
||||
private handleHover = (hoverData: HoverData): void => {
|
||||
this.setState({hoverData})
|
||||
}
|
||||
}
|
||||
|
||||
export default HistogramChart
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import {ScaleLinear, ScaleTime} from 'd3-scale'
|
||||
|
||||
import {Margins} from 'src/types/histogram'
|
||||
|
||||
const Y_TICK_COUNT = 5
|
||||
const Y_TICK_PADDING_RIGHT = 7
|
||||
const X_TICK_COUNT = 10
|
||||
const X_TICK_PADDING_TOP = 8
|
||||
|
||||
interface Props {
|
||||
width: number
|
||||
height: number
|
||||
margins: Margins
|
||||
xScale: ScaleTime<number, number>
|
||||
yScale: ScaleLinear<number, number>
|
||||
}
|
||||
|
||||
class HistogramChartAxes extends PureComponent<Props> {
|
||||
public render() {
|
||||
const {xTickData, yTickData} = this
|
||||
|
||||
return (
|
||||
<>
|
||||
{this.renderYTicks(yTickData)}
|
||||
{this.renderYLabels(yTickData)}
|
||||
{this.renderXLabels(xTickData)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
private renderYTicks(yTickData) {
|
||||
return yTickData.map(({x1, x2, y, key}) => (
|
||||
<line className="y-tick" key={key} x1={x1} x2={x2} y1={y} y2={y} />
|
||||
))
|
||||
}
|
||||
|
||||
private renderYLabels(yTickData) {
|
||||
return yTickData.map(({x1, y, label, key}) => (
|
||||
<text className="y-label" key={key} x={x1 - Y_TICK_PADDING_RIGHT} y={y}>
|
||||
{label}
|
||||
</text>
|
||||
))
|
||||
}
|
||||
|
||||
private renderXLabels(xTickData) {
|
||||
return xTickData.map(({x, y, label, key}) => (
|
||||
<text className="x-label" key={key} y={y} x={x}>
|
||||
{label}
|
||||
</text>
|
||||
))
|
||||
}
|
||||
|
||||
private get xTickData() {
|
||||
const {margins, xScale, width, height} = this.props
|
||||
|
||||
const y = height - margins.bottom + X_TICK_PADDING_TOP
|
||||
const formatTime = xScale.tickFormat()
|
||||
|
||||
return xScale
|
||||
.ticks(X_TICK_COUNT)
|
||||
.filter(val => {
|
||||
const x = xScale(val)
|
||||
|
||||
// Don't render labels that will be cut off
|
||||
return x > margins.left && x < width - margins.right
|
||||
})
|
||||
.map(val => {
|
||||
const x = xScale(val)
|
||||
const label = formatTime(val)
|
||||
const key = `${label}-${x}-${y}`
|
||||
|
||||
return {label, x, y, key}
|
||||
})
|
||||
}
|
||||
|
||||
private get yTickData() {
|
||||
const {width, margins, yScale} = this.props
|
||||
|
||||
return yScale.ticks(Y_TICK_COUNT).map(val => {
|
||||
const label = val
|
||||
const x1 = margins.left
|
||||
const x2 = margins.left + width
|
||||
const y = margins.top + yScale(val)
|
||||
const key = `${label}-${x1}-${x2}-${y}`
|
||||
|
||||
return {label, x1, x2, y, key}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default HistogramChartAxes
|
||||
|
|
@ -1,261 +0,0 @@
|
|||
import React, {PureComponent, MouseEvent} from 'react'
|
||||
import _ from 'lodash'
|
||||
import {ScaleLinear, ScaleTime} from 'd3-scale'
|
||||
import {color} from 'd3-color'
|
||||
|
||||
import {getDeep} from 'src/utils/wrappers'
|
||||
|
||||
import {
|
||||
HistogramData,
|
||||
HistogramDatum,
|
||||
HoverData,
|
||||
TooltipAnchor,
|
||||
ColorScale,
|
||||
HistogramColor,
|
||||
SortFn,
|
||||
} from 'src/types/histogram'
|
||||
|
||||
const BAR_BORDER_RADIUS = 3
|
||||
const BAR_PADDING_SIDES = 4
|
||||
const HOVER_BRIGTHEN_FACTOR = 0.4
|
||||
const TOOLTIP_HORIZONTAL_MARGIN = 5
|
||||
const TOOLTIP_REFLECT_DIST = 100
|
||||
|
||||
const getBarWidth = ({data, xScale, width}): number => {
|
||||
const dataInView = data.filter(
|
||||
d => xScale(d.time) >= 0 && xScale(d.time) <= width
|
||||
)
|
||||
const barCount = Object.values(_.groupBy(dataInView, 'time')).length
|
||||
|
||||
return Math.round(width / barCount - BAR_PADDING_SIDES)
|
||||
}
|
||||
|
||||
interface BarGroup {
|
||||
key: string
|
||||
clip: {
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
bars: Array<{
|
||||
key: string
|
||||
group: string
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
fill: string
|
||||
}>
|
||||
data: HistogramData
|
||||
}
|
||||
|
||||
const getBarGroups = ({
|
||||
data,
|
||||
width,
|
||||
xScale,
|
||||
yScale,
|
||||
colorScale,
|
||||
hoverData,
|
||||
colors,
|
||||
sortBarGroups,
|
||||
}: Partial<Props>): BarGroup[] => {
|
||||
const barWidth = getBarWidth({data, xScale, width})
|
||||
const visibleData = data.filter(d => d.value !== 0)
|
||||
const timeGroups = Object.values(_.groupBy(visibleData, 'time'))
|
||||
|
||||
for (const timeGroup of timeGroups) {
|
||||
timeGroup.sort(sortBarGroups)
|
||||
}
|
||||
|
||||
let hoverDataKeys = []
|
||||
|
||||
if (!!hoverData) {
|
||||
hoverDataKeys = hoverData.data.map(h => h.key)
|
||||
}
|
||||
|
||||
return timeGroups.map(timeGroup => {
|
||||
const time = timeGroup[0].time
|
||||
const x = xScale(time) - barWidth / 2
|
||||
const total = _.sumBy(timeGroup, 'value')
|
||||
|
||||
const barGroup = {
|
||||
key: `${time}-${total}-${x}`,
|
||||
clip: {
|
||||
x,
|
||||
y: yScale(total),
|
||||
width: barWidth,
|
||||
height: yScale(0) - yScale(total) + BAR_BORDER_RADIUS,
|
||||
},
|
||||
bars: [],
|
||||
data: timeGroup,
|
||||
}
|
||||
|
||||
let offset = 0
|
||||
|
||||
timeGroup.forEach((d: HistogramDatum) => {
|
||||
const height = yScale(0) - yScale(d.value)
|
||||
const k = hoverDataKeys.includes(d.key) ? HOVER_BRIGTHEN_FACTOR : 0
|
||||
const groupColor = colors.find(c => c.group === d.group)
|
||||
const fill = color(colorScale(_.get(groupColor, 'color', ''), d.group))
|
||||
.brighter(k)
|
||||
.hex()
|
||||
|
||||
barGroup.bars.push({
|
||||
key: d.key,
|
||||
group: d.group,
|
||||
x,
|
||||
y: yScale(d.value) - offset,
|
||||
width: barWidth,
|
||||
height,
|
||||
fill,
|
||||
})
|
||||
|
||||
offset += height
|
||||
})
|
||||
|
||||
return barGroup
|
||||
})
|
||||
}
|
||||
|
||||
interface BarGroup {
|
||||
key: string
|
||||
clip: {
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
bars: Array<{
|
||||
key: string
|
||||
group: string
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
fill: string
|
||||
}>
|
||||
data: HistogramData
|
||||
}
|
||||
interface Props {
|
||||
width: number
|
||||
height: number
|
||||
data: HistogramData
|
||||
xScale: ScaleTime<number, number>
|
||||
yScale: ScaleLinear<number, number>
|
||||
colorScale: ColorScale
|
||||
hoverData?: HoverData
|
||||
colors: HistogramColor[]
|
||||
onHover: (h: HoverData) => void
|
||||
onBarClick?: (time: string) => void
|
||||
sortBarGroups: SortFn
|
||||
}
|
||||
|
||||
interface State {
|
||||
barGroups: BarGroup[]
|
||||
}
|
||||
|
||||
class HistogramChartBars extends PureComponent<Props, State> {
|
||||
public static getDerivedStateFromProps(props: Props) {
|
||||
return {barGroups: getBarGroups(props)}
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.state = {barGroups: []}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {barGroups} = this.state
|
||||
|
||||
return barGroups.map(group => {
|
||||
const {key, clip, bars} = group
|
||||
|
||||
return (
|
||||
<g
|
||||
key={key}
|
||||
className="histogram-chart-bars--bars"
|
||||
data-key={key}
|
||||
onMouseOver={this.handleMouseOver}
|
||||
onMouseOut={this.handleMouseOut}
|
||||
onClick={this.handleBarClick(group.data)}
|
||||
>
|
||||
<defs>
|
||||
<clipPath id={`histogram-chart-bars--clip-${key}`}>
|
||||
<rect
|
||||
x={clip.x}
|
||||
y={clip.y}
|
||||
width={clip.width}
|
||||
height={clip.height}
|
||||
rx={BAR_BORDER_RADIUS}
|
||||
ry={BAR_BORDER_RADIUS}
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
{bars.map(d => (
|
||||
<rect
|
||||
key={d.key}
|
||||
className="histogram-chart-bars--bar"
|
||||
x={d.x}
|
||||
y={d.y}
|
||||
width={d.width}
|
||||
height={d.height}
|
||||
fill={d.fill}
|
||||
clipPath={`url(#histogram-chart-bars--clip-${key})`}
|
||||
data-group={d.group}
|
||||
data-key={d.key}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
private handleBarClick = data => (): void => {
|
||||
const {onBarClick} = this.props
|
||||
|
||||
if (onBarClick) {
|
||||
const time = data[0].time
|
||||
onBarClick(time)
|
||||
}
|
||||
}
|
||||
|
||||
private handleMouseOver = (e: MouseEvent<SVGGElement>): void => {
|
||||
const groupKey = getDeep<string>(e, 'currentTarget.dataset.key', '')
|
||||
|
||||
if (!groupKey) {
|
||||
return
|
||||
}
|
||||
|
||||
const {barGroups} = this.state
|
||||
const hoverGroup = barGroups.find(d => d.key === groupKey)
|
||||
|
||||
if (!hoverGroup) {
|
||||
return
|
||||
}
|
||||
|
||||
const data = _.get(hoverGroup, 'data').reverse()
|
||||
const barGroup = e.currentTarget as SVGGElement
|
||||
const boundingRect = barGroup.getBoundingClientRect()
|
||||
const boundingRectHeight = boundingRect.bottom - boundingRect.top
|
||||
const y = boundingRect.top + boundingRectHeight / 2
|
||||
|
||||
let x = boundingRect.right + TOOLTIP_HORIZONTAL_MARGIN
|
||||
let anchor: TooltipAnchor = 'left'
|
||||
|
||||
// This makes an assumption that the component is within the viewport
|
||||
if (x >= window.innerWidth - TOOLTIP_REFLECT_DIST) {
|
||||
x = window.innerWidth - boundingRect.left + TOOLTIP_HORIZONTAL_MARGIN
|
||||
anchor = 'right'
|
||||
}
|
||||
|
||||
this.props.onHover({data, x, y, anchor})
|
||||
}
|
||||
|
||||
private handleMouseOut = (): void => {
|
||||
this.props.onHover(null)
|
||||
}
|
||||
}
|
||||
|
||||
export default HistogramChartBars
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import React, {SFC} from 'react'
|
||||
import _ from 'lodash'
|
||||
|
||||
import {Margins} from 'src/types/histogram'
|
||||
|
||||
const NUM_TICKS = 5
|
||||
|
||||
interface Props {
|
||||
width: number
|
||||
height: number
|
||||
margins: Margins
|
||||
}
|
||||
|
||||
const HistogramChartSkeleton: SFC<Props> = props => {
|
||||
const {margins, width, height} = props
|
||||
|
||||
const spacing = (height - margins.top - margins.bottom) / NUM_TICKS
|
||||
const y1 = height - margins.bottom
|
||||
const tickYs = _.range(0, NUM_TICKS).map(i => y1 - i * spacing)
|
||||
|
||||
return (
|
||||
<svg className="histogram-chart-skeleton" width={width} height={height}>
|
||||
{tickYs.map((y, i) => (
|
||||
<line
|
||||
key={i}
|
||||
className="y-tick"
|
||||
x1={margins.left}
|
||||
x2={width - margins.right}
|
||||
y1={y}
|
||||
y2={y}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default HistogramChartSkeleton
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
import React, {SFC, CSSProperties} from 'react'
|
||||
import _ from 'lodash'
|
||||
|
||||
import {HoverData, ColorScale, HistogramColor} from 'src/types/histogram'
|
||||
|
||||
interface Props {
|
||||
data: HoverData
|
||||
colorScale: ColorScale
|
||||
colors: HistogramColor[]
|
||||
}
|
||||
|
||||
const HistogramChartTooltip: SFC<Props> = props => {
|
||||
const {colorScale, colors} = props
|
||||
const {data, x, y, anchor = 'left'} = props.data
|
||||
|
||||
const tooltipStyle: CSSProperties = {
|
||||
position: 'fixed',
|
||||
top: y,
|
||||
}
|
||||
|
||||
if (anchor === 'left') {
|
||||
tooltipStyle.left = x
|
||||
} else {
|
||||
tooltipStyle.right = x
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="histogram-chart-tooltip" style={tooltipStyle}>
|
||||
<div className="histogram-chart-tooltip--column">
|
||||
{data.map(d => {
|
||||
const groupColor = colors.find(c => c.group === d.group)
|
||||
return (
|
||||
<div
|
||||
key={d.key}
|
||||
style={{
|
||||
color: colorScale(_.get(groupColor, 'color', ''), d.group),
|
||||
}}
|
||||
>
|
||||
{d.value}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="histogram-chart-tooltip--column">
|
||||
{data.map(d => {
|
||||
const groupColor = colors.find(c => c.group === d.group)
|
||||
return (
|
||||
<div
|
||||
key={d.key}
|
||||
style={{
|
||||
color: colorScale(_.get(groupColor, 'color', ''), d.group),
|
||||
}}
|
||||
>
|
||||
{d.group}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HistogramChartTooltip
|
||||
|
|
@ -1,430 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`HistogramChart displays a HistogramChartSkeleton if empty data is passed 1`] = `
|
||||
<HistogramChart
|
||||
colorScale={[Function]}
|
||||
colors={Array []}
|
||||
data={Array []}
|
||||
dataStatus="Done"
|
||||
height={400}
|
||||
sortBarGroups={[Function]}
|
||||
width={600}
|
||||
>
|
||||
<HistogramChartSkeleton
|
||||
height={400}
|
||||
margins={
|
||||
Object {
|
||||
"bottom": 20,
|
||||
"left": 11,
|
||||
"right": 0,
|
||||
"top": 5,
|
||||
}
|
||||
}
|
||||
width={600}
|
||||
>
|
||||
<svg
|
||||
className="histogram-chart-skeleton"
|
||||
height={400}
|
||||
width={600}
|
||||
>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="0"
|
||||
x1={11}
|
||||
x2={600}
|
||||
y1={380}
|
||||
y2={380}
|
||||
/>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="1"
|
||||
x1={11}
|
||||
x2={600}
|
||||
y1={305}
|
||||
y2={305}
|
||||
/>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="2"
|
||||
x1={11}
|
||||
x2={600}
|
||||
y1={230}
|
||||
y2={230}
|
||||
/>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="3"
|
||||
x1={11}
|
||||
x2={600}
|
||||
y1={155}
|
||||
y2={155}
|
||||
/>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="4"
|
||||
x1={11}
|
||||
x2={600}
|
||||
y1={80}
|
||||
y2={80}
|
||||
/>
|
||||
</svg>
|
||||
</HistogramChartSkeleton>
|
||||
</HistogramChart>
|
||||
`;
|
||||
|
||||
exports[`HistogramChart displays a HistogramChartTooltip when hovering over bars 1`] = `
|
||||
<HistogramChartTooltip
|
||||
colorScale={[Function]}
|
||||
colors={Array []}
|
||||
data={
|
||||
Object {
|
||||
"anchor": "left",
|
||||
"data": Array [
|
||||
Object {
|
||||
"group": "a",
|
||||
"key": "1",
|
||||
"time": 1,
|
||||
"value": 1,
|
||||
},
|
||||
],
|
||||
"x": 5,
|
||||
"y": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="histogram-chart-tooltip"
|
||||
style={
|
||||
Object {
|
||||
"left": 5,
|
||||
"position": "fixed",
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="histogram-chart-tooltip--column"
|
||||
>
|
||||
<div
|
||||
key="1"
|
||||
style={
|
||||
Object {
|
||||
"color": "blue",
|
||||
}
|
||||
}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="histogram-chart-tooltip--column"
|
||||
>
|
||||
<div
|
||||
key="1"
|
||||
style={
|
||||
Object {
|
||||
"color": "blue",
|
||||
}
|
||||
}
|
||||
>
|
||||
a
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HistogramChartTooltip>
|
||||
`;
|
||||
|
||||
exports[`HistogramChart displays a nothing if passed width and height of 0 1`] = `
|
||||
<HistogramChart
|
||||
colorScale={[Function]}
|
||||
colors={Array []}
|
||||
data={Array []}
|
||||
dataStatus="Done"
|
||||
height={0}
|
||||
sortBarGroups={[Function]}
|
||||
width={0}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`HistogramChart displays the visualization with bars if nonempty data is passed 1`] = `
|
||||
<HistogramChart
|
||||
colorScale={[Function]}
|
||||
colors={Array []}
|
||||
data={
|
||||
Array [
|
||||
Object {
|
||||
"group": "a",
|
||||
"key": "0",
|
||||
"time": 0,
|
||||
"value": 0,
|
||||
},
|
||||
Object {
|
||||
"group": "a",
|
||||
"key": "1",
|
||||
"time": 1,
|
||||
"value": 1,
|
||||
},
|
||||
Object {
|
||||
"group": "b",
|
||||
"key": "2",
|
||||
"time": 2,
|
||||
"value": 2,
|
||||
},
|
||||
]
|
||||
}
|
||||
dataStatus="Done"
|
||||
height={400}
|
||||
sortBarGroups={[Function]}
|
||||
width={600}
|
||||
>
|
||||
<div
|
||||
className="histogram-chart"
|
||||
>
|
||||
<svg
|
||||
className="histogram-chart"
|
||||
height={400}
|
||||
width={600}
|
||||
>
|
||||
<defs>
|
||||
<clipPath
|
||||
id="histogram-chart--bars-clip"
|
||||
>
|
||||
<rect
|
||||
height={375}
|
||||
width={575}
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g
|
||||
className="histogram-chart--axes"
|
||||
>
|
||||
<HistogramChartAxes
|
||||
height={400}
|
||||
margins={
|
||||
Object {
|
||||
"bottom": 20,
|
||||
"left": 25,
|
||||
"right": 0,
|
||||
"top": 5,
|
||||
}
|
||||
}
|
||||
width={600}
|
||||
xScale={[Function]}
|
||||
yScale={[Function]}
|
||||
>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="0-25-625-380"
|
||||
x1={25}
|
||||
x2={625}
|
||||
y1={380}
|
||||
y2={380}
|
||||
/>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="0.5-25-625-301.875"
|
||||
x1={25}
|
||||
x2={625}
|
||||
y1={301.875}
|
||||
y2={301.875}
|
||||
/>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="1-25-625-223.75"
|
||||
x1={25}
|
||||
x2={625}
|
||||
y1={223.75}
|
||||
y2={223.75}
|
||||
/>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="1.5-25-625-145.625"
|
||||
x1={25}
|
||||
x2={625}
|
||||
y1={145.625}
|
||||
y2={145.625}
|
||||
/>
|
||||
<line
|
||||
className="y-tick"
|
||||
key="2-25-625-67.5"
|
||||
x1={25}
|
||||
x2={625}
|
||||
y1={67.5}
|
||||
y2={67.5}
|
||||
/>
|
||||
<text
|
||||
className="y-label"
|
||||
key="0-25-625-380"
|
||||
x={18}
|
||||
y={380}
|
||||
>
|
||||
0
|
||||
</text>
|
||||
<text
|
||||
className="y-label"
|
||||
key="0.5-25-625-301.875"
|
||||
x={18}
|
||||
y={301.875}
|
||||
>
|
||||
0.5
|
||||
</text>
|
||||
<text
|
||||
className="y-label"
|
||||
key="1-25-625-223.75"
|
||||
x={18}
|
||||
y={223.75}
|
||||
>
|
||||
1
|
||||
</text>
|
||||
<text
|
||||
className="y-label"
|
||||
key="1.5-25-625-145.625"
|
||||
x={18}
|
||||
y={145.625}
|
||||
>
|
||||
1.5
|
||||
</text>
|
||||
<text
|
||||
className="y-label"
|
||||
key="2-25-625-67.5"
|
||||
x={18}
|
||||
y={67.5}
|
||||
>
|
||||
2
|
||||
</text>
|
||||
<text
|
||||
className="x-label"
|
||||
key=".001-287.5-388"
|
||||
x={287.5}
|
||||
y={388}
|
||||
>
|
||||
.001
|
||||
</text>
|
||||
<text
|
||||
className="x-label"
|
||||
key=".002-575-388"
|
||||
x={575}
|
||||
y={388}
|
||||
>
|
||||
.002
|
||||
</text>
|
||||
</HistogramChartAxes>
|
||||
</g>
|
||||
<g
|
||||
className="histogram-chart--bars"
|
||||
clipPath="url(#histogram-chart--bars-clip)"
|
||||
transform="translate(25, 5)"
|
||||
>
|
||||
<HistogramChartBars
|
||||
colorScale={[Function]}
|
||||
colors={Array []}
|
||||
data={
|
||||
Array [
|
||||
Object {
|
||||
"group": "a",
|
||||
"key": "0",
|
||||
"time": 0,
|
||||
"value": 0,
|
||||
},
|
||||
Object {
|
||||
"group": "a",
|
||||
"key": "1",
|
||||
"time": 1,
|
||||
"value": 1,
|
||||
},
|
||||
Object {
|
||||
"group": "b",
|
||||
"key": "2",
|
||||
"time": 2,
|
||||
"value": 2,
|
||||
},
|
||||
]
|
||||
}
|
||||
height={375}
|
||||
onHover={[Function]}
|
||||
sortBarGroups={[Function]}
|
||||
width={575}
|
||||
xScale={[Function]}
|
||||
yScale={[Function]}
|
||||
>
|
||||
<g
|
||||
className="histogram-chart-bars--bars"
|
||||
data-key="1-1-193.5"
|
||||
key="1-1-193.5"
|
||||
onClick={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<defs>
|
||||
<clipPath
|
||||
id="histogram-chart-bars--clip-1-1-193.5"
|
||||
>
|
||||
<rect
|
||||
height={159.25}
|
||||
rx={3}
|
||||
ry={3}
|
||||
width={188}
|
||||
x={193.5}
|
||||
y={218.75}
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect
|
||||
className="histogram-chart-bars--bar"
|
||||
clipPath="url(#histogram-chart-bars--clip-1-1-193.5)"
|
||||
data-group="a"
|
||||
data-key="1"
|
||||
fill="#0000ff"
|
||||
height={156.25}
|
||||
key="1"
|
||||
width={188}
|
||||
x={193.5}
|
||||
y={218.75}
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
className="histogram-chart-bars--bars"
|
||||
data-key="2-2-481"
|
||||
key="2-2-481"
|
||||
onClick={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<defs>
|
||||
<clipPath
|
||||
id="histogram-chart-bars--clip-2-2-481"
|
||||
>
|
||||
<rect
|
||||
height={315.5}
|
||||
rx={3}
|
||||
ry={3}
|
||||
width={188}
|
||||
x={481}
|
||||
y={62.5}
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect
|
||||
className="histogram-chart-bars--bar"
|
||||
clipPath="url(#histogram-chart-bars--clip-2-2-481)"
|
||||
data-group="b"
|
||||
data-key="2"
|
||||
fill="#0000ff"
|
||||
height={312.5}
|
||||
key="2"
|
||||
width={188}
|
||||
x={481}
|
||||
y={62.5}
|
||||
/>
|
||||
</g>
|
||||
</HistogramChartBars>
|
||||
</g>
|
||||
</svg>
|
||||
<div
|
||||
className="histogram-chart--overlays"
|
||||
/>
|
||||
</div>
|
||||
</HistogramChart>
|
||||
`;
|
||||
Loading…
Reference in New Issue