Skip to content
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

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

Merged
merged 9 commits into from
Dec 2, 2024
18 changes: 18 additions & 0 deletions CHANGES.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,21 @@
## 5.0.0 (2024-11-28)

- change `axisLine` type from `any` to `[ | `Bool(bool) | `Obj(Js.t({..}))]` in `XAxis`, `YAxis`, and `ZAxis`
- change `dataKey` type from `string` to `[ | `Str(string) | `Int(int) | `Fn('dataObj => 'dataKey)]` in `XAxis`, `YAxis`, and `ZAxis`
- change `label` type from `any` to `[ | `Str(string) | `Int(int) | `Float(float) | `Component(React.element) | `Obj(Js.t({..}))]` in `XAxis`, `YAxis`, and `ZAxis`
- change `name` type from `string` to `[ | `Str(string) | `Int(int) | `Float(float)]` in `XAxis`, `YAxis`, and `ZAxis`
- add `range` prop to `XAxis` and `YAxis`
- change `tick` type from `any` to `[ | `Obj(Js.t({..})) | `Component(React.element) | `Bool(bool) | `Fn('tick => React.element)]` in `XAxis`, `YAxis`, and `ZAxis`
- change `tickFormatter` type from `any` to `(. 'tick, int) => string` in `XAxis`, `YAxis`, and `ZAxis` and wrap it with a curried function
- change `tickLine` type from `any` to `[ | `Bool(bool) | `Obj(Js.t({..}))]` in `XAxis`, `YAxis`, and `ZAxis`
- change `tickSize` type from `float` to `[ | `Float(float) | `Int(int)]` in `XAxis`, `YAxis`, and `ZAxis`
- fix curried functions in event handlers for `XAxis`, `YAxis`, and `ZAxis`
- add `transform` and `stroke` props to `XAxis`, `YAxis`, and `ZAxis`
- add `style` prop to `ZAxis`
- add `fillOpacity` prop to `Cell`
- add optional flags to `Treemap` props `stroke`, `fill`, `isAnimationActive`, `animationDuration`
- wrap `Pie` event handlers data prop in `Js.Nullable.t`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can add something along the lines of the PR description in one line ("Improve bindings for XYZ axes, Treemap, Pie and Cell components"), with a link to the PR for those interested on details.

I would also add "Breaking" before it.

example.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done


## 4.0.7 (2024-11-23)

- add `payload` to `Pie` and `Bar` event handler
Expand Down
9 changes: 8 additions & 1 deletion src/Cell.re
Original file line number Diff line number Diff line change
Expand Up @@ -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";
39 changes: 26 additions & 13 deletions src/Pie.re
Original file line number Diff line number Diff line change
Expand Up @@ -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=?,
Expand Down
8 changes: 4 additions & 4 deletions src/Treemap.re
Original file line number Diff line number Diff line change
Expand Up @@ -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=?,
Expand Down
142 changes: 124 additions & 18 deletions src/XAxis.re
Original file line number Diff line number Diff line change
Expand Up @@ -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] [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we maybe replace some of those types in Utils with mel.unwrap too?

https://github.com/ahrefs/melange-recharts/blob/master/src/Utils.re#L135

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to tackle this in another PR but I think this is a great suggestion.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR open: #60

| `Str(string)
| `Int(int)
| `Float(float)
| `Component(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({..}))
| `Component(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)
),
);
Loading