Бары условного форматирования DataTables

Question

Я разрабатываю приложение, которое использует таблицы данных для визуализации определенных статистических данных.

Я получаю от API данные в следующем формате:

{
    "data": [{
        "companyName": "company1",
        "growth": 15
    },
    {
        "companyName": "company2",
        "growth": -8
    },
    {
        "companyName": "company3",
        "growth": 23
    }]
}

Что такоепо сути, название компании и годовой рост выручки (%).

Я хотел бы реализовать функцию условного форматирования в формате MS Excel, которая отображает цветные полосы внутри процентных ячеек.(цвет столбца красный для отрицательных значений и зеленый для положительных значений, а его размер нормализован до минимального / максимального значения и ширины столбца).

Пока мой HTML-код:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js" charset="utf8"></script>  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="revenue-growth"></table>

И jQuery:

$('#revenue-growth').DataTable({
    ajax: {
        url: 'https://192.168.0.1/revenue',
        method: 'GET',
        dataSrc: 'data'
    }
    dom: 'Bfrtip',
    pageLength: 50,
    order: [0, 'asc']
    columDefs: [{
            targets: 0,
            data: 'companyName',
            title: 'Company Name'
        }, {
            targets: 1,
            data: 'growth',
            title: 'YoY revenue growth, %'
        }
    ]
})

Итак, мой вопрос: есть ли способ реализовать такую ​​функцию с нуля, или, может быть, уже есть плагин, который делает именно это?

Я не нашел ничего соответствующего моему запросу здесь, в stackoverflow, и я не смог определить методы API DataTables, которые могут решить мою проблему, поэтому я был бы очень признателен, если бы вы могли указать мне на это.правильное направление.

Answer 1

Вы можете использовать откат render для создания баров внутри ячеек в столбце роста.

1. Вы должны найти максимальный рост внутри набора данных.

2. При обратном вызове рендеринга:

   2.1.проверьте, является ли рост отрицательным или положительным.

   2.2.рассчитать ширину бара-% на основе роста и максимума.

   2.3.Создайте и добавьте элементы на основе этой информации.

Вот простой пример:

$(document).ready(function() {
  
  const dataSet = [
    { companyName: "Company A", growth: -12 },
    { companyName: "Company B", growth:  31 },
    { companyName: "Company C", growth:   7 },
    { companyName: "Company D", growth:   0 },
    { companyName: "Company E", growth: -29 },
    { companyName: "Company F", growth:  23 },
  ];
  
  // Get absolute maximum value of grwoth from dataset
  const maxGrowthValue = Math.max.apply(Math, dataSet.map(function(item) { return Math.abs(item.growth); }));
  
  const table = $('#example').DataTable({
    data: dataSet,
    columns: [
      {
        data: 'companyName',
        title: "Company Name",
      },
      {
        data: 'growth',
        title: "YoY revenue growth, %",
        // Custom render the cell of the growth-column
        render: (data, type, row, meta) => {
          const isPositive = (Number(data) > 0);
          const barWidth = 100 / maxGrowthValue * Math.abs(Number(data)) * 0.5;
          const $growthBarContainer = $('<div>', {
            class: "growth-bar",
          });
          const $growthBar = $('<div>', {
            class: "bar bar-" + (isPositive ? 'positive' : 'negative'),
          });
          $growthBar.css({
            width: barWidth.toFixed(2) + '%',
          });
          $growthBarContainer.append($growthBar);
          $growthNumber = $('<div>', {
            class: "growth-number",
          });
          $growthNumber.text(data + '%');
          $growthBarContainer.append($growthNumber);
          return $growthBarContainer.prop("outerHTML");
        },
      },
    ],
  });
  
});

.growth-bar {
  display: inline-block;
  width: 120px;
  height: 12px;
  position: relative;
  background-color: #eee;
  border: 1px solid #424242;
}

.growth-bar > .bar {
  width: 0%;
  height: 100%;
  position: absolute;
}

.growth-bar > .bar.bar-negative {
  right: 50%;
  background-color: red;
}

.growth-bar > .bar.bar-positive {
  left: 50%;
  background-color: green;
}

.growth-bar > .growth-number {
  position: absolute;
  top: 1px;
  right: 2px;
  color: #fff;
  /* shadow for better readability */
  text-shadow: 0px -1px 0px rgba(0,0,0,.5), 0px 1px 0px rgba(0,0,0,.5), -1px 0px 0px rgba(0,0,0,.5), 1px 0px 0px rgba(0,0,0,.5), 0px 0px 1px rgba(0,0,0,.25), 0px 0px 2px rgba(0,0,0,.5), 0px 0px 3px rgba(0,0,0,.75);
  font-size: 10px;
  line-height: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%"></table>