Untitled

import $ from 'jquery';

const trafficSourcesRight = {
  settings: {
    target: '.trafficSourcesRight',
    table: '#trafficSourcesRightTable',
    loader: '.loader',
  },
  init() {
    if ($(this.settings.target).length > 0) {
      this.catchDOM(this.settings);
      this.createTable();
    }
  },
  catchDOM(settings) {
    const target = $(settings.target);
    this.$target = {
      root: target,
      table: target.find(this.settings.table),
      loader: target.find(this.settings.loader),
    };
  },
  createTable() {
    $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
      return {
        iStart: oSettings._iDisplayStart,
        iEnd: oSettings.fnDisplayEnd(),
        iLength: oSettings._iDisplayLength,
        iTotal: oSettings.fnRecordsTotal(),
        iFilteredTotal: oSettings.fnRecordsDisplay(),
        iPage: Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
        iTotalPages: Math.ceil(
          oSettings.fnRecordsDisplay() / oSettings._iDisplayLength
        ),
      };
    };
    let o;
    this.table = $(this.$target.table).DataTable({
      dom: '<"top">rt<"bottom"i <"d-flex justify-content-end align-items-center"p>><"clear">',
      infoCallback: function (settings, start, end, max, total) {
        o = this.fnPagingInfo();
        return `${start}-${end} of ${total}  | Page ${o.iPage + 1} of ${o.iTotalPages
          } `;
      },
      language: {
        lengthMenu:
          'Show: &nbsp; <select>' +
          '<option value="5">5</option>' +
          '<option value="10">10</option>' +
          '<option value="20">20</option>' +
          '<option value="-1">All</option>' +
          '</select> ',
        info: '_START_-_END_  of _TOTAL_ ',
        paginate: {
          previous: '<span class="icon-arrow-ios-left"></span>',
          next: '<span class="icon-arrow-ios-right"></span>',
        },
      },
      pageLength: 5,
      columnDefs: [
        { orderable: true, targets: [1] },
        { orderable: false, targets: [0] },
        { type: 'natural', targets: [1] },
      ],
      pagingType: 'simple',
      ajax: {
        url: '/analytics/site_traffic/traffic_sources/region',
        type: 'GET',
        data: {
          startDate: localStorage.getItem("startDate"),
          endDate: localStorage.getItem("endDate")
        },
      },
      columns: [
        { data: 'country' },
        { data: 'total' }
      ],
      bSort: true,
      drawCallback: function () {
        let api = this.api();
        let rowCount = api.rows({ page: 'current' }).count();
        if (
          !$('.trafficSourcesRight tbody tr td:first-child').hasClass(
            'dataTables_empty'
          )
        ) {
          for (
            let i = 0;
            i < api.page.len() - (rowCount === 0 ? 1 : rowCount);
            i++
          ) {
            $('.trafficSourcesRight tbody').append(
              $('<tr ><td>&nbsp;</td><td></td><td></td></tr>')
            );
          }
        }
      },
    });
    $('.dataTables_length').addClass('bs-select');
    $(this.$target.loader).hide();
  },
  update() {
    trafficSourcesRight.table.destroy()
    trafficSourcesRight.createTable()
  },
};

export default trafficSourcesRight;
{/* <td>United States<div class="progressBar trafficSourcesRight__progress">
    <div class="trafficSourcesRight__progress-item progressBar__item -active"
          data-progress="45">
          <div
              class="progressBar__track trafficSourcesRight__progress-track">
              <div
                  class="progressBar__thumb trafficSourcesRight__progress-thumb">
              </div>
          </div>
      </div>
  </div>
</td>
<td>2 345 (45%)</td> */}
window.updateAnalyticsSiteTrafficTrafficSourcesRight = trafficSourcesRight.update