@revivejs/angular-infinity-charts 2.0.0 → 21.0.0

package/dist/types/revivejs-angular-infinity-charts.d.ts

@@ -0,0 +1,300 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, ModuleWithProviders } from '@angular/core';
+
+type AngularInfinityChartType = 'line' | 'area' | 'stacked-area' | 'bar' | 'bar-3d' | 'combo' | 'sparkline' | 'scatter' | 'gauge' | 'gauge-semicircle' | 'radial-progress' | 'thermometer' | 'thermometer-horizontal' | 'battery' | 'pie' | 'donut';
+type AngularInfinityThemeMode = 'light' | 'dark' | 'custom';
+type AngularInfinityLegendPosition = 'top' | 'right' | 'bottom' | 'left';
+type AngularInfinityLegendAlign = 'start' | 'center' | 'end';
+type AngularInfinityValue = number | string | Date;
+interface AngularInfinityTitleOptions {
+    text?: string;
+    subtitle?: string;
+    align?: AngularInfinityLegendAlign;
+}
+interface AngularInfinityAxisOptions {
+    show?: boolean;
+    title?: string;
+    tickCount?: number;
+    min?: number;
+    max?: number;
+    nice?: boolean;
+    format?: (value: number | string) => string;
+}
+interface AngularInfinityGridOptions {
+    show?: boolean;
+    x?: boolean;
+    y?: boolean;
+    color?: string;
+    opacity?: number;
+}
+interface AngularInfinityLegendOptions {
+    show?: boolean;
+    position?: AngularInfinityLegendPosition;
+    align?: AngularInfinityLegendAlign;
+}
+interface AngularInfinityLayoutOptions {
+    padding?: any;
+    plotPadding?: any;
+    cornerRadius?: number;
+    background?: string;
+}
+interface AngularInfinityChartColorOverrides {
+    background?: string;
+    surface?: string;
+    surfaceAlt?: string;
+    plotBackground?: string;
+    plotBorder?: string;
+    border?: string;
+    grid?: string;
+    axis?: string;
+    text?: string;
+    mutedText?: string;
+    title?: string;
+    legendText?: string;
+    tooltipBackground?: string;
+    tooltipText?: string;
+    pointStroke?: string;
+    threshold?: string;
+    gaugeTrack?: string;
+    gaugeNeedle?: string;
+    interactiveGlow?: string;
+    shadow?: string;
+}
+interface AngularInfinityAnimationOptions {
+    enabled?: boolean;
+    duration?: number;
+    easing?: string;
+    stagger?: number;
+    mode?: 'subtle' | 'expressive' | 'none';
+}
+interface AngularInfinityResponsiveOptions {
+    enabled?: boolean;
+    debounceMs?: number;
+    minHeight?: number;
+}
+interface AngularInfinityInteractionOptions {
+    enabled?: boolean;
+    tooltip?: boolean;
+    hover?: boolean;
+    click?: boolean;
+}
+interface AngularInfinityRealtimeOptions {
+    enabled?: boolean;
+    maxPoints?: number;
+    batchWindowMs?: number;
+    preserveDomain?: boolean;
+}
+interface AngularInfinityChartThreshold {
+    id?: string;
+    axis?: 'x' | 'y';
+    value: number;
+    label?: string;
+    color?: string;
+    dasharray?: string;
+}
+interface AngularInfinityGaugeBandInput {
+    from: number;
+    to: number;
+    color?: string;
+    label?: string;
+}
+interface AngularInfinityGaugeOptions {
+    min?: number;
+    max?: number;
+    unit?: string;
+    label?: string;
+    startAngle?: number;
+    endAngle?: number;
+    needle?: boolean;
+    trackColor?: string;
+    bands?: AngularInfinityGaugeBandInput[];
+    valueFormatter?: (value: number) => string;
+}
+interface AngularInfinityThemeTokens {
+    name?: string;
+    mode?: AngularInfinityThemeMode;
+    background?: string;
+    surface?: string;
+    surfaceAlt?: string;
+    plotBackground?: string;
+    plotBorder?: string;
+    border?: string;
+    grid?: string;
+    axis?: string;
+    text?: string;
+    mutedText?: string;
+    title?: string;
+    legendText?: string;
+    shadow?: string;
+    palette?: string[];
+    fontFamily?: string;
+    fontSize?: number;
+    tooltipBackground?: string;
+    tooltipText?: string;
+    pointStroke?: string;
+    threshold?: string;
+    gaugeTrack?: string;
+    gaugeNeedle?: string;
+    interactiveGlow?: string;
+}
+type AngularInfinityThemeInput = 'light' | 'dark' | AngularInfinityThemeTokens;
+interface AngularInfinityCartesianPoint {
+    x?: AngularInfinityValue;
+    y: number;
+    label?: string;
+}
+type AngularInfinityCartesianValueInput = number | AngularInfinityCartesianPoint;
+interface AngularInfinityCartesianSeriesInput {
+    id?: string;
+    name?: string;
+    color?: string;
+    type?: 'line' | 'area' | 'bar' | 'scatter';
+    data: AngularInfinityCartesianValueInput[];
+}
+interface AngularInfinityDonutSliceInput {
+    id?: string;
+    label: string;
+    value: number;
+    color?: string;
+}
+interface AngularInfinityLabeledValueInput {
+    label: string;
+    value: number;
+    color?: string;
+}
+type AngularInfinityChartDataInput = number[] | AngularInfinityCartesianValueInput[] | AngularInfinityDonutSliceInput[] | AngularInfinityLabeledValueInput[] | any;
+type AngularInfinitySeriesCollectionInput = AngularInfinityCartesianSeriesInput[] | AngularInfinityDonutSliceInput[];
+interface AngularInfinityChartPlugin {
+    id: string;
+    hooks?: any;
+}
+interface AngularInfinityChartConfig {
+    container?: HTMLElement | string;
+    type?: AngularInfinityChartType | string;
+    width?: number;
+    height?: number;
+    title?: string | AngularInfinityTitleOptions;
+    labels?: string[];
+    data?: AngularInfinityChartDataInput;
+    series?: AngularInfinitySeriesCollectionInput;
+    theme?: AngularInfinityThemeInput;
+    showNumber?: boolean;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    xAxis?: AngularInfinityAxisOptions;
+    yAxis?: AngularInfinityAxisOptions;
+    grid?: AngularInfinityGridOptions;
+    legend?: AngularInfinityLegendOptions;
+    layout?: AngularInfinityLayoutOptions;
+    colors?: AngularInfinityChartColorOverrides;
+    thresholds?: AngularInfinityChartThreshold[];
+    gauge?: AngularInfinityGaugeOptions;
+    animation?: AngularInfinityAnimationOptions;
+    responsive?: AngularInfinityResponsiveOptions;
+    interaction?: AngularInfinityInteractionOptions;
+    realtime?: AngularInfinityRealtimeOptions;
+    plugins?: AngularInfinityChartPlugin[];
+    [key: string]: any;
+}
+interface AngularInfinityChartPublicApi {
+    ready(): Promise<void>;
+    update(config: AngularInfinityChartConfig): void;
+    updateSeries(series: AngularInfinitySeriesCollectionInput): void;
+    appendData(point: any): void;
+    appendBatch(points: any[]): void;
+    replaceData(data: AngularInfinityChartDataInput): void;
+    resize(width?: number, height?: number): void;
+    setTheme(theme: AngularInfinityThemeInput): void;
+    registerPlugin(plugin: AngularInfinityChartPlugin): void;
+    on(event: string, handler: (payload?: unknown) => void): () => void;
+    destroy(): void;
+}
+interface AngularInfinityChartEvent {
+    host: HTMLElement;
+    chart: AngularInfinityChartPublicApi | null;
+    config: AngularInfinityChartConfig;
+}
+
+declare class InfinityChartComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private static nextHostId;
+    config: AngularInfinityChartConfig;
+    create: EventEmitter<AngularInfinityChartEvent>;
+    ready: EventEmitter<AngularInfinityChartEvent>;
+    updated: EventEmitter<AngularInfinityChartEvent>;
+    resized: EventEmitter<AngularInfinityChartEvent>;
+    destroyed: EventEmitter<AngularInfinityChartEvent>;
+    hostId: string;
+    private controller;
+    private initialized;
+    private hooks;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    update(config: AngularInfinityChartConfig): Promise<void>;
+    resize(width?: number, height?: number): void;
+    updateSeries(series: AngularInfinitySeriesCollectionInput): void;
+    appendData(point: any): void;
+    appendBatch(points: any[]): void;
+    replaceData(data: AngularInfinityChartDataInput): void;
+    setTheme(theme: AngularInfinityThemeInput): void;
+    registerPlugin(plugin: AngularInfinityChartPlugin): void;
+    getChart(): AngularInfinityChartPublicApi | null;
+    private ensureController;
+    private resolveHostElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InfinityChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InfinityChartComponent, "revive-infinity-chart", never, { "config": { "alias": "config"; "required": false; }; }, { "create": "create"; "ready": "ready"; "updated": "updated"; "resized": "resized"; "destroyed": "destroyed"; }, never, never, false, never>;
+}
+
+declare class InfinityChartDirective implements AfterViewInit, OnChanges, OnDestroy {
+    private static nextHostId;
+    config: AngularInfinityChartConfig;
+    create: EventEmitter<AngularInfinityChartEvent>;
+    ready: EventEmitter<AngularInfinityChartEvent>;
+    updated: EventEmitter<AngularInfinityChartEvent>;
+    resized: EventEmitter<AngularInfinityChartEvent>;
+    destroyed: EventEmitter<AngularInfinityChartEvent>;
+    hostId: string;
+    private controller;
+    private initialized;
+    private hooks;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    update(config: AngularInfinityChartConfig): Promise<void>;
+    resize(width?: number, height?: number): void;
+    updateSeries(series: AngularInfinitySeriesCollectionInput): void;
+    appendData(point: any): void;
+    appendBatch(points: any[]): void;
+    replaceData(data: AngularInfinityChartDataInput): void;
+    setTheme(theme: AngularInfinityThemeInput): void;
+    registerPlugin(plugin: AngularInfinityChartPlugin): void;
+    getChart(): AngularInfinityChartPublicApi | null;
+    private ensureController;
+    private resolveHostElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InfinityChartDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<InfinityChartDirective, "[reviveInfinityChart]", never, { "config": { "alias": "reviveInfinityChart"; "required": false; }; }, { "create": "create"; "ready": "ready"; "updated": "updated"; "resized": "resized"; "destroyed": "destroyed"; }, never, never, false, never>;
+}
+
+declare class InfinityChartService {
+    create(target: HTMLElement, config?: AngularInfinityChartConfig): AngularInfinityChartPublicApi;
+    load(type: string): Promise<void>;
+    preload(types: string[]): Promise<void>;
+    loadAll(): Promise<void>;
+    registerPlugin(plugin: AngularInfinityChartPlugin): void;
+    registerPack(pack: any): void;
+    destroy(chart: AngularInfinityChartPublicApi | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InfinityChartService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<InfinityChartService>;
+}
+
+declare class InfinityChartsModule {
+    static forRoot(): ModuleWithProviders<InfinityChartsModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InfinityChartsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<InfinityChartsModule, [typeof InfinityChartComponent, typeof InfinityChartDirective], never, [typeof InfinityChartComponent, typeof InfinityChartDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<InfinityChartsModule>;
+}
+
+export { InfinityChartComponent, InfinityChartDirective, InfinityChartService, InfinityChartsModule };
+export type { AngularInfinityChartConfig, AngularInfinityChartDataInput, AngularInfinityChartEvent, AngularInfinityChartPlugin, AngularInfinityChartPublicApi, AngularInfinityChartType, AngularInfinitySeriesCollectionInput, AngularInfinityThemeInput };

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

@@ -0,0 +1,325 @@
+.shell {
+  padding: 28px;
+  color: #0f172a;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
+  gap: 24px;
+}
+
+.hero-card,
+.panel,
+.sidebar-card {
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
+}
+
+.hero-card {
+  padding: 28px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(37, 99, 235, 0.08);
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+h1,
+h2,
+h3,
+p,
+pre {
+  margin-top: 0;
+}
+
+.hero-main h1 {
+  margin: 16px 0 12px;
+  font-size: 52px;
+  line-height: 0.95;
+  letter-spacing: -0.04em;
+}
+
+.hero-main p,
+.panel-header p,
+.api-card p,
+.demo-card p {
+  color: #475569;
+  line-height: 1.7;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 22px;
+}
+
+.feature {
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(248, 250, 252, 0.92);
+  color: #475569;
+  line-height: 1.6;
+}
+
+.feature strong {
+  display: block;
+  margin-bottom: 6px;
+  color: #0f172a;
+}
+
+.cta-row,
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.btn,
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 11px 16px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn,
+button {
+  background: linear-gradient(135deg, #38bdf8, #2563eb);
+  color: #ffffff;
+  font-weight: 700;
+}
+
+.btn.secondary,
+.ghost-button {
+  background: rgba(255, 255, 255, 0.92);
+  color: #0f172a;
+  border-color: rgba(15, 23, 42, 0.08);
+}
+
+.ghost-button {
+  padding: 8px 12px;
+}
+
+.step {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  gap: 14px;
+  margin-top: 16px;
+}
+
+.step-num {
+  display: inline-grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-weight: 700;
+}
+
+pre,
+.code {
+  overflow: auto;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: #0f172a;
+  color: #dbeafe;
+  line-height: 1.6;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 13px;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 24px;
+  margin-top: 28px;
+}
+
+.panels {
+  display: grid;
+  gap: 24px;
+}
+
+.panel {
+  padding: 24px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.panel-header h2 {
+  margin-bottom: 8px;
+}
+
+.demo-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.demo-card {
+  padding: 20px;
+  border-radius: 22px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: #f8fbff;
+}
+
+.chart-frame,
+.chart-slot,
+.service-slot {
+  display: block;
+  width: 100%;
+  min-height: 220px;
+  border-radius: 20px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(255, 255, 255, 0.98);
+  overflow: hidden;
+}
+
+.analytics-card,
+.service-shell {
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.analytics-card.is-dark {
+  background: linear-gradient(180deg, #111b2f, #091323);
+  border-color: rgba(148, 163, 184, 0.16);
+  color: #f8fbff;
+}
+
+.analytics-card.is-dark .analytics-head span {
+  color: #93a5be;
+}
+
+.analytics-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 16px;
+}
+
+.analytics-head span {
+  color: #64748b;
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.analytics-head strong {
+  font-size: 14px;
+}
+
+.service-shell {
+  min-height: 320px;
+}
+
+.service-slot {
+  min-height: 280px;
+}
+
+.api-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.api-card {
+  padding: 20px;
+  border-radius: 22px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: #f8fbff;
+}
+
+.sidebar {
+  display: grid;
+  gap: 24px;
+  align-content: start;
+}
+
+.sidebar-card {
+  padding: 22px;
+}
+
+.log-list {
+  display: grid;
+  gap: 10px;
+}
+
+.log-item {
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: rgba(248, 250, 252, 0.98);
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.release-meta {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: #334155;
+}
+
+.release-meta strong {
+  color: #0f172a;
+}
+
+@media (max-width: 1080px) {
+  .hero,
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  .api-grid,
+  .demo-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .shell {
+    padding: 16px;
+  }
+
+  .hero-main h1 {
+    font-size: 38px;
+  }
+
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+}