cowchart.js

import Chart from 'chart.js'
import R from 'ramda'


view Main {
  const average = data => data
                            .filter(R.identity)
                            .reduce((sum, datum) => sum + parseInt(datum), 0)
                            / data.length

  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  // data from https://datamarket.com/data/set/22ox/monthly-milk-production-pounds-per-cow-jan-62-dec-75#!ds=22ox&display=line
  // Downloaded as CSV and passed through csvkit's csvjson tool
  const dataset = [{"Month": "1962-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "589"}, {"Month": "1962-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "561"}, {"Month": "1962-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "640"}, {"Month": "1962-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "656"}, {"Month": "1962-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "727"}, {"Month": "1962-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "697"}, {"Month": "1962-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "640"}, {"Month": "1962-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "599"}, {"Month": "1962-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "568"}, {"Month": "1962-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "577"}, {"Month": "1962-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "553"}, {"Month": "1962-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "582"}, {"Month": "1963-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "600"}, {"Month": "1963-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "566"}, {"Month": "1963-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "653"}, {"Month": "1963-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "673"}, {"Month": "1963-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "742"}, {"Month": "1963-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "716"}, {"Month": "1963-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "660"}, {"Month": "1963-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "617"}, {"Month": "1963-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "583"}, {"Month": "1963-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "587"}, {"Month": "1963-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "565"}, {"Month": "1963-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "598"}, {"Month": "1964-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "628"}, {"Month": "1964-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "618"}, {"Month": "1964-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "688"}, {"Month": "1964-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "705"}, {"Month": "1964-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "770"}, {"Month": "1964-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "736"}, {"Month": "1964-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "678"}, {"Month": "1964-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "639"}, {"Month": "1964-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "604"}, {"Month": "1964-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "611"}, {"Month": "1964-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "594"}, {"Month": "1964-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "634"}, {"Month": "1965-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "658"}, {"Month": "1965-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "622"}, {"Month": "1965-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "709"}, {"Month": "1965-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "722"}, {"Month": "1965-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "782"}, {"Month": "1965-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "756"}, {"Month": "1965-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "702"}, {"Month": "1965-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "653"}, {"Month": "1965-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "615"}, {"Month": "1965-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "621"}, {"Month": "1965-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "602"}, {"Month": "1965-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "635"}, {"Month": "1966-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "677"}, {"Month": "1966-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "635"}, {"Month": "1966-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "736"}, {"Month": "1966-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "755"}, {"Month": "1966-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "811"}, {"Month": "1966-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "798"}, {"Month": "1966-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "735"}, {"Month": "1966-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "697"}, {"Month": "1966-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "661"}, {"Month": "1966-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "667"}, {"Month": "1966-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "645"}, {"Month": "1966-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "688"}, {"Month": "1967-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "713"}, {"Month": "1967-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "667"}, {"Month": "1967-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "762"}, {"Month": "1967-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "784"}, {"Month": "1967-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "837"}, {"Month": "1967-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "817"}, {"Month": "1967-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "767"}, {"Month": "1967-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "722"}, {"Month": "1967-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "681"}, {"Month": "1967-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "687"}, {"Month": "1967-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "660"}, {"Month": "1967-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "698"}, {"Month": "1968-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "717"}, {"Month": "1968-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "696"}, {"Month": "1968-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "775"}, {"Month": "1968-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "796"}, {"Month": "1968-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "858"}, {"Month": "1968-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "826"}, {"Month": "1968-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "783"}, {"Month": "1968-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "740"}, {"Month": "1968-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "701"}, {"Month": "1968-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "706"}, {"Month": "1968-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "677"}, {"Month": "1968-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "711"}, {"Month": "1969-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "734"}, {"Month": "1969-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "690"}, {"Month": "1969-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "785"}, {"Month": "1969-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "805"}, {"Month": "1969-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "871"}, {"Month": "1969-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "845"}, {"Month": "1969-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "801"}, {"Month": "1969-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "764"}, {"Month": "1969-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "725"}, {"Month": "1969-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "723"}, {"Month": "1969-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "690"}, {"Month": "1969-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "734"}, {"Month": "1970-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "750"}, {"Month": "1970-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "707"}, {"Month": "1970-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "807"}, {"Month": "1970-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "824"}, {"Month": "1970-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "886"}, {"Month": "1970-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "859"}, {"Month": "1970-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "819"}, {"Month": "1970-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "783"}, {"Month": "1970-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "740"}, {"Month": "1970-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "747"}, {"Month": "1970-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "711"}, {"Month": "1970-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "751"}, {"Month": "1971-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "804"}, {"Month": "1971-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "756"}, {"Month": "1971-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "860"}, {"Month": "1971-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "878"}, {"Month": "1971-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "942"}, {"Month": "1971-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "913"}, {"Month": "1971-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "869"}, {"Month": "1971-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "834"}, {"Month": "1971-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "790"}, {"Month": "1971-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "800"}, {"Month": "1971-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "763"}, {"Month": "1971-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "800"}, {"Month": "1972-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "826"}, {"Month": "1972-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "799"}, {"Month": "1972-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "890"}, {"Month": "1972-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "900"}, {"Month": "1972-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "961"}, {"Month": "1972-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "935"}, {"Month": "1972-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "894"}, {"Month": "1972-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "855"}, {"Month": "1972-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "809"}, {"Month": "1972-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "810"}, {"Month": "1972-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "766"}, {"Month": "1972-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "805"}, {"Month": "1973-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "821"}, {"Month": "1973-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "773"}, {"Month": "1973-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "883"}, {"Month": "1973-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "898"}, {"Month": "1973-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "957"}, {"Month": "1973-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "924"}, {"Month": "1973-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "881"}, {"Month": "1973-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "837"}, {"Month": "1973-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "784"}, {"Month": "1973-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "791"}, {"Month": "1973-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "760"}, {"Month": "1973-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "802"}, {"Month": "1974-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "828"}, {"Month": "1974-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "778"}, {"Month": "1974-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "889"}, {"Month": "1974-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "902"}, {"Month": "1974-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "969"}, {"Month": "1974-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "947"}, {"Month": "1974-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "908"}, {"Month": "1974-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "867"}, {"Month": "1974-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "815"}, {"Month": "1974-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "812"}, {"Month": "1974-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "773"}, {"Month": "1974-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "813"}, {"Month": "1975-01", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "834"}, {"Month": "1975-02", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "782"}, {"Month": "1975-03", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "892"}, {"Month": "1975-04", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "903"}, {"Month": "1975-05", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "966"}, {"Month": "1975-06", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "937"}, {"Month": "1975-07", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "896"}, {"Month": "1975-08", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "858"}, {"Month": "1975-09", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "817"}, {"Month": "1975-10", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "827"}, {"Month": "1975-11", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "797"}, {"Month": "1975-12", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": "843"}, {"Month": null, "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": null}, {"Month": "Monthly milk production: pounds per cow. Jan 62 ? Dec 75", "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": null}, {"Month": null, "Monthly milk production: pounds per cow. Jan 62 ? Dec 75": null}]

  const data = R.pipe(
    // Map into more usable format
    R.map(datum => {
      const date = new Date(`${datum.Month}-01`)
      const amt = datum[R.keys(datum)[1]];
      return [date, amt];
    }),
    // Filter invalid dates
    R.filter(datum => !isNaN(datum[0].getMonth())),
    // Group by month
    R.groupBy(datum => datum[0].getMonth()),
    // Convert {month: [[date, amt], ...]} to {month: [amt]}
    R.mapObj(tuples => tuples.map(tuple => tuple[1])),
    // Average vals
    R.mapObj(vals => average(vals))
  )(dataset);

  let graphData = {
      labels: R.keys(data).map(mnum => months[mnum]),
      datasets: [
          {
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              label: "Cow data",
              data: R.values(data)
          },
      ]
  };

  <h1>Average monthly milk production by cow Jan 62 – Dec 75 (in lbs)</h1>
  <Bar data={graphData} width={1250} height={400} />
}

view Bar {
  let renderChart = () => {
    let context = view.refs.chart.getContext('2d')
    new Chart(context).Line(view.props.data)
  }

  // render after one frame so element exists
  // then if any props change keep updating
  setTimeout(() => {
    renderChart()
    on('update', renderChart)
  })

  <canvas ref="chart"
          width={view.props.width || 400}
          height={view.props.height || 400}></canvas>
}