ui/components/data/Chart.yaml

name: Chart

constructor:
  signature: new Chart(canvas, options)
  options:
    type: line, bar, or pie. Default is line.
    data: Chart.js data object or source object array.
    options: Chart.js options object.
    map: "{ labels, values, label } for source object arrays."

component:
  attributes:
    type: line, bar, or pie.
  state:
    data: Chart.js data object or source object array.
    options: Chart.js options.
    map: "{ labels, values, label }"
  property:
    chartInstance: Underlying Chart instance.

methods:
  update: Update optional data and redraw.
  destroy: Destroy the underlying Chart.js instance.

rules:
  - Give the Chart container an explicit height.
  - Use map only when data is an array of objects.
  - Chart destroys its Chart.js instance when the component unloads.

example: |
  <Chart id="sales" type="bar"></Chart>
  <script>
  const chart = document.querySelector('#sales')
  chart.state.data = [
    { month: 'Jan', amount: 12 },
    { month: 'Feb', amount: 18 }
  ]
  chart.state.map = { labels: 'month', values: 'amount' }
  </script>

tests:
  - apigo.cc/web/chart/test/all.spec.js