Users Choices With Datatables 2.1.2

by dimitrisv

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/2.1.2/js/dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.2/css/dataTables.dataTables.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Jura:wght@400;700&display=swap">

<figure class="highcharts-figure">
    <div id="treemap-datatable" style="min-width: 310px; min-height: 600px; max-width: 1000px; margin: 0 auto"></div>
    <p class="highcharts-description" style="text-align:center; width:100%; font-family: 'Jura', sans-serif;">
      Η σχέση του πελάτη ανά κατηγορία ειδών
    </p>
</figure>

<table id="products-table" class="display" style="width:100%; font-family: 'Jura', sans-serif;">
    <thead>
        <tr>
            <th>Κατηγορία</th>
            <th>Υποκατηγορία</th>
            <th>Είδος</th>
            <th>Ποσότητα</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

CSS

/* Custom CSS for the treemap-datatable container */
#treemap-datatable {
    width: 100%;
    height: 100%;
    max-width: 1900px;
    max-height: 900px;
    margin: 0 auto;
}

/* Responsive styles */
@media (max-width: 767px) {
    /* Mobile devices */
    #treemap-datatable {
        max-width: 100%;
        max-height: 400px;
    }

    /* Hide the first column in the DataTable on mobile devices */
    #products-table thead th:nth-child(1),
    #products-table tbody td:nth-child(1) {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablets */
    #treemap-datatable {
        max-width: 100%;
        max-height: 600px;
    }
}

@media (min-width: 1025px) {
    /* Desktops */
    #treemap-datatable {
        max-width: 100%;
        max-height: 900px;
    }
}

/* Custom CSS for DataTables elements */
.dt-container,
.dt-empty-footer,
.dt-layout-row,
.dt-layout-cell,
.dt-layout-start,
.dt-layout-end,
.dt-length,
.dt-input,
.dt-search,
.dt-layout-full,
.dt-info,
.dt-paging-button,
.dt-paging-button.disabled {
    font-family: 'Jura', sans-serif;
}

.highcharts-data-table table {
    font-family: 'Jura', sans-serif !important;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

$(document).ready(function() {
  // Fetch data
  const fetchData = async () => {
    const response = await fetch('https://femme-fatale.gr/wp-content/uploads/exports/sample-client-v2.json');
    return response.json();
  };

  fetchData().then(data => {
    let categoryP, categoryVal, categoryI = 0, subcategoryP, subcategoryI, productP, productI;
    const points = [];
    const tableData = [];
    const allTableData = [];

    for (let category in data) {
      if (Object.hasOwnProperty.call(data, category)) {
        categoryVal = 0;
        categoryP = {
          id: 'id_' + categoryI,
          name: category,
          color: Highcharts.getOptions().colors[categoryI]
        };
        subcategoryI = 0;
        for (let subcategory in data[category]) {
          if (Object.hasOwnProperty.call(data[category], subcategory)) {
            subcategoryP = {
              id: categoryP.id + '_' + subcategoryI,
              name: subcategory,
              parent: categoryP.id
            };
            points.push(subcategoryP);

            // Find the maximum value in this subcategory
            let maxVal = 0;
            for (let product in data[category][subcategory]) {
              if (Object.hasOwnProperty.call(data[category][subcategory], product)) {
                maxVal = Math.max(maxVal, +data[category][subcategory][product].value);
              }
            }

            productI = 0;
            for (let product in data[category][subcategory]) {
              if (Object.hasOwnProperty.call(data[category][subcategory], product)) {
                const baseColor = Highcharts.getOptions().colors[categoryI];
                const value = +data[category][subcategory][product].value;
                const transparency = 0.2 + 0.8 * (value / maxVal); // Scale transparency based on value
                const color = Highcharts.color(baseColor).setOpacity(transparency).get();

                productP = {
                  id: subcategoryP.id + '_' +...