Add payload to events and style to x/y axis elements (#52)

* add payload to events * add style to x/y axis elements * run formatter on files * Update CHANGES
ahrefs · Nov 25, 2024 · 7533b57 · 7533b57
1 parent 7e727f6
commit 7533b57
Show file tree

Hide file tree

Showing 23 changed files with 237 additions and 98 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,3 +1,8 @@
+## 4.0.7 (2024-11-23)
+
+- add `payload` to `Pie` and `Bar` event handler
+- add `style` to `XAxis` and `YAxis`
+
 ## 4.0.6 (2024-10-19)
 
 - add `strokeOpacity` to `Line`

diff --git a/src/Area.re b/src/Area.re
@@ -8,14 +8,15 @@ external make:
     ~activeDot: 'activeDot=?,
     ~animationBegin: int=?,
     ~animationDuration: int=?,
-    ~animationEasing: [@mel.string] [
-                        | `ease
-                        | [@mel.as "ease-in"] `easeIn
-                        | [@mel.as "ease-out"] `easeOut
-                        | [@mel.as "ease-in-out"] `easeInOut
-                        | `linear
-                      ]
-                        =?,
+    ~animationEasing:
+      [@mel.string] [
+        | `ease
+        | [@mel.as "ease-in"] `easeIn
+        | [@mel.as "ease-out"] `easeOut
+        | [@mel.as "ease-in-out"] `easeInOut
+        | `linear
+      ]
+        =?,
     ~baseLine: 'baseLine=?,
     ~connectNulls: bool=?,
     ~hide: bool=?,
@@ -32,7 +33,8 @@ external make:
     ~name: string=?,
     ~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=?,
+    ~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=?,

diff --git a/src/AreaChart.re b/src/AreaChart.re
@@ -14,7 +14,8 @@ external make:
     ~onClick: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
     ~onMouseUp: (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=?,
+    ~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=?,
     ~stackOffset: stackOffset=?,

diff --git a/src/Bar.re b/src/Bar.re
@@ -6,14 +6,15 @@ external make:
   (
     ~animationBegin: int=?,
     ~animationDuration: int=?,
-    ~animationEasing: [@mel.string] [
-                        | `ease
-                        | [@mel.as "ease-in"] `easeIn
-                        | [@mel.as "ease-out"] `easeOut
-                        | [@mel.as "ease-in-out"] `easeInOut
-                        | `linear
-                      ]
-                        =?,
+    ~animationEasing:
+      [@mel.string] [
+        | `ease
+        | [@mel.as "ease-in"] `easeIn
+        | [@mel.as "ease-out"] `easeOut
+        | [@mel.as "ease-in-out"] `easeInOut
+        | `linear
+      ]
+        =?,
     ~background: 'background=?,
     ~barSize: int=?,
     ~className: string=?,
@@ -29,14 +30,22 @@ external make:
     ~maxBarSize: int=?,
     ~minPointSize: int=?,
     ~name: string=?,
-    ~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=?,
+    ~onClick:
+      (Js.t({.. "payload": 'dataItem}), int, React.Event.Mouse.t) => unit=?,
+    ~onMouseDown:
+      (Js.t({.. "payload": 'dataItem}), React.Event.Mouse.t) => unit=?,
+    ~onMouseEnter:
+      (Js.t({.. "payload": 'dataItem}), int, React.Event.Mouse.t) => unit=?,
+    ~onMouseLeave:
+      (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=?,
+    ~onMouseUp:
+      (Js.t({.. "payload": 'dataItem}), React.Event.Mouse.t) => unit=?,
     ~radius: array(int)=?,
     ~shape: 'shape=?,
     ~stackId: string=?,

diff --git a/src/BarChart.re b/src/BarChart.re
@@ -17,7 +17,8 @@ external make:
     ~onClick: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
     ~onMouseUp: (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=?,
+    ~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=?,
     ~reverseStackOrder: bool=?,
@@ -30,4 +31,7 @@ external make:
   "BarChart";
 
 let makeProps = (~barCategoryGap=?, ~barGap=?) =>
-  makeProps(~barCategoryGap=?barCategoryGap->PxOrPrc.encodeOpt, ~barGap=?barGap->PxOrPrc.encodeOpt);
+  makeProps(
+    ~barCategoryGap=?barCategoryGap->PxOrPrc.encodeOpt,
+    ~barGap=?barGap->PxOrPrc.encodeOpt,
+  );
diff --git a/src/ComposedChart.re b/src/ComposedChart.re
@@ -16,7 +16,8 @@ external make:
     ~onClick: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
     ~onMouseUp: (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=?,
+    ~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=?,
     ~reverseStackOrder: bool=?,
@@ -29,4 +30,7 @@ external make:
   "ComposedChart";
 
 let makeProps = (~barCategoryGap=?, ~barGap=?) =>
-  makeProps(~barCategoryGap=?barCategoryGap->PxOrPrc.encodeOpt, ~barGap=?barGap->PxOrPrc.encodeOpt);
+  makeProps(
+    ~barCategoryGap=?barCategoryGap->PxOrPrc.encodeOpt,
+    ~barGap=?barGap->PxOrPrc.encodeOpt,
+  );
diff --git a/src/Dot.re b/src/Dot.re
@@ -9,7 +9,8 @@ external make:
     ~fill: string,
     ~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=?,
+    ~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=?,

diff --git a/src/Legend.re b/src/Legend.re
@@ -4,26 +4,51 @@ open Utils;
 [@mel.module "recharts"] [@react.component]
 external make:
   (
-    ~align: [ | `left | `center | `right]=?,
+    ~align:
+      [
+        | `left
+        | `center
+        | `right
+      ]
+        =?,
     ~chartHeight: int=?,
     ~chartWidth: int=?,
     ~content: 'content=?,
     ~className: string=?,
     ~height: int=?,
     ~iconSize: int=?,
-    ~iconType: [ | `line | `square | `rect | `circle | `cross | `diamond | `star | `triangle | `wye]=?,
+    ~iconType:
+      [
+        | `line
+        | `square
+        | `rect
+        | `circle
+        | `cross
+        | `diamond
+        | `star
+        | `triangle
+        | `wye
+      ]
+        =?,
     ~layout: layout=?,
     ~margin: margin=?,
     ~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=?,
+    ~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=?,
     ~payload: array(Js.t({..}))=?,
-    ~verticalAlign: [ | `top | `middle | `bottom]=?,
+    ~verticalAlign:
+      [
+        | `top
+        | `middle
+        | `bottom
+      ]
+        =?,
     ~width: int=?,
     ~wrapperStyle: Js.t({..})=?
   ) =>

diff --git a/src/Line.re b/src/Line.re
@@ -8,14 +8,15 @@ external make:
     ~activeDot: 'activeDot=?,
     ~animationBegin: int=?,
     ~animationDuration: int=?,
-    ~animationEasing: [@mel.string] [
-                        | `ease
-                        | [@mel.as "ease-in"] `easeIn
-                        | [@mel.as "ease-out"] `easeOut
-                        | [@mel.as "ease-in-out"] `easeInOut
-                        | `linear
-                      ]
-                        =?,
+    ~animationEasing:
+      [@mel.string] [
+        | `ease
+        | [@mel.as "ease-in"] `easeIn
+        | [@mel.as "ease-out"] `easeOut
+        | [@mel.as "ease-in-out"] `easeInOut
+        | `linear
+      ]
+        =?,
     ~className: string=?,
     ~connectNulls: bool=?,
     ~hide: bool=?,
@@ -30,7 +31,8 @@ external make:
     ~name: string=?,
     ~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=?,
+    ~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=?,

diff --git a/src/LineChart.re b/src/LineChart.re
@@ -13,7 +13,8 @@ external make:
     ~onClick: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
     ~onMouseUp: (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=?,
+    ~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=?,
     ~syncId: string=?,

diff --git a/src/Pie.re b/src/Pie.re
@@ -8,14 +8,15 @@ external make:
     ~activeShape: 'activeShape=?,
     ~animationBegin: int=?,
     ~animationDuration: int=?,
-    ~animationEasing: [@mel.string] [
-                        | `ease
-                        | [@mel.as "ease-in"] `easeIn
-                        | [@mel.as "ease-out"] `easeOut
-                        | [@mel.as "ease-in-out"] `easeInOut
-                        | `linear
-                      ]
-                        =?,
+    ~animationEasing:
+      [@mel.string] [
+        | `ease
+        | [@mel.as "ease-in"] `easeIn
+        | [@mel.as "ease-out"] `easeOut
+        | [@mel.as "ease-in-out"] `easeInOut
+        | `linear
+      ]
+        =?,
     ~className: string=?,
     ~cx: PxOrPrc.t=?,
     ~cy: PxOrPrc.t=?,
@@ -31,14 +32,42 @@ external make:
     ~legendType: legendType=?,
     ~minAngle: int=?,
     ~nameKey: string=?,
-    ~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=?,
+    // Pulled from:
+    // https://github.com/recharts/recharts/blob/7fb227dae542c3d3093506e6d80a2c2c366f9a26/src/polar/Pie.tsx#L107-L109
+    ~onClick:
+      (
+        Js.Nullable.t(Js.t({.. "payload": 'dataItem})),
+        int,
+        React.Event.Mouse.t
+      ) =>
+      unit
+        =?,
+    ~onMouseDown:
+      (Js.t({.. "payload": 'dataItem}), React.Event.Mouse.t) => unit=?,
+    ~onMouseEnter:
+      (
+        Js.Nullable.t(Js.t({.. "payload": 'dataItem})),
+        int,
+        React.Event.Mouse.t
+      ) =>
+      unit
+        =?,
+    ~onMouseLeave:
+      (
+        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=?,
+    ~onMouseUp:
+      (Js.t({.. "payload": 'dataItem}), React.Event.Mouse.t) => unit=?,
     ~outerRadius: PxOrPrc.t=?,
     ~paddingAngle: int=?,
     ~startAngle: int=?,

diff --git a/src/PieChart.re b/src/PieChart.re
@@ -9,7 +9,8 @@ external make:
     ~margin: margin=?,
     ~style: ReactDOM.Style.t=?,
     ~onClick: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
-    ~onMouseEnter: (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=?,
     ~width: int=?,
     ~children: React.element

diff --git a/src/ReferenceArea.re b/src/ReferenceArea.re
@@ -11,7 +11,8 @@ external make:
     ~fillOpacity: 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=?,
+    ~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=?,

diff --git a/src/ReferenceDot.re b/src/ReferenceDot.re
@@ -10,7 +10,8 @@ external make:
     ~label: 'label=?,
     ~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=?,
+    ~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=?,

diff --git a/src/ReferenceLine.re b/src/ReferenceLine.re
@@ -10,7 +10,8 @@ external make:
     ~label: 'label=?,
     ~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=?,
+    ~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=?,

diff --git a/src/Scatter.re b/src/Scatter.re
@@ -22,16 +22,18 @@ external make:
     ~isAnimationActive: bool=?,
     ~animationBegin: int=?,
     ~animationDuration: int=?,
-    ~animationEasing: [@mel.string] [
-                        | `ease
-                        | [@mel.as "ease-in"] `easeIn
-                        | [@mel.as "ease-out"] `easeOut
-                        | [@mel.as "ease-in-out"] `easeInOut
-                        | `linear
-                      ]
-                        =?,
+    ~animationEasing:
+      [@mel.string] [
+        | `ease
+        | [@mel.as "ease-in"] `easeIn
+        | [@mel.as "ease-out"] `easeOut
+        | [@mel.as "ease-in-out"] `easeInOut
+        | `linear
+      ]
+        =?,
     ~onClick: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
-    ~onMouseEnter: (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=?,
     ~onMouseOut: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,
     ~onMouseUp: (Js.Nullable.t(Js.t({..})), React.Event.Mouse.t) => unit=?,