cordova-plugin-ra-chart 1.0.6 → 1.0.7

package/README.md

@@ -392,6 +392,8 @@ 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 |
@@ -676,6 +678,10 @@ 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.
 
+**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
@@ -685,6 +691,17 @@ To silence the diagnostics in production: `RaChart.warnings = false;`
 
 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

@@ -65,6 +65,10 @@ export class RaChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   // ---- 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;
@@ -200,6 +204,8 @@ export class RaChartComponent implements AfterViewInit, OnChanges, OnDestroy {
       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

@@ -64,6 +64,8 @@ export interface RaChartOptions {
   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.6",
+  "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.5">
+        version="1.0.7">
 
   <name>raChart</name>
   <description>

package/types/index.d.ts

@@ -99,6 +99,17 @@ export interface RaChartOptions {
    */
   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.5 — 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.5";
+  var VERSION = "1.0.7";
 
   /* ============================================================
      Palettes — CVD-validated order, do not shuffle
@@ -55,6 +55,8 @@
     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,
@@ -204,18 +206,26 @@
     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) {
+  /** 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) + "…", font) <= maxPx) lo = mid; else hi = mid - 1;
+      if (textW(s.slice(0, mid) + ell, font) <= maxPx) lo = mid; else hi = mid - 1;
     }
-    return s.slice(0, lo) + "…";
+    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);
   }
 
   /**
@@ -247,8 +257,14 @@
     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));
+    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 };
   }
 
@@ -711,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);
@@ -1131,18 +1153,29 @@
     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;
@@ -1162,7 +1195,7 @@
       // 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);
+      var lay = labelLayout(catLabels, g.band, this.h, o.labelRotation);
       g.labelAngle = lay.angle;
       g.labelMaxPx = lay.maxPx;
       g.padB = lay.pad;
@@ -1312,7 +1345,7 @@
       for (i = 0; i < g.nC; i++) {
         // 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 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) {
@@ -1335,15 +1368,20 @@
       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++) 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;
         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 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) {