realchart
Version:
Wooritech charting library
1,830 lines (1,819 loc) • 593 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;
/**
* @private
*
* template param으로부터 생성되는 값은 문자열일 수 있다.
*/
toBool(v: any): boolean;
toNum(v: any, def?: number): number;
}
/**
* @private
*/
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'.
*
*
*/
field?: string;
}
/**
* @private
* 차트 데이터 모델.<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;
}
/** @private */
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);
}
/**
* @private
*/
declare const PI_2: number;
declare const ORG_ANGLE: number;
/**
* @private
*/
declare const RAD_DEG: number;
/**
* @private
*/
declare function fixnum(value: number): number;
declare function toStr(value: any): string;
/**
* @private
*/
declare function pixel(v: number): string;
type PathValue = string | number;
type Path = string | any[];
/**
* 123, '10%' 형식으로 크기를 지정한다.
*/
type PercentSize = string | number;
interface IPercentSize {
size: number;
fixed: boolean;
}
/**
* @private
*/
declare function parsePercentSize(sv: PercentSize, enableNull: boolean, def?: number): IPercentSize;
/**
* @private
*/
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: {
/** */
readonly TOP: "top";
/** */
readonly MIDDLE: "middle";
/** */
readonly BOTTOM: "bottom";
};
/** @dummy */
type VerticalAlign = typeof _VerticalAlign[keyof typeof _VerticalAlign];
/**
* SVG 스타일 속성.<br/>
* {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute SVG 속성}을 참조한다.<br/>
*/
interface SVGStyles {
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill fill} 스타일 속성.<br/>
*/
fill?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity fill-opacity} 스타일 속성.<br/>
*/
fillOpacity?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke stroke} 스타일 속성.<br/>
*/
stroke?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width stroke-width} 스타일 속성.<br/>
*/
strokeWidth?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray} 스타일 속성.<br/>
*/
strokeDasharray?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family font-family} 스타일 속성.<br/>
*/
fontFamily?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size font-size} 스타일 속성.<br/>
*/
fontSize?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight font-weight} 스타일 속성.<br/>
*/
fontWeight?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style font-style} 스타일 속성.<br/>
*/
fontStyle?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx rx} 스타일 속성.<br/>
* {@link https://realchart.co.kr/config/config/seires/bar bar} 시리즈의 데이터포인트 bar의 모서리를 지정하는 데 사용된다.
*/
rx?: string;
/**
* **SVG에 적용되는 정식 css style 속성이 아니다.**<br/>
* 데이터포인트 라벨등 몇 요소의 배경 간격 설정으로 사용할 수 있다.
*/
padding?: string;
/**
* 텍스트 정렬을 지정한다.<br/>
* **SVG에 적용되는 정식 css style 속성이 아니다.**
* 즉, HTML이나 realchart-style.css 등의 외부 css 파일에서 사용할 수 없고,
* RealChart 내부에서 {@link https://realchart.co.kr/config/config/title 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/>
* 배경 상자에 {@link 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: {
/**
*
*/
readonly CHART: "chart";
/**
*
*/
readonly BODY: "body";
/**
* 상위 모델이 존재하는 경우 상위 모델 영역 기준.\
* 상위가 없으면 기본값(대부분 'body')과 동일.
* ex) subtitle인 경우 title 기준.
*
*
*/
readonly PARENT: "parent";
};
/** @dummy */
type AlignBase = typeof _AlignBase[keyof typeof _AlignBase];
/**
* {@link https://realchart.co.kr/config/config/base/series#viewranges viewRanges} 등에 설정할 수 있는 값 범위 정보.<br/>
* 시작, 끝 값과 영역에 표시할 색상 및 label을 지정한다.
* {@link https://realchart.co.kr/config/config/base/series#viewranges viewRanges}에는 이 설정 객체 배열로 지정한다.
*/
interface ValueRange {
/**
*/
fromValue?: number;
/**
*/
toValue?: number;
/**
*/
color: string;
/**
*/
label?: string;
/**
*/
style?: SVGStyleOrClass;
/**
*/
areaStyle?: SVGStyleOrClass;
}
/**
* {@link https://realchart.co.kr/config/config/base/series#viewranges viewRanges}에 설정할 수 있는 값 범위 목록.<br/>
*/
interface ValueRangeList {
/**
*/
fromValue?: number;
/**
*/
toValue?: number;
/**
*/
steps?: number[];
/**
*/
colors: string[];
/**
*/
labels?: string[];
/**
*/
styles?: SVGStyleOrClass[];
/**
*/
areaStyles?: SVGStyleOrClass[];
}
/**
* @private
* 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: {
/**
* 순서대로 가져오고 끝에 도달하면 처음으로 돌아간다.
*
*
*/
readonly NORMAL: "normal";
/**
* 첫 색상을 가져오기 전 항목들을 섞는다.
*
*
*/
readonly SHUFFLE: "shuffle";
/**
* 임의 위치의 색상을 가져온다.
*
*
*/
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: {
/** */
readonly HORIZONTAL_TB: "horizontal-tb";
/** */
readonly VERTICAL_LR: "vertical-lr";
/** */
readonly VERTICAL_RL: "vertical-rl";
/** */
readonly VERTICAL: "vertical";
};
/** @dummy */
type WritingMode = typeof _WritingMode[keyof typeof _WritingMode];
/**
* @enum
*/
declare const _TextOrientation: {
/** */
readonly MIXED: "mixed";
/** */
readonly UPRIGHT: "upright";
};
/** @dummy */
type TextOrientation = typeof _TextOrientation[keyof typeof _TextOrientation];
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: {
/** */
readonly COLORS: "colors";
/** */
readonly IMAGES: "images";
/** */
readonly LINEARGREADIENT: "lineargradient";
/** */
readonly RADIALGRADIENT: "radialgradient";
readonly PATTERNS: "patterns";
};
/** @dummy */
type AssetType = typeof _AssetType[keyof typeof _AssetType];
/**
*/
interface AssetItemOptions {
/** @dummy */
type?: AssetType;
/**
* 에셋 id.<br/>
* 시리즈나 축에서 이 에셋 항목을 참조할 때 사용하는 키로서
* 차트 내에서 유일한 문자열로 반드시 지정해야 한다.
*
*/
id: string;
}
/**
*/
interface GradientOptions extends AssetItemOptions {
/**
* 색을 배열로 지정하거나,
* 끝 값을 'white'로 전제하고 시작 색 값 하나만 지정할 수 있다.
*
*/
color: string[] | string;
/**
* 0에서 1사이의 불투명도.<br/>
* 지정하지 않거나 타당한 값이 아니면 1(완전 불투명)로 적용한다.
* 또는, 불투명도를 배열로 지정할 수도 있다.
*
*/
opacity?: number[] | number;
}
/**
* 시작점과 끝점 사이에 색상이 서서히 변경되는 효과를 표시한다.<br/>
* 채우기 색이나 선 색으로 사용될 수 있다.
*
*/
interface LinearGradientOptions extends GradientOptions {
/** @dummy */
type?: typeof _AssetType.LINEARGREADIENT;
/**
*
* @default 'down'
*/
dir?: 'down' | 'up' | 'right' | 'left';
}
/**
* 원 중심에서 바깥으로 생상이 변해가는 효과를 표시한다.<br/>
* 채우기 색이나 선 색으로 사용될 수 있다.
*
*/
interface RadialGradientOptions extends GradientOptions {
/** @dummy */
type?: typeof _AssetType.RADIALGRADIENT;
/**
* gradient가 끝나는 원의 x 좌표.
*/
cx?: number | string;
/**
* gradient가 끝나는 원의 y 좌표.
*/
cy?: number | string;
/**
* gradient가 끝나는 원의 반지름.
*/
r?: number | string;
}
/**
* 도형 패턴을 지정해서 채우기(fill) 색상 대신 사용할 수 있다.<br/>
*/
interface PatternOptions extends AssetItemOptions {
/** @dummy */
type?: typeof _AssetType.PATTERNS;
/**
* 문자열로 지정하면 path 'd', 숫자로 지정하면 stock pattern index.
*/
pattern: string | number;
/**
* 지정하지 않으면 {@link height}나 20 pixels.
*/
width?: number;
/**
* 지정하지 않으면 {@link widths}나 20 pixels.
*/
height?: number;
/**
*/
style?: SVGStyles;
/**
*/
backgroundStyle?: SVGStyles;
}
/**
*/
interface ImageOptions {
/**
*/
name?: string;
/**
*/
url: string;
}
/**
* @dummy
*/
interface ImageListOptions extends AssetItemOptions {
/** @dummy */
type?: typeof _AssetType.IMAGES;
/**
*/
rootUrl?: string;
/**
*/
width?: number;
/**
*/
height?: number;
/**
*/
images?: (ImageOptions | string)[];
}
/**
* 색상 목록을 미리 지정하고 {@link https://realchart.co.kr/config/config/base/series#pointcolors pointcolors} 등에 적용할 수 있다.<br/>
* 목록에서 색상을 꺼내오는 방식은 {@link mode} 속성으로 지정한다.
*
*/
interface ColorListOptions extends AssetItemOptions {
/** @dummy */
type?: typeof _AssetType.COLORS;
/**
* 색상 목록에서 색을 꺼내오는 방식.
*
* @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<AssetOptionsType>;
prepareRender(): void;
get options(): AssetOptionsType[];
private $_loadItem;
}
type RcAnimationEndHandler = (ani: RcAnimation, canceld: boolean) => 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(canceled: boolean): void;
protected _doStart(): void;
protected _doStop(): void;
protected _canUpdate(): boolean;
protected abstract _doUpdate(rate: number): boolean;
}
interface IPointerHandler {
handleDown(ev: PointerEvent): void;
handleUp(ev: PointerEvent): void;
handleMove(ev: PointerEvent): void;
handleLeave(ev: PointerEvent): void;
handleClick(ev: PointerEvent): void;
handleDblClick(ev: PointerEvent): void;
handleWheel(ev: WheelEvent): void;
}
/**
* @private
*
* 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 _tester;
private _canvas;
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 _wSave;
private _hSave;
private _resizeObserver;
private _resizeTimer;
private _resizeDelay;
loaded: boolean;
_padding: ISides;
private _bounds;
constructor(doc: Document, container: string | HTMLDivElement, className?: string);
protected _doDestroy(): void;
isInited(): boolean;
isTesting(): boolean;
doc(): Document;
win(): Window;
dom(): HTMLElement;
svg(): SVGSVGElement;
width(): number;
height(): number;
contentWidth(): number;
contentHeight(): number;
contentRight(): number;
canvasCtx(): CanvasRenderingContext2D;
setData(data: string, value: any, container?: boolean): void;
addClip<T extends ClipElement>(clip: T): T;
clearDefs(): void;
private $_clearDefs;
clearAssetDefs(): void;
clearClipDefs(): void;
clearTemporaryDefs(): void;
appendDom<T extends HTMLElement>(elt: T): T;
appendSvg<T extends RcHtmlElement>(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;
setResizeDelay(value: number): 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;
clipDonut(): ClipDonutElement;
clipPath(): ClipPathElement;
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;
getIEColor(color: string): string;
getRootDistance(): {
x: number;
y: number;
};
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(doc: Document, container: string | HTMLDivElement, className: string): void;
protected _initDefs(doc: Document, defs: SVGElement): void;
protected _render(): void;
private $_requestRender;
updateNow(): void;
protected _canOverflowRender(): boolean;
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;
}
/**
* @private
*
* RcContainer 구성 요소.
* SVGElement들로 구현된다.
*/
declare class RcElement extends RcObject {
static DEBUGGING: boolean;
static TESTING: boolean;
static ASSET_KEY: string;
static CLIP_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;
tag: any;
protected _ani: RcAnimation;
private _moveAni;
private _dom;
private _parent;
removing: boolean;
constructor(doc: Document, styleName: string, tag?: string);
protected _doDestroy(): void;
get doc(): Document;
get win(): Window & typeof globalThis;
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;
removeAttr(attr: string): this;
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(sx: number, sy?: number): RcElement;
trans(x: number, y: number): RcElement;
transp(p: Point): RcElement;
private $_cleanMove;
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;
stopAni(): this;
removeLater(delay: number, callback?: (v: RcElement) => void): RcElement;
hide(delay: number): RcElement;
isClip(clip: ClipElement): HTMLElement;
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 RcHtmlElement extends RcObject {
private _control;
protected _dom: HTMLElement;
protected _svg: SVGSVGElement;
constructor(doc: Document, control: RcControl, svg?: boolean);
protected _doInitDom(dom: HTMLElement): void;
protected _doDestroy(): void;
get control(): RcControl;
get dom(): HTMLElement;
addSvg<T extends RcElement>(child: T): T;
setBounds(x: number, y: number, width: number, height: number): RcHtmlElement;
setVis(visible: boolean): RcHtmlElement;
isVisible(): boolean;
setVisibility(visible: boolean): RcHtmlElement;
hasVisibility(): boolean;
protected _getDisplay(): 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);
get path(): string;
setPath(path: Path): PathElement;
}
declare class ClipPathElement extends ClipElement {
private _path;
constructor(doc: Document);
getPath(): string;
setPath(path: Path): void;
}
declare class ClipCircleElement extends ClipElement {
private _circle;
constructor(doc: Document);
setCircle(cx: number, cy: number, radius: number): void;
}
declare class ClipDonutElement extends ClipElement {
private _donut;
constructor(doc: Document);
setDonut(cx: number, cy: number, radius: number, innerRadius: number): void;
}
declare abstract class DragTracker {
dragging: boolean;
start(eventTarget: Element, xStart: number, yStart: number, x: number, y: number): boolean;
drag(eventTarget: Element, xPrev: number, yPrev: number, x: number, y: number): boolean;
cancel(): void;
drop(target: Element, x: number, y: number): void;
end(x: number, y: number): void;
protected _canAccept(target: Element, x: number, y: number): boolean;
protected _showFeedback(x: number, y: number): void;
protected _moveFeedback(x: number, y: number): void;
protected _hideFeedback(): void;
protected _doStart(eventTarget: Element, xStart: number, yStart: number, x: number, y: number): boolean;
protected abstract _doDrag(target: Element, xPrev: number, yPrev: number, x: number, y: number): boolean;
protected _doCanceled(): void;
protected _doCompleted(target: Element, x: number, y: number): void;
protected _doEnded(x: number, y: number): void;
}
/**
* @enum
*/
declare const _Shapes: {
/**
* 원
*
*/
readonly CIRCLE: "circle";
/**
* 다아이몬드
*
*/
readonly DIAMOND: "diamond";
/**
* 정사각형
*
*/
readonly SQUARE: "square";
/**
* 삼각형
*
*/
readonly TRIANGLE: "triangle";
/**
* 별 모양
*
*/
readonly STAR: "star";
/**
* 역삼각형
*
*/
readonly ITRIANGLE: "itriangle";
/**
* 사각형
*
*/
readonly RECTANGLE: "rectangle";
};
/** @dummy */
type Shape = typeof _Shapes[keyof typeof _Shapes];
declare class SvgShapes {
private static _createDrawers;
private static _drawers;
static getDrawer(shape: string): {
(rd: number): (string | number)[];
};
static line(x1: number, y1: number, x2: number, y2: number): PathValue[];
static polygon(...pts: number[]): PathValue[];
static box(x1: number, y1: number, x2: number, y2: number): PathValue[];
static rect(r: IRect): PathValue[];
static rectangle(x: number, y: number, width: number, height: number): PathValue[];
static bar(x: number, y: number, width: number, height: number, rTop: number, rBottom: number): PathValue[];
static square(x: number, y: number, width: number, height: number): PathValue[];
static circle(cx: number, cy: number, rd: number): PathValue[];
static isCircled(angle: number): boolean;
static arc(cx: number, cy: number, rx: number, ry: number, start: number, end: number, clockwise: boolean, close?: boolean): PathValue[];
static sector(cx: number, cy: number, rx: number, ry: number, rInner: number, start: number, end: number, clockwise: boolean): PathValue[];
static donut(cx: number, cy: number, rd: number, rdInner: number): PathValue[];
static arc3d(cx: number, cy: number, rx: number, ry: number, depth: number, start: number, end: number, clockwise: boolean, ret?: {
x1: number;
y1: number;
x2: number;
y2: number;
}): PathValue[];
static arc3dInner(cx: number, cy: number, rx: number, ry: number, depth: number, start: number, end: number, clockwise: boolean, ret?: {
x1: number;
y1: number;
x2: number;
y2: number;
}): PathValue[];
static diamond(x: number, y: number, w: number, h: number): PathValue[];
static triangle(x: number, y: number, w: number, h: number): PathValue[];
static itriangle(x: number, y: number, w: number, h: number): PathValue[];
static star(x: number, y: number, w: number, h: number): PathValue[];
static setShape(target: PathElement, shape: Shape, rx: number, ry: number): void;
}
/**
* 시리즈 데이터포인트 {@link https://realchart.co.kr/config/config/base/series/pointLabel 라벨} 표시 위치.<br/>
* {@link https://realchart.co.kr/config/config/base/series/pointLabel/position position} 속성 값으로 사용된다.
*
* @enum
*/
declare const _PointLabelPosition: {
/**
* 시리즈 종류에 따라 데이터포인트 라벨들의 표시 위치가 자동 결정된다.<br/>
*/
readonly AUTO: "auto";
/**
* 시리즈 종류에 따라 데이터포인트 라벨들의 표시 위치가 자동 결정된다.<br/>
*/
readonly DEFAULT: "default";
/**
* 포인트뷰 상단에 표시.<br/>
*/
readonly HEAD: "head";
/**
* 포인트뷰 하단에 표시.<br/>
*/
readonly FOOT: "foot";
/**
* plot 영역 가장자리에 표시.
*/
readonly FAR: "far";
/**
* {@link https://realchart.co.kr/config/config/series/pie pie}나 {@link https://realchart.co.kr/config/config/series/funnel funnel}에서 데이터포인트 라벨을
* 포인트뷰 내부에 표시.<br/>
*/
readonly INSIDE: "inside";
/**
* {@link https://realchart.co.kr/config/config/series/pie pie}나 {@link https://realchart.co.kr/config/config/series/funnel funnel}에서 데이터포인트 라벨을
* 포인트뷰 외부에 표시.<br/>
*/
readonly OUTSIDE: "outside";
};
/** @dummy */
type PointLabelPosition = typeof _PointLabelPosition[keyof typeof _PointLabelPosition];
/**
* 시리즈 데이터포인트들의 label 옵션.<br/>
* {@link https://realchart.co.kr/config/config/base/series series}의 'pointLabel' 항목으로 설정한다.
*
* ```js
* const config = {
* series: {
* pointLabel: {
* visible: true,
* position: 'outside',
* suffix: '%',
* style: {
* fontWeight: 'bold',
* },
* }
* }
* };
* ```
*/
interface DataPointLabelOptions extends IconedTextOptions {
/**
* @append
*
* 이 속성값이 true이거나 {@link visibleCallback}이 설정되면 표시된다.<br/>
*
* @default undefined
*/
visible?: boolean;
/**
* 포인트 label 표시 위치.<br/>
* 'default'이면 시리즈 종류에 따라 위치가 결정된다.
*
* @default 'default'
*/
position?: PointLabelPosition;
/**
* label과 point view 혹은 connector 사이의 기본 간격.<br/>
* 숫자 대신 콜백을 설정해서 데이터포인트별 값을 지정할 수 있다.
* 콜백에서 타당한 값을 리턴하지 않으면 기본값이 사용된다.
*
* @default 4 pixel
*/
offset?: number | ((args: DataPointCallbackArgs) => number);
/**
* 계산되는 기본 text 대신, data point label로 표시될 field.<br/>
* {@link textCallback}이 설정되고 콜백에서 null이나 undefined를 리턴하지 않으면 이 속성은 무시된다.
*/
textField?: string;
/**
* polar이거나 원형 시리즈일 때 true로 지정할 경우 각도에 따라 자동으로 회전 시킨다.
*/
autoRotation?: boolean;
/**
* body 영역을 넘어갈 경우 대처 방식.<br/>
*
* @default 0
*/
overflowFit?: 'none' | 'hidden' | number;
/**
* body 영역을 넘어가게(overflow) 돼서 데이터포인트 본체와 겹치게 됐을 때, 'outline' 효과를 표시할 지 여부.<br/>
* 동시에 대조 색상으로 표시할 지 여부는 {@link overlapContrast} 속성으로 지정한다.
*
* @default true
*/
overlapOutline?: boolean;
/**
* body 영역을 넘어가게(overflow) 돼서 데이터포인트 본체와 겹치게 됐을 때, 대비 색상으로 표시할 지 여부.<br/>
* 동시에 outline 효과를 표시할 지 여부는 {@link overlapOutline} 속성으로 지정한다.
*
* @default false
*/
overlapContrast?: boolean;
/**
* 수평 상태의 데이터포인트 라벨일 때 텍스트 수직 위치 보정 값.<br/>
* 텍스트 높이에 대한 상대 비율로 설정한 만큼 내려서 표시한다.
* (∵ 숫자로 구성된 텍스트가 위로 치우쳐 표시되는 경향이 있다)
*
* @default 0.05
*/
verticalAdjust?: number;
/**
* 계산되는 기본 text 대신, data point label로 표시될 text 리턴.<br/>
* undefined나 null을 리턴하면 {@link textField} 등을 사용한 기존에 표시될 텍스트를 사용한다.
* 빈 문자열 등 정상적인 문자열을 리턴하면 그 문자열대로 표시된다.
* {@link prefix}나 포맷 속성 등은 적용되지 않는다.
*/
textCallback?: (args: DataPointCallbackArgs) => string;
/**
* 데이터 포인트별 label 표시 여부를 리턴하는 콜백.<br/>
*
*/
visibleCallback?: (args: DataPointCallbackArgs) => boolean;
/**
* 데이터 포인트별로 추가 적용되는 스타일을 리턴한다.<br/>
*/
styleCallback?: (args: DataPointCallbackArgs) => SVGStyleOrClass;
/**
* 데이터 포인트 label의 회전 각도.<br/>
* -90 ~ 90 사이의 값으로 지정한다.<br/>
* -90 미만의 값을 지정하면 -90, 90을 초과하는 값을 지정하면 90으로 설정된다.<br/>
* inverted일 때, rotation 옵션은 무시된다.
*
* @default 0
*/
rotation?: number;
}
/**
* 데이터포인트 label의 연결선 옵션.<br/>
*/
interface DataPointLabelLineOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
}
/**
* 추세선 아래쪽에 표시되는 영역 설정 모델.<br/>
*/
interface TrendlineAreaOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
}
/**
* 추세선 라벨 옵션.<br/>
*/
interface TrendlineLabelOptions extends IconedTextOptions {
/**
* @default false
*/
visible?: boolean;
/**
* 라벨 텍스트.<br/>
*
* @default '${expr}'
*/
text?: string;
/**
* 라벨 위치.<br/>
* 추세선 시작점과 끝점 사이의 상대 위치를 0~1 사이의 숫자로 지정한다.<br/>
*
* @default 1
*/
position?: number;
/**
* 수평 정렬 방식.<br/>
*
* @default 'auto'
*/
align?: 'auto' | Align;
/**
* 수직 정렬 방식.<br/>
*
* @default 'auto'
*/
verticalAlign?: 'auto' | VerticalAlign;
/**
* 0보다 큰 값이면 원래 표시 위치에서 수평으로 멀어지고, 음수면 가까워진다.<br/>
*
* @default {@link align}이 'left'나 'right'일 때는 4, 아니면 0
} */
offsetX?: number;
/**
* 0보다 큰 값이면 원래 표시 위치에서 수직으로 멀어지고, 음수면 가까워진다.<br/>
*
* @default {@link verticalAlign}이 'top'이나 'bottom'일 때는 4, 아니면 0
*/
offsetY?: number;
}
/** @dummy */
interface TrendlineMarkerOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
/**
* maker 모양.<br/>
* 지정하지 않으면 'circle'
*/
shape?: Shape;
/**
* maker 반지름 크기.<br/>
*
* @default 4
*/
radius?: number;
}
/**
* 추세선(trendline) 유형.<br/>
*
* @enum
*/
declare const _TrendLineType: {
/**
* 선형.
*
*
*/
readonly LINEAR: "linear";
/**
* 로그.
*
*
*/
readonly LOGARITHMIC: "logarithmic";
/**
* 다항.
*
*
*/
readonly POLYNOMIAL: "polynomial";
/**
* 멱급수.
*
*
*/
readonly POWER: "power";
/**
* 지수.
*
*
*/
readonly EXPONENTIAL: "exponential";
/**
* 이동 평균.
*
*
*/
readonly MOVING_AVERAGE: "movingAverage";
};
/** @dummy */
type TrendLineType = typeof _TrendLineType[keyof typeof _TrendLineType];
/**
* 시리즈 추세선 옵션.<br/>
* {@link https://realchart.co.kr/config/config/base/series series}의 'trendLine' 항목으로 설정한다.<br/>
* polar 차트에서는 {@link variableArea}, {@link fixedArea} 속성들은 지원되지 않는다.
*
* @enum
*/
interface TrendlineOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
/**
* 추세선 유형.<br/>
*/
type?: TrendLineType;
/**
* 추세선 정밀도.<br/>
* 데이터포인트 사이에 계산될 지점의 개수.
*
* @default 5
*/
resolution?: number;
/**
* 이동 평균 유형의 계산 간격.<br/>
*/
movingInterval?: number;
/**
* @deprecated 적용되지 않는다.
* 아주 부드러운 곡선이 필요하면 {@link resolution} 속성값을 기본값 보다 높게 지정한다.
*/
curved?: boolean;
/**
* 추세선을 앞으로(데이터의 X축 증가 방향) 얼마만큼 연장(예측)할지 지정한다.<br/>
* 숫자는 X축 단위(예: 시간 단위 또는 X 값 자체)로 해석된다.
* 0보다 큰 값으로 지정해야 한다.
*/
forward?: number;
/**
* 추세선을 뒤로(데이터의 X축 감소 방향) 얼마만큼 연장할지 지정한다.<br/>
* 숫자는 X축 단위로 해석된다.
* 0보다 큰 값으로 지정해야 한다.
*/
backward?: number;
/**
* 변동 부하(Variable Load) 영역 설정.<br/>
* 예측 오차 범위 또는 변동성을 나타낸다.
*/
variableArea?: TrendlineAreaOptions;
/**
* 고정 부하(Fixed Load) 영역 설정.<br/>
* 고정적으로 발생하는 부하를 의미한다.
* Y-Intercept(절편).
*/
fixedArea?: TrendlineAreaOptions;
/**
* 추세선 라벨 설정.<br/>
* 추세선으로 계산된 수식 등을 표시하는 용도로 사용할 수 있다.
*/
label?: TrendlineLabelOptions;
/**
* 추세선 양 끝에 표시되는 마커 설정.<br/>
*/
marker?: TrendlineMarkerOptions;
/**
* 이동 평균(movingAverage) 추세선 유형일 때, 외삽법(extrapolation) 방식.<br/>
* 'none'은 외삽을 사용하지 않으며, 'linear'는 선형 외삽, 'flat'은 평탄한 외삽을 의미한다.
*
* @default 'none'
*/
maExtrapolation?: 'none' | 'linear' | 'flat';
/**
* 추세선 수식에 사용되는 숫자 형식.<br/>
*
* @default '0.####'
*/
numberFormat?: string;
/**
* true로 지정하면 시리즈가 애니메이션 중일 때는 표시하지 않는다.<br/>
*/
autoHide?: boolean;
}
/**
* 시리즈는 {@link data}로 지정된 값들을 데이터포인트로 표시하는 차트의 핵심 구성 요소이다.<br/>
* 차트 설정의 다른 부분이나 API에 참조하기 위해서는 {@link name}을 반드시 지정해야 햔다.
* 차트 생성 시 {@link https://realchart.co.kr/config/config/series/#type type} 을 지정하지 않으면 {@link https://realchart.co.kr/config/config/series/bar bar} 시리즈로 생성된다.<br/>
*
*/
interface SeriesOptions extends ChartItemOptions {
/**
*/
type?: string;
/**
* 시리즈 이름.<br/>
* 시리즈 생성시 지정된 후 변경할 수 없다.
* 차트의 다른 구성 요소에서 이 시리즈를 참조할 때 사용되며,
* 레전드나 툴팁에서 시리즈를 나타내는 텍스트로도 사용된다.
*/
name?: string;
/**
* 이 시리즈를 나타내는 텍스트.<br/>
* 레전드나 툴팁에서 시리즈를 대표한다.
* 이 속성이 지정되지 않으면 {@link name}이 사용된다.
*/
label?: string;
/**
* 데이터포인트 label 옵션.<br/>
* 단순히 boolean 값으로 설정하면 {@link visible} 속성에 적용된다.
*/
pointLabel?: DataPointLabelOptions | boolean;
/**
* 포인터가 차지하는 너비가 이 값 미만이면 표시하지 않는다.
* // TODO: 구현할 것!
*/
visibleThreshold?: number;
/**
* 시리즈 표시 순서를 지정할 수 있다.<br/>
* 값이 클 수록 나중에(위에) 표시된다.
*/
zOrder?: number;
/**
* 그룹에 포함되면 그룹 설정을 따른다.
*/
xAxis?: string | number;
/**
* 그룹에 포함되면 그룹 설정을 따른다.
*/
yAxis?: string | number;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 x 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 x 값을 리턴하는 함수.<br/>
* 지정하지 않으면(undefined), 데이터포인트의 값이 array일 때는 0, 객체이면 'x' 속성 값이 사용된다..
*/
xField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 y 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 y 값을 리턴하는 함수.<br/>
* 지정하지 않으면(undefined), 데이터포인트의 값이 array일 때는 1, 객체이면 'y' 속성 값이 사용된다.
*/
yField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 z 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 z 값을 리턴하는 함수.<br/>
* 지정하지 않으면(undefined), 데이터포인트의 값이 array일 때는 2, 객체이면 'z' 속성 값이 사용된다.
*/
zField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 color 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 color 값을 리턴하는 함수.<br/>
* 지정하지 않으면(undefined), 데이터포인트의 값이 객체일 때 'color' 속성 값이 사용된다.
*/
colorField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 icon 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 icon 값을 리턴하는 함수.<br/>
* 지정하지 않으면(undefined), 데이터포인트의 값이 객체일 때 'icon' 속성 값이 사용된다.
*/
iconField?: string | number | Function;
/**
* 데이터포인터들을 생성하는 데 사용되는 값 목록.
* 단일 값을 지정할 경우 배열로 처리됩니다. 단, string 타입은 향후 버전에서 사용할 예정이며, 현재는 data를 지정하지 않은 경우와 동일하게 동작한다.
*/
data?: any;
/**
* 연결된 x축이 연속 축(카테고리축이 아닌)일 때, x축 값이 설정되지 않은 첫번째 데이터 point에 설정되는 x값.<br/>
* 이 후에는 {@link xStep}씩 증가시키면서 설정한다.
* 이 속성이 지정되지 않은 경우 {@link ChartOptions.xStart xStart}가 적용되는데
* {@link LogAxis log}축이면 1, 아니면 0이다.
*/
xStart?: any;
/**
* 연결된 x축이 연속 축(카테고리축이 아닌)일 때, x축 값이 설정되지 않은 데이터 point에 지정되는 x값의 간격.<br/>
* 첫번째 값은 {@link xStart}로 설정한다.
* time 축일 때, 정수 값 대신 시간 단위('y', 'm', 'w', 'd', 'h', 'n', 's')로 지정할 수 있다.
* 이 속성이 지정되지 않으면 {@link ChartOptions.xStep xStep}이 적용된다.
*/
xStep?: number | string;
/**
* 모든 데이터포인트에 적용되는 {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.<br/>
* {@link Series.style style}로 설정되는 시리즈의 inline 스타일이
* 데이터포인터에 적용되지 않는 경우 이 속성을 사용할 수 있다.
* {@link pointColors}나 {@link color}가 설정되면 이 속성으로 설정된 색상은 무시된다.
* 또, {@link pointStyleCallback}으로 설정된 스타일이 이 속성 스타일보다 우선한다.
*/
pointStyle?: SVGStyleOrClass;
/**
* 데이터 포인트 기본 색.<br/>
* 숫자로 지정하면 정수로 변환된 값에 해당하는 팔레트 색상으로 설정된다.
* 'var(--color-n)'으로 지정한 것과 동일하며, 1 ~ 12 사이의 값으로 지정한다.<br/>
* {@link pointColors}나 {@link pointStyleCallback}으로 설정된 색상이 이 속성으로 설정한 색상보다 우선한다.
*/
color?: string | number;
/**
* 데이터 포인트별 색들을 지정한다.<br/>
* 색 배열로 지정하거나, 'colors' asset으로 등록된 이름을 지정할 수 있다.<br/>
* 또, 'palette-name@palette'나 'palette-name@pal' 형식으로 설정해서 라이브러리가 기본 css로 제공하는 palette 색상 배열을 사용할 수 있다.<br/>
* {@link 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;
/**
* @ignore
* 이 시리즈나 데이터포인트들을 표시할 legend를 지정한다.<br/>
* 존재하지 않은 legend를 지정하면 기본 legend에 표시한다.
*/
legend?: string;
/**
* 이 시리즈나 데이터포인트들이 legend에 표시될 때,
* 이 속성에 해당하는 값이 동일하면 중복 표시되지 않는다.<br/>
* 또, 해당 legend 항목에 대해 이 키로 연결된 모든 시리즈나 데이터포인트들이 반응한다.
*/
legendKey?: string;
/**
* 명시적 false로 지정하면 legend에 표시하지 않는다.
*/
visibleInLegend?: boolean;
/**
* true로 지정하면 시리즈 내비게이터에 표시한다.
* 해당 속성은 bar, line 시리즈 에서만 적용된다.
*/
visibleInNavigator?: boolean;
/**
* 데이터포인트 툴팁 텍스트.
*/
tooltipText?: string;
/**
*/
tooltipCallback?: (args: DataPointCallbackArgs) => string;
/**
* 차트 설정 로드 시 실행되는 animation 종류.
*/
loadAnimation?: 'default' | 'reveal' | 'grow' | 'spread' | 'fadein';
/**
* 데이터포인트 위에 마우스 포인터가 올라갈(hovering) 때 표시되는 효과.<br/>
*/
hoverEffect?: 'none' | 'default';
/**
* 데이터포인트 위에 마우스가 있을 때 적용되는
* {@link it.SVGStyles 스타일셋} 또는 css {@link 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;
/**
* 연결된 축의 padding을 확장시키는 비율.<br/>
* 설정한 비율 만큼 축의 padding 크기가 확대되어 배치 계산이 이루어진다.
*
* @default 1
*/
paddingRate?: number;
/**
* 데이터포인트들이 새로 로드된 후 호출된다.<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이 {@link SeriesGroupLayout.DEFAULT DEFAULT}이거나 특별히 설정되지 않아서,
* 그룹에 포함된 시리즈들의 data point가 옆으로 나열되어 표시될 때,
* 포인트 표시 영역 내에서 이 시리즈의 포인트가 차지하는 영역의 상대 크기.<br/>
* 예를 들어 이 시리즈의 속성값이 1이고 다른 시리즈의 값이 2이면 다른 시리즈의 data point가 두 배 두껍게 표시된다.
*
* @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;
/**
* 최소 데이터포인트 너비.<br/>
* polar일 때는 무시된다.
*
* @default 1 픽셀
*/
minPointWidth?: number;
/**
* 구분 배치가 가능한 둘 이상의 시리즈나 시리즈 그룹이 표시 중일 때 구분 배치할지 여부.<br/>
* 명시적 false로 지정하지 않는 한 무리 배치한다.
* 즉, 복수 개의 시리즈나 시리즈 그룹의 데이터 포인트들이 겹치지 않고 차례대로 표시된다.
*/
clusterable?: boolean;
}
/** */
interface BasedSeriesLabelOptions extends DataPointLabelOptions {
/**
* 데이터포인트 본체와 label을 연결하는 선.<br/>
*/
line?: DataPointLabelLineOptions;
}
/**
* {@link https://realchart.co.kr/config/config/seri