New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Supporting TypeScript #24
Comments
I'm waiting for @types/apexcharts to come out, but here is a temporary solution export interface ApexOptions {
chart: {
width?: string | number;
height?: string | number;
type: string;
foreColor?: string;
};
plotOptions?: {
radialBar?: {
offsetY?: number;
startAngle?: number;
endAngle?: number;
hollow?: {
margin: number;
size: string;
background: string;
image: string | undefined,
},
track?: {
show: boolean
},
dataLabels?: {
showOn?: string;
name?: {
show: boolean,
},
value?: {
show: boolean,
}
}
};
circle?: {
track?: {
show: boolean
},
dataLabels: {
showOn?: string;
name?: {
show: boolean,
},
value?: {
show: boolean,
}
}
};
pie?: {
size?: undefined,
donut?: {
size?: string;
background?: string;
},
customScale?: number;
offsetX?: number;
offsetY?: number;
dataLabels?: {
offset?: number;
}
}
};
colors?: string[];
series: number[];
labels?: string[];
legend?: {
show?: boolean;
floating?: boolean;
fontSize?: string;
position?: string;
verticalAlign?: string;
textAnchor?: string;
labels?: {
useSeriesColors: boolean
};
markers?: {
size: number
};
formatter?: Function;
itemMargin?: {
vertical: number;
};
containerMargin?: {
left: number;
top: number;
}
};
} |
@junedchhipa I could help with this. We definitely need typescript support to be able to create angular bindings. |
Hey guys, I've extended a bit the interface kindly posted by @jimfilippou , however I am still unsure about which are the required fields. Hope it helps! export enum ChartHorizontalAlign {
left = 'left',
center = 'center',
right = 'right'
}
export enum ChartVerticalAlign {
top = 'top',
middle = 'middle',
bottom = 'bottom'
}
export enum ChartTypes {
line = 'line',
area = 'area',
bar = 'bar',
histogram = 'histogram',
pie = 'pie',
donut = 'donut',
radialBar = 'radialBar',
scatter = 'scatter',
bubble = 'bubble',
heatmap = 'heatmap'
}
export enum ChartShape {
circle = 'circle',
square = 'square'
}
export enum ChartPosition {
top = 'top',
right = 'right',
bottom = 'bottom',
left = 'left'
}
export enum ChartCurve {
smooth = 'smooth',
straight = 'straight'
}
export interface ChartLegend {
show?: true;
position?: ChartPosition;
horizontalAlign?: ChartHorizontalAlign;
verticalAlign?: ChartVerticalAlign;
floating?: boolean;
fontSize?: string;
offsetX?: number;
offsetY?: number;
formatter?: any;
textAnchor?: string;
labels?: {
foreColor?: string;
useSeriesColors?: boolean;
};
markers?: {
size?: number;
strokeColor?: string;
strokeWidth?: number;
offsetX?: number;
offsetY?: number;
radius?: number;
shape?: ChartShape;
};
itemMargin?: {
horizontal?: number;
vertical?: number
};
containerMargin?: {
left?: number;
top?: number;
};
onItemClick?: {
toggleDataSeries?: boolean;
};
onItemHover?: {
highlightDataSeries?: boolean;
};
}
export interface ChartConfig {
height?: number;
type?: ChartTypes;
shadow?: {
enabled?: boolean;
color?: string;
top?: number;
left?: number;
blur?: number;
opacity?: number
};
zoom?: {
enabled?: boolean
};
}
export interface ChartSerie {
name?: string;
data?: number[];
}
export interface ChartRow {
colors?: string[];
opacity?: number;
}
export interface Chart {
chart?: ChartConfig;
colors?: string[];
stroke?: {
curve?: ChartCurve;
};
series?: ChartSerie[];
title?: {
text?: string;
align?: ChartHorizontalAlign;
};
grid?: {
borderColor?: string;
row?: ChartRow;
};
markers?: {
size?: number;
colors?: string[];
strokeColor?: string;
strokeWidth?: number;
strokeOpacity?: number;
fillOpacity?: number;
shape?: ChartShape;
radius?: number;
offsetX?: number;
offsetY?: number;
hover?: {
size?: number
}
};
xaxis?: {
categories?: string[];
title?: {
text?: string;
}
};
yaxis?: {
title?: {
text?: string;
};
min?: number;
max?: number;
};
legend?: ChartLegend;
} |
thanks everyone, I'm gathering all of these and hopefully could send a draft PR to |
Hi everyone finally I have a few hours working on this. Options are copied from the options refs on docs page, then converted to json when pasting the js object to a json file and run prettier. then I used json to ts vscode extension to convert json to ts typings. quick note: I used Still a WIP, hope I could find sometimes work on it tomorrow or next week. |
@BoostIO funded this issue with $30. Visit this issue on Issuehunt |
@sandangel has started working. Visit this issue on Issuehunt |
I think it is simpler to embed types directly in the repository instead of publishing them to the @types organisation. See: https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html . As an example, Vue.js does it like this, with an entry in the |
@cstlaurent brilliant, thanks! |
@cstlaurent Good to know. I was worried about how the types will be synced with the core options. If anyone finishes the first version of the types, I'm happy to accept a PR |
@junedchhipa the only way i see is to (slowly and carefully) port the whole project to Typescript. The first and simplest thing you can do is to rename *.js to *.ts, then configure the build settings in webpack.config.js . In my opinion, you should not accept any PR with just the typings...because the risk to unsync the options is too high. You should consider the Typescript porting a big improvement, not only for typings, but for every future implementation. |
@Micene09 I agree that Typescript comes with a lot of advantages, but porting the whole project from JS to TS will be extremely tedious if not challenging looking at the size of the current codebase. I have got some more contributions in the typings and I will publish soon directly in the repository. |
amazing thanks @junedchhipa! anything else we can do to help this? |
@katiesandford Sure, maybe you can validate the typescript declarations to make sure they work correctly? |
I have added the initial typescript declarations which cover most of the options. |
Hi All, |
@rororofff has funded $2.00 to this issue.
|
react-apexcharts, as well as vue-apexcharts, also has their own types. |
For everyone else looking into this issue, by now ApexCharts has bundled their typescript files in the official repo. The folder is |
Following on @mark-langer's comment, here's a direct link: |
apex-charts is really great , but I unable found to declaration file to easier development.
The text was updated successfully, but these errors were encountered: