cordova-plugin-ra-chart 1.0.4 → 1.0.5

package/README.md

@@ -499,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cordova-plugin-ra-chart",
-  "version": "1.0.4",
+  "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.3">
+        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.3 — 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.3";
+  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"];
 
@@ -445,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"),
@@ -455,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;
   };
 
@@ -2907,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); };