@teachinglab/omd 0.7.36 → 0.7.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.7.36",
+  "version": "0.7.37",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",

package/src/omdCoordinatePlane.js

@@ -348,11 +348,14 @@ export class omdCoordinatePlane extends jsvgGroup {
     addTickLabel(gridHolder, isXAxis, pos, value) {
         const label = this.createNumericLabel(value);
         if (isXAxis) {
-            const lx = Math.max(10, Math.min(pos - 10, this.width - 30));
+            const labelWidth = label.width || 20;
+            const lx = Math.max(10, Math.min(pos - labelWidth / 2, this.width - labelWidth - 10));
             label.setPosition(lx, this.height - this.paddingBottom + this.tickLabelOffsetPx);
         } else {
-            const lx = Math.max(5, this.paddingLeft - (this.tickLabelOffsetPx + 20));
-            const ly = Math.max(7.5, Math.min(pos - 7.5, this.height - 15));
+            const labelWidth = label.width || 20;
+            const labelHeight = label.height || 15;
+            const lx = Math.max(5, this.paddingLeft - (this.tickLabelOffsetPx + labelWidth));
+            const ly = Math.max(labelHeight / 2, Math.min(pos - labelHeight / 2, this.height - labelHeight));
             label.setPosition(lx, ly);
         }
         gridHolder.addChild(label);
@@ -366,10 +369,17 @@ export class omdCoordinatePlane extends jsvgGroup {
     }
 
     createNumericLabel(text) {
+        const textString = String(text);
+        const fontSize = 9;
+        const horizontalPadding = 6;
+        const verticalPadding = 4;
+        const estimatedCharWidth = fontSize * 0.58;
+        const labelWidth = Math.max(20, Math.ceil(textString.length * estimatedCharWidth) + horizontalPadding * 2);
+        const labelHeight = fontSize + verticalPadding * 2;
         const label = new jsvgTextBox();
-        label.setWidthAndHeight(20, 15);
-        label.setText(String(text));
-        label.setFontSize(9);
+        label.setWidthAndHeight(labelWidth, labelHeight);
+        label.setText(textString);
+        label.setFontSize(fontSize);
         label.setFontColor(this.getAllowedColor("black"));
         label.setAlignment("center");
         label.setVerticalCentering();