realmap

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; /** * 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<CSSStyleDeclaration> { } interface ISides { left: number; right: number; top: number; bottom: number; horz?: number; vert?: number; } /** * 스와이프 제스처 등의 진행 방향. * * * @see {@link RtListControl.onRowSwipe} */ declare enum RtDirection { /** * 위쪽으로 진행. */ 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]; interface ConfigObject { [key: string]: any; } type MapCoord = [number, number]; type MapPolygon = MapCoord[][]; 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<T> 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보다 큰 값이어야 한다. */ scale?: number; /** * inset area의 [왼쪽, 위쪽] 기준으로, 표시 위치 [경도, 위도]를 도(°) 단위로 지정한다. * [주의] {@page children}으로 적용될 때는 이 값 대신 {@page offset}을 반드시 지정해야 한다. */ coord?: MapCoord; /** * coord로 지정한 inset 위치에 더 추가되는 [경도, 위도] 값이거나 * coord가 지정되지 않은 경우 원래 위치에서 떨어진 위치 값. * 라이브러리에서 제공하는 미리 정의된 inset 위치를 조정하는 값으로 사용할 수 있다. * [주의] {@page children}으로 적용될 때는 {@page coord} 대신 반듯 이 값을 지정해야 한다. */ 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' // 울릉도 좌측에 직선으로 표시한다. */ 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' // 상, 우, 하, 좌 */ frame?: string; /** * border나 frame에 적용할 스타일셋. * 기본으로 'rm-map-series-inset' 클래스 선택자가 적용된다. */ style?: SVGStyleOrClass; } /** * 본토에서 멀리 떨어진 영역들을 당겨서 표시하는 설정. * * @css 'rm-map-series-inset' */ interface MapInset extends MapInsetDisplay { /** * inset시킬 area id. * 이 area가 존재하지 않고, * {@page parent}가 지정되지 않으면 * 자식들을 모두 함께 이동시킨다. */ area: string; /** * 이 area가 존재하지 않고, * {@page parent}가 지정되지 않으면 * 이 속성에 지정된 자식들을 모두 함께 이동시킨다. * [주의] {@page frame}이나 {@page border}의 기준이 되는 child area의 id를 첫번째 항목으로 설정해야 한다. * [주의] parent 하나에 한 번만 지정할 수 있다. */ children?: string[]; /** * {@page area}가 존재하지 않을 때, * 이 속서에 해당하는 area를 찾아서 {@page polygons}에 해당하는 영역들을 이동시킨다. * 콤마로 분리해서 둘 이상의 area를 지정할 수 있는데, 순서대로 해당되는 영역이 존재하면 사용한다. */ parent?: string; /** * {@page area}가 존재하지 않고, {@page parent}가 지정됐을 때, * 이 속서에 지정하는 영역덜을 동시에 이동시킨다. * [주의] {@page frame}이나 {@page border}의 기준이 되는 polygon의 index를 첫번째 항목으로 설정해야 한다. * [주의] {@page parent}가 복수개로 지정되면 이 속성도 [[], [],..] 형태로 복수 개 지정해야 한다. * [주의] parent 하나에 한 번만 지정할 수 있다. */ polygons?: number[] | number[][] | number; } type MapSourceMeta = { license?: { license?: string; author?: string; url?: string; etc?: "차트 최적화를 위해 좌표계 변환 및 Feature Polygon 수정"; }; dokdo?: { group?: string; parent?: number; index?: number; }; dummies?: 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[]; insets?: MapInset[]; /** * 맵 상하좌우 주변에 추가할 영역의 크기를 도(°) 단위로 지정한다. * css padding이나 margin 지정 방식과 동일하게 지정한댜. */ padding?: string; /** * 지도에 독도에 대한 meta 정보가 있는 경우, * 독도와 울릉도 사이의 거리를 지정한 비율만큼으로 줄이거나 늘여서 표시한다. * 0 ~ 1 사이의 값으로 원래 간격에 대한 상대 거리를 지정한다. * 0 이하의 값으로 지정하면 dokdo를 표시하지 않는다. * [lon, lat] 형식으로 지정할 수도 있다. */ dokdo?: number | MapCoord; /** * dummy 영역들을 표시할지 여부. */ showDummies?: boolean; /** * @ignore * 로컬 지도가 글로벌 투영좌표계 중앙으로 배치할지 여부. */ useOffset?: boolean | MapCoord; } declare abstract class MapSourceItem { id: string; props: MapProps; constructor(id: string, props: MapProps); } declare class AreaItem extends MapSourceItem { polygon: MapPolygon; polygons: MapPolygon[]; dummy: boolean; } declare abstract class MapSourceImpl extends RmObject { static createStockInset(area: string, display?: 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; items: MapSourceItem[]; insets: { [area: string]: MapInset; }; paddings: IPaddings; private _excludes; constructor(src: MapSource); included(area: string): boolean; private $_load; protected abstract _doLoad(source: object): MapSourceItem[]; } 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; } /** * 기본 설정. */ 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을 이용해서 축약형으로 표시한다. * */ numberSymbols?: string; /** * label이 숫자일 때 표시 형식. * */ 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; } /** * DataPointCallbackArgs */ interface DataPointCallbackArgs { series: object; count: number; vcount: number; yMin: number; yMax: number; xMin: number; xMax: number; zMin: number; zMax: number; index: number; vindex: number; x: any; y: any; z: any; xValue: any; yValue: any; zValue: any; labelIndex: number; source: any; } interface AnimationOptions { duration: number; end: () => void; } interface ZoomToAreaOptions { /** * 최소 확대 비율. */ minimumZoom?: number; /** * 최대 확대 비율. */ maximumZoom?: number; } /** * 어노테이션 배치 기준. * [주의]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'; /** * Annotation 모델. * * @config chart.annotation[base] */ interface AnnotationOptions extends ChartItemOptions { type?: AnnotationType; /** * true로 지정하면 시리즈들 위에 표시된다. * * @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; } type AnnotationOptionsType = ImageAnnotationOptions | ShapeAnnotationOptions | TextAnnotationOptions; /** @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<Sides>; static Temp: Sides; static create(top: number, bottom?: number, left?: number, right?: number): Sides; static createFrom(value: string): Sides; constructor(top?: number, bottom?: number, left?: number, right?: number); clone(): Sides; applyPadding(cs: CSSStyleDeclaration): Sides; applyMargin(cs: CSSStyleDeclaration): Sides; shrink(r: IRect): IRect; 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; } /** * 차트 내보내기 설정 모델 * @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; } /** * @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 AssetTypes = 'colors' | 'images' | 'lineargradient' | 'radialgradient'; interface AssetItemOptions { type?: AssetTypes; /** * 에셋 id. * 시리즈나 축에서 이 에셋 항목을 참조할 때 사용하는 키로서 * 차트 내에서 유일한 문자열로 반드시 지정해야 한다. * */ id: string; } interface GradientOptions extends AssetItemOptions { /** * 색을 배열로 지정하거나, * 끝 값을 'white'로 전제하고 시작 색 값 하나만 지정할 수 있다. * */ color: string[] | string; /** * 0에서 1사이의 불투명도. * 지정하지 않거나 타당한 값이 아니면 1(완전 불투명)로 적용한다. * 또는, 불투명도를 배열로 지정할 수도 있다. * */ opacity?: number[] | number; } /** * 시작점과 끝점 사이에 색상이 서서히 변경되는 효과를 표시한다. * 채우기 색이나 선 색으로 사용될 수 있다. * * @config chart.asset[type=lineargradient] */ interface LinearGradientOptions extends GradientOptions { /** * * @default 'down' */ dir?: 'down' | 'up' | 'right' | 'left'; } /** * 원 중심에서 바깥으로 색상이 변해가는 효과를 표시한다. * 채우기 색이나 선 색으로 사용될 수 있다. * * @config chart.asset[type=radialgradient] */ interface RadialGradientOptions extends GradientOptions { /** * gradient가 끝나는 원의 x 좌표. */ cx?: number | string; /** * gradient가 끝나는 원의 y 좌표. */ cy?: number | string; /** * gradient가 끝나는 원의 반지름. */ r?: number | string; } /** * 도형 패턴을 지정해서 채우기(fill) 색상 대신 사용할 수 있다. */ interface PatternOptions extends AssetItemOptions { /** * 문자열로 지정하면 path 'd', 숫자로 지정하면 stock pattern index. */ pattern: string | number; /** * 지정하지 않으면 {@link height}나 20 pixels. */ width?: number; /** * 지정하지 않으면 {@link widths}나 20 pixels. */ height?: number; style?: SVGStyles; backgroundStyle?: SVGStyles; transform?: string; } interface Image { name?: string; url: string; } interface ImageListOptions extends AssetItemOptions { rootUrl?: string; width?: number; height?: number; images: (Image | string)[]; } /** * normal: 순서대로 가져오고 끝에 도달하면 처음으로 돌아간다. * * shuffle: 첫 색상을 가져오기 전 항목들을 섞는다. * * random: 임의 위치의 색상을 가져온다. * */ type PaletteMode = 'normal' | 'shuffle' | 'random'; /** * 색상 목록을 미리 지정하고 {@link config.base.series#pointcolors} 등에 적용할 수 있다. * 목록에서 색상을 꺼내오는 방식은 {@link mode} 속성으로 지정한다. * * @config chart.asset[type=colors] */ interface ColorListOptions extends AssetItemOptions { /** * 색상 목록에서 색을 꺼내오는 방식. * * @default PaletteMode.NORMAL */ mode?: PaletteMode; /** * 색상 목록. * */ colors?: string[]; } type AssetOptionsType = LinearGradientOptions | RadialGradientOptions | PatternOptions | ColorListOptions | ImageListOptions; /** * @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]; /** * 차트 전체에 영향을 미치는 옵션들. * * @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; /** * 선택 변경 시 호출되는 콜백. */ 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; } type IOnHoverAreaParam = { area: any; oldArea: any; }; type IOnClickAreaParam = { area: any; }; type IOnZoomChanged = { 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?: number; /** * 지도 중심으로부터 위도상으로 벗어난 지도 단위 크기. 양수이면 아래쪽쪽으로 스크롤 된 상태 */ panY?: number; rotationX?: number; rotationY?: number; fit?: any; points?: ([string, number, number] | { id: string; coord?: MapCoord; lon?: number; lat?: number; })[]; onZoomChanged?: (args: IOnZoomChanged) => void; onHoverArea?: (args: IOnHoverAreaParam) => void; onClickArea?: (args: IOnClickAreaParam) => void; /** * body 영역 내에 표시되는 어노테이션 옵션. * 옵션 객체 또는 옵션 객체 배열로 여러 어노테이션을 설정할 수 있다. * [주의] 이전 버전의 설정을 로드하기 위해, 이 속성이 지정되지 않고 'annotations' 설정이 존재하면 load 후 이 속성으로 설정한다. */ annotations?: AnnotationOptionsType | AnnotationOptionsType[]; } interface BackgroundImageOptions extends ChartItemOptions { url?: string; } /** * 컬러, 버블 스케일 등의 스케일 기반 설정. */ interface ScaleOptions extends ChartItemOptions { /** * 시리즈에서 참조하는 스케일 이름. */ name?: string; /** * {@page minValue}나 {@page maxValue}를 지정하지 않는 경우 범위 기준값을 계산할 시리즈의 이름. * 이 속성을 지정하지 않으면 첫 번째 map 시리즈의 범위를 계산한다. */ series?: string; /** * scale 표시 위치. */ location?: ChartItemLocation; /** * 수평 배치. * 값을 지정하지 않으면, 기본값이 {@link location}이 'body'일 때는 'left', * 'left', 'right'일 때는 'center'이다. */ align?: Align; /** * 수직 배치. * 값을 지정하지 않으면, 기본값이 {@link location}이 'body'일 때는 'top', * 'top', 'bottom'일 때는 'middle'이다. */ verticalAlign?: VerticalAlign; /** * 범례와 body 혹은 차트 경계 사이의 수평 간격. * * @default 0 */ offsetX?: number; /** * 범례와 body 혹은 차트 경계 사이의 수직 간격. * * @default 0 */ offsetY?: number; } /** * @enum */ declare const _ColorScaleLayout: { /** * color scale이 차트 좌우에 배치되면 item들을 수직으로 배치하고, * color scale이 차트 상하에 배치되면 item들을 수평으로 배치한다. */ readonly AUTO: "auto"; /** * item들을 수평으로 배치한다. */ readonly HORIZONTAL: "horizontal"; /** * item들을 수직으로 배치한다. */ readonly VERTICAL: "vertical"; }; /** @dummy */ type ColorScaleLayout = typeof _ColorScaleLayout[keyof typeof _ColorScaleLayout]; /** * @enum */ declare const ColorScaleDisplays: { /** * scale bar로 표시한다. */ readonly SCALE: "scale"; /** * legend 항목들로 표시한다. */ readonly LEGEND: "legend"; /** * scale bar와 legend에 동시 표시한다. */ readonly BOTH: "both"; }; /** @dummy */ type ColorScaleDisplay = typeof ColorScaleDisplays[keyof typeof ColorScaleDisplays]; /** * 현재 값 위치를 표시하는 color scale 마커 옵션. */ interface ColorScaleMarkerOptions extends ChartItemOptions { size?: number; label?: ChartTextOptions; } /** * color scale 내부에서 step을 구분하는 라인 옵션 */ interface ColorScaleStepLineOptions extends ChartItemOptions { } /** * 색상 스텝을 구분하는 color scale 틱 라인 옵션. */ interface ColorScaleTickLineOptions extends ChartItemOptions { /** * @default 6 */ length?: number; } /** * 색상 스텝을 구분하는 color scale 틱 라벨 옵션. */ interface ColorScaleTickLabelOptions extends IconedTextOptions { /** * 라벨 표시 위치 및 내용. * - 'tick' - tick 라인 아래 값을 표시한다. * - 'between' - tick 사이의 중간에 해당 stop의 name을 표시한다. scale에 steps가 지정되지 않으면 무시된다. * * @default 'tick' */ position?: 'tick' | 'between'; /** * @default 4 */ offset?: number; minText?: string; maxText?: string; } /** * 색상 스텝을 구분하는 color scale 틱 라인 및 라벨 옵션. * marker 반대편에 표시된다. */ interface ColorScaleTickOptions extends ChartItemOptions { line?: ColorScaleTickLineOptions; label?: ColorScaleTickLabelOptions; } interface ColorScaleStep { /** * 첫 step인 경우 설정하지 않으면 {@page steps.minValue}로 지정된다. * 숫자나 '%'로 끝나는 백분율로 지정할 수 있다. */ from?: number | string; /** * 마지막 step인 경우 설정하지 않으면 {@page steps.maxValue}로 지정된다. * 숫자나 '%'로 끝나는 백분율로 지정할 수 있다. */ to?: number | string; /** * 구간 label. */ label: string; /** * 구간 색상. * {@page fromColor}를 지정하면 이 step에 포함된 영역의 값에 따라 두 색상 사이의 중간 색상으로 표시된다. * '%'로 끝나는 백분율을 지정하면 {@page minColor}와 {@page maxColor} 사이의 중간 색상으로 설정할 수 있다. */ color: string; /** * 이 속성 값이 지정되면 {@page toColor}나 {@page color} 값 사이의 색상으로 데이터포인트의 색상이 결정된다. * '%'로 끝나는 백분율을 지정하면 {@page minColor}와 {@page maxColor} 사이의 중간 색상으로 설정할 수 있다. */ fromColor?: string; /**