Chart

let reader = Specimen_Reader.reader
let period = (first: KitReact.Time.date, last: KitReact.Time.date) =>
  KitReact.Time.intervals(KitReact.Time.dayRange(reader, ~first, ~last))
let counts = values => values->Array.map(value => KitReact.Amount.count(reader, value))
let pounds = values => values->Array.map(value => KitReact.Amount.money(reader, ~amount=`${Int.toString(value)}.00`, ~currency="GBP"))
let april = () => period({year: 2025, month: 4, day: 1}, {year: 2025, month: 4, day: 30})
let bookings = () => counts([12, 15, 11, 14, 18, 9, 8, 13, 16, 17, 15, 19, 10, 7, 14, 16, 18, 20, 21, 11, 9, 15, 17, 19, 18, 22, 12, 10, 16, 8])
let words = text => [KitReact.Words.Text(text)]

@react.component
let make = () =>
  <>
    <KitReact.Roles.Chart.Trend
      id="react-chart-bookings"
      label="Bookings by day, 1 to 30 April 2025: 430, up 37 on the previous period"
      kind=Line
      intervals={april()}
      ongoing=true
      series=One({name: "Bookings", values: bookings()})
      prior={{name: "Previous period", values: counts([10, 13, 12, 12, 15, 8, 9, 11, 14, 15, 16, 17, 9, 8, 12, 15, 16, 18, 17, 10, 8, 14, 15, 16, 17, 19, 11, 9, 14, 13])}}
      changes={[2, 2, -1, 2, 3, 1, -1, 2, 2, 2, -1, 2, 1, -1, 2, 1, 2, 2, 4, 1, 1, 1, 2, 3, 1, 3, 1, 1, 2, -5]->Array.map(change =>
        words(change < 0 ? `Down ${Int.toString(-change)}` : `Up ${Int.toString(change)}`)
      )}
      empty={words("No bookings in this period")}
    />
    <KitReact.Roles.Chart.Trend
      id="react-chart-hirers"
      label="Hirers by week, 1 January to 31 March 2025: 89 new and 108 returning"
      kind=Columns
      intervals={period({year: 2025, month: 1, day: 1}, {year: 2025, month: 3, day: 31})}
      series=Two(
        {name: "New hirers", values: counts([3, 6, 4, 7, 5, 8, 6, 9, 7, 5, 8, 10, 9, 2])},
        {name: "Returning hirers", values: counts([5, 7, 6, 8, 6, 9, 8, 10, 9, 7, 9, 11, 10, 3])},
      )
      empty={words("No hirers in this period")}
    />
    <KitReact.Roles.Chart.Multiples
      id="react-chart-income"
      trends=[
        {
          label: "Hire income by month, July 2024 to March 2025: £15,610.00",
          kind: Line,
          intervals: period({year: 2024, month: 7, day: 1}, {year: 2025, month: 3, day: 31}),
          series: One({name: "Hire income", values: pounds([1240, 1580, 1910, 2230, 2050, 1320, 1470, 1690, 2120])}),
          empty: words("No hire income in this period"),
        },
        {
          label: "Deposits held by month, July 2024 to March 2025: £5,720.00",
          kind: Line,
          intervals: period({year: 2024, month: 7, day: 1}, {year: 2025, month: 3, day: 31}),
          series: One({name: "Deposits held", values: pounds([620, 700, 540, 810, 760, 480, 530, 590, 690])}),
          empty: words("No deposits held in this period"),
        },
      ]
    />
    <KitReact.Roles.FactGroup>
      <KitReact.Roles.LabelledFact
        name={React.string("Bookings")}
        value={Words([KitReact.Words.Amount(KitReact.Amount.count(reader, 430))])}
        supporting=[{pieces: words("Up 37 on the previous period")}]
        spark={{
          id: "react-chart-bookings-spark",
          label: "Bookings by day, 1 to 30 April 2025: 430, up 37 on the previous period",
          intervals: april(),
          ongoing: true,
          series: {name: "Bookings", values: bookings()},
          empty: words("No bookings in this period"),
        }}
      />
    </KitReact.Roles.FactGroup>
    <KitReact.Roles.Chart.Trend
      id="react-chart-cancellations"
      label="Cancellations by day, 1 to 30 April 2025: none"
      kind=Line
      intervals={april()}
      series=One({name: "Cancellations", values: []})
      empty={words("No cancellations in this period")}
    />
    <KitReact.Roles.Chart.Trend
      id="react-chart-loading"
      label="Bookings by day, 1 to 30 April 2025:"
      total=true
      change=true
      kind=Line
      intervals={april()}
      series=One({name: "Bookings", values: []})
      prior={{name: "Previous period", values: []}}
      empty={words("No bookings in this period")}
      loading="Bookings by day had not loaded."
    />
    <KitReact.Roles.Chart.Multiples
      id="react-chart-income-loading"
      trends=[
        {
          label: "Hire income by month, July 2024 to March 2025:",
          kind: Line,
          intervals: period({year: 2024, month: 7, day: 1}, {year: 2025, month: 3, day: 31}),
          series: One({name: "Hire income", values: []}),
          total: true,
          empty: words("No hire income in this period"),
        },
        {
          label: "Deposits held by month, July 2024 to March 2025:",
          kind: Line,
          intervals: period({year: 2024, month: 7, day: 1}, {year: 2025, month: 3, day: 31}),
          series: One({name: "Deposits held", values: []}),
          total: true,
          empty: words("No deposits held in this period"),
        },
      ]
      loading="Hire income and deposits held had not loaded."
    />
  </>