cordova-plugin-ra-chart 1.0.0

package/types/index.d.ts

@@ -0,0 +1,218 @@
+/**
+ * raChart Cordova v1.0.0 — TypeScript definitions
+ * RemoteApps UI Components
+ */
+
+export type RaChartType =
+  | 'column' | 'bar' | 'line' | 'area' | 'lollipop'
+  | 'pie' | 'donut' | 'radar'
+  | 'treemap' | 'sankey' | 'wordcloud' | 'venn'
+  | 'candlestick' | 'timeline' | 'gantt'
+  | 'scatter' | 'bubble'
+  | 'funnel' | 'pyramid'
+  | 'gauge' | 'heatmap';
+
+/** One plotted measure. For pie/donut/treemap/etc. only the first entry is used. */
+export interface RaSeries {
+  /** Legend / tooltip label. */
+  name: string;
+  /** Property on each data row holding this series' value. */
+  field: string;
+}
+
+/** Remap non-standard column names per chart type. */
+export interface RaFieldMap {
+  /** candlestick */
+  open?: string;
+  high?: string;
+  low?: string;
+  close?: string;
+  /** gantt */
+  start?: string;
+  end?: string;
+  progress?: string;
+  /** sankey */
+  from?: string;
+  to?: string;
+  value?: string;
+}
+
+/** A coloured zone on a gauge scale. */
+export interface RaBand {
+  from?: number;
+  to?: number;
+  color?: string;
+}
+
+export interface RaAnimation {
+  /** Entrance duration in ms. */
+  duration?: number;
+  /** Per-mark stagger in ms. */
+  delay?: number;
+}
+
+export interface RaChartOptions {
+  type?: RaChartType;
+  /** Array of plain rows. */
+  data?: any[];
+  /** Row property used for labels / slices / tasks. */
+  category?: string;
+  series?: RaSeries[];
+  /** Hex colours assigned to series (or slices) in order. `null` = theme-aware default. */
+  colors?: string[] | null;
+
+  stacked?: boolean;
+  /** 100% stacked column/bar — values normalised per category, tooltips in %. */
+  fullStacked?: boolean;
+  /** Curved line/area interpolation. */
+  smooth?: boolean;
+  /** Stepped line/area interpolation. */
+  stepped?: boolean;
+  /** Half-circle pie/donut. */
+  semi?: boolean;
+  /** 3D extrusion depth in px (column, bar, pie, donut). 0 = flat. */
+  depth?: number;
+
+  fields?: RaFieldMap | null;
+  /** scatter/bubble numeric X field. */
+  xField?: string;
+  /** bubble size field. */
+  sizeField?: string;
+
+  /** Value-axis minimum. */
+  min?: number;
+  /** Gauge scale maximum. */
+  max?: number | null;
+  /** Gauge coloured zones. */
+  bands?: RaBand[] | null;
+
+  /** Candlestick bull colour. */
+  upColor?: string;
+  /** Candlestick bear colour. */
+  downColor?: string;
+
+  /** Range-slider zoom (XY types + candlestick). */
+  zoom?: boolean;
+  /** Pinch-to-zoom and drag-to-pan when `zoom` is on. Default true. */
+  pinchZoom?: boolean;
+
+  /** Clickable legend. Auto-hidden for single-series XY charts. */
+  legend?: boolean;
+  /** Plot height in px (legend and zoom bar flow outside it). */
+  height?: number;
+
+  /** Vibrate on touch-select via Capacitor Haptics or navigator.vibrate. */
+  haptics?: boolean;
+  /** Dock the tooltip to the bottom edge. `'auto'` = on coarse pointers under 480px. */
+  sheetTooltip?: boolean | 'auto';
+  /** ms a touch tooltip stays visible after the finger lifts. 0 = until next tap. */
+  tooltipHold?: number;
+
+  animation?: RaAnimation;
+}
+
+/** `raChartSelect` — a mark was tapped, hovered, or scrubbed. */
+export interface RaSelectEvent {
+  seriesIndex?: number;
+  categoryIndex?: number;
+  index?: number;
+  series?: string;
+  category?: string;
+  value?: number;
+  percent?: number;
+  /** scatter/bubble */
+  x?: number;
+  y?: number;
+  size?: number;
+  /** candlestick */
+  ohlc?: { o: number; h: number; l: number; c: number };
+  /** gantt */
+  start?: number;
+  end?: number;
+  progress?: number | null;
+  /** sankey */
+  kind?: 'link' | 'node';
+  from?: string;
+  to?: string;
+  name?: string;
+  /** heatmap */
+  row?: any;
+  col?: number;
+  /** The original data row, when one applies. */
+  [key: string]: any;
+}
+
+/** `raChartZoom` — the visible window changed. */
+export interface RaZoomEvent {
+  /** Window start as a fraction 0..1. */
+  from: number;
+  /** Window end as a fraction 0..1. */
+  to: number;
+  /** First visible data index. */
+  startIndex: number;
+  /** Last visible data index. */
+  endIndex: number;
+}
+
+/** `raChartToggle` — a legend entry was switched on or off. */
+export interface RaToggleEvent {
+  index: number;
+  name: string;
+  hidden: boolean;
+}
+
+export declare class RaChart {
+  constructor(host: HTMLElement | string, options?: RaChartOptions);
+
+  readonly el: HTMLElement;
+  readonly opts: RaChartOptions;
+  readonly kind: string;
+  readonly dark: boolean;
+
+  /** Replace the data. Same-shape updates morph; shape changes rebuild. */
+  setData(data: any[]): this;
+  /** Switch chart type, resetting zoom and hidden series. */
+  setType(type: RaChartType): this;
+  /** Merge partial options and rebuild. */
+  update(partial: RaChartOptions): this;
+  /** Replay the entrance animation. */
+  replay(): this;
+  /** Re-measure and redraw (called automatically on resize/rotate). */
+  resize(): this;
+
+  /** Zoom to a 0..1 fraction window, or pass integers for a data index range. */
+  zoomTo(from: number, to: number): this;
+  resetZoom(): this;
+  getZoom(): RaZoomEvent;
+
+  /** Show/hide a series or slice by index. */
+  toggleSeries(index: number, hidden?: boolean): this;
+
+  /** Serialise the current chart to an SVG string, for share or export. */
+  toSVG(): string;
+
+  /** Tear down listeners and observers. Always call this on view destroy. */
+  destroy(): void;
+
+  static version: string;
+  static defaults: RaChartOptions;
+  static palette: string[];
+  static paletteDark: string[];
+  static types: RaChartType[];
+  static create(host: HTMLElement | string, options?: RaChartOptions): RaChart;
+}
+
+export default RaChart;
+
+declare global {
+  interface Window {
+    RaChart: typeof RaChart;
+  }
+
+  interface HTMLElementEventMap {
+    raChartReady: CustomEvent<{ chart: RaChart }>;
+    raChartSelect: CustomEvent<RaSelectEvent>;
+    raChartZoom: CustomEvent<RaZoomEvent>;
+    raChartToggle: CustomEvent<RaToggleEvent>;
+  }
+}

