Merge pull request #59 from johnhaley81/update-bindings-2

Updates to bindings for XYZ axes, Treemap, Pie, and Cell components

CHANGES.md

@@ -1,3 +1,7 @@
+## Unpublished
+
+- *[breaking]* improve bindings for XYZ axes, Treemap, Pie and Cell components [#59](https://github.com/ahrefs/melange-recharts/pull/59)
+
 ## 4.0.7 (2024-11-23)
 
 - add `payload` to `Pie` and `Bar` event handler

src/Cell.re

@@ -2,6 +2,13 @@
 
 [@mel.module "recharts"] [@react.component]
 external make:
-  (~background: 'background=?, ~className: string=?, ~fill: string=?, ~stroke: string=?, ~strokeWidth: int=?) =>
+  (
+    ~background: 'background=?,
+    ~className: string=?,
+    ~fill: string=?,
+    ~fillOpacity: float=?,
+    ~stroke: string=?,
+    ~strokeWidth: int=?
+  ) =>
   React.element =
   "Cell";

src/Pie.re

@@ -35,39 +35,52 @@ external make:
     // Pulled from:
     // https://github.com/recharts/recharts/blob/7fb227dae542c3d3093506e6d80a2c2c366f9a26/src/polar/Pie.tsx#L107-L109
     ~onClick:
+      (Js.Nullable.t({.. "payload": 'dataItem}), int, React.Event.Mouse.t) =>
+      unit
+        =?,
+    ~onMouseEnter:
+      (Js.Nullable.t({.. "payload": 'dataItem}), int, React.Event.Mouse.t) =>
+      unit
+        =?,
+    ~onMouseLeave:
+      (Js.Nullable.t({.. "payload": 'dataItem}), int, React.Event.Mouse.t) =>
+      unit
+        =?,
+    ~onMouseDown:
       (
         Js.Nullable.t(Js.t({.. "payload": 'dataItem})),
-        int,
         React.Event.Mouse.t
       ) =>
       unit
         =?,
-    ~onMouseDown:
-      (Js.t({.. "payload": 'dataItem}), React.Event.Mouse.t) => unit=?,
-    ~onMouseEnter:
+    ~onMouseMove:
       (
         Js.Nullable.t(Js.t({.. "payload": 'dataItem})),
-        int,
         React.Event.Mouse.t
       ) =>
       unit
         =?,
-    ~onMouseLeave:
+    ~onMouseOut:
       (
         Js.Nullable.t(Js.t({.. "payload": 'dataItem})),
-        int,
         React.Event.Mouse.t
       ) =>
       unit
         =?,
-    ~onMouseMove:
-      (Js.t({.. "payload": 'dataItem}), React.Event.Mouse.t) => unit=?,
-    ~onMouseOut:
-      (Js.t({.. "payload": 'dataItem}), React.Event.Mouse.t) => unit=?,
     ~onMouseOver:
-      (Js.t({.. "payload": 'dataItem}), React.Event.Mouse.t) => unit=?,
+      (
+        Js.Nullable.t(Js.t({.. "payload": 'dataItem})),
+        React.Event.Mouse.t
+      ) =>
+      unit
+        =?,
     ~onMouseUp:
-      (Js.t({.. "payload": 'dataItem}), React.Event.Mouse.t) => unit=?,
+      (
+        Js.Nullable.t(Js.t({.. "payload": 'dataItem})),
+        React.Event.Mouse.t
+      ) =>
+      unit
+        =?,
     ~outerRadius: PxOrPrc.t=?,
     ~paddingAngle: int=?,
     ~startAngle: int=?,

src/Treemap.re

@@ -6,12 +6,12 @@ external make:
     ~data: array('dataItem),
     ~dataKey: string,
     ~aspectRatio: float=?,
-    ~stroke: string,
-    ~fill: string,
+    ~stroke: string=?,
+    ~fill: string=?,
     ~className: string=?,
     ~height: int=?,
-    ~isAnimationActive: bool,
-    ~animationDuration: int,
+    ~isAnimationActive: bool=?,
+    ~animationDuration: int=?,
     ~syncId: string=?,
     ~width: int=?,
     ~content: 'contentProps => React.element=?,

src/XAxis.re

@@ -8,49 +8,155 @@ external make:
     ~allowDataOverflow: bool=?,
     ~allowDecimals: bool=?,
     ~allowDuplicatedCategory: bool=?,
-    ~axisLine: 'axisLine=?,
+    ~axisLine:
+      [@mel.unwrap] [
+        | `Bool(bool)
+        | `Obj(Js.t({..}))
+      ]
+        =?,
     ~className: string=?,
-    ~dataKey: string=?,
+    ~dataKey:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `Int(int)
+        | `Fn('dataObj => 'data)
+      ]
+        =?,
     ~domain: array('domain)=?,
     ~height: int=?,
     ~hide: bool=?,
     ~interval: AxisInterval.t=?,
-    ~label: 'label=?,
+    ~label:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `Int(int)
+        | `Float(float)
+        | `Element(React.element)
+        | `Obj(Js.t({..}))
+      ]
+        =?,
     ~minTickGap: int=?,
     ~mirror: bool=?,
-    ~name: string=?,
-    ~onClick: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
-    ~onMouseDown: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
+    ~name:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `Int(int)
+        | `Float(float)
+      ]
+        =?,
+    ~onClick: (. Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
+    ~onMouseDown:
+      (. Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
     ~onMouseEnter:
-      (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
-    ~onMouseLeave: (Js.t({..}), React.Event.Mouse.t) => unit=?,
-    ~onMouseMove: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
-    ~onMouseOut: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
-    ~onMouseOver: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
-    ~onMouseUp: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
+      (. Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
+    ~onMouseLeave: (. Js.t({..}), React.Event.Mouse.t) => unit=?,
+    ~onMouseMove:
+      (. Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
+    ~onMouseOut:
+      (. Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
+    ~onMouseOver:
+      (. Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
+    ~onMouseUp: (. Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
     ~orientation:
       [
         | `bottom
         | `top
       ]
         =?,
     ~padding: paddingHorizontal=?,
+    ~range: array(int)=?,
     ~reversed: bool=?,
     ~scale: scale=?,
+    ~stroke: string=?,
     ~style: ReactDOM.Style.t=?,
-    ~tick: 'tick=?,
+    ~tick:
+      [@mel.unwrap] [
+        | `Obj(Js.t({..}))
+        | `Element(React.element)
+        | `Bool(bool)
+        | `Fn('tick => React.element)
+      ]
+        =?,
     ~tickCount: int=?,
-    ~tickFormatter: 'tickFormatter=?,
-    ~tickLine: 'tickLine=?,
+    ~tickFormatter: (. 'tick, int) => string=?,
+    ~tickLine:
+      [@mel.unwrap] [
+        | `Bool(bool)
+        | `Obj(Js.t({..}))
+      ]
+        =?,
     ~tickMargin: int=?,
     ~ticks: array('ticks)=?,
-    ~tickSize: int=?,
+    ~tickSize:
+      [@mel.unwrap] [
+        | `Float(float)
+        | `Int(int)
+      ]
+        =?,
+    ~transform: string=?,
     ~unit: string=?,
     ~width: int=?,
     ~xAxisId: string=?
   ) =>
   React.element =
   "XAxis";
 
-let makeProps = (~interval=?) =>
-  makeProps(~interval=?interval->AxisInterval.encodeOpt);
+let makeProps =
+    (
+      ~interval=?,
+      ~onClick=?,
+      ~onMouseDown=?,
+      ~onMouseEnter=?,
+      ~onMouseLeave=?,
+      ~onMouseMove=?,
+      ~onMouseOut=?,
+      ~onMouseOver=?,
+      ~onMouseUp=?,
+      ~tickFormatter=?,
+    ) =>
+  makeProps(
+    ~interval=?interval |> AxisInterval.encodeOpt,
+    ~onClick=?
+      onClick
+      |> Option.map(onClick => (. payload, event) => onClick(payload, event)),
+    ~onMouseDown=?
+      onMouseDown
+      |> Option.map(onMouseDown =>
+           (. payload, event) => onMouseDown(payload, event)
+         ),
+    ~onMouseEnter=?
+      onMouseEnter
+      |> Option.map(onMouseEnter =>
+           (. payload, event) => onMouseEnter(payload, event)
+         ),
+    ~onMouseLeave=?
+      onMouseLeave
+      |> Option.map(onMouseLeave =>
+           (. payload, event) => onMouseLeave(payload, event)
+         ),
+    ~onMouseMove=?
+      onMouseMove
+      |> Option.map(onMouseMove =>
+           (. payload, event) => onMouseMove(payload, event)
+         ),
+    ~onMouseOut=?
+      onMouseOut
+      |> Option.map(onMouseOut =>
+           (. payload, event) => onMouseOut(payload, event)
+         ),
+    ~onMouseOver=?
+      onMouseOver
+      |> Option.map(onMouseOver =>
+           (. payload, event) => onMouseOver(payload, event)
+         ),
+    ~onMouseUp=?
+      onMouseUp
+      |> Option.map(onMouseUp =>
+           (. payload, event) => onMouseUp(payload, event)
+         ),
+    ~tickFormatter=?
+      tickFormatter
+      |> Option.map(tickFormatter =>
+           (. tick, index) => tickFormatter(tick, index)
+         ),
+  );