ChartComponent.fs

module ChartComponent

open System
open Elmish
open Fable.Core.JsInterop
open Fable.Core
open Fable.Import
open Fable.Helpers.React
module R = Fable.Helpers.React

type RCom = React.ComponentClass<obj>

module Props =
    type LineDataSet = {
        label : string
        backgroundColor : string
        borderColor : string
        borderCapStyle : string
        borderDash : obj []
        borderWidth : int
        fill : bool
        data : obj []
    }

    type LineChartData = {
        labels : string []
        datasets : LineDataSet []
    }

    type DoughnutDataSet = {
        label : string
        backgroundColor : string []
        borderColor : string []
        borderCapStyle : string
        borderDash : obj []
        borderWidth : int
        fill : bool
        data : obj []
    }

    type DoughnutChartData = {
        labels : string []
        datasets : DoughnutDataSet []
    }

    type BarDataSet = {
        label : string
        backgroundColor : string
        borderColor : string
        borderCapStyle : string
        borderDash : obj []
        borderWidth : int
        fill : bool
        data : obj []
    }

    type BarChartData = {
        labels : string []
        datasets : BarDataSet []
    }

    type ChartAxisTicks = {
        beginAtZero : bool
    }

    type ChartAxis = {
        ticks : ChartAxisTicks
    }

    type ChartScales = {
        yAxes : ChartAxis []
    }

    type ChartLegend = {
        display : bool
        position : string
    }

    type ChartOptions = {
        maintainAspectRatio : bool
        responsive : bool
        scales : ChartScales
        legend : ChartLegend
    }
    

    type ILineChartProperties =
        interface end

    [<RequireQualifiedAccess>]
    type LineChartProperties =
    | Key of obj
    | Title of string
    | Width of float
    | Height of float
    | Options of ChartOptions
    | Data of LineChartData
    | OnClick of (unit -> unit)
        interface ILineChartProperties

    type IDoughnutChartProperties =
        interface end

    [<RequireQualifiedAccess>]
    type DoughnutChartProperties =
    | Key of obj
    | Title of string
    | Width of float
    | Height of float
    | Options of ChartOptions
    | Data of DoughnutChartData
    | OnClick of (unit -> unit)
        interface IDoughnutChartProperties

    type IBarChartProperties =
        interface end

    [<RequireQualifiedAccess>]
    type BarChartProperties =
    | Key of obj
    | Title of string
    | Width of float
    | Height of float
    | Options of ChartOptions
    | Data of BarChartData
    | OnClick of (unit -> unit)
        interface IBarChartProperties
    
let Line: RCom = import "Line" "react-chartjs-2"


let line (props:Props.ILineChartProperties list) children : React.ReactElement =
    R.from Line (keyValueList CaseRules.LowerFirst props) children

let Doughnut: RCom = import "Doughnut" "react-chartjs-2"

let doughnut (props:Props.IDoughnutChartProperties list) children : React.ReactElement =
    R.from Doughnut (keyValueList CaseRules.LowerFirst props) children

let Bar: RCom = import "Bar" "react-chartjs-2"

let bar (props:Props.IBarChartProperties list) children : React.ReactElement =
    R.from Bar (keyValueList CaseRules.LowerFirst props) children