@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular
79 lines (78 loc) • 4.45 kB
TypeScript
import { EventEmitter, TemplateRef } from '@angular/core';
import { BaseChartComponent } from '../common/base-chart.component';
import { ColorHelper } from '../common/color.helper';
import { BoxChartMultiSeries, BoxChartSeries, IBoxModel, StringOrNumberOrDate } from '../models/chart-data.model';
import { ScaleLinear, ScaleBand } from 'd3-scale';
import { ViewDimensions } from '../common/types/view-dimension.interface';
import { LegendPosition, LegendOptions } from '../common/types/legend.model';
import * as i0 from "@angular/core";
export declare class BoxChartComponent extends BaseChartComponent {
/** Show or hide the legend. */
legend: boolean;
legendPosition: LegendPosition;
legendTitle: string;
/** I think it is better to handle legend options as single Input object of type ILegendOptions */
legendOptionsConfig: LegendOptions;
showGridLines: boolean;
xAxis: boolean;
yAxis: boolean;
showXAxisLabel: boolean;
showYAxisLabel: boolean;
roundDomains: boolean;
xAxisLabel: string;
yAxisLabel: string;
roundEdges: boolean;
strokeColor: string;
strokeWidth: number;
tooltipDisabled: boolean;
gradient: boolean;
wrapTicks: boolean;
select: EventEmitter<IBoxModel>;
activate: EventEmitter<IBoxModel>;
deactivate: EventEmitter<IBoxModel>;
tooltipTemplate: TemplateRef<any>;
/** Input Data, this came from Base Chart Component. */
results: BoxChartMultiSeries;
/** Chart Dimensions, this came from Base Chart Component. */
dims: ViewDimensions;
/** Color data. */
colors: ColorHelper;
/** Transform string css attribute for the chart container */
transform: string;
/** Chart Margins (For each side, counterclock wise). */
margin: [number, number, number, number];
/** Legend Options object to handle positioning, title, colors and domain. */
legendOptions: LegendOptions;
xScale: ScaleBand<string>;
yScale: ScaleLinear<number, number>;
xDomain: StringOrNumberOrDate[];
yDomain: number[];
seriesDomain: string[];
/** Chart X axis dimension. */
xAxisHeight: number;
/** Chart Y axis dimension. */
yAxisWidth: number;
ngOnChanges(): void;
trackBy(index: number, item: BoxChartSeries): StringOrNumberOrDate;
update(): void;
setColors(): void;
setScales(): void;
getXScale(domain: Array<string | number | Date>, width: number): ScaleBand<string>;
getYScale(domain: number[], height: number): ScaleLinear<number, number>;
getUniqueBoxChartXDomainValues(results: BoxChartMultiSeries): (string | number | Date)[];
getXDomain(): Array<string | number | Date>;
getYDomain(): number[];
getSeriesDomain(): string[];
updateYAxisWidth({ width }: {
width: any;
}): void;
updateXAxisHeight({ height }: {
height: any;
}): void;
onClick(data: IBoxModel): void;
onActivate(data: IBoxModel): void;
onDeactivate(data: IBoxModel): void;
private getLegendOptions;
static ɵfac: i0.ɵɵFactoryDeclaration<BoxChartComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BoxChartComponent, "ngx-charts-box-chart", never, { "legend": { "alias": "legend"; "required": false; }; "legendPosition": { "alias": "legendPosition"; "required": false; }; "legendTitle": { "alias": "legendTitle"; "required": false; }; "legendOptionsConfig": { "alias": "legendOptionsConfig"; "required": false; }; "showGridLines": { "alias": "showGridLines"; "required": false; }; "xAxis": { "alias": "xAxis"; "required": false; }; "yAxis": { "alias": "yAxis"; "required": false; }; "showXAxisLabel": { "alias": "showXAxisLabel"; "required": false; }; "showYAxisLabel": { "alias": "showYAxisLabel"; "required": false; }; "roundDomains": { "alias": "roundDomains"; "required": false; }; "xAxisLabel": { "alias": "xAxisLabel"; "required": false; }; "yAxisLabel": { "alias": "yAxisLabel"; "required": false; }; "roundEdges": { "alias": "roundEdges"; "required": false; }; "strokeColor": { "alias": "strokeColor"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "tooltipDisabled": { "alias": "tooltipDisabled"; "required": false; }; "gradient": { "alias": "gradient"; "required": false; }; "wrapTicks": { "alias": "wrapTicks"; "required": false; }; }, { "select": "select"; "activate": "activate"; "deactivate": "deactivate"; }, ["tooltipTemplate"], never, false, never>;
}