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 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
@ -34,6 +42,7 @@ interface Props {
colorScale: ColorScale
onBarClick?: (time: string) => void
sortBarGroups: SortFn
children?: (args: RenderPropArgs) => JSX.Element
}
interface State {
@ -56,6 +65,7 @@ class HistogramChart extends PureComponent<Props, State> {
colors,
onBarClick,
sortBarGroups,
children,
} = this.props
const {margins} = this
@ -76,8 +86,16 @@ class HistogramChart extends PureComponent<Props, State> {
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">
@ -113,14 +131,17 @@ class HistogramChart extends PureComponent<Props, State> {
/>
</g>
</svg>
{hoverData && (
<HistogramChartTooltip
data={hoverData}
colorScale={colorScale}
colors={colors}
/>
)}
</>
<div className="histogram-chart--overlays">
{!!children && children(renderPropArgs)}
{hoverData && (
<HistogramChartTooltip
data={hoverData}
colorScale={colorScale}
colors={colors}
/>
)}
</div>
</div>
)
}

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

@ -1,5 +1,6 @@
.histogram-chart {
user-select: none;
position: relative;
}
.histogram-chart-bars--bar {
@ -64,3 +65,9 @@
.histogram-chart-tooltip--column:first-child {
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]}
width={600}
>
<svg
<div
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"
<svg
className="histogram-chart"
height={400}
width={600}
>
<HistogramChartAxes
height={400}
margins={
Object {
"bottom": 20,
"left": 25,
"right": 0,
"top": 5,
<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}
width={600}
xScale={[Function]}
yScale={[Function]}
>
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}
<line
className="y-tick"
key="0-25-625-380"
x1={25}
x2={625}
y1={380}
y2={380}
/>
</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}
<line
className="y-tick"
key="0.5-25-625-301.875"
x1={25}
x2={625}
y1={301.875}
y2={301.875}
/>
</g>
</HistogramChartBars>
</g>
</svg>
<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>
`;