Show auxiliary plot colors in line vis tooltip

silx-kit · Apr 6, 2022 · 787346e · 787346e
1 parent e6b48c7
commit 787346e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/packages/lib/src/vis/line/LineVis.module.css b/packages/lib/src/vis/line/LineVis.module.css
@@ -6,15 +6,33 @@
   margin: 1rem;
 }
 
-.tooltipValue {
-  margin-top: 0.25rem;
+.tooltipItem {
+  display: flex;
+  align-items: baseline;
 }
 
-.tooltipValue:not(:last-child) {
-  margin-bottom: 0.25rem;
+.tooltipValue,
+.tooltipAux {
+  composes: tooltipItem;
 }
 
-.tooltipValue > strong {
+.tooltipValue,
+.tooltipValue + .tooltipAux {
+  margin-top: 0.25rem;
+}
+
+.tooltipValue strong {
   font-weight: 600;
   font-size: 1.125em;
 }
+
+.mark {
+  content: '';
+  display: block;
+  width: 0.75em;
+  height: 0.375rem;
+  margin-right: 0.375rem;
+  padding-bottom: 0.125rem;
+  background-color: currentColor;
+  transform: translateY(-1px);
+}
diff --git a/packages/lib/src/vis/line/LineVis.tsx b/packages/lib/src/vis/line/LineVis.tsx
@@ -152,15 +152,28 @@ function LineVis(props: Props) {
                 {`${abscissaLabel ?? 'x'} = ${formatTooltipVal(abscissa)}`}
 
                 <div className={styles.tooltipValue}>
-                  <strong>{formatTooltipVal(value)}</strong>
-                  {error && ` ±${formatTooltipErr(error)}`}
-                  {dtype && <em>{` (${formatNumType(dtype)})`}</em>}
+                  {auxiliaries.length > 0 && (
+                    <span
+                      className={styles.mark}
+                      style={{ color: curveColor }}
+                    />
+                  )}
+                  <span>
+                    <strong>{formatTooltipVal(value)}</strong>
+                    {error !== undefined && ` ±${formatTooltipErr(error)}`}
+                    {dtype && <em>{` (${formatNumType(dtype)})`}</em>}
+                  </span>
                 </div>
 
-                {auxiliaries.map(({ label, array }) => {
-                  const val = formatTooltipVal(array.get(xi));
-                  return <div key={label}>{`${label} = ${val}`}</div>;
-                })}
+                {auxiliaries.map(({ label, array }, index) => (
+                  <div className={styles.tooltipAux} key={label}>
+                    <span
+                      className={styles.mark}
+                      style={{ color: auxColors[index % auxColors.length] }}
+                    />
+                    {label} = {formatTooltipVal(array.get(xi))}
+                  </div>
+                ))}
               </>
             );
           }}
@@ -179,7 +192,7 @@ function LineVis(props: Props) {
             key={i} // eslint-disable-line react/no-array-index-key
             abscissas={abscissas}
             ordinates={array.data}
-            color={auxColors[i < auxColors.length ? i : auxColors.length - 1]}
+            color={auxColors[i % auxColors.length]}
             curveType={curveType}
           />
         ))}