cordova-plugin-ra-chart 1.0.3 → 1.0.5

package/README.md

@@ -82,6 +82,14 @@ Add the stylesheet to `angular.json`:
 ]
 ```
 
+> **`ra-chart.css` must be global — never a component's `styleUrls`.** Angular's
+> view encapsulation scopes those rules to `[_ngcontent-*]`, which never matches
+> the legend, tooltip and zoom bar because the engine creates them at runtime.
+> The classic symptom is a legend that reads `RevenueTarget` with no colour
+> swatches. Since v1.0.3 the engine injects its own structural styles so this
+> renders correctly regardless, and `ra-chart.css` is optional — it only supplies
+> theming. Load it globally to theme; skip it entirely and charts still look right.
+
 The component lazy-loads `ra-chart.js` from `assets/ra-chart/ra-chart.js` on first use. To bundle it eagerly instead, add it to `angular.json` → `"scripts"`; the loader will detect `window.RaChart` and skip the fetch.
 
 To load it from somewhere else:
@@ -491,6 +499,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
@@ -621,6 +677,8 @@ To silence the diagnostics in production: `RaChart.warnings = false;`
 
 **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.
 
+**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.
+
 **Tooltip is clipped inside `ion-card`** — the tooltip is absolutely positioned inside the chart element; give the card content enough padding, or set `sheetTooltip: true` to dock it.
 
 **No haptics on device** — install `@capacitor/haptics`, or rely on the `navigator.vibrate` fallback (Android only; iOS Safari does not support it).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cordova-plugin-ra-chart",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "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.2">
+        version="1.0.4">
 
   <name>raChart</name>
   <description>

package/types/index.d.ts

@@ -200,6 +200,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.2 — mobile SVG chart engine
+ * raChart Cordova v1.0.4 — 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.2";
+  var VERSION = "1.0.4";
 
   /* ============================================================
      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"];
 
@@ -351,6 +354,60 @@
     gauge: "gauge", heatmap: "heat"
   };
 
+  /* ============================================================
+     Base stylesheet
+
+     The SVG gets its colours from inline attributes, but the legend, tooltip
+     and zoom bar are real HTML and would collapse into unstyled inline text
+     without CSS — the classic "legend reads RevenueTarget" symptom. Angular
+     makes that easy to hit: ra-chart.css dropped into a component's styleUrls
+     is scoped to [_ngcontent-*], which never matches nodes the engine creates
+     at runtime.
+
+     So the structural rules ship in JS and are injected once, at the TOP of
+     <head>, leaving ra-chart.css (and any app CSS) free to override them.
+     Colours defer to the same custom properties, with fallbacks.
+     ============================================================ */
+
+  var BASE_STYLE_ID = "ra-chart-base-styles";
+  var BASE_CSS = [
+    'ra-chart{display:block;position:relative;width:100%}',
+    '.ra-chart{position:relative;display:block;width:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}',
+    '.ra-chart__stage{position:relative;width:100%;overflow:hidden}',
+    '.ra-chart__stage svg{display:block;width:100%;height:100%;overflow:visible;user-select:none;-webkit-user-select:none}',
+    '.ra-chart .ra-hit{cursor:pointer}',
+    '.ra-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;padding-top:10px;font-size:13px;font-weight:700;line-height:1.4;color:var(--ra-chart-body,#4b5563)}',
+    '.ra-chart__legend-item{display:inline-flex;align-items:center;gap:7px;padding:7px 2px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:opacity .18s}',
+    '.ra-chart__legend-item.is-off{opacity:.38}',
+    '.ra-chart__legend-item.is-off .ra-chart__legend-label{text-decoration:line-through}',
+    '.ra-chart__legend-swatch{display:inline-block;width:11px;height:11px;border-radius:4px;flex:0 0 auto}',
+    '.ra-chart__legend-value{color:var(--ra-chart-muted,#9ca3af);font-weight:600}',
+    '.ra-chart__tip{position:absolute;z-index:5;pointer-events:none;max-width:88%;background:var(--ra-chart-tip-bg,#1f2937);color:var(--ra-chart-tip-text,#f9fafb);font-size:12px;font-weight:600;line-height:1.5;border-radius:10px;padding:8px 12px;box-shadow:0 6px 20px rgba(15,23,42,.28);opacity:0;transform:translate(-50%,-112%) scale(.96);transition:opacity .15s,transform .15s;white-space:nowrap}',
+    '.ra-chart__tip.is-on{opacity:1;transform:translate(-50%,-112%) scale(1)}',
+    '.ra-chart__tip--sheet{left:50%!important;top:auto!important;bottom:6px;transform:translate(-50%,8px);white-space:normal;text-align:center;padding:10px 16px;border-radius:12px;font-size:13px}',
+    '.ra-chart__tip--sheet.is-on{transform:translate(-50%,0)}',
+    '.ra-chart__tip-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}',
+    '.ra-chart__tip-cat{display:block;color:var(--ra-chart-tip-muted,#9ca3af);font-weight:500;margin-bottom:2px}',
+    '.ra-chart__tip-muted{color:var(--ra-chart-tip-muted,#9ca3af);font-weight:500}',
+    '.ra-chart__zoom{padding:6px 0 14px;touch-action:none}',
+    '.ra-chart__zoom-track{position:relative;height:8px;background:var(--ra-chart-zoom-track,#eceff3);border-radius:999px;margin:0 13px}',
+    '.ra-chart__zoom-sel{position:absolute;top:0;height:100%;background:var(--ra-chart-zoom-sel,#c7c2ee);border-radius:999px;cursor:grab}',
+    '.ra-chart__zoom-handle{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:var(--ra-chart-zoom-handle,#fff);border:2px solid var(--ra-chart-zoom-handle-border,#534ab7);box-shadow:0 1px 5px rgba(15,23,42,.28);transform:translate(-50%,-50%);cursor:ew-resize;touch-action:none}',
+    '@media (pointer:fine){.ra-chart__zoom-handle{width:18px;height:18px}}'
+  ].join("");
+
+  function ensureBaseStyles() {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(BASE_STYLE_ID)) return;
+    var head = document.head || document.getElementsByTagName("head")[0];
+    if (!head) return;
+    var st = document.createElement("style");
+    st.id = BASE_STYLE_ID;
+    st.appendChild(document.createTextNode(BASE_CSS));
+    // first in <head> so ra-chart.css and app styles win on equal specificity
+    head.insertBefore(st, head.firstChild);
+  }
+
   var UID = 0;
 
   /* ============================================================
@@ -362,6 +419,7 @@
     if (typeof host === "string") host = document.querySelector(host);
     if (!host) throw new Error("raChart: host element not found");
 
+    ensureBaseStyles();
     this.el = host;
     this.uid = ++UID;
     this.opts = merge(merge({}, DEFAULTS), options || {});
@@ -390,6 +448,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"),
@@ -400,7 +468,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;
   };
 
@@ -2852,6 +2922,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); };
 
@@ -3018,6 +3124,8 @@
   }
 
   RaChart.defineElement = defineElement;
+  /** Inject the built-in structural stylesheet (called automatically). */
+  RaChart.injectStyles = ensureBaseStyles;
 
   // Auto-register so the tag works with no setup. Harmless when a framework
   // component already owns the element — the stand-down guard handles it.