cordova-plugin-ra-chart 1.0.4 → 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 |
@@ -499,6 +500,54 @@ Force a mode per chart with a class:
 
 The default 8-colour palette is ordered so adjacent series stay distinguishable for colourblind viewers. If you pass your own `colors`, keep that in mind. Charts also carry non-colour cues — legends, direct labels, tooltips.
 
+### Changing the colours of every chart
+
+Three ways, highest precedence first.
+
+**Per chart** — `colors` wins over everything:
+
+```html
+<ra-chart [colors]="['#534ab7', '#2196f3']" ...></ra-chart>
+```
+
+**Globally in CSS** — the recommended way for Ionic. Set `--ra-chart-series-N`
+from 1 upward; the engine reads until the first one you leave unset. Because it
+is plain CSS, it is theme-scoped and switches automatically in dark mode:
+
+```css
+/* src/global.scss — applies to every chart in the app */
+.ra-chart {
+  --ra-chart-series-1: #534ab7;
+  --ra-chart-series-2: #2196f3;
+  --ra-chart-series-3: #f0334b;
+  --ra-chart-series-4: #eda100;
+}
+
+/* different steps for dark mode */
+.ion-palette-dark .ra-chart {
+  --ra-chart-series-1: #9085e9;
+  --ra-chart-series-2: #3987e5;
+  --ra-chart-series-3: #e66767;
+  --ra-chart-series-4: #c98500;
+}
+```
+
+Scope it to recolour one section only — `.reports-page .ra-chart { … }`.
+
+**Globally in JS** — one call before any chart is created, e.g. in `main.ts`:
+
+```ts
+declare const RaChart: any;
+
+RaChart.setPalette(['#534ab7', '#2196f3', '#f0334b', '#eda100']);
+RaChart.setPalette(lightHexes, darkHexes);   // separate dark steps
+RaChart.resetPalette();                      // back to the built-in palette
+```
+
+Colours cycle when a chart has more series than you supply. Charts that already
+exist keep their palette until they rebuild — call `replay()` on them, or set the
+palette before creating any chart.
+
 ---
 
 ## Recipes
@@ -627,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.4",
+  "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.3">
+        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. */
@@ -200,6 +208,25 @@ export declare class RaChart {
   static paletteDark: string[];
   static types: RaChartType[];
   static create(host: HTMLElement | string, options?: RaChartOptions): RaChart;
+
+  /** Silence the "nothing to plot" console diagnostics. */
+  static warnings: boolean;
+
+  /**
+   * Recolour every chart created from now on. Pass one array to use it in
+   * both light and dark mode, or two for separate dark steps. Overridden per
+   * chart by `colors`, and by `--ra-chart-series-N` CSS variables.
+   */
+  static setPalette(light: string[], dark?: string[]): typeof RaChart;
+
+  /** Restore the built-in colourblind-safe palette. */
+  static resetPalette(): typeof RaChart;
+
+  /** Register `<ra-chart>` as a custom element (done automatically). */
+  static defineElement(tag?: string): boolean;
+
+  /** Inject the built-in structural stylesheet (done automatically). */
+  static injectStyles(): void;
 }
 
 export default RaChart;

package/www/ra-chart.css

