Hello All,
I am trying to use ApexCharts from my rescript code. I have read their javascript code and tried to translate it to Rescript by using introp. Here is their example
import React, { Component } from "react";
import Chart from "react-apexcharts";
class App extends Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
id: "basic-bar"
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}
},
series: [
{
name: "series-1",
data: [30, 40, 45, 50, 49, 60, 70, 91]
}
]
};
} // scroll down
render() {
return (
<div className="app">
<div className="row">
<div className="mixed-chart">
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
width="500"
/>
</div>
</div>
</div>
);
}
}
export default App;
I translated this into Rescript like this (PG Link)
type chart = {
id: string
}
type xaxis = {
categories: array<int>
}
type options = {
chart: chart,
xaxis: xaxis
}
type series = {
name: string,
data: array<int>
}
module Chart = {
@module("react-apexcharts") @react.component external make: (~options: options, ~series: array<series>, ~type_: string, ~width: string, ~height: string) => React.element = "Chart"
}
@react.component
let make = () => {
open ApexCharts
let options = {
chart: {
id: "basic-bar"
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}}
let series = [{
name: "series-1",
data: [30, 40, 45, 50, 49, 60, 70, 91]
}]
<div className="app">
<div className="row">
<div className="mixedChart">
<Chart options series type_="bar" width="500px" height="500px" />
</div>
</div>
</div>
}```
As soon as I load my app in the browser. it throws a warning
WARNING in ./src/components/StockDetail/StockChart.bs.js 66:35-56
export ‘Chart’ (imported as ‘ReactApexcharts’) was not found in ‘react-apexcharts’ (possible exports: __esModule, default)
If I click on the link which loads the chart it throws error
ERROR
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
Check the render method of StockChart.
createFiberFromTypeAndProps@
createFiberFromElement@
reconcileSingleElement@
reconcileChildFibers@
reconcileChildren@
updateHostComponent@
callCallback@
dispatchEvent@[native code]
invokeGuardedCallbackDev@
invokeGuardedCallback@
beginWork$1@
performUnitOfWork@
workLoopSync@
renderRootSync@
performConcurrentWorkOnRoot@
performConcurrentWorkOnRoot@[native code]
workLoop@
flushWork@
performWorkUntilDeadline@
Here is my full source code with all dependencies etc https://github.com/abhsrivastava/tradeking