Users Choices Final

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">

<div class="content-container">
  <figure class="highcharts-figure">
      <div id="treemap-datatable"></div>
      <p class="highcharts-description">
        Η σχέση του πελάτη ανά κατηγορία ειδών
      </p>
  </figure>

  <table id="products-table" class="display">
      <thead>
          <tr>
              <th>Κατηγορία</th>
              <th>Υποκατηγορία</th>
              <th>Είδος</th>
              <th>Ποσότητα</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
  </table>
</div>

CSS

/* Custom CSS for the treemap-datatable container */
#treemap-datatable {
    width: 100%;
    height: 100%;
    min-height: 600px;
    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%;
}

.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;
}

/* Flexbox container */
.content-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 600px;
    min-width: 310px;
    margin: 0 auto;
}

/* Flexbox items */
.highcharts-figure,
#products-table {
    width: 100%;
   ...

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 = [];
    const categoryMap = {}; // To map rootNode IDs to category names
    const subcategoryMap = {}; // To map rootNode IDs to subcategory names

    for (let category in data) {
      if (Object.hasOwnProperty.call(data, category)) {
        categoryVal = 0;
        categoryP = {
          id: 'id_' + categoryI,
          name: category,
          color: Highcharts.getOptions().colors[categoryI]
        };
        categoryMap[categoryP.id] = category; // Map category ID to name
        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
            };
            subcategoryMap[subcategoryP.id] = subcategory; // Map subcategory ID to name
            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 =...