Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Yield histogram plot data to children

pull/10616/head
Christopher Henn 2018-07-13 12:54:30 -07:00 committed by Chris Henn
parent 531560d971
commit 51aad407f5
3 changed files with 279 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/src/shared/components/HistogramChart.tsx
View File

@ -26,6 +26,14 @@ const PADDING_TOP = 0.2
const DIGIT_WIDTH = 7 const DIGIT_WIDTH = 7
const PERIOD_DIGIT_WIDTH = 4 const PERIOD_DIGIT_WIDTH = 4
interface RenderPropArgs {
xScale: ScaleTime<number, number>
yScale: ScaleLinear<number, number>
adjustedWidth: number
adjustedHeight: number
margins: Margins
}
interface Props { interface Props {
data: HistogramData data: HistogramData
width: number width: number
@ -34,6 +42,7 @@ interface Props {
colorScale: ColorScale colorScale: ColorScale
onBarClick?: (time: string) => void onBarClick?: (time: string) => void
sortBarGroups: SortFn sortBarGroups: SortFn
children?: (args: RenderPropArgs) => JSX.Element
} }
interface State { interface State {
@ -56,6 +65,7 @@ class HistogramChart extends PureComponent<Props, State> {
colors, colors,
onBarClick, onBarClick,
sortBarGroups, sortBarGroups,
children,
} = this.props } = this.props
const {margins} = this const {margins} = this
@ -76,8 +86,16 @@ class HistogramChart extends PureComponent<Props, State> {
const {hoverData} = this.state const {hoverData} = this.state
const {xScale, yScale, adjustedWidth, adjustedHeight, bodyTransform} = this const {xScale, yScale, adjustedWidth, adjustedHeight, bodyTransform} = this
const renderPropArgs = {
xScale,
yScale,
adjustedWidth,
adjustedHeight,
margins,
}
return ( return (
<> <div className="histogram-chart">
<svg width={width} height={height} className="histogram-chart"> <svg width={width} height={height} className="histogram-chart">
<defs> <defs>
<clipPath id="histogram-chart--bars-clip"> <clipPath id="histogram-chart--bars-clip">
@ -113,14 +131,17 @@ class HistogramChart extends PureComponent<Props, State> {
/> />
</g> </g>
</svg> </svg>
{hoverData && ( <div className="histogram-chart--overlays">
<HistogramChartTooltip {!!children && children(renderPropArgs)}
data={hoverData} {hoverData && (
colorScale={colorScale} <HistogramChartTooltip
colors={colors} data={hoverData}
/> colorScale={colorScale}
)} colors={colors}
</> />
)}
</div>
</div>
) )
} }

7
ui/src/style/components/histogram-chart.scss
View File

@ -1,5 +1,6 @@
.histogram-chart { .histogram-chart {
user-select: none; user-select: none;
position: relative;
} }
.histogram-chart-bars--bar { .histogram-chart-bars--bar {
@ -64,3 +65,9 @@
.histogram-chart-tooltip--column:first-child { .histogram-chart-tooltip--column:first-child {
margin-right: 12px; margin-right: 12px;
} }
.histogram-chart--overlays {
position: absolute;
top: 0;
left: 0;
}

477
ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap
View File

@ -177,247 +177,254 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
sortBarGroups={[Function]} sortBarGroups={[Function]}
width={600} width={600}
> >
<svg <div
className="histogram-chart" className="histogram-chart"
height={400}
width={600}
> >
<defs> <svg
<clipPath className="histogram-chart"
id="histogram-chart--bars-clip" height={400}
> width={600}
<rect
height={375}
width={575}
x="0"
y="0"
/>
</clipPath>
</defs>
<g
className="histogram-chart--axes"
> >
<HistogramChartAxes <defs>
height={400} <clipPath
margins={ id="histogram-chart--bars-clip"
Object { >
"bottom": 20, <rect
"left": 25, height={375}
"right": 0, width={575}
"top": 5, 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}
width={600} xScale={[Function]}
xScale={[Function]} yScale={[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 <line
</text> className="y-tick"
<text key="0-25-625-380"
className="y-label" x1={25}
key="0.5-25-625-301.875" x2={625}
x={18} y1={380}
y={301.875} y2={380}
>
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> <line
<g className="y-tick"
className="histogram-chart-bars--bars" key="0.5-25-625-301.875"
data-key="2-2-481" x1={25}
key="2-2-481" x2={625}
onClick={[Function]} y1={301.875}
onMouseOut={[Function]} y2={301.875}
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> <line
</HistogramChartBars> className="y-tick"
</g> key="1-25-625-223.75"
</svg> 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> </HistogramChart>
`; `;