/**
* RealReport-Chart 라이브러리 클래스 모델의 최상위 base 클래스.
*
*
* @see [개발 가이드](/guide/dev-guide)
* @see [RealChart 개요](/guide)
*/
declare abstract class RcObject {
static destroy(obj: RcObject): null;
private $_hash;
private $_destroyed;
private $_destroying;
constructor(noHash?: boolean);
/**
* 객체가 소유한 참조 등을 해제하고 null을 리턴한다.
*
* ```
* model = model.destroy();
* ```
*
* @returns null
*/
destroy(): null;
protected _doDestroy(): void;
get destroying(): boolean;
get orphaned(): boolean;
get hash(): string;
isMe(hash: string): boolean;
toString(): string;
/**
* @internal
*
* template param으로부터 생성되는 값은 문자열일 수 있다.
*/
toBool(v: any): boolean;
toNum(v: any, def?: number): number;
}
/**
* @internal
*/
declare abstract class EventProvider extends RcObject {
private _listeners;
_addListener(listener: T): void;
_removeListener(listener: T): void;
/**
* event로 지정한 함수가 정의된 모든 리스너에 대해 실행한다.
* 리스너 scope으로 실행하고, 첫번째 매개변수로 이 객체가 전달된다.
* 다만, 리스너들 중 하나라도 undefined가 아닌 값을 리턴하면,
* 그 값을 리턴하면서 멈춘다.
*/
protected _fireEvent(event: string, ...args: any[]): any;
}
interface IChartDataListener {
onDataValueChanged?(data: DataObject, row: number, field: string, value: any, oldValue: any): void;
onDataRowUpdated?(data: DataObject, row: number, oldValues: any): void;
onDataRowAdded?(data: DataObject, row: number): void;
onDataRowDeleted?(data: DataObject, row: number): void;
onDataChanged?(data: DataObject): void;
}
/**
* 차트 생성 옵션들.
*/
interface ChartDataOptions {
/**
* 배열로 row 값들이 지정될 때, 각 항목에 해당되는 필드 이름들.
* 이 이름들을 속성으로 갖는 json 객체로 저장된다.
*
* 기본값은 ['x', 'y', 'z'];
*/
fields?: string[];
/**
* row가 단일값일 때 필드 이름.\
* 이 필드 이름 속성을 갖는 json 객체로 저장된다.
*
* 기본값은 'y'.
*
* @config
*/
field?: string;
}
/**
* @internal
* 차트 데이터 모델.
*/
declare class DataObject extends EventProvider {
private _rows;
private _fields;
private _field;
private _fieldMap;
constructor(options: ChartDataOptions, rows: any[]);
private $_buildOptions;
/**
* 행 수.
*/
get rowCount(): number;
_internalValues(): any[];
private $_readRow;
/**
* 지정한 행의 필드 값을 리턴한다.
*
* ```js
* console.log(data.getValue(0, 'name'));
* ```
*
* @param row 행 번호
* @param field 필드 이름
* @returns 필드 값
*/
getValue(row: number, field: string): any;
/**
* 지정한 행의 필드 값을 변경한다.
* 이 데이터에 연결된 시리즈의 해당 데이터포인트의 값이 변경된다.
*
* ```js
* const {row, field} = getField();
* data.setValue(row, field, data.getValue(row, field) + 1);
* ```
*
* @param row 행 번호
* @param field 필드 이름
*/
setValue(row: number, field: string, value: any): void;
getValues(field: string, fromRow?: number, toRow?: number): any[];
getRow(row: number): object;
/**
* 지정한 필드 값 목록으로 구성된 신규 행을 지정한 위치에 추가한다.
* 이 데이터에 연결된 시리즈의 데이터포인트가 추가된다.
*
* ```js
* data.addRow({
* field1: 'value1',
* field2: 123,
* ...
* });
* ```
*
* @param values 필드 값 목록.
* @param row 행 번호. 기본값 -1. 0보다 작은 값이면 마지막 행 다음에 추가한다.
*/
addRow(values: any, row: number): void;
/**
* 지정한 위치의 행이 삭제된다.
* 이 데이터에 연결된 시리즈의 해당 데이터포인트가 제거된다.
*
* ```js
* data.deleteRow(data.rowCount - 1);
* ```
*
* @param row 행 번호. 기본값 -1. 0보다 작은 값이면 마지막 행이 삭제된다.
*/
deleteRow(row: number): void;
protected _checkRow(row: number): void;
protected _changed(): void;
}
declare class ChartDataCollection {
private _map;
get(name: string): DataObject;
load(source: any): void;
}
/** @internal */
declare class Point {
x: number;
y: number;
static empty(): Point;
static create(x?: number, y?: number): Point;
constructor(x?: number, y?: number);
}
declare class Size {
width: number;
height: number;
static empty(): Size;
static create(w?: number, h?: number): Size;
constructor(width?: number, height?: number);
}
/**
* @internal
*/
declare const PI_2: number;
declare const ORG_ANGLE: number;
/**
* @internal
*/
declare const RAD_DEG: number;
/**
* @internal
*/
declare function fixnum(value: number): number;
declare function toStr(value: any): string;
/**
* @internal
*/
declare function pixel(v: number): string;
type Path = string | any[];
/**
* 123, '10%' 형식으로 크기를 지정한다.
*/
type PercentSize = string | number;
interface IPercentSize {
size: number;
fixed: boolean;
}
/**
* @internal
*/
declare function parsePercentSize(sv: PercentSize, enableNull: boolean, def?: number): IPercentSize;
/**
* @internal
*/
declare function calcPercent(size: IPercentSize, domain: number, def?: number): number;
/**
* 수평 정렬.
* @enum
*/
declare const _Align: {
/**
* 왼쪽으로 정렬한다.
*/
readonly LEFT: "left";
/**
* 영역 가운데로 정렬한다.
*/
readonly CENTER: "center";
/**
* 오른쪽으로 정렬한다.
*/
readonly RIGHT: "right";
};
/** @dummy */
type Align = typeof _Align[keyof typeof _Align];
/**
* 수직 정렬.
* @enum
*/
declare const _VerticalAlign: {
/** @config */
readonly TOP: "top";
/** @config */
readonly MIDDLE: "middle";
/** @config */
readonly BOTTOM: "bottom";
};
/** @dummy */
type VerticalAlign = typeof _VerticalAlign[keyof typeof _VerticalAlign];
/**
* SVG 스타일 속성.
* {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute SVG 속성}을 참조한다.
*/
interface SVGStyles {
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill fill} 스타일 속성.
*/
fill?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity fill-opacity} 스타일 속성.
*/
fillOpacity?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke stroke} 스타일 속성.
*/
stroke?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width stroke-width} 스타일 속성.
*/
strokeWidth?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray} 스타일 속성.
*/
strokeDasharray?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family font-family} 스타일 속성.
*/
fontFamily?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size font-size} 스타일 속성.
*/
fontSize?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight font-weight} 스타일 속성.
*/
fontWeight?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style font-style} 스타일 속성.
*/
fontStyle?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx rx} 스타일 속성.
* {@page config.seires.bar 'bar'} 시리즈의 데이터포인트 bar의 모서리를 지정하는 데 사용된다.
*/
rx?: string;
/**
* **SVG에 적용되는 정식 css style 속성이 아니다.**
* 데이터포인트 라벨등 몇 요소의 배경 간격 설정으로 사용할 수 있다.
*/
padding?: string;
/**
* 텍스트 정렬을 지정한다.
* **SVG에 적용되는 정식 css style 속성이 아니다.**
* 즉, HTML이나 realchart-style.css 등의 외부 css 파일에서 사용할 수 없고,
* RealChart 내부에서 {@page config.title} 등의 inline 스타일 속성으로 지정할 수 있다.
*
* ```js
* const config = {
* subtitle: {
* style: {
* textAlign: 'left',
* },
* },
* };
* ```
*/
textAlign?: Align;
}
/** @dummy */
type SVGStyleOrClass = SVGStyles | string;
/**
* 텍스트 표시 효과.
* @enum
*/
declare const _ChartTextEffect: {
/**
* 효과 없음.
*/
readonly NONE: "none";
/**
* 텍스트 색상과 대조되는 색상으로 텍스트 외곽을 구분 표시한다.
*/
readonly OUTLINE: "outline";
/**
* 텍스트 배경 상자를 표시한다.
* 배경 상자에 {@page backgroundStyle}이 적용된다.
* 스타일이 적용되지 않으면 기본 'rct-text-background'가 적용된다.
*/
readonly BACKGROUND: "background";
};
/** @dummy */
type ChartTextEffect = typeof _ChartTextEffect[keyof typeof _ChartTextEffect];
/**
* @enum
*/
declare const _ChartTextOverflow: {
readonly CLIP: "clip";
readonly ELLIPSIS: "ellipsis";
readonly WRAP: "wrap";
};
/** @dummy */
type ChartTextOverflow = typeof _ChartTextOverflow[keyof typeof _ChartTextOverflow];
interface IMinMax {
min: number;
max: number;
}
interface ISides {
left: number;
right: number;
top: number;
bottom: number;
horz?: number;
vert?: number;
}
interface ISides {
left: number;
right: number;
top: number;
bottom: number;
horz?: number;
vert?: number;
}
/**
* @enum
*/
declare const _AlignBase: {
/**
* @config
*/
readonly CHART: "chart";
/**
* @config
*/
readonly BODY: "body";
/**
* 상위 모델이 존재하는 경우 상위 모델 영역 기준.\
* 상위가 없으면 기본값(대부분 'body')과 동일.
* ex) subtitle인 경우 title 기준.
*
* @config
*/
readonly PARENT: "parent";
};
/** @dummy */
type AlignBase = typeof _AlignBase[keyof typeof _AlignBase];
/**
* {@page config.base.series#viewRanges} 등에 설정할 수 있는 값 범위 정보.
* 시작, 끝 값과 영역에 표시할 색상 및 label을 지정한다.
* {@page config.base.series#viewRanges}에는 이 설정 객체 배열로 지정한다.
*/
interface ValueRange {
/**
*/
fromValue?: number;
/**
*/
toValue?: number;
/**
*/
color: string;
/**
*/
label?: string;
/**
*/
style?: SVGStyleOrClass;
/**
*/
areaStyle?: SVGStyleOrClass;
}
/**
* {@page config.base.series#viewRanges}에 설정할 수 있는 값 범위 목록.
*/
interface ValueRangeList {
/**
*/
fromValue?: number;
/**
*/
toValue?: number;
/**
*/
steps?: number[];
/**
*/
colors: string[];
/**
*/
labels?: string[];
/**
*/
styles?: SVGStyleOrClass[];
/**
*/
areaStyles?: SVGStyleOrClass[];
}
/**
* @internal
* endValue는 포함되지 않는다. 즉, startValue <= v < endValue.
* fromValue를 지정하면 이전 range의 toValue를 fromValue로 설정한다.
* 이전 범위가 없으면 min으로 지정된다.
* toValue가 지정되지 않으면 max로 지정된다.
* color가 설정되지 않거나, fromValue와 toValue가 같은 범위는 포힘시키지 않는다.
* fromValue를 기준으로 정렬한다.
*/
declare const buildValueRanges: (source: ValueRange[] | ValueRangeList, min: number, max: number, inclusive?: boolean, strict?: boolean, fill?: boolean, color?: string) => ValueRange[];
/**
* 색상 목록에서 색을 가져오는 방식.
* @enum
*/
declare const _PaletteMode: {
/**
* 순서대로 가져오고 끝에 도달하면 처음으로 돌아간다.
*
* @config
*/
readonly NORMAL: "normal";
/**
* 첫 색상을 가져오기 전 항목들을 섞는다.
*
* @config
*/
readonly SHUFFLE: "shuffle";
/**
* 임의 위치의 색상을 가져온다.
*
* @config
*/
readonly RANDOM: "random";
};
/** @dummy */
type PaletteMode = typeof _PaletteMode[keyof typeof _PaletteMode];
/**
* 시리즈 load animation 타입.
* @enum
*/
declare const _SeriesLoadAnimation: {
readonly DEFAULT: "default";
readonly REVEAL: "reveal";
readonly GROW: "grow";
readonly SPREAD: "spread";
readonly FADEIN: "fadein";
};
/** @dummy */
type SeriesLoadAnimation = typeof _SeriesLoadAnimation[keyof typeof _SeriesLoadAnimation];
/**
* @enum
*/
declare const _WritingMode: {
/** @config */
readonly HORIZONTAL_TB: "horizontal-tb";
/** @config */
readonly VERTICAL_LR: "vertical-lr";
/** @config */
readonly VERTICAL_RL: "vertical-rl";
};
/** @dummy */
type WritingMode = typeof _WritingMode[keyof typeof _WritingMode];
/**
* @enum
*/
declare const _TextOrientation: {
/** @config */
readonly MIXED: "mixed";
/** @config */
readonly UPRIGHT: "upright";
};
/** @dummy */
type TextOrientation = typeof _TextOrientation[keyof typeof _TextOrientation];
/**
*/
interface ConfigObject {
/**
*/
[key: string]: any;
}
/**
*/
interface ChartItemOptions {
/**
* 표시 여부.
*
* @default true
*/
visible?: boolean;
/**
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
*/
style?: SVGStyleOrClass;
}
/**
*/
interface ChartTextOptions extends ChartItemOptions {
/**
* 텍스트 표시 효과.
*
* @default 'none'
*/
effect?: ChartTextEffect;
/**
* {@page autoContrast}가 true이고 밝게 표시할 때 적용되는
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
lightStyle?: SVGStyleOrClass;
/**
* {@page autoContrast}가 true이고 어둡게 표시할 때 적용되는
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
darkStyle?: SVGStyleOrClass;
/**
* {@page effect}가 'background'일 때 배경에 적용되는
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 텍스트가 data point 내부에 표시되는 경우 포인트 배경 색상과 대조되도록 표시한다.
* 밝게 표시할 때는 {@page lightStyle}을 적용하고,
* 어둡게 표시할 때는 {@page darkStyle}이 적용된다.
* lightStyle이 지정되지 않으면 'rct-text-light' 클래스 셀렉터가,
* darkStyle이 지정되지 않으면 'rct-text-dark' 클래스 셀렉터가 기본 적용된다.
*
* @default true
*/
autoContrast?: boolean;
/**
* {@page effect}가 'outline'일 때 외곽 택스트의 외곽선 두께.
*
* @default 2
*/
outlineThickness?: number;
/**
* label 문자열 앞에 추가되는 문자열.
*/
prefix?: string;
/**
* label 문자열 끝에 추가되는 문자열.
*/
suffix?: string;
/**
* 축의 tick 간격이 1000 이상인 큰 수를 표시할 때
* 이 속성에 지정한 symbol을 이용해서 축약형으로 표시한다.
*
* @default 'k,M,G,T,P,E'
*/
numberSymbols?: string;
/**
* label이 숫자일 때 표시 형식.
*
* @default '#,##0.#'
*/
numberFormat?: string;
/**
* Text 형식.
*/
text?: string;
/**
* 텍스트 행의 높이를 계산되는 높이와 다르게 표시되도록 지정한다.
* 1이면 계산된 높이와 동일하게 표시된다.
* 지정하지 않으면 계산된 값.
*/
lineHeight?: number;
}
/**
* @enum
*/
declare const _IconPosition: {
readonly DEFAULT: "default";
readonly LEFT: "left";
readonly RIGHT: "right";
readonly TOP: "top";
readonly BOTTOM: "bottom";
};
/** @dummy */
type IconPosition = typeof _IconPosition[keyof typeof _IconPosition];
/**
*/
interface IconedTextOptions extends ChartTextOptions {
/**
* 이이콘 표시 위치
*
* @default 'default'
*/
iconPosition?: IconPosition;
/**
* 아이콘에 사용할 이미지 목록
* assets에 지정한 이미지 목록을 id 값으로 불러와 사용한다.
* 이미지 목록이 없으면, 대신 iconRoot 속성 값을 사용하여 아이콘 경로를 설정한다.
*/
imageList?: string;
/**
* 아이콘 이미지의 URL을 지정할 때 사용하는 기본 경로를 설정
* 아이콘 URL을 구성하는 데 필요한 루트 경로를 제공하며, 여러 아이콘의 상대 경로를 설정할 때 유용하다.
*/
iconRoot?: string;
/**
* 아이콘과 텍스트 사이의 간격.
*
* @default 2
*/
iconGap?: number;
/**
* 아이콘 이미지 너비.
*/
iconWidth?: number;
/**
* 아이콘 이미지 높이
* 지정하지 않으면 16 픽셀로 설정된다.
*/
iconHeight?: number;
}
/**
* 데이터포인트 뷰가 {@page config.base.series#onPointClick 클릭}될 때,
* 마우스 {@page config.base.series#onPointHover hover}될 때,
* 또는 {@page config.base.series#pointStyleCallback 동적 스타일}을 리턴하는 콜백이나 이벤트 등의 매개변수로 사용된다.
* {@page config.base.series#onPointHover 콜백}의 매개변수로 사용된다.
*/
interface DataPointCallbackArgs {
/**
* RealChart의 공개 {@page api.Chart} 모델
*/
chart: object;
/**
*/
series: object;
/**
*/
count: number;
/**
*/
vcount: number;
/**
*/
yMin: number;
/**
*/
yMax: number;
/**
*/
xMin: number;
/**
*/
xMax: number;
/**
*/
zMin: number;
/**
*/
zMax: number;
/**
*/
index: number;
/**
*/
vindex: number;
/**
*/
x: any;
/**
*/
y: any;
/**
*/
z: any;
/**
*/
xValue: any;
/**
*/
yValue: any;
/**
*/
zValue: any;
/**
*/
labelIndex: number;
/**
*/
source: any;
}
/**
* 어노테이션 배치 기준.
* [주의]body에 설정된 annoation에는 적용되지 않는다.
* @enum
*/
declare const _AnnotationScope: {
/**
* container에서 padding을 적용한 영역을 기준으로 표시한다.
*
* @config
*/
readonly CHART: "chart";
/**
* container 전체 영역을 기준으로 표시한다.
*
* @config
*/
readonly CONTAINER: "container";
};
/** @dummy */
type AnnotationScope = typeof _AnnotationScope[keyof typeof _AnnotationScope];
interface AnnotationAnimationOptions {
type: string;
duration?: number;
}
/**
* 차트 {@page config.base.series 시리즈}나 {@page config.base.gauge 게이지}로
* 표현이 부족하거나 특별히 강조할 내용이 있을 때,
* 보조로 표시할 수 있는 {@page config.annotation.text 텍스트}나
* {@page config.annotation.image 이미지} 또는 {@page config.annotation.shape 도형}.
*
* @config chart.annotation[base]
*/
interface AnnotationOptions extends ChartItemOptions {
/**
*/
type?: AnnotationType;
/**
* true로 지정하면 시리즈나 게이지들 위에 표시된다.
*
* @default false
*/
front?: boolean;
/**
* 어노테이션 이름.
* 동적으로 어노테이션을 다루기 위해서는 반드시 지정해야 한다.
*
* @default false
*/
name?: string;
/**
* 어노테이션 배치 기준이 되는 차트 구성 요소.
* 현재, 같은 영역(body 혹은 chart)에 포함된 다른 어노테이션이나 {@page config.base.gauge 게이지} {@page name 이름}을 지정할 수 있다.
*/
anchor?: string;
/**
* 수평 배치.
*
* @default 'left' anchor가 지정되면 'center', 아니면 'left'
*/
align?: Align;
/**
* 수직 배치.
*
* @default top
*/
verticalAlign?: VerticalAlign;
/**
* {@page align}과 {@page verticalAlign}으로 지정된 위치에서 실제 표시될 위치의 수평 간격.
* 값이 양수일 때, {@page anchor}가 지정된 경우 anchor 아이템으 밖으로 멀어지고, 아니면 영역 경계 안쪽으로 멀어진다.
* 또, {@page anchor}가 지정된 경우 **'0.5w'** 등으로 이 어노테이션의 너비를 기준으로 한 크기로 지정할 수 있다.
*
* @default 0
*/
offsetX?: number | string;
/**
* {@page align}과 {@page verticalAlign}으로 지정된 위치에서 실제 표시될 위치의 수직 간격.
* 값이 양수일 때, {@page anchor}가 지정된 경우 anchor 아이템으 밖으로 멀어지고, 아니면 영역 경계 안쪽으로 멀어진다.
* 또, {@page anchor}가 지정된 경우 **'0.5h'** 처럼 이 어노테이션의 너비를 기준으로 한 크기로 지정할 수 있다.
*
* @default 0
*/
offsetY?: number | string;
/**
* 회전 각도.
* 0 ~ 360 사이의 값으로 지정한다.
*/
rotation?: number;
/**
* 어노테이션 배치 기준.
* [주의]body에 설정된 annoation에는 적용되지 않는다.
*
* @default 'chart'
*/
scope?: AnnotationScope;
/**
* 배경 스타일.
* 경계 및 배경 색, padding 스타일을 지정할 수 있다.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* body의 annotation으로 설정된 경우,
* true로 지정하면 상위 영역을 벗어난 부분도 표시되게 한다.
*/
noClip?: boolean;
/**
* body 어노테이션일 경우,
* x 축을 기준으로 지정하는 수평(inverted일 때 수직) 위치.
* chart에 지정된 어노테이션에서는 무시된다.
*/
x1?: number | Date;
/**
* body 어노테이션일 경우,
* x 축을 기준으로 지정하는 수평(inverted일 때 수직) 위치.
* chart에 지정된 어노테이션에서는 무시된다.
*/
x2?: number | Date;
/**
* body 어노테이션일 경우,
* y 축을 기준으로 지정하는 수직(inverted일 때 수평) 위치.
* chart에 지정된 어노테이션에서는 무시된다.
*/
y1?: number | Date;
/**
* body 어노테이션일 경우,
* y 축을 기준으로 지정하는 수직(inverted일 때 수평) 위치.
* chart에 지정된 어노테이션에서는 무시된다.
*/
y2?: number | Date;
/**
* Annotation 너비.
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.
*/
width?: PercentSize;
/**
* Annotation 높이.
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.
*/
height?: PercentSize;
}
declare const ImageAnnotationType = "image";
/**
* 이미지 어노테이션.
* {@page op.AnnotationOptions#type}은 'image'이다.
*
* // TODO #fiddle annotation/image-annotation Image Annotation
* @css 'rct-image-annotation'
* @config chart.annotation[type=image]
*/
interface ImageAnnotationOptions extends AnnotationOptions {
/**
*/
type?: typeof ImageAnnotationType;
/**
* @override
*
* true로 설정되고 {@page url}이 설정된 경우에만 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 이미지 경로.
*
*/
imageUrl?: string;
}
declare const ShapeAnnotationType = "shape";
/**
* @enum
*/
declare const _ShapeAnnotationShape: {
/**
* 원
*/
readonly CIRCLE: "circle";
/**
* 다아이몬드
*/
readonly DIAMOND: "diamond";
/**
* 정사각형
*/
readonly SQUARE: "square";
/**
* 삼각형
*/
readonly TRIANGLE: "triangle";
/**
* 별 모양
*/
readonly STAR: "star";
/**
* 역삼각형
*/
readonly ITRIANGLE: "itriangle";
/**
* 직사각형
*/
readonly RECTANGLE: "rectangle";
/**
* 수직선
* @config
*/
readonly VLINE: "vline";
/**
* 수평선
* @config
*/
readonly HLINE: "hline";
/**
* 직선
* @config
*/
readonly LINE: "line";
};
/** @dummy */
type ShapeAnnotationShape = typeof _ShapeAnnotationShape[keyof typeof _ShapeAnnotationShape];
/**
* Shape 어노테이션.
* {@page op.AnnotationOptions#type}은 'shape'이다.
* {@page shape} 속성에 표시할 도형 모양을 지정하거나,
* {@page path}에 SVG path를 직접 지정할 수 있다.
*
* // TODO #fiddle annotation/shape-annotation Shape Annotation
* @css 'rct-shape-annotation'
* @config chart.annotation[type=shape]
*/
interface ShapeAnnotationOptions extends AnnotationOptions {
/**
*/
type?: typeof ShapeAnnotationType;
/**
* @override
*
* 64
*/
width?: number;
/**
* @override
*
* 64
*/
height?: number;
/**
* Shape 종류.
*
* @default 'square'
*/
shape?: ShapeAnnotationShape;
/**
* Shape path.
* 이 속성이 지정되면 {@page shape}는 무시된다.
*/
path?: string;
/**
*/
series?: string;
/**
*/
xRange?: number[];
/**
*/
yRange?: number[];
}
declare const TextAnnotationType = "text";
/**
* 텍스트 어노테이션.
* {@page op.AnnotationOptions#type}은 'text'이다.
*
* // TODO #fiddle annotation/text-annotation Text Annotation
* @css 'rct-text-annotation'
* @config chart.annotation[type=text]
*/
interface TextAnnotationOptions extends AnnotationOptions {
/**
*/
type?: typeof TextAnnotationType;
/**
* @override
*
* true로 설정되고 {@page text}가 설정된 경우에만 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 표시할 텍스트.
*
* @default 'Text'
*/
text?: string;
/**
* {@page text}에 동적으로 전달되는 값이 숫자일 때 사용되는 표시 형식.
*
*/
numberFormat?: string;
/**
* {@page text}에 동적으로 전달되는 값이 Date일 때 사용되는 표시 형식.
*
*/
timeFormat?: string;
/**
* 텍스트를 가로 또는 세로로 배치할지 여부와 블록이 진행되는 방향을 지정한다.
*
* @config
*/
writingMode?: WritingMode;
/**
* 텍스트 문자 방향을 지정한다.
* 세로 모드의 텍스트에만 적용된다.
*
* @config
*/
textOrientation?: TextOrientation;
}
/** @enum */
declare const AnnotationTypes: {
readonly ImageAnnotationType: "image";
readonly ShapeAnnotationType: "shape";
readonly TextAnnotationType: "text";
};
/** @dummy */
type AnnotationType = typeof AnnotationTypes[keyof typeof AnnotationTypes];
/** @dummy */
type AnnotationOptionsType = ImageAnnotationOptions | ShapeAnnotationOptions | TextAnnotationOptions;
interface IRect {
x: number;
y: number;
width: number;
height: number;
}
declare const createRect: (x: number, y: number, width: number, height: number) => IRect;
declare function rectToSize(r: IRect): Size;
declare function isEmptyRect(r: IRect): boolean;
/**
* @enum
*/
declare const _AssetType: {
/** @config */
readonly COLORS: "colors";
/** @config */
readonly IMAGES: "images";
/** @config */
readonly LINEARGREADIENT: "lineargradient";
/** @config */
readonly RADIALGRADIENT: "radialgradient";
};
/** @dummy */
type AssetType = typeof _AssetType[keyof typeof _AssetType];
/**
*/
interface AssetItemOptions {
type?: AssetType;
/**
* 에셋 id.
* 시리즈나 축에서 이 에셋 항목을 참조할 때 사용하는 키로서
* 차트 내에서 유일한 문자열로 반드시 지정해야 한다.
*
*/
id: string;
}
/**
*/
interface GradientOptions extends AssetItemOptions {
/**
* 색을 배열로 지정하거나,
* 끝 값을 'white'로 전제하고 시작 색 값 하나만 지정할 수 있다.
*
*/
color: string[] | string;
/**
* 0에서 1사이의 불투명도.
* 지정하지 않거나 타당한 값이 아니면 1(완전 불투명)로 적용한다.
* 또는, 불투명도를 배열로 지정할 수도 있다.
*
*/
opacity?: number[] | number;
}
/**
* 시작점과 끝점 사이에 색상이 서서히 변경되는 효과를 표시한다.
* 채우기 색이나 선 색으로 사용될 수 있다.
*
* @config chart.asset[type=lineargradient]
*/
interface LinearGradientOptions extends GradientOptions {
/**
*
* @default 'down'
*/
dir?: 'down' | 'up' | 'right' | 'left';
}
/**
* 원 중심에서 바깥으로 생상이 변해가는 효과를 표시한다.
* 채우기 색이나 선 색으로 사용될 수 있다.
*
* @config chart.asset[type=radialgradient]
*/
interface RadialGradientOptions extends GradientOptions {
/**
* gradient가 끝나는 원의 x 좌표.
*/
cx?: number | string;
/**
* gradient가 끝나는 원의 y 좌표.
*/
cy?: number | string;
/**
* gradient가 끝나는 원의 반지름.
*/
r?: number | string;
}
/**
* 도형 패턴을 지정해서 채우기(fill) 색상 대신 사용할 수 있다.
*/
interface PatternOptions extends AssetItemOptions {
/**
* 문자열로 지정하면 path 'd', 숫자로 지정하면 stock pattern index.
*/
pattern: string | number;
/**
* 지정하지 않으면 {@page height}나 20 pixels.
*/
width?: number;
/**
* 지정하지 않으면 {@page widths}나 20 pixels.
*/
height?: number;
/**
*/
style?: SVGStyles;
/**
*/
backgroundStyle?: SVGStyles;
}
/**
*/
interface ImageOptions {
/**
*/
name?: string;
/**
*/
url: string;
}
/**
* @config chart.asset[type=images]
*/
interface ImageListOptions extends AssetItemOptions {
/**
*/
rootUrl?: string;
/**
*/
width?: number;
/**
*/
height?: number;
/**
*/
images?: (ImageOptions | string)[];
}
/**
* 색상 목록을 미리 지정하고 {@page config.base.series#pointcolors} 등에 적용할 수 있다.
* 목록에서 색상을 꺼내오는 방식은 {@page mode} 속성으로 지정한다.
*
* @config chart.asset[type=colors]
*/
interface ColorListOptions extends AssetItemOptions {
/**
* 색상 목록에서 색을 꺼내오는 방식.
*
* @default 'normal'
*/
mode?: PaletteMode;
/**
* 색상 목록.
*
*/
colors: string[];
}
/** @dummy */
type AssetOptionsType = LinearGradientOptions | RadialGradientOptions | PatternOptions | ColorListOptions | ImageListOptions;
declare abstract class AssetItem {
source: T;
constructor(source: T);
hasDef(): boolean;
abstract getEelement(doc: Document, source: T): Element;
abstract prepare(): void;
}
/**
* 요소를 관리하는 인터페이스.
*/
interface IAssetOwner {
addDef(element: Element): void;
removeDef(element: string): void;
}
/**
* 종류 구분없이 id는 유일하게 반드시 지정해야 한다.
*/
declare class AssetCollection {
private _items;
private _map;
load(source: any): AssetOptionsType | AssetOptionsType[];
updateOptions(source: any, render: boolean): void;
register(doc: Document, owner: IAssetOwner): void;
unregister(owner: IAssetOwner): void;
get(id: string): AssetItem;
prepareRender(): void;
get options(): AssetOptionsType[];
private $_loadItem;
}
interface IPointerHandler {
handleDown(ev: PointerEvent): void;
handleUp(ev: PointerEvent): void;
handleMove(ev: PointerEvent): void;
handleClick(ev: PointerEvent): void;
handleDblClick(ev: PointerEvent): void;
handleWheel(ev: WheelEvent): void;
}
/**
* @internal
*
* Control base.
*/
declare abstract class RcControl extends RcObject implements IAssetOwner {
static readonly CLASS_NAME = "rct-control";
static readonly SHADOW_FILTER = "rr-chart-shadow-filter";
static _animatable: boolean;
private _container;
private _dom;
private _htmlRoot;
private _svg;
private _defs;
private _root;
private _pointerHandler;
private _inited;
private _testing;
private _dirty;
private _requestTimer;
private _toAnimation;
private _invalidateLock;
private _lockDirty;
private _cssVars;
loaded: boolean;
_padding: ISides;
constructor(doc: Document, container: string | HTMLDivElement, className?: string);
protected _doDestroy(): void;
isInited(): boolean;
isTesting(): boolean;
doc(): Document;
dom(): HTMLElement;
svg(): SVGSVGElement;
width(): number;
height(): number;
contentWidth(): number;
contentHeight(): number;
contentRight(): number;
clipContainer(): SVGElement;
setData(data: string, value: any, container?: boolean): void;
clearDefs(): void;
private $_clearDefs;
clearAssetDefs(): void;
clearTemporaryDefs(): void;
appendDom(elt: T): T;
addElement(elt: T): T;
setPointerHandler(handler: IPointerHandler): void;
invalidate(force?: boolean): void;
invalidateLayout(force?: boolean): void;
setLock(): void;
releaseLock(validate?: boolean): void;
lock(func: (control: RcControl) => void): void;
silentLock(func: (control: RcControl) => void): void;
getBounds(): DOMRect;
setAnimation(to?: number): void;
fling(distance: number, duration: number): void;
getCssVar(name: string): string;
/**
* defs에 직사각형 clipPath를 등록한다.
*/
clipBounds(x?: number, y?: number, width?: number, height?: number, rd?: number): ClipRectElement;
clipCircle(): ClipCircleElement;
addDef(element: Element): void;
removeDef(element: Element | string): void;
containerToElement(element: RcElement, x: number, y: number): Point;
svgToElement(element: RcElement, x: number, y: number): Point;
elementToSvg(element: RcElement, x: number, y: number): Point;
protected _setTesting(): void;
protected _setSize(w: number, h: number): void;
private $_addListener;
protected _resigterEventHandlers(dom: HTMLElement): void;
protected _unresigterEventHandlers(dom: HTMLElement): void;
protected _prepareRenderers(dom: HTMLElement): void;
protected _initControl(document: Document, container: string | HTMLDivElement, className: string): void;
protected _initDefs(doc: Document, defs: SVGElement): void;
protected _render(): void;
private $_requestRender;
updateNow(): void;
private $_render;
protected abstract _doRender(bounds: IRect): void;
protected _doBeforeRender(): void;
protected _doAfterRender(): void;
protected _doRenderBackground(elt: HTMLDivElement, root: RcElement, width: number, height: number): void;
protected _windowResizeHandler: (event: Event) => void;
protected _windowResized(): void;
toOffset(event: any): any;
setPointerCapture(ev: PointerEvent): void;
releasePointerCapture(ev: PointerEvent): void;
private _clickHandler;
private _dblClickHandler;
private _touchMoveHandler;
private _pointerDownHandler;
private _pointerMoveHandler;
private _pointerUpHandler;
private _pointerCancelHandler;
private _pointerLeaveHandler;
private _keyPressHandler;
private _wheelHandler;
}
/**
* @internal
*
* RcContainer 구성 요소.
* SVGElement들로 구현된다.
*/
declare class RcElement extends RcObject {
static DEBUGGING: boolean;
static TESTING: boolean;
static ASSET_KEY: string;
static TEMP_KEY: string;
private _visible;
private _x;
private _y;
private _width;
private _height;
private _tx;
private _ty;
private _scaleX;
private _scaleY;
private _rotation;
private _originX;
private _originY;
private _matrix;
protected _styleName: string;
protected _styles: any;
protected _styleDirty: boolean;
hiding: boolean;
tag: any;
private _dom;
private _parent;
removing: boolean;
constructor(doc: Document, styleName: string, tag?: string);
protected _doDestroy(): void;
get doc(): Document;
get dom(): SVGElement;
get parent(): RcElement;
get control(): RcControl;
get x(): number;
set x(value: number);
get tx(): number;
get y(): number;
set y(value: number);
get ty(): number;
get width(): number;
set width(value: number);
get height(): number;
set height(value: number);
get tright(): number;
get tbottom(): number;
/**
* visible
*/
get visible(): boolean;
set visible(value: boolean);
setVis(value: boolean): boolean;
/**
* rotation
*/
get rotation(): number;
set rotation(value: number);
setRotation(originX: number, originY: number, rotation: number): RcElement;
getStyle(prop: string): string;
hasStyle(className: string): boolean;
add(child: T): T;
insertChild(child: T, before: RcElement): T;
insertAfter(child: T, after: RcElement): T;
insertFirst(child: T): T;
appendElement(doc: Document, tag: string): SVGElement;
insertElement(doc: Document, tag: string, before: Node): SVGElement;
remove(): RcElement;
getAttr(attr: string): any;
setAttr(attr: string, value: any): RcElement;
setAttrEx(attr: string, value: any): RcElement;
setAttrs(attrs: any): RcElement;
unsetAttr(attr: string): RcElement;
getBounds(): DOMRect;
setBounds(x: number, y: number, width: number, height: number): RcElement;
setRect(rect: IRect): RcElement;
getRect(): IRect;
getSize(): Size;
getBBox(): IRect;
getBBoxEx(): IRect;
inflateBBox(dx: number, dy: number): IRect;
controlToElement(x: number, y: number): Point;
svgToElement(x: number, y: number): Point;
elementToSvg(x: number, y: number): Point;
move(x: number, y: number): RcElement;
setPos(x: number, y: number): void;
setPosY(y: number): void;
isDomAnimating(): boolean;
rotate(angle: number): RcElement;
internalRotate(angle: number): void;
scale(s: number): RcElement;
trans(x: number, y: number): RcElement;
transp(p: Point): RcElement;
transEx(x: number, y: number, duration?: number, invalidate?: boolean): RcElement;
transEx2(x: number, y: number, duration?: number, invalidate?: boolean): RcElement;
transX(x: number): RcElement;
transY(y: number): RcElement;
shiftY(dy: number): RcElement;
/**
*
* @param width
* @param height
* @param attr 속성 변경 여부.
* @returns 변경된 값이 있으면 true
*/
resize(width: number, height: number, attr?: boolean): boolean;
appendDom(dom: Node): Node;
insertDom(dom: Node, before: Node): Node;
clearDom(): void;
containsClass(selector: string): boolean;
addClass(selector: string): this;
removeClass(selector: string): this;
private _saveStyle;
private _saveClass;
saveStyles(): void;
restoreStyles(): void;
internalClearStyles(): void;
clearStyles(): boolean;
clearStyle(props: string[]): boolean;
internalSetStyles(styles: any): void;
internalImportantStylesOrClass(style: any): void;
setStyles(styles: any): boolean;
resetStyles(styles: any): boolean;
protected _resetClass(): void;
clearStyleAndClass(): void;
internalClearStyleAndClass(): void;
setStyleOrClass(style: SVGStyleOrClass): void;
internalSetStyleOrClass(style: SVGStyleOrClass): void;
addStyleOrClass(style: SVGStyleOrClass): void;
setClass(value: string): void;
setStyle(prop: string, value: string): boolean;
internalSetStyle(prop: string, value: string): void;
setColor(color: string): void;
setFill(color: string): void;
setStroke(color: string): void;
setTransparent(important: boolean): void;
textAlign(): Align;
setData(data: string, value?: string): void;
unsetData(data: string): void;
setBoolData(data: string, value: boolean): void;
getData(data: string): string;
hasData(data: string): boolean;
removeLater(delay: number, callback?: (v: RcElement) => void): RcElement;
hide(delay: number): RcElement;
clipRect(x: number, y: number, width: number, height: number, rd?: number): ClipRectElement;
setClip(cr?: ClipElement | string): void;
setTemporary(): RcElement;
setCursor(cursor: string): void;
ignorePointer(): void;
contains(dom: Element): boolean;
front(siblings: RcElement[], group?: RcElement[]): void;
back(siblings: RcElement[]): void;
invalidate(): void;
sort(children: RcElement[]): void;
getParent(type: {
new (): T;
}): T;
protected _testing(): boolean;
protected _doAttached(parent: RcElement): void;
protected _doDetached(parent: RcElement): void;
protected _updateTransform(): void;
getTransform(): string;
}
declare class LayerElement extends RcElement {
constructor(doc: Document, styleName: string);
}
declare abstract class ClipElement extends RcElement {
private _id;
constructor(doc: Document);
get id(): string;
}
declare class ClipRectElement extends ClipElement {
private _rect;
constructor(doc: Document, x?: number, y?: number, width?: number, height?: number, rx?: number, ry?: number);
setBounds(x: number, y: number, w: number, h: number): RcElement;
resize(width: number, height: number, attr?: boolean): boolean;
get x(): number;
set x(value: number);
get y(): number;
set y(value: number);
get width(): number;
set width(value: number);
get height(): number;
set height(value: number);
}
declare class PathElement extends RcElement {
private _path;
constructor(doc: Document, styleName?: string, path?: Path);
path(): string;
setPath(path: Path): PathElement;
}
declare class ClipCircleElement extends ClipElement {
private _circle;
constructor(doc: Document);
setCircle(cx: number, cy: number, radius: number): void;
}
/**
* @enum
*/
declare const _Shapes: {
/**
* 원
* @config
*/
readonly CIRCLE: "circle";
/**
* 다아이몬드
* @config
*/
readonly DIAMOND: "diamond";
/**
* 정사각형
* @config
*/
readonly SQUARE: "square";
/**
* 삼각형
* @config
*/
readonly TRIANGLE: "triangle";
/**
* 별 모양
* @config
*/
readonly STAR: "star";
/**
* 역삼각형
* @config
*/
readonly ITRIANGLE: "itriangle";
/**
* 사각형
* @config
*/
readonly RECTANGLE: "rectangle";
/**
* 수직선
* @config
*/
readonly VLINE: "vline";
/**
* 수평선
* @config
*/
readonly HLINE: "hline";
/**
* 직선
* @config
*/
readonly LINE: "line";
};
/** @dummy */
type Shape = typeof _Shapes[keyof typeof _Shapes];
/**
* 시리즈 데이터포인트 {@page config.base.series.pointLabel 라벨} 표시 위치.
* {@page config.base.series.pointLabel.position} 속성 값으로 사용된다.
*
* @enum
*/
declare const _PointLabelPosition: {
/**
* 시리즈 종류에 따라 데이터포인트 라벨들의 표시 위치가 자동 결정된다.
*/
readonly AUTO: "auto";
/**
* 포인트뷰 상단에 표시.
*/
readonly HEAD: "head";
/**
* 포인트뷰 하단에 표시.
*/
readonly FOOT: "foot";
/**
* {@page config.series.pie}나 {@page config.series.funnel}에서 데이터포인트 라벨을
* 포인트뷰 내부에 표시.
*/
readonly INSIDE: "inside";
/**
* {@page config.series.pie}나 {@page config.series.funnel}에서 데이터포인트 라벨을
* 포인트뷰 외부에 표시.
*/
readonly OUTSIDE: "outside";
};
/** @dummy */
type PointLabelPosition = typeof _PointLabelPosition[keyof typeof _PointLabelPosition];
/**
* 시리즈 데이터포인트들의 label 옵션.
* {@page config.base.series}의 'pointLabel' 항목으로 설정한다.
*
* ```js
* const config = {
* series: {
* pointLabel: {
* visible: true,
* position: 'outside',
* suffix: '%',
* style: {
* fontWeight: 'bold',
* },
* }
* }
* };
* ```
*/
interface DataPointLabelOptions extends IconedTextOptions {
/**
* @override
*
* 이 속성값이 true이거나 {@page visibleCallback}이 설정되면 표시된다.
*
* @default undefined
*/
visible?: boolean;
/**
* 포인트 label 표시 위치.
* 'auto'이면 시리즈 종류에 따라 위치가 결정된다.
*
* @default 'auto'
*/
position?: PointLabelPosition;
/**
* label과 point view 혹은 connector 사이의 기본 간격.
* 숫자 대신 콜백을 설정해서 데이터포인트별 값을 지정할 수 있다.
* 콜백에서 타당한 값을 리턴하지 않으면 기본값이 사용된다.
*
* @default 5
*/
offset?: number | ((point: any) => number);
/**
* 계산되는 기본 text 대신, data point label로 표시될 field.
* {@page textCallback}이 설정되고 콜백에서 null이나 undefined를 리턴하지 않으면 이 속성은 무시된다.
*/
textField?: string;
/**
* polar이거나 원형 시리즈일 때 true로 지정할 경우 각도에 따라 자동으로 회전 시킨다.
*/
autoRotation?: boolean;
/**
* 계산되는 기본 text 대신, data point label로 표시될 text 리턴.
* undefined나 null을 리턴하면 {@page textField} 등을 사용한 기존에 표시될 텍스트를 사용한다.
* 빈 문자열 등 정상적인 문자열을 리턴하면 그 문자열대로 표시된다.
* {@page prefix}나 포맷 속성 등은 적용되지 않는다.
*/
textCallback?: (point: any) => string;
/**
* 데이터 포인트별 label 표시 여부를 리턴하는 콜백.
*
*/
visibleCallback?: (point: any) => boolean;
/**
* 데이터 포인트별로 추가 적용되는 스타일을 리턴한다.
*/
styleCallback?: (point: any) => SVGStyleOrClass;
}
/**
* 추세선(trendline) 유형.
*
* @enum
*/
declare const _TrendLineType: {
/**
* 선형.
*
* @config
*/
readonly LINEAR: "linear";
/**
* 로그.
*
* @config
*/
readonly LOGARITHMIC: "logarithmic";
/**
* 다항.
*
* @config
*/
readonly POLYNOMIAL: "polynomial";
/**
* 멱급수.
*
* @config
*/
readonly POWER: "power";
/**
* 지수.
*
* @config
*/
readonly EXPONENTIAL: "exponential";
/**
* 이동 평균.
*
* @config
*/
readonly MOVING_AVERAGE: "movingAverage";
};
/** @dummy */
type TrendLineType = typeof _TrendLineType[keyof typeof _TrendLineType];
/**
* 시리즈 추세선 옵션.
* {@page config.base.series}의 'trendLine' 항목으로 설정한다.
*
* @enum
*/
interface TrendlineOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* 추세선 유형.
*
*/
type?: TrendLineType;
/**
* 추세선 정밀도.\
* 데이터포인트 사이에 계산될 지점의 개수.
*
*/
resolution?: number;
/**
* 이동 평균 유형의 계산 간격.
*
*/
movingInterval?: number;
/**
* true로 지정하면 spline 곡선으로 지점들을 연결한다.\
* 지정하지 않으면 {@page type}이 'logarithmic', 'exponential', 'power'일 때 곡선으로 그린다.
*
*/
curved?: boolean;
}
/**
* 시리즈는 {@page data}로 지정된 값들을 데이터포인트로 표시하는 차트의 핵심 구성 요소이다.
* 차트 설정의 다른 부분이나 API에 참조하기 위해서는 {@page name}을 반드시 지정해야 햔다.
* 차트 생성 시 {@page config.series.#type} 을 지정하지 않으면 {@page config.series.bar 'bar'} 시리즈로 생성된다.
*
* @config chart.series[base]
*/
interface SeriesOptions extends ChartItemOptions {
/**
*/
type?: string;
/**
* 시리즈 이름.
* 시리즈 생성시 지정된 후 변경할 수 없다.
* 차트의 다른 구성 요소에서 이 시리즈를 참조할 때 사용되며,
* 레전드나 툴팁에서 시리즈를 나타내는 텍스트로도 사용된다.
*/
name?: string;
/**
* 이 시리즈를 나타내는 텍스트.
* 레전드나 툴팁에서 시리즈를 대표한다.
* 이 속성이 지정되지 않으면 {@page name}이 사용된다.
*/
label?: string;
/**
* 데이터포인트 label 옵션.
* 단순히 boolean 값으로 설정하면 {@page visible} 속성에 적용된다.
*/
pointLabel?: DataPointLabelOptions | boolean;
/**
* 분할 모드일 때 시리즈가 표시될 pane의 수직 index.
*/
row?: number;
/**
* 분할 모드일 때 시리즈가 표시될 pane의 수평 index.
*/
col?: number;
/**
* 포인터가 차지하는 너비가 이 값 미만이면 표시하지 않는다.
* // TODO: 구현할 것!
*/
visibleThreshold?: number;
/**
* 시리즈 표시 순서를 지정할 수 있다.
* 값이 클 수록 나중에(위에) 표시된다.
*/
zOrder?: number;
/**
* 그룹에 포함되면 그룹 설정을 따른다.
*/
xAxis?: string | number;
/**
* 그룹에 포함되면 그룹 설정을 따른다.
*/
yAxis?: string | number;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 x 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 0, 객체이면 'x'.
*/
xField?: string | number;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 y 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 1, 객체이면 'y'.
*/
yField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 z 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 2, 객체이면 'z'.
*/
zField?: string | number | Function;
/**
* undefined이면, data point의 값이 객체일 때 'color'.
*/
colorField?: string;
/**
* undefined이면, data point의 값이 객체일 때 'icon'.
*/
iconField?: string;
/**
* 데이터포인터들을 생성하는 데 사용되는 값 목록.
* 단일 값을 지정할 경우 배열로 처리됩니다. 단, string 타입은 향후 버전에서 사용할 예정이며, 현재는 data를 지정하지 않은 경우와 동일하게 동작한다.
*/
data?: any;
/**
* 연결된 x축이 연속 축(카테고리축이 아닌)일 때, x축 값이 설정되지 않은 첫번째 데이터 point에 설정되는 x값.
* 이 후에는 {@page xStep}씩 증가시키면서 설정한다.
* 이 속성이 지정되지 않은 경우 {@page ChartOptions.xStart}가 적용된다.
*/
xStart?: any;
/**
* 연결된 x축이 연속 축(카테고리축이 아닌)일 때, x축 값이 설정되지 않은 데이터 point에 지정되는 x값의 간격.
* 첫번째 값은 {@page xStart}로 설정한다.
* time 축일 때, 정수 값 대신 시간 단위('y', 'm', 'w', 'd', 'h', 'n', 's')로 지정할 수 있다.
* 이 속성이 지정되지 않으면 {@page ChartOptions.xStep}이 적용된다.
*/
xStep?: number | string;
/**
* 모든 데이터포인트에 적용되는 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
* {@page Series.style}로 설정되는 시리즈의 inline 스타일이
* 데이터포인터에 적용되지 않는 경우 이 속성을 사용할 수 있다.
* {@page pointColors}나 {@page color}가 설정되면 이 속성으로 설정된 색상은 무시된다.
* 또, {@page pointStyleCallback}으로 설정된 스타일이 이 속성 스타일보다 우선한다.
*/
pointStyle?: SVGStyleOrClass;
/**
* 데이터 포인트 기본 색.
* 숫자로 지정하면 정수로 변환된 값에 해당하는 팔레트 색상으로 설정된다.
* 'var(--color-n)'으로 지정한 것과 동일하며, 1 ~ 12 사이의 값으로 지정한다.
* {@page pointColors}나 {@page pointStyleCallback}으로 설정된 색상이 이 속성으로 설정한 색상보다 우선한다.
*/
color?: string | number;
/**
* 데이터 포인트별 색들을 지정한다.
* 색 배열로 지정하거나, 'colors' asset으로 등록된 이름을 지정할 수 있다.
* {@page pointStyleCallback}으로 설정된 색상이나 데이터포인트별로 지정한 색상이 이 속성으로 설정한 색상보다 우선한다.
*/
pointColors?: string[] | string;
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
* 범위들은 중첩될 수 없다.
*/
viewRanges?: ValueRange[] | ValueRangeList;
/**
* ranges가 적용되는 값.
* 지정하지 않으면 시리즈 종류에 띠라 자동 적용된다.
* 'line' 시리즈 계열은 'x', 나머지는 'y'가 된다.
* 현재 'z'은 range는 bubble 시리즈에만 적용할 수 있다.
*/
viewRangeValue?: 'x' | 'y' | 'z';
/**
* true로 지정하면 body를 벗어난 data point 영역도 표시된다.
* 값을 지정하지 않으면 polar 차트에서는 true, 직교 차트에서는 false이다.
* group에 포함되면 group의 noClip 설정을 따른다.
* 또, 값을 지정하지 않으면 버블시리즈는 최대한 버블들이 표시되도록 한다.
*/
noClip?: boolean;
/**
* 명시적 false로 지정하면 legend에 표시하지 않는다.
*/
visibleInLegend?: boolean;
/**
* true로 지정하면 시리즈 내비게이터에 표시한다.
* 해당 속성은 bar, line 시리즈 에서만 적용된다.
*/
visibleInNavigator?: boolean;
/**
* 데이터포인트 툴팁 텍스트.
*/
tooltipText?: string;
/**
*/
tooltipCallback?: (args: any) => string;
/**
* 차트 설정 로드 시 실행되는 animation 종류.
*/
loadAnimation?: 'default' | 'reveal' | 'grow' | 'spread' | 'fadein';
/**
* 데이터포인트 hover 효과.
*/
hoverEffect?: 'none' | 'default';
/**
* 데이터포인트 위에 마우스가 있을 때 적용되는
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
hoverStyle?: SVGStyleOrClass;
/**
* 데이터포인트의 동적 스타일 콜백.
*/
pointStyleCallback?: (args: DataPointCallbackArgs) => SVGStyleOrClass;
/**
* 시리즈의 hover, focus, tooltip 상호작용 여부를 지정한다.
*
* @default true
*/
interactive?: boolean;
/**
* 데이터포인트들이 새로 로드된 후 호출된다.
*/
onPointsLoaded?: (series: object, firstTime: boolean) => void;
/**
* 데이터 point가 클릭될 때 호출되는 이벤트 콜백.
* 명시적 true를 리턴하면 기본 동작이 진행되지 않는다.
*/
onPointClick?: (args: DataPointCallbackArgs) => boolean;
/**
* 마우스가 데이터 point 위에 올라가거나 빠져나갈 때 호출되는 이벤트 콜백.
* 빠져나가는 경우 args 매개변수는 null이다.
*/
onPointHover?: (args: DataPointCallbackArgs) => void;
}
/**
*/
interface ConnectableSeriesOptions extends SeriesOptions {
/**
* 추세선 옵션.
*/
trendline?: TrendlineOptions;
}
/**
*/
interface ClusterableSeriesOptions extends ConnectableSeriesOptions {
/**
* 시리즈가 그룹에 포함되지 않거나,
* 포함된 그룹의 layout이 {@page SeriesGroupLayout.DEFAULT}이거나 특별히 설정되지 않아서,
* 그룹에 포함된 시리즈들의 data point가 옆으로 나열되어 표시될 때,
* 포인트 표시 영역 내에서 이 시리즈의 포인트가 차지하는 영역의 상대 크기.
* 예를 들어 이 시리즈의 속성값이 1이고 다른 시리즈의 값이 2이면 다른 시리즈의 data point가 두 배 두껍게 표시된다.
* 또, 그룹에 포함되고 그룹의 layout이 {@page SeriesGroupLayout.DEFAULT}
*
*/
pointWidth?: number;
/**
*/
pointPos?: number;
/**
* 이 시리즈의 point가 차지하는 영역 중에서 point bar 양쪽 끝에 채워지는 빈 영역의 크기.
*
* point가 차지할 원래 크기에 대한 상대 값으로서,
* 0 ~ 0.5 사이의 비율 값으로 지정한다.
*
* @default undefined 한 카테고리에 cluster 가능한 시리즈가 하나만 표시되면 0.25, group에 포함된 경우 0.1, 여러 시리즈와 같이 표시되면 0.2.
*/
pointPadding?: number;
/**
*/
minPointWidth?: number;
/**
* 구분 배치가 가능한 둘 이상의 시리즈나 시리즈그룸이 표시 중일 때 구분 배치할 지 여부.
* 명시적 false로 지정하지 않는 한 무리 배치한다.
* 즉, 복수 개의 시리즈나 시리즈그룹의 데이터포인트들이 겹치지 않고 차레대로 표시된다.
*/
clusterable?: boolean;
}
/**
* 'bar'와 같이 y축 기준 위/아래 구분이 필요한 시리즈.\
* 구분하는 값은 {@page baseValue}로 지정한다.
*/
interface BasedSeriesOptions extends ClusterableSeriesOptions {
/**
* 상/하 값 구분의 기준이 되는 값.\
* 숫자가 아닌 값으로 지정하면 0으로 간주한다.
*
* // 0을 설정하지 않으면 belowStyle이 작동하지 않는다.
* // http://localhost:6010/realchart/demo/bar-negative.html
* @default 0
*/
baseValue?: number;
/**
* null인 y값을 {@page baseValue}로 간주한다.
*
*/
nullAsBase?: boolean;
/**
* {@page baseValue} 혹은 y축의 baseValue보다 작은 쪽의 point들에 적용되는 스타일.
*
*/
belowStyle?: SVGStyleOrClass;
}
/**
*/
interface BarSeriesBaseOptions extends BasedSeriesOptions {
/**
* true로 지정하면 포인트 bar 별로 색을 다르게 표시한다.
*
* @default false
*/
colorByPoint?: boolean;
}
/**
* @enum
*/
declare const _SeriesGroupLayout: {
/**
* 시리즈 종류에 따른 기본 표시 방식.
*
* bar 종류의 시리즈인 경우 포인트들을 순서대로 옆으로 배치하고,
* line 종류인 경우 {@page OVERLAP}과 동일하게 순서대로 표시된다.
*
* 기본 값이다.
* @config
*/
readonly DEFAULT: "default";
/**
* 포인트들을 순서대로 겹쳐서 표시한다.
*
* bar 종류의 시리즈이고,
* 마지막 시리즈의 포인트 값이 큰 경우 이전 포인트들은 보이지 않을 수 있다.
* @config
*/
readonly OVERLAP: "overlap";
/**
* 포인트 그룹 내에서 각 포인트들을 순서대로 쌓아서 표시한다.
* @config
*/
readonly STACK: "stack";
/**
* 포인트 그룹 내에서 각 포인트의 비율을 표시한다.
*
* 그룹 합은 SeriesGroup.max로 지정한다.
* 각 포인트들은 STACK과 마찬가지로 순서대로 쌓여서 표시된다.
* SeriesGroup.baseValue 보다 값이 큰 point는 baseValue 위쪽에 작은 값을 가진
* 포인트들은 baseValue 아래쪽에 표시된다.
* @config
*/
readonly FILL: "fill";
};
/** @dummy */
type SeriesGroupLayout = typeof _SeriesGroupLayout[keyof typeof _SeriesGroupLayout];
/**
* 같은 종류의 단일 시리즈들을 여러 개 묶어서 표시한다.
*
* @config chart.seriesGroup[base]
*/
interface SeriesGroupOptions extends ChartItemOptions {
/**
*/
row?: number;
/**
*/
col?: number;
/**
* 단일 시리즈 옵션 배열.
*/
children?: T[];
/**
* pie 시리즈는 layout을 지원하지 않는다.
* @default 'default'
*/
layout?: SeriesGroupLayout;
/**
* {@page layout}이 {@page SeriesGroupLayout.FILL}일 때 상대적 최대값.
*
*
* @default 100
*/
layoutMax?: number;
/**
* 이 그룹에 포함된 시리즈들은 자신의 설정 대신 이 설정을 따른다.
*
*/
xAxis?: string | number;
/**
* 이 그룹에 포함된 시리즈들은 자신의 설정 대신 이 설정을 따른다.
*
*/
yAxis?: string | number;
/**
* 명시적 false로 지정하면 legend에 표시하지 않는다.
*
* @default true
*/
visibleInLegend?: boolean;
/**
* @default 0
*/
zOrder?: number;
/**
*/
noClip?: boolean;
/**
* 그룹 툴팁의 위쪽에 표시되는 텍스트.\
*
* tooltipHeader
* tooltipRow,
* tooltipRow,
* ...
* tooltipFooter
* 형태로 툴팁이 표시된다.
*
* @default '${name}'
*/
tooltipHeader?: string;
/**
* 그룹 툴팁에 각 시리즈별 표시되는 포인트 툴팁 텍스트.
*
* @default '${series}: ${yValue}'
*/
tooltipRow?: string;
/**
* 그룹 툴팁의 아래쪽에 표시되는 텍스트.
*
*/
tooltipFooter?: string;
}
declare const LineSeriesGroupType = "linegroup";
/**
* Line 시리즈그룹.
* {@page op.SeriesOptions#type}은 'linegroup'이다.
*
* @config chart.series[type=linegroup]
*/
interface LineSeriesGroupOptions extends SeriesGroupOptions {
/**
*/
type?: typeof LineSeriesGroupType;
/**
* 이 그룹에 포함된 시리즈들의 line 종류.
*
* @default 'default'
*/
lineType?: LineType;
/**
*/
baseValue?: number;
}
declare const AreaSeriesGroupType = "areagroup";
/**
* Area 시리즈그룹.
* {@page op.SeriesOptions#type}은 'areagroup'이다.
*
* @config chart.series[type=areagroup]
*/
interface AreaSeriesGroupOptions extends SeriesGroupOptions {
/**
*/
type?: typeof AreaSeriesGroupType;
/**
* 이 그룹에 포함된 시리즈들의 line 종류.
*
* @default 'default'
*/
lineType?: LineType;
/**
*/
baseValue?: number;
}
/**
*/
interface ClusterableSeriesGroupOptions extends SeriesGroupOptions {
/**
* 축 단위 너비에서 이 그룹이 차지하는 상대적 너비.
*/
groupWidth?: number;
/**
* 이 그룹의 너비에서 포인트들이 표시되기 전후의 상대적 여백 크기.
*/
groupPadding?: number;
/**
* 구분 배치가 가능한 둘 이상의 시리즈나 시리즈그룸이 표시 중일 때 구분 배치할 지 여부.
* 명시적 false로 지정하지 않는 한 무리 배치한다.
* 즉, 복수 개의 시리즈나 시리즈그룹의 데이터포인트들이 겹치지 않고 차레대로 표시된다.
*/
clusterable?: boolean;
}
/**
*/
interface BarSeriesGroupBaseOptions extends ClusterableSeriesGroupOptions {
/**
* @default 0
*/
baseValue?: number;
}
/**
* {@page config.series.dumbbell} 시리즈 등 데이터포인트 뷰에 표시되는 마커 옵션.
*/
interface SeriesMarkerOptions extends ChartItemOptions {
/**
* 명시적으로 지정하지 않으면 typeIndex에 따라 Shapes 중 하나로 돌아가면서 설정된다.
*/
shape?: Shape;
/**
* {@page shape}의 반지름.
*/
radius?: number;
/**
* 데이터포인트 마커의 동적 스타일 콜백.
* 이 콜백에서 리턴되는 스타일이 가장 우선적으로 적용된다.
*/
styleCallback?: (args: DataPointCallbackArgs) => SVGStyleOrClass;
}
/**
*/
interface MarkerSeriesOptions extends ConnectableSeriesOptions {
/**
* 명시적으로 지정하지 않으면 typeIndex에 따라 Shapes 중 하나로 돌아가면서 설정된다.
*
*/
shape?: Shape;
/**
* 데이터포인트 {@page shape 도형} 회전 각도.
*
*/
rotation?: number;
/**
* 데이터포인트 별로 다른 색상으로 그린다.
*
*/
colorByPoint?: boolean;
/**
* marker가 마우스 아래 있는 지 판단할 때 외부로 추가되는 가상의 두께.
* 지정하지 않으면 {@page config.chart.options.pointHovering.hintDistance} 설정을 따른다.
*/
hintDistance?: number;
}
/**
* 데이터 포인트 maker 설정 정보.
*/
interface LineSeriesMarkerOptions extends SeriesMarkerOptions {
/**
* @override
*
* @default 4
*/
radius?: number;
/**
* 첫번째 point의 marker 표시 여부.
* true로 지정하면 모델 visible과 상관없이 표시하고,
* false면 상관없이 표시하지 않는다.
* 아니면 모델의 visible을 따른다.
*
*/
firstVisible?: boolean;
/**
* 마지막 point의 marker 표시 여부.
* true로 지정하면 모델 visible과 상관없이 표시하고,ㄴ
* false면 상관없이 표시하지 않는다.
* 아니면 모델의 visible을 따른다.
*
*/
lastVisible?: boolean;
/**
* 최소값 point들의 marker 표시 여부.
* true로 지정하면 모델 visible과 상관없이 표시하고,
* false면 상관없이 표시하지 않는다.
* 아니면 모델의 visible을 따른다.
*
*/
minVisible?: boolean;
/**
* 최대값 point들의 marker 표시 여부.
* true로 지정하면 모델 visible과 상관없이 표시하고,
* false면 상관없이 표시하지 않는다.
* 아니면 모델의 visible을 따른다.
*
*/
maxVisible?: boolean;
/**
* 데이터포인트 위에 마우스가 있을 때 표시되는 기본 확장 효과에 적용되는 scale.
*
* @default 1.75
*/
hoverScale?: number;
/**
* 데이터포인트 위에 마우스가 있을 때 적용되는
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
* {@page config.series.hoverStyle} 보다 우선 적용된다.
*
* @config
*/
hoverStyle?: SVGStyleOrClass;
/**
* marker가 마우스 아래 있는 지 판단할 때 외부로 추가되는 가상의 두께.
* 지정하지 않으면 {@page config.chart.options.pointHovering.hintDistance} 설정을 따른다.
*/
hintDistance?: number;
}
/**
* 라인 시리즈 계열의 설정 옵션 기반(base).
* //포인트 label들은 PointItemPosition.HEAD, FOOT, INSIDE에 위치할 수 있다.
* //기본값은 AUTO(HEAD)이다.
* //pointLabel.align으로 수평 정렬을 설정할 수있다.
*/
interface LineSeriesBaseOptions extends ConnectableSeriesOptions {
/**
* marker 옵션.
*/
marker?: LineSeriesMarkerOptions;
/**
* null인 y값을 {@page baseValue}로 간주한다.
*
* @default false
*/
nullAsBase?: boolean;
}
/**
* 데이터포인트 라벨들을 정렬하는 방식.
* @enum
*/
declare const _PointLabelAlign: {
/**
* 정렬하지 않는다.
*/
readonly NONE: "none";
/**
* position이 'outside'일 때 시리즈 본체에 가까운 쪽에 정렬하고,
* 'inside'일 때 시리즈 중심(pie 시리즈)이나 왼쪽(funnel 시리즈)에 졍렬한다..
*/
readonly NEAR: "near";
/**
* position이 'outside'일 때 차트 전체 영역의 경계 쪽에 정렬하고,
* 'inside'일 때 시리즈 경계(pie 시리즈)나 오른쪽(funnel 시리즈)에 졍렬한다..
*/
readonly FAR: "far";
};
/** @dummy */
type PointLabelAlign = typeof _PointLabelAlign[keyof typeof _PointLabelAlign];
/**
* 겹치는 데이터포인트 라벨들의 처리 방식.
* @enum
*/
declare const _PointLabelDedupeMode: {
/**
* 중복제거 없이 모두 표시한다.
*/
readonly DISPLAY_ALL: "displayAll";
/**
* data point 순서대로 표시한다.
*/
readonly PRESERVE_ORDER: "preserveOrder";
/**
* 값이 큰 항목을 우선으로 표시한다.
*/
readonly LARGEST_FIRST: "largestFirst";
};
/** @dummy */
type PointLabelDedupeMode = typeof _PointLabelDedupeMode[keyof typeof _PointLabelDedupeMode];
/**
* 영역을 벗어나는 데이터포인트 라벨들의 표시 여부.
* @enum
*/
declare const _PointLabelOverflow: {
/**
* 모두 표시한다.
*/
readonly VISIBLE: "visible";
/**
* body 영역을 벗어난 label과 line을 표시하지 않는다.
*/
readonly HIDDEN: "hidden";
};
/** @dummy */
type PointLabelOverflow = typeof _PointLabelOverflow[keyof typeof _PointLabelOverflow];
/**
* pie 및 funnel 시리즈의 데이터포인트 label 옵션.
* 라벨들이 겹치면 값이 적은 것들 순서대로 감춘다.
*/
interface WidgetSeriesLabelOptions extends DataPointLabelOptions {
/**
* @override
* @default true
*/
visible?: boolean;
/**
* 데이터포인트 라벨들을 정렬하는 방식.
*
* @default 'none'
*/
align?: PointLabelAlign;
/**
* 연결선 옵션 설정 모델.
*
*/
connector?: WidgetSeriesConnectorOptions;
/**
* label들이 최대한 영역 밖으로 나가지 않도록 안쪽으로 모은다.
*
* @default true
*/
convergable?: boolean;
/**
* label과 pie 본체와의 기본 간격.
*/
distance?: number;
/**
* label이 겹칠 때 처리 표시 지정한다.
*
* @default 'displayAll'
*/
dedupeMode?: PointLabelDedupeMode;
/**
* label이 겹칠 때 처리 표시 지정한다.
*
* @default 'visible'
*/
overflow?: PointLabelOverflow;
}
/**
* 데이터포인트 label과 시리즈 본체를 연결하는 선.
*/
interface WidgetSeriesConnectorOptions extends ChartItemOptions {
/**
* true면 곡선으로 표시한다.
*
* @default true
*/
curved?: boolean;
}
/**
* {@page config.series.pie} 시리즈나 {@page config.seriesfunnel} 시리즈 설정 옵션들의 기반(base).
*/
interface WidgetSeriesOptions extends SeriesOptions {
/**
* body 영역을 기준으로 {@page config.series.pie 'pie'},
* {@page config.series.funnel 'funnel'} 시리즈들의 수평 중심 위치
* 숫자나 body 영역 너비에 대한 상대값을 '%'로 지정할 수 있다.
*
* @default '50%'
*/
centerX?: PercentSize;
/**
* body 영역을 기준으로 {@page config.series.pie 'pie'},
* {@page config.series.funnel 'funnel'} 시리즈들의 수직 중심 위치
* 숫자나 body 영역 높이에 대한 상대값을 '%'로 지정할 수 있다.
* @default '50%'
*/
centerY?: PercentSize;
/**
* {@link centerX}, {@link centerY}를 지정하지 않으면 이 속성값을 사용한다.
* 즉, 이 속성으로 두 속성값을 동시에 지정할 수 있다.
*/
center?: PercentSize;
/**
* true로 지정하면 {@page config.series.pie 'pie'},
* {@page config.series.funnel 'funnel'} 시리즈들의 데이터포인트별 legend 항목을 표시한다.
*
* @default false
*/
legendByPoint?: boolean;
/**
* 값이 0인 데이터포인트를 범례 항목으로 표시할 것인 지 여부.
*
* @default true
*/
zeroInLegend?: boolean;
}
declare const BarRangeSeriesType = "barrange";
/**
* BarRange 시리즈.
* {@page op.SeriesOptions#type}은 'barrange'이다.
* 수평 또는 수직 막대로 여러 값들의 범위들을 **비교**하는 데 사용한다.
* 막대의 길이가 값의 범위를 표시한다.
* X축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 [category](/config/config/xAxis/category)이다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공해야 한다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 low, y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[low, y]|두 값 배열이면 low값과 y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, low, y,]|세 값 이상이면 순서대로 x, low, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page lowField}는 low값의 index. {@page yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
*
* @config chart.series[type=barrange]
*/
interface BarRangeSeriesOptions extends LowRangedSeriesOptions {
/**
*/
type?: typeof BarRangeSeriesType;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 low 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 1, 객체이면 'low'.
*
*/
lowField?: string;
/**
* 지정한 반지름 크기로 데이터포인트 bar의 모서리를 둥글게 표시한다.\
* 최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.
*
*/
cornerRadius?: number;
/**
* @override
* @default '${name}
${series}: ${lowValue} ~ ${highValue}';
*/
tooltipText?: string;
}
declare const BarSeriesType = "bar";
/**
* Bar 시리즈.
* {@page op.SeriesOptions#type}은 'bar'이다.
* 차트의 기본 시리즈 타입이므로 차트의 {@page config.#type 기본 시리즈 타입}이 명시적으로 설정되지 않으면 생략할 수 있다.
* 수평 또는 수직 막대로 여러 값들을 **비교**하는 데 사용한다.
* 막대의 길이가 y값을 나타낸다.
* x축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 {@page config.xAxis.category}이다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-bar-series'
* @config chart.series[type=bar]
*/
interface BarSeriesOptions extends BarSeriesBaseOptions {
/**
*/
type?: typeof BarSeriesType;
/**
* 지정한 반지름 크기로 데이터포인트 bar의 위쪽 모서리를 둥글게 표시한다.\
* 최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.
*
*/
topRadius?: number;
/**
* 지정한 반지름 크기로 데이터포인트 bar의 아래쪽 모서리를 둥글게 표시한다.
* 최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.
*
*/
bottomRadius?: number;
}
declare const BarSeriesGroupType = "bargroup";
/**
* Bar 시리즈그룹.
* {@page op.SeriesOptions#type}은 'bargroup'이다.
*
* @config chart.series[type=bargroup]
*/
interface BarSeriesGroupOptions extends BarSeriesGroupBaseOptions {
/**
*/
type?: typeof BarSeriesGroupType;
}
declare const PieSeriesGroupType = "piegroup";
/**
* Pie 시리즈그룹.
* {@page op.SeriesOptions#type}은 'piegroup'이다.
*
* @config chart.series[type=piegroup]
*/
interface PieSeriesGroupOptions extends SeriesGroupOptions {
/**
*/
type?: typeof PieSeriesGroupType;
/**
* polar 그룹일 때 원형 플롯 영역의 크기.
*
* 픽셀 크기나 차지할 수 있는 전체 크기에 대한 상대적 크기로 지정할 수 있다.
*
* Pie 시리즈들의 그룹이고,
* {@page layout}이 {@page SeriesGroupLayout.FILL}이나 {@page SeriesGroupLayout.STACK}인 경우
* 개별 시리즈의 size 대신 이 속성값으로 표시되고,
* 각 시리즈의 size는 상대 크기로 적용된다.
*
* @default '80%'
*/
polarSize?: PercentSize;
/**
* Pie 시리즈들의 그룹이고,
* {@page layout}이 {@page SeriesGroupLayout.FILL}이나 {@page SeriesGroupLayout.STACK}인 경우,
* 경우 0보다 큰 값을 지정해서 도넛 형태로 표시할 수 있다.
*
* 포함된 pie 시리즈들의 innerSize는 무시된다.
*
* @default 0
*/
innerSize?: PercentSize;
}
/**
*/
interface LinePointLabelOptions extends DataPointLabelOptions {
/**
* @override
*
* @default 'head'
*/
position?: PointLabelPosition;
/**
* position 위치에서 수평 정렬 상태.
*
* @config
* @default 'center'
*/
align?: Align;
/**
* {@page align}이 'left', 'right'일 때 원래 표시 위치와의 간격.
*/
alignOffset?: number;
}
/**
* 선 표시 방식.
* @enum
*/
declare const _LineType: {
/**
* 시리즈 종류에 따라 직선이거나 곡선일 수 있다.
*/
readonly DEFAULT: "default";
/**
* 점들을 연결하는 스플라인 곡선.
*/
readonly SPLINE: "spline";
/**
* 계단형 직선.
*/
readonly STEP: "step";
};
/** @dummy */
type LineType = typeof _LineType[keyof typeof _LineType];
/**
* Line 시리즈의 마지막 데이터포인트 옆에 표시되는 아이콘과 텍스트 설정 모델.
* 마지막 포인트와의 간격은 {@page offset} 속성으로 지정한다.
*/
interface LineSeriesFlagOptions extends IconedTextOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* 마지막 데이터포인트 중심과 flag의 표시 간격을 픽셀 단위로 지정한다.
*
* @default 8
*/
offset?: number;
/**
* flag에 표시될 아이콘의 경로
*/
icon?: string;
}
/**
* @enum
*/
declare const _LineStepDirection: {
readonly FORWARD: "forward";
readonly BACKWARD: "backward";
readonly CENTER: "center";
};
/** @dummy */
type LineStepDirection = typeof _LineStepDirection[keyof typeof _LineStepDirection];
/**
* Line 시리즈.
* {@page op.SeriesOptions#type}은 'line'이다.
* 주로 시간이나 다른 축 변수에 의한 데이터의 **변화** 또는 **경향**(pattern)을 보여주는 데 사용한다.
* 데이터포인트의 값에 해당하는 지점에 표시되는 데이터포인트 마커들을 연결한 선으로 표시되며,
* 기본 x축은 [linear](/config/config/xAxis/linear)이다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=line]
*/
interface LineSeriesOptions extends LineSeriesBaseOptions {
type?: LineSeriesOptionsType;
/**
* @default 'default'
*/
lineType?: LineType;
/**
* @default 'forward'
*/
stepDir?: LineStepDirection;
/**
* y축 기준 위/아래 구분의 기준이 되는 값.
*
*/
baseValue?: number;
/**
* true로 지정하면 y값이 지정되지 않은 null 포인터를 무시하고 다음 포인트에 연결한다.
* false면 null 포인트에서 연결이 끊어진다.
*
* @default false
*/
connectNullPoints?: boolean;
/**
* {@page baseValue} 혹은 y축의 baseValue보다 작은 쪽의 선들에 적용되는 스타일.
*
*/
belowStyle?: SVGStyleOrClass;
/**
* {@page connectNullPoints}이 true일 때 null 포인트의 양끝 포인트를 연결하는 선에 적용되는 스타일.
*/
nullStyle?: SVGStyleOrClass;
/**
* 시리즈의 마지막 데이터포인트 옆에 표시되는 아이콘과 텍스트 설정 모델.
*
*/
flag?: LineSeriesFlagOptions;
}
declare const SplineSeriesType = "spline";
/**
* Spline 시리즈.
* {@page op.SeriesOptions#type}은 'spline'이다.
* {@page lineType} 설정을 무시하고 항상 'spline'으로 표시되는 것 외에는 {@page config.series.line line} 시리즈와 동일하다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=spline]
*/
interface SplineSeriesOptions extends LineSeriesOptions {
/**
*/
type?: typeof SplineSeriesType;
/**
* @override
*
* 항상 'spline'이다.
*/
lineType?: LineType;
}
/**
* Area 시리즈.
* {@page op.SeriesOptions#type}은 'area'이다.
* 대부분 {@page config.series.line} 시리즈와 동일하고 라인 아래 부분을 별도의 색상으로 채운다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=area]
*/
interface AreaSeriesOptions extends LineSeriesOptions {
/**
*/
type?: AreaSeriesOptionsType;
/**
* area 영역에 추가적으로 적용되는 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
*/
areaStyle?: SVGStyleOrClass;
/**
* base 아래쪽 area 영역에 추가적으로 적용되는 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
*/
belowAreaStyle?: SVGStyleOrClass;
}
declare const BellCurveSeriesType = "bellcurve";
/**
* BellCurve 시리즈.
* {@page op.SeriesOptions#type}은 'bellcurve'이다.
* {@page source} 시리즈 데이터포인트들의 값을 바탕으로
* {@page https://ko.wikipedia.org/wiki/정규_분포 정규분포} 곡선을 표시한다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=bellcurve]
*/
interface BellCurveSeriesOptions extends AreaSeriesOptions {
/**
*/
type?: typeof BellCurveSeriesType;
/**
* 이 시리즈 data point들을 구성할 수 있는 데이터를 포함한 원본 시리즈.
* 시리즈 이름이나 index로 지정한다.
*
*/
source?: string | number;
/**
* @default 3
*/
sigmas?: number;
/**
* @default 5
*/
pointsInSigma?: number;
/**
* true면 {@page lineType} 설정과 관계없이 spline 곡선으로 표시한다.
*
* @default true
*/
curved?: boolean;
}
declare const BoxPlotSeriesType = "boxplot";
/**
* {@page https://en.wikipedia.org/wiki/Box_plot BoxPlot} 시리즈.
* {@page op.SeriesOptions#type}은 'boxplot'이다.
* 주요 값들의 대략적인 범위 및 분포를 표시하는 시리즈.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[min, low, mid, high, y]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, min, low, mid, high, y]|형깃 설명 순서대로 값 결정.
또는 {@page xField} 속성이 숫자이면 x값, {@page minField}는 min값,
{@page lowField}는 low값, {@page midField}는 mid값,
{@page highField}는 high값, {@page yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page minField}|속성 값, 또는 'min' 속성 값이 min 값이 된다.|
* |{@page lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@page midField}|속성 값, 또는 'mid' 속성 값이 mid 값이 된다.|
* |{@page highField}|속성 값, 또는 'high' 속성 값이 high 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=boxplot]
*/
interface BoxPlotSeriesOptions extends LowRangedSeriesOptions {
/**
*/
type?: typeof BoxPlotSeriesType;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 min값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 항목 수가 6이상이면 1 아니면 0, 객체이면 'min'.
*
*/
minField?: string;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 low값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 항목 수가 6이상이면 2 아니면 1, 객체이면 'low'.
*
*/
lowField?: string;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 mid값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 항목 수가 6이상이면 3 아니면 2, 객체이면 'mid'.
*
*/
midField?: string;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 high값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 항목 수가 6이상이면 4 아니면 3, 객체이면 'high'.
*
*/
highField?: string;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 max값을 지정하는 속성명이나 인덱스.
* undefined이면, {@page yField} 값으로 대체되거나 data point의 값이 array일 때는 항목 수가 6이상이면 5 아니면 4, 객체이면 'max'.
*
*/
maxField?: string;
/**
* @override
* @default '${name}
min: ${minValue}
low: ${lowValue}
mid: ${midValue}
high: ${highValue}
max: ${maxValue}'
*/
tooltipText?: string;
}
/**
* @enum
*/
declare const _BubbleSizeMode: {
readonly WIDTH: "width";
readonly AREA: "area";
};
/** @dummy */
type BubbleSizeMode = typeof _BubbleSizeMode[keyof typeof _BubbleSizeMode];
declare const BubbleSeriesType = "bubble";
/**
* 버블 시리즈.
* {@page op.SeriesOptions#type}은 'bubble'이다.
* x, y로 지정되는 위치와 z로 지정되는 크기 사이의 관계를 표시한다.
* 주로 원의 크기가 데이터포인트의 중요도를 나타낸다.
* X축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 [linear](/config/config/xAxis/linear)이다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y, z값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 y, z값. x 값은 순서에 따라 자동 결정.|
* |[y, z]|두 값 배열이면 y값과 z값. x 값은 순서에 따라 자동 결정.|
* |[x, y, z,]|세 값 이상이면 순서대로 x, y, z값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index. {@page zField}는 z값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page zField}|속성 값, 또는 'z' 속성 값이 z 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=bubble]
*/
interface BubbleSeriesOptions extends MarkerSeriesOptions {
/**
*/
type?: typeof BubbleSeriesType;
/**
* 버블 크기를 결정하는 방식.
*
* @default 'area'
*/
sizeMode?: BubbleSizeMode;
/**
* 버블 최소 크기.
*
* @default 10
*/
minSize?: PercentSize;
/**
* 버블 최대 크기.
*
* @default '20%'
*/
maxSize?: PercentSize;
/**
* @override
* @default 'x: ${x}
y: ${y}
volume: ${z}'
*/
tooltipText?: string;
}
declare const BumpSeriesType = "bump";
/**
* Bump 시리즈그룹.
* {@page op.SeriesOptions#type}은 'bump'이다.
* 포함된 시리즈들의 y값들을 비교해서 순위대로 시리즈를 표시한다.
* 즉, 포함된 시리즈들의 x값이 동일한 데이터포인트들의 y값들을 비교해서 각자의 순위를 yValue로 재설정하여 표시한다.
*
* @config chart.series[type=bump]
*/
interface BumpSeriesGroupOptions extends SeriesGroupOptions {
/**
*/
type?: typeof BumpSeriesType;
}
/**
* Candlestick 시리즈.
* {@page op.SeriesOptions#type}은 'candlestick'이다.
* 주식을 비롯한 유가증권과 파생상품, 환율 등의 가격 움직임을 보여주는 시리즈.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
* [주의] high와 y값은 동일한 값이다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[min, low, mid, high | y]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, min, low, mid, high | y]|형깃 설명 순서대로 값 결정.
또는 {@page xField} 속성이 숫자이면 x값, {@page minField}는 min값,
{@page lowField}는 low값, {@page midField}는 mid값,
{@page highField}는 high값, {@page yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@page openField}|속성 값, 또는 'open' 속성 값이 open 값이 된다.|
* |{@page closeField}|속성 값, 또는 'mid' 속성 값이 close 값이 된다.|
* |{@page highField}|속성 값, 또는 'high' 속성 값이 high 값이 된다. 지정하지 않으면 yField 값이 사용된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=candlestick]
*/
interface CandlestickSeriesOptions extends LowRangedSeriesOptions {
/**
*/
type?: CandlestickSeriesOptionsType;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 최저(low) 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 항목 수가 5이상이면 1, 아니면 0, 객체이면 'low'.
*
*/
lowField?: string;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 시작(open) 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 항목 수가 5이상이면 2, 아니면 1, 객체이면 'open'.
*
*/
openField?: string;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 종료(close) 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 항목 수가 5이상이면 3, 아니면 2, 객체이면 'close'.
*
*/
closeField?: string;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 최고(high) 값을 지정하는 속성명이나 인덱스.
* undefined이면, {@page yField} 값으로 대체되거나 data point의 값이 array일 때는 항목 수가 5이상이면 4, 아니면 3, 객체이면 'high'.
*
*/
highField?: string;
/**
* 값이 하락한 데이터포인트에 적용되는 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
*/
declineStyle?: SVGStyleOrClass;
/**
* @override
* @default '${name}
최저: ${lowValue}
시가: ${openValue}
종가: ${closeValue}
고가: ${highValue}'
*/
tooltipText?: string;
}
/**
*/
interface CircleBarPointLabelOptions extends DataPointLabelOptions {
/**
* @override
* @default 'inside'
*/
position?: PointLabelPosition;
}
declare const CircleBarSeriesType = "circlebar";
/**
* CirleBar 시리즈.
* {@page op.SeriesOptions#type}은 'circlebar'이다.
* 직사각형 대신 원형 막대로 여러 값들을 **비교**하는 데 사용한다.
* 원 지름이 y값을 나타낸다.
* X축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 {@page config.xAxis.category 카테고리축}이다.
*
*{@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=circlebar]
*/
interface CircleBarSeriesOptions extends BarSeriesBaseOptions {
/**
*/
type?: typeof CircleBarSeriesType;
}
declare const CircleBarSeriesGroupType = "circlebargroup";
/**
* CircleBar 시리즈그룹.
* {@page op.SeriesOptions#type}은 'circlebargroup'이다.
*
* @config chart.series[type=circlebargroup]
*/
interface CircleBarSeriesGroupOptions extends BarSeriesGroupBaseOptions {
/**
*/
type?: typeof CircleBarSeriesGroupType;
}
/** */
interface DumbbellSeriesMarkerOptions extends SeriesMarkerOptions {
/**
* @override
* @default 4
*/
radius?: number;
/**
* @override
* @default 'circle'
*/
shape?: Shape;
}
declare const DumbbellSeriesType = "dumbbell";
/**
* Dumbbell 시리즈.
* {@page op.SeriesOptions#type}은 'dumbbell'이다.
* Lollipop 시리즈의 변종으로 시간에 따른 두 값의 변화를 표시하는 등,
* 두 그룹 간의 차이나 관계를 표시하는 데 사용될 수 있다.
* 예를 들어, 두 기간 동안의 성장률, 두 그룹 간의 판매량 차이 변화 등을 보여 주는데 유용하다.
* 양 끝 두 개의 원이나 점 등을 선분으로 연결하여 표시한다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공해야 한다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 low, y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[low, y]|두 값 배열이면 low값과 y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, low, y,]|세 값 이상이면 순서대로 x, low, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page lowField}는 low값의 index. {@page yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=dumbbell]
*/
interface DumbbellSeriesOptions extends LowRangedSeriesOptions {
/**
*/
type?: typeof DumbbellSeriesType;
/**
*/
marker?: DumbbellSeriesMarkerOptions;
/**
*/
lowMarker?: DumbbellSeriesMarkerOptions;
}
declare const EqualizerSeriesType = "equalizer";
/**
* Eqaulizer 시리즈.
* {@page op.SeriesOptions#type}은 'equalizer'이다.
* Bar를 여러 개의 segment로 나눠 표시한다.
* 수평 또는 수직 막대로 여러 값들을 **비교**하는 데 사용한다.
* 막대의 길이가 y값을 나타낸다.
* X축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 {@page config.xAxis.category 카테고리축}이다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=equalizer]
*/
interface EqualizerSeriesOptions extends BasedSeriesOptions {
/**
*/
type?: typeof EqualizerSeriesType;
/**
*/
backStyle?: SVGStyleOrClass;
/**
*/
maxCount?: number;
/**
*/
segmentSize?: PercentSize;
/**
*/
segmentGap?: number;
/**
*/
segmented?: boolean;
}
/**
*/
interface LowRangedSeriesOptions extends RangedSeriesOptions {
/**
*/
lowField?: string;
/**
*/
highField?: string;
}
declare const ErrorBarSeriesType = "errorbar";
/**
* ErrorBar 시리즈.
* {@page op.SeriesOptions#type}은 'errorbar'이다.
* 오류(차)를 나타내는 막대를 표시한다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공해야 한다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 low, y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[low, y]|두 값 배열이면 low값과 y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, low, y,]|세 값 이상이면 순서대로 x, low, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page lowField}는 low값의 index. {@page yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=errorbar]
*/
interface ErrorBarSeriesOptions extends LowRangedSeriesOptions {
/**
*/
type?: typeof ErrorBarSeriesType;
/**
* @override
* @default 0.3
*/
pointPadding?: number;
/**
* @override
* @default '${name}
${series}: ${lowValue} ~ ${highValue}'
*/
tooltipText?: string;
}
/**
* funnel 시리즈의 point label 옵션.
* position이 'auto'이면 'inside'로 표시된다.
* 라벨들이 겹치면 값이 적은 것들 순서대로 감춘다.
*/
interface FunnelSeriesLabelOptions extends WidgetSeriesLabelOptions {
/**
* true로 지정하면 반대쪽(왼편)에 표시한다.
*/
opposite?: boolean;
}
declare const FunnelSeriesType = "funnel";
/**
* Funnel 시리즈.
* {@page op.SeriesOptions#type}은 'funnel'이다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* // TODO #fiddle series/funnel-series Funnel Series
* @css 'rct-funnel-series'
* @config chart.series[type=funnel]
*/
interface FunnelSeriesOptions extends WidgetSeriesOptions {
/**
*/
type?: typeof FunnelSeriesType;
/**
* @override
*/
pointLabel?: FunnelSeriesLabelOptions;
/**
* @default '85%'
*/
width?: PercentSize;
/**
* @default '90%'
*/
height?: PercentSize;
/**
* @default '30%'
*/
neckWidth?: PercentSize;
/**
* @default '30%'
*/
neckHeight?: PercentSize;
/**
* @default false
*/
reversed?: boolean;
/**
* @override
* @default false
*/
legendByPoint?: boolean;
}
/**
* @enum
*/
declare const _BinsNumber: {
readonly SQURE_ROOT: "squreRoot";
readonly STURGES: "struges";
readonly RICE: "rice";
};
/** @dummy */
type BinsNumber = typeof _BinsNumber[keyof typeof _BinsNumber];
declare const HistogramSeriesType = "histogram";
/**
* Histogram 시리즈.
* {@page op.SeriesOptions#type}은 'histogram'이다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-histogram-series'
* @config chart.series[type=histogram]
*/
interface HistogramSeriesOptions extends ConnectableSeriesOptions {
/**
*/
type?: typeof HistogramSeriesType;
/**
* @default 0
*/
baseValue?: number;
/**
*/
minValue?: number;
/**
*/
maxValue?: number;
/**
* @default 'squreRoot'
*/
binsNumber?: number | BinsNumber;
/**
*/
binWidth?: number;
}
declare const ArearangeSeriesType = "arearange";
/**
* AreaRange 시리즈.
* {@page op.SeriesOptions#type}은 'arearange'이다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공해야 한다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 low, y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[low, y]|두 값 배열이면 low값과 y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, low, y,]|세 값 이상이면 순서대로 x, low, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page lowField}는 low값의 index. {@page yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=arearange]
*/
interface AreaRangeSeriesOptions extends LineSeriesBaseOptions {
/**
*/
type?: typeof ArearangeSeriesType;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 낮은(low) 값을 지정하는 속성명이나 인덱스.\
* undefined이면, data point의 값이 array일 때는 항목 수가 3이상이면 1, 아니면 0, 객체이면 'low'.
*
*/
lowField?: string;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 높은(high) 값을 지정하는 속성명이나 인덱스.\
* undefined이면, data point의 값이 array일 때는 항목 수가 3이상이면 2, 아니면 1, 객체이면 'high'.
*
*/
highField?: string;
/**
* area 영역에 추가적으로 적용되는 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
*/
areaStyle?: SVGStyleOrClass;
/**
* true면 {@page lineType} 설정과 관계없이 spline 곡선으로 표시한다.
*
* @default false
*/
curved?: boolean;
/**
* @default '${name}
${series}: ${lowValue} ~ ${highValue}'
*/
tooltipText?: string;
}
/**
*/
interface LollipopSeriesMarkerOptions extends SeriesMarkerOptions {
/**
* @override
* @default 4
*/
radius: number;
/**
* @override
* @default 'circle'
*/
shape: Shape;
}
declare const LollipopSeriesType = "lollipop";
/**
* Lollipop(막대 사탕) 시리즈.
* {@page op.SeriesOptions#type}은 'lollipop'이다.
* 기능적으로는 bar 시리즈와 동일하지만, 대부분의 데이터포인트 값들이 최대값에 가까운 곳에 몰려 있는 경우에
* 활용 가능하다. bar 시리즈 표현하면 시각적으로 구분하기 쉽지 않기 때문이다.
* 특히, bar가 겹치더라도 데이터포인트들이 쉽게 구분된다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=lollipop]
*/
interface LollipopSeriesOptions extends BasedSeriesOptions {
/**
*/
type?: typeof LollipopSeriesType;
/**
*/
marker?: LollipopSeriesMarkerOptions;
}
declare const OhlcSeriesType = "ohlc";
/**
* Ohlc 시리즈.
* {@page op.SeriesOptions#type}은 'ohlc'이다.
* 시가-고가-저가-종가 차트.
* 시간 경과에 따른 가격의 움직임을 설명하는 데 사용된다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
* [주의] high와 y값은 동일한 값이다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[min, low, mid, high | y]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, min, low, mid, high | y]|형깃 설명 순서대로 값 결정.
또는 {@page xField} 속성이 숫자이면 x값, {@page minField}는 min값,
{@page lowField}는 low값, {@page midField}는 mid값,
{@page highField}는 high값, {@page yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@page openField}|속성 값, 또는 'open' 속성 값이 open 값이 된다.|
* |{@page closeField}|속성 값, 또는 'mid' 속성 값이 close 값이 된다.|
* |{@page highField}|속성 값, 또는 'high' 속성 값이 high 값이 된다. 지정하지 않으면 yField 값이 사용된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=ohlc]
*/
interface OhlcSeriesOptions extends CandlestickSeriesOptions {
/**
*/
type?: typeof OhlcSeriesType;
}
declare const ParetoSeriesType = "pareto";
/**
* Pareto 시리즈
* {@page op.SeriesOptions#type}은 'pareto'이다.
* 참조하는 원본 시리즈의 누적 비율을 표시한다.
* {@page source}로 지정된 시리즈의 데이터포인트 값들로 부터 누적 포인트들을 계산해서 표시한다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=pareto]
*/
interface ParetoSeriesOptions extends LineSeriesBaseOptions {
/**
*/
type?: typeof ParetoSeriesType;
/**
* 이 시리즈 data point들을 구성할 수 있는 데이터를 포함한 원본 시리즈.
*
* 시리즈 이름이나 index로 지정한다.
*/
source?: string | number;
/**
* true면 spline 곡선으로 표시한다.
*
*
* @default false
*/
curved?: boolean;
}
/**
* {@page config.sereies.pie 'pie'} 시리즈와 같은 원형 시리즈에 대한 설정 옵션
* 직교 좌표계가 표시된 경우, {@page config.body body} 영역을 기준으로
* {@link size}, {@link centerX}, {@link centerY}가 적용된다.
* //TODO: 현재 PieSeris만 계승하고 있다. 추후 PieSeries에 합칠 것.
*/
interface RadialSeriesOptions extends WidgetSeriesOptions {
/**
* 시리즈 원호의 반지름.
* 픽셀 크기나 {@page config.body body} 영역 크기에 대한 상대적 크기로 지정할 수 있다.
* '50%'로 지정하면 plot 영역의 width나 height중 작은 크기와 동일한 반지름으로 표시된다.
*
* @default '40%
*/
radius?: PercentSize;
/**
* 시리즈 원호 시작 각도.
* 지정하지 않거나 잘못된 값이면 0으로 계산된다.
* 0은 시계의 12시 위치다.
*
* @default 0
*/
startAngle?: number;
/**
* 시리즈 원호 전체 각도.
* 0 ~ 360 사이의 값으로 지정해야 한다.
* 범위를 벗어난 값은 범위 안으로 조정된다.
* 지정하지 않거나 잘못된 값이면 360으로 계산된다.
*
* @default 360
*/
totalAngle?: number;
/**
* true면 시계 방향으로 회전한다.
*
* @default true
*/
clockwise?: boolean;
}
/**
*/
interface PieSeriesTextOptions extends IconedTextOptions {
/**
* 텍스트와 함께 출력 될 아이콘의 경로
*/
icon?: string;
}
/**
* 데이터포인트 라벨의 회전 방식 지정.
* @enum
*/
declare const _PointLabelRotationMode: {
/**
* 호를 따라 label을 회전 시킨다.
*/
readonly ARC: "arc";
/**
* 중심각에 따라 label을 회전시킨다.
*/
readonly ANGLE: "angle";
};
/** @dummy */
type PointLabelRotationMode = typeof _PointLabelRotationMode[keyof typeof _PointLabelRotationMode];
/**
* pie 시리즈의 point label 옵션.
* position이 'auto'이면 'inside'로 표시된다.
* 라벨들이 겹치면 값이 적은 것들 순서대로 감춘다.
*/
interface PieSeriesLabelOptions extends WidgetSeriesLabelOptions {
/**
* {@page position}이 'inside'가 될 때,
* label의 중심점이 되는 위치를 pie 전체 원에 대한 **0~1** 사이의 상대값으로 지정한다.
* 이 속성값과 {@page offset} 속성값의 합으로 위치가 정해진다.
*
* @default 0.7
*/
radius?: number;
/**
* {@page autoRatation}이 true 일때,
* label의 회전 방식을 지정한다.
*
* @default 'arc'
*/
rotationMode?: PointLabelRotationMode;
}
declare const PieSeriesType = "pie";
/**
* Pie 시리즈
* {@page op.SeriesOptions#type}은 'pie'이다.
* 모든 데이터포인트 값들의 합에 대한 데이터포인트의 상대적 값 비율을 원호로 표시한다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=pie]
*/
interface PieSeriesOptions extends RadialSeriesOptions {
/**
*/
type?: typeof PieSeriesType;
/**
* @override
*/
pointLabel?: PieSeriesLabelOptions;
/**
* @default 1
*/
groupSize?: number;
/**
* 0보다 큰 값을 지정해서 도넛 형태로 표시할 수 있다.
* 시리즈 원호의 반지름에 대한 상대적 크기나 픽셀 수로 지정할 수 있다.
* {@page innerText}로 도넛 내부에 표시될 텍스트를 지정할 수 있다.
*/
innerRadius?: PercentSize;
/**
* @default '7%'
*/
sliceOffset?: PercentSize;
/**
* 클릭한 데이터 포인트를 slice 시킨다.
* 기존 slice 됐던 포인트는 원복된다.
*
* @default true
*/
autoSlice?: boolean;
/**
* Slice animation duration.
* 밀리세컨드(ms) 단위로 지정.
*
* @default 300
*/
sliceDuration?: number;
/**
* @default 0
*/
/**
* {@page innerRadius}가 0보다 클 때, 도넛 내부에 표시되는 텍스트.
* 기본 클래스 selector는 'rct-pie-series-inner'이다.
*/
innerText?: PieSeriesTextOptions;
}
declare const ScatterSeriesType = "scatter";
/**
* Scatter 시리즈.
* {@page op.SeriesOptions#type}은 'scatter'이다.
* 데이터포인트를 shape로 표시되는 점 하나로 표시한다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=scatter]
*/
interface ScatterSeriesOptions extends MarkerSeriesOptions {
/**
*/
type?: typeof ScatterSeriesType;
/**
* 시리즈 데이터포인트들의 **x** 위치에 추가되는 무작위 변화 값.
* 동일하거나 유사한 값의 여러 데이터 포인트가 있는 경우
* 포인트 간의 중첩을 방지하고 데이터의 분포를 더 명확하게 나타내기 위해 사용된다.
* https://thomasleeper.com/Rcourse/Tutorials/jitter.html
*
* @default 0
*/
jitterX?: number;
/**
* 시리즈 데이터포인트들의 **y** 위치에 추가되는 무작위 변화 값.
* 동일하거나 유사한 값의 여러 데이터 포인트가 있는 경우
* 포인트 간의 중첩을 방지하고 데이터의 분포를 더 명확하게 나타내기 위해 사용된다.
* https://thomasleeper.com/Rcourse/Tutorials/jitter.html
*
* @default 0
*/
jitterY?: number;
/**
* 데이터포인트 {@page shape 도형}의 반지름.
*
* @default 5
*/
radius?: number;
/**
* 데이터포인트 위에 마우스가 있을 때 표시되는 기본 확장 효과에 적용되는 scale.
*
* @default 1.8
*/
hoverScale?: number;
}
/**
*/
interface RangedSeriesOptions extends ClusterableSeriesOptions {
}
declare const WaterfallSeriesType = "waterfall";
/**
* 폭포(Waterfall) 시리즈.
* {@page op.SeriesOptions#type}은 'waterfall'이다.
* 순서대로 추가되는 증가/감소 값들의 누적 상태를 표시하는 데 사용된다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |isSum|이 속성이 true이면, 해당 포인트는 이전 값들의 전체 합계를 나타낸다.|
* |isMid|이 속성이 true이면, 해당 포인트는 시리즈 시작부터 또는 이전 중간 합계 이후의 누적 합계를 나타낸다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=waterfall]
*/
interface WaterfallSeriesOptions extends ClusterableSeriesOptions {
/**
*/
type?: typeof WaterfallSeriesType;
/**
* 지정한 반지름 크기로 데이터포인트 bar의 모서리를 둥글게 표시한다.\
* 최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.
*
*/
cornerRadius?: number;
/**
* y 값이 0보다 작은 데이터 포인트에 적용되는 color 값
*/
negativeColor?: string;
/**
* isSum을 true로 지정한 데이터 포인트에 적용되는 color 값
*/
sumColor?: string;
}
/**
* @enum
*/
declare const _TreemapAlgorithm: {
/**
* 최대한 정사각형에 가까운 비율을 유지한다.
*
* 줄마다 배치 방향을 바꾼다.
* 사용자가 크기를 비교하기에 유리하다.
* @config
*/
readonly SQUARIFY: "squarify";
/**
* 최대한 정사각형에 가까운 비율을 유지한다.
*
* 같은 방향을 유지하면 배치한다.
* @config
*/
readonly STRIP: "strip";
/**
* 수평/수직 한 쪽 방향으로 나눈다.
*
* level이 바뀌면 방향을 바꾼다.
* @config
*/
readonly SLICE: "slice";
/**
* 방향을 번갈아 가면서 나눈다.
* @config
*/
readonly SLICE_DICE: "sliceDice";
};
/** @dummy */
type TreemapAlgorithm = typeof _TreemapAlgorithm[keyof typeof _TreemapAlgorithm];
/**
*/
interface TreeGroupHeadOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
}
declare const TreemapSeriesType = "treemap";
/**
* Treemap 시리즈.
* {@page op.SeriesOptions#type}은 'treemap'이다.
* 차트나 split pane에 하나의 treemap만 존재할 수 있다.
*
* //1. 본래 하드 드라이브의 파일 분포 상태를 표시하기 위해 고안됨.
* //2. node & link 스타일의 전통적 표시 방식은 공간을 많이 필요로 한다.
* //3. 일정 표시 공간을 100% 사용한다.
* //4. 초기 공간을 재귀적으로 나누어 가면서 구성한다.
*
* // TODO: grouping된 data 설정 가능하도록 한다. `data[{data:[]}, {data:[]}]`
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
* [주의] id, group 값은 문자열로 변환돼 사용된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y, id, grup]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, y, id, group]|형깃 설명 순서대로 값 결정.
또는 {@page xField} 속성이 숫자이면 x값, {@page yField}는 y값,
{@page idField}는 id값, {@page groupField}는 group값,
.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page idField}|속성 값, 또는 'id' 속성 값이 length 값이 된다.|
* |{@page groupField}|속성 값, 또는 'group' 속성 값이 angle 값이 된다.|
*
* @config chart.series[type=treemap]
* @modules treemap
*/
interface TreemapSeriesOptions extends SeriesOptions {
/**
*/
type?: typeof TreemapSeriesType;
/**
* @default 'id'
*/
idField?: string;
/**
* @default 'group'
*/
groupField?: string;
/**
* 노든 분할 알고리즘.
*
* @default 'squarify'
*/
algorithm?: TreemapAlgorithm;
/**
* 수직, 수평으로 방향을 바꾸어 가며 배치한다.
*
* @default true
*/
alternate?: boolean;
/**백
* 시작 방향.
* 지정하지 않으면 ploting 영역의 너비/높이 비율 기준으로 정해진다.
*/
startDir?: 'vertical' | 'horizontal';
/**
* tree level이 2 이상일 때 그룹 헤더를 표시하고, 자식들을 감추거나 표시할 수 있도록 한다.
*
* @default true
*/
groupMode?: boolean;
/**
* group mode일 때 group 레벨별 표시 방식 지정.
*/
/**
* 툴팁 표시 기준 level.
* 값을 지정하지 않거나 범위를 벗어나면 마우스 아래 표시되는 node의 툴팁을 표시한다.
*/
tooltipLevel?: number;
}
declare const HeatmapSeriesType = "heatmap";
/**
* Heatmap 시리즈.
* {@page op.SeriesOptions#type}은 'heatmap'이다.
* 숫자 대신 색상으로 값들을 table에 표시한다.
* 차트나 split pane에 하나의 heatmap만 존재할 수 있다.
*
* //[셀 색상]
* //1. color-axis가 연결되면 거기에서 색을 가져온다.
* //2. series의 minColor, maxColor 사이의 색으로 가져온다.
* //3. series의 기본 색상과 흰색 사이의 색으로 가져온다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y, z값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 y, z값. x 값은 순서에 따라 자동 결정.|
* |[y, z]|두 값 배열이면 y값과 z값. x 값은 순서에 따라 자동 결정.|
* |[x, y, z,]|세 값 이상이면 순서대로 x, y, z값.
또는 {@page xField} 속성이 숫자이면 x값의 index. {@page yField}는 y값의 index. {@page zField}는 z값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page zField}|속성 값, 또는 'z' 속성 값이 z 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @config chart.series[type=heatmap]
* @modules heatmap
*/
interface HeatmapSeriesOptions extends Omit {
/**
*/
type?: typeof HeatmapSeriesType;
/**
* @override
* @default 'x: ${x}
y: ${y}
heat: ${z}'
*/
tooltipText?: string;
}
/**
* vector 화살표 회전 중심.
* @enum
*/
declare const _VectorOrigin: {
/**
* 데이터포인트 (x, y) 위치가 vector 화살표의 중점이 되게 회전한다.
*
* @config
*/
readonly CENTER: "center";
/**
* 데이터포인트 (x, y) 위치가 vector 화살표의 시작점이 되게 회전한다.
*
* @config
*/
readonly START: "start";
/**
* 데이터포인트 (x, y) 위치가 vector 화살표의 끝점이 되게 회전한다.
*
* @config
*/
readonly END: "end";
};
/** @dummy */
type VectorOrigin = typeof _VectorOrigin[keyof typeof _VectorOrigin];
/**
* 화살 머리 종류.
* @enum
*/
declare const _ArrowHead: {
/**
* 머리를 따로 표시하지 않는다.
*
* @config
*/
readonly NONE: "none";
/**
* 닫힌 삼각형.
*
* @config
*/
readonly CLOSE: "close";
/**
* 열린 삼각형.
*
* @config
*/
readonly OPEN: "open";
};
/** @dummy */
type ArrowHead = typeof _ArrowHead[keyof typeof _ArrowHead];
declare const VectorSeriesType = "vector";
/**
* Vector 시리즈.
* {@page op.SeriesOptions#type}은 'vector'이다.
* x, y로 지정된 데이터포인트에 길이과 방향을 갖는 화살표를 표시한다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y, length, angle]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, y, length, angle]|형깃 설명 순서대로 값 결정.
또는 {@page xField} 속성이 숫자이면 x값, {@page yField}는 y값,
{@page lengthField}는 length값, {@page angleField}는 angle값,
.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page lengthField}|속성 값, 또는 'length' 속성 값이 length 값이 된다.|
* |{@page angleField}|속성 값, 또는 'angle' 속성 값이 angle 값이 된다.|
*
* @config chart.series[type=vector]
* @modules vector
*/
interface VectorSeriesOptions extends Omit {
/**
*/
type?: typeof VectorSeriesType;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 길이(length) 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 항목 수가 3이상이면 1, 아니면 0, 객체이면 'length'.
*
*/
lengthField?: string;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 각도(angle) 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 항목 수가 3이상이면 2, 아니면 1, 객체이면 'angle'.
*
*/
angleField?: string;
/**
* vector 화살표 회전 중심.
*
* @default 'center'
*
*/
origin?: VectorOrigin;
/**
* 최대 길이.
*
* @default 20
*/
maxLength?: number;
/**
* 시작 각도.
* 12시 위치가 0도.
*
* @default 0
*/
startAngle?: number;
/**
* 화살표 머리 타입.
*
* @default 'close'
*/
arrowHead?: ArrowHead;
}
declare const WordCloudSeriesType = "wordcloud";
/**
* Word cloud 시리즈.
* {@page op.SeriesOptions#type}은 'wordcloud'이다.
* 빈도(weight, 또는 중용도)와 함께 지정된 단어 묶음에 포함된 단어들을 빈도에 따라 텍스트 크기를 비례적으로 표시한다.
* 전체 텍스트나 단어 목록 내에서 중요한 용어나 핵심 키워드, 또는 주제 등을 강조하는 용도로 사용된다.
* 'tag cloud'로도 불린다.
* {@page data} 대신 {@page text} 속성을 지정하면 단어들을 추출해서 data를 구성한다.
*
* {@page data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |[x, y,]|두 값 이상이면 순서대로 name, value값.
* 또는 {@page xField} 속성이 숫자이면 x값의 index.
* {@page yField}는 y값의 index.
{@page colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@page xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@page yField}|속성 값, 또는 'y', 'value', 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@page colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@page iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* // TODO #fiddle series/wordcloud-series WordCloud Series
* @css 'rct-wordcloud-series'
* @config chart.series[type=wordcloud]
* @modules wordcloud
*/
interface WordCloudSeriesOptions extends WidgetSeriesOptions {
/**
* 표시할 단어들이 포함된 전체 텍스트.
* 이 속성에 비어 있지 않은 문자열이 설정되면 {@page data}는 무시된다.
*/
text?: string;
/**
* {@page text}에서 단어를 추출할 때 제외할 단어들을 배열로 지정한다.
*/
excludes?: string[];
/**
* {@page text}에서 단어를 추출한 후 표시할 단어들의 최대 개수.
* 빈도수가 작은 단어들이 제외된다.
*
* @default 100
*/
maxCount?: number;
/**
* 지정한 값을 log base로 한 로그 연산으로 값들을 계산한다.
* 2 이상 값으로 지정해야 한다.
*/
logBase?: number;
/**
* 배치된 전체 영역이 시리즈 영역보다 작은 경우 시리즈 크기에 맞게 확대한다.
*
* @default true
*/
autoScale?: boolean;
/**
* {@page text}에서 단어를 추출한 후 표시할 단어들의 최소 빈도수(데이터포인트 y값).
* 이 값 보다 작은 빈도수를 갖는 단어들은 표시되지 않는다.
*/
minWeight?: number;
/**
* {@page text}에서 단어를 추출한 후 표시할 단어들의 최소 길이.
* 이 값 보다 작은 길이의 단어들은 표시되지 않는다.
*/
minLength?: number;
/**
* 시리즈 배치 기준이되는 각 단어의 높이 비율로 눈으로 보이는 폰트 높이와 계산되는 높이를 조정한다.
* 'auto'로 지정하면 각 텍스트이 실제 표시 높이를 계산해서 배치한다.
* 숫자값은 0.1 ~ 2 사이의 값으로 조정된다.
* @default 'auto'
*/
textHeight?: number | 'auto';
/**
* 가장 작은 빈도수 단어들에 설정되는 픽셀 단위의 폰트 크기.
* 값 범주: 8 ~ 15
* 0 ~ 1 사이 값은 값 범주의 정규화된 값으로 처리한다.
*
* @default 0
*/
minFontSize?: PercentSize;
/**
* 가장 큰 빈도수 단어들에 설정되는 픽셀 단위의 폰트 크기.
* 값 범주: '5%' ~ '15%'
* 0 ~ 1 사이 값은 값 범주의 정규화된 값으로 처리한다.
*
* @default 1
*/
maxFontSize?: PercentSize;
/**
* true로 지정하면 단어 마다 다른 색으로 표시한다.
* 색상들은 {@page palette}나 {@page colors}로 지정할 수 있다.
*
* @default true
*/
colorByPoint?: boolean;
/**
* 단어를 구성하는 모양.
*
* @default 'rectangle'
*/
frame?: 'circle' | 'ellipse' | 'rectangle' | 'square';
/**
* true로 지정하면 차트가 새로 표시되거나 데이터가 변경될 때, 단어들의 위치가 디르게 표시된다.
*
* @default false
*/
shuffle?: boolean;
/**
* 단어 사이의 최소 수평 간격을 시리즈 내부 단위로 표시한다.
*/
wordGap?: number;
/**
* 단어 배치 각도와 관련된 random 값
* 0 ~ 360 사이의 값으로 지정한다.
*/
seed?: number;
/**
* 일부 텍스트를 수직으로 배치한다.
*/
rotation?: boolean;
/**
* @ignore
* 배치 알고리즘
*
* @default 'default'
*/
placer?: 'default' | 'spiral';
}
/** @enum */
declare const CandlestickSeriesTypes: {
readonly CandlestickSeriesType: "candlestick";
readonly OhlcSeriesType: "ohlc";
};
/** @dummy */
type CandlestickSeriesOptionsType = typeof CandlestickSeriesTypes[keyof typeof CandlestickSeriesTypes];
/** @enum */
declare const AreaSeriesTypes: {
readonly AreaSeriesType: "area";
readonly BellCurveSeriesType: "bellcurve";
};
/** @dummy */
type AreaSeriesOptionsType = typeof AreaSeriesTypes[keyof typeof AreaSeriesTypes];
/** @enum */
declare const LineSeriesTypes: {
readonly LineSeriesType: "line";
readonly AreaSeriesType: "area";
readonly SplineSeriesType: "spline";
readonly BellCurveSeriesType: "bellcurve";
};
/** @dummy */
type LineSeriesOptionsType = typeof LineSeriesTypes[keyof typeof LineSeriesTypes];
/** @dummy */
type SeriesOptionsType = SeriesOptions | SeriesGroupOptions | BarRangeSeriesOptions | BarSeriesOptions | BarSeriesGroupOptions | BellCurveSeriesOptions | BoxPlotSeriesOptions | BubbleSeriesOptions | BumpSeriesGroupOptions | CandlestickSeriesOptions | CircleBarSeriesOptions | DumbbellSeriesOptions | EqualizerSeriesOptions | ErrorBarSeriesOptions | FunnelSeriesOptions | HistogramSeriesOptions | AreaRangeSeriesOptions | AreaSeriesOptions | LineSeriesOptions | LineSeriesGroupOptions | SplineSeriesOptions | LollipopSeriesOptions | OhlcSeriesOptions | ParetoSeriesOptions | PieSeriesOptions | PieSeriesGroupOptions | ScatterSeriesOptions | WaterfallSeriesOptions | TreemapSeriesOptions | HeatmapSeriesOptions | VectorSeriesOptions;
/**
* 차트 제목(title) 설정 옵션.
* 기본적으로 차트 중앙 상단에 표시되지만 {@page align}, {@page verticalAlign} 등으로 위치를 변경할 수 있다.
* 별도 설정이 없으면 'Title' 문자열이 표시된다. 또, {@page config.subtitle 부제목}을 별도로 표시할 수 있다.
*
* ```js
* const config = {
* title: {
* text: '2024 년간 자료 현황',
* align: 'left',
* ...
* },
* };
* ```
*
* {@page guide.title 타이틀 개요} 페이지를 참조한다.
*
* @css 'rct-title'
* @config chart.title
*/
interface TitleOptions extends ChartItemOptions {
/**
* @override
*
* true로 설정되고 {@page text}가 설정된 경우에만 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 제목 텍스트.
*
* @default 'Title'
*/
text?: string;
/**
* 정렬 기준.
* 시리즈들이 그려지는 plotting 영역이나,
* 차트 전체 영역을 기준으로 할 수 있다.
* 또, {@page config.subtitle 부제목}인 경우 제목을 기준으로 위치를 지정할 수 있다.
*
* @default 'body'
*/
alignBase?: AlignBase;
/**
* 수평 정렬.
*
* @default 'center'
*/
align?: Align;
/**
* 수직 정렬.
*
* @default 'middle'
*/
verticalAlign?: VerticalAlign;
/**
* 배경 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 주 제목과 부 제목이 표시되는 영역과 차트 본체 등 과의 간격.
* 주 제목이 표시되면 (부 제목의 값은 무시되고)주 제목의 값을 사용하고,
* 부 제목만 표시될 때는 부 제목의 값을 사용한다.
*
* @default 10
*/
gap?: number;
}
/**
* 부제목 표시 위치.
* @enum
*/
declare const _SubtitlePosition: {
/**
* 주제목 아래쪽에 표시.
*
* @config
*/
readonly BOTTOM: "bottom";
/**
* 주제목 오른쪽에 표시.
*
* @config
*/
readonly RIGHT: "right";
/**
* 주제목 왼쪽에 표시.
*
* @config
*/
readonly LEFT: "left";
/**
* 주제목 위쪽에 표시.
*
* @config
*/
readonly TOP: "top";
};
/** @dummy */
type SubtitlePosition = typeof _SubtitlePosition[keyof typeof _SubtitlePosition];
/**
* 차트 제목 주위에 표시되는 부제목 옵션.
* 기본적으로 주제목(title)의 설정을 따르고, 몇가지 속성들이 추가된다.
* 별도 설정이 없으면 표시되지 않는다.
*
* ```js
* const config = {
* title: {},
* subtitle: {
* visible: true,
* text: '출처: UN Data, 2020',
* },
* };
* ```
*
* {@page guide.title 제목 개요} 페이지를 참조한다.
*
* @css 'rct-subtitle'
* @config chart.subtitle
*/
interface SubtitleOptions extends TitleOptions {
/**
* 표시 위치.
*
* @default 'bottom'
*/
position?: SubtitlePosition;
/**
* 주 제목과 사이의 간격.
*
* @default 2
*/
titleGap?: number;
/**
* @override
* @default 'bottom'
*/
verticalAlign?: VerticalAlign;
/**
* @override
* @default ''
*/
text?: string;
}
/**
* 차트 전체에 영향을 미치는 옵션들.
*
* ```js
* const config = {
* options: {
* theme: 'dark',
* },
* };
* ```
*
* @config chart.options
*/
interface ChartOptionsOptions extends ChartItemOptions {
/**
* theme 이름.
* **realreport-style.css**에 기본 theme이 정의되어 있다.
*/
theme?: string;
/**
* 시리즈 및 데이터포인트에 적용되는 기본 색상 팔레트 이름.
*/
palette?: string;
/**
* {@page palette}로 지정된 팔레트 색상들을 시리즈에 적용하는 방식.
*
* @default 'normal'
*/
paletteMode?: PaletteMode;
/**
* 시리즈 옵션 colorByPoint가 true일 때 적용되는 데이터포인트들의 색상 목록.
* 시리즈 옵션 colors가 지정되면 이 속성은 무시된다.
*/
colors?: string[];
/**
* false로 지정하면 차트 전체척으로 animation 효과를 실행하지 않는다.
*
* @default true
*/
animatable?: boolean;
/**
* javascript에서 숫자 단위로 전달되는 날짜값은 기본적으로 local이 아니라 new Date 기준이다.
* 그러므로 보통 숫자로 지정된 날짜값은 utc 값이다.
* local 기준으로 표시하기 위해, 숫자로 지정된 날짜값에 더해야 하는 시간을 분단위로 지정한다.
* ex) 한국은 -9 * 60
*
* 명시적으로 지정하지 않으면 현재 위치에 따른 값으로 자동 설정된다.
* [주의] 차트 로딩 후 변경할 수 없다.
*
* @default 지역 시간의 timezone offset.
*/
timeOffset?: number;
/**
* 한 주의 시작 요일.
* ex) 0: 일요일, 1: 월요일
*
* [주의] 차트 로딩 후 변경할 수 없다.
*
* @default 0
*/
startOfWeek?: number;
/**
* x축 값이 설정되지 않은 시리즈 첫번째 데이터 point에 설정되는 x값.
* 이 후에는 {@page xStep}씩 증가시키면서 설정한다.
* 시리즈의 {@page Series.xStart}가 설정되면 그 값이 사용된다.
* 값이 지정되지 않으면 'log' 축일 때 1, 아니면 0으로 계산된다. // #528
*/
xStart?: number;
/**
* x축 값이 설정되지 않은 데이터 point에 지정되는 x값의 간격.\
* 첫번째 값은 {@page xStart}로 설정한다.
* time 축일 때, 정수 값 대신 시간 단위('y', 'm', 'd', 'h', 'n', 's')로 지정할 수 있다.
* 시리즈의 {@page Series.xStep}이 설정되면 그 값이 사용된다.
*
* @default 1
*/
xStep?: number | string;
/**
* 복수 axis가 표시되는 경우 axis 사이의 간격
*
* @default 8
*/
axisGap?: number;
/**
* 크레딧 모델.
*
*/
credits?: CreditsOptions;
/**
* 데이터포인트에 마우스가 올라가면 나머지 시리즈들을 반투명 처리해서 연결된 데이터포인터의 시리즈를 강조한다.
*
* @default false
*/
seriesHovering?: boolean;
/**
* 데이터포인트에 마우스가 올라갈 때 처리하는 방식.
*
*/
pointHovering?: PointHoveringOptions;
}
/**
*/
interface BackgroundImageOptions extends ChartItemOptions {
/**
*/
url?: string;
}
/**
* @enum
*/
declare const _ZoomType: {
/**
*/
readonly NONE: "none";
/**
*/
readonly X: "x";
/** @ignore 미구현 */
readonly Y: "y";
/** @ignore 미구현 */
readonly BOTH: "both";
};
/** @dummy */
type ZoomType = typeof _ZoomType[keyof typeof _ZoomType];
/**
*/
interface ZoomButtonOptions extends ChartItemOptions {
/**
* @override
*
* 명시적 false로 지정한 경우가 아닐 때,
* 이미 zoom된 상태이거나, zoom 가능하면 표시된다.
* @default undefined
*/
visible?: boolean;
}
/**
*/
interface EmptyViewOptions extends ChartTextOptions {
/**
* @override
*
* false로 지정하면 표시돼야할 상황에서도 표시되지 않는다.
*
* @default undefined
*/
visible?: boolean;
/**
* @override
*
* 표시할 텍스트.
* 지정하지 않으면 ''표시할 데이터가 없습니다.'가 표시된다.
* 또, split pane인 경우 지정하지 않으면 먼저 기본 body에 설정된 값으로 표시된다.
*
* @default undefined
*/
text?: string;
}
/**
* 원본값과 계산된 좌표값이 포함된 포인트
*/
interface ChartPoint {
/**
* x값
*/
x: any;
/**
* x좌표 값
*/
xValue: any;
/**
* y값
*/
y: any;
/**
* y좌표 값
*/
yValue: any;
/**
* z값
*/
z: any;
/**
* z좌표 값
*/
zValue: any;
}
/**
* zoom 될 때 호출되는 콜백의 매개변수로 사용된다.
*/
interface ZoomCallbackArgs {
/**
* RealChart의 공개 {@page api.Chart} 모델
*/
chart: object;
/**
* Series 객체 배열
*/
series: object[];
/**
* zoom 영역 xAxis 시작 값
*/
from: number;
/**
* zoom 영역 xAxis 끝 값
*/
to: number;
}
/**
* {@page config.base.series 시리즈}나 {@page config.base.gauge 게이지}들이 그려지는 영역 설정 옵션.
* 전체 차트에서 {@page config.title 타이틀}, {@page config.legend 범례},
* 외부 {@page config.base.annotation 어노테이션}들을 제외한 영역이다.
* 특히, {@page config.#polar 극좌표계} 또는 {@page config.series.pie}나 {@page config.series.funnel} 시리즈는
* 이 영역을 기준으로 크기와 위치를 설정한다.
*
* ```js
* const chart = {
* body: {
* radius: '40%',
* circular: false,
* },
* };
* ```
*
* @css 'rct-body'
* @config chart.body
*/
interface BodyOptions extends ChartItemOptions {
/**
* {@page config.#polar 극좌표계} 차트일 때 반지름.
*
* @default '45%'
*/
radius?: PercentSize;
/**
* {@page config.#polar 극좌표계} 차트일 때 중심 x 좌표.
*
* @default '50%'
*/
centerX?: PercentSize;
/**
* {@page config.#polar 극좌표계} 차트일 때 중심 y 좌표.
*
* @default '50%'
*/
centerY?: PercentSize;
/**
* false이면 {@page config.#polar 극좌표계} 차트일 때, x 축선과 y축 그리드 선들을 다각형으로 표시한다.
*
* @default true
*/
circular?: boolean;
/**
* 배경 이미지 설정 옵션.
*/
image?: BackgroundImageOptions;
/**
* 차트에 표시할 데이터가 존재하지 않을 때 표시되는 메시지 view.
*/
emptyView?: EmptyViewOptions;
/**
* plot 영역 마우스 드래깅을 통한 zooming 방식.
*
* @default 'none'
*/
zoomType?: ZoomType;
/**
* Zoom 리셋 버튼 설정 옵션.
*/
zoomButton?: ZoomButtonOptions;
/**
* body 영역 내에 표시되는 어노테이션 옵션.
* 옵션 객체 또는 옵션 객체 배열로 여러 어노테이션을 설정할 수 있다.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 'annotations' 설정이 존재하면 load 후 이 속성으로 설정한다.
*/
annotation?: AnnotationOptionsType | AnnotationOptionsType[];
/**
* zoom 될 때 호출되는 이벤트 콜백
*/
zoomCallback?: (series: ZoomCallbackArgs) => void;
}
/**
*/
interface NavigiatorHandleOptions extends ChartItemOptions {
}
/**
*/
interface NavigiatorMaskOptions extends ChartItemOptions {
}
/**
* 시리즈 내비게이터 설정 옵션.
* 내비게이터에 표시되는 시리즈는 기본적으로 {@page config.series.area 'area'} 시리즈로 표시되지만,
* {@page config.series.line 'line'}, {@page config.series.area 'area'},
* {@page config.series.bara 'bar'} 시리즈로 지정할 수도 있다.
* 내비게이터의 x축 종류는 명시적으로 설정하지 않으면 소스 시리즈의 x축 type을 따라간다.
* y축은 항상 {@page config.yAxis.linear 'linear'}로 생성된다.
*
* @config chart.seriesNavigator
*/
interface SeriesNavigatorOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* Navigator 시리즈의 data나 축 범위를 제공하는 본 시리즈의 이름이나 index.
*
*/
source?: string;
/**
* true로 지정하면 {@page source}로 지정한 원본 시리즈로부터 내비게이터 시리즈의 데이터포인트들을 생성할 때,
* 원본 시리즈의 data로 지정된 값들을 사용하고, 내비게이터 시리즈의 yField를 원본과 다르게 지정할 수도 있다.
* 기본값 false일 때는 이미 생성된 원본 데이터포인트의 x, y 값을 사용한다.
* // #431
*
* @default false
*/
usePointSource?: boolean;
/**
*/
handle?: NavigiatorHandleOptions;
/**
*/
mask?: NavigiatorMaskOptions;
/**
*/
borderLine?: ChartItemOptions;
/**
* Navigator에 표시되는 시리즈 모델
* 기본적으로 'area' 시리즈로 표시되지만,
* 'line', 'area', 'bar' 시리즈로 지정할 수도 있다.
* data는 {@page source 원본}에서 가져온다.
*
*/
series?: SeriesOptionsType;
/**
*/
xAxis?: any;
/**
*/
yAxis?: any;
/**
* @default true
*/
liveScroll?: boolean;
/**
* @default 0.05
*/
minSize?: number;
/**
* 네비게이터 두께.
*
* @default 45
*/
thickness?: number;
/**
* 네비게이터와 차트 본체 방향 사이의 간격.
*
* @default 8
*/
gap?: number;
/**
* 네비게이터와 차트 본체 반대 방향 사이의 간격.
*
* @default 3
*/
gapFar?: number;
}
/**
* 차트 개발 제작자 등을 표시하는 크레딧 영역 설정 옵션.
* 기본적으로 오른쪽 아래 모서리에 RealChart 버전을 작게 표시한다.
*
* ```js
* const config = {
* options: {
* credits: {
* text: 'UN Data',
* url: 'https://data.un.org'
* },
* },
* };
* ```
*
* ***className *** 'rct-credits'
*/
interface CreditsOptions extends ChartItemOptions {
/**
* 제작자 이름 등 표시 텍스트.
*
* @default 'RealChart v1.0'
*/
text?: string;
/**
* 영역을 클릭했을 때, 이 속성에 지정한 곳으로 새 페이지를 연다.
*
* @default 'https://realchart.co.kr'
*/
url?: string;
/**
* true로 지정하면 별도의 영역을 차지하지 않고 차트 본체 내부에 위치한다.
* {@page align}이 'center'이고 {@page verticalAlign}이 'middle'일 때도
* 본체 내부에 표시된다.
*
* @default false
*/
floating?: boolean;
/**
* 차트 영역 내에서 credits의 수평 정렬.
*
* @default 'right'
*/
align?: Align;
/**
* 차트 영역 내에서 credits의 수직 정렬.
*
* @default 'bottom'
*/
verticalAlign?: VerticalAlign;
/**
* 설정에 따라 정해진 표시 위치에서 떨어진 수평 간격.
* {@page floating}이 true가 아니고,
* 오른쪽 중앙에 표시되는 경우에는 credits 표시 영역 계산 시 너비에 포함된다.
*
* @default 2
*/
offsetX?: number;
/**
* 설정에 따라 정해진 표시 위치에서 떨어진 수직 간격.
* {@page floating}이 true가 아니고,
* 중앙에 표시되는 경우가 아니면 credits 표시 영역 계산 시 높이에 포함된다.
*
* @default 1
*/
offsetY?: number;
/**
* {@link floating}이 true가 아니고, 오른쪽 아래 또는 오른쪽 가운데에 표시될 때,
* 차트 나머지 영역과의 간격.
*
* @default 4
*/
gap?: number;
}
/**
* 데이터포인트 hover시 동일한 효과를 표시할 연관된 포인트들을 선택하는 방식.
*
* @enum
*/
declare const _PointHoverScope: {
/**
* hover된 데이터포인터의 상태에 따라 자동으로 결정한다.
* {@page ChartOptionsOptions.seriesHovering}이 true이면 'point',
* 데이터포인트의 x축에 'crosshair'가 동작 중이면 'axis',
* 데이터포인트가 series group에 포함된 경우이면 'group',
* 아니면 'point'가 된다.
*
* @config
*/
readonly AUTO: "auto";
/**
* 마우스 아래 있는 데이터포인트만 효과가 표시된다.
*
* @config
*/
readonly POINT: "point";
/**
* 마우스 아래 있는 데이터포인트와 같은 series group에 포함된 데이터포인트들을 모두 선택한다.
*
* @config
*/
readonly GROUP: "group";
/**
* 마우스 아래 있는 데이터포인트와 같은 x축에 연결되고 x값이 같은 데이터포인트들을 모두 선택한다.
*
* @config
*/
readonly AXIS: "axis";
};
/** @dummy */
type PointHoverScope = typeof _PointHoverScope[keyof typeof _PointHoverScope];
/**
* 데이터포인트에 마우스가 올라갈 때 처리하는 방식 설정 옵션.
*/
interface PointHoveringOptions extends ChartItemOptions {
/**
* 데이터포인트 hover시 동일한 효과를 표시할 연관된 포인트들을 선택하는 범위.
*
*/
scope?: PointHoverScope;
/**
* {@page config.series.line line},
* {@page config.series.bubble bubble},
* {@page config.series.scatter scatter} 시리즈처럼 marker로 표시되는 데이터포인트의 위치를 찾을 때
* 데이터포인트 maker 외부로 추가되는 가상의 두께.
* 0이하면 표시되는 크기로 계산된다.
* 상당히 큰 크기로 지정하면 마우스가 어느 위치에 있든 마우스에 가장 가까운 marker가 찾아진다.
* 물론 마우스가 실제 표시되는 marker 위에 있다면 그 것으로 결정된다.
* 찾아진 데이터포인트가 마우스 아래 있는 것으로 여겨져서 hover 효과가 표시되거나 관련 이벤트가 발생한다.
* 기본값은 차트에 tooltip이 표시되고 tooltip.{@page config.tooltip#followPointer}가 true이면 차트 크기보다 큰 값이 되고,
* 아니면 **30** 픽셀이다.
*
*/
hintDistance?: number;
}
/**
* 툴팁에 표시할 데이터포인트들을 선택하는 방식.
*
* @enum
*/
declare const _TooltipScope: {
readonly HOVER: "hover";
readonly POINT: "point";
readonly GROUP: "group";
readonly AXIS: "axis";
};
/** @dummy */
type TooltipScope = typeof _TooltipScope[keyof typeof _TooltipScope];
/**
* 데이터포인트 뷰에 마우스가 올라가면 표시되는 툴팁 상자 옵션.
* {@page guide.tooltip 툴팁 개요} 페이지를 참조한다.
*
* @css 'rct-tooltip'
* @config chart.tooltip
*/
interface TooltipOptions extends ChartItemOptions {
/**
* 하나의 툴팁으로 표시할 범위.
*/
scope?: TooltipScope;
/**
*/
html?: string;
/**
* 툴팁에 표시할 텍스트 형식.
* 시리즈에 {@page config.base.series#tooltiptext tooltipText}가 시리즈 별 tooltip을 제공하지만,
* 이 속성이 지정된 경우 우선 사용된다.
*
* `${param;default;format}` 형식으로 아래과 같은 변수로 데이터 포인트 및 시리즈 값을 지정할 수 있다.
* |변수|설명|
* |---|---|
* |series|시리즈 이름|
* |name|포인트 이름. 포인트가 속한 카테고리 이름이거나, 'x' 속성으로 지정한 값|
* |x|'x' 속성으로 지정한 값|
* |y|'y' 속성으로 지정한 값|
* |xValue|계산된 x값|
* |yValue|계산된 y값|
*
*/
text?: string;
/**
* 목표 지점과 tooltip 사이의 간격.
*
*/
offset?: number;
/**
* 툴팁이 점진적으로 닫히는 시간을 밀리초 단위로 지정한다.
*
* @default 700
*/
hideDelay?: number;
/**
*/
minWidth?: number;
/**
*/
minHeight?: number;
/**
* true이면 툴팁 상자가 마우스 포인터를 따라 다닌다.
*
* false, true를 명시적으로 지정하지 않으면 시리즈 종류에 따라 자동 설정된다.
* ex) pie 시리즈는 true, bar 시리즈는 false가 된다.
*
*/
followPointer?: boolean;
/**
* 툴팁 텍스트 속 숫자 값이 NaN일 때 대신 표시되는 텍스트.
*
*/
nanText?: string;
/**
* 툴팁에 표시될 숫자값의 기본 형식.\
* {@page text}예 표시 문자열을 지정할 때 `${yValue;;#,###.0}`와 같은 식으로 숫자 형식을 지정할 수 있다.
*
*/
numberFormat?: string;
/**
* 툴팁에 표시될 날짜(시간)값의 기본 형식.\
* {@page text}예 표시 문자열을 지정할 때 `${x;;yyyy.MM}`와 같은 식으로 날짜(시간) 형식을 지정할 수 있다.
*
*/
timeFormat?: string;
}
/**
*/
interface PaneOptions extends ChartItemOptions {
/**
*/
width?: number;
/**
*/
height?: number;
/**
*/
inverted?: boolean;
/**
*/
body: PaneBodyOptions;
}
/**
*/
interface PaneBodyOptions extends BodyOptions {
}
/**
* 다중 분할 panes.\
* 각 pane에 해당하는 x, y축이 반드시 존재해야 한다.
* axis는 {@page config.base.axis#row row}, {@page config.base.axis#col col} 속성으로 위치를 지정한다.
* 시리즈는 {@page config.base.series#row row}, {@page config.base.series#col col} 속성으로 지정하거나, 아니면 axis 위치에 따라 자동으로 결정된다.
* // 현재 문서 구조로 SeriesGroup을 가리킬 수 없음.
* // 시리즈그룹은 {@page SeriesGroup.row row}, {@page SeriesGroup.col col} 속성으로 지정하거나, 아니면 axis 위치에 따라 자동으로 결정된다.
*
* @config chart.split
* @modules split
*/
interface SplitOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* y축 방향 분할 수를 지정한다.
* //숫자로 지정하면 동일한 높이를 갖는 pane들로 표시된다.
* //배열로 지정하면 각 항목은 고정 크기 수자, 혹은 '*'로 끝나는 상대 크기.
*
*/
rows?: number | (number | `${number}*` | '*')[];
/**
* x축 방향 분할 수를 지정한다.
* //숫자로 지정하면 동일한 너비를 갖는 pane들로 표시된다.
* //배열로 지정하면 각 항목은 고정 크기 수자, 혹은 '*'로 끝나는 상대 크기.
*
* @default false
*/
cols?: number | (number | `${number}*` | '*')[];
/**
* @default 0
*/
gap?: number;
}
/**
* 차트 내보내기 설정 모델
* @config chart.exporting
*/
interface ExporterOptions extends ChartItemOptions {
/**
* 내보내기 버튼 표시 여부 지정
*/
visible?: boolean;
/**
* 내보내기 버튼을 사용해 내보낸 차트에 사용할 확장자 없는 파일 이름.\
* 'export' 함수를 호출할 때 fileName을 지정하지 않을 경우 이 속성이 적용된다.
* fileName을 지정하지 않을 경우 realchart.type으로 다운로드 된다.
*
*/
fileName?: string;
/**
* 내보내기를 라이브러리를 사용하여 진행할지 여부 지정
*/
useLibrary?: boolean;
/**
* 내보내기 메뉴에 포함할 export types
*/
menus?: ExportType[];
/**
* 너비, 지정한 너비에 맞춰 높이가 결정된다.
*/
width?: number;
/**
* 이미지의 scale
*/
scale?: number;
/**
* 내보내기 도중 에러가 발생했을 때 처리할 서버 URL.\
* 지정하지 않을경우 realchart 서버에서 처리한다.
*/
url?: string;
/**
* true로 지정하면 내보내기 결과에 {@page config.axis.scrollBar AxisScrollBarOptions}가 포함되지 않는다.
*/
hideScrollbar?: boolean;
/**
* true로 지정하면 내보내기 결과에 {@page config.seriesNavigator SeriesNavigator}가 포함되지 않는다.
*/
hideNavigator?: boolean;
/**
* true로 지정하면 내보내기 결과에 {@page config.body.zoomButton ZoomButtonOptions}가 포함되지 않는다.
*/
hideZoomButton?: boolean;
}
/**
* @enum
*/
declare const _ExportType: {
/** @config */
readonly PNG: "png";
/** @config */
readonly JPEG: "jpeg";
/** @config */
readonly SVG: "svg";
/** @config */
readonly PDF: "pdf";
/** @config */
readonly PRINT: "print";
};
/** @dummy */
type ExportType = typeof _ExportType[keyof typeof _ExportType];
/**
* 내보내기 옵션.
*/
interface ExportOptions {
/**
* 내보낸 차트에 사용할 확장자.\
* type을 지정하지 않을 경우 png로 내보내기 된다.\
* @config
* // @TODO https://github.com/realgrid/realreport-chart/issues/549
*/
type?: ExportType;
/**
* 내보낸 차트에 사용할 확장자 없는 파일명.
* fileName을 지정하지 않을 경우 realchart.type으로 다운로드 된다.
* @config
*/
fileName?: string;
}
/**
* 외부 모듈로 구현되는 차트 내보내기 기능 명세.
*/
interface ChartExporter {
exportToImage: (dom: HTMLElement, options: ExportOptions, config: ExporterOptions) => void;
exportToPrint: (dom: HTMLElement, options: ExportOptions) => void;
isContextMenuVisible: () => boolean;
toggleContextMenu: () => void;
}
/**
* @internal
*
* //TODO: Intl.DateTimeFormat 사용할 것.
*/
declare class DatetimeFormatter {
private static readonly Formatters;
static getFormatter(format: string): DatetimeFormatter;
static get Default(): DatetimeFormatter;
private _format;
private _baseYear;
private _preserveTime;
private _tokens;
private _hasAmPm;
private _formatString;
constructor(format: string);
/** format */
get format(): string;
/** formatString */
get formatString(): string;
set formatString(value: string);
toStr(date: Date, startOfWeek: number): string;
private parseDateFormatTokens;
private parse;
}
/**
* @internal
*
* 'as,0.0#'
* NOTE: 'a'는 bigint에 사용할 수 없다.
*
* //TODO: ',' 자리에 다른 문자(ex. space)를 표시할 수 있도록 한다.
* //TODO: Intl.NumberFormat 사용할 것. toLocaleString()할 때마다 이 객체가 생성되는 듯.
*/
declare class NumberFormatter {
static readonly DEFAULT_FORMAT = "";
private static readonly Formatters;
static getFormatter(format: string): NumberFormatter;
static get Default(): NumberFormatter;
private _format;
private _options;
constructor(format: string);
get format(): string;
toStr(value: number | bigint): string;
private $_parse;
}
/** @internal */
declare class Sides {
top: number;
bottom: number;
left: number;
right: number;
static readonly Empty: Readonly;
static Temp: Sides;
static create(top: number, bottom?: number, left?: number, right?: number): Sides;
static createFrom(value: string): Sides;
constructor(top?: number, bottom?: number, left?: number, right?: number);
clone(): Sides;
applyPadding(cs: CSSStyleDeclaration): Sides;
applyMargin(cs: CSSStyleDeclaration): Sides;
shrink(r: IRect): IRect;
}
/**
* @internal
*
* 값이 문자형일 때 텍스트 변경 형식.
* 세미콜론(;)으로 구분되는 형식. 두개의 문자열은 각각 String.prototype.replace의 매개변수가 된다.
* 예) 사업자번호: '(\\d{3})(\\d{2})(\\d{5});$1-$2-$3'
*/
declare class TextFormatter {
private static readonly Formatters;
static getFormatter(format: string): TextFormatter;
private _format;
private _pattern;
private _replace;
constructor(format: string);
get format(): string;
toStr(text: string): string;
$_parse(fmt: string): void;
}
/**
* @internal
*/
declare enum TextAnchor {
START = "start",
MIDDLE = "middle",
END = "end"
}
/**
* @internal
*/
declare enum TextLayout {
TOP = "top",
MIDDLE = "middle",
BOTTOM = "bottom"
}
/**
* @internal
*/
declare enum TextOverflow {
TRUNCATE = "truncate",
WRAP = "wrap",
ELLIPSIS = "ellipsis"
}
/**
* @private
*
* Background, padding 등을 이용하려면 HtmlTextElement를 사용한다.
*
* // TODO: wrap
*/
declare class TextElement extends RcElement {
private _layout;
private _overflow;
private _dirty;
private _text;
private _bounds;
constructor(doc: Document, styleName?: string);
/** text */
get text(): string;
set text(value: string);
/** anchor */
get anchor(): TextAnchor;
set anchor(value: TextAnchor);
/** layout */
get layout(): TextLayout;
set layout(value: TextLayout);
/** overflow */
get overflow(): TextOverflow;
set overflow(value: TextOverflow);
/** opacity */
get opacity(): number;
set opacity(value: number);
getAscent(height: number): number;
layoutText(lineHeight?: number): void;
isFitIn(bounds: number): boolean;
calcWidth(): number;
calcRangeWidth(start?: number, end?: number): number;
truncate(bounds: number, ellipsis: boolean): void;
setContrast(target: Element, darkStyle: SVGStyleOrClass, brightStyle: SVGStyleOrClass): TextElement;
clearDom(): void;
setStyles(styles: any): boolean;
applyStyles(styles: any): void;
setStyle(prop: string, value: string): boolean;
getBBox(): IRect;
/**
* For unit test.
*/
getBBoundsTest(): IRect;
stain(): void;
}
type RichTextParamCallback = (target: any, param: string) => any;
interface IRichTextDomain {
callback?: RichTextParamCallback;
numberFormatter?: NumberFormatter;
timeFormatter?: DatetimeFormatter;
textFormatter?: TextFormatter;
startOfWeek?: number;
}
/**
* '${name;default;format}',
* [주의] default에는 format이 적용되지 않는다. 즉, format이 적용된 문자열을 설정해야 한다.
*/
declare class Word {
text: string;
private _literals;
tag(): string;
parse(str: string): Word;
getText(target: any, domain: IRichTextDomain): string;
prepareSpan(span: SVGTSpanElement, target: any, domain: IRichTextDomain): SVGTSpanElement;
protected _doParse(str: string): Word;
}
declare class SvgLine {
private _words;
get words(): Word[];
parse(s: string): SvgLine;
}
/**
* , , ,
,
* ${label}
${endValue}
* ...
*/
declare class SvgRichText {
_format: string;
lineHeight: number;
private _lines;
constructor(format?: string);
setFormat(value: string): void;
lines(): SvgLine[];
/**
* TODO: max width
*/
build(view: TextElement, maxWidth: number, maxHeight: number, target: any, domain: IRichTextDomain): void;
layout(tv: TextElement, align: Align, width: number, height: number, pad: Sides): void;
$_parse(fmt: string): void;
}
declare const extend: (base: any, source: O) => O;
/**
* {@page Series 시리즈}, {@page rc.Axis 축}, {@page rc.Legend legend} 등, 차트 구성 요소 모델들의 기반 클래스.
* {@page updateOptions}등의 공통 메소드들이 구현되어 있다.
*/
declare class ChartItem extends RcObject {
static readonly REFRESHED = "refreshed";
static defaults: ChartItemOptions;
readonly chart: IChart;
private _config;
private _children;
/**
* @readonly
*
* 이 모델에 설정하는 속성들을 포함하는 객체로서 차트 생성시 혹은 {@page load} 메소드를 통해 초기 값들이 지정된다.
* 또, 각 모델별로 기본적으로 적용되는 기본값들이 있다.
* 내부에서 관리하는 속성이므로, 이 속성을 다른 객체 등으로 직접 변경해서는 안된다.
* 또, 이 옵션의 속성들을 직접 변경하지 않고 {@page updateOption} 등의 메소드를 호출해야 한다.
*/
protected _op: OP;
/**
* @internal
*
* options.style과 동일하다.
*/
_style: SVGStyleOrClass;
/**
* 이 클래스를 계승한 차트 구성 요소 객체들은 차트 내부에서 자동 생성되므로 이 생성자를 직접 호출할 일은 없다.
*
* @param chart 차트 객체
*/
constructor(chart: IChart);
/**
* @internal
*/
init(): OP;
protected _doInit(op: OP): void;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* @internal
* for Testing...
*/
_initObject(): this;
/**
* 차트를 생성할 때나 {@page updateOptions} 등을 통해 이 모델 객체에 설정된 옵션 값들과
* 기본 설정값들이 포함된 원본 설정 객체(복사본이 아니다).
* 리턴된 객체의 속성값들을 가져올 수 있지만,
* 속성들을 직접 수정하는 것은 권장되는 방법이 아니다.
* {@page updateOptions}나 {@page updateOption} 등을 사용해서 옵션들을 변경해야 한다.
*/
get options(): OP;
/**
* 표시 여부.
* 설정 옵션의 [visible](/docs/api/options/ChartItemOptions#visible) 값을 그대로 return하는 것이 아니라,
* undefined나 null 등으로 지정하는 경우 모델의 상태에 따라 true나 false로 해석될 수 있다.
* 설정의 경우 {@page updateOption}으로 지정하는 것과 동일하다.
*
* ```
* model.updateOption('visible', value);
* ```
* ```
* model.updateOptions({
* visible: value
* });
* ```
*
* @default true
*/
get visible(): boolean;
set visible(value: boolean);
protected _isVisible(): boolean;
/** @internal */
_load(source: any): OP;
/**
* 기존 옵션 값들을 모두 제거하고 source에 지정한 값들로 새로 구성한다.
*
* ```js
* chart.legend.loadOptions({
* visible: true,
* location: 'right
* })
* ```
*
* @param source 설정 정보 객체 혹은 단일값.
* @returns 이 객체 자신.
*/
loadOptions(source: OP): this;
/**
* 이 모델 객체에 설정된 전역 기본값과 다른 옵션 값들이 포함된 사본 객체로 리턴한다.
* {@link options} 객체에는 전역 기본값들도 포함되어 있다.
*
* ```js
* const options = chart.legend.saveOptions();
* console.log(options);
* ```
*
* @param recursive 기본값 true이면 하위 모델의 옵션들도 포함된다.
* @returns 옵션 사본 객체.
*/
saveOptions(recursive?: boolean): any;
/**
* 하나 이상의 option 설정을 하고,
* 차트가 다시 그려지도록 한다.
*
* ```js
* chart.legend.updateOptions({
* gap: 10,
* lineGap: 20
* });
* ```
*
* 권장하는 방식은 아니지만, {@page options}의 값들을 직접 수정한 후에도 이 메소드를 호출해서
* 내부의 값들이 다시 계산되도록 해야 한다.
*
* ```js
* chart.legend.options.gap = 10,
* chart.legend.options.lineGap = 20,
* chart.legend.updateOptions();
* ```
*
* @param source 설정 정보 객체 혹은 단일값.
* @param render true로 지정하면 설정 후 차트를 다시 그린다.
* @returns 객체 자신.
*/
updateOptions(source?: OP, render?: boolean): this;
/**
* 하나의 속성 값을 설정한다.
* 여러 속성들을 한꺼번에 변경할 때는 {@page updateOptions}를 사용한다.
*
* @param render true로 지정하면 설정 후 차트를 다시 그린다.
* @returns 객체 자신.
*/
updateOption(prop: keyof OP, value: any, render?: boolean): this;
/**
* Boolean 타입의 설정값을 변경한다.
* 지정 가능한 설정 값 목록은 {@page config Configuration API 페이지}에서 확인할 수 있다.
*
* ```js
* chart.getSeries('ser02').toggleOption('visible');
* ```
*
* @param prop 설정 속성 이름.
* @param render true로 지정하면 chart를 다시 그린다.
* false로 지정하고 여러 설정 후에 {@page Chart.render render}를 호출해서 다시 그리게 할 수도 있다.
* 기본값은 true.
* @returns 객체 자신.
*/
toggleOption(prop: keyof OP, render?: boolean): this;
/**
* 지정한 속성에 설정한 값이 있으면 제거하고, 기본값으로(있다면) 되돌린다.
*
* @param prop 속성 이름.
* @param render true(기본값)으로 지정하면 차트를 다시 그린다.
* @returns 객체 자신.
*/
removeOption(prop: keyof OP, render?: boolean): this;
/**
* {@page updateOptions}나 {@page updateOption} 등을 통해 설정된 모든 옵션 값들을 제거하거나,
* 전역 기본값이 존재하는 경우 그 값으로 되돌린다.
*
* @param render true(기본값)으로 지정하면 차트를 다시 그린다.
* @returns 객체 자신.
*/
clearOptions(render?: boolean): this;
/** @internal */
_prepareRender(): void;
/** @internal */
protected _changed(tag?: any): void;
/** @internal */
protected _doLoad(options: ChartItemOptions, source: any): void;
/** @internal */
protected _doSave(target: any, defs: OP, recursive: boolean): void;
/** @internal */
protected _doSaveArray(prop: string, value: any[]): any[];
/** @internal */
protected _doSetSimple(src: any): boolean;
/** @internal */
protected _doLoadProp(prop: string, value: any): boolean;
/** @internal */
private $_applyOptions;
/** @internal */
protected _setDim(options: ChartItemOptions, prop: string): void;
/** @internal */
protected _setDims(options: ChartItemOptions, ...props: string[]): void;
/** @internal */
protected _doApply(options: ChartItemOptions): void;
/** @internal */
protected _doUpdate(source: any): void;
/** @internal */
protected _doPrepareRender(chart: IChart): void;
}
declare abstract class ChartItemCollection {
readonly chart: IChart;
protected _items: T[];
constructor(chart: IChart);
get count(): number;
get first(): T;
items(): T[];
_internalItems(): T[];
abstract load(src: any, inBody?: boolean): void;
updateOptions(source: any, render: boolean): void;
}
/**
* {@page rc.Title 타이틀}, {@page rc.DataPointLabel 데이터포인트 라벨} 등,
* 차트에 표시되는 텍스트 설정 모델들의 기반 클래스.
* 설정 {@link options} 모델은 {@page op.ChartTextOptions}이다.
*/
declare abstract class ChartText extends ChartItem {
static defaults: ChartTextOptions;
private _outlineThickness;
private _numberSymbols;
private _numberFormat;
protected _text: string;
_outlineWidth: string;
private _numSymbols;
protected _numberFormatter: NumberFormatter;
protected _richTextImpl: SvgRichText;
private _setOutlineThickness;
private _setNumberSymbols;
private _setNumberFormat;
private _setText;
/** @internal */
setText(value: string): void;
/** @internal */
buildSvg(view: TextElement, outline: TextElement, maxWidth: number, maxHeight: number, target: any, domain: IRichTextDomain): void;
/** @internal */
prepareRich(text: string): void;
protected _doSetSimple(src: any): boolean;
protected _doApply(options: ChartTextOptions): void;
protected _getNumberText(value: any, useSymbols: boolean, forceSymbols: boolean): string;
protected _getText(text: string, value: any, useSymbols: boolean, forceSymbols: boolean): string;
}
/**
* 텍스트 주위에 이미지 아이콘이 표시되는 {@link ChartText 차트 텍스트} 모델.
* 설정 {@link options} 모델은 {@page op.IconedTextOptions}이다.
*/
declare abstract class IconedText extends ChartText {
static defaults: IconedTextOptions;
private _images;
private _root;
abstract getDefaultIconPos(): IconPosition;
getIconPos(): IconPosition;
protected _doPrepareRender(chart: IChart): void;
getUrl(url: string): string;
}
declare class BackgroundImage extends ChartItem {
}
type RcAnimationEndHandler = (ani: RcAnimation) => void;
declare abstract class RcAnimation {
static readonly DURATION = 700;
static readonly SHORT_DURATION = 300;
delay: number;
duration: number;
easing: string;
endHandler: RcAnimationEndHandler;
private _easing;
private _started;
private _timer;
private _ani;
private _handler;
start(endHandler?: RcAnimationEndHandler): RcAnimation;
stop(): void;
protected _start(duration: number, delay?: number, easing?: string): void;
protected _stop(): void;
protected _doStart(): void;
protected _doStop(): void;
protected _canUpdate(): boolean;
protected abstract _doUpdate(rate: number): boolean;
}
/**
* @enum
*/
declare const _LegendItemsAlign: {
/**
* 수평일 때 왼쪽, 수직일 때는 위쪽으로 몰아서 배치한다.
*/
readonly START: "start";
/**
* center: 수평 혹은 수직의 중앙으로 몰아서 배치한다.
*/
readonly CENTER: "center";
/**
* end: 수평일 때 오른쪽, 수직일 때는 아래쪽으로 몰아서 배치한다.
*/
readonly END: "end";
};
/** @dummy */
type LegendItemsAlign = typeof _LegendItemsAlign[keyof typeof _LegendItemsAlign];
/**
* @enum
*/
declare const _LegendLayout: {
/**
* legend가 차트 좌우에 배치되면 item들을 수직으로 배치하고,
* legend가 차트 상하에 배치되면 item들을 수평으로 배치한다.
*/
readonly AUTO: "auto";
/**
* item들을 수평으로 배치한다.
*/
readonly HORIZONTAL: "horizontal";
/**
* item들을 수직으로 배치한다.
*/
readonly VERTICAL: "vertical";
};
/** @dummy */
type LegendLayout = typeof _LegendLayout[keyof typeof _LegendLayout];
/**
* @enum
*/
declare const _LegendLocation: {
/**
* 차트 본체 아래 표시한다.
*
*/
readonly BOTTOM: "bottom";
/**
* 차트 타이틀 아래 표시한다.
*
*/
readonly TOP: "top";
/**
* 차트 본체 오른쪽에 표시한다.
*
*/
readonly RIGHT: "right";
/**
* 차트 본체 왼쪽에 표시한다.
*
*/
readonly LEFT: "left";
/**
* 차트 본체 영역 내부에 표시한다.
*
*/
readonly BODY: "body";
};
/** @dummy */
type LegendLocation = typeof _LegendLocation[keyof typeof _LegendLocation];
/**
* 차트 시리즈 구성 등을 직관적으로 이해할 수 있도록 도와주는 범례 설정 옵션.
* 시리즈나 데이터포인트 등의 이름과 심볼을 같이 표시할 수 있다.
* {@page visible} 기본값이 undefined이고,
* 따로 지정하지 않으면 시리즈가 둘 이상 포함돼야 legend가 표시된다.
* {@page guide.legend 범례 개요} 페이지를 참조한다.
*
* @css 'rct-legend' legend 기본 class.
* @config chart.legend
*/
interface LegendOptions extends ChartItemOptions {
/**
* @override
*
* 명시적 true로 지정하고 항목이 하나라도 존재하거나,
* 명시적 false가 아닌 경우 항목이 둘 이상이면 표시된다.
*
* @fiddle common/legend-visible Legend Visible
* @default undefined
*/
visible?: boolean;
/**
* true면 나중에 배치되는 시리즈가 먼저 표시된다.
*/
reversed?: boolean;
/**
* 표시 위치.
*
* @default 'bottom'
*/
location?: LegendLocation;
/**
* item 배치 방향.
*
* @default 'auto'
*/
layout?: LegendLayout;
/**
* legend 정렬 기준.
*
* @default 'body'
*/
alignBase?: AlignBase;
/**
* {@page location}이 'body'가 아닐 때,
* legend view와 나머지 chart 영역 사이의 gap.
*
* @default 6 (픽셀)
*/
gap?: number;
/**
* legend 아이템들 사이의 간격.
*
* @default 8 (픽셀)
*/
itemGap?: number;
/**
* marker 표시 여부.
*
* @default true
*/
markerVisible?: boolean;
/**
* marker 크기.
*
* @default 10 (픽셀).
*/
markerSize?: number;
/**
* marker와 text사이의 간격.
*
* @default 4 (픽셀).
*/
markerGap?: number;
/**
* 배경 스타일 셋.
* 배경 색상 및 경계선 스타일을 지정할 수 있다.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 한 줄 당 표시할 최대 legend 항목 수.
*/
itemsPerLine?: number;
/**
* 라인 사이의 간격.
*
* @default 4 (픽셀).
*/
lineGap?: number;
/**
* 수평 {@page layout 배치}일 때,
* 최대 너비를 픽셀 단위의 크기 혹은 body 너비에 대한 상대 길이를 '%'로 지정한다.
*/
maxWidth?: PercentSize;
/**
* 수직 {@page layout 배치}일 때,
* 최대 높이를 픽셀 단위의 크기 혹은 body 높이에 대한 상대 길이를 '%'로 지정한다.
*/
maxHeight?: PercentSize;
/**
* 수평 배치.
* 값을 지정하지 않으면, 기본값이 {@page location}이 'body'일 때는 'left',
* 'left', 'right'일 때는 'center'이다.
*/
align?: Align;
/**
* 수직 배치.
* 값을 지정하지 않으면, 기본값이 {@page location}이 'body'일 때는 'top',
* 'top', 'bottom'일 때는 'middle'이다.
*/
verticalAlign?: VerticalAlign;
/**
* 범례와 body 혹은 차트 경계 사이의 수평 간격.
*
* @default 0
*/
offsetX?: number;
/**
* 범례와 body 혹은 차트 경계 사이의 수직 간격.
*
* @default 0
*/
offsetY?: number;
/**
* 한 라인의 item들이 배치되는 위치.
*
* @default 'center'
*/
itemsAlign?: LegendItemsAlign;
/**
* 범례 항목의 텍스트에도 marker와 동일한 색상을 적용한다.
*/
useTextColor?: boolean;
/**
* 시리즈가 연결된 범례 아이템에 마우스가 올라가면 나머지 시리즈들을 반투명 처리해서
* 연결된 시리즈를 강조한다.
*
* @default true
*/
seriesHovering?: boolean;
/**
* 데이터포인트 연결된 범례 아이템에 마우스가 올라가면 시리즈의 나머지 데이터포인트들을 반투명 처리해서
* 연결된 데이터포인트를 강조한다.
*
* @default true
*/
pointHovering?: boolean;
}
/**
* Widget 모델.
* 기본적으로 plot 영역에 표시된다.
* plot 영역에 표시될 때 {@page left}, {@page top} 등으로 위치를 지정할 수 있다.
*/
declare abstract class Widget extends ChartItem {
protected _doPrepareRender(chart: IChart): void;
}
/**
* @internal
*/
interface ILegendSource {
visible: boolean;
isEmpty?(): boolean;
legendMarker(doc: Document, size: number): RcElement;
legendColor(): string;
legendLabel(): string;
}
/**
* @internal
*/
declare class LegendItem extends ChartItem {
legend: Legend;
source: ILegendSource;
constructor(legend: Legend, source: ILegendSource);
text(): string;
}
/**
* 차트 시리즈 구성을 직관적으로 이해할 수 있도록 도와주는 범례 모델.
* 설정 {@link options} 모델은 {@page op.LegendOptions}이고,
* {@page config.legend} 항목으로 설정한다.
* ```js
* const config = {
* legend: {
* visible: true,
* location: 'right',
* },
* };
* ```
* 또, Chart.{@page rc.Chart#legend}로 모델 객체를 가져올 수 있다.
* ```js
* const legend = chart.legend;
* legend.visible = false;
* ```
* visible 기본값은 undefined인데 따로 지정하지 않으면 시리즈가 둘 이상 포함돼야 범례가 표시된다.
* {@page guide.legend 범례 개요} 페이지를 참조한다.
*/
declare class Legend extends Widget {
static defaults: LegendOptions;
private _maxWidth;
private _maxHeight;
private _items;
private _maxWidthDim;
private _maxHeightDim;
_location: LegendLocation;
items(): LegendItem[];
getLayout(): LegendLayout;
getMaxWidth(domain: number): number;
getMaxHeight(domain: number): number;
getMarkerSize(): number;
protected _isVisible(): boolean;
protected _doApply(options: LegendOptions): void;
protected _doPrepareRender(chart: IChart): void;
}
interface ITooltipContext {
getTooltipText(series: ISeries, point: DataPoint): string;
getTooltipParam(series: ISeries, point: DataPoint, param: string): string;
}
interface ITooltipOwner {
chart: IChart;
getTooltipContext(level: TooltipScope, series: ISeries, point: DataPoint): ITooltipContext;
}
/**
* Tooltip 모델.
* 설정 {@link options}은 {@page op.TooltipOptions}이고,
* {@page config.tooltip} 항목으로 설정한다.
* ```js
* const config = {
* tooltip: {
* visible: true,
* scope: 'hover',
* },
* };
* ```
* 또, Chart.{@page rc.Chart#tooltip}으로 모델 객체를 가져올 수 있다.
* ```js
* const tooltip = chart.tooltip;
* tooltip.visible = false;
* ```
*/
declare class Tooltip extends ChartItem {
owner: ITooltipOwner;
static defaults: TooltipOptions;
private _numberFormat;
private _timeFormat;
private _ctx;
private _series;
private _point;
private _siblings;
private _domain;
constructor(owner: ITooltipOwner);
protected _doInit(op: TooltipOptions): void;
setTarget(series: ISeries, point: DataPoint, siblings: DataPoint[]): ITooltipContext;
getTextDomain(): IRichTextDomain;
isFollowPointer(series: ISeries): boolean;
protected _doSetSimple(src: any): boolean;
protected _doApply(options: TooltipOptions): void;
}
/**
* {@page Series 시리즈}의 {@page Series.pointLabel 데이터포인트 라벨} 표시에 대한 모델.
* 옵션 설정 모델은 {@page DataPointLabelOptions}이다.
*/
declare class DataPointLabel extends IconedText {
static readonly OFFSET = 5;
static defaults: DataPointLabelOptions;
private _point;
_domain: IRichTextDomain;
protected _doInit(op: OP): void;
getValue(p: DataPoint, index: number): any;
getTextDomain(p: DataPoint): IRichTextDomain;
getText(value: any): string;
getOffset(): number;
getDefaultIconPos(): IconPosition;
protected _isVisible(): boolean;
protected _doSetSimple(src: any): boolean;
protected _doPrepareRender(chart: IChart): void;
}
interface IPlottingItem {
options: SeriesOptions | SeriesGroupOptions;
_row: number;
_col: number;
index: number;
visible: boolean;
setCol(col: number): void;
setRow(row: number): void;
getVisibleSeries(): ISeries[];
_getVisiblePoints(): DataPoint[];
getLegendSources(list: ILegendSource[]): void;
needAxes(): boolean;
isEmpty(visibleOnly: boolean): boolean;
canCategorized(): boolean;
defYAxisType(): string;
isClusterable(): boolean;
getBaseValue(axis: IAxis): number;
isBased(axis: IAxis): boolean;
canMinPadding(axis: IAxis, min: number): boolean;
canMaxPadding(axis: IAxis, max: number): boolean;
collectCategories(axis: IAxis): string[];
_prepareRender(): void;
prepareAfter(): void;
collectValues(axis: IAxis, vals: number[]): void;
collectRanges(vals: number[]): void;
pointValuesPrepared(axis: IAxis): void;
seriesChanged(): boolean;
connectable(axis: IAxis): boolean;
}
/**
* 시리즈 {@page https://en.wikipedia.org/wiki/Trend_line_(technical_analysis) 추세선} 모델.
* 설정 {@link options} 모델은 {@page op.TrendlineOptions}이고,
* {@page config.base.series.trendline} 항목으로 설정한다.
* ```js
* const config = {
* series: {
* trendline: {
* type: 'logarithmic'
* },
* },
* };
* ```
* 또, Chart.{@page rc.Series#trendline}로 모델 객체를 가져올 수 있다.
* ```js
* chart.series.trendline.type = 'logarithmic';
* ```
*/
declare class Trendline extends ChartItem {
series: Series;
static defaults: TrendlineOptions;
_points: {
x: number;
y: number;
}[];
private _res;
constructor(series: Series);
protected _doPrepareRender(chart: IChart): void;
isCurved(): boolean;
private _calcLine;
private _linear;
private _logarithmic;
private _power;
private _calcLine2;
private _exponential;
_polynomial(pts: Point[], list: {
x: number;
y: number;
}[]): void;
private _movingAverage;
}
/**
* 옆으로 나누어 배치 가능한가? ex) bar series/group
*/
interface IClusterable {
/**
* @internal
* 축 단위 내에서 이 그룹이 차지하는 계산된 영역 너비. 0 ~ 1 사이의 값.
* 그룹들의 groupWidth로 정해진다.
*/
_clusterWidth: number;
/**
* @internal
* 축 단위 내에서 이 그룹이 시작하는 위치. 0 ~ 1 사이의 상대 값.
* 그룹들의 groupWidth와 groupPadding으로 정해진다.
*/
_clusterPos: number;
/**
* 이 아이템이 축의 단위 너비 내에서 차지하는 영역의 상대 크기.
*
* 0보다 큰 값으로 지정한다.
* group이 여러 개인 경우 이 너비를 모두 합한 크기에 대한 상대값으로 group의 너비가 결정된다.
*/
groupWidth(): number;
setCluster(width: number, pos: number): void;
}
interface ISeriesGroup extends IPlottingItem {
options: SeriesGroupOptions;
}
interface ISeries extends IPlottingItem {
options: SeriesOptions;
chart: IChart;
_group: ISeriesGroup;
_xFielder: (src: any) => any;
_yFielder: (src: any) => any;
_zFielder: (src: any) => any;
_colorFielder: (src: any) => any;
_iconFielder: (src: any) => any;
displayName(): string;
initPoints(source: any[]): DataPoint[];
getPoints(): DataPointCollection;
followPointer(): boolean;
isMarker(): boolean;
}
/**
* 차트 시리즈 모델들의 기반 클래스.
* 시리즈는 {@page data}로 지정된 값들을 데이터포인트로 표시하는 차트의 핵심 구성 요소이며,
* 여러 개의 연관된 시리즈들을 동시에 표시할 수 있다.
* 차트 설정의 다른 부분이나 API에 참조하기 위해서는 {@page name}을 반드시 지정해야 햔다.
* 차트 생성 시 {@page config.base.series#type}을 지정하지 않으면 **'bar'** 시리즈로 생성된다.
*/
declare abstract class Series extends ChartItem implements ISeries, IChartDataListener, ILegendSource, ITooltipContext {
static readonly LEGEND_MARKER = "rct-legend-item-marker";
static readonly type: string;
static register(...clses: typeof Series[]): void;
static defaults: SeriesOptions;
static _loadSeries(chart: IChart, index: number, src: any, defType?: string): Series;
static getPointTooltipParam(series: Series, point: DataPoint, param: string): any;
private _data;
protected _pointLabel: DataPointLabel;
protected _trendline: Trendline;
private _name;
_row: number;
_col: number;
index: number;
seriesIndex: number;
_group: SeriesGroup;
_xAxisObj: IAxis;
_yAxisObj: IAxis;
_xFielder: (src: any) => any;
_yFielder: (src: any) => any;
_zFielder: (src: any) => any;
_colorFielder: (src: any) => any;
_iconFielder: (src: any) => any;
_dataSourceDirty: boolean;
_cdata: DataObject;
protected _points: DataPointCollection;
_runPoints: DataPoint[];
_visPoints: DataPoint[];
_containsNull: boolean;
_runRangeValue: 'x' | 'y' | 'z';
_runRanges: ValueRange[];
_minX: number;
_maxX: number;
_minY: number;
_maxY: number;
_minZ: number;
_maxZ: number;
_referents: Series[];
_runColor: string;
_calcedColor: string;
_simpleMode: boolean;
private _legendMarker;
private _pointLabelCallback;
protected _pointArgs: DataPointCallbackArgs;
private _argsPoint;
private _loaded;
_pointsChanged: boolean;
/**
* palette color indices
*/
_paletteColors: number[];
_labelPos: PointLabelPosition;
_labelPosCallback: (p: DataPointCallbackArgs) => PointLabelPosition;
_labelOff: number;
_labelOffCallback: (p: DataPointCallbackArgs) => number;
protected _doInit(op: OP): void;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
onDataValueChanged(data: DataObject, row: number, field: string, value: any, oldValue: any): void;
onDataRowUpdated(data: DataObject, row: number, oldValues: any): void;
onDataRowAdded(data: DataObject, row: number): void;
onDataRowDeleted(data: DataObject, row: number): void;
onDataChanged(data: DataObject): void;
getTooltipText(series: ISeries, point: DataPoint): string;
getTooltipParam(series: ISeries, point: DataPoint, param: string): any;
_type(): string;
_viewType(): string;
/**
* 시리즈 이름.
* 시리즈 생성시 지정된 후 변경할 수 없다.
* 차트의 다른 구성 요소에서 이 시리즈를 참조할 때 사용되며,
* 레전드나 툴팁에서 시리즈를 나타내는 텍스트로도 사용된다.
*/
get name(): string;
/**
* 데이터포인트 label 설정 모델.
*/
get pointLabel(): DataPointLabel;
/**
* 데이터포인터들을 생성하는 데 사용되는 값 목록.
*/
get data(): any;
private _setData;
/**
* 시리즈에 설정된 데이터포인트 개수.
*/
get pointCount(): number;
get points(): DataPoint[];
/**
* 시리즈에 설정된 데이터포인트들 중 표시 중인 것들의 개수.
*/
get visiblePointCount(): number;
/**
* 시리즈에 설정된 데이터포인트들 중 표시 중인 것들의 목록.
*/
get visiblePoints(): DataPoint[];
/**
* polar가 적용 가능한 시리즈 인지.
*/
get canPolar(): boolean;
/**
* 시리즈에 설정된 데이터포인트들 중 표시 중인 index번째 포인트 객체.
*
* @param index
* @returns
*/
getVisiblePoint(index: number): DataPoint;
contains(p: DataPoint): boolean;
getPoints(): DataPointCollection;
_getLabeledPoints(): DataPoint[];
/**
* 지정한 x축 범위 내에 있는 데이터포인트들을 리턴한다.
*/
getPointsByRange(from: number, to: number): DataPoint[];
_getVisiblePoints(): DataPoint[];
pointLabelCount(): number;
isEmpty(): boolean;
needAxes(): boolean;
/**
* @internal
*
* CategoryAxis에 연결 가능한가?
*/
canCategorized(): boolean;
hasZ(): boolean;
defYAxisType(): string;
/**
* @internal
*
* 병렬 배치 가능한가?
*/
isClusterable(): boolean;
isMarker(): boolean;
displayName(): string;
legendMarker(doc: Document, size: number): RcElement;
legendColor(): string;
legendLabel(): string;
styleLegendMarker(marker: RcElement): void;
canMixWith(other: IPlottingItem): boolean;
/**
* @internal
*
* bar series 계열이나 area series처럼 지정한 값을 기준으로 표시하는 방향이나 스타일이 달라지는 경우 기준 값.
*/
getBaseValue(axis: IAxis): number;
isBased(axis: IAxis): boolean;
canMinPadding(axis: IAxis, min: number): boolean;
canMaxPadding(axis: IAxis, max: number): boolean;
hasShape(): boolean;
setShape(shape: Shape): void;
seriesChanged(): boolean;
getMinPointWidth(): number;
getVisibleSeries(): ISeries[];
protected _getNoClip(polar: boolean): boolean;
needClip(polar: boolean): boolean;
connectable(axis: IAxis): boolean;
setCol(col: number): void;
setRow(row: number): void;
initPoints(source: any[]): DataPoint[];
private $_getXStart;
private $_getXStep;
_prepareRender(): void;
prepareAfter(): void;
collectCategories(axis: IAxis): string[];
/**
* @internal
*
* vals가 지정되지 않은 상태로 호출될 수 있다.
* x값이 숫자가 아닐 때 axis가 해석하지 못하면 xStart 부터 xStep으로 증가 시켜 가면서 순서대로 지정한다.
*/
collectValues(axis: IAxis, vals: number[]): void;
collectRanges(vals: number[]): void;
protected _getRangeMinMax(axis: 'x' | 'y' | 'z'): {
min: number;
max: number;
};
private $_prepareViewRanges;
pointValuesPrepared(axis: IAxis): void;
reference(other: Series, axis: IAxis): void;
getLegendSources(list: ILegendSource[]): void;
getLabelPos(labels: DataPointLabel): PointLabelPosition;
protected _getLabelAutoPos(labels: DataPointLabel, pos: PointLabelPosition): PointLabelPosition;
getLabelPos2(labels: DataPointLabel, p: DataPoint): PointLabelPosition;
getLabelOff(off: number): number;
getLabelOff2(p: DataPoint): number;
referBy(ref: Series): void;
setPointVisible(p: DataPoint, visible: boolean): void;
protected _preparePointArgs(args: DataPointCallbackArgs): void;
_getPointCallbackArgs(args: DataPointCallbackArgs, p: DataPoint): DataPointCallbackArgs;
getPointText(p: DataPoint, index: number, label: any): string;
getPointStyle(p: DataPoint): SVGStyleOrClass;
getPointLabelStyle(p: DataPoint): any;
pointClicked(p: DataPoint): boolean;
pointHovered(p: DataPoint): void;
getViewRangeAxis(): 'x' | 'y' | 'z';
isLabelsVisible(): boolean;
isPointLabelVisible(p: DataPoint): boolean;
/**
* 지정한 x축 값에 위치한 첫번째 데이터포인트를 리턴한다.
* 전달되는 데이터포인트 정보는 리턴 시점의 복사본이다.
*
* @param xValue x값.
* @returns 데이터포인트 객체.
*/
getPointAt(xValue: any): DataPoint;
/**
* xValue에 해당하는 첫번째 데이터포인터의 yValue를 리턴한다.
*
* @param xValue x값 혹은 x,y값이 포함된 데이터포인트 정보. x축이 category 축이면 카테고리 이름을 지정할 수 있다.
* @param prop 가져올 값. 지정하지 않으면 'yValue'.
* @returns prop로 지정한 데이터포인트 값.
*/
getValueAt(xValue: any, prop?: string): number;
/**
* 데이터포인터의 값들을 변경한다.
* p 매개변수에 데이터포인트 대신 값을 지정하면,
* 그 값이 xValue와 동일한 첫번째 데이터포인트를 찾는다.
* 시리즈에 data를 지정하는 것과 동일한 방식으로 데이터포인트의 값(들)을 변경할 수 있다.
* [주의] json으로 필드값(들)을 지정할 때는 시리즈에 지정된 field 이름 속성들과 같은 이름으로 값들을 지정해야 한다.
*
* ```
* const x = '신흥동';
* const p = chart.series.getPointAt(x)
*
* chart.series.updatePoint(p, v + 10);
* ```
*
* @param p 데이터포인트 객체.
* @param values 변경할 단일값, 배열, 또는 json.
* @returns 변경됐으면 true.
*/
updatePoint(p: DataPoint | string | number, props: any): boolean;
/**
* @internal
* findPoint가 구현된 시리즈가 없음.
* 지정한 값들에 해당하는 첫번째 데이터포인트의 정보를 리턴한다.
* 전달되는 데이터포인트 정보는 리턴 시점의 복사본이다.
*
* @param keys 데이터포이터를 찾기 위한 값 목록.
* @returns 데이터포인트 모델 정보 객체.
*/
/**
* 시리즈 data 원본을 변경하고 데이터포인트들을 다시 생성한다.
* [주의] x축이 카테고리 축이고, x축의 categories 속성이 명시적으로 설정되지 않았다면,
* 이 함수 호출 후 카테고리가 변경될 수 있다.
*
* @param data 원본 데이터포인트 값 배열.
*/
updateData(data: any): void;
/**
* 데이터포인트를 추가한다.
*
* @param source 데이터포인트 원본 정보.
* @returns 실제 추가된 데이터포인트 객체.
*/
addPoint(source: any): DataPoint;
/**
* 하나 이상의 데이터포인트들을 추가한다.
*
* @param source 데이터포인트 원본 목록.
* @returns 실제 추가된 데이터포인트 객체 배열.
*/
addPoints(source: any[]): DataPoint[];
/**
* 데이터포인트를 제거한다.
* p 매개변수에 데이터포인트 대신 값을 지정하면,
* 그 값이 xValue와 동일한 첫번째 데이터포인트를 찾는다.
*
* @param p 제거할 데이터포인트 객체.
* @returns 실제로 제거되면 true를 리턴한다.
*/
removePoint(p: DataPoint | string | number): boolean;
/**
* 지정한 데이터포인트들를 제거한다.
* pts 매개변수에 데이터포인트 대신 값들을 지정하면,
* 그 값이 xValue와 동일한 첫번째 데이터포인트를 찾는다.
*
* @param pts 제거할 데이터포인트 목록.
* @returns 실제로 제거되면 데이터포인트 개수.
*/
removePoints(pts: (DataPoint | string | number)[]): number;
followPointer(): boolean;
protected _doApply(options: SeriesOptions): void;
protected _createLabel(chart: IChart): DataPointLabel;
protected _createPoint(source: any): DataPoint;
private $_addPoint;
protected _doAddPoint(source: any): DataPoint;
protected _doPointRemoved(point: DataPoint): void;
protected _doPointsRemoved(points: DataPoint[]): void;
protected _createLegendMarker(doc: Document, size: number): RcElement;
_referOtherSeries(series: Series): boolean;
_colorByPoint(): boolean;
protected _getFielderProps(): string[];
protected _createFielder(f: any): (v: any) => any;
private _createFielders;
protected _defaultLoadAnimation(): SeriesLoadAnimation;
_load(source: any): OP;
protected _doLoadData(src: any): any[];
_loadPoints(data: any): void;
protected _doLoadPoints(src: any): void;
protected _doPrepareRender(): void;
protected _setViewRange(p: DataPoint, axis: 'x' | 'y' | 'z'): void;
_defViewRangeValue(): 'x' | 'y' | 'z';
protected _canSort(): boolean;
}
type PlottingItem = Series | SeriesGroup;
/**
* @internal
*/
declare class PlottingItemCollection extends ChartItemCollection {
private _map;
private _visibles;
private _series;
private _visibleSeries;
private _widget;
get firstSeries(): Series;
get firstVisible(): PlottingItem;
get firstVisibleSeries(): Series;
isWidget(): boolean;
isEmpty(visibleOnly: boolean): boolean;
visibles(): PlottingItem[];
series(): Series[];
_internalSeries(): Series[];
seriesCount(): number;
needAxes(): boolean;
/** @internal */
_clear(): void;
get(index: number): Series | SeriesGroup;
getSeries(name: string): Series;
getVisibleSeries(): Series[];
getPaneSeries(row: number, col: number): Series[];
seriesByPoint(point: DataPoint): Series;
getLegendSources(): ILegendSource[];
canPolar(): boolean;
load(src: any): void;
add(source: any): Series;
remove(series: string | Series): Series;
updateData(values: any[]): void;
prepareRender(): void;
prepareAfter(): void;
private $_loadItem;
private $_add;
}
/**
* @internal
*/
declare abstract class ConnectableSeries extends Series {
static defaults: ConnectableSeriesOptions;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* 추세선 설정 모델.
*/
get trendline(): Trendline;
connectable(axis: IAxis): boolean;
}
/**
* dumbbell 시리즈 등에 표시되는 마커.
*/
declare abstract class SeriesMarker extends ChartItem {
series: Series;
static defaults: SeriesMarkerOptions;
private _args;
constructor(series: Series);
getMarkerStyle(p: DataPoint): any;
}
declare class WidgetSeriesPoint extends DataPoint implements ILegendSource {
_calcedColor: string;
_legendMarker: RcElement;
legendMarker(): RcElement;
setLegendMarker(elt: RcElement): void;
legendColor(): string;
legendLabel(): string;
styleLegendMarker(marker: RcElement): void;
isEmpty(): boolean;
initPrev(axis: IAxis, prev: any): void;
}
declare class WidgetSeriesConnector extends ChartItem {
static defaults: WidgetSeriesConnectorOptions;
}
declare abstract class WidgetSeriesLabel extends DataPointLabel {
isSub: boolean;
static defaults: WidgetSeriesLabelOptions;
private _connector;
private _distance;
protected _distanceDim: IPercentSize;
constructor(chart: IChart, isSub?: boolean);
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* 연결선 모델.
*/
get connector(): WidgetSeriesConnector;
getAlign(): number;
protected _doApply(options: WidgetSeriesLabelOptions): void;
}
declare abstract class WidgetSeries extends Series {
static readonly CENTER = "50%";
static defaults: WidgetSeriesOptions;
private _subLabel;
private _centerX;
private _centerY;
private _centerXDim;
private _centerYDim;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
get subLabel(): WidgetSeriesLabel;
getCenter(plotWidth: number, plotHeight: number): Point;
protected _getLabelAutoPos(labels: WidgetSeriesLabel, pos: PointLabelPosition): PointLabelPosition;
needAxes(): boolean;
_colorByPoint(): boolean;
getLegendSources(list: ILegendSource[]): void;
_isVisibleInLegend(p: WidgetSeriesPoint): boolean;
protected _doApply(options: WidgetSeriesOptions): void;
canMinPadding(axis: IAxis, min: number): boolean;
canMaxPadding(axis: IAxis, max: number): boolean;
}
/**
* 직교 좌표계가 표시된 경우, plot area 영역을 기준으로 size, centerX, centerY가 적용된다.
* //TODO: 현재 PieSeris만 계승하고 있다. 추후 PieSeries에 합칠 것.
*/
declare abstract class RadialSeries extends WidgetSeries {
static defaults: RadialSeriesOptions;
private _radius;
private _radiusDim;
getRadius(plotWidth: number, plotHeight: number): number;
protected _doApply(options: RadialSeriesOptions): void;
}
/**
*/
declare abstract class ClusterableSeries extends ConnectableSeries implements IClusterable {
static defaults: ClusterableSeriesOptions;
_clusterWidth: number;
_clusterPos: number;
_childWidth: number;
_childPos: number;
_single: boolean;
_pointPad: number;
groupWidth(): number;
getMinPointWidth(): number;
getPointWidth(length: number): number;
getPointPos(length: number): number;
isClusterable(): boolean;
setCluster(width: number, pos: number): void;
protected _doPrepareRender(): void;
}
/**
* 'bar'와 같이 y축 기준 위/아래 구분이 필요한 시리즈.\
* 구분하는 값은 {@page baseValue}로 지정한다.
*/
declare abstract class BasedSeries extends ClusterableSeries {
static defaults: BasedSeriesOptions;
private _base;
protected _doPrepareRender(): void;
getBaseValue(axis: IAxis): number;
protected _getGroupBase(): number;
isBased(axis: IAxis): boolean;
}
/**
*/
declare abstract class RangedSeries extends ClusterableSeries {
collectValues(axis: IAxis, vals: number[]): void;
protected abstract _getBottomValue(p: DataPoint): number;
}
declare abstract class LowRangedSeries extends RangedSeries {
}
/**
* 시리즈그룹 모델들의 기반 클래스
* 기본 {@page options 설정} 모델은 {@page opt.SeriesGroupOptions}이다.
* 같은 {@page opt.SeriesOptions#type}의 여러 시리즈들을 연관지어 표시한다.
*/
declare abstract class SeriesGroup extends ChartItem implements ISeriesGroup, ITooltipContext {
static readonly type: string;
static readonly seriesType: string;
static register(...clses: typeof SeriesGroup[]): void;
static registerSeries(...clses: typeof SeriesGroup[]): void;
static defaults: SeriesGroupOptions;
static collectTooltipText(tooltip: {
tooltipHeader?: string;
tooltipRow?: string;
tooltipFooter?: string;
}, series: ISeries[], point: DataPoint): string;
static inflateTooltipParam(series: ISeries[], ser: ISeries, point: DataPoint, param: string): string;
_row: number;
_col: number;
index: number;
private _series;
protected _visibles: T[];
_xAxisObj: IAxis;
_yAxisObj: IAxis;
_stackPoints: Map;
_stacked: boolean;
private _seriesChanged;
getTooltipText(series: ISeries, point: DataPoint): string;
getTooltipParam(series: ISeries, point: DataPoint, param: string): string;
get series(): T[];
needAxes(): boolean;
isEmpty(visibleOnly: boolean): boolean;
canCategorized(): boolean;
defYAxisType(): string;
isClusterable(): boolean;
getBaseValue(axis: IAxis): number;
getVisibleSeries(): ISeries[];
get visCount(): number;
_type(): string;
_seriesType(): string;
setCol(col: number): void;
setRow(row: number): void;
connectable(axis: IAxis): boolean;
isFirstVisible(series: ISeries): boolean;
isLastVisible(series: ISeries): boolean;
collectValues(axis: IAxis, vals: number[]): void;
collectRanges(vals: number[]): void;
pointValuesPrepared(axis: IAxis): void;
collectCategories(axis: IAxis): string[];
getLegendSources(list: ILegendSource[]): void;
isBased(axis: IAxis): boolean;
canMinPadding(axis: IAxis, min: number): boolean;
canMaxPadding(axis: IAxis, max: number): boolean;
getVisPoints(p: DataPoint): DataPoint[];
seriesChanged(): boolean;
remove(series: T): boolean;
_getVisiblePoints(): DataPoint[];
protected _doApply(options: ChartItemOptions): void;
protected _doSaveArray(prop: string, value: any[]): any[];
_prepareRender(): void;
protected _doPrepareRender(chart: IChart): void;
prepareAfter(): void;
protected abstract _canContain(ser: Series): boolean;
protected _doPrepareSeries(series: T[]): void;
private $_loadSeries;
private $_add;
private $_collectValues;
private $_collectPoints;
private $_collectStack;
private $_collectFill;
}
/**
*/
declare abstract class ConstraintSeriesGroup extends SeriesGroup {
collectValues(axis: IAxis, vals: number[]): void;
protected abstract _doConstraintYValues(series: Series[]): number[];
}
/**
*/
declare abstract class ClusterableSeriesGroup extends SeriesGroup {
static defaults: ClusterableSeriesGroupOptions;
groupWidth(): number;
_clusterWidth: number;
_clusterPos: number;
isClusterable(): boolean;
setCluster(width: number, pos: number): void;
}
declare abstract class MarkerSeries extends ConnectableSeries {
static defaults: MarkerSeriesOptions;
isMarker(): boolean;
}
/**
* 시리즈에 연결된 데이터의 개별 값들에 대한 모델.
* 실행 시간 내부적으로 자동 생성/사용/제거되므로 직접 생성할 일은 없다.
*
* //데이터포인트를 표시할 수 없는 값을 설정하면 null로 간주한다.
* //isNull과 visible은 다르다.
* //isNull이어도 자리를 차지한다.
*
* //[y]
* //[x, y]
*/
declare abstract class DataPoint {
/**
* 인덱스
*/
index: number;
vindex: number;
/**
* x 값
*/
x: any;
/**
* y 값
*/
y: any;
/**
* drilldown series
*
* @ignore
*/
series: string | number;
readonly pid: number;
/**
* 원본 데이터
*/
source: any;
labelOptions: any;
isNull: boolean;
/**
* x 좌표상의 value
*/
xValue: number;
/**
* y 좌표상의 value
*/
yValue: number;
yRate: number;
/**
* 표시 여부.
*/
visible: boolean;
color: string;
xPos: number;
yPos: number;
/**
* for stacking. stacking 가능한 경우 이 값으로 축 상 위치를 계산한다.
* [주의] yValue를 강제로 재설정하는 경우 이 값도 재설정할 것!
*
* @ignore
*/
yGroup: number;
drillDown: any[] | object;
range: ValueRange;
yLabel: any;
/**
* 라벨과 함께 출력되는 아이콘의 경로
*/
icon: string;
_prev: any;
_vr: number;
constructor(source: any);
ariaHint(): string;
labelCount(): number;
getValue(): number;
isEmpty(): boolean;
copy(): any;
assignTo(proxy?: any): any;
getProp(fld: string | number): any;
parse(series: ISeries): void;
getPointLabel(index: number): any;
getPointText(index: number): string;
getPointIcon(index: number): string;
swap(): void;
getParam(param: string): any;
updateValues(series: ISeries, values: any): any;
initValues(): void;
/**
* @internal
*
* 동적으로 생성 시 animation을 위해 prev 값들을 초기화 한다.
*/
initPrev(axis: IAxis, prev: any): void;
/**
* @internal
*
* ValueAnimation에서 호출한다.
* 처음 생성될 때, 값이 변경될 때 모두 호출된다.
* yValue는 series.collectValues()에서 계산한다.
*/
applyValueRate(prev: any, vr: number): void;
protected _assignTo(proxy: any): any;
protected _readArray(series: ISeries, v: any[]): void;
protected _readObject(series: ISeries, v: any): void;
protected _readSingle(v: any): void;
protected _valuesChangd(prev: any): boolean;
}
/** @internal */
declare class DataPointCollection {
protected _owner: ISeries;
private _points;
constructor(owner: ISeries);
get count(): number;
isEmpty(): boolean;
get(index: number): DataPoint;
pointAt(xValue: number | any, yValue?: number | any): DataPoint;
contains(p: DataPoint): boolean;
load(source: any): void;
clear(): void;
add(p: DataPoint): void;
remove(p: DataPoint): boolean;
getProps(prop: string | number): any[];
getCategories(axis: string): any[];
forEach(callback: (p: DataPoint, i?: number) => any): void;
getPoints(xAxis: IAxis, yAxis: IAxis): DataPoint[];
}
/**
* @internal
*
* [y, z]
* [x, y, z]
*/
declare abstract class ZValuePoint extends DataPoint {
/**
* z 값
*/
z: any;
zLabel: any;
/**
* z 좌표상의 value
*/
zValue: number;
getPointLabel(index: number): any;
getPointText(index: number): string;
getValue(): number;
getZValue(): number;
protected _assignTo(proxy: any): any;
protected _valuesChangd(prev: any): boolean;
protected _readArray(series: Series, v: any[]): void;
protected _readObject(series: Series, v: any): void;
protected _readSingle(v: any): void;
parse(series: Series): void;
initValues(): void;
initPrev(axis: IAxis, prev: any): void;
applyValueRate(prev: any, vr: number): void;
}
/**
* @internal
*
* [low, high |y]
* [x, low, high | y]
*/
declare class RangedPoint extends DataPoint {
low: any;
lowValue: number;
lowLabel: any;
get high(): number;
get highValue(): number;
labelCount(): number;
getPointLabel(index: number): any;
getPointText(index: number): any;
protected _assignTo(proxy: any): any;
protected _valuesChangd(prev: any): boolean;
protected _readArray(series: LowRangedSeries, v: any[]): void;
protected _readObject(series: LowRangedSeries, v: any): void;
protected _readSingle(v: any): void;
parse(series: LowRangedSeries): void;
initValues(): void;
initPrev(axis: IAxis, prev: any): void;
applyValueRate(prev: any, vr: number): void;
}
/**
* 축 상에 crosshair의 정보를 표시하는 view 설정 모델.
*/
declare class CrosshairFlag extends ChartItem {
static defaults: CrosshairFlagOptions;
}
/**
* 직선 또는 bar 형태로 축 위의 마우스 위치를 표시하는 구성 요소 모델.
*/
declare class Crosshair extends ChartItem {
axis: IAxis;
static defaults: CrosshairOptions;
private _args;
constructor(axis: IAxis);
protected _doInit(op: CrosshairOptions): void;
/**
* 축 상에 crosshair의 정보를 표시하는 view.
*/
flag: CrosshairFlag;
isBar(): boolean;
getFlag(length: number, pos: number): string;
moved(pos: number, flag: string, points: DataPoint[]): void;
_setAxis(axis: any): void;
protected _doSetSimple(source: any): boolean;
}
/**
* @internal
*/
interface IAxis {
_type(): string;
chart: IChart;
options: AxisOptions;
crosshair: Crosshair;
_isX: boolean;
_isHorz: boolean;
_isOpposite: boolean;
_isBetween: boolean;
_vlen: number;
_zoom: IAxisZoom;
continuous(): boolean;
getBaseValue(): number;
axisMax(): number;
axisMin(): number;
length(): number;
zoom(start: number, end: number): boolean;
/**
* data point의 값을 축 상의 값으로 리턴한다.
*/
getValue(value: any): number;
getXLabel(value: number): any;
contains(value: number): boolean;
incStep(value: number, step: any): number;
/**
* 값(축 상 위치)에 해당하는 픽셀 위치.
*/
getPos(length: number, value: number): number;
valueAt(length: number, pos: number): number;
axisValueAt(length: number, pos: number): any;
xValueAt(pos: number): number;
/**
* 값(축 상 위치)에 해당하는 축 단위 픽셀 크기.
*
* 값에 따라 크기가 다를 수도 있다.
*/
getUnitLen(length: number, value: number): number;
value2Tooltip(value: number): any;
hasBreak(): boolean;
isBreak(pos: number): boolean;
}
/**
* 축 {@page AxisTitle 타이틀}, {@page AxisLink line}, {@page AxisTick tick} 등,
* {@page Axis 축} 구성 요소 모델들의 기반(base) 클래스.
*/
declare abstract class AxisItem extends ChartItem {
readonly axis: Axis;
constructor(axis: Axis);
}
/**
* 축 선(line) 모델.
* {@page options 옵션} 모델은 {@page op.AxisLineOptions}이고,
* {@page config.base.axis.line 'line'} 항목으로 설정한다.
*
* ```js
* const config = {
* xAxis: {
* line: {
* style: {
* stroke: 'red',
* strokeDasharray: '4'
* },
* },
* },
* };
* ```
*/
declare class AxisLine extends AxisItem {
static defaults: AxisLineOptions;
protected _isVisible(): boolean;
protected _doSetSimple(src: any): boolean;
}
/**
* 축 타이틀 모델.
* {@page options 옵션} 모델은 {@page op.AxisTitleOptions}이고,
* {@page config.base.axis#title} 항목으로 설정한다.
*
* ```js
* const config = {
* xAxis: {
* title: {
* text: '서울시 년간 강우량',
* style: {
* fontSize: '30px',
* },
* },
* },
* };
* ```
*/
declare class AxisTitle extends AxisItem {
static defaults: AxisTitleOptions;
private _rotation;
getRotation(): number;
protected _isVisible(): boolean;
protected _doSetSimple(src: any): boolean;
protected _doApply(options: AxisTitleOptions): void;
}
interface IAxisGridRow {
axis: Axis;
from: number;
to: number;
color: string;
}
/**
* 축 그리드 사이에 생성된 영역 표시 설정 모델.
* {@page options} 모델은 {@page op.AxisGridRowsOptions}이다.
*/
declare class AxisGridRows extends AxisItem {
getRows(): IAxisGridRow[];
protected _doSetSimple(source: any): boolean;
}
/**
* Axis tick의 위치에 수평 혹은 수직선으로 plot 영역을 구분 표시한다.
* {@page visible} 기본값이 undefined인데,
* visible이 undefined나 null로 지정되면, 축 위치에 따라 visible 여부가 결정된다.
* {@page options 옵션} 모델은 {@page op.AxisGridOptions}이다.
*/
declare abstract class AxisGrid extends AxisItem {
static defaults: AxisGridOptions;
private _rows;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
get rows(): AxisGridRows;
abstract getPoints(axis: Axis, length: number): number[];
protected _isVisible(): boolean;
}
/**
* 축 가이드 label 설정 모델.
* {@page options} 모델은 {@page op.AxisGuideLabelOptions}이다.
*/
declare class AxisGuideLabel extends IconedText {
static defaults: AxisGuideLabelOptions;
getDefaultIconPos(): IconPosition;
}
/**
* 기본적으로 이 축에 연결된 모든 body에 모두 표시된다.
* col, row를 지정해서 특정 body에만 표시되도록 할 수 있다.
* {@page options} 모델은 {@page op.AxisGuideOptions}이다.
*/
declare abstract class AxisGuide extends AxisItem {
static defaults: AxisGuideOptions;
private _label;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* label 모델.
*/
get label(): AxisGuideLabel;
canConstainedTo(row: number, col: number): boolean;
}
/**
* 축 위의 특정한 값에 선분을 표시한다.
* {@page options} 모델은 {@page op.AxisLineGuideOptions}이다.
*/
declare class AxisLineGuide extends AxisGuide {
}
/**
* 축 위 특정한 두 값 사이의 영역을 구분 표시한다.
* [주의] realchart-style.css에 fill-opacity가 0.2로 설정되어 있다.
* {@page options} 모델은 {@page op.AxisRangeGuideOptions}이다.
*/
declare class AxisRangeGuide extends AxisGuide {
}
/**
* 축 tick 표시 방식과 tick 위치 마다 표시되는 선(line) 등에 대한 모델들의 기반(base) 클래스.
* 축 종류에 따라 다양한 설정 속성들이 존재한다.
* {@page options 옵션} 모델은 {@page op.AxisTickOptions}이고,
* {@page config.base.axis#tick 'tick'} 항목으로 설정한다.
* 별도 설정이 없으면 표시되지 않는다.
*
* ```js
* const config = {
* xAxis: {
* tick: {
* visible: true,
* length: 10
* }
* },
* };
* ```
*/
declare abstract class AxisTick extends AxisItem {
static defaults: AxisTickOptions;
canUseNumSymbols(): boolean;
protected _doSetSimple(src: any): boolean;
}
/**
* 축 label 모델.
* {@page options 옵션} 모델은 {@page op.AxisLabelOptions}이고,
* {@page config.base.axis.label 'label'} 항목으로 설정한다.
*
* ```js
* const config = {
* xAxis: {
* label: {
* rotation: -45,
* style: {
* fill: 'red',
* },
* },
* },
* };
* ```
*
* //[겹치는 경우가 발생할 때]
* //1. step이 0보다 큰 값으로 설정되면 반영한다.
* //2. rows가 0보다 큰 값으로 설정되면 반영한다.
* //3. rotation이 0이 아닌 명시적 값으로 설정되면 반영한다.
* //4. 1~3 모두 설정되지 않은 경우 autoArrange 설정에 따라 자동 배치한다.
* //5. 배치 후 공간을 초과하는 label은 wrap 속성에 따라 줄나누기를 하거나,
* // ellipsis('...')로 처리해서 표시한다.
*/
declare abstract class AxisLabel extends IconedText {
axis: Axis;
static defaults: AxisLabelOptions;
_paramTick: IAxisTick;
_domain: IRichTextDomain;
constructor(axis: Axis);
abstract getTick(index: number, value: any): string;
protected _getParamValue(tick: IAxisTick, param: string): any;
getLabelText(tick: IAxisTick, count: number): string;
getLabelStyle(tick: IAxisTick, count: number): any;
getIcon(tick: IAxisTick): string;
getDefaultIconPos(): IconPosition;
protected _doPrepareRender(chart: IChart): void;
protected _getText(text: string, value: any, useSymbols: boolean, forceSymbols: boolean): string;
}
interface IAxisTick {
index: number;
value: number;
pos: number;
label: string;
}
/**
* {@page rc.Axis 축} 스크롤바 모델.
* 축이 {@page rc.Axis.isZoomed zoom} 상태일 때, 사용자가 스크롤 범위나 위치를 변경할 수 있다.
* {@page options 옵션} 모델은 {@page op.AxisScrollBarOptions}이고,
* {@page config.base.axis.scrollBar 'scrollBar'} 항목으로 설정한다.
*
* ```js
* const config = {
* xAxis: {
* scrollBar: {
* visible: true
* },
* },
* };
* ```
*/
declare class AxisScrollBar extends AxisItem {
static defaults: AxisScrollBarOptions;
getThickness(): number;
getMinThumbSize(): number;
getGap(): number;
getGapFar(): number;
}
interface IAxisZoom {
start: number;
end: number;
}
declare class AxisZoom {
axis: Axis;
min: number;
max: number;
start: number;
end: number;
constructor(axis: Axis);
total(): number;
length(): number;
isFull(): boolean;
resize(start: number, end: number, minSize: number): boolean;
}
/**
* 전체 각도가 360도 보다 작은 부채꼴 {@page config.#polar} 좌표계의 X 축에서 원호의 양 끝과 중심에 연결되는 두 선분 모델.
* {@page options 옵션} 모델은 {@page op.AxisSectorLineOptions}이고,
* {@page config.base.axis#sectorLine 'sectorLine'} 항목으로 설정한다.
*
* ```js
* const config = {
* polar: true,
* xAxis: {
* totalAngle: 270,
* sectorLine: {
* strokeWidt: '2px'
* },
* }
* };
* ```
*
* {@page config.base.axis#startAngle startAngle}, {@page config.base.axis#totalAngle totalAngle}을 참조한다.
*/
declare class AxisSectorLine extends AxisLine {
}
/**
* 차트 축 모델들의 기반(base) 클래스.
* {@page options 옵션} 모델은 {@page op.AxisOptions}이다.
* 축은 시리즈 데이터포인트들이 표시될 위치를 지정하는 차트의 핵심 구성 요소이고,
* 축 설정에 따라 같은 데이터도 다양한 배치로 표현될 수 있다.
* 기본 적으로 카테고리 축과 연속 축으로 구별되며, 2차원 차트에 맞게 **x|y** 축을 구별해서 설정한다.
* ```
* const config = {
* xAxis: {},
* yAxis: {}
* }
* ```
* 또, 방향마다 둘 이상의 축을 설정하고 각 시리즈들이 연결할 축을 다르게 설정할 수 있다.
* 차트에서 축을 명식적으로 지정하지 않으면, 첫번째 시리즈에 합당한 축이 기본 생성된다.
* {@page guide.axes 축 개요} 페이지를 참조한다.
*/
declare abstract class Axis extends ChartItem implements IAxis {
static readonly type: string;
static readonly subtype: string;
static register(...clses: typeof Axis[]): void;
static defaults: AxisOptions;
private _guides;
private _title;
private _line;
private _sectorLine;
protected _tick: AxisTick;
protected _label: AxisLabel;
protected _grid: AxisGrid;
private _crosshair;
private _scrollBar;
private _name;
_index: number;
_row: number;
_col: number;
_isX: boolean;
_isHorz: boolean;
_isOpposite: boolean;
_isBetween: boolean;
_isPolar: boolean;
protected _series: IPlottingItem[];
protected _isEmpty: boolean;
_range: {
min: number;
max: number;
};
_ticks: IAxisTick[];
_markPoints: number[];
_vlen: number;
_zoom: AxisZoom;
_minPad: number;
_maxPad: number;
_values: number[];
protected _min: number;
protected _max: number;
protected _single: boolean;
_runPos: AxisPosition;
_labelArgs: AxisLabelArgs;
_prevSeries: IPlottingItem[];
_seriesChanged: boolean;
_prevRate: number;
_zooming: boolean;
readonly guides: AxisGuide[];
_animating(): boolean;
constructor(chart: IChart, isX: boolean);
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
_type(): string;
/**
* 축 이름.
*/
get name(): string;
/**
* 축 타이틀 모델
*/
get title(): AxisTitle;
/**
* 축 선 모델
*/
get line(): AxisLine;
/**
* 부채꼴 polar 좌표계의 X 축일 때 원호의 양 끝과 중심에 연결되는 선분들의 설정모델.
* {@page config.xAxis.category#startAngle startAngle}, {@page config.xAxis.category#totalAngle totalAngle}을 참조한다.
*/
get sectorLine(): AxisSectorLine;
/**
* 축에 표시되는 tick 위치와 표시 마크에 관한 설정 모델.
*/
get tick(): AxisTick;
/**
* 축 label 설정 모델.
*/
get label(): AxisLabel;
/**
* 축 그리드 설정 모델.
* tick의 위치에 수평 혹은 수직선으로 plot 영역을 구분 표시한다.
*/
get grid(): AxisGrid;
/**
* Crosshair 모델.
* 직선 또는 bar 형태로 축 위의 마우스 위치를 표시한다.
*/
get crosshair(): Crosshair;
/**
* 축 스크롤바 모델.
*/
get scrollBar(): AxisScrollBar;
/**
* 축 방향.
*/
get xy(): 'x' | 'y';
/**
* 시리즈 연결 여부.
* 연결된 시리즈가 하나도 없으면 true.
*/
isEmpty(): boolean;
private _checkEmpty;
getBaseValue(): number;
length(): number;
axisMin(): number;
axisMax(): number;
abstract continuous(): boolean;
abstract valueAt(length: number, pos: number): number;
axisValueAt(length: number, pos: number): any;
/**
* radian으로 리턴한다.
*/
getStartAngle(): number;
/**
* radian으로 리턴한다.
*/
getTotalAngle(): number;
isArced(): boolean;
getVisibleSeries(): ISeries[];
unitPad(): number;
labelsVisible(): boolean;
protected abstract _createTickModel(): AxisTick;
protected abstract _createLabel(): AxisLabel;
protected abstract _doPrepareRender(): void;
protected abstract _doBuildTicks(min: number, max: number, length: number): IAxisTick[];
value2Tooltip(value: number): any;
isBased(): boolean;
isBaseVisible(): boolean;
disconnect(): void;
getSeries(): ISeries[];
getConnectableSeries(): ISeries[];
collectValues(): void;
collectRanges(): void;
collectReferentsValues(): void;
private $_checkEmpty;
_prepare(): void;
_prepareRender(): void;
afterRender(): void;
_buildTicks(length: number): void;
_calcPoints(length: number, phase: number): void;
/**
* @internal
*
* value에 해당하는 축상의 위치.
*
* @param length axis view length
* @param value 값
*/
abstract getPos(length: number, value: number): number;
abstract getUnitLen(length: number, value: number): number;
getLabelLength(length: number, value: number): number;
getValue(value: any): number;
incStep(value: number, step: any): number;
contains(value: number): boolean;
trimRange(from: number, to: number): [number, number];
/**
* zoom 상태를 제거한다.
*/
resetZoom(): void;
_prepareZoom(): AxisZoom;
/**
* zoom 상태를 새로운 범위로 변경한다.
*
* @param start 표시할 시작 값.
* @param end 표시할 끝 값.
* @param minSize 최소 범위
* @returns zoom 상태가 변경되면 true.
*/
zoom(start: number, end: number, minSize?: number): boolean;
/**
* zoom 상태인 지 확인한다.
*
* @returns zoom 상태이면 true.
*/
isZoomed(): boolean;
hasBreak(): boolean;
isBreak(pos: number): boolean;
getTickLabelArgs(index: number, value: any): AxisLabelArgs;
getXLabel(value: number): any;
setPrevRate(rate: number): void;
prev(pos: number): number;
abstract xValueAt(pos: number): number;
_load(source: any): OP;
protected _doApply(options: AxisOptions): void;
protected _setMinMax(min: number, max: number): void;
protected abstract _createGrid(): AxisGrid;
_connect(series: IPlottingItem): void;
protected _doCalculateRange(values: number[]): {
min: number;
max: number;
};
}
declare class AxisCollection extends ChartItemCollection {
readonly isX: boolean;
private _map;
constructor(chart: IChart, isX: boolean);
/** @internal */
_clear(): void;
load(src: any): void;
contains(axis: Axis): boolean;
get(name: string | number): Axis;
disconnect(): void;
prepare(): void;
collectValues(): void;
collectRanges(): void;
collectReferentsValues(): void;
prepareRender(): void;
afterRender(): void;
/** @internal */
_buildTicks(length: number): void;
connect(series: IPlottingItem): Axis;
forEach(callback: (p: Axis, i?: number) => any): void;
isZoomed(): boolean;
resetZoom(): void;
private $_loadAxis;
}
/**
* @enum
*/
declare const _AxisTitleAlign: {
/**
*/
readonly START: "start";
/**
* is middle.
*/
readonly MIDDLE: "middle";
/**
*/
readonly END: "end";
};
/** @dummy */
type AxisTitleAlign = typeof _AxisTitleAlign[keyof typeof _AxisTitleAlign];
/**
* 축 구성 요소들의 설정 모델 기반.
*/
interface AxisItemOptions extends ChartItemOptions {
}
/**
* 축 타이틀 설정 옵션.
*/
interface AxisTitleOptions extends AxisItemOptions {
/**
* 타이틀 텍스트.
* 지정하지 않으면 타이틀 영역 자체가 없어진다.
*
*/
text?: string;
/**
* 텍스트 회전 각도.
* 수직 축일 때는 0, 90, 270, -90, -270 중 하나로 지정할 수 있다.
* 수평 축일 때는 무조건 0이다.
*
* @default undefined 수직 축일 때 왼쪽에 표시되면 90, 오른쪽에 표시되면 270, 수평 축일 때는 0
*/
rotation?: 0 | 90 | 270 | -90 | -270;
/**
* 축 내에서 타이틀의 위치.
* {@page offset}으로 경계 지점과의 간격을 지정할 수 있다.
*
* @default 'middle'
*/
align?: AxisTitleAlign;
/**
* {@page align} 기준으로 배치할 때 경계 지점과의 간격.
* plus 값을 지정하면 차트 안쪽으로 들어온다.
* align이 'middle'일 때는 음수일 때 축 시작값 쪽으로 밀린다.
*
* @default 0
*/
offset?: number;
/**
* 타이틀과 틱 label들, 혹은 축 선 사이의 간격을 픽셀 단위로 지정한다.
*
* @default 5
*/
gap?: number;
/**
* 타이틀 배경 스타일.
*
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 타이틀을 가로 또는 세로로 배치할지 여부와 블록이 진행되는 방향을 지정한다.
*/
writingMode?: WritingMode;
/**
* 텍스트 문자 방향을 지정한다.
* 세로 모드의 텍스트에만 적용된다.
*/
textOrientation?: TextOrientation;
}
/**
* 축 선(line) 설정 모델.
*/
interface AxisLineOptions extends AxisItemOptions {
/**
* @override
* 값이 undefined나 null이면, x축일 때 표시되고, y축이면 표시되지 않는다.
*
* @default undefined
*/
visible?: boolean;
}
/**
* 부채꼴 polar 좌표계의 X 축일 때 원호의 양 끝과 중심에 연결되는 선분들의 설정모델.
* {@page config.xAxis.category#startAngle startAngle}, {@page config.xAxis.category#totalAngle totalAngle}을 참조한다.
*
*/
interface AxisSectorLineOptions extends AxisLineOptions {
}
/**
* 축 tick 표시 방식과 tick 위치 마다 표시되는 선(line) 등에 대한 설정 옵션 기반(base).
* 축 종류에 따라 다양한 설정 속성들이 존재한다.
*
* ```js
* const config = {
* xAxis: {
* tick: {
* visible: true,
* length: 10
* }
* },
* };
* ```
*/
interface AxisTickOptions extends AxisItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* axis tick line length.
*
* @default 7
*/
length?: number;
/**
* tick 라인과 다른 요소(label이나 title) 사이의 간격.
*
* @default 3
*/
gap?: number;
}
/**
* 연속축의 tick 스텝 목록을 동적으로 리턴하는 {@page config.xAxis.linear.tick#stepcallback 콜백}의 매개변수로 사용된다.
*/
interface StepCallbackArgs {
/**
* RealChart의 공개 {@page api.Chart} 모델
*/
chart: object;
/**
*/
length: number;
/**
*/
minValue: number;
/**
*/
maxValue: number;
}
/**
* 연속축의 tick 설정 모델.
*/
interface ContinuousAxisTickOptions extends AxisTickOptions {
/**
* tick들 사이의 값 간격.
*/
stepInterval?: number | string;
/**
* tick들 사이의 대략적인 픽셀 간격.
* 다른 설정이 없다면 이 값을 기준으로 tick 개수가 결정된다.
*
* @default 72
*/
stepPixels?: number;
/**
*/
stepCount?: number;
/**
* 명시적으로 설정하는 setp 목록
* 양 끝을 NaN으로 지정하면 계산된 min/max로 설정된다.
* 이 목록이 설정되면 스텝 설정과 관련된 다른 속성들은 무시된다.
* {@page stepCallback}이 지정되면 이 속성은 무시된다.
*
*/
steps?: number[];
/**
* 명시적 step 목록을 리턴하는 callback
* 양 끝을 NaN으로 지정하면 계산된 min/max로 설정된다.
* 이 목록이 설정되면 스텝 설정과 관련된 다른 속성들은 무시된다.
*/
stepCallback?: (args: StepCallbackArgs) => (number | Date)[];
/**
* tick 개수를 맞춰야 하는 대상 axis.
* base의 strictMin, strictMax가 설정되지 않아야 한다.
* base의 startFit, endFilt의 {@page AxisFit.TICK}으로 설정되어야 한다.
*
*/
baseAxis?: number | string;
/**
* {@page baseAxis}가 지정된 경우, true로 지정하면 base 축의 범위와 동일하게
* 축의 최소/최대가 결정된다.
*
* @default 0
*/
baseRange?: boolean;
}
/**
*/
interface ContinuousAxisGridOptions extends AxisGridOptions {
}
/**
* @enum
*/
declare const _AxisLabelArrange: {
/**
* label들이 겹치도록 놔둔다.
* // TODO: @{link overflow} 설정이 적용된다.
*/
readonly NONE: "none";
/**
* -45도 회전시킨다.
*/
readonly ROTATE: "rotate";
/**
* label들이 겹치지 않도록 건너 뛰면서 배치한다.
* {@page startStep}으로 지정된 step부터 배치된다.
*/
readonly STEP: "step";
/**
* label들이 겹치지 않도록 여러 줄로 나누어 배치한다.
*/
readonly ROWS: "rows";
};
/** @dummy */
type AxisLabelArrange = typeof _AxisLabelArrange[keyof typeof _AxisLabelArrange];
/**
* label 배치 후 텍스트가 차지하는 공간을 넘치는 경우 처리 방식.
* @enum
*/
declare const _AxisLabelOverflow: {
/**
* 넘치면 표시하지 않는다.
*
* @config
*/
readonly HIDDEN: "hidden";
/**
* 차트나 분할 경계를 넘어선 만큼 끌어당겨서 표시한다.
* 실제 표시 위치와 달라지므로 tick을 반드시 표시해서 사용자에게 오차를 보여줘야 한다.
*
* @config
*/
readonly PULL: "pull";
/**
* 축 경계를 넘어선 만큼 끌어당겨서 표시한다.
* 실제 표시 위치와 달라지므로 tick을 반드시 표시해서 사용자에게 오차를 보여줘야 한다.
*
* @config
*/
readonly FIT: "fit";
};
/** @dummy */
type AxisLabelOverflow = typeof _AxisLabelOverflow[keyof typeof _AxisLabelOverflow];
/**
* Axis의 label {@page config.base.axis.label#textCallback 텍스트}나
* {@page config.base.axis.label#styleCallback 스타일}을 동적으로 리턴하는 콜백 등의 매개변수로 사용된다.
*/
interface AxisLabelArgs {
/**
* 축 객체.
*/
axis: Axis;
/**
* 틱개수
*/
count: number;
/**
* 이 라벨의 index.
*/
index: number;
/**
* 이 라벨 위치의 값.
*/
value: number;
}
/**
* 축 label 설정 모델.
*
* //[겹치는 경우가 발생할 때]
* //1. step이 0보다 큰 값으로 설정되면 반영한다.
* //2. rows가 0보다 큰 값으로 설정되면 반영한다.
* //3. rotation이 0이 아닌 명시적 값으로 설정되면 반영한다.
* //4. 1~3 모두 설정되지 않은 경우 autoArrange 설정에 따라 자동 배치한다.
* //5. 배치 후 공간을 초과하는 label은 wrap 속성에 따라 줄나누기를 하거나,
* // ellipsis('...')로 처리해서 표시한다.
*/
interface AxisLabelOptions extends IconedTextOptions {
/**
* label 표시 간격.
* 1이면 모든 tick 표시. 2이면 하나씩 건너 띄어서 표시.
* 2 이상일 때 {@page startStep}으로 지정된 step부터 배치된다.
* ```js
* const config = {
* xAxis: {
* type: "linear",
* tick: {
* stepInterval: 1
* },
* label: {
* startStep: 1,
* step: 2,
* }
* },
* series: [
* {
* data: [1, 2, 3, 4],
* },
* ],
* };
* ```
*
* @default 0
*/
step?: number;
/**
* step이 2 이상이 될 때, 표시가 시작되는 label 위치.
* 0 ~ ({@page step} - 1) 사이의 값으로 지정한다.
* 'category' 축에서 의미있게 사용할 수 있다.
*
* @default 0
*/
startStep?: number;
/**
* 수평 축일 때 tick label 배치 행 수.
* 1은 한 줄, 2면 두 줄 등으로 여러 줄로 나눠서 표시한다.
*
* @default 0
*/
rows?: number;
/**
* {@page autoArrange} {@page AxisLabelArrange.ROWS}로 자동 정렬되는 경우 최대 행 수.
* 이 행 수 이상이 필요한 경우 label 간격을 두어 표시한다.
* // TODO: 구현할 것!
*
* @default 3
*/
maxRows?: number;
/**
* {@page chart.polar}가 아닌 수평 축일 때, tick label 표시 회전 각도.
* -90 ~ 90 사이의 각도로 지정할 수 있다.
* **'auto'**이면 polar일때는 label위치에 따라 각도가 자동으로 계산되고,
* polar가 아닐때는 {@page AxisLabelArrange}속성에 따라 결정된다.
*/
rotation?: number | 'auto';
/**
* 기본 설정이나 {@page step}, {@page rows}, {@page rotation} 속성들을 명시적으로 설정한 경우에도
* label들이 본래 차지하는 공간을 초과할 때,
* label들을 재배치하는 방식을 지정한다.
*
* @default 'rotate'
*/
autoArrange?: AxisLabelArrange;
/**
* @default clip
*/
overflow?: ChartTextOverflow;
/**
* 첫번째 tick 라벨에 표시될 텍스트.
*
*/
firstText?: string;
/**
* 마지막 tick 라벨에 표시될 텍스트.
*
*/
lastText?: string;
/**
* 첫번째 tick 라벨에 추가로 적용되는 스타일.
*
*/
firstStyle?: SVGStyleOrClass;
/**
* 마지막 tick 라벨에 추가로 적용되는 스타일.
*
*/
lastStyle?: SVGStyleOrClass;
/**
* 첫번째 tick 라벨이 차트나 분할 경계를 넘어갈 때 표시 방식.
*
* @default 'pull'
*/
firstOverflow?: AxisLabelOverflow;
/**
* 마지막 tick 라벨이 차트나 분할 경계를 넘어갈 때 표시 방식.
*
* @default 'pull'
*/
lastOverflow?: AxisLabelOverflow;
/**
* 차트나 분할 경계를 넘어가는 첫번째나 마지막 tick 라벨을 끌어 당겨서 표시할 때 이전 라벨과의 최소 간격.
* 이 간격보다 작게 되면 표시하지 않는다.
*
* @default 12
*/
overflowGap?: number;
/**
* 축 tick 라벨에 표시될 텍스트를 리턴한다.
* undefined나 null을 리턴하면 {@page text} 속성 등에 설정된 값으로 표시하거나,
* 값에 따라 자동 생성되는 텍스트를 사용한다.
* 빈 문자열 등 정상적인 문자열을 리턴하면 그 문자열대로 표시된다.
* {@page prefix}나 포맷 속성 등은 적용되지 않는다.
*
*/
textCallback?: (args: AxisLabelArgs) => string;
/**
* 라벨 별로 추가 적용되는 스타일을 리턴한다.
* 기본 설정을 따르게 하고 싶으면 undefined나 null을 리턴한다.
*
*/
styleCallback?: (args: AxisLabelArgs) => SVGStyleOrClass;
/**
* @ignore 미구현
* 축 label과 함께 표시될 icon url을 리턴한다.
*/
iconCallback?: (args: AxisLabelArgs) => string;
}
/**
* 축 그리드 사이에 생성된 영역 표시 설정 모델.
*/
interface AxisGridRowsOptions extends AxisItemOptions {
/**
* 각 row를 칠(fill)하는 데 사용되는 색상 스타일들을 지정한다.\
* 칠하지 않는 영역은 null로 지정하면 되고, 개수가 모자라면 반복된다.
*
*/
colors?: string[];
/**
* axis의 baseValue 이전 영역을 칠(fill)하는 데 사용되는 색상.\
* {@page colors} 설정에 따른 칠 이 전에 칠해진다.
*
*/
belowColor?: string;
}
/**
* @enum
*/
declare const _GuideLabelPosition: {
/**
* body 영역 안에 label을 배치한다.
*/
readonly INSIDE: "inside";
/**
* body 영역 밖에 label을 배치한다.
*/
readonly OUTSIDE: "outside";
};
/** @dummy */
type GuideLabelPosition = typeof _GuideLabelPosition[keyof typeof _GuideLabelPosition];
/**
* 축 가이드 label 설정 모델.
*
*/
interface AxisGuideLabelOptions extends IconedTextOptions {
/**
* body 영역 기준, 표시 위치.
*
* @default 'inside'
*/
position?: GuideLabelPosition;
/**
* 수평 정렬.
*
* @default 'left'
*/
align?: Align;
/**
* 수직 정렬.
*
* @default 'top'
*/
verticalAlign?: VerticalAlign;
/**
* label과 가이드 사이의 수평 간격.
*
* @default 3
*/
offsetX?: number;
/**
* label과 가이드 사이의 수직 간격.
*
* @default 3
*/
offsetY?: number;
}
type AxisGuideType = 'line' | 'range';
/**
* 선분이나 영역으로 축 위의 특정한 값(들)을 구분 표시한다.
* 기본적으로 이 축에 연결된 모든 body에 모두 표시된다.
* col, row를 지정해서 특정 body에만 표시되도록 할 수 있다.
*/
interface AxisGuideOptions extends AxisItemOptions {
/**
* 가이드 종류.
* //이 속성을 지정하지 않은 경우,
* //{@page config.base.axis.guide}
*/
type?: AxisGuideType;
/**
* label 모델.
*/
label?: AxisGuideLabelOptions;
/**
* true면 시리즈들보다 위에 표시된다.
*
* @default false
*/
front?: boolean;
/**
* 모든 guide들 중에서 값이 클수록 나중에 그려진다.
*
* @default 0
*/
zindex?: number;
/**
*/
col?: number | number[];
/**
*/
row?: number | number[];
/**
* type이 'line'일 때,
* 가이드 선이 표시될 축 상의 위치에 해당하는 값.
*/
value?: number;
/**
* type이 'range'일 때,
* 가이드 영역의 시작 값.
*/
startValue?: number;
/**
* type이 'range'일 때,
* 가이드 영역의 끝 값.
*/
endValue?: number;
}
declare const AxisLineGuideType = "line";
/**
* 축 위의 특정한 값에 선분을 표시한다.
*/
interface AxisLineGuideOptions extends AxisGuideOptions {
/**
*/
type?: typeof AxisLineGuideType;
/**
*/
value: number;
}
declare const AxisRangeGuideType = "range";
/**
* 축 위 특정한 두 값 사이의 영역을 구분 표시한다.
* [주의] realchart-style.css에 fill-opacity가 0.2로 설정되어 있다.
*/
interface AxisRangeGuideOptions extends AxisGuideOptions {
/**
*/
type: typeof AxisRangeGuideType;
/**
*/
startValue: number;
/**
*/
endValue: number;
}
/**
* Axis tick의 위치에 수평 혹은 수직선으로 plot 영역을 구분 표시한다.\
* {@page visible} 기본값이 undefined인데,
* visible이 undefined나 null로 지정되면, 축 위치에 따라 visible 여부가 결정된다.
*/
interface AxisGridOptions extends AxisItemOptions {
/**
* @override
* polar 차트인 경우 명시적 false로 지정하지 않으면 true로 해석되고,
* polar가 아닌 경우 undefined나 null로 지정한 경우 y축 그리드이면 true로 해석되고,
* x축인 경우 명시적 true로 지정할 때만 표시된다.
*
* @default undefined
*/
visible?: boolean;
/**
*/
rows?: AxisGridRowsOptions;
/**
* 시작 값에 표시되는 그리드 선을 표시할 지 여부.
*
*/
firstVisible?: boolean;
/**
* 끝 값에 표시되는 그리드 선을 표시할 지 여부.
*
* @default x축이면 false, y축이면 true.
*/
lastVisible?: boolean;
}
/**
* 축 상에 crosshair의 정보를 표시하는 view 설정 모델.
*/
interface CrosshairFlagOptions extends ChartItemOptions {
/**
*/
prefix?: string;
/**
*/
suffix?: string;
/**
* flag에 표시될 텍스트 형식.
*
* 별도로 지정하지 않으면 현재 위치에 해당하는 축 값을 표시한다.
* Category 축인 경위 위치에 해당하는 category 이름을 표시한다.
*
*/
format?: string;
/**
* flag에 표시되는 text의 스타일.
*
*/
textStyles?: SVGStyleOrClass;
/**
*/
minWidth?: number;
}
/**
* 크로스헤어 표시 방식.
*
* @enum
*/
declare const _CrosshairType: {
/**
* 카테고리 축이면 bar, 연속 축이면 line으로 표시한다.
*
* @config
*/
readonly AUTO: "auto";
/**
* 항상 line으로 표시한다.
*
* @config
*/
readonly LINE: "line";
};
/** @dummy */
type CrosshairType = typeof _CrosshairType[keyof typeof _CrosshairType];
/**
* Crosshair 위치가 변경될 때 발생되는 {@page config.base.axis.crosshair#onChange 콜백}의 매개변수로 사용된다.
*/
interface CrosshairCallbackArgs {
/**
* RealChart의 공개 {@page api.Chart} 모델
*/
chart: object;
/**
*/
axis: object;
/**
*/
pos: number;
/**
*/
flag: string;
/**
*/
points: DataPoint[];
}
/**
* 직선 또는 bar 형태로 축 위의 마우스 위치를 표시하는 구성 요소 옵션.
*/
interface CrosshairOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* 축 상에 crosshair의 정보를 표시하는 view.
*
*/
flag?: CrosshairFlagOptions;
/**
* 표시 방식.
*
* @default 'auto'
*/
type?: CrosshairType;
/**
* true면 마우스 위치를 따라 항상 표시하고, false면 data point 위에 마우스가 있을 때만 표시한다.
*
* @default true
*/
showAlways?: boolean;
/**
* false면 type이 'line'인 경우 데이터포인트나 카테고리 단위로 이동한다.
*
* @default true
*/
followPointer?: boolean;
/**
* 표시되는 값이 숫자일 때 사용되는 표시 형식.
*
* @default '#,##0.#'
*/
numberFormat?: string;
/**
* 표시되는 값이 날짜(시간)일 때 사용되는 표시 형식.
*
* @default 'yyyy-MM-dd HH:mm'
*/
timeFormat?: string;
/**
* 위치가 변경될 때 발생되는 callback.
*/
onChange?: (args: CrosshairCallbackArgs) => void;
/**
* x축 crosshair 영역에 포함된 marker 데이터포인트들이
* 마우스 아래 있을 때와 동일한 효과를 표시한다.
*
* @defalut false
*/
markerHovering?: boolean;
}
/**
* @enum
*/
declare const _AxisPosition: {
/**
* 상대 축에 따라 위치를 조정한다.
* x축이 reversed이면 y축이 반대 쪽에 표시되고,
* y축이 reversed이면 x축이 반대 쪽에 표시된다.
*/
readonly AUTO: "auto";
/**
* X축은 아래쪽에 수평으로, Y축은 왼쪽에 수직으로 표시된다.
* {@page Chart.inverted}이면 Y축이 아래쪽에 수평으로, X축은 왼쪽에 수직으로 표시된다.
*
* @config
*/
readonly NORMAL: "normal";
/**
* X축은 위쪽에 수평으로, Y축은 오른쪽에 수직으로 표시된다.
* {@page Chart.inverted}이면 Y축이 위쪽에 수평으로, X축은 오른쪽에 수직으로 표시된다.
*
* @config
*/
readonly OPPOSITE: "opposite";
/**
* 상대 축의 baseValue 지점에 표시된다.
* [주의]
* 1. 축에 연결된 시리즈들이 BarSeries 계열일 때만 가능하다.
* 2. 차트의 X축 하나에만 적용할 수 있다. 두번째로 지정된 축의 속성은 {@page NORMAL}로 적용된다.
* 3. 상대 축이 **linear** 가 아니거나 {@page LinearAxis.baseValue}가 min 보다 작거나 max보다 크면 이 값은 무시되고,
* {@page NORMAL}로 적용된다.
*
* @config
*/
readonly BASE: "base";
/**
* Y축이고, 축이 연결되는 body가 분할 상태일 때, 중간 분할 위치에 표시한다.
*/
readonly BETWEEN: "between";
};
/** @dummy */
type AxisPosition = typeof _AxisPosition[keyof typeof _AxisPosition];
/**
* 축 스크롤바 모델.
* 축 스크롤 상태를 표시하고, 사용자가 스크롤 범위나 위치를 변경할 수 있다.
*/
interface AxisScrollBarOptions extends AxisItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* 스크롤바 두께.
*
* @default 10 픽셀
*/
thickness?: number;
/**
* 최소 thumb 길이.
*
* @default 32 픽셀
*/
minThumbSize?: number;
/**
* 스크롤바와 차트 본체 방향 사이의 간격.
* 0 이상의 값이어야 한다. // #529
*
* @default 3 픽셀
*/
gap?: number;
/**
* 스크롤바와 차트 본체 반대 방향 사이의 간격.
* 0 이상의 값이어야 한다. // #529
*
* @default 3 픽셀
*/
gapFar?: number;
}
type AxisType = 'category' | 'linear' | 'log' | 'time';
/**
* 축 설정 옵션 기반(base).
*
* @config chart.axis[base]
*/
interface AxisOptions extends ChartItemOptions {
/**
* 축 종류를 지정한다.
* 이 속성값이 지정되지 않은 경우,
*
* - {@page config.xAxis.category#categories}가 설정되면 'category'
* - x축이고 첫번째 시리즈가 category축에 연결 가능할 때 'category', 아니면 'linear'
* - y축이면 첫번째 시리즈의 기본 y축 타입(대부분 'linear'), 아니면 'linear'
*
* 축으로 자동 설정된다.
*/
type?: AxisType;
/**
* 축 이름.
*/
name?: string;
/**
* 축 title 설정 옵션.
*/
title?: AxisTitleOptions | string;
/**
* 축 선 설정 옵션.
*/
line?: AxisLineOptions | boolean | string;
/**
* 부채꼴 polar 좌표계의 X 축일 때 원호의 양 끝과 중심에 연결되는 선분들의 설정모델.
* {@page config.xAxis.category#startAngle startAngle}, {@page config.xAxis.category#totalAngle totalAngle}을 참조한다.
*
*/
sectorLine?: AxisSectorLineOptions | boolean;
/**
* tick 설정 옵션.
*/
tick?: AxisTickOptions | boolean;
/**
* label 설정 옵션.
*/
label?: AxisLabelOptions | boolean;
/**
* visible 기본값이 undefined이다.
* visible이 undefined나 null로 지정되면, 축 위치에 따라 visible 여부가 결정된다.
*/
grid?: AxisGridOptions | boolean;
/**
* 가이드 옵션.
* 옵션 객체 또는 옵션 객체 배열로 여러 가이드를 설정할 수 있다.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 'guides' 설정이 존재하면 load 후 이 속성으로 설정한다.
*/
guide?: AxisGuideOptions[];
/**
* 직선 또는 bar 형태로 축 위의 마우스 위치를 표시하는 옵션.
*/
crosshair?: CrosshairOptions | boolean;
/**
* zoom된 x축에 표시할 수 있는 스크롤바 옵션.
* y축은 scrollBar가 표시되지 않는다.
* // TODO #fiddle axis/scrollbar Axis ScrollBar
*/
scrollBar?: AxisScrollBarOptions | boolean;
/**
* 분할 모드일 때 축이 표시될 pane의 수직 위치.
*
* @default 0
*/
row?: number;
/**
* 분할 모드일 때 축이 표시될 pane의 수평 위치.
*
* @default 0
*/
col?: number;
/**
* Polar 차트에서 사용될 때 시작 각도.
*
* @default 0
*/
startAngle?: number;
/**
* Polar 차트에서 사용될 때 원호 전체 각도.
* 0 ~ 360 사이의 값으로 지정해야 한다.
* 범위를 벗어난 값은 범위 안으로 조정된다.
* 지정하지 않거나 잘못된 값이면 360으로 계산된다.
*
* @default 360
*/
totalAngle?: number;
/**
* 표시 위치.
* 기본적으로 상대 축의 원점 쪽에 표시된다.
*
* @default 'normal'
*/
position?: AxisPosition;
/**
* true면 반대 방향으로 point 위치들이 지정된다.
*
* @default false
*/
reversed?: boolean;
/**
* 명시적으로 지정하는 최소값.
*
*/
minValue?: number;
/**
* 명시적으로 지정하는 최대값.
*
*/
maxValue?: number;
/**
* plot 영역이나 먼저 표시되는 축 사이의 여백 크기.
*
* @default 0
*/
marginNear?: number;
/**
* 차트 경계나 뒤쪽 축 사이의 여백 크기.
*
* @default 0
*/
marginFar?: number;
/**
* label 등에 표시할 수 있는 단위 정보 문자열.
*
*/
unit?: string;
/**
* 축에 포함된 시리즈들 툴팁의 위쪽에 표시되는 텍스트 템플릿.
*
* tooltipHeader
* tooltipRow,
* tooltipRow,
* ...
* tooltipFooter
* 형태로 툴팁이 표시된다.
*
* @default '${name}'
*/
tooltipHeader?: string;
/**
* 축에 포함된 각 시리즈별 표시되는 포인트 툴팁 텍스트 템플릿.
*
* @default '${series}: ${yValue}'
*/
tooltipRow?: string;
/**
* 축에 포함된 시리즈들 툴팁의 아래쪽에 표시되는 텍스트 템플릿.
*
*/
tooltipFooter?: string;
/**
* @default true
*/
animatable?: boolean;
/**
* true로 지정하면 새로 계산된 너비나 높이가 이전 계산된 크기보다 작으면 이전 크기를 유지한다.
*
* @default false
*/
fixedSize?: boolean;
}
/**
* @enum
*/
declare const _CategoryTickPosition: {
/**
* x축이면 {@page POINT}, y축이면 {@page EDGE}이다.
*/
readonly DEFAULT: "default";
/**
* 카테고리 중심에 표시한다.
*/
readonly POINT: "point";
/**
* 축 양끝과 카테고리들 사이에 표시한다.
*/
readonly EDGE: "edge";
};
/** @dummy */
type CategoryTickPosition = typeof _CategoryTickPosition[keyof typeof _CategoryTickPosition];
/**
* 카테고리축 tick 설정 모델.
*/
interface CategoryAxisTickOptions extends AxisTickOptions {
/**
* tick 표시 위치.
*/
position?: CategoryTickPosition;
/**
* @default 1
*/
step?: number;
}
declare const CategoryAxisType = "category";
/**
* 지정된 카테고리 개수로 축을 분할해서 각 카테고리에 연결된 데이터포인트들이 표시되게 한다.
* 카테고리 하나가 1의 축 값(너비)을 갖는다.
* 주로 x축으로 사용되며, 선형(linear)축과 달리 축을 분할한 각 카테고리는 서로 격리되어 있으며,
* 기본적으로 개별 카테고리의 너비(간격)나 카테고리들 사이의 순서는 의미가 없다.
* 즉, 카테고리가 위치한 축 값(숫자)이 data로서는 별 의미가 없는 경우에 사용한다.
* 축 상에 데이터포인트가 존재하지 않는 영역이 존재하게 된다면 선형 축을 고려해야 한다.
* (데이터포인트가 없은 영역을 자동으로 없애지는 않는다.)
* 반대로, 선형(linear, time, log) 축들은 축 값이 의미있는 data이므로,
* 축 값은 연속되고 데이터포인트가 없는 영역 또한 그 자체로 의미가 있다.
* // TODO: 그렇기 때문에, 카테고리를 정렬(sort)할 수 있다. (ex. 첫번째 시리즈 y값을 기준으로...). 필터링?
* 또, 축 label에 카테고리를 대표하는 이름을 표시할 필요한 경우 먼저 카테고리 축을 고려해야 한다.
*
* //1. categories 속성으로 카테고리 목록을 구성한다.
* //2. 이 축에 연결된 시리즈들에 포함된 data point들의 문자열인 값들, 혹은 categoryField에 해당하는 값들을 수집한다.
* // 수집된 category들 중 숫자가 아닌 것들은 {@page startValue}부터 시작해서 {@page valueStep} 속성에 지정된 값씩 차례대로 증가한 값을 갖게된다.
* //3. 각 카테고리 영역의 크기는 기본적으로 동일하게 배분되고,
* // 카테고리 영역 중간점이 카테고리 값의 위치가 된다.
* // {@page categories} 속성으로 카테고리를 지정할 때, 상대적 크기를 width로 지정해서 각 카테고리의 값을 다르게 표시할 수 있다.
* //4. tick mark나 label은 기본적으로 카테고리 값 위치(카테고리 중앙)에 표시된다.
* // tick mark는 카테고리 양끝에 표시될 수 있다.
*
* @config chart.xAxis[type=category]
* @config chart.yAxis[type=category]
*/
interface CategoryAxisOptions extends AxisOptions {
type?: typeof CategoryAxisType;
/**
* @override
*/
tick?: CategoryAxisTickOptions;
/**
* Category 목록을 수집하는 시리즈.
* 지정하지 않으면 모든 시리즈에서 카테고리를 수집한다.
*
*/
categorySeries?: string;
/**
* 카테고리로 사용되는 dataPoint 속성.
* {@page categories}가 지정되면 이 속성은 무시된다.
*
*/
categoryField?: string | number;
/**
* 명시적으로 지정하는 카테고리 목록.
* 문자열로 카테고리 항목을 지정하거나,
* object로 지정할 때에는 name(혹은 label) 속성에 카테고리 이름을 문자열로,
* width 속성에 상대 너비(1이 기본 너비)를 숫자로 지정한다.
* 첫 번째 값이 {@page startValue}에 해당하고 {@page valueStep}씩 증가한다.
* 각 카테고리의 상대적 너비를 지정할 수 있다.
* 이 목록을 지정하지 않으면 축에 연결된 시리즈들로부터 카테고리 목록을 자동 생성한다.
* 하지만 시리즈들이 모두 사라지는 경우 카테고리 목록 역시 사라지므로,
* 기대하는 카테고리 목록을 고정 표시하려는 경우 이 목록을 설정하는 것이 좋다.
*
*/
categories?: (string | object)[];
/**
* weigth 필드를 제공하는 시리즈.
*/
weightSeries?: string;
/**
* weightSeries data에서 weight를 제공하는 필드.
*/
weightField?: number | string;
/**
* 축의 양 끝 카테고리 위치 전후에 여백으로 추가되는 크기.
* 각각 시작/끝 카테고리에 대한 상대적 크기로 지정한다.
* {@page minPadding}, {@page maxPadding}으로 별도 지정할 수 있다.
*
* @default 0
*/
padding?: number;
/**
* 축의 시작 카테고리 위치 이 전에 여백으로 추가되는 크기.
* 카테고리 기본 너비(1)에 대한 상대적 크기로 지정한다.
* {@page padding} 속성으로 양끝 padding을 한꺼번에 지정할 수 있다.
*
*/
minPadding?: number;
/**
* 축의 끝 카테고리 위치 이 후에 여백으로 추가되는 크기.
* 카테고리 기본 너비(1)에 대한 상대적 크기로 지정한다.
* {@page padding} 속성으로 양끝 padding을 한꺼번에 지정할 수 있다.
*
*/
maxPadding?: number;
/**
* 각 카테고리의 양 끝에 추가되는 여백의 카테고리에 너비에 대한 상대적 크기.
* 0 ~ 0.5 사이의 값으로 지정한다.
*
* @default 0.1
*/
categoryPadding?: number;
/**
* polar 축일 때 시작 위치 간격.
* 첫번째 카테고리 너비(각도)에 대한 상대값으로 0~1 사이의 값을 지정한다.
* ex) 0.5로 지정하면 bar 시리즈의 첫 째 bar가 12시 위치에 표시된다.
*
* @default 0
*/
startOffset?: number;
}
/**
* 연속 축의 {@page config.yAxis.linear#baseValue} 위치에 표시되는 선 설정 옵션.
* 기본적으로 표시되지 않는다.
*/
interface AxisBaseLineOptions extends AxisLineOptions {
}
/**
* 연속축 break 설정 모델.
*/
interface AxisBreakOptions extends AxisItemOptions {
/**
* @default true
*/
enabled?: boolean;
/**
*/
from?: number;
/**
*/
to?: number;
/**
* @default '30%'
*/
size?: PercentSize;
/**
* @default 16
*/
space?: number;
/**
* @default true
*/
gridVisible?: boolean;
}
/**
* 축 양 끝 맞춤 방식.
* @enum
*/
declare const _AxisFit: {
/**
* x축이면 {@page VALUE}, y축이면 {@page TICK}.
*/
readonly DEFAULT: "default";
/**
* 축의 min/max가 tick에 해당하지 않는 경우 tick이 표시될 수 있도록 증가 시킨다.
*/
readonly TICK: "tick";
/**
* 축의 min/max에 맞춰 표시한다.
*/
readonly VALUE: "value";
};
/** @dummy */
type AxisFit = typeof _AxisFit[keyof typeof _AxisFit];
/**
* 연속축 label 설정 모델.
*/
interface ContinuousAxisLabelOptions extends AxisLabelOptions {
/**
* @override
*
* label에 표시될 숫자 값의 표시 형식.
*/
numberFormat?: string;
}
/**
* 연속축 기반.
*
* 최대한 데이터포인트들을 표시해야 하므로 'bar' 시리즈 등 너비가 있는 것들을 표시하기 위해서
* 양 끝에 공간을 추가할 수 있다. // calcPoints() 참조.
*/
interface ContinuousAxisOptions extends AxisOptions {
/**
* base value 위치에 표시되는 선분 설정 모델.
* 기본적으로 표시되지 않는다.
*
*/
baseLine?: AxisBaseLineOptions;
/**
* @override
*
* 명시적으로 지정하는 최소값.\
* 축에 연결된 data point들의 값으로 계산된 최소값보다 이 속성 값이 작으면 대신 이 값이 축의 최소값이 되고,
* {@page minPadding}도 무시된다.
* 계산값이 더 작으면 이 속성은 무시된다.\
* 계산값과 무관하게 최소값을 지정하려면 {@page strictMin}을 사용한다.
*/
minValue?: number;
/**
* @override
*
* 명시적으로 지정하는 최대값.\
* 축에 연결된 data point들의 값으로 계산된 최대값보다 이 속성 값이 크면 대신 이 값이 축의 최대값이 되고,
* {@page maxPadding}도 무시된다.
* 계산값이 더 크면 이 속성은 무시된다.\
* 계산값과 무관하게 최대값을 지정하려면 {@page strictMax}을 사용한다.
*/
maxValue?: number;
/**
* data point의 이 축 값이 NaN일 때도 point를 표시할 지 여부.
*
* @default true
*/
nullable?: boolean;
/**
* 시리즈에 baseValue가 지정되지 않은 경우 대신 사용되는 기본값.\
* // TODO: 또, 축 선을 표시하는 기준점(inner일 때)이 된다.
*
*/
baseValue?: number;
/**
* {@page minPadding}, {@page maxPadding}이 설정되지 않았을 때 적용되는 기본값이다.
*
*/
padding?: number;
/**
* 첫번째 tick 앞쪽에 추가되는 최소 여백을 축 길이에 대한 상대값으로 지정한다.
* 이 값을 지정하지 않으면 {@page padding}에 지정된 값을 따른다.
* {@page startFit}이 {@page AxitFit.TICK}일 때,
* data point의 최소값과 첫번째 tick 사이에 이미 그 이상의 간격이 존재한다면 이 속성은 무시된다.
* {@page strictMin}가 지정되거나, {@page minValue}가 계산된 최소값보다 작은 경우에도 이 속성은 무시된다.
*
*/
minPadding?: number;
/**
* 마지막 tick 뒤쪽에 추가되는 최소 여백을 축 길이에 대한 상대값으로 지정한다.
* 이 값을 지정하지 않으면 {@page padding}에 지정된 값을 따른다.
* {@page endFit}이 {@page AxitFit.TICK}일 때,
* data point의 최대값과 마지막 tick 사이에 이미 그 이상의 간격이 존재한다면 이 속성은 무시된다.
* {@page strictMax}가 지정되거나, {@page maxValue}가 계산된 최대값보다 큰 경우에도 이 속성은 무시된다.
*
*/
maxPadding?: number;
/**
* 무조건 적용되는 최소값.
* 즉, 이 값보다 작은 값을 갖는 시리즈 포인트들은 표시되지 않는다.
* minPadding도 적용되지 않는다.
*
*/
strictMin?: number;
/**
* 무조건 적용되는 최대값.
* 즉, 이 값보다 큰 값을 갖는 시리즈 포인트들은 표시되지 않는다.
* maxPadding도 적용되지 않는다.
*
*/
strictMax?: number;
/**
* 축 시작 위치에 tick 표시 여부.
* {@page strictMin}이 설정되면 {@page AxisFit.VALUE}로 적용된다.
*
* @default 'default'
*/
startFit?: AxisFit;
/**
* 축 끝 위치에 tick 표시 여부.
* {@page strictMax}가 설정되면 무시되고 {@page AxisFit.VALUE}로 적용된다.
*
* @default 'default'
*/
endFit?: AxisFit;
/**
* @override
*/
tick?: ContinuousAxisTickOptions;
/**
* @override
*/
grid?: ContinuousAxisGridOptions;
/**
* @override
*/
break?: AxisBreakOptions;
}
/**
* linear 축 label 설정 모델.
*/
interface LinearAxisLabelOptions extends ContinuousAxisLabelOptions {
/**
* true로 지정하면 label 끝에 단위 문자를 추가한다.
* 표시되는 값들의 연속성을 위해 true로 지정해도 step 간격이 1000 이상일 때 추가하는데,
* 간격과 상관없이 단위 문자를 표시하려면 '*'으로 지정한다.
*
* @default true
*/
useSymbols?: boolean | '*';
}
declare const LinearAxisType = "linear";
/**
* 선형 연속 축.
* 값 사이의 비율과 축 길이 비율이 항상 동일한 축.
*
* @config chart.xAxis[type=linear]
* @config chart.yAxis[type=linear]
*/
interface LinearAxisOptions extends ContinuousAxisOptions {
/**
*/
type?: typeof LinearAxisType;
/**
* @override
*/
label?: LinearAxisLabelOptions;
}
/**
* Log축 틱 설정 모델.
*/
interface LogAxisTickOptions extends ContinuousAxisTickOptions {
/**
* 소수점을 갖는 step들을 역로그된 값이 최대한 정수가 되는 위치로 재배치한다.
*
* @default true
* @config
*/
arrangeDecimals?: boolean;
}
declare const LogAxisType = "log";
/**
* 이 축에 연결된 시리즈들의 point y값을 {@page Math.log10}으로 계산된 위치에 표시한다.
*
* @config chart.xAxis[type=log]
* @config chart.yAxis[type=log]
*/
interface LogAxisOptions extends ContinuousAxisOptions {
/**
*/
type?: typeof LogAxisType;
/**
* @override
*/
tick?: LogAxisTickOptions;
}
/**
* 시간축 label 설정 모델.
*/
interface TimeAxisLabelOptions extends ContinuousAxisLabelOptions {
/**
* 현재 스케일의 시작일시에 상위 스케일의 포맷을 사용해서 표시한다.
*
* @default false
*/
useBeginningFormat?: boolean;
/**
* [밀리초, 초, 분, 시, 일, 주, 월, 년] 순서대로 날찌/시간 형식을 지정한다.
* 각 형식은 문자열이거나, `{ format: string, beginningFormat: string }` 형태의 json 객체로 지정한다.
* 지정하지 않은 스케일은 {@page timeFormat}, {@page beginningFormat}이나 기본 형식에 따라 표시된다.
*/
timeFormats?: any[];
/**
* 날짜/시간 표시 형식.
*/
timeFormat?: string;
/**
* 스케일 시작일시에 표시에 사용되는 형식.
*/
beginningFormat?: string;
}
/**
* 시간 축 틱 설정 모델.
*/
interface TimeAxisTickOptions extends ContinuousAxisTickOptions {
/**
* @append
* 단위가 지정된 문자열로 지정하는 경우 값이 -1 이하이거나 1 이상이어야 한다. // #141
*/
stepInterval?: number;
/**
* @override
*/
label?: TimeAxisLabelOptions;
}
declare const TimeAxisType = "time";
/**
* timeUnit(기본값 1)밀리초가 1에 해당한다.
*
* @config chart.xAxis[type=time]
* @config chart.yAxis[type=time]
*/
interface TimeAxisOptions extends ContinuousAxisOptions {
/**
*/
type?: typeof TimeAxisType;
/**
* @override
*/
label?: TimeAxisLabelOptions;
/**
* @override
* @default NaN
*/
baseValue?: number;
/**
* @override
*/
tick?: TimeAxisTickOptions;
}
/** @dummy */
type AxisOptionsType = CategoryAxisOptions | LinearAxisOptions | LogAxisOptions | TimeAxisOptions;
/**
* 단일 값을 다양한 방식으로 표시한다.
* 또, 단일 계이지들을 여러 개 묶어서 관련된 값을 표시할 수도 있다.
*/
interface GaugeBaseOptions extends ChartItemOptions {
type?: GaugeType;
/**
* 게이지 이름.
* 동적으로 게이지를 다루기 위해서는 반드시 지정해야 한다.
*
*/
name?: string;
/**
* 분할 모드일 때 게이지가 표시될 pane의 수직 index.
*
*/
row?: number;
/**
* 분할 모드일 때 게이지가 표시될 pane의 수평 index.
*
*/
col?: number;
/**
* plot 영역의 왼쪽 모서리와 wid사이의 간격.
*
*/
left?: PercentSize;
/**
* plot 영역의 오른쪽 모서리와 widget 사이의 간격.
* {@page left}가 설정되면 이 속성은 무시된다.
*
*/
right?: PercentSize;
/**
* plot 영역의 위쪽 모서리와 wid사이의 간격.
*
*/
top?: PercentSize;
/**
* plot 영역의 아래쪽 모서리와 wid사이의 간격.
* {@page bottom}이 설정되면 이 속성은 무시된다.
*
*/
bottom?: PercentSize;
/**
* 게이지 너비.
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.
*
*/
width?: PercentSize;
/**
* 게이지 높이.
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.
*
*/
height?: PercentSize;
/**
* {@page width}와 {@page height}를 동시에 설정한다.
*
*/
size?: PercentSize;
/**
* 게이지나 게이지그룹의 배경에 대한 스타일.
*/
backgroundStyle?: SVGStyleOrClass;
}
/**
* 단일 값을 다양한 방식으로 표시한다.
*
* @config chart.gauge[base]
*/
interface GaugeOptions extends GaugeBaseOptions {
/**
* Animation duration.
*
*/
duration?: number;
}
/**
* 같은 종류의 단일 계이지들을 여러 개 묶어서 관련된 값을 표시한다.
*
* @config chart.gaugeGroup[base]
*/
interface GaugeGroupOptions extends GaugeBaseOptions {
/**
* 단일 게이지 옵션 배열.
*/
children?: T[];
/**
* 최소값.
*
* @config
*/
minValue?: number;
/**
* 최대값.
*
* @config
*/
maxValue?: number;
}
/**
* 게이지 모델.
*/
interface ValueGaugeOptions extends GaugeOptions {
/**
* 최소값.
* group에 포함되면 이 값 대신 group의 최소값이 사용된다.
*
*/
minValue?: number;
/**
* 최대값.
* group에 포함되면 이 값 대신 group의 최대값이 사용된다.
*
*/
maxValue?: number;
/**
* 현재값.
*
*/
value?: number;
/**
* {@page value} 변화를 애니메이션으로 표현한다.
*
*/
animatable?: boolean;
}
/**
*/
interface GaugeScaleTickOptions extends ChartItemOptions {
/**
*/
reversed?: boolean;
/**
*/
length?: number;
}
/**
*/
interface LinearGaugeLabelOptions extends GaugeLabelOptions {
/**
* 값을 지정하지 않으면 게이지 표시 방향에 따라 자동으로 위치를 결정한다.
*
*/
position?: 'left' | 'right' | 'top' | 'bottom';
/**
* position이 'left', 'right'일 때, label 표시 영역 너비.
* 픽셀값이나 게이지 전체 너비에 대한 상대값으로 지정할 수 있다.
*
*/
width?: PercentSize;
/**
* position이 'top', 'bottom'일 때, label 표시 영역 높이.
* 픽셀값이나 게이지 전체 높이에 대한 상대값으로 지정할 수 있다.
*
*/
height?: PercentSize;
/**
* position이 'left', 'right'일 때, label 표시 영역 최대 너비.
* 픽셀값이나 게이지 전체 너비에 대한 상대값으로 지정할 수 있다.
* {@page width}가 지정되면 이 속성은 무시된다.
*
*/
maxWidth?: PercentSize;
/**
* position이 'top', 'bottom'일 때, label 표시 영역 최대 높이.
* 픽셀값이나 게이지 전체 높이에 대한 상대값으로 지정할 수 있다.
* {@page height}가 지정되면 이 속성은 무시된다.
*
*/
maxHeight?: PercentSize;
/**
* label과 본체 사이의 간격.
* 픽셀값이나 게이지 전체 크기(position에 따라 높이나 너비)에 대한 상대값으로 지정할 수 있다.
*/
gap?: PercentSize;
}
/**
*/
interface LinearGaugeScaleOptions extends GaugeScaleOptions {
}
/**
* 선형 게이지 base 모델.
*/
interface LinearGaugeBaseOptions extends ValueGaugeOptions {
/**
* true면 수직으로 표시한다.
*
*/
vertical?: boolean;
/**
* true면 반대 방향으로 표시한다.
*
* @default false
*/
reversed?: boolean;
/**
* label 설정 모델.
*
*/
label?: LinearGaugeLabelOptions | boolean;
/**
* scale.
*
*/
scale?: LinearGaugeScaleOptions | boolean;
}
/**
*/
interface LinearGaugeChildLabelOptions extends ChartItemOptions {
/**
* true면 자식 게이지의 label을 기본 위치의 반대쪽에 표시한다.
*
* @config
* @default false
*/
opposite?: boolean;
/**
* 자식 계이지의 label과 본체 사이의 간격을 픽셀 단위로 지정한다.
*
* @config
* @default 10
*/
gap?: number;
}
/**
*/
interface LinearGaugeGroupLabelOptions extends LinearGaugeLabelOptions {
/**
* @default 10
*/
gap?: number;
}
/**
*/
interface LinearGaugeGroupBaseOptions extends GaugeGroupOptions {
/**
* true면 자식 게이지들을 수직으로 지정하고(자식 게이지의 vertical 속성과 관계없이) 왼쪽에서 오른쪽으로 차례대로 배치한다.
* false면 자식 게이지들을 수펑으로 지정하고, 위에서 아래로 순서대로 배치한다.
* [주의]이런 배치가 의도와 맞지 않다면 그룹없이 개별적으로 배치해야 한다.
*
* @config
* @default false
*/
vertical?: boolean;
/**
* label 설정 모델.
*
* @config
*/
label?: LinearGaugeLabelOptions | boolean;
/**
* 자식 게이지들의 label 표시 관련 속성 모델.
*
* @config
*/
itemLabel?: LinearGaugeChildLabelOptions | boolean;
/**
* scale.
*
* @config
*/
scale?: LinearGaugeScaleOptions | boolean;
/**
* 자식 게이지들 사이의 표시 간격을 픽셀 단위로 지정한다.
*
* @default 10
*/
itemGap?: number;
}
/**
*/
interface BulletGaugeBandOptions extends ChartItemOptions {
/**
* true면 수직 bar로 표시한다.
*
* @default false
*/
vertical?: boolean;
/**
* 너비
*
*/
width?: PercentSize;
/**
* 높이
*
*/
height?: PercentSize;
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*
*/
ranges?: ValueRange[];
/**
* true로 지정하면 {@page ranges} 항목에서 **toValue**나 **fromValue**가 지정되지 않은 경우,
* 모든 값이 포함되는 값으로 확장한다.
*
* @default true
*/
rangeInclusive?: boolean;
}
/**
*/
interface BulletTargetBarOptions extends ChartItemOptions {
/**
* @override
* @default true
*/
visible: boolean;
}
/**
* linear 게이지의 값을 표시하는 영역에 대한 설정 모델.
*/
interface LinearValueBarOptions extends ChartItemOptions {
/**
* {@page value 현재 값} 등을 기준으로 추가 적용되는 스타일을 리턴한다.
* 기본 설정을 따르게 하고 싶으면 undefined나 null을 리턴한다.
*
*/
styleCallback?: (args: any) => SVGStyleOrClass;
}
/**
*/
interface BulletValueBarOptions extends LinearValueBarOptions {
/**
* {@page value 현재 값}이 {@page targetValue 목표 값} 미만일 때
* 적용되는 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
belowStyle?: SVGStyleOrClass;
}
declare const BulletGaugeType = "bullet";
/**
* Bullet 게이지.
* {@page op.GaugeOptions#type}은 'bullet'이다.
* 현재 값을 목표 값과 비교해서 표시한다.
* 또, {@page band}를 같이 표시하면, 여러 값 범위 중 어디에 속한 상태인 지를 나타낼 수 있다.
*
* @config chart.gauge[type=bullet]
* @modules gauge
*/
interface BulletGaugeOptions extends LinearGaugeBaseOptions {
/**
*/
type?: typeof BulletGaugeType;
/**
* 밴드.
*
*/
band?: BulletGaugeBandOptions | boolean;
/**
* tarbar.
*
*/
targetBar?: BulletTargetBarOptions | boolean;
/**
* actual bar.
*
*/
valueBar?: BulletValueBarOptions | boolean;
/**
* 목표 값.
*
*/
targetValue?: number;
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*/
ranges?: ValueRange[];
/**
* true로 지정하면 {@page ranges} 항목에서 **toValue**나 **fromValue**가 지정되지 않은 경우,
* 모든 값이 포함되는 값으로 확장한다.
*
* @default true
*/
rangeInclusive?: boolean;
}
declare const BulletGaugeGroupType = "bulletgroup";
/**
* Bullet 게이지그룹.
* {@page op.GaugeOptions#type}은 'bulletgroup'이다.
*
* @config chart.gauge[type=bulletgroup]
* @modules gauge
*/
interface BulletGaugeGroupOptions extends LinearGaugeGroupBaseOptions {
type?: typeof BulletGaugeGroupType;
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*
* @config
*/
ranges?: ValueRange[];
/**
* true로 지정하면 {@page ranges} 항목에서 **toValue**나 **fromValue**가 지정되지 않은 경우,
* 모든 값이 포함되는 값으로 확장한다.
*
* @config
* @default true
*/
rangeInclusive?: boolean;
}
/**
*/
interface GaugeLabelOptions extends ChartTextOptions {
/**
* 게이지 값 변경 애니메이션이 실행될 때, label도 따라서 변경시킨다.
*
* @default true
*/
animatable?: boolean;
}
/**
*/
interface CircularGaugeLabelOptions extends GaugeLabelOptions {
/**
* 게이지 중심 등, label이 표시될 기준 위치에서 x 방향으로 이동한 픽셀 크기.
* 기준 위치는 게이지 종류에 따라 달라진다.
*
* @default 0
*/
offsetX?: PercentSize;
/**
* 게이지 중심 등, label이 표시될 기준 위치에서 y 방향으로 이동한 픽셀 크기.
* 기준 위치는 게이지 종류에 따라 달라진다.
*
* @default 0
*/
offsetY?: PercentSize;
}
/**
* 원형 게이지 모델.
* label의 기본 위치의 x는 원호의 좌위 최대 각 위치를 연결한 지점,
* y는 중심 각도의 위치.
*/
interface CircularGaugeOptions extends ValueGaugeOptions {
/**
* 게이지 중심 수평 위치.
* 픽셀 단위의 크기나, plot 영역 전체 너비에 대한 상대적 크기로 지정할 수 있다.
*
*/
centerX?: PercentSize;
/**
* 게이지 중심 수직 위치.
* 픽셀 단위의 크기나, plot 영역 전체 높이에 대한 상대적 크기로 지정할 수 있다.
*
*/
centerY?: PercentSize;
/**
* 게이지 원호의 반지름.
* 픽셀 단위의 크기나, plot 영역 전체 크기(너비와 높이 중 작은 값)에 대한 상대적 크기로 지정할 수 있다.
* '50%'로 지정하면 plot 영역의 width나 height중 작은 크기와 동일한 반지름으로 표시된다.
*
*/
radius?: PercentSize;
/**
* 내부 원호의 반지름.
* 픽셀 단위의 크기나, {@page radius}에 대한 상대적 크기로 지정할 수 있다.
* '100%'이면 게이지 원호의 반지름과 동일하다.
*
*/
innerRadius?: PercentSize;
/**
* 값을 나타내는 원호의 반지름.
* 픽셀 단위의 크기나,
* {@page radius}와 {@page innerRadius}로 결정된 기본 rim의 중점에 대한 상대적 크기로 지정할 수 있다.
* 지정하지 않거나 '100%'이고 {@page valueRim}의 {@page valueRim.thickness 두께}가
* 기본 rim의 두께와 동일하면 게이지 원호의 반지름과 동일하게 표시된다.
*/
valueRadius?: PercentSize;
/**
* 게이지 원호 시작 각도.
* 지정하지 않거나 잘못된 값이면 0으로 계산된다.
* 0은 시계의 12시 위치다.
*
* @default 0
*/
startAngle?: number;
/**
* 게이지 원호 전체 각도.
* 0 ~ 360 사이의 값으로 지정해야 한다.
* 범위를 벗어난 값은 범위 안으로 조정된다.
* 지정하지 않거나 잘못된 값이면 360으로 계산된다.
* 예) 180 이면 반 원호가 된다.
*
* @default 360
*/
sweepAngle?: number;
/**
* true면 시계 방향으로 회전한다.
*
* @default true
*/
clockwise?: boolean;
/**
* 게이지 중앙에 표시되는 label 설정 모델
*
*/
label?: CircularGaugeLabelOptions | boolean;
/**
* 내부 원에 적용할 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
*/
innerStyle?: SVGStyleOrClass;
}
/**
*/
interface CircularGaugeGroupOptions extends GaugeGroupOptions {
/**
* 게이지 중심 수평 위치.
* 픽셀 단위의 크기나, plot 영역 전체 너비에 대한 상대적 크기로 지정할 수 있다.
*
* @config
*/
centerX?: PercentSize;
/**
* 게이지 중심 수직 위치.
* 픽셀 단위의 크기나, plot 영역 전체 높이에 대한 상대적 크기로 지정할 수 있다.
*
* @config
*/
centerY?: PercentSize;
/**
* 게이지 원호의 반지름.
* 픽셀 단위의 크기나, plot 영역 전체 크기(너비와 높이 중 작은 값)에 대한 상대적 크기로 지정할 수 있다.
* '50%'로 지정하면 plot 영역의 width나 height중 작은 크기와 동일한 반지름으로 표시된다.
*
* @config
*/
radius?: PercentSize;
/**
* 내부 원호의 반지름.
* 픽셀 단위의 크기나, {@page radius}에 대한 상대적 크기로 지정할 수 있다.
* '100%'이면 게이지 원호의 반지름과 동일하다.
*
* @config
*/
innerRadius?: PercentSize;
/**
* 값을 나타내는 원호의 반지름.
* 픽셀 단위의 크기나, {@page radius}에 대한 상대적 크기로 지정할 수 있다.
* 지정하지 않거나 '100%'이면 게이지 원호의 반지름과 동일하다.
*/
valueRadius?: PercentSize;
/**
* 게이지 원호 시작 각도.
* 지정하지 않거나 잘못된 값이면 0으로 계산된다.
* 0은 시계의 12시 위치다.
*
* @default 0
*/
startAngle?: number;
/**
* 게이지 원호 전체 각도.
* 0 ~ 360 사이의 값으로 지정해야 한다.
* 범위를 벗어난 값은 범위 안으로 조정된다.
* 지정하지 않거나 잘못된 값이면 360으로 계산된다.
* 예) 180 이면 반 원호가 된다.
*
* @default 360
*/
sweepAngle?: number;
/**
* true면 시계 방향으로 회전한다.
*
* @default false
*/
clockwise?: boolean;
/**
* 게이지 중앙에 표시되는 label 설정 모델
*
* @config
*/
label?: CircularGaugeLabelOptions | boolean;
/**
* 내부 원에 적용할 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
* @config
*/
innerStyle?: SVGStyleOrClass;
/**
* 자식 게이지 원호들의 간격을 픽셀 단위로 지정한다.
*
* @default 4
*/
itemGap?: number;
/**
* @default 10
*/
labelGap?: number;
}
/**
*/
interface GaugeRangeLabelOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
}
/**
* 게이지 밴드 모델.
*
*/
interface GaugeRangeBandOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* 표시 위치.
*
* @default 'defalut'
*/
position?: GaugeItemPosition;
/**
* 밴드의 두께를 픽셀 단위나,
* 게이지 rim의 두께에 대한 상대적 크기로 지정할 수 있다.\
* 값을 지정하지 않으면 게이지 본체 내부에 표시될 때 '100%'(본체 두께와 동일)로 표시되고,
* 외부에 있을 때는 7 픽셀로 두께로 표시된다.
*
* @default 7
*/
thickness?: PercentSize;
/**
* {@page position}이 'inside'가 아닐 때, 이 밴드와 게이지 본체 사이의 간격
*
* @default 5
*/
gap?: number;
/**
* 0보다 큰 값으로 지정하면, 크기 만큼 영역 아이템 사이에 간격을 둔다.
*
* @default 0
*/
itemGap?: number;
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*
*/
ranges?: ValueRange[];
/**
* {@page position}이 'inside'일 때만 표시될 수 있다.
*
*/
rangeLabel?: GaugeRangeLabelOptions | boolean;
/**
* 각 range의 양 끝에 해당하는 값을 표시한다.
*
*/
tickLabel?: ChartItemOptions;
}
/**
*/
interface GaugeScaleLabelOptions extends IconedTextOptions {
}
/**
* @enum
*/
declare const _GaugeItemPosition: {
/**
* 게이지 본체와 scale 사이에 표시된다.
*/
readonly DEFAULT: "default";
/**
* 원 표시 위치의 반대 쪽 게이지 옆에 표시된다.
*/
readonly OPPOSITE: "opposite";
/**
* 게이지 본체 내부에 본체와 같은 두께로 표시된다.
*/
readonly INSIDE: "inside";
};
/** @dummy */
type GaugeItemPosition = typeof _GaugeItemPosition[keyof typeof _GaugeItemPosition];
/**
* Gauge scale.
*/
interface GaugeScaleOptions extends ChartItemOptions {
/**
* 표시 위치.
*
* default: 게이지 본체와 scale 사이에 표시된다.
*
* opposite: 원 표시 위치의 반대 쪽 게이지 옆에 표시된다.
*
* inside: 게이지 본체 내부에 본체와 같은 두께로 표시된다.
*/
position?: 'default' | 'opposite' | 'inside';
/**
*/
line?: ChartItemOptions | boolean;
/**
*/
tick?: GaugeScaleTickOptions | boolean;
/**
*/
label?: GaugeScaleLabelOptions | boolean;
/**
*/
steps?: number[];
/**
*/
stepCount?: number;
/**
*/
stepInterval?: number;
/**
*/
stepPixels?: number;
/**
* 게이지 본체와의 간격.
*
* @default 8 픽셀.
*/
gap?: number;
}
/**
*/
interface CircleGaugeScaleOptions extends GaugeScaleOptions {
/**
* @override
* @default false
*/
/**
* @override
* @default 72
*/
stepPixels: number;
}
/**
*/
interface CircleGaugeRimBaseOptions extends ChartItemOptions {
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*
*/
ranges?: ValueRange[];
/**
* true로 지정하면 {@page ranges} 항목에서 **toValue**나 **fromValue**가 지정되지 않은 경우,
* 모든 값이 포함되는 값으로 확장한다.
*
*/
rangeInclusive?: boolean;
}
/**
* 바탕 rim.
*/
interface CircleGaugeRimOptions extends CircleGaugeRimBaseOptions {
/**
* segment 두께.
* 픽셀 단위 크기나, 게이지 원호 두께에 대한 상대 크기로 지정할 수 있다.
*
*/
segmentThickness?: PercentSize;
/**
* segement 사이의 간격.
*/
segmentGap?: number;
}
/**
* 값을 표시하는 rim.
*/
interface CircleGaugeValueRimOptions extends CircleGaugeRimBaseOptions {
/**
* 테두리 굵기.
* 픽셀 단위의 크기나, {@page CircularGaugeOptions.radius}와 {@page CircularGaugeOptions.innerRadius}로 결정된 원호 굵기에 대한 상대적 크기로 지정할 수 있다.
* 예) 지정하지 않거나 '100%'로 지정하면 게이지 원호 굵기와 동일하게 표시된다.
*
*/
thickness?: PercentSize;
/**
* true면 원호 대신 선으로 표시한다.
* 대시 표현이 가능해진다.
*
* @default false
*/
stroked?: boolean;
}
/**
*/
interface CircleGaugeValueMarkerOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
}
/**
*/
interface CircleGaugeHandOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* 게이지 중심쪽의 바늘 반지름.\
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default 3
*/
radius?: PercentSize;
/**
* 바늘 길이.\
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default '100%'
*/
length?: PercentSize;
/**
* 바늘 중심과 게이지 중심 사이의 간격.\
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default 0
*/
offset?: PercentSize;
}
/**
*/
interface CircleGaugePinOptions extends ChartItemOptions {
/**
* @override
* @default false
*/
visible?: boolean;
/**
* 핀 반지름.
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default 5
*/
radius?: PercentSize;
}
declare const CircleGaugeType = "circle";
/**
* 원형 게이지.
* {@page op.GaugeOptions#type}은 'circle'이다.
* 지정된 최대 각도 내에서 현재 값의 비율을 원호로 표시한다.
*
* @config chart.gauge[type=circle]
* @modules gauge
*/
interface CircleGaugeOptions extends CircularGaugeOptions {
/**
*/
type?: typeof CircleGaugeType;
/**
* 게이지 본체 주변이나 내부에 값 영역들을 구분해서 표시하는 band의 모델.
*
*/
band?: GaugeRangeBandOptions | boolean;
/**
* 스케일 모델.
*
*/
scale?: CircleGaugeScaleOptions | boolean;
/**
* 게이지 배경 원호 테두리 설정 모델.
*
*/
rim?: CircleGaugeRimOptions | boolean;
/**
* 게이지의 값 원호 테두리 설정 모델.
*
*/
valueRim?: CircleGaugeValueRimOptions | boolean;
/**
* 게이지 바늘 설정 모델.
*
*/
hand?: CircleGaugeHandOptions | boolean;
/**
* 게이지 중앙에 표시되는 핀 설정 모델.
*
*/
pin?: CircleGaugePinOptions | boolean;
}
declare const CircleGaugeGroupType = "circlegroup";
/**
* Circle 게이지그룹.
* {@page op.GaugeOptions#type}은 'circlegroup'이다.
*
* @config chart.gauge[type=circlegroup]
* @modules gauge
*/
interface CircleGaugeGroupOptions extends CircularGaugeGroupOptions {
/**
*/
type?: typeof CircleGaugeGroupType;
/**
* @override
* @default '50%'
*/
innerRadius?: PercentSize;
}
/**
* Clock 게이지 테두리(rim) 설정 모델.
*/
interface ClockGaugeRimOptions extends ChartItemOptions {
/**
* rim 두께.
* 픽셀 단위 크기나, 게이지 반지름 대한 상대 크기로 지정할 수 있다.
*
* @default 7 pixel
*/
thickness?: PercentSize;
}
/**
* Clock 게이지 시/분침(hand) 설정 모델.
*/
interface ClockGaugeHandOptions extends ChartItemOptions {
/**
* 픽셀 단위 바늘 두께.
* 침 종류에 따라 기본값이 다르다.
*
*/
thickness?: number;
/**
* 바늘 길이.
* 픽셀 단위로 직접 지정하거나 시계 반지름에 대한 상대 크기로 지정할 수 있다.
* 침 종류에 따라 기본값이 다르다.
*
*/
length?: PercentSize;
}
/**
* Clock 게이지 초침(hand) 설정 모델.
*/
interface ClockGaugeSecondHandOptions extends ClockGaugeHandOptions {
/**
* true면 초 이동 시 애니메이션 효과로 표시한다.
*
*/
animatable?: boolean;
/**
* {@page animatable}이 true일 때 애니메이션 기간.
* 밀리초 단위로 지정한다.
*
*/
duration?: number;
}
/**
* Clock 게이지 tick 설정 모델.
*/
interface ClockGaugeTickOptions extends ChartItemOptions {
}
/**
* Clock 게이지 tick 라벨 설정 모델.
*/
interface ClockGaugeTickLabelOptions extends ChartItemOptions {
/**
*/
step?: number;
/**
*/
offset?: number;
}
/**
* Clock 게이지 중심 pin 설정 모델.
*/
interface ClockGaugePinOptions extends ChartItemOptions {
}
/**
* @enum
*/
declare const _ClockGaugeLabelPosition: {
readonly TOP: "top";
readonly BOTTOM: "bottom";
};
/** @dummy */
type ClockGaugeLabelPosition = typeof _ClockGaugeLabelPosition[keyof typeof _ClockGaugeLabelPosition];
/**
* Clock 게이지 내부에 표시되는 라벨 설정 모델.
*/
interface ClockGaugeLabelOptions extends ChartTextOptions {
/**
* 라벨 표시 위치.
*
*/
position?: ClockGaugeLabelPosition;
}
declare const ClockGaugeType = "clock";
/**
* 시계 게이지.
* {@page op.GaugeOptions#type}은 'clock'이다.
* 원형 아날로그 시계를 표시한다.
*
* @config chart.gauge[type=clock]
* @modules gauge
*/
interface ClockGaugeOptions extends GaugeOptions {
/**
*/
type?: typeof ClockGaugeType;
/**
* 분단위로 시계에 표시할 지역의 timezone을 지정한다.
* 예) 뉴욕: -4 * 60, 파리: 2 * 60
*
*/
timezone?: number;
/**
* 이 속성에 명시적으로 시간을 지정하면 현재 시간 대신 이 시각을 표시한다.
*
*/
time?: Date | number | string;
/**
* 게이지 중심 수평 위치.
* 픽셀 단위의 크기나, plot 영역 전체 너비에 대한 상대적 크기로 지정할 수 있다.
*
*/
centerX?: PercentSize;
/**
* 게이지 중심 수직 위치.
* 픽셀 단위의 크기나, plot 영역 전체 높이에 대한 상대적 크기로 지정할 수 있다.
*
*/
centerY?: PercentSize;
/**
* 게이지 원호의 반지름.
* 픽셀 단위의 크기나, plot 영역 전체 크기(너비와 높이 중 작은 값)에 대한 상대적 크기로 지정할 수 있다.
* '50%'로 지정하면 plot 영역의 width나 height중 작은 크기와 동일한 반지름으로 표시된다.
*
*/
radius?: PercentSize;
/**
* rim 설정 모델.
*
*/
rim?: ClockGaugeRimOptions | boolean;
/**
* 시침 설정 모델.
*
*/
hourHand?: ClockGaugeHandOptions | boolean;
/**
* 분침 설정 모델.
*
*/
minuteHand?: ClockGaugeHandOptions | boolean;
/**
* 초침 설정 모델.
*
*/
secondHand?: ClockGaugeSecondHandOptions | boolean;
/**
* main tick.
*
*/
tick?: ClockGaugeTickOptions | boolean;
/**
* minor tick
*
*/
minorTick?: ClockGaugeTickOptions | boolean;
/**
* tick label
*
*/
tickLabel?: ClockGaugeTickLabelOptions | boolean;
/**
* pin
*
*/
pin?: ClockGaugePinOptions | boolean;
/**
* label
*
*/
label?: ClockGaugeLabelOptions | boolean;
/**
* 시계 동작 여부.
*
* @default true
*/
active?: boolean;
}
declare const LinearGaugeType = "linear";
/**
* 선형 게이지.
* {@page op.GaugeOptions#type}은 'linear'이다.
* 현재 값을 선형 막대로 표시한다.
* 또, {@page band}를 같이 표시하면, 여러 값 범위 중 어디에 속한 상태인 지를 나타낼 수 있다.
*
* @config chart.gauge[type=linear]
* @modules gauge
*/
interface LinearGaugeOptions extends LinearGaugeBaseOptions {
/**
*/
type?: typeof LinearGaugeType;
/**
* 게이지 값을 표시하는 bar 모델.
*
*/
valueBar?: LinearValueBarOptions | boolean;
/**
* 게이지 본체 주변이나 내부에 값 영역들을 구분해서 표시하는 band의 모델.
*
*/
band?: GaugeRangeBandOptions | boolean;
}
declare const LinearGaugeGroupType = "lineargroup";
/**
* 선형 게이지그룹.
* {@page op.GaugeOptions#type}은 'lineargroup'이다.
*
* @config chart.gauge[type=lineargroup]
* @modules gauge
*/
interface LinearGaugeGroupOptions extends LinearGaugeGroupBaseOptions {
/**
*/
type?: typeof LinearGaugeGroupType;
/**
*/
band?: GaugeRangeBandOptions;
}
/** @enum */
declare const GaugeTypes: {
readonly BulletGaugeType: "bullet";
readonly CircleGaugeType: "circle";
readonly ClockGaugeType: "clock";
readonly LinearGaugeType: "linear";
readonly CircleGaugeGroupType: "circlegroup";
readonly LinearGaugeGroupType: "lineargroup";
readonly BulletGaugeGroupType: "bulletgroup";
};
/** @dummy */
type GaugeType = typeof GaugeTypes[keyof typeof GaugeTypes];
/** @dummy */
type GaugeOptionsType = LinearGaugeOptions | BulletGaugeOptions | CircleGaugeOptions | ClockGaugeOptions | LinearGaugeGroupOptions | BulletGaugeGroupOptions | CircleGaugeGroupOptions;
/**
* 차트 좌표계와 그 방향 및 시리즈와 게이지의 기본 타입을 결정하는 중요한 몇가지 속성들과
* 하위 구성 요소들에 대한 옵션들을 설정한다.
* 차트 생성 시 이 옵션 객체를 구성해서 전달해야 한다.
*
* ```js
* const chart = RealChart.createChart(doc, 'div', {
* .... // 여기에 설정한다.
* });
* ```
*
* {@page https://www.typescriptlang.org/ typescript} 환경에서는 타입을 명시적으로 지정하여
* 개발 편집기의 typescript 지원을 받을 수 있으므로
* 설정 객체를 별도로 정의할 수 있다.
*
* ```ts
* const config: ChartConfiguration = {
* ...
* };
* const chart = RealChart.createChart(doc, 'div', config);
* ```
*
* @config chart
*/
interface ChartConfiguration {
/**
* 기본 {@page config.base.series 시리즈} type.
* 시리즈에 {@page config.base.series#type}을 지정하지 않으면 이 속성값의 시리즈로 생성된다.
* [주의] 차트 로딩 후 변경할 수 없다.
*
* @default 'bar'
*/
type?: 'bar' | 'barrange' | 'bargroup' | 'bellcurve' | 'boxplot' | 'bubble' | 'bump' | 'candlestick' | 'circlebar' | 'circlebargroup' | 'dumbbell' | 'equalizer' | 'errorbar' | 'funnel' | 'heatmap' | 'histogram' | 'arearange' | 'area' | 'areagroup' | 'line' | 'linegroup' | 'spline' | 'lollipop' | 'ohlc' | 'pareto' | 'pie' | 'piegroup' | 'scatter' | 'treemap' | 'vector' | 'waterfall';
/**
* 기본 {@page config.base.gauge 게이지} type.
* 게이지에 type을 지정하지 않으면 이 속성 type의 시리즈로 생성된다.
* [주의] 차트 로딩 후 변경할 수 없다.
*
* @default 'circle'
*/
gaugeType?: 'circle' | 'bullet' | 'clock' | 'linear';
/**
* true면 차트가 {@page https://en.wikipedia.org/wiki/Polar_coordinate_system 극좌표계}로 표시된다.
* 기본은 {@page https://en.wikipedia.org/wiki/Cartesian_coordinate_system 직교좌표계}이다.
* 극좌표계일 때,
* x축이 원호에, y축은 방사선에 위치하고, 아래의 제한 사항이 있다.
* 1. x축은 첫번째 축 하나만 사용된다.
* 2. axis.position 속성은 무시된다.
* 3. chart, series의 inverted 속성이 무시된다.
* 4. 극좌표계에 표시할 수 없는 series들은 표시되지 않는다.
*
* [주의] 차트 로딩 후 변경할 수 없다.
*
* @default false
*/
polar?: boolean;
/**
* {@page polar}가 아닌 기본 직교 좌표계일 때 true로 지정하면 x축이 수직, y축이 수평으로 배치된다.
* [주의] 차트 로딩 후 변경할 수 없다.
*
* @default false
*/
inverted?: boolean;
/**
* 이 차트 구성 설정에서 반복 사용할 수 있는 설정 모음.
*/
templates?: ConfigObject;
/**
* 차트 전체에 영향을 미치는 옵션들.
*/
options?: ChartOptionsOptions;
/**
* Asset 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'assets'** 설정이 존재하면 load 후 이 속성으로 설정한다.
*/
asset?: AssetOptionsType | AssetOptionsType[];
/**
* 차트 타이틀.
*/
title?: TitleOptions | string;
/**
* 차트 제목 주위에 표시되는 부제목.
*/
subtitle?: SubtitleOptions | string;
/**
* 차트 시리즈 구성 등을 직관적으로 이해할 수 있도록 도와주는 범례.
* 시리즈나 데이터포인트 등의 이름과 심볼을 같이 표시할 수 있다.
*/
legend?: LegendOptions | boolean;
/**
* 데이터포인트 뷰에 마우스가 올라가면 표시되는 툴팁 상자.
* {@page guide.tooltip 툴팁 개요} 페이지를 참조한다.
*/
tooltip?: TooltipOptions | boolean;
/**
* 시리즈 또는 시리즈 목록.
*/
series?: SeriesOptionsType | SeriesOptionsType[];
/**
* x축 또는 x축 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'xAxes'** 항목이 존재하면
* 그 항목을 이 속성으로 설정한다.
*/
xAxis?: AxisOptionsType | AxisOptionsType[];
/**
* y축 또는 y축 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'yAxes'** 항목이 존재하면
* 그 항목을 이 속성으로 설정한다.
*/
yAxis?: AxisOptionsType | AxisOptionsType[];
/**
* 게이지 또는 게이지 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'gauges'** 항목이 존재하면
* 그 항목을 이 속성으로 설정한다.
*/
gauge?: GaugeOptionsType | GaugeOptionsType[];
/**
* 어노테이션 또는 어노테이션 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'annotations'** 항목이 존재하면
* 그 항목을 이 속성으로 설정한다.
*/
annotation?: AnnotationOptionsType | AnnotationOptionsType[];
/**
* {@page config.base.series 시리즈}나 {@page config.base.gauge 게이지}들이 그려지는 영역.
*/
body?: BodyOptions;
/**
* 시리즈 내비게이터.
*/
seriesNavigator?: SeriesNavigatorOptions | boolean;
/**
* 분할 모드 설정.
*/
split?: SplitOptions;
/**
* 내보내기 설정.
*/
exporting?: ExporterOptions;
}
/**
* {@page Gauge 게이지}와 {@page GaugeGroup 게이지그룹} 모델들의 기반 클래스.
* {@page options} 모델은 {@page op.GaugeBaseOptions}이다.
*/
declare abstract class GaugeBase extends Widget {
static readonly type: string;
static defaults: GaugeBaseOptions;
_row: number;
_col: number;
private _name;
index: number;
private _sizeDim;
private _widthDim;
private _heightDim;
private _leftDim;
private _rightDim;
private _topDim;
private _bottomDim;
_type(): string;
get name(): string;
getSize(width: number, height: number): Size;
getLeft(doamin: number): number;
getRight(doamin: number): number;
getTop(doamin: number): number;
getBottom(doamin: number): number;
_load(source: any): OP;
protected _doApply(options: GaugeBaseOptions): void;
}
declare abstract class GaugeItem extends ChartItem {
constructor(gauge: GaugeBase);
}
/**
* 단일 게이지 모델들의 기반 클래스.
* {@page options} 모델은 {@page op.GaugeBaseOptions}이다.
*/
declare abstract class Gauge extends GaugeBase {
static register(...clses: typeof Gauge[]): void;
static defaults: GaugeOptions;
static _loadGauge(chart: IChart, src: any, defType?: string): Gauge;
_group: GaugeGroup;
_gindex: number;
setGroup(group: GaugeGroup, index: number): void;
}
/**
* 게이지그룹 모델들의 기반 클래스
* {@page options} 모델은 {@page op.GaugeBaseOptions}이다.
* 같은 {@page op.GaugeOptions#type}의 여러 {@page ValueGauge 게이지}들을 연관지어 표시한다.
* //TODO: 모든 자식들의 최소 최대가 포함되는 range로 구성한다.
*/
declare abstract class GaugeGroup = GaugeGroupOptions> extends GaugeBase {
static readonly gaugeType: string;
static register(...clses: typeof GaugeGroup>[]): void;
static defaults: GaugeGroupOptions;
private _gauges;
protected _visibles: T[];
get gauges(): T[];
count(): number;
isEmpty(): boolean;
visibles(): T[];
abstract _gaugesType(): string;
get(index: number): T;
getVisible(index: number): T;
calcedMinMax(): IMinMax;
protected _doApply(options: GaugeBaseOptions): void;
protected _doSaveArray(prop: string, value: any[]): any[];
_prepareRender(): void;
private $_loadGauges;
private $_add;
protected _setGroup(child: T, index: number): void;
}
/**
* @internal
*/
declare class GaugeCollection extends ChartItemCollection {
private _map;
private _visibles;
private _gauges;
get firstGauge(): Gauge;
isEmpty(visibleOnly: boolean): boolean;
getVisibles(): GaugeBase[];
getPaneVisibles(row: number, col: number): GaugeBase[];
getGauge(name: string): Gauge;
get(name: string | number): GaugeBase;
load(src: any): void;
prepareRender(): void;
private $_loadItem;
}
/**
* 단일 값을 갖는 게이지 모델들의 기반 클래스
* {@page options} 모델은 {@page op.ValueGaugeOptions}이다.
*/
declare abstract class ValueGauge extends Gauge {
static defaults: ValueGaugeOptions;
protected _runValue: number;
/**
* 게이지의 값을 변경한다.
*/
updateValue(value: any): void;
getLabel(label: GaugeLabel, value: number): string;
getParam(param: string): any;
calcedMinMax(): IMinMax;
}
/**
* 게이지 스케일 틱 모델
* {@page options} 모델은 {@page op.GaugeScaleTickOptions}이다.
*/
declare class GaugeScaleTick extends ChartItem {
scale: GaugeScale;
static defaults: GaugeScaleTickOptions;
constructor(scale: GaugeScale);
}
/**
* 게이지 스케일 라벨 모델.
* {@page options} 모델은 {@page op.GaugeScaleLabelOptions}이다.
*/
declare class GaugeScaleLabel extends IconedText {
getText(value: any): string;
getDefaultIconPos(): IconPosition;
}
/**
* 게이지 스케일 모델.
* {@page options} 모델은 {@page op.GaugeScaleOptions}이다.
*/
declare abstract class GaugeScale extends ChartItem {
gauge: ValueGauge | GaugeGroup;
static defaults: GaugeScaleOptions;
private _line;
private _tick;
private _label;
private _step;
_steps: number[];
_min: number;
_max: number;
constructor(gauge: ValueGauge | GaugeGroup);
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* @config
*/
get line(): ChartItem;
/**
* @config
*/
get tick(): GaugeScaleTick;
/**
* @config
*/
get label(): GaugeScaleLabel;
range(): IMinMax;
isEmpty(): boolean;
buildSteps(length: number, value: number, target?: number): number[];
buildGroupSteps(length: number, values: number[]): number[];
getRate(value: number): number;
protected _adjustMinMax(min: number, max: number): {
min: number;
max: number;
};
protected _adjustGroupMinMax(values: number[]): {
min: number;
max: number;
};
protected _buildSteps(length: number, min: number, max: number): number[];
protected _getStepsByCount(count: number, min: number, max: number): number[];
protected _getStepsByInterval(interval: number, min: number, max: number): number[];
protected _getStepMultiples(step: number): number[];
protected _getStepsByPixels(length: number, pixels: number, min: number, max: number): number[];
}
/**
* 게이지 range 라벨 모델.
* {@page options} 모델은 {@page op.GaugeRangeLabelOptions}이다.
*/
declare class GaugeRangeLabel extends ChartItem {
static defaults: GaugeRangeLabelOptions;
}
/**
* 게이지 밴드 모델.
* {@page options} 모델은 {@page op.GaugeRangeBandOptions}이다.
*/
declare class GaugeRangeBand extends ChartItem {
gauge: ValueGauge | GaugeGroup;
static defaults: GaugeRangeBandOptions;
private _ranges;
private _thickness;
private _rangeLabel;
private _tickLabel;
private _runRanges;
private _thicknessDim;
constructor(gauge: ValueGauge | GaugeGroup);
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* {@page position}이 'inside'일 때만 표시될 수 있다.
*
* @config
*/
get rangeLabel(): GaugeRangeLabel;
/**
* 각 range의 양 끝에 해당하는 값을 표시한다.
*
* @config
*/
get tickLabel(): ChartItem;
getThickness(domain: number): number;
getRanges(): ValueRange[];
protected _doApply(options: GaugeRangeBandOptions): void;
private $_internalRanges;
}
/**
* 게이지 라벨 모델.
* {@page options} 모델은 {@page op.GaugeLabelOptions}이다.
*/
declare abstract class GaugeLabel extends ChartText {
static defaults: GaugeLabelOptions;
_domain: IRichTextDomain;
protected _doPrepareRender(chart: IChart): void;
}
/**
* {@page CircularGaugeLabel} 라벨 모델.
* {@page options} 모델은 {@page op.CircularGaugeLabelOptions}이다.
*/
declare class CircularGaugeLabel extends GaugeLabel {
static defaults: CircularGaugeLabelOptions;
private _offsetX;
private _offsetY;
private _offsetXDim;
private _offsetYDim;
getOffset(width: number, height: number): Point;
protected _doApply(options: CircularGaugeLabelOptions): void;
}
/**
* @internal
*/
interface ICircularGaugeExtents {
scale?: number;
scaleTick?: number;
scaleLabel?: number;
band?: number;
bandThick?: number;
bandTick?: number;
radius: number;
radiusThick: number;
inner: number;
value: number;
}
declare class CircularProps {
private _centerX;
private _centerY;
private _radius;
private _innerRadius;
private _valueRadius;
private _centerXDim;
private _centerYDim;
private _radiusDim;
private _innerDim;
private _valueDim;
_startRad: number;
_handRad: number;
_sweepRad: number;
constructor(grouped?: boolean);
centerX(): PercentSize;
setCenterX(value: PercentSize): void;
centerY(): PercentSize;
setCenterY(value: PercentSize): void;
radius(): PercentSize;
setRadius(value: PercentSize): void;
innerRadius(): PercentSize;
setInnerRadius(value: PercentSize): void;
valueRadius(): PercentSize;
setValueRadius(value: PercentSize): void;
getCenter(gaugeWidth: number, gaugeHeight: number): {
x: number;
y: number;
};
getExtents(gaugeSize: number): ICircularGaugeExtents;
prepareAngles(startAngle: number, sweepAngle: number): void;
}
/**
* 원형 게이지 모델.
* {@page options} 모델은 {@page op.CircularGaugeOptions}이다.
* label의 기본 위치의 x는 원호의 좌위 최대 각 위치를 연결한 지점,
* y는 중심 각도의 위치.
*/
declare abstract class CircularGauge extends ValueGauge {
static readonly DEF_CENTER = "50%";
static readonly DEF_RADIUS = "40%";
static readonly DEF_INNER = "80%";
static defaults: CircularGaugeOptions;
private _label;
_props: CircularProps;
_childProps: CircularProps;
protected _doInit(op: OP): void;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* label.
*/
get label(): CircularGaugeLabel;
getProps(): CircularProps;
getCenter(gaugeWidth: number, gaugeHeight: number): {
x: number;
y: number;
};
getExtents(gaugeSize: number): ICircularGaugeExtents;
labelVisible(): boolean;
protected _doApply(options: CircularGaugeOptions): void;
setGroup(group: GaugeGroup, index: number): void;
protected _doPrepareRender(chart: IChart): void;
}
declare abstract class CircularGaugeGroup extends GaugeGroup {
static defaults: CircularGaugeGroupOptions;
private _label;
props: CircularProps;
protected _doInit(op: OP): void;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* 게이지 중앙에 표시되는 label 설정 모델
*
* @config
*/
get label(): CircularGaugeLabel;
setChildExtents(exts: ICircularGaugeExtents): void;
protected _doApply(options: CircularGaugeGroupOptions): void;
}
declare class ZoomButton extends ChartItem {
body: Body;
static defaults: ZoomButtonOptions;
constructor(body: Body);
protected _isVisible(): boolean;
}
declare class EmptyView extends ChartText {
static readonly DEF_TEXT = "\uD45C\uC2DC\uD560 \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.";
static defaults: EmptyViewOptions;
protected _doPrepareRender(chart: IChart): void;
protected _getMessage(): string;
}
interface IPolar {
start: number;
total: number;
cx: number;
cy: number;
rd: number;
}
/**
* 시리즈 및 게이지들이 표시되는 영역 모델.
* {@page options 옵션} 모델은 {@page op.BodyOptions}이고,
* {@page config 차트 설정}에서 {@page config.body 'body'} 항목으로 설정한다.
* ```js
* const config = {
* body: {
* radius: '50%',
* },
* };
* ```
* 또, Chart.{@page rc.Chart#body}로 모델 객체를 가져올 수 있다.
* ```js
* const body = chart.body;
* body.radius = '50%';
* ```
*/
declare class Body extends ChartItem implements IAnnotationOwner {
static defaults: BodyOptions;
private _radius;
private _centerX;
private _centerY;
private _anns;
private _image;
private _zoomButton;
private _emptyView;
_annotations: AnnotationCollection;
private _radiusDim;
private _centerXDim;
private _centerYDim;
private _rd;
private _cx;
private _cy;
constructor(chart: IChart);
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
anchorByName(name: string): ChartItem;
get image(): BackgroundImage;
get emptyView(): EmptyView;
get zoomButton(): ZoomButton;
base(): Body;
canZoom(): boolean;
getRadius(width: number, height: number): number;
setPolar(width: number, height: number): Body;
getPolar(axis: Axis): IPolar;
isZoomed(): boolean;
getAnnotations(): Annotation[];
getAnnotation(name: string): Annotation;
contains(obj: GaugeBase | Series): boolean;
protected _doApply(options: BodyOptions): void;
protected _doPrepareRender(chart: IChart): void;
}
/**
* 차트 내보내기 관련 설정 모델.
*/
declare class Exporter extends ChartItem {
static defaults: ExporterOptions;
private _module;
private _isCompose;
isCompose(): boolean;
compose(exporter: ChartExporter): void;
isContextMenuVisible(): boolean;
toggleContextMenu(): void;
exportToImage(dom: HTMLElement, options: ExportOptions, exporting: ExporterOptions): void;
}
declare class NavigiatorHandle extends ChartItem {
}
declare class NavigatorMask extends ChartItem {
}
/**
* 시리즈 내비게이터 모델.
* 내비게이터에 표시되는 시리즈는 기본적으로 **'area'** 시리즈로 표시되지만,
* **'line'**, **'area'**, **'bar'** 시리즈로 지정할 수도 있다.
* 내비게이터의 x축 종류는 명시적으로 설정하지 않으면 소스 시리즈의 x축 type을 따라간다.
* y축은 항상 **'linear'**로 생성된다.
*/
declare class SeriesNavigator extends ChartItem {
static defaults: SeriesNavigatorOptions;
private _handle;
private _mask;
private _borderLine;
private _source;
_naviChart: IChart;
_dataChanged: boolean;
_vertical: boolean;
private _chartConfig;
private _axisType;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* 핸들 모델.
*/
get handle(): NavigiatorHandle;
/**
* 마스크 모델.
*/
get mask(): NavigatorMask;
/**
* 경계선 설정 모델.
*/
get borderLine(): ChartItem;
getThickness(): number;
getGap(): number;
getGapFar(): number;
getSize(): number;
axisLen(): number;
axis(): Axis;
protected _doLoad(options: ChartItemOptions, src: any): void;
protected _doPrepareRender(chart: IChart): void;
}
/**
* 차트 제목(title) 모델.
* 설정 {@page options 옵션}은 {@page op.TitleOptions}이고,
* {@page config.title} 항목으로 설정한다.
* ```js
* const config = {
* title: {
* visible: true,
* text: 'Chart Title',
* },
* };
* ```
* 또, Chart.{@page rc.Chart#title}로 모델 객체를 가져올 수 있다.
* ```js
* const title = chart.title;
* legend.text = 'Chart Title';
* ```
* 기본적으로 차트 중앙 상단에 표시되지만 {@page config.title#align}, {@page config.title#verticalAlign} 등으로 위치를 변경할 수 있다.
* {@page guide.title 타이틀 개요} 페이지를 참조한다.
*/
declare class Title extends ChartItem {
static defaults: TitleOptions;
protected _isVisible(): boolean;
protected _doSetSimple(src: any): boolean;
}
/**
* 차트 부제목(subtitle) 설정 모델.
* 기본적으로 주 제목(title)의 설정을 따르고, 몇가지 속성들이 추가된다.
* 설정 {@page options} 모델은 {@page op.SubtitleOptions}이고,
* {@page config.subtitle} 항목으로 설정한다.
* ```js
* const config = {
* subtitle: {
* visible: true,
* text: 'Sub-Title',
* },
* };
* ```
* 또, Chart.{@page rc.Chart#subtitle}로 모델 객체를 가져올 수 있다.
* ```js
* const title = chart.title;
* legend.text = 'Sub-Title';
* ```
* {@page guide.subtitle 부제목 개요} 페이지를 참조한다.
*/
declare class Subtitle extends Title {
static defaults: SubtitleOptions;
}
/**
* @internal
*/
interface ISplit extends ChartItem {
getAnnotation(name: string): Annotation;
prepareRender(xAxes: AxisCollection, yAxes: AxisCollection): void;
}
interface IChart {
wrapper: object;
options: ChartConfiguration;
type?: string;
gaugeType?: string;
startOfWeek?: number;
timeOffset?: number;
_assets: AssetCollection;
_chartOptions: ChartOptions;
first: IPlottingItem;
firstSeries: Series;
xAxis: IAxis;
yAxis: IAxis;
_subtitle: Subtitle;
_legend: Legend;
_tooltip: Tooltip;
_body: Body;
_split: ISplit;
_seriesIndex: number;
_createChart(config: any): IChart;
loadBase(source: any, model: string, type: string): any;
assignTemplates(target: any): any;
isEmpty(visibleOnly: boolean): boolean;
isGauge(): boolean;
isPolar(): boolean;
isInverted(): boolean;
isSplitted(): boolean;
animatable(): boolean;
loadAnimatable(): boolean;
seriesByName(series: string): Series;
axisByName(axis: string): Axis;
getAxes(dir: SectionDir, visibleOnly: boolean): Axis[];
seriesByPoint(point: DataPoint): Series;
_getGroupType(type: string): any;
_getSeriesType(type: string): any;
_getAxisType(type: string): any;
_getGaugeType(type: string): any;
_getGaugeGroupType(type: string): any;
_getAnnotationType(type: string): any;
_getSeries(): PlottingItemCollection;
_getGauges(): GaugeCollection;
_getXAxes(): AxisCollection;
_getYAxes(): AxisCollection;
getAxesGap(): number;
_connectSeries(series: IPlottingItem, isX: boolean): Axis;
_getLegendSources(): ILegendSource[];
_visibleChanged(item: ChartItem): void;
_pointVisibleChanged(series: Series, point: DataPoint): void;
_modelChanged(item: ChartItem, tag?: any): void;
_prepareRender(): void;
layoutAxes(width: number, height: number, inverted: boolean, phase: number): void;
getParam(target: any, param: string): any;
setParam(param: string, value: any, redraw?: boolean): void;
_dataChanged(): void;
_isDataChanged(): boolean;
}
/**
* 차트 제작 주체 등을 표시하는 영역에 대한 모델.
* 기본적으로 차트 오른쪽 아래에 표시되지만, {@page align}, {@page verticalAlign} 등으로 위치를 지정할 수 있다.
* {@page url}을 설정하면 마우스 클릭 시 새창을 열고 해당 위치로 이동시킨다.
*/
declare class Credits extends ChartItem {
static defaults: CreditsOptions;
isFloating(): boolean;
}
/**
* 데이터포인트에 마우수가 올라갈 때 처리하는 방식 설정 모델.
*/
declare class PointHovering extends ChartItem {
static defaults: PointHoveringOptions;
getHintDistance(series: ISeries): number;
getScope(series: ISeries, p: DataPoint): PointHoverScope;
}
/**
* 차트 전역 설정 모델.
*/
declare class ChartOptions extends ChartItem {
private _credits;
private _pointHovering;
static defaults: ChartOptionsOptions;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* 크레딧 모델.
*/
get credits(): Credits;
/**
* 데이터포인트에 마우수가 올라갈 때 처리하는 방식.
*/
get pointHovering(): PointHovering;
getXStart(axis: IAxis): number | string;
}
interface IChartEventListener {
onModelChanged?(chart: ChartObject, item: ChartItem, tag?: any): void;
onVisibleChanged?(chart: ChartObject, item: ChartItem): void;
onPointVisibleChange?(chart: ChartObject, series: Series, point: DataPoint): void;
onExportRequest(chart: ChartObject, options: ExportOptions): void;
onRefreshRequest(chart: ChartObject): void;
}
/**
* @internal
*/
declare enum SectionDir {
LEFT = "left",
TOP = "top",
BOTTOM = "bottom",
RIGHT = "right",
CENTER = "center",
MIDDLE = "middle"
}
/**
* @internal
*/
declare class ChartObject extends EventProvider implements IChart, ITooltipOwner, IAnnotationOwner {
private static split_class;
private static gauge_class;
static registerSplitClass(clazz: any): void;
private static defaults;
private _wrapper;
options: ChartConfiguration;
private _bases;
_data: ChartDataCollection;
_templates: {
[key: string]: any;
};
_assets: AssetCollection;
_chartOptions: ChartOptions;
_title: Title;
_subtitle: Subtitle;
_legend: Legend;
_tooltip: Tooltip;
private _series;
private _xAxes;
private _yAxes;
_split: ISplit;
private _gauges;
_body: Body;
_annotations: AnnotationCollection;
_navigator: SeriesNavigator;
_exporter: Exporter;
private _params;
private _inverted;
private _splitted;
private _polar;
private _gaugeOnly;
_seriesIndex: number;
assignTemplates: (target: any) => any;
_dataDirty: boolean;
_loadAnimatable: boolean;
constructor(config?: ChartConfiguration, wrapper?: any);
private _initOptions;
_createChart(config: any): IChart;
animatable(): boolean;
loadAnimatable(): boolean;
getTooltipContext(scope: TooltipScope, series: ISeries, point: DataPoint): ITooltipContext;
get chart(): IChart;
anchorByName(name: string): ChartItem;
get wrapper(): object;
get type(): "line" | "area" | "linegroup" | "spline" | "bellcurve" | "areagroup" | "barrange" | "bar" | "bargroup" | "piegroup" | "pie" | "boxplot" | "bubble" | "bump" | "candlestick" | "ohlc" | "circlebar" | "circlebargroup" | "dumbbell" | "equalizer" | "errorbar" | "funnel" | "histogram" | "arearange" | "lollipop" | "pareto" | "scatter" | "waterfall" | "treemap" | "heatmap" | "vector";
get gaugeType(): "circle" | "linear" | "bullet" | "clock";
get polar(): boolean;
get inverted(): boolean;
get timeOffset(): number;
get startOfWeek(): number;
get first(): IPlottingItem;
get firstSeries(): Series;
get firstGauge(): Gauge;
get xAxis(): IAxis;
get yAxis(): IAxis;
/**
* @internal
*
* 좌표축이 필요하면true이다.
*
* 현재, 모든 시리즈가 pie 이면 false가 된다.
* false이면 직교 좌표가 표시되지 않는다.
*/
_needAxes(): boolean;
/** @internal*/
_getSeries(): PlottingItemCollection;
/** @internal*/
_getGauges(): GaugeCollection;
/** @internal*/
_getXAxes(): AxisCollection;
/** @internal*/
_getYAxes(): AxisCollection;
getAnnotations(): Annotation[];
isGauge(): boolean;
isPolar(): boolean;
isWidget(): boolean;
isInverted(): boolean;
isSplitted(): boolean;
isEmpty(visibleOnly: boolean): boolean;
seriesByName(series: string): Series;
seriesAt(index: number): Series | SeriesGroup;
seriesByPoint(point: DataPoint): Series;
gaugeByName(gauge: string): Gauge;
gaugeAt(name: string | number): GaugeBase;
annotationByName(name: string): Annotation;
axisByName(axis: string): Axis;
containsAxis(axis: Axis): boolean;
getXAxis(name: string | number): Axis;
getYAxis(name: string | number): Axis;
getAxes(dir: SectionDir, visibleOnly: boolean): Axis[];
_getLegendSources(): ILegendSource[];
private _setProperties;
loadBase(source: any, model: string, type: string): any;
/**
* @internal
* [주의] 새 차트를 구성하기 위해서 이 메소드를 직접 호출해서는 안된다. {@page Chart.load}를 대신 호출해야 한다.
*/
_load(config: ChartConfiguration): this;
update(options: ChartConfiguration, render: boolean): void;
export(options: ExportOptions): void;
/** @internal */
_connectSeries(series: IPlottingItem, isX: boolean): Axis;
/** @internal */
_dataChanged(): void;
/** @internal */
_isDataChanged(): boolean;
/** @internal */
_prepareRender(): void;
afterRender(): void;
layoutAxes(width: number, height: number, inverted: boolean, phase: number): void;
private $_calcAxesPoints;
axesLayouted(width: number, height: number, inverted: boolean): void;
getParam(target: any, param: string): any;
setParam(param: string, value: any, redraw?: boolean): ChartObject;
addSeries(source: any, animate: boolean): Series;
removeSeries(series: string | Series, animate: boolean): Series;
render(): void;
private $_loadTemplates;
_getGroupType(type: string): any;
_getSeriesType(type: string): any;
_getAxisType(type: string): any;
_getGaugeType(type: string): any;
_getGaugeGroupType(type: string): any;
_getAnnotationType(type: string): any;
getAxesGap(): number;
_modelChanged(item: ChartItem, tag?: any): void;
_visibleChanged(item: ChartItem): void;
_pointVisibleChanged(series: Series, point: DataPoint): void;
}
/**
* Annotation 모델들의 기반 클래스.
* {@page options 옵션} 모델은 {@page op.AnnotationOptions}이고,
* {@page config 차트 설정}에서 {@page config.annotation 'annotation'} 항목으로 설정한다.
* ```js
* const config = {
* annotation: [{
* type: 'image',
* name: 'image1',
* }],
* };
* ```
* 또, Chart.{@page rc.Chart#getannotation getAnnotation}으로
* 모델 객체를 가져올 수 있다.
* ```js
* const annotation = chart.getAnnotation('image1');
* annotation.visible = false;
* ```
* {@page guide.annotations Annotation 개요} 페이지를 참조한다.
*/
declare abstract class Annotation extends ChartItem {
inBody: boolean;
static readonly type: string;
static register(...clses: typeof Annotation[]): void;
static defaults: AnnotationOptions;
private _width;
private _height;
private _offsetX;
private _offsetY;
index: number;
private _name;
private _widthDim;
private _heightDim;
private _offsetXDim;
private _offsetYDim;
_x: number;
_y: number;
_w: number;
_h: number;
_anchorObj: ChartItem;
constructor(chart: IChart, inBody: boolean);
_type(): string;
/**
* 어노테이션 이름.
* 생성 옵션에서 설정한 후 변경하지 말아야 한다.
* annotation.[name](/config/config/base/annotation#name)으로 설정한다.
*
* ```
* const config = {
* annotation: [{
* name: 'title'
* }]
* };
* ```
*
* 실행 시간에 Chart.[getAnnotation](/docs/api/classes/Chart#getannotation)으로 모델 객체에 접근하기 위해서는
* 반드시 지정해야 한다.
*
* ```
* const annotation = chart.getAnnotation('name');
* annotation.visible = false;
* ```
*/
get name(): string;
needClip(): boolean;
getOffset(w: number, h: number): Point;
getSize(wDomain: number, hDomain: number): Size;
getPosition(inverted: boolean, left: number, top: number, wDomain: number, hDomain: number, width: number, height: number): Point;
refresh(): void;
_load(source: any): OP;
protected _doApply(options: AnnotationOptions): void;
protected _doPrepareRender(chart: IChart): void;
}
/**
* @internal
*/
interface IAnnotationOwner {
chart: IChart;
options: {
annotation?: AnnotationOptions | AnnotationOptions[];
};
anchorByName(name: string): ChartItem;
}
/**
* @internal
*/
declare class AnnotationCollection extends ChartItemCollection {
owner: IAnnotationOwner;
private _map;
private _visibles;
constructor(owner: IAnnotationOwner);
getVisibles(): Annotation[];
getAnnotation(name: string): Annotation;
get(name: string | number): Annotation;
load(src: any, inBody: boolean): void;
prepareRender(): void;
private $_loadItem;
}
/**
* RealChart의 공개 차트 모델.
*/
declare class Chart {
_obj: ChartObject;
private _modelCallback;
_loadCallback: () => void;
private _loaded;
/**
* @internal
* 컨트롤 내부에서 자동 생성되므로 이 생성자를 직접 호출할 일은 없다.
*/
constructor(config?: ChartConfiguration, callback?: (model: ChartObject, oldModel: ChartObject) => void);
/**
*/
destroy(): void;
/**
* 차트 설정 옵션 객체.
*/
get options(): ChartConfiguration;
/**
* 차트 데이터 셋.
*/
get data(): ChartDataCollection;
/**
* 기본 시리즈 종류.
* 시리즈에 type을 지정하지 않으면 이 속성 type의 시리즈로 생성된다.
*
* @default 'bar'
* @readonly
*/
get type(): string;
/**
* 기본 게이지 종류.
* 게이지에 type을 지정하지 않으면 이 속성 type의 시리즈로 생성된다.
*
* @default 'circle'
* @readonly
*/
get gaugeType(): string;
/**
* true면 x축과 y축을 뒤바꿔 표시한다.
* 즉, true면 x축이 수직, y축이 수평으로 배치된다.
*
* @readonly
*/
get inverted(): boolean;
/**
* true면 차트가 {@page https://en.wikipedia.org/wiki/Polar_coordinate_system 극좌표계}로 표시된다.
* 기본은 {@page https://en.wikipedia.org/wiki/Cartesian_coordinate_system 직교좌표계}이다.
* 극좌표계일 때,
* x축이 원호에, y축은 방사선에 위치하고, 아래의 제한 사항이 있다.
* 1. x축은 첫번째 축 하나만 사용된다.
* 2. axis.position 속성은 무시된다.
* 3. chart, series의 inverted 속성이 무시된다.
* 4. 극좌표계에 표시할 수 없는 series들은 표시되지 않는다.
*
* @readonly
*/
get polar(): boolean;
/**
*/
get assets(): AssetCollection;
/**
* 차트 전역 속성 모델.
*/
get chartOptions(): ChartOptions;
/**
* 차트 제목 모델.
*/
get title(): Title;
/**
* 차트 부제목 모델.
*/
get subtitle(): Subtitle;
/**
* 첫번째 시리즈 혹은 시리즈그룹.
*/
get first(): Series | SeriesGroup;
/**
* 차트에 설정된 첫번째 시리즈.
* {@page guide.series 시리즈 개요} 및
* {@page config.base.series 시리즈 설정}을 참조한다.
*/
get series(): Series;
/**
* 첫번째 게이지.
*/
get gauge(): Gauge;
/**
* 차트 범례 모델.
*/
get legend(): Legend;
/**
* 툴팁 모델.
*/
get tooltip(): Tooltip;
/**
* 첫번째 x 축.
*/
get xAxis(): Axis;
/**
* 첫번째 y 축.
*/
get yAxis(): Axis;
/**
* 차트 시리즈, 게이지, annotation들이 그려지는 plotting 영역 모델.
*/
get body(): Body;
/**
* Split 설정 모델.
*/
get split(): ISplit | undefined;
/**
* 시리즈 내비게이터 모델.
*/
get seriesNavigator(): SeriesNavigator;
/**
* 차트 내보내기 관련 설정 모델.
*/
get exporter(): Exporter;
/**
* name 매개변수가 문자열이면 지정한 이름의 x 축을,
* 숫자이면 해당 index에 위치하는 x 축을 리턴한다.
*
* @param name 이름이나 index
* @returns 축 객체
*/
getXAxis(name: string | number): Axis;
/**
* name 매개변수가 문자열이면 지정한 이름의 y 축을,
* 숫자이면 해당 index에 위치하는 y 축을 리턴한다.
*
* @param name 이름이나 index
* @returns 축 객체
*/
getYAxis(name: string | number): Axis;
/**
* 시리즈 이름에 해당하는 시리즈 객체를 리턴한다.
*
* @param name 시리즈 이름
* @returns 시리즈 객체
*/
getSeries(name: string | number): Series | SeriesGroup;
/**
* 게이지 이름에 해당하는 게이지 객체를 리턴한다.
*
* @param name 게이지 이름
* @returns 게이지 객체
*/
getGauge(name: string | number): GaugeBase;
/**
* Annotation 이름에 해당하는 Annotation 객체를 리턴한다.
*
* @param name Annotation 이름
* @returns Annotation 객체
*/
getAnnotation(name: string): Annotation;
/**
* 기존 모델 설정을 모두 제거하고 초기화 한 후,
* config로 전달된 설정에 따라 차트를 새로 구성한다.
* 기존에 생성되었던 시리즈나 게이지들과 축들이 모두 제거되고 새로 생성된다.
*
* @param config 차트 설정 정보
*/
load(config: ChartConfiguration, loadAnimation?: boolean, callback?: () => void): Chart;
/**
* {@page load}와 달리 기존 모델을 유지하면서 차트 설정 일부를 반영한다.
*
* @param options 설정 객체
* @param render true로 지정하면 다시 그리도록 요청한다.
*/
updateOptions(options: ChartConfiguration, render?: boolean): void;
/**
* 현재 표시 중인 차트를 PNG, JPG 또는 SVG 벡터 이미지로 다운로드한다.
*
* ```js
* chart.export({
* type: 'png',
* fileName: 'realchart'
* })
* ```
*
* @param options 내보내기 설정 객체
*/
export(options: ExporterOptions): void;
/**
* 다음 rendering frame을 기다리지 않고, 차트를 즉시 다시 그린다.
* 차트 rendering 작업은 자원 소모가 많고 소용 시간도 적지 않으므로,
* data나 여러 모델을 수정하는 경우 모든 작업이 완료된 후 한 번 호출해야 한다.
* 가능하면 이 함수는 호출하지 않고
* 차트 기본 동작(다음 frame에 이전 변경 사항들을 모아서 한 번 rendering)으로 실행되게 해야 한다.
*/
render(): void;
/**
*/
setParam(param: string, value: any, redraw?: boolean): void;
/**
* 시리즈를 추가한다.
*
* @param source 시리즈 설정 json.
* @param animate 애니메이션 실행 여부.
* @returns 생성된 시리즈 객체.
*/
addSeries(source: any, animate?: boolean): Series;
/**
* 기존 시리즈를 제거한다.
*
* @param series 시리즈 이름이나 시리즈 객체.
* @param animate 애니메이션 실행 여부.
*/
removeSeries(series: string | Series, animate?: boolean): void;
/**
* @ignore
*/
draw(): void;
}
/**
* 차트 전용 데이터 모델.
* 시리즈 설정 시 {@page config.base.series#data data} 속성에 값 배열을 직접 지정하는 대신,
* 이 데이터를 참조하도록 할 수 있다.
*
* ```js
* const data = RealChart.createData({ fields: ['name', 'value'] }, [
* ['name1', 341],
* ['name2', 341],
* ...
* ]);
* const config = {
* series: {
* type: 'line',
* data,
* },
* }
* const chart = RealChart.createChart(document, 'div', config);
* ```
*
* 또, 시리즈에 연결된 상태에서 {@link setValue} 등으로 값들을 변경하면 시리즈에 바로 반영된다.
* [주의] 이 객체의 생성자 대신 {@page RealChart.createData}를 이용해 생성해야 한다.
*/
declare class ChartData {
private _obj;
/**
* @internal
* 이 생성자 대신 {@page RealChart.createData}를 이용해 생성해야 한다.
*/
constructor(options?: ChartDataOptions, rows?: any[]);
/**
* 행 수.
*/
get rowCount(): number;
/**
* 지정한 행의 필드 값을 리턴한다.
*
* ```js
* console.log(data.getValue(0, 'name'));
* ```
*
* @param row 행 번호
* @param field 필드 이름
* @returns 필드 값
*/
getValue(row: number, field: string): any;
/**
* 지정한 행의 필드 값을 변경한다.
* 이 데이터에 연결된 시리즈의 해당 데이터포인트의 값이 변경된다.
*
* ```js
* const {row, field} = getField();
* data.setValue(row, field, data.getValue(row, field) + 1);
* ```
*
* @param row 행 번호
* @param field 필드 이름
*/
setValue(row: number, field: string, value: any): void;
/**
*/
getValues(field: string, fromRow?: number, toRow?: number): any[];
/**
*/
getRow(row: number): any;
/**
* 지정한 필드 값 목록으로 구성된 신규 행을 지정한 위치에 추가한다.
* 이 데이터에 연결된 시리즈의 데이터포인트가 추가된다.
*
* ```js
* data.addRow({
* field1: 'value1',
* field2: 123,
* ...
* });
* ```
*
* @param values 필드 값 목록.
* @param row 행 번호. 기본값 -1. 0보다 작은 값이면 마지막 행 다음에 추가한다.
*/
addRow(values: any, row?: number): void;
/**
* 지정한 위치의 행이 삭제된다.
* 이 데이터에 연결된 시리즈의 해당 데이터포인트가 제거된다.
*
* ```js
* data.deleteRow(data.rowCount - 1);
* ```
*
* @param row 행 번호. 기본값 -1. 0보다 작은 값이면 마지막 행이 삭제된다.
*/
deleteRow(row?: number): void;
}
interface IRcLocale {
dateFormat: string;
am: string;
pm: string;
notExistsDataField: string;
notSpecifiedDataField: string;
invalidFieldName: string;
invalidRowIndex: string;
invalidToIndex: string;
requireSourceData: string;
requireFilterName: string;
invalidDateFormat: string;
invalidSizeValue: string;
invalidOuterDiv: string;
dataMustSet: string;
requireTableName: string;
alreadyTableExists: string;
}
/**
* RealChart 모듈 global.
*/
declare class Globals {
/**
* RealChart 라이브러리의 버전 정보를 리턴한다.
*
* ```js
* console.log(RealChart.getVersion()); // ex) '1.1.2'
* ```
*
* @returns 버전 문자열
*/
static getVersion(): string;
static setLocale(lang: string, config?: IRcLocale): void;
static registerLocale(lang: string, config: IRcLocale): void;
/**
* true로 지정하면 차트 요소별 디버그 경계를 표시한다.
* 기본은 false 상태다.
*
* ```js
* RealChart.setDebugging(true);
* ```
*
* @param debug 디버깅 상태 표시 여부
*/
static setDebugging(debug: boolean): void;
/**
* true로 지정하면 라이브러리 내부 메시지를 출력한다.
* 기본값은 false다.
*
* ```js
* RealChart.setLogging(true);
* ```
*
* @param logging 로그 메시지 표시 여부
*/
static setLogging(logging: boolean): void;
/**
* false로 지정하면 시리즈 시작 애니메이션 등을 포함,
* 모든 애니메이션을 실행하지 않는다.
* 기본값은 true로 animation이 가능한 상태다.
*
* ```js
* RealChart.setAnimatable(false);
* ```
*
* @param value 애니메이션 실행 여부
*/
static setAnimatable(value: boolean): void;
/**
* javascript 개발 환경에서 typescript 지원을 받을 수 있도록 타입이 단언된 객체를 생성한다.
*
* ```js
* // @ts-check
* const config = RealChart.configure({
* ... // 작성시 코드 에디터가 타입 정보를 이용할 수 있다.
* })
* const chart = RealChart.createChart(documemt, 'div', config);
* ```
*
* {@page config 차트 설정} 페이지를 참조한다.
*
* @param config 설정 객체.
* @returns 매개 변수 객체를 그대로 리턴한다.
*/
static configure(config: ChartConfiguration): ChartConfiguration;
/**
* 차트 설정 모델을 기반으로 svg를 생성한 후,
* 지정된 div 엘리먼트의 유일한 자식으로 포함시킨다.\
* div 전체 영역의 크기로 표시된다.
*
* ```js
* const chart = RealChart.createChart(document, 'realchart', config);
* ```
*
* @param doc
* @param container 컨트롤이 생성되는 div 엘리먼트나 id
* @param config 차트 모델 설정 JSON
* @param animate 첫 로딩 animation을 실행한다.
* @param calllback 차트가 모두 로드되고 첫 렌더링이 완료된 후 호출되는 콜백 함수.
* @returns 생성된 차트 객체
* @see {@link createData}
*/
static createChart(doc: Document, container: string | HTMLDivElement, config: ChartConfiguration, animate?: boolean, callback?: () => void): Chart;
/**
* 차트 시리즈에 연결할 수 있는 데이터.
* 저장되는 행은 json, array 또는 단일값일 수 있다.
* 기본적으로 한 필드의 모든 행이 시리즈의 데이터로 연결되어 표시된다.
* **rows**로 전달된 배열이 초기 데이터로 저장된다.
* 이 때, rows 배열 항목들의 사본(shallow copy)이 저장되므로,
* 차트 렌더링에 불필요한 값들은 최소화 해야 한다.
*
* ```js
* const data = RealChart.createData({}, [
* ['name1', 341],
* ['name2', 341],
* ...
* ]);
* ```
*
* 이렇게 생성된 데이터는 차트 생성 시 시리즈 옵션의 {@page rc.SeriesOptions#data data} 속성에 바로 지정할 수 있다.
*
* ```js
* const config = {
* series: {
* type: 'line',
* data,
* },
* }
* ```
*
* 또, 시리즈에 연결된 data의 값들을 변경하면 시리즈에 바로 반영된다.
*
* @param options 데이터 생성 옵션들.
* @param rows 행 목록. 각 행은 json, array 또는 단일값일 수 있다.
* @returns 차트 데이터 객체.
*/
static createData(options?: ChartDataOptions, rows?: any[]): ChartData;
}
declare class ButtonElement extends RcElement {
static readonly STYLE = "rct-button";
static readonly BACK_STYLE = "rct-button-background";
private _back;
private _textView;
constructor(doc: Document, text: string, style?: string);
setText(text: string): void;
layout(style?: SVGStyleOrClass): void;
click(): boolean;
setVis(value: boolean): boolean;
}
interface IRectShape extends IRect {
r?: number;
rx?: number;
ry?: number;
rLeft?: number;
rTop?: number;
rRight?: number;
rBottom?: number;
}
declare class RectElement extends RcElement {
static create(doc: Document, styleName: string, x: number, y: number, width: number, height: number, r?: number): RectElement;
private _rect;
constructor(doc: Document, styleName?: string, rect?: IRectShape);
/** rect */
get rect(): IRectShape;
set rect(value: IRectShape);
resizeRect(width: number, height: number): RcElement;
setBounds(x: number, y: number, width: number, height: number, r?: number): RectElement;
setBox(x: number, y: number, width: number, height: number): void;
setRadius(value: number): void;
}
declare abstract class GroupElement extends RcElement {
private static IGNORE_ATTRS;
constructor(doc: Document, styleName?: string);
setAttr(attr: string, value: any): RcElement;
protected _doInitChildren(doc: Document): void;
}
declare abstract class ChartElement extends RcElement {
model: T;
protected options: ChartItemOptions;
mw: number;
mh: number;
_debugRect: RectElement;
constructor(doc: Document, styleName?: any);
chart(): IChart;
protected _prepareStyleOrClass(model: T): void;
setModel(model: T): void;
measure(doc: Document, model: T, hintWidth: number, hintHeight: number, phase: number): Size;
layout(param?: any): ChartElement;
resizeByMeasured(): ChartElement;
protected _getDebugRect(): IRect;
protected _doMeasure(doc: Document, model: T, hintWidth: number, hintHeight: number, phase: number): Size;
protected _doLayout(param: any): void;
protected _invalidate(): void;
}
declare abstract class BoundableElement extends ChartElement {
protected _background: RectElement;
/**
* @TODO padding, margin config 선언부가 없다
*/
protected _margins: Sides;
protected _paddings: Sides;
constructor(doc: Document, styleName: string, backStyle: string);
protected _getDebugRect(): IRect;
measure(doc: Document, model: T, hintWidth: number, hintHeight: number, phase: number): Size;
layout(param?: any): ChartElement;
protected abstract _setBackgroundStyle(back: RectElement): void;
protected _marginable(): boolean;
protected _resetBackBounds(): boolean;
protected _getBackOffset(): number;
protected _deflatePaddings(size: Size): void;
}
/**
* @internal
*/
declare abstract class SectionView extends GroupElement {
protected _inverted: boolean;
mw: number;
mh: number;
measure(doc: Document, chart: ChartObject, hintWidth: number, hintHeight: number, phase: number): Size;
resizeByMeasured(): SectionView;
layout(param?: any): SectionView;
protected abstract _doMeasure(doc: Document, chart: ChartObject, hintWidth: number, hintHeight: number, phase: number): Size;
protected abstract _doLayout(param?: any): void;
protected _setInverted(inverted: boolean): void;
}
declare abstract class ContentView extends ChartElement {
protected _inverted: boolean;
protected _animatable: boolean;
protected _loadAnimatable: boolean;
_setChartOptions(inverted: boolean, animatable: boolean, loadAnimatable: boolean): void;
}
interface IAnnotationAnchorOwner {
getAnnotationAnchor(model: any): RcElement;
tx: number;
ty: number;
}
/**
* [주의] clipping하기 위해 translate를 background와 내부 view에 설정한다.
*/
declare abstract class AnnotationView extends BoundableElement {
static readonly CLASS_NAME: string;
static register(...clses: [typeof Annotation, typeof AnnotationView][]): void;
protected options: AnnotationOptions;
private _transform;
private _clip;
constructor(doc: Document, styleName: string);
update(owner: IAnnotationAnchorOwner, hintWidth: number, hintHeight: number): void;
addToTransform(child: RcElement): void;
_layoutView(invertd: boolean, owner: IAnnotationAnchorOwner, x: number, y: number, w: number, h: number): void;
private _posByAnchor;
resetClip(control: RcControl, width: number, height: number): void;
remove(): RcElement;
protected _updateTransform(): void;
protected _marginable(): boolean;
protected _resetBackBounds(): boolean;
protected _setBackgroundStyle(back: RectElement): void;
protected _doLayout(p: Point): void;
}
/**
* 연속축의 그리드 모델.
* {@page options} 모델은 {@page op.ContinuousAxisGridOptions}이다.
*/
declare class ContinuousAxisGrid extends AxisGrid {
getPoints(axis: ContinuousAxis, length: number): number[];
}
/**
* 연속축의 tick 모델.
* {@page options} 모델은 {@page op.ContinuousAxisTickOptions}이다.
*/
declare class ContinuousAxisTick extends AxisTick {
static defaults: ContinuousAxisTickOptions;
_baseAxis: Axis;
_step: number;
_strictEnds: boolean;
_strictTicks: boolean;
protected _isValidInterval(v: any): boolean;
_normalizeSteps(steps: number[], min: number, max: number): number[];
buildSteps(length: number, base: number, min: number, max: number, broken?: boolean): number[];
getNextStep(step: number, delta: number): number;
canUseNumSymbols(): boolean;
_findBaseAxis(): void;
private $_normalizeMin;
protected _getStepsByCount(count: number, baseVal: number, min: number, max: number, based: boolean): number[];
protected _getStepsByInterval(interval: any, base: number, min: number, max: number): number[];
protected _getStepMultiples(step: number): number[];
protected _getStepsByPixels(length: number, pixels: number, base: number, min: number, max: number): number[];
}
/**
* 연속축의 label 모델.
* {@page options} 모델은 {@page op.ContinuousAxisLabelOptions}이다.
*/
declare abstract class ContinuousAxisLabel extends AxisLabel {
static defaults: ContinuousAxisLabelOptions;
}
/**
* 선형축의 label 모델.
* {@page options} 모델은 {@page op.LinearAxisLabelOptions}이다.
*/
declare class LinearAxisLabel extends ContinuousAxisLabel {
static defaults: LinearAxisLabelOptions;
getTick(index: number, v: any): string;
}
/**
* 선형축의 berak 모델.
* {@page options} 모델은 {@page op.AxisBreakOptions}이다.
* from에서 to 이전까지의 값은 from으로 표시된다.
* space는 break line 등을 표시하기 위한 공간이다.
*
* //1. to가 from보다 커야 한다.
* //2. ratio가 0보다 크고 1보다 작은 값으로 반드시 설정돼야 한다.
* //3. 이전 break의 ratio보다 큰 값으로 설정돼야 한다.
* //4. 1, 2, 3 중 하나라도 위반하면 병합에서 제외시킨다.
* //5. 이전 범위와 겹치면 병합된다.
*/
declare class AxisBreak extends AxisItem {
static defaults: AxisBreakOptions;
private _sizeDim;
_sect: IAxisBreakSect;
getSize(domain: number): number;
protected _doApply(options: ChartItemOptions): void;
}
interface IAxisBreakSect {
from: number;
to: number;
pos: number;
len: number;
}
/**
* 연속 축의 {@page config.yAxis.linear#baseValue} 위치에 표시되는 선(line) 모델.
* {@page options 옵션} 모델은 {@page op.AxisBaseLineOptions}이다.
* 기본적으로 표시되지 않는다.
*/
declare class AxisBaseLine extends AxisLine {
static defaults: AxisBaseLineOptions;
}
/**
* 연속축 모델들의 기반 클래스.
* {@page options} 모델은 {@page op.ContinuousAxisOptions}이다.
*
* 최대한 데이터포인트들을 표시해야 하므로 'bar' 시리즈 등 너비가 있는 것들을 표시하기 위해서
* 양 끝에 공간을 추가할 수 있다. // calcPoints() 참조.
*/
declare abstract class ContinuousAxis extends Axis {
static defaults: ContinuousAxisOptions;
private _baseLine;
private _baseVal;
private _unitLen;
_calcedMin: number;
_calcedMax: number;
_fixedMin: number;
_fixedMax: number;
/** y축으로 사용될 때만 적용한다. */
private _breaks;
private _runBreaks;
private _sects;
private _lastSect;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* base value 위치에 표시되는 선분 설정 모델.
* 기본적으로 표시되지 않는다.
*
* @config
*/
get baseLine(): AxisBaseLine;
/**
* @override
* @config
*/
get tick(): ContinuousAxisTick;
/**
* @override
* @config
*/
get grid(): ContinuousAxisGrid;
getBaseValue(): number;
hasBreak(): boolean;
_getBreaks(): AxisBreak[];
isBreak(pos: number): boolean;
protected _doApply(options: AxisOptions): void;
continuous(): boolean;
isBased(): boolean;
protected _createGrid(): ContinuousAxisGrid;
protected _createTickModel(): ContinuousAxisTick;
protected abstract _createLabel(): ContinuousAxisLabel;
protected _doPrepareRender(): void;
protected _doBuildTicks(calcedMin: number, calcedMax: number, length: number): IAxisTick[];
protected _createTick(length: number, index: number, step: number): IAxisTick;
_calcPoints(length: number, phase: number): void;
private $_buildBrokenSteps;
private $_getBrokenSteps;
getPos(length: number, value: number): number;
valueAt(length: number, pos: number): number;
xValueAt(pos: number): number;
getUnitLen(length: number, value: number): number;
getLabelLength(length: number, value: number): number;
private _getStartFit;
private _getEndFit;
protected _adjustMinMax(length: number, min: number, max: number): {
min: number;
max: number;
};
protected $_calcUnitLength(length: number): {
len: number;
min: number;
};
protected _calcUnitLen(vals: number[], length: number, axisMin: number, axisMax: number): {
len: number;
min: number;
};
private $_loadBreak;
private $_loadBreaks;
/**
* 1. rate가 0보다 크고 1보다 작은 값으로 반드시 설정돼야 한다.
* 2. 이전 break의 rate보다 큰 값으로 설정돼야 한다.
* 3. 1, 2 중 하나라도 위반하면 병합에서 제외시킨다.
*/
private $_mergeBreaks;
}
/**
* 선형 연속 축 모델.
* {@page op.AxisOptions#type}은 {@page config.yAxis.linear 'linear'}이고,
* {@page options 설정} 모델은 {@page op.LinearAxisOptions}이다.
*/
declare class LinearAxis extends ContinuousAxis {
static type: string;
/**
* @override
* @config
*/
get label(): LinearAxisLabel;
protected _createLabel(): ContinuousAxisLabel;
protected _adjustMinMax(length: number, min: number, max: number): {
min: number;
max: number;
};
}
declare class ImageElement extends RcElement {
/**
* onload 처리 이후 false로 변경한다.
*/
private _dirty;
private _bounds;
private _isImageLoaded;
/**
* @IE11 not support SVGImageElement onload
* 사이즈를 알기위해서 이벤트만 사용한다.
*/
private _proxy;
/**
* @IE11 image proxy onload event
*/
onloadProxy: () => void;
constructor(doc: Document, full: boolean, styleName?: string);
/** image url */
get url(): string;
set url(value: string);
setImage(url: string, width: number, height: number): boolean;
getBBox(): IRect;
resize(width: number, height: number, attr?: boolean): boolean;
}
/**
* ChartText를 표시하는 텍스트 view.
*/
declare class ChartTextElement extends GroupElement {
private _back;
_outline: TextElement;
_text: TextElement;
_icon: ImageElement;
private _model;
constructor(doc: Document, styleName?: string);
/** text */
get text(): string;
setText(s: string): ChartTextElement;
setModel(doc: Document, model: IconedText, icon: string, contrastTarget: Element): ChartTextElement;
setContrast(target: Element): ChartTextElement;
layout(align: Align): ChartTextElement;
trans(x: number, y: number): ChartTextElement;
}
type Visitor = (element: T, index?: number, count?: number) => void;
/** @internal */
declare class ElementPool extends RcObject {
removeDelay: number;
private _owner;
private _creator;
private _pool;
private _views;
private _removes;
private _styleName;
constructor(owner: RcElement, creator: {
new (doc: Document, styleName?: string): T;
}, styleName?: string, removeDelay?: number);
protected _doDestroy(): void;
get isEmpty(): boolean;
get count(): number;
get first(): T;
get last(): T;
get(index: number): T;
getAll(): T[];
pull(index: number): T;
_internalItems(): T[];
elementOf(dom: Element): T;
find(matcher: (v: T) => boolean): T;
setRemoveDelay(v: number): ElementPool;
removeLater(v: RcElement, duration: number): void;
private $_create;
prepare(count: number, visitor?: Visitor, initor?: Visitor): ElementPool;
/**
* 기존 view를 재활용하도록 한다.
* objProp가 설정되지 않으면 objs의 개별 obj 자체외 비교한다.
*/
borrow(): T;
free(element: T, removeDelay?: number): void;
freeAll(elements?: T[], removeDelay?: number): void;
freeHiddens(): void;
freeFrom(from: number): void;
forEach(visitor: (v: T, i?: number, count?: number) => void): void;
visit(visitor: (v: T, i: number, count: number) => boolean): boolean;
sort(compare: (v1: T, v2: T) => number): ElementPool;
map(callback: (v: T) => any): any[];
front(v: T): void;
back(v: T): void;
}
interface IPoint2 {
x1: number;
y1: number;
x2: number;
y2: number;
}
declare class PathBuilder {
_path: (string | number)[];
length(): number;
isEmpty(): boolean;
clear(): PathBuilder;
reset(x: number | Point, y?: number): PathBuilder;
end(close?: boolean): string;
close(clear: boolean): string;
move(x: number | Point, y?: number): PathBuilder;
moveBy(x: number | Point, y?: number): PathBuilder;
line(x: number | Point, y?: number): PathBuilder;
moveOrLine(connected: boolean, x: number, y: number): PathBuilder;
vline(x: number, y1: number, y2: number): PathBuilder;
hline(y: number, x1: number, x2: number): PathBuilder;
curve(cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number): PathBuilder;
quad(x1: number | IPoint2, y1?: number, x2?: number, y2?: number): PathBuilder;
rect(x: number, y: number, width: number, height: number): PathBuilder;
lines(...pts: (number | Point)[]): PathBuilder;
polygon(...pts: (number | Point)[]): PathBuilder;
circle(cx: number, cy: number, rd: number): PathBuilder;
getMove(p?: number, remove?: boolean): Point;
getLine(p?: number, remove?: boolean): Point;
getQuad(p?: number, remove?: boolean): IPoint2;
getPoints(p: number, count: number, remove?: boolean): Point[];
}
/**
* @internal
*/
declare class LegendItemView extends ChartElement {
_back: RectElement;
_marker: RcElement;
_label: TextElement;
_gap: number;
_rMarker: IRect;
_col: number;
constructor(doc: Document);
setMarker(elt: RcElement): RcElement;
protected _doMeasure(doc: Document, model: LegendItem, hintWidth: number, hintHeight: number, phase: number): Size;
protected _doLayout(wMarker: number): void;
}
declare class MarkerHoverAnimation extends RcAnimation {
private _sv;
_focused: boolean;
_marker: MarkerSeriesPointView;
constructor(sv: SeriesView, marker: MarkerSeriesPointView, focused: boolean, endHandler: RcAnimationEndHandler);
protected _doStart(): void;
protected _doUpdate(rate: number): boolean;
protected _doStop(): void;
}
interface IPointView {
point: DataPoint;
getTooltipPos?(): Point;
saveStyles(): void;
restoreStyles(): void;
}
declare class PointLabelView extends ChartTextElement {
point: DataPoint;
constructor(doc: Document);
}
declare class PointLabelContainer extends LayerElement {
private _labels;
private _maps;
_textAlign: Align;
constructor(doc: Document);
clear(): void;
getWidth(index: number): number;
prepareLabel(doc: Document, view: PointLabelView, index: number, p: DataPoint, series: Series, model: DataPointLabel): void;
prepare(doc: Document, owner: SeriesView): void;
get(point: DataPoint, index: number): PointLabelView;
removePoint(p: DataPoint, delay: number): void;
private $_checkIntersects;
dedupe(views: PointLabelView[], lines: PointLabelLineContainer, mode: PointLabelDedupeMode): void;
arrangeVertical(views: PointLabelView[], lines: PointLabelLineContainer, height: number, converge: boolean, dedupeMode: PointLabelDedupeMode, overflow: PointLabelOverflow): 0 | 1;
}
declare class PointLabelLineView extends GroupElement {
point: DataPoint;
private _line;
constructor(doc: Document);
setLine(line: string | any[]): void;
}
declare class PointLabelLineContainer extends GroupElement {
private _lines;
private _map;
constructor(doc: Document);
prepare(model: Series): void;
get(point: DataPoint): PointLabelLineView;
}
declare class PointContainer extends LayerElement {
inverted: boolean;
invert(v: boolean, height: number): boolean;
}
type LabelLayoutInfo = {
inverted: boolean;
reversed: boolean;
pointView: RcElement;
x: number;
y: number;
hPoint: number;
wPoint: number;
labelView: PointLabelView;
labelPos: PointLabelPosition;
labelOff: number;
textAlign: Align;
};
declare abstract class SeriesView extends ContentView {
static readonly POINT_CLASS = "rct-point";
static readonly DATA_FOCUS = "focus";
static readonly DATA_UNFOCUS = "unfocus";
static readonly DATA_UNHOVER = "unhover";
static readonly LEGEND_MARKER = "rct-legend-item-marker";
static register(...clses: [typeof Series, typeof SeriesView][]): void;
_simpleMode: boolean;
protected _pointContainer: PointContainer;
_labelContainer: PointLabelContainer;
private _trendLineView;
protected _legendMarker: RcElement;
protected _visPoints: DataPoint[];
private _growRate;
private _posRate;
protected _prevRate: number;
_animations: Animation[];
_hoverAnis: MarkerHoverAnimation[];
_hoverPts: IPointView[];
constructor(doc: Document, styleName: string);
clipInvertable(): boolean;
getClipContainer(): RcElement;
getClipContainer2(): RcElement;
defaultAnimation(): string;
setGrowRate(rate: number): void;
setPosRate(rate: number): void;
setPrevRate(rate: number): void;
isPointLabelVisible(p: DataPoint): boolean;
protected _doViewRateChanged(rate: number): void;
protected _doPosRateChanged(rate: number): void;
protected _doPrevRateChanged(rate: number): void;
_animationStarted(ani: Animation): void;
_animationFinished(ani: Animation): void;
protected abstract _getPointPool(): ElementPool;
pointByDom(elt: Element): IPointView;
getPointView(p: DataPoint): RcElement;
clicked(elt: Element): void;
protected _doPointClicked(view: IPointView): void;
protected _getPointColors(): string;
prepareSeries(doc: Document, model: T, polar: boolean): void;
protected _setModelColor(color: string): void;
protected _legendColorProp(): string;
needDecoreateLegend(): boolean;
decoreateLegend(legendView: LegendItemView): void;
afterLayout(): void;
setHoverStyle(pv: RcElement): void;
hoverPoint(p: DataPoint): void;
protected _clearHoverClasses(pv: RcElement): void;
focusPoints(pvs: IPointView[]): void;
protected _needFocusOrder(): boolean;
getPointsAt(axis: Axis, pos: number): IPointView[];
getSiblings(pv: IPointView): IPointView[];
getSibling(pv: IPointView): IPointView;
applyAutoRotation(view: PointLabelView, a: number, total: number, totalAngle: number): void;
isEmptyView(): boolean;
protected _doAttached(parent: RcElement): void;
protected _prepareStyleOrClass(model: T): void;
protected _prepareViewRanges(model: T): void;
protected _doMeasure(doc: Document, model: T, hintWidth: number, hintHeight: number, phase: number): Size;
protected _doLayout(): void;
protected _doAfterLayout(): void;
protected abstract _prepareSeries(doc: Document, model: T, polar: boolean): void;
protected abstract _renderSeries(width: number, height: number): void;
protected _collectVisPoints(model: T): DataPoint[];
protected _setColorIndex(v: RcElement, p: DataPoint): void;
protected _setPointColor(v: RcElement, color: string): void;
protected _setPointStyle(v: RcElement, model: T, p: DataPoint, styles?: any[]): void;
protected _labelViews(): PointLabelContainer;
protected _getGrowRate(): number;
protected _getPosRate(): number;
_animating(): boolean;
protected _lazyPrepareLabels(): boolean;
protected _getShowAnimation(): RcAnimation;
protected _runShowEffect(firstTime: boolean): void;
protected _drawSpline(pts: {
px: number;
py: number;
}[], start: number, end: number, sb: PathBuilder): void;
private $_renderTrendline;
protected _layoutLabel(info: LabelLayoutInfo, w: number, h: number): void;
protected _clipRange(w: number, h: number, rangeAxis: 'x' | 'y' | 'z', range: ValueRange, clip: ClipRectElement, inverted: boolean): void;
protected _setFill(elt: RcElement, style: SVGStyleOrClass): void;
protected _savePrevs(): void;
}
declare abstract class PointElement extends PathElement implements IPointView {
point: DataPoint;
constructor(doc: Document);
savePrevs(): void;
}
declare abstract class MarkerSeriesPointView extends PointElement implements IPointView {
beginHover(series: SeriesView, focused: boolean): void;
setHoverRate(series: SeriesView, focused: boolean, rate: number): void;
endHover(series: SeriesView, focused: boolean): void;
distance(rd: number, x: number, y: number): number;
}
declare abstract class MarkerSeriesView extends SeriesView {
private static _createDrawers;
private static _drawers;
protected _markers: ElementPool;
constructor(doc: Document, styleName: string);
protected abstract _createMarkers(container: PointContainer): ElementPool;
getHintDistance(): number;
protected _getPointPool(): ElementPool;
clipInvertable(): boolean;
getPointsAt(axis: Axis, pos: number): IPointView[];
protected abstract _getAutoPos(overflowed: boolean): PointLabelPosition;
_getDrawer(shape: string): (rd: number) => (string | number)[];
protected _layoutLabelView(labelView: PointLabelView, pos: PointLabelPosition, off: number, radius: number, x: number, y: number): void;
}
declare class ZombiAnimation extends RcAnimation {
series: WidgetSeriesView;
constructor(series: WidgetSeriesView, duration: number);
protected _doUpdate(rate: number): boolean;
protected _doStop(): void;
}
declare abstract class WidgetSeriesView extends SeriesView {
private _willZombie;
_zombie: DataPoint;
_zombieRate: number;
_zombieAni: ZombiAnimation;
togglePointVisible(p: DataPoint): void;
needFronting(): boolean;
isPointLabelVisible(p: WidgetSeriesPoint): boolean;
protected _collectVisPoints(model: T): DataPoint[];
protected _prepareSeries(doc: Document, model: T): void;
protected _getPointColors(): string;
_resizeZombie(): void;
protected _createPointLegendMarker(doc: Document, p: DataPoint, size: number): RcElement;
protected _preparePoint(doc: Document, model: T, p: WidgetSeriesPoint, pv: RcElement): void;
}
declare abstract class AxisGuideView extends RcElement {
model: T;
protected _labelView: ChartTextElement;
constructor(doc: Document);
vertical(): boolean;
prepare(doc: Document, model: T): void;
layout(width: number, height: number, polar?: IPolar): void;
abstract _doLayout(width: number, height: number): void;
abstract _doLayoutPolar(width: number, height: number, polar: IPolar): void;
}
declare class AxisGuideLineView extends AxisGuideView {
private _line;
constructor(doc: Document, polar: boolean);
prepare(doc: Document, model: AxisLineGuide): void;
_doLayout(width: number, height: number): void;
_doLayoutPolar(width: number, height: number, polar: IPolar): void;
}
declare class AxisGuideRangeView extends AxisGuideView {
private _box;
_range: [number, number];
constructor(doc: Document, polar: boolean);
prepare(doc: Document, model: AxisRangeGuide): void;
_doLayout(width: number, height: number): void;
_doLayoutPolar(width: number, height: number, polar: IPolar): void;
}
declare class AxisGridRowContainer extends LayerElement {
private _views;
private _rows;
prepare(): void;
addAll(doc: Document, axes: Axis[]): void;
layout(width: number, height: number, polar: boolean): void;
}
declare class AxisGuideContainer extends LayerElement {
_linePool: AxisGuideLineView[];
_rangePool: AxisGuideRangeView[];
_views: AxisGuideView[];
prepare(): void;
setAll(doc: Document, guides: AxisGuide[], polar: boolean): void;
add(child: T): T;
}
interface IPlottingOwner extends IAnnotationAnchorOwner {
showTooltip(series: Series, pv: IPointView, siblings: IPointView[], body: RcElement, p: Point): void;
hideTooltip(): void;
tooltipVisible(): boolean;
getSeriesView(series: ISeries): SeriesView;
}
declare class BodyView extends ChartElement implements IAnnotationAnchorOwner {
static readonly BODY_CLASS = "rct-body";
private _owner;
private _polar;
private _hitTester;
private _background;
private _image;
private _emptyView;
_gridRowContainer: AxisGridRowContainer;
private _gridContainer;
private _gridViews;
private _baseContainer;
private _baseViews;
private _breakViews;
private _seriesContainer;
private _labelContainer;
_seriesViews: SeriesView[];
private _seriesMap;
private _series;
private _annotationContainer;
private _frontAnnotationContainer;
_annotationViews: AnnotationView[];
private _annotationMap;
private _annotations;
private _gaugeViews;
private _gaugeMap;
private _gauges;
_guideContainer: AxisGuideContainer;
_frontGuideContainer: AxisGuideContainer;
_guideClip: ClipRectElement;
_axisBreakContainer: LayerElement;
private _zoomButton;
private _feedbackContainer;
private _crosshairViews;
private _focusedSeries;
private _focused;
private _siblingSeries;
private _siblings;
private _hoverPointSeries;
private _inverted;
private _zoomRequested;
protected _animatable: boolean;
private _seriesClip;
private _seriesClip2;
private _bodyClip;
constructor(doc: Document, owner: IPlottingOwner);
getAnnotationAnchor(model: any): RcElement;
prepareRender(doc: Document, chart: IChart, polar: boolean): void;
prepareGuideContainers(): void;
pointerMoved(p: Point, target: EventTarget): boolean;
hoverSeries(series: Series): void;
private $_setFocused;
private $_focusSeries;
private $_hoverSeries;
hoverPoint(pt: DataPoint): void;
seriesByDom(elt: Element): SeriesView;
findSeries(ser: Series): SeriesView;
isConnected(axis: Axis): boolean;
getButton(dom: Element): ButtonElement;
buttonClicked(button: ButtonElement): void;
addFeedback(view: RcElement): void;
setZoom(x1: number, y1: number, x2: number, y2: number): void;
animating(): boolean;
getTooltipPos(): Point;
getFocusPointView(): IPointView;
getSeries(series: ISeries): SeriesView;
removeFocus(): void;
getBounds(): DOMRect;
protected _doMeasure(doc: Document, model: Body, hintWidth: number, hintHeight: number, phase: number): Size;
protected _clipSeries(view: RcElement, view2: RcElement, invertable: boolean): void;
protected _setImage(w: number, h: number): void;
protected _doLayout(): void;
private $_isEmpty;
private $_createGaugeView;
private $_prepareGrids;
protected _prepareSeries(doc: Document, chart: IChart, series: Series[]): void;
protected _prepareGauges(doc: Document, chart: IChart, gauges: GaugeBase[]): void;
protected _prepareAnnotations(doc: Document, annotations: Annotation[]): void;
private $_prepareAxisBreaks;
private $_prepareCrosshairs;
protected _layoutAnnotations(inverted: boolean, owner: IAnnotationAnchorOwner, w: number, h: number): void;
}
declare class CrosshairFlagView extends RcElement {
private _back;
private _text;
constructor(doc: Document);
setText(model: Crosshair, text: string): void;
}
declare class AxisScrollView extends ChartElement {
static readonly CLASS_NAME = "rct-axis-scrollbar";
static readonly TRACK_CLASS = "rct-axis-scrollbar-track";
static readonly THUMB_CLASS = "rct-axis-scrollbar-thumb";
static isThumb(dom: Element): boolean;
private _trackView;
_thumbView: RectElement;
_vertical: boolean;
_reversed: boolean;
_szThumb: number;
private _len;
private _page;
private _pos;
constructor(doc: Document);
setScroll(zoom: AxisZoom, reversed: boolean): void;
getZoomPos(pt: number): number;
protected _doMeasure(doc: Document, model: AxisScrollBar, hintWidth: number, hintHeight: number, phase: number): Size;
protected _doLayout(param: any): void;
}
/**
* @internal
*/
declare class AxisView extends ChartElement {
static readonly AXIS_CLASS = "rct-axis";
static readonly LINE_CLASS = "rct-axis-line";
static readonly TICK_CLASS = "rct-axis-tick";
_simpleMode: boolean;
private _lineView;
private _lineView2;
private _titleView;
private _markContainer;
private _markViews;
private _labelContainer;
private _labelViews;
_scrollView: AxisScrollView;
private _markLen;
private _labelSize;
private _labelRowPts;
_guideViews: AxisGuideView[];
_frontGuideViews: AxisGuideView[];
_crosshairView: CrosshairFlagView;
_prevModel: Axis;
_prevMin: number;
_prevMax: number;
private _chartEmpty;
private _empty;
private _edgeStart;
private _marginStart;
private _marginEnd;
private _edgeEnd;
constructor(doc: Document);
private $_checkScrollView;
checkHeight(doc: Document, width: number, height: number): number;
checkWidth(doc: Document, width: number, height: number): number;
prepareGuides(doc: Document, row: number, col: number, container: AxisGuideContainer, frontContainer: AxisGuideContainer): void;
showCrosshair(pos: number, text: string): void;
setMargins(edgeStart: number, start: number, end: number, edgeEnd: number): void;
hideCrosshiar(): void;
scroll(pos: number): void;
prepare(m: Axis): void;
checkExtents(loaded: boolean): {
axis: Axis;
from: number;
to: number;
};
clean(): void;
protected _doMeasure(doc: Document, model: Axis, hintWidth: number, hintHeight: number, phase: number): Size;
protected _doLayout(): void;
private $_prepareTickMarks;
private _prepareLabel;
private $_prepareLabels;
private $_getRows;
private $_getStep;
private $_checkOverlappedHorz2;
private $_applyStep;
private $_measureLabelsHorz;
private $_checkOverlappedVert;
private $_checkOverlappedVert2;
private $_measureLabelsVert;
private $_layoutLabelsHorz;
private $_layoutLabelsVert;
}
declare class NavigatorHandleView extends RcElement {
private _back;
private _shape;
_vertical: boolean;
private _w;
private _h;
constructor(doc: Document);
layout(width: number, height: number, vertical: boolean): void;
}
/**
* @internal
*/
declare class NavigatorView extends ChartElement {
static readonly CLASS_NAME = "rct-navigator";
static readonly BACK_STYLE = "rct-navigator-back";
static readonly MASK_STYLE = "rct-navigator-mask";
static readonly HANDLE_STYLE = "rct-navigator-handle";
static readonly HANDLE_BACK_STYLE = "rct-navigator-handle-back";
static readonly TRACK_CLASS = "rct-navigator-track";
static readonly THUMB_CLASS = "rct-navigator-thumb";
static isHandle(dom: Element): boolean;
static isMask(dom: Element): boolean;
private _back;
private _container;
private _seriesView;
private _xAxisView;
private _yAxisView;
_mask: RectElement;
_trackView: RectElement;
_thumbView: RectElement;
_startHandle: NavigatorHandleView;
_endHandle: NavigatorHandleView;
constructor(doc: Document);
dblClick(elt: Element): boolean;
svgToElement(x: number, y: number): Point;
protected _doMeasure(doc: Document, model: SeriesNavigator, hintWidth: number, hintHeight: number, phase: number): Size;
protected _doLayout(param: any): void;
private $_prepareSeriesView;
private $_prepareXAxisView;
private $_prepareYAxisView;
}
declare class TitleView extends BoundableElement> {
isSub: boolean;
static readonly TITLE_CLASS = "rct-title";
static readonly SUBTITLE_CLASS = "rct-subtitle";
private _textView;
private _richText;
constructor(doc: Document, isSub: boolean);
protected _marginable(): boolean;
protected _setBackgroundStyle(back: RectElement): void;
protected _doMeasure(doc: Document, model: Title, hintWidth: number, hintHeight: number, phase: number): Size;
protected _doLayout(): void;
}
/**
* @internal
*/
declare class CreditView extends ChartElement {
private _textView;
constructor(doc: Document);
clicked(dom: Element): void;
protected _doMeasure(doc: Document, model: Credits, intWidth: number, hintHeight: number, phase: number): Size;
}
declare abstract class PaneContainer extends LayerElement {
abstract get bodies(): BodyView[];
abstract bodyViewOf(dom: Element): BodyView;
abstract prepare(doc: Document, model: ISplit): void;
abstract measure(doc: Document, model: ISplit, width: number, height: number, phase: number): any;
abstract layout(): void;
abstract getSeries(series: ISeries): SeriesView;
abstract seriesByDom(dom: Element): SeriesView;
}
/**
* @internal
*/
declare class ChartView extends LayerElement implements IAnnotationAnchorOwner {
private static pane_class;
static registerPaneClass(clazz: any): void;
private _model;
_inverted: boolean;
private _titleSectionView;
private _legendSectionView;
private _plotContainer;
private _bodyView;
private _polarView;
private _currBody;
private _axisSectionMap;
private _paneContainer;
private _annotationContainer;
private _frontAnnotationContainer;
private _annotationViews;
private _annotationMap;
private _annotations;
_navigatorView: NavigatorView;
private _creditView;
private _historyView;
private _tooltipView;
_org: Point;
private _plotWidth;
private _plotHeight;
private _hoverItem;
constructor(doc: Document);
getAnnotationAnchor(model: any): RcElement;
titleView(): TitleView;
subtitleView(): TitleView;
bodyView(): BodyView;
clean(): void;
measure(doc: Document, model: ChartObject, hintWidth: number, hintHeight: number, phase: number): void;
layout(): void;
showTooltip(series: Series, pv: IPointView, siblings: IPointView[], body: BodyView, p: Point): void;
tooltipVisible(): boolean;
hideTooltip(): void;
getSeriesView(series: ISeries): SeriesView;
legendByDom(dom: Element): LegendItem;
seriesByDom(dom: Element): SeriesView;
findSeriesView(series: Series): SeriesView;
creditByDom(dom: Element): CreditView;
bodyOf(elt: Element): BodyView;
pointerMoved(x: number, y: number, target: EventTarget): void;
getAxis(axis: Axis): AxisView;
getButton(dom: Element): ButtonElement;
buttonClicked(button: ButtonElement): void;
getScrollView(dom: Element): AxisScrollView;
updateAnnotation(anno: Annotation): void;
isAnimating(): boolean;
protected _doAttached(parent: RcElement): void;
private $_preparePanes;
private $_prepareBody;
private $_prepareAxes;
private $_prepareAxisGuides;
private $_measurePlot;
private $_measurePolar;
private $_prepareAnnotations;
private $_layoutAnnotations;
}
declare class ChartControl extends RcControl implements IChartEventListener {
private _chart;
private _chartView;
constructor(doc: Document, container: string | HTMLDivElement);
protected _initControl(document: Document, container: string | HTMLDivElement, className: string): void;
protected _doDestroy(): void;
onModelChanged(chart: ChartObject, item: ChartItem, tag: any): void;
onVisibleChanged(chart: ChartObject, item: ChartItem): void;
onPointVisibleChanged(chart: ChartObject, series: Series, point: DataPoint): void;
onExportRequest(chart: ChartObject, options: ExportOptions): void;
onRefreshRequest(chart: ChartObject): void;
/**
* chart model.
*/
get chart(): Chart;
set chart(value: Chart);
get model(): ChartObject;
changeModel(model: ChartObject, oldModel: ChartObject): void;
chartView(): ChartView;
refresh(): void;
scroll(axis: Axis, pos: number): void;
use(_module: any): void;
protected _doRender(bounds: IRect): void;
protected _doRenderBackground(elt: HTMLDivElement, root: RcElement, width: number, height: number): void;
private _loadModules;
private _export;
}
/**
* 카테고리축의 tick 모델.
* {@page options} 모델은 {@page op.CategoryAxisTickOptions}이다.
*/
declare class CategoryAxisTick extends AxisTick {
static defaults: CategoryAxisTickOptions;
getPosition(): CategoryTickPosition;
}
/**
* @internal
*
* 카테고리축의 라벨 모델.
* {@page options} 모델은 {@page op.AxisLabelOptions}이다.
*/
declare class CategoryAxisLabel extends AxisLabel {
getTick(index: number, v: any): string;
getIcon(tick: IAxisTick): string;
}
/**
* @internal
*
* 카테고리축의 grid 모델.
* {@page options} 모델은 {@page op.AxisGridOptions}이다.
*/
declare class CategoryAxisGrid extends AxisGrid {
getPoints(axis: CategoryAxis): number[];
}
/**
* 카테고리 축 모델.
* {@page op.AxisOptions#type}은 {@page config.xAxis.category 'category'}이고,
* {@page options 설정} 모델은 {@page op.CategoryAxisOptions}이다.
*/
declare class CategoryAxis extends Axis {
static type: string;
static defaults: CategoryAxisOptions;
_categories: {
c: string;
t: string;
w: number;
i?: string;
}[];
_weights: number[];
_len: number;
private _map;
private _catPad;
private _catMin;
private _catLen;
_pts: number[];
_tstep: number;
get tick(): CategoryAxisTick;
xValueAt(pos: number): number;
getWdith(length: number, category: number): number;
_type(): string;
unitPad(): number;
continuous(): boolean;
protected _createGrid(): CategoryAxisGrid;
protected _createTickModel(): CategoryAxisTick;
protected _createLabel(): CategoryAxisLabel;
collectValues(): void;
getStartAngle(): number;
protected _doPrepareRender(): void;
protected _doBuildTicks(min: number, max: number, length: number): IAxisTick[];
_calcPoints(length: number, phase: number): void;
getPos(length: number, value: number): number;
valueAt(length: number, pos: number): number;
getUnitLen(length: number, value: number): number;
getLabelLength(length: number, value: number): number;
getValue(value: any): number;
getXLabel(value: number): any;
_doCalculateRange(values: number[]): {
min: number;
max: number;
};
private $_collectCategories;
}
/**
* @internal
* 시간축의 tick 모델.
* {@page options} 모델은 {@page op.LinearGaugeLabelOptions}이다.
*
* [주의] javascript에서 숫자값을 Date로 변환하거나, Date를 숫자로 변환할 때는 모두 new Date가 기준이 된다.
*/
declare class TimeAxisTick extends ContinuousAxisTick {
_scale: number;
getNextStep(curr: number, delta: number): number;
protected _isValidInterval(v: any): boolean;
protected _getStepMultiples(step: number): number[];
protected _getStepsByPixels(length: number, pixels: number, base: number, min: number, max: number): number[];
protected _getStepsByInterval(interval: any, base: number, min: number, max: number): number[];
}
/**
* 시간축 라벨 모델.
* {@page options} 모델은 {@page op.TimeAxisLabelOptions}이다.
*/
declare class TimeAxisLabel extends ContinuousAxisLabel {
static defaults: TimeAxisLabelOptions;
private _formats;
private _formatter;
protected _doApply(options: TimeAxisLabelOptions): void;
getTick(index: number, v: any): string;
}
/**
* 날짜/시간 축 모델.
* {@page op.AxisOptions#type}은 {@page config.xAxis.time 'time'}이고,
* {@page options 설정} 모델은 {@page op.TimeAxisOptions}이다.
*/
declare class TimeAxis extends ContinuousAxis {
static type: string;
static subtype: string;
static defaults: TimeAxisOptions;
_offset: number;
/**
* @override
*/
get label(): TimeAxisLabel;
protected _createTickModel(): TimeAxisTick;
protected _createLabel(): TimeAxisLabel;
collectValues(): void;
getValue(value: any): number;
incStep(value: number, step: any): number;
date(value: number): Date;
axisValueAt(length: number, pos: number): any;
value2Tooltip(value: number): any;
getXLabel(value: number): number | Date;
}
/**
* 로그축의 tick 모델.
* {@page options} 모델은 {@page op.LogAxisTickOptions}이다.
*/
declare class LogAxisTick extends ContinuousAxisTick {
static defaults: LogAxisTickOptions;
canUseNumSymbols(): boolean;
protected _getStepMultiples(scale: number): number[];
/**
* 소수점을 갖는 step들을 역로그된 값이 최대한 정수가 되게 조정한다.
*/
_normalizeSteps(steps: number[], min: number, max: number): number[];
}
/**
* 로그축 모델.
* {@page op.AxisOptions#type}은 {@page config.xAxis.log 'log'}이고,
* {@page options 설정} 모델은 {@page op.LogAxisOptions}이다.
*/
declare class LogAxis extends ContinuousAxis {
static type: string;
protected _createLabel(): ContinuousAxisLabel;
protected _createTickModel(): LogAxisTick;
collectValues(): void;
/**
* 내부에서는 log 값들을 사용하고...
*/
getPos(length: number, value: number): number;
protected _doCalculateRange(values: number[]): {
min: number;
max: number;
};
/**
* 화면 표시는 역log 값들을 사용한다.
*/
protected _createTick(length: number, index: number, step: number): IAxisTick;
protected _calcUnitLen(vals: number[], length: number, axisMin: number, axisMax: number): {
len: number;
min: number;
};
}
interface IPointPos {
px: number;
py: number;
isNull?: boolean;
range?: ValueRange;
}
type PointLine = IPointPos[];
declare class LineSeriesPoint extends DataPoint {
radius: number;
shape: Shape;
px: number;
py: number;
toPoint(): IPointPos;
}
/**
* 데이터 포인트 maker 설정 정보.
*/
declare class LineSeriesMarker extends SeriesMarker {
static defaults: LineSeriesMarkerOptions;
}
declare class LinePointLabel extends DataPointLabel {
static readonly ALIGN_GAP = 4;
static defaults: LinePointLabelOptions;
getAlignOffset(): number;
getPosition(): PointLabelPosition;
}
/**
* 라인 시리즈 계열의 기반(base) 클래스.
* {@page options 옵션} 모델은 {@page op.LineSeriesBaseOptions}이다.
* //포인트 label들은 'head', 'foot', 'inside'에 위치할 수 있다.
* //기본값은 'auto'('head'')이다.
* //pointLabel.align으로 수평 정렬을 설정할 수있다.
*/
declare abstract class LineSeriesBase extends ConnectableSeries {
static defaults: LineSeriesBaseOptions;
private _marker;
private _shape;
_lines: PointLine[];
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
*/
get marker(): LineSeriesMarker;
getShape(p: LineSeriesPoint): Shape;
getRadius(p: LineSeriesPoint): number;
/**
* null, ranges를 모두 고려해야 한다.
*/
prepareLines(pts: LineSeriesPoint[]): void;
get pointLabel(): LinePointLabel;
protected _createLabel(chart: IChart): LinePointLabel;
protected _createPoint(source: any): LineSeriesPoint;
hasShape(): boolean;
/**
* rendering 시점에 chart가 series별로 기본 shape를 지정한다.
*/
setShape(shape: Shape): void;
_defViewRangeValue(): "x" | "y" | "z";
protected _createLegendMarker(doc: Document, size: number): RcElement;
legendMarker(doc: Document, size: number): RcElement;
abstract getLineType(): LineType;
protected _connectNulls(): boolean;
protected _doPrepareLines(pts: LineSeriesPoint[]): PointLine[];
}
/**
* Line 시리즈의 마지막 데이터포인트 옆에 표시되는 아이콘과 텍스트 설정 모델.
* 마지막 포인트와의 간격은 {@page offset} 속성으로 지정한다.
*/
declare class LineSeriesFlag extends IconedText {
series: LineSeries;
static defaults: LineSeriesFlagOptions;
constructor(series: LineSeries);
label(): string;
getDefaultIconPos(): IconPosition;
}
/**
* Line 시리즈.
* {@page op.SeriesOptions#type}은 {@page config.series.line 'line'}이고,
* {@page options 옵션} 모델은 {@page op.LineSeriesOptions}이다.
*/
declare class LineSeries extends LineSeriesBase {
static readonly type: string;
static defaults: LineSeriesOptions;
private _flag;
private _base;
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
get flag(): LineSeriesFlag;
backDir(): LineStepDirection;
isMarker(): boolean;
get canPolar(): boolean;
getLineType(): LineType;
protected _connectNulls(): boolean;
getBaseValue(axis: IAxis): number;
protected _doPrepareRender(): void;
}
/**
* Spline 시리즈 모델.
* {@page lineType} 설정을 무시하고 항상 'spline'으로 표시되는 것 외에는
* {@page LineSeries} 시리즈와 동일하다.
* {@page op.SeriesOptions#type}은 {@page config.series.spline 'spline'}이고,
* {@page options 설정} 모델은 {@page op.SplineSeriesOptions}이다.
*/
declare class SplineSeries extends LineSeries {
static readonly type = "spline";
get canPolar(): boolean;
_viewType(): string;
getLineType(): LineType;
}
declare class AreaSeriesPoint extends LineSeriesPoint {
yLow: number;
}
/**
* Area 시리즈 모델.
* 대부분 {@page config.series.line 'line'} 시리즈와 동일하고 라인 아래 부분을 별도의 색상으로 채운다.
* {@page op.SeriesOptions#type}은 {@page config.series.area 'area'}이고,
* {@page options 옵션} 모델은 {@page opt.AreaSeriesOptions}이다.
*/
declare class AreaSeries extends LineSeries {
static readonly type: string;
_areas: PointLine[];
protected _doInitChildren(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* 미리 생성된 line들을 기준으로 area들을 생성한다.
*/
prepareAreas(): void;
isBased(axis: IAxis): boolean;
protected _createLegendMarker(doc: Document, size: number): RcElement;
protected _createPoint(source: any): AreaSeriesPoint;
protected _doPrepareLines(pts: LineSeriesPoint[]): PointLine[];
}
/**
* [low, high|y]
* [x, low, high|y]
*/
declare class AreaRangeSeriesPoint extends AreaSeriesPoint {
low: any;
lowValue: number;
get high(): number;
get highValue(): number;
px2: number;
py2: number;
getPointLabel(index: number): any;
labelCount(): number;
protected _assignTo(proxy: any): any;
protected _valuesChangd(prev: any): boolean;
protected _readArray(series: AreaRangeSeries, v: any[]): void;
protected _readObject(series: AreaRangeSeries, v: any): void;
protected _readSingle(v: any): void;
parse(series: AreaRangeSeries): void;
initValues(): void;
initPrev(axis: IAxis, prev: any): void;
applyValueRate(prev: any, vr: number): void;
}
/**
* AreaRange 시리즈 모델.
* {@page op.SeriesOptions#type}은 {@page config.series.arearange 'arearange'}이고,
* {@page options 옵션} 모델은 {@page op.AreaRangeSeriesOptions}이다.
*/
declare class AreaRangeSeries extends LineSeriesBase {
static readonly type = "arearange";
static defaults: AreaRangeSeriesOptions;
pointLabelCount(): number;
protected _createLabel(chart: IChart): LinePointLabel;
protected _createLegendMarker(doc: Document, size: number): RcElement;
protected _createPoint(source: any): AreaRangeSeriesPoint;
getLineType(): LineType;
collectValues(axis: IAxis, vals: number[]): void;
protected _doPrepareLines(pts: LineSeriesPoint[]): PointLine[];
}
/**
* Line 시리즈그룹 모델.
* {@page op.SeriesOptions#type}은 {@page config.series.linegroup 'linegroup'}이고,
* {@page options 옵션} 모델은 {@page op.LineSeriesGroupOptions}이다.
*/
declare class LineSeriesGroup extends SeriesGroup {
static readonly type = "linegroup";
static readonly seriesType = "line";
static defaults: LineSeriesGroupOptions;
protected _canContain(ser: Series): boolean;
getBaseValue(axis: IAxis): number;
}
/**
* Area 시리즈 그룹.
* {@page op.SeriesOptions#type}은 **'areagroup'** 이고,
* {@page options 옵션} 모델은 {@page op.BarSeriesGroupOptions}이다.
*/
declare class AreaSeriesGroup extends SeriesGroup {
static readonly type = "areagroup";
static readonly seriesType = "area";
static defaults: AreaSeriesGroupOptions;
prepareLines(series: AreaSeries): void;
protected _canContain(ser: Series): boolean;
getBaseValue(axis: IAxis): number;
}
/**
* Bar 시리즈 계열의 기반(base) 모델.
* {@page options 설정} 모델은 {@page op.BarSeriesBaseOptions}이다.
*/
declare abstract class BarSeriesBase extends BasedSeries {
static defaults: BarSeriesBaseOptions;
canCategorized(): boolean;
_colorByPoint(): boolean;
protected _createPoint(source: any): DataPoint;
protected _getGroupBase(): number;
}
/**
* Bar 시리즈 모델.
* {@page op.SeriesOptions#type}은 {@page config.series.bar 'bar'}이고,
* {@page options 설정} 모델은 {@page op.BarSeriesOptions}이다.
*/
declare class BarSeries extends BarSeriesBase {
static readonly type = "bar";
protected _createLegendMarker(doc: Document, size: number): RcElement;
get canPolar(): boolean;
}
/**
* {@page BarSeries}, {@page CircleBarSeires}의 그룹 기반 모델.
*/
declare abstract class BarSeriesGroupBase> extends ClusterableSeriesGroup implements IClusterable {
static defaults: BarSeriesGroupBaseOptions;
canCategorized(): boolean;
getBaseValue(axis: IAxis): number;
protected _doPrepareSeries(series: T[]): void;
}
/**
* Bar 시리즈 그룹.