@revivejs/angular-infinity-charts 2.0.0 → 21.0.0

package/docs/angular-2/app/app.component.html

@@ -0,0 +1,185 @@
+<div class="shell">
+  <section class="hero">
+    <div class="hero-card hero-main">
+      <span class="badge">Angular {{ releaseLine.angular }} · @revivejs/infinity-charts {{ releaseLine.coreVersion }}</span>
+      <h1>@revivejs/angular-infinity-charts</h1>
+      <p>
+        A maintained Angular wrapper around the ReviveJS chart engine. Use a component for direct templates,
+        a directive for dashboard slots and widget shells, and a service for imperative chart creation.
+      </p>
+      <div class="feature-grid">
+        <div class="feature">
+          <strong>Component API</strong>
+          Render a chart declaratively with a clean Angular input/output shape.
+        </div>
+        <div class="feature">
+          <strong>Directive API</strong>
+          Turn existing dashboard panels and widget slots into real chart hosts.
+        </div>
+        <div class="feature">
+          <strong>Service API</strong>
+          Mount charts programmatically in modals, detached slots, or service-driven flows.
+        </div>
+        <div class="feature">
+          <strong>Core fidelity</strong>
+          Keep the Infinity Charts engine, chart catalog, theme system, and live update methods intact.
+        </div>
+      </div>
+      <div class="cta-row">
+        <a class="btn" href="#demos">See demos</a>
+        <a class="btn secondary" href="https://github.com/alexandroit/angular-infinity-charts#readme" target="_blank">README</a>
+      </div>
+    </div>
+
+    <div class="hero-card hero-setup">
+      <h2>Setup in 3 steps</h2>
+
+      <div class="step">
+        <span class="step-num">1</span>
+        <div>
+          <strong>Install</strong>
+          <pre [textContent]="installSnippet"></pre>
+        </div>
+      </div>
+
+      <div class="step">
+        <span class="step-num">2</span>
+        <div>
+          <strong>Register the module</strong>
+<pre [textContent]="moduleSnippet"></pre>
+        </div>
+      </div>
+
+      <div class="step">
+        <span class="step-num">3</span>
+        <div>
+          <strong>Use the wrapper</strong>
+<pre [textContent]="directiveSnippet"></pre>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="layout" id="demos">
+    <div class="panels">
+      <article class="panel">
+        <div class="panel-header">
+          <h2>Core wrapper demos</h2>
+          <p>The first Angular line already covers the main chart integration patterns teams need in dashboards and product analytics.</p>
+        </div>
+
+        <div class="demo-grid">
+          <section class="demo-card">
+            <h3>Standalone component</h3>
+            <p>Use the component when the chart itself is the primary content block in your Angular template.</p>
+<pre class="code" [textContent]="componentSnippet"></pre>
+            <revive-infinity-chart
+              class="chart-frame"
+              [style.display]="'block'"
+              [style.height.px]="320"
+              [config]="lineChartConfig"
+              (create)="onCreate('Standalone component')"
+              (ready)="onReady('Standalone component')"
+              (updated)="onUpdated('Standalone component')"
+              (destroyed)="onDestroyed('Standalone component')"></revive-infinity-chart>
+          </section>
+
+          <section class="demo-card">
+            <h3>Directive on an analytics card</h3>
+            <p>The directive is a strong fit when an existing dashboard shell already owns spacing, chrome, and surrounding context.</p>
+<pre class="code" [textContent]="directiveSnippet"></pre>
+            <div class="controls">
+              <button (click)="toggleCardTheme()">Toggle card theme</button>
+            </div>
+            <div class="analytics-card" [class.is-dark]="cardTheme === 'dark'">
+              <div class="analytics-head">
+                <span>Q2 sales motion</span>
+                <strong>{{ cardTheme === 'dark' ? 'Dark panel' : 'Light panel' }}</strong>
+              </div>
+              <div class="chart-slot"
+                   [style.height.px]="300"
+                   [reviveInfinityChart]="cardChartConfig"
+                   (create)="onCreate('Directive card')"
+                   (ready)="onReady('Directive card')"
+                   (updated)="onUpdated('Directive card')"
+                   (destroyed)="onDestroyed('Directive card')"></div>
+            </div>
+          </section>
+
+          <section class="demo-card">
+            <h3>Service-driven mount</h3>
+            <p>Programmatic chart creation is useful for modal bodies, detached panels, and controller-style workflows.</p>
+            <div class="controls">
+              <button (click)="mountServiceChart()">
+                {{ serviceChartMounted ? 'Destroy service chart' : 'Mount service chart' }}
+              </button>
+            </div>
+<pre class="code" [textContent]="serviceSnippet"></pre>
+            <div class="service-shell">
+              <div class="service-slot" id="service-chart-slot"></div>
+            </div>
+          </section>
+
+          <section class="demo-card">
+            <h3>Live update methods</h3>
+            <p>The wrapper keeps the underlying chart instance methods available, so appending data and resizing remain straightforward.</p>
+            <div class="controls">
+              <button (click)="appendRealtimePoint()">Append point</button>
+              <button class="ghost-button" (click)="toggleRealtimeTheme()">Toggle theme</button>
+            </div>
+            <revive-infinity-chart
+              #realtimeChart
+              class="chart-frame"
+              [style.display]="'block'"
+              [style.height.px]="300"
+              [config]="realtimeChartConfig"
+              (create)="onCreate('Realtime chart')"
+              (ready)="onReady('Realtime chart')"
+              (updated)="onUpdated('Realtime chart')"
+              (destroyed)="onDestroyed('Realtime chart')"></revive-infinity-chart>
+          </section>
+        </div>
+      </article>
+
+      <article class="panel">
+        <div class="panel-header">
+          <h2>API reference</h2>
+          <p>The wrapper stays intentionally thin so Angular owns structure while the Infinity Charts core owns rendering, theming, and live updates.</p>
+        </div>
+        <div class="api-grid">
+          <section class="api-card" *ngFor="let item of apiCards">
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.summary }}</p>
+          </section>
+        </div>
+      </article>
+
+      <playground-panel></playground-panel>
+    </div>
+
+    <aside class="sidebar">
+      <section class="sidebar-card">
+        <div class="panel-header">
+          <h2>Event log</h2>
+          <button class="ghost-button" (click)="clearLog()">Clear</button>
+        </div>
+        <div class="log-list">
+          <div class="log-item" *ngFor="let log of logs">{{ log }}</div>
+        </div>
+      </section>
+
+      <section class="sidebar-card">
+        <div class="panel-header">
+          <h2>Release line</h2>
+        </div>
+        <ul class="release-meta">
+          <li><strong>Angular:</strong> {{ releaseLine.angular }}</li>
+          <li><strong>Package:</strong> {{ releaseLine.packageVersion }}</li>
+          <li><strong>Core:</strong> {{ releaseLine.coreVersion }}</li>
+          <li><strong>Runtime:</strong> {{ releaseLine.runtimeTarget }}</li>
+          <li><strong>Docs path:</strong> {{ releaseLine.docsPath }}</li>
+        </ul>
+      </section>
+    </aside>
+  </section>
+</div>

