import * as i0 from '@angular/core'; import { SimpleChange, ElementRef, AfterViewInit, OnChanges } from '@angular/core'; import * as d3$1 from 'd3'; import * as rxjs from 'rxjs'; import * as i14 from '@angular/common'; interface IBarChartDataNode { title: string; value: number; } type TBarChartData = IBarChartDataNode[]; interface IBarChartOptions { chartTitle: string; width: number; height: number; margin: { top: number; right: number; bottom: number; left: number; }; transitionDuration: number; xAxisPadding: number; xAxisTitle: string; yAxisTitle: string; yAxisTicks: number; displayAxisLabels: boolean; labelTextWrapWidth: number; color: d3$1.ScaleOrdinal; } /** Chart component input changes. */ interface IChartInputChanges { data?: SimpleChange | null; options?: SimpleChange | null; } /** D3 chart base class. */ declare abstract class AppD3ChartBase { /** A chart id. */ abstract chartId: string; /** A chart data. */ abstract data: T; /** A chart options. */ abstract options: O; /** D3 chart view child reference. */ abstract readonly container?: ElementRef; /** The chart options constructor. */ protected abstract chartOptions(): O; /** Draws the chart. */ protected abstract drawChart(): void; } type TBarData = TBarChartData; type TBarOptions = Partial; /** The bar chart component. */ declare class AppBarChartComponent extends AppD3ChartBase implements AfterViewInit, OnChanges { private readonly doc; private readonly factory; /** The chart id. */ chartId: string; /** The chart data. */ data: TBarData; /** The chart options. */ options: TBarOptions; /** D3 chart view child reference. */ readonly container?: ElementRef; constructor(); /** The chart options constructor. */ protected chartOptions(): TBarOptions; /** Draws the chart. */ protected drawChart(): void; /** Actually draws the chart after the component view is initialized. */ ngAfterViewInit(): void; /** Redraws the chart on changes. */ ngOnChanges(changes: IChartInputChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class AppChartExamplesComponent { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Force directed chart graph domain. */ interface IForceDirectedGraphDomain { /** The index of the domain. */ index: number; /** The name of the domain. */ name: string; /** The value/weight of the domain. */ value: number; } /** Force directed chart graph entity. */ interface IForceDirectedGraphEntity { /** The index of the entity. */ index: number; /** The name of the entity. */ name: string; /** Domains the entity belongs to. */ domains: string[]; /** The image of the entity. */ img: string; /** The counter of links to other entities. */ linksCount: number; } /** Force directed chart data node. */ interface IForceDirectedChartDataNode extends d3$1.SimulationNodeDatum { /** The index of the data node. */ index: number; /** Domains the data node belongs to. */ domains?: string[]; /** The value/weight of the node. */ value?: number; /** The name of the node. */ name?: string; /** The image of the node. */ img?: string; /** The counter of links to other entities. */ linksCount?: number; } /** Force directed chart data. */ interface IForceDirectedChartData { domains: IForceDirectedGraphDomain[]; entities: IForceDirectedGraphEntity[]; links: Array>; nodes: IForceDirectedChartDataNode[]; } /** Force directed chart options. */ interface IForceDirectedChartOptions { /** The title of the chart. */ chartTitle: string; /** The width of the chart. */ width: number; /** The height of the chart. */ height: number; /** The modifier for calculatin position of the center of the chart. */ centerCalcMod: number; /** Configuration of the forces. */ charge: { strength: number; theta: number; distanceMax: number; }; distance: number; fontSize: number; collisionRadius: number; margin: { top: number; right: number; bottom: number; left: number; }; linkStrokeColor: string; linkStrokeWidth: number; labelTextWrapWidth: number; color: d3$1.ScaleOrdinal; nodeColor: string; nodeStrokeColor: string; nodeStrokeWidth: number; } type TForceData = IForceDirectedChartData; type TForceOptions = Partial; /** The force directed chart component. */ declare class AppForceDirectedChartComponent extends AppD3ChartBase implements AfterViewInit, OnChanges { private readonly doc; private readonly factory; /** The chart identifier. */ chartId: string; /** The chart data. */ data: TForceData; /** The chart options. */ options: TForceOptions; /** The chart container view child reference. */ readonly container?: ElementRef; constructor(); /** The chart options constructor. */ protected chartOptions(): TForceOptions; /** Draws the chart. */ protected drawChart(): void; /** Actually draws the chart after the component view is initialized. */ ngAfterViewInit(): void; /** Redraws the chart on changes. */ ngOnChanges(changes: IChartInputChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface IGaugeChartDataNode { key: string; y: number; } interface IGaugeChartOptions { /** The chart title */ chartTitle: string; /** The chart width for calculation of the outer radius */ width: number; /** The chart height for calculation of the outer radius */ height: number; /** The chart margins from the border of the container */ margin: { top: number; right: number; bottom: number; left: number; }; /** The inner radius of the chart */ innerRadius: number; /** The chart label offset relative to the outer border */ labelRadiusModifier: number; /** The chart label text wrap width */ labelTextWrapWidth: number; /** Whether to show labels next to the chart slices */ showLabels: boolean; /** Whether to show tooltips on chunk hover below the chart */ showTooltips: boolean; /** Transition duration configuration. Used mainly for the chart tooltips. */ transitionDuration: number; /** The color for the filled chunks */ color: string; /** The color for the empty chunks */ defaultColor: string; /** The value of the gauge chart */ value: number; /** The padding between slices in radians. Set to 0 to have a solid arc. */ padRad: number; /** The font size of the chart labels. */ labelFontSize: number; /** The font size of the chart value. */ valueFontSize: number; } type TGaugeData = IGaugeChartDataNode[]; type TGaugeOptions = Partial; /** The gauge chart component. */ declare class AppGaugeChartComponent extends AppD3ChartBase implements AfterViewInit, OnChanges { private readonly doc; private readonly factory; /** The chart id. */ chartId: string; /** The value of the gauge chart. */ value: number; /** The chart data. */ data: TGaugeData; /** The chart options. */ options: TGaugeOptions; /** D3 chart view child reference. */ readonly container?: ElementRef; constructor(); /** The chart options constructor. */ protected chartOptions(): TGaugeOptions; /** Draws the chart. */ protected drawChart(): void; /** Actually draws the chart after the component view is initialized. */ ngAfterViewInit(): void; /** Redraws the chart on changes. */ ngOnChanges(changes: IChartInputChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** The line chart data node. */ interface ILineChartDataNode { /** The X axis value. */ timestamp: number; /** The Y axis value. */ value: number; } /** The line chart data. */ type TLineChartData = ILineChartDataNode[]; /** * Date formats: * - default: `${dd}/${mm}/${yy} ${hour}:${minute}` * - 'dd/mm/yyyy': `${dd}/${mm}/${yyyy}` * - 'dd/mm/yy': `${dd}/${mm}/${yy}` * - 'mm/yyyy': `${mm}/${yyyy}` * - 'yyyy': `${yyyy}` */ type TDateFormat = 'default' | 'dd/mm/yyyy' | 'dd/mm/yy' | 'mm/yyyy' | 'yyyy'; /** The line chart options. */ interface ILineChartOptions { /** The chart title. */ chartTitle: string; /** The chart width. */ width: number; /** The chart height. */ height: number; /** The chart margins from the border of the container */ margin: { /** The top margin. */ top: number; /** The right margin. */ right: number; /** The bottom margin. */ bottom: number; /** The left margin. */ left: number; }; /** Transition duration configuration. Used mainly for the chart tooltips. */ transitionDuration: number; /** The radius of the chart dots (vertexes). */ dotRadius: number; /** The title of the X axis. */ xAxisTitle: string; /** The title of the Y axis. */ yAxisTitle: string; /** Axes ticks. */ ticks: { /** The X axis ticks. */ x: number; /** The Y axis ticks. */ y: number; }; /** Whether to display axes labels. */ displayAxisLabels: boolean; /** The date format for the X axis. */ dateFormat: TDateFormat; /** The chart label text wrap width */ labelTextWrapWidth: number; /** The color scale for the chart */ color: d3$1.ScaleOrdinal; } type TLineData = TLineChartData[]; type TLineOptions = Partial; /** The line chart component. */ declare class AppLineChartComponent extends AppD3ChartBase implements AfterViewInit, OnChanges { private readonly doc; private readonly factory; /** The chart id. */ chartId: string; /** The chart data. */ data: TLineData; /** Labels for the chart datasets. */ datasetLabels: string[]; /** The chart options. */ options: TLineOptions; /** D3 chart view child reference. */ readonly container?: ElementRef; constructor(); /** The chart options constructor. */ protected chartOptions(): TLineOptions; /** Draws the chart. */ protected drawChart(): void; /** Actually draws the chart after the component view is initialized. */ ngAfterViewInit(): void; /** Redraws the chart on changes. */ ngOnChanges(changes: IChartInputChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** The pie chart data node. */ interface IPieChartDataNode { /** The pie chart slice label. */ key: string; /** The pie chart slice value. */ y: number; } /** The pie chart options. */ interface IPieChartOptions { /** The chart title */ chartTitle: string; /** The chart width for calculation of the outer radius */ width: number; /** The chart height for calculation of the outer radius */ height: number; /** The chart margins from the border of the container */ margin: { top: number; right: number; bottom: number; left: number; }; /** The inner radius of the chart */ innerRadius: number; /** The chart label offset relative to the outer border */ labelRadiusModifier: number; /** The chart label text wrap width */ labelTextWrapWidth: number; /** Whether to show labels next to the chart slices */ showLabels: boolean; /** Transition duration configuration. Used mainly for the chart tooltips. */ transitionDuration: number; /** The color scale for the chart */ color: d3.ScaleOrdinal; } type TPieData = IPieChartDataNode[]; type TPieOptions = Partial; /** The pie chart component. */ declare class AppPieChartComponent extends AppD3ChartBase implements AfterViewInit, OnChanges { private readonly doc; private readonly factory; /** The chart id. */ chartId: string; /** The chart data. */ data: TPieData; /** The chart options. */ options: TPieOptions; /** D3 chart view child reference. */ readonly container?: ElementRef; constructor(); /** The chart options constructor. */ protected chartOptions(): TPieOptions; /** Draws the chart. */ protected drawChart(): void; /** Actually draws the chart after the component view is initialized. */ ngAfterViewInit(): void; /** Redraws the chart on changes. */ ngOnChanges(changes: IChartInputChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** The radar chart data node. */ interface IRadarChartDataNode { /** The radar chart axis name. */ axis: string; /** The radar chart axis value. */ value: number; /** The radar chart axis unit. */ unit: string; } /** The radar chart data. */ type TRadarChartData = IRadarChartDataNode[][]; /** The radar chart options. */ interface IRadarChartOptions { /** The chart title. */ chartTitle: string; /** The chart width. */ width: number; /** The chart height. */ height: number; /** The chart margins from the border of the container */ margin: { /** The top margin. */ top: number; /** The right margin. */ right: number; /** The botton margin. */ bottom: number; /** The left margin. */ left: number; }; maxValue: number; levels: number; lineFactor: number; labelFactor: number; opacityArea: number; /** The radius of the chart dots (vertexes). */ dotRadius: number; opacityCircles: number; strokeWidth: number; roundStrokes: boolean; /** Transition duration configuration. Used mainly for the chart tooltips. */ transitionDuration: number; /** The chart label text wrap width */ labelTextWrapWidth: number; /** The color scale for the chart */ color: d3$1.ScaleOrdinal; } type TRadarData = IRadarChartDataNode[][]; type TRadarOptions = Partial; /** The radar chart component. */ declare class AppRadarChartComponent extends AppD3ChartBase implements AfterViewInit, OnChanges { private readonly doc; private readonly factory; /** The chart id. */ chartId: string; /** The chart data. */ data: TRadarData; /** The chart options. */ options: TRadarOptions; /** D3 chart view child reference. */ readonly container?: ElementRef; constructor(); /** The chart options constructor. */ protected chartOptions(): TRadarOptions; /** Draws the chart. */ protected drawChart(): void; /** Actually draws the chart after the component view is initialized. */ ngAfterViewInit(): void; /** Redraws the chart on changes. */ ngOnChanges(changes: IChartInputChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Line chart example. */ declare class AppChartExamplesLineComponent { private readonly breakpointObserver; /** The chart data. */ private get chartData(); /** The breakpoint observer stream. */ private readonly breakpoint$; /** The chart configuration stream. */ readonly chartConfig$: rxjs.Observable<{ data: TLineChartData[]; datasetLabels: string[]; options: Partial; optionsDateDdMmYy: Partial; optionsDateDdMmYyyy: Partial; optionsDateMmYyyy: Partial; }>; /** * Random value generator. * @param range value range */ private randomValue; /** * Random timestamp generator. * @param range value range */ private randomTimestamp; /** * Example line chart options. * @param dateFormat date format */ private lineChartOptions; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Radar chart example. */ declare class AppChartExamplesRadaraComponent { private readonly breakpointObserver; /** The chart data. */ private get chartData(); /** The chart options. */ private get chartOptions(); /** The breakpoint observer stream. */ private readonly breakpoint$; /** The chart configuration stream. */ readonly chartConfig$: rxjs.Observable<{ data: IRadarChartDataNode[][]; options: Partial; }>; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Bar chart example. */ declare class AppChartExamplesBarComponent { private readonly breakpointObserver; /** The chart data. */ private get chartData(); /** The chart options. */ private get chartOptions(); /** The breakpoint observer stream. */ private readonly breakpoint$; /** The chart configuration stream. */ readonly chartConfig$: rxjs.Observable<{ data: TBarChartData; options: Partial; }>; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Pie chart example. */ declare class AppChartExamplesPieComponent { private readonly breakpointObserver; /** The chart data. */ private get chartData(); /** The chart options. */ private get chartOptions(); /** The breakpoint observer stream. */ private readonly breakpoint$; /** The chart configuration stream. */ readonly chartConfig$: rxjs.Observable<{ data: IPieChartDataNode[]; options: { first: Partial; second: Partial; }; }>; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Gauge chart example. */ declare class AppChartExamplesGaugeComponent { private readonly breakpointObserver; /** The chat values. */ value: { first: number; second: number; third: number; }; /** The chart data. */ private get chartData(); /** * Example gauge chart options. */ private get chartOptions(); /** The breakpoint observer stream. */ private readonly breakpoint$; /** The chart configuration stream. */ readonly chartConfig$: rxjs.Observable<{ data: { first: IGaugeChartDataNode[]; second: IGaugeChartDataNode[]; }; options: { first: Partial; second: Partial; third: Partial; fourth: Partial; }; }>; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Force directed chart example. */ declare class AppChartExamplesForceDirectedComponent { private readonly breakpointObserver; /** Sample chart data. */ private readonly value; /** The chart data. */ private get chartData(); /** The chart options. */ private get chartOptions(); /** the breakpoint observer stream. */ private readonly breakpoint$; /** The chart configuration stream. */ readonly chartConfig$: rxjs.Observable<{ data: IForceDirectedChartData; options: Partial; }>; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class AppD3ChartsModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * The bar chart default configuration. */ declare const defaultBarChartConfig: IBarChartOptions; /** * Draws the bar chart. * @param container the chart container * @param data the chart data * @param options the chart options * @returns the chart configuration */ declare const drawBarChart: (container: ElementRef, data: TBarChartData, options?: Partial) => IBarChartOptions; /** * The force directed chart default configuration. */ declare const defaultForceDirectedChartConfig: IForceDirectedChartOptions; /** * Draws the force directed chart. * @param container the chart container * @param data the chart data * @param options the chart options * @returns the chart configuration */ declare const drawForceDirectedChart: (container: ElementRef, data: IForceDirectedChartData, options?: Partial) => IForceDirectedChartOptions; /** * The gauge chart default configuration. */ declare const defaultGaugeChartConfig: IGaugeChartOptions; /** * Draws the gauge chart. * @param container the chart container * @param data the chart data * @param options the chart options * @returns the chart configuration */ declare const drawGaugeChart: (container: ElementRef, data: IGaugeChartDataNode[], options?: Partial) => IGaugeChartOptions; /** The line chart default configuration. */ declare const defaultLineChartConfig: ILineChartOptions; /** * Draws the line chart. * @param container the chart container * @param data the chart data * @param options the chart options * @returns the chart configuration */ declare const drawLineChart: (container: ElementRef, data: TLineChartData[], datasetLabels: string[], options?: Partial) => ILineChartOptions; /** * The pie chart default configuration. */ declare const defaultPieChartConfig: IPieChartOptions; /** * Draws the pie chart. * @param container the chart container * @param data the chart data * @param options the chart options * @returns the chart configuration */ declare const drawPieChart: (container: ElementRef, data: IPieChartDataNode[], options?: Partial) => IPieChartOptions; /** * The radar chart default configuration. */ declare const defaultRadarChartConfig: IRadarChartOptions; /** * Draws the radar chart. * @param container the chart container * @param data the chart data * @param options the chart options * @returns the hart configuration */ declare const drawRadarChart: (container: ElementRef, data: TRadarChartData, options?: Partial) => IRadarChartOptions; export { AppBarChartComponent, AppChartExamplesComponent, AppD3ChartsModule, AppForceDirectedChartComponent, AppGaugeChartComponent, AppLineChartComponent, AppPieChartComponent, AppRadarChartComponent, defaultBarChartConfig, defaultForceDirectedChartConfig, defaultGaugeChartConfig, defaultLineChartConfig, defaultPieChartConfig, defaultRadarChartConfig, drawBarChart, drawForceDirectedChart, drawGaugeChart, drawLineChart, drawPieChart, drawRadarChart }; export type { IBarChartDataNode, IBarChartOptions, IChartInputChanges, IForceDirectedChartData, IForceDirectedChartDataNode, IForceDirectedChartOptions, IForceDirectedGraphDomain, IForceDirectedGraphEntity, IGaugeChartDataNode, IGaugeChartOptions, ILineChartDataNode, ILineChartOptions, IPieChartDataNode, IPieChartOptions, IRadarChartDataNode, IRadarChartOptions, TBarChartData, TDateFormat, TLineChartData, TRadarChartData };