@pie-lib/charting 5.32.6-esmbeta.2 → 5.32.6

package/src/axes.jsx

@@ -7,6 +7,8 @@ import Checkbox from '@material-ui/core/Checkbox';
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import { AlertDialog } from '@pie-lib/config-ui';
+import { renderMath } from '@pie-lib/math-rendering';
+
 import { TickCorrectnessIndicator } from './common/correctness-indicators';
 import { bandKey, getTickValues, getRotateAngle } from './utils';
 import MarkLabel from './mark-label';
@@ -352,10 +354,23 @@ export class RawChartAxes extends React.Component {
   componentDidMount() {
     if (this.hiddenLabelRef) {
       const boundingClientRect = this.hiddenLabelRef.getBoundingClientRect();
-      this.setState({
-        height: Math.floor(boundingClientRect.height),
-        width: Math.floor(boundingClientRect.width),
-      });
+      const hiddenEl = this.hiddenLabelRef.current;
+
+      // same logic used in dropdown.jsx for hidden labels width calculation
+      if (hiddenEl) {
+        const containsLatex = hiddenEl.querySelector('[data-latex], [data-raw]');
+        const hasMathJax = hiddenEl.querySelector('mjx-container');
+        const mathHandled = hiddenEl.querySelector('[data-math-handled="true"]');
+
+        if (containsLatex && (!mathHandled || !hasMathJax)) {
+          renderMath(this.hiddenLabelRef);
+        }
+
+        this.setState({
+          height: Math.floor(boundingClientRect.height),
+          width: Math.floor(boundingClientRect.width),
+        });
+      }
     }
   }
 

package/src/chart.jsx

@@ -270,6 +270,14 @@ export class Chart extends React.Component {
     const rootCommon = cloneDeep(common);
     rootCommon.graphProps.size.height += top + increaseHeight;
 
+    // for plot evaluations we need extra space because we render correctness icon below x axis
+    const isPlotEvaluation = (chartType === 'dotPlot' || chartType === 'linePlot') && correctData?.length;
+    const needsExtraHeight = isPlotEvaluation && labels.bottom;
+
+    if (needsExtraHeight) {
+      rootCommon.graphProps.size.height += 25;
+    }
+
     return (
       <div className={classNames(classes.chart, classes.chartBox, className)}>
         <Root

package/src/plot/common/plot.jsx

@@ -68,19 +68,27 @@ export class RawPlot extends React.Component {
     this.setDragValue(next);
   };
 
-  renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale) => (
-    <foreignObject
-      x={barX + barWidth / 2 - ICON_SIZE / 2}
-      y={scale.y(correctVal) + ICON_SIZE}
-      width={ICON_SIZE}
-      height={ICON_SIZE}
-    >
-      <Check
-        className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}
-        title={correctness.label}
-      />
-    </foreignObject>
-  );
+  renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale, pointHeight, pointDiameter) => {
+    let iconY;
+
+    if (correctVal === 0) {
+      // if correct value is 0, position icon on the horizontal axis
+      iconY = scale.y(0) - ICON_SIZE / 2;
+    } else {
+      const shapeIndex = correctVal - 1; // the index of the shape representing the correct value
+      const shapeCenterY = scale.y(shapeIndex) - (pointHeight - pointDiameter) / 2 - pointDiameter / 2;
+      iconY = shapeCenterY - ICON_SIZE / 2; // center the icon
+    }
+
+    return (
+      <foreignObject x={barX + barWidth / 2 - ICON_SIZE / 2} y={iconY} width={ICON_SIZE} height={ICON_SIZE}>
+        <Check
+          className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}
+          title={correctness.label}
+        />
+      </foreignObject>
+    );
+  };
 
   render() {
     const {
@@ -157,6 +165,21 @@ export class RawPlot extends React.Component {
               const correctVal = parseFloat(correctData[index] && correctData[index].value);
               if (isNaN(correctVal)) return null;
               const selectedVal = v;
+
+              // special case: if correct value is 0, only show the icon on the axis
+              if (correctVal === 0) {
+                return this.renderCorrectnessIcon(
+                  barX,
+                  barWidth,
+                  correctVal,
+                  correctness,
+                  classes,
+                  scale,
+                  pointHeight,
+                  pointDiameter,
+                );
+              }
+
               if (selectedVal > correctVal) {
                 // selected is higher than correct: overlay the correct last segment
                 const overlayValues = [];
@@ -183,7 +206,16 @@ export class RawPlot extends React.Component {
                       scale={scale}
                       dottedOverline={true}
                     />
-                    {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}
+                    {this.renderCorrectnessIcon(
+                      barX,
+                      barWidth,
+                      correctVal,
+                      correctness,
+                      classes,
+                      scale,
+                      pointHeight,
+                      pointDiameter,
+                    )}
                   </>
                 );
               }
@@ -208,7 +240,16 @@ export class RawPlot extends React.Component {
                       dottedOverline: true,
                     }),
                   )}
-                  {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}
+                  {this.renderCorrectnessIcon(
+                    barX,
+                    barWidth,
+                    correctVal,
+                    correctness,
+                    classes,
+                    scale,
+                    pointHeight,
+                    pointDiameter,
+                  )}
                 </>
               );
             })()}