package/docs/angular-2/app/app.component.ts

@@ -0,0 +1,243 @@
+import { Component, OnDestroy, ViewChild } from '@angular/core';
+
+import {
+  InfinityChartComponent,
+  InfinityChartService
+} from '@revivejs/angular-infinity-charts';
+import { API_CARDS } from './data/api';
+import { RELEASE_LINE } from './data/release-line';
+
+declare var module: { id: string };
+
+@Component({
+  moduleId: module.id,
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent implements OnDestroy {
+  @ViewChild('realtimeChart')
+  realtimeChart: InfinityChartComponent;
+
+  apiCards = API_CARDS;
+  releaseLine = RELEASE_LINE;
+  logs: string[] = [];
+
+  installSnippet: string = "npm install @revivejs/angular-infinity-charts";
+  moduleSnippet: string = "import { InfinityChartsModule } from '@revivejs/angular-infinity-charts';\n\n@NgModule({\n  imports: [InfinityChartsModule.forRoot()]\n})";
+  componentSnippet: string = "<revive-infinity-chart\n  [config]=\"lineChartConfig\"\n  style=\"display:block;height:320px;\">\n</revive-infinity-chart>";
+  directiveSnippet: string = "<div class=\"chart-slot\"\n     [reviveInfinityChart]=\"barCardConfig\"\n     style=\"height:320px;\">\n</div>";
+  serviceSnippet: string = "const chart = this.chartService.create(target, {\n  type: 'donut',\n  title: 'Revenue mix',\n  data: [\n    { label: 'New', value: 42 },\n    { label: 'Expansion', value: 28 },\n    { label: 'Renewal', value: 19 }\n  ],\n  theme: 'light'\n});\n\nchart.ready().then(() => console.log('Chart ready'));";
+
+  lineChartConfig: Object = this.createLineChartConfig();
+  cardChartConfig: Object = this.createBarCardConfig('light');
+  realtimeChartConfig: Object = this.createRealtimeConfig('light');
+
+  cardTheme: string = 'light';
+  serviceChartMounted: boolean = false;
+  serviceChart: any = null;
+  realtimePointIndex: number = 7;
+  realtimeTheme: string = 'light';
+
+  constructor(private chartService: InfinityChartService) {
+    this.log('Angular 2 docs loaded successfully.');
+  }
+
+  ngOnDestroy(): void {
+    if (this.serviceChart) {
+      this.serviceChart.destroy();
+      this.serviceChart = null;
+    }
+  }
+
+  onCreate(label: string): void {
+    this.log(label + ' created.');
+  }
+
+  onReady(label: string): void {
+    this.log(label + ' ready.');
+  }
+
+  onUpdated(label: string): void {
+    this.log(label + ' updated.');
+  }
+
+  onDestroyed(label: string): void {
+    this.log(label + ' destroyed.');
+  }
+
+  toggleCardTheme(): void {
+    this.cardTheme = this.cardTheme === 'light' ? 'dark' : 'light';
+    this.cardChartConfig = this.createBarCardConfig(this.cardTheme);
+    this.log('Directive card switched to ' + this.cardTheme + ' theme.');
+  }
+
+  mountServiceChart(): void {
+    var slot = document.getElementById('service-chart-slot');
+
+    if (!slot) {
+      return;
+    }
+
+    if (this.serviceChart) {
+      this.serviceChart.destroy();
+      this.serviceChart = null;
+      this.serviceChartMounted = false;
+      this.log('Service chart destroyed.');
+      slot.innerHTML = '';
+      return;
+    }
+
+    this.serviceChart = this.chartService.create(slot, {
+      type: 'donut',
+      title: {
+        text: 'Revenue mix',
+        subtitle: 'Mounted from the service'
+      },
+      data: [
+        { label: 'New', value: 42, color: '#2563eb' },
+        { label: 'Expansion', value: 28, color: '#10b981' },
+        { label: 'Renewal', value: 19, color: '#f59e0b' },
+        { label: 'Recovery', value: 11, color: '#ef4444' }
+      ],
+      theme: 'light',
+      showLegend: true
+    });
+
+    this.serviceChartMounted = true;
+    this.log('Service chart created.');
+
+    this.serviceChart.ready().then(() => {
+      this.log('Service chart ready.');
+    });
+  }
+
+  appendRealtimePoint(): void {
+    var value: number;
+
+    if (!this.realtimeChart) {
+      return;
+    }
+
+    value = 96 + Math.round(Math.random() * 28);
+    this.realtimePointIndex += 1;
+    this.realtimeChart.appendData({
+      label: 'T' + this.realtimePointIndex,
+      value: value
+    });
+    this.log('Realtime point appended: ' + value + '.');
+  }
+
+  toggleRealtimeTheme(): void {
+    this.realtimeTheme = this.realtimeTheme === 'light' ? 'dark' : 'light';
+    this.realtimeChartConfig = this.createRealtimeConfig(this.realtimeTheme);
+    this.log('Realtime example switched to ' + this.realtimeTheme + ' theme.');
+  }
+
+  clearLog(): void {
+    this.logs = [];
+    this.log('Log cleared.');
+  }
+
+  private createLineChartConfig(): Object {
+    return {
+      type: 'line',
+      title: {
+        text: 'Monthly recurring revenue',
+        subtitle: 'Standalone component example'
+      },
+      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+      series: [
+        { name: 'Revenue', data: [14, 18, 17, 26, 29, 34] },
+        { name: 'Plan', data: [12, 16, 19, 23, 28, 31], color: '#38bdf8' }
+      ],
+      thresholds: [
+        {
+          value: 28,
+          axis: 'y',
+          label: 'Target',
+          color: '#f59e0b'
+        }
+      ],
+      theme: 'dark',
+      legend: {
+        show: true,
+        position: 'bottom'
+      }
+    };
+  }
+
+  private createBarCardConfig(theme: string): Object {
+    var config: any = {
+      type: 'bar',
+      title: {
+        text: 'Pipeline by segment',
+        subtitle: 'Directive-driven dashboard slot'
+      },
+      labels: ['SMB', 'Mid-market', 'Enterprise', 'Partners'],
+      series: [
+        { name: 'Qualified', data: [18, 26, 22, 14] },
+        { name: 'Closed', data: [9, 14, 16, 7], color: '#22c55e' }
+      ],
+      legend: {
+        show: true,
+        position: 'bottom'
+      },
+      theme: theme
+    };
+
+    if (theme === 'dark') {
+      config.colors = {
+        surface: '#0b1220',
+        surfaceAlt: '#111a2d',
+        plotBackground: '#0f1a2c',
+        plotBorder: '#1e3352',
+        border: '#203451',
+        text: '#d8e3f3',
+        mutedText: '#93a5be',
+        title: '#f8fbff'
+      };
+    }
+
+    return config;
+  }
+
+  private createRealtimeConfig(theme: string): Object {
+    var config: any = {
+      type: 'line',
+      title: {
+        text: 'Realtime throughput',
+        subtitle: 'Wrapper methods stay available through the component instance'
+      },
+      labels: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'],
+      data: [98, 104, 102, 118, 111, 120],
+      theme: theme,
+      realtime: {
+        enabled: true,
+        maxPoints: 10
+      },
+      showLegend: false
+    };
+
+    if (theme === 'dark') {
+      config.colors = {
+        surface: '#08111d',
+        surfaceAlt: '#102038',
+        plotBackground: '#0b1728',
+        plotBorder: '#1d3250',
+        border: '#1d3250',
+        text: '#cbd7e8',
+        mutedText: '#8ba0bb',
+        title: '#f8fbff'
+      };
+    }
+
+    return config;
+  }
+
+  private log(message: string): void {
+    var timestamp = new Date().toLocaleTimeString();
+    this.logs.unshift('[' + timestamp + '] ' + message);
+    this.logs = this.logs.slice(0, 14);
+  }
+}

package/docs/angular-2/app/app.module.ts

@@ -0,0 +1,18 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { InfinityChartsModule } from '@revivejs/angular-infinity-charts';
+import { AppComponent } from './app.component';
+import { PlaygroundComponent } from './playground.component';
+
+@NgModule({
+  declarations: [AppComponent, PlaygroundComponent],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    InfinityChartsModule.forRoot()
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}

package/docs/angular-2/app/data/api.ts

@@ -0,0 +1,14 @@
+export const API_CARDS = [
+  {
+    title: 'InfinityChartComponent',
+    summary: 'Use <revive-infinity-chart> when the chart itself should be rendered declaratively inside the Angular template.'
+  },
+  {
+    title: 'InfinityChartDirective',
+    summary: 'Use [reviveInfinityChart] when an existing slot, dashboard card, widget shell, or analytics panel should become a chart host.'
+  },
+  {
+    title: 'InfinityChartService',
+    summary: 'Create charts programmatically for modal slots, detached surfaces, fullscreen views, or service-driven workflows.'
+  }
+];

package/docs/angular-2/app/data/release-line.ts

@@ -0,0 +1,7 @@
+export const RELEASE_LINE = {
+  angular: '2.4.x',
+  packageVersion: '2.0.0',
+  coreVersion: '1.0.1',
+  runtimeTarget: 'Angular 2 + browser DOM',
+  docsPath: '/angular-2/'
+};