From 0806f785a10926e03d0793cc8006ee6ab15d2f92 Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Wed, 13 Jan 2021 22:46:02 +0100
Subject: [PATCH] Add v-line and graph support
---
uhepp-js/src/components/UheppHist.jsx | 63 ++++++++++++++++++++++++++-
1 file changed, 62 insertions(+), 1 deletion(-)
diff --git a/uhepp-js/src/components/UheppHist.jsx b/uhepp-js/src/components/UheppHist.jsx
index 8790d52..b81825b 100644
--- a/uhepp-js/src/components/UheppHist.jsx
+++ b/uhepp-js/src/components/UheppHist.jsx
@@ -127,6 +127,46 @@ const Bar = ({
onMouseOut={() => onMouseOut()} />
)
+const Graph = ({
+ xScale,
+ yScale,
+ data,
+ style={},
+}) => {
+ const x = data.x
+ const y = data.y
+ const points = Array(x.length).fill(0).map(
+ (_, i) => [xScale(x[i]), yScale(y[i])]
+ )
+
+ return <g>
+ { Array(x.length - 1).fill(0).map(
+ (_, i) => <line x1={points[i][0]} y1={points[i][1]}
+ x2={points[i + 1][0]} y2={points[i + 1][1]}
+ strokeWidth="2"
+ fillOpacity="0"
+ stroke={style.color || "#000"}
+ key={i}
+ />
+ )}
+ </g>
+}
+
+const VLine = ({
+ xScale,
+ yScale,
+ x,
+ range,
+ style={},
+}) => (
+ <line y1={yScale(range[0])}
+ y2={yScale(range[1])}
+ strokeWidth="2"
+ stroke={style.color || "#000"}
+ x1={xScale(x)}
+ x2={xScale(x)} />
+)
+
const Point = ({
xScale,
yScale,
@@ -616,9 +656,10 @@ const UheppHistPost = ({width, height, uhepp}) => {
range: [0, xMax],
domain: extent(uhepp.bins.rebin || uhepp.bins.edges),
})
+ const maxBinMain = getMaxBin(post_uhepp)
const yScale = scaleLinear({
range: [yMax, 0],
- domain: [0, getMaxBin(post_uhepp) * 1.5],
+ domain: [0, maxBinMain * 1.5],
})
const ratioScale = scaleLinear({
range: [ratioMax, 0],
@@ -664,6 +705,26 @@ const UheppHistPost = ({width, height, uhepp}) => {
xScale={xScale}
yScale={yScale}
/>
+ { (post_uhepp.v_lines || []).map((vline, i) =>
+ <VLine
+ xScale={xScale}
+ yScale={yScale}
+ x={vline.x}
+ range={vline.range || [0, maxBinMain]}
+ key={i}
+ style={vline.style} />
+ )
+ }
+ { (post_uhepp.graphs || []).map((graph, i) =>
+ <Graph
+ xScale={xScale}
+ yScale={yScale}
+ data={graph}
+ key={i}
+ style={graph.style} />
+ )
+ }
+
</g>
<Group top={26} left={13}>
--
GitLab