ReScript bindings for Fusion Charts (or how to bind funky React components)

,
1

Hey folks.

I was wondering if anyone out there had any experience with creating ReScript bindings to Fusion Charts. If so, I’d love to chat with you and hopefully avoid some of the grunt work that will go along with creating a full set of ReScript bindings to their component library.

So far, my biggest issue is how to deal with binding to a React component that, itself, has functions you can call. FusionCharts seems to use a non-standard mechanism for generating their components. I’m guessing this is an artifact of their library not being native to React, but I haven’t investigated that.

Here’s what the JavaScript sample looks like from their documentation. Note the React component (ReactFC) has a function attached called fcRoot that can (needs?) to be called before it is used as a component.

import ReactFC from "react-fusioncharts"

import FusionCharts from "fusioncharts"
import Column2D from "fusioncharts/fusioncharts.charts"
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion"

ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme)

const chartData = [ ] // ..array of data

const chartConfigs = {
  // some configs,
  data: chartData,
}

class App extends React.Component {
  render() {
    return <ReactFC {...chartConfigs} />;
  }
}

export default App

As I’m relatively new to ReScript bindings writing, this is making me feel like a junior developer all over again. :slight_smile:

Thanks in advance for any help,

Wil

2

Here’s a suggestion that might help.

Declare the main module imports:

module FusionCharts = {
  type fusionCharts
  type charts
  type theme
  @module external fusionCharts: fusionCharts = "fusioncharts"
  @module external charts: charts = "fusioncharts/fusioncharts.charts.js"
  @module external theme: theme = "fusioncharts/themes/fusioncharts.theme.fusion.js"
}

Declare the React component.

module ReactFC = {
  type chartType = [#column2d]

  @module("react-fusioncharts")
  external fcRoot: (FusionCharts.fusionCharts, FusionCharts.charts, FusionCharts.theme) => unit =
    "fcRoot"

  @module @react.component
  external make: (~_type: chartType, ~width: int, ~height: int) => React.element =
    "react-fusioncharts"
}

Using fcRoot external function for that standalone function.

Using make() external function to enable it as a React component.

Then you can use these two as follows:

ReactFC.fcRoot(FusionCharts.fusionCharts, FusionCharts.charts, FusionCharts.theme)

let el = <ReactFC _type=#column2d width=600 height=400 />

Not tested, but hopefully has some ideas to help get you further.

2 Likes
3

I will go forth and test this. That’s a great starting point. The idea of calling fcRoot in that way is, I think, the key piece that I wasn’t coming up with.

Thank you so much for your thoughtful response.

Wil