realchart
Version:
Wooritech charting library
2,022 lines (2,010 loc) • 474 kB
TypeScript
/**
* RealReport-Chart 라이브러리 클래스 모델의 최상위 base 클래스.
* <br>
*
* @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<T> 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 값들이 지정될 때, 각 항목에 해당되는 필드 이름들.<br/>
* 이 이름들을 속성으로 갖는 json 객체로 저장된다.
*
* 기본값은 ['x', 'y', 'z'];
*/
fields?: string[];
/**
* row가 단일값일 때 필드 이름.\
* 이 필드 이름 속성을 갖는 json 객체로 저장된다.
*
* 기본값은 'y'.
*
* @config
*/
field?: string;
}
/**
* @internal
* 차트 데이터 모델.<br/>
*/
declare class DataObject extends EventProvider<IChartDataListener> {
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;
/**
* 지정한 행의 필드 값을 변경한다.<br/>
* 이 데이터에 연결된 시리즈의 해당 데이터포인트의 값이 변경된다.
*
* ```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;
/**
* 지정한 필드 값 목록으로 구성된 신규 행을 지정한 위치에 추가한다.<br/>
* 이 데이터에 연결된 시리즈의 데이터포인트가 추가된다.
*
* ```js
* data.addRow({
* field1: 'value1',
* field2: 123,
* ...
* });
* ```
*
* @param values 필드 값 목록.
* @param row 행 번호. 기본값 -1. 0보다 작은 값이면 마지막 행 다음에 추가한다.
*/
addRow(values: any, row: number): void;
/**
* 지정한 위치의 행이 삭제된다.<br/>
* 이 데이터에 연결된 시리즈의 해당 데이터포인트가 제거된다.
*
* ```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 스타일 속성.<br/>
* {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute SVG 속성}을 참조한다.<br/>
*/
interface SVGStyles {
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill fill} 스타일 속성.<br/>
*/
fill?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity fill-opacity} 스타일 속성.<br/>
*/
fillOpacity?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke stroke} 스타일 속성.<br/>
*/
stroke?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width stroke-width} 스타일 속성.<br/>
*/
strokeWidth?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray} 스타일 속성.<br/>
*/
strokeDasharray?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family font-family} 스타일 속성.<br/>
*/
fontFamily?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size font-size} 스타일 속성.<br/>
*/
fontSize?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight font-weight} 스타일 속성.<br/>
*/
fontWeight?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style font-style} 스타일 속성.<br/>
*/
fontStyle?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx rx} 스타일 속성.<br/>
* {@page config.seires.bar 'bar'} 시리즈의 데이터포인트 bar의 모서리를 지정하는 데 사용된다.
*/
rx?: string;
/**
* **SVG에 적용되는 정식 css style 속성이 아니다.**<br/>
* 데이터포인트 라벨등 몇 요소의 배경 간격 설정으로 사용할 수 있다.
*/
padding?: string;
/**
* 텍스트 정렬을 지정한다.<br/>
* **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";
/**
* 텍스트 배경 상자를 표시한다.<br/>
* 배경 상자에 {@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} 등에 설정할 수 있는 값 범위 정보.<br/>
* 시작, 끝 값과 영역에 표시할 색상 및 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}에 설정할 수 있는 값 범위 목록.<br/>
*/
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 {
/**
* 표시 여부.<br/>
*
* @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 {
/**
* 텍스트 표시 효과.<br/>
*
* @default 'none'
*/
effect?: ChartTextEffect;
/**
* {@page autoContrast}가 true이고 밝게 표시할 때 적용되는
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.<br/>
*/
lightStyle?: SVGStyleOrClass;
/**
* {@page autoContrast}가 true이고 어둡게 표시할 때 적용되는
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.<br/>
*/
darkStyle?: SVGStyleOrClass;
/**
* {@page effect}가 'background'일 때 배경에 적용되는
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.<br/>
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 텍스트가 data point 내부에 표시되는 경우 포인트 배경 색상과 대조되도록 표시한다.<br/>
* 밝게 표시할 때는 {@page lightStyle}을 적용하고,
* 어둡게 표시할 때는 {@page darkStyle}이 적용된다.
* lightStyle이 지정되지 않으면 'rct-text-light' 클래스 셀렉터가,
* darkStyle이 지정되지 않으면 'rct-text-dark' 클래스 셀렉터가 기본 적용된다.
*
* @default true
*/
autoContrast?: boolean;
/**
* {@page effect}가 'outline'일 때 외곽 택스트의 외곽선 두께.<br/>
*
* @default 2
*/
outlineThickness?: number;
/**
* label 문자열 앞에 추가되는 문자열.<br/>
*/
prefix?: string;
/**
* label 문자열 끝에 추가되는 문자열.<br/>
*/
suffix?: string;
/**
* 축의 tick 간격이 1000 이상인 큰 수를 표시할 때
* 이 속성에 지정한 symbol을 이용해서 축약형으로 표시한다.<br/>
*
* @default 'k,M,G,T,P,E'
*/
numberSymbols?: string;
/**
* label이 숫자일 때 표시 형식.<br/>
*
* @default '#,##0.#'
*/
numberFormat?: string;
/**
* Text 형식.<br/>
*/
text?: string;
/**
* 텍스트 행의 높이를 계산되는 높이와 다르게 표시되도록 지정한다.<br/>
* 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 {
/**
* 이이콘 표시 위치<br/>
*
* @default 'default'
*/
iconPosition?: IconPosition;
/**
* 아이콘에 사용할 이미지 목록<br/>
* assets에 지정한 이미지 목록을 id 값으로 불러와 사용한다.<br/>
* 이미지 목록이 없으면, 대신 iconRoot 속성 값을 사용하여 아이콘 경로를 설정한다.
*/
imageList?: string;
/**
* 아이콘 이미지의 URL을 지정할 때 사용하는 기본 경로를 설정<br/>
* 아이콘 URL을 구성하는 데 필요한 루트 경로를 제공하며, 여러 아이콘의 상대 경로를 설정할 때 유용하다.
*/
iconRoot?: string;
/**
* 아이콘과 텍스트 사이의 간격.<br/>
*
* @default 2
*/
iconGap?: number;
/**
* 아이콘 이미지 너비.<br/>
*/
iconWidth?: number;
/**
* 아이콘 이미지 높이<br/>
* 지정하지 않으면 16 픽셀로 설정된다.
*/
iconHeight?: number;
}
/**
* 데이터포인트 뷰가 {@page config.base.series#onPointClick 클릭}될 때,
* 마우스 {@page config.base.series#onPointHover hover}될 때,
* 또는 {@page config.base.series#pointStyleCallback 동적 스타일}을 리턴하는 콜백이나 이벤트 등의 매개변수로 사용된다.<br/>
* {@page config.base.series#onPointHover 콜백}의 매개변수로 사용된다.<br/>
*/
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;
}
/**
* 어노테이션 배치 기준.<br/>
* [주의]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 도형}.<br/>
*
* @config chart.annotation[base]
*/
interface AnnotationOptions extends ChartItemOptions {
/**
*/
type?: AnnotationType;
/**
* true로 지정하면 시리즈나 게이지들 위에 표시된다.<br/>
*
* @default false
*/
front?: boolean;
/**
* 어노테이션 이름.<br/>
* 동적으로 어노테이션을 다루기 위해서는 반드시 지정해야 한다.
*
* @default false
*/
name?: string;
/**
* 어노테이션 배치 기준이 되는 차트 구성 요소.<br/>
* 현재, 같은 영역(body 혹은 chart)에 포함된 다른 어노테이션이나 {@page config.base.gauge 게이지} {@page name 이름}을 지정할 수 있다.
*/
anchor?: string;
/**
* 수평 배치.<br/>
*
* @default 'left' anchor가 지정되면 'center', 아니면 'left'
*/
align?: Align;
/**
* 수직 배치.<br/>
*
* @default top
*/
verticalAlign?: VerticalAlign;
/**
* {@page align}과 {@page verticalAlign}으로 지정된 위치에서 실제 표시될 위치의 수평 간격.<br/>
* 값이 양수일 때, {@page anchor}가 지정된 경우 anchor 아이템으 밖으로 멀어지고, 아니면 영역 경계 안쪽으로 멀어진다.
* 또, {@page anchor}가 지정된 경우 **'0.5w'** 등으로 이 어노테이션의 너비를 기준으로 한 크기로 지정할 수 있다.
*
* @default 0
*/
offsetX?: number | string;
/**
* {@page align}과 {@page verticalAlign}으로 지정된 위치에서 실제 표시될 위치의 수직 간격.<br/>
* 값이 양수일 때, {@page anchor}가 지정된 경우 anchor 아이템으 밖으로 멀어지고, 아니면 영역 경계 안쪽으로 멀어진다.
* 또, {@page anchor}가 지정된 경우 **'0.5h'** 처럼 이 어노테이션의 너비를 기준으로 한 크기로 지정할 수 있다.
*
* @default 0
*/
offsetY?: number | string;
/**
* 회전 각도.<br/>
* 0 ~ 360 사이의 값으로 지정한다.
*/
rotation?: number;
/**
* 어노테이션 배치 기준.<br/>
* [주의]body에 설정된 annoation에는 적용되지 않는다.
*
* @default 'chart'
*/
scope?: AnnotationScope;
/**
* 배경 스타일.<br/>
* 경계 및 배경 색, padding 스타일을 지정할 수 있다.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* body의 annotation으로 설정된 경우,
* true로 지정하면 상위 영역을 벗어난 부분도 표시되게 한다.<br/>
*/
noClip?: boolean;
/**
* body 어노테이션일 경우,
* x 축을 기준으로 지정하는 수평(inverted일 때 수직) 위치.<br/>
* chart에 지정된 어노테이션에서는 무시된다.
*/
x1?: number | Date;
/**
* body 어노테이션일 경우,
* x 축을 기준으로 지정하는 수평(inverted일 때 수직) 위치.<br/>
* chart에 지정된 어노테이션에서는 무시된다.
*/
x2?: number | Date;
/**
* body 어노테이션일 경우,
* y 축을 기준으로 지정하는 수직(inverted일 때 수평) 위치.<br/>
* chart에 지정된 어노테이션에서는 무시된다.
*/
y1?: number | Date;
/**
* body 어노테이션일 경우,
* y 축을 기준으로 지정하는 수직(inverted일 때 수평) 위치.<br/>
* chart에 지정된 어노테이션에서는 무시된다.
*/
y2?: number | Date;
/**
* Annotation 너비.<br/>
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.
*/
width?: PercentSize;
/**
* Annotation 높이.<br/>
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.
*/
height?: PercentSize;
}
declare const ImageAnnotationType = "image";
/**
* 이미지 어노테이션.<br/>
* {@page op.AnnotationOptions#type}은 'image'이다.<br/>
*
* // 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 어노테이션.<br/>
* {@page op.AnnotationOptions#type}은 'shape'이다.<br/>
* {@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 종류.<br/>
*
* @default 'square'
*/
shape?: ShapeAnnotationShape;
/**
* Shape path.
* 이 속성이 지정되면 {@page shape}는 무시된다.
*/
path?: string;
/**
*/
series?: string;
/**
*/
xRange?: number[];
/**
*/
yRange?: number[];
}
declare const TextAnnotationType = "text";
/**
* 텍스트 어노테이션.<br/>
* {@page op.AnnotationOptions#type}은 'text'이다.<br/>
*
* // 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.<br/>
* 시리즈나 축에서 이 에셋 항목을 참조할 때 사용하는 키로서
* 차트 내에서 유일한 문자열로 반드시 지정해야 한다.
*
*/
id: string;
}
/**
*/
interface GradientOptions extends AssetItemOptions {
/**
* 색을 배열로 지정하거나,
* 끝 값을 'white'로 전제하고 시작 색 값 하나만 지정할 수 있다.
*
*/
color: string[] | string;
/**
* 0에서 1사이의 불투명도.<br/>
* 지정하지 않거나 타당한 값이 아니면 1(완전 불투명)로 적용한다.
* 또는, 불투명도를 배열로 지정할 수도 있다.
*
*/
opacity?: number[] | number;
}
/**
* 시작점과 끝점 사이에 색상이 서서히 변경되는 효과를 표시한다.<br/>
* 채우기 색이나 선 색으로 사용될 수 있다.
*
* @config chart.asset[type=lineargradient]
*/
interface LinearGradientOptions extends GradientOptions {
/**
*
* @default 'down'
*/
dir?: 'down' | 'up' | 'right' | 'left';
}
/**
* 원 중심에서 바깥으로 생상이 변해가는 효과를 표시한다.<br/>
* 채우기 색이나 선 색으로 사용될 수 있다.
*
* @config chart.asset[type=radialgradient]
*/
interface RadialGradientOptions extends GradientOptions {
/**
* gradient가 끝나는 원의 x 좌표.
*/
cx?: number | string;
/**
* gradient가 끝나는 원의 y 좌표.
*/
cy?: number | string;
/**
* gradient가 끝나는 원의 반지름.
*/
r?: number | string;
}
/**
* 도형 패턴을 지정해서 채우기(fill) 색상 대신 사용할 수 있다.<br/>
*/
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} 등에 적용할 수 있다.<br/>
* 목록에서 색상을 꺼내오는 방식은 {@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<T extends AssetItemOptions> {
source: T;
constructor(source: T);
hasDef(): boolean;
abstract getEelement(doc: Document, source: T): Element;
abstract prepare(): void;
}
/**
* <defs> 요소를 관리하는 인터페이스.<br/>
*/
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<AssetItemOptions>;
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;
private _resizeObserver;
private _domResize;
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<T extends HTMLElement>(elt: T): T;
addElement<T extends RcElement>(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;
setDomResize(value: boolean): 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 _domResizeHandler: (event: Event) => void;
protected _domResized(): 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<T extends RcElement>(child: T): T;
insertChild<T extends RcElement>(child: T, before: RcElement): T;
insertAfter<T extends RcElement>(child: T, after: RcElement): T;
insertFirst<T extends RcElement>(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<T extends RcElement>(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";
};
/** @dummy */
type Shape = typeof _Shapes[keyof typeof _Shapes];
/**
* 시리즈 데이터포인트 {@page config.base.series.pointLabel 라벨} 표시 위치.<br/>
* {@page config.base.series.pointLabel.position} 속성 값으로 사용된다.
*
* @enum
*/
declare const _PointLabelPosition: {
/**
* 시리즈 종류에 따라 데이터포인트 라벨들의 표시 위치가 자동 결정된다.<br/>
*/
readonly AUTO: "auto";
/**
* 포인트뷰 상단에 표시.<br/>
*/
readonly HEAD: "head";
/**
* 포인트뷰 하단에 표시.<br/>
*/
readonly FOOT: "foot";
/**
* {@page config.series.pie}나 {@page config.series.funnel}에서 데이터포인트 라벨을
* 포인트뷰 내부에 표시.<br/>
*/
readonly INSIDE: "inside";
/**
* {@page config.series.pie}나 {@page config.series.funnel}에서 데이터포인트 라벨을
* 포인트뷰 외부에 표시.<br/>
*/
readonly OUTSIDE: "outside";
};
/** @dummy */
type PointLabelPosition = typeof _PointLabelPosition[keyof typeof _PointLabelPosition];
/**
* 시리즈 데이터포인트들의 label 옵션.<br/>
* {@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 표시 위치.<br/>
* 'auto'이면 시리즈 종류에 따라 위치가 결정된다.
*
* @default 'auto'
*/
position?: PointLabelPosition;
/**
* label과 point view 혹은 connector 사이의 기본 간격.<br/>
* 숫자 대신 콜백을 설정해서 데이터포인트별 값을 지정할 수 있다.
* 콜백에서 타당한 값을 리턴하지 않으면 기본값이 사용된다.
*
* @default 5
*/
offset?: number | ((point: any) => number);
/**
* 계산되는 기본 text 대신, data point label로 표시될 field.<br/>
* {@page textCallback}이 설정되고 콜백에서 null이나 undefined를 리턴하지 않으면 이 속성은 무시된다.
*/
textField?: string;
/**
* polar이거나 원형 시리즈일 때 true로 지정할 경우 각도에 따라 자동으로 회전 시킨다.
*/
autoRotation?: boolean;
/**
* 계산되는 기본 text 대신, data point label로 표시될 text 리턴.<br/>
* undefined나 null을 리턴하면 {@page textField} 등을 사용한 기존에 표시될 텍스트를 사용한다.
* 빈 문자열 등 정상적인 문자열을 리턴하면 그 문자열대로 표시된다.
* {@page prefix}나 포맷 속성 등은 적용되지 않는다.
*/
textCallback?: (point: any) => string;
/**
* 데이터 포인트별 label 표시 여부를 리턴하는 콜백.<br/>
*
*/
visibleCallback?: (point: any) => boolean;
/**
* 데이터 포인트별로 추가 적용되는 스타일을 리턴한다.<br/>
*/
styleCallback?: (point: any) => SVGStyleOrClass;
}
/**
* 추세선(trendline) 유형.<br/>
*
* @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];
/**
* 시리즈 추세선 옵션.<br/>
* {@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}로 지정된 값들을 데이터포인트로 표시하는 차트의 핵심 구성 요소이다.<br/>
* 차트 설정의 다른 부분이나 API에 참조하기 위해서는 {@page name}을 반드시 지정해야 햔다.
* 차트 생성 시 {@page config.series.#type} 을 지정하지 않으면 {@page config.series.bar 'bar'} 시리즈로 생성된다.<br/>
*
* @config chart.series[base]
*/
interface SeriesOptions extends ChartItemOptions {
/**
*/
type?: string;
/**
* 시리즈 이름.<br/>
* 시리즈 생성시 지정된 후 변경할 수 없다.
* 차트의 다른 구성 요소에서 이 시리즈를 참조할 때 사용되며,
* 레전드나 툴팁에서 시리즈를 나타내는 텍스트로도 사용된다.
*/
name?: string;
/**
* 이 시리즈를 나타내는 텍스트.<br/>
* 레전드나 툴팁에서 시리즈를 대표한다.
* 이 속성이 지정되지 않으면 {@page name}이 사용된다.
*/
label?: string;
/**
* 데이터포인트 label 옵션.<br/>
* 단순히 boolean 값으로 설정하면 {@page visible} 속성에 적용된다.
*/
pointLabel?: DataPointLabelOptions | boolean;
/**
* 분할 모드일 때 시리즈가 표시될 pane의 수직 index.
*/
row?: number;
/**
* 분할 모드일 때 시리즈가 표시될 pane의 수평 index.
*/
col?: number;
/**
* 포인터가 차지하는 너비가 이 값 미만이면 표시하지 않는다.
* // TODO: 구현할 것!
*/
visibleThreshold?: number;
/**
* 시리즈 표시 순서를 지정할 수 있다.<br/>
* 값이 클 수록 나중에(위에) 표시된다.
*/
zOrder?: number;
/**
* 그룹에 포함되면 그룹 설정을 따른다.
*/
xAxis?: string | number;
/**
* 그룹에 포함되면 그룹 설정을 따른다.
*/
yAxis?: string | number;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 x 값을 지정하는 속성명이나 인덱스.<br/>
* undefined이면, data point의 값이 array일 때는 0, 객체이면 'x'.
*/
xField?: string | number;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 y 값을 지정하는 속성명이나 인덱스.<br/>
* undefined이면, data point의 값이 array일 때는 1, 객체이면 'y'.
*/
yField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 z 값을 지정하는 속성명이나 인덱스.<br/>
* 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값.<br/>
* 이 후에는 {@page xStep}씩 증가시키면서 설정한다.
* 이 속성이 지정되지 않은 경우 {@page ChartOptions.xStart}가 적용된다.
*/
xStart?: any;
/**
* 연결된 x축이 연속 축(카테고리축이 아닌)일 때, x축 값이 설정되지 않은 데이터 point에 지정되는 x값의 간격.<br/>
* 첫번째 값은 {@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}.<br/>
* {@page Series.style}로 설정되는 시리즈의 inline 스타일이
* 데이터포인터에 적용되지 않는 경우 이 속성을 사용할 수 있다.
* {@page pointColors}나 {@page color}가 설정되면 이 속성으로 설정된 색상은 무시된다.
* 또, {@page pointStyleCallback}으로 설정된 스타일이 이 속성 스타일보다 우선한다.
*/
pointStyle?: SVGStyleOrClass;
/**
* 데이터 포인트 기본 색.<br/>
* 숫자로 지정하면 정수로 변환된 값에 해당하는 팔레트 색상으로 설정된다.
* 'var(--color-n)'으로 지정한 것과 동일하며, 1 ~ 12 사이의 값으로 지정한다.<br/>
* {@page pointColors}나 {@page pointStyleCallback}으로 설정된 색상이 이 속성으로 설정한 색상보다 우선한다.
*/
color?: string | number;
/**
* 데이터 포인트별 색들을 지정한다.<br/>
* 색 배열로 지정하거나, 'colors' asset으로 등록된 이름을 지정할 수 있다.<br/>
* {@page pointStyleCallback}으로 설정된 색상이나 데이터포인트별로 지정한 색상이 이 속성으로 설정한 색상보다 우선한다.
*/
pointColors?: string[] | string;
/**
* 값 범위 목록.<br/>
* 범위별로 다른 스타일을 적용할 수 있다.
* 범위들은 중첩될 수 없다.
*/
viewRanges?: ValueRange[] | ValueRangeList;
/**
* ranges가 적용되는 값.<br/>
* 지정하지 않으면 시리즈 종류에 띠라 자동 적용된다.
* 'line' 시리즈 계열은 'x', 나머지는 'y'가 된다.
* 현재 'z'은 range는 bubble 시리즈에만 적용할 수 있다.
*/
viewRangeValue?: 'x' | 'y' | 'z';
/**
* true로 지정하면 body를 벗어난 data point 영역도 표시된다.<br/>
* 값을 지정하지 않으면 polar 차트에서는 true, 직교 차트에서는 false이다.
* group에 포함되면 group의 noClip 설정을 따른다.<br/>
* 또, 값을 지정하지 않으면 버블시리즈는 최대한 버블들이 표시되도록 한다.
*/
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 효과.<br/>
*/
hoverEffect?: 'none' | 'default';
/**
* 데이터포인트 위에 마우스가 있을 때 적용되는
* {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
hoverStyle?: SVGStyleOrClass;
/**
* 데이터포인트의 동적 스타일 콜백.<br/>
*/
pointStyleCallback?: (args: DataPointCallbackArgs) => SVGStyleOrClass;
/**
* 시리즈의 hover, focus, tooltip 상호작용 여부를 지정한다.
*
* @default true
*/
interactive?: boolean;
/**
* 데이터포인트들이 새로 로드된 후 호출된다.<br/>
*/
onPointsLoaded?: (series: object, firstTime: boolean) => void;
/**
* 데이터 point가 클릭될 때 호출되는 이벤트 콜백.<br/>
* 명시적 true를 리턴하면 기본 동작이 진행되지 않는다.
*/
onPointClick?: (args: DataPointCallbackArgs) => boolean;
/**
* 마우스가 데이터 point 위에 올라가거나 빠져나갈 때 호출되는 이벤트 콜백.<br/>
* 빠져나가는 경우 args 매개변수는 null이다.
*/
onPointHover?: (args: DataPointCallbackArgs) => void;
}
/**
*/
interface ConnectableSeriesOptions extends SeriesOptions {
/**
* 추세선 옵션.<br/>
*/
trendline?: TrendlineOptions;
}
/**
*/
interface ClusterableSeriesOptions extends ConnectableSeriesOptions {
/**
* 시리즈가 그룹에 포함되지 않거나,
* 포함된 그룹의 layout이 {@page SeriesGroupLayout.DEFAULT}이거나 특별히 설정되지 않아서,
* 그룹에 포함된 시리즈들의 data point가 옆으로 나열되어 표시될 때,
* 포인트 표시 영역 내에서 이 시리즈의 포인트가 차지하는 영역의 상대 크기.
* 예를 들어 이 시리즈의 속성값이 1이고 다른 시리즈의 값이 2이면 다른 시리즈의 data point가 두 배 두껍게 표시된다.
* 또, 그룹에 포함되고 그룹의 layout이 {@page SeriesGroupLayout.DEFAULT}
*
*/
pointWidth?: number;
/**
* 데이터포인트가 표시되는 위치를 데이터포인트 너비에 대한 상대값으로 비켜 표시한다..<br/>
* 기본값 0이면 카테고리의 중앙 또는 연속축의 값 위치에 데이터포인트의 중간이 놓이도록 표시한다.
* -0.5이면 데이터포인트 오른쪽이, 0.5이면 데이터포인트 왼쪽이 기본 위치에 표시된다.
*
* @default 0
*/
pointOffset?: number;
/**
* 이 시리즈의 point가 차지하는 영역 중에서 point bar 양쪽 끝에 채워지는 빈 영역의 크기.
* <br>
* point가 차지할 원래 크기에 대한 상대 값으로서,
* 0 ~ 0.5 사이의 비율 값으로 지정한다.
*
* @default undefined 한 카테고리에 cluster 가능한 시리즈가 하나만 표시되면 0.25, group에 포함된 경우 0.1, 여러 시리즈와 같이 표시되면 0.2.
*/
pointPadding?: number;
/**
*/
minPointWidth?: number;
/**
* 구분 배치가 가능한 둘 이상의 시리즈나 시리즈그룸이 표시 중일 때 구분 배치할 지 여부.<br/>
* 명시적 false로 지정하지 않는 한 무리 배치한다.
* 즉, 복수 개의 시리즈나 시리즈그룹의 데이터포인트들이 겹치지 않고 차레대로 표시된다.
*/
clusterable?: boolean;
}
/**
* 'bar'와