Diff
checker
Texto
Texto
Imagens
Documentos
Excel
Pastas
Legal
Enterprise
Aplicativo para desktop
Preços
Fazer login
Baixar o Diffchecker Desktop
Comparar texto
Encontre a diferença entre dois arquivos de texto
Ferramentas
Histórico
Editor live
Recolher inalteradas
Sem quebra de linha
Layout
Dividido
Unificado
Nível de detalhe
Inteligente
Palavra
Caractere
Realce de sintaxe
Escolher sintaxe
Ignorar
Transformar texto
Ir à primeira mudança
Editar entrada
Diffchecker Desktop
A maneira mais segura de usar o Diffchecker. Obtenha o aplicativo Diffchecker Desktop: seus diffs nunca saem do seu computador!
Obter Desktop
Untitled diff
Criado
há 7 anos
O diff nunca expira
Limpar
Exportar
Compartilhar
Explicar
6 remoções
Linhas
Total
Removido
Caracteres
Total
Removido
Para continuar usando este recurso, atualize para
Diff
checker
Pro
Ver preços
939 linhas
Copiar tudo
17 adições
Linhas
Total
Adicionado
Caracteres
Total
Adicionado
Para continuar usando este recurso, atualize para
Diff
checker
Pro
Ver preços
934 linhas
Copiar tudo
// Typescript declarations for Apex class and module.
// Typescript declarations for Apex class and module.
// Note: When you have a class and a module with the same name; the module is merged
// Note: When you have a class and a module with the same name; the module is merged
// with the class. This is necessary since apexcharts exports the main ApexCharts class only.
// with the class. This is necessary since apexcharts exports the main ApexCharts class only.
//
//
// This is a sparse typed declarations of chart interfaces. See Apex Chart documentation
// This is a sparse typed declarations of chart interfaces. See Apex Chart documentation
// for comprehensive API: https://apexcharts.com/docs/options
// for comprehensive API: https://apexcharts.com/docs/options
//
//
// There is on-going work to provide a comprehensive typed definition for this component.
// There is on-going work to provide a comprehensive typed definition for this component.
// See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/28733
// See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/28733
Copiar
Copiado
Copiar
Copiado
declare
class ApexCharts {
declare
module 'apexcharts' {
constructor(el: any, options: any);
export default
class ApexCharts {
render(): Promise<void>;
constructor(el: any, options: any);
updateOptions(options: any, redrawPaths?: boolean, animate?: boolean): Promise<void>;
render(): Promise<void>;
updateSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void;
updateOptions(options: any, redrawPaths?: boolean, animate?: boolean): Promise<void>;
appendSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void;
updateSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void;
toggleSeries(seriesName: string): void;
appendSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void;
destroy(): void;
toggleSeries(seriesName: string): void;
addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
destroy(): void;
addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
addText(options: any, pushToMemory?: boolean, context?: any): void;
addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
dataURI(): Promise<void>;
addText(options: any, pushToMemory?: boolean, context?: any): void;
static exec(chartID: string, fn: () => void, options: any): any;
dataURI(): Promise<void>;
static initOnLoad(): void;
static exec(chartID: string, fn: () => void, options: any): any;
}
static initOnLoad(): void;
}
Copiar
Copiado
Copiar
Copiado
declare module ApexCharts {
export interface ApexOptions {
export interface ApexOptions {
annotations?: ApexAnnotations;
annotations?: ApexAnnotations;
chart?: ApexChart;
chart?: ApexChart;
colors?: any[];
colors?: any[];
dataLabels?: ApexDataLabels;
dataLabels?: ApexDataLabels;
fill?: ApexFill;
fill?: ApexFill;
grid?: ApexGrid;
grid?: ApexGrid;
labels?: string[];
labels?: string[];
legend?: ApexLegend;
legend?: ApexLegend;
markers?: ApexMarkers;
markers?: ApexMarkers;
noData?: ApexNoData;
noData?: ApexNoData;
plotOptions?: ApexPlotOptions;
plotOptions?: ApexPlotOptions;
responsive?: ApexResponsive[];
responsive?: ApexResponsive[];
series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
states?: ApexStates;
states?: ApexStates;
stroke?: ApexStroke;
stroke?: ApexStroke;
subtitle?: ApexTitleSubtitle;
subtitle?: ApexTitleSubtitle;
theme?: ApexTheme;
theme?: ApexTheme;
title?: ApexTitleSubtitle;
title?: ApexTitleSubtitle;
tooltip?: ApexTooltip;
tooltip?: ApexTooltip;
xaxis?: ApexXAxis;
xaxis?: ApexXAxis;
yaxis?: ApexYAxis | ApexYAxis[];
yaxis?: ApexYAxis | ApexYAxis[];
}
}
}
}
/**
/**
* Main Chart options
* Main Chart options
* See https://apexcharts.com/docs/options/chart/
* See https://apexcharts.com/docs/options/chart/
*/
*/
type ApexChart = {
type ApexChart = {
width?: string | number;
width?: string | number;
height?: string | number;
height?: string | number;
type?: "line" | "area" | "bar" | "histogram" | "pie" | "donut" |
type?: "line" | "area" | "bar" | "histogram" | "pie" | "donut" |
"radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "radar" | "rangeBar";
"radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "radar" | "rangeBar";
foreColor?: string;
foreColor?: string;
fontFamily?: string;
fontFamily?: string;
background?: string;
background?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
dropShadow?: {
dropShadow?: {
enabled?: boolean;
enabled?: boolean;
top?: number;
top?: number;
left?: number;
left?: number;
blur?: number;
blur?: number;
opacity?: number;
opacity?: number;
};
};
events?: {
events?: {
animationEnd?(chart: any, options: any): void;
animationEnd?(chart: any, options: any): void;
beforeMount?(chart: any, options: any): void;
beforeMount?(chart: any, options: any): void;
mounted?(chart: any, options: any): void;
mounted?(chart: any, options: any): void;
updated?(chart: any, options: any): void;
updated?(chart: any, options: any): void;
click?(e: any, chart: any, options: any): void;
click?(e: any, chart: any, options: any): void;
legendClick?(chart: any, seriesIndex: number, options: any): void;
legendClick?(chart: any, seriesIndex: number, options: any): void;
markerClick?(e: any, chart: any, options: any): void;
markerClick?(e: any, chart: any, options: any): void;
selection?(chart: any, options: any): void;
selection?(chart: any, options: any): void;
dataPointSelection?(e: any, chart: any, options: any): void;
dataPointSelection?(e: any, chart: any, options: any): void;
dataPointMouseEnter?(e: any, chart: any, options: any): void;
dataPointMouseEnter?(e: any, chart: any, options: any): void;
dataPointMouseLeave?(e: any, chart: any, options: any): void;
dataPointMouseLeave?(e: any, chart: any, options: any): void;
beforeZoom?(chart: any, options: any): void;
beforeZoom?(chart: any, options: any): void;
zoomed?(chart: any, options: any): void;
zoomed?(chart: any, options: any): void;
scrolled?(chart: any, options: any): void;
scrolled?(chart: any, options: any): void;
};
};
brush?: {
brush?: {
enabled?: boolean;
enabled?: boolean;
autoScaleYaxis?: boolean,
autoScaleYaxis?: boolean,
target?: string;
target?: string;
};
};
id?: string;
id?: string;
locales?: ApexLocale[];
locales?: ApexLocale[];
defaultLocale?: string;
defaultLocale?: string;
parentHeightOffset?: number;
parentHeightOffset?: number;
sparkline?: {
sparkline?: {
enabled?: boolean;
enabled?: boolean;
};
};
stacked?: boolean;
stacked?: boolean;
stackType?: "normal" | "100%";
stackType?: "normal" | "100%";
toolbar?: {
toolbar?: {
show?: boolean;
show?: boolean;
tools?: {
tools?: {
download?: boolean | string;
download?: boolean | string;
selection?: boolean | string;
selection?: boolean | string;
zoom?: boolean | string;
zoom?: boolean | string;
zoomin?: boolean | string;
zoomin?: boolean | string;
zoomout?: boolean | string;
zoomout?: boolean | string;
pan?: boolean | string;
pan?: boolean | string;
reset?: boolean | string;
reset?: boolean | string;
};
};
autoSelected?: "zoom" | "selection" | "pan";
autoSelected?: "zoom" | "selection" | "pan";
};
};
zoom?: {
zoom?: {
enabled?: boolean;
enabled?: boolean;
type?: "x" | "y" | "xy";
type?: "x" | "y" | "xy";
zoomedArea?: {
zoomedArea?: {
fill?: {
fill?: {
color?: string;
color?: string;
opacity?: number
opacity?: number
};
};
stroke?: {
stroke?: {
color?: string;
color?: string;
opacity?: number;
opacity?: number;
width?: number
width?: number
}
}
}
}
};
};
selection?: {
selection?: {
enabled?: boolean;
enabled?: boolean;
type?: string;
type?: string;
fill?: {
fill?: {
color?: string;
color?: string;
opacity?: number;
opacity?: number;
};
};
stroke?: {
stroke?: {
width?: number;
width?: number;
color?: string;
color?: string;
opacity?: number;
opacity?: number;
dashArray?: number
dashArray?: number
};
};
xaxis?: {
xaxis?: {
min?: number;
min?: number;
max?: number;
max?: number;
};
};
yaxis?: {
yaxis?: {
min?: number;
min?: number;
max?: number
max?: number
};
};
};
};
animations?: {
animations?: {
enabled?: boolean;
enabled?: boolean;
easing?: "linear" | "easein" | "easeout" | "easeinout";
easing?: "linear" | "easein" | "easeout" | "easeinout";
speed?: number;
speed?: number;
animateGradually?: {
animateGradually?: {
enabled?: boolean;
enabled?: boolean;
delay?: number;
delay?: number;
}
}
dynamicAnimation?: {
dynamicAnimation?: {
enabled?: boolean;
enabled?: boolean;
speed?: number;
speed?: number;
}
}
};
};
};
};
type ApexStates = {
type ApexStates = {
normal?: {
normal?: {
filter?: {
filter?: {
type?: string,
type?: string,
value?: number
value?: number
}
}
},
},
hover?: {
hover?: {
filter?: {
filter?: {
type?: string,
type?: string,
value?: number
value?: number
}
}
},
},
active?: {
active?: {
allowMultipleDataPointsSelection?: boolean,
allowMultipleDataPointsSelection?: boolean,
filter?: {
filter?: {
type?: string,
type?: string,
value?: number
value?: number
}
}
}
}
};
};
/**
/**
* Chart Title options
* Chart Title options
* See https://apexcharts.com/docs/options/title/
* See https://apexcharts.com/docs/options/title/
*/
*/
type ApexTitleSubtitle = {
type ApexTitleSubtitle = {
text?: string;
text?: string;
align?: "left" | "center" | "right";
align?: "left" | "center" | "right";
margin?: number;
margin?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
floating?: number;
floating?: number;
style?: {
style?: {
fontSize?: string;
fontSize?: string;
color?: string;
color?: string;
};
};
};
};
/**
/**
* Chart Series options.
* Chart Series options.
* Use ApexNonAxisChartSeries for Pie and Donut charts.
* Use ApexNonAxisChartSeries for Pie and Donut charts.
* See https://apexcharts.com/docs/options/series/
* See https://apexcharts.com/docs/options/series/
*
*
* According to the documentation at
* According to the documentation at
* https://apexcharts.com/docs/series/
* https://apexcharts.com/docs/series/
* Section 1: data can be a list of single numbers
* Section 1: data can be a list of single numbers
* Sections 2.1 and 3.1: data can be a list of tuples of two numbers
* Sections 2.1 and 3.1: data can be a list of tuples of two numbers
* Sections 2.2 and 3.2: data can be a list of objects where x is a string
* Sections 2.2 and 3.2: data can be a list of objects where x is a string
* and y is a number
* and y is a number
*/
*/
export type ApexAxisChartSeries = {
export type ApexAxisChartSeries = {
name: string;
name: string;
data: number[] | { x: any; y: any }[] | [number, number][] | [number, number[]][];
data: number[] | { x: any; y: any }[] | [number, number][] | [number, number[]][];
}[];
}[];
export type ApexNonAxisChartSeries = number[];
export type ApexNonAxisChartSeries = number[];
/**
/**
* Options for the line drawn on line and area charts.
* Options for the line drawn on line and area charts.
* See https://apexcharts.com/docs/options/stroke/
* See https://apexcharts.com/docs/options/stroke/
*/
*/
type ApexStroke = {
type ApexStroke = {
show?: boolean;
show?: boolean;
curve?: "smooth" | "straight" | "stepline";
curve?: "smooth" | "straight" | "stepline";
lineCap?: "butt" | "square" | "round";
lineCap?: "butt" | "square" | "round";
colors?: string;
colors?: string;
width?: number;
width?: number;
dashArray?: number | number[]
dashArray?: number | number[]
};
};
type ApexAnnotations = {
type ApexAnnotations = {
position?: string;
position?: string;
yaxis?: YAxisAnnotations[];
yaxis?: YAxisAnnotations[];
xaxis?: XAxisAnnotations[];
xaxis?: XAxisAnnotations[];
points?: PointAnnotations[];
points?: PointAnnotations[];
};
};
type AnnotationLabel = {
type AnnotationLabel = {
borderColor?: string;
borderColor?: string;
borderWidth?: number;
borderWidth?: number;
text?: string;
text?: string;
textAnchor?: string;
textAnchor?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: AnnotationStyle;
style?: AnnotationStyle;
position?: string;
position?: string;
orientation?: string;
orientation?: string;
};
};
type AnnotationStyle = {
type AnnotationStyle = {
background?: string;
background?: string;
color?: string;
color?: string;
fontSize?: string;
fontSize?: string;
cssClass?: string;
cssClass?: string;
padding?: {
padding?: {
left?: number;
left?: number;
right?: number;
right?: number;
top?: number;
top?: number;
bottom?: number;
bottom?: number;
};
};
};
};
type XAxisAnnotations = {
type XAxisAnnotations = {
x?: number;
x?: number;
x2?: number;
x2?: number;
strokeDashArray?: number;
strokeDashArray?: number;
fillColor?: string,
fillColor?: string,
borderColor?: string;
borderColor?: string;
opacity?: number;
opacity?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
label?: {
label?: {
borderColor?: string;
borderColor?: string;
borderWidth?: number;
borderWidth?: number;
text?: string;
text?: string;
textAnchor?: string;
textAnchor?: string;
position?: string;
position?: string;
orientation?: string;
orientation?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: AnnotationStyle;
style?: AnnotationStyle;
};
};
};
};
type YAxisAnnotations = {
type YAxisAnnotations = {
y?: number;
y?: number;
y2?: number,
y2?: number,
strokeDashArray?: number;
strokeDashArray?: number;
fillColor?: string,
fillColor?: string,
borderColor?: string;
borderColor?: string;
opacity?: number;
opacity?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
yAxisIndex?: number;
yAxisIndex?: number;
label?: AnnotationLabel;
label?: AnnotationLabel;
};
};
type PointAnnotations = {
type PointAnnotations = {
x?: number;
x?: number;
y?: null;
y?: null;
yAxisIndex?: number;
yAxisIndex?: number;
seriesIndex?: number;
seriesIndex?: number;
marker?: {
marker?: {
size?: number;
size?: number;
fillColor?: string;
fillColor?: string;
strokeColor?: string;
strokeColor?: string;
strokeWidth?: number;
strokeWidth?: number;
shape?: string;
shape?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
radius?: number;
radius?: number;
cssClass?: string;
cssClass?: string;
};
};
label?: AnnotationLabel;
label?: AnnotationLabel;
};
};
/**
/**
* Options for localization.
* Options for localization.
* See https://apexcharts.com/docs/options/chart/locales
* See https://apexcharts.com/docs/options/chart/locales
*/
*/
type ApexLocale = {
type ApexLocale = {
name?: string;
name?: string;
options?: {
options?: {
months?: string[];
months?: string[];
shortMonths?: string[];
shortMonths?: string[];
days?: string[];
days?: string[];
shortDays?: string[];
shortDays?: string[];
toolbar?: {
toolbar?: {
download?: string;
download?: string;
selection?: string;
selection?: string;
selectionZoom?: string;
selectionZoom?: string;
zoomIn?: string;
zoomIn?: string;
zoomOut?: string;
zoomOut?: string;
pan?: string;
pan?: string;
reset?: string;
reset?: string;
}
}
}
}
}
}
/**
/**
* PlotOptions for specifying chart-type-specific configuration.
* PlotOptions for specifying chart-type-specific configuration.
* See https://apexcharts.com/docs/options/plotoptions/bar/
* See https://apexcharts.com/docs/options/plotoptions/bar/
*/
*/
type ApexPlotOptions = {
type ApexPlotOptions = {
bar?: {
bar?: {
horizontal?: boolean;
horizontal?: boolean;
columnWidth?: string;
columnWidth?: string;
barHeight?: string;
barHeight?: string;
distributed?: boolean;
distributed?: boolean;
colors?: {
colors?: {
ranges?: {
ranges?: {
from?: number;
from?: number;
to?: number;
to?: number;
color?: string;
color?: string;
}[];
}[];
backgroundBarColors?: string[];
backgroundBarColors?: string[];
backgroundBarOpacity?: number;
backgroundBarOpacity?: number;
};
};
dataLabels?: {
dataLabels?: {
maxItems?: number;
maxItems?: number;
hideOverflowingLabels?: boolean;
hideOverflowingLabels?: boolean;
position?: string;
position?: string;
}
}
};
};
candlestick?: {
candlestick?: {
colors?: {
colors?: {
upward?: string;
upward?: string;
downward?: string;
downward?: string;
};
};
wick?: {
wick?: {
useFillColor?: boolean
useFillColor?: boolean
}
}
};
};
heatmap?: {
heatmap?: {
radius?: number;
radius?: number;
enableShades?: boolean;
enableShades?: boolean;
shadeIntensity?: number;
shadeIntensity?: number;
distributed?: boolean;
distributed?: boolean;
colorScale?: {
colorScale?: {
ranges?: {
ranges?: {
from?: number;
from?: number;
to?: number;
to?: number;
color?: string;
color?: string;
name?: string;
name?: string;
}[];
}[];
inverse?: boolean;
inverse?: boolean;
min?: number;
min?: number;
max?: number;
max?: number;
}
}
};
};
pie?: {
pie?: {
size?: number;
size?: number;
customScale?: number;
customScale?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
expandOnClick?: boolean;
expandOnClick?: boolean;
dataLabels?: {
dataLabels?: {
offset?: number;
offset?: number;
minAngleToShowLabel?: number;
minAngleToShowLabel?: number;
};
};
donut?: {
donut?: {
size?: string;
size?: string;
background?: string;
background?: string;
labels: {
labels: {
show?: boolean;
show?: boolean;
name?: {
name?: {
show?: boolean;
show?: boolean;
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
color?: string;
color?: string;
offsetY?: number
offsetY?: number
};
};
value?: {
value?: {
show?: boolean;
show?: boolean;
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
color?: string;
color?: string;
offsetY?: number;
offsetY?: number;
formatter?(val: string): string;
formatter?(val: string): string;
};
};
total?: {
total?: {
show?: boolean;
show?: boolean;
label?: string;
label?: string;
color?: string;
color?: string;
formatter?(w: any): string;
formatter?(w: any): string;
}
}
}
}
};
};
};
};
radar?: {
radar?: {
size?: number;
size?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
polygons?: {
polygons?: {
strokeColor?: string | string[];
strokeColor?: string | string[];
connectorColors?: string | string[];
connectorColors?: string | string[];
fill?: {
fill?: {
colors?: string[]
colors?: string[]
}
}
}
}
};
};
radialBar?: {
radialBar?: {
size?: number;
size?: number;
inverseOrder?: boolean;
inverseOrder?: boolean;
startAngle?: number;
startAngle?: number;
endAngle?: number;
endAngle?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
hollow?: {
hollow?: {
margin?: number;
margin?: number;
size?: string;
size?: string;
background?: string;
background?: string;
image?: string;
image?: string;
width?: number;
width?: number;
height?: number;
height?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
clipped?: boolean;
clipped?: boolean;
position?: "front" | "back";
position?: "front" | "back";
};
};
track?: {
track?: {
show?: boolean;
show?: boolean;
startAngle?: number;
startAngle?: number;
endAngle?: number;
endAngle?: number;
background?: string;
background?: string;
strokeWidth?: string;
strokeWidth?: string;
opacity?: number;
opacity?: number;
margin?: number;
margin?: number;
dropShadow?: {
dropShadow?: {
enabled?: boolean;
enabled?: boolean;
top?: number;
top?: number;
left?: number;
left?: number;
blur?: number;
blur?: number;
opacity?: number
opacity?: number
}
}
};
};
dataLabels?: {
dataLabels?: {
show?: boolean;
show?: boolean;
name?: {
name?: {
show?: boolean;
show?: boolean;
fontSize?: string;
fontSize?: string;
color?: string;
color?: string;
offsetY?: number;
offsetY?: number;
};
};
value?: {
value?: {
show?: boolean;
show?: boolean;
fontSize?: string;
fontSize?: string;
color?: string;
color?: string;
offsetY?: number;
offsetY?: number;
formatter?(val: number): string;
formatter?(val: number): string;
};
};
total?: {
total?: {
show?: boolean;
show?: boolean;
label?: string;
label?: string;
color?: string;
color?: string;
formatter?(opts: any): string;
formatter?(opts: any): string;
};
};
}
}
}
}
};
};
type ApexFill = {
type ApexFill = {
colors?: any[];
colors?: any[];
opacity?: number;
opacity?: number;
type?: string;
type?: string;
gradient?: {
gradient?: {
shade?: string;
shade?: string;
type?: string;
type?: string;
shadeIntensity?: number;
shadeIntensity?: number;
gradientToColors?: string[];
gradientToColors?: string[];
inverseColors?: boolean;
inverseColors?: boolean;
opacityFrom?: number;
opacityFrom?: number;
opacityTo?: number;
opacityTo?: number;
stops?: number[]
stops?: number[]
};
};
image?: {
image?: {
src?: string[];
src?: string[];
width?: number;
width?: number;
height?: number
height?: number
};
};
pattern?: {
pattern?: {
style?: string;
style?: string;
width?: number;
width?: number;
height?: number;
height?: number;
strokeWidth?: number;
strokeWidth?: number;
};
};
};
};
/**
/**
* Chart Legend configuration options.
* Chart Legend configuration options.
* See https://apexcharts.com/docs/options/legend/
* See https://apexcharts.com/docs/options/legend/
*/
*/
type ApexLegend = {
type ApexLegend = {
show?: boolean;
show?: boolean;
showForSingleSeries?: boolean;
showForSingleSeries?: boolean;
showForNullSeries?: boolean;
showForNullSeries?: boolean;
showForZeroSeries?: boolean;
showForZeroSeries?: boolean;
floating?: boolean;
floating?: boolean;
position?: "top" | "right" | "bottom" | "left";
position?: "top" | "right" | "bottom" | "left";
horizontalAlign?: "left" | "center" | "right";
horizontalAlign?: "left" | "center" | "right";
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
width?: number;
width?: number;
height?: number;
height?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
formatter?(val: string, opts: any): string;
formatter?(val: string, opts: any): string;
textAnchor?: string;
textAnchor?: string;
labels?: {
labels?: {
color?: string
color?: string
useSeriesColors?: boolean;
useSeriesColors?: boolean;
};
};
markers?: {
markers?: {
width?: number;
width?: number;
height?: number;
height?: number;
strokeColor?: string
strokeColor?: string
strokeWidth?: number;
strokeWidth?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
radius?: number;
radius?: number;
shape?: "circle" | "square";
shape?: "circle" | "square";
customHTML?(): string;
customHTML?(): string;
onClick?(): void;
onClick?(): void;
};
};
itemMargin?: {
itemMargin?: {
horizontal?: number;
horizontal?: number;
vertical?: number;
vertical?: number;
};
};
containerMargin?: {
containerMargin?: {
left?: number;
left?: number;
top?: number;
top?: number;
};
};
onItemClick?: {
onItemClick?: {
toggleDataSeries?: boolean;
toggleDataSeries?: boolean;
};
};
onItemHover?: {
onItemHover?: {
highlightDataSeries?: boolean;
highlightDataSeries?: boolean;
}
}
};
};
type ApexDiscretePoint = {
type ApexDiscretePoint = {
seriesIndex?: number;
seriesIndex?: number;
dataPointIndex?: number;
dataPointIndex?: number;
fillColor?: string;
fillColor?: string;
strokeColor?: string;
strokeColor?: string;
size?: number;
size?: number;
}
}
type ApexMarkers = {
type ApexMarkers = {
size?: number;
size?: number;
colors?: string[];
colors?: string[];
strokeColor?: string;
strokeColor?: string;
strokeWidth?: number;
strokeWidth?: number;
strokeOpacity?: number;
strokeOpacity?: number;
fillOpacity?: number;
fillOpacity?: number;
discrete?: ApexDiscretePoint[];
discrete?: ApexDiscretePoint[];
shape?: 'circle' | 'square';
shape?: 'circle' | 'square';
radius?: number;
radius?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
hover?: {
hover?: {
size?: number;
size?: number;
sizeOffset?: number;
sizeOffset?: number;
};
};
}
}
type ApexNoData = {
type ApexNoData = {
text?: string,
text?: string,
align?: 'left' | 'right' | 'center',
align?: 'left' | 'right' | 'center',
verticalAlign?: 'top' | 'middle' | 'bottom',
verticalAlign?: 'top' | 'middle' | 'bottom',
offsetX?: number,
offsetX?: number,
offsetY?: number,
offsetY?: number,
style?: {
style?: {
color?: string,
color?: string,
fontSize?: string,
fontSize?: string,
fontFamily?: string
fontFamily?: string
}
}
}
}
/**
/**
* Chart Datalabels options
* Chart Datalabels options
* See https://apexcharts.com/docs/options/datalabels/
* See https://apexcharts.com/docs/options/datalabels/
*/
*/
type ApexDataLabels = {
type ApexDataLabels = {
enabled?: boolean;
enabled?: boolean;
enabledOnSeries?: number[];
enabledOnSeries?: number[];
formatter?(val: number, opts: any): string;
formatter?(val: number, opts: any): string;
textAnchor?: "start" | "middle" | "end";
textAnchor?: "start" | "middle" | "end";
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: {
style?: {
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
colors?: string[];
colors?: string[];
};
};
dropShadow?: {
dropShadow?: {
enabled: boolean;
enabled: boolean;
top?: number;
top?: number;
left?: number;
left?: number;
blur?: number;
blur?: number;
opacity?: number;
opacity?: number;
}
}
};
};
type ApexResponsive = {
type ApexResponsive = {
breakpoint?: number;
breakpoint?: number;
options?: any;
options?: any;
};
};
/**
/**
* Chart Tooltip options
* Chart Tooltip options
* See https://apexcharts.com/docs/options/tooltip/
* See https://apexcharts.com/docs/options/tooltip/
*/
*/
type ApexTooltip = {
type ApexTooltip = {
enabled?: boolean;
enabled?: boolean;
shared?: boolean;
shared?: boolean;
followCursor?: boolean;
followCursor?: boolean;
intersect?: boolean;
intersect?: boolean;
inverseOrder?: boolean;
inverseOrder?: boolean;
custom?(options: any): void;
custom?(options: any): void;
fillSeriesColor?: boolean;
fillSeriesColor?: boolean;
theme?: string;
theme?: string;
style?: {
style?: {
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
};
};
onDatasetHover?: {
onDatasetHover?: {
highlightDAtaSeries?: boolean;
highlightDAtaSeries?: boolean;
};
};
x?: {
x?: {
show?: boolean;
show?: boolean;
format?: string;
format?: string;
formatter?(val: number): string;
formatter?(val: number): string;
}
}
y?: {
y?: {
formatter?(val: number): string;
formatter?(val: number): string;
title?: {
title?: {
formatter?(seriesName: string): string;
formatter?(seriesName: string): string;
}
}
};
};
z?: {
z?: {
formatter?(val: number): string;
formatter?(val: number): string;
title?: string
title?: string
};
};
marker?: {
marker?: {
show?: boolean
show?: boolean
};
};
items?: {
items?: {
display?: string
display?: string
};
};
fixed?: {
fixed?: {
enabled?: boolean;
enabled?: boolean;
position?: string; // topRight; topLeft; bottomRight; bottomLeft
position?: string; // topRight; topLeft; bottomRight; bottomLeft
offsetX?: number;
offsetX?: number;
offsetY?: number
offsetY?: number
}
}
};
};
/**
/**
* X Axis options
* X Axis options
* See https://apexcharts.com/docs/options/xaxis/
* See https://apexcharts.com/docs/options/xaxis/
*/
*/
type ApexXAxis = {
type ApexXAxis = {
type?: "categories" | "datetime" | "numeric";
type?: "categories" | "datetime" | "numeric";
categories?: string[] | number[];
categories?: string[] | number[];
labels?: {
labels?: {
show?: boolean;
show?: boolean;
rotate?: number;
rotate?: number;
rotateAlways?: boolean;
rotateAlways?: boolean;
hideOverlappingLabels?: boolean;
hideOverlappingLabels?: boolean;
showDuplicates?: boolean;
showDuplicates?: boolean;
trim?: boolean;
trim?: boolean;
minHeight?: number;
minHeight?: number;
maxHeight?: number;
maxHeight?: number;
style?: {
style?: {
colors?: string[];
colors?: string[];
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
cssClass?: string;
cssClass?: string;
};
};
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
format?: string;
format?: string;
formatter?(value: string, timestamp: number): string;
formatter?(value: string, timestamp: number): string;
datetimeFormatter?: {
datetimeFormatter?: {
year?: string;
year?: string;
month?: string;
month?: string;
day?: string;
day?: string;
hour?: string;
hour?: string;
minute?: string;
minute?: string;
};
};
};
};
axisBorder?: {
axisBorder?: {
show?: boolean;
show?: boolean;
color?: string;
color?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
strokeWidth?: number;
strokeWidth?: number;
};
};
axisTicks?: {
axisTicks?: {
show?: boolean;
show?: boolean;
borderType?: string;
borderType?: string;
color?: string;
color?: string;
height?: number;
height?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
};
};
tickAmount?: number;
tickAmount?: number;
min?: number;
min?: number;
max?: number;
max?: number;
range?: number;
range?: number;
floating?: boolean;
floating?: boolean;
position?: string;
position?: string;
title?: {
title?: {
text?: string;
text?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: {
style?: {
color?: string;
color?: string;
fontSize?: string;
fontSize?: string;
cssClass?: string;
cssClass?: string;
};
};
};
};
crosshairs?: {
crosshairs?: {
show?: boolean;
show?: boolean;
width?: number | string;
width?: number | string;
position?: string;
position?: string;
opacity?: number;
opacity?: number;
stroke?: {
stroke?: {
color?: string;
color?: string;
width?: number;
width?: number;
dashArray?: number;
dashArray?: number;
};
};
fill?: {
fill?: {
type?: string;
type?: string;
color?: string;
color?: string;
gradient?: {
gradient?: {
colorFrom?: string;
colorFrom?: string;
colorTo?: string;
colorTo?: string;
stops?: number[];
stops?: number[];
opacityFrom?: number;
opacityFrom?: number;
opacityTo?: number;
opacityTo?: number;
};
};
};
};
dropShadow?: {
dropShadow?: {
enabled?: boolean;
enabled?: boolean;
top?: number;
top?: number;
left?: number;
left?: number;
blur?: number;
blur?: number;
opacity?: number;
opacity?: number;
};
};
};
};
tooltip?: {
tooltip?: {
enabled?: boolean;
enabled?: boolean;
offsetY?: number;
offsetY?: number;
};
};
};
};
/**
/**
* Y Axis options
* Y Axis options
* See https://apexcharts.com/docs/options/yaxis/
* See https://apexcharts.com/docs/options/yaxis/
*/
*/
type ApexYAxis = {
type ApexYAxis = {
show?: boolean;
show?: boolean;
showAlways?: boolean;
showAlways?: boolean;
seriesName?: string;
seriesName?: string;
opposite?: boolean;
opposite?: boolean;
logarithmic?: boolean;
logarithmic?: boolean;
tickAmount?: number;
tickAmount?: number;
forceNiceScale?: boolean,
forceNiceScale?: boolean,
min?: number;
min?: number;
max?: number;
max?: number;
floating?: boolean;
floating?: boolean;
decimalsInFloat?: number;
decimalsInFloat?: number;
labels?: {
labels?: {
show?: boolean;
show?: boolean;
minWidth?: number;
minWidth?: number;
maxWidth?: number;
maxWidth?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
rotate?: number;
rotate?: number;
align?: 'left' | 'center' | 'right';
align?: 'left' | 'center' | 'right';
padding?: number,
padding?: number,
style?: {
style?: {
color?: string;
color?: string;
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
cssClass?: string;
cssClass?: string;
};
};
formatter?(val: number): string;
formatter?(val: number): string;
};
};
axisBorder?: {
axisBorder?: {
show?: boolean;
show?: boolean;
color?: string;
color?: string;
offsetX?: number;
offsetX?: number;
offsetY?: number
offsetY?: number
};
};
axisTicks?: {
axisTicks?: {
show?: boolean;
show?: boolean;
color?: string;
color?: string;
width?: number;
width?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number
offsetY?: number
};
};
title?: {
title?: {
text?: string;
text?: string;
rotate?: number;
rotate?: number;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
style?: {
style?: {
color?: string;
color?: string;
fontSize?: string;
fontSize?: string;
fontFamily?: string;
fontFamily?: string;
cssClass?: string;
cssClass?: string;
};
};
};
};
crosshairs?: {
crosshairs?: {
show?: boolean;
show?: boolean;
position?: string;
position?: string;
stroke?: {
stroke?: {
color?: string;
color?: string;
width?: number;
width?: number;
dashArray?: number
dashArray?: number
};
};
};
};
tooltip?: {
tooltip?: {
enabled?: boolean;
enabled?: boolean;
offsetX?: number;
offsetX?: number;
};
};
};
};
/**
/**
* Plot X and Y grid options
* Plot X and Y grid options
* See https://apexcharts.com/docs/options/grid/
* See https://apexcharts.com/docs/options/grid/
*/
*/
type ApexGrid = {
type ApexGrid = {
show?: boolean;
show?: boolean;
borderColor?: string;
borderColor?: string;
strokeDashArray?: number;
strokeDashArray?: number;
position?: "front" | "back";
position?: "front" | "back";
xaxis?: {
xaxis?: {
lines?: {
lines?: {
show?: boolean;
show?: boolean;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
}
}
};
};
yaxis?: {
yaxis?: {
lines?: {
lines?: {
show?: boolean;
show?: boolean;
offsetX?: number;
offsetX?: number;
offsetY?: number;
offsetY?: number;
}
}
};
};
row?: {
row?: {
colors?: string[];
colors?: string[];
opacity?: number
opacity?: number
};
};
column?: {
column?: {
colors?: string[];
colors?: string[];
opacity?: number;
opacity?: number;
};
};
padding?: {
padding?: {
top?: number;
top?: number;
right?: number;
right?: number;
bottom?: number;
bottom?: number;
left?: number;
left?: number;
};
};
};
};
type ApexTheme = {
type ApexTheme = {
mode?: "light" | "dark";
mode?: "light" | "dark";
palette?: string;
palette?: string;
monochrome?: {
monochrome?: {
enabled?: boolean,
enabled?: boolean,
color?: string;
color?: string;
shadeTo?: "light" | "dark";
shadeTo?: "light" | "dark";
shadeIntensity?: number
shadeIntensity?: number
}
}
}
}
Copiar
Copiado
Copiar
Copiado
declare module "apexcharts" {
export = ApexCharts;
}
Diferenças salvas
Texto original
Abrir arquivo
// Typescript declarations for Apex class and module. // Note: When you have a class and a module with the same name; the module is merged // with the class. This is necessary since apexcharts exports the main ApexCharts class only. // // This is a sparse typed declarations of chart interfaces. See Apex Chart documentation // for comprehensive API: https://apexcharts.com/docs/options // // There is on-going work to provide a comprehensive typed definition for this component. // See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/28733 declare class ApexCharts { constructor(el: any, options: any); render(): Promise<void>; updateOptions(options: any, redrawPaths?: boolean, animate?: boolean): Promise<void>; updateSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void; appendSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void; toggleSeries(seriesName: string): void; destroy(): void; addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void; addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void; addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void; addText(options: any, pushToMemory?: boolean, context?: any): void; dataURI(): Promise<void>; static exec(chartID: string, fn: () => void, options: any): any; static initOnLoad(): void; } declare module ApexCharts { export interface ApexOptions { annotations?: ApexAnnotations; chart?: ApexChart; colors?: any[]; dataLabels?: ApexDataLabels; fill?: ApexFill; grid?: ApexGrid; labels?: string[]; legend?: ApexLegend; markers?: ApexMarkers; noData?: ApexNoData; plotOptions?: ApexPlotOptions; responsive?: ApexResponsive[]; series?: ApexAxisChartSeries | ApexNonAxisChartSeries; states?: ApexStates; stroke?: ApexStroke; subtitle?: ApexTitleSubtitle; theme?: ApexTheme; title?: ApexTitleSubtitle; tooltip?: ApexTooltip; xaxis?: ApexXAxis; yaxis?: ApexYAxis | ApexYAxis[]; } } /** * Main Chart options * See https://apexcharts.com/docs/options/chart/ */ type ApexChart = { width?: string | number; height?: string | number; type?: "line" | "area" | "bar" | "histogram" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "radar" | "rangeBar"; foreColor?: string; fontFamily?: string; background?: string; offsetX?: number; offsetY?: number; dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; }; events?: { animationEnd?(chart: any, options: any): void; beforeMount?(chart: any, options: any): void; mounted?(chart: any, options: any): void; updated?(chart: any, options: any): void; click?(e: any, chart: any, options: any): void; legendClick?(chart: any, seriesIndex: number, options: any): void; markerClick?(e: any, chart: any, options: any): void; selection?(chart: any, options: any): void; dataPointSelection?(e: any, chart: any, options: any): void; dataPointMouseEnter?(e: any, chart: any, options: any): void; dataPointMouseLeave?(e: any, chart: any, options: any): void; beforeZoom?(chart: any, options: any): void; zoomed?(chart: any, options: any): void; scrolled?(chart: any, options: any): void; }; brush?: { enabled?: boolean; autoScaleYaxis?: boolean, target?: string; }; id?: string; locales?: ApexLocale[]; defaultLocale?: string; parentHeightOffset?: number; sparkline?: { enabled?: boolean; }; stacked?: boolean; stackType?: "normal" | "100%"; toolbar?: { show?: boolean; tools?: { download?: boolean | string; selection?: boolean | string; zoom?: boolean | string; zoomin?: boolean | string; zoomout?: boolean | string; pan?: boolean | string; reset?: boolean | string; }; autoSelected?: "zoom" | "selection" | "pan"; }; zoom?: { enabled?: boolean; type?: "x" | "y" | "xy"; zoomedArea?: { fill?: { color?: string; opacity?: number }; stroke?: { color?: string; opacity?: number; width?: number } } }; selection?: { enabled?: boolean; type?: string; fill?: { color?: string; opacity?: number; }; stroke?: { width?: number; color?: string; opacity?: number; dashArray?: number }; xaxis?: { min?: number; max?: number; }; yaxis?: { min?: number; max?: number }; }; animations?: { enabled?: boolean; easing?: "linear" | "easein" | "easeout" | "easeinout"; speed?: number; animateGradually?: { enabled?: boolean; delay?: number; } dynamicAnimation?: { enabled?: boolean; speed?: number; } }; }; type ApexStates = { normal?: { filter?: { type?: string, value?: number } }, hover?: { filter?: { type?: string, value?: number } }, active?: { allowMultipleDataPointsSelection?: boolean, filter?: { type?: string, value?: number } } }; /** * Chart Title options * See https://apexcharts.com/docs/options/title/ */ type ApexTitleSubtitle = { text?: string; align?: "left" | "center" | "right"; margin?: number; offsetX?: number; offsetY?: number; floating?: number; style?: { fontSize?: string; color?: string; }; }; /** * Chart Series options. * Use ApexNonAxisChartSeries for Pie and Donut charts. * See https://apexcharts.com/docs/options/series/ * * According to the documentation at * https://apexcharts.com/docs/series/ * Section 1: data can be a list of single numbers * Sections 2.1 and 3.1: data can be a list of tuples of two numbers * Sections 2.2 and 3.2: data can be a list of objects where x is a string * and y is a number */ export type ApexAxisChartSeries = { name: string; data: number[] | { x: any; y: any }[] | [number, number][] | [number, number[]][]; }[]; export type ApexNonAxisChartSeries = number[]; /** * Options for the line drawn on line and area charts. * See https://apexcharts.com/docs/options/stroke/ */ type ApexStroke = { show?: boolean; curve?: "smooth" | "straight" | "stepline"; lineCap?: "butt" | "square" | "round"; colors?: string; width?: number; dashArray?: number | number[] }; type ApexAnnotations = { position?: string; yaxis?: YAxisAnnotations[]; xaxis?: XAxisAnnotations[]; points?: PointAnnotations[]; }; type AnnotationLabel = { borderColor?: string; borderWidth?: number; text?: string; textAnchor?: string; offsetX?: number; offsetY?: number; style?: AnnotationStyle; position?: string; orientation?: string; }; type AnnotationStyle = { background?: string; color?: string; fontSize?: string; cssClass?: string; padding?: { left?: number; right?: number; top?: number; bottom?: number; }; }; type XAxisAnnotations = { x?: number; x2?: number; strokeDashArray?: number; fillColor?: string, borderColor?: string; opacity?: number; offsetX?: number; offsetY?: number; label?: { borderColor?: string; borderWidth?: number; text?: string; textAnchor?: string; position?: string; orientation?: string; offsetX?: number; offsetY?: number; style?: AnnotationStyle; }; }; type YAxisAnnotations = { y?: number; y2?: number, strokeDashArray?: number; fillColor?: string, borderColor?: string; opacity?: number; offsetX?: number; offsetY?: number; yAxisIndex?: number; label?: AnnotationLabel; }; type PointAnnotations = { x?: number; y?: null; yAxisIndex?: number; seriesIndex?: number; marker?: { size?: number; fillColor?: string; strokeColor?: string; strokeWidth?: number; shape?: string; offsetX?: number; offsetY?: number; radius?: number; cssClass?: string; }; label?: AnnotationLabel; }; /** * Options for localization. * See https://apexcharts.com/docs/options/chart/locales */ type ApexLocale = { name?: string; options?: { months?: string[]; shortMonths?: string[]; days?: string[]; shortDays?: string[]; toolbar?: { download?: string; selection?: string; selectionZoom?: string; zoomIn?: string; zoomOut?: string; pan?: string; reset?: string; } } } /** * PlotOptions for specifying chart-type-specific configuration. * See https://apexcharts.com/docs/options/plotoptions/bar/ */ type ApexPlotOptions = { bar?: { horizontal?: boolean; columnWidth?: string; barHeight?: string; distributed?: boolean; colors?: { ranges?: { from?: number; to?: number; color?: string; }[]; backgroundBarColors?: string[]; backgroundBarOpacity?: number; }; dataLabels?: { maxItems?: number; hideOverflowingLabels?: boolean; position?: string; } }; candlestick?: { colors?: { upward?: string; downward?: string; }; wick?: { useFillColor?: boolean } }; heatmap?: { radius?: number; enableShades?: boolean; shadeIntensity?: number; distributed?: boolean; colorScale?: { ranges?: { from?: number; to?: number; color?: string; name?: string; }[]; inverse?: boolean; min?: number; max?: number; } }; pie?: { size?: number; customScale?: number; offsetX?: number; offsetY?: number; expandOnClick?: boolean; dataLabels?: { offset?: number; minAngleToShowLabel?: number; }; donut?: { size?: string; background?: string; labels: { show?: boolean; name?: { show?: boolean; fontSize?: string; fontFamily?: string; color?: string; offsetY?: number }; value?: { show?: boolean; fontSize?: string; fontFamily?: string; color?: string; offsetY?: number; formatter?(val: string): string; }; total?: { show?: boolean; label?: string; color?: string; formatter?(w: any): string; } } }; }; radar?: { size?: number; offsetX?: number; offsetY?: number; polygons?: { strokeColor?: string | string[]; connectorColors?: string | string[]; fill?: { colors?: string[] } } }; radialBar?: { size?: number; inverseOrder?: boolean; startAngle?: number; endAngle?: number; offsetX?: number; offsetY?: number; hollow?: { margin?: number; size?: string; background?: string; image?: string; width?: number; height?: number; offsetX?: number; offsetY?: number; clipped?: boolean; position?: "front" | "back"; }; track?: { show?: boolean; startAngle?: number; endAngle?: number; background?: string; strokeWidth?: string; opacity?: number; margin?: number; dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number } }; dataLabels?: { show?: boolean; name?: { show?: boolean; fontSize?: string; color?: string; offsetY?: number; }; value?: { show?: boolean; fontSize?: string; color?: string; offsetY?: number; formatter?(val: number): string; }; total?: { show?: boolean; label?: string; color?: string; formatter?(opts: any): string; }; } } }; type ApexFill = { colors?: any[]; opacity?: number; type?: string; gradient?: { shade?: string; type?: string; shadeIntensity?: number; gradientToColors?: string[]; inverseColors?: boolean; opacityFrom?: number; opacityTo?: number; stops?: number[] }; image?: { src?: string[]; width?: number; height?: number }; pattern?: { style?: string; width?: number; height?: number; strokeWidth?: number; }; }; /** * Chart Legend configuration options. * See https://apexcharts.com/docs/options/legend/ */ type ApexLegend = { show?: boolean; showForSingleSeries?: boolean; showForNullSeries?: boolean; showForZeroSeries?: boolean; floating?: boolean; position?: "top" | "right" | "bottom" | "left"; horizontalAlign?: "left" | "center" | "right"; fontSize?: string; fontFamily?: string; width?: number; height?: number; offsetX?: number; offsetY?: number; formatter?(val: string, opts: any): string; textAnchor?: string; labels?: { color?: string useSeriesColors?: boolean; }; markers?: { width?: number; height?: number; strokeColor?: string strokeWidth?: number; offsetX?: number; offsetY?: number; radius?: number; shape?: "circle" | "square"; customHTML?(): string; onClick?(): void; }; itemMargin?: { horizontal?: number; vertical?: number; }; containerMargin?: { left?: number; top?: number; }; onItemClick?: { toggleDataSeries?: boolean; }; onItemHover?: { highlightDataSeries?: boolean; } }; type ApexDiscretePoint = { seriesIndex?: number; dataPointIndex?: number; fillColor?: string; strokeColor?: string; size?: number; } type ApexMarkers = { size?: number; colors?: string[]; strokeColor?: string; strokeWidth?: number; strokeOpacity?: number; fillOpacity?: number; discrete?: ApexDiscretePoint[]; shape?: 'circle' | 'square'; radius?: number; offsetX?: number; offsetY?: number; hover?: { size?: number; sizeOffset?: number; }; } type ApexNoData = { text?: string, align?: 'left' | 'right' | 'center', verticalAlign?: 'top' | 'middle' | 'bottom', offsetX?: number, offsetY?: number, style?: { color?: string, fontSize?: string, fontFamily?: string } } /** * Chart Datalabels options * See https://apexcharts.com/docs/options/datalabels/ */ type ApexDataLabels = { enabled?: boolean; enabledOnSeries?: number[]; formatter?(val: number, opts: any): string; textAnchor?: "start" | "middle" | "end"; offsetX?: number; offsetY?: number; style?: { fontSize?: string; fontFamily?: string; colors?: string[]; }; dropShadow?: { enabled: boolean; top?: number; left?: number; blur?: number; opacity?: number; } }; type ApexResponsive = { breakpoint?: number; options?: any; }; /** * Chart Tooltip options * See https://apexcharts.com/docs/options/tooltip/ */ type ApexTooltip = { enabled?: boolean; shared?: boolean; followCursor?: boolean; intersect?: boolean; inverseOrder?: boolean; custom?(options: any): void; fillSeriesColor?: boolean; theme?: string; style?: { fontSize?: string; fontFamily?: string; }; onDatasetHover?: { highlightDAtaSeries?: boolean; }; x?: { show?: boolean; format?: string; formatter?(val: number): string; } y?: { formatter?(val: number): string; title?: { formatter?(seriesName: string): string; } }; z?: { formatter?(val: number): string; title?: string }; marker?: { show?: boolean }; items?: { display?: string }; fixed?: { enabled?: boolean; position?: string; // topRight; topLeft; bottomRight; bottomLeft offsetX?: number; offsetY?: number } }; /** * X Axis options * See https://apexcharts.com/docs/options/xaxis/ */ type ApexXAxis = { type?: "categories" | "datetime" | "numeric"; categories?: string[] | number[]; labels?: { show?: boolean; rotate?: number; rotateAlways?: boolean; hideOverlappingLabels?: boolean; showDuplicates?: boolean; trim?: boolean; minHeight?: number; maxHeight?: number; style?: { colors?: string[]; fontSize?: string; fontFamily?: string; cssClass?: string; }; offsetX?: number; offsetY?: number; format?: string; formatter?(value: string, timestamp: number): string; datetimeFormatter?: { year?: string; month?: string; day?: string; hour?: string; minute?: string; }; }; axisBorder?: { show?: boolean; color?: string; offsetX?: number; offsetY?: number; strokeWidth?: number; }; axisTicks?: { show?: boolean; borderType?: string; color?: string; height?: number; offsetX?: number; offsetY?: number; }; tickAmount?: number; min?: number; max?: number; range?: number; floating?: boolean; position?: string; title?: { text?: string; offsetX?: number; offsetY?: number; style?: { color?: string; fontSize?: string; cssClass?: string; }; }; crosshairs?: { show?: boolean; width?: number | string; position?: string; opacity?: number; stroke?: { color?: string; width?: number; dashArray?: number; }; fill?: { type?: string; color?: string; gradient?: { colorFrom?: string; colorTo?: string; stops?: number[]; opacityFrom?: number; opacityTo?: number; }; }; dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; }; }; tooltip?: { enabled?: boolean; offsetY?: number; }; }; /** * Y Axis options * See https://apexcharts.com/docs/options/yaxis/ */ type ApexYAxis = { show?: boolean; showAlways?: boolean; seriesName?: string; opposite?: boolean; logarithmic?: boolean; tickAmount?: number; forceNiceScale?: boolean, min?: number; max?: number; floating?: boolean; decimalsInFloat?: number; labels?: { show?: boolean; minWidth?: number; maxWidth?: number; offsetX?: number; offsetY?: number; rotate?: number; align?: 'left' | 'center' | 'right'; padding?: number, style?: { color?: string; fontSize?: string; fontFamily?: string; cssClass?: string; }; formatter?(val: number): string; }; axisBorder?: { show?: boolean; color?: string; offsetX?: number; offsetY?: number }; axisTicks?: { show?: boolean; color?: string; width?: number; offsetX?: number; offsetY?: number }; title?: { text?: string; rotate?: number; offsetX?: number; offsetY?: number; style?: { color?: string; fontSize?: string; fontFamily?: string; cssClass?: string; }; }; crosshairs?: { show?: boolean; position?: string; stroke?: { color?: string; width?: number; dashArray?: number }; }; tooltip?: { enabled?: boolean; offsetX?: number; }; }; /** * Plot X and Y grid options * See https://apexcharts.com/docs/options/grid/ */ type ApexGrid = { show?: boolean; borderColor?: string; strokeDashArray?: number; position?: "front" | "back"; xaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?: number; } }; yaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?: number; } }; row?: { colors?: string[]; opacity?: number }; column?: { colors?: string[]; opacity?: number; }; padding?: { top?: number; right?: number; bottom?: number; left?: number; }; }; type ApexTheme = { mode?: "light" | "dark"; palette?: string; monochrome?: { enabled?: boolean, color?: string; shadeTo?: "light" | "dark"; shadeIntensity?: number } } declare module "apexcharts" { export = ApexCharts; }
Texto alterado
Abrir arquivo
// Typescript declarations for Apex class and module. // Note: When you have a class and a module with the same name; the module is merged // with the class. This is necessary since apexcharts exports the main ApexCharts class only. // // This is a sparse typed declarations of chart interfaces. See Apex Chart documentation // for comprehensive API: https://apexcharts.com/docs/options // // There is on-going work to provide a comprehensive typed definition for this component. // See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/28733 declare module 'apexcharts' { export default class ApexCharts { constructor(el: any, options: any); render(): Promise<void>; updateOptions(options: any, redrawPaths?: boolean, animate?: boolean): Promise<void>; updateSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void; appendSeries(newSeries: ApexAxisChartSeries | ApexNonAxisChartSeries, animate?: boolean): void; toggleSeries(seriesName: string): void; destroy(): void; addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void; addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void; addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void; addText(options: any, pushToMemory?: boolean, context?: any): void; dataURI(): Promise<void>; static exec(chartID: string, fn: () => void, options: any): any; static initOnLoad(): void; } export interface ApexOptions { annotations?: ApexAnnotations; chart?: ApexChart; colors?: any[]; dataLabels?: ApexDataLabels; fill?: ApexFill; grid?: ApexGrid; labels?: string[]; legend?: ApexLegend; markers?: ApexMarkers; noData?: ApexNoData; plotOptions?: ApexPlotOptions; responsive?: ApexResponsive[]; series?: ApexAxisChartSeries | ApexNonAxisChartSeries; states?: ApexStates; stroke?: ApexStroke; subtitle?: ApexTitleSubtitle; theme?: ApexTheme; title?: ApexTitleSubtitle; tooltip?: ApexTooltip; xaxis?: ApexXAxis; yaxis?: ApexYAxis | ApexYAxis[]; } } /** * Main Chart options * See https://apexcharts.com/docs/options/chart/ */ type ApexChart = { width?: string | number; height?: string | number; type?: "line" | "area" | "bar" | "histogram" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "radar" | "rangeBar"; foreColor?: string; fontFamily?: string; background?: string; offsetX?: number; offsetY?: number; dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; }; events?: { animationEnd?(chart: any, options: any): void; beforeMount?(chart: any, options: any): void; mounted?(chart: any, options: any): void; updated?(chart: any, options: any): void; click?(e: any, chart: any, options: any): void; legendClick?(chart: any, seriesIndex: number, options: any): void; markerClick?(e: any, chart: any, options: any): void; selection?(chart: any, options: any): void; dataPointSelection?(e: any, chart: any, options: any): void; dataPointMouseEnter?(e: any, chart: any, options: any): void; dataPointMouseLeave?(e: any, chart: any, options: any): void; beforeZoom?(chart: any, options: any): void; zoomed?(chart: any, options: any): void; scrolled?(chart: any, options: any): void; }; brush?: { enabled?: boolean; autoScaleYaxis?: boolean, target?: string; }; id?: string; locales?: ApexLocale[]; defaultLocale?: string; parentHeightOffset?: number; sparkline?: { enabled?: boolean; }; stacked?: boolean; stackType?: "normal" | "100%"; toolbar?: { show?: boolean; tools?: { download?: boolean | string; selection?: boolean | string; zoom?: boolean | string; zoomin?: boolean | string; zoomout?: boolean | string; pan?: boolean | string; reset?: boolean | string; }; autoSelected?: "zoom" | "selection" | "pan"; }; zoom?: { enabled?: boolean; type?: "x" | "y" | "xy"; zoomedArea?: { fill?: { color?: string; opacity?: number }; stroke?: { color?: string; opacity?: number; width?: number } } }; selection?: { enabled?: boolean; type?: string; fill?: { color?: string; opacity?: number; }; stroke?: { width?: number; color?: string; opacity?: number; dashArray?: number }; xaxis?: { min?: number; max?: number; }; yaxis?: { min?: number; max?: number }; }; animations?: { enabled?: boolean; easing?: "linear" | "easein" | "easeout" | "easeinout"; speed?: number; animateGradually?: { enabled?: boolean; delay?: number; } dynamicAnimation?: { enabled?: boolean; speed?: number; } }; }; type ApexStates = { normal?: { filter?: { type?: string, value?: number } }, hover?: { filter?: { type?: string, value?: number } }, active?: { allowMultipleDataPointsSelection?: boolean, filter?: { type?: string, value?: number } } }; /** * Chart Title options * See https://apexcharts.com/docs/options/title/ */ type ApexTitleSubtitle = { text?: string; align?: "left" | "center" | "right"; margin?: number; offsetX?: number; offsetY?: number; floating?: number; style?: { fontSize?: string; color?: string; }; }; /** * Chart Series options. * Use ApexNonAxisChartSeries for Pie and Donut charts. * See https://apexcharts.com/docs/options/series/ * * According to the documentation at * https://apexcharts.com/docs/series/ * Section 1: data can be a list of single numbers * Sections 2.1 and 3.1: data can be a list of tuples of two numbers * Sections 2.2 and 3.2: data can be a list of objects where x is a string * and y is a number */ export type ApexAxisChartSeries = { name: string; data: number[] | { x: any; y: any }[] | [number, number][] | [number, number[]][]; }[]; export type ApexNonAxisChartSeries = number[]; /** * Options for the line drawn on line and area charts. * See https://apexcharts.com/docs/options/stroke/ */ type ApexStroke = { show?: boolean; curve?: "smooth" | "straight" | "stepline"; lineCap?: "butt" | "square" | "round"; colors?: string; width?: number; dashArray?: number | number[] }; type ApexAnnotations = { position?: string; yaxis?: YAxisAnnotations[]; xaxis?: XAxisAnnotations[]; points?: PointAnnotations[]; }; type AnnotationLabel = { borderColor?: string; borderWidth?: number; text?: string; textAnchor?: string; offsetX?: number; offsetY?: number; style?: AnnotationStyle; position?: string; orientation?: string; }; type AnnotationStyle = { background?: string; color?: string; fontSize?: string; cssClass?: string; padding?: { left?: number; right?: number; top?: number; bottom?: number; }; }; type XAxisAnnotations = { x?: number; x2?: number; strokeDashArray?: number; fillColor?: string, borderColor?: string; opacity?: number; offsetX?: number; offsetY?: number; label?: { borderColor?: string; borderWidth?: number; text?: string; textAnchor?: string; position?: string; orientation?: string; offsetX?: number; offsetY?: number; style?: AnnotationStyle; }; }; type YAxisAnnotations = { y?: number; y2?: number, strokeDashArray?: number; fillColor?: string, borderColor?: string; opacity?: number; offsetX?: number; offsetY?: number; yAxisIndex?: number; label?: AnnotationLabel; }; type PointAnnotations = { x?: number; y?: null; yAxisIndex?: number; seriesIndex?: number; marker?: { size?: number; fillColor?: string; strokeColor?: string; strokeWidth?: number; shape?: string; offsetX?: number; offsetY?: number; radius?: number; cssClass?: string; }; label?: AnnotationLabel; }; /** * Options for localization. * See https://apexcharts.com/docs/options/chart/locales */ type ApexLocale = { name?: string; options?: { months?: string[]; shortMonths?: string[]; days?: string[]; shortDays?: string[]; toolbar?: { download?: string; selection?: string; selectionZoom?: string; zoomIn?: string; zoomOut?: string; pan?: string; reset?: string; } } } /** * PlotOptions for specifying chart-type-specific configuration. * See https://apexcharts.com/docs/options/plotoptions/bar/ */ type ApexPlotOptions = { bar?: { horizontal?: boolean; columnWidth?: string; barHeight?: string; distributed?: boolean; colors?: { ranges?: { from?: number; to?: number; color?: string; }[]; backgroundBarColors?: string[]; backgroundBarOpacity?: number; }; dataLabels?: { maxItems?: number; hideOverflowingLabels?: boolean; position?: string; } }; candlestick?: { colors?: { upward?: string; downward?: string; }; wick?: { useFillColor?: boolean } }; heatmap?: { radius?: number; enableShades?: boolean; shadeIntensity?: number; distributed?: boolean; colorScale?: { ranges?: { from?: number; to?: number; color?: string; name?: string; }[]; inverse?: boolean; min?: number; max?: number; } }; pie?: { size?: number; customScale?: number; offsetX?: number; offsetY?: number; expandOnClick?: boolean; dataLabels?: { offset?: number; minAngleToShowLabel?: number; }; donut?: { size?: string; background?: string; labels: { show?: boolean; name?: { show?: boolean; fontSize?: string; fontFamily?: string; color?: string; offsetY?: number }; value?: { show?: boolean; fontSize?: string; fontFamily?: string; color?: string; offsetY?: number; formatter?(val: string): string; }; total?: { show?: boolean; label?: string; color?: string; formatter?(w: any): string; } } }; }; radar?: { size?: number; offsetX?: number; offsetY?: number; polygons?: { strokeColor?: string | string[]; connectorColors?: string | string[]; fill?: { colors?: string[] } } }; radialBar?: { size?: number; inverseOrder?: boolean; startAngle?: number; endAngle?: number; offsetX?: number; offsetY?: number; hollow?: { margin?: number; size?: string; background?: string; image?: string; width?: number; height?: number; offsetX?: number; offsetY?: number; clipped?: boolean; position?: "front" | "back"; }; track?: { show?: boolean; startAngle?: number; endAngle?: number; background?: string; strokeWidth?: string; opacity?: number; margin?: number; dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number } }; dataLabels?: { show?: boolean; name?: { show?: boolean; fontSize?: string; color?: string; offsetY?: number; }; value?: { show?: boolean; fontSize?: string; color?: string; offsetY?: number; formatter?(val: number): string; }; total?: { show?: boolean; label?: string; color?: string; formatter?(opts: any): string; }; } } }; type ApexFill = { colors?: any[]; opacity?: number; type?: string; gradient?: { shade?: string; type?: string; shadeIntensity?: number; gradientToColors?: string[]; inverseColors?: boolean; opacityFrom?: number; opacityTo?: number; stops?: number[] }; image?: { src?: string[]; width?: number; height?: number }; pattern?: { style?: string; width?: number; height?: number; strokeWidth?: number; }; }; /** * Chart Legend configuration options. * See https://apexcharts.com/docs/options/legend/ */ type ApexLegend = { show?: boolean; showForSingleSeries?: boolean; showForNullSeries?: boolean; showForZeroSeries?: boolean; floating?: boolean; position?: "top" | "right" | "bottom" | "left"; horizontalAlign?: "left" | "center" | "right"; fontSize?: string; fontFamily?: string; width?: number; height?: number; offsetX?: number; offsetY?: number; formatter?(val: string, opts: any): string; textAnchor?: string; labels?: { color?: string useSeriesColors?: boolean; }; markers?: { width?: number; height?: number; strokeColor?: string strokeWidth?: number; offsetX?: number; offsetY?: number; radius?: number; shape?: "circle" | "square"; customHTML?(): string; onClick?(): void; }; itemMargin?: { horizontal?: number; vertical?: number; }; containerMargin?: { left?: number; top?: number; }; onItemClick?: { toggleDataSeries?: boolean; }; onItemHover?: { highlightDataSeries?: boolean; } }; type ApexDiscretePoint = { seriesIndex?: number; dataPointIndex?: number; fillColor?: string; strokeColor?: string; size?: number; } type ApexMarkers = { size?: number; colors?: string[]; strokeColor?: string; strokeWidth?: number; strokeOpacity?: number; fillOpacity?: number; discrete?: ApexDiscretePoint[]; shape?: 'circle' | 'square'; radius?: number; offsetX?: number; offsetY?: number; hover?: { size?: number; sizeOffset?: number; }; } type ApexNoData = { text?: string, align?: 'left' | 'right' | 'center', verticalAlign?: 'top' | 'middle' | 'bottom', offsetX?: number, offsetY?: number, style?: { color?: string, fontSize?: string, fontFamily?: string } } /** * Chart Datalabels options * See https://apexcharts.com/docs/options/datalabels/ */ type ApexDataLabels = { enabled?: boolean; enabledOnSeries?: number[]; formatter?(val: number, opts: any): string; textAnchor?: "start" | "middle" | "end"; offsetX?: number; offsetY?: number; style?: { fontSize?: string; fontFamily?: string; colors?: string[]; }; dropShadow?: { enabled: boolean; top?: number; left?: number; blur?: number; opacity?: number; } }; type ApexResponsive = { breakpoint?: number; options?: any; }; /** * Chart Tooltip options * See https://apexcharts.com/docs/options/tooltip/ */ type ApexTooltip = { enabled?: boolean; shared?: boolean; followCursor?: boolean; intersect?: boolean; inverseOrder?: boolean; custom?(options: any): void; fillSeriesColor?: boolean; theme?: string; style?: { fontSize?: string; fontFamily?: string; }; onDatasetHover?: { highlightDAtaSeries?: boolean; }; x?: { show?: boolean; format?: string; formatter?(val: number): string; } y?: { formatter?(val: number): string; title?: { formatter?(seriesName: string): string; } }; z?: { formatter?(val: number): string; title?: string }; marker?: { show?: boolean }; items?: { display?: string }; fixed?: { enabled?: boolean; position?: string; // topRight; topLeft; bottomRight; bottomLeft offsetX?: number; offsetY?: number } }; /** * X Axis options * See https://apexcharts.com/docs/options/xaxis/ */ type ApexXAxis = { type?: "categories" | "datetime" | "numeric"; categories?: string[] | number[]; labels?: { show?: boolean; rotate?: number; rotateAlways?: boolean; hideOverlappingLabels?: boolean; showDuplicates?: boolean; trim?: boolean; minHeight?: number; maxHeight?: number; style?: { colors?: string[]; fontSize?: string; fontFamily?: string; cssClass?: string; }; offsetX?: number; offsetY?: number; format?: string; formatter?(value: string, timestamp: number): string; datetimeFormatter?: { year?: string; month?: string; day?: string; hour?: string; minute?: string; }; }; axisBorder?: { show?: boolean; color?: string; offsetX?: number; offsetY?: number; strokeWidth?: number; }; axisTicks?: { show?: boolean; borderType?: string; color?: string; height?: number; offsetX?: number; offsetY?: number; }; tickAmount?: number; min?: number; max?: number; range?: number; floating?: boolean; position?: string; title?: { text?: string; offsetX?: number; offsetY?: number; style?: { color?: string; fontSize?: string; cssClass?: string; }; }; crosshairs?: { show?: boolean; width?: number | string; position?: string; opacity?: number; stroke?: { color?: string; width?: number; dashArray?: number; }; fill?: { type?: string; color?: string; gradient?: { colorFrom?: string; colorTo?: string; stops?: number[]; opacityFrom?: number; opacityTo?: number; }; }; dropShadow?: { enabled?: boolean; top?: number; left?: number; blur?: number; opacity?: number; }; }; tooltip?: { enabled?: boolean; offsetY?: number; }; }; /** * Y Axis options * See https://apexcharts.com/docs/options/yaxis/ */ type ApexYAxis = { show?: boolean; showAlways?: boolean; seriesName?: string; opposite?: boolean; logarithmic?: boolean; tickAmount?: number; forceNiceScale?: boolean, min?: number; max?: number; floating?: boolean; decimalsInFloat?: number; labels?: { show?: boolean; minWidth?: number; maxWidth?: number; offsetX?: number; offsetY?: number; rotate?: number; align?: 'left' | 'center' | 'right'; padding?: number, style?: { color?: string; fontSize?: string; fontFamily?: string; cssClass?: string; }; formatter?(val: number): string; }; axisBorder?: { show?: boolean; color?: string; offsetX?: number; offsetY?: number }; axisTicks?: { show?: boolean; color?: string; width?: number; offsetX?: number; offsetY?: number }; title?: { text?: string; rotate?: number; offsetX?: number; offsetY?: number; style?: { color?: string; fontSize?: string; fontFamily?: string; cssClass?: string; }; }; crosshairs?: { show?: boolean; position?: string; stroke?: { color?: string; width?: number; dashArray?: number }; }; tooltip?: { enabled?: boolean; offsetX?: number; }; }; /** * Plot X and Y grid options * See https://apexcharts.com/docs/options/grid/ */ type ApexGrid = { show?: boolean; borderColor?: string; strokeDashArray?: number; position?: "front" | "back"; xaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?: number; } }; yaxis?: { lines?: { show?: boolean; offsetX?: number; offsetY?: number; } }; row?: { colors?: string[]; opacity?: number }; column?: { colors?: string[]; opacity?: number; }; padding?: { top?: number; right?: number; bottom?: number; left?: number; }; }; type ApexTheme = { mode?: "light" | "dark"; palette?: string; monochrome?: { enabled?: boolean, color?: string; shadeTo?: "light" | "dark"; shadeIntensity?: number } }
Encontrar Diferença