|
| 1 | +module Fable.Recharts |
| 2 | + |
| 3 | +open Fable.Import |
| 4 | +open Fable.Core |
| 5 | +open Fable.Core.JsInterop |
| 6 | + |
| 7 | +module Props = |
| 8 | + [<StringEnum>] |
| 9 | + type Layout = |
| 10 | + | Horizontal |
| 11 | + | Vertical |
| 12 | + |
| 13 | + [<StringEnum>] |
| 14 | + type StackOffset = |
| 15 | + | Expand |
| 16 | + | Wiggle |
| 17 | + | Silhouette |
| 18 | + | Sign |
| 19 | + | [<CompiledName("none")>] NoStackOffset |
| 20 | + |
| 21 | + [<StringEnum>] |
| 22 | + type Interpolation = |
| 23 | + | Basis |
| 24 | + | BasisClosed |
| 25 | + | BasisOpen |
| 26 | + | Linear |
| 27 | + | LinearClosed |
| 28 | + | Natural |
| 29 | + | MonotoneX |
| 30 | + | MonotoneY |
| 31 | + | Monotone |
| 32 | + | Step |
| 33 | + | StepBefore |
| 34 | + | StepAfter |
| 35 | + //| Function |
| 36 | + |
| 37 | + [<StringEnum>] |
| 38 | + type Legend = |
| 39 | + | Line |
| 40 | + | Square |
| 41 | + | Rect |
| 42 | + | Circle |
| 43 | + | Cross |
| 44 | + | Diamond |
| 45 | + | Star |
| 46 | + | Triangle |
| 47 | + | Wye |
| 48 | + | [<CompiledName("none")>] NoLegend |
| 49 | + |
| 50 | + [<StringEnum>] |
| 51 | + type Easing = |
| 52 | + | Ease |
| 53 | + | [<CompiledName("ease-in")>] EaseIn |
| 54 | + | [<CompiledName("ease-out")>] EaseOut |
| 55 | + | [<CompiledName("ease-in-out")>] EaseInOut |
| 56 | + | Linear |
| 57 | + |
| 58 | + type [<Pojo>] CoordinatePoint = |
| 59 | + { x: float |
| 60 | + y: float |
| 61 | + value: float } |
| 62 | + |
| 63 | + type [<Pojo>] Margin = |
| 64 | + { top: float |
| 65 | + bottom: float |
| 66 | + right: float |
| 67 | + left: float } |
| 68 | + |
| 69 | + type ChartProp = |
| 70 | + /// If any two categorical charts(LineChart, AreaChart, BarChart, ComposedChart) have the same syncId, these two charts can sync the position tooltip, and the startIndex, endIndex of Brush. |
| 71 | + | SyncId of string |
| 72 | + | Layout of Layout |
| 73 | + | Width of float |
| 74 | + | Height of float |
| 75 | + | Data of System.Array |
| 76 | + | Margin of Margin |
| 77 | + |
| 78 | + /// BarChart: The gap between two bar categories, which can be a percent value or a fixed value. |
| 79 | + | BarCategoryGap of obj |
| 80 | + /// BarChart: The gap between two bars, which can be a percent value or a fixed value. |
| 81 | + | BarGap of obj |
| 82 | + /// BarChart: The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups. |
| 83 | + | BarSize of float |
| 84 | + /// BarChart: The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart. |
| 85 | + | MaxBarSize of float |
| 86 | + /// BarChart: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. |
| 87 | + | StackOffset of StackOffset |
| 88 | + |
| 89 | + // Events |
| 90 | + | OnClick of (React.MouseEvent -> unit) |
| 91 | + | OnMouseEnter of (React.MouseEvent -> unit) |
| 92 | + | OnMouseMove of (React.MouseEvent -> unit) |
| 93 | + | OnMouseLeave of (React.MouseEvent -> unit) |
| 94 | + static member Custom(key: string, value: obj): ChartProp = !!(key, value) |
| 95 | + |
| 96 | + type CartesianProp = |
| 97 | + /// The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area. |
| 98 | + | Type of Interpolation |
| 99 | + /// The key of a group of data which should be unique in a LineChart. |
| 100 | + | DataKey of obj |
| 101 | + // The id of x-axis which is corresponding to the data. |
| 102 | + | XAxisId of obj |
| 103 | + // The id of y-axis which is corresponding to the data. |
| 104 | + | YAxisId of obj |
| 105 | + | LegendType of Legend |
| 106 | + /// If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If object set, labels will be drawn which have the props mergered by the internal calculated props and the option. If ReactElement set, the option can be the custom label element. If set a function, the function will be called to render customized label. |
| 107 | + | Label of obj |
| 108 | + /// The layout of line, usually inherited from parent. |
| 109 | + | Layout of Layout |
| 110 | + | Unit of string |
| 111 | + /// The name of data. This option will be used in tooltip and legend to represent a line. If no value was set to this option, the value of dataKey will be used alternatively. |
| 112 | + | Name of string |
| 113 | + /// If set false, animation of line will be disabled. |
| 114 | + | IsAnimationActive of bool |
| 115 | + /// Specifies when the animation should begin, the unit of this option is ms. |
| 116 | + | AnimationBegin of float |
| 117 | + /// Specifies the duration of animation, the unit of this option is ms. |
| 118 | + | AnimationDuration of float |
| 119 | + | AnimationEasing of Easing |
| 120 | + |
| 121 | + /// Line: If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally. If object set, dots will be drawn which have the props mergered by the internal calculated props and the option. If ReactElement set, the option can be the custom dot element.If set a function, the function will be called to render customized dot. |
| 122 | + | Dot of obj |
| 123 | + /// Line: The dot is shown when muser enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. If object set, active dot will be drawn which have the props mergered by the internal calculated props and the option. If ReactElement set, the option can be the custom active dot element.If set a function, the function will be called to render customized active dot. |
| 124 | + | ActiveDot of obj |
| 125 | + /// Line: The coordinates of all the points in the line, usually calculated internally. |
| 126 | + | Points of CoordinatePoint[] |
| 127 | + /// Line: Whether to connect a graph line across null points. |
| 128 | + | ConnectNulls of bool |
| 129 | + |
| 130 | + /// Bar: The width or height of each bar. If the barSize is not specified, the size of bar will be caculated by the barCategoryGap, barGap and the quantity of bar groups. |
| 131 | + | BarSize of float |
| 132 | + /// Bar: The maximum width of bar in a horizontal BarChart, or maximum height in a vertical BarChart. |
| 133 | + | MaxBarSize of float |
| 134 | + /// Bar: The minimal height of a bar in a horizontal BarChart, or the minimal width of a bar in a vertical BarChart. By default, 0 values are not shown. To visualize a 0 (or close to zero) point, set the minimal point size to a pixel value like 3. In stacked bar charts, minPointSize might not be respected for tightly packed values. So we strongly recommend not using this props in stacked BarChart. |
| 135 | + | MinPointSize of float |
| 136 | + /// Bar: If set a ReactElement, the shape of bar can be customized. If set a function, the function will be called to render customized shape. |
| 137 | + | Shape of React.ReactElement |
| 138 | + /// Bar: The stack id of bar, when two bars have the same value axis and same stackId, then the two bars are stacked in order. |
| 139 | + | StackId of obj |
| 140 | + |
| 141 | + // Events |
| 142 | + | OnClick of (React.MouseEvent -> unit) |
| 143 | + | OnMouseDown of (React.MouseEvent -> unit) |
| 144 | + | OnMouseUp of (React.MouseEvent -> unit) |
| 145 | + | OnMouseOver of (React.MouseEvent -> unit) |
| 146 | + | OnMouseOut of (React.MouseEvent -> unit) |
| 147 | + | OnMouseEnter of (React.MouseEvent -> unit) |
| 148 | + | OnMouseMove of (React.MouseEvent -> unit) |
| 149 | + | OnMouseLeave of (React.MouseEvent -> unit) |
| 150 | + interface Fable.Helpers.React.Props.IProp |
| 151 | + static member Custom(key: string, value: obj): ChartProp = !!(key, value) |
| 152 | + |
| 153 | +type RechartComponent = |
| 154 | + interface end |
| 155 | + |
| 156 | +module Imports = |
| 157 | + // Charts |
| 158 | + let lineChartEl: obj = import "LineChart" "recharts" |
| 159 | + let barChartEl: obj = import "BarChart" "recharts" |
| 160 | + |
| 161 | + // General Components |
| 162 | + let tooltipEl: obj = import "Tooltip" "recharts" |
| 163 | + let legendEl: obj = import "Legend" "recharts" |
| 164 | + |
| 165 | + // Cartesian Components |
| 166 | + let lineEl: obj = import "Line" "recharts" |
| 167 | + let barEl: obj = import "Bar" "recharts" |
| 168 | + let cartesianGridEl: obj = import "CartesianGrid" "recharts" |
| 169 | + let xaxisEl: obj = import "XAxis" "recharts" |
| 170 | + let yaxisEl: obj = import "YAxis" "recharts" |
| 171 | + |
| 172 | +open Fable.Helpers.React |
| 173 | +open Fable.Helpers.React.Props |
| 174 | +open Props |
| 175 | +open Imports |
| 176 | + |
| 177 | +let inline lineChart (props: ChartProp list) (children: RechartComponent list): React.ReactElement = |
| 178 | + createElement(lineChartEl, keyValueList CaseRules.LowerFirst props, children) |
| 179 | + |
| 180 | +let inline barChart (props: ChartProp list) (children: RechartComponent list): React.ReactElement = |
| 181 | + createElement(barChartEl, keyValueList CaseRules.LowerFirst props, children) |
| 182 | + |
| 183 | +// TODO: Tooltip props |
| 184 | +let inline tooltip (props: obj list): RechartComponent = |
| 185 | + createElement(tooltipEl, keyValueList CaseRules.LowerFirst props, []) |
| 186 | + |
| 187 | +// TODO: Legend props |
| 188 | +let inline legend (props: obj list): RechartComponent = |
| 189 | + createElement(legendEl, keyValueList CaseRules.LowerFirst props, []) |
| 190 | + |
| 191 | +let inline bar (props: IProp list): RechartComponent = |
| 192 | + createElement(barEl, keyValueList CaseRules.LowerFirst props, []) |
| 193 | + |
| 194 | +let inline line (props: IProp list): RechartComponent = |
| 195 | + createElement(lineEl, keyValueList CaseRules.LowerFirst props, []) |
| 196 | + |
| 197 | +let inline cartesianGrid (props: IProp list): RechartComponent = |
| 198 | + createElement(cartesianGridEl, keyValueList CaseRules.LowerFirst props, []) |
| 199 | + |
| 200 | +let inline xaxis (props: IProp list): RechartComponent = |
| 201 | + createElement(xaxisEl, keyValueList CaseRules.LowerFirst props, []) |
| 202 | + |
| 203 | +let inline yaxis (props: IProp list): RechartComponent = |
| 204 | + createElement(yaxisEl, keyValueList CaseRules.LowerFirst props, []) |
| 205 | + |
0 commit comments