cordova-plugin-ra-chart 1.0.5 → 1.0.6

package/README.md

@@ -391,6 +391,7 @@ data: [{ price: 12, rating: 3.8, reach: 20 }]
 |---|---|---|
 | `zoom` | `false` | Range slider (XY types + candlestick) |
 | `pinchZoom` | `true` | Pinch and pan when `zoom` is on |
+| `labelRotation` | `'auto'` | Category-label tilt. `'auto'` keeps labels flat while they fit, tilts to −35° when they would collide, −90° once columns get narrow. A number forces an angle; `0` forces flat |
 | `legend` | `true` | Tappable; auto-hidden for single-series XY |
 | `haptics` | `true` | Vibrate on touch-select |
 | `sheetTooltip` | `'auto'` | Dock tooltip to bottom; auto = touch device under 480px |
@@ -675,7 +676,16 @@ To silence the diagnostics in production: `RaChart.warnings = false;`
 
 **Page will not scroll over the chart** — only happens with `zoom: true`; vertical scrolling is preserved and horizontal drags pan. Set `pinchZoom: false` to disable gesture capture entirely.
 
-**Labels are cut off** — increase `height`, or shorten category labels. Horizontal `bar` and `gantt` cap the label gutter at about a third of the width.
+**Category labels overlap or run together** — fixed in v1.0.5. Long names like "Material Status" are wider than their column, and the old spacing logic assumed a fixed 32px per label so it never thinned them out. Labels now tilt to −35° automatically (−90° when columns get narrow), the bottom padding grows to fit, and anything still too long is ellipsised with the full text kept in an SVG `<title>`. Override with `labelRotation`:
+
+```html
+<ra-chart labelRotation="0" ...></ra-chart>     <!-- force flat (thins labels out) -->
+<ra-chart [labelRotation]="-90" ...></ra-chart> <!-- force vertical -->
+```
+
+Prefer short category names where you can — tilted labels cost up to a third of the chart height.
+
+**Labels are cut off** — increase `height`, or shorten category labels. Horizontal `bar` and `gantt` cap the label gutter at about a third of the width; longer names are ellipsised with the full text in a `<title>`.
 
 **Legend reads "RevenueTarget" with no colour swatches** — the legend HTML is unstyled, meaning `ra-chart.css` did not reach it. Almost always because it was added to a component's `styleUrls` instead of `angular.json` → `styles`; view encapsulation scopes it to `[_ngcontent-*]` and the runtime-created legend has no such attribute. Fixed by default in v1.0.3 (the engine injects its own structural CSS), so updating the engine resolves it. To theme, move `ra-chart.css` to the global styles array.
 

package/ionic/ra-chart.component.ts

@@ -63,6 +63,8 @@ export class RaChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() downColor?: string;
 
   // ---- interaction ----
+  /** 'auto' tilts long category labels instead of letting them collide. */
+  @Input() labelRotation: 'auto' | number = 'auto';
   @Input() zoom = false;
   @Input() pinchZoom = true;
   @Input() legend = true;
