Skip to content

Add @fluentui/react-charts ResponsiveContainer #30

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.

Sign up for GitHub

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

Open
rbertels wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add @fluentui/react-charts ResponsiveContainer #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/FS.FluentUI.Charts/Charts.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,5 @@ type Fui =
let args = color, isDarkTheme
import "getColorFromToken" "@fluentui/react-charts" (emitJsExpr args "$0[0], $0[1]")
static member inline legends (props: ILegendsProp list) = Helpers.createElement (import "Legends" "@fluentui/react-charts") props
static member inline responsiveContainer (props : IResponsiveContainerProp list) = Helpers.createElement (import "ResponsiveContainer" "@fluentui/react-charts") props

12 changes: 12 additions & 0 deletions src/FS.FluentUI.Charts/Props.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3970,3 +3970,15 @@ module polarChart =
static member inline clockwise = Interop.mkProperty<IPolarChartProp> "direction" "clockwise"
/// Direction in which the chart is drawn.
static member inline counterclockwise = Interop.mkProperty<IPolarChartProp> "direction" "counterclockwise"


// ------------------------------------------------------------- ResponsiveContainer ------------------------------------------

type [<Erase>] responsiveContainer =
static member inline aspect (value: float) = Interop.mkProperty<IResponsiveContainerProp> "aspect" value
static member inline children (value: ReactElement) = Interop.mkProperty<IResponsiveContainerProp> "children" value
static member inline children (values: ReactElement seq) = Interop.mkProperty<IResponsiveContainerProp> "children" values
static member inline height (value: int) = Interop.mkProperty<IResponsiveContainerProp> "height" value
static member inline minWidth (value: int) = Interop.mkProperty<IResponsiveContainerProp> "minWidth" value
static member inline minHeight (value: int) = Interop.mkProperty<IResponsiveContainerProp> "minHeight" value
static member inline width (value: int) = Interop.mkProperty<IResponsiveContainerProp> "width" value
1 change: 1 addition & 0 deletions src/FS.FluentUI.Charts/Utils.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,3 +106,4 @@ type [<Erase>] IScatterPolarSeriesProp = interface end
type [<Erase>] IPolarChartStylesProp = interface end
type [<Erase>] IPolarAxisProp = interface end
type [<Erase>] IAxisProp = interface end
type [<Erase>] IResponsiveContainerProp = interface end
32 changes: 31 additions & 1 deletion src/FS.FluentUI.TestGrounds/src/TestCharts.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -837,7 +837,10 @@ let polarChartData = [
let TestChartsComponent () =
let sliderValue, setSliderValue = React.useState 50
Html.div [
prop.style [ style.width 1000; style.margin 36 ]
prop.style [
style.width (length.perc 100)
style.margin 36
]
prop.children [
Fui.polarChart [
polarChart.data polarChartData
Expand All @@ -846,6 +849,33 @@ let TestChartsComponent () =
polarChart.shape.polygon
polarChart.direction.clockwise
]
Fui.responsiveContainer [
responsiveContainer.children [

Fui.areaChart [
areaChart.mode.tonexty
areaChart.height 300
areaChart.width 600
areaChart.legendsOverflowText "Overflow Items"
areaChart.yAxisTickFormat (fun (s:string) -> "$" + s)
areaChart.svgProps [ prop.ariaLabel "This is another test?!"]
areaChart.enableGradient true
areaChart.enablePerfOptimization true
areaChart.reflowProps.modeNone
areaChart.xAxis.tickStep 5
areaChart.xAxis.tick0 5
areaChart.legendProps [
legends.allowFocusOnLegends true
legends.canSelectMultipleLegends true
legends.centerLegends true
]
areaChart.data [
chart.chartTitle "Areachart in responsive container"
chart.lineChartData areaChartDataList
]
]
]
]
Fui.areaChart [
areaChart.mode.tonexty
areaChart.height 300
Expand Down