package/www/ra-chart.css

@@ -0,0 +1,324 @@
+/*!
+ * raChart Cordova v1.0.0 — component styles
+ * RemoteApps UI Components
+ *
+ * Theming: every colour is a CSS custom property, so you can restyle
+ * charts from your Ionic theme file without touching JS. The engine
+ * reads these same variables at build time for SVG fills.
+ */
+
+.ra-chart {
+  /* ---- palette hooks (override in your theme) ---- */
+  --ra-chart-scheme: light;
+  --ra-chart-surface: #ffffff;
+  --ra-chart-text: #1f2937;
+  --ra-chart-body: #4b5563;
+  --ra-chart-label: #898781;
+  --ra-chart-muted: #9ca3af;
+  --ra-chart-grid: #e1e0d9;
+  --ra-chart-baseline: #c3c2b7;
+
+  --ra-chart-tip-bg: #1f2937;
+  --ra-chart-tip-text: #f9fafb;
+  --ra-chart-tip-muted: #9ca3af;
+
+  --ra-chart-zoom-track: #eceff3;
+  --ra-chart-zoom-sel: #c7c2ee;
+  --ra-chart-zoom-handle: #ffffff;
+  --ra-chart-zoom-handle-border: #534ab7;
+
+  --ra-chart-radius: 12px;
+
+  position: relative;
+  display: block;
+  width: 100%;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ---- dark mode: OS preference, Ionic 8 palette, and legacy body.dark ---- */
+@media (prefers-color-scheme: dark) {
+  .ra-chart:not(.ra-chart--light) {
+    --ra-chart-scheme: dark;
+    --ra-chart-surface: #1a1a19;
+    --ra-chart-text: #ffffff;
+    --ra-chart-body: #c3c2b7;
+    --ra-chart-label: #9d9c95;
+    --ra-chart-muted: #8a8a84;
+    --ra-chart-grid: #2c2c2a;
+    --ra-chart-baseline: #383835;
+    --ra-chart-tip-bg: #f4f4f2;
+    --ra-chart-tip-text: #16161a;
+    --ra-chart-tip-muted: #6b6b66;
+    --ra-chart-zoom-track: #2c2c2a;
+    --ra-chart-zoom-sel: #4a4494;
+    --ra-chart-zoom-handle: #1a1a19;
+    --ra-chart-zoom-handle-border: #9085e9;
+  }
+}
+
+.ion-palette-dark .ra-chart:not(.ra-chart--light),
+body.dark .ra-chart:not(.ra-chart--light),
+.ra-chart--dark {
+  --ra-chart-scheme: dark;
+  --ra-chart-surface: #1a1a19;
+  --ra-chart-text: #ffffff;
+  --ra-chart-body: #c3c2b7;
+  --ra-chart-label: #9d9c95;
+  --ra-chart-muted: #8a8a84;
+  --ra-chart-grid: #2c2c2a;
+  --ra-chart-baseline: #383835;
+  --ra-chart-tip-bg: #f4f4f2;
+  --ra-chart-tip-text: #16161a;
+  --ra-chart-tip-muted: #6b6b66;
+  --ra-chart-zoom-track: #2c2c2a;
+  --ra-chart-zoom-sel: #4a4494;
+  --ra-chart-zoom-handle: #1a1a19;
+  --ra-chart-zoom-handle-border: #9085e9;
+}
+
+/* ============ Stage ============ */
+.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;
+}
+
+/* ============ Tooltip ============ */
+.ra-chart__tip {
+  position: absolute;
+  z-index: 5;
+  pointer-events: none;
+  max-width: 88%;
+  background: var(--ra-chart-tip-bg);
+  color: var(--ra-chart-tip-text);
+  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, 0.28);
+  opacity: 0;
+  transform: translate(-50%, -112%) scale(.96);
+  transition: opacity .15s ease, transform .15s ease;
+  white-space: nowrap;
+}
+
+.ra-chart__tip.is-on {
+  opacity: 1;
+  transform: translate(-50%, -112%) scale(1);
+}
+
+/* phone: dock the tooltip to the bottom so a thumb never covers it */
+.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;
+  vertical-align: baseline;
+}
+
+.ra-chart__tip-cat {
+  display: block;
+  color: var(--ra-chart-tip-muted);
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.ra-chart__tip-muted {
+  color: var(--ra-chart-tip-muted);
+  font-weight: 500;
+}
+
+/* ============ Zoom (range slider) ============ */
+.ra-chart__zoom {
+  padding: 6px 0 14px;
+  touch-action: none;
+}
+
+.ra-chart__zoom-track {
+  position: relative;
+  height: 8px;
+  background: var(--ra-chart-zoom-track);
+  border-radius: 999px;
+  margin: 0 13px;
+}
+
+.ra-chart__zoom-sel {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background: var(--ra-chart-zoom-sel);
+  border-radius: 999px;
+  cursor: grab;
+}
+
+.ra-chart__zoom-sel:active {
+  cursor: grabbing;
+}
+
+/* 26px handles: Apple/Google both want >=24px touch targets */
+.ra-chart__zoom-handle {
+  position: absolute;
+  top: 50%;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--ra-chart-zoom-handle);
+  border: 2px solid var(--ra-chart-zoom-handle-border);
+  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.28);
+  transform: translate(-50%, -50%);
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.ra-chart__zoom-handle::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ra-chart-zoom-handle-border);
+  transform: translate(-50%, -50%);
+}
+
+@media (pointer: fine) {
+  .ra-chart__zoom-handle {
+    width: 18px;
+    height: 18px;
+  }
+
+  .ra-chart__zoom-handle::after {
+    width: 5px;
+    height: 5px;
+  }
+}
+
+/* ============ Legend ============ */
+.ra-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px 14px;
+  padding-top: 10px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--ra-chart-body);
+}
+
+.ra-chart__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  /* 44px tall hit target without visually growing the row */
+  padding: 7px 2px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: opacity .18s;
+}
+
+.ra-chart__legend-item:active {
+  opacity: .6;
+}
+
+.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-item:focus-visible {
+  outline: 2px solid var(--ra-chart-zoom-handle-border);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+.ra-chart__legend-swatch {
+  width: 11px;
+  height: 11px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.ra-chart__legend-value {
+  color: var(--ra-chart-muted);
+  font-weight: 600;
+}
+
+/* ============ States ============ */
+.ra-chart__empty,
+.ra-chart__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--ra-chart-muted);
+  font-size: 13px;
+  font-weight: 600;
+  text-align: center;
+  padding: 24px 16px;
+}
+
+.ra-chart__spinner {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 2.5px solid var(--ra-chart-grid);
+  border-top-color: var(--ra-chart-zoom-handle-border);
+  animation: ra-chart-spin .8s linear infinite;
+}
+
+@keyframes ra-chart-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+  .ra-chart__tip,
+  .ra-chart__legend-item,
+  .ra-chart .ra-hit {
+    transition: none !important;
+  }
+
+  .ra-chart__spinner {
+    animation-duration: 2s;
+  }
+}