@@ -37,6 +37,20 @@ ra-chart {
 
   --ra-chart-radius: 12px;
 
+  /* ---- series palette ----
+     Uncomment and set these to recolour every chart. The engine reads
+     --ra-chart-series-1 upward and stops at the first one you leave unset,
+     so define as many as your busiest chart needs. Overridden per chart by
+     the `colors` option; overrides RaChart.setPalette().
+
+     --ra-chart-series-1: #534ab7;
+     --ra-chart-series-2: #2196f3;
+     --ra-chart-series-3: #f0334b;
+     --ra-chart-series-4: #eda100;
+     --ra-chart-series-5: #1baf7a;
+     --ra-chart-series-6: #eb6834;
+  */
+
   position: relative;
   display: block;
   width: 100%;

package/www/ra-chart.js

@@ -1,5 +1,5 @@
 /*!
- * raChart Cordova v1.0.3 — 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,14 +20,17 @@
   "use strict";
 
   var NS = "http://www.w3.org/2000/svg";
-  var VERSION = "1.0.3";
+  var VERSION = "1.0.5";
 
   /* ============================================================
      Palettes — CVD-validated order, do not shuffle
      ============================================================ */
 
-  var PALETTE_LIGHT = ["#2a78d6", "#008300", "#e87ba4", "#eda100", "#1baf7a", "#eb6834", "#4a3aa7", "#e34948"];
-  var PALETTE_DARK = ["#3987e5", "#008300", "#d55181", "#c98500", "#199e70", "#d95926", "#9085e9", "#e66767"];
+  var DEFAULT_LIGHT = ["#2a78d6", "#008300", "#e87ba4", "#eda100", "#1baf7a", "#eb6834", "#4a3aa7", "#e34948"];
+  var DEFAULT_DARK = ["#3987e5", "#008300", "#d55181", "#c98500", "#199e70", "#d95926", "#9085e9", "#e66767"];
+  // live palettes — swapped by RaChart.setPalette()
+  var PALETTE_LIGHT = DEFAULT_LIGHT.slice();
+  var PALETTE_DARK = DEFAULT_DARK.slice();
   var SEQ_LIGHT = ["#cde2fb", "#9ec5f4", "#6da7ec", "#3987e5", "#256abf", "#184f95", "#0d366b"];
   var SEQ_DARK = ["#0d366b", "#184f95", "#256abf", "#3987e5", "#6da7ec", "#9ec5f4", "#cde2fb"];
 
@@ -51,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,
@@ -195,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",
@@ -445,6 +502,16 @@
     }
     var dark = v("--ra-chart-scheme", "light").indexOf("dark") >= 0;
     this.dark = dark;
+
+    // Palette from CSS custom properties: --ra-chart-series-1 .. -N, read until
+    // the first gap. Lets a theme file recolour every chart (and switch palettes
+    // in dark mode) with no JavaScript.
+    var cssSeries = [];
+    for (var i = 1; i <= 16; i++) {
+      var c = v("--ra-chart-series-" + i, "");
+      if (!c) break;
+      cssSeries.push(c);
+    }
     this.theme = {
       dark: dark,
       surface: v("--ra-chart-surface", dark ? "#1a1a19" : "#ffffff"),
@@ -455,7 +522,9 @@
       baseline: v("--ra-chart-baseline", dark ? "#383835" : "#c3c2b7"),
       body: v("--ra-chart-body", dark ? "#c3c2b7" : "#4b5563")
     };
-    this.palette = this.opts.colors || (dark ? PALETTE_DARK : PALETTE_LIGHT);
+    // precedence: per-chart colors > CSS variables > global palette
+    this.palette = this.opts.colors ||
+      (cssSeries.length ? cssSeries : (dark ? PALETTE_DARK : PALETTE_LIGHT));
     this.seq = dark ? SEQ_DARK : SEQ_LIGHT;
   };
 
@@ -1078,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);
@@ -1226,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) {
@@ -1237,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));
+        }
       }
     }
   };
@@ -2907,6 +3016,42 @@
   RaChart.defaults = DEFAULTS;
   RaChart.palette = PALETTE_LIGHT;
   RaChart.paletteDark = PALETTE_DARK;
+
+  /**
+   * Recolour every chart created from now on.
+   *
+   *   RaChart.setPalette(['#534ab7', '#2196f3', '#f0334b']);
+   *   RaChart.setPalette(lightHexes, darkHexes);   // separate dark steps
+   *
+   * Pass one array to use it in both modes. Colours cycle if a chart has more
+   * series than you supply. Existing charts keep their palette until they
+   * rebuild — call replay() on them, or set this before creating any chart.
+   * Overridden per chart by `colors`, and by --ra-chart-series-N in CSS.
+   */
+  RaChart.setPalette = function (light, dark) {
+    if (light && light.length) {
+      PALETTE_LIGHT = light.slice();
+      RaChart.palette = PALETTE_LIGHT;
+      if (!dark || !dark.length) {
+        PALETTE_DARK = light.slice();
+        RaChart.paletteDark = PALETTE_DARK;
+      }
+    }
+    if (dark && dark.length) {
+      PALETTE_DARK = dark.slice();
+      RaChart.paletteDark = PALETTE_DARK;
+    }
+    return RaChart;
+  };
+
+  /** Restore the built-in colourblind-safe palette. */
+  RaChart.resetPalette = function () {
+    PALETTE_LIGHT = DEFAULT_LIGHT.slice();
+    PALETTE_DARK = DEFAULT_DARK.slice();
+    RaChart.palette = PALETTE_LIGHT;
+    RaChart.paletteDark = PALETTE_DARK;
+    return RaChart;
+  };
   RaChart.types = Object.keys(KINDS);
   RaChart.create = function (host, options) { return new RaChart(host, options); };