declare const PI_2: number;
declare const ORG_ANGLE: number;
declare const RAD_DEG: number;
type Path = string | any[];
declare function fixnum(value: number): number;
declare function pixel(v: number): string;
/**
* 123, '10%' 형식으로 크기를 지정한다.
*/
type PercentSize = string | number;
interface IPercentSize {
size: number;
fixed: boolean;
}
declare function parsePercentSize(sv: PercentSize, enableNull: boolean): IPercentSize;
declare function calcPercent(size: IPercentSize, domain: number, def?: number): number;
/**
* SVG 스타일 속성.
* {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute SVG 속성}을 참조한다.
*/
interface SVGStyles {
transform?: string;
transformBox?: string;
transformOrigin?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill fill} 스타일 속성.
*/
fill?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity fill-opacity} 스타일 속성.
*/
fillOpacity?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke stroke} 스타일 속성.
*/
stroke?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width stroke-width} 스타일 속성.
*/
strokeWidth?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray} 스타일 속성.
*/
strokeDasharray?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family font-family} 스타일 속성.
*/
fontFamily?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size font-size} 스타일 속성.
*/
fontSize?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight font-weight} 스타일 속성.
*/
fontWeight?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style font-style} 스타일 속성.
*/
fontStyle?: string;
/**
* SVG에 적용되는 css {@page https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx rx} 스타일 속성.
* {@page config.seires.bar 'bar'} 시리즈의 데이터포인트 bar의 모서리를 지정하는 데 사용된다.
*/
rx?: string;
/**
* 텍스트 정렬을 지정한다.
* **SVG에 적용되는 정식 css style 속성이 아니다.**
* 즉, HTML이나 realmap-style.css 등의 외부 css 파일에서 사용할 수 없고,
* RealMap 내부에서 {@page config.title} 등의 inline 스타일 속성으로 지정할 수 있다.
*
* ```js
* const config = {
* subtitle: {
* style: {
* textAlign: 'left',
* },
* },
* };
* ```
*/
textAlign?: Align;
/**
* **SVG에 적용되는 정식 css style 속성이 아니다.**
* 데이터포인트 라벨등 몇 요소의 배경 간격 설정으로 사용할 수 있다.
*/
padding?: string;
}
/** @dummy */
type SVGStyleOrClass = SVGStyles | string;
/**
* CSS 선언 블록을 나타내는 객체로, 스타일 정보뿐만 아니라 다양한 스타일 관련 메서드와 속성들을 제공한다.
* https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
*/
interface CSSStyles extends Partial {
}
/** @internal */
interface CSSStyles2 extends CSSStyles {
display?: string;
position?: string;
alignItems?: string;
justifyContent?: string;
flexDirection?: string;
flexWrap?: string;
gap?: string;
flex?: string;
width?: string;
height?: string;
minHeight?: string;
minWidth?: string;
maxWidth?: string;
left?: string;
top?: string;
overflow?: string;
marginRight?: string;
whiteSpace?: string;
margin?: string;
marginLeft?: string;
pointerEvents?: string;
transform?: string;
}
interface ISides {
left: number;
right: number;
top: number;
bottom: number;
horz?: number;
vert?: number;
}
/**
* 스와이프 제스처 등의 진행 방향.
*
*
* @see {@link RtListControl.onRowSwipe}
*/
declare enum RmDirection {
/**
* 위쪽으로 진행.
*/
UP = "up",
/**
* 아래쪽으로 진행.
*/
DOWN = "down",
/**
* 왼쪽으로 진행.
*/
LEFT = "left",
/**
* 오른쪽으로 진행.
*/
RIGHT = "right"
}
/**
* 수평 정렬.
* @enum
*/
declare const _Align: {
/**
* 왼쪽으로 정렬한다.
*/
readonly LEFT: "left";
/**
* 영역 가운데로 정렬한다.
*/
readonly CENTER: "center";
/**
* 오른쪽으로 정렬한다.
*/
readonly RIGHT: "right";
};
/** @dummy */
type Align = typeof _Align[keyof typeof _Align];
/**
* 수직 정렬.
* @enum
*/
declare const _VerticalAlign: {
/** @config */
readonly TOP: "top";
/** @config */
readonly MIDDLE: "middle";
/** @config */
readonly BOTTOM: "bottom";
};
/** @dummy */
type VerticalAlign = typeof _VerticalAlign[keyof typeof _VerticalAlign];
/**
* @enum
*/
declare const _AlignBase: {
/**
* @config
*/
readonly CHART: "chart";
/**
* @config
*/
readonly MAP: "map";
/**
* 상위 모델이 존재하는 경우 상위 모델 영역 기준.\
* 상위가 없으면 기본값(대부분 'body')과 동일.
* ex) subtitle인 경우 title 기준.
*
* @config
*/
readonly PARENT: "parent";
};
/** @dummy */
type AlignBase = typeof _AlignBase[keyof typeof _AlignBase];
/**
* @enum
*/
declare const _WritingMode: {
/** @config */
readonly HORIZONTAL_TB: "horizontal-tb";
/** @config */
readonly VERTICAL_LR: "vertical-lr";
/** @config */
readonly VERTICAL_RL: "vertical-rl";
};
/** @dummy */
type WritingMode = typeof _WritingMode[keyof typeof _WritingMode];
/**
* @enum
*/
declare const _TextOrientation: {
/** @config */
readonly MIXED: "mixed";
/** @config */
readonly UPRIGHT: "upright";
};
/** @dummy */
type TextOrientation = typeof _TextOrientation[keyof typeof _TextOrientation];
interface ColorRange {
minValue?: number;
maxValue?: number;
minColor?: string;
maxColor?: string;
/**
* 2 이상의 값으로 지정하면,
* 데이터포인트 값들을 이 속성값을 base로 하는 log 값으로 변환해서 표시한다.
*/
logBase?: number;
}
interface IPaddings {
l: number;
r: number;
t: number;
b: number;
}
/**
* @enum
*
* Legend나 ColorScale 등 맵차트 구성 요소들의 표시 위치.
* 위치를 지정한 후 다른 속성들로 정렬시킬 수 있다.
*/
declare const _ChartItemLocation: {
/**
* 맵차트 본체 아래 표시한다.
*
*/
readonly BOTTOM: "bottom";
/**
* 맵차트 타이틀 아래 표시한다.
*
*/
readonly TOP: "top";
/**
* 맵차트 본체 오른쪽에 표시한다.
*
*/
readonly RIGHT: "right";
/**
* 맵차트 본체 왼쪽에 표시한다.
*
*/
readonly LEFT: "left";
/**
* 맵차트 본체 영역 내부에 표시한다.
*
*/
readonly BODY: "body";
};
/** @dummy */
type ChartItemLocation = typeof _ChartItemLocation[keyof typeof _ChartItemLocation];
/**
* 구성 요소 위치.
*/
type Positions = 'top' | 'right' | 'bottom' | 'left';
interface ConfigObject {
[key: string]: any;
}
type ShapeDrawer = (rd: number, rd2: number) => (string | number)[];
type MapCoord = [number, number];
type MapRect = {
h1: number;
h2: number;
v1: number;
v2: number;
};
type MapArc = MapCoord[];
type MapPolygon = MapArc[];
type MapProps = any;
/**
* RealReport-Chart 라이브러리 클래스 모델의 최상위 base 클래스.
*
*
* @see concepts.dev_guide 개발 가이드
* @see concepts.about RealTouch 개요
*/
declare abstract class RmObject {
private $_hash;
private $_destroyed;
private $_destroying;
constructor(noHash?: boolean);
/**
* 객체가 소유한 참조 등을 해제하고 null을 리턴한다.
*
* ```
* list = lis.destroy();
* ```
*
* @returns null
*/
destroy(): null;
protected _doDestory(): void;
get destroying(): boolean;
get orphaned(): boolean;
get hash(): string;
isMe(hash: string): boolean;
toString(): string;
/**
* @internal
*
* template param으로부터 생성되는 값은 문자열일 수 있다.
*/
toBool(v: any): boolean;
toNum(v: any, def?: number): number;
}
declare abstract class RmEventProvider extends RmObject {
private _listeners;
_addListener(listener: T): void;
_removeListener(listener: T): void;
/**
* event로 지정한 함수가 정의된 모든 리스너에 대해 실행한다.
* 리스너 scope으로 실행하고, 첫번째 매개변수로 이 객체가 전달된다.
* 다만, 리스너들 중 하나라도 undefined가 아닌 값을 리턴하면,
* 그 값을 리턴하면서 멈춘다.
*/
protected _fireEvent(event: string, ...args: any[]): any;
}
interface MapInsetDisplay {
/**
* inset area 확대 비율.
* 지정하지 않으면 1.
* 0보다 큰 값이어야 한다.
*/
readonly scale?: number;
/**
* inset area의 [왼쪽, 위쪽] 기준으로, 표시 위치 [경도, 위도]를 도(°) 단위로 지정한다.
* [주의] {@page children}으로 적용될 때는 이 값 대신 {@page offset}을 반드시 지정해야 한다.
*/
readonly coord?: MapCoord;
/**
* coord로 지정한 inset 위치에 더 추가되는 [경도, 위도] 값이거나
* coord가 지정되지 않은 경우 원래 위치에서 떨어진 위치 값.
* 라이브러리에서 제공하는 미리 정의된 inset 위치를 조정하는 값으로 사용할 수 있다.
* [주의] {@page children}으로 적용될 때는 {@page coord} 대신 반듯 이 값을 지정해야 한다.
*/
readonly offset?: MapCoord;
/**
* inset을 구분하는 경계선을 도(°)단위로 지정한다.
* 값들은 space나 ','로 분리해서 x, y 순서대로 위치를 지정하고,
* 닫힌 다각형으로 지정하고 싶은 경우 마지막에 'z'나 'Z'을 추가한다.
* 또, {@page frame}이 지정되면 이 값은 무시된다.
* 값들은 각각 area 전체를 감싸는 가상의 사각형을 기준으로 작성하는데,
* 아래 값들을 상수로 사용할 수 있고, +,- 연산자로 offset을 지정할 수 있다.
* x값은 사각형 왼쪽(경도 시작접), y값은 사각형 아래쪽(위도 시작점)이 원점이 된다.
* w와 h는 각각 사각형의 너비와 높이다.
* x값은 원점에서 오른쪽으로 증가하고, y값은 원점에서 위쪽으로 증가한다.
* ex) '-0.1 h+0.05 +0.1 h+0.1 w+0.2 h' // 제주도 위쪽에 꺽인 line을 표시한다.
* '-0.2 -0.1 -0.2 h+0.1' // 울릉도 좌측에 직선으로 표시한다.
*/
readonly border?: MapCoord[] | string;
/**
* inset을 감싸서 구분하는 사각형을 도(°)단위로 지정한다.
* 이 값이 지정되면 {@page border}는 무시된다.
* css padding이나 margin 지정 방식과 동일하게 지정한댜.
* 지정된 값은 area의 전체를 포함하는 가상의 사각형과 frame 사이의 간격으로 표시된다.
* ex) '0.05' // 좌위상하 0.05°
* '0.05 0.01' // 상하 0.05°, 좌우 0.01°
* '0.05 0.01 0.03' // 상 0.05°, 우 0.01°, 하 0.03, 좌 0.01°
* '0.05 0.01 0.03 0.02' // 상, 우, 하, 좌
*/
readonly frame?: string;
/**
* border나 frame에 적용할 스타일셋.
* 기본으로 'rm-map-series-inset' 클래스 선택자가 적용된다.
*/
readonly style?: SVGStyleOrClass;
/**
* 명시적 false로 지정하면 이 inset이 포함하는 영역을 맵에서 제거한다.
* 대개 두 번째 map에서 사용된다.
*/
readonly visible?: boolean;
}
/**
* 본토에서 멀리 떨어진 영역들을 당겨서 표시하는 설정.
* [주의] 아래쪽 계산값들을 제외하곤 모두 readonly로 취급해야 한다.
*
* @css 'rm-map-series-inset'
*/
interface MapInset extends MapInsetDisplay {
/**
* inset시킬 area id.
* 이 area가 존재하지 않고,
* {@page parent}가 지정되지 않으면
* 자식들을 모두 함께 이동시킨다.
*/
readonly area: string;
/**
* 이 area가 존재하지 않고,
* {@page parent}가 지정되지 않으면
* 이 속성에 지정된 자식들을 모두 함께 이동시킨다.
* [주의] {@page frame}이나 {@page border}의 기준이 되는 child area의 id를 첫번째 항목으로 설정해야 한다.
* [주의] parent 하나에 한 번만 지정할 수 있다.
*/
readonly children?: string[];
/**
* {@page area}가 존재하지 않을 때,
* 이 속서에 해당하는 area를 찾아서 {@page polygons}에 해당하는 영역들을 이동시킨다.
* 콤마로 분리해서 둘 이상의 area를 지정할 수 있는데, 순서대로 해당되는 영역이 존재하면 사용한다.
* [주의] parent 하나에 한 번만 지정할 수 있다.
*/
readonly parent?: string;
/**
* {@page area}가 존재하지 않고, {@page parent}가 지정됐을 때,
* 이 속서에 지정하는 영역덜을 동시에 이동시킨다.
* [주의] {@page frame}이나 {@page border}의 기준이 되는 polygon의 index를 첫번째 항목으로 설정해야 한다.
* [주의] {@page parent}가 복수개로 지정되면 이 속성도 [[], [],..] 형태로 복수 개 지정해야 한다.
* [주의] parent 하나에 한 번만 지정할 수 있다.
*/
readonly polygons?: number[] | number[][] | number;
/**
* @private
* 계산된 값들.
*/
off?: MapCoord;
box?: MapCoord[];
pts?: any[];
bounds?: MapRect;
}
type MapSourceMeta = {
license?: {
license?: string;
author?: string;
url?: string;
etc?: "맵차트 최적화를 위해 좌표계 변환 및 Feature Polygon 수정";
};
dokdo?: {
group?: string;
parent?: number;
index?: number;
};
dummies?: string[];
};
/**
* 접경선 정보.
* 연결된 선으로 표시되므로, 반드시 접경선이 그려지는 순서대로 양쪽 area(들)을 지정해야 한다.
*/
type MapBorderSource = [string | [string], string | [string]];
/**
* 맵시리즈에서 사용할 기본 맵을 지정한다.
*/
interface MapSource {
/**
* 맵 이름.
* 맵차트에 여러 개 맵이 지정될 수 있으며,
* 맵차트 시리즈 등에서 맵을 참조할 때 사용된다.
*/
name?: string;
/**
* 명시적 false로 지정하면 맵차트에서 맵으로 사용되지 않는다.
*
* @default true
*/
enabled?: boolean;
/**
* @deprecated use {@page source}
**/
map?: any;
/**
* 영역들의 정보가 포함된 지도 데이터 소스.
*/
source?: any;
/**
* 외부 {@page source}를 가져올 위치.
*/
url?: string;
/**
* 맵 모델의 area를 구성할 때 area id로 사용할 소스의 속성 이름.
*/
idKey?: string;
/**
* 맵 모델의 area를 구성할 때 area name으로 사용할 소스의 속성 이름.
*/
nameKey?: string;
/**
* 맵차트 맵 모델을 구성할 때 제외시킬 영역들의 id 목록.
*/
exclude?: string[];
/**
* 맵 인셋 목록을 지정한다.
* 이름을 문자열로 지정하면 라이브러기가 기본 제공하는 인셋들이 사용된다.
* 또, 이름앞에 '-'를 추가하면 visible이 false로 설정된다.
*/
insets?: (string | MapInset)[];
/**
* 맵 상하좌우 주변에 추가할 영역의 크기를 도(°) 단위로 지정한다.
* css padding이나 margin 지정 방식과 동일하게 지정한댜.
*/
padding?: string;
/**
* 지도에 독도에 대한 meta 정보가 있는 경우,
* 독도와 울릉도 사이의 거리를 지정한 비율만큼으로 줄이거나 늘여서 표시한다.
* 0 ~ 1 사이의 값으로 원래 간격에 대한 상대 거리를 지정한다.
* 0 이하의 값으로 지정하면 dokdo를 표시하지 않는다.
* [lon, lat] 형식으로 지정할 수도 있다.
*/
dokdo?: number | MapCoord;
/**
* dummy 영역들을 표시할지 여부.
*/
showDummies?: boolean;
/**
* @ignore
* 로컬 지도가 글로벌 투영좌표계 중앙으로 배치할지 여부.
* 첫번째 기준 map에만 설절할 수 있다.
*/
useOffset?: boolean | MapCoord;
/**
* 부극 취고위까지 지도에 포함되면 90도까지 그려진 것으로 간주한다.
* 명시적 false로 지정하면 계산된 영역까지만 포함한다.
*/
alignArctic?: boolean;
/**
* 내부 경계(internal boundary)선 정보를 별도로 생성할 지 여부.
*/
needInternal?: boolean;
/**
* {@page needInternal 내부 경계선}에서 제외할 영역 목록.
*/
excludeInternal?: string[];
/**
* 외부 경계선 정보를 별도로 생성할 지 여부.
*/
needExternal?: boolean;
/**
* {@page needInternal 내부 경계선}에서 제외할 영역 목록.
*/
excludeExternal?: string[];
/**
* 접경선 목록.
*/
borders?: [{
name: string;
border: MapBorderSource;
closed?: boolean;
}];
}
declare abstract class MapSourceItem {
id: string;
constructor(id: string);
}
declare class AreaItem extends MapSourceItem {
props: MapProps;
polygon: MapPolygon;
polygons: MapPolygon[];
internal?: MapPolygon[];
internals?: MapPolygon[][];
external?: MapPolygon[];
externals?: MapPolygon[][];
dummy: boolean;
constructor(id: string, props: MapProps);
}
declare class MapBorderInfo {
name: string;
closed: boolean;
border: [string[], string[]];
constructor(name: string, source: MapBorderSource, closed: boolean);
}
declare class BorderItem extends MapSourceItem {
polygon: MapPolygon;
constructor(id: string, polygon: MapPolygon);
}
declare abstract class MapSourceImpl extends RmObject {
static createStockInset(area: string, display?: boolean | MapInsetDisplay): MapInset;
readonly name: string;
readonly enabled: boolean;
readonly idKey: string;
readonly nameKey: string;
readonly meta: MapSourceMeta;
readonly dokdo: number;
readonly dummies: string[];
readonly useOffset: boolean | MapCoord;
readonly internals: boolean;
readonly externals: boolean;
readonly alignArctic: boolean;
readonly borders: MapBorderInfo[];
items: MapSourceItem[];
insets: {
[area: string]: MapInset;
};
paddings: IPaddings;
private _excludes;
constructor(options: MapSource, index: number);
included(area: string): boolean;
private $_load;
protected abstract _doLoad(source: object, options: MapSource): MapSourceItem[];
}
/**
* 어노테이션 배치 기준.
* [주의]body에 설정된 annoation에는 적용되지 않는다.
* @enum
*/
declare const _AnnotationScope: {
/**
* container에서 padding을 적용한 영역을 기준으로 표시한다.
*
* @config
*/
readonly CHART: "chart";
/**
* container 전체 영역을 기준으로 표시한다.
*
* @config
*/
readonly CONTAINER: "container";
};
/** @dummy */
type AnnotationScope = typeof _AnnotationScope[keyof typeof _AnnotationScope];
interface AnnotationAnimationOptions {
type: string;
duration?: number;
}
type AnnotationType = 'image' | 'shape' | 'text' | 'html' | 'chart';
/**
* Annotation 모델.
*
* @config chart.annotation[base]
*/
interface AnnotationOptions extends ChartItemOptions {
type?: AnnotationType;
/**
* true로 지정하면 시리즈들 위에 표시된다.
* 명시적으로 false로 지정해야 시리즈들 아래 표시된다.
*
* @default false
*/
front?: boolean;
/**
* 어노테이션 이름.
* 동적으로 어노테이션을 다루기 위해서는 반드시 지정해야 한다.
*/
name?: string;
/**
* 어노테이션 배치 기준이 되는 맵차트 구성 요소.
* 현재, 같은 영역(body 혹은 chart)에 포함된 {@link 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에 설정된 annoation에는 적용되지 않는다.
*
* @default 'chart'
*/
scope?: AnnotationScope;
/**
* 배경 스타일.
* 경계 및 배경 색, padding 스타일을 지정할 수 있다.
* [주의] padding을 style이 아니라 여기서 지정하는 이유: background가 표시되지 않으면 사용자가 padding여부를 알 수 없다.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* true로 지정하면 상위 영역을 벗어난 부분도 표시되게 한다.
* body에 포함된 경우 body 영역,
* chart에 포함되고 scope이 'chart'일 때 chart 영역.
*
*/
noClip?: boolean;
/**
* body 어노테이션일 경우,
* x 축을 기준으로 지정하는 수평(inverted일 때 수직) 위치.
* chart에 지정된 어노테이션에서는 무시된다.
*
*/
x1?: number | Date;
/**
* body 어노테이션일 경우,
* x 축을 기준으로 지정하는 수평(inverted일 때 수직) 위치.
* chart에 지정된 어노테이션에서는 무시된다.
*
*/
x2?: number | Date;
/**
* body 어노테이션일 경우,
* y 축을 기준으로 지정하는 수직(inverted일 때 수평) 위치.
* chart에 지정된 어노테이션에서는 무시된다.
*
*/
y1?: number | Date;
/**
* body 어노테이션일 경우,
* y 축을 기준으로 지정하는 수직(inverted일 때 수평) 위치.
* chart에 지정된 어노테이션에서는 무시된다.
*
*/
y2?: number | Date;
/**
* Annotation 너비.
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.
*
*/
width?: PercentSize;
/**
* Annotation 높이.
* 픽셀 단위의 고정 값이나, plot 영역에 대한 상태 크기롤 지정할 수 있다.
*
*/
height?: PercentSize;
}
declare const ImageAnnotationType = "image";
/**
* 이미지 어노테이션.
* {@page op.AnnotationOptions#type}은 'image'이다.
*
* // TODO #fiddle annotation/image-annotation Image Annotation
* @css 'rm-image-annotation'
* @config chart.annotation[type=image]
*/
interface ImageAnnotationOptions extends AnnotationOptions {
type?: typeof ImageAnnotationType;
/**
* true로 설정되고 {@link url}이 설정된 경우에만 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 이미지 경로.
*
*/
imageUrl?: string;
}
declare const ShapeAnnotationType = "shape";
/**
* Shape Annotation 모델.
* {@page op.AnnotationOptions#type}은 'shape'이다.
* {@page shape} 속성에 표시할 도형 모양을 지정하거나,
* {@page path}에 SVG path를 직접 지정할 수 있다.
*
* // TODO #fiddle annotation/shape-annotation Shape Annotation
* @css 'rm-shape-annotation'
* @config chart.annotation[type=shape]
*/
interface ShapeAnnotationOptions extends AnnotationOptions {
type?: typeof ShapeAnnotationType;
/**
* @default 64
*/
width?: number;
/**
* @default 64
*/
height?: number;
/**
* Shape 종류.
*
* circle: 원
* diamond: 다아이몬드
* square: 정사각형
* triangle: 삼각형
* star: 별 모양
* itriangle:
* rectangle: 사각형
*
* @default 'square'
*/
shape?: 'circle' | 'diamond' | 'square' | 'triangle' | 'star' | 'itriangle' | 'rectangle';
/**
* Shape path.
* 이 속성이 지정되면 {@link shape}는 무시된다.
*/
path?: string;
series?: string;
xRange?: number[];
yRange?: number[];
}
declare const TextAnnotationType = "text";
/**
* 텍스트 어노테이션.
* {@page op.AnnotationOptions#type}은 'text'이다.
*
* // TODO #fiddle annotation/text-annotation Text Annotation
* @css 'rm-text-annotation'
* @config chart.annotation[type=text]
*/
interface TextAnnotationOptions extends AnnotationOptions {
type?: typeof TextAnnotationType;
/**
* true로 설정되고 {@link text}가 설정된 경우에만 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 표시할 텍스트.
*
* @default 'Text'
*/
text?: string;
/**
* {@link text}에 동적으로 전달되는 값이 숫자일 때 사용되는 표시 형식.
*
*/
numberFormat?: string;
/**
* {@link text}에 동적으로 전달되는 값이 Date일 때 사용되는 표시 형식.
*
*/
timeFormat?: string;
/**
* 텍스트를 가로 또는 세로로 배치할지 여부와 블록이 진행되는 방향을 지정한다.
*
* @config
*/
writingMode?: WritingMode;
/**
* 텍스트 문자 방향을 지정한다.
* 세로 모드의 텍스트에만 적용된다.
*
* @config
*/
textOrientation?: TextOrientation;
}
declare const HtmlAnnotationType = "html";
/**
* HTML 어노테이션.
* {@page op.AnnotationOptions#type}은 'html'이다.
*
* // TODO #fiddle annotation/html-annotation Html Annotation
* @css 'rm-html-annotation'
* @config chart.annotation[type=html]
*/
interface HtmlAnnotationOptions extends AnnotationOptions {
type?: typeof HtmlAnnotationType;
/**
* true로 설정되고 {@link text}가 설정된 경우에만 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 이 속성으로 지정한 html 내용을 표시한다.
* '.'나 '#'으로 시작되는 html selector로 지정하면 해당하는 dom의 {@page https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML innerHTML}을 가져와 표시한다.
* 예를 들어 id가 'abc'인 dom인 경우 '#abc'로 지정한다.
* 즉, document.{@page https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector querySelector}(htmlFrom)로 리턴되는 dom의 내용을 표시한다.
* 생성되는 dom의 스타일은 {@page htmlStyle}로 지정한다.
*/
html?: string;
/**
* 이 속성으로 지정한 selector에 해당하는 dom의 {@page https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML innerHTML}을 가져와 표시한다.
* 예를 들어 id가 'abc'인 dom인 경우 '#abc'로 지정한다.
* 즉, document.{@page https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector querySelector}(htmlFrom)로 리턴되는 dom의 내용을 표시한다.
* 이 속성이 {@page html}보다 우선한다. 다만, 존재하지 않은 dom을 지정한 경우 {@page html}에 지정한 내용을 대신 표시한다.
* 생성되는 dom의 스타일은 {@page htmlStyle}로 지정한다.
*/
htmlFrom?: string;
/**
* {@page html}로 생성되는 최상위 dom에 적용되는 스타일셋.
*/
htmlStyle?: CSSStyleDeclaration;
/**
* @append
* 너비를 반드시 지정해야 한다.
* 지정하지 않으면 100 픽셀 너비로 표시한다.
* {@page height 높이}를 지정하지 않으면 생성된 dom의 높이에 맞춰진다.
*
* @default 100
*/
width?: PercentSize;
/**
* {@page html}로 지정된 html 텍스트에 포함된 param 값을 지정하는 객체나 콜백. #311
*/
params?: {
[key: string]: any;
} | ((param: string) => any);
}
declare const ChartAnnotationType = "chart";
/**
* Chart 어노테이션.
* {@page op.AnnotationOptions#type}은 'chart'이다.
*
* @css 'rm-chart-annotation'
* @config chart.annotation[type=chart]
*/
interface ChartAnnotationOptions extends AnnotationOptions {
type?: typeof ChartAnnotationType;
config?: any;
}
type AnnotationOptionsType = ImageAnnotationOptions | ShapeAnnotationOptions | TextAnnotationOptions | HtmlAnnotationOptions | ChartAnnotationOptions;
/**
* @enum
*/
declare const _ClickAction: {
readonly NONE: "none";
readonly SELECT: "select";
/**
* 맵차트가 zoom 가능한 상태일 때 zoom-in 한다.
*/
readonly ZOOM: "zoom";
/**
* 표시된 지도 크기가 표시 영역보다 클 때,
* 클릭한 위치가 표시 중앙이 되도록 한다.
*/
readonly CENTER: "center";
/**
* 클릭한 영역이 포함된 맵시리즈가 drilldown 가능한 상태일 때,
* drilldown을 실해하고 클릭한 영역의 상세가 표시되도록 한다.
*/
readonly DRILLDOWN: "drilldown";
/**
* drilldow이 가능한 상태면 drilldown하거나,
* 아니면 zoom-in 한다.
*/
readonly DRILL_OR_ZOOM: "drillOrZoom";
};
/** @dummy */
type ClickAction = typeof _ClickAction[keyof typeof _ClickAction];
/**
* @enum
*/
declare const _DblClickAction: {
readonly NONE: "none";
readonly SELECT: "select";
/**
* 맵차트가 zoom 가능한 상태일 때 zoom-in 한다.
*/
readonly ZOOM: "zoom";
/**
* 표시된 지도 크기가 표시 영역보다 클 때,
* 클릭한 위치가 표시 중앙이 되도록 한다.
*/
readonly CENTER: "center";
/**
* 더블클릭한 영역이 포함된 맵시리즈가 drilldown 가능한 상태일 때,
* drilldown을 실해하고 클릭한 영역의 상세가 표시되도록 한다.
*/
readonly DRILLDOWN: "drilldown";
/**
* drilldow이 가능한 상태면 drilldown하거나,
* 아니면 zoom-in 한다.
*/
readonly DRILL_OR_ZOOM: "drillOrZoom";
};
/** @dummy */
type DblClickAction = typeof _DblClickAction[keyof typeof _DblClickAction];
declare const _DragAction: {
/**
* 구 지도이면 회전하고, 스크롤 가능한 세계지도면 스크롤하고, 아니면 지도를 이동(pan) 시킨다.
*/
readonly DEFAULT: "default";
/**
* 드래그로 결정된 영역에 포함된 area들을 선택한다.
* ctrl/cmd 키가 눌러진 상태가 아니면 기존 선택은 취소된다.
*/
readonly SELECT: "select";
/**
* 드래그로 결정된 영역이 화면을 채우도록 zoom-in 한다.
*/
readonly ZOOM: "zoom";
};
type DragAction = typeof _DragAction[keyof typeof _DragAction];
interface OnClickArgs extends CommonCallbackArgs {
x: number;
y: number;
coord: MapCoord;
area?: string;
}
/**
* 맵차트 전체에 영향을 미치는 옵션들.
*
* @config chart.chart
*/
interface ChartOptionsOptions extends ChartItemOptions {
/**
* false가 아닌 경우 첫번째 시리즈가 'map' 시리즈가 아니면 내부적으로 자동 추가한다.
*
* @default true
*/
alwaysMap?: boolean;
/**
* 맵 영역 등을 클릭하거나 tap했을 때 실행될 action.
*
* @default 'default'
*/
clickAction?: ClickAction;
/**
* 맵 영역 등을 더블 클릭하거나 더블 tap했을 때 실행될 action.
*
* @default 'zoom'
*/
dblClickAction?: DblClickAction;
/**
* 마우스 드래그 시 실행될 action.
*
* @default 'none'
*/
dragAction?: DragAction;
/**
* 맵차트 컨트롤의 배경 div 속성을 지정한다.
* 스타일 속성은 svg가 아니라 html css 속성들로 지정한다.
*/
backgroundStyle?: CSSStyles;
/**
* legend, color scale 등의 위젯들이 표시되는 영역과 body 사이의 간격.
* 숫자 값이나 css margin 지정 방식의 문자열로 지정할 수 있다.
*
* @default 8
*/
widgetSectionGap?: number | string;
/**
* legend, color scale 등의 위젯들이 표시되는 영역 내에서 위젯 사이의 간격.
*
* @default 8
*/
widgetGap?: number;
/**
* div의 크기가 변경될 때, 맵차트를 해당 크기에 맞게 조정할지 여부
*
* @default false
*/
domResize?: boolean;
/**
* 마우스 포인터가 클릭됐을 때 호출되는 콜백.
*/
onClick?: (args: OnClickArgs) => void;
/**
* 선택 변경 시 호출되는 콜백.
*/
onSelectionChanged?: (args: any) => void;
}
/**
* 맵차트 제목(title) 설정 모델.
* 기본적으로 맵차트 중앙 상단에 표시되지만 {@link align}, {@link verticalAlign} 등으로 위치를 변경할 수 있다.
*
* {@page guide.title 타이틀 개요} 페이지를 참조한다.
* @config chart.title
*/
interface TitleOptions extends ChartItemOptions {
/**
* true로 설정되고 {@page text}가 비어 있지 않은 텍스트로 설정된 경우에 표시된다.
*
* @default true
*/
visible?: boolean;
/**
* 제목 텍스트.
*
* @default 'Title'
*/
text?: string;
/**
* 정렬 기준.
* 시리즈들이 그려지는 plotting 영역이나,
* 맵차트 전체 영역을 기준으로 할 수 있다.
* 또, {@link config.subtitle 부제목}인 경우 제목을 기준으로 위치를 지정할 수 있다.
*
* @default 'map'
*/
alignBase?: AlignBase;
/**
* 수평 정렬.
*
* @default 'center'
*/
align?: Align;
/**
* 수직 정렬.
*
* @default 'middle'
*/
verticalAlign?: VerticalAlign;
/**
* 배경 {@page it.SVGStyles 스타일셋} 또는 css {@page https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors selector}.
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 주 제목과 부 제목이 표시되는 영역과 맵차트 본체 등 과의 간격을 픽셀 단위로 지정한다.
* 주 제목이 표시되면 (부 제목의 값은 무시되고)주 제목의 값을 사용하고,
* 부 제목만 표시될 때는 부 제목의 값을 사용한다.
*
* @default 10
*/
gap?: number;
}
/**
* 부제목 표시 위치.
* @enum
*/
declare const _SubtitlePosition: {
/**
* 주제목 아래쪽에 표시.
*/
readonly BOTTOM: "bottom";
/**
* 주제목 오른쪽에 표시.
*/
readonly RIGHT: "right";
/**
* 주제목 왼쪽에 표시.
*/
readonly LEFT: "left";
/**
* 주제목 위쪽에 표시.
*/
readonly TOP: "top";
};
/** @dummy */
type SubtitlePosition = typeof _SubtitlePosition[keyof typeof _SubtitlePosition];
/**
* 맵차트 제목 주위에 표시되는 부제목 옵션.
* 기본적으로 주제목(title)의 설정을 따르고, 몇가지 속성들이 추가된다.
* 별도 설정이 없으면 표시되지 않는다.
*
* ```js
* const config = {
* title: {},
* subtitle: {
* visible: true,
* text: '출처: UN Data, 2020',
* },
* };
* ```
*
* {@page guide.title 제목 개요} 페이지를 참조한다.
*
* @config chart.subtitle
*/
interface SubtitleOptions extends TitleOptions {
/**
* 부제목 표시 위치.
*
* @default 'bottom'
*/
position?: SubtitlePosition;
/**
* 주 제목과 사이의 간격을 픽셀 단위로 지정한다.
*
* @default 2
*/
titleGap?: number;
/**
* @default ''
*/
text?: string;
/**
* @default 'bottom'
*/
verticalAlign?: VerticalAlign;
}
/**
* 맵차트 개발 제작자 등을 표시하는
* 크레딧 영역에 대한 설정 모델.
*/
interface CreditsOptions extends ChartItemOptions {
/**
* 제작자 이름 등 표시 텍스트.
*/
text?: string;
/**
* 영역을 클릭했을 때 이 속성에 지정한 곳으로 창을 연다.
*/
url?: string;
/**
* credits 표시 위치.
* 값을 지정하지 않으면 'bottom'에 표시된다.
*
* @default 'bottom'
*/
location?: ChartItemLocation;
/**
* 수평 배치.
* 값을 지정하지 않으면, 기본값이 {@link location}이 'body'일 때는 'left',
* 'top', 'bottom'일 때는 'right'이다.
* 그 외는 무시된다.
*/
align?: Align;
/**
* 수직 배치.
* 값을 지정하지 않으면, 기본값이 {@link location}이 'body'일 때는 'top',
* 'left', 'right'일 때는 'middle'이다.
* 그 외는 무시된다.
*/
verticalAlign?: VerticalAlign;
/**
* 설정에 따라 정해진 표시 위치에서 떨어진 수평 간격을 픽셀 단위로 지정한다.
* {@page floating}이 true가 아니고,
* {@page verticalAlign}이 'middle' 이면서 {@link align}이 'center'가 아닌 경우,
* 이 값만큼 수평 영역을 차지한다.
*
* @default 2
*/
offsetX?: number;
/**
* 설정에 따라 정해진 표시 위치에서 떨어진 수직 간격을 픽셀 단위로 지정한다.
* {@page floating}이 true가 아니고, {@page verticalAlign}이 'middle'이 아닌 경우,
* 이 값만큼 수직 영역을 차지한다.
*
* @default 1
*/
offsetY?: number;
/**
* {@link floating}이 true가 아니고, 중앙이 아닌 곳에 표시될 때,
* 맵차트 나머지 영역과의 간격을 픽셀로 지정한다.
* {@page verticalAlign}이 'middle'이면 수평 간격, 아니면 수직 간격에 적용된다.
*
* @default 4
*/
gap?: number;
}
/**
* 툴팁에 표시할 데이터포인트들을 선택하는 방식.
*
* @enum
*/
declare const TooltipScopes: {
readonly HOVER: "hover";
readonly POINT: "point";
readonly GROUP: "group";
readonly AXIS: "axis";
};
/** @dummy */
type TooltipScope = typeof TooltipScopes[keyof typeof TooltipScopes];
/**
* 데이터포인트 {@page guide.tooltip Tooltip} 설정 모델.
*
* @config chart.tooltip
*/
interface TooltipOptions extends ChartItemOptions {
scope?: TooltipScope;
html?: string;
/**
* 툴팁에 표시할 텍스트 형식.
* 시리즈에 {@link config.base.series#tooltiptext tooltipText}가 시리즈 별 tooltip을 제공하지만,
* 이 속성이 지정된 경우 우선 사용된다.
*
* `${param;default;format}` 형식으로 아래과 같은 변수로 데이터 포인트 및 시리즈 값을 지정할 수 있다.
* |변수|설명|
* |---|---|
* |series|시리즈 이름|
* |name|포인트 이름. 포인트가 속한 카테고리 이름이거나, 'x' 속성으로 지정한 값|
* |x|'x' 속성으로 지정한 값|
* |y|'y' 속성으로 지정한 값|
* |xValue|계산된 x값|
* |yValue|계산된 y값|
*
*/
text?: string;
/**
* 목표 지점과 tooltip 사이의 간격.
*
*/
offset?: number;
/**
* 툴팁이 점진적으로 닫히는 시간을 밀리초 단위로 지정한다.
*
* @default 700
*/
hideDelay?: number;
minWidth?: number;
minHeight?: number;
/**
* true이면 툴팁 상자가 마우스 포인터를 따라 다닌다.
*
* false, true를 명시적으로 지정하지 않으면 시리즈 종류에 따라 자동 설정된다.
* ex) pie 시리즈는 true, bar 시리즈는 false가 된다.
*
*/
followPointer?: boolean;
/**
* 툴팁 텍스트 속 숫자 값이 NaN일 때 대신 표시되는 텍스트.
*
*/
nanText?: string;
/**
* 툴팁에 표시될 숫자값의 기본 형식.\
* {@link text}예 표시 문자열을 지정할 때 `${yValue;;#,###.0}`와 같은 식으로 숫자 형식을 지정할 수 있다.
*
*/
numberFormat?: string;
/**
* 툴팁에 표시될 날짜(시간)값의 기본 형식.\
* {@link text}예 표시 문자열을 지정할 때 `${x;;yyyy.MM}`와 같은 식으로 날짜(시간) 형식을 지정할 수 있다.
*
*/
timeFormat?: string;
}
type ProjectionType = undefined | 'orthographic' | /*'naturealearth' |*/ 'equalearth' | 'miller' | 'mercator';
/**
* 실제 지도가 차지한 영역의 background에 표시 설정.
*/
interface MapBackgroundOptions extends ChartItemOptions {
/**
* 표시 여부를 지정한다.
* boolean 값으로 명시적 지정이 없으면 기본값을 따른다.
*
* @default undefined 구형 프로젝션이면 true, 아니면 false.
*/
visible?: boolean;
/**
* 구형 프로젝션일 때 적용할 기본 radial gradient의 색상.
* {@page style} 속성으로 다르게 지정할 수 있다.
*
* @default 'lightblue'
*/
globeFill?: string;
}
/**
* zoom, drilldown 패널 base 모델.
*/
interface BodyPanelOptions extends ChartItemOptions {
/**
* body 영역 내에서 panel의 수평 정렬.
*
* @default 'left'
*/
align?: Align;
/**
* body 영역 내에서 panel의 수직 정렬.
*
* @default 'top'
*/
verticalAlign?: VerticalAlign;
/**
* body 영역 경계와 panel 사이의 수평 간격.
*
* @default 8 픽셀
*/
offsetX?: number;
/**
* body 영역 경계와 panel 사이의 수직 간격.
*
* @default 8 픽셀
*/
offsetY?: number;
/**
* 패널에 표시되는 버튼이나 label들 사이의 간격.
*
* @default 3 pixel
*/
itemGap?: number;
}
interface ZoomButton {
label?: string;
icon?: string;
}
/**
* zoom 버튼들이 표시되는 패널 설정 모델.
*
* @config chart.zoomPanel
*/
interface ZoomPanelOptions extends BodyPanelOptions {
buttons?: ZoomButton[];
/**
* 버튼 배치 방향.
*
* @default 'vertical'
*/
direction?: 'vertical' | 'horizontal';
/**
* 버튼 클릭 시 증감될 zoom 변경량을 백분율로 지정한다.
*
* @default 20
*/
zoomStep?: number;
/**
* 버튼 너비.
* {@page buttonHeight}가 지정되지 않으면 이 속성값과 동일하게 표시된다.
*
* @default 28 픽셀
*/
buttonWidth?: number;
/**
* 버튼 높이.
* {@page buttonWidth}가 지정되지 않으면 이 속성값과 동일하게 표시된다.
*
* @default 28 픽셀
*/
buttonHeight?: number;
/**
* 원래 크기 상태로 변경하는 버튼 표시 여부.
*
* @default true
*/
showReset?: boolean;
/**
* 버튼들에 적용할 스타일셋.
*/
buttonStyle?: SVGStyleOrClass;
/**
* @default 'left'
*/
align?: Align;
/**
* @default 'bottom'
*/
verticalAlign?: VerticalAlign;
/**
* true로 지정하면 맵이 zoom되지 않은 상태일 때도 표시한다.
* 물론 {@page visible}이 false이면 이 속성과 무관하게 표시되지 않는다.
*
* @default true
*/
showAlways?: boolean;
}
/**
* @enum
*/
declare const _DrilldownPanelType: {
/**
* 전후 이동 버튼을 표시한다.
*/
readonly BUTTON: "button";
/**
* 진행된 시리즈들의 이름을 표시한다.
*/
readonly TEXT: "text";
};
/** @dummy */
type DrilldownPanelType = typeof _DrilldownPanelType[keyof typeof _DrilldownPanelType];
/**
* drilldown 버튼들이 표시되는 패널 설정 모델.
*
* @config chart.drilldownPanel
*/
interface DrilldownPanelOptions extends BodyPanelOptions {
/**
* @default 'text'
*/
type?: DrilldownPanelType;
/**
* @default 'left'
*/
align?: Align;
/**
* @default 'top'
*/
verticalAlign?: VerticalAlign;
}
interface CommonCallbackArgs {
/**
* Realmap의 공개 {@page api.Chart} 모델
*/
chart: MapChart;
}
interface OnHoverAreaArgs extends CommonCallbackArgs {
area: any;
oldArea: any;
}
interface OnClickAreaArgs extends CommonCallbackArgs {
area: any;
}
interface OnZoomChangedArgs extends CommonCallbackArgs {
zoom: number;
oldZoom: number;
}
/**
* 맵차트 본체(body) 설정 모델.
* 투영 옵션과 지도 제어 옵션들을 설정할 수 있다.
* @config chart.body
*/
interface BodyOptions extends ChartItemOptions {
/**
* 지도 투영 옵션.
* 투영 기법에 따라 지도 표시 방식이 달라진다.
*/
projection?: ProjectionType;
mapBackground?: MapBackgroundOptions;
/**
* zoom 버튼들이 표시되는 패널 설정 모델.
*/
zoomPanel?: ZoomPanelOptions | boolean;
/**
* 드릴다운 경로를 표시하는 panel 설정 모델.
*/
drilldownPanel?: DrilldownPanelOptions | boolean;
/**
* 사용자가 마우스 wheel이나 zoom panel을 이용해 {@page zoom}을 변경할 수 있는 지 여부.
*
* @default false
*/
zoomable?: boolean;
/**
* zoom 상태를 백분율로 지정한다.
* 100이면 원래 크기대로 표시한다.
*
* @default 100
*/
zoom?: number;
/**
* 사용자가 zoom 패널 등으로 변경할 수 있는 최대 zoom.
* @default 1000
*/
maxZoom?: number;
/**
* 마우스 휠로 zooming할 때 이 속성에 지정한 값에 따라 wheel 변화량을 계산한다.
* 큰 값을 지정할 수록 작게 변화한다.
*
* @default 4
*/
wheelZoomFactor?: number;
/**
* 'orthgraphic' 투영이 아닌 경우 true로 지정하면 좌우 스크롤로 지도 중심점을 변경할 수 있다.
* 지도 데이터가 세계 전체 지도일 때만 적용된다.
*
* @default false
*/
scrollable?: boolean;
/**
* {@page scrollable}이 true인 경우 도(°) 단위 좌우 스크롤 크기.
* 0보다 큰 값이면 중점이 아시아쪽으로 이동한다.
*/
scroll?: number;
/**
* 마우스 드래그로 panX/panY 를 변경할 수 있는 지 여부.
* 명시적 false로 지정하면 드래그로 이동시킬 수 없다.
* 초기 {@page zoom}을 설정하고 그 위치를 유지하려 할 때 사용할 수 있다.
*/
movable?: boolean;
/**
* 지도 중심으로부터 경도상으로 벗어난 지도 단위 크기. 양수이면 왼쪽으로 스크롤 된 상태
*/
panX?: number;
/**
* 지도 중심으로부터 위도상으로 벗어난 지도 단위 크기. 양수이면 아래쪽쪽으로 스크롤 된 상태
*/
panY?: number;
rotationX?: number;
rotationY?: number;
fit?: any;
points?: ([string, number, number] | {
id: string;
coord?: MapCoord;
lon?: number;
lat?: number;
})[];
onZoomChanged?: (args: OnZoomChangedArgs) => void;
onHoverArea?: (args: OnHoverAreaArgs) => void;
onClickArea?: (args: OnClickAreaArgs) => void;
/**
* body 영역 내에 표시되는 어노테이션 옵션.
* 옵션 객체 또는 옵션 객체 배열로 여러 어노테이션을 설정할 수 있다.
* [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 'annotations' 설정이 존재하면 load 후 이 속성으로 설정한다.
*/
annotations?: AnnotationOptionsType | AnnotationOptionsType[];
}
interface BackgroundImageOptions extends ChartItemOptions {
url?: string;
}
/**
* 기본 설정.
*/
interface ChartItemOptions {
/**
* 표시 여부.
*
* @default true
*/
visible?: boolean;
/**
* 스타일셋 혹은 class selector.
*
*/
style?: SVGStyleOrClass;
}
/**
* 텍스트 표시 효과.
*
* @enum
*/
declare const ChartTextEffects: {
/**
* 효과 없음.
*/
readonly NONE: "none";
/**
* 텍스트 색상과 대조되는 색상으로 텍스트 외곽을 구분 표시한다.
*/
readonly OUTLINE: "outline";
/**
* 텍스트 배경 상자를 표시한다.
* 배경 상자에 {@link backgroundStyle}이 적용된다.
* 스타일이 적용되지 않으면 기본 'rm-text-background'이 적용된다.
*/
readonly BACKGROUND: "background";
};
/** @dummy */
type ChartTextEffect = typeof ChartTextEffects[keyof typeof ChartTextEffects];
interface ChartTextOptions extends ChartItemOptions {
/**
*/
effect?: ChartTextEffect;
/**
*/
lightStyle?: SVGStyleOrClass;
/**
*/
darkStyle?: SVGStyleOrClass;
/**
*/
backgroundStyle?: SVGStyleOrClass;
/**
* 텍스트가 data point 내부에 표시되는 경우 포인트 색상과 대조되도록 표시한다.
* 밝게 표시할 때는 {@link lightStyle}을 적용하고,
* 어둡게 표시할 때는 {@link darkStyle}이 적용된다.
* lightStyle이 지정되지 않으면 'rm-text-light'이,
* darkStyle이 지정되지 않으면 'rm-text-dark'가 기본 적용된다.
*
*/
autoContrast?: boolean;
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;
/**
* rich text format을 지정할 수 있다.
*/
text?: string;
lineHeight?: number;
}
/**
* @enum
*/
declare const IconPostions: {
readonly DEFAULT: "default";
readonly LEFT: "left";
readonly RIGHT: "right";
readonly TOP: "top";
readonly BOTTOM: "bottom";
};
/** @dummy */
type IconPosition = typeof IconPostions[keyof typeof IconPostions];
interface IconedTextOptions extends ChartTextOptions {
/**
* @default 'default'
*/
iconPosition?: IconPosition;
imageList?: string;
iconRoot?: string;
/**
* @default 2
*/
iconGap?: number;
width?: number;
height?: number;
}
/**
* 범례나 scale의 타이틀이나 footer의 위치.
*
* @enum
*/
declare const MapWidgetCaptionDisplays: {
/**
* 범례나 scale 항목들의 배치에 따라 자동 배치한다.
* 항목들이 수직 배치이면 'stack', 수평 배치이면 'inline'이 적용된다.
*/
readonly AUTO: "auto";
/**
* 타이틀이나 footer를 항목들의 위/아래에 배치한다.
*/
readonly STACK: "stack";
/**
* 타이틀이나 footer를 항목들의 좌/우에 배치한다.
*/
readonly INLINE: "inline";
};
/** @dummy */
type MapWidgetCaptionDisplay = typeof MapWidgetCaptionDisplays[keyof typeof MapWidgetCaptionDisplays];
/**
* 범례나 scale의 title 설정 옵션.
*/
interface MapWidgetCaptionOptions extends IconedTextOptions {
/**
* 타이틀 표시 위치.
*/
display?: MapWidgetCaptionDisplay;
/**
* 타이틀과 범례 아이템들 사이의 간격.
* 타당한 값으로 지정하지 않으면 {@page display}가 'linine'이 될 때 10, 아니면 5 픽셀로 적용된다.
*/
gap?: number;
/**
* {@page display}가 'stack'가 될 때 수평 배치.
* 지정하지 않거나 잘못 지정하면 'left'로 적용된다.
*/
align?: Align;
/**
* {@page display}가 'inline'이 될 때 수직 배치.
* 지정하지 않거나 잘못 지정하면 'middle'로 적용된다.
*/
verticalAlign?: VerticalAlign;
}
/**
* 범례나 scale의 배경 설정 옵션.
*/
interface MapWidgetBackgroundOptions extends ChartItemOptions {
}
interface MapWidgetOptions extends ChartItemOptions {
/**
* 시리즈에서 참조하는 범례나 스케일 이름.
*/
name?: string;
/**
* 그룹 내에서 배치 순서.
* 값을 지정하지 않거나 잘못 지정하면 마자믹에 배치된다.
*/
order?: number;
/**
* 범례나 scale의 타이틀 설정 옵션.
*/
title?: MapWidgetCaptionOptions;
/**
* 범례나 scale의 footer 설정 옵션.
*/
footer?: MapWidgetCaptionOptions;
/**
* 범례나 scale의 배경 설정 옵션.
*/
background?: MapWidgetBackgroundOptions;
/**
* 범례나 scale 표시 위치.
*
* @default 'bottom'
*/
location?: ChartItemLocation;
/**
* 범례 또는 scale과 (location이 body일 때)body 또는 맵차트 경계 사이의 수평 간격.
*
* @default 0
*/
offsetX?: number;
/**
* 범례 또는 scale과 (location이 body일 때)body 또는 맵차트 경계 사이의 수직 간격.
*
* @default 0
*/
offsetY?: number;
/**
* 수평 배치.
* 값을 지정하지 않으면, 기본값이 {@link location}이 'body'일 때는 'left',
* 'left', 'right'일 때는 'center'이다.
*/
align?: Align;
/**
* 수직 배치.
* 값을 지정하지 않으면, 기본값이 {@link location}이 'body'일 때는 'top',
* 'top', 'bottom'일 때는 'middle'이다.
*/
verticalAlign?: VerticalAlign;
}
interface MapSimpleWidgetOptions extends MapWidgetOptions {
/**
* 이 위젯이 표시될 위젯 그룹 이름.
* 그룹에 포함되지 않은 위젯은 {@page location} 설정에 따라 위젯 섹션이나 body 영역에 표시된다.
*/
group?: string;
}
/**
* 범례 및 scale 등의 위젯들을 한 방향으로 배치하는 그룹 설정 옵션.
* 위젯의 order 속성으로 배치 순서를 결정한다.
*/
interface MapWidgetGroupOptions extends MapWidgetOptions {
/**
* 포함된 위젯들 배치 방향.
*
* @default 'vertical'
*/
direction?: 'vertical' | 'horizontal';
}
/**
* DataPointCallbackArgs
*/
interface DataPointArgs extends CommonCallbackArgs {
series: object;
count: number;
id: string;
index: number;
name?: string;
color?: string;
className?: string;
value?: any;
labelIndex?: number;
coord?: MapCoord;
source: any;
}
interface DataPointListkArgs extends CommonCallbackArgs {
/**
* 데이터포인트 개수.
*/
count: number;
/**
* 해당 위치의 데이터포인트 정보를 리턴한다.
void;
}
interface ZoomToAreaOptions {
/**
* 최소 확대 비율.
*/
minimumZoom?: number;
/**
* 최대 확대 비율.
*/
maximumZoom?: number;
}
/**
* 맵차트 내보내기 설정 모델
* @config chart.exporting
*/
interface ExporterOptions extends ChartItemOptions {
/**
* 내보내기 버튼 표시 여부 지정
*/
visible?: boolean;
/**
* 내보내기 버튼을 사용해 내보낸 맵차트에 사용할 확장자 없는 파일 이름.\
* 'export' 함수를 호출할 때 fileName을 지정하지 않을 경우 이 속성이 적용된다.
* fileName을 지정하지 않을 경우 realmap.type으로 다운로드 된다.
*
*/
fileName?: string;
/**
* 내보내기를 라이브러리를 사용하여 진행할지 여부 지정
*/
useLibrary?: boolean;
/**
* 내보내기 메뉴에 포함할 export types
*/
menus?: ExportType[];
/**
* 너비, 지정한 너비에 맞춰 높이가 결정된다.
*/
width?: number;
/**
* 이미지의 scale
*/
scale?: number;
/**
* 내보내기 도중 에러가 발생했을 때 처리할 서버 URL.\
* 지정하지 않을경우 realmap 서버에서 처리한다.
*/
url?: string;
/**
* true로 지정하면 내보내기 결과에 {@page config.axis.scrollBar AxisScrollBarOptions}가 포함되지 않는다.
*/
hideScrollbar?: boolean;
/**
* true로 지정하면 내보내기 결과에 {@page config.seriesNavigator SeriesNavigator}가 포함되지 않는다.
*/
hideNavigator?: boolean;
/**
* true로 지정하면 내보내기 결과에 {@page config.body.zoomButton ZoomButtonOptions}가 포함되지 않는다.
*/
hideZoomButton?: boolean;
}
/**
* @enum
*/
declare const _ExportType: {
/** @config */
readonly PNG: "png";
/** @config */
readonly JPEG: "jpeg";
/** @config */
readonly SVG: "svg";
/** @config */
readonly PDF: "pdf";
/** @config */
readonly PRINT: "print";
};
/** @dummy */
type ExportType = typeof _ExportType[keyof typeof _ExportType];
/**
* 내보내기 옵션.
*/
interface ExportOptions {
/**
* 내보낸 맵차트에 사용할 확장자.\
* type을 지정하지 않을 경우 png로 내보내기 된다.\
* @config
* // @TODO https://github.com/realgrid/realreport-chart/issues/549
*/
type?: ExportType;
/**
* 내보낸 맵차트에 사용할 확장자 없는 파일명.
* fileName을 지정하지 않을 경우 realmap.type으로 다운로드 된다.
* @config
*/
fileName?: string;
}
/**
* 외부 모듈로 구현되는 맵차트 내보내기 기능 명세.
*/
interface ChartExporter {
exportToImage: (dom: HTMLElement, options: ExportOptions, config: ExporterOptions) => void;
exportToPrint: (dom: HTMLElement, options: ExportOptions) => void;
isContextMenuVisible: () => boolean;
toggleContextMenu: () => void;
contains: (dom: Element) => boolean;
hideContextMenu: () => void;
}
interface IPoint {
x: number;
y: number;
}
interface ISize {
width: number;
height: number;
}
/** @internal */
declare class Size {
width: number;
height: number;
static readonly EMPTY: Size;
static empty(): Size;
static create(w?: number, h?: number): Size;
constructor(width?: number, height?: number);
/** isEmpty */
get isEmpty(): boolean;
clone(): Size;
equals(sz: Size): boolean;
setEmpty(): Size;
set(width: number, height: number): Size;
round(): Size;
toString(): string;
}
/** @internal */
declare class Color {
private static readonly COLORS;
static create(color?: string): Color | undefined;
static isBright(color: string): boolean;
static getContrast(color: string, darkColor?: string, brightColor?: string): string;
static interpolate(color1: Color, color2: Color, rate: number): Color;
private r;
private g;
private b;
private a;
constructor(color?: string);
get rgba(): string;
isBright(): boolean;
getContrast(darkColor: string, brightColor: string): string;
brighten(rate: number, color?: Color): Color;
toString(): string;
private $_parseRgb;
private $_parseNumber;
}
/**
* @internal
*
* //TODO: Intl.DateTimeFormat 사용할 것.
*/
declare class DatetimeFormatter {
private static readonly Formatters;
static getFormatter(format: string): DatetimeFormatter;
static get Default(): DatetimeFormatter;
private _format;
private _baseYear;
private _preserveTime;
private _tokens;
private _hasAmPm;
private _formatString;
constructor(format: string);
/** format */
get format(): string;
/** formatString */
get formatString(): string;
set formatString(value: string);
toStr(date: Date, startOfWeek: number): string;
private parseDateFormatTokens;
private parse;
}
/**
* @internal
*
* 'as,0.0#'
* NOTE: 'a'는 bigint에 사용할 수 없다.
*/
declare class NumberFormatter {
static readonly DEFAULT_FORMAT = "";
private static readonly Formatters;
static getFormatter(format: string): NumberFormatter;
static get Default(): NumberFormatter;
private _format;
private _options;
constructor(format: string);
get format(): string;
toStr(value: number | bigint): string;
toStrEx(value: number | bigint, roundingMode: 'trunc' | 'ceil'): string;
private $_parse;
}
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): ISize;
declare function isEmptyRect(r: IRect): boolean;
/** @internal */
declare class Rectangle {
x: number;
y: number;
width: number;
height: number;
static readonly Empty: Rectangle;
static Temp: Rectangle;
static create(x: any, y?: number, width?: number, height?: number): Rectangle;
constructor(x?: number, y?: number, width?: number, height?: number);
/** left */
get left(): number;
set left(value: number);
/** right */
get right(): number;
set right(value: number);
/** top */
get top(): number;
set top(value: number);
/** bottom */
get bottom(): number;
set bottom(value: number);
/** isEmpty */
get isEmpty(): boolean;
get isValid(): boolean;
clone(): Rectangle;
getInner(): Rectangle;
equals(r: Rectangle): boolean;
leftBy(delta: number): Rectangle;
rightBy(delta: number): Rectangle;
topBy(delta: number): Rectangle;
bottomBy(delta: number): Rectangle;
shrink(dx: number, dy: number): Rectangle;
expand(dx: number, dy: number): Rectangle;
contains(x: number, y: number): boolean;
setEmpty(): Rectangle;
move(x?: number, y?: number): Rectangle;
set(x: number, y: number, width: number, height: number): Rectangle;
setWidth(value: number): Rectangle;
copy(r: Rectangle): Rectangle;
copyHorz(r: Rectangle): Rectangle;
copyVert(r: Rectangle): Rectangle;
inflate(left?: number, top?: number, right?: number, bottom?: number): Rectangle;
offset(dx: number, dy: number): Rectangle;
round(): Rectangle;
union(r: Rectangle): Rectangle;
normalize(): Rectangle;
toString(): string;
}
/** @internal */
declare class Sides {
top: number;
bottom: number;
left: number;
right: number;
static readonly Empty: Readonly;
static Temp: Sides;
static create(top: number, bottom?: number, left?: number, right?: number): Sides;
static createFrom(value: string): Sides;
constructor(top?: number, bottom?: number, left?: number, right?: number);
clone(): Sides;
set(...values: number[]): void;
applyPadding(cs: CSSStyleDeclaration): Sides;
applyMargin(cs: CSSStyleDeclaration): Sides;
shrink(r: IRect): IRect;
toString(): string;
}
/**
* @internal
*
* 값이 문자형일 때 텍스트 변경 형식.
* 세미콜론(;)으로 구분되는 형식. 두개의 문자열은 각각 String.prototype.replace의 매개변수가 된다.
* 예) 사업자번호: '(\\d{3})(\\d{2})(\\d{5});$1-$2-$3'
*/
declare class TextFormatter {
private static readonly Formatters;
static getFormatter(format: string): TextFormatter;
private _format;
private _pattern;
private _replace;
constructor(format: string);
get format(): string;
toStr(text: string): string;
$_parse(fmt: string): void;
}
/** @internal */
declare class RmTool {
private _control;
private _touchElement;
private _moveElement;
private _draggable;
private _dragTracker;
private _touchX;
private _touchY;
private _prevX;
private _prevY;
protected _touches: {
x: number;
y: number;
t: number;
}[];
protected _tapped: number;
private _firstTime;
private _secondTime;
private _longTimer;
protected _primaryId: number;
private _distance;
private _pinching;
constructor(control: T);
get control(): T;
/**
* drag tracker
*/
get dragTracker(): DragTracker;
setDragTracker(value: DragTracker): void;
get dragging(): boolean;
touchX(): number;
touchY(): number;
pointerDown(ev: PointerEvent): boolean;
protected _stopEvent(ev: Event): void;
private $_doDrag;
private $_startMove;
pointerMove(ev: PointerEvent): void;
pointerUp(ev: PointerEvent): void;
pointerCancel(ev: PointerEvent): void;
pointerLeave(ev: PointerEvent): void;
touchStart(ev: TouchEvent): void;
touchMove(ev: TouchEvent): boolean;
protected _isPinchTarget(dom: Element): boolean;
protected _doPinch(dist: number): void;
touchEnd(ev: TouchEvent): void;
click(ev: PointerEvent): void;
dblClick(ev: PointerEvent): void;
keyPress(ev: KeyboardEvent): void;
wheel(ev: WheelEvent): void;
requestDrag(request: DragRequest): void;
getTrackerFromRequest(request: DragRequest): DragTracker;
protected _setDraggable(value: boolean): void;
protected _doClick(ev: PointerEvent): void;
protected _doDblClick(ev: PointerEvent): void;
protected _doPointerDown(ev: PointerEvent): boolean;
protected _doPointerMove(x: number, y: number, ev: PointerEvent): void;
protected _doPointerUp(ev: PointerEvent): boolean;
protected _doPointerCancel(ev: PointerEvent): void;
protected _doPointerLeave(ev: PointerEvent): void;
protected _doTouchStart(ev: TouchEvent, dom: Element): void;
protected _doTouchMove(ev: TouchEvent, dom: Element): boolean;
protected _doTouchEnd(ev: TouchEvent, dom: Element): void;
protected _doLongPressed(dom: Element, x: number, y: number): void;
protected _doKeyPress(ev: KeyboardEvent): void;
protected _doWheel(ev: WheelEvent): boolean;
protected _doSwipe(dom: Element, prevTracker: DragTracker, dir: RmDirection, duration: number, distance: number): boolean;
protected _getDragTracker(dom: Element, dx: number, dy: number): DragTracker;
private $_startDrag;
private $_drag;
private $_stopDragTracker;
private $_pointerToPoint;
private $_checkSwipe;
/**
* 터치 시작 시점에 실행한 설정 등을 이 후 touch 이벤트가 발생하면 초기화한다.
* ex) touch feedback, ...
* iphone 메시지 편집 창에서 touch 하면 행을 선택하고 이 후 다른 이벤트가 발생하면 선택을 해제한다.
*/
protected _clearTouchEffects(): void;
private $_getDistance;
}
declare abstract class DragRequest extends RmObject {
}
declare abstract class DragTracker extends RmObject {
private _control;
private _dragging;
constructor(control: T);
get control(): T;
/** dragging */
get dragging(): boolean;
/** startWhenCreated */
get startWhenCreated(): boolean;
get cursor(): string;
canSwipe(): 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(eventTarget: HTMLElement, x: number, y: number): void;
swipe(dir: RmDirection, duration: number, distance: number): boolean;
end(x?: number, y?: number): void;
protected _doSwipe(dir: RmDirection, duration: number, distance: 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(eventTarget: Element, xPrev: number, yPrev: number, x: number, y: number): boolean;
protected _doCanceled(): void;
protected _canAccept(eventTarget: Element, x: number, y: number): boolean;
protected _doCompleted(eventTarget: Element, x: number, y: number): void;
protected _doEnded(x?: number, y?: number): void;
}
/**
* @internal
*
* Control base.
*/
declare abstract class RmControl extends RmObject {
static readonly CLASS_NAME = "rm-control";
static readonly SHADOW_FILTER = "rm-shadow-filter";
private _activeTool;
static _animatable: boolean;
private _container;
private _dom;
private _htmlRoot;
private _debugger;
private _svg;
private _defs;
private _root;
private _inited;
private _testing;
private _dirty;
private _requestTimer;
private _defaultTool;
private _tool;
private _invalidElements;
private _toAnimation;
private _invalidateLock;
private _lockDirty;
private _cssVars;
private _resizeObserver;
private _domResize;
loaded: boolean;
_padding: ISides;
_scrolling: boolean;
constructor(doc: Document, container: string | HTMLDivElement, className?: string);
protected _doDestory(): void;
isInited(): boolean;
isTesting(): boolean;
doc(): Document;
dom(): HTMLElement;
width(): number;
height(): number;
contentWidth(): number;
contentHeight(): number;
contentRight(): number;
clipContainer(): SVGElement;
activeTool(): RmTool;
setSctiveTool(value: RmTool): void;
clearDefs(): void;
appendDom(elt: T): T;
addElement(elt: T): T;
removeElement(elt: RmElement): void;
invalidate(force?: boolean): void;
invalidateLayout(force?: boolean): void;
setLock(): void;
releaseLock(validate?: boolean): void;
lock(func: (control: RmControl) => void): void;
silentLock(func: (control: RmControl) => void): void;
setDomResize(value: boolean): void;
getBounds(): DOMRect;
setAnimation(to?: number): void;
fling(distance: number, duration: number): void;
getCssVar(name: string): string;
addDef(element: Element): void;
removeDef(element: Element | string): void;
/**
* defs에 직사각형 clipPath를 등록한다.
*/
clipBounds(x?: number, y?: number, width?: number, height?: number, rd?: number): ClipRectElement;
clip(clip: T): T;
pointerToPoint(event: PointerEvent): IPoint;
protected _setTesting(): void;
protected _setSize(w: number, h: number): void;
private $_addListener;
protected _registerEventHandlers(dom: HTMLElement): void;
protected _unresigterEventHandlers(dom: HTMLElement): void;
protected abstract _creatDefaultTool(): RmTool;
protected _prepareRenderers(dom: HTMLElement): void;
protected _initControl(document: Document, container: string | HTMLDivElement, className: string): void;
protected _initDefs(doc: Document, defs: SVGElement): void;
protected _render(): void;
private $_requestRender;
updateNow(): void;
private $_render;
protected _setBackgroundStyle(style: CSSStyles): void;
setDebug(message: any): void;
protected abstract _doRender(bounds: IRect): void;
protected _doBeforeRender(root: RmElement): void;
protected _doAfterRender(): void;
protected _doClick(event: PointerEvent): void;
protected _doDblClick(event: PointerEvent): void;
protected _doTouchStart(event: TouchEvent): void;
protected _doTouchMove(event: TouchEvent): boolean;
protected _doTouchEnd(event: TouchEvent): void;
protected _doPointerDown(event: PointerEvent): boolean;
protected _doPointerMove(event: PointerEvent): void;
protected _doPointerUp(event: PointerEvent): void;
protected _doPointerCancel(event: PointerEvent): void;
protected _doPointerLeave(event: PointerEvent): void;
protected _doKeyPress(event: KeyboardEvent): void;
protected _doWheel(event: WheelEvent): void;
protected _windowResizeHandler: (event: Event) => void;
protected _domResizeHandler: (event: Event) => void;
protected _domResized(): void;
private _clickHandler;
private _dblClickHandler;
private _touchStartHandler;
private _touchMoveHandler;
private _touchEndHandler;
private _pointerDownHandler;
private _pointerMoveHandler;
private _pointerUpHandler;
private _pointerCancelHandler;
private _pointerLeaveHandler;
private _keyPressHandler;
private _wheelHandler;
}
/**
* @internal
*
* RcContainer 구성 요소.
* SVGElement들로 구현된다.
*/
declare class RmElement extends RmObject {
static TESTING: boolean;
static DEBUGGING: boolean;
static ASSET_KEY: string;
static TEMP_KEY: string;
static shrink(elts: RmElement[], count: number): void;
static expand(parent: RmElement, elts: T[], count: number, creator: () => T): void;
static fit(doc: Document, parent: RmElement, elts: T[], count: number, creator: {
new (doc: Document, styleName?: string): T;
}, styleName: string): void;
private _visible;
private _x;
private _y;
private _width;
private _height;
private _zIndex;
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;
private _dom;
private _parent;
removing: boolean;
constructor(doc: Document, styleName: string, tag?: string);
protected _doInitStyles(): void;
protected _doDestory(): void;
get doc(): Document;
get dom(): SVGElement;
get parent(): RmElement;
get control(): RmControl;
get zIndex(): number;
set zIndex(value: number);
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);
/**
* visible
*/
get visible(): boolean;
set visible(value: boolean);
setVisible(value: boolean): boolean;
/**
* rotation
*/
get rotation(): number;
set rotation(value: number);
setRotation(originX: number, originY: number, rotation: number): RmElement;
getStyle(prop: string): string;
hasStyle(className: string): boolean;
containsDom(dom: Element): boolean;
addDom(dom: SVGElement | HTMLElement): HTMLElement | SVGElement;
add(child: T): T;
addAll(...children: RmElement[]): void;
insertChild(child: T, before: RmElement): T;
insertFirst(child: T): T;
removeChild(child: RmElement): void;
remove(): RmElement;
appendElement(doc: Document, tag: string): SVGElement;
insertElement(doc: Document, tag: string, before: Node): SVGElement;
moveToLast(child: RmElement): void;
isValidPathData(d: string): boolean;
getAttr(attr: string): any;
setAttr(attr: string, value: any): RmElement;
hasAttr(attr: string): boolean;
setAttrEx(attr: string, value: any): RmElement;
setAttrs(attrs: any): RmElement;
unsetAttr(attr: string): RmElement;
getBounds(): DOMRect;
setBounds(x: number, y: number, width: number, height: number): RmElement;
setRect(rect: IRect): RmElement;
getRect(): IRect;
getSize(): ISize;
bbox(): IRect;
move(x: number, y: number): RmElement;
scale(value: number, yValue?: number): this;
trans(x: number, y: number): RmElement;
transp(p: IPoint): RmElement;
transc(p: MapCoord): RmElement;
transEx(x: number, y: number, duration?: number, invalidate?: boolean): RmElement;
transX(x: number): RmElement;
transY(y: number): RmElement;
transform(s: string): void;
resize(width: number, height: number, attr?: boolean): boolean;
appendDom(dom: Node): Node;
insertDom(dom: Node, before: Node): Node;
clearDom(): void;
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: SVGStyles): boolean;
resetStyles(styles: any): boolean;
protected _resetClass(): void;
setClass(className: string): void;
clearStyleAndClass(): void;
internalClearStyleAndClass(): void;
setStyleOrClass(style: SVGStyleOrClass): void;
internalSetStyleOrClass(style: SVGStyleOrClass): void;
internalResetStyleOrClass(style: SVGStyleOrClass): void;
protected _setBackgroundBorderRadius(value: number): void;
setBackStyles(styles: any): boolean;
setStyle(prop: string, value: any): boolean;
internalSetStyle(prop: string, value: string): void;
internalSetImportantStyle(prop: string, value: string): void;
setBackStyle(prop: string, value: string): boolean;
putStyles(styles: any, buff?: any): any;
putStyle(prop: string, value: string, buff?: any): any;
setColor(color: string): this;
getFill(): any;
getStroke(): any;
setFill(color: string): this;
setStroke(color: string): this;
setTransparent(important: boolean): void;
textAlign(): Align;
setData(data: string, value?: string): void;
unsetData(data: string): void;
setBoolData(data: string, value: boolean): void;
hasData(data: string): boolean;
removeLater(delay: number, callback?: (v: RmElement) => void): RmElement;
hide(delay: number): RmElement;
ignorePointer(): void;
invalidate(): void;
rotate(angle: number): RmElement;
internalRotate(angle: number): void;
setCursor(cursor: string): void;
clipRect(x: number, y: number, width: number, height: number, rd?: number): ClipRectElement;
clipPath(path: Path): ClipPathElement;
attachClipPath(clipId: string): void;
detachClipPath(): void;
private $_setClip;
private createClipId;
sort(children: RmElement[]): void;
getParent(type: {
new (): T;
}): T;
protected _testing(): boolean;
protected _doAttached(parent: RmElement): void;
protected _doDetached(parent: RmElement): void;
protected _updateTransform(): void;
}
declare class LayerElement extends RmElement {
constructor(doc: Document, styleName?: any);
}
declare class PathElement extends RmElement {
_userData: any;
private _path;
constructor(doc: Document, styleName?: string, path?: Path);
path(): string;
setPath(path: Path): PathElement;
}
declare class PathElementEx extends RmElement {
group: boolean;
_userData: any;
private _path;
constructor(doc: Document, styleName: string, group?: boolean);
path(): string;
setPath(path: Path): PathElementEx;
}
declare class MaskElement extends RmElement {
private _id;
constructor(doc: Document);
get id(): string;
}
declare class ClipElement extends RmElement {
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): RmElement;
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 ClipPathElement extends ClipElement {
private _path;
constructor(doc: Document, path?: Path);
get path(): PathElement;
setPath(path: Path): this;
}
/**
* @internal
*/
declare enum TextAnchor {
START = "start",
MIDDLE = "middle",
END = "end"
}
/**
* @internal
*/
declare enum TextLayout {
TOP = "top",
MIDDLE = "middle",
BOTTOM = "bottom"
}
/**
* Background, padding 등을 이용하려면 HtmlTextElement를 사용한다.
*/
declare class TextElement extends RmElement {
private _layout;
private _dirty;
private _text;
private _bounds;
_lineCount: number;
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);
/** svg */
get svg(): string;
set svg(value: string);
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;
bbox(): IRect;
getBBoundsTest(): IRect;
stain(): void;
}
type RichTextParamCallback = (target: any, param: string) => any;
interface IRichTextDomain {
callback?: RichTextParamCallback;
numberFormatter?: NumberFormatter;
timeFormatter?: DatetimeFormatter;
textFormatter?: TextFormatter;
startOfWeek?: number;
}
/**
* '${name;default;format}',
* [주의] default에는 format이 적용되지 않는다. 즉, format이 적용된 문자열을 설정해야 한다.
*/
declare class Word {
text: string;
private _literals;
tag(): string;
parse(str: string): Word;
getText(target: any, domain: IRichTextDomain): string;
prepareSpan(span: SVGTSpanElement, target: any, domain: IRichTextDomain): SVGTSpanElement;
protected _doParse(str: string): Word;
}
declare class SvgLine {
private _words;
get words(): Word[];
parse(s: string): SvgLine;
}
/**
* , , ,
,
* ${label}
${endValue}
* ...
*/
declare class SvgRichText {
_format: string;
lineHeight: number;
private _lines;
constructor(format?: string);
setFormat(value: string): void;
lines(): SvgLine[];
build(view: TextElement, maxWidth: number, maxHeight: number, target: any, domain: IRichTextDomain): void;
layout(tv: TextElement, align: Align, width: number, height: number, pad: Sides): void;
$_parse(fmt: string): void;
}
type RmAnimationEndHandler = (ani: RmAnimation) => void;
declare abstract class RmAnimation {
static readonly DURATION = 700;
static readonly SHORT_DURATION = 300;
delay: number;
duration: number;
easing: string;
endHandler: RmAnimationEndHandler;
private _easing;
private _started;
private _timer;
private _ani;
private _handler;
setDuration(value: number): RmAnimation;
start(endHandler?: RmAnimationEndHandler): RmAnimation;
stop(): void;
protected _start(duration: number, delay?: number, easing?: string): void;
protected _stop(): void;
protected _doStart(): void;
protected _doStop(): void;
protected _canUpdate(): boolean;
protected abstract _doUpdate(rate: number): boolean;
}
/**
* @enum
*/
declare const _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];
type PointHoverCallback = (args: DataPointArgs) => void;
type PointClickCallback = (args: DataPointArgs) => boolean;
type PointStyleCallback = (args: DataPointArgs) => SVGStyleOrClass | undefined;
/**
* @enum
*/
declare const _PointViewPosition: {
/**
* 데이터포인트 위치가 이미지 등 아이템의 중앙이 되도록 표시한다.
*/
readonly CENTER: "center";
/**
* 데이터포인트 위치가 이미지 등 아이템의 아래쪽이 되도록 표시한다.
*/
readonly TOP: "top";
/**
* 데이터포인트 위치가 이미지 등 아이템의 위쪽이 되도록 표시한다.
*/
readonly BOTTOM: "bottom";
/**
* 데이터포인트 위치가 이미지 등 아이템의 오른쪽이 되도록 표시한다.
*/
readonly LEFT: "left";
/**
* 데이터포인트 위치가 이미지 등 아이템의 왼쪽이 되도록 표시한다.
*/
readonly RIGHT: "right";
};
/** @dummy */
type PointViewPosition = typeof _PointViewPosition[keyof typeof _PointViewPosition];
/**
* @enum
*/
declare const _PointLabelPositions: {
readonly AUTO: "auto";
readonly CENTER: "center";
readonly TOP: "top";
readonly BOTTOM: "bottom";
readonly LEFT: "left";
readonly RIGHT: "right";
};
/** @dummy */
type PointLabelPosition = typeof _PointLabelPositions[keyof typeof _PointLabelPositions];
/**
* 데이터포인트 label 설정 옵션.
*/
interface DataPointLabelOptions extends IconedTextOptions {
/**
* @default true
*/
visible?: boolean;
/**
* {@page visible}이 true일 때,
* 이 속성에 지정한 zoom 이상어야 표시된다.
* // TODO: level을 배열로 지정하고 level별로 font size를 지정할 수 있게 한다.
*/
zoomLevel?: number;
/**
* 포인트 label 표시 위치.
*
* @default 'auto'
*/
position?: PointLabelPosition;
/**
* label과 point view 사이의 기본 간격.
* 값을 지정하지 않으면 시리즈 종류에 따라 자동 결정된다.
*/
offset?: number;
/**
* 'pie', 'funnel' 시리즈에서 label이 외부에 표시될 때 label과 시리즈 본체와의 기본 간격.
*
* @default 25
*/
distance?: number;
/**
* 계산되는 기본 text 대신, data point label로 표시될 field.
* {@page textCallback}이 설정되고 콜백에서 null이나 undefined를 리턴하지 않으면 이 속성은 무시된다.
*
*/
textField?: string;
/**
* 계산되는 기본 text 대신, data point label로 표시될 text 리턴.
* undefined나 null을 리턴하면 {@page textField} 등을 사용한 기존에 표시될 텍스트를 사용한다.
* 빈 문자열 등 정상적인 문자열을 리턴하면 그 문자열대로 표시된다.
* {@page prefix}나 포맷 속성 등은 적용되지 않는다.
*/
textCallback?: (point: any) => string;
/**
* 데이터 포인트별 label 표시 여부를 리턴하는 콜백.
*/
visibleCallback?: (point: any) => boolean;
/**
* 데이터 포인트별로 추가 적용되는 스타일을 리턴한다.
*/
styleCallback?: (point: any) => SVGStyleOrClass;
/**
* @ignore 미구현
* 데이터 포인트 label들이 처음 load될 때 실행될 animation 종류.
*/
animation?: 'reveal' | 'fadenin';
}
interface CalloutAnchorPointOptions extends ChartItemOptions {
/**
* 모양을 지정한다.
*
* @default 'circle'
*/
shape?: string;
/**
* 반지름 크기를 픽셀 단위로 지정한다.
*
* @default 2.5
*/
radius?: number;
}
/**
* 데이터포인트의 원래 표시 위치에서 떨어진 곳에 데이터포인트 뷰를 표시하고,
* 선을 그어 연결하는 방식에 대한 옵션.
* 데이터가 밀집된 지역이나 겹치는 값들 사이에서 분리하여 배치하기 위해 사용한다.
* 데이터포인트 생성 데이터의 **'offset'** 속성에 `[경도 변위, 위도 변위]` 형식으로 원래 위치에 대한 변위값들을 지정하거나,
* **callout** 속성에 직접 표시 위치를 지정할 수도 있다. callout이 지정되면 offset은 무시된다.
*
* ex) `[{ offset: [[0, 2], [1, -1]], value: 100 }, ...]`
* ex) `[{ callout: [[35.3, 152.1], [36.9, 152.1]], value: 100 }, ...]`
*/
interface DataPointCalloutOptions extends ChartItemOptions {
/**
* callout 시작 위치의 모양과 스타일을 설정한다.
*/
anchorPoint?: CalloutAnchorPointOptions;
/**
* @default false
*/
visible?: boolean;
/**
* true로 지정하면 데이터포인트에 개별적으로 적용된 색상이 있으면 그 색으로 표시한다.
*
* @default true
*/
usePointColor?: boolean;
/**
* true로 지정하면 시리즈 스타일을 먼저 적용한다.
*
* @default false
*/
useSeriesColor?: boolean;
/**
* true로 지정하면 데이터포인트 표시 위치 설정 용도로만 사용한다.
*
* @default false
*/
layoutOnly?: boolean;
}
/**
* 시리즈는 {@page data}로 지정된 값들을 데이터포인트로 표시하는 맵차트의 핵심 구성 요소이다.
* 맵차트 설정의 다른 부분이나 API에 참조하기 위해서는 {@page name}을 반드시 지정해야 햔다.
* 맵차트 생성 시 {@page config.series.#type} 을 지정하지 않으면 {@page config.series.bar 'bar'} 시리즈로 생성된다.
*
* @config chart.series[base]
*/
interface SeriesOptions extends ChartItemOptions {
/**
* 맵차트 설정 객체에 지정하는 시리즈 종류.
*/
type?: string;
/**
* 시리즈 이름.
* 시리즈를 구분하기 위한 이름으로 사용된다.
*/
name?: string;
/**
* 이 시리즈를 나타내는 텍스트.
* 레전드나 툴팁에서 시리즈를 대표한다.
* 이 속성이 지정되지 않으면 {@page name}이 사용된다.
*/
label?: string;
/**
* 명시적으로 이 속성을 지정하면,
* 관련된 맵이 맵차트에 활성됐을 때만 시리즈가 표시된다.
*/
map?: string | number;
/**
* 데이터포인트 label 설정 옵션.
*/
pointLabel?: DataPointLabelOptions | boolean;
/**
* 데이터포인트 위치에서 선을 그어 떨어뜨려 표시하는 옵션.
* 데이터가 밀집된 지역이나 겹치는 값들 사이에서 분리하여 배치하기 위해 사용한다.
* data의 offset 속성에서 `[경도 변화량, 위도 변화량]`으로 지정한 값들로 선을 남기며 이동시킨다.
* ex) `[{ offset: [[0, 2], [1, -1]], value: 100 }, ...]`
*/
callout?: DataPointCalloutOptions | boolean;
/**
* 데이터포인트 목록을 생성하는 데 참조되는 데이터셋.
* {@page g.createChartAsync createChartAsync}를 호출해서 비동기로
* 맵차트를 생성할 때는 {@page dataUrl}로 원격 데이터 소스를 지정할 수 있다.
* [주의] 처음 load 후 data의 내용을 변경해도 맵차트에 반영되지 않는다.
*/
data?: any;
/**
* 시리즈 데이터의 외부 경로.
* {@page g.createChartAsync createChartAsync} 호출 시, 해당 url로 GET 요청을 전송하여 데이터를 다운받고,
* 해당 시리즈의 data 속성에 저장한다.
* {@page data}가 설정되면 이 속성은 무시된다.
* 또, 비동기 함수가 아닌 {@page g.createChart createChart}로 맵차트를 생성할 때 이 속성으로 data를 설정하려는 경우
* 콘솔에 경고 메시지가 표시된다.
*/
dataUrl?: string;
/**
* {@page data}나 {@page dataUrl}로 지정된 데이터소스에서 시리즈 데이터로 가져올 배열의 위치를 지정한다.
* "aaa.bbb" 형식으로 지정한다. 배열 항목은 숫자로 지정한다. "aaa.2.bbb".
* 지정하지 않으면 최상위 JSON 객체를 그대로 사용한다.
*/
dataPath?: string;
/**
* {@page data}가 array로 제공되어 datapoint로 생성될 때,
* array의 각 항목에 해당하는 이름으로 datapoint source의 값을 사용한다.
*/
fields?: string[];
/**
* {@page data}로 전달되는 데이터포인트 생성 객체들의 'id' 속성 값 대신,
* 이 속성으로 지정된 값을 데이터포인트 **id**로 설정한다.
*
* @default 'id'
*/
idField?: string;
/**
* {@page data}로 전달되는 데이터포인트 생성 객체들의 'name' 속성 값 대신,
* 이 속성으로 지정된 값을 데이터포인트 **이름**으로 설정한다.
*
* @default 'name'
*/
nameField?: string;
/**
* {@page data}로 전달되는 데이터포인트 생성 객체들의 'lon' 속성 값 대신,
* 이 속성으로 지정된 값을 데이터포인트 **경도** 값으로 설정한다.
*
* @default 'lon'
*/
lonField?: string;
/**
* {@page data}로 전달되는 데이터포인트 생성 객체들의 'lat' 속성 값 대신,
* 이 속성으로 지정된 값을 데이터포인트 **위도** 값으로 설정한다.
*
* @default 'lat'
*/
latField?: string;
/**
* {@page data}로 전달되는 데이터포인트 생성 객체들의 'color' 속성 값 대신,
* 이 속성으로 지정된 값을 데이터포인트 기본 **색상**으로 적용한다.
*/
colorField?: string;
/**
* 데이터 포인트 기본 색.
* 숫자로 지정하면 정수로 변환된 값에 해당하는 팔레트 색상으로 설정된다.
* 'var(--color-n)'으로 지정한 것과 동일하며, 1 ~ 12 사이의 값으로 지정한다.
* {@page style}로 지정된 색상보다는 우선하지만,
* {@page pointColors}나 {@page styleCallback}으로 설정된 색상이 이 속성으로 설정한 색상보다 우선한다.
*/
color?: string | number;
/**
* color 속성이 명시적으로 지정되지 않은 데이터포인터의 color 속성을 지정한다.
* 색 배열로 지정하거나, 'colors' asset으로 등록된 이름을 지정할 수 있다.
* 시리즈 {@page style}이나 {@page color}로 지정된 색 보다는 우선하지만,
* {@page styleCallback}에서 설정된 색상이나 데이터포인트별로 지정한 색상이 이 속성으로 설정된 색상보다 우선한다.
*/
pointColors?: string[] | string | ((point: any) => string);
/**
* 데이터포인트 툴팁 텍스트.
*/
tooltipText?: string | boolean;
tooltipCallback?: (args: any) => string;
/**
* 이 시리즈가 연결된 legend를 index나 이름으로 지정한다.
* -1 등 잘못된 값을 지정하면 legend에 표시되지 않는다.
*
* @default 0
*/
legend?: number | string;
/**
* @ignore 미구현
* 차트 설정 로드 시 실행되는 animation 종류.
*/
loadAnimation?: 'default' | 'reveal' | 'grow' | 'spread' | 'fadein';
/**
* true로 설정하면 hovering을 포함한 포인터 상호 작용에 비활성화 된다.
*/
disabled?: boolean;
/**
* @ignore 미구현
* 데이터포인트 hover 효과.
*/
hoverEffect?: 'none' | 'default';
/**
* 데이터포인트 위에 마우스가 있을 때 적용되는 스타일셋 혹은 class selector.
*/
hoverStyle?: SVGStyleOrClass;
/**
* 데이터 point의 동적 스타일 콜백.
* {@page style}, {@page pointColors} 등 다른 스타일 지정들 보다 우선한다.
*/
styleCallback?: PointStyleCallback;
/**
* 데이터포인트들이 새로 로드된 후 호출된다.
*/
onPointsLoaded?: (series: object, firstTime: boolean) => void;
onPointAdded?: (args: DataPointArgs) => void;
onPointRemoved?: (args: DataPointArgs) => void;
onPointUpdated?: (args: DataPointArgs) => void;
onPointListAdded?: (args: DataPointListkArgs) => void;
onPointListRemoved?: (args: DataPointListkArgs) => void;
onPointListUpdated?: (args: DataPointListkArgs) => void;
/**
* 데이터 point가 클릭될 때 호출되는 이벤트 콜백.
* 명시적 true를 리턴하면 기본 동작이 진행되지 않는다.
*/
onPointClick?: PointClickCallback;
/**
* 마우스가 데이터 point 위에 올라가거나 빠져나갈 때 호출되는 이벤트 콜백.
* 빠져나가는 경우 args 매개변수는 null이다.
*/
onPointHover?: PointHoverCallback;
}
/**
* 데이터포인트의 **'value'** 속성이나,
* {@page valueField}로 지정된 속성 값을 기준으로 데이터포인트를 표시하는 시리즈.
*/
interface ValueSeriesOptions extends SeriesOptions {
/**
* {@page data}로 전달되는 데이터포인트 생성 객체들의 'value' 속성 값 대신,
* 이 속성으로 지정된 값을 데이터포인트 값으로 적용한다.
*/
valueField?: string;
}
/**
* 특정 위치에 연관된 값을 버블이나 shape 등으로 표시한다.
*/
interface MarkerSeriesOptions extends ValueSeriesOptions {
/**
* 데이터포인트 {@page shape 도형} 회전 각도.
*/
rotation?: number;
/**
* marker가 마우스 아래 있는 지 판단할 때 외부로 추가되는 가상의 두께.
* 지정하지 않으면 {@page config.chart.options.pointHovering.hintDistance} 설정을 따른다.
*/
hintDistance?: number;
}
interface SparkSeriesCategory {
name?: string;
color?: string;
}
/**
* 특정 위치에 연관된 값들을 단순 차트(spark chart)로 표시한다.
* bar, line, pie 차트가 제공된다.
*/
interface SparkSeriesOptions extends ValueSeriesOptions {
/**
* 데이터포인트의 값이 복수개일 때 값별 색상을 순서대로 지정한다.
* color 항목이 설정되지 않으면 데이터포인트의 기본 색상이 사용된다.
* 또, {@page legendByCategory}가 true이면 여기에 지정된 색상별로 legend에 표시된다.
*/
categories?: SparkSeriesCategory[];
/**
* 데이터포인트 값들을 가져올 필드 목록.
* 이 속성이 지정되면 {@page valueField}는 무시된다.
*/
valueFields?: string[];
/**
* true로 지정되고 {@page categories}가 지정되면
* 맵차트 legend에 category별로 항목이 표시된다.
*
* @default undefined
*/
legendByCategory?: boolean;
/**
* 이 값을 0보다 크고 1보다 작은 값으로 지정하면,
* 데이터포인트 최대값을 기준으로 기본 크기에 대한 상대 크기로 표시된다.
*
* @default undefined
*/
minSize?: number;
/**
* 데이터포인트 {@page shape 도형} 회전 각도.
*/
rotation?: number;
/**
* 데이터포인트 좌표 기준 spark chart 표시 위치.
*
* @default 'top'
*/
position?: PointViewPosition;
}
interface GaugeOptions extends ValueSeriesOptions {
/**
* 데이터포인트 차트 너비를 픽셀 단위로 지정한다.
*/
width?: number;
/**
* 데이터포인트 차트 높이를 픽셀 단위로 지정한다.
*/
height?: number;
/**
* {@page width}, {@page height}를 동시에 지정한다.
* 이 속성보다 {@page width}, {@page height}가 우선한다.
*
* @default 60
*/
size?: number;
/**
* 데이터포인트 좌표 기준 게이지 표시 위치.
*
* @default 'top'
*/
position?: PointViewPosition;
}
interface ValueGaugeOptions extends GaugeOptions {
/**
* {@page valueDomain} 설정에 따라
* 시리즈의 전체 데이터포인트 값들로 부터 계산된 최소값 보다
* 이 속성에 지정한 값이 작으면 그 값을 기준 최소값으로 한다.
*
* @default 0
*/
minValue?: number;
/**
* {@page valueDomain} 설정에 따라
* 시리즈의 전체 데이터포인트 값들로 부터 계산된 최대값 보다
* 이 속성에 지정한 값이 크면 그 값을 기준 최대값으로 한다.
*/
maxValue?: number;
}
interface SparkBaseLineOptions extends ChartItemOptions {
}
/**
* @enum
* 데이터포인트 값들을 표시할 때,
* 크기 기준을 데이터포인트의 값들로 한정할 것인 지 또는,
* 시리즈 전체 값들의 범위를 기준으로 할 것인 지를 지정한다.
*/
declare const _DataPointValueDomain: {
readonly SERIES: "series";
readonly POINT: "point";
};
/** @dummy */
type DataPointValueDomain = typeof _DataPointValueDomain[keyof typeof _DataPointValueDomain];
interface OrthogonalSparkSeriesOptions extends SparkSeriesOptions {
/**
* @ignore 미구현
* true면 수평 방향으로 표시한다.
*/
inverted?: boolean;
/**
* 기준선 설정 옵션.
*/
baseLine?: SparkBaseLineOptions | boolean;
/**
* 데이터포인트 차트 너비를 픽셀 단위로 지정한다.
*/
width?: number | string;
/**
* 데이터포인트 차트 높이를 픽셀 단위로 지정한다.
*/
height?: number;
/**
* 데이터포인트 차트 양쪽 끝 여백 크기를 픽셀 크기나,
* '%'로 끝나는 전체 너비에 대한 백분율로 지정한다.
*
* @default undefined
*/
padding?: PercentSize;
/**
* 상/하 값 구분의 기준이 되는 값.\
* 숫자가 아닌 값으로 지정하면 0으로 간주한다.
*/
baseValue?: number;
belowStyle?: SVGStyleOrClass;
/**
* @default 'series'
*/
valueDomain?: DataPointValueDomain;
/**
* {@page valueDomain} 설정에 따라
* 개별 데이터포인트나 시리즈의 전체 데이터포인트 값들로 부터 계산된 최소값 보다
* 이 속성에 지정한 값이 작으면 그 값을 기준 최소값으로 한다.
*/
minValue?: number;
/**
* {@page valueDomain} 설정에 따라
* 개별 데이터포인트나 시리즈의 전체 데이터포인트 값들로 부터 계산된 최대값 보다
* 이 속성에 지정한 값이 크면 그 값을 기준 최대값으로 한다.
*/
maxValue?: number;
/**
* @ignore 미구현
* 2 이상 값을 지정하면 데이터포인트의 값들을 이 값을 밑수로 하는 log를 취해 계산한다.
* 작은 값들과 큰 값의 차이가 아주 클 때 격차의 scale을 줄여서 표시할 수 있다.
*/
logBase?: number;
}
declare const BarSeriesType = "bar";
/**
* 데이터포인트의 **'value'** 속성으로 지정된 값들을 막대 차트로 표시한다.
* {@page op.SeriesOptions#type}은 'bar'이다.
*
* @fiddle series/bar-series2 Bar 시리즈 데모
*
* @config chart.series[type=bar]
*/
interface BarSeriesOptions extends OrthogonalSparkSeriesOptions {
type?: typeof BarSeriesType;
/**
* sub label 설정 모델.
*/
subLabel?: DataPointLabelOptions | boolean;
/**
* 바 너비.
* 차트에 bar 하나가 차지히는 원래 너비에서 실제 표시되는 바 너비의 상대적 크기로 지정한다.
* 1보다 큰 경우 bar들이 겹치게 되는데 {@page overflow}가 true가 아니면 넘치지 않도록 최대한 차트 안쪽으로 밀어서 표시된다.
*
* @default 0.7
*/
barWidth?: number;
maxValue?: number;
/**
* null인 y값을 {@page baseValue}로 간주한다.
*/
nullAsBase?: boolean;
/**
* {@page baseValue} 혹은 y축의 baseValue보다 작은 쪽의 point들에 적용되는 스타일.
*/
belowStyle?: SVGStyleOrClass;
/**
* true로 지정하면 {@page barWidth}가 1보다 큰 경우 bar가 차트 너비를 넘어 표시된다.
* false면 최대한 차트 영역 내로 밀어서 표시한다.
*
* @default false
*/
overflow?: boolean;
/**
* bar 표시 순서.
* ex) 'reverse'로 지정하면 첫번째 bar가 두번째 bar 위에 표시된다.
*
* @default 'normal'
*/
barOrder?: 'normal' | 'reverse';
}
/**
* line 시리즈의 fill 영역 설정.
*/
interface LineSeriesAreaOptions extends ChartItemOptions {
/**
* @default
*/
visible?: false;
}
declare const LineSeriesType = "line";
/**
* 데이터포인트의 **'value'** 속성으로 지정된 값들을 선(line) 차트로 표시한다.
* {@page op.SeriesOptions#type}은 'line'이다.
*
* @fiddle series/line-series Line 시리즈 데모
*
* @config chart.series[type=line]
*/
interface LineSeriesOptions extends OrthogonalSparkSeriesOptions {
type?: typeof LineSeriesType;
back?: ChartItemOptions;
/**
* line 시리즈의 fill 영역 설정.
*/
area?: LineSeriesAreaOptions;
curved?: boolean;
}
/**
* 파이 섹터 무시 경계 값 및 속성 설정.
* 데이터포인트 values의 총 합이 지정된 value보다 작을 때
* 파이 섹터들을 별도로 표시하지 않고 지정한 크기와 스타일의 원 또는 섹터 하나로 표시한다.
*/
interface PieSeriesThreshold {
value?: number;
/**
* 지정하지 않으면 원래 크기대로 표시한다.
*/
radius?: number;
style?: SVGStyleOrClass;
}
declare const PieSeriesType = "pie";
/**
* 데이터포인트의 **'value'** 속성으로 지정된 값들을 파이(pie) 차트로 표시한다.
* {@page op.SeriesOptions#type}은 'pie'이다.
*
* @fiddle series/pie-series Pie 시리즈 데모
*
* @config chart.series[type=pie]
*/
interface PieSeriesOptions extends SparkSeriesOptions {
type?: typeof PieSeriesType;
centerX?: number;
centerY?: number;
/**
* 파이 반지름.
* 숫자나 '%'로 끝나는 백분율로 지정할 수 있다.
* 백분율로 지정하면 {@page body} 영역의 높이/너비 중 작은 크기에 대한 상대 크기로 지정된다.
* 또, {@page minSize}와 함께 사용하면 데이터포인트 값에 따라 다른 크기로 표시할 수 있다.
*
* @default 30
*/
radius?: PercentSize;
startAngle?: number;
totalAngle?: number;
clockwise?: boolean;
legendByField?: boolean;
/**
* @default true
*/
colorByValue?: boolean;
/**
* 파이 섹터 무시 경계 값 및 속성 설정 목록.
* 데이터포인트 values의 총 합이 지정된 값보다 작을 때
* 파이 섹터들을 별도로 표시하지 않고 지정한 스타일의 원 또는 섹터 하나로 표시한다.
*/
threshold?: PieSeriesThreshold | PieSeriesThreshold[];
}
/**
* @enum
*/
declare const _WaffleDirection: {
/**
* 야래쪽 행(row)부터 위로 채워가면서 {@page config.series.waffle#fillThreshold}에 도달하면
* 오른쪽으로 채워 나간다.
*/
readonly ROW: "row";
/**
* 왼쪽 행(column)부터 오른쪽로 채워가면서 {@page config.series.waffle#fillThreshold}에 도달하면
* 위쪽으로 채워 나간다.
*/
readonly COL: "col";
};
/** @dummy */
type WaffleDirection = typeof _WaffleDirection[keyof typeof _WaffleDirection];
declare const WaffleSeriesType = "waffle";
/**
* {@page value}로 지정된 연관된 값들을 waffle 차트로 표시한다.
* {@page op.SeriesOptions#type}은 'waffle'이다.
*
* @fiddle series/route-series Route 시리즈 데모
*
* @config chart.series[type=pie]
*/
interface WaffleSeriesOptions extends SparkSeriesOptions {
type?: typeof WaffleSeriesType;
/**
* @default 10
*/
rowCount?: number;
/**
* @default 10
*/
colCount?: number;
/**
* @default 'round'
*/
roundingMethod?: 'round' | 'trunc';
/**
* 최소 cell 개수.
*
* @default 1
*/
minCount?: number;
shape?: 'sqaure' | 'circle' | 'star' | 'diamond' | 'hexagon';
cellSize?: 5;
gap?: 2;
/**
* cell 들을 채워나가는 방향을 지정한다.
*
* @default 'col'
*/
fillDirection?: WaffleDirection;
/**
* {@page fillDirection}이 'colFirst'나 'rowFirst'일 때,
* 방향을 바꾸게 하는 기준 셀 개수.
* 1 이상이어야 하고, {@page fillDirection}에 따라 {@page rowCount}나 {@page colCount} 미만 크기로 지정해야 한다.
*
* @default 1
*/
fillThreshold?: number;
/**
* @default 'series'
*/
valueDomain?: DataPointValueDomain;
/**
* {@page valueDomain} 설정에 따라
* 개별 데이터포인트나 시리즈의 전체 데이터포인트 값들로 부터 계산된 최소값 보다
* 이 속성에 지정한 값이 작으면 그 값을 기준 최소값으로 한다.
*/
minValue?: number;
/**
* {@page valueDomain} 설정에 따라
* 개별 데이터포인트나 시리즈의 전체 데이터포인트 값들로 부터 계산된 최대값 보다
* 이 속성에 지정한 값이 크면 그 값을 기준 최대값으로 한다.
*/
maxValue?: number;
/**
* true로 지정하면 값에 포함되지 않는 셀들을 {@page nullStyle}을 적용해서 표시한다.
*
* @default false;
*/
showNull?: boolean;
}
/**
* @enum
*/
declare const _BubbleSizeMode: {
/**
* 최대값의 버블에 대한 지름 비율로 크기를 결정한다.
*/
readonly WIDTH: "width";
/**
* 최대값의 버블에 대한 면적 비율로 크기를 결정한다.
*/
readonly AREA: "area";
};
/** @dummy */
type BubbleSizeMode = typeof _BubbleSizeMode[keyof typeof _BubbleSizeMode];
declare const BubbleSeriesType = "bubble";
/**
* Bubble 시리즈.
* {@page op.SeriesOptions#type}은 'bubble'이다.
*
* @fiddle series/bubble-series Bubble 시리즈 데모
*
* @config chart.series[type=bubble]
*/
interface BubbleSeriesOptions extends MarkerSeriesOptions {
type?: typeof BubbleSeriesType;
/**
* sub label 설정 모델.
*/
subLabel?: DataPointLabelOptions | boolean;
/**
* 데이터포인트 값들로 부터 계산된 최소값 보다
* 이 속성에 지정한 값이 작으면 그 값을 기준 최소값으로 한다.
* 실시간 동적으로 데이터포인트를 추가하는 경우 이 속성과 {@page maxValue}를 명시적으로 지정해야 한다.
*/
minValue?: number;
/**
* 데이터포인트 값들로 부터 계산된 최대값 보다
* 이 속성에 지정한 값이 크면 그 값을 기준 최대값으로 한다.
* 실시간 동적으로 데이터포인트를 추가하는 경우 이 속성과 {@page minValue}를 명시적으로 지정해야 한다.
*/
maxValue?: number;
/**
* 버블 크기를 결정하는 방식.
*
* @default 'area'
*/
sizeMode?: BubbleSizeMode;
/**
* 버블 최소 크기.
* 백분율(%)로 지정하면 차트 너비/높이 중 작은 크기에 대한 비율로 지정된다.
*
* @default 10
*/
minSize?: PercentSize;
/**
* 버블 최대 크기.
* 백분율(%)로 지정하면 차트 너비/높이 중 작은 크기에 대한 비율로 지정된다.
*
* @default '12%'
*/
maxSize?: PercentSize;
/**
* @default 'center'
*/
position?: PointViewPosition;
/**
* @default 'x: ${x}
y: ${y}
volume: ${z}'
*/
tooltipText?: string;
/**
* Orthographic 투영법을 사용할 때, 버블을 구의 표면에 붙여서 그릴지 여부를 지정한다.
* Orthographic에서만 유효하다.
*
* @default false
*/
alignToSurface?: boolean;
}
/**
* @enum
* 'route' 시리즈 연결 선 종류.
*/
declare const _RouteLineType: {
readonly AIR: "air";
readonly STRAIGHT: "straight";
readonly CURVED: "curved";
};
/** @dummy */
type RouteLineType = typeof _RouteLineType[keyof typeof _RouteLineType];
/**
* @enum
*/
declare const _RouteArrowDisplay: {
readonly ALWAYS: "always";
readonly MOVING: "moving";
readonly NONE: "none";
};
/** @dummy */
type RouteArrowDisplay = typeof _RouteArrowDisplay[keyof typeof _RouteArrowDisplay];
declare const RouteSeriesType = "route";
/**
* {@page coords}로 지정된 두 지점 사이를 곡선으로 연결하는 시리즈.
* {@page op.SeriesOptions#type}은 'route'이다.
* 데이터포인트 label을 표시하지 않는다.
*
* @fiddle series/route-series Route 시리즈 데모
*
* @config chart.series[type=route]
*/
interface RouteSeriesOptions extends SeriesOptions {
type?: typeof RouteSeriesType;
/**
* @ignore 미구현
* @default 'air'
*/
lineType?: RouteLineType;
/**
* 선 두깨를 픽셀단위로 지정한다.
* 이 속성을 지정하면 css 설정보다 우선해서 적용된다.
*/
lineWidth?: number;
/**
* 화살표 표시 방식.
*
* @default 'always'
*/
arrowDisplay?: RouteArrowDisplay;
/**
* 곡선이 휘어지는 정도를 지정한다.
* 0 이상 0.1 이하의 값을 사용할 수 있다.
* @default 0.01
*/
bendFactor: number;
}
interface MapSeriesLabelOptions extends DataPointLabelOptions {
/**
* @default false
*/
visible?: boolean;
hoverColor?: string;
}
interface DrilldownOptions extends ChartItemOptions {
/**
* true가 아니면 지정하면 클릭 등으로 사용자가 drilldown할 수 없다.
*
* @default true
*/
enabled?: boolean;
/**
* drilldown 실행 시 detail 시리즈에 연결된 맵이 차트의 base맵이 되도록 한다.
*
* @default true
*/
autoMapChange?: boolean;
}
/**
* 맵 시리즈 내외부 접경선 표시 설정 옵션.
* [topoJSON](https://github.com/topojson/topojson-specification?tab=readme-ov-file) 소스로
* 작성된 맵인 경우 내외부 접경선을 별도의 스타일로 구분해서 표시할 수 있다.
*/
interface MapBordersOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
}
/**
* 맵 시리즈 내외부 접경선 표시 설정 옵션.
* [topoJSON](https://github.com/topojson/topojson-specification?tab=readme-ov-file) 소스로
* 작성된 맵인 경우 내외부 접경선을 별도의 스타일로 구분해서 표시할 수 있다.
*/
interface MapBorderOptions extends ChartItemOptions {
/**
* border 목록일 때, 각 목록을 구분하는 이름.
*/
name?: string;
}
declare const MapSeriesType = "map";
/**
* Map area 영역들을 칠하는 시리즈.
* {@page op.SeriesOptions#type}은 'map'이다.
* choropleth map(단계 구분도. 색상으로 area별 특성을 나타내는 지도).
* 설정에서 type을 지정하지 않으면 생성되는 기본 시리즈이다.
* Map chart가 지도처럼 보이려면 반드시 하나 이상의 map series가 포함되어야 한다.
*
* @config chart.series[type=map]
*/
interface MapSeriesOptions extends ValueSeriesOptions {
type?: typeof MapSeriesType;
/**
* true로 지정하면 데이터포인트로 지정되지 않은 area들에 대해,
* map 모델의 속성들을 이용해서 각 area에 해당하는 data point들을 자동 생성한다.
*/
useMapData?: boolean;
/**
* 맵 area와 연결할 키값들을 지정한다.
* 두 값을 배열로 지정하면 첫번째 문자열은 맵소스 "properties"의 속성명,
* 두번째는 데이터포인트의 속성명이다.
* 값을 하나만 지정하거나 문자열로 지정하면 양쪽 같은 속성명으로 연결한다.
* 이 값이 지정되지 않으면 데이터포인트의 "id" 또는 {@page idField} 속성으로 지정한 속성값과 맵소스의 "rm-id" 또는 "id" 속성값으로 연결한다.
*/
mapKeys?: string | [string, string];
/**
* 데이터포인트가 연결되지 않은 area의 스타일.
*
* @css '.rm-map-series .rm-point[data-null]'
*/
nullStyle?: SVGStyleOrClass;
/**
* dummy area에 설정되는 스타일셋.
*/
dummyStyle?: SVGStyleOrClass;
/**
* true로 지정하면 data가 연결되지 않은 area도 마우스 hover 효과가 표시된다.
*
* @default false
*/
nullHovering?: boolean;
hoverColor?: string;
hoverStyle?: SVGStyleOrClass;
/**
* true로 지정하면 마우스 클릭 등으로 area를 선택할 수 있다.
* {@page config.options#clickAction} 또는 {@page config.options#dbClickAction}이 'select'로 지정된 경우에만 적용된다.
*
* @default false
*/
selectable?: boolean;
/**
* 선택된 area에 적용할 스타일셋.
*/
selectedStyle?: SVGStyleOrClass;
/**
* true로 지정하면 data point가 설정되지 않은 area들도 nullColor로 표시한다.
* 복수 개의 시리즈로 영역들을 그룹핑하려면 반드시 false로 지정해야 한다.
*
* @default true
*/
allAreas?: boolean;
/**
* 표시하지 않는 영역들을 지정한다.
* {@page mapKeys} 속성으로 지정된 key나 'id' 또는 {@page idField}로 지정된 값(들)로 지정한다.
*/
hiddenAreas?: string | string[];
/**
* 내부 접경선 표시 설정 옵션.
*/
internalBorder?: MapBordersOptions;
/**
* 외부 접경선 표시 설정 옵션.
*/
externalBorder?: MapBordersOptions;
/**
* 특정 영역들의 경계선 옵션 목록.
*/
mapBorders?: string | MapBorderOptions | (string | MapBorderOptions)[];
colorRange?: ColorRange;
/**
* 차트에 설정된 color scale 아이디 혹은 인덱스.
* 명시적 null을 지정하면 컬러스케일에 연결되지 않는다.
* 다른 잘못된 값이면 첫번째 스케일에 연결된다.
*/
colorScale?: string | number | null;
drilldown?: DrilldownOptions;
/**
* @ignore
*/
detail?: MapSeriesOptions;
detailKey?: string;
detailZoom?: number;
/**
* true로 지정하면 데이터포인트가 설정된 area들이 설정되지 않은 area보다 위에 그려지게 한다.
*
* @default false;
*/
bringToFront?: boolean;
/**
* 맵시리즈는 기본값으로 legend에 표시하지 않는다.
*
* @default -1
*/
legend?: number | string;
}
interface FeatureSeriesLabelOptions extends DataPointLabelOptions {
hoverColor?: string;
}
declare const FeatureSeriesType = "feature";
/**
* Feature area 영역들을 칠하는 시리즈.
* {@page op.SeriesOptions#type}은 'feature'이다.
*
* @config chart.series[type=map]
*/
interface FeatureSeriesOptions extends ValueSeriesOptions {
type?: typeof FeatureSeriesType;
hoverColor?: string;
hoverStyle?: SVGStyleOrClass;
selectable?: boolean;
colorRange?: ColorRange;
/**
* 차트에 설정된 color scale 아이디 혹은 인덱스.
* 명시적 null을 지정하면 컬러스케일에 연결되지 않는다.
* 다른 잘못된 값이면 첫번째 스케일에 연결된다.
*/
colorScale?: string | number | null;
/**
* @ignore
*/
detail?: FeatureSeriesOptions;
detailKey?: string;
detailZoom?: number;
/**
* true로 지정하면 데이터포인트가 설정된 area들이 설정되지 않은 area보다 위에 그려지게 한다.
*
* @default false;
*/
bringToFront?: boolean;
}
declare const PointSeriesType = "point";
/**
* Point 시리즈.
* {@page op.SeriesOptions#type}은 'point'이다.
*
* @fiddle series/point-series Point 시리즈 데모
*
* @config chart.series[type=point]
*/
interface PointSeriesOptions extends MarkerSeriesOptions {
type?: typeof PointSeriesType;
/**
* 명시적으로 지정하지 않으면 기본 제공되는 shape 목록 중 하나로 자동 설정된다.
*/
shape?: Shape;
/**
* 데이터포인트 {@page shape 도형}의 반지름.
*
* @default 5
*/
radius?: number;
/**
* @default 'center'
*/
position?: PointViewPosition;
}
/**
* Label 설정 옵션.
*/
interface ImageSeriesLabelOptions extends DataPointLabelOptions {
/**
* @default false
*/
visible?: boolean;
}
declare const ImageSeriesType = "image";
/**
* 지정된 지점에 이미지를 표시하는 시리즈.
* {@page op.SeriesOptions#type}은 'image'이다.
*
* @fiddle series/image-series Image 시리즈 데모
*
* @config chart.series[type=image]
*/
interface ImageSeriesOptions extends SeriesOptions {
type?: typeof ImageSeriesType;
/**
* {@page config.series.image.pointLabel#visible} 기본값이 false이다.
*/
pointLabel?: ImageSeriesLabelOptions;
/**
* @default 'imageUrl'
*/
imageField?: string;
/**
* 각 데이터포인트의 imageUrl의 root url.
*/
rootUrl?: string;
imageWidth?: number;
imageHeight?: number;
/**
* 데이터포인트 {@page shape 도형} 회전 각도.
*/
rotation?: number;
/**
* 이미지 표시 위치.
*
* @default top
*/
position?: PointViewPosition;
}
declare const PinSeriesType = "pin";
/**
* Pin 시리즈.
* 지정된 위치에 pin의 아래 부분이 위치한다.
* 내부 원을 특정 스타일로 표시할 수 있다.
* 또, 도형 안에 text를 표시할 수 있으며,
* {@page style}에 padding을 지정해서 text 위치를 조정할 수 있다.
*
* @config chart.series[type=pin]
*/
interface PinSeriesOptions extends MarkerSeriesOptions {
type?: typeof PinSeriesType;
/**
* 원 반지름.
* 이 값을 기준으로 전체 너비와 높이가 결정된다.
* 전체 높이가 이 값의 3배가 된다.
*
* @default 9
*/
radius?: number;
/**
* 내부 원 크기.
* {@page radius 외부 원 크기}에 대한 비율을 0 ~ 1 사이의 값으로 지정한다.
*
* @default 0
*/
innerRadius?: number;
/**
* 내부 원 스타일셋.
*/
innerStyle?: SVGStyleOrClass;
/**
* 내부 원에 표시할 label 설정 모델.
* 문자열로 지정하면 label 텍스트를 지정한다.
*/
innerLabel?: ChartTextOptions | string;
/**
* spark chart 표시 위치.
*
* @default top
*/
position?: PointViewPosition;
/**
* 차트에 설정된 color scale 아이디 혹은 인덱스.
* 명시적 null을 지정하면 컬러스케일에 연결되지 않는다.
* 다른 잘못된 값이면 첫번째 스케일에 연결된다.
*/
colorScale?: string | number | null;
}
declare const FigureSeriesType = "figure";
/**
* Figure 시리즈.
* {@page figure} 속성에 표시하려는 사용자 정의 도형의 svg path를 지정한다.
* 또, 도형 안에 text를 표시할 수 있으며,
* {@page style}에 padding을 지정해서 text 위치를 조정할 수 있다.
*
* @fiddle series/figure-series Figure 시리즈 데모
*
* @config chart.series[type=figure]
*/
interface FigureSeriesOptions extends ValueSeriesOptions {
type?: typeof FigureSeriesType;
figure?: string;
/**
* 내부 원에 표시할 텍스트.
*/
rotation?: number;
/**
* 내부 원에 표시할 label 설정 모델.
* 문자열로 지정하면 label 텍스트를 지정한다.
*/
innerLabel?: IconedTextOptions | string;
/**
* 이미지 표시 위치.
*
* @default top
*/
position?: PointViewPosition;
}
/**
* Vector 머리 표시 종류.
* @enum
*/
declare const _VectorHeadType: {
/**
* 머리를 따로 표시하지 않는다.
*
* @config
*/
readonly NONE: "none";
/**
* 닫힌 화살표.
*
* @config
*/
readonly CLOSED_ARROW: "closedArrow";
/**
* 열린 화살표.
*
* @config
*/
readonly OPEN_ARROW: "openArrow";
};
/** @dummy */
type VectorHeadType = typeof _VectorHeadType[keyof typeof _VectorHeadType];
declare const VectorSeriesType = "vector";
/**
* Vector 시리즈.
*
* @config chart.series[type=vector]
*/
interface VectorSeriesOptions extends MarkerSeriesOptions {
type?: typeof VectorSeriesType;
/**
* @default 'openArrow'
*/
headType?: VectorHeadType;
/**
* 데이터포인트 생성시 전달되는 정보에서 길이(length) 값을 지정하는 속성 이름.
*
* @default 'length'
*/
lengthField?: string;
/**
* 데이터포인트 생성시 전달되는 정보에서 각도(angle) 값을 지정하는 속성 이름.
*
* @default 'angle'
*/
angleField?: string;
/**
* 시작 각도.
* 3시 위치가 0도.
*
* @default 0
*/
startAngle?: number;
}
interface HitmapGridModeOptions {
cellWidth?: number;
cellHeight?: number;
elliptic?: boolean;
}
interface HitmapPointModeOptions {
}
interface HitmapKdeModeOptions {
}
/**
* @enum
* 히트맵 표시 방식
*/
declare const _HitmapMode: {
readonly GRID: "grid";
readonly POINT: "point";
readonly KDE: "kde";
};
/** @dummy */
type HitmapMode = typeof _HitmapMode[keyof typeof _HitmapMode];
declare const HeatmapSeriesType = "heatmap";
/**
* 특정 위치를 중심으로 주변 영역을 칠하는 시리즈.
* {@page op.SeriesOptions#type}은 'heatmap'이다.
*
* @config chart.series[type=heatmap]
*/
interface HeatmapSeriesOptions extends MarkerSeriesOptions {
type?: typeof HeatmapSeriesType;
/**
* 히트맵 표시 방식.
*
* @default 'grid'
*/
mode?: HitmapMode;
grid?: HitmapGridModeOptions;
point?: HitmapPointModeOptions;
kde?: HitmapKdeModeOptions;
}
interface PanelSeriesSectionOptions extends ChartItemOptions {
/**
* @default '${value}'
*/
text?: string;
backgroundStyle?: SVGStyleOrClass | PointStyleCallback;
}
interface PanelSeriesHeaderOptions extends PanelSeriesSectionOptions {
minSize?: PercentSize;
}
interface PanelSeriesBodyOptions extends PanelSeriesSectionOptions {
}
interface PanelSeriesLabelOptions extends DataPointLabelOptions {
/**
* @default false
*/
visible?: boolean;
}
declare const PanelSeriesType = "panel";
/**
* 타이틀과 데이터포인트 관련 내용을 표시하는 두 영역을 표시하는 시리즈.
* {@page op.SeriesOptions#type}은 'panel'이다.
*
* @fiddle series/panel-series Panel 시리즈 데모
*
* @config chart.series[type=panel]
*/
interface PanelSeriesOptions extends ValueSeriesOptions {
type?: typeof PanelSeriesType;
/**
* {@page header}와 본체를 배치하는 방향.
*
* @default 'vertical'
*/
orientation?: 'vertical' | 'horizontal';
/**
* {@page config.series.panel.pointLabel#visible} 기본값이 false이다.
*/
pointLabel?: PanelSeriesLabelOptions;
header?: PanelSeriesHeaderOptions;
body?: PanelSeriesBodyOptions;
divider?: ChartItemOptions;
/**
* 데이터포인트 view 전체 최소 너비.
*/
minWidth?: number;
/**
* 데이터포인트 view 전체 최소 높이.
*/
minHeight?: number;
/**
* 이미지 표시 위치.
*
* @default top
*/
position?: PointViewPosition;
}
declare const TiledWebSeriesType = "tiledweb";
/**
* @ignore
*
* 지도 해상도에 맞는 조각 그림들로 맵 배경을 채우는 시리즈.
* {@page op.SeriesOptions#type}은 'tiledweb'이다.
*
* @config chart.series[type=tiledweb]
*/
interface TiledWebSeriesOptions extends SeriesOptions {
type?: typeof TiledWebSeriesType;
}
/**
* track 시리즈 outline 설정 옵션.
*/
interface TrackSeriesOutlineOptions extends ChartItemOptions {
}
declare const TrackSeriesType = "track";
/**
* 출발 지점에서 도착 지점까지 복수 지점으로 이어지는 경로를 표시하는 시리즈.
* {@page op.SeriesOptions#type}은 'track'이다.
*
* @config chart.series[type=track]
*/
interface TrackSeriesOptions extends SeriesOptions {
type?: typeof TrackSeriesType;
/**
* 각 지점을 표시하는 모양.
* 명시적으로 지정하지 않으면 기본 제공되는 shape 목록 중 하나로 자동 설정된다.
*/
shape?: Shape;
/**
* 지점 표시 {@page shape 도형}의 반지름.
*
* @default 3 픽셀
*/
radius?: number;
/**
* track 시리즈 outline 설정 옵션.
*/
outline?: TrackSeriesOutlineOptions | boolean;
}
declare const BandSeriesType = "band";
/**
* Band Series
* {@page op.SeriesOptions#type}은 'band'이다.
*
* @config chart.series[type=band]
*/
interface BandSeriesOptions extends SeriesOptions {
type?: typeof BandSeriesType;
}
declare const TableSeriesType = "table";
/**
* Table Series
* {@page op.SeriesOptions#type}은 'table'이다.
*
* @config chart.series[type=table]
*/
interface TableSeriesOptions extends SeriesOptions {
type?: typeof TableSeriesType;
}
declare const SankeySeriesType = "sankey";
/**
* Sankey Series
* {@page op.SeriesOptions#type}은 'sankey'이다.
*
* @config chart.series[type=sankey]
*/
interface SankeySeriesOptions extends SeriesOptions {
type?: typeof SankeySeriesType;
}
/**
* Circle 게이지 내부 원 설정 모델.
*/
interface CircleGaugeFaceOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
}
/**
* Circle 게이지 내부 바탕 rim 설정 모델.
*/
interface CircleGaugeRimOptions extends ChartItemOptions {
}
/**
* Circle 게이지 내부 값을 표시하는 rim 설정 모델.
*/
interface CircleGaugeValueRimOptions extends CircleGaugeRimOptions {
/**
* 테두리 굵기.
* 픽셀 단위의 크기나, {@page CircularGaugeOptions.radius}와 {@page CircularGaugeOptions.innerRadius}로 결정된 원호 굵기에 대한 상대적 크기로 지정할 수 있다.
* 예) 지정하지 않거나 '100%'로 지정하면 게이지 원호 굵기와 동일하게 표시된다.
*
*/
thickness?: PercentSize;
/**
* true면 원호 대신 선으로 표시한다.
* 대시 표현이 가능해진다.
*
* @default false
*/
stroked?: boolean;
}
interface CircleGaugeHandOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
/**
* 게이지 중심쪽의 바늘 반지름.\
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default 3
*/
radius?: PercentSize;
/**
* 바늘 길이.\
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default '100%'
*/
length?: PercentSize;
/**
* 바늘 중심과 게이지 중심 사이의 간격.\
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default 0
*/
offset?: PercentSize;
}
interface CircleGaugePinOptions extends ChartItemOptions {
/**
* @default false
*/
visible?: boolean;
/**
* 핀 반지름.
* 픽셀 단위 크기나, 게이지 원호 반지름에 대한 상대 크기로 지정할 수 있다.
*
* @default 5
*/
radius?: PercentSize;
}
interface CircleGaugeLabelOptions extends ChartTextOptions {
/**
* 게이지 중심 등, label이 표시될 기준 위치에서 x 방향으로 이동한 픽셀 크기.
* 기준 위치는 게이지 종류에 따라 달라진다.
*
* @default 0
*/
offsetX?: PercentSize;
/**
* 게이지 중심 등, label이 표시될 기준 위치에서 y 방향으로 이동한 픽셀 크기.
* 기준 위치는 게이지 종류에 따라 달라진다.
*
* @default 0
*/
offsetY?: PercentSize;
}
declare const CircleGaugeType = "gauge";
/**
* 원행 게이지 설정 모델.
* @config chart.series[type=gauge]
*/
interface CircleGaugeOptions extends ValueGaugeOptions {
type?: typeof CircleGaugeType;
/**
* 게이지 내부 원 설정 모델.
*/
face?: CircleGaugeFaceOptions | boolean;
/**
* 게이지 배경 원호 테두리 설정 모델.
*/
rim?: CircleGaugeRimOptions;
/**
* 게이지의 값 원호 테두리 설정 모델.
*/
valueRim?: CircleGaugeValueRimOptions | boolean;
/**
* 게이지 바늘 설정 모델.
*/
hand?: CircleGaugeHandOptions;
/**
* 게이지 중앙에 표시되는 핀 설정 모델.
*/
pin?: CircleGaugePinOptions;
/**
* 게이지 중앙에 표시되는 텍스트 설정 모델
*/
gaugeLabel?: CircleGaugeLabelOptions;
/**
* 게이지 중심 수평 위치.
* 픽셀 단위의 크기나, 데이터포인터 게이지 영역 전체 너비에 대한 상대적 크기로 지정할 수 있다.
*
* @default '50%'
*/
centerX?: PercentSize;
/**
* 게이지 중심 수직 위치.
* 픽셀 단위의 크기나,
* {@page width}, {@page height}, {@page size} 등으로 지정한
* 데이터포인터 게이지 영역 전체 높이에 대한 상대적 크기로 지정할 수 있다.
*
* @default '50%'
*/
centerY?: PercentSize;
/**
* 게이지 원호의 반지름.
* 픽셀 단위의 크기나,
* {@page width}, {@page height}, {@page size} 등으로 지정한
* 데이터포인터 게이지 영역 전체 크기(너비와 높이 중 작은 값)에 대한 상대적 크기로 지정할 수 있다.
* '50%'로 지정하면 데이터포인터 게이지 영역의 width나 height중 작은 크기와 동일한 반지름으로 표시된다.
*
* @default '50%'
*/
radius?: PercentSize;
/**
* 내부 원호의 반지름.
* 픽셀 단위의 크기나,
* {@page width}, {@page height}, {@page size} 등으로 지정한
* {@page radius}에 대한 상대적 크기로 지정할 수 있다.
* '100%'이면 게이지 원호의 반지름과 동일하다.
*
*/
innerRadius?: PercentSize;
/**
* 값을 나타내는 원호의 반지름.
* 픽셀 단위의 크기나,
* {@page radius}와 {@page innerRadius}로 결정된 기본 rim의 중점에 대한 상대적 크기로 지정할 수 있다.
* 지정하지 않거나 '100%'이고 {@page valueRim}의 {@page valueRim.thickness 두께}가
* 기본 rim의 두께와 동일하면 게이지 원호의 반지름과 동일하게 표시된다.
*/
valueRadius?: PercentSize;
/**
* 게이지 원호 시작 각도.
* 지정하지 않거나 잘못된 값이면 0으로 계산된다.
* 0은 시계의 12시 위치다.
*
* @default 0
*/
startAngle?: number;
/**
* 게이지 원호 전체 각도.
* 0 ~ 360 사이의 값으로 지정해야 한다.
* 범위를 벗어난 값은 범위 안으로 조정된다.
* 지정하지 않거나 잘못된 값이면 360으로 계산된다.
* 예) 180 이면 반 원호가 된다.
*
* @default 360
*/
sweepAngle?: number;
/**
* true면 시계 방향으로 회전한다.
*
* @default true
*/
clockwise?: boolean;
}
/**
* Clock 게이지 테두리(rim) 설정 모델.
*/
interface ClockGaugeRimOptions extends ChartItemOptions {
/**
* rim 두께.
* 픽셀 단위 크기나, 게이지 반지름 대한 상대 크기로 지정할 수 있다.
*
* @default 3 pixel
*/
thickness?: PercentSize;
}
/**
* Clock 게이지 시/분침(hand) 설정 모델.
*/
interface ClockGaugeHandOptions extends ChartItemOptions {
/**
* 픽셀 단위 바늘 두께.
* 침 종류에 따라 기본값이 다르다.
*
* @default 2 pixel
*/
thickness?: number;
/**
* 바늘 길이.
* 픽셀 단위로 직접 지정하거나 시계 반지름에 대한 상대 크기로 지정할 수 있다.
* 침 종류에 따라 기본값이 다르다.
*
* @default '55%', '80%', '90%'
*/
length?: PercentSize;
/**
* 오후 시간일 때 표시 색상.
*/
pmStyle?: SVGStyleOrClass;
}
/**
* Clock 게이지 초침(hand) 설정 모델.
*/
interface ClockGaugeSecondHandOptions extends ClockGaugeHandOptions {
/**
* true면 초 이동 시 애니메이션 효과로 표시한다.
*
*/
animatable?: boolean;
/**
* {@page animatable}이 true일 때 애니메이션 기간.
* 밀리초 단위로 지정한다.
*
*/
duration?: number;
}
/**
* Clock 게이지 tick 설정 모델.
*/
interface ClockGaugeTickOptions extends ChartItemOptions {
/**
* tick 길이.
*
* @default 5 pixel
*/
length?: number;
}
/**
* Clock 게이지 tick 라벨 설정 모델.
*/
interface ClockGaugeTickLabelOptions extends ChartItemOptions {
/**
* 이 속성에 지정한 간격대로 시각 표시를 한다.
* ex) 3이면 12,3,6,9시만 표시된다.
*
* @default 1
*/
step?: number;
/**
* tick 라인과의 간격.
*
* @default 0
*/
offset?: number;
}
/**
* Clock 게이지 중심 pin 설정 모델.
*/
interface ClockGaugePinOptions extends ChartItemOptions {
/**
* 핀 반지름.
*
* @default 2 pixel
*/
radius?: number;
}
/**
* @enum
*/
declare const _ClockGaugeLabelPosition: {
readonly TOP: "top";
readonly BOTTOM: "bottom";
};
/** @dummy */
type ClockGaugeLabelPosition = typeof _ClockGaugeLabelPosition[keyof typeof _ClockGaugeLabelPosition];
/**
* Clock 게이지 내부에 표시되는 라벨 설정 모델.
*/
interface ClockGaugeLabelOptions extends ChartTextOptions {
/**
* 라벨 표시 위치.
*
*/
position?: ClockGaugeLabelPosition;
}
declare const ClockGaugeType = "clock";
/**
* 시계 게이지 설정 모델.
* @config chart.series[type=clock]
*/
interface ClockGaugeOptions extends GaugeOptions {
type?: typeof ClockGaugeType;
/**
* @default 90
*/
size?: number;
/**
* 게이지 중심 수평 위치.
* 픽셀 단위의 크기나,
* {@page width}, {@page height}, {@page size} 등으로 지정한
* 데이터포인터 게이지 영역 전체 너비에 대한 상대적 크기로 지정할 수 있다.
*
* @default '50%'
*/
centerX?: PercentSize;
/**
* 게이지 중심 수직 위치.
* 픽셀 단위의 크기나,
* {@page width}, {@page height}, {@page size} 등으로 지정한
* 데이터포인터 게이지 영역 전체 높이에 대한 상대적 크기로 지정할 수 있다.
*
* @default '50%'
*/
centerY?: PercentSize;
/**
* 게이지 원호의 반지름.
* 픽셀 단위의 크기나,
* {@page width}, {@page height}, {@page size} 등으로 지정한
* 데이터포인터 게이지 크기(너비와 높이 중 작은 값)에 대한 상대적 크기로 지정할 수 있다.
* '50%'로 지정하면 데이터포인터 게이지의 width나 height중 작은 크기와 동일한 반지름으로 표시된다.
*
* @default '50%'
*/
radius?: PercentSize;
/**
* 게이지 내부 원 설정 모델.
*/
face?: ChartItemOptions | boolean;
/**
* rim 설정 모델.
*
*/
rim?: ClockGaugeRimOptions | boolean;
/**
* 시침 설정 모델.
*
*/
hourHand?: ClockGaugeHandOptions | boolean;
/**
* 분침 설정 모델.
*
*/
minuteHand?: ClockGaugeHandOptions | boolean;
/**
* 초침 설정 모델.
*/
secondHand?: ClockGaugeSecondHandOptions | boolean;
/**
* main tick.
*/
tick?: ClockGaugeTickOptions | boolean;
/**
* tick label
*/
tickLabel?: ClockGaugeTickLabelOptions | boolean;
/**
* pin
*/
pin?: ClockGaugePinOptions | boolean;
/**
* label
*
*/
gaugeLabel?: ClockGaugeLabelOptions | boolean;
/**
* [경도(lon), 위도(lat)] 위치에 해당하는 timezone offset을 분단위로 리턴하는 콜백.
* 데이터포인트마다 timezone을 지정하는 대신 이 콜백으로 갈음할 수 있다.
* 위/경도에 대한 정밀한 offset을 찾아주는 외부 라이브러리을 사용할 수 있다.
*/
timezoneCallback?: (lon: number, lat: number) => number;
/**
* 밤 시간대 시작과 끝을 분단위로 지정한다.
* 끝 시각은 포함되지 않는다.
* 게이지 구성 요소들에 대해 밤시간대 스타일을 별도로 지정할 수 있다.
*/
nightHours?: [number, number];
/**
* 시계 동작 여부.
*
* @default true
*/
active?: boolean;
}
type SeriesOptionsType = MapSeriesOptions | FeatureSeriesOptions | PointSeriesOptions | PinSeriesOptions | FigureSeriesOptions | VectorSeriesOptions | RouteSeriesOptions | ImageSeriesOptions | BarSeriesOptions | PieSeriesOptions | WaffleSeriesOptions | LineSeriesOptions | BubbleSeriesOptions | HeatmapSeriesOptions | PanelSeriesOptions | TiledWebSeriesOptions | TrackSeriesOptions | SankeySeriesOptions | CircleGaugeOptions | ClockGaugeOptions;
/**
* 시리즈 load animation 타입.
* @enum
*/
declare const _SeriesLoadAnimation: {
readonly DEFAULT: "default";
readonly REVEAL: "reveal";
readonly GROW: "grow";
/**
* 화면 밖에서 제자리로 돌아온다.
*/
readonly SLIDEIN: "slidein";
readonly SPREAD: "spread";
readonly FADEIN: "fadein";
};
/** @dummy */
type SeriesLoadAnimation = typeof _SeriesLoadAnimation[keyof typeof _SeriesLoadAnimation];
/**
* @enum
*/
declare const _LegendItemsAligns: {
/**
* 수평일 때 왼쪽, 수직일 때는 위쪽으로 몰아서 배치한다.
*/
readonly START: "start";
/**
* center: 수평 혹은 수직의 중앙으로 몰아서 배치한다.
*/
readonly CENTER: "center";
/**
* end: 수평일 때 오른쪽, 수직일 때는 아래쪽으로 몰아서 배치한다.
*/
readonly END: "end";
};
/** @dummy */
type LegendItemsAlign = typeof _LegendItemsAligns[keyof typeof _LegendItemsAligns];
/**
* @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];
/**
* 맵차트 시리즈 구성을 직관적으로 이해할 수 있도록 도와주는 범례 설정 모델.
* visible 기본값이 undefined이고,
* 따로 지정하지 않으면 시리즈가 둘 이상 포함돼야 legend가 표시된다.
* {@link guide.legend 범례 개요} 페이지를 참조한다.
*
* @config chart.legend
*/
interface LegendOptions extends MapSimpleWidgetOptions {
/**
* 명시적으로 true로 설정되거나, 명시적 false가 아니면서 표시 항목 수가 1보다 클 때 표시된다.
*
* @default undefined
*/
visible?: boolean;
/**
* true면 나중에 배치되는 시리즈가 먼저 표시된다.
*/
reversed?: boolean;
/**
* item 배치 방향.
*
* @default 'auto'
*/
layout?: LegendLayout;
/**
* legend 정렬 기준.
*/
alignBase?: AlignBase;
/**
* legend 아이템들 사이의 간격.
*
* @default 8
*/
itemGap?: number;
/**
* marker 표시 여부.
*
* @default true
*/
markerVisible?: boolean;
/**
* marker 크기.
*
* @default 10 픽셀.
*/
markerSize?: number;
/**
* marker와 text사이의 간격.
*
* @default 4
*/
markerGap?: number;
/**
* 한 줄 당 표시할 최대 legend 항목 수.
*/
itemsPerLine?: number;
/**
* 라인 사이의 간격.
*
* @default 0
*/
lineGap?: number;
/**
* 수평 {@link layout 배치}일 때,
* 최대 너비를 픽셀 단위의 크기 혹은 body 너비에 대한 상대 길이를 '%'로 지정한다.
*/
maxWidth?: PercentSize;
/**
* 수직 {@link layout 배치}일 때,
* 최대 높이를 픽셀 단위의 크기 혹은 body 높이에 대한 상대 길이를 '%'로 지정한다.
*/
maxHeight?: PercentSize;
/**
* 한 라인의 item들이 배치되는 위치.
*
* @default 'center'
*/
itemsAlign?: LegendItemsAlign;
/**
* 범례 항목의 텍스트에도 marker와 동일한 색상을 적용한다.
*/
sameTextColor?: boolean;
/**
* 시리즈가 연결된 범례 아이템에 마우스가 올라가면 나머지 시리즈들을 반투명 처리해서 연결된 시리즈를 강조한다.
*
* @default true
*/
seriesHovering?: boolean;
}
/**
* @internal
*/
interface ILegendSource {
visible: boolean;
canHide(): boolean;
legendMarker(doc: Document, size: number): RmElement;
legendColor(): string;
legendLabel(): string;
setLegendMarkerStyle?(marker: RmElement): void;
}
/**
* @internal
*/
declare class LegendItem extends ChartItem {
legend: Legend;
source: ILegendSource;
static readonly MARKER_SIZE = 10;
constructor(legend: Legend, source: ILegendSource);
text(): string;
}
/**
* 맵차트 시리즈 구성을 직관적으로 이해할 수 있도록 도와주는 범례 설정 모델.
* visible 기본값이 undefined이고,
* 따로 지정하지 않으면 시리즈가 둘 이상 포함돼야 legend가 표시된다.
* {@link guide.legend 범례 개요} 페이지를 참조한다.
*
* @config chart.legend
*/
declare class Legend extends MapSimpleWidget {
static defaults: LegendOptions;
private _maxWidth;
private _maxHeight;
private _items;
private _maxWidthDim;
private _maxHeightDim;
items(): LegendItem[];
isEmpty(): boolean;
isInner(): boolean;
getLayout(): LegendLayout;
getMaxWidth(domain: number): number;
getMaxHeight(domain: number): number;
_type(): string;
isVertical(): boolean;
isVisible(): boolean;
protected _doInit(op: LegendOptions): void;
protected _doApply(options: LegendOptions): void;
protected _doPrepareRender(chart: IChart, op: LegendOptions): void;
}
declare class LegendCollection extends MapWidgetCollection