cordova-plugin-ra-chart 1.0.5 → 1.0.7

package/README.md

@@ -391,6 +391,9 @@ 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 |
+| `labelMaxLength` | `0` | Hard character cap on category labels; `0` disables. Full text stays in the tooltip |
+| `labelEllipsis` | `'…'` | Suffix appended when a label is shortened, e.g. `'....'` |
 | `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 +678,31 @@ 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.
+**Arabic / Hebrew: tilted labels overlap the plot** — fixed in v1.0.6. SVG resolves `text-anchor` against the inline direction, so under `dir="rtl"` an `"end"` anchor flips to the opposite side and tilted labels swept *upward into* the chart instead of down away from it; axis numbers drifted toward the plot for the same reason. The drawing surface is now pinned to `direction: ltr`, which fixes anchoring while the bidi algorithm still shapes each Arabic run right-to-left. Nothing to configure — RTL pages work as they are.
+
+RTL notes: the HTML legend follows the page direction, so series read right-to-left (correct mirroring). Arabic glyphs sit taller than Latin, and the bottom padding now accounts for that, so labels are never clipped.
+
+**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.
+
+**Shortening long labels.** `labelMaxLength` caps them at a character count and appends `labelEllipsis`:
+
+```html
+<ra-chart [labelMaxLength]="5" labelEllipsis="...." ...></ra-chart>
+<!-- "Total Employees" → "Total...." -->
+```
+
+The cap is applied *before* layout, so shortening labels enough to fit lets them stay flat and hands the vertical space back to the plot — in a five-category chart that is 72px of bottom padding down to 24px. The full text is still shown in the tooltip and kept in an SVG `<title>`.
+
+Set `labelEllipsis` to `''` for a hard cut with no suffix. Both options apply to vertical category axes and to the left gutter of horizontal `bar` charts.
+
+**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,12 @@ 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';
+  /** Hard character cap on category labels; 0 disables it. */
+  @Input() labelMaxLength = 0;
+  /** Suffix appended when a label is shortened, e.g. '…' or '....'. */
+  @Input() labelEllipsis = '…';
   @Input() zoom = false;
   @Input() pinchZoom = true;
   @Input() legend = true;
@@ -197,6 +203,9 @@ export class RaChartComponent implements AfterViewInit, OnChanges, OnDestroy {
       min: this.min,
       max: this.max,
       bands: this.bands,
+      labelRotation: this.labelRotation,
+      labelMaxLength: this.labelMaxLength,
+      labelEllipsis: this.labelEllipsis,
       zoom: this.zoom,
       pinchZoom: this.pinchZoom,
       legend: this.legend,

package/ionic/ra-chart.types.ts

@@ -63,6 +63,9 @@ export interface RaChartOptions {
   bands?: RaBand[] | null;
   upColor?: string;
   downColor?: string;
+  labelRotation?: 'auto' | number;
+  labelMaxLength?: number;
+  labelEllipsis?: string;
   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.7",
   "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.7">
 
   <name>raChart</name>
   <description>

package/types/index.d.ts

@@ -91,6 +91,25 @@ 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;
+
+  /**
+   * Hard character cap on category labels. `0` (default) leaves them alone and
+   * relies on tilting. Applied before layout, so capping labels short enough
+   * lets them stay flat and gives the plot back its vertical space. The full
+   * text stays available in the tooltip and an SVG `<title>`.
+   */
+  labelMaxLength?: number;
+
+  /** Suffix appended when a label is shortened. Default `'…'`; e.g. `'....'`. */
+  labelEllipsis?: string;
+
   /** 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.7 — 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.7";
 
   /* ============================================================
      Palettes — CVD-validated order, do not shuffle
@@ -54,6 +54,9 @@
     bands: null,
     upColor: "#0ca30c",
     downColor: "#d03b3b",
+    labelRotation: "auto", // "auto" tilts long category labels; or a number of degrees
+    labelMaxLength: 0,     // hard character cap on category labels (0 = off)
+    labelEllipsis: "…",    // suffix appended when a label is shortened
     zoom: false,           // range-slider zoom (XY + candlestick)
     pinchZoom: true,       // two-finger pinch + drag pan when zoom is on
     legend: true,
@@ -198,6 +201,73 @@
     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 `ell`. */
+  function truncate(s, maxPx, size, ell) {
+    s = String(s);
+    ell = ell == null ? "…" : ell;
+    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) + ell, font) <= maxPx) lo = mid; else hi = mid - 1;
+    }
+    return s.slice(0, lo).replace(/\s+$/, "") + ell;
+  }
+
+  /** Hard character cap, applied before any pixel-based fitting. */
+  function clipChars(s, max, ell) {
+    s = String(s);
+    if (!max || max <= 0 || s.length <= max) return s;
+    return s.slice(0, max).replace(/\s+$/, "") + (ell == null ? "…" : ell);
+  }
+
+  /**
+   * 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 cos = Math.cos(rad);
+    // A tilted line of text is as tall as (length x sin) PLUS its own glyph box
+    // laid on the diagonal (lineH x cos). Dropping that second term clips
+    // descenders — very visible in Arabic, which sits taller than Latin.
+    var lineH = LABEL_SIZE * 1.35;
+    var room = cap - 8 - lineH * cos;
+    var maxPx = Math.min(maxW, Math.max(24, room / sin));
+    var pad = Math.min(cap, Math.max(24, Math.ceil(maxPx * sin + lineH * cos) + 8));
+    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",
@@ -657,6 +727,12 @@
       viewBox: "0 0 " + this.w + " " + this.h,
       preserveAspectRatio: "none"
     });
+    // Pin the drawing surface to LTR. text-anchor is resolved against the
+    // inline direction, so under an RTL page "end" would flip to the opposite
+    // side and tilted labels would sweep up into the plot instead of down away
+    // from it. Glyph shaping is unaffected: the bidi algorithm still lays each
+    // Arabic/Hebrew run out right-to-left inside the element.
+    this.svg.style.direction = "ltr";
     this.stage.appendChild(this.svg);
 
     this.tip = el("div", "ra-chart__tip", this.el);
@@ -1077,28 +1153,54 @@
     this.viewData = data;
 
     var cats = data.map(function (d) { return String(d[o.category]); });
+    // display copy: the character cap is applied up front so the layout below
+    // measures what will actually be drawn, and can keep labels flat when the
+    // cap makes them short enough to fit
+    var catLabels = cats.map(function (s) {
+      return clipChars(s, o.labelMaxLength, o.labelEllipsis);
+    });
     var nS = o.series.length, nC = cats.length;
 
     this.cur = { kind: "xy", vals: this._xyVals(data), scaleMax: null };
 
-    var g = { horizontal: horizontal, isLine: isLine, isLolli: isLolli, depth: depth, cats: cats, nS: nS, nC: nC };
+    var g = {
+      horizontal: horizontal, isLine: isLine, isLolli: isLolli, depth: depth,
+      cats: cats,             // full text — tooltips and events
+      catLabels: catLabels,   // what the axis draws
+      nS: nS, nC: nC
+    };
     this.geom = g;
 
     var scale = this._xyScale();
     var yLabels = [];
     for (var v = o.min; v <= scale.max + 1e-9; v += scale.step) yLabels.push(fmt(v));
     var maxYLabelW = Math.max.apply(null, yLabels.map(function (s) { return textW(s); }).concat([12]));
-    var maxCatW = Math.max.apply(null, cats.map(function (s) { return textW(s); }).concat([12]));
+    var maxCatW = Math.max.apply(null, catLabels.map(function (s) { return textW(s); }).concat([12]));
 
     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(catLabels, 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 +1343,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(g.catLabels[i], g.labelMaxPx, 11.5, o.labelEllipsis);
+        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 +1362,32 @@
         }, 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.catLabels[i]));
+        // Same fit rule labelLayout used to choose "flat", so a layout that
+        // decided the labels fit never has them silently dropped here. Only
+        // a forced labelRotation:0 that genuinely overflows gets thinned.
+        skip = widest <= g.band * 0.92 ? 1 : 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(g.catLabels[i], g.labelMaxPx, LABEL_SIZE, o.labelEllipsis)
+          : g.catLabels[i];
+        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));
+        }
       }
     }
   };