Source: products/argos-saleslogix/src/Views/Charts/GenericPie.js

import declare from 'dojo/_base/declare';
import lang from 'dojo/_base/lang';
import array from 'dojo/_base/array';
import domGeo from 'dojo/dom-geometry';
import View from 'argos/View';
import _ChartMixin from './_ChartMixin';

/**
 * @class crm.Views.Charts.GenericPie
 *
 * @extends argos.View
 * @mixins crm.Views.Charts._ChartMixin
 *
 */
const __class = declare('crm.Views.Charts.GenericPie', [View, _ChartMixin], /** @lends crm.Views.Charts.GenericPie# */{
  id: 'chart_generic_pie',
  titleText: '',
  expose: false,
  chart: null,

  seriesColors: ['#1D5F8A', '#8ED1C6', '#9279A6', '#5C5C5C', '#F2BC41', '#66A140', '#AD4242',
    '#8DC9E6', '#EFA836', '#317C73', '#EB9D9D', '#999999', '#488421', '#C7B4DB',
    '#54A1D3', '#6e5282', '#AFDC91', '#69ADA3', '#DB7726', '#D8D8D8',
  ],

  chartOptions: {
    segmentShowStroke: true,
    segmentStrokeColor: '#EBEBEB',
    segmentStrokeWidth: 1,
    animateScale: false,
    legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li data-segment="<%= i %>"><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>',
  },

  /**
   * @property {String}
   * The type of chart that should be rendered. Can either be Pie or Doughnut. A bad or unknown value will result in a default of Doughnut.
   */
  renderAs: 'Doughnut',

  formatter: function formatter(val) {
    return val;
  },

  createChart: function createChart(rawData) {
    this.inherited(arguments);

    const defaultRenderAs = 'Doughnut';

    this.showSearchExpression();

    const data = array.map(rawData, (item, idx) => {
      return {
        value: Math.round(item.value),
        color: this._getItemColor(idx),
        highlight: '',
        label: item.name,
      };
    });

    if (this.chart) {
      this.chart.destroy();
    }

    const box = domGeo.getMarginBox(this.domNode);
    this.contentNode.width = box.w;
    this.contentNode.height = box.h;

    const ctx = this.contentNode.getContext('2d');

    const chart = new window.Chart(ctx);

    // Ensure the chart has the ability to render this type
    this.renderAs = window.Chart.types.hasOwnProperty(this.renderAs) ? this.renderAs : defaultRenderAs;

    this.chart = chart[this.renderAs](data, this.chartOptions);
    this.showLegend();
  },
  _getItemColor: function _getItemColor(index) {
    const len = this.seriesColors.length;
    const n = Math.floor(index / len);
    let theIndex = index;

    // if n is 0, the index will fall within the seriesColor array,
    // otherwise we will need to re-scale the index to fall within that array.
    if (n > 0) {
      theIndex = index - (len * n);
    }

    return this.seriesColors[theIndex];
  },
});

lang.setObject('Mobile.SalesLogix.Views.Charts.GenericPie', __class);
export default __class;