/**
* 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;
/**
* @private
*
* template param으로부터 생성되는 값은 문자열일 수 있다.
*/
toBool(v: any): boolean;
toNum(v: any, def?: number): number;
}
/**
* @private
*/
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'.
*
*
*/
field?: string;
}
/**
* @private
* 차트 데이터 모델.
*/
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;
}
/** @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 스타일 속성.
* {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute SVG 속성}을 참조한다.
*/
interface SVGStyles {
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill fill} 스타일 속성.
*/
fill?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity fill-opacity} 스타일 속성.
*/
fillOpacity?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke stroke} 스타일 속성.
*/
stroke?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width stroke-width} 스타일 속성.
*/
strokeWidth?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray} 스타일 속성.
*/
strokeDasharray?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family font-family} 스타일 속성.
*/
fontFamily?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size font-size} 스타일 속성.
*/
fontSize?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight font-weight} 스타일 속성.
*/
fontWeight?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style font-style} 스타일 속성.
*/
fontStyle?: string;
/**
* SVG에 적용되는 css {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx rx} 스타일 속성.
* {@link https://realchart.co.kr/config/config/seires/bar bar} 시리즈의 데이터포인트 bar의 모서리를 지정하는 데 사용된다.
*/
rx?: string;
/**
* **SVG에 적용되는 정식 css style 속성이 아니다.**
* 데이터포인트 라벨등 몇 요소의 배경 간격 설정으로 사용할 수 있다.
*/
padding?: string;
/**
* 텍스트 정렬을 지정한다.
* **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";
/**
* 텍스트 배경 상자를 표시한다.
* 배경 상자에 {@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} 등에 설정할 수 있는 값 범위 정보.
* 시작, 끝 값과 영역에 표시할 색상 및 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}에 설정할 수 있는 값 범위 목록.
*/
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.
* 시리즈나 축에서 이 에셋 항목을 참조할 때 사용하는 키로서
* 차트 내에서 유일한 문자열로 반드시 지정해야 한다.
*
*/
id: string;
}
/**
*/
interface GradientOptions extends AssetItemOptions {
/**
* 색을 배열로 지정하거나,
* 끝 값을 'white'로 전제하고 시작 색 값 하나만 지정할 수 있다.
*
*/
color: string[] | string;
/**
* 0에서 1사이의 불투명도.
* 지정하지 않거나 타당한 값이 아니면 1(완전 불투명)로 적용한다.
* 또는, 불투명도를 배열로 지정할 수도 있다.
*
*/
opacity?: number[] | number;
}
/**
* 시작점과 끝점 사이에 색상이 서서히 변경되는 효과를 표시한다.
* 채우기 색이나 선 색으로 사용될 수 있다.
*
*/
interface LinearGradientOptions extends GradientOptions {
/** @dummy */
type?: typeof _AssetType.LINEARGREADIENT;
/**
*
* @default 'down'
*/
dir?: 'down' | 'up' | 'right' | 'left';
}
/**
* 원 중심에서 바깥으로 색상이 변해가는 효과를 표시한다.
* 채우기 색이나 선 색으로 사용될 수 있다.
*
*/
interface RadialGradientOptions extends GradientOptions {
/** @dummy */
type?: typeof _AssetType.RADIALGRADIENT;
/**
* gradient가 끝나는 원의 x 좌표.
*/
cx?: number | string;
/**
* gradient가 끝나는 원의 y 좌표.
*/
cy?: number | string;
/**
* gradient가 끝나는 원의 반지름.
*/
r?: number | string;
}
/**
* 도형 패턴을 지정해서 채우기(fill) 색상 대신 사용할 수 있다.
*/
interface PatternOptions extends AssetItemOptions {
/** @dummy */
type?: typeof _AssetType.PATTERNS;
/**
* 문자열로 지정하면 path 'd', 숫자로 지정하면 stock pattern index.
*/
pattern: string | number;
/**
* 지정하지 않으면 {@link height}나 20 pixels.
*/
width?: number;
/**
* 지정하지 않으면 {@link width}나 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} 등에 적용할 수 있다.
* 목록에서 색상을 꺼내오는 방식은 {@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 {
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;
}
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 _prev;
private _timer;
private _rate;
private _ani;
private _handler;
start(endHandler?: RcAnimationEndHandler): RcAnimation;
cancel(): void;
rate(): number;
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, oldRate: 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(clip: T): T;
clearDefs(): void;
private $_clearDefs;
clearAssetDefs(): void;
clearClipDefs(): void;
clearTemporaryDefs(): void;
appendDom(elt: T): T;
appendSvg(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;
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(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;
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(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(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];
/** tooltip listMarkerShape: {@link Shape} 또는 마커 없음 */
type TooltipMarkerShape = Shape | 'none';
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 arrowParts(x1: number, y1: number, x2: number, y2: number, headLen?: number): {
body: PathValue[];
head: 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 라벨} 표시 위치.
* {@link https://realchart.co.kr/config/config/base/series/pointLabel#position position} 속성 값으로 사용된다.
*
* @enum
*/
declare const _PointLabelPosition: {
/**
* 시리즈 종류에 따라 데이터포인트 라벨들의 표시 위치가 자동 결정된다.
*/
readonly AUTO: "auto";
/**
* 시리즈 종류에 따라 데이터포인트 라벨들의 표시 위치가 자동 결정된다.
*/
readonly DEFAULT: "default";
/**
* 포인트뷰 상단에 표시.
*/
readonly HEAD: "head";
/**
* 포인트뷰 하단에 표시.
*/
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}에서 데이터포인트 라벨을
* 포인트뷰 내부에 표시.
*/
readonly INSIDE: "inside";
/**
* {@link https://realchart.co.kr/config/config/series/pie pie}나 {@link https://realchart.co.kr/config/config/series/funnel funnel}에서 데이터포인트 라벨을
* 포인트뷰 외부에 표시.
*/
readonly OUTSIDE: "outside";
};
/** @dummy */
type PointLabelPosition = typeof _PointLabelPosition[keyof typeof _PointLabelPosition];
/**
* 시리즈 데이터포인트들의 label 옵션.
* {@link https://realchart.co.kr/config/config/base/series series}의 'pointLabel' 항목으로 설정한다.
*
* ```js
* const config = {
* series: {
* pointLabel: {
* visible: true,
* position: 'outside',
* suffix: '%',
* style: {
* fontWeight: 'bold',
* },
* }
* }
* };
* ```
*
* @css 'rct-point-label'
*/
interface DataPointLabelOptions extends IconedTextOptions {
/**
* @append
*
* 이 속성값이 true이거나 {@link visibleCallback}이 설정되면 표시된다.
*
* @default undefined
*/
visible?: boolean;
/**
* 포인트 label 표시 위치.
* 'default'이면 시리즈 종류에 따라 위치가 결정된다.
*
* @default 'default'
*/
position?: PointLabelPosition;
/**
* label과 point view 혹은 connector 사이의 기본 간격.
* 숫자 대신 콜백을 설정해서 데이터포인트별 값을 지정할 수 있다.
* 콜백에서 타당한 값을 리턴하지 않으면 기본값이 사용된다.
*
* @default 4 pixel
*/
offset?: number | ((args: DataPointCallbackArgs) => number);
/**
* 계산되는 기본 text 대신, data point label로 표시될 field.
* {@link textCallback}이 설정되고 콜백에서 null이나 undefined를 리턴하지 않으면 이 속성은 무시된다.
*/
textField?: string;
/**
* polar이거나 원형 시리즈일 때 true로 지정할 경우 각도에 따라 자동으로 회전 시킨다.
*/
autoRotation?: boolean;
/**
* body 영역을 넘어갈 경우 대처 방식.
*
* @default 0
*/
overflowFit?: 'none' | 'hidden' | number;
/**
* body 영역을 넘어가게(overflow) 돼서 데이터포인트 본체와 겹치게 됐을 때, 'outline' 효과를 표시할 지 여부.
* 동시에 대조 색상으로 표시할 지 여부는 {@link overlapContrast} 속성으로 지정한다.
*
* @default true
*/
overlapOutline?: boolean;
/**
* body 영역을 넘어가게(overflow) 돼서 데이터포인트 본체와 겹치게 됐을 때, 대비 색상으로 표시할 지 여부.
* 동시에 outline 효과를 표시할 지 여부는 {@link overlapOutline} 속성으로 지정한다.
*
* @default false
*/
overlapContrast?: boolean;
/**
* 수평 상태의 데이터포인트 라벨일 때 텍스트 수직 위치 보정 값.
* 텍스트 높이에 대한 상대 비율로 설정한 만큼 내려서 표시한다.
* (∵ 숫자로 구성된 텍스트가 위로 치우쳐 표시되는 경향이 있다)
*
* @default 0.05
*/
verticalAdjust?: number;
/**
* 계산되는 기본 text 대신, data point label로 표시될 text 리턴.
* undefined나 null을 리턴하면 {@link textField} 등을 사용한 기존에 표시될 텍스트를 사용한다.
* 빈 문자열 등 정상적인 문자열을 리턴하면 그 문자열대로 표시된다.
* {@link prefix}나 {@link suffix}, 포맷 속성 등은 적용되지 않는다.
*/
textCallback?: (args: DataPointCallbackArgs) => string;
/**
* 데이터 포인트별 label 표시 여부를 리턴하는 콜백.
*
*/
visibleCallback?: (args: DataPointCallbackArgs) => boolean;
/**
* 데이터 포인트별로 추가 적용되는 스타일을 리턴한다.
*/
styleCallback?: (args: DataPointCallbackArgs) => SVGStyleOrClass;
/**
* 데이터 포인트 label의 회전 각도.
* -90 ~ 90 사이의 값으로 지정한다.
* -90 미만의 값을 지정하면 -90, 90을 초과하는 값을 지정하면 90으로 설정된다.
* inverted일 때, rotation 옵션은 무시된다.
*
* @default 0
*/
rotation?: number;
}
/**
* 시리즈 그룹의 stack label 표시 위치.
* {@link https://realchart.co.kr/config/config/base/seriesGroup/stackLabel#position position} 속성 값으로 사용된다.
*
* @enum
*/
/**
* 시리즈 그룹의 stack labels 콜백 매개변수.
*/
interface StackLabelCallbackArgs {
/**
* RealChart의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: object;
/**
* 스택의 x 값.
*/
x: any;
/**
* 스택의 양수 합계 값.
*/
positiveTotal: number;
/**
* 스택의 음수 합계 값.
*/
negativeTotal: number;
/**
* 스택의 전체 합계 값.
*/
total: number;
}
/**
* 시리즈그룹의 stack labels 옵션.
* {@link layout}이 {@link layout 'stack'}일 때 그룹 내 시리즈들의 합계 값을 label로 표시한다.
* {@link https://realchart.co.kr/config/config/base/seriesGroup seriesGroup}의 'stackLabel' 항목으로 설정한다.
*
* ```js
* const config = {
* series: [{
* type: 'bargroup',
* layout: 'stack',
* stackLabel: {
* visible: true,
* suffix: '원',
* style: {
* fontWeight: 'bold',
* },
* },
* children: [...]
* }]
* };
* ```
*
* @css 'rct-stack-label'
*/
interface StackLabelOptions extends IconedTextOptions {
/**
* stack labels 표시 여부.
*
* @default false
*/
visible?: boolean;
/**
* `align`으로 결정된 위치에서 추가로 이동하는 오프셋.
* 양수: 데이터포인트 중심으로부터 더 멀어지는 방향으로 이동한다.
* 음수: 데이터포인트 중심 방향으로 이동한다.
* - `'left'`: 양수이면 더 왼쪽(inverted: 위쪽)으로 이동
* - `'center'`/`'right'`: 양수이면 더 오른쪽(inverted: 아래쪽)으로 이동
*
* @default 0
*/
offset?: number;
/**
* label과 배치 기준점 사이의 간격(수직 방향).
* 같은 x값에 표시 중인 pointLabel이 있으면 해당 pointLabel의 바깥쪽 끝을 기준으로 간격을 적용하고,
* pointLabel이 없으면 스택 상단(또는 하단) 위치를 기준으로 간격을 적용한다.
*
* @default 4 pixel
*/
gap?: number;
/**
* 수평 정렬 상태.
*
*
* @default 'center'
*/
align?: Align;
/**
* 스택별로 label 텍스트를 리턴하는 콜백.
*/
textCallback?: (args: StackLabelCallbackArgs) => string;
/**
* 스택별로 label 표시 여부를 리턴하는 콜백.
*/
visibleCallback?: (args: StackLabelCallbackArgs) => boolean;
/**
* 스택별로 추가 적용되는 스타일을 리턴한다.
*/
styleCallback?: (args: StackLabelCallbackArgs) => SVGStyleOrClass;
/**
* 수평 상태의 stack label일 때 텍스트 수직 위치 보정 값.
* 텍스트 높이에 대한 상대 비율로 설정한 만큼 내려서 표시한다.
*
* @default 0.05
*/
verticalAdjust?: number;
/**
* stack label의 회전 각도.
* -90 ~ 90 사이의 값으로 지정한다.
* -90 미만의 값을 지정하면 -90, 90을 초과하는 값을 지정하면 90으로 설정된다.
* inverted일 때, rotation 옵션은 무시된다.
*
* @default 0
*/
rotation?: number;
/**
* body 영역을 넘어갈 경우 대처 방식.
*
* @default 0
*/
overflowFit?: 'none' | 'hidden' | number;
}
/**
* 데이터포인트 label의 연결선 옵션.
*/
interface DataPointLabelLineOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
}
/**
* 추세선 아래쪽에 표시되는 영역 설정 모델.
*/
interface TrendlineAreaOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
}
/**
* 추세선 라벨 옵션.
*
* @css 'rct-series-trendline-label'
*/
interface TrendlineLabelOptions extends Omit {
/**
* @default false
*/
visible?: boolean;
/**
* 라벨 텍스트.
*
* @default '${expr}'
*/
text?: string;
/**
* 라벨 위치.
* 추세선 시작점과 끝점 사이의 상대 위치를 0~1 사이의 숫자로 지정한다.
*
* @default 1
*/
position?: number;
/**
* 수평 정렬 방식.
*
* @default 'auto'
*/
align?: 'auto' | Align;
/**
* 수직 정렬 방식.
*
* @default 'auto'
*/
verticalAlign?: 'auto' | VerticalAlign;
/**
* 0보다 큰 값이면 원래 표시 위치에서 수평으로 멀어지고, 음수면 가까워진다.
*
* @default {@link align}이 'left'나 'right'일 때는 4, 아니면 0
} */
offsetX?: number;
/**
* 0보다 큰 값이면 원래 표시 위치에서 수직으로 멀어지고, 음수면 가까워진다.
*
* @default {@link verticalAlign}이 'top'이나 'bottom'일 때는 4, 아니면 0
*/
offsetY?: number;
}
/** @dummy */
interface TrendlineMarkerOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
/**
* marker 모양.
* 지정하지 않으면 'circle'
*/
shape?: Shape;
/**
* marker 반지름 크기.
*
* @default 4
*/
radius?: number;
}
/**
* 추세선(trendline) 유형.
*
* @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];
/**
* 시리즈 추세선 옵션.
* {@link https://realchart.co.kr/config/config/base/series series}의 'trendLine' 항목으로 설정한다.
* polar 차트에서는 {@link variableArea}, {@link fixedArea} 속성들은 지원되지 않는다.
*
* @css 'rct-series-trendline'
* @enum
*/
interface TrendlineOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
/**
* 추세선 유형.
*/
type?: TrendLineType;
/**
* 추세선 정밀도.
* 데이터포인트 사이에 계산될 지점의 개수.
*
* @default 5
*/
resolution?: number;
/**
* 이동 평균 유형의 계산 간격.
*/
movingInterval?: number;
/**
* @deprecated 적용되지 않는다.
* 아주 부드러운 곡선이 필요하면 {@link resolution} 속성값을 기본값 보다 높게 지정한다.
*/
curved?: boolean;
/**
* 추세선을 앞으로(데이터의 X축 증가 방향) 얼마만큼 연장(예측)할지 지정한다.
* 숫자는 X축 단위(예: 시간 단위 또는 X 값 자체)로 해석된다.
* 0보다 큰 값으로 지정해야 한다.
*/
forward?: number;
/**
* 추세선을 뒤로(데이터의 X축 감소 방향) 얼마만큼 연장할지 지정한다.
* 숫자는 X축 단위로 해석된다.
* 0보다 큰 값으로 지정해야 한다.
*/
backward?: number;
/**
* 변동 부하(Variable Load) 영역 설정.
* 예측 오차 범위 또는 변동성을 나타낸다.
*/
variableArea?: TrendlineAreaOptions;
/**
* 고정 부하(Fixed Load) 영역 설정.
* 고정적으로 발생하는 부하를 의미한다.
* Y-Intercept(절편).
*/
fixedArea?: TrendlineAreaOptions;
/**
* 추세선 라벨 설정.
* 추세선으로 계산된 수식 등을 표시하는 용도로 사용할 수 있다.
*/
label?: TrendlineLabelOptions;
/**
* 추세선 양 끝에 표시되는 마커 설정.
*/
marker?: TrendlineMarkerOptions;
/**
* 이동 평균(movingAverage) 추세선 유형일 때, 외삽법(extrapolation) 방식.
* 'none'은 외삽을 사용하지 않으며, 'linear'는 선형 외삽, 'flat'은 평탄한 외삽을 의미한다.
*
* @default 'none'
*/
maExtrapolation?: 'none' | 'linear' | 'flat';
/**
* 추세선 수식에 사용되는 숫자 형식.
*
* @default '0.####'
*/
numberFormat?: string;
/**
* true로 지정하면 시리즈가 애니메이션 중일 때는 표시하지 않는다.
*/
autoHide?: boolean;
}
/**
* 시리즈는 {@link data}로 지정된 값들을 데이터포인트로 표시하는 차트의 핵심 구성 요소이다.
* 차트 설정의 다른 부분이나 API에 참조하기 위해서는 {@link name}을 반드시 지정해야 한다.
* 차트 생성 시 {@link https://realchart.co.kr/config/config/base/series#type type} 을 지정하지 않으면 {@link https://realchart.co.kr/config/config/series/bar bar} 시리즈로 생성된다.
*
*/
interface SeriesOptions extends ChartItemOptions {
/**
* 시리즈 type. {@link https://realchart.co.kr/docs/api/options/SeriesOptions SeriesOptions}를 상속하는 구체 시리즈 옵션에서 지정한다.
*/
type?: string;
/**
* 시리즈 이름.
* 시리즈 생성시 지정된 후 변경할 수 없다.
* 차트의 다른 구성 요소에서 이 시리즈를 참조할 때 사용되며,
* 레전드나 툴팁에서 시리즈를 나타내는 텍스트로도 사용된다.
*/
name?: string;
/**
* 이 시리즈를 나타내는 텍스트.
* 레전드나 툴팁에서 시리즈를 대표한다.
* 이 속성이 지정되지 않으면 {@link name}이 사용된다.
*/
label?: string;
/**
* 데이터포인트 label 옵션.
* 단순히 boolean 값으로 설정하면 {@link visible} 속성에 적용된다.
*/
pointLabel?: DataPointLabelOptions | boolean;
/**
* @ignore
* 포인터가 차지하는 너비가 이 값 미만이면 표시하지 않는다.
* // TODO: 구현할 것!
*/
visibleThreshold?: number;
/**
* 시리즈 표시 순서를 지정할 수 있다.
* 값이 클 수록 나중에(위에) 표시된다.
*/
zOrder?: number;
/**
* 그룹에 포함되면 그룹 설정을 따른다.
*/
xAxis?: string | number;
/**
* 그룹에 포함되면 그룹 설정을 따른다.
*/
yAxis?: string | number;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 x 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 x 값을 리턴하는 함수.
* 지정하지 않으면(undefined), 데이터포인트의 값이 array일 때는 0, 객체이면 'x' 속성 값이 사용된다.
*/
xField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 y 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 y 값을 리턴하는 함수.
* 지정하지 않으면(undefined), 데이터포인트의 값이 array일 때는 1, 객체이면 'y' 속성 값이 사용된다.
*/
yField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 z 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 z 값을 리턴하는 함수.
* 지정하지 않으면(undefined), 데이터포인트의 값이 array일 때는 2, 객체이면 'z' 속성 값이 사용된다.
*/
zField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 color 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 color 값을 리턴하는 함수.
* 지정하지 않으면(undefined), 데이터포인트의 값이 객체일 때 'color' 속성 값이 사용된다.
*/
colorField?: string | number | Function;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 icon 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 icon 값을 리턴하는 함수.
* 지정하지 않으면(undefined), 데이터포인트의 값이 객체일 때 'icon' 속성 값이 사용된다.
*/
iconField?: string | number | Function;
/**
* 데이터포인트들을 생성하는 데 사용되는 값 목록.
* 단일 값을 지정할 경우 배열로 처리됩니다. 단, string 타입은 향후 버전에서 사용할 예정이며, 현재는 data를 지정하지 않은 경우와 동일하게 동작한다.
*/
data?: any;
/**
* 연결된 x축이 연속 축(카테고리축이 아닌)일 때, x축 값이 설정되지 않은 첫번째 데이터 point에 설정되는 x값.
* 이 후에는 {@link xStep}씩 증가시키면서 설정한다.
* 이 속성이 지정되지 않은 경우 {@link https://realchart.co.kr/config/config/chart#xstart xStart}가 적용되는데
* {@link LogAxis log}축이면 1, 아니면 0이다.
*/
xStart?: number | string;
/**
* 연결된 x축이 연속 축(카테고리축이 아닌)일 때, x축 값이 설정되지 않은 데이터 point에 지정되는 x값의 간격.
* 첫번째 값은 {@link xStart}로 설정한다.
* time 축일 때, 정수 값 대신 시간 단위('y', 'm', 'w', 'd', 'h', 'n', 's')로 지정할 수 있다.
* 이 속성이 지정되지 않으면 {@link https://realchart.co.kr/config/config/chart#xstep xStep}이 적용된다.
*/
xStep?: number | string;
/**
* 모든 데이터포인트에 적용되는 {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
* {@link Series.style style}로 설정되는 시리즈의 inline 스타일이
* 데이터포인트에 적용되지 않는 경우 이 속성을 사용할 수 있다.
* {@link pointColors}나 {@link color}가 설정되면 이 속성으로 설정된 색상은 무시된다.
* 또, {@link pointStyleCallback}으로 설정된 스타일이 이 속성 스타일보다 우선한다.
*/
pointStyle?: SVGStyleOrClass;
/**
* 데이터 포인트 기본 색.
* 숫자로 지정하면 정수로 변환된 값에 해당하는 팔레트 색상으로 설정된다.
* 'var(--color-n)'으로 지정한 것과 동일하며, 1 ~ 12 사이의 값으로 지정한다.
* {@link pointColors}나 {@link pointStyleCallback}으로 설정된 색상이 이 속성으로 설정한 색상보다 우선한다.
*/
color?: string | number;
/**
* 데이터 포인트별 색들을 지정한다.
* 색 배열로 지정하거나, 'colors' asset으로 등록된 이름을 지정할 수 있다.
* 또, 'palette-name@palette'나 'palette-name@pal' 형식으로 설정해서 라이브러리가 기본 css로 제공하는 palette 색상 배열을 사용할 수 있다.
* {@link 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;
/**
* @ignore
* 이 시리즈나 데이터포인트들을 표시할 legend를 지정한다.
* 존재하지 않은 legend를 지정하면 기본 legend에 표시한다.
*/
legend?: string;
/**
* 이 시리즈나 데이터포인트들이 legend에 표시될 때,
* 이 속성에 해당하는 값이 동일하면 중복 표시되지 않는다.
* 또, 해당 legend 항목에 대해 이 키로 연결된 모든 시리즈나 데이터포인트들이 반응한다.
*/
legendKey?: string;
/**
* 명시적 false로 지정하면 legend에 표시하지 않는다.
*/
visibleInLegend?: boolean;
/**
* true로 지정하면 시리즈 내비게이터에 표시한다.
* 해당 속성은 bar, line 시리즈 에서만 적용된다.
*/
visibleInNavigator?: boolean;
/**
* 데이터포인트 툴팁 텍스트.
* {@link tooltipCallback}이 설정되고 콜백에서 undefined를 리턴하지 않으면 이 속성은 무시된다.
* '${detail}'은 {@link tooltipDetail} 속성값으로 대체된다.
*
* @default '${name}
${series}: ${detail}'
*/
tooltipText?: string;
/**
* #1386
* 축이나 시리즈그룹의 툴팁으로 표시될 때,
* 시리즈 키(주로 이름) 다음에 표시되는 상세 정보(주로 값) 템플릿.
* {@link tooltipDetailCallback}이 설정되고 콜백에서 undefined를 리턴하지 않으면 이 속성은 무시된다.
*
* @default '${yValue}'
*/
tooltipDetail?: string;
/**
* 툴팁 텍스트를 리턴하는 콜백 함수.
*/
tooltipCallback?: (args: DataPointCallbackArgs) => string;
/**
* 상세 툴팁 텍스트를 리턴하는 콜백 함수.
*/
tooltipDetailCallback?: (args: DataPointCallbackArgs) => string;
/**
* 차트 설정 로드 시 실행되는 animation 종류.
*/
loadAnimation?: 'default' | 'reveal' | 'grow' | 'spread' | 'fadein';
/**
* 데이터포인트 제거시 실행되는 animation 진행 시간(밀리초).
*
* @default 300
*/
decayDuration?: number;
/**
* 데이터포인트 위에 마우스 포인터가 올라갈(hovering) 때 표시되는 효과.
*/
hoverEffect?: 'none' | 'default';
/**
* 데이터포인트 위에 마우스가 있을 때 적용되는
* {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
hoverStyle?: SVGStyleOrClass;
/**
* 데이터포인트의 동적 스타일 콜백.
*/
pointStyleCallback?: (args: DataPointCallbackArgs) => SVGStyleOrClass;
/**
* 시리즈의 hover, focus, tooltip 상호작용 여부를 지정한다.
*
* @default true
*/
interactive?: boolean;
/**
* 연결된 축의 padding을 확장시키는 비율.
* 설정한 비율 만큼 축의 padding 크기가 확대되어 배치 계산이 이루어진다.
*
* @default 1
*/
paddingRate?: number;
/**
* 데이터포인트들이 새로 로드된 후 호출된다.
*/
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이 {@link SeriesGroupLayout.DEFAULT DEFAULT}이거나 특별히 설정되지 않아서,
* 그룹에 포함된 시리즈들의 data point가 옆으로 나열되어 표시될 때,
* 포인트 표시 영역 내에서 이 시리즈의 포인트가 차지하는 영역의 상대 크기.
* 예를 들어 이 시리즈의 속성값이 1이고 다른 시리즈의 값이 2이면 다른 시리즈의 data point가 두 배 두껍게 표시된다.
*
* @default 1
*/
pointWidth?: number;
/**
* 데이터포인트가 표시되는 위치를 데이터포인트 너비에 대한 상대값으로 비켜 표시한다.
* 기본값 0이면 카테고리의 중앙 또는 연속축의 값 위치에 데이터포인트의 중간이 놓이도록 표시한다.
* -0.5이면 데이터포인트 오른쪽이, 0.5이면 데이터포인트 왼쪽이 기본 위치에 표시된다.
*
* @default 0
*/
pointOffset?: number;
/**
* 이 시리즈의 point가 차지하는 영역 중에서 point bar 양쪽 끝에 채워지는 빈 영역의 크기.
* point가 차지할 원래 크기에 대한 상대 값으로서,
* 0 ~ 0.5 사이의 비율 값으로 지정한다.
*
* @default undefined 한 카테고리에 cluster 가능한 시리즈가 하나만 표시되면 0.25, group에 포함된 경우 0.1, 여러 시리즈와 같이 표시되면 0.2.
*/
pointPadding?: number;
/**
* 최소 데이터포인트 너비.
* polar일 때는 무시된다.
*
* @default 0
*/
minPointWidth?: number;
/**
* 구분 배치가 가능한 둘 이상의 시리즈나 시리즈 그룹이 표시 중일 때 구분 배치할지 여부.
* 명시적 false로 지정하지 않는 한 무리 배치한다.
* 즉, 복수 개의 시리즈나 시리즈 그룹의 데이터 포인트들이 겹치지 않고 차례대로 표시된다.
*/
clusterable?: boolean;
}
/** */
interface BasedSeriesLabelOptions extends DataPointLabelOptions {
/**
* 데이터포인트 라벨의 수평 정렬 방식.
* 일반(inverted: false) 차트: 데이터포인트 x 위치를 기준으로 수평 배치를 결정한다.
* - `'left'`: 데이터포인트 기준 왼쪽 바깥에 배치
* - `'center'`: 데이터포인트 중앙에 배치
* - `'right'`: 데이터포인트 기준 오른쪽 바깥에 배치
* inverted: true 차트에서는 수평/수직 방향이 교환된다.
* - `'left'`: 데이터포인트 기준 위쪽에 배치
* - `'center'`: 중앙에 배치
* - `'right'`: 데이터포인트 기준 아래쪽에 배치
*
* @default 'center'
*/
align?: Align;
/**
* `align`으로 결정된 위치에서 추가로 이동하는 오프셋.
* 양수: 데이터포인트 중심으로부터 더 멀어지는 방향으로 이동한다.
* 음수: 데이터포인트 중심 방향으로 이동한다.
* - `'left'`: 양수이면 더 왼쪽(inverted: 위쪽)으로 이동
* - `'center'`/`'right'`: 양수이면 더 오른쪽(inverted: 아래쪽)으로 이동
*
* @default 0
*/
alignOffset?: number;
/**
* 데이터포인트 본체와 label을 연결하는 선.
*/
line?: DataPointLabelLineOptions;
}
/**
* {@link https://realchart.co.kr/config/config/series/bar bar} 시리즈와 같이 기준값이 있어야 표시 가능한 시리즈.
* 기준값이 존재하면 그 값 보다 작은 데이터포인트들을 반대 방향과 {@link belowStyle 다른 스타일}로 표시할 수 있게 된다.
* 구분하는 위치의 값은 {@link baseValue}로 지정한다.
*/
interface BasedSeriesOptions extends ClusterableSeriesOptions {
/**
* @append
*/
pointLabel?: BasedSeriesLabelOptions | boolean;
/**
* 데이터포인트를 표시하기 위한 y축 기준 위치 값.
* 그룹에 포함된 경우 먼저 그룹의 baseValue를 따른다.
* 또, 이 값을 지정하지 않은 경우 연결된 y축의 {@link https://realchart.co.kr/config/config/yAxis/linear#basevalue baseValue}를 따르고,
* 그 값도 설정되지 않은 경우 0이 적용된다.
* NaN으로 지정하면 기준값 없이 최소값과 축의 padding으로 기준 위치가 정해진다.
*
* @default undefined
*/
baseValue?: number;
/**
* null인 y값을 {@link baseValue}로 간주한다.
*
* @default false
*/
nullAsBase?: boolean;
/**
* {@link baseValue} 또는 y축의 {@link https://realchart.co.kr/config/config/yAxis#basevalue baseValue}로 지정되는
* 기준값 보다 작은 쪽의 point들에 적용되는 스타일.
*/
belowStyle?: SVGStyleOrClass;
/**
* 깊이가 있는 축에서 깊이 방향(z축)의 데이터포인트 두께.
* 이 값과 {@link distance}을 더한 크기가 body의 {@link https://realchart.co.kr/config/config/body#depth 깊이}를 초과할 수 없다.
* 즉, body의 깊이가 없으면 이 속성은 무시된다.
* 이 속성을 설정하지 않으면, group에 포함된 경우 group의 depth를 따르고,
* 그 값도 설정되지 않으면 기본값 10 픽셀로 적용된다.
*/
depth?: number;
/**
* 깊이가 있는 축과 데이터포인트들 사이의 간격.
* 이 값과 {@link depth}를 더한 크기가 body의 {@link https://realchart.co.kr/config/config/body#depth 깊이}를 초과할 수 없다.
* 즉, body의 깊이가 없으면 이 속성은 무시된다.
* group에 포함된 경우 group의 distance와 이 설정값을 더해서 적용된다.
* 이 속성을 설정하지 않으면 group에 포함된 경우 0, 아니면 5 픽셀로 적용된다.
* 또, layout이 overlap인 group에 포함된 경우 순서대로 앞쪽으로 표시된다.
*/
distance?: number;
}
/**
*/
interface BarSeriesBaseOptions extends BasedSeriesOptions {
/**
* true로 지정하면 포인트 bar 별로 색을 다르게 표시한다.
*
* @default false
*/
colorByPoint?: boolean;
}
/**
* @enum
*/
declare const _SeriesGroupLayout: {
/**
* 시리즈 종류에 따른 기본 표시 방식.
*
* bar 종류의 시리즈인 경우 데이터포인트들을 순서대로 옆으로 배치하고,
* line 종류인 경우 `overlap`과 동일하게 순서대로 표시된다.
*
* 기본 값이다.
*
*/
readonly DEFAULT: "default";
/**
* 데이터포인트들을 순서대로 겹쳐서 표시한다.
*
* bar 종류의 시리즈이고,
* 마지막 시리즈의 포인트 값이 큰 경우 이전 데이터포인트들은 보이지 않을 수 있다.
*
*/
readonly OVERLAP: "overlap";
/**
* 데이터포인트 그룹 내에서 각 데이터포인트들을 순서대로 쌓아서 표시한다.
*
*/
readonly STACK: "stack";
/**
* 데이터포인트 그룹 내에서 각 데이터포인트의 비율을 표시한다.
*
* 그룹 합의 상대적 최댓값은 {@link layoutMax}로 지정한다.
* 각 데이터포인트들은 {@link layout stack}과 마찬가지로 순서대로 쌓여서 표시된다.
* {@link baseValue}보다 값이 큰 데이터포인트는 `baseValue` 위쪽에 작은 값을 가진
* 데이터포인트들은 `baseValue` 아래쪽에 표시된다.
*
*/
readonly FILL: "fill";
};
/** @dummy */
type SeriesGroupLayout = typeof _SeriesGroupLayout[keyof typeof _SeriesGroupLayout];
/**
* 같은 종류의 단일 시리즈들을 여러 개 묶어서 표시한다.
*
*/
interface SeriesGroupOptions extends ChartItemOptions {
/**
*/
type?: string;
/**
* 단일 시리즈 옵션 배열.
*/
children?: T[];
/**
* pie 시리즈는 layout을 지원하지 않는다.
*
* @default 'default'
*/
layout?: SeriesGroupLayout;
/**
* {@link layout}이 {@link layout 'fill'}일 때 상대적 최대값.
* layoutMax는 0보다 큰 값으로 지정해야 한다.
* 값이 0이하이거나 지정하지 않으면 100으로 간주된다.
*
* @default 100
*/
layoutMax?: number;
/**
* 이 그룹에 포함된 시리즈들은 자신의 설정 대신 이 설정을 따른다.
*/
xAxis?: string | number;
/**
* 이 그룹에 포함된 시리즈들은 자신의 설정 대신 이 설정을 따른다.
*/
yAxis?: string | number;
/**
* 명시적 false로 지정하면 legend에 표시하지 않는다.
*
* @default true
*/
visibleInLegend?: boolean;
/**
* // #1151
* true로 지정하면 legend에 시리즈들을 반대 순서로 배치한다.
*/
reversedInLegend?: boolean;
/**
* @default 0
*/
zOrder?: number;
/**
* true로 지정하면 body를 벗어난 data point 영역도 표시된다.
* 값을 지정하지 않으면 polar 차트에서는 true, 직교 차트에서는 false이다.
* group에 포함되면 group의 noClip 설정을 따른다.
* 또, 값을 지정하지 않으면 버블시리즈는 최대한 버블들이 표시되도록 한다.
*/
noClip?: boolean;
/**
* 그룹 툴팁의 위쪽에 표시되는 텍스트.
*
* tooltipHeader
* tooltipRow, (시리즈가 둘 이상일 때는 {@link tooltipListRow} 형태로)
* tooltipRow,
* ...
* tooltipFooter
* 형태로 툴팁이 표시된다.
*
* @default '${name}'
*/
tooltipHeader?: string;
/**
* 그룹 툴팁에 각 시리즈별 표시되는 포인트 툴팁 텍스트.
* '${detail}'은 {@link https://realchart.co.kr/config/config/base/series#tooltipdetail tooltipDetail} 속성값으로 대체된다.
*
* @default '${series}: ${detail}'
*/
tooltipRow?: string;
/**
* 축에 포함된 시리즈가 둘 이상일 때,
* 각 시리즈별 표시되는 포인트 툴팁 텍스트 템플릿.
* 이 속성을 빈 값으로 지정하면 {@link tooltipRow} 속성을 이용해서 표시된다.
* '${detail}'은 {@link https://realchart.co.kr/config/config/base/series#tooltipdetail tooltipDetail} 속성값으로 대체된다.
*
* @default `['${series}', '${detail}']`
*/
tooltipListRow?: [string, string];
/**
* 그룹 툴팁의 아래쪽에 표시되는 텍스트.
*/
tooltipFooter?: string;
/**
* {@link layout}이 {@link layout 'stack'}일 때
* 그룹 내 시리즈들의 합계 값을 label로 표시하는 옵션.
* true로 지정하면 기본 설정으로 stack labels를 표시한다.
*/
stackLabel?: StackLabelOptions | boolean;
}
declare const LineSeriesGroupType = "linegroup";
/**
* Line 시리즈그룹.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'linegroup'이다.
*
*/
interface LineSeriesGroupOptions extends SeriesGroupOptions {
/**
*/
type?: typeof LineSeriesGroupType;
/**
* 이 그룹에 포함된 시리즈들의 line 종류.
*
* @default 'default'
*/
lineType?: LineType;
/**
* 이 그룹에 포함된 데이터포인트를 표시하기 위한 y축 기준 위치 값.
* 또, 이 값을 지정하지 않은 경우 포함된 시리즈의 {@link baseValue}가 적용되고, 그 값도 설정되지 않으면
* 연결된 y축의 {@link https://realchart.co.kr/config/config/yAxis/linear#basevalue baseValue}를 따르고,
* 그 값도 설정되지 않은 경우 0이 적용된다.
* NaN으로 지정하면 기준값 없이 최소값과 축의 padding으로 기준 위치가 정해진다.
*
* @default undefined
*/
baseValue?: number;
}
declare const AreaSeriesGroupType = "areagroup";
/**
* Area 시리즈그룹.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'areagroup'이다.
*
*/
interface AreaSeriesGroupOptions extends SeriesGroupOptions {
/**
*/
type?: typeof AreaSeriesGroupType;
/**
* 이 그룹에 포함된 시리즈들의 line 종류.
*
* @default 'default'
*/
lineType?: LineType;
/**
* 이 그룹에 포함된 데이터포인트를 표시하기 위한 y축 기준 위치 값.
* 또, 이 값을 지정하지 않은 경우 포함된 시리즈의 {@link baseValue}가 적용되고, 그 값도 설정되지 않으면
* 연결된 y축의 {@link https://realchart.co.kr/config/config/yAxis/linear#basevalue baseValue}를 따르고,
* 그 값도 설정되지 않은 경우 0이 적용된다.
* NaN으로 지정하면 기준값 없이 최소값과 축의 padding으로 기준 위치가 정해진다.
*
* @default undefined
*/
baseValue?: number;
}
/**
*/
interface ClusterableSeriesGroupOptions extends SeriesGroupOptions {
/**
* 축 단위 너비에서 이 그룹이 차지하는 상대적 너비.
*
* @default 1
*/
groupWidth?: number;
/**
* 이 그룹의 너비에서 포인트들이 표시되기 전후의 상대적 여백 크기.
*
* @default 0.1
*/
groupPadding?: number;
/**
* 구분 배치가 가능한 둘 이상의 시리즈나 시리즈그룹이 표시 중일 때 구분 배치할 지 여부.
* 명시적 false로 지정하지 않는 한 무리 배치한다.
* 즉, 복수 개의 시리즈나 시리즈그룹의 데이터포인트들이 겹치지 않고 차례대로 표시된다.
*/
clusterable?: boolean;
}
/**
*/
interface BarSeriesGroupBaseOptions extends ClusterableSeriesGroupOptions {
/**
* 이 그룹에 포함된 데이터포인트를 표시하기 위한 y축 기준 위치 값.
* 또, 이 값을 지정하지 않은 경우 포함된 시리즈의 {@link baseValue}가 적용되고, 그 값도 설정되지 않으면
* 연결된 y축의 {@link https://realchart.co.kr/config/config/yAxis/linear#basevalue baseValue}를 따르고,
* 그 값도 설정되지 않은 경우 0이 적용된다.
*
* @default undefined
*/
baseValue?: number;
/**
* 깊이가 있는 축에서 깊이 방향(z축)의 데이터포인트 두께.
* 이 값과 {@link distance}을 더한 크기가 body의 {@link https://realchart.co.kr/config/config/body#depth 깊이}를 초과할 수 없다.
* 즉, body의 깊이가 없으면 이 속성은 무시된다.
* 이 속성이 설정되지 않으면 그룹에 속한 개별 시리즈들의 설정을 따른다.
*
* @defaul 10
*/
depth?: number;
/**
* 깊이가 있는 축과 데이터포인트들 사이의 간격.
* 이 값과 {@link depth}를 더한 크기가 body의 {@link https://realchart.co.kr/config/config/body#depth 깊이}를 초과할 수 없다.
* 즉, body의 깊이가 없으면 이 속성은 무시된다.
* 이 속성과 개별 시리즈들의 속성값이 더해져 시리즈들의 distance가 결정된다.
*
* @default 5
*/
distance?: number;
}
/**
* {@link https://realchart.co.kr/config/config/series/dumbbell dumbbell} 시리즈 등 데이터포인트 뷰에 표시되는 마커 옵션.
*/
interface SeriesMarkerOptions extends ChartItemOptions {
/**
* 명시적으로 지정하지 않으면 typeIndex에 따라 Shapes 중 하나로 돌아가면서 설정된다.
*/
shape?: Shape;
/**
* {@link shape}의 반지름.
*/
radius?: number;
/**
* 데이터포인트 마커의 동적 스타일 콜백.
* 이 콜백에서 리턴되는 스타일이 가장 우선적으로 적용된다.
*/
styleCallback?: (args: DataPointCallbackArgs) => SVGStyleOrClass;
}
/**
*/
interface MarkerSeriesOptions extends ConnectableSeriesOptions {
/**
* 명시적으로 지정하지 않으면 typeIndex에 따라 Shapes 중 하나로 돌아가면서 설정된다.
* 'none'으로 지정하면 그리지 않는다.
*/
shape?: Shape;
/**
* 데이터포인트 {@link shape 도형} 회전 각도.
*/
rotation?: number;
/**
* 데이터포인트 별로 다른 색상으로 그린다.
*/
colorByPoint?: boolean;
/**
* marker가 마우스 아래 있는 지 판단할 때 외부로 추가되는 가상의 두께.
* 지정하지 않으면 {@link https://realchart.co.kr/config/config/chart/pointHovering#hintdistance hintDistance} 설정을 따른다.
*/
hintDistance?: number;
}
/**
* 데이터 포인트 marker 설정 정보.
*/
interface LineSeriesMarkerOptions extends SeriesMarkerOptions {
/**
* @append
*
* @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;
/**
* 데이터포인트 위에 마우스가 있을 때 적용되는
* {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
* {@link https://realchart.co.kr/config/config/base/series#hoverstyle hoverStyle} 보다 우선 적용된다.
*
*
*/
hoverStyle?: SVGStyleOrClass;
/**
* marker가 마우스 아래 있는 지 판단할 때 외부로 추가되는 가상의 두께.
* 지정하지 않으면 {@link https://realchart.co.kr/config/config/chart/pointHovering#hintdistance hintDistance} 설정을 따른다.
*/
hintDistance?: number;
}
/**
* 라인 시리즈 계열의 설정 옵션 기반(base).
* //포인트 label들은 PointItemPosition.HEAD, FOOT, INSIDE에 위치할 수 있다.
* //기본값은 AUTO(HEAD)이다.
* //pointLabel.align으로 수평 정렬을 설정할 수있다.
*/
interface LineSeriesBaseOptions extends ConnectableSeriesOptions {
/**
* marker 옵션.
*/
marker?: LineSeriesMarkerOptions;
/**
* null인 y값을 {@link baseValue}로 간주한다.
*
* @default false
*/
nullAsBase?: boolean;
}
/**
* 데이터포인트 라벨들을 정렬하는 방식.
* @enum
*/
declare const _PointLabelAlign: {
/**
* 정렬하지 않는다.
*/
readonly NONE: "none";
/**
* position이 'outside'일 때 시리즈 본체에 가까운 쪽에 정렬하고,
* 'inside'일 때 시리즈 중심(pie 시리즈)이나 왼쪽(funnel 시리즈)에 졍렬한다.
* Pictorial 시리즈에는 적용되지 않는다.
*
*/
readonly NEAR: "near";
/**
* position이 'outside'일 때 차트 전체 영역의 경계 쪽에 정렬하고,
* 'inside'일 때 시리즈 경계(pie 시리즈)나 오른쪽(funnel 시리즈)에 졍렬한다.
* Pictorial 시리즈에는 적용되지 않는다.
*/
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 {
/**
* @append
*
* @default true
*/
visible?: boolean;
/**
* 데이터포인트 라벨들을 정렬하는 방식.
*
* @default 'none'
*/
align?: PointLabelAlign;
/**
* 연결선 옵션 설정 모델.
* 문자열로 지정하면 `style.stroke`를 지정한 것과 동일하다.
*/
connector?: WidgetSeriesConnectorOptions;
/**
* label들이 최대한 영역 밖으로 나가지 않도록 안쪽으로 모은다.
*
* @default true
*/
convergent?: 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;
}
/**
* 최대 표시 개수나 최소 표시 값 설정에 따라 마지막 데이터 포인트들을 하나의 그룹 포인트로 묶어 표시한다.
* 원본 데이터포인트들은 유지된다. 또, 자동 정렬하지 않는다.
*/
interface OthersGroupOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
/**
* @default '기타'
*/
x?: string;
/**
* 표시 최대 데이터포인트 개수.
* {@link minValue}와 동시에 지정할 수 있다.
* 두 속성이 모두 지정되지 않으면 이 속성값이 10인 것으로 적용된다.
*/
maxCount?: number;
/**
* 이 속성으로 지정한 값 이상을 갖는 데이터포인트들만 표시한다.
* '%'로 지정하면 전체 합계에 대한 비율을 기준으로 한다.
* 또, {@link maxCount}와 동시에 지정할 수 있다.
* 두 속성이 모두 지정되지 않으면 {@link maxCount}가 10인 것으로 적용된다.
*/
minValue?: PercentSize;
}
/**
* {@link https://realchart.co.kr/config/config/series/pie pie} 시리즈나 {@link https://realchart.co.kr/config/config/series/funnel funnel} 시리즈 설정 옵션들의 기반(base).
*/
interface WidgetSeriesOptions extends SeriesOptions {
/**
* body 영역을 기준으로 {@link https://realchart.co.kr/config/config/series/pie pie},
* {@link https://realchart.co.kr/config/config/series/funnel funnel}, {@link https://realchart.co.kr/config/config/series/pictorial pictorial},
* 시리즈 등의 수평 중심 위치
* 숫자나 body 영역 너비에 대한 상대값을 '%'로 지정할 수 있다.
*
* @default '50%'
*/
centerX?: PercentSize;
/**
* body 영역을 기준으로 {@link https://realchart.co.kr/config/config/series/pie pie},
* {@link https://realchart.co.kr/config/config/series/funnel funnel}, {@link https://realchart.co.kr/config/config/series/pictorial pictorial},
* 시리즈 등의 수직 중심 위치
* 숫자나 body 영역 높이에 대한 상대값을 '%'로 지정할 수 있다.
* @default '50%'
*/
centerY?: PercentSize;
/**
* {@link centerX}, {@link centerY}를 지정하지 않으면 이 속성값을 사용한다.
* 즉, 이 속성으로 두 속성값을 동시에 지정할 수 있다.
*/
center?: PercentSize;
/**
* true로 지정하면 {@link https://realchart.co.kr/config/config/series/pie pie},
* {@link https://realchart.co.kr/config/config/series/funnel funnel}, {@link https://realchart.co.kr/config/config/series/pictorial pictorial},
* 시리즈 등의 데이터포인트별 legend 항목을 표시한다.
*
* @default false
*/
legendByPoint?: boolean;
/**
* 값이 0인 데이터포인트를 범례 항목으로 표시할 것인 지 여부.
*
* @default true
*/
zeroInLegend?: boolean;
/**
* 마지막 데이터포인트들을 묶은 나머지 항목 설정 옵션.
*/
othersGroup?: OthersGroupOptions;
}
declare const BarRangeSeriesType = "barrange";
/**
* BarRange 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'barrange'이다.
* 수평 또는 수직 막대로 여러 값들의 범위들을 **비교**하는 데 사용한다.
* 또, 개별 막대의 길이가 특정 값의 범위를 표시한다. 예를들어 월별 최저/최고 기온을 표시할 수 있다.
* 데이터포인트 label도 두 값을 동시에 표시한다.
* X축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 [category](/config/config/xAxis/category)이다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공해야 한다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 low, y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[low, y]|두 값 배열이면 low값과 y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, low, y,]|세 값 이상이면 순서대로 x, low, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link lowField}는 low값의 index. {@link yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link lowField}|속성 값, 또는 'low' 속성 값이 low 값이 dl된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
*
* @css 'rct-barrange-series'
*/
interface BarRangeSeriesOptions extends LowRangedSeriesOptions {
/**
*/
type?: typeof BarRangeSeriesType;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 low 값을 지정하는 속성명이나 인덱스.
* undefined이면, data point의 값이 array일 때는 1, 객체이면 'low'.
*
*/
lowField?: string;
/**
* 지정한 반지름 크기로 데이터포인트 bar의 모서리를 둥글게 표시한다.\
* 최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.
*
*/
cornerRadius?: number;
/**
* @default '${lowValue} ~ ${highValue}'
*/
tooltipDetail?: string;
}
/**
* Bar 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'bar'이다.
* 차트의 기본 시리즈 타입이므로 차트의 {@link https://realchart.co.kr/config/config/#type 기본 시리즈 타입}이 명시적으로 설정되지 않으면 생략할 수 있다.
* 수평 또는 수직 막대로 여러 값들을 **비교**하는 데 사용한다.
* 막대의 길이가 y값을 나타낸다.
* x축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 {@link https://realchart.co.kr/config/config/xAxis/category category}이다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-bar-series'
*/
interface BarSeriesOptions extends BarSeriesBaseOptions {
/**
* @fixed bar
*/
type?: BarSeriesTypes;
/**
* 지정한 반지름 크기로 데이터포인트 bar의 위쪽 모서리를 둥글게 표시한다.
* 최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.
* polar 차트에서는 동작하지 않는다.
*/
topRadius?: number;
/**
* 지정한 반지름 크기로 데이터포인트 bar의 아래쪽 모서리를 둥글게 표시한다.
* 최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.
* polar 차트에서는 동작하지 않는다.
*/
bottomRadius?: number;
shape?: 'default' | 'cylinder';
}
declare const BarSeriesGroupType = "bargroup";
/**
* Bar 시리즈그룹.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'bargroup'이다.
*
*/
interface BarSeriesGroupOptions extends BarSeriesGroupBaseOptions {
/**
*/
type?: typeof BarSeriesGroupType;
}
declare const PieSeriesGroupType = "piegroup";
/**
* Pie 시리즈그룹.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'piegroup'이다.
*
*/
interface PieSeriesGroupOptions extends SeriesGroupOptions {
/**
*/
type?: typeof PieSeriesGroupType;
/**
* polar 그룹일 때 원형 플롯 영역의 크기.
*
* 픽셀 크기나 차지할 수 있는 전체 크기에 대한 상대적 크기로 지정할 수 있다.
*
* Pie 시리즈들의 그룹이고,
* {@link layout}이 {@link SeriesGroupLayout.FILL FILL}이나 {@link SeriesGroupLayout.STACK STACK}인 경우
* 개별 시리즈의 size 대신 이 속성값으로 표시되고,
* 각 시리즈의 size는 상대 크기로 적용된다.
*
* @default '80%'
*/
polarSize?: PercentSize;
/**
* Pie 시리즈들의 그룹이고,
* {@link layout}이 {@link SeriesGroupLayout.FILL FILL}이나 {@link SeriesGroupLayout.STACK STACK}인 경우,
* 경우 0보다 큰 값을 지정해서 도넛 형태로 표시할 수 있다.
*
* 포함된 pie 시리즈들의 innerSize는 무시된다.
*
* @default 0
*/
innerSize?: PercentSize;
}
/**
*/
interface LinePointLabelOptions extends DataPointLabelOptions {
/**
* position 위치에서 수평 정렬 상태.
*
*
* @default 'center'
*/
align?: Align;
/**
* {@link 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 시리즈의 마지막 데이터포인트 옆에 표시되는 아이콘과 텍스트 설정 모델.
* 마지막 포인트와의 간격은 {@link offset} 속성으로 지정한다.
*/
interface LineSeriesFlagOptions extends Omit {
/**
* @append
*
* @default false
*/
visible?: boolean;
/**
* 마지막 데이터포인트 중심과 flag의 표시 간격을 픽셀 단위로 지정한다.
*
* @default 8
*/
offset?: number;
}
/**
* line 시리즈 arrow 마커 회전 방식.
* @enum
*/
declare const _LineArrowRotation: {
/**
* 인접 데이터포인트를 잇는 선분(또는 step/spline의 마지막 구간) 방향으로 회전한다.
*
*
*/
readonly AUTO: "auto";
/**
* {@link auto} 방향의 반대(180도)로 회전한다.
*
*
*/
readonly AUTO_REVERSE: "auto-reverse";
};
/** @dummy */
type LineArrowRotation = typeof _LineArrowRotation[keyof typeof _LineArrowRotation] | number;
/**
* line 시리즈 arrow 마커 표시 위치.
* @enum
*/
declare const _LineArrowPosition: {
/**
* 첫 번째 유효 데이터포인트.
*
*
*/
readonly START: "start";
/**
* 마지막 유효 데이터포인트.
*
*
*/
readonly END: "end";
/**
* 양 끝 데이터포인트.
*
*
*/
readonly BOTH: "both";
};
/** @dummy */
type LineArrowPosition = typeof _LineArrowPosition[keyof typeof _LineArrowPosition];
/**
* Line 시리즈 양 끝(또는 한쪽 끝)에 표시되는 arrow 마커 설정.
* {@link shape} 등 marker와 동일한 도형을 사용하며, {@link rotation}으로 방향을 지정한다.
* {@link style}을 지정하지 않으면 시리즈 color가 fill로 적용되고, line strokeDasharray는 상속되지 않는다.
*/
interface LineSeriesArrowOptions extends SeriesMarkerOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
/**
* @append
*
* @default 'triangle'
*/
shape?: Shape;
/**
* @append
*
* @default 6
*/
radius?: number;
/**
* arrow 마커 회전 각도.
* `'auto'`/`'auto-reverse'`이면 인접 데이터포인트를 잇는 선분(또는 step의 해당 직각 구간) 방향으로 회전한다.
* spline 등 곡선 시리즈는 인접 포인트를 잇는 직선(chord) 방향을 따른다.
* 숫자이면 라인 기울기와 무관하게 지정한 각도(도)로 회전한다.
*
* @default 'auto'
*/
rotation?: LineArrowRotation;
/**
* arrow 마커를 표시할 위치.
*
* @default 'end'
*/
position?: LineArrowPosition;
}
/**
* @enum
*/
declare const _LineStepDirection: {
readonly FORWARD: "forward";
readonly BACKWARD: "backward";
readonly CENTER: "center";
};
/** @dummy */
type LineStepDirection = typeof _LineStepDirection[keyof typeof _LineStepDirection];
/**
* Line 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'line'이다.
* 주로 시간이나 다른 축 변수에 의한 데이터의 **변화** 또는 **경향**(pattern)을 보여주는 데 사용한다.
* 데이터포인트의 값에 해당하는 지점에 표시되는 데이터포인트 마커들을 연결한 선으로 표시되며,
* 기본 x축은 [linear](/config/config/xAxis/linear)이다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-line-series'
*/
interface LineSeriesOptions extends LineSeriesBaseOptions {
/** @fixed line */
type?: LineSeriesTypes;
/**
* @default 'default'
*/
lineType?: LineType;
/**
* @default 'forward'
*/
stepDir?: LineStepDirection;
/**
* 데이터포인트를 표시하기 위한 y축 기준 위치 값.
* 또, 이 값을 지정하지 않은 경우 포함된 시리즈의 {@link baseValue}가 적용되고, 그 값도 설정되지 않으면
* 연결된 y축의 {@link https://realchart.co.kr/config/config/yAxis/linear#basevalue baseValue}를 따르고,
* 그 값도 설정되지 않은 경우 0이 적용된다.
* NaN으로 지정하면 기준값 없이 최소값과 축의 padding으로 기준 위치가 정해진다.
* {@link https://realchart.co.kr/config/config/series/area area} 시리즈와 다르게,
* 기준값이 필요한 다른 시리즈가 없고, 축 padding이 적용된 값이 이 값을 넘지 않으면
* 축의 최소/최대값은 이 값과 무관하게 설정된다.
*
* @default undefined
*/
baseValue?: number;
/**
* true로 지정하면 y값이 지정되지 않은 null 포인터를 무시하고 다음 포인트에 연결한다.
* false면 null 포인트에서 연결이 끊어진다.
*
* @default false
*/
connectNullPoints?: boolean;
/**
* {@link baseValue} 혹은 y축의 baseValue보다 작은 쪽의 선들에 적용되는 스타일.
*/
belowStyle?: SVGStyleOrClass;
/**
* @private
*
* {@link connectNullPoints}이 true일 때 null 포인트의 양끝 포인트를 연결하는 선에 적용되는 스타일.
*/
nullStyle?: SVGStyleOrClass;
/**
* 시리즈의 마지막 데이터포인트 옆에 표시되는 아이콘과 텍스트 설정 모델.
*
*/
flag?: LineSeriesFlagOptions;
/**
* 라인 양 끝(또는 한쪽 끝)에 표시되는 arrow 마커 설정.
* {@link position}으로 `'start'`/`'end'`/`'both'`, {@link rotation}으로 `'auto'`/`'auto-reverse'` 또는 각도를 지정한다.
*/
arrow?: LineSeriesArrowOptions;
/**
* polar 좌표계이고, x축의 totalAngle이 360도이 경우,
* 양끝 데이터포인트를 이어서 표시할 지 여부.
* 그 외에는 무조건 연결하지 않는다.
*
* @default base 라인이 존재하지 않거나 'spline'이면 true, 아니면 false.
*/
connectEnds?: boolean;
}
declare const SplineSeriesType = "spline";
/**
* Spline 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'spline'이다.
* {@link lineType} 설정을 무시하고 항상 'spline'으로 표시되는 것 외에는 {@link https://realchart.co.kr/config/config/series/line line} 시리즈와 동일하다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-line-series'
*/
interface SplineSeriesOptions extends LineSeriesOptions {
/** @dummy */
type?: typeof SplineSeriesType;
/**
* @append
*
* 항상 'spline'이다.
*/
lineType?: LineType;
}
/**
* Area 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'area'이다.
* 대부분 {@link https://realchart.co.kr/config/config/series/line line} 시리즈와 동일하고 라인 아래 부분을 별도의 색상으로 채운다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-area-series'
*/
interface AreaSeriesOptions extends LineSeriesOptions {
/** @fixed area */
type?: AreaSeriesTypes;
/**
* 데이터포인트를 표시하기 위한 y축 기준 위치 값.
* 또, 이 값을 지정하지 않은 경우 포함된 시리즈의 {@link baseValue}가 적용되고, 그 값도 설정되지 않으면
* 연결된 y축의 {@link https://realchart.co.kr/config/config/yAxis/linear#basevalue baseValue}를 따르고,
* 그 값도 설정되지 않은 경우 0이 적용된다.
* NaN으로 지정하면 기준값 없이 최소값과 축의 padding으로 기준 위치가 정해진다.
*
* @default undefined
*/
baseValue?: number;
/**
* area 영역에 추가적으로 적용되는 {@link it.SVGStyles 스타일셋} 또는
* css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
areaStyle?: SVGStyleOrClass;
/**
* base 아래쪽 area 영역에 추가적으로 적용되는 {@link it.SVGStyles 스타일셋} 또는
* css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
belowAreaStyle?: SVGStyleOrClass;
}
declare const BellCurveSeriesType = "bellcurve";
/**
* BellCurve 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'bellcurve'이다.
* {@link source} 시리즈 데이터포인트들의 값을 바탕으로
* {@link https://ko.wikipedia.org/wiki/정규_분포 정규분포} 곡선을 표시한다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-bellcurve-series'
*/
interface BellCurveSeriesOptions extends AreaSeriesOptions {
/** @dummy */
type?: typeof BellCurveSeriesType;
/**
* 이 시리즈 data point들을 구성할 수 있는 데이터를 포함한 원본 시리즈.
* 시리즈 이름이나 index로 지정한다.
*/
source?: string | number;
/**
* @default 3
*/
sigmas?: number;
/**
* @default 5
*/
pointsInSigma?: number;
/**
* true면 {@link lineType} 설정과 관계없이 spline 곡선으로 표시한다.
*
* @default true
*/
curved?: boolean;
}
declare const BoxPlotSeriesType = "boxplot";
/**
* {@link https://en.wikipedia.org/wiki/Box_plot BoxPlot} 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'boxplot'이다.
* 주요 값들의 대략적인 범위 및 분포를 표시하는 시리즈.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[min, low, mid, high, y]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, min, low, mid, high, y]|형식 설명 순서대로 값 결정.
또는 {@link xField} 속성이 숫자이면 x값, {@link minField}는 min값,
{@link lowField}는 low값, {@link midField}는 mid값,
{@link highField}는 high값, {@link yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link minField}|속성 값, 또는 'min' 속성 값이 min 값이 된다.|
* |{@link lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@link midField}|속성 값, 또는 'mid' 속성 값이 mid 값이 된다.|
* |{@link highField}|속성 값, 또는 'high' 속성 값이 high 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-boxplot-series'
*/
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이면, {@link yField} 값으로 대체되거나 data point의 값이 array일 때는 항목 수가 6이상이면 5 아니면 4, 객체이면 'max'.
*
*/
maxField?: string;
/**
* @default '${name}
${detail}'
*/
tooltipText?: string;
/**
* @default 'min: ${minValue}
low: ${lowValue}
mid: ${midValue}
high: ${highValue}
max: ${maxValue}'
*/
tooltipDetail?: string;
}
/**
* 버블 시리즈의 각 버블 내부에 파이 차트를 표시하기 위한 설정.
* {@link fields}로 지정한 데이터 필드들의 값을 비율로 계산하여 파이 조각으로 표현한다.
*/
interface BubblePieOptions extends ChartItemOptions {
/**
* 파이 조각 값을 가져올 데이터 필드명 배열.
* 각 필드의 값이 하나의 파이 조각이 된다.
* 데이터포인트 json 객체의 속성명과 일치해야 한다.
*
* ```json
* // json 객체 데이터 — 속성명으로 접근
* "pie": { "fields": ["sales", "cost", "profit"] },
* "data": [{ "x": 5, "y": -6, "z": 50, "sales": 30, "cost": 25, "profit": 45 }]
*
* // 배열 데이터 — 인덱스로 접근
* "pie": { "fields": [3, 4, 5] },
* "data": [[5, -6, 50, 30, 25, 45]]
* ```
*/
fields?: number[] | string[];
/**
* 각 파이 조각의 표시 라벨 배열.
* {@link fields}와 동일한 순서로 지정한다.
* 툴팁이나 범례에서 필드명 대신 이 라벨이 사용된다.
*
* ```json
* "pie": {
* "fields": ["sales", "cost", "profit"],
* "categories": ["매출", "비용", "이익"]
* }
* ```
* 미지정 시 {@link fields}의 필드명이 그대로 사용된다.
*/
categories?: string[];
/**
* 원호 시작 각도.
* 지정하지 않거나 잘못된 값이면 0으로 계산된다. 0은 시계의 12시 위치다.
*
* @default 0
*/
startAngle?: number;
/**
* 원호 전체 각도.
* 0 ~ 360 사이의 값으로 지정해야 한다.
* 범위를 벗어난 값은 범위 안으로 조정된다.
* 지정하지 않거나 0보다 큰 값이 아니면 360으로 적용된다.
*
* @default 360
*/
totalAngle?: number;
/**
* true면 시계 방향으로 회전한다.
*
* @default true
*/
clockwise?: boolean;
/**
* 파이 조각별 범례 항목을 표시할지 여부.
*
* @default false
*/
visibleInLegend?: boolean;
/**
* 툴팁 텍스트를 리턴하는 콜백 함수.
* undefined를 리턴하면 {@link tooltipText} 속성이 사용된다.
*/
tooltipCallback?: (args: DataPointCallbackArgs) => string;
/**
* 데이터포인트 툴팁 텍스트.
* {@link tooltipCallback}이 설정되고 콜백에서 undefined를 리턴하지 않으면 이 속성은 무시된다.
* 사용 가능한 템플릿 변수: `${label}`, `${value}`, `${percent}`, `${field}`
*
* @default '${label}: ${value} (${percent}%)'
*/
tooltipText?: string;
/**
* 0보다 큰 값을 지정해서 도넛 형태로 표시할 수 있다.
* 버블 원호의 반지름에 대한 상대적 크기(%)나 픽셀 수로 지정할 수 있다.
*
*/
innerRadius?: PercentSize;
/**
* 파이 조각별 색상을 지정한다.
* 색 배열로 지정하거나, 'colors' asset으로 등록된 이름을 지정할 수 있다.
* 또, 'palette-name@palette'나 'palette-name@pal' 형식으로 설정해서
* 라이브러리가 기본 css로 제공하는 palette 색상 배열을 사용할 수 있다.
* 미지정 시 차트 팔레트 색상이 순서대로 적용된다.
*
*/
colors?: string | string[];
}
/**
* @enum
*/
declare const _BubblePieLegendMode: {
/** 시리즈 마커만 범례에 표시한다. */
readonly SERIES: "series";
/** 슬라이스 마커만 범례에 표시한다. */
readonly SLICE: "slice";
/** 시리즈 마커와 슬라이스 마커를 모두 표시한다. */
readonly BOTH: "both";
};
/** @dummy */
type BubblePieLegendMode = typeof _BubblePieLegendMode[keyof typeof _BubblePieLegendMode];
/**
* @enum
*/
declare const _BubbleSizeMode: {
readonly WIDTH: "width";
readonly AREA: "area";
};
/** @dummy */
type BubbleSizeMode = typeof _BubbleSizeMode[keyof typeof _BubbleSizeMode];
declare const BubbleSeriesType = "bubble";
/**
* 버블 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'bubble'이다.
* x, y로 지정되는 위치와 z로 지정되는 크기 사이의 관계를 표시한다.
* 주로 원의 크기가 데이터포인트의 중요도를 나타낸다.
* X축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 [linear](/config/config/xAxis/linear)이다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y, z값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 y, z값. x 값은 순서에 따라 자동 결정.|
* |[y, z]|두 값 배열이면 y값과 z값. x 값은 순서에 따라 자동 결정.|
* |[x, y, z,]|세 값 이상이면 순서대로 x, y, z값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index. {@link zField}는 z값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link zField}|속성 값, 또는 'z' 속성 값이 z 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-bubble-series'
*/
interface BubbleSeriesOptions extends MarkerSeriesOptions {
/**
*/
type?: typeof BubbleSeriesType;
/**
* 버블 크기를 결정하는 방식.
*
* @default 'area'
*/
sizeMode?: BubbleSizeMode;
/**
* 버블 최소 크기.
*
* @default 10
*/
minSize?: PercentSize;
/**
* 버블 최대 크기.
*
* @default '20%'
*/
maxSize?: PercentSize;
/**
* @default '${detail}'
*/
tooltipText?: string;
/**
* @default 'x: ${x}
y: ${y}
volume: ${z}'
*/
tooltipDetail?: string;
/**
* @default 2
*/
paddingRate?: number;
/**
* 버블 내부에 파이 차트를 표시하기 위한 설정.
* 이 속성을 지정하면 각 버블 내부에 데이터 필드별 비율을 파이 차트로 표시한다.
* boolean으로 지정하면 {@link visible} 속성에 적용된다.
*/
pie?: BubblePieOptions | boolean;
/**
* {@link pie} 속성이 활성화되었을 때 범례에 표시할 항목을 지정한다.
* - `'series'`: 시리즈 마커만 표시한다.
* - `'slice'`: 슬라이스 마커만 표시한다.
* - `'both'`: 시리즈 마커와 슬라이스 마커를 모두 표시한다.
*
* {@link pie}.{@link BubblePieOptions#visibleInLegend}이 false이면 슬라이스 마커는 표시되지 않으며,
* 이 속성과 무관하게 시리즈 마커만 표시된다.
*
* @default 'both'
*/
legendMode?: BubblePieLegendMode;
}
declare const BumpSeriesType = "bump";
/**
* Bump 시리즈그룹.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'bump'이다.
* 포함된 시리즈들의 y값들을 비교해서 순위대로 시리즈를 표시한다.
* 즉, 포함된 시리즈들의 x값이 동일한 데이터포인트들의 y값들을 비교해서 각자의 순위를 yValue로 재설정하여 표시한다.
*
*/
interface BumpSeriesGroupOptions extends SeriesGroupOptions {
/**
*/
type?: typeof BumpSeriesType;
}
/**
* Candlestick 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'candlestick'이다.
* 주식을 비롯한 유가증권과 파생상품, 환율 등의 가격 움직임을 보여주는 시리즈.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
* [주의] high와 y값은 동일한 값이다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[min, low, mid, high | y]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, min, low, mid, high | y]|형식 설명 순서대로 값 결정.
또는 {@link xField} 속성이 숫자이면 x값, {@link minField}는 min값,
{@link lowField}는 low값, {@link midField}는 mid값,
{@link highField}는 high값, {@link yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@link openField}|속성 값, 또는 'open' 속성 값이 open 값이 된다.|
* |{@link closeField}|속성 값, 또는 'mid' 속성 값이 close 값이 된다.|
* |{@link highField}|속성 값, 또는 'high' 속성 값이 high 값이 된다. 지정하지 않으면 yField 값이 사용된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-candlestick-series'
*/
interface CandlestickSeriesOptions extends LowRangedSeriesOptions {
/** @fixed candlestick */
type?: CandlestickSeriesTypes;
/**
* 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이면, {@link yField} 값으로 대체되거나 data point의 값이 array일 때는 항목 수가 5이상이면 4, 아니면 3, 객체이면 'high'.
*/
highField?: string;
/**
* 값이 하락한 데이터포인트에 적용되는 {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
declineStyle?: SVGStyleOrClass;
/**
* @default '${name}
최저: ${lowValue}
시가: ${openValue}
종가: ${closeValue}
고가: ${highValue}'
*/
tooltipDetail?: string;
}
/**
*/
interface CircleBarPointLabelOptions extends DataPointLabelOptions {
/**
* @append
*
* @default 'inside'
*/
position?: PointLabelPosition;
}
declare const CircleBarSeriesType = "circlebar";
/**
* CirleBar 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'circlebar'이다.
* 직사각형 대신 원형 막대로 여러 값들을 **비교**하는 데 사용한다.
* 원 지름이 y값을 나타낸다.
* X축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 {@link https://realchart.co.kr/config/config/xAxis/category 카테고리축}이다.
*
*{@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-circlebar-series'
*/
interface CircleBarSeriesOptions extends BarSeriesBaseOptions {
/**
*/
type?: typeof CircleBarSeriesType;
}
declare const CircleBarSeriesGroupType = "circlebargroup";
/**
* CircleBar 시리즈그룹.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'circlebargroup'이다.
*
*/
interface CircleBarSeriesGroupOptions extends BarSeriesGroupBaseOptions {
/**
*/
type?: typeof CircleBarSeriesGroupType;
}
/** */
interface DumbbellSeriesMarkerOptions extends SeriesMarkerOptions {
/**
* @append
*
* @default 4
*/
radius?: number;
/**
* @append
*
* @default 'circle'
*/
shape?: Shape;
}
declare const DumbbellSeriesType = "dumbbell";
/**
* Dumbbell 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'dumbbell'이다.
* Lollipop 시리즈의 변종으로 시간에 따른 두 값의 변화를 표시하는 등,
* 두 그룹 간의 차이나 관계를 표시하는 데 사용될 수 있다.
* 예를 들어, 두 기간 동안의 성장률, 두 그룹 간의 판매량 차이 변화 등을 보여 주는데 유용하다.
* 양 끝 두 개의 원이나 점 등을 선분으로 연결하여 표시한다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공해야 한다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 low, y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[low, y]|두 값 배열이면 low값과 y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, low, y,]|세 값 이상이면 순서대로 x, low, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link lowField}는 low값의 index. {@link yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-dumbbell-series'
*/
interface DumbbellSeriesOptions extends LowRangedSeriesOptions {
/**
*/
type?: typeof DumbbellSeriesType;
/**
*/
marker?: DumbbellSeriesMarkerOptions;
/**
*/
lowMarker?: DumbbellSeriesMarkerOptions;
}
declare const EqualizerSeriesType = "equalizer";
/**
* Eqaulizer 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'equalizer'이다.
* Bar를 여러 개의 segment로 나눠 표시한다.
* 수평 또는 수직 막대로 여러 값들을 **비교**하는 데 사용한다.
* 막대의 길이가 y값을 나타낸다.
* X축 타입이 설정되지 않은 경우, 이 시리즈를 기준으로 생성되는 축은 {@link https://realchart.co.kr/config/config/xAxis/category 카테고리축}이다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-equalizer-series'
*/
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 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'errorbar'이다.
* 오류(차)를 나타내는 막대를 표시한다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공해야 한다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 low, y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[low, y]|두 값 배열이면 low값과 y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, low, y,]|세 값 이상이면 순서대로 x, low, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link lowField}는 low값의 index. {@link yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-errorbar-series'
*/
interface ErrorBarSeriesOptions extends LowRangedSeriesOptions {
/**
*/
type?: typeof ErrorBarSeriesType;
/**
* @append
*
* @default 0.3
*/
pointPadding?: number;
/**
* @default '${lowValue} ~ ${highValue}'
*/
tooltipDetail?: string;
}
/**
* funnel 시리즈의 point label 옵션.
* position이 'default'이면 'inside'로 표시된다.
* 라벨들이 겹치면 값이 적은 것들 순서대로 감춘다.
*/
interface FunnelSeriesLabelOptions extends WidgetSeriesLabelOptions {
/**
* true로 지정하면 반대쪽(왼편)에 표시한다.
*/
opposite?: boolean;
}
declare const FunnelSeriesType = "funnel";
/**
* Funnel 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'funnel'이다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* // TODO #fiddle series/funnel-series Funnel Series
* @css 'rct-funnel-series'
*/
interface FunnelSeriesOptions extends WidgetSeriesOptions {
/** @dummy */
type?: typeof FunnelSeriesType;
/**
* @append
*/
pointLabel?: FunnelSeriesLabelOptions;
/**
* @default '85%'
*/
width?: PercentSize;
/**
* @default '90%'
*/
height?: PercentSize;
/**
* @default '30%'
*/
neckWidth?: PercentSize;
/**
* @default '30%'
*/
neckHeight?: PercentSize;
/**
* 목 부분의 최소 너비.
* 2픽셀 이하로 지정하면 표시되지 않을 수 있다.
*
* @default 2 픽셀
*/
minNeckWidth?: number;
/**
* @default false
*/
reversed?: boolean;
/**
* @append
*
* @default false
*/
legendByPoint?: boolean;
/**
* @ignore
* 0보다 큰값으로 지정하면 원통형으로 표시한다.
* 0 이하로 지정하면 무시된다.
*/
depth?: number;
}
/**
* @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 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'histogram'이다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-histogram-series'
*/
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 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'arearange'이다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공해야 한다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 low, y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[low, y]|두 값 배열이면 low값과 y값. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, low, y,]|세 값 이상이면 순서대로 x, low, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link lowField}는 low값의 index. {@link yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-arearange-series'
*/
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 영역에 추가적으로 적용되는 {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
*/
areaStyle?: SVGStyleOrClass;
/**
* true면 {@link lineType} 설정과 관계없이 spline 곡선으로 표시한다.
*
* @default false
*/
curved?: boolean;
/**
* @default '${lowValue} ~ ${highValue}'
*/
tooltipDetail?: string;
}
/**
*/
interface LollipopSeriesMarkerOptions extends SeriesMarkerOptions {
/**
* @append
*
* @default 4
*/
radius?: number;
/**
* {@link https://realchart.co.kr/config/config/series/lollipop/radiusField radiusField}값에 따라 상대적으로 적용되는 radius의 최대 크기
*
* @default 8
*/
maxRadius?: number;
/**
* {@link https://realchart.co.kr/config/config/series/lollipop/radiusField radiusField}값에 따라 상대적으로 적용되는 radius의 최소 크기
*
* @default 2
*/
minRadius?: number;
/**
* @append
*
* @default 'circle'
*/
shape?: Shape;
}
declare const LollipopSeriesType = "lollipop";
/**
* Lollipop(막대 사탕) 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'lollipop'이다.
* 기능적으로는 bar 시리즈와 동일하지만, 대부분의 데이터포인트 값들이 최대값에 가까운 곳에 몰려 있는 경우에
* 활용 가능하다. bar 시리즈 표현하면 시각적으로 구분하기 쉽지 않기 때문이다.
* 특히, bar가 겹치더라도 데이터포인트들이 쉽게 구분된다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
* |{@link radiusField}|속성 값, 또는 'radius' 속성 값으로 데이터포인트의 radius 크기가 지정된다.|
*
* @css 'rct-lollipop-series'
*/
interface LollipopSeriesOptions extends BasedSeriesOptions {
/**
*/
type?: typeof LollipopSeriesType;
/**
*/
marker?: LollipopSeriesMarkerOptions;
/**
* undefined이면, data point의 값이 객체일 때 'radius'.
*/
radiusField?: string;
}
declare const OhlcSeriesType = "ohlc";
/**
* Ohlc 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'ohlc'이다.
* 시가-고가-저가-종가 차트.
* 시간 경과에 따른 가격의 움직임을 설명하는 데 사용된다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
* [주의] high와 y값은 동일한 값이다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[min, low, mid, high | y]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, min, low, mid, high | y]|형식 설명 순서대로 값 결정.
또는 {@link xField} 속성이 숫자이면 x값, {@link minField}는 min값,
{@link lowField}는 low값, {@link midField}는 mid값,
{@link highField}는 high값, {@link yField}는 y값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link lowField}|속성 값, 또는 'low' 속성 값이 low 값이 된다.|
* |{@link openField}|속성 값, 또는 'open' 속성 값이 open 값이 된다.|
* |{@link closeField}|속성 값, 또는 'mid' 속성 값이 close 값이 된다.|
* |{@link highField}|속성 값, 또는 'high' 속성 값이 high 값이 된다. 지정하지 않으면 yField 값이 사용된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-ohlc-series'
*/
interface OhlcSeriesOptions extends CandlestickSeriesOptions {
/**
*/
type?: typeof OhlcSeriesType;
}
declare const ParetoSeriesType = "pareto";
/**
* Pareto 시리즈
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'pareto'이다.
* 참조하는 원본 시리즈의 누적 비율을 표시한다.
* {@link source}로 지정된 시리즈의 데이터포인트 값들로 부터 누적 포인트들을 계산해서 표시한다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-pareto-series'
*/
interface ParetoSeriesOptions extends LineSeriesBaseOptions {
/**
*/
type?: typeof ParetoSeriesType;
/**
* 이 시리즈 data point들을 구성할 수 있는 데이터를 포함한 원본 시리즈.
*
* 시리즈 이름이나 index로 지정한다.
*/
source?: string | number;
/**
* true면 spline 곡선으로 표시한다.
*
*
* @default false
*/
curved?: boolean;
}
/**
* {@link https://realchart.co.kr/config/config/series/pie pie} 시리즈와 같은 원형 시리즈에 대한 설정 옵션
* 직교 좌표계가 표시된 경우, {@link https://realchart.co.kr/config/config/body body} 영역을 기준으로
* {@link size}, {@link centerX}, {@link centerY}가 적용된다.
* //TODO: 현재 PieSeries만 계승하고 있다. 추후 PieSeries에 합칠 것.
*/
interface RadialSeriesOptions extends WidgetSeriesOptions {
/**
* 시리즈 원호의 반지름.
* 픽셀 크기나 {@link https://realchart.co.kr/config/config/body body} 영역 크기에 대한 상대적 크기로 지정할 수 있다.
* '50%'로 지정하면 plot 영역의 너비나 높이 중 작은 크기와 동일한 반지름으로 표시된다.
*
* @default '40%'
*/
radius?: PercentSize;
/**
* 시리즈 원호 시작 각도.
* 지정하지 않거나 잘못된 값이면 0으로 계산된다.
* 0은 시계의 12시 위치다.
*
* @default 0
*/
startAngle?: number;
/**
* 시리즈 원호 전체 각도.
* 0 ~ 360 사이의 값으로 지정해야 한다.
* 범위를 벗어난 값은 범위 안으로 조정된다.
* 지정하지 않거나 0보다 큰 값이 아니면 360으로 적용된다.
*
* @default 360
*/
totalAngle?: number;
/**
* true면 시계 방향으로 회전한다.
*
* @default true
*/
clockwise?: boolean;
}
/**
*/
interface PieSeriesTextOptions extends IconedTextOptions {
}
/**
* 데이터포인트 라벨의 회전 방식 지정.
* @enum
*/
declare const _PointLabelRotationMode: {
/**
* 호를 따라 label을 회전 시킨다.
*/
readonly ARC: "arc";
/**
* 중심각에 따라 label을 회전시킨다.
*/
readonly ANGLE: "angle";
};
/** @dummy */
type PointLabelRotationMode = typeof _PointLabelRotationMode[keyof typeof _PointLabelRotationMode];
/**
* pie 시리즈의 point label 옵션.
* position이 default이면 'inside'로 표시된다.
* 라벨들이 겹치면 값이 적은 것들 순서대로 감춘다.
*/
interface PieSeriesLabelOptions extends WidgetSeriesLabelOptions {
/**
* {@link position}이 'inside'가 될 때,
* label의 중심점이 되는 위치를 pie 전체 원에 대한 **0~1** 사이의 상대값으로 지정한다.
* 이 속성값과 {@link offset} 속성값의 합으로 위치가 정해진다.
*
* @default 0.7
*/
radius?: number;
/**
* {@link position}이 'inside'이고, {@link autoRotation}이 true 일때,
* label의 회전 방식을 지정한다.
*
* @default 'arc'
*/
rotationMode?: PointLabelRotationMode;
}
/**
* pie 시리즈 깊이 설정 옵션.
*/
interface PieSeriesDepthOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
/**
* 깊이의 길이, 즉 원호들의 두께를 지정한다.
* 0 이하로 지정하면 무시된다.
*
* @default 25
*/
length?: number;
/**
* {@link depth}가 지정된 경우 시리즈 타원의 비율.
* 0.3 ~ 0.8 사이의 값으로 조정된다.
*
* @default 0.6
*/
ratio?: number;
/**
* depth 면의 색상은 슬라이스 fill을 기반으로 자동 계산되므로 직접 지정할 수 없다.
* 색상을 변경하려면 슬라이스의 색상을 변경한다.
* @private
*/
style?: never;
}
declare const PieSeriesType = "pie";
/**
* Pie 시리즈
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'pie'이다.
* 모든 데이터포인트 값들의 합에 대한 데이터포인트의 상대적 값 비율을 원호로 표시한다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-pie-series'
*/
interface PieSeriesOptions extends RadialSeriesOptions {
/**
*/
type?: typeof PieSeriesType;
/**
* @append
*/
pointLabel?: PieSeriesLabelOptions;
/**
* @default 1
*/
groupSize?: number;
/**
* 0보다 큰 값을 지정해서 도넛 형태로 표시할 수 있다.
* 시리즈 원호의 반지름에 대한 상대적 크기나 픽셀 수로 지정할 수 있다.
* {@link innerText}로 도넛 내부에 표시될 텍스트를 지정할 수 있다.
*/
innerRadius?: PercentSize;
/**
* @default '7%'
*/
sliceOffset?: PercentSize;
/**
* 클릭한 데이터 포인트를 slice 시킨다.
* 기존 slice 됐던 포인트는 원복된다.
*
* @default true
*/
autoSlice?: boolean;
/**
* Slice animation duration.
* 밀리세컨드(ms) 단위로 지정.
*
* @default 300
*/
sliceDuration?: number;
/**
* @default 0
*/
/**
* {@link innerRadius}가 0보다 클 때, 도넛 내부에 표시되는 텍스트.
* 기본 클래스 selector는 'rct-pie-series-inner'이다.
*/
innerText?: PieSeriesTextOptions;
/**
* 깊이 설정 옵션.
* 0보다 큰 숫자로 지정하면 {@link https://realchart.co.kr/docs/api/options/AxisDepthOptions/visible visible}을 true로 설정하고,
* {@link https://realchart.co.kr/docs/api/options/PieSeriesDepthOptions/length length}를 지정하는 것과 동일하다.
* [주의] 이 값이 지정되면 {@link https://realchart.co.kr/docs/api/options/AxisTickOptions/length length} 설정은 무시된다.
*/
depth?: PieSeriesDepthOptions | number | boolean;
}
declare const ScatterSeriesType = "scatter";
/**
* Scatter 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'scatter'이다.
* 데이터포인트를 shape로 표시되는 점 하나로 표시한다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-scatter-series'
*/
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;
/**
* 데이터포인트 {@link shape 도형}의 반지름.
*
* @default 5
*/
radius?: number;
/**
* 데이터포인트 위에 마우스가 있을 때 표시되는 기본 확장 효과에 적용되는 scale.
*
* @default 1.8
*/
hoverScale?: number;
}
/**
*/
interface RangedSeriesOptions extends ClusterableSeriesOptions {
}
declare const WaterfallSeriesType = "waterfall";
/**
* 폭포(Waterfall) 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'waterfall'이다.
* 순서대로 추가되는 증가/감소 값들의 누적 상태를 표시하는 데 사용된다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y]|값 하나인 배열이면 y값. x 값은 순서에 따라 자동 결정.|
* |[x, y,]|두 값 이상이면 순서대로 x, y값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |isSum|이 속성이 true이면, 해당 포인트는 이전 값들의 전체 합계를 나타낸다.|
* |isMid|이 속성이 true이면, 해당 포인트는 시리즈 시작부터 또는 이전 중간 합계 이후의 누적 합계를 나타낸다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @css 'rct-waterfall-series'
*/
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: {
/**
* 최대한 정사각형에 가까운 비율을 유지한다.
*
* 줄마다 배치 방향을 바꾼다.
* 사용자가 크기를 비교하기에 유리하다.
*
*/
readonly SQUARIFY: "squarify";
/**
* 최대한 정사각형에 가까운 비율을 유지한다.
*
* 같은 방향을 유지하면 배치한다.
*
*/
readonly STRIP: "strip";
/**
* 수평/수직 한 쪽 방향으로 나눈다.
*
* level이 바뀌면 방향을 바꾼다.
*
*/
readonly SLICE: "slice";
/**
* 방향을 번갈아 가면서 나눈다.
*
*/
readonly SLICE_DICE: "sliceDice";
};
/** @dummy */
type TreemapAlgorithm = typeof _TreemapAlgorithm[keyof typeof _TreemapAlgorithm];
/**
*/
interface TreeGroupHeadOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
}
declare const TreemapSeriesType = "treemap";
/**
* Treemap 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'treemap'이다.
* 차트나 split pane에 하나의 treemap만 존재할 수 있다.
*
* //1. 본래 하드 드라이브의 파일 분포 상태를 표시하기 위해 고안됨.
* //2. node & link 스타일의 전통적 표시 방식은 공간을 많이 필요로 한다.
* //3. 일정 표시 공간을 100% 사용한다.
* //4. 초기 공간을 재귀적으로 나누어 가면서 구성한다.
*
* // TODO: grouping된 data 설정 가능하도록 한다. `data[{data:[]}, {data:[]}]`
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
* [주의] id, group 값은 문자열로 변환돼 사용된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y, id, grup]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, y, id, group]|형식 설명 순서대로 값 결정.
또는 {@link xField} 속성이 숫자이면 x값, {@link yField}는 y값,
{@link idField}는 id값, {@link groupField}는 group값,
.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link idField}|속성 값, 또는 'id' 속성 값이 length 값이 된다.|
* |{@link groupField}|속성 값, 또는 'group' 속성 값이 angle 값이 된다.|
*
* @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 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'heatmap'이다.
* 숫자 대신 색상으로 값들을 table에 표시한다.
* 차트나 split pane에 하나의 heatmap만 존재할 수 있다.
*
* //[셀 색상]
* //1. color-axis가 연결되면 거기에서 색을 가져온다.
* //2. series의 minColor, maxColor 사이의 색으로 가져온다.
* //3. series의 기본 색상과 흰색 사이의 색으로 가져온다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 y, z값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[z]|단일값 배열이면 y, z값. x 값은 순서에 따라 자동 결정.|
* |[y, z]|두 값 배열이면 y값과 z값. x 값은 순서에 따라 자동 결정.|
* |[x, y, z,]|세 값 이상이면 순서대로 x, y, z값.
또는 {@link xField} 속성이 숫자이면 x값의 index. {@link yField}는 y값의 index. {@link zField}는 z값의 index.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link zField}|속성 값, 또는 'z' 속성 값이 z 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* @modules heatmap
*/
interface HeatmapSeriesOptions extends Omit {
/**
*/
type?: typeof HeatmapSeriesType;
/**
* @default '${detail}'
*/
tooltipText?: string;
/**
* @default 'x: ${x}
y: ${y}
heat: ${z}'
*/
tooltipDetail?: string;
}
/**
* vector 화살표 회전 중심.
* @enum
*/
declare const _VectorOrigin: {
/**
* 데이터포인트 (x, y) 위치가 vector 화살표의 중점이 되게 회전한다.
*
*
*/
readonly CENTER: "center";
/**
* 데이터포인트 (x, y) 위치가 vector 화살표의 시작점이 되게 회전한다.
*
*
*/
readonly START: "start";
/**
* 데이터포인트 (x, y) 위치가 vector 화살표의 끝점이 되게 회전한다.
*
*
*/
readonly END: "end";
};
/** @dummy */
type VectorOrigin = typeof _VectorOrigin[keyof typeof _VectorOrigin];
/**
* 화살 머리 종류.
* @enum
*/
declare const _ArrowHead: {
/**
* 머리를 따로 표시하지 않는다.
*
*
*/
readonly NONE: "none";
/**
* 닫힌 삼각형.
*
*
*/
readonly CLOSE: "close";
/**
* 열린 삼각형.
*
*
*/
readonly OPEN: "open";
};
/** @dummy */
type ArrowHead = typeof _ArrowHead[keyof typeof _ArrowHead];
declare const VectorSeriesType = "vector";
/**
* Vector 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'vector'이다.
* x, y로 지정된 데이터포인트에 길이과 방향을 갖는 화살표를 표시한다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
* [주의] 데이터포인트 구성에 필요한 모든 값을 제공하지 않으면 null이 된다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |y|단일 숫자면 low, y값. x 값은 순서에 따라 자동 결정.|
* |[]|빈 배열이면 null. x 값은 순서에 따라 자동 결정.|
* |[y, length, angle]|형식 설명 순서대로 값 결정. x 값은 데이터포인트 순서에 따라 자동 결정.|
* |[x, y, length, angle]|형식 설명 순서대로 값 결정.
또는 {@link xField} 속성이 숫자이면 x값, {@link yField}는 y값,
{@link lengthField}는 length값, {@link angleField}는 angle값,
.|
*
* ###### json 배열
* |Series 속성|설명|
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value' 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link lengthField}|속성 값, 또는 'length' 속성 값이 length 값이 된다.|
* |{@link angleField}|속성 값, 또는 'angle' 속성 값이 angle 값이 된다.|
*
* @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 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'wordcloud'이다.
* 빈도(weight, 또는 중용도)와 함께 지정된 단어 묶음에 포함된 단어들을 빈도에 따라 텍스트 크기를 비례적으로 표시한다.
* 전체 텍스트나 단어 목록 내에서 중요한 용어나 핵심 키워드, 또는 주제 등을 강조하는 용도로 사용된다.
* 'tag cloud'로도 불린다.
* {@link data} 대신 {@link text} 속성을 지정하면 단어들을 추출해서 data를 구성한다.
*
* {@link data}는 아래 형식들로 전달할 수 있다.
*
* ###### 단일값 또는 단일값 배열
* |형식|설명|
* |---|---|
* |[x, y,]|두 값 이상이면 순서대로 name, value값.
* 또는 {@link xField} 속성이 숫자이면 x값의 index.
* {@link yField}는 y값의 index.
{@link colorField}는 color값의 index.|
*
* ###### json 배열
* |Series 속성|설명 |
* |---|---|
* |{@link xField}|속성 값, 또는 'x', 'name', 'label' 속성들 중 순서대로 값이 설정된 것이 x 값이 된다.|
* |{@link yField}|속성 값, 또는 'y', 'value', 속성들 중 순서대로 값이 설정된 것이 y 값이 된다.|
* |{@link colorField}|속성 값, 또는 'color' 속성 값으로 데이터포인트의 개별 색상으로 지정된다.|
* |{@link iconField}|속성 값, 또는 'icon' 속성 값으로 데이터포인트의 개별 이미지가 지정된다.|
*
* // TODO #fiddle series/wordcloud-series WordCloud Series
* @css 'rct-wordcloud-series'
* @modules wordcloud
*/
interface WordCloudSeriesOptions extends WidgetSeriesOptions {
/**
* 표시할 단어들이 포함된 전체 텍스트.
* 이 속성에 비어 있지 않은 문자열이 설정되면 {@link data}는 무시된다.
*/
text?: string;
/**
* {@link text}에서 단어를 추출할 때 제외할 단어들을 배열로 지정한다.
*/
excludes?: string[];
/**
* {@link text}에서 단어를 추출한 후 표시할 단어들의 최대 개수.
* 빈도수가 작은 단어들이 제외된다.
*
* @default 100
*/
maxCount?: number;
/**
* 지정한 값을 log base로 한 로그 연산으로 값들을 계산한다.
* 2 이상 값으로 지정해야 한다.
*/
logBase?: number;
/**
* 배치된 전체 영역이 시리즈 영역보다 작은 경우 시리즈 크기에 맞게 확대한다.
*
* @default true
*/
autoScale?: boolean;
/**
* {@link text}에서 단어를 추출한 후 표시할 단어들의 최소 빈도수(데이터포인트 y값).
* 이 값 보다 작은 빈도수를 갖는 단어들은 표시되지 않는다.
*/
minWeight?: number;
/**
* {@link 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로 지정하면 단어 마다 다른 색으로 표시한다.
* 색상들은 {@link palette}나 {@link 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';
/**
* 단어 배치 최대 실행시간
* 단어 배치 알고리즘이 단어들을 모두 배치하기 위해 시도하는 최대 시간.
* 초과하면 배치를 중단한다.
* 밀리세컨드(ms) 단위로 지정한다.
* @default 5000
*/
drawTimeout?: number;
}
declare const PictogramSeriesType = "pictogram";
/**
* @private
*
* pictogram 시리즈 모델.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'pictogram'이다.
* 지정한 이미지 아이콘을 반복한다.
*/
interface PictogramSeriesOptions extends BasedSeriesOptions {
/** @dummy */
type?: typeof PictogramSeriesType;
/**
* 아이콘 이미지 url.
*/
iconUrl?: string;
/**
* 이 속성과 {@link iconHeight}를 모두 지정하지 않으면 축 설정에 따라 아이콘 표시 너비가 결정된다.
*/
iconWidth?: number;
/**
* 이 속성과 {@link iconWidth}를 모두 지정하지 않으면 축 설정에 따라 아이콘 표시 너비가 결정된다.
*/
iconHeight?: number;
/**
* @default 2
*/
iconGap?: number;
/**
* true면 값에 상관없이 모든 아이콘 이미지가 모두 그려지게 한다.
* @default false
*/
integral?: boolean;
/**
* @default 0.5
*/
integralThreshold?: number;
/**
* true로 지정하면 시리즈 방향과 무관하게 아이콘 방향을 유지한다.
*/
preserveIconOrientation?: boolean;
}
/**
* 화살 머리 종류.
* @enum
*/
declare const _PictorialBarMode: {
/**
* 이미지가 지정되면 'figure',
* svg가 지정되면 'both'로 적용된다.
*/
readonly AUTO: "auto";
/**
* 이미지나 svg의 비율을 유지하면서 아래 bar를 같이 표시한다.
*/
readonly BOTH: "both";
/**
* 아래쪽 bar 없이 이미지나 svg를 데이터포인트 높이와 너비에 맞게 비율을 조정해서 표시한다.
*/
readonly FIGURE: "figure";
};
/** @dummy */
type PictorialBarMode = typeof _PictorialBarMode[keyof typeof _PictorialBarMode];
declare const PictorialBarSeriesType = "pictorialbar";
/**
* pictorial bar 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'pictorialbar'이다.
* 데이터포인트 bar 위에 svg나 이미지로 데이터포인트와 관련된 그림(figure)을 표시한다.
*
* @modules pictogram
*/
interface PictorialBarSeriesOptions extends BarSeriesBaseOptions {
/** @dummy */
type?: typeof PictorialBarSeriesType;
/**
* svg나 이미지 figure와 bar를 표시하는 방식.
*
* @default 'auto'
*/
mode?: PictorialBarMode;
/**
* svg 단일 path 또는 path 목록.
* path 목록이면 모두 합쳐진 path로 그려진다.
* svg로 figure를 지정하면 데이터포인트의 'fill'이나 'stroke' 스타일을 따라간다.
* {@link figureByPoint}를 지정해서 데이터포인트별로 svg를 표시하려면
* {@link figureImage}에 복수 개로 지정한다.
*/
figurePath?: string | string[];
/**
* {@link figureImage} 목록이나, {@link figureField}로 설정된 모든 이미지 경로 앞에 추가되는 경로.
*/
figureImageRoot?: string;
/**
* figure 이미지 url 또는 url 배열.
* 데이터포인트 구성 json의 {@link figureField}로 지정한 속성에 이미지 index를 지정할 수 있다.
*/
figureImage?: string | string[];
/**
* true로 지정하면 {@link figureImage}가 배열인 경우, 데이터포인트 별로 {@link figureField}에 지정된 index나,
* 데이터포인트 index에 따라 자동 지정된다.
*/
figureByPoint?: boolean;
/**
* json 객체나 배열로 전달되는 데이터포인트 정보에서 figure 값을 지정하는 속성명이나 인덱스 또는,
* 전달되는 json 객체에서 figure 값을 리턴하는 함수.
* 지정하지 않거나(undefined) 값이 undefined이면, 데이터포인트의 값이 객체일 때 'figure' 속성 값이 사용된다.
*/
figureField?: string | number | Function;
/**
* 데이터포인트 bar 너비에 대한 figure의 상대 너비.
* 1이면 bar 너비와 동일한 크기로 figure의 너비가 표시된다.
* 0보다 큰 값으로 지정한다.
* 잘못된 값을 지정하면 1로 표시된다.
* 이렇게 결정된 너비에 맞게 figure의 높이가 자동 결정된다.
* figure의 높이가 데이터포인트 높이 보다 크면 bar 부분은 표시되지 않는다.
*
* @default '100%'
*/
figureWidth?: PercentSize;
/**
* figure와 bar 사이의 간격.
*
* @default 0
*/
figureGap?: number;
/**
* 지정한 반지름 크기로 데이터포인트 bar의 위쪽 모서리를 둥글게 표시한다.
* 최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.
* polar 차트에서는 동작하지 않는다.
*/
topRadius?: number;
/**
* 지정한 반지름 크기로 데이터포인트 bar의 아래쪽 모서리를 둥글게 표시한다.
* 최대값이 bar 폭으로 절반으로 제한되므로 아주 큰 값을 지정하면 반원으로 표시된다.
* polar 차트에서는 동작하지 않는다.
*/
bottomRadius?: number;
}
/**
* Pictorial 시리즈의 point label 옵션.
* position이 'default'이면 'inside'로 표시된다.
* 라벨들이 겹치면 값이 적은 것들 순서대로 감춘다.
*
*/
interface PictorialSeriesLabelOptions extends WidgetSeriesLabelOptions {
/**
* true로 지정하면 반대쪽(왼편)에 표시한다.
*/
opposite?: boolean;
}
declare const PictorialSeriesType = "pictorial";
/**
* pictorial 시리즈.
* {@link https://realchart.co.kr/docs/api/options/SeriesOptions#type type}은 'pictorial'이다.
* SVG 이미지 하나를 값에 따라 수평 또는 수직 방향의 여러 영역으로 분할해서 표시한다.
*
* @modules pictogram
*/
interface PictorialSeriesOptions extends WidgetSeriesOptions {
/** @dummy */
type?: typeof PictorialSeriesType;
/**
* @append
*/
pointLabel?: PictorialSeriesLabelOptions;
/**
* 이 값을 지정하지 않으면 데이터포인트들의 값을 모두 더한 것을 합계로 사용한다.
* 숫자 또는 '%'로 끝나는 데이터포인트 합계에 대한 백분율로 지정할 수 있다.
* 실제 합계 이하로 지정하면 무시한다.
* 각 데이터포인트들은 합계에 대한 비율 크기로 표시된다.
*/
total?: PercentSize;
/**
* svg 단일 path 또는 path 목록.
*/
figure?: string | string[];
/**
* Pictorial의 크기.
* 픽셀 크기나 {@link https://realchart.co.kr/config/config/body body} 영역 크기에 대한 상대적 크기로 지정할 수 있다.
* '100%'로 지정하면 plot 영역의 너비나 높이 중 작은 크기와 동일한 크기로 표시된다.
* 또, {@link width}나 {@link height}로 각각 다른 크기를 지정할 수도 있다.
*
* @default '90%'
*/
size?: PercentSize;
/**
* {@link Pictorial} 표시 너비를 pixel이나 body 너비에 대한 비율(%)로 지정한다.
* 이 크기를 지정하지 않으면 {@link size} 설정에 맞게 자동으로 적용된다.
* {@link size}도 지정되지 않았다면 {@link Pictorial}에 지정된 svg 크기대로 표시된다.
*/
width?: PercentSize;
/**
* {@link Pictorial} 표시 너비를 pixel이나 body 높이에 대한 비율(%)로 지정한다.
* 이 크기를 지정하지 않으면 {@link size} 설정에 맞게 자동으로 적용된다.
* {@link size}도 지정되지 않았다면 {@link Pictorial}에 지정된 svg 크기대로 표시된다.
*/
height?: PercentSize;
/**
* 데이터포인트 표시 방향.
*
* @default 'row'
*/
direction?: 'row' | 'column';
/**
* false면 {@link direction}이 'row'일 때 아래에서 위로, 아니면 왼쪽에서 오른쪽으로 배치된다.
* true면 반대로 배치된다.
*
* @default false
*/
reversed?: boolean;
}
interface RaceCallbackArgs {
race: any;
}
type RaceCallback = (args: RaceCallbackArgs) => void;
declare const RaceBarSeriesType = "racebar";
/**
* @ignore
* Race bar 시리즈.
*
* @css 'rct-racebar-series'
* @modules race
*/
interface RaceBarSeriesOptions extends BarSeriesOptions {
/** @dummy */
type?: typeof RaceBarSeriesType;
/**
* 표시되는 데이터포인트 최대 개수.
*
* @default 10
*/
raceCount?: number;
/**
* 데이터포인트가 사라지는 위치.
*/
outLocation?: any;
/**
* 데이터포인트가 새로 표시되는 위치.
*/
inLocation?: any;
/**
* @default 1000
*/
updateInterval?: number;
/**
* 데이터포인트가 사라지는 애니메이션 동작 기간을 밀리초단위로 지정한다.
*
* @default 1000
*/
outDuration?: number;
/**
* 데이터포인트가 새로 표시되는 애니메이션 동작 기간을 밀리초단위로 지정한다.
*
* @default 1000
*/
inDuration?: number;
onRaceStart?: RaceCallback;
onRace?: RaceCallback;
onRaceStop?: RaceCallback;
}
declare const RaceLineSeriesType = "raceline";
/**
* @ignore
* Race line 시리즈.
*
* @css 'rct-raceline-series'
* @modules race
*/
interface RaceLineSeriesOptions extends LineSeriesOptions {
/** @dummy */
type?: typeof RaceLineSeriesType;
/**
* @default 1000
*/
updateInterval?: number;
onRaceStart?: RaceCallback;
onRace?: RaceCallback;
onRaceStop?: RaceCallback;
}
/** @enum */
declare const _CandlestickSeriesTypes: {
readonly CandlestickSeriesType: "candlestick";
readonly OhlcSeriesType: "ohlc";
};
/** @dummy */
type CandlestickSeriesTypes = typeof _CandlestickSeriesTypes[keyof typeof _CandlestickSeriesTypes];
/** @enum */
declare const _AreaSeriesTypes: {
readonly AreaSeriesType: "area";
readonly BellCurveSeriesType: "bellcurve";
};
/** @dummy */
type AreaSeriesTypes = typeof _AreaSeriesTypes[keyof typeof _AreaSeriesTypes];
/** @enum */
declare const _LineSeriesTypes: {
readonly LineSeriesType: "line";
readonly AreaSeriesType: "area";
readonly SplineSeriesType: "spline";
readonly BellCurveSeriesType: "bellcurve";
readonly RaceLineSeriesType: "raceline";
};
/** @dummy */
type LineSeriesTypes = typeof _LineSeriesTypes[keyof typeof _LineSeriesTypes];
/** @enum */
declare const _BarSeriesTypes: {
readonly BarSeriesType: "bar";
readonly RaceBarSeriesType: "racebar";
};
/** @dummy */
type BarSeriesTypes = typeof _BarSeriesTypes[keyof typeof _BarSeriesTypes];
/** @dummy */
type SeriesOptionsType = SeriesOptions | SeriesGroupOptions | BarRangeSeriesOptions | BarSeriesOptions | BarSeriesGroupOptions | BellCurveSeriesOptions | BoxPlotSeriesOptions | BubbleSeriesOptions | BumpSeriesGroupOptions | CandlestickSeriesOptions | CircleBarSeriesOptions | CircleBarSeriesGroupOptions | DumbbellSeriesOptions | EqualizerSeriesOptions | ErrorBarSeriesOptions | FunnelSeriesOptions | HistogramSeriesOptions | AreaRangeSeriesOptions | AreaSeriesOptions | AreaSeriesGroupOptions | LineSeriesOptions | LineSeriesGroupOptions | SplineSeriesOptions | LollipopSeriesOptions | OhlcSeriesOptions | ParetoSeriesOptions | PieSeriesOptions | PieSeriesGroupOptions | ScatterSeriesOptions | WaterfallSeriesOptions | TreemapSeriesOptions | HeatmapSeriesOptions | VectorSeriesOptions | WordCloudSeriesOptions | PictogramSeriesOptions | PictorialBarSeriesOptions | PictorialSeriesOptions;
/**
* @private
*
* //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;
}
/**
* @private
*
* '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;
private _options2;
constructor(format: string);
get format(): string;
toStr(value: number | bigint): string;
toNum(value: number): number;
private $_parse;
}
/** @private */
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;
}
/**
* @private
*
* 값이 문자형일 때 텍스트 변경 형식.
* 세미콜론(;)으로 구분되는 형식. 두개의 문자열은 각각 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;
}
/**
* @private
*/
declare enum TextAnchor {
START = "start",
MIDDLE = "middle",
END = "end"
}
/**
* @private
*/
declare enum TextLayout {
TOP = "top",
MIDDLE = "middle",
BOTTOM = "bottom"
}
/**
* @private
*/
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;
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 _vertical;
_isVertical: boolean;
private _lines;
constructor(format?: string);
setFormat(value: string): void;
lines(): SvgLine[];
/**
* TODO: max width
*/
build(tv: TextElement, maxWidth: number, maxHeight: number, target: any, domain: IRichTextDomain): void;
buildVertical(tv: 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;
}
/**
* 차트 제목(title) 설정 옵션.
* 기본적으로 차트 중앙 상단에 표시되지만 {@link align}, {@link verticalAlign} 등으로 위치를 변경할 수 있다.
* 별도 설정이 없으면 'Title' 문자열이 표시된다. 또, {@link https://realchart.co.kr/config/config/subtitle 부제목}을 별도로 표시할 수 있다.
*
* ```js
* const config = {
* title: {
* text: '2024 년간 자료 현황',
* align: 'left',
* ...
* },
* };
* ```
*
* {@link https://realchart.co.kr/guide/title 타이틀 개요} 페이지를 참조한다.
*
* @css 'rct-title'
*/
interface TitleOptions extends ChartItemOptions {
/**
* @append
*
* true로 설정되고 {@link text}가 설정된 경우에만 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 제목 텍스트.
*
* @default 'Title'
*/
text?: string;
/**
* 정렬 기준.
* 시리즈들이 그려지는 plotting 영역이나,
* 차트 전체 영역을 기준으로 할 수 있다.
* 또, {@link https://realchart.co.kr/config/config/subtitle 부제목}인 경우 제목을 기준으로 위치를 지정할 수 있다.
*
* @default 'body'
*/
alignBase?: AlignBase;
/**
* 수평 정렬.
*
* @default 'center'
*/
align?: Align;
/**
* 수직 정렬.
*
* @default 'middle'
*/
verticalAlign?: VerticalAlign;
/**
* 배경 {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 주 제목과 부 제목이 표시되는 영역과 차트 본체 등 과의 간격.
* 주 제목이 표시되면 (부 제목의 값은 무시되고)주 제목의 값을 사용하고,
* 부 제목만 표시될 때는 부 제목의 값을 사용한다.
*
* @default 10
*/
gap?: number;
/**
* 설정에 따라 정해진 표시 위치에서 떨어진 수평 간격.
*
* @default 0
*/
offset?: number;
}
/**
* 부제목 표시 위치.
* @enum
*/
declare const _SubtitlePosition: {
/**
* 주제목 아래쪽에 표시.
*
*
*/
readonly BOTTOM: "bottom";
/**
* 주제목 오른쪽 공간에 표시.
*
*
*/
readonly RIGHT: "right";
/**
* align 속성과 subtitle.offset 속성을 무시하고 주제목 오른쪽에 표시된다.
*
*
*/
readonly RIGHT_SIDE: "rightSide";
/**
* 주제목 왼쪽 공간에 표시.
*
*
*/
readonly LEFT: "left";
/**
* align 속성과 subtitle.offset 속성을 무시하고 주제목 왼쪽에 표시된다.
*
*
*/
readonly LEFT_SIDE: "leftSide";
/**
* 주제목 위쪽에 표시.
*
*
*/
readonly TOP: "top";
};
/** @dummy */
type SubtitlePosition = typeof _SubtitlePosition[keyof typeof _SubtitlePosition];
/**
* 차트 제목 주위에 표시되는 부제목 옵션.
* 기본적으로 주제목(title)의 설정을 따르고, 몇가지 속성들이 추가된다.
* 별도 설정이 없으면 표시되지 않는다.
*
* ```js
* const config = {
* title: {},
* subtitle: {
* visible: true,
* text: '출처: UN Data, 2020',
* },
* };
* ```
*
* {@link https://realchart.co.kr/guide/title 제목 개요} 페이지를 참조한다.
*
* @css 'rct-subtitle'
*/
interface SubtitleOptions extends TitleOptions {
/**
* 표시 위치.
*
* @default 'bottom'
*/
position?: SubtitlePosition;
/**
* 주 제목과 사이의 간격.
*
* @default 2
*/
titleGap?: number;
/**
* @append
*
* @default 'bottom'
*/
verticalAlign?: VerticalAlign;
/**
* @append
*
* @default ''
*/
text?: string;
/**
* @append
*
* {@link position}가 'leftSide' 이거나 'rightSide'인 경우 해당 속성은 무시된다.
*
* @default 0
*/
offset?: number;
}
/**
* 차트 전체에 영향을 미치는 옵션들.
*
* ```js
* const config = {
* chart: {
* theme: 'dark',
* },
* };
* ```
*
*/
interface ChartOptionsOptions extends ChartItemOptions {
/**
* @ignore
*/
canOverflow?: boolean;
/**
* theme 이름.
* **realreport-style.css**에 기본 theme이 정의되어 있다.
*/
theme?: string;
/**
* 시리즈 및 데이터포인트에 적용되는 기본 색상 팔레트 이름.
*/
palette?: string;
/**
* {@link palette}로 지정된 팔레트 색상들을 시리즈에 적용하는 방식.
*
* @default 'normal'
*/
paletteMode?: PaletteMode;
/**
* 시리즈 옵션 colorByPoint가 true일 때 적용되는 데이터포인트들의 색상 목록.
* 시리즈 옵션 colors가 지정되면 이 속성은 무시된다.
*/
colors?: string[];
/**
* false로 지정하면 차트 전체척으로 animation 효과를 실행하지 않는다.
*
* @default true
*/
animatable?: boolean;
/**
* false로 지정하면 차트 전체에서 마우스 hover 상호작용을 비활성화한다.
* tooltip, pointHovering, seriesHovering, crosshair 등 hover 기반 기능이 모두 작동하지 않는다.
*
* @default true
*/
hoverable?: boolean;
/**
* false로 지정하면 차트 전체에서 마우스 click 상호작용을 비활성화한다.
* onPointClick, 범례 클릭, annotation 클릭 등 클릭 기반 기능이 모두 작동하지 않는다.
*
* @default true
*/
clickable?: 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값.
* 이 후에는 {@link xStep}씩 증가시키면서 설정한다.
* 시리즈의 {@link Series.xStart xStart}가 설정되면 그 값이 사용된다.
* 값이 지정되지 않으면 'log' 축일 때 1, 아니면 0으로 계산된다. // #528
*/
xStart?: number;
/**
* x축 값이 설정되지 않은 데이터 point에 지정되는 x값의 간격.
* 첫번째 값은 {@link xStart}로 설정한다.
* time 축일 때, 정수 값 대신 시간 단위('y', 'm', 'd', 'h', 'n', 's')로 지정할 수 있다.
* 시리즈의 {@link Series.xStep xStep}이 설정되면 그 값이 사용된다.
*
* @default 1
*/
xStep?: number | string;
/**
* 복수 axis가 표시되는 경우 axis 사이의 간격.
*
* @default 8
*/
axisGap?: number;
/**
* @deprecated v1.3.15 이후로, {@link https://realchart.co.kr/config/config/credits credits}으로 대신 설정한다.
*
* 크레딧 모델.
*/
credits?: CreditsOptions | string | boolean;
/**
* 데이터포인트에 마우스가 올라가면 나머지 시리즈들을 반투명 처리해서 연결된 데이터포인트의 시리즈를 강조한다.
*
* @default false
*/
seriesHovering?: boolean;
/**
* 데이터포인트에 마우스가 올라갈 때 처리하는 방식.
*
*/
pointHovering?: PointHoveringOptions;
/**
* 차트 div 크기가 변경됐을 때 지정한 시간(밀리초) 이후에 다시 그린다.
* 0 이하면 대기 없이 바로 다시 그리기를 요청한다.
*
* @default 50 밀리초
*/
resizeDelay?: number;
}
/**
* @css 'rct-body-image'
*/
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];
/**
* @css 'rct-reset-zoom'
*/
interface ZoomButtonOptions extends ChartItemOptions {
/**
* @append
*
* 명시적 false로 지정한 경우가 아닐 때,
* 이미 zoom된 상태이거나, zoom 가능하면 표시된다.
* @default undefined
*/
visible?: boolean;
}
/**
* polar {@link innerRadius} 도넛 구멍 내부 텍스트 설정 옵션.
* @css 'rct-polar-body-inner'
*/
interface PolarInnerTextOptions extends IconedTextOptions {
}
/**
* @css 'rct-empty-view'
*/
interface EmptyViewOptions extends ChartTextOptions {
/**
* @append
*
* false로 지정하면 표시돼야할 상황에서도 표시되지 않는다.
*
* @default undefined
*/
visible?: boolean;
/**
* @append
*
* 표시할 텍스트.
* 지정하지 않으면 ''표시할 데이터가 없습니다.'가 표시된다.
* 또, 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의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: object;
/**
* Series 객체 배열
*/
series: object[];
/**
* zoom 영역 xAxis 시작 값
*/
from: number;
/**
* zoom 영역 xAxis 끝 값
*/
to: number;
}
/**
* {@link BodyDepth.depth depth}가 지정된 body 영역의 양 축 방향에 표시되는
* {@link https://realchart.co.kr/config/config/body#xside side} panel의 경계선 설정 옵션.
*/
interface BodyDepthLineOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
}
/**
* {@link BodyDepth.depth depth}가 지정된 body 영역의 양 축 방향에 표시되는 side panel 설정 옵션.
*
* @css 'rct-body-depth-side'
*/
interface BodyDepthSideOptions extends ChartItemOptions {
/**
* depth side 바깥 경계선 설정 옵션.
*/
line?: BodyDepthLineOptions | boolean;
/**
* depth side 양 끝에서 body 쪽으로 연결하는 선 설정 옵션.
*/
endLine?: BodyDepthLineOptions | boolean;
/**
* depth side에 표시되는 axis grid 선 설정 옵션.
*/
gridLine?: BodyDepthLineOptions | boolean;
}
/**
* body 깊이 설정 옵션.
* x 축이고 첫번째 연결된 시리즈가 depth가 설정된 {@link https://realchart.co.kr/config/config/series/bar bar} 시리즈를 표시할 때, 축 깊이를 설정한다.
* 차트나 분할 pane에 연결된 첫번째 x축일 때만 의미가 있다.
*
* @css 'rct-body-depth'
*/
interface BodyDepthOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
/**
* 픽셀 단위의 body 깊이.
*
* @default 24
*/
length?: number;
/**
* 30 ~ 60도 사이로 지정할 수 있다.
*
* @default 32
*/
angle?: number;
/**
* x축 방향 depth side panel 설정 옵션.
*/
xSide?: BodyDepthSideOptions;
/**
* y축 방향 depth side panel 설정 옵션.
*/
ySide?: BodyDepthSideOptions;
/**
* 원점에서 depth side 끝까지 연결하는 선 설정 옵션.
*/
orgLine?: BodyDepthLineOptions | string | boolean;
}
/**
* {@link https://realchart.co.kr/config/config/base/series 시리즈}나 {@link https://realchart.co.kr/config/config/base/gauge 게이지}들이 그려지는 영역 설정 옵션.
* 전체 차트에서 {@link https://realchart.co.kr/config/config/title 타이틀}, {@link https://realchart.co.kr/config/config/legend 범례},
* 외부 {@link https://realchart.co.kr/config/config/base/annotation 어노테이션}들을 제외한 영역이다.
* 특히, {@link https://realchart.co.kr/config/config/#polar 극좌표계} 또는 {@link https://realchart.co.kr/config/config/series/pie pie}나 {@link https://realchart.co.kr/config/config/series/funnel funnel} 시리즈는
* 이 영역을 기준으로 크기와 위치를 설정한다.
*
* ```js
* const chart = {
* body: {
* radius: '40%',
* circular: false,
* },
* };
* ```
*
* @css 'rct-body'
*/
interface BodyOptions extends ChartItemOptions {
/**
* {@link https://realchart.co.kr/config/config/#polar 극좌표계} 차트일 때 반지름.
*
* @default '45%'
*/
radius?: PercentSize;
/**
* {@link https://realchart.co.kr/config/config/#polar 극좌표계} 차트일 때 플롯 영역의 안쪽 반지름.
* 0보다 큰 값을 지정하면 {@link radius}와 함께 도넛 형태의 polar 플롯 영역이 된다.
* {@link https://realchart.co.kr/config/config/series/pie pie}의 {@link innerRadius}와 같이, 바깥 {@link radius}에 대한 상대 크기(%)나 픽셀 수로 지정할 수 있다.
* y축 최솟값은 이 반지름 위치에 매핑된다.
*
* @default 0
*/
innerRadius?: PercentSize;
/**
* {@link innerRadius}가 0보다 클 때, polar 플롯 중앙(도넛 구멍)에 표시되는 텍스트.
* {@link https://realchart.co.kr/config/config/series/pie pie}의 {@link innerText}와 동일한 형식이다.
* 기본 클래스 selector는 'rct-polar-body-inner'이다.
*/
innerText?: PolarInnerTextOptions;
/**
* {@link https://realchart.co.kr/config/config/#polar 극좌표계} 차트일 때 중심 x 좌표.
*
* @default '50%'
*/
centerX?: PercentSize;
/**
* {@link https://realchart.co.kr/config/config/#polar 극좌표계} 차트일 때 중심 y 좌표.
*
* @default '50%'
*/
centerY?: PercentSize;
/**
* false이면 {@link https://realchart.co.kr/config/config/#polar 극좌표계} 차트일 때, x 축선과 y축 그리드 선들을 다각형으로 표시한다.
*
* @default true
*/
circular?: boolean;
/**
* 배경 이미지 설정 옵션.
*/
image?: BackgroundImageOptions;
/**
* 차트에 표시할 데이터가 존재하지 않을 때 표시되는 메시지 view.
*/
emptyView?: EmptyViewOptions | boolean;
/**
* plot 영역 마우스 드래깅을 통한 zooming 방식.
*
* @default 'none'
*/
zoomType?: ZoomType;
/**
* Zoom 리셋 버튼 설정 옵션.
*/
zoomButton?: ZoomButtonOptions;
/**
* body 영역 내에 표시되는 어노테이션 옵션.
* 옵션 객체 또는 옵션 객체 배열로 여러 어노테이션을 설정할 수 있다.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 'annotations' 설정이 존재하면 load 후 이 속성으로 설정한다.
*
* @expandable
*/
annotation?: AnnotationOptionsType | AnnotationOptionsType[];
/**
* zoom 될 때 호출되는 이벤트 콜백
*/
zoomCallback?: (series: ZoomCallbackArgs) => void;
/**
* 깊이 설정 옵션.
* 0보다 큰 숫자로 지정하면 {@link https://realchart.co.kr/docs/api/options/AxisDepthOptions/visible visible}을 true로 설정하고,
* {@link https://realchart.co.kr/docs/api/options/BodyDepthOptions/length length}를 지정하는 것과 동일하다.
* [주의] 이 값이 지정되면 {@link https://realchart.co.kr/docs/api/options/AxisTickOptions/length length} 설정은 무시된다.
*/
depth?: BodyDepthOptions | number | boolean;
}
/**
* @css 'rct-navigator-handle'
*/
interface NavigiatorHandleOptions extends ChartItemOptions {
}
/**
* @css 'rct-navigator-mask'
*/
interface NavigiatorMaskOptions extends ChartItemOptions {
}
/**
* 시리즈 내비게이터 설정 옵션.
* 내비게이터에 표시되는 시리즈는 기본적으로 {@link https://realchart.co.kr/config/config/series/area area} 시리즈로 표시되지만,
* {@link https://realchart.co.kr/config/config/series/line line}, {@link https://realchart.co.kr/config/config/series/area area},
* {@link https://realchart.co.kr/config/config/series/bar bar} 시리즈로 지정할 수도 있다.
* 내비게이터의 x축 종류는 명시적으로 설정하지 않으면 소스 시리즈의 x축 type을 따라간다.
* y축은 항상 {@link https://realchart.co.kr/config/config/yAxis/linear linear}로 생성된다.
*
* @css 'rct-navigator'
*/
interface SeriesNavigatorOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
/**
* Navigator 시리즈의 data나 축 범위를 제공하는 본 시리즈의 이름이나 index.
*
*/
source?: string;
/**
* true로 지정하면 {@link source}로 지정한 원본 시리즈로부터 내비게이터 시리즈의 데이터포인트들을 생성할 때,
* 원본 시리즈의 data로 지정된 값들을 사용하고, 내비게이터 시리즈의 yField를 원본과 다르게 지정할 수도 있다.
* 기본값 false일 때는 이미 생성된 원본 데이터포인트의 x, y 값을 사용한다.
* // #431
*
* @default false
*/
usePointSource?: boolean;
/**
*/
handle?: NavigiatorHandleOptions;
/**
*/
mask?: NavigiatorMaskOptions;
/**
*/
borderLine?: ChartItemOptions;
/**
* Navigator에 표시되는 시리즈 모델
* 기본적으로 'area' 시리즈로 표시되지만,
* 'line', 'area', 'bar' 시리즈로 지정할 수도 있다.
* data는 {@link 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 = {
* chart: {
* credits: {
* text: 'UN Data',
* url: 'https://data.un.org'
* },
* },
* };
* ```
*
*
* @css 'rct-credits'
*/
interface CreditsOptions extends ChartItemOptions {
/**
* 제작자 이름 등 표시 텍스트.
*
* @default 'RealChart v1.4'
*/
text?: string;
/**
* 영역을 클릭했을 때, 이 속성에 지정한 곳으로 새 페이지를 연다.
*
* @default 'https://realchart.co.kr'
*/
url?: string;
/**
* true로 지정하면 별도의 영역을 차지하지 않고 차트 본체 내부에 위치한다.
* {@link align}이 'center'이고 {@link verticalAlign}이 'middle'일 때도
* 본체 내부에 표시된다.
*
* @default false
*/
floating?: boolean;
/**
* 차트 영역 내에서 credits의 수평 정렬.
*
* @default 'right'
*/
align?: Align;
/**
* 차트 영역 내에서 credits의 수직 정렬.
*
* @default 'bottom'
*/
verticalAlign?: VerticalAlign;
/**
* 설정에 따라 정해진 표시 위치에서 떨어진 수평 간격.
* {@link floating}이 true가 아니고,
* 오른쪽 중앙에 표시되는 경우에는 credits 표시 영역 계산 시 너비에 포함된다.
*
* @default 2
*/
offsetX?: number;
/**
* 설정에 따라 정해진 표시 위치에서 떨어진 수직 간격.
* {@link floating}이 true가 아니고,
* 중앙에 표시되는 경우가 아니면 credits 표시 영역 계산 시 높이에 포함된다.
*
* @default 1
*/
offsetY?: number;
/**
* {@link floating}이 true가 아니고, 오른쪽 아래 또는 오른쪽 가운데에 표시될 때,
* 차트 나머지 영역과의 간격.
*
* @default 4
*/
gap?: number;
}
/**
* 데이터포인트 hover시 동일한 효과를 표시할 연관된 포인트들을 선택하는 방식.
*
* @enum
*/
declare const _PointHoverScope: {
/**
* hover된 데이터포인트의 상태에 따라 자동으로 결정한다.
* {@link ChartOptionsOptions.seriesHovering seriesHovering}이 true이면 'point',
* 데이터포인트의 x축에 'crosshair'가 동작 중이면 'axis',
* 데이터포인트가 series group에 포함된 경우이면 'group',
* 아니면 'point'가 된다.
*
*
*/
readonly AUTO: "auto";
/**
* 마우스 아래 있는 데이터포인트만 효과가 표시된다.
*
*
*/
readonly POINT: "point";
/**
* 마우스 아래 있는 데이터포인트와 같은 series group에 포함된 데이터포인트들을 모두 선택한다.
*
*
*/
readonly GROUP: "group";
/**
* 마우스 아래 있는 데이터포인트와 같은 x축에 연결되고 x값이 같은 데이터포인트들을 모두 선택한다.
*
*
*/
readonly AXIS: "axis";
};
/** @dummy */
type PointHoverScope = typeof _PointHoverScope[keyof typeof _PointHoverScope];
/**
* 데이터포인트에 마우스가 올라갈 때 처리하는 방식 설정 옵션.
*
* @css 'rct-point-hover'
*/
interface PointHoveringOptions extends ChartItemOptions {
/**
* 데이터포인트 hover시 동일한 효과를 표시할 연관된 포인트들을 선택하는 범위.
*
* @default 'auto'
*/
scope?: PointHoverScope;
/**
* {@link https://realchart.co.kr/config/config/series/line line},
* {@link https://realchart.co.kr/config/config/series/bubble bubble},
* {@link https://realchart.co.kr/config/config/series/scatter scatter} 시리즈처럼 marker로 표시되는 데이터포인트의 위치를 찾을 때
* 데이터포인트 marker 외부로 추가되는 가상의 두께.
* 0이하면 표시되는 크기로 계산된다.
* 상당히 큰 크기로 지정하면 마우스가 어느 위치에 있든 마우스에 가장 가까운 marker가 찾아진다.
* 물론 마우스가 실제 표시되는 marker 위에 있다면 그 것으로 결정된다.
* 찾아진 데이터포인트가 마우스 아래 있는 것으로 여겨져서 hover 효과가 표시되거나 관련 이벤트가 발생한다.
* 기본값은 차트에 tooltip이 표시되고 tooltip.{@link https://realchart.co.kr/config/config/tooltip#followpointer followPointer}가 true이면 차트 크기보다 큰 값이 되고,
* 아니면 **30** 픽셀이다.
*
*/
hintDistance?: number;
}
/**
* 툴팁에 표시할 데이터포인트들을 선택하는 방식.
*
* @enum
*/
declare const _TooltipScope: {
/**
* {@link https://realchart.co.kr/config/config/chart/pointHovering#scope scope}와 동일한 규칙으로 툴팁에 포함할 데이터포인트 범위를 결정한다.
* 기본값이며, pointHovering이 `'auto'`이면 crosshair·시리즈 그룹·seriesHovering 설정에 따라
* `'point'`, `'group'`, `'axis'` 중 하나로 해석된다.
*/
readonly HOVER: "hover";
/**
* hover된 시리즈 하나의 데이터포인트만 툴팁에 표시한다.
* 해당 시리즈의 {@link https://realchart.co.kr/config/config/base/series#tooltiptext tooltipText} 등이 사용된다.
*/
readonly POINT: "point";
/**
* hover된 시리즈가 시리즈 그룹에 포함된 경우, 그룹에 속한 시리즈들의 동일 x(카테고리) 값
* 데이터포인트를 한 툴팁에 표시한다.
* 그룹이 아니면 `'point'`와 같이 해당 시리즈만 표시된다.
*/
readonly GROUP: "group";
/**
* hover된 시리즈가 연결된 x축의 모든 visible 시리즈 중, 동일 x(카테고리) 값을 갖는
* 데이터포인트를 한 툴팁에 표시한다.
* x축의 {@link https://realchart.co.kr/config/config/base/axis#tooltipheader tooltipHeader}, {@link https://realchart.co.kr/config/config/base/axis#tooltiprow tooltipRow} 등이 사용된다.
*/
readonly AXIS: "axis";
};
/** @dummy */
type TooltipScope = typeof _TooltipScope[keyof typeof _TooltipScope];
/**
* 데이터포인트 뷰에 마우스가 올라가면 표시되는 툴팁 상자 옵션.
* {@link https://realchart.co.kr/guide/tooltip 툴팁 개요} 페이지를 참조한다.
*
* @css 'rct-tooltip'
*/
interface TooltipOptions extends ChartItemOptions {
/**
* true로 지정하면 Chart영역을 벗어나도 표시된다.
* ie11에서는 클리핑이 제대로 동작하지 않으므로 항상 true로 설정된다.
*
* @default false
*/
noClip?: boolean;
/**
* 하나의 툴팁으로 표시할 범위.
*
* @default 'hover'
*/
scope?: TooltipScope;
/**
* 툴팁에 표시할 텍스트 형식.
* 시리즈에 {@link https://realchart.co.kr/config/config/base/series#tooltiptext tooltipText}가 시리즈 별 tooltip을 제공하지만,
* 이 속성이 지정된 경우 우선 사용된다.
*
* `${param;default;format}` 형식으로 아래과 같은 변수로 데이터 포인트 및 시리즈 값을 지정할 수 있다.
* |변수|설명|
* |---|---|
* |series|시리즈 이름|
* |name|포인트 이름. 포인트가 속한 카테고리 이름이거나, 'x' 속성으로 지정한 값|
* |x|'x' 속성으로 지정한 값|
* |y|'y' 속성으로 지정한 값|
* |xValue|계산된 x값|
* |yValue|계산된 y값|
*
*/
text?: string;
/**
* 목표 지점과 tooltip 사이의 간격.
*
* @default 8
*/
offset?: number;
/**
* 툴팁이 점진적으로 닫히는 시간을 밀리초 단위로 지정한다.
*
* @default 700
*/
hideDelay?: number;
/**
* 툴팁의 최소 너비.
*
* @default 100
*/
minWidth?: number;
/**
* 툴팁의 최소 높이.
*
* @default 40
*/
minHeight?: number;
/**
* true이면 툴팁 상자가 마우스 포인터를 따라 다닌다.
*
* false, true를 명시적으로 지정하지 않으면 시리즈 종류에 따라 자동 설정된다.
* ex) pie 시리즈는 true, bar 시리즈는 false가 된다.
*
*/
followPointer?: boolean;
/**
* 툴팁 텍스트 속 숫자 값이 NaN일 때 대신 표시되는 텍스트.
*
* @default ''
*/
nanText?: string;
/**
* 툴팁에 표시될 숫자값의 기본 형식.
* {@link text}예 표시 문자열을 지정할 때 `${yValue;;#,###.0}`와 같은 식으로 숫자 형식을 지정할 수 있다.
*
* @default ',#.##'
*/
numberFormat?: string;
/**
* 툴팁에 표시될 날짜(시간)값의 기본 형식.
* {@link text}예 표시 문자열을 지정할 때 `${x;;yyyy.MM}`와 같은 식으로 날짜(시간) 형식을 지정할 수 있다.
*
* @default 'yyyy-MM-dd'
*/
timeFormat?: string;
/**
* 툴팁 헤더의 높이.
* 0 이하의 값을 설정할 경우 표시되지 않는다.
*
* @default 7
*/
headerHeight?: number;
/**
* 툴팁 꼬리 크기.
* 0 이하의 값을 설정할 경우 표시되지 않는다.
*
* @default 10
*/
tailSize?: number;
/**
* 툴팁 모서리의 굴곡 설정.
*
* @default 5
*/
borderRadius?: number;
/**
* true 이면 {@link headerHeight}, {@link tailSize}, {@link borderRadius}에 각각 0을 지정한 것과 같다.
*
* @default false
*/
simpleMode?: boolean;
/**
* 리스트 모드로 표시될 때, 툴팁 텍스트와 상세 텍스트 사이의 간격.
*
* @default 12
*/
listGap?: number;
/**
* 리스트 모드로 표시될 때, 항목들 사이의 간격.
*
* @default 3
*/
listRowGap?: number;
/**
* 리스트 모드로 표시될 때, 마커 모양.
* 'none'으로 지정하면 마커를 표시하지 않는다.
*
* @default 'circle'
*/
listMarkerShape?: TooltipMarkerShape;
/**
* 리스트 모드로 표시될 때, 마커 크기.
*
* @default 8
*/
listMarkerSize?: number;
/**
* 리스트 모드로 표시될 때, 마커와 텍스트 간격.
*
* @default 5
*/
listMarkerGap?: number;
}
/**
* legend 아이템들이 클릭 될 때 호출되는 콜백의 매개변수로 사용된다.
*/
interface LegendItemCallbackArgs {
/**
* RealChart의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: object;
/**
* legend 아이템에 연결된 시리즈 또는 데이터 포인트
*/
source: object;
}
/**
* @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];
/**
* 차트 시리즈 구성 등을 직관적으로 이해할 수 있도록 도와주는 범례 설정 옵션.
* 시리즈나 데이터포인트 등의 이름과 심볼을 같이 표시할 수 있다.
* {@link visible} 기본값이 undefined이고,
* 따로 지정하지 않으면 시리즈가 둘 이상 포함돼야 legend가 표시된다.
* {@link https://realchart.co.kr/guide/legend 범례 개요} 페이지를 참조한다.
*
* @css 'rct-legend' legend 기본 class.
*/
interface LegendOptions extends ChartItemOptions {
/**
* legend 이름.
* 동적으로 legend를 다루기 위해서는 반드시 지정해야 한다.
*/
name?: string;
/**
* {@link location}이 'body'이고 분할 모드일 때, legend가 표시될 body를 포함하는 pane의 수직 index.
* 지정하지 않으면 0.
*/
row?: number;
/**
* {@link location}이 'body'이고 분할 모드일 때, legend가 표시될 body를 포함하는 pane의 수평 index.
* 지정하지 않으면 0.
*/
col?: number;
/**
* @append
*
* 명시적 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;
/**
* {@link 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;
/**
* 수평 {@link layout 배치}일 때,
* 최대 너비를 픽셀 단위의 크기 혹은 body 너비에 대한 상대 길이를 '%'로 지정한다.
*/
maxWidth?: PercentSize;
/**
* 수직 {@link layout 배치}일 때,
* 최대 높이를 픽셀 단위의 크기 혹은 body 높이에 대한 상대 길이를 '%'로 지정한다.
*/
maxHeight?: PercentSize;
/**
* 수평 배치.
* 값을 지정하지 않으면, 기본값이 {@link location}이 'body'일 때는 'left',
* 'left', 'right'일 때는 'center'이다.
*/
align?: Align;
/**
* 수직 배치.
* 값을 지정하지 않으면, 기본값이 {@link 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;
/**
* legend 아이템이 클릭 될 때 호출되는 이벤트 콜백
* 리턴 값이 false일 경우 아이템에 연결된 시리즈나 데이터 포인트의 visible 값이 변경되지 않는다.
*/
onLegendItemClick?: (args: LegendItemCallbackArgs) => boolean | undefined;
}
/**
* 분할(split) 모드에서 개별 pane 설정 옵션.
*/
interface PaneOptions extends ChartItemOptions {
/**
* 이 pane의 행(row) 인덱스.
*/
row?: number;
/**
* 이 pane의 열(col) 인덱스.
*/
col?: number;
/**
* 이 분할 pane의 body 설정 옵션.
*/
body?: PaneBodyOptions;
/**
* 이 분할 pane의 legend 설정 옵션.
* {@link https://realchart.co.kr/config/config/legend#location location}은 항상 'body'로 적용된다.
* 또, 이 legend에 표시된 시리즈는 다른 legend에 표시될 수 없고,
* visible을 true로 설정하지 않으면 이 pane에 표시되는 시리즈들은
* chart {@link https://realchart.co.kr/config/config/legend 기본 legend}에 연결된다.
*/
legend?: LegendOptions;
}
/**
* 분할(split) 모드에서 개별 pane의 body 설정 옵션.
*/
interface PaneBodyOptions extends BodyOptions {
/**
* true로 지정하면 chart loading시 이 설정에 포함되지 않은 속성들을 차트 기본 body의 설정에서 가져온다.
* @default true
*/
extended?: boolean;
}
/**
* 분할(split) 모드 설정 옵션.
* 각 pane에 해당하는 x, y축이 반드시 존재해야 한다.
* axis는 {@link https://realchart.co.kr/config/config/base/axis#row row}, {@link https://realchart.co.kr/config/config/base/axis#col col} 속성으로 위치를 지정한다.
* 시리즈는 {@link https://realchart.co.kr/config/config/base/series#xaxis xAxis}, {@link https://realchart.co.kr/config/config/base/series#yaxis yAxis} 설정에 따라 연결된 axis 위치에 따라 자동으로 결정된다.
*
* @modules split
* @css 'rct-panes'
*/
interface SplitOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
/**
* true로 지정하면 chart loading시 분할 pane들의 body에 설정하지 않은 속성들을 차트 기본 body의 설정에서 가져오도록 한다.
* 각 pane의 body 설정에서 별도로 지정할 수 있다.
*
* @default true
*/
extendBody?: boolean;
/**
* y축 방향 분할 수를 지정한다.
* //숫자로 지정하면 동일한 높이를 갖는 pane들로 표시된다.
* //배열로 지정하면 각 항목은 고정 크기 숫자, 혹은 '*'로 끝나는 상대 크기.
*
*/
rows?: number | (number | `${number}*` | '*')[];
/**
* x축 방향 분할 수를 지정한다.
* //숫자로 지정하면 동일한 너비를 갖는 pane들로 표시된다.
* //배열로 지정하면 각 항목은 고정 크기 숫자, 혹은 '*'로 끝나는 상대 크기.
*
* @default 1
*/
cols?: number | (number | `${number}*` | '*')[];
/**
* @default 0
*/
gap?: number;
/**
* 분할 pane별 개별 설정 옵션 목록.
* 각 항목은 {@link PaneOptions}으로 구성되며, row/col 위치와 body, legend 등을 개별 지정할 수 있다.
*/
panes?: PaneOptions[];
}
/**
* 차트 이미지 보내기(export) 설정 모델.
* {@link https://realchart.co.kr/config/config/exporting exporting} 항목으로 설정한다.
*/
interface ExporterOptions extends ChartItemOptions {
/**
* 내보내기 버튼 표시 여부.
*
* @default false
*/
visible?: boolean;
/**
* 보내기 결과 파일의 확장자 없는 이름.
* `export()` 호출 시 fileName을 지정하지 않으면 이 값이 사용된다.
* 둘 다 없으면 `realchart`와 확장자로 저장된다.
*
* @default 'realchart'
*/
fileName?: string;
/**
* 내보내기를 라이브러리를 사용하여 진행할지 여부 지정
*/
useLibrary?: boolean;
/**
* 보내기 메뉴에 포함할 형식 목록.
*
* @default ['png', 'jpeg', 'svg']
*/
menus?: ExportType[];
/**
* 보내기 이미지 너비(픽셀). 지정한 너비에 맞춰 높이가 결정된다.
*/
width?: number;
/**
* 보내기 이미지 배율.
*
* @default 1
*/
scale?: number;
/**
* 보내기 오류 발생 시 요청을 보낼 서버 URL.
* 지정하지 않으면 RealChart 서버에서 처리한다.
*/
url?: string;
/**
* true이면 보내기 결과에 {@link https://realchart.co.kr/config/config/base/axis/scrollBar AxisScrollBarOptions}가 포함되지 않는다.
*/
hideScrollbar?: boolean;
/**
* true이면 보내기 결과에 {@link https://realchart.co.kr/config/config/seriesNavigator SeriesNavigator}가 포함되지 않는다.
*/
hideNavigator?: boolean;
/**
* true이면 보내기 결과에 {@link https://realchart.co.kr/config/config/body/zoomButton ZoomButtonOptions}가 포함되지 않는다.
*/
hideZoomButton?: boolean;
}
/**
* @enum
*/
declare const _ExportType: {
/** */
readonly PNG: "png";
/** */
readonly JPEG: "jpeg";
/** */
readonly SVG: "svg";
/** */
readonly PDF: "pdf";
/** */
readonly PRINT: "print";
};
/** @dummy */
type ExportType = typeof _ExportType[keyof typeof _ExportType];
/**
* 내보내기 옵션.
*/
interface ExportOptions {
/**
* 내보낸 차트에 사용할 확장자.\
* type을 지정하지 않을 경우 png로 내보내기 된다.\
*
* // @TODO https://github.com/realgrid/realreport-chart/issues/549
*/
type?: ExportType;
/**
* 내보낸 차트에 사용할 확장자 없는 파일명.
* fileName을 지정하지 않을 경우 realchart.type으로 다운로드 된다.
*
*/
fileName?: string;
}
/**
* 외부 모듈로 구현되는 차트 내보내기 기능 명세.
*/
interface ChartExporter {
exportToImage: (dom: HTMLElement, options: ExportOptions, config: ExporterOptions) => void;
exportToPrint: (dom: HTMLElement, options: ExportOptions) => void;
isContextMenuVisible: () => boolean;
toggleContextMenu: () => void;
}
/**
* 버튼이 {@link onClick 클릭}될 때 콜백의 매개변수.
*/
interface HtmlButtonClickArgs {
/**
* RealChart의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: object;
/**
* 클릭된 버튼 모델 객체
*/
button: object;
}
/**
* 버튼 표시 위치 기준.
*
* @enum
*/
declare const _HtmlButtonScope: {
/**
* 차트 컨트롤 전체 기준.
*/
readonly CONTAINER: "container";
/**
* 차트 영역 기준.
*/
readonly CHART: "chart";
};
/** @dummy */
type HtmlButtonScope = typeof _HtmlButtonScope[keyof typeof _HtmlButtonScope];
/**
* 버튼에 마우스를 올렸을 때의 효과.
*
* @enum
*/
declare const _HtmlButtonHoverEffect: {
/**
* hoverImageUrl이 설정되면 'image', 그렇지 않으면 'background' 모드로 동작한다.
*/
readonly AUTO: "auto";
/**
* hoverImageUrl이 설정되면 마우스를 올렸을 때 이미지가 변경된다.
*/
readonly IMAGE: "image";
/**
* 마우스가 올라가면 배경색이 변경된다.
*/
readonly BACKGROUND: "background";
};
/** @dummy */
type HtmlButtonHoverEffect = typeof _HtmlButtonHoverEffect[keyof typeof _HtmlButtonHoverEffect];
/**
* 버튼의 hint 표시 방식.
*
* @enum
*/
declare const _HtmlButtonHintMode: {
/**
* 브라우저 기본 툴팁 모드 사용.
*/
readonly DEFAULT: "default";
/**
* 스타일로 구현된 커스텀 툴팁 모드 사용.
* 버튼 위에 마우스를 올렸을 때 custom 툴팁이 즉시 표시된다.
*/
readonly CUSTOM: "custom";
};
/** @dummy */
type HtmlButtonHintMode = typeof _HtmlButtonHintMode[keyof typeof _HtmlButtonHintMode];
/**
* HTML 버튼 옵션
*
* @css 'rct-html-button'
*/
interface HtmlButtonOptions extends Omit {
/**
* 버튼 표시 위치 기준.
*
* @default 'chart'
*/
scope?: HtmlButtonScope;
/**
* 수평 배치.
*
* @default 'center'
*/
align?: Align;
/**
* 수직 배치.
*
* @default 'middle'
*/
verticalAlign?: VerticalAlign;
/**
* {@link align}과 {@link verticalAlign}으로 지정된 위치에서 실제 표시될 위치의 수평 간격.
* 값이 양수이면 차트 안쪽으로 멀어진다.
*
* @default 0
*/
offsetX?: number;
/**
* {@link align}과 {@link verticalAlign}으로 지정된 위치에서 실제 표시될 위치의 수직 간격.
* 값이 양수이면 차트 안쪽으로 멀어진다.
*
* @default 0
*/
offsetY?: number;
/**
* 버튼의 너비를 내용에 맞게 자동 조절할지 여부.
*
* @default false
*/
autoWidth?: boolean;
/**
* 버튼의 픽셀 단위 너비.
* 지정하지 않으면 내용에 맞게 자동 조절된다.
*/
width?: number;
/**
* 버튼의 픽셀 단위 높이.
* 지정하지 않으면 내용에 맞게 자동 조절된다.
*/
height?: number;
/**
* 버튼에 표시되는 텍스트.
*/
text?: string;
/**
* 버튼에 표시되는 이미지의 URL.
*/
imageUrl?: string;
/**
* 버튼에 마우스 커서를 올렸을 때 표시되는 이미지의 URL.
*/
hoverImageUrl?: string;
/**
* 버튼에 마우스 커서를 올렸을 때의 효과.
*
* @default 'auto'
*/
hoverEffect?: HtmlButtonHoverEffect;
/**
* 버튼에 표시되는 이미지의 픽셀 단위 너비.
*
* @default 24
*/
imageWidth?: number;
/**
* 버튼에 표시되는 이미지의 픽셀 단위 높이.
*
* @default 24
*/
imageHeight?: number;
/**
* 버튼의 hint 표시 방식.
*
* @default 'custom'
*/
hintMode?: HtmlButtonHintMode;
/**
* 버튼에 마우스를 올렸을 때 표시되는 툴팁 문자열.
*/
hint?: string;
/**
* 버튼 클릭 시 호출되는 함수.
*/
onClick?: (args: HtmlButtonClickArgs) => void;
}
/**
* 단일 값을 다양한 방식으로 표시한다.
* 또, 단일 게이지들을 여러 개 묶어서 관련된 값을 표시할 수도 있다.
*/
interface GaugeBaseOptions extends ChartItemOptions {
/**
*/
type?: string;
/**
* 게이지 이름.
* 동적으로 게이지를 다루기 위해서는 반드시 지정해야 한다.
*/
name?: string;
/**
* 분할 모드일 때 게이지가 표시될 pane의 수직 index.
* 지정하지 않으면 0.
*/
row?: number;
/**
* 분할 모드일 때 게이지가 표시될 pane의 수평 index.
* 지정하지 않으면 0.
*/
col?: number;
/**
* plot 영역의 왼쪽 모서리와 widget 사이의 간격.
*
*/
left?: PercentSize;
/**
* plot 영역의 오른쪽 모서리와 widget 사이의 간격.
* {@link left}가 설정되면 이 속성은 무시된다.
*
*/
right?: PercentSize;
/**
* plot 영역의 위쪽 모서리와 widget 사이의 간격.
*
*/
top?: PercentSize;
/**
* plot 영역의 아래쪽 모서리와 widget 사이의 간격.
* {@link bottom}이 설정되면 이 속성은 무시된다.
*
*/
bottom?: PercentSize;
/**
* 게이지 너비.
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상대 크기로 지정할 수 있다.
*
*/
width?: PercentSize;
/**
* 게이지 높이.
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상대 크기로 지정할 수 있다.
*
*/
height?: PercentSize;
/**
* {@link width}와 {@link height}를 동시에 설정한다.
*
*/
size?: PercentSize;
/**
* 게이지나 게이지그룹의 배경에 대한 스타일.
*/
backgroundStyle?: SVGStyleOrClass;
}
/**
* 단일 값을 다양한 방식으로 표시한다.
*
* @css 'rct-gauge'
*/
interface GaugeOptions extends GaugeBaseOptions {
/**
*/
type?: GaugeType;
/**
* Animation duration.
*
* @default 500
*/
duration?: number;
}
/**
* 같은 종류의 단일 게이지들을 여러 개 묶어서 관련된 값을 표시한다.
*
* @css 'rct-gauge-group'
*/
interface GaugeGroupOptions extends GaugeBaseOptions {
/**
*/
type?: GaugeGroupType;
/**
* 단일 게이지 옵션 배열.
*/
children?: T[];
/**
* 최소값.
*
*
*/
minValue?: number;
/**
* 최대값.
*
*
*/
maxValue?: number;
}
/**
* 게이지 모델.
*/
interface ValueGaugeOptions extends GaugeOptions {
/**
* 최소값.
* group에 포함되면 이 값 대신 group의 최소값이 사용된다.
*
*/
minValue?: number;
/**
* 최대값.
* group에 포함되면 이 값 대신 group의 최대값이 사용된다.
*
*/
maxValue?: number;
/**
* 현재값.
*
*/
value?: number;
/**
* {@link value} 변화를 애니메이션으로 표현한다.
*
*/
animatable?: boolean;
/**
* label 설정 모델.
*
*/
label?: GaugeLabelOptions | 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 표시 영역 최대 너비.
* 픽셀값이나 게이지 전체 너비에 대한 상대값으로 지정할 수 있다.
* {@link width}가 지정되면 이 속성은 무시된다.
*
*/
maxWidth?: PercentSize;
/**
* position이 'top', 'bottom'일 때, label 표시 영역 최대 높이.
* 픽셀값이나 게이지 전체 높이에 대한 상대값으로 지정할 수 있다.
* {@link 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을 기본 위치의 반대쪽에 표시한다.
*
*
* @default false
*/
opposite?: boolean;
/**
* 자식 게이지의 label과 본체 사이의 간격을 픽셀 단위로 지정한다.
*
*
* @default 10
*/
gap?: number;
}
/**
*/
interface LinearGaugeGroupLabelOptions extends LinearGaugeLabelOptions {
/**
* @default 10
*/
gap?: number;
}
/**
*/
interface LinearGaugeGroupBaseOptions extends GaugeGroupOptions {
/**
* true면 자식 게이지들을 수직으로 지정하고(자식 게이지의 vertical 속성과 관계없이) 왼쪽에서 오른쪽으로 차례대로 배치한다.
* false면 자식 게이지들을 수평으로 지정하고, 위에서 아래로 순서대로 배치한다.
* [주의]이런 배치가 의도와 맞지 않다면 그룹없이 개별적으로 배치해야 한다.
*
*
* @default false
*/
vertical?: boolean;
/**
* label 설정 모델.
*
*
*/
label?: LinearGaugeLabelOptions | boolean;
/**
* 자식 게이지들의 label 표시 관련 속성 모델.
*
*
*/
itemLabel?: LinearGaugeChildLabelOptions | boolean;
/**
* scale.
*
*
*/
scale?: LinearGaugeScaleOptions | boolean;
/**
* 자식 게이지들 사이의 표시 간격을 픽셀 단위로 지정한다.
*
* @default 10
*/
itemGap?: number;
}
/**
*/
interface BulletGaugeBandOptions extends ChartItemOptions {
/**
* true면 수직 bar로 표시한다.
*
* @default false
*/
vertical?: boolean;
/**
* 너비
*
*/
width?: PercentSize;
/**
* 높이
*
*/
height?: PercentSize;
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*
*/
ranges?: ValueRange[];
/**
* true로 지정하면 {@link ranges} 항목에서 **toValue**나 **fromValue**가 지정되지 않은 경우,
* 모든 값이 포함되는 값으로 확장한다.
*
* @default true
*/
rangeInclusive?: boolean;
/**
* 각 범위의 toValue에 표시할 라벨 설정.
*/
toValueLabel?: BulletBandLabelOptions | boolean;
}
/**
* Bullet 게이지 band toValue 라벨 설정 모델.
* band 경계에 표시되는 라벨로, inside/outside 개념이 없으므로 {@link BulletBarLabelOptions}와 달리 position 옵션이 없다.
*/
interface BulletBandLabelOptions extends GaugeLabelOptions {
/**
* 밴드 경계에서 라벨까지의 간격 (픽셀).
*
* @default 4
*/
offset?: number;
}
/**
* Bullet 게이지 bar 라벨 설정 모델.
*/
interface BulletBarLabelOptions extends GaugeLabelOptions {
/**
* 라벨 표시 위치. 'inside'이면 바 내부 끝에, 'outside'이면 바 끝 바깥에 표시한다.
*
* @default 'outside'
*/
position?: 'inside' | 'outside';
/**
* 바 끝에서 라벨까지의 간격 (픽셀).
*
* @default 4
*/
offset?: number;
}
/**
*/
interface BulletTargetBarOptions extends ChartItemOptions {
/**
* @append
*
* @default true
*/
visible: boolean;
/**
* target bar 값에 표시할 라벨 설정.
*/
label?: BulletBarLabelOptions | boolean;
}
/**
* linear 게이지의 값을 표시하는 영역에 대한 설정 모델.
*/
interface LinearValueBarOptions extends ChartItemOptions {
/**
* {@link value 현재 값} 등을 기준으로 추가 적용되는 스타일을 리턴한다.
* 기본 설정을 따르게 하고 싶으면 undefined나 null을 리턴한다.
*
*/
styleCallback?: (args: any) => SVGStyleOrClass;
}
/**
*/
interface BulletValueBarOptions extends LinearValueBarOptions {
/**
* {@link value 현재 값}이 {@link targetValue 목표 값} 미만일 때
* 적용되는 {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
belowStyle?: SVGStyleOrClass;
/**
* value bar 값에 표시할 라벨 설정.
*/
label?: BulletBarLabelOptions | boolean;
}
declare const BulletGaugeType = "bullet";
/**
* Bullet 게이지.
* {@link https://realchart.co.kr/docs/api/options/GaugeOptions#type type}은 'bullet'이다.
* 현재 값을 목표 값과 비교해서 표시한다.
* 또, {@link BulletGaugeOptions#band}를 같이 표시하면, 여러 값 범위 중 어디에 속한 상태인 지를 나타낼 수 있다.
*
* @modules gauge
* @css 'rct-bullet-gauge'
*/
interface BulletGaugeOptions extends LinearGaugeBaseOptions {
/**
*/
type?: typeof BulletGaugeType;
/**
* 밴드.
*
*/
band?: BulletGaugeBandOptions | boolean;
/**
* 목표 값(target) 막대 설정.
*
*/
targetBar?: BulletTargetBarOptions | boolean;
/**
* actual bar.
*
*/
valueBar?: BulletValueBarOptions | boolean;
/**
* 목표 값.
*
*/
targetValue?: number;
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*/
ranges?: ValueRange[];
/**
* true로 지정하면 {@link ranges} 항목에서 **toValue**나 **fromValue**가 지정되지 않은 경우,
* 모든 값이 포함되는 값으로 확장한다.
*
* @default true
*/
rangeInclusive?: boolean;
}
declare const BulletGaugeGroupType = "bulletgroup";
/**
* Bullet 게이지그룹.
* {@link https://realchart.co.kr/docs/api/options/GaugeOptions#type type}은 'bulletgroup'이다.
*
* @modules gauge
* @css 'rct-bullet-gauge-group'
*/
interface BulletGaugeGroupOptions extends LinearGaugeGroupBaseOptions {
/** @dummy */
type?: typeof BulletGaugeGroupType;
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*
*
*/
ranges?: ValueRange[];
/**
* true로 지정하면 {@link ranges} 항목에서 **toValue**나 **fromValue**가 지정되지 않은 경우,
* 모든 값이 포함되는 값으로 확장한다.
*
*
* @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 영역 전체 너비에 대한 상대적 크기로 지정할 수 있다.
*
* @default '50%'
*/
centerX?: PercentSize;
/**
* 게이지 중심 수직 위치.
* 픽셀 단위의 크기나, plot 영역 전체 높이에 대한 상대적 크기로 지정할 수 있다.
*
* @default '50%'
*/
centerY?: PercentSize;
/**
* 게이지 원호의 반지름.
* 픽셀 단위의 크기나, plot 영역 전체 크기(너비와 높이 중 작은 값)에 대한 상대적 크기로 지정할 수 있다.
* '50%'로 지정하면 plot 영역의 width나 height중 작은 크기와 동일한 반지름으로 표시된다.
*
* @default '40%'
*/
radius?: PercentSize;
/**
* 내부 원호의 반지름.
* 픽셀 단위의 크기나, {@link radius}에 대한 상대적 크기로 지정할 수 있다.
* '100%'이면 게이지 원호의 반지름과 동일하다.
*
* @default '80%'
*/
innerRadius?: PercentSize;
/**
* 값을 나타내는 원호의 반지름.
* 픽셀 단위의 크기나,
* {@link radius}와 {@link innerRadius}로 결정된 기본 rim의 중점에 대한 상대적 크기로 지정할 수 있다.
* 지정하지 않거나 '100%'이고 {@link valueRim}의 {@link 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;
/**
* 내부 원에 적용할 {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
*/
innerStyle?: SVGStyleOrClass;
}
/**
*/
interface CircularGaugeGroupOptions extends GaugeGroupOptions {
/**
* 게이지 중심 수평 위치.
* 픽셀 단위의 크기나, plot 영역 전체 너비에 대한 상대적 크기로 지정할 수 있다.
*
*
*/
centerX?: PercentSize;
/**
* 게이지 중심 수직 위치.
* 픽셀 단위의 크기나, plot 영역 전체 높이에 대한 상대적 크기로 지정할 수 있다.
*
*
*/
centerY?: PercentSize;
/**
* 게이지 원호의 반지름.
* 픽셀 단위의 크기나, plot 영역 전체 크기(너비와 높이 중 작은 값)에 대한 상대적 크기로 지정할 수 있다.
* '50%'로 지정하면 plot 영역의 width나 height중 작은 크기와 동일한 반지름으로 표시된다.
*
*
*/
radius?: PercentSize;
/**
* 내부 원호의 반지름.
* 픽셀 단위의 크기나, {@link radius}에 대한 상대적 크기로 지정할 수 있다.
* '100%'이면 게이지 원호의 반지름과 동일하다.
*
*
*/
innerRadius?: PercentSize;
/**
* 값을 나타내는 원호의 반지름.
* 픽셀 단위의 크기나, {@link 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 설정 모델
*
*
*/
label?: CircularGaugeLabelOptions | boolean;
/**
* 내부 원에 적용할 {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*
*
*/
innerStyle?: SVGStyleOrClass;
/**
* 자식 게이지 원호들의 간격을 픽셀 단위로 지정한다.
*
* @default 4
*/
itemGap?: number;
/**
* @default 10
*/
labelGap?: number;
}
/**
*/
interface GaugeRangeLabelOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
}
/**
* 게이지 밴드 모델.
*
*/
interface GaugeRangeBandOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
/**
* 표시 위치.
*
* @default 'default'
*/
position?: GaugeItemPosition;
/**
* 밴드의 두께를 픽셀 단위나,
* 게이지 rim의 두께에 대한 상대적 크기로 지정할 수 있다.\
* 값을 지정하지 않으면 게이지 본체 내부에 표시될 때 '100%'(본체 두께와 동일)로 표시되고,
* 외부에 있을 때는 7 픽셀로 두께로 표시된다.
*
* @default 7
*/
thickness?: PercentSize;
/**
* {@link position}이 'inside'가 아닐 때, 이 밴드와 게이지 본체 사이의 간격
*
* @default 5
*/
gap?: number;
/**
* 0보다 큰 값으로 지정하면, 크기 만큼 영역 아이템 사이에 간격을 둔다.
*
* @default 0
*/
itemGap?: number;
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*
*/
ranges?: ValueRange[];
/**
* {@link 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.
*
* @css 'rct-gauge-scale'
*/
interface GaugeScaleOptions extends ChartItemOptions {
/**
* 표시 위치.
*
* default: 게이지 본체와 scale 사이에 표시된다.
*
* opposite: 원 표시 위치의 반대 쪽 게이지 옆에 표시된다.
*
* inside: 게이지 본체 내부에 본체와 같은 두께로 표시된다.
*
* @default 'default'
*/
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 {
/**
* tick들 사이의 대략적인 픽셀 간격.
*
* @default 48
*/
stepPixels?: number;
}
/**
*/
interface CircleGaugeRimBaseOptions extends ChartItemOptions {
/**
* 값 범위 목록.
* 범위별로 다른 스타일을 적용할 수 있다.
*
*/
ranges?: ValueRange[];
/**
* true로 지정하면 {@link ranges} 항목에서 **toValue**나 **fromValue**가 지정되지 않은 경우,
* 모든 값이 포함되는 값으로 확장한다.
*
*/
rangeInclusive?: boolean;
}
/**
* 바탕 rim.
*/
interface CircleGaugeRimOptions extends CircleGaugeRimBaseOptions {
/**
* segment 두께.
* 픽셀 단위 크기나, 게이지 원호 두께에 대한 상대 크기로 지정할 수 있다.
*
*/
segmentThickness?: PercentSize;
/**
* segment 사이의 간격.
*/
segmentGap?: number;
}
/**
* 값을 표시하는 rim.
*/
interface CircleGaugeValueRimOptions extends CircleGaugeRimBaseOptions {
/**
* 테두리 굵기.
* 픽셀 단위의 크기나, {@link CircularGaugeOptions.radius radius}와 {@link CircularGaugeOptions.innerRadius innerRadius}로 결정된 원호 굵기에 대한 상대적 크기로 지정할 수 있다.
* 예) 지정하지 않거나 '100%'로 지정하면 게이지 원호 굵기와 동일하게 표시된다.
*
*/
thickness?: PercentSize;
/**
* true면 원호 대신 선으로 표시한다.
* 대시 표현이 가능해진다.
*
* @default false
*/
stroked?: boolean;
}
/**
*/
interface CircleGaugeValueMarkerOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
}
/**
*/
interface CircleGaugeHandOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
/**
* 게이지 중심쪽의 바늘 반지름.\
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default 3
*/
radius?: PercentSize;
/**
* 바늘 길이.\
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default '100%'
*/
length?: PercentSize;
/**
* 바늘 중심과 게이지 중심 사이의 간격.\
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default 0
*/
offset?: PercentSize;
}
/**
*/
interface CircleGaugePinOptions extends ChartItemOptions {
/**
* @append
*
* @default false
*/
visible?: boolean;
/**
* 핀 반지름.
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default 5
*/
radius?: PercentSize;
}
declare const CircleGaugeType = "circle";
/**
* 원형 게이지.
* {@link https://realchart.co.kr/docs/api/options/GaugeOptions#type type}은 'circle'이다.
* 지정된 최대 각도 내에서 현재 값의 비율을 원호로 표시한다.
*
* @modules gauge
* @css 'rct-circle-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 게이지그룹.
* {@link https://realchart.co.kr/docs/api/options/GaugeOptions#type type}은 'circlegroup'이다.
*
* @modules gauge
* @css 'rct-circle-gauge-group'
*/
interface CircleGaugeGroupOptions extends CircularGaugeGroupOptions {
/** @dummy */
type?: typeof CircleGaugeGroupType;
/**
* @append
*
* @default '80%'
*/
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;
/**
* {@link 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 Omit {
/**
* 라벨 표시 위치.
*
*/
position?: ClockGaugeLabelPosition;
}
declare const ClockGaugeType = "clock";
/**
* 시계 게이지.
* {@link https://realchart.co.kr/docs/api/options/GaugeOptions#type type}은 'clock'이다.
* 원형 아날로그 시계를 표시한다.
*
* @modules gauge
* @css 'rct-clock-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";
/**
* 선형 게이지.
* {@link https://realchart.co.kr/docs/api/options/GaugeOptions#type type}은 'linear'이다.
* 현재 값을 선형 막대로 표시한다.
* 또, {@link LinearGaugeOptions#band}를 같이 표시하면, 여러 값 범위 중 어디에 속한 상태인 지를 나타낼 수 있다.
*
* @modules gauge
* @css 'rct-linear-gauge'
*/
interface LinearGaugeOptions extends LinearGaugeBaseOptions {
/**
*/
type?: typeof LinearGaugeType;
/**
* 게이지 값을 표시하는 bar 모델.
*
*/
valueBar?: LinearValueBarOptions | boolean;
/**
* 게이지 본체 주변이나 내부에 값 영역들을 구분해서 표시하는 band의 모델.
*
*/
band?: GaugeRangeBandOptions | boolean;
}
declare const LinearGaugeGroupType = "lineargroup";
/**
* 선형 게이지그룹.
* {@link https://realchart.co.kr/docs/api/options/GaugeOptions#type type}은 'lineargroup'이다.
*
* @modules gauge
* @css 'rct-linear-gauge-group'
*/
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";
};
/** @dummy */
type GaugeType = typeof GaugeTypes[keyof typeof GaugeTypes];
/** @enum */
declare const GaugeGroupTypes: {
readonly CircleGaugeGroupType: "circlegroup";
readonly LinearGaugeGroupType: "lineargroup";
readonly BulletGaugeGroupType: "bulletgroup";
};
/** @enum */
type GaugeGroupType = typeof GaugeGroupTypes[keyof typeof GaugeGroupTypes];
/** @dummy */
type GaugeOptionsType = GaugeBaseOptions | LinearGaugeOptions | BulletGaugeOptions | CircleGaugeOptions | ClockGaugeOptions | LinearGaugeGroupOptions | BulletGaugeGroupOptions | CircleGaugeGroupOptions;
/**
* 차트 좌표계와 그 방향 및 시리즈와 게이지의 기본 타입을 결정하는 중요한 몇가지 속성들과
* 하위 구성 요소들에 대한 옵션들을 설정한다.
* 차트 생성 시 이 옵션 객체를 구성해서 전달해야 한다.
*
* ```js
* const chart = RealChart.createChart(doc, 'div', {
* .... // 여기에 설정한다.
* });
* ```
*
* {@link https://www.typescriptlang.org/ typescript} 환경에서는 타입을 명시적으로 지정하여
* 개발 편집기의 typescript 지원을 받을 수 있으므로
* 설정 객체를 별도로 정의할 수 있다.
*
* ```ts
* const config: ChartConfiguration = {
* ...
* };
* const chart = RealChart.createChart(doc, 'div', config);
* ```
*
*/
interface ChartConfiguration {
/**
* 기본 {@link https://realchart.co.kr/config/config/base/series 시리즈} type.
* 시리즈에 {@link https://realchart.co.kr/config/config/base/series#type 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';
/**
* 기본 {@link https://realchart.co.kr/config/config/base/gauge 게이지} type.
* 게이지에 type을 지정하지 않으면 이 속성 type의 시리즈로 생성된다.
* [주의] 차트 로딩 후 변경할 수 없다.
*
* @default 'circle'
*/
gaugeType?: 'circle' | 'bullet' | 'clock' | 'linear';
/**
* true면 차트가 {@link https://en.wikipedia.org/wiki/Polar_coordinate_system 극좌표계}로 표시된다.
* 기본은 {@link 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;
/**
* {@link polar}가 아닌 기본 직교 좌표계일 때 true로 지정하면 x축이 수직, y축이 수평으로 배치된다.
* {@link https://realchart.co.kr/config/config/series/funnel funnel} 시리즈 등의 위젯 시리즈에는 이 속성이 적용되지 않는다.
* [주의] 차트 로딩 후 변경할 수 없다.
*
* @default false
*/
inverted?: boolean;
/**
* 이 차트 구성 설정에서 반복 사용할 수 있는 설정 모음.
*/
templates?: ConfigObject;
/**
* 차트 전체에 영향을 미치는 옵션들.
*/
chart?: ChartOptionsOptions;
/**
* @deprecated v1.3.15 이후로, {@link https://realchart.co.kr/config/config/chart chart}로 대신 설정한다.
*
* 차트 전체에 영향을 미치는 옵션들.
*/
options?: ChartOptionsOptions;
/**
* Asset 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'assets'** 설정이 존재하면 load 후 이 속성으로 설정한다.
*
* @expandable
*/
asset?: AssetOptionsType | AssetOptionsType[];
/**
* 차트 타이틀.
*/
title?: TitleOptions | string | boolean;
/**
* 차트 제목 주위에 표시되는 부제목.
*/
subtitle?: SubtitleOptions | string;
/**
* 차트 시리즈 구성 등을 직관적으로 이해할 수 있도록 도와주는 범례.
* 시리즈나 데이터포인트 등의 이름과 심볼을 같이 표시할 수 있다.
*/
legend?: LegendOptions | boolean;
/**
* 크레딧 설정 옵션.
*/
credits?: CreditsOptions | boolean;
/**
* 차트 영역에 표시되는 HTML 버튼들.
*/
button?: HtmlButtonOptions | HtmlButtonOptions[];
/**
* 데이터포인트 뷰에 마우스가 올라가면 표시되는 툴팁 상자.
* {@link https://realchart.co.kr/guide/tooltip 툴팁 개요} 페이지를 참조한다.
*/
tooltip?: TooltipOptions | boolean;
/**
* 시리즈 또는 시리즈 목록.
*
* @expandable
*/
series?: SeriesOptionsType | SeriesOptionsType[];
/**
* x축 또는 x축 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'xAxes'** 항목이 존재하면
* 그 항목을 이 속성으로 설정한다.
*
* @expandable
*/
xAxis?: AxisOptionsType | AxisOptionsType[];
/**
* y축 또는 y축 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'yAxes'** 항목이 존재하면
* 그 항목을 이 속성으로 설정한다.
*
* @expandable
*/
yAxis?: AxisOptionsType | AxisOptionsType[];
/**
* 게이지 또는 게이지 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'gauges'** 항목이 존재하면
* 그 항목을 이 속성으로 설정한다.
*
* @expandable
*/
gauge?: GaugeOptionsType | GaugeOptionsType[];
/**
* 어노테이션 또는 어노테이션 목록.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 **'annotations'** 항목이 존재하면
* 그 항목을 이 속성으로 설정한다.
*
* @expandable
*/
annotation?: AnnotationOptionsType | AnnotationOptionsType[];
/**
* {@link https://realchart.co.kr/config/config/base/series 시리즈}나 {@link https://realchart.co.kr/config/config/base/gauge 게이지}들이 그려지는 영역.
*/
body?: BodyOptions;
/**
* 시리즈 내비게이터.
*/
seriesNavigator?: SeriesNavigatorOptions | boolean;
/**
* 분할 모드 설정.
*/
split?: SplitOptions;
/**
* 내보내기 설정.
*/
exporting?: ExporterOptions;
}
declare const extend: (base: any, source: O) => O;
/**
* {@link Series 시리즈}, {@link rc.Axis 축}, {@link rc.Legend legend} 등, 차트 구성 요소 모델들의 기반 클래스.
* {@link updateOptions}등의 공통 메소드들이 구현되어 있다.
*/
declare class ChartItem extends RcObject {
static readonly REFRESHED = "refreshed";
static defaults: ChartItemOptions;
readonly chart: IChart;
private _config;
private _children;
/**
* @readonly
*
* 이 모델에 설정하는 속성들을 포함하는 객체로서 차트 생성시 혹은 {@link load} 메소드를 통해 초기 값들이 지정된다.
* 또, 각 모델별로 기본적으로 적용되는 기본값들이 있다.
* 내부에서 관리하는 속성이므로, 이 속성을 다른 객체 등으로 직접 변경해서는 안된다.
* 또, 이 옵션의 속성들을 직접 변경하지 않고 {@link updateOption} 등의 메소드를 호출해야 한다.
*/
protected _op: OP;
/**
* @private
*
* options.style과 동일하다.
*/
_style: SVGStyleOrClass;
/**
* 이 클래스를 계승한 차트 구성 요소 객체들은 차트 내부에서 자동 생성되므로 이 생성자를 직접 호출할 일은 없다.
*
* @param chart 차트 객체
*/
constructor(chart: IChart);
/**
* @private
*/
init(): OP;
protected _doInit(op: OP): void;
/**
* @private
*/
_initObject(): this;
/**
* 차트를 생성할 때나 {@link updateOptions} 등을 통해 이 모델 객체에 설정된 옵션 값들과
* 기본 설정값들이 포함된 원본 설정 객체(복사본이 아니다).
* 리턴된 객체의 속성값들을 가져올 수 있지만,
* 속성들을 직접 수정하는 것은 권장되는 방법이 아니다.
* {@link updateOptions}나 {@link updateOption} 등을 사용해서 옵션들을 변경해야 한다.
*/
get options(): OP;
/**
* 표시 여부.
* 설정 옵션의 [visible](/docs/api/options/ChartItemOptions#visible) 값을 그대로 return하는 것이 아니라,
* undefined나 null 등으로 지정하는 경우 모델의 상태에 따라 true나 false로 해석될 수 있다.
* 설정의 경우 {@link updateOption}으로 지정하는 것과 동일하다.
*
* ```
* model.updateOption('visible', value);
* ```
* ```
* model.updateOptions({
* visible: value
* });
* ```
*
* @default true
*/
get visible(): boolean;
set visible(value: boolean);
protected _isVisible(): boolean;
/** @private */
_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
* });
* ```
*
* 권장하는 방식은 아니지만, {@link options}의 값들을 직접 수정한 후에도 이 메소드를 호출해서
* 내부의 값들이 다시 계산되도록 해야 한다.
*
* ```js
* chart.legend.options.gap = 10,
* chart.legend.options.lineGap = 20,
* chart.legend.updateOptions();
* ```
*
* @param source 설정 정보 객체 혹은 단일값.
* @param render true로 지정하면 설정 후 차트를 다시 그린다.
* @returns 객체 자신.
*/
private $_updateChildren;
private $_mergeOptions;
updateOptions(source?: OP, render?: boolean): this;
/**
* 하나의 속성 값을 설정한다.
* 여러 속성들을 한꺼번에 변경할 때는 {@link updateOptions}를 사용한다.
* 기본적으로 이전 값과 다른 경우에만 적용된다.
* 특히, 속성값이 객체인 경우 객체 속성만 바뀐 경우 적용되지 않는다.
* 바꾸고 싶다면 force 매개변수를 true로 지정해서 호출한다.
* 또, prop 매개변수가 하위 모델 이름인 경우 하위 모델의 {@link updateOptions}를 호출한 것과 동일하다.
*
* @param render true로 지정하면 설정 후 차트를 다시 그린다.
* @param force 지정한 값이 이전 값과 동일한 경우에도 적용한다.
* @returns 객체 자신.
*/
updateOption(prop: keyof OP, value: any, render?: boolean, force?: boolean): this;
/**
* Boolean 타입의 설정값을 변경한다.
* 지정 가능한 설정 값 목록은 {@link https://realchart.co.kr/config Configuration API 페이지}에서 확인할 수 있다.
*
* ```js
* chart.getSeries('ser02').toggleOption('visible');
* ```
*
* @param prop 설정 속성 이름.
* @param render true로 지정하면 chart를 다시 그린다.
* false로 지정하고 여러 설정 후에 {@link 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;
/**
* {@link updateOptions}나 {@link updateOption} 등을 통해 설정된 모든 옵션 값들을 제거하거나,
* 전역 기본값이 존재하는 경우 그 값으로 되돌린다.
*
* @param render true(기본값)으로 지정하면 차트를 다시 그린다.
* @returns 객체 자신.
*/
clearOptions(render?: boolean): this;
/**
* 모델 css style 값을 변경한다.
* value에 undefined나 null, ''을 지정하면 기존에 설정됐던 스타일 항목이 제거된다.
*
* @param prop css 스타일 항목 이름.
* @param value 적용할 스타일 값.
* @param render true로 지정하면 옵션 변경 시 맵차트를 다시 그린다. 기본값 true
* @returns
*/
setStyle(prop: string, value: any, render?: boolean): this;
/**
* 여러 항목의 모델 css style 값들을 json 객체로 지정해서 동시에 변경한다.
* value에 undefined나 null, ''을 지정하면 기존에 설정됐던 스타일 항목이 제거된다.
*
* @param props 스타일 항목들과 값들이 설정된 json 객체
* @param clear true로 지정하면 기존 스타일 값을 모두 제거한다. 기본값 false
* @param render true로 지정하면 옵션 변경 시 맵차트를 다시 그린다. 기본값 true
*/
setStyles(props: object, clear?: boolean, render?: boolean): this;
/** @private */
_prepareRender(): void;
/** @private */
protected _changed(tag?: any): void;
/** @private */
protected _doLoad(op: ChartItemOptions, source: any): void;
/** @private */
protected _doSave(target: any, defs: OP, recursive: boolean): void;
/** @private */
protected _doSaveArray(prop: string, value: any[]): any[];
/** @private */
protected _doSetSimple(src: any): boolean;
/** @private */
protected _doLoadProp(prop: string, value: any): boolean;
/** @private */
private $_applyOptions;
/** @private */
protected _setDim(options: ChartItemOptions, prop: string): void;
/** @private */
protected _setDims(options: OP, ...props: string[]): void;
/** @private */
protected _doApply(op: ChartItemOptions): void;
/** @private */
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;
}
/**
* {@link rc.Title 타이틀}, {@link rc.DataPointLabel 데이터포인트 라벨} 등,
* 차트에 표시되는 텍스트 설정 모델들의 기반 클래스.
* 설정 {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/ChartTextOptions 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;
/** @private */
setText(value: string): void;
/** @private */
buildSvg(view: TextElement, outline: TextElement, maxWidth: number, maxHeight: number, target: any, domain: IRichTextDomain): void;
/** @private */
prepareRich(text: string): void;
protected _doSetSimple(src: any): boolean;
protected _doApply(options: OP): 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} 모델은 {@link https://realchart.co.kr/docs/api/options/IconedTextOptions IconedTextOptions}이다.
*/
declare abstract class IconedText extends ChartText {
static defaults: IconedTextOptions;
private _images;
private _root;
abstract getDefaultIconPos(): IconPosition;
getIconPos(): IconPosition;
protected _doPrepareRender(chart: IChart): void;
/**
* options.icon 또는 fallback 경로를 해석하여 최종 URL을 반환한다.
* @param fallback - options.icon이 없을 때 사용할 대체 경로
*/
getIconUrl(fallback?: string): string | null;
getUrl(url: string): string;
}
declare class BackgroundImage extends ChartItem {
}
/**
* Widget 모델.
* 기본적으로 plot 영역에 표시된다.
* plot 영역에 표시될 때 {@link left}, {@link top} 등으로 위치를 지정할 수 있다.
*/
declare abstract class Widget extends ChartItem {
protected _doPrepareRender(chart: IChart): void;
}
/**
* {@link Gauge 게이지}와 {@link GaugeGroup 게이지그룹} 모델들의 기반 클래스.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/GaugeBaseOptions GaugeBaseOptions}이다.
*/
declare abstract class GaugeBase extends Widget {
static readonly type: string;
static defaults: GaugeBaseOptions;
private _name;
private _row;
private _col;
index: number;
private _sizeDim;
private _widthDim;
private _heightDim;
private _leftDim;
private _rightDim;
private _topDim;
private _bottomDim;
_type(): string;
get name(): string;
get row(): number;
get col(): number;
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: OP): void;
}
declare abstract class GaugeItem extends ChartItem {
constructor(gauge: GaugeBase);
}
/**
* 단일 게이지 모델들의 기반 클래스.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/GaugeBaseOptions 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;
}
/**
* 게이지그룹 모델들의 기반 클래스
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/GaugeBaseOptions GaugeBaseOptions}이다.
* 같은 {@link https://realchart.co.kr/docs/api/options/GaugeOptions#type type}의 여러 {@link 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: OP): void;
protected _doSaveArray(prop: string, value: any[]): any[];
_prepareRender(): void;
private $_loadGauges;
private $_add;
protected _setGroup(child: T, index: number): void;
}
/**
* @private
*/
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;
}
/**
* 단일 값을 갖는 게이지 모델들의 기반 클래스
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/ValueGaugeOptions ValueGaugeOptions}이다.
*/
declare abstract class ValueGauge extends Gauge {
static defaults: ValueGaugeOptions;
protected _label: GaugeLabel;
_prevValue: number;
_runValue: number;
protected _doInit(op: OP): void;
/**
* label 설정 모델.
*
*/
get label(): GaugeLabel;
protected abstract _createLabel(): GaugeLabel;
getValue(): number;
_setValueRate(rate: number): void;
/**
* 게이지의 값을 변경한다.
*/
updateValue(value: any): void;
getLabel(label: GaugeLabel, value: number): string;
getParam(param: string): any;
calcedMinMax(): IMinMax;
}
/**
* 게이지 스케일 틱 모델
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/GaugeScaleTickOptions GaugeScaleTickOptions}이다.
*/
declare class GaugeScaleTick extends ChartItem {
scale: GaugeScale;
static defaults: GaugeScaleTickOptions;
constructor(scale: GaugeScale);
}
/**
* 게이지 스케일 라벨 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/GaugeScaleLabelOptions GaugeScaleLabelOptions}이다.
*/
declare class GaugeScaleLabel extends IconedText {
getText(value: any): string;
getDefaultIconPos(): IconPosition;
}
/**
* 게이지 스케일 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/GaugeScaleOptions 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 _doInit(op: OP): void;
/**
*
*/
get line(): ChartItem;
/**
*
*/
get tick(): GaugeScaleTick;
/**
*
*/
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 라벨 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/GaugeRangeLabelOptions GaugeRangeLabelOptions}이다.
*/
declare class GaugeRangeLabel extends ChartItem {
static defaults: GaugeRangeLabelOptions;
}
/**
* 게이지 밴드 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/GaugeRangeBandOptions 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 _doInit(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* {@link position}이 'inside'일 때만 표시될 수 있다.
*
*
*/
get rangeLabel(): GaugeRangeLabel;
/**
* 각 range의 양 끝에 해당하는 값을 표시한다.
*
*
*/
get tickLabel(): ChartItem;
getThickness(domain: number): number;
getRanges(): ValueRange[];
protected _doApply(options: GaugeRangeBandOptions): void;
private $_internalRanges;
}
/**
* 게이지 라벨 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/GaugeLabelOptions GaugeLabelOptions}이다.
*/
declare abstract class GaugeLabel extends ChartText {
static defaults: GaugeLabelOptions;
_domain: IRichTextDomain;
protected _doPrepareRender(chart: IChart): void;
}
/**
* {@link CircularGaugeLabel} 라벨 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/CircularGaugeLabelOptions 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;
}
/**
* @private
*/
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;
}
/**
* 원형 게이지 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/CircularGaugeOptions 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;
_props: CircularProps;
_childProps: CircularProps;
protected _doInit(op: OP): void;
/**
* label 설정 모델.
*
*/
get label(): CircularGaugeLabel;
getProps(): CircularProps;
getCenter(gaugeWidth: number, gaugeHeight: number): {
x: number;
y: number;
};
getExtents(gaugeSize: number): ICircularGaugeExtents;
labelVisible(): boolean;
protected _createLabel(): CircularGaugeLabel;
protected _doApply(options: OP): 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;
/**
* 게이지 중앙에 표시되는 label 설정 모델
*
*
*/
get label(): CircularGaugeLabel;
setChildExtents(exts: ICircularGaugeExtents): void;
protected _doApply(options: OP): void;
}
/**
* 시리즈에 연결된 데이터의 개별 값들에 대한 모델.
* 실행 시간 내부적으로 자동 생성/사용/제거되므로 직접 생성할 일은 없다.
*
* //데이터포인트를 표시할 수 없는 값을 설정하면 null로 간주한다.
* //isNull과 visible은 다르다.
* //isNull이어도 자리를 차지한다.
*
* //[y]
* //[x, y]
*/
declare abstract class DataPoint {
static getSum(points: DataPoint[]): number;
/**
* 시리즈 데이터포인트 목록에서 인덱스.
*/
index: number;
/**
* 시리즈 데이터포인트 표시 목록에서 인덱스.
*/
vindex: number;
/**
* x 값
* {@link xValue}를 찾기 위한 원본 값.
*/
x: any;
/**
* y 값.
* {@link yValue}를 찾기 위한 원본 값.
*/
y: any;
/**
* drilldown series.
*
* @ignore
*/
series: string | number;
readonly pid: number;
/**
* 데이터포인트 구성에 사용된 원본 데이터.
*/
source: any;
labelOptions: any;
isNull: boolean;
/**
* 데이터포인트의 x 축 위치 값.
*/
xValue: number;
/**
* 데이터포인트의 y 축 위치 값.
* ex) series group의 layout이 'fill'일 때,
*/
yValue: number;
yRate: number;
/**
* @private
*
* 표시 여부.
* 감추려면 명시적인 false로 지정해야 한다.
* [주의] 현재 사용자가 이 값을 수정할 방벙을 공식적으로 제공하지 않는다.
*/
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;
_setDeleted(): void;
_isDeleted(): any;
_setDrop(edge: number): void;
_getDrop(): number;
_setSave(value: any): void;
_getSave(): any;
updateValues(series: ISeries, values: any): any;
initValues(): void;
/**
* @private
*
* 동적으로 생성 시 animation을 위해 prev 값들을 초기화 한다.
*/
initPrev(axis: IAxis, prev: any): void;
/**
* @private
*
* 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;
}
/** @private */
declare class DataPointCollection {
protected _owner: ISeries;
private _points;
constructor(owner: ISeries);
get owner(): ISeries;
get count(): number;
isEmpty(): boolean;
_internalPoints(): DataPoint[];
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;
removeAll(pts: DataPoint[]): DataPoint[];
/**
* 삭제 상태의 데이터포인트들을 제거한다.
*/
clean(): void;
getProps(prop: string | number): any[];
getCategories(axis: string): any[];
forEach(callback: (p: DataPoint, i?: number) => any): void;
getRunPoints(xAxis: IAxis): DataPoint[];
}
/**
* @private
*
* [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;
}
/**
* @private
*
* [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;
}
/**
* @private
*/
interface ILegendSource {
visible: boolean;
isEmpty?(): boolean;
legendMarker(doc: Document, size: number): RcElement;
legendColor(): string;
legendStroke(): string;
legendLabel(): string;
legendKey(): any;
}
/**
* @private
*/
declare class LegendItem extends ChartItem {
legend: Legend;
source: ILegendSource;
constructor(legend: Legend, source: ILegendSource);
text(): string;
}
/**
* 차트 시리즈 구성을 직관적으로 이해할 수 있도록 도와주는 범례 모델.
* 설정 {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/LegendOptions LegendOptions}이고,
* {@link https://realchart.co.kr/config/config/legend legend} 항목으로 설정한다.
* ```js
* const config = {
* legend: {
* visible: true,
* location: 'right',
* },
* };
* ```
* 또, Chart.{@link rc.Chart#legend legend}로 모델 객체를 가져올 수 있다.
* ```js
* const legend = chart.legend;
* legend.visible = false;
* ```
* visible 기본값은 undefined인데 따로 지정하지 않으면 시리즈가 둘 이상 포함돼야 범례가 표시된다.
* {@link https://realchart.co.kr/guide/legend 범례 개요} 페이지를 참조한다.
*/
declare class Legend extends Widget {
static defaults: LegendOptions;
private _maxWidth;
private _maxHeight;
private _items;
private _visItems;
private _itemMap;
private _maxWidthDim;
private _maxHeightDim;
_location: LegendLocation;
items(): LegendItem[];
getLayout(): LegendLayout;
getMaxWidth(domain: number): number;
getMaxHeight(domain: number): number;
getMarkerSize(): number;
getSources(item: LegendItem): ILegendSource | ILegendSource[];
protected _isVisible(): boolean;
protected _doApply(options: LegendOptions): void;
protected _doPrepareRender(chart: IChart): void;
protected _getLegendSources(): ILegendSource[];
}
type TooltipList = {
items: any[];
header: string;
rows: [string, string][];
footer: string;
};
interface ITooltipContext {
isGroupTooltip(): boolean;
getTooltipText(series: ISeries, point: DataPoint, list: TooltipList): string | string[];
getTooltipParam(series: ISeries, point: DataPoint, param: string): string;
}
interface ITooltipOwner {
chart: IChart;
getTooltipContext(level: TooltipScope, series: ISeries, point: DataPoint): ITooltipContext;
}
/**
* Tooltip 모델.
* 설정 {@link options}은 {@link https://realchart.co.kr/docs/api/options/TooltipOptions TooltipOptions}이고,
* {@link https://realchart.co.kr/config/config/tooltip tooltip} 항목으로 설정한다.
* ```js
* const config = {
* tooltip: {
* visible: true,
* scope: 'hover',
* },
* };
* ```
* 또, Chart.{@link rc.Chart#tooltip 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;
isHtmlLayer(): boolean;
getNoClip(): boolean;
isFollowPointer(series: ISeries): boolean;
getHeaderHeight(): number;
getTailSize(): number;
getBorderRadius(): number;
hasListMarker(): boolean;
getMarkerSize(): number;
getMarkerGap(): number;
protected _doSetSimple(src: any): boolean;
protected _doApply(options: TooltipOptions): void;
}
/**
* @private
*/
interface ICategoryTreeGroup {
level: number;
start: number;
end: number;
label: string;
}
/**
* 카테고리축의 tick 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/CategoryAxisTickOptions CategoryAxisTickOptions}이다.
*/
declare class CategoryAxisTick extends AxisTick {
static defaults: CategoryAxisTickOptions;
getPosition(): CategoryTickPosition;
}
/**
* @private
*
* 카테고리축의 라벨 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisLabelOptions AxisLabelOptions}이다.
*/
declare class CategoryAxisLabel extends AxisLabel {
static defaults: CategoryAxisLabelOptions;
sep: string;
getTick(index: number, v: any): string;
getIcon(tick: IAxisTick): string;
}
/**
* @private
*
* 카테고리축의 grid 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisGridOptions AxisGridOptions}이다.
*/
declare class CategoryAxisGrid extends AxisGrid {
getPositions(axis: CategoryAxis): number[];
}
/**
* 카테고리 축 모델.
* {@link https://realchart.co.kr/docs/api/options/AxisOptions#type type}은 {@link https://realchart.co.kr/config/config/xAxis/category category}이고,
* {@link options 설정} 모델은 {@link https://realchart.co.kr/docs/api/options/CategoryAxisOptions CategoryAxisOptions}이다.
*/
declare class CategoryAxis extends Axis {
static type: string;
static readonly categoryTreeDividerDefaults: Readonly;
static readonly categoryTreeDefaults: Readonly;
static defaults: CategoryAxisOptions;
_categories: {
c: string;
t: string;
levels?: string[];
i?: string;
v?: number;
}[];
_categoryTreeDepth: number;
_categoryTreeGroups: ICategoryTreeGroup[];
_categoryTreeDividerEnds: number[];
_categoryTreeDividerLevel: number;
private _categoryTreeOp;
private _bandColors;
private _categoryTreeLevelGroups;
private _categoryTreeLevelEnds;
_weights: Map;
_len: number;
_minPad: number;
_maxPad: number;
private _catStart;
private _catStep;
private _map;
private _catPad;
private _catMin;
private _catMax;
private _catLen;
_pts: number[];
_tstep: number;
get tick(): CategoryAxisTick;
/**
* @append
*/
get label(): CategoryAxisLabel;
xValueAt(pos: number): number;
getCategorySeparator(): string;
isCategoryTreeEnabled(): boolean;
hasCategoryTree(): boolean;
private $_resolveCategoryTreeOp;
private $_normalizeDivider;
private $_isDividerOn;
private $_dividerProp;
isLevelVisible(level: number): boolean;
/**
* 계층 행 라벨 회전 각도를 반환한다.
* 'auto'(기본값)는 라벨 폭이 자기 영역(span)을 벗어날 때만 -90°로 회전해야 하므로,
* 실제 각도 결정은 라벨 폭과 span을 아는 View로 위임한다.
*/
getLevelRotation(level: number): number | 'auto';
private $_resolveLevelRotation;
getLevelStyle(level: number): SVGStyleOrClass | undefined;
getLevelAlign(level: number): Align;
getCategoryTreeDepth(): number;
getCategoryTreeGroups(): ICategoryTreeGroup[];
getDividerLevel(): number;
/** level 생략 시 기준 레벨 경계, 지정 시 해당 레벨 행의 그룹 경계 인덱스. */
getDividerEnds(level?: number): number[];
private $_groupsAtLevel;
isDividerBetween(level: number): boolean;
isDividerEdge(level: number): boolean;
isDividerBelow(level: number): boolean;
isDividerTopCap(): boolean;
isDividerVisible(): boolean;
/** 배경 stripe는 구분선 기준 레벨을 그대로 따른다. */
getBandLevel(): number;
private $_resolveDividerStyle;
private $_dividerStyleOf;
getDividerStyle(level?: number): SVGStyleOrClass | undefined;
private $_isBandEnabled;
isBandVisible(): boolean;
getBandGroups(): ICategoryTreeGroup[];
getBandColor(index: number): string;
private $_resolveBandColors;
getCategoryTreeSpan(start: number, end: number, length: number): {
center: number;
size: number;
};
getDividerPos(categoryEnd: number, length: number): number;
/** 구분선 위치: 첫 카테고리 왼쪽, 그룹 경계, 마지막 카테고리 오른쪽. */
getDividerLinePositions(length?: number): number[];
getWeight(key: number): number;
/** 수직 축 라벨 배치 Y (시리즈 inverted 카테고리 좌표와 동일). */
getLabelY(length: number, pos: number): number;
/** 수평 축 라벨 배치 X. */
getLabelX(length: number, pos: number): number;
_type(): string;
unitPad(): number;
continuous(): boolean;
_prepareZoom(): AxisZoom;
protected _createGrid(): CategoryAxisGrid;
protected _createTickModel(): CategoryAxisTick;
protected _createLabel(): CategoryAxisLabel;
protected _doApply(op: CategoryAxisOptions): void;
collectValues(): void;
getStartAngle(): number;
protected _doPrepareRender(): void;
protected _adjustMinMax(min: number, max: number): {
min: number;
max: number;
};
protected _doBuildTicks(min: number, max: number, length: number, phase: 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 $_getSpanFromPts;
private $_getDividerPosFromPts;
private $_getCategoryEdgePos;
private $_parseCategoryLevels;
private $_pushCategory;
private $_buildCategoryTree;
private $_collectCategories;
}
declare class TrendlineArea extends ChartItem {
static defaults: TrendlineAreaOptions;
}
declare class TrendlineLabel extends IconedText {
private static readonly OFFSET;
static defaults: TrendlineLabelOptions;
getAlign(inverted: boolean, xReversed: boolean, yReversed: boolean, pos: number): Align;
getVerticalAlign(inverted: boolean, xReversed: boolean, yReversed: boolean): VerticalAlign;
getAlignPolar(angle: number): Align;
getVerticalAlignPolar(angle: number): VerticalAlign;
getOffsetX(align: Align): number;
getOffsetY(vAlign: VerticalAlign): number;
getText(): string;
getDefaultIconPos(): IconPosition;
protected _doApply(op: TrendlineLabelOptions): void;
}
declare class TrendlineMarker extends ChartItem {
static defaults: TrendlineMarkerOptions;
getRadius(): number;
}
interface ITrendlineOwner {
chart: IChart;
_visPoints: DataPoint[];
_xAxisObj?: IAxis;
_yAxisObj?: IAxis;
}
/**
* 시리즈 {@link https://en.wikipedia.org/wiki/Trend_line_(technical_analysis) 추세선} 모델.
* 설정 {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/TrendlineOptions TrendlineOptions}이고,
* {@link https://realchart.co.kr/config/config/base/series/trendline trendline} 항목으로 설정한다.
* ```js
* const config = {
* series: {
* trendline: {
* type: 'logarithmic'
* },
* },
* };
* ```
* 또, Chart.{@link rc.Series#trendline trendline}로 모델 객체를 가져올 수 있다.
* ```js
* chart.series.trendline.type = 'logarithmic';
* ```
*/
declare class Trendline extends ChartItem {
owner: ITrendlineOwner;
static defaults: TrendlineOptions;
private _variableArea;
private _fixedArea;
private _label;
private _marker;
_points: {
x: number;
y: number;
}[];
private _res;
private _expr;
private _minX;
private _maxX;
private _minY;
private _maxY;
private _formatter;
private _labelDomain;
constructor(owner: ITrendlineOwner);
protected _doInit(op: TrendlineOptions): void;
get variableArea(): TrendlineArea;
get fixedArea(): TrendlineArea;
get expression(): string;
get label(): TrendlineLabel;
get marker(): TrendlineMarker;
getLabelDomain(): IRichTextDomain;
setRange(xMin: number, xMax: number, yMin: number, yMax: number): this;
protected _doPrepareRender(chart: IChart): void;
getLabel(): string;
protected _doApply(op: TrendlineOptions): void;
private _calcLine;
private _linear;
private _logarithmic;
private _power;
private _calcLine2;
private _exponential;
_polynomial(f: NumberFormatter, pts: Point[]): {
expr: string;
evaluator: (x: number) => number;
};
private _movingAverage;
}
declare class DataPointLabelLine extends ChartItem {
static defaults: DataPointLabelLineOptions;
}
/**
* {@link Series 시리즈}의 {@link Series.pointLabel 데이터포인트 라벨} 표시에 대한 모델.
* 옵션 설정 모델은 {@link DataPointLabelOptions}이다.
*/
declare class DataPointLabel extends IconedText {
static readonly OFFSET = 4;
static defaults: DataPointLabelOptions;
private _point;
_domain: IRichTextDomain;
_overflowFit: number;
_vertAdjust: number;
protected _doInit(op: OP): void;
getValue(p: DataPoint, index: number): any;
getTextDomain(p: DataPoint): IRichTextDomain;
getText(value: any): string;
getOffset(): number;
getAlign(): Align;
getAlignOffset(): number;
getDefaultIconPos(): IconPosition;
getRotation(): number;
protected _isVisible(): boolean;
protected _doSetSimple(src: any): boolean;
protected _doApply(op: OP): void;
protected _doPrepareRender(chart: IChart): void;
}
/**
* {@link SeriesGroup 시리즈그룹}의 스택 합계 라벨 표시에 대한 모델.
* 옵션 설정 모델은 {@link StackLabelOptions}이다.
*/
declare class StackLabel extends IconedText {
static readonly OFFSET = 4;
static defaults: StackLabelOptions;
_overflowFit: number;
_vertAdjust: number;
_args: StackLabelCallbackArgs;
protected _doInit(op: StackLabelOptions): void;
getText(value: number): string;
getOffset(): number;
getGap(): number;
getDefaultIconPos(): IconPosition;
getCallbackArgs(chart: IChart, x: any, positiveTotal: number, negativeTotal: number): StackLabelCallbackArgs;
isStackLabelVisible(args: StackLabelCallbackArgs): boolean;
getStackLabelText(args: StackLabelCallbackArgs, value: number): string;
getRotation(): number;
getStackLabelStyle(args: StackLabelCallbackArgs): SVGStyleOrClass;
protected _isVisible(): boolean;
protected _doApply(op: StackLabelOptions): void;
}
interface StackTotalInfo {
x: any;
positiveTotal: number;
negativeTotal: number;
}
interface IPlottingItem {
_type(): string;
options: SeriesOptions | SeriesGroupOptions;
_xAxisObj: IAxis;
_yAxisObj: IAxis;
_valid: boolean;
get row(): number;
setRow(value: number): void;
get col(): number;
setCol(value: number): void;
index: number;
visible: boolean;
_sBase: number;
_yMin: number;
_yMax: number;
getAxisPadRate(): number;
isMarker(): boolean;
isXY(): boolean;
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, axisMin: number, axisBase: number): boolean;
canMaxPadding(axis: IAxis, axisMax: number, axisBase: number): boolean;
collectCategories(axis: IAxis): string[];
_prepareRender(): void;
prepareAfter(): void;
collectValues(axis: IAxis, vals: number[]): void;
collectRanges(axis: IAxis, vals: number[]): void;
prepareReferents(axis: IAxis): void;
seriesChanged(): boolean;
connectable(axis: IAxis): boolean;
isRace(): boolean;
getCategoryPos?(value: number): number;
}
/**
* 옆으로 나누어 배치 가능한가? ex) bar series/group
*/
interface IClusterable {
/**
* @private
* 축 단위 내에서 이 그룹이 차지하는 계산된 영역 너비. 0 ~ 1 사이의 값.
* 그룹들의 groupWidth로 정해진다.
*/
_clusterWidth: number;
/**
* @private
* 축 단위 내에서 이 그룹이 시작하는 위치. 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 {
name: string;
options: SeriesOptions;
chart: IChart;
_group: ISeriesGroup;
canDepth(): boolean;
_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;
getPointAt(xValue: number): DataPoint;
}
/**
* 삭제 상태가 된 포인트들을 값을 줄여가면서 서서히 사라지게 하는 애니메이션.
* pie, funnel, pictorial 등 축과 연결되지 않는 시리즈에서 사용된다.
* [주의] 진행 중일 때는 지정된 포인트들이 아직 제거되지 않은 상태이다.
* [주의] 이미 진행 중인 애니메이션이 있으면 병합해서 진행한다.
*/
declare class DecayAnimation extends RcAnimation {
series: Series;
points: DataPoint[];
private _prevAnis;
private _prevVrs;
constructor(series: Series, points: DataPoint[], prev: DecayAnimation);
protected _doUpdate(rate: number): boolean;
}
/**
* 차트 시리즈 모델들의 기반 클래스.
* 시리즈는 {@link data}로 지정된 값들을 데이터포인트로 표시하는 차트의 핵심 구성 요소이며,
* 여러 개의 연관된 시리즈들을 동시에 표시할 수 있다.
* 차트 설정의 다른 부분이나 API에 참조하기 위해서는 {@link name}을 반드시 지정해야 햔다.
* 차트 생성 시 {@link https://realchart.co.kr/config/config/base/series#type 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;
private _row;
private _col;
private _index;
_seriesIndex: number;
_group: SeriesGroup;
_xAxisObj: IAxis;
_yAxisObj: IAxis;
_valid: boolean;
_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;
_calcedStroke: string;
_legended: any;
private _legendMarker;
private _pointLabelCallback;
protected _pointArgs: DataPointCallbackArgs;
private _argsPoint;
private _loaded;
_pointsChanged: boolean;
/**
* palette color indices
*/
_paletteColors: number[];
private _decayAni;
_decayDuration: number;
private _dropAni;
_labelPos: PointLabelPosition;
_labelPosCallback: (p: DataPointCallbackArgs) => PointLabelPosition;
_labelOff: number;
_labelOffCallback: (p: DataPointCallbackArgs) => number;
_sBase: number;
_yMin: number;
_yMax: number;
_needAnimate: boolean;
protected _doInit(op: OP): 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;
isGroupTooltip(): boolean;
getTooltipDetail(point: DataPoint): string;
getTooltipText(series: ISeries, point: DataPoint): string;
getTooltipParam(series: ISeries, point: DataPoint, param: string): any;
/**
* 툴팁 헤더 색상을 반환한다.
* null을 반환하면 TooltipView 기본 색상 로직이 사용된다.
*/
getTooltipHeaderColor(point: DataPoint): string;
_type(): string;
_viewType(): string;
/**
* 차트나 시리즈그룹 내에서 위치.
*/
get index(): number;
/**
* 시리즈 이름.
* 시리즈 생성시 지정된 후 변경할 수 없다.
* 차트의 다른 구성 요소에서 이 시리즈를 참조할 때 사용되며,
* 레전드나 툴팁에서 시리즈를 나타내는 텍스트로도 사용된다.
*/
get name(): string;
/**
* row
*/
get row(): number;
setRow(value: number): void;
/**
* col
*/
get col(): number;
setCol(value: number): void;
/**
* 데이터포인트 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;
/**
* widget 시리즈 인지 여부
*/
get isWidget(): 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;
/**
* @private
*
* CategoryAxis에 연결 가능한가?
*/
canCategorized(): boolean;
hasZ(): boolean;
defYAxisType(): string;
/**
* @private
*
* 병렬 배치 가능한가?
*/
isClusterable(): boolean;
isMarker(): boolean;
isXY(): boolean;
displayName(): string;
legendMarker(doc: Document, size: number): RcElement;
legendColor(): string;
legendStroke(): string;
legendLabel(): string;
legendKey(): any;
styleLegendMarker(marker: RcElement): void;
canMixWith(other: IPlottingItem): boolean;
/**
* @private
*
* bar series 계열이나 area series처럼 지정한 값을 기준으로 표시하는 방향이나 스타일이 달라지는 경우 기준 값.
*/
getBaseValue(axis: IAxis): number;
isBased(axis: IAxis): boolean;
canMinPadding(axis: IAxis, axisMin: number, axisBase: number): boolean;
canMaxPadding(axis: IAxis, axisMax: number, axisBase: number): boolean;
hasShape(): boolean;
setShape(shape: Shape): void;
seriesChanged(): boolean;
getMinPointWidth(): number;
isRace(): boolean;
get xMax(): number;
get xMin(): number;
get yMax(): number;
get yMin(): number;
get zMax(): number;
get zMin(): number;
canDepth(): boolean;
getVisibleSeries(): ISeries[];
protected _getNoClip(polar: boolean): boolean;
needClip(polar: boolean): boolean;
connectable(axis: IAxis): boolean;
initPoints(source: any[]): DataPoint[];
private $_getXStart;
private $_getXStep;
protected _buildVisPoints(points: DataPoint[]): DataPoint[];
protected _prepareRunPoints(xAxis: IAxis, yAxis: IAxis): void;
protected _dataSourceChanged(): void;
_connect(chart: IChart): void;
_prepareRender(): void;
prepareAfter(): void;
collectCategories(axis: IAxis): string[];
protected _doCollectCategories(axis: CategoryAxis): string[];
/**
* @private
*
* vals가 지정되지 않은 상태로 호출될 수 있다.
* x값이 숫자가 아닐 때 axis가 해석하지 못하면 xStart 부터 xStep으로 증가 시켜 가면서 순서대로 지정한다.
*/
collectValues(axis: IAxis, vals: number[]): void;
collectRanges(axis: IAxis, vals: number[]): void;
getAxisPadRate(): number;
protected _getRangeMinMax(axis: 'x' | 'y' | 'z'): {
min: number;
max: number;
};
private $_prepareViewRanges;
prepareReferents(axis: IAxis): void;
refer(other: Series, axis: IAxis): void;
getLegendSources(list: ILegendSource[]): void;
getLabelPos(labels: DataPointLabel): PointLabelPosition;
protected _getLabelDefaultPos(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, yValue?: any): DataPoint;
/**
* xValue에 해당하는 첫번째 데이터포인터의 yValue를 리턴한다.
*
* @param xValue x값 혹은 x,y값이 포함된 데이터포인트 정보. x축이 category 축이면 카테고리 이름을 지정할 수 있다.
* @param prop 가져올 값. 지정하지 않으면 'yValue'.
* @returns prop로 지정한 데이터포인트 값.
*/
getValueAt(xValue: any, prop?: string): number;
/**
* @private
*/
_dataPointsChanged(): void;
/**
* 데이터포인터의 값들을 변경한다.
* 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, animate?: boolean): boolean;
/**
* @private
* findPoint가 구현된 시리즈가 없음.
* 지정한 값들에 해당하는 첫번째 데이터포인트의 정보를 리턴한다.
* 전달되는 데이터포인트 정보는 리턴 시점의 복사본이다.
*
* @param keys 데이터포이터를 찾기 위한 값 목록.
* @returns 데이터포인트 모델 정보 객체.
*/
/**
* 시리즈 data 원본을 변경하고 데이터포인트들을 다시 생성한다.
* [주의] x축이 카테고리 축이고, x축의 categories 속성이 명시적으로 설정되지 않았다면,
* 이 함수 호출 후 카테고리가 변경될 수 있다.
*
* @param data 원본 데이터포인트 값 배열.
*/
updateData(data: any): void;
protected _needAddAnimation(): boolean;
/**
* 데이터포인트를 추가한다.
*
* @param source 데이터포인트 원본 정보.
* @returns 실제 추가된 데이터포인트 객체.
*/
addPoint(source: any, animate?: boolean): DataPoint;
/**
* 하나 이상의 데이터포인트들을 추가한다.
*
* @param source 데이터포인트 원본 목록.
* @returns 실제 추가된 데이터포인트 객체 배열.
*/
addPoints(source: any[], animate?: boolean): DataPoint[];
protected _needDecayEffect(): boolean;
/**
* 시리즈의 데이터포인트 목록 중 index에 위치한 데이터포인트를 제거한다.
*
* @param index 데이터포인트 index
* @returns 제거되면 true
*/
removePointAt(index: number, animate?: boolean): boolean;
/**
* 데이터포인트를 제거한다.
* p 매개변수에 데이터포인트 대신 값을 지정하면,
* 그 값이 xValue와 동일한 첫번째 데이터포인트를 찾는다.
* 'bubble' 시리즈 처럼 x, y 두 위치가 필요한 경우
* [xValue, yValue] 형태로 지정한다.
*
* @param p 제거할 데이터포인트 객체.
* @returns 실제로 제거되면 true를 리턴한다.
*/
removePoint(p: DataPoint | string | number | [number, number], animate?: boolean): boolean;
/**
* 여러 데이터포인트들을 index 목록에 따라 제거한다.
*
* @param indices 제거할 데이터포인트 index 목록.
* @returns 실제로 제거되면 데이터포인트 개수.
*/
removePointsAt(indices: number[], animate?: boolean): number;
/**
* 지정한 데이터포인트들를 제거한다.
* pts 매개변수에 데이터포인트 대신 값들을 지정하면,
* 그 값이 xValue와 동일한 첫번째 데이터포인트를 찾는다.
* 'bubble' 시리즈 처럼 x, y 두 위치가 필요한 경우
* [xValue, yValue] 형태로 지정한다.
*
* @param pts 제거할 데이터포인트 목록.
* @returns 실제로 제거되면 데이터포인트 개수.
*/
removePoints(pts: (DataPoint | string | number | [number, number])[], animate?: boolean): number;
getDropPoints(): DataPoint[];
followPointer(): boolean;
protected _doApply(op: SeriesOptions): void;
_setIndex(index: number, seriesIndex?: number): 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): this;
protected _doLoadPoints(src: any): void;
protected _doPrepareRender(): void;
protected _setViewRange(p: DataPoint, axis: 'x' | 'y' | 'z'): void;
_defViewRangeValue(): 'x' | 'y' | 'z';
protected _canSort(): boolean;
$_setDecay(ani: DecayAnimation): void;
$_clearDecay(): void;
$_clearDrop(): void;
}
type PlottingItem = Series | SeriesGroup;
/**
* @private
*/
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;
canDepth(): boolean;
/** @private */
_clear(): void;
get(index: number): Series | SeriesGroup;
getSeries(name: string): Series;
getVisibleSeries(): Series[];
getPaneSeries(row: number, col: number): Series[];
seriesByType(type: string): Series | SeriesGroup, SeriesGroupOptions>;
seriesByPoint(point: DataPoint): Series;
getLegendSources(row?: number, col?: number): ILegendSource[];
canPolar(): boolean;
load(src: any): void;
add(source: any, animate: boolean): Series;
remove(series: number | string | Series): Series;
updateData(values: any[]): void;
connect(chart: IChart): void;
prepareRender(): void;
prepareAfter(): void;
private $_loadItem;
private $_add;
}
/**
* @private
*/
declare abstract class ConnectableSeries extends Series {
static defaults: ConnectableSeriesOptions;
protected _doInit(op: OP): 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;
protected _doSetSimple(src: any): boolean;
}
declare class WidgetSeriesPoint extends DataPoint implements ILegendSource {
_percent: number;
_calcedColor: string;
_calcedStroke: string;
_legendKey: any;
private _legendMarker;
legendMarker(): RcElement;
setLegendMarker(elt: RcElement): void;
legendColor(): string;
legendStroke(): string;
legendLabel(): string;
legendKey(): any;
styleLegendMarker(marker: RcElement): void;
isEmpty(): boolean;
initPrev(axis: IAxis, prev: any): void;
getParam(param: string): any;
}
declare class WidgetSeriesConnector extends ChartItem {
static defaults: WidgetSeriesConnectorOptions;
protected _doSetSimple(src: any): boolean;
}
declare abstract class WidgetSeriesLabel extends DataPointLabel {
isSub: boolean;
static defaults: WidgetSeriesLabelOptions;
private _connector;
private _distance;
protected _distanceDim: IPercentSize;
constructor(chart: IChart, isSub?: boolean);
protected _doInit(op: OP): void;
/**
* 연결선 모델.
*/
get connector(): WidgetSeriesConnector;
getWidgetAlign(): number;
protected _doApply(options: OP): void;
}
declare class OthersGroup extends ChartItem {
private static readonly DEF_COUNT;
static defaults: OthersGroupOptions;
private _minDim;
private _save;
private _dirty;
calculate(points: DataPoint[]): DataPoint[];
isDirty(): boolean;
protected _doApply(options: OthersGroupOptions): void;
}
declare abstract class WidgetSeries extends Series {
static readonly DEF_CENTER = "50%";
static defaults: WidgetSeriesOptions;
private _centerX;
private _centerY;
private _centerXDim;
private _centerYDim;
private _othersGroup;
private _groupedPoints;
protected _sum: number;
protected _doInit(op: OP): void;
get othersGroup(): OthersGroup;
get isWidget(): boolean;
getSum(): number;
getCenter(plotWidth: number, plotHeight: number): Point;
protected _getLabelDefaultPos(labels: WidgetSeriesLabel, pos: PointLabelPosition): PointLabelPosition;
needAxes(): boolean;
protected _needDecayEffect(): boolean;
_colorByPoint(): boolean;
getLegendSources(list: ILegendSource[]): void;
_isVisibleInLegend(p: WidgetSeriesPoint): boolean;
protected _doApply(op: OP): void;
collectValues(axis: IAxis, vals: number[]): void;
canMinPadding(axis: IAxis, min: number): boolean;
canMaxPadding(axis: IAxis, max: number): boolean;
protected _dataSourceChanged(): void;
contains(p: DataPoint): boolean;
protected _buildVisPoints(points: DataPoint[]): DataPoint[];
protected abstract _createOthersPoint(source: any, points: WidgetSeriesPoint[]): WidgetSeriesPoint;
}
/**
* 직교 좌표계가 표시된 경우, 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: OP): 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, minWidth: number): number;
getPointPos(length: number): number;
isClusterable(): boolean;
setCluster(width: number, pos: number): void;
protected _doPrepareRender(): void;
}
/**
* {@link BasedSeries} 데이터포인트 설정 모델.
*/
declare class BasedSeriesLabel extends DataPointLabel {
static defaults: BasedSeriesLabelOptions;
private _line;
getAlign(): Align;
getAlignOffset(): number;
/**
* 연결선 설정 모델.
*/
get line(): DataPointLabelLine;
protected _doInit(op: OP): void;
}
/**
* 'bar'와 같이 y축 기준 위/아래 구분이 필요한 시리즈.
* 구분하는 값은 {@link baseValue}로 지정한다.
*/
declare abstract class BasedSeries extends ClusterableSeries {
static readonly DEPTH = 10;
static readonly DISTANCE = 5;
static defaults: BasedSeriesOptions;
private _base;
private _depth;
private _distance;
_groupDistance: number;
get depth(): number;
get distance(): number;
protected _createLabel(chart: IChart): DataPointLabel;
protected _doPrepareRender(): void;
getBaseValue(axis: IAxis): number;
isBased(axis: IAxis): boolean;
protected _getGroupBase(): number;
protected _getLabelDefaultPos(labels: DataPointLabel, pos: PointLabelPosition): PointLabelPosition;
}
/**
*/
declare abstract class RangedSeries extends ClusterableSeries {
collectValues(axis: IAxis, vals: number[]): void;
protected abstract _getBottomValue(p: DataPoint): number;
}
declare abstract class LowRangedSeries extends RangedSeries {
}
/**
* 시리즈그룹 모델들의 기반 클래스
* 기본 {@link options 설정} 모델은 {@link opt.SeriesGroupOptions SeriesGroupOptions}이다.
* 같은 {@link opt.SeriesOptions#type type}의 여러 시리즈들을 연관지어 표시한다.
*/
declare abstract class SeriesGroup extends ChartItem implements ISeriesGroup, ITooltipContext {
static readonly LAYOUT_MAX: number;
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;
tooltipListRow?: [string, string];
tooltipFooter?: string;
}, series: ISeries[], curr: ISeries, point: DataPoint, list: TooltipList): string;
static inflateTooltipParam(series: ISeries[], ser: ISeries, point: DataPoint, param: string): string;
private _row;
private _col;
private _index;
private _series;
protected _visibles: T[];
_xAxisObj: IAxis;
_yAxisObj: IAxis;
_valid: boolean;
_stackPoints: Map;
_stackTotals: Map;
_stacked: boolean;
_legended: any;
private _seriesChanged;
_stackLabel: StackLabel;
_sBase: number;
_yMin: number;
_yMax: number;
isGroupTooltip(): boolean;
getTooltipText(series: ISeries, point: DataPoint, list: TooltipList): string;
getTooltipParam(series: ISeries, point: DataPoint, param: string): string;
isXY(): boolean;
isMarker(): boolean;
get col(): number;
setCol(value: number): void;
get row(): number;
setRow(value: number): void;
get series(): T[];
needAxes(): boolean;
isEmpty(visibleOnly: boolean): boolean;
canCategorized(): boolean;
defYAxisType(): string;
isClusterable(): boolean;
getBaseValue(axis: IAxis): number;
getVisibleSeries(): ISeries[];
isRace(): boolean;
getDepth(): number;
getDistance(): number;
get index(): number;
get visCount(): number;
get stackLabel(): StackLabel;
_type(): string;
_seriesType(): string;
connectable(axis: IAxis): boolean;
isFirstVisible(series: ISeries): boolean;
isLastVisible(series: ISeries): boolean;
collectValues(axis: IAxis, vals: number[]): void;
collectRanges(axis: IAxis, vals: number[]): void;
prepareReferents(axis: IAxis): void;
collectCategories(axis: IAxis): string[];
getLegendSources(list: ILegendSource[]): void;
getAxisPadRate(): number;
isBased(axis: IAxis): boolean;
canMinPadding(axis: IAxis, axisMin: number, axisBase: number): boolean;
canMaxPadding(axis: IAxis, axisMax: number, axisBase: number): boolean;
seriesChanged(): boolean;
remove(series: T): boolean;
_getVisiblePoints(): DataPoint[];
getLayoutMax(): number;
protected _doInit(op: OP): void;
protected _doApply(op: OP): void;
protected _doSaveArray(prop: string, value: any[]): any[];
_prepareRender(): void;
_connect(chart: IChart): void;
protected _doPrepareRender(chart: IChart): void;
prepareAfter(): void;
protected abstract _canContain(ser: Series): boolean;
_setIndex(index: number): void;
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;
isXY(): boolean;
}
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;
/** 안쪽 구멍(도넛) 반지름. 픽셀 단위. */
rdInner: number;
cyclic: boolean;
min?: number;
max?: number;
}
declare class PolarInnerText extends IconedText {
getDefaultIconPos(): IconPosition;
}
declare class BodyDepthLine extends ChartItem {
static defaults: BodyDepthLineOptions;
}
declare class BodyDepthSide extends ChartItem {
static defaults: BodyDepthOptions;
private _line;
private _endLine;
private _gridLine;
protected _doInit(op: BodyDepthSideOptions): void;
get line(): BodyDepthLine;
get endLine(): BodyDepthLine;
get gridLine(): BodyDepthLine;
}
/**
* body 깊이 설정 모델.
*/
declare class BodyDepth extends ChartItem {
static defaults: BodyDepthOptions;
private _xSide;
private _ySide;
private _orgLine;
protected _doInit(op: BodyDepthOptions): void;
/**
* x축 쪽 depth side 모델.
*/
get xSide(): BodyDepthSide;
/**
* y축 쪽 depth side 모델.
*/
get ySide(): BodyDepthSide;
/**
* 원점에서 depth side 끝까지 연결하는 선 모델.
*/
get orgLine(): BodyDepthLine;
protected _isVisible(): boolean;
protected _doSetSimple(src: any): boolean;
protected _doApply(op: BodyDepthOptions): void;
}
/**
* @private
* body 깊이 관련 크기 정보 집합.
*/
interface IBodyDepthExtents {
depth: number;
angle: number;
side: number;
base: number;
wBody: number;
hBody: number;
}
/**
* 시리즈 및 게이지들이 표시되는 영역 모델.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/BodyOptions BodyOptions}이고,
* {@link https://realchart.co.kr/config 차트 설정}에서 {@link https://realchart.co.kr/config/config/body body} 항목으로 설정한다.
* ```js
* const config = {
* body: {
* radius: '50%',
* },
* };
* ```
* 또, Chart.{@link rc.Chart#body body}로 모델 객체를 가져올 수 있다.
* ```js
* const body = chart.body;
* body.radius = '50%';
* ```
*/
declare class Body extends ChartItem implements IAnnotationOwner {
static defaults: BodyOptions;
private _anns;
private _depth;
private _image;
private _zoomButton;
private _emptyView;
_annotations: AnnotationCollection;
private _radiusDim;
private _innerRadiusDim;
private _centerXDim;
private _centerYDim;
private _rd;
private _rdInner;
private _cx;
private _cy;
private _innerText;
constructor(chart: IChart);
protected _doInit(op: OP): void;
anchorByName(name: string): ChartItem;
/**
* 깊이 모델.
*/
get depth(): BodyDepth;
get image(): BackgroundImage;
get emptyView(): EmptyView;
/**
* {@link innerRadius}가 0보다 클 때, polar 플롯 중앙에 표시되는 텍스트.
* 기본 클래스 selector는 'rct-polar-body-inner'이다.
*/
get innerText(): PolarInnerText;
hasInner(): boolean;
get zoomButton(): ZoomButton;
canZoom(): boolean;
_getDepth(w: number, h: number): IBodyDepthExtents;
getRadius(width: number, height: number): number;
/**
* {@link innerRadius}를 바깥 반지름에 대한 비율(0~1)로 반환한다.
* PieSeries.getInnerRadius와 동일한 규칙이다.
*/
getInnerRadius(rd: number): number;
getInnerRadiusPx(rd: 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(op: OP): 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 {
/** 핸들 원의 반지름 (px). {@link HANDLE_TRACK_HEIGHT} 기준으로 적정 크기로 고정. */
static readonly HANDLE_RADIUS = 9.75;
/** 스크롤 track 높이 (px). */
static readonly HANDLE_TRACK_HEIGHT = 6;
/** thickness 하단에서 track 중심까지의 거리 (px). {@link HANDLE_TRACK_HEIGHT} / 2 */
static readonly HANDLE_TRACK_OFFSET: number;
static defaults: SeriesNavigatorOptions;
private _handle;
private _mask;
private _borderLine;
private _source;
_naviChart: IChart;
_dataChanged: boolean;
_vertical: boolean;
private _chartConfig;
private _axisType;
protected _doInit(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* 핸들 모델.
*/
get handle(): NavigiatorHandle;
/**
* 마스크 모델.
*/
get mask(): NavigatorMask;
/**
* 경계선 설정 모델.
*/
get borderLine(): ChartItem;
/**
* 네비게이터 두께를 반환한다.
* @default 45
*/
getThickness(): number;
/**
* 네비게이터와 차트 본체 방향 사이의 간격을 반환한다.
* @default 8
*/
getGap(): number;
/**
* 네비게이터와 차트 본체 반대 방향 사이의 간격을 반환한다.
* @default 3
*/
getGapFar(): number;
/**
* thickness 하단에서 핸들 원 하단까지의 거리 (px).
*/
getHandleOverflow(): number;
/**
* gap·thickness·gapFar를 합한 navigator 전체 예약 크기 (px).
* gap은 ChartView layout에서 transY로, thickness는 navigator 뷰 높이로 적용된다.
* gapFar가 {@link getHandleOverflow}보다 작으면 핸들 clipping 방지를 위해 후자를 사용한다.
*/
getSize(): number;
axisLen(): number;
axis(): Axis;
protected _doLoad(options: ChartItemOptions, src: any): void;
protected _doPrepareRender(chart: IChart): void;
}
/**
* 차트 제목(title) 모델.
* 설정 {@link options 옵션}은 {@link https://realchart.co.kr/docs/api/options/TitleOptions TitleOptions}이고,
* {@link https://realchart.co.kr/config/config/title title} 항목으로 설정한다.
* ```js
* const config = {
* title: {
* visible: true,
* text: 'Chart Title',
* },
* };
* ```
* 또, Chart.{@link rc.Chart#title title}로 모델 객체를 가져올 수 있다.
* ```js
* const title = chart.title;
* legend.text = 'Chart Title';
* ```
* 기본적으로 차트 중앙 상단에 표시되지만 {@link https://realchart.co.kr/config/config/title#align align}, {@link https://realchart.co.kr/config/config/title#verticalalign verticalAlign} 등으로 위치를 변경할 수 있다.
* {@link https://realchart.co.kr/guide/title 타이틀 개요} 페이지를 참조한다.
*/
declare class Title extends ChartItem {
static defaults: TitleOptions;
protected _isVisible(): boolean;
protected _doSetSimple(src: any): boolean;
}
/**
* 차트 부제목(subtitle) 설정 모델.
* 기본적으로 주 제목(title)의 설정을 따르고, 몇가지 속성들이 추가된다.
* 설정 {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/SubtitleOptions SubtitleOptions}이고,
* {@link https://realchart.co.kr/config/config/subtitle subtitle} 항목으로 설정한다.
* ```js
* const config = {
* subtitle: {
* visible: true,
* text: 'Sub-Title',
* },
* };
* ```
* 또, Chart.{@link rc.Chart#subtitle subtitle}로 모델 객체를 가져올 수 있다.
* ```js
* const title = chart.title;
* legend.text = 'Sub-Title';
* ```
* {@link https://realchart.co.kr/guide/subtitle 부제목 개요} 페이지를 참조한다.
*/
declare class Subtitle extends Title {
static defaults: SubtitleOptions;
}
declare class HtmlButton extends ChartItem {
static defaults: HtmlButtonOptions;
isChartScope(): boolean;
getHoverEffect(): HtmlButtonHoverEffect;
click(): void;
}
declare class HtmlButtonCollection extends ChartItemCollection {
load(src: any): void;
private $_loadItem;
}
/**
* @private
*/
interface ISplit extends ChartItem {
count: number;
getBodyAnnotation(name: string): Annotation;
prepareRender(xAxes: AxisCollection, yAxes: AxisCollection): void;
getAxisOf(annoation: Annotation, isX: boolean): IAxis;
isValidAxis(axis: IAxis): boolean;
}
interface IChart {
wrapper: object;
win: Window & typeof globalThis;
_op: 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;
_width: number;
_height: 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;
hoverable(): boolean;
clickable(): boolean;
_needAxes(): 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;
_getAnnotations(): AnnotationCollection;
_getXAxes(): AxisCollection;
_getYAxes(): AxisCollection;
_getXAxesAt(col: number, visibleOnly: boolean): Axis[];
_getYAxesAt(row: number, visibleOnly: boolean): Axis[];
_getXAxesAtPane(col: number, row: number, visibleOnly: boolean): Axis[];
_getYAxesAtPane(col: number, row: number, visibleOnly: boolean): Axis[];
getAxesGap(): number;
_connectSeries(series: IPlottingItem, isX: boolean): Axis;
_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;
getAxisOf(annotation: Annotation, isX: boolean): IAxis;
isValidAxis(axis: IAxis): boolean;
getPaletteColors(palette: string): string[];
}
/**
* 차트 제작 주체 등을 표시하는 영역에 대한 모델.
* 기본적으로 차트 오른쪽 아래에 표시되지만, {@link align}, {@link verticalAlign} 등으로 위치를 지정할 수 있다.
* {@link url}을 설정하면 마우스 클릭 시 새창을 열고 해당 위치로 이동시킨다.
*/
declare class Credits extends ChartItem {
static defaults: CreditsOptions;
isFloating(): boolean;
protected _doSetSimple(src: any): 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 _pointHovering;
static defaults: ChartOptionsOptions;
protected _doInit(op: {
[child: string]: ChartItemOptions;
}): void;
/**
* 데이터포인트에 마우수가 올라갈 때 처리하는 방식.
*/
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;
}
/**
* @private
*/
declare enum SectionDir {
LEFT = "left",
TOP = "top",
BOTTOM = "bottom",
RIGHT = "right"
}
/**
* @private
*/
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;
_op: ChartConfiguration;
private _bases;
_data: ChartDataCollection;
_templates: {
[key: string]: any;
};
_assets: AssetCollection;
_chartOptions: ChartOptions;
_title: Title;
_subtitle: Subtitle;
_legend: Legend;
_credits: Credits;
_buttons: HtmlButtonCollection;
_tooltip: Tooltip;
private _series;
private _xAxes;
private _yAxes;
_split: ISplit;
private _gauges;
_body: Body;
_annotations: AnnotationCollection;
_navigator: SeriesNavigator;
_exporter: Exporter;
_width: number;
_height: number;
private _palColors;
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;
get win(): Window & typeof globalThis;
/**
* @deprecated
*/
get options(): ChartConfiguration;
/**
*
*/
get chartOptions(): ChartOptions;
/**
* 크레딧 모델.
*/
get credits(): Credits;
_createChart(config: any): IChart;
animatable(): boolean;
loadAnimatable(): boolean;
hoverable(): boolean;
clickable(): boolean;
getAxisOf(annotation: Annotation, isX: boolean): IAxis;
isValidAxis(axis: IAxis): boolean;
getTooltipContext(scope: TooltipScope, series: ISeries, point: DataPoint): ITooltipContext;
get chart(): IChart;
anchorByName(name: string): ChartItem;
get wrapper(): object;
get type(): "area" | "line" | "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 seriesCount(): number;
get first(): IPlottingItem;
get firstSeries(): Series;
get firstGauge(): Gauge;
get xAxis(): IAxis;
get yAxis(): IAxis;
canOverflowRender(): boolean;
/**
* @private
*
* 좌표축이 필요하면true이다.
*
* 현재, 모든 시리즈가 pie 이면 false가 된다.
* false이면 직교 좌표가 표시되지 않는다.
*/
_needAxes(): boolean;
/** @private*/
_getSeries(): PlottingItemCollection;
/** @private*/
_getGauges(): GaugeCollection;
/** @private */
_getAnnotations(): AnnotationCollection;
/** @private*/
_getXAxes(): AxisCollection;
/** @private*/
_getYAxes(): AxisCollection;
getAnnotations(): Annotation[];
_getButtons(): HtmlButtonCollection;
isGauge(): boolean;
isPolar(): boolean;
isWidget(): boolean;
isInverted(): boolean;
isSplitted(): boolean;
isEmpty(visibleOnly: boolean): boolean;
_getXAxesAt(col: number, visibleOnly: boolean): Axis[];
_getYAxesAt(row: number, visibleOnly: boolean): Axis[];
_getXAxesAtPane(col: number, row: number, visibleOnly: boolean): Axis[];
_getYAxesAtPane(col: number, row: number, visibleOnly: boolean): Axis[];
seriesByName(series: string): Series;
seriesByType(type: string): Series | SeriesGroup;
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[];
private _setProperties;
loadBase(source: any, model: string, type: string): any;
/**
* @private
* [주의] 새 차트를 구성하기 위해서 이 메소드를 직접 호출해서는 안된다. {@link Chart.load load}를 대신 호출해야 한다.
*/
_load(config: ChartConfiguration): this;
update(options: ChartConfiguration, render: boolean): void;
export(options: ExportOptions): void;
/** @private */
_connectSeries(series: IPlottingItem, isX: boolean): Axis;
/** @private */
_dataChanged(): void;
/** @private */
_isDataChanged(): boolean;
/** @private */
_prepareRender(): this;
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;
getPaletteColors(palette: string): string[];
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;
}
declare class AxisAnimation extends RcAnimation {
private _axis;
private _prevMin;
private _prevMax;
private _axisLen;
private _offset;
constructor(axis: Axis, prevMin: number, prevMax: number, endHandler: RcAnimationEndHandler);
getPos(pos: number, reversed: boolean): number;
protected _doUpdate(rate: number, _oldRate: number): boolean;
protected _stop(canceled: boolean): void;
protected _doStop(): void;
private $_calcRange;
}
/**
* 축 상에 crosshair의 정보를 표시하는 view 설정 모델.
*/
declare class CrosshairFlag extends ChartItem {
static defaults: CrosshairFlagOptions;
}
/**
* 직선 또는 bar 형태로 축 위의 마우스 위치를 표시하는 구성 요소 모델.
*/
declare class Crosshair extends ChartItem {
axis: IAxis;
static defaults: NumberCrosshairOptions & TimeCrosshairOptions;
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;
}
/**
* @private
*/
interface IAxis {
get row(): number;
get col(): number;
_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, minSize: number): boolean;
getXStart(): number;
/**
* 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;
axisToData(value: number): number;
/**
* 값(축 상 위치)에 해당하는 축 단위 픽셀 크기.
*
* 값에 따라 크기가 다를 수도 있다.
*/
getUnitLen(length: number, value: number): number;
value2Tooltip(value: number): any;
hasBreak(): boolean;
isBreak(pos: number): boolean;
isArced(): boolean;
isAnimating(): boolean;
}
/**
* 축 {@link AxisTitle 타이틀}, {@link AxisLink line}, {@link AxisTick tick} 등,
* {@link Axis 축} 구성 요소 모델들의 기반(base) 클래스.
*/
declare abstract class AxisItem extends ChartItem {
readonly axis: Axis;
constructor(axis: Axis);
}
/**
* 축 선(line) 모델.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisLineOptions AxisLineOptions}이고,
* {@link https://realchart.co.kr/config/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;
}
/**
* 축 타이틀 모델.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisTitleOptions AxisTitleOptions}이고,
* {@link https://realchart.co.kr/config/config/base/axis#title title} 항목으로 설정한다.
*
* ```js
* const config = {
* xAxis: {
* title: {
* text: '서울시 년간 강우량',
* style: {
* fontSize: '30px',
* },
* },
* },
* };
* ```
*/
declare class AxisTitle extends AxisItem {
static defaults: AxisTitleOptions;
private _rotation;
private _gap;
getGap(): number;
getRotation(): number;
getTextOrientation(): TextOrientation;
protected _isVisible(): boolean;
protected _doSetSimple(src: any): boolean;
protected _doApply(op: AxisTitleOptions): void;
}
/**
* 축 단위 label 모델.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisUnitLabelOptions AxisUnitLabelOptions}이고,
* {@link https://realchart.co.kr/config/config/base/axis#unitlabel unitLabel} 항목으로 설정한다.
*
* ```js
* const config = {
* xAxis: {
* unitLabel: {
* text: '(년)',
* style: {
* fontSize: '14px',
* },
* },
* },
* };
* ```
*/
declare class AxisUnitLabel extends AxisItem {
static defaults: AxisUnitLabelOptions;
protected _isVisible(): boolean;
protected _doSetSimple(src: any): boolean;
}
interface IAxisGridRow {
axis: Axis;
from: number;
to: number;
color: string;
style: SVGStyleOrClass;
}
/**
* 축 그리드 사이에 생성된 영역 표시 설정 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisGridRowsOptions AxisGridRowsOptions}이다.
*/
declare class AxisGridRows extends AxisItem {
getRows(): IAxisGridRow[];
protected _doSetSimple(source: any): boolean;
}
/**
* Axis tick의 위치에 수평 혹은 수직선으로 plot 영역을 구분 표시한다.
* {@link visible} 기본값이 undefined인데,
* visible이 undefined나 null로 지정되면, 축 위치에 따라 visible 여부가 결정된다.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisGridOptions AxisGridOptions}이다.
*/
declare abstract class AxisGrid extends AxisItem {
static defaults: AxisGridOptions;
private _rows;
protected _doInit(op: OP): void;
get rows(): AxisGridRows;
abstract getPositions(axis: Axis, length: number): number[];
protected _isVisible(): boolean;
}
/**
* 축 가이드 label 설정 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisGuideLabelOptions AxisGuideLabelOptions}이다.
*/
declare class AxisGuideLabel extends IconedText {
static defaults: AxisGuideLabelOptions;
getText(): string;
getDefaultIconPos(): IconPosition;
}
/**
* 기본적으로 이 축에 연결된 모든 body에 모두 표시된다.
* col, row를 지정해서 특정 body에만 표시되도록 할 수 있다.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisGuideOptions AxisGuideOptions}이다.
*/
declare abstract class AxisGuide extends AxisItem {
static defaults: AxisGuideOptions;
private _label;
protected _doInit(op: OP): void;
/**
* label 모델.
*/
get label(): AxisGuideLabel;
protected _doPrepareRender(chart: IChart): void;
canConstainedTo(row: number, col: number): boolean;
}
/**
* 축 위의 특정한 값에 선분을 표시한다.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisLineGuideOptions AxisLineGuideOptions}이다.
*/
declare class AxisLineGuide extends AxisGuide {
}
/**
* 축 위 특정한 두 값 사이의 영역을 구분 표시한다.
* [주의] realchart-style.css에 fill-opacity가 0.2로 설정되어 있다.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisRangeGuideOptions AxisRangeGuideOptions}이다.
*/
declare class AxisRangeGuide extends AxisGuide {
}
/**
* 축 tick 표시 방식과 tick 위치 마다 표시되는 선(line) 등에 대한 모델들의 기반(base) 클래스.
* 축 종류에 따라 다양한 설정 속성들이 존재한다.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisTickOptions AxisTickOptions}이고,
* {@link https://realchart.co.kr/config/config/base/axis#tick tick} 항목으로 설정한다.
* 별도 설정이 없으면 표시되지 않는다.
*
* ```js
* const config = {
* xAxis: {
* tick: {
* visible: true,
* length: 10
* }
* },
* };
* ```
*/
declare abstract class AxisTick extends AxisItem {
private static readonly DEF_LENGTH;
static defaults: AxisTickOptions;
private _length;
private _gap;
_inside: boolean;
canUseNumSymbols(): boolean;
_getLength(): number;
_getGap(): number;
protected _doSetSimple(src: any): boolean;
protected _doPrepareRender(chart: IChart): void;
}
/**
* major tick 사이 보조 눈금(minor tick) 모델.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisMinorTickOptions AxisMinorTickOptions}이고,
* {@link https://realchart.co.kr/config/config/base/axis#minortick minorTick} 항목으로 설정한다.
*/
declare class AxisMinorTick extends AxisItem {
static defaults: AxisMinorTickOptions;
private _length;
private _count;
_getLength(): number;
_getCount(): number;
protected _doSetSimple(src: any): boolean;
protected _doPrepareRender(chart: IChart): void;
}
/**
* major grid 사이 보조 격자선(minor grid line) 모델.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisMinorGridOptions AxisMinorGridOptions}이고,
* {@link https://realchart.co.kr/config/config/base/axis/grid#minorgrid grid.minorGrid} 항목으로 설정한다.
*/
declare class AxisMinorGrid extends AxisItem {
static defaults: AxisMinorGridOptions;
}
/**
* 축 label 모델.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisLabelOptions AxisLabelOptions}이고,
* {@link https://realchart.co.kr/config/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;
_inside: boolean;
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 _doApply(op: OP): void;
protected _doPrepareRender(chart: IChart): void;
}
interface IAxisTick {
index: number;
value: number;
pos: number;
label: string;
}
/**
* {@link rc.Axis 축} 스크롤바 모델.
* 축이 {@link rc.Axis.isZoomed zoom} 상태일 때, 사용자가 스크롤 범위나 위치를 변경할 수 있다.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisScrollBarOptions AxisScrollBarOptions}이고,
* {@link https://realchart.co.kr/config/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 implements IAxisZoom {
axis: Axis;
min: number;
max: number;
start: number;
end: number;
constructor(axis: Axis);
total(): number;
length(): number;
isFull(): boolean;
clamp(value: number, continuous?: boolean): number;
resize(start: number, end: number, minSize: number): boolean;
}
/**
* 전체 각도가 360도 보다 작은 부채꼴 {@link https://realchart.co.kr/config/config/#polar polar} 좌표계의 X 축에서 원호의 양 끝과 중심에 연결되는 두 선분 모델.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisSectorLineOptions AxisSectorLineOptions}이고,
* {@link https://realchart.co.kr/config/config/base/axis#sectorline sectorLine} 항목으로 설정한다.
*
* ```js
* const config = {
* polar: true,
* xAxis: {
* totalAngle: 270,
* sectorLine: {
* strokeWidt: '2px'
* },
* }
* };
* ```
*
* {@link https://realchart.co.kr/config/config/base/axis#startangle startAngle}, {@link https://realchart.co.kr/config/config/base/axis#totalangle totalAngle}을 참조한다.
*/
declare class AxisSectorLine extends AxisLine {
}
/**
* 차트 축 모델들의 기반(base) 클래스.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisOptions AxisOptions}이다.
* 축은 시리즈 데이터포인트들이 표시될 위치를 지정하는 차트의 핵심 구성 요소이고,
* 축 설정에 따라 같은 데이터도 다양한 배치로 표현될 수 있다.
* 기본 적으로 카테고리 축과 연속 축으로 구별되며, 2차원 차트에 맞게 **x|y** 축을 구별해서 설정한다.
* ```
* const config = {
* xAxis: {},
* yAxis: {}
* }
* ```
* 또, 방향마다 둘 이상의 축을 설정하고 각 시리즈들이 연결할 축을 다르게 설정할 수 있다.
* 차트에서 축을 명식적으로 지정하지 않으면, 첫번째 시리즈에 합당한 축이 기본 생성된다.
* {@link https://realchart.co.kr/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 _unitLabel;
private _line;
private _sectorLine;
protected _tick: AxisTick;
protected _label: AxisLabel;
protected _grid: AxisGrid;
private _crosshair;
private _scrollBar;
private _name;
_index: number;
private _row;
private _col;
_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[];
_minorValues: number[];
_minorMarkPoints: number[];
_vlen: number;
_zoom: AxisZoom;
_values: number[];
protected _min: number;
protected _max: number;
protected _single: boolean;
_runPos: AxisPosition;
_labelArgs: AxisLabelArgs;
readonly guides: AxisGuide[];
_zooming: boolean;
_prevSeries: IPlottingItem[];
_seriesChanged: boolean;
_prevSize: number;
_prevRate: number;
_aniMin: number;
_aniMax: number;
setAniRange(min: number, max: number): void;
constructor(chart: IChart, isX: boolean);
protected _doInit(op: OP): void;
_type(): string;
/**
* 축 이름.
*/
get name(): string;
get row(): number;
get col(): number;
/**
* 축 타이틀 모델.
*/
get title(): AxisTitle;
/**
* 단위 label 모델.
*/
get unitLabel(): AxisUnitLabel;
/**
* 축 선 모델.
*/
get line(): AxisLine;
/**
* 부채꼴 polar 좌표계의 X 축일 때 원호의 양 끝과 중심에 연결되는 선분들의 설정 모델.
* {@link https://realchart.co.kr/config/config/xAxis/category#startangle startAngle}, {@link https://realchart.co.kr/config/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;
checkVisible(): boolean;
getBaseValue(): number;
length(): number;
axisMin(): number;
axisMax(): number;
valueMin(): number;
valueMax(): 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;
/**
*
* @param min
* @param max
* @param length 축의 갯수.
*/
protected abstract _doBuildTicks(min: number, max: number, length: number, phase: number): IAxisTick[];
getXStart(): number;
dataToAxis(value: number): number;
axisToData(value: number): number;
value2Tooltip(value: number): any;
isBased(): boolean;
isBaseVisible(): boolean;
disconnect(): void;
getSeries(): ISeries[];
getConnectableSeries(): ISeries[];
collectValues(): void;
collectRanges(): void;
collectReferentValues(): void;
private $_checkEmpty;
_prepare(): void;
protected _checkValues(vals: number[]): number[];
_prepareRender(): void;
afterRender(): void;
/**
*
* @param length 축의 갯수.
*/
_buildTicks(length: number, phase: number): void;
_calcPoints(length: number, phase: number): void;
/**
* @private
*
* 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(size: number, rate: number): void;
prev(pos: number): number;
_ani: AxisAnimation;
checkExtents(prevMin: number, prevMax: number): void;
isAnimating(): boolean;
abstract xValueAt(pos: number): number;
_posValue(): 0 | 1 | -1;
_load(source: any): OP;
protected _doApply(op: 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);
/** @private */
_clear(): void;
load(src: any): void;
visibles(): Axis[];
contains(axis: Axis): boolean;
get(name: string | number): Axis;
disconnect(): void;
prepare(): void;
collectValues(): void;
collectRanges(): void;
collectReferentValues(): void;
prepareRender(): void;
afterRender(): void;
/** @private */
_buildTicks(length: number, phase: 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";
/**
* 축 중앙에 배치한다.
*/
readonly MIDDLE: "middle";
/**
* 축 끝 방향(오른쪽 또는 위)에 배치한다.
*/
readonly END: "end";
};
/** @dummy */
type AxisTitleAlign = typeof _AxisTitleAlign[keyof typeof _AxisTitleAlign];
/**
* 축 구성 요소들의 설정 모델 기반.
*/
interface AxisItemOptions extends ChartItemOptions {
}
/**
* 축 타이틀 설정 옵션.
*
* @css 'rct-axis-title'
*/
interface AxisTitleOptions extends AxisItemOptions {
/**
* 타이틀 텍스트.
* 지정하지 않으면 타이틀 영역 자체가 없어진다.
*/
text?: string;
/**
* 텍스트 회전 각도.
* 수직 축일 때는 0, 90, 270, -90, -270 중 하나로 지정할 수 있다.
* 수평 축일 때는 무조건 0이다.
*
* @default undefined 수직 축일 때 왼쪽에 표시되면 90, 오른쪽에 표시되면 270, 수평 축일 때는 0
*/
rotation?: 0 | 90 | 270 | -90 | -270;
/**
* 축 내에서 타이틀의 위치.
* {@link offset}으로 경계 지점과의 간격을 지정할 수 있다.
*
* @default 'middle'
*/
align?: AxisTitleAlign;
/**
* {@link align} 기준으로 배치할 때 경계 지점과의 간격.
* plus 값을 지정하면 차트 안쪽으로 들어온다.
* align이 'middle'일 때는 음수일 때 축 시작값 쪽으로 밀린다.
*
* @default 0
*/
offset?: number;
/**
* 타이틀과 틱 label들, 혹은 축 선 사이의 간격을 픽셀 단위로 지정한다.
*
* @default 5
*/
gap?: number;
/**
* 타이틀 배경 스타일.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 텍스트 행의 높이를 계산되는 높이와 다르게 표시되도록 지정한다.
* 1이면 계산된 높이와 동일하게 표시된다.
* 지정하지 않으면 계산된 값.
*/
lineHeight?: number;
/**
* 타이틀을 가로 또는 세로로 배치할지 여부와 블록의 진행 방향을 지정한다.
* 'vertical-lr' 또는 'vertical-rl'로 설정하면 수직 쓰기가 적용되며,
* 이때 한글 등 동아시아 문자는 글자 단위, 영문 등 기타 문자는 단어 단위로 배치된다.
* {@link textOrientation}을 'upright'로 지정하면 영문도 글자 단위로 세로 배치되지만,
* writingMode를 지원하지 않는 브라우저에서도 모든 문자를 글자 단위로 일관되게 세로 표시하고자 할 때는
* 신규 속성인 `vertical`을 사용할 수 있다. 단, `vertical` 속성에서는 `
`과 같은 줄바꿈 기능이 적용되지 않는다.
*/
writingMode?: WritingMode;
/**
* 텍스트 문자 방향을 지정한다.
* {@link writingMode 세로 모드}의 텍스트에만 적용된다.
* 특히, 영문을 한글처럼 세워서 표시하려 할 때 'upright'로 설정한다.
*/
textOrientation?: TextOrientation;
}
/**
* @enum
*/
declare const _AxisUnitLabelPosition: {
/**
* 축 시작 값 쪽에 표시한다.
*/
readonly START: "start";
/**
* 축 끝 값 쪽에 표시한다.
*/
readonly END: "end";
};
/** @dummy */
type AxisUnitLabelPosition = typeof _AxisUnitLabelPosition[keyof typeof _AxisUnitLabelPosition];
/**
* 축 타이틀과 별도로 tick label 표시 값들의 단위 등을 표시한다.
*
* @css 'rct-axis-unit-label'
*/
interface AxisUnitLabelOptions extends AxisItemOptions {
/**
* 표시할 텍스트.
*/
text?: string;
/**
* @default 'end'
*/
position?: AxisUnitLabelPosition;
/**
* 축 label과의 최소 간격.
*
* @default 2
*/
gap?: number;
/**
* label 배경 스타일.
*/
backgroundStyle?: SVGStyleOrClass;
}
/**
* 축 선(line) 설정 모델.
*
* @css 'rct-axis-line'
*/
interface AxisLineOptions extends AxisItemOptions {
/**
* @append
*
* 값이 undefined나 null이면, x축일 때 표시되고, y축이면 표시되지 않는다.
*
* @default undefined
*/
visible?: boolean;
}
/**
* 부채꼴 polar 좌표계의 X 축일 때 원호의 양 끝과 중심에 연결되는 선분들의 설정모델.
* {@link https://realchart.co.kr/config/config/xAxis/category#startangle startAngle}, {@link https://realchart.co.kr/config/config/xAxis/category#totalangle totalAngle}을 참조한다.
*
*/
interface AxisSectorLineOptions extends AxisLineOptions {
}
/**
* @enum
*/
declare const _AxisTickLocation: {
/**
* 축선 바깥쪽(기본)으로 tick이 그려진다.
*/
readonly DEFAULT: "default";
/**
* 축선 안쪽(플롯 방향)으로 tick이 그려진다.
*/
readonly INSIDE: "inside";
};
/** @dummy */
type AxisTickLocation = typeof _AxisTickLocation[keyof typeof _AxisTickLocation];
/**
* 축 tick 표시 방식과 tick 위치 마다 표시되는 선(line) 등에 대한 설정 옵션 기반(base).
* 축 종류에 따라 다양한 설정 속성들이 존재한다.
*
* ```js
* const config = {
* xAxis: {
* tick: {
* visible: true,
* length: 10
* }
* },
* };
* ```
*
* @css 'rct-axis-tick'
*/
interface AxisTickOptions extends AxisItemOptions {
/**
* tick line 표시 위치 (inside/default).
* 'inside'이면 축선 안쪽(플롯 방향), 'default'이면 바깥쪽으로 tick이 그려진다.
* {@link https://realchart.co.kr/config/config/base/axis/label#location label.location}과 독립적으로 동작한다.
* label이 'inside'여도 tick.location이 'inside'가 아니면 tick은 바깥쪽에 표시된다.
* category 축은 {@link https://realchart.co.kr/config/config/base/axis/tick#position position}이 point/edge용이므로 inside/default는 이 속성으로 지정한다.
*
* @default 'default'
*/
location?: AxisTickLocation;
/**
* @default false
*/
visible?: boolean;
/**
* axis tick line length.
* 지정하지 않거나 잘못 지정하면 7 픽셀로 적용된다.
* 또, {@link visible}이 false이어도 이 설정만큼 공간을 차지한다.
*/
length?: number;
/**
* tick 라인과 다른 요소(label이나 title) 사이의 간격.
* {@link visible}이 false이어도 이 설정만큼 공간을 차지한다.
*
* @default 3 픽셀
*/
gap?: number;
}
/**
* major grid 사이 보조 격자선(minor grid line) 설정 옵션.
* linear, log, time 축에 적용된다.
* 위치는 {@link AxisMinorTickOptions.count minorTick count}와 동일하게 계산된다
* ({@link AxisMinorTickOptions.visible minorTick visible}이 false여도 count는 grid 위치에 사용된다).
* {@link AxisGridOptions.visible grid visible}이 false이면 minor grid도 표시되지 않는다.
* {@link firstVisible}, {@link lastVisible}은 major grid에만 적용되고 minor grid에는 적용되지 않는다.
* {@link depthVisible} 및 depth side panel에는 minor grid가 표시되지 않는다.
* axis break 경계 tick이 있는 major 구간에는 minor grid가 생성되지 않는다.
* 선 스타일은 {@link style} 속성으로 지정한다.
*
* @css 'rct-axis-minor-grid-line'
*/
interface AxisMinorGridOptions extends AxisItemOptions {
/**
* @default false
*/
visible?: boolean;
}
/**
* major tick 사이에 표시되는 보조 눈금(minor tick) 설정 옵션.
* linear, log, time 축에 적용된다.
* time 축은 major tick 타임스탬프 사이를 선형 보간하여 minor 위치를 계산한다
* (달력 단위가 아닌 픽셀 균등 배치).
* log 축은 major tick 값이 0보다 클 때 log 공간에서 보간한다.
* {@link count}는 {@link https://realchart.co.kr/config/config/base/axis/grid#minorgrid minor grid} 위치 계산에도 사용된다
* (visible이 false여도 grid만 표시할 수 있다).
* major tick이 2개 미만이면 minor tick·grid가 생성되지 않는다.
* axis break 경계 tick이 있는 major 구간에는 minor tick이 생성되지 않는다.
* 선 스타일은 {@link style} 속성으로 지정한다.
*
* @css 'rct-axis-minor-tick'
*/
interface AxisMinorTickOptions extends AxisItemOptions {
/**
* @default false
*/
visible?: boolean;
/**
* major tick 한 구간 사이에 표시할 minor tick 개수.
* 1 미만이거나 소수인 값은 내림하여 1 이상의 정수로 적용된다.
* {@link https://realchart.co.kr/config/config/base/axis/grid#minorgrid minor grid} 위치에도 동일하게 적용된다.
*
* @default 4
*/
count?: number;
/**
* minor tick 선 길이(픽셀). major tick보다 짧게 지정하는 것이 일반적이다.
*
* @default 4
*/
length?: number;
}
/**
* 연속축의 tick 스텝 목록을 동적으로 리턴하는 {@link https://realchart.co.kr/config/config/xAxis/linear/tick#stepcallback 콜백}의 매개변수로 사용된다.
*/
interface StepCallbackArgs {
/**
* RealChart의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: object;
/**
* plot 영역 크기
*/
length: number;
/**
* 연결된 시리즈(들)의 최소값.
*/
minValue: number;
/**
* 연결된 시리즈(들)의 최대값.
*/
maxValue: number;
/**
* {@link min}에 padding 등이 적용된 최소값.
*/
min: number;
/**
* {@link max}에 padding 등이 적용된 최대값.
*/
max: number;
}
/**
* 연속 축의 tick step 설정 모델.
* {@link stepPixels}, {@link stepInterval} 등 다양한 방식으로 축 tick 간격을 구성할 수 있다.
*/
interface ContinuousAxisTickOptions extends AxisTickOptions {
/**
* tick들 사이의 값 간격을 지정해서 tick step을 구성하도록 한다.
* 0보다 큰 값을 리턴하는 콜백을 설정해서 동적으로 간격을 지정할 수 있다.
*/
stepInterval?: number | string | ((args: StepCallbackArgs) => string);
/**
* tick들 사이의 대략적인 픽셀 간격이나 간격 목록.
* 최소/최대값을 기준으로 동적으로 목록을 리턴하는 콜백을 지정할 수도 있다.
* 다른 설정이 없다면 이 값을 기준으로 tick 개수가 결정된다.
* [plot크기, pixels] 목록으로 지정한다. 단일 값으로 지정하면 [[Infinity, pixels]]으로 설정된다.
* plot 영역의 크기가 첫번째 값 이하면 두번째로 지정한 값만큼의 pixels로 계산한다.
* 지정하지 않거나 잘못 지정하면 아래 목록으로 기본 적용된다.
* 수직축: `[[130, 36], [300, 48], [700, 72], [Infinity, 96]]`
* 수평축: `[[400, 48], [900, 72], [Infinity, 96]]`
* polar: `[[300, 48], [700, 72], [900, 96], [Infinity, 120]]`
*/
stepPixels?: number | [number, number][] | ((args: StepCallbackArgs) => [number, number][]);
/**
* {@link stepPixels}가 적용 중일 때,
* 최소 최대값의 차이가 1보다 크고 10미만이면 소수점 값의 tick들이 표시되도록 한다.
*
* @default true
*/
enableDecimals?: boolean;
/**
* true로 지정하면 {@link stepPixels}가 적용 중일 때,
* 좀 더 세밀한 [1, 2, 2.5, 3, 4, 5, 10] 배수 목록이 사용된다.
*/
fineStep?: boolean;
/**
* {@link stepPixels}가 적용 중일 때,
* step 간격을 계산하는데 사용되는 단위 배수 목록.
* 최소/최대값을 기준으로 동적으로 목록을 리턴하는 콜백을 지정할 수도 있다.
* 지정하지 않으면 {@link enableDecimals} 설정에 따라,
* `[1, 2, 5, 10]` 또는 `[1, 2, 2.5, 5, 10]`이 사용된다.
* 또, {@link fineStep}이 true로 지정되면 좀 더 세밀한
* [1, 2, 2.5, 3, 4, 5, 10] 배수 목록이 사용된다.
* 숫자가 아니거나 1 이상이 아닌 것들은 제외된다.
*/
stepMultiples?: number[] | ((args: StepCallbackArgs) => number[]);
/**
* 최대한 지정된 개수만큼 tick들이 생성되도록 한다.
* 1보다 큰 값으로 지정해야 한다.
*/
stepCount?: number;
/**
* {@link stepPixels}가 적용 중일 때, 최대 표시 step 개수.
* 값을 지정하지 않으면(undefined) 8 또는,
* 축 길이를 {@link stepPixels} 보다 10% 작은 값으로 나눈 개수(더하기 1) 중 큰 값으로 설정된다.
* 또, NaN이 되는 잘못된 값으로 설정하면 표시 개수가 제한되지 않는다.
*/
maxCount?: number;
/**
* 명시적으로 설정하는 step 목록
* 최소/최대값을 기준으로 동적으로 목록을 리턴하는 콜백을 지정할 수도 있다.
* 양 끝을 NaN으로 지정하면 계산된 min/max로 설정된다.
* 이 목록이나 콜백이 설정되면 tick 스텝 설정과 관련된 다른 속성들은 무시된다.
*/
steps?: (number | Date)[] | ((args: StepCallbackArgs) => (number | Date)[]);
/**
* {@link steps}로 지정하는 경우, 설정된 범위 밖의 step들은 무시한다.
*/
clipSteps?: boolean;
/**
* @deprecated {@link steps}에 지정할 수 있다.
*
* 명시적 step 목록을 리턴하는 callback
* 양 끝을 NaN으로 지정하면 계산된 min/max로 설정된다.
* 이 목록이 설정되면 스텝 설정과 관련된 다른 속성들은 무시된다.
*/
stepCallback?: (args: StepCallbackArgs) => (number | Date)[];
/**
* tick 개수를 맞춰야 하는 대상 axis.
* base의 strictMin, strictMax가 설정되지 않아야 한다.
* base의 startFit, endFit의 {@link https://realchart.co.kr/config/config/base/axis/startFit tick}으로 설정되어야 한다.
*
*/
baseAxis?: number | string;
/**
* {@link baseAxis}가 지정된 경우, true로 지정하면 base 축의 범위와 동일하게
* 축의 최소/최대가 결정된다.
*
* @default false
*/
baseRange?: boolean;
}
/**
*/
interface ContinuousAxisGridOptions extends AxisGridOptions {
/**
* major grid 사이 보조 격자선(minor grid line) 설정 옵션.
* boolean 값으로 지정하면 {@link visible} 속성을 지정한 것과 동일하다.
* 표시 여부는 상위 {@link AxisGridOptions.visible grid visible}이 true일 때만 적용된다.
*/
minorGrid?: AxisMinorGridOptions | boolean;
}
/**
* @enum
*/
declare const _AxisLabelLocation: {
/**
* 축선 바깥쪽(기본)에 label을 표시한다.
* {@link https://realchart.co.kr/config/config/base/axis/tick#location tick.location}과 독립적으로 동작한다.
*/
readonly DEFAULT: "default";
/**
* 축선 안쪽(플롯 방향)에 label을 표시한다.
* tick을 숨기려면 {@link https://realchart.co.kr/config/config/base/axis/tick#visible tick.visible}: false 또는
* {@link https://realchart.co.kr/config/config/base/axis/tick#length tick.length}: 0을 별도로 지정한다.
*/
readonly INSIDE: "inside";
};
/** @dummy */
type AxisLabelLocation = typeof _AxisLabelLocation[keyof typeof _AxisLabelLocation];
/**
* @enum
*/
declare const _AxisLabelArrange: {
/**
* label들이 겹치도록 놔둔다.
* // TODO: @{link overflow} 설정이 적용된다.
*/
readonly NONE: "none";
/**
* -45도 회전시킨다.
*/
readonly ROTATE: "rotate";
/**
* label들이 겹치지 않도록 건너 뛰면서 배치한다.
* {@link startStep}으로 지정된 step부터 배치된다.
*/
readonly STEP: "step";
/**
* label들이 겹치지 않도록 여러 줄로 나누어 배치한다.
*/
readonly ROWS: "rows";
};
/** @dummy */
type AxisLabelArrange = typeof _AxisLabelArrange[keyof typeof _AxisLabelArrange];
/**
* label 배치 후 텍스트가 차지하는 공간을 넘치는 경우 처리 방식.
* @enum
*/
declare const _AxisLabelOverflow: {
/**
* 넘치면 표시하지 않는다.
*
*
*/
readonly HIDDEN: "hidden";
/**
* 차트나 분할 경계를 넘어서는 경우 이웃 라벨과 겹치지 않을 만큼 최대한 끌어 당겨 표시한다.
* 실제 표시 위치와 달라지므로 tick 선을 반드시 표시해서 사용자에게 오차를 보여줘야 한다.
*
*
*/
readonly PULL: "pull";
/**
* 원래 tick 위치에 그대로 표시한다.
*
*
*/
readonly TICK: "tick";
};
/** @dummy */
type AxisLabelOverflow = typeof _AxisLabelOverflow[keyof typeof _AxisLabelOverflow];
/**
* Axis의 label {@link https://realchart.co.kr/config/config/base/axis/label#textcallback 텍스트}나
* {@link https://realchart.co.kr/config/config/base/axis/label#stylecallback 스타일}을 동적으로 리턴하는 콜백 등의 매개변수로 사용된다.
*/
interface AxisLabelArgs {
/**
* RealChart의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: object;
/**
* 축 객체.
*/
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('...')로 처리해서 표시한다.
*
* @css 'rct-axis-label'
*/
interface AxisLabelOptions extends IconedTextOptions {
/**
* 축 label 표시 위치.
* {@link https://realchart.co.kr/config/config/base/axis/tick#location tick.location}과 독립적으로 동작한다.
* v1.4.28 이전에는 label만 'inside'로 두면 tick이 숨겨졌지만, 이제는 tick 설정을 별도로 지정해야 한다.
*
* @default 'default'
*/
location?: AxisLabelLocation;
/**
* label 표시 간격.
* 1이면 모든 tick 표시. 2이면 하나씩 건너 띄어서 표시.
* 2 이상일 때 {@link 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 ~ ({@link step} - 1) 사이의 값으로 지정한다.
* 'category' 축에서 의미있게 사용할 수 있다.
*
* @default 0
*/
startStep?: number;
/**
* 수평 축일 때 tick label 배치 행 수.
* 1은 한 줄, 2면 두 줄 등으로 여러 줄로 나눠서 표시한다.
*
* @default 0
*/
rows?: number;
/**
* {@link autoArrange} {@link AxisLabelArrange.ROWS ROWS}로 자동 정렬되는 경우 최대 행 수.
* 이 행 수 이상이 필요한 경우 label 간격을 두어 표시한다.
*
* @default 3
*/
maxRows?: number;
/**
* {@link chart.polar polar}가 아닌 수평 축일 때, tick label 표시 회전 각도.
* -90 ~ 90 사이의 각도로 지정할 수 있다.
* **'auto'**이면 polar일때는 label위치에 따라 각도가 자동으로 계산되고,
* polar가 아닐때는 {@link AxisLabelArrange}속성에 따라 결정된다.
*/
rotation?: number | 'auto';
/**
* 기본 설정이나 {@link step}, {@link rows}, {@link 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을 리턴하면 {@link text} 속성 등에 설정된 값으로 표시하거나,
* 값에 따라 자동 생성되는 텍스트를 사용한다.
* 빈 문자열 등 정상적인 문자열을 리턴하면 그 문자열대로 표시된다.
* {@link prefix}나 포맷 속성 등은 적용되지 않는다.
*
*/
textCallback?: (args: AxisLabelArgs) => string;
/**
* 라벨 별로 추가 적용되는 스타일을 리턴한다.
* 기본 설정을 따르게 하고 싶으면 undefined나 null을 리턴한다.
*
*/
styleCallback?: (args: AxisLabelArgs) => SVGStyleOrClass;
/**
* @ignore 미구현
* 축 label과 함께 표시될 icon url을 리턴한다.
*/
iconCallback?: (args: AxisLabelArgs) => string;
/**
* 라벨 백그라운드의 동적 스타일 콜백.
* 이 콜백에서 리턴되는 스타일이 가장 우선적으로 적용된다.
*/
backgroundStyleCallback?: (args: AxisLabelArgs) => SVGStyleOrClass;
}
/**
* 축 그리드 사이에 생성된 영역 표시 설정 모델.
*
* @css 'rct-axis-grid-rows'
*/
interface AxisGridRowsOptions extends AxisItemOptions {
/**
* 각 row를 칠(fill)하는 데 사용되는 색상 스타일들을 지정한다.\
* 칠하지 않는 영역은 null로 지정하면 되고, 개수가 모자라면 반복된다.
*
*/
colors?: string[];
/**
* axis의 baseValue 이전 영역을 칠(fill)하는 데 사용되는 색상.\
* {@link 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 Omit {
/**
* body 영역 기준, 표시 위치.
*
* @default 'inside'
*/
position?: GuideLabelPosition;
/**
* 수평 정렬.
*
* @default 'left'
*/
align?: Align;
/**
* 수직 정렬.
*
* @default 'top'
*/
verticalAlign?: VerticalAlign;
/**
* label과 가이드 사이의 수평 간격.
*
* @default 3
*/
offsetX?: number;
/**
* label과 가이드 사이의 수직 간격.
*
* @default 3
*/
offsetY?: number;
}
declare const AxisLineGuideType = "line";
declare const AxisRangeGuideType = "range";
/** @enum */
declare const AxisGuideTypes: {
readonly AxisLineGuideType: "line";
readonly AxisRangeGuideType: "range";
};
/** @dummy */
type AxisGuideType = typeof AxisGuideTypes[keyof typeof AxisGuideTypes];
/** @dummy */
type AxisGuideOptionsType = AxisLineGuideOptions | AxisRangeGuideOptions;
/**
* 선분이나 영역으로 축 위의 특정한 값(들)을 구분 표시한다.
* 기본적으로 이 축에 연결된 모든 body에 모두 표시된다.
* col, row를 지정해서 특정 body에만 표시되도록 할 수 있다.
*
* @css 'rct-axis-guide'
*/
interface AxisGuideOptions extends AxisItemOptions {
/**
* 가이드 종류.
* //이 속성을 지정하지 않은 경우,
* //{@link https://realchart.co.kr/config/config/base/axis/guide guide}
*/
type?: AxisGuideType;
/**
* label 모델.
*/
label?: AxisGuideLabelOptions;
/**
* true면 시리즈들보다 위에 표시된다.
*
* @default false
*/
front?: boolean;
/**
* 모든 guide들 중에서 값이 클수록 나중에 그려진다.
*
* @default 0
*/
zindex?: number;
/**
* 분할 pane 열(col) index 또는 index 목록.
*/
col?: number | number[];
/**
* 분할 pane 행(row) index 또는 index 목록.
*/
row?: number | number[];
/**
* 이 grid row가 적용될 추가 값 범위 [min, max].
*/
otherRange?: [number, number];
}
/**
* 축 위의 특정한 값에 선분을 표시한다.
*/
interface AxisLineGuideOptions extends AxisGuideOptions {
/** @dummy */
type?: typeof AxisLineGuideType;
/**
* 가이드 선이 표시될 축 상의 위치에 해당하는 값.
*/
value: number;
}
/**
* 축 위 특정한 두 값 사이의 영역을 구분 표시한다.
* [주의] realchart-style.css에 fill-opacity가 0.2로 설정되어 있다.
*/
interface AxisRangeGuideOptions extends AxisGuideOptions {
/** @dummy */
type: typeof AxisRangeGuideType;
/**
* 가이드 영역의 시작 값.
*/
startValue: number;
/**
* 가이드 영역의 끝 값.
*/
endValue: number;
}
/**
* Axis tick의 위치에 수평 혹은 수직선으로 plot 영역을 구분 표시한다.
* {@link visible} 기본값이 undefined인데,
* visible이 undefined나 null로 지정되면, 축 위치에 따라 visible 여부가 결정된다.
*
* @css 'rct-axis-grid-line'
*/
interface AxisGridOptions extends AxisItemOptions {
/**
* @append
*
* polar 차트인 경우 명시적 false로 지정하지 않으면 true로 해석되고,
* polar가 아닌 경우 undefined나 null로 지정한 경우 y축 그리드이면 true로 해석되고,
* x축인 경우 명시적 true로 지정할 때만 표시된다.
*
* @default undefined
*/
visible?: boolean;
/**
*/
rows?: AxisGridRowsOptions;
/**
* 시작 값에 표시되는 그리드 선을 표시할 지 여부.
*
*/
firstVisible?: boolean;
/**
* 끝 값에 표시되는 그리드 선을 표시할 지 여부.
*
*/
lastVisible?: boolean;
/**
* {@link https://realchart.co.kr/config/config/body#depth depth}가 설정된 body의 side panel에 표시할 지 여부.
* 별도로 지정하지 않으면 {@link visible} 설정을 따른다.
*
* @default undefined
*/
depthVisible?: boolean;
}
/**
* 축 상에 crosshair의 정보를 표시하는 view 설정 모델.
*/
interface CrosshairFlagOptions extends ChartItemOptions {
/**
*/
prefix?: string;
/**
*/
suffix?: string;
/**
* flag에 표시될 텍스트 형식.
*
* 별도로 지정하지 않으면 현재 위치에 해당하는 축 값을 표시한다.
* Category 축인 경우 위치에 해당하는 category 이름을 표시한다.
*
* [미구현 issue#1437] {@link CrosshairOptions.numberFormat numberFormat}, {@link CrosshairOptions.timeFormat timeFormat}으로
* 동일한 역할을 수행하므로 이 속성은 사용되지 않는다.
* flag별 포맷 오버라이드가 필요한 경우 구현을 고려할 수 있다.
*
* @private
*/
/**
* flag에 표시되는 text의 스타일.
*
*/
textStyles?: SVGStyleOrClass;
/**
*/
minWidth?: number;
}
/**
* 크로스헤어 표시 방식.
*
* @enum
*/
declare const _CrosshairType: {
/**
* 카테고리 축이면 bar, 연속 축이면 line으로 표시한다.
*
*
*/
readonly AUTO: "auto";
/**
* 항상 line으로 표시한다.
*
*
*/
readonly LINE: "line";
};
/** @dummy */
type CrosshairType = typeof _CrosshairType[keyof typeof _CrosshairType];
/**
* Crosshair 위치가 변경될 때 발생되는 {@link https://realchart.co.kr/config/config/base/axis/crosshair#onchange 콜백}의 매개변수로 사용된다.
*/
interface CrosshairCallbackArgs {
/**
* RealChart의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: object;
/**
*/
axis: object;
/**
*/
pos: number;
/**
*/
flag: string;
/**
*/
points: DataPoint[];
}
/**
* 직선 또는 bar 형태로 축 위의 마우스 위치를 표시하는 구성 요소 옵션.
*
* @css 'rct-crosshair-line' (카테고리 축: 'rct-crosshair-bar')
*/
interface CrosshairOptions extends ChartItemOptions {
/**
* @append
*
* @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;
/**
* 위치가 변경될 때 발생되는 callback.
*/
onChange?: (args: CrosshairCallbackArgs) => void;
}
/**
* 숫자(연속) 축 crosshair 설정 옵션.
* {@link LinearAxisOptions}, {@link LogAxisOptions}에서 사용된다.
*/
interface NumberCrosshairOptions extends CrosshairOptions {
/**
* 표시되는 값이 숫자일 때 사용되는 표시 형식.
*
* @default '#,##0.#'
*/
numberFormat?: string;
}
/**
* 시간 축 crosshair 설정 옵션.
* {@link TimeAxisOptions}에서 사용된다.
*/
interface TimeCrosshairOptions extends CrosshairOptions {
/**
* 표시되는 값이 날짜(시간)일 때 사용되는 표시 형식.
*
* @default 'yyyy-MM-dd HH:mm'
*/
timeFormat?: string;
}
/**
* @enum
*/
declare const _AxisPosition: {
/**
* 상대 축에 따라 위치를 조정한다.
* x축이 {@link https://realchart.co.kr/config/config/base/axis#reversed reversed}이면 y축이 반대 쪽에 표시되고,
* y축이 reversed이면 x축이 반대 쪽에 표시된다.
*/
readonly AUTO: "auto";
/**
* X축은 아래쪽에 수평으로, Y축은 왼쪽에 수직으로 표시된다.
* {@link https://realchart.co.kr/config/config/#inverted inverted}이면 Y축이 아래쪽에 수평으로, X축은 왼쪽에 수직으로 표시된다.
*
*
*/
readonly NORMAL: "normal";
/**
* X축은 위쪽에 수평으로, Y축은 오른쪽에 수직으로 표시된다.
* {@link https://realchart.co.kr/config/config/#inverted inverted}이면 Y축이 위쪽에 수평으로, X축은 오른쪽에 수직으로 표시된다.
*
*
*/
readonly OPPOSITE: "opposite";
/**
* @private
* @deprecated split 모드로 대체
*
* 상대 축의 baseValue 지점에 표시된다.
* 분할 모드 없이 x축을 좌우로 분할해서 표시할 때 사용할 수 있다.
*
* [주의]
* 1. 축에 연결된 시리즈들이 BarSeries 계열일 때만 가능하다.
* 2. 차트의 X축 하나에만 적용할 수 있다. 두번째로 지정된 축의 속성은 'normal'로 적용된다.
* 3. 상대 축이 **linear** 가 아니거나 {@link https://realchart.co.kr/config/config/yAxis/linear#basevalue baseValue}가 min 보다 작거나 max보다 크면 이 값은 무시되고,
* 'normal'로 적용된다.
*
*
*/
readonly BASE: "base";
/**
* split 모드일 때, 중간 분할 위치에 표시한다.
* 마지막 pane이 아니면 'opposite'와 동일하고,
* 마지막 pane이면 'normal'과 동일하다.
*/
readonly BETWEEN: "between";
};
/** @dummy */
type AxisPosition = typeof _AxisPosition[keyof typeof _AxisPosition];
/**
* 축 스크롤바 모델.
* 축 스크롤 상태를 표시하고, 사용자가 스크롤 범위나 위치를 변경할 수 있다.
*
* @css 'rct-axis-scrollbar'
*/
interface AxisScrollBarOptions extends AxisItemOptions {
/**
* @append
*
* @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;
}
/** @dummy */
type AxisType = 'category' | 'linear' | 'log' | 'time';
/**
* 축 설정 옵션 기반(base).
*
* {@link type}이 지정되지 않으면,
*
* - {@link https://realchart.co.kr/config/config/xAxis/category#categories categories}가 설정되면 'category'
* - x축이고 첫번째 시리즈가 category축에 연결 가능할 때 'category', 아니면 'linear'
* - y축이면 첫번째 시리즈의 기본 y축 타입(대부분 'linear'), 아니면 'linear'
*
* 축으로 자동 설정된다.
*
* @css 'rct-axis'
*/
interface AxisOptions extends ChartItemOptions {
/**
* @private
* 축 자체에는 스타일을 직접 지정할 수 없다.
* 각 하위 항목({@link title}, {@link line}, {@link tick}, {@link label}, {@link grid} 등)에서 스타일을 지정한다.
*/
style?: never;
/**
* 값을 지정하지 않으면 연결된 시리즈가 있는 경우에 표시된다.
* 명시적 boolean값을 지정하면 그 설정에 따라 표시 여부가 결정된다.
* 또, 표시 여부와 상관없이, 이 축에 연결된 시리즈들은 이 축의 범위에 맞게 표시된다.
*
* @default undefined
*/
visible?: boolean;
/**
* 축 종류를 지정한다.
* 이 속성값이 지정되지 않은 경우,
*
* - {@link https://realchart.co.kr/config/config/xAxis/category#categories categories}가 설정되면 'category'
* - x축이고 첫번째 시리즈가 category축에 연결 가능할 때 'category', 아니면 'linear'
* - y축이면 첫번째 시리즈의 기본 y축 타입(대부분 'linear'), 아니면 'linear'
*
* 축으로 자동 설정된다.
*/
type?: AxisType;
/**
* 축 이름.
* 이름을 지정하지 않으면 '-axis-{index + 1}' 형식으로 자동 지정된다.
* 즉, 첫번째 축이면 '-axis-1'이 된다.
*/
name?: string;
/**
* 축 title 설정 옵션.
* 문자열로 지정하면 타이틀의 {@link visible} 속성을 지정한 것과 동일하다.
*/
title?: AxisTitleOptions | boolean | string;
/**
* 단위 label 설정 옵션.
*/
unitLabel?: AxisUnitLabelOptions | boolean | string;
/**
* 축 선 설정 옵션.
* boolean 값으로 지정하면 {@link visible} 속성을,
* 문자열로 지정하면 {@link style}.stroke를 지정한 것과 동일하다.
*/
line?: AxisLineOptions | boolean | string;
/**
* 부채꼴 polar 좌표계의 X 축일 때 원호의 양 끝과 중심에 연결되는 선분들의 설정모델.
* {@link https://realchart.co.kr/config/config/xAxis/category#startangle startAngle}, {@link https://realchart.co.kr/config/config/xAxis/category#totalangle totalAngle}을 참조한다.
*/
sectorLine?: AxisSectorLineOptions | boolean;
/**
* tick 설정 옵션.
* boolean 값으로 지정하면 {@link visible} 속성을 지정한 것과 동일하다.
*/
tick?: AxisTickOptions | boolean;
/**
* label 설정 옵션.
* boolean 값으로 지정하면 {@link visible} 속성을 지정한 것과 동일하다.
*/
label?: AxisLabelOptions | boolean;
/**
* visible 기본값이 undefined이다.
* boolean 값으로 지정하면 {@link visible} 속성을 지정한 것과 동일하다.
* visible이 undefined나 null로 지정되면, 축 위치에 따라 visible 여부가 결정된다.
*/
grid?: AxisGridOptions | boolean;
/**
* 가이드 옵션.
* 옵션 객체 또는 옵션 객체 배열로 여러 가이드를 설정할 수 있다.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 'guides' 설정이 존재하면 load 후 이 속성으로 설정한다.
*
* @expandable
*/
guide?: AxisGuideOptionsType | AxisGuideOptionsType[];
/**
* 직선 또는 bar 형태로 축 위의 마우스 위치를 표시하는 옵션.
* boolean 값으로 지정하면 {@link visible} 속성을 지정한 것과 동일하다.
*/
crosshair?: CrosshairOptions | boolean;
/**
* zoom된 x축에 표시할 수 있는 스크롤바 옵션.
* boolean 값으로 지정하면 {@link visible} 속성을 지정한 것과 동일하다.
* 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;
/**
* 축에 포함된 시리즈들 툴팁의 위쪽에 표시되는 텍스트 템플릿.
*
* tooltipHeader
* tooltipRow, (시리즈가 둘 이상일 때는 {@link tooltipListRow} 형태로)
* tooltipRow,
* ...
* tooltipFooter
* 형태로 툴팁이 표시된다.
*
* @default '${name}'
*/
tooltipHeader?: string;
/**
* 축에 포함된 각 시리즈별 표시되는 포인트 툴팁 텍스트 템플릿.
* '${detail}'은 시리즈의 {@link https://realchart.co.kr/config/config/base/series#tooltipdetail tooltipDetail} 속성값으로 대체된다. // #1386
*
* @default '${series}: ${detail}'
*/
tooltipRow?: string;
/**
* 축에 포함된 시리즈가 둘 이상일 때,
* 각 시리즈별 표시되는 포인트 툴팁 텍스트 템플릿.
* 이 속성을 빈 값으로 지정하면 {@link tooltipRow} 속성을 이용해서 표시된다.
* '${detail}'은 시리즈의 {@link https://realchart.co.kr/config/config/base/series#tooltipdetail tooltipDetail} 속성값으로 대체된다. // #1386
*
* @default `['${series}', '${detail}']`
*/
tooltipListRow?: [string, string];
/**
* 축에 포함된 시리즈들 툴팁의 아래쪽에 표시되는 텍스트 템플릿.
*/
tooltipFooter?: string;
/**
* false로 지정하면 이 축에 한해 animation 효과를 실행하지 않는다.
*
* @default true
*/
animatable?: boolean;
/**
* true로 지정하면 새로 계산된 너비나 높이가 이전 계산된 크기보다 작으면 이전 크기를 유지한다.
*
* @default false
*/
fixedSize?: boolean;
}
/**
* @enum
*/
declare const _CategoryTickPosition: {
/**
* 미지정 시 x축은 'point', y축은 'edge'로 적용된다.
*/
readonly DEFAULT: "default";
/**
* 카테고리 중심에 표시한다.
*/
readonly POINT: "point";
/**
* 축 양끝과 카테고리들 사이에 표시한다.
*/
readonly EDGE: "edge";
};
/** @dummy */
type CategoryTickPosition = typeof _CategoryTickPosition[keyof typeof _CategoryTickPosition];
/**
* 카테고리축 tick 설정 모델.
*/
interface CategoryAxisTickOptions extends AxisTickOptions {
/**
* tick 표시 위치 (point/edge/default).
* category 축 전용이며, {@link https://realchart.co.kr/config/config/base/axis/tick#location tick.location}(inside/default)과 별도로 동작한다.
* 미지정('default') 시 x축은 'point', y축은 'edge'로 적용된다.
*/
position?: CategoryTickPosition;
/**
* @default 1
*/
step?: number;
}
/**
* category 축 label 설정 모델.
*/
interface CategoryAxisLabelOptions extends AxisLabelOptions {
/**
* {@link fillToCategory}가 true일 때 카테고리 블록 내 label의 수평 정렬.
* 수직 축에서는 블록 높이 내 수평 위치, 수평 축에서는 블록 너비 내 수평 위치를 제어한다.
*
* @default 'center'
*/
align?: Align;
/**
* {@link fillToCategory}가 true일 때 카테고리 블록 내 label의 수직 정렬.
* 수직 축에서는 블록 높이 내 수직 위치를 제어한다.
*
* @default 'middle'
*/
verticalAlign?: VerticalAlign;
/**
* effect가 'background'로 설정되었을 때, background 크기를 라벨 영역 크기에 맞게 채운다.
*
* @default false
*/
fillToCategory?: boolean;
}
declare const CategoryAxisType = "category";
/**
* {@link categoryTree.band band} 세부 설정.
*/
interface CategoryTreeBandOptions {
/**
* 교차 배경 stripe 표시 여부.
* {@link colors}만 지정한 경우 기본값은 true이다.
*
* @default true
*/
visible?: boolean;
/**
* 교차로 적용할 배경색 목록.
* 2개 이상 지정하면 순서대로 반복 적용된다.
*/
colors?: string[];
}
/**
* {@link categoryTree.divider divider} 계층 구분선 설정.
*/
interface CategoryTreeDividerOptions {
/**
* 계층 구분선 표시 마스터 on/off.
* false이면 {@link edge}, {@link between}, {@link below}의
* 기본 상속이 비활성화된다.
* 이때 {@link categoryTree.levels levels} 항목에서 개별 구분선 옵션을 true로 지정하면
* 해당 레벨만 표시된다.
* {@link categoryTree.levels levels} 항목에서만 false로 지정하면
* 해당 레벨의 구분선만 숨긴다.
* 스타일은 {@link style}로 설정한다.
*
* @default true
*/
visible?: boolean;
/**
* 계층 구분선 스타일을 설정한다.
* true이면 {@css rct-axis-tree-divider} 기본 스타일이 적용된다.
* 스타일 클래스 이름이나 스타일 객체를 지정하면 해당 스타일이 사용되고,
* 지정하지 않았을 때는 {@link line} 스타일을 따른다.
* false이면 구분선 스타일을 적용하지 않는다.
* {@link categoryTree.levels levels} 항목에서 지정하면 해당 계층 행 구분선에만 적용되고,
* 지정하지 않으면 상위 {@link categoryTree.divider divider} 값을 상속한다.
*/
style?: SVGStyleOrClass | boolean;
/**
* 축 시작·끝(첫·마지막 카테고리 경계)에 구분선을 표시한다.
* 가로 축에서는 해당 계층 행 범위 안의 세로선, 세로 축에서는 가로선으로 그려진다.
* {@link categoryTree.levels levels} 항목에서 지정하면 해당 계층 행에만 적용되고,
* 지정하지 않으면 상위 {@link categoryTree.divider divider} 값을 상속한다.
* 계층 라벨 영역 맨 위(가로 축) 가로 구분선은 최상위 {@link edge}와 {@link visible}만
* 적용되며 {@link categoryTree.levels levels}에서는 지정할 수 없다.
*
* @default true
*/
edge?: boolean;
/**
* 같은 계층 행 안에서 병합된 라벨(그룹) 사이에 구분선을 표시한다.
* {@link categoryTree.levels levels} 항목에서 지정하면 해당 계층 행에만 적용되고,
* 지정하지 않으면 상위 {@link categoryTree.divider divider} 값을 상속한다.
*
* @default true
*/
between?: boolean;
/**
* 계층 라벨 행 아래(다음 행과의 경계)에 구분선을 표시한다.
* 가로 축에서는 가로선, 세로 축에서는 세로선으로 그려진다.
* {@link categoryTree.levels levels} 항목에서 지정하면 해당 계층 행 아래에만 적용되고,
* 지정하지 않으면 상위 {@link categoryTree.divider divider} 값을 상속한다.
*
* @default true
*/
below?: boolean;
}
/**
* {@link categoryTree} 세부 설정.
*/
interface CategoryTreeOptions {
/**
* 계층 표시 활성화 여부.
* 최상위에서는 계층 기능 전체 on/off에 사용된다.
* {@link categoryTree.levels levels} 항목의 {@link visible}은 해당 계층 행 라벨만 on/off하며,
* 상위 {@link categoryTree.visible visible} 값을 상속하지 않는다.
*
* @default true
*/
visible?: boolean;
/**
* 계층 구분선 설정.
* true이면 기본 구분선 옵션이 적용되고,
* false이면 구분선 표시가 비활성화된다.
* 객체를 지정하면 {@link visible}, {@link style}, {@link edge}, {@link between}, {@link below}를
* 개별 설정할 수 있다.
* {@link categoryTree.levels levels} 항목에서 지정하지 않은 항목은 상위 값을 상속한다.
*
* @default true
*/
divider?: CategoryTreeDividerOptions | boolean;
/**
* 구분선 기준 그룹마다 축 라벨 영역에 교차 배경색을 적용한다.
* 배경 stripe는 구분선 기준 레벨(merge 그룹 수가 가장 적은 레벨)의 그룹 단위로 적용되며,
* 계층 행별이 아니라 라벨 영역 전체 높이(또는 너비)를 한 번에 칠한다.
* true이면 {@css rct-axis-tree-band} 기본 색이 적용되고,
* 객체를 지정하면 {@link visible}, {@link colors}를 설정할 수 있다.
* false이면 교차 배경을 표시하지 않는다.
* stripe 기준 레벨은 merge 그룹 수가 가장 적은 레벨이 자동 선택된다.
*
* @default false
*/
band?: CategoryTreeBandOptions | boolean;
/**
* {@link categoryField} 순서와 동일한 인덱스로 계층별 설정을 지정한다.
* {@link divider}의 하위 항목은 지정하지 않은 항목이 상위 {@link categoryTree.divider divider} 값을 상속한다.
* {@link visible}과 {@link label}은 레벨 항목 단위로만 적용되며 상위에서 상속하지 않는다.
*/
levels?: CategoryTreeLevelOptions[];
}
/**
* {@link categoryTree.levels.label label} 계층별 라벨 설정.
* {@link xAxis.label label} 중 계층 행에 적용 가능한 항목만 포함한다.
*/
interface CategoryTreeLevelLabelOptions {
/**
* 계층 행 라벨 회전 각도.
* **'auto'**이면 라벨이 자기 영역(해당 그룹 span)을 가로로 벗어날 때만 -90°(세로로 세워
* 아래에서 위로 읽는 방향)로 회전하고, 영역 안에 들어가면 회전하지 않는다(0°).
* 세로 축에서는 회전하지 않는다(0°).
* 숫자를 지정하면 해당 각도로 고정 회전한다.
* 지정하지 않으면 {@link xAxis.label label}의 {@link rotation} 값을 따르고,
* 그 값도 없으면 'auto'로 동작한다.
*/
rotation?: number | 'auto';
/**
* 계층 행 라벨 스타일.
* 지정하지 않으면 {@link xAxis.label label} 스타일이 계층 라벨 컨테이너에 적용되고,
* 지정하면 해당 행 라벨에만 추가 적용된다.
*/
style?: SVGStyleOrClass;
/**
* 계층 행 라벨의 블록 내 정렬.
* 지정하지 않으면 {@link xAxis.label label}의 {@link align} 값을 따른다.
*
* @default 'center'
*/
align?: Align;
}
/**
* {@link categoryTree.levels levels} 계층별 설정.
* 인덱스는 {@link categoryField} 배열 순서와 같다.
* {@link divider}는 해당 계층 행에 우선 적용되며,
* 지정하지 않은 항목은 상위 {@link categoryTree.divider divider} 값을 상속한다.
* {@link visible}은 해당 계층 행 라벨 표시만 제어하며 상위에서 상속하지 않는다
* (라벨을 숨겨도 구분선 설정은 그대로 적용될 수 있다).
* {@link label}은 해당 계층 행 라벨의 회전·스타일·정렬에만 적용된다.
*/
interface CategoryTreeLevelOptions extends Omit {
/**
* 해당 계층 행 라벨의 회전·스타일·정렬 설정.
*/
label?: CategoryTreeLevelLabelOptions;
}
/**
* 지정된 카테고리 개수로 축을 분할해서 각 카테고리에 연결된 데이터포인트들이 표시되게 한다.
* 카테고리 하나가 1의 축 값(너비)을 갖는다.
* 주로 x축으로 사용되며, 선형(linear)축과 달리 축을 분할한 각 카테고리는 서로 격리되어 있으며,
* 기본적으로 개별 카테고리의 너비(간격)나 카테고리들 사이의 순서는 의미가 없다.
* 즉, 카테고리가 위치한 축 값(숫자)이 data로서는 별 의미가 없는 경우에 사용한다.
* 축 상에 데이터포인트가 존재하지 않는 영역이 존재하게 된다면 선형 축을 고려해야 한다.
* (데이터포인트가 없는 영역을 자동으로 없애지는 않는다.)
* 반대로, 선형(linear, time, log) 축들은 축 값이 의미있는 data이므로,
* 축 값은 연속되고 데이터포인트가 없는 영역 또한 그 자체로 의미가 있다.
* // TODO: 그렇기 때문에, 카테고리를 정렬(sort)할 수 있다. (ex. 첫번째 시리즈 y값을 기준으로...). 필터링?
* 또, 축 label에 카테고리를 대표하는 이름을 표시할 필요한 경우 먼저 카테고리 축을 고려해야 한다.
* {@link categories}가 명시적으로 지정되지 않은 경우,
* 연결된 시리즈의 데이터포인트들의 'x' 값들 중 문자열인 것들을 모아 순서대로 구성하는데,
* 이렇게 지정하는 경우 중복되지 않도록 빠짐없이 설정해야 한다.
* 또는, {@link categorySeries}와 {@link categoryField}를 지정해서 카테고리로 사용할 목록을 수집할 수도 있다.
* 중복없는 문자열 배열로 카테고리 목록이 구성되므로 시리즈의 {@link data} 항목 순서와 불일치한 상태로 표시된다.
* 문자열이 설정되지 않은 데이터포인트의 xValue값은 숫자값이 아니면 {@link xStart}와 {@link xStep}을 기준으로 순서대로 설정된다.
*
* //1. categories 속성으로 카테고리 목록을 구성한다.
* //2. 이 축에 연결된 시리즈들에 포함된 data point들의 문자열인 값들, 혹은 categoryField에 해당하는 값들을 수집한다.
* // 수집된 category들 중 숫자가 아닌 것들은 {@link startValue}부터 시작해서 {@link valueStep} 속성에 지정된 값씩 차례대로 증가한 값을 갖게된다.
* //3. 각 카테고리 영역의 크기는 기본적으로 동일하게 배분되고,
* // 카테고리 영역 중간점이 카테고리 값의 위치가 된다.
* // {@link categories} 속성으로 카테고리를 지정할 때, 상대적 크기를 width로 지정해서 각 카테고리의 값을 다르게 표시할 수 있다.
* //4. tick mark나 label은 기본적으로 카테고리 값 위치(카테고리 중앙)에 표시된다.
* // tick mark는 카테고리 양끝에 표시될 수 있다.
*
*/
interface CategoryAxisOptions extends AxisOptions {
/** @dummy */
type?: typeof CategoryAxisType;
/**
* @append
*/
tick?: CategoryAxisTickOptions | boolean;
/**
* @append
*/
label?: CategoryAxisLabelOptions | boolean;
/**
* category 목록을 수집하는 시리즈.
* 지정하지 않으면 모든 시리즈에서 카테고리를 수집한다.
*/
categorySeries?: string;
/**
* 카테고리로 사용되는 dataPoint 속성.
* 각 데이터포인트의 이 속성 값 중 문자열값들이 연결된 카테고리 축의 category 목록으로 사용된다.
* field가 둘 이상일때는 마지막 필드 값이 문자열이어야 한다.
* 또, x 값 대신 이 속성 값에 해당하는 category 값이 데이터포인트의 x값이 된다.
* {@link categoryTree}가 꺼져 있을 때는 tick·tooltip에 마지막 필드 값이 표시된다.
* {@link categoryTree}가 켜져 있을 때는 배열 순서대로 축에 가장 가까운 행(level 0)부터
* 바깥쪽 행으로 쌓이므로, 가장 세분화된 필드를 배열의 첫 번째에 두는 것이 일반적이다
* (tick 라벨 대신 계층 행이 표시되며 tooltip {@link https://realchart.co.kr/config/config/base/series series}의 name 등에는 첫 필드 값이 사용된다).
* {@link categories}가 지정되면 이 속성은 무시된다.
*/
categoryField?: (string | number) | (string | number)[];
/**
* {@link categoryField}가 배열일 경우, 마지막 필드 값을 구분하기 위해 사용하는 내부 구분 자이다.
* 데이터값에 없는 문자열로 지정해야 라벨이 올바르게 표시된다.
*
* @default '+'
*/
categorySeparator?: string;
/**
* {@link categoryField}가 2개 이상일 때 계층 구조 라벨 및 관련 표시 옵션.
* true이면 {@link categoryTree.visible visible}이 true인 것과 같고 기본값
* ({@link categoryTree.divider.edge edge}: true, {@link categoryTree.divider.between between}: true,
* {@link categoryTree.divider.below below}: true, {@link categoryTree.band band}: false)이 적용된다.
* 각 필드가 하나의 라벨 행이 되며
* 입력한 필드 순서대로 축에 가장 가까운 행부터 바깥쪽으로 쌓인다.
* 같은 행에서 값이 연속으로 동일하면 하나의 라벨로 통합되어 해당 구간 전체를 차지한다.
* false이면 {@link categoryTree.visible visible}이 false인 것과 같고, tick에는 마지막 필드 값만 표시된다.
* 빈 객체({})를 지정하면 {@link categoryTree.visible visible}이 true인 것과 같고 위 기본값이 적용된다.
* 객체를 지정하면 {@link visible}, {@link divider}, {@link band}, {@link levels}를 개별 설정할 수 있다.
* 지정하지 않으면 기본값 false이며, 계층 표시 없이 tick에는 마지막 {@link categoryField} 값만 표시된다.
* {@link chart.polar polar} 차트에서는 지원하지 않는다.
*
* @default false
*/
categoryTree?: CategoryTreeOptions | boolean;
/**
* 명시적으로 지정하는 카테고리 목록.
* 문자열로 카테고리 항목을 지정하거나,
* object로 지정할 때에는 name(혹은 label) 속성에 카테고리 이름을 문자열로,
* width 속성에 상대 너비(1이 기본 너비)를 숫자로 지정한다.
* 첫 번째 값이 {@link startValue}에 해당하고 {@link valueStep}씩 증가한다.
* 각 카테고리의 상대적 너비를 지정할 수 있다.
* 이 목록을 지정하지 않으면 축에 연결된 시리즈들로부터 카테고리 목록을 자동 생성한다.
* 하지만 시리즈들이 모두 사라지는 경우 카테고리 목록 역시 사라지므로,
* 기대하는 카테고리 목록을 고정 표시하려는 경우 이 목록을 설정하는 것이 좋다.
* 단, 축의 범위는 해당 옵션에 의해 설정되지 않는다. 축의 범위는 {@link minValue}, {@link maxValue}나 시리즈에 연결된 데이터에 의해 결정된다.
* 이 목록을 사용하면 시리즈에서 카테고리를 수집하지 않는다(데이터 수집용 {@link categoryField}는 무시된다).
* {@link categoryTree}와 함께 사용하려면 각 항목의 name(또는 label)에
* {@link categorySeparator}로 연결된 복합 키를 지정해야 하며,
* 분해 필드 수는 {@link categoryField} 배열 길이와 같아야 한다.
* 복합 키 형식이 맞지 않으면 계층 표시는 비활성화된다.
*/
categories?: (string | object)[];
/**
* {@link weightField}와 함께 각 카테고리의 weight제공하는 시리즈.
* 이 속성에 해당하는 시리즈가 없는 경우 {@link categorySeries}로 지정된 시리즈를 참조한다.
* 설정된 category 목록과 순서가 일치하도록 설정해야 한다.
*/
weightSeries?: string;
/**
* {@link weightSeries} data에서 weight를 제공하는 필드.
*/
weightField?: number | string;
/**
* 시리즈 x값들로 부터 카테고리를 구성할 때, 연속된 동일 x값의 개수로 weight로 설정한다.
*/
weightByFrequency?: boolean;
/**
* 축의 양 끝 카테고리 위치 전후에 여백으로 추가되는 크기나 크기 목록.
* 각각 시작/끝 카테고리에 대한 상대적 크기로 지정하며
* {@link minPadding}, {@link maxPadding}으로 별도 지정할 수 있다.
*
* @default 0
*/
padding?: number | [number, number][];
/**
* 축의 시작 카테고리 위치 이 전에 여백으로 추가되는 크기.
* 카테고리 기본 너비(1)에 대한 상대적 크기로 지정한다.
* {@link padding} 속성으로 양끝 padding을 한꺼번에 지정할 수 있다.
*/
minPadding?: number | [number, number][];
/**
* 축의 끝 카테고리 위치 이 후에 여백으로 추가되는 크기.
* 카테고리 기본 너비(1)에 대한 상대적 크기로 지정한다.
* {@link padding} 속성으로 양끝 padding을 한꺼번에 지정할 수 있다.
*/
maxPadding?: number | [number, number][];
/**
* 각 카테고리의 양 끝에 추가되는 여백의 카테고리에 너비에 대한 상대적 크기.
* 0 ~ 0.5 사이의 값으로 지정한다.
*
* @default 0.1
*/
categoryPadding?: number;
/**
* polar 축일 때 시작 위치 간격.
* 첫번째 카테고리 너비(각도)에 대한 상대값 만큼 반대 방향으로 옮겨서 시작한다.
* 0 ~ 1 사이의 값으로 지정한다.
* ex) 0.5로 지정하면 bar 시리즈의 첫 째 bar 가운데, 또는 line 시리즈의 첫 째 포인트가 12시 위치에 표시된다.
*
* @default 0
*/
startOffset?: number;
}
/**
* 연속 축의 {@link https://realchart.co.kr/config/config/yAxis/linear#basevalue baseValue} 위치에 표시되는 선 설정 옵션.
* 기본적으로 표시되지 않는다.
*/
interface AxisBaseLineOptions extends AxisLineOptions {
/**
* @default false
*/
visible?: boolean;
}
/**
* 연속축 break 설정 모델.
*
* @css 'rct-axis-break'
*/
interface AxisBreakOptions extends AxisItemOptions {
/**
* break 적용 시작 값.
* `to`보다 작은 값을 지정해야 하며, 음수도 허용된다.
*/
from?: number;
/**
* break 적용 끝 값.
*/
to?: number;
/**
* break 가 적용될 위치를 축 전체에 대한 비율이나 픽셀 크기로 지정한다.
*
* @default '30%'
*/
size?: PercentSize;
/**
* break 표시 너비.
*
* @default 16
*/
space?: number;
/**
* @default true
*/
gridVisible?: boolean;
}
/**
* 축 양 끝 맞춤 방식.
* @enum
*/
declare const _AxisFit: {
/**
* x축이면 {@link VALUE}, y축이면 {@link 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 {
/**
* @append
*
* label에 표시될 숫자 값의 표시 형식.
* 기본 설정이 최대 소숫점 두자리 까지 표시하는 것이므로 더 자세한 표시가 필요한 경우 재설정해야 한다.
*
* @default '0.##'
*/
numberFormat?: string;
}
/**
* 연속축 기반.
*
* 최대한 데이터포인트들을 표시해야 하므로 'bar' 시리즈 등 너비가 있는 것들을 표시하기 위해서
* 양 끝에 공간을 추가할 수 있다. // calcPoints() 참조.
*/
interface ContinuousAxisOptions extends AxisOptions {
/**
* base value 위치에 표시되는 선분 설정 모델.
* 기본적으로 표시되지 않는다.
*/
baseLine?: AxisBaseLineOptions;
/**
* @append
*
* 축에 연결된 data point들의 값으로 계산된 최소값보다 이 속성 값이 작으면 대신 이 값이 축의 최소값이 된다.
* padding이 적용되므로 이 값에 정확이 맞추고 싶은 경우 {@link minPadding}을 0으로 설정한다.
* 계산 최소값이 더 작으면 이 속성은 무시된다.
* 계산값과 무관하게 최소값을 지정하려면 {@link strictMin}을 사용한다.
*/
minValue?: number;
/**
* @append
*
* 축에 연결된 data point들의 값으로 계산된 최대값보다 이 속성 값이 크면 대신 이 값이 축의 최대값이 된다.
* padding이 적용되므로 이 값에 정확이 맞추고 싶은 경우 {@link maxPadding}을 0으로 설정한다.
* 계산 최대값이 더 크면 이 속성은 무시된다.\
* 계산값과 무관하게 최대값을 지정하려면 {@link strictMax}을 사용한다.
*/
maxValue?: number;
/**
* y축 기준값이 필요한 시리즈들({@link https://realchart.co.kr/config/config/series/bar bar} 계열,
* {@link https://realchart.co.kr/config/config/series/area area})의 {@link https://realchart.co.kr/config/config/series/bar#basevalue baseValue}가
* 지정되지 않은 경우 대신 적용되는 기본값.
* {@link baseLine}은 이 설정값에 해당되는 위치에 표시된다.
*
* @default 0
*/
baseValue?: number;
/**
* {@link minPadding}, {@link maxPadding}이 설정되지 않았을 때 적용되는 기본값이다.
* [plot크기, padding] 목록으로 지정한다. 단일 값으로 지정하면 [[Infinity, padding]]으로 설정된다.
* plot 영역의 크기가 첫번째 값 이하면 두번째로 지정한 값만큼 padding을 적용한다.
* 지정하지 않거나 잘못 지정하면 아래 목록이 기본 적용된다.
* 또, polar이고 x축이면 0으로 적용된다.
* `[[170, 0.2], [340, 0.1], [700, 0.05], [Infinity, 0.03]]`
* 또, 숫자와 'px'로 끝나는 문자열로 지정하면 위 설정을 무시하고,
* 적어도 지정한 pixel 정도의 여백이 생길 수 있도록 조정된다.
* 시리즈 별로 설정할 수 있는 {@link https://realchart.co.kr/config/config/base/series#paddingrate paddingRate}가 추가로 적용된다.
*/
padding?: number | [number, number][] | string;
/**
* 첫번째 tick 앞쪽에 추가되는 최소 여백을 전체 값 범위에 대한 비율로 지정한다.
* 또는 'px'로 끝나는 문자열인 경우, 해당 픽셀 정도의 여백이 생길 수 있도록 조정된다.
* 이 값을 지정하지 않으면 {@link padding}에 지정된 값을 따른다.
* {@link startFit}이 {@link AxitFit.TICK TICK}일 때,
* data point의 최소값과 첫번째 tick 사이에 이미 그 이상의 간격이 존재한다면 이 속성은 무시된다.
* {@link strictMin}가 지정되거나, {@link minValue}가 계산된 최소값보다 작은 경우에도 이 속성은 무시된다.
* 속성값을 지정하는 방식은 {@link padding}을 참조한다.
*/
minPadding?: number | [number, number][] | string;
/**
* 마지막 tick 뒤쪽에 추가되는 최소 여백을 전체 값 범위에 대한 비율로 지정한다.
* 또는 'px'로 끝나는 문자열인 경우, 해당 픽셀 정도의 여백이 생길 수 있도록 조정된다.
* 이 값을 지정하지 않으면 {@link padding}에 지정된 값을 따른다.
* {@link endFit}이 {@link endFit tick}일 때,
* data point의 최대값과 마지막 tick 사이에 이미 그 이상의 간격이 존재한다면 이 속성은 무시된다.
* {@link strictMax}가 지정되거나, {@link maxValue}가 계산된 최대값보다 큰 경우에도 이 속성은 무시된다.
* 속성값을 지정하는 방식은 {@link padding}을 참조한다.
*/
maxPadding?: number | [number, number][] | string;
/**
* #1375
* x축일 때, 양 끝 데이터포인트에 추가하는 여백을 데이터포인트 하나가 차지하는 평균 폭에 대한 비율로 지정한다.
* 기본값 0.5이면 계산된 크기대로 적용되고, 0이면 여백이 추가되지 않는다.
* polar 축일 때는 {@link polarMargin}이 설정데 따라 축 끝(max) 쪽에만 적용된다.
* ex) line 시리즈만 있는 경우, 이 값을 0으로 지정하고 {@link padding}을 0으로 지정하면
* 축의 양 끝 데이터포인트가 축의 양 끝에 딱 맞게 표시된다.
*
* @default 0.5
*/
unitPadding?: number;
/**
* polar 차트일 때, {@link unitPadding}을 적용하는 최소 간격을 각도로 지정한다.
* 예를 들어 90도로 지정하면 {@link totalAngle}이 275도 보다 클 때만 {@link unitPadding}이 적용된다.
* 이 값을 지정하지 않으면 내부적으로 적당한 크기를 계산한다.
*/
polarMargin?: number;
/**
* 무조건 적용되는 최소값.
* 즉, 이 값보다 작은 값을 갖는 시리즈 포인트들은 표시되지 않는다.
* {@link minPadding}도 적용되지 않는다.
* 숫자값이나, '%'로 끝나는 문자열로 설정해서 계산된 최소값에 뺄 값을 전체 값 범위(max - min)에 대한 비율로 지정할 수 있다.
*/
strictMin?: number | string;
/**
* 무조건 적용되는 최대값.
* 즉, 이 값보다 큰 값을 갖는 시리즈 포인트들은 표시되지 않는다.
* {@link maxPadding}도 적용되지 않는다.
* 숫자값이나, '%'로 끝나는 문자열로 설정해서 계산된 최대값에 더할 값을 전체 값 범위(max - min)에 대한 비율로 지정할 수 있다.
*/
strictMax?: number | string;
/**
* 축 시작 위치에 tick 표시 여부.
* padding이나 base 설정 등은 반영된 상태에서 적용된다.
* {@link strictMin}가 설정되면 'value'로 적용된다.
* 'default'이면 x축이고 polar가 아니면 'value', 그렇지 않은 경우 'tick'으로 적용된다.
*
* @default 'default'
*/
startFit?: AxisFit;
/**
* 축 끝 위치에 tick 표시 여부.
* padding이나 base 설정 등은 반영된 상태에서 적용된다.
* {@link strictMax}가 설정되면 무시되고 'value'로 적용된다.
* 'default'이면 x축이고 polar가 아니면 'value', 그렇지 않은 경우 'tick'으로 적용된다.
*
* @default 'default'
*/
endFit?: AxisFit;
/**
* @append
*/
tick?: ContinuousAxisTickOptions | boolean;
/**
* major tick 사이 보조 눈금(minor tick) 설정 옵션.
* boolean 값으로 지정하면 {@link visible} 속성을 지정한 것과 동일하다.
*/
minorTick?: AxisMinorTickOptions | boolean;
/**
* @append
*/
grid?: ContinuousAxisGridOptions | boolean;
/**
* @append
*/
break?: AxisBreakOptions;
}
/**
* linear 축 label 설정 모델.
*/
interface LinearAxisLabelOptions extends ContinuousAxisLabelOptions {
/**
* true로 지정하면 label 끝에 단위 문자를 추가한다.
* 표시되는 값들의 연속성을 위해 true로 지정해도 step 간격이 1000 이상일 때 추가하는데,
* 간격과 상관없이 단위 문자를 표시하려면 '*'으로 지정한다.
*
* @default true
*/
useSymbols?: boolean | '*';
}
declare const LinearAxisType = "linear";
/**
* 선형 연속 축.
* 값 사이의 비율과 축 길이 비율이 항상 동일한 축.
*
*/
interface LinearAxisOptions extends ContinuousAxisOptions {
/** @dummy */
type?: typeof LinearAxisType;
/**
* @append
*/
label?: LinearAxisLabelOptions | boolean;
/**
* @append
*/
crosshair?: NumberCrosshairOptions | boolean;
}
/**
* Log축 틱 설정 모델.
* 현재, log10 기준으로 계산한다.
* {@link stepInterval}, {@link stepPixels}는 log10을 적용한 값으로 지정한다.
*/
interface LogAxisTickOptions extends ContinuousAxisTickOptions {
/**
* 로그를 적용한 값으로 설정한다.
*/
baseValue?: number;
/**
* @append
*
* 로그를 적용한 값으로 설정한다. // #141
*/
stepInterval?: number;
/**
* @append
*
* 로그를 적용한 값으로 설정한다.
*/
steps?: (number | Date)[] | ((args: StepCallbackArgs) => (number | Date)[]);
/**
* 소수점을 갖는 step들을 역로그된 값이 최대한 정수가 되는 위치로 재배치한다.
*
* @default true
*
*/
arrangeDecimals?: boolean;
/**
* 로그 축에는 소수점 tick 개념이 없으므로 이 속성은 사용할 수 없다.
* {@link ContinuousAxisTickOptions.enableDecimals enableDecimals}는 선형 축({@link LinearAxisTickOptions})에서만 유효하며,
* `LogAxisTick._getStepMultiples`는 `[1, 2, 5, 10]` 고정 배수를 반환하므로
* 이 속성을 설정해도 아무런 효과가 없다.
* @ignore
*/
enableDecimals?: never;
}
declare const LogAxisType = "log";
/**
* 이 축에 연결된 시리즈들의 point y값을 {@link Math.log10 log10}으로 계산된 위치에 표시한다.
*
*/
interface LogAxisOptions extends ContinuousAxisOptions {
/** @dummy */
type?: typeof LogAxisType;
/**
* @append
*/
tick?: LogAxisTickOptions | boolean;
/**
* @default 10
*/
logBase?: number;
/**
* @default 500
*/
roundThrrehold?: number;
/**
* @append
*/
crosshair?: NumberCrosshairOptions | boolean;
}
/**
* 시간축 label 설정 모델.
*/
interface TimeAxisLabelOptions extends ContinuousAxisLabelOptions {
/**
* @private
* TimeAxis는 날짜/시간 형식을 사용하므로 숫자 형식은 지원하지 않는다.
* 날짜/시간 형식은 {@link timeFormat}, {@link timeFormats}을 사용한다.
*/
numberFormat?: never;
/**
* @private
* TimeAxis는 날짜/시간 형식을 사용하므로 숫자 기호 설정은 지원하지 않는다.
* 날짜/시간 형식은 {@link timeFormat}, {@link timeFormats}을 사용한다.
*/
numberSymbols?: never;
/**
* 현재 스케일의 시작일시에 상위 스케일의 포맷을 사용해서 표시한다.
*
* @default false
*/
useBeginningFormat?: boolean;
/**
* [밀리초, 초, 분, 시, 일, 주, 월, 년] 순서대로 날찌/시간 형식을 지정한다.
* 각 형식은 문자열이거나, `{ format: string, beginningFormat: string }` 형태의 json 객체로 지정한다.
* 지정하지 않은 스케일은 {@link timeFormat}, {@link beginningFormat}이나 기본 형식에 따라 표시된다.
*/
timeFormats?: any[];
/**
* 날짜/시간 표시 형식.
*/
timeFormat?: string;
/**
* 스케일 시작일시에 표시에 사용되는 형식.
*/
beginningFormat?: string;
}
/**
* 시간 축 틱 설정 모델.
*/
interface TimeAxisTickOptions extends ContinuousAxisTickOptions {
/**
* @private
* 시간 축에는 소수점 tick 개념이 없으므로 이 속성은 사용할 수 없다.
* {@link ContinuousAxisTickOptions.enableDecimals enableDecimals}는 선형 축({@link LinearAxisTickOptions})에서만 유효하며,
* `TimeAxisTick._getStepMultiples`는 시간 스케일(ms/초/분/시/일/주/월/년) 기반으로 동작하므로
* 이 속성을 설정해도 아무런 효과가 없다.
*/
enableDecimals?: never;
/**
* @append
* 단위가 지정된 문자열로 지정하는 경우 값이 -1 이하이거나 1 이상이어야 한다. // #141
*/
stepInterval?: number;
/**
* @append
*/
label?: TimeAxisLabelOptions | boolean;
}
declare const TimeAxisType = "time";
/**
* timeUnit(기본값 1)밀리초가 1에 해당한다.
*
*/
interface TimeAxisOptions extends ContinuousAxisOptions {
/** @dummy */
type?: typeof TimeAxisType;
/**
* @append
*/
label?: TimeAxisLabelOptions | boolean;
/**
* @append
*
* @default NaN
*/
baseValue?: number;
/**
* @append
*/
tick?: TimeAxisTickOptions | boolean;
/**
* @append
*/
crosshair?: TimeCrosshairOptions | boolean;
}
/** @dummy */
type AxisOptionsType = CategoryAxisOptions | LinearAxisOptions | LogAxisOptions | TimeAxisOptions;
/**
*/
interface ConfigObject {
/**
*/
[key: string]: any;
}
/**
*/
interface ChartItemOptions {
/**
* 표시 여부.
*
* @default true
*/
visible?: boolean;
/**
* {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
style?: SVGStyleOrClass;
}
/**
*/
interface ChartTextOptions extends ChartItemOptions {
/**
* 텍스트 표시 효과.
*
* @default 'none'
*/
effect?: ChartTextEffect;
/**
* {@link autoContrast}가 true이고 배경이 어두울 때 적용되는
* {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
* 지정하지 않으면 'rct-label-light' 클래스 셀렉터가 기본 적용된다.
*/
lightStyle?: SVGStyleOrClass;
/**
* {@link autoContrast}가 true이고 배경이 밝을 때 적용되는
* {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
* 지정하지 않으면 'rct-label-dark' 클래스 셀렉터가 기본 적용된다.
*/
darkStyle?: SVGStyleOrClass;
/**
* {@link effect}가 'background'일 때 배경에 적용되는
* {@link it.SVGStyles 스타일셋} 또는 css {@link https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 텍스트 색상을 배경 색상과 대조되도록 자동 조정한다.
* 배경이 어두우면 {@link lightStyle}을, 배경이 밝으면 {@link darkStyle}을 적용한다.
* 배경 기준 우선순위:
* 1. {@link effect}가 'background'인 경우 → {@link backgroundStyle}의 배경색 기준
* 2. 텍스트가 data point 내부에 표시되는 경우 → 포인트 배경색 기준
* 위 조건에 해당하지 않으면 적용되지 않는다.
*
* @default true
*/
autoContrast?: boolean;
/**
* {@link 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;
/**
* 아이콘 이미지 너비.
* null 또는 0으로 지정하면 미지정으로 처리된다.
* {@link iconHeight}가 지정된 경우 원본 비율로 너비가 결정되고,
* {@link iconHeight}도 미지정이면 이미지 원본 크기로 표시된다.
*/
iconWidth?: number;
/**
* 아이콘 이미지 높이.
* 지정하지 않으면 16 픽셀로 설정된다.
* null 또는 0으로 지정하면 미지정으로 처리된다.
* {@link iconWidth}가 지정된 경우 원본 비율로 높이가 결정되고,
* {@link iconWidth}도 미지정이면 이미지 원본 크기로 표시된다.
*
* @default 16
*/
iconHeight?: number;
/**
* 텍스트와 함께 표시할 아이콘 이미지의 경로.
* {@link iconRoot}가 지정된 경우 상대 경로로 결합되며,
* `::` 접두사를 사용하면 {@link imageList}에서 이미지를 참조한다.
*/
icon?: string;
}
/**
* 데이터포인트 뷰가 {@link https://realchart.co.kr/config/config/base/series#onpointclick 클릭}될 때,
* 마우스 {@link https://realchart.co.kr/config/config/base/series#onpointhover hover}될 때,
* 또는 {@link https://realchart.co.kr/config/config/base/series#pointstylecallback 동적 스타일}을 리턴하는 콜백이나 이벤트 등의 매개변수로 사용된다.
* {@link https://realchart.co.kr/config/config/base/series#onpointhover 콜백}의 매개변수로 사용된다.
*/
interface DataPointCallbackArgs {
/**
* RealChart의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: object;
/**
* 콜백이 호출된 시리즈의 공개 모델.
*/
series: object;
/**
* 시리즈의 전체 데이터포인트 개수.
*/
count: number;
/**
* 현재 표시 중인 데이터포인트 개수.
*/
vcount: number;
/**
* 시리즈 y값 최소.
*/
yMin: number;
/**
* 시리즈 y값 최대.
*/
yMax: number;
/**
* 시리즈 x값 최소.
*/
xMin: number;
/**
* 시리즈 x값 최대.
*/
xMax: number;
/**
* 시리즈 z값 최소.
*/
zMin: number;
/**
* 시리즈 z값 최대.
*/
zMax: number;
/**
* 데이터포인트 index.
*/
index: number;
/**
* 표시 중인 데이터포인트 기준 index.
*/
vindex: number;
/**
* 데이터포인트 원본 x 필드 값.
*/
x: any;
/**
* 데이터포인트 원본 y 필드 값.
*/
y: any;
/**
* 데이터포인트 원본 z 필드 값.
*/
z: any;
/**
* 축 좌표로 변환된 x 값.
*/
xValue: any;
/**
* 축 좌표로 변환된 y 값.
*/
yValue: any;
/**
* 축 좌표로 변환된 z 값.
*/
zValue: any;
/**
* 라벨 표시용 index.
*/
labelIndex: number;
/**
* 데이터 원본 객체.
*/
source: any;
}
/**
* 어노테이션 배치 기준.
* [주의]body에 설정된 annotation에는 적용되지 않는다.
* @enum
*/
declare const _AnnotationScope: {
/**
* container에서 padding을 적용한 영역을 기준으로 표시한다.
*
*
*/
readonly CHART: "chart";
/**
* container 전체 영역을 기준으로 표시한다.
*
*
*/
readonly CONTAINER: "container";
};
/** @dummy */
type AnnotationScope = typeof _AnnotationScope[keyof typeof _AnnotationScope];
interface AnnotationAnimationOptions {
/**
* 애니메이션 종류.
*/
type: string;
/**
* 애니메이션 지속 시간(밀리초).
*/
duration?: number;
}
/**
* 어노테이션이 {@link onClick 클릭}될 때 콜백의 매개변수로 사용된다.
*/
interface AnnotationClickArgs {
/**
* RealChart의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: object;
/**
* 클릭된 어노테이션 모델 객체
*/
annotation: object;
}
/**
* 차트 {@link https://realchart.co.kr/config/config/base/series 시리즈}나 {@link https://realchart.co.kr/config/config/base/gauge 게이지}로
* 표현이 부족하거나 특별히 강조할 내용이 있을 때,
* 보조로 표시할 수 있는 {@link https://realchart.co.kr/config/config/annotation/text 텍스트}나
* {@link https://realchart.co.kr/config/config/annotation/image 이미지} 또는 {@link https://realchart.co.kr/config/config/annotation/shape 도형}.
*
* @css 'rct-annotation'
*/
interface AnnotationOptions extends ChartItemOptions {
/**
* 어노테이션 종류. `'text'`, `'image'`, `'shape'` 중 하나.
* {@link https://realchart.co.kr/config/config/annotation/text text}, {@link https://realchart.co.kr/config/config/annotation/image image}, {@link https://realchart.co.kr/config/config/annotation/shape shape} 참조.
*/
type?: AnnotationType;
/**
* true로 지정하면 시리즈나 게이지들 위에 표시된다.
*
* @default false
*/
front?: boolean;
/**
* 어노테이션 이름.
* 동적으로 어노테이션을 다루기 위해서는 반드시 지정해야 한다.
*/
name?: string;
/**
* 분할 모드일 때 이 속성과 {@link col}이 모두 지정되면 annotation이 표시될 pane의 수직 index.
*/
row?: number;
/**
* 분할 모드일 때 이 속성과 {@link row}가 모두 지정되면 annotation이 표시될 pane의 수평 index.
*/
col?: number;
/**
* 어노테이션 배치 기준이 되는 차트 구성 요소.
* 현재, 같은 영역(body 혹은 chart)에 포함된 다른 어노테이션이나 {@link https://realchart.co.kr/config/config/base/gauge 게이지} {@link name 이름}을 지정할 수 있다.
*/
anchor?: string;
/**
* 수평 배치.
*
* @default 'left' anchor가 지정되면 'center', 아니면 'left'
*/
align?: Align;
/**
* 수직 배치.
*
* @default 'top'
*/
verticalAlign?: VerticalAlign;
/**
* {@link align}과 {@link verticalAlign}으로 지정된 위치에서 실제 표시될 위치의 수평 간격.
* 값이 양수일 때, {@link anchor}가 지정된 경우 anchor 아이템의 밖으로 멀어지고, 아니면 영역 경계 안쪽으로 멀어진다.
* 또, {@link anchor}가 지정된 경우 **'0.5w'** 등으로 이 어노테이션의 너비를 기준으로 한 크기로 지정할 수 있다.
*
* @default 0
*/
offsetX?: number | string;
/**
* {@link align}과 {@link verticalAlign}으로 지정된 위치에서 실제 표시될 위치의 수직 간격.
* 값이 양수일 때, {@link anchor}가 지정된 경우 anchor 아이템의 밖으로 멀어지고, 아니면 영역 경계 안쪽으로 멀어진다.
* 또, {@link anchor}가 지정된 경우 **'0.5h'** 처럼 이 어노테이션의 높이를 기준으로 한 크기로 지정할 수 있다.
*
* @default 0
*/
offsetY?: number | string;
/**
* 회전 각도.
* 0 ~ 360 사이의 값으로 지정한다.
*/
rotation?: number;
/**
* 어노테이션 배치 기준.
* [주의]body에 설정된 annotation에는 적용되지 않는다.
*
* @default 'chart'
*/
scope?: AnnotationScope;
/**
* 배경 스타일.
* 경계 및 배경 색, padding 스타일을 지정할 수 있다.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* body의 annotation으로 설정된 경우,
* true로 지정하면 상위 영역을 벗어난 부분도 표시되게 한다.
*/
noClip?: boolean;
/**
* body 어노테이션일 때, {@link x1}, {@link x2}의 기준이 되는 축의 index나 이름.
* 지정하지 않으면 body에 연결된 첫번째 x축, 또는 body에 표시되는 첫번째 시리즈의 x축이 기준이 된다.
*
* @default undefined
*/
xAxis?: number | string;
/**
* body 어노테이션일 때, {@link y1}, {@link y2}의 기준이 되는 축의 index나 이름.
* 지정하지 않으면 body에 연결된 첫번째 y축, 또는 body에 표시되는 첫번째 시리즈의 y축이 기준이 된다.
*
* @default undefined
*/
yAxis?: number | string;
/**
* 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";
/**
* 이미지 어노테이션.
* {@link https://realchart.co.kr/docs/api/options/AnnotationOptions#type type}은 'image'이다.
*
* // TODO #fiddle annotation/image-annotation Image Annotation
* @css 'rct-image-annotation'
*/
interface ImageAnnotationOptions extends AnnotationOptions {
/**
*/
type?: typeof ImageAnnotationType;
/**
* @append
*
* true로 설정되고 {@link imageUrl}이 설정된 경우에만 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 이미지 경로.
* 일반 URL 경로나 `assetId::imageName` 형식의 asset 참조를 지정할 수 있다.
* asset에 등록된 이미지를 사용하려면 `asset.id::imageName` 또는 `asset.id::index` 형식으로 지정한다.
*
* ```js
* // 일반 URL 경로
* imageUrl: '/images/chart.png'
*
* // asset 참조 (이름)
* imageUrl: 'myImages::logo'
*
* // asset 참조 (인덱스)
* imageUrl: 'myImages::0'
* ```
*/
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";
/**
* 수직선
*
*/
readonly VLINE: "vline";
/**
* 수평선
*
*/
readonly HLINE: "hline";
/**
* 직선
*
*/
readonly LINE: "line";
/**
* 화살표
*
*/
readonly ARROW: "arrow";
};
/** @dummy */
type ShapeAnnotationShape = typeof _ShapeAnnotationShape[keyof typeof _ShapeAnnotationShape];
/**
* Shape 어노테이션.
* {@link https://realchart.co.kr/docs/api/options/AnnotationOptions#type type}은 'shape'이다.
* {@link shape} 속성에 표시할 도형 모양을 지정하거나,
* {@link path}에 SVG path를 직접 지정할 수 있다.
* {@link shape}가 `'arrow'`이고 object {@link style}일 때 stroke/fill 기본값이 자동 보정된다.
* CSS class {@link style} 문자열은 자동 보정되지 않는다.
*
* // TODO #fiddle annotation/shape-annotation Shape Annotation
* @css 'rct-shape-annotation'
*/
interface ShapeAnnotationOptions extends AnnotationOptions {
/**
*/
type?: typeof ShapeAnnotationType;
/**
* @append
*
* @default 64
*/
width?: PercentSize;
/**
* @append
*
* @default 64
*/
height?: PercentSize;
/**
* Shape 종류.
* `'arrow'`는 {@link x1}, {@link y1}, {@link x2}, {@link y2} 직선 화살표이며,
* `'hline'`/`'vline'`처럼 축 전체를 span하지 않는다.
*
* @default 'square'
*/
shape?: ShapeAnnotationShape;
/**
* shape svg path.
* 이 속성이 지정되면 {@link shape}는 무시되며, `'arrow'`일 때 화살표 머리도 표시되지 않는다.
*/
path?: string;
/**
* {@link shape}가 `'arrow'`일 때 선 굵기(픽셀).
* 지정하면 {@link style}의 strokeWidth보다 우선하며, 렌더 시 {@link style} strokeWidth로 반영된다.
* arrow 전용이며, object {@link style} 미지정 시 strokeWidth 기본값도 함께 적용된다.
*
* @default 1
*/
lineWidth?: number;
/**
* {@link shape}가 `'arrow'`일 때 화살표 머리 크기(픽셀).
* tip에서 wing까지의 거리이며, 선 길이의 90%를 넘지 않는다.
* arrow가 아닌 {@link shape}에서는 무시된다.
*
* @default 12
*/
headSize?: number;
/**
* @deprecated 미구현. 사용하지 않는다.
*/
series?: string;
/**
* @deprecated 미구현. 사용하지 않는다.
*/
xRange?: number[];
/**
* @deprecated 미구현. 사용하지 않는다.
*/
yRange?: number[];
}
declare const TextAnnotationType = "text";
/**
* 텍스트 어노테이션.
* {@link https://realchart.co.kr/docs/api/options/AnnotationOptions#type type}은 'text'이다.
*
* // TODO #fiddle annotation/text-annotation Text Annotation
* @css 'rct-text-annotation'
*/
interface TextAnnotationOptions extends AnnotationOptions {
/** @dummy */
type?: typeof TextAnnotationType;
/**
* @append
*
* true로 설정되고 {@link text}가 설정된 경우에만 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 표시할 텍스트.
*
* @default 'Text'
*/
text?: string;
/**
* {@link text}에 동적으로 전달되는 값이 숫자일 때 사용되는 표시 형식.
*/
numberFormat?: string;
/**
* {@link text}에 동적으로 전달되는 값이 Date일 때 사용되는 표시 형식.
*/
timeFormat?: string;
/**
* 텍스트 행의 높이를 계산되는 높이와 다르게 표시되도록 지정한다.
* 1이면 계산된 높이와 동일하게 표시된다.
* 지정하지 않으면 계산된 값.
*/
lineHeight?: number;
/**
* 타이틀을 가로 또는 세로로 배치할지 여부와 블록의 진행 방향을 지정한다.
* 'vertical-lr' 또는 'vertical-rl'로 설정하면 수직 쓰기가 적용되며,
* 이때 한글 등 동아시아 문자는 글자 단위, 영문 등 기타 문자는 단어 단위로 배치된다.
* {@link textOrientation}을 'upright'로 지정하면 영문도 글자 단위로 세로 배치되지만,
* writingMode를 지원하지 않는 브라우저에서도 모든 문자를 글자 단위로 일관되게 세로 표시하고자 할 때는
* 신규 속성인 `vertical`을 사용할 수 있다. 단, `vertical` 속성에서는 `
`과 같은 줄바꿈 기능이 적용되지 않는다.
*/
writingMode?: WritingMode;
/**
* 텍스트 문자 방향을 지정한다.
* {@link writingMode 세로 모드}의 텍스트에만 적용된다.
* 특히, 영문을 한글처럼 세워서 표시하려 할 때 'upright'로 설정한다.
*/
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;
/**
* Annotation 모델들의 기반 클래스.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AnnotationOptions AnnotationOptions}이고,
* {@link https://realchart.co.kr/config 차트 설정}에서 {@link https://realchart.co.kr/config/config/annotation annotation} 항목으로 설정한다.
* ```js
* const config = {
* annotation: [{
* type: 'image',
* name: 'image1',
* }],
* };
* ```
* 또, Chart.{@link rc.Chart#getannotation getAnnotation}으로
* 모델 객체를 가져올 수 있다.
* ```js
* const annotation = chart.getAnnotation('image1');
* annotation.visible = false;
* ```
* {@link https://realchart.co.kr/guide/annotations Annotation 개요} 페이지를 참조한다.
*/
declare abstract class Annotation extends ChartItem {
body: object;
static readonly type: string;
static register(...clses: typeof Annotation[]): void;
static defaults: AnnotationOptions;
private _offsetX;
private _offsetY;
index: number;
private _name;
private _row;
private _col;
private _widthDim;
private _heightDim;
private _offsetXDim;
private _offsetYDim;
_x: number;
_y: number;
_w: number;
_h: number;
_anchorObj: ChartItem;
constructor(chart: IChart, body: object);
_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;
get row(): number;
get col(): number;
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;
clicked(): boolean;
_load(source: any): OP;
protected _doApply(options: OP): void;
protected _doPrepareRender(chart: IChart): void;
}
/**
* @private
*/
interface IAnnotationOwner {
chart: IChart;
options: {
annotation?: AnnotationOptions | AnnotationOptions[];
};
anchorByName(name: string): ChartItem;
}
/**
* @private
*/
declare class AnnotationCollection extends ChartItemCollection {
owner: IAnnotationOwner;
private _map;
private _visibles;
constructor(owner: IAnnotationOwner);
getVisibles(): Annotation[];
getPaneVisibles(row: number, col: number): Annotation[];
getAnnotation(name: string): Annotation;
get(name: string | number): Annotation;
load(src: any, inBody: boolean): void;
prepareRender(): void;
private $_loadItem;
}
/**
* 차트 생성 이후 호출되는 콜백의 매개변수로 사용된다.
*/
interface LoadCallbackArgs {
/**
* RealChart의 공개 {@link https://realchart.co.kr/docs/api/classes/Chart Chart} 모델
*/
chart: Chart;
}
/**
* RealChart의 공개 차트 모델.
*/
declare class Chart {
_obj: ChartObject;
private _modelCallback;
_loadCallback: (args: LoadCallbackArgs) => void;
private _loaded;
/**
* @private
* 컨트롤 내부에서 자동 생성되므로 이 생성자를 직접 호출할 일은 없다.
*/
constructor(config?: ChartConfiguration, callback?: (model: ChartObject, oldModel: ChartObject) => void);
/**
*/
destroy(): void;
/**
* @deprecated 차트 전역 설정은 {@link chartOptions}를 사용한다.
*/
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면 차트가 {@link https://en.wikipedia.org/wiki/Polar_coordinate_system 극좌표계}로 표시된다.
* 기본은 {@link 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;
/**
* 차트에 설정된 첫번째 시리즈.
* 그룹에 포함된 시리즈들을 모두 포함해서 첫번째 시리즈이다.
* {@link https://realchart.co.kr/guide/series 시리즈 개요} 및
* {@link https://realchart.co.kr/config/config/base/series 시리즈 설정}을 참조한다.
*/
get series(): Series;
/**
* 첫번째 게이지.
*/
get gauge(): Gauge;
/**
* 차트 범례 모델.
*/
get legend(): Legend;
/**
* 크레딧 모델.
*/
get credits(): Credits;
/**
* 툴팁 모델.
*/
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;
/**
* 지정한 type에 해당하는 첫번째 시리즈나 시리즈그룹 객체를 리턴한다.
*
* @param type 시리즈 타입
* @returns 시리즈 객체
*/
seriesByType(type: string): 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?: (args: LoadCallbackArgs) => void): Chart;
/**
* {@link 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;
}
/**
* 차트 전용 데이터 모델.
* 시리즈 설정 시 {@link https://realchart.co.kr/config/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} 등으로 값들을 변경하면 시리즈에 바로 반영된다.
* [주의] 이 객체의 생성자 대신 {@link RealChart.createData createData}를 이용해 생성해야 한다.
*/
declare class ChartData {
private _obj;
/**
* @private
* 이 생성자 대신 {@link RealChart.createData 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;
/**
* RealChart의 licenseKey를 등록한다.
*/
static setLicenseKey(key: string): void;
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);
* ```
*
* {@link https://realchart.co.kr/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?: (args: LoadCallbackArgs) => void): Chart;
/**
* 차트 시리즈에 연결할 수 있는 데이터.
* 저장되는 행은 json, array 또는 단일값일 수 있다.
* 기본적으로 한 필드의 모든 행이 시리즈의 데이터로 연결되어 표시된다.
* **rows**로 전달된 배열이 초기 데이터로 저장된다.
* 이 때, rows 배열 항목들의 사본(shallow copy)이 저장되므로,
* 차트 렌더링에 불필요한 값들은 최소화 해야 한다.
*
* ```js
* const data = RealChart.createData({}, [
* ['name1', 341],
* ['name2', 341],
* ...
* ]);
* ```
*
* 이렇게 생성된 데이터는 차트 생성 시 시리즈 옵션의 {@link 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 ChartPointerHandler implements IPointerHandler {
private _chart;
private _clickElement;
private _dragTracker;
private _clickX;
private _clickY;
private _prevX;
private _prevY;
constructor(chart: ChartControl);
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;
get dragTracker(): DragTracker;
setDragTracker(value: DragTracker): void;
isDragging(): boolean;
protected _stopEvent(ev: Event): void;
private $_pointerToPoint;
protected _getDragTracker(elt: Element, dx: number, dy: number): any;
private $_doDrag;
private $_startMove;
private $_startDrag;
private $_drag;
private $_stopDragTracker;
}
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 {
protected _model: T;
protected options: ChartItemOptions;
mw: number;
mh: number;
_debugRect: RectElement;
constructor(doc: Document, styleName?: any);
chart(): IChart;
get model(): T;
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;
protected _inflaePaddings(size: {
width: number;
height: number;
}): {
width: number;
height: number;
};
}
/**
* @private
*/
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;
clicked(): void;
pointerEnter(): void;
pointerLeave(): void;
remove(): RcElement;
protected _updateTransform(): void;
protected _marginable(): boolean;
protected _resetBackBounds(): boolean;
protected _setBackgroundStyle(back: RectElement): void;
protected _doLayout(p: Point): void;
}
declare class ImageElement extends RcElement {
private _bounds;
private _proxy;
onloadProxy: () => void;
onerrorProxy: () => void;
constructor(doc: Document, full: boolean, styleName?: string);
/** image url */
get url(): string;
set url(value: string);
setImage(url: string, width: number, height: number): void;
getBBox(): IRect;
resize(width: number, height: number, attr?: boolean): boolean;
}
/**
* 연속축의 그리드 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/ContinuousAxisGridOptions ContinuousAxisGridOptions}이다.
*/
declare class ContinuousAxisGrid extends AxisGrid {
private _minorGrid;
protected _doInit(op: ContinuousAxisGridOptions): void;
get minorGrid(): AxisMinorGrid;
getPositions(axis: ContinuousAxis, length: number): number[];
getMinorPositions(axis: ContinuousAxis, length: number): number[];
}
/**
* 연속축의 tick 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/ContinuousAxisTickOptions ContinuousAxisTickOptions}이다.
*/
declare class ContinuousAxisTick extends AxisTick {
private static readonly STEP_PIXELS_P;
private static readonly STEP_PIXELS_Y;
private static readonly STEP_PIXELS_X;
private static readonly STEP_MULTIPLES;
static defaults: ContinuousAxisTickOptions;
_baseAxis: Axis;
_step: number;
_strictEnds: boolean;
_userTicks: boolean;
private _stepPixels;
private _userMultiples;
protected _getValidInterval(axis: ContinuousAxis, v: any, length: number, min: number, max: number): any;
buildSteps(axis: ContinuousAxis, length: number, base: number, min: number, max: number, broken?: boolean): number[];
getNextStep(step: number, delta: number): number;
getMaxCount(len: number, stepPixels: number): number;
canUseNumSymbols(): boolean;
protected _doApply(op: OP): void;
private $_getStepPixels;
_findBaseAxis(): void;
protected _normalizeMin(min: number, interval: number): number;
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(scale: number, args: any): number[];
protected _getStepsBySteps(min: number, max: number, args: any): number[];
protected _calcStep: any;
protected _getStepsByPixels(length: number, pixels: number, base: number, min: number, max: number, args: any): number[];
}
/**
* 연속축의 label 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/ContinuousAxisLabelOptions ContinuousAxisLabelOptions}이다.
*/
declare abstract class ContinuousAxisLabel extends AxisLabel {
static defaults: ContinuousAxisLabelOptions;
}
/**
* 선형축의 label 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/LinearAxisLabelOptions LinearAxisLabelOptions}이다.
*/
declare class LinearAxisLabel extends ContinuousAxisLabel {
static defaults: LinearAxisLabelOptions;
getTick(index: number, v: any): string;
}
/**
* 선형축의 berak 모델.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisBreakOptions 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;
}
/**
* 연속 축의 {@link https://realchart.co.kr/config/config/yAxis/linear#basevalue baseValue} 위치에 표시되는 선(line) 모델.
* {@link options 옵션} 모델은 {@link https://realchart.co.kr/docs/api/options/AxisBaseLineOptions AxisBaseLineOptions}이다.
* 축의 최소값이 {@link https://realchart.co.kr/config/config/axis/linear#basevalue baseValue}보다 작을 때만 표시된다.
* 기본적으로 표시되지 않는다.
*/
declare class AxisBaseLine extends AxisLine {
static defaults: AxisBaseLineOptions;
protected _isVisible(): boolean;
}
/**
* 연속축 모델들의 기반 클래스.
* {@link options} 모델은 {@link https://realchart.co.kr/docs/api/options/ContinuousAxisOptions ContinuousAxisOptions}이다.
*
* 최대한 데이터포인트들을 표시해야 하므로 'bar' 시리즈 등 너비가 있는 것들을 표시하기 위해서
* 양 끝에 공간을 추가할 수 있다. // calcPoints() 참조.
*/
declare abstract class ContinuousAxis extends Axis {
private static readonly PADDINGS;
static defaults: ContinuousAxisOptions;
private _baseLine;
private _minorTick;
_minPadPixels: number;
_maxPadPixels: number;
private _minPaddings;
private _maxPaddings;
private _strictMin;
private _strictMax;
private _baseVal;
private _runBase;
private _unitLen;
_calcedMin: number;
_calcedMax: number;
_fixedMin: number;
_fixedMax: number;
private _prevSteps;
/** y축으로 사용될 때만 적용한다. */
private _breaks;
private _mergedBreaks;
private _runBreaks;
_breaksChanged: boolean;
private _sects;
private _lastSect;
protected _doInit(op: OP): void;
/**
* base value 위치에 표시되는 선분 설정 모델.
* 기본적으로 표시되지 않는다.
*/
get baseLine(): AxisBaseLine;
/**
* 첫번째 AxisBreak 모델.
*/
get break(): AxisBreak;
/**
* @append
*/
get tick(): ContinuousAxisTick;
/**
* @append
*/
get minorTick(): AxisMinorTick;
/**
* @append
*/
get grid(): ContinuousAxisGrid;
getBaseValue(): number;
hasBreak(): boolean;
_getBreaks(): AxisBreak[];
isBreak(pos: number): boolean;
private $_getPadding;
protected _doApply(op: OP): void;
continuous(): boolean;
isBased(): boolean;
protected _createGrid(): ContinuousAxisGrid;
protected _createTickModel(): ContinuousAxisTick;
protected abstract _createLabel(): ContinuousAxisLabel;
_prepareRender(): void;
protected _doPrepareRender(): void;
private $_trim;
private $_trimSteps;
protected _doBuildTicks(calcedMin: number, calcedMax: number, length: number, phase: number): IAxisTick[];
private $_createTicks;
protected _createTick(index: number, step: number): IAxisTick;
/**
* major tick 구간 사이 minor tick/grid 값을 계산한다.
* minor tick(#1450)과 minor grid line(#1449)이 동일한 보간을 사용한다.
*/
private $_buildMinorValues;
protected _canInterpolateMinorSegment(v0: number, v1: number): boolean;
protected _interpolateMinorValue(v0: number, v1: number, index: number, count: number): number;
_calcPoints(length: number, phase: number): void;
private $_calcMinorPoints;
private $_buildBrokenSteps;
private $_calcBrokenSteps;
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;
protected _isLog(): boolean;
private $_resolveFit;
private $_getStartFit;
private $_getEndFit;
private $_calcStrict;
protected _adjustMinMax(length: number, min: number, max: number): {
min: number;
max: number;
};
private $_calcXUnitLength;
protected _calcUnitLen(vals: number[], length: number, axisMin: number, axisMax: number): {
len: number;
min: number;
};
private $_loadBreak;
/**
* LogAxis 등에서 break 값을 내부 좌표계로 변환하기 위해 override 가능
*/
protected _doApplyBreak(br: any): void;
private $_loadBreaks;
/**
* 1. rate가 0보다 크고 1보다 작은 값으로 반드시 설정돼야 한다.
* 2. 이전 break의 rate보다 큰 값으로 설정돼야 한다.
* 3. 1, 2 중 하나라도 위반하면 병합에서 제외시킨다.
*/
private $_mergeBreaks;
}
/**
* 선형 연속 축 모델.
* {@link https://realchart.co.kr/docs/api/options/AxisOptions#type type}은 {@link https://realchart.co.kr/config/config/yAxis/linear linear}이고,
* {@link options 설정} 모델은 {@link https://realchart.co.kr/docs/api/options/LinearAxisOptions LinearAxisOptions}이다.
*/
declare class LinearAxis extends ContinuousAxis {
static type: string;
/**
* @append
*/
get label(): LinearAxisLabel;
protected _createLabel(): ContinuousAxisLabel;
protected _adjustMinMax(length: number, min: number, max: number): {
min: number;
max: number;
};
}
/**
* ChartText를 표시하는 텍스트 view.
*/
declare class ChartTextElement extends GroupElement {
protected _back: RectElement;
_outline: TextElement;
_text: TextElement;
_icon: ImageElement;
private _model;
private _box;
private _iconBox;
private _failedIconUrl;
constructor(doc: Document, styleName?: string);
/** text */
get text(): string;
setText(s: string): ChartTextElement;
setModel(doc: Document, model: IconedText, icon: string, dynStyle: SVGStyleOrClass): ChartTextElement;
setContrast(target: Element): ChartTextElement;
layout(align: Align): ChartTextElement;
/**
* {@link layout} 기준 콘텐츠 박스(group local 좌표).
* DOM `getBBox()`에 확보한 아이콘 영역을 합쳐, 아이콘이 비동기 로드되기 전에도
* 아이콘을 포함한 크기로 중앙 정렬할 수 있게 한다. 아이콘이 없으면 `getBBox()`와 동일하다.
*/
getLayoutBox(): IRect;
setOutline(model: IconedText): void;
getBBox(): IRect;
}
type Visitor = (element: T, index?: number, count?: number) => void;
/** @private */
declare class ElementPool extends RcObject {
private _owner;
private _creator;
private _pool;
private _views;
protected _orphans: Map;
private _styleName;
constructor(owner: RcElement, creator: {
new (doc: Document, styleName?: string): T;
}, styleName?: string);
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;
private $_create;
prepare(count: number, visitor?: Visitor, initor?: Visitor): ElementPool;
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;
sortDom(compare: (v1: T, v2: T) => number): ElementPool;
map(callback: (v: T) => any): any[];
front(v: T): void;
back(v: T): void;
getOrphans(): T[];
addOrphan(key: any, element: T): void;
freeOrphan(key: any): void;
clearOrphans(): void;
protected _prepareOrphans(): Map;
}
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;
push(...list: (string | number | Point)[]): PathBuilder;
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;
donut(cx: number, cy: number, rd: number, rdInner: 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[];
spline(pts: {
px: number;
py: number;
}[], start: number, end: number): void;
closedSpline(pts: {
px: number;
py: number;
}[], close: boolean): void;
}
/**
* @private
*/
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;
}
/**
* @private
*/
declare class LegendView extends BoundableElement