chartjs-chart-geo
Version:
Chart.js module for charting maps
365 lines (354 loc) • 14.7 kB
TypeScript
/**
* chartjs-chart-geo
* https://github.com/sgratzl/chartjs-chart-geo
*
* Copyright (c) 2019-2023 Samuel Gratzl <sam@sgratzl.com>
*/
import { CoreScaleOptions, Scale, CartesianScaleOptions, ChartArea, LinearScaleOptions, LinearScale, LogarithmicScaleOptions, LogarithmicScale, PointOptions, ChartType, ScriptableAndArrayOptions, BarOptions, CommonHoverOptions, ScriptableContext, Element, VisualElement, Point, ChartTypeRegistry, DatasetController, ChartDataset, AnimationOptions, UpdateMode, ControllerDatasetOptions, Chart, ChartItem, ChartConfiguration, PointElement, PointProps, PointHoverOptions } from 'chart.js';
import { GeoProjection, GeoPath, GeoPermissibleObjects, ExtendedFeature, ExtendedFeatureCollection, GeoGeometryObjects, ExtendedGeometryCollection } from 'd3-geo';
export { geoAlbers, geoAlbersUsa, geoAzimuthalEqualArea, geoAzimuthalEquidistant, geoConicConformal, geoConicEqualArea, geoConicEquidistant, geoEqualEarth, geoEquirectangular, geoGnomonic, geoMercator, geoNaturalEarth1, geoOrthographic, geoStereographic, geoTransverseMercator } from 'd3-geo';
import * as topojsonClient from 'topojson-client';
export { topojsonClient as topojson };
interface IProjectionScaleOptions extends CoreScaleOptions {
projection: GeoProjection | 'azimuthalEqualArea' | 'azimuthalEquidistant' | 'gnomonic' | 'orthographic' | 'stereographic' | 'equalEarth' | 'albers' | 'albersUsa' | 'conicConformal' | 'conicEqualArea' | 'conicEquidistant' | 'equirectangular' | 'mercator' | 'transverseMercator' | 'naturalEarth1';
projectionScale: number;
projectionOffset: [number, number];
padding: number | {
top: number;
left: number;
right: number;
bottom: number;
};
}
declare class ProjectionScale extends Scale<IProjectionScaleOptions> {
readonly geoPath: GeoPath<any, GeoPermissibleObjects>;
projection: GeoProjection;
private outlineBounds;
private oldChartBounds;
constructor(cfg: any);
init(options: IProjectionScaleOptions): void;
computeBounds(outline: ExtendedFeature): void;
computeBounds(outline: ExtendedFeatureCollection): void;
computeBounds(outline: GeoGeometryObjects): void;
computeBounds(outline: ExtendedGeometryCollection): void;
updateBounds(): boolean;
static readonly id = "projection";
static readonly defaults: Partial<IProjectionScaleOptions>;
static readonly descriptors: {
_scriptable: (name: keyof IProjectionScaleOptions) => boolean;
_indexable: (name: keyof IProjectionScaleOptions) => boolean;
};
}
declare module 'chart.js' {
interface ProjectionScaleTypeRegistry {
projection: {
options: IProjectionScaleOptions;
};
}
interface ScaleTypeRegistry extends ProjectionScaleTypeRegistry {
}
}
interface ILegendScaleOptions extends CartesianScaleOptions {
display: boolean;
property: string;
legend: {
position: 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'top-right' | 'bottom-right' | 'bottom-left' | {
x: number;
y: number;
};
align: 'left' | 'right' | 'top' | 'bottom';
length: number;
width: number;
indicatorWidth: number;
margin: number | ChartArea;
};
}
declare class LegendScale<O extends ILegendScaleOptions & LinearScaleOptions> extends LinearScale<O> {
legendSize: {
w: number;
h: number;
};
init(options: O): void;
parse(raw: any, index: number): number;
isHorizontal(): boolean;
protected _getNormalizedValue(v: number): number | null;
update(maxWidth: number, maxHeight: number, margins: ChartArea): void;
_computeLabelArea(): void;
draw(chartArea: ChartArea): void;
protected _drawIndicator(): void;
}
declare class LogarithmicLegendScale<O extends ILegendScaleOptions & LogarithmicScaleOptions> extends LogarithmicScale<O> {
legendSize: {
w: number;
h: number;
};
init(options: O): void;
parse(raw: any, index: number): number;
isHorizontal(): boolean;
protected _getNormalizedValue(v: number): number | null;
update(maxWidth: number, maxHeight: number, margins: ChartArea): void;
_computeLabelArea(): void;
draw(chartArea: ChartArea): void;
protected _drawIndicator(): void;
}
interface IColorScaleOptions extends ILegendScaleOptions {
interpolate: ((normalizedValue: number) => string) | 'blues' | 'brBG' | 'buGn' | 'buPu' | 'cividis' | 'cool' | 'cubehelixDefault' | 'gnBu' | 'greens' | 'greys' | 'inferno' | 'magma' | 'orRd' | 'oranges' | 'pRGn' | 'piYG' | 'plasma' | 'puBu' | 'puBuGn' | 'puOr' | 'puRd' | 'purples' | 'rainbow' | 'rdBu' | 'rdGy' | 'rdPu' | 'rdYlBu' | 'rdYlGn' | 'reds' | 'sinebow' | 'spectral' | 'turbo' | 'viridis' | 'warm' | 'ylGn' | 'ylGnBu' | 'ylOrBr' | 'ylOrRd';
missing: string;
quantize: number;
}
declare class ColorScale extends LegendScale<IColorScaleOptions & LinearScaleOptions> {
get interpolate(): (v: number) => string;
getColorForValue(value: number): string;
getColor(normalized: number): string;
_drawIndicator(): void;
static readonly id = "color";
static readonly defaults: any;
static readonly descriptors: {
_scriptable: (name: string) => boolean;
_indexable: boolean;
};
}
declare class ColorLogarithmicScale extends LogarithmicLegendScale<IColorScaleOptions & LogarithmicScaleOptions> {
private interpolate;
init(options: IColorScaleOptions & LinearScaleOptions): void;
getColorForValue(value: number): string;
getColor(normalized: number): string;
protected _drawIndicator(): void;
static readonly id = "colorLogarithmic";
static readonly defaults: any;
static readonly descriptors: {
_scriptable: (name: string) => boolean;
_indexable: boolean;
};
}
declare module 'chart.js' {
interface ColorScaleTypeRegistry {
color: {
options: IColorScaleOptions & LinearScaleOptions;
};
colorLogarithmic: {
options: IColorScaleOptions & LogarithmicScaleOptions;
};
}
interface ScaleTypeRegistry extends ColorScaleTypeRegistry {
}
}
interface ISizeScaleOptions extends ILegendScaleOptions {
range: [number, number];
mode: 'radius' | 'area';
missing: number;
}
declare class SizeScale extends LegendScale<ISizeScaleOptions & LinearScaleOptions> {
_model: PointOptions | null;
getSizeForValue(value: number): number;
getSizeImpl(normalized: number): number;
_drawIndicator(): void;
static readonly id = "size";
static readonly defaults: any;
static readonly descriptors: {
_scriptable: boolean;
_indexable: (name: string) => boolean;
};
}
declare class SizeLogarithmicScale extends LogarithmicLegendScale<ISizeScaleOptions & LogarithmicScaleOptions> {
_model: PointOptions | null;
getSizeForValue(value: number): number;
getSizeImpl(normalized: number): number;
_drawIndicator(): void;
static readonly id = "sizeLogarithmic";
static readonly defaults: any;
}
declare module 'chart.js' {
interface SizeScaleTypeRegistry {
size: {
options: ISizeScaleOptions & LinearScaleOptions;
};
sizeLogarithmic: {
options: ISizeScaleOptions & LogarithmicScaleOptions;
};
}
interface ScaleTypeRegistry extends SizeScaleTypeRegistry {
}
}
interface IGeoFeatureOptions extends Omit<BarOptions, 'borderWidth'>, Record<string, unknown> {
borderWidth: number;
outlineBackgroundColor: string | null;
outlineBorderColor: string;
outlineBorderWidth: number;
graticuleBorderColor: string;
graticuleBorderWidth: number;
}
type Feature = any;
interface IGeoFeatureProps {
x: number;
y: number;
}
declare class GeoFeature extends Element<IGeoFeatureProps, IGeoFeatureOptions> implements VisualElement {
cache?: {
center?: Point;
bounds?: {
x: number;
y: number;
width: number;
height: number;
x2: number;
y2: number;
};
canvasKey?: string;
canvas?: HTMLCanvasElement;
} | undefined;
projectionScale: ProjectionScale;
feature: Feature;
center?: {
longitude: number;
latitude: number;
};
pixelRatio?: number;
inRange(mouseX: number, mouseY: number): boolean;
inXRange(mouseX: number): boolean;
inYRange(mouseY: number): boolean;
getCenterPoint(): {
x: number;
y: number;
};
getBounds(): {
x: number;
y: number;
x2: number;
y2: number;
width: number;
height: number;
};
_drawInCache(doc: Document): void;
_optionsToKey(): string;
_drawImpl(ctx: CanvasRenderingContext2D): void;
draw(ctx: CanvasRenderingContext2D): void;
static id: string;
static defaults: {
outlineBackgroundColor: null;
outlineBorderWidth: number;
graticuleBorderColor: string;
graticuleBorderWidth: number;
};
static defaultRoutes: {
outlineBorderColor: string;
};
}
declare module 'chart.js' {
interface ElementOptionsByType<TType extends ChartType> {
geoFeature: ScriptableAndArrayOptions<IGeoFeatureOptions & CommonHoverOptions, ScriptableContext<TType>>;
}
}
declare class GeoController<TYPE extends keyof ChartTypeRegistry, TElement extends Element & VisualElement> extends DatasetController<TYPE, TElement, GeoFeature> {
getGeoDataset(): ChartDataset<'choropleth' | 'bubbleMap'> & IGeoControllerDatasetOptions;
getGeoOptions(): IGeoChartOptions;
getProjectionScale(): ProjectionScale;
linkScales(): void;
showOutline(): IGeoChartOptions['showOutline'];
clipMap(): IGeoChartOptions['clipMap'];
getGraticule(): IGeoChartOptions['showGraticule'];
update(mode: UpdateMode): void;
resolveOutline(): any;
showGraticule(): void;
draw(): void;
}
interface IGeoChartOptions {
outline: any[];
showOutline: boolean;
showGraticule: boolean | {
stepMajor: [number, number];
stepMinor: [number, number];
};
clipMap: boolean | 'outline' | 'graticule' | 'outline+graticule' | 'items';
}
interface IGeoControllerDatasetOptions extends IGeoChartOptions, ScriptableAndArrayOptions<IGeoFeatureOptions, ScriptableContext<'choropleth' | 'bubbleMap'>>, AnimationOptions<'choropleth' | 'bubbleMap'> {
xAxisID?: string;
yAxisID?: string;
rAxisID?: string;
iAxisID?: string;
vAxisID?: string;
}
interface IGeoDataPoint {
feature: ExtendedFeature;
center?: {
longitude: number;
latitude: number;
};
}
declare class ChoroplethController extends GeoController<'choropleth', GeoFeature> {
initialize(): void;
linkScales(): void;
_getOtherScale(scale: Scale): Scale;
parse(start: number, count: number): void;
updateElements(elems: GeoFeature[], start: number, count: number, mode: UpdateMode): void;
indexToColor(index: number): string;
static readonly id = "choropleth";
static readonly defaults: any;
static readonly overrides: any;
}
interface IChoroplethControllerDatasetOptions extends ControllerDatasetOptions, IGeoChartOptions, ScriptableAndArrayOptions<IGeoFeatureOptions, ScriptableContext<'choropleth'>>, ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'choropleth'>>, AnimationOptions<'choropleth'> {
}
interface IChoroplethDataPoint extends IGeoDataPoint {
value: number;
}
declare module 'chart.js' {
interface ChartTypeRegistry {
choropleth: {
chartOptions: IGeoChartOptions;
datasetOptions: IChoroplethControllerDatasetOptions;
defaultDataPoint: IChoroplethDataPoint;
scales: keyof (ProjectionScaleTypeRegistry & ColorScaleTypeRegistry);
metaExtensions: Record<string, never>;
parsedDataType: {
r: number;
};
};
}
}
declare class ChoroplethChart<DATA extends unknown[] = IGeoDataPoint[], LABEL = string> extends Chart<'choropleth', DATA, LABEL> {
static id: string;
constructor(item: ChartItem, config: Omit<ChartConfiguration<'choropleth', DATA, LABEL>, 'type'>);
}
type MyPointElement = PointElement & Element<PointProps, PointOptions & PointHoverOptions & Record<string, unknown>>;
declare class BubbleMapController extends GeoController<'bubbleMap', MyPointElement> {
initialize(): void;
linkScales(): void;
_getOtherScale(scale: Scale): Scale;
parse(start: number, count: number): void;
updateElements(elems: MyPointElement[], start: number, count: number, mode: UpdateMode): void;
indexToRadius(index: number): number;
static readonly id = "bubbleMap";
static readonly defaults: any;
static readonly overrides: any;
}
interface IBubbleMapDataPoint {
longitude: number;
latitude: number;
x?: number;
y?: number;
value: number;
}
interface IBubbleMapControllerDatasetOptions extends ControllerDatasetOptions, IGeoChartOptions, ScriptableAndArrayOptions<IGeoFeatureOptions, ScriptableContext<'bubbleMap'>>, ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'bubbleMap'>>, AnimationOptions<'bubbleMap'> {
}
declare module 'chart.js' {
interface ChartTypeRegistry {
bubbleMap: {
chartOptions: IGeoChartOptions;
datasetOptions: IBubbleMapControllerDatasetOptions;
defaultDataPoint: IBubbleMapDataPoint;
scales: keyof (ProjectionScaleTypeRegistry & SizeScaleTypeRegistry);
metaExtensions: Record<string, never>;
parsedDataType: {
r: number;
x: number;
y: number;
};
};
}
}
declare class BubbleMapChart<DATA extends unknown[] = IBubbleMapDataPoint[], LABEL = string> extends Chart<'bubbleMap', DATA, LABEL> {
static id: string;
constructor(item: ChartItem, config: Omit<ChartConfiguration<'bubbleMap', DATA, LABEL>, 'type'>);
}
export { BubbleMapChart, BubbleMapController, ChoroplethChart, ChoroplethController, ColorLogarithmicScale, ColorScale, type Feature, GeoController, GeoFeature, type IBubbleMapControllerDatasetOptions, type IBubbleMapDataPoint, type IChoroplethControllerDatasetOptions, type IChoroplethDataPoint, type IColorScaleOptions, type IGeoChartOptions, type IGeoControllerDatasetOptions, type IGeoDataPoint, type IGeoFeatureOptions, type IGeoFeatureProps, type IProjectionScaleOptions, type ISizeScaleOptions, ProjectionScale, SizeLogarithmicScale, SizeScale };
//# sourceMappingURL=index.d.ts.map