import loadScript from "discourse/lib/load-script";
import { number } from "discourse/lib/formatter";

export default Ember.Component.extend({
  tagName: "canvas",
  refreshChart() {
    const ctx = this.$()[0].getContext("2d");
    const model = this.get("model");
    const rawData = this.get("model.data");

    var data = {
      labels: rawData.map(r => r.x),
      datasets: [
        {
          data: rawData.map(r => r.y),
          label: model.get("title"),
          backgroundColor: "rgba(200,220,240,0.3)",
          borderColor: "#08C"
        }
      ]
    };

    const config = {
      type: "line",
      data: data,
      options: {
        responsive: true,
        tooltips: {
          callbacks: {
            title: context =>
              moment(context[0].xLabel, "YYYY-MM-DD").format("LL")
          }
        },
        scales: {
          yAxes: [
            {
              display: true,
              ticks: {
                callback: label => number(label),
                suggestedMin: 0
              }
            }
          ]
        }
      }
    };

    this._chart = new window.Chart(ctx, config);
  },

  didInsertElement() {
    loadScript("/javascripts/Chart.min.js").then(() =>
      this.refreshChart.apply(this)
    );
  }
});