@@ -197,6 +199,7 @@ export class RaChartComponent implements AfterViewInit, OnChanges, OnDestroy {
       min: this.min,
       max: this.max,
       bands: this.bands,
+      labelRotation: this.labelRotation,
       zoom: this.zoom,
       pinchZoom: this.pinchZoom,
       legend: this.legend,

package/ionic/ra-chart.types.ts

@@ -63,6 +63,7 @@ export interface RaChartOptions {
   bands?: RaBand[] | null;
   upColor?: string;
   downColor?: string;
+  labelRotation?: 'auto' | number;
   zoom?: boolean;
   pinchZoom?: boolean;
   legend?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cordova-plugin-ra-chart",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Dependency-free SVG chart engine for Cordova and Ionic — 21 chart types with touch gestures, pinch-to-zoom, haptics and dark-mode theming. No native code, no build step.",
   "main": "www/ra-chart.js",
   "types": "types/index.d.ts",

package/plugin.xml

@@ -15,7 +15,7 @@
 -->
 <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
         id="cordova-plugin-ra-chart"
-        version="1.0.4">
+        version="1.0.5">
 
   <name>raChart</name>
   <description>

package/types/index.d.ts

@@ -91,6 +91,14 @@ export interface RaChartOptions {
   /** Candlestick bear colour. */
   downColor?: string;
 
+  /**
+   * Category-label tilt on vertical charts. `'auto'` (default) keeps labels
+   * flat while they fit, tilts to -35° when they would collide, and goes to
+   * -90° once columns get narrow. Pass a number to force an angle, or `0` to
+   * force flat (labels are then thinned out to avoid overlap).
+   */
+  labelRotation?: 'auto' | number;
+
   /** Range-slider zoom (XY types + candlestick). */
   zoom?: boolean;
   /** Pinch-to-zoom and drag-to-pan when `zoom` is on. Default true. */

package/www/ra-chart.js

@@ -1,5 +1,5 @@
 /*!
- * raChart Cordova v1.0.4 — mobile SVG chart engine
+ * raChart Cordova v1.0.5 — mobile SVG chart engine
  * RemoteApps UI Components
  *
  * Zero dependencies. No jQuery, no chart library, no build step.
@@ -20,7 +20,7 @@
   "use strict";
 
   var NS = "http://www.w3.org/2000/svg";
-  var VERSION = "1.0.4";
+  var VERSION = "1.0.5";
 
   /* ============================================================
      Palettes — CVD-validated order, do not shuffle
@@ -54,6 +54,7 @@
     bands: null,
     upColor: "#0ca30c",
     downColor: "#d03b3b",
+    labelRotation: "auto", // "auto" tilts long category labels; or a number of degrees
     zoom: false,           // range-slider zoom (XY + candlestick)
     pinchZoom: true,       // two-finger pinch + drag pan when zoom is on
     legend: true,
@@ -198,6 +199,59 @@
     return n;
   }
 
+  var LABEL_SIZE = 11;
+  function labelFont(size) {
+    return "500 " + (size || LABEL_SIZE) + "px system-ui, -apple-system, 'Segoe UI', sans-serif";
+  }
+
+  /** Shorten to fit maxPx, ending in an ellipsis. */
+  function truncate(s, maxPx, size) {
+    s = String(s);
+    if (!isFinite(maxPx)) return s;
+    var font = labelFont(size);
+    if (textW(s, font) <= maxPx) return s;
+    var lo = 1, hi = s.length;
+    while (lo < hi) {                       // longest prefix that still fits
+      var mid = (lo + hi + 1) >> 1;
+      if (textW(s.slice(0, mid) + "…", font) <= maxPx) lo = mid; else hi = mid - 1;
+    }
+    return s.slice(0, lo) + "…";
+  }
+
+  /**
+   * Decide how category labels sit under a vertical axis.
+   *
+   * Long names ("Material Status") are wider than their column, so laying them
+   * flat makes them collide — and simply dropping every other one hides real
+   * categories. Instead measure the text and tilt it when it cannot fit, going
+   * to vertical only when the columns get genuinely narrow. Returns the bottom
+   * padding the chosen layout needs.
+   */
+  function labelLayout(cats, band, totalH, forced) {
+    var flat = { angle: 0, maxPx: Infinity, pad: 24 };
+    if (!cats.length) return flat;
+    var font = labelFont(LABEL_SIZE);
+    var maxW = 0;
+    for (var i = 0; i < cats.length; i++) {
+      var wd = textW(cats[i], font);
+      if (wd > maxW) maxW = wd;
+    }
+    var angle;
+    if (typeof forced === "number") angle = forced;
+    else if (forced === 0) angle = 0;
+    else if (maxW <= band * 0.92) return flat;      // fits flat — leave it alone
+    else angle = band < 26 ? -90 : -35;
+    if (!angle) return { angle: 0, maxPx: Infinity, pad: 24 };
+
+    // cap how much of the chart the labels may consume
+    var cap = Math.max(40, Math.min(totalH * 0.34, 96));
+    var rad = Math.abs(angle) * Math.PI / 180;
+    var sin = Math.sin(rad) || 1;
+    var maxPx = Math.min(maxW, (cap - 12) / sin);
+    var pad = Math.min(cap, Math.max(24, Math.ceil(maxPx * sin) + 14));
+    return { angle: angle, maxPx: maxPx, pad: pad };
+  }
+
   function svgText(parent, x, y, text, anchor, size, color, weight) {
     var n = svgEl("text", {
       x: x, y: y, "text-anchor": anchor || "middle",
@@ -1093,12 +1147,27 @@
     g.padL = (horizontal ? Math.min(maxCatW, this.w * 0.34) : maxYLabelW) + 12;
     g.padR = 8 + depth;
     g.padT = 8 + depth * 0.5;
-    g.padB = 24;
     g.plotX = g.padL;
     g.plotY = g.padT;
     g.plotW = Math.max(40, this.w - g.padL - g.padR);
-    g.plotH = Math.max(40, this.h - g.padT - g.padB);
-    g.band = (horizontal ? g.plotH : g.plotW) / Math.max(1, nC);
+
+    if (horizontal) {
+      // category labels live in the left gutter, so the bottom stays shallow
+      g.padB = 24;
+      g.plotH = Math.max(40, this.h - g.padT - g.padB);
+      g.band = g.plotH / Math.max(1, nC);
+      g.labelAngle = 0;
+      g.labelMaxPx = Math.max(24, g.padL - 12);
+    } else {
+      // band does not depend on padB here, so measure the labels first and let
+      // them reserve the bottom space they actually need
+      g.band = g.plotW / Math.max(1, nC);
+      var lay = labelLayout(cats, g.band, this.h, o.labelRotation);
+      g.labelAngle = lay.angle;
+      g.labelMaxPx = lay.maxPx;
+      g.padB = lay.pad;
+      g.plotH = Math.max(40, this.h - g.padT - g.padB);
+    }
 
     this.gGrid = svgEl("g", null, this.svg);
     this.gMarks = svgEl("g", null, this.svg);
@@ -1241,7 +1310,15 @@
         svgText(this.gGrid, pos, g.plotY + g.plotH + 16, fmt(v), "middle", 11, T.label);
       }
       for (i = 0; i < g.nC; i++) {
-        svgText(this.gGrid, g.plotX - 7, g.plotY + g.band * (i + .5) + 4, g.cats[i], "end", 11.5, T.label);
+        // the gutter is capped at a third of the width, so clip to fit it
+        var fullY = g.cats[i];
+        var shownY = truncate(fullY, g.labelMaxPx, 11.5);
+        var nodeY = svgText(this.gGrid, g.plotX - 7, g.plotY + g.band * (i + .5) + 4,
+          shownY, "end", 11.5, T.label);
+        if (shownY !== fullY) {
+          var ttY = svgEl("title", null, nodeY);
+          ttY.appendChild(document.createTextNode(fullY));
+        }
       }
     } else {
       for (v = o.min; v <= scale.max + 1e-9; v += scale.step) {
@@ -1252,10 +1329,27 @@
         }, this.gGrid);
         svgText(this.gGrid, g.plotX - 7, pos + 4, fmt(v), "end", 11, T.label);
       }
-      var skip = Math.max(1, Math.ceil(32 / g.band));
+      var ang = g.labelAngle || 0;
+      // rotation removes the collision, so only thin out when even tilted
+      // labels would stack on top of each other
+      var skip = ang ? Math.max(1, Math.ceil(11 / g.band)) : 1;
+      if (!ang) {
+        var widest = 0;
+        for (i = 0; i < g.nC; i++) widest = Math.max(widest, textW(g.cats[i]));
+        skip = Math.max(1, Math.ceil((widest + 8) / g.band));
+      }
       for (i = 0; i < g.nC; i++) {
         if (i % skip) continue;
-        svgText(this.gGrid, g.plotX + g.band * (i + .5), g.plotY + g.plotH + 16, g.cats[i], "middle", 11, T.label);
+        var lx = g.plotX + g.band * (i + .5);
+        var ly = g.plotY + g.plotH + (ang ? 14 : 16);
+        var full = g.cats[i];
+        var shown = ang ? truncate(full, g.labelMaxPx) : full;
+        var node = svgText(this.gGrid, lx, ly, shown, ang ? "end" : "middle", 11, T.label);
+        if (ang) node.setAttribute("transform", "rotate(" + ang + " " + lx + " " + ly + ")");
+        if (shown !== full) {
+          var tt = svgEl("title", null, node);   // full text still reachable
+          tt.appendChild(document.createTextNode(full));
+        }
       }
     }
   };