From 2f03cf92e1f743a5f686dae26705e6ae53d8ee37 Mon Sep 17 00:00:00 2001
From: Dorian Goepp <dorian.goepp@gmail.com>
Date: Thu, 4 Apr 2019 15:45:12 +0200
Subject: [PATCH] Add classes on interaction's paths to handle dashing lines
---
src/InteractionTrace/InteractionTrace.css | 6 ++++++
src/InteractionTrace/figureElements.js | 4 +++-
2 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/InteractionTrace/InteractionTrace.css b/src/InteractionTrace/InteractionTrace.css
index 7ae6308..4af2375 100644
--- a/src/InteractionTrace/InteractionTrace.css
+++ b/src/InteractionTrace/InteractionTrace.css
@@ -27,6 +27,8 @@
.interaction-trace line.boredom-limit {
stroke: #d16565;
stroke-width: 2;
+ /* stroke-dasharray: 15 5; */
+ stroke-dasharray: 2 3;
}
/* Axes and labels */
@@ -47,6 +49,10 @@
stroke: #fff;
}
+.interaction-trace path.intended {
+ stroke-dasharray: 2 3;
+}
+
/* For the legend (in the leftmost column of the figure */
.interaction-trace .legend {
font-size: 0.7em;
diff --git a/src/InteractionTrace/figureElements.js b/src/InteractionTrace/figureElements.js
index c3d056a..c33d5ed 100644
--- a/src/InteractionTrace/figureElements.js
+++ b/src/InteractionTrace/figureElements.js
@@ -199,10 +199,12 @@ export function Plots(props) {
cx={props.xScale(point.x)} cy={props.yScale(point.y)} r="4" />
});
+ const lineClass = "line " + name;
+
// The whole curve (line and markers)
return (
<g key={"plot" + name}>
- <path className="line" d={line(data)} stroke={colour} />
+ <path className={lineClass} d={line(data)} stroke={colour} />
{markers}
</g>);
});
--
GitLab