import { Host, h } from '@stencil/core';
import { BarController, BarElement, CategoryScale, Chart, Legend, LinearScale, Tooltip } from 'chart.js';
import { getBackgroundColor, getHtmlLegendPlugin, getBaseConfig } from '../../utils/chartHelpers';
/**
 * A bar chart component.  Client-side only.
 * @docsPage
*/
export class BsChartBar {
  constructor() {
    this.chartTitle = undefined;
    this.data = undefined;
    this.dataIdxLabels = undefined;
    this.showLegend = true;
    this.showTooltips = true;
    this.showXGrid = false;
    this.showYGrid = false;
    this.stacked = false;
    this.xLabel = '';
    this.yLabel = '';
  }
  get chartConfig() {
    const config = getBaseConfig('bar', this.datasets, this.dataIdxLabels, this.showTooltips);
    config.plugins = [getHtmlLegendPlugin(this.legendList)];
    config.options.scales = {
      x: {
        grid: {
          display: this.showXGrid
        },
        stacked: this.stacked,
        title: {
          display: !!this.xLabel,
          text: this.xLabel,
        }
      },
      y: {
        grid: {
          display: this.showYGrid
        },
        stacked: this.stacked,
        title: {
          display: !!this.yLabel,
          text: this.yLabel
        }
      }
    };
    return config;
  }
  get datasets() {
    var _a;
    return ((_a = this.data) === null || _a === void 0 ? void 0 : _a.map((dataset, idx) => (Object.assign(Object.assign({}, dataset), { backgroundColor: getBackgroundColor(idx), categoryPercentage: this.data.length > 1 ? .5 : .33 })))) || [];
  }
  get title() {
    return this.chartTitle || `${this.yLabel} / ${this.xLabel}`;
  }
  connectedCallback() {
    Chart.register(BarController, BarElement, CategoryScale, Legend, LinearScale, Tooltip);
  }
  componentDidLoad() {
    if (!this.canvas)
      return;
    Chart.defaults.font.family = "'Roobert', sans-serif";
    this.chart = new Chart(this.canvas, this.chartConfig);
  }
  updateConfig(newVal, oldVal) {
    if (!this.chart || newVal === oldVal)
      return;
    this.chart.options = this.chartConfig.options;
    this.chart.update();
  }
  updateData() {
    if (!this.chart)
      return;
    this.chart.data = this.chartConfig.data;
    this.chart.update();
  }
  render() {
    return (h(Host, null, h("figure", null, h("div", null, h("canvas", { "aria-label": this.title, ref: el => this.canvas = el, role: "img" })), h("div", null, h("bs-chart-table", { data: this.data, dataIdxLabels: this.dataIdxLabels, tableTitle: this.title }), h("figcaption", { "data-hidden": !this.showLegend || undefined, part: "legend" }, h("ul", { ref: el => this.legendList = el }))))));
  }
  static get is() { return "bs-chart-bar"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-chart-bar.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-chart-bar.css"]
    };
  }
  static get properties() {
    return {
      "chartTitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Provide a title for the accessible text table representation of this chart."
        },
        "attribute": "chart-title",
        "reflect": false
      },
      "data": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "ChartData[]",
          "resolved": "ChartData[]",
          "references": {
            "ChartData": {
              "location": "import",
              "path": "../../types/propTypes"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "mapTo",
              "text": "BarChartData"
            }],
          "text": "Array of datasets."
        }
      },
      "dataIdxLabels": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "string[]",
          "resolved": "string[]",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "mapTo",
              "text": "BarChartIdxLabels"
            }],
          "text": "Array of labels for each point along the X-Axis."
        }
      },
      "showLegend": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Pass `true` to show legend."
        },
        "attribute": "show-legend",
        "reflect": false,
        "defaultValue": "true"
      },
      "showTooltips": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Pass `true` to show tooltips on hover."
        },
        "attribute": "show-tooltips",
        "reflect": false,
        "defaultValue": "true"
      },
      "showXGrid": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Pass `true` to show vertical gridlines."
        },
        "attribute": "show-x-grid",
        "reflect": false,
        "defaultValue": "false"
      },
      "showYGrid": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Pass `true` to show horizontal gridlines."
        },
        "attribute": "show-y-grid",
        "reflect": false,
        "defaultValue": "false"
      },
      "stacked": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Pass `true` to stack each dataset's data at a given index into a single column."
        },
        "attribute": "stacked",
        "reflect": false,
        "defaultValue": "false"
      },
      "xLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "Month"
            }],
          "text": "Label for the X-Axis."
        },
        "attribute": "x-label",
        "reflect": false,
        "defaultValue": "''"
      },
      "yLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "TPS Reports Submitted"
            }],
          "text": "Label for the Y-Axis."
        },
        "attribute": "y-label",
        "reflect": false,
        "defaultValue": "''"
      }
    };
  }
  static get elementRef() { return "hostEl"; }
  static get watchers() {
    return [{
        "propName": "showLegend",
        "methodName": "updateConfig"
      }, {
        "propName": "showTooltips",
        "methodName": "updateConfig"
      }, {
        "propName": "showXGrid",
        "methodName": "updateConfig"
      }, {
        "propName": "showYGrid",
        "methodName": "updateConfig"
      }, {
        "propName": "stacked",
        "methodName": "updateConfig"
      }, {
        "propName": "xLabel",
        "methodName": "updateConfig"
      }, {
        "propName": "yLabel",
        "methodName": "updateConfig"
      }, {
        "propName": "data",
        "methodName": "updateData"
      }, {
        "propName": "dataIdxLabels",
        "methodName": "updateData"
      }];
  }
}
//# sourceMappingURL=bs-chart-bar.js.map
