JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<pre><code id="debug"></code></pre>

CSS

body {
  bacckground-color:lightgreen;
  color:#000;
}

JavaScript

const groupNames=["1","1-3","4-10","11-30","31","sum"]
const data=[
  {
    "sum": 36,
    "consignee": "1100",
    "values": [
      {
        "group": "11-30",
        "value": 16
      },
      {
        "group": "1",
        "value": 20
      }
    ]
  },
  {
    "sum": 1672,
    "consignee": "2700",
    "values": [
      {
        "group": "31",
        "value": 1253
      },
      {
        "group": "11-30",
        "value": 134
      },
      {
        "group": "4-10",
        "value": 18
      },
      {
        "group": "1",
        "value": 267
      }
    ]
  },
  {
    "sum": 1449,
    "consignee": "3000",
    "values": [
      {
        "group": "4-10",
        "value": 216
      },
      {
        "group": "1",
        "value": 540
      },
      {
        "group": "11-30",
        "value": 164
      },
      {
        "group": "1-3",
        "value": 90
      },
      {
        "group": "31",
        "value": 439
      }
    ]
  },
  {
    "sum": 1,
    "consignee": "30CS",
    "values": [
      {
        "group": "1",
        "value": 1
      }
    ]
  },
  {
    "sum": 3,
    "consignee": "30FM",
    "values": [
      {
        "group": "31",
        "value": 2
      },
      {
        "group": "4-10",
        "value": 1
      }
    ]
  },
  {
    "sum": 257,
    "consignee": "4200",
    "values": [
      {
        "group": "4-10",
        "value": 25
      },
      {
        "group": "1",
        "value": 228
      },
      {
        "group": "31",
        "value": 4
      }
    ]
  },
  {
    "sum": 9,
    "consignee": "42CS",
    "values": [
      {
        "group": "4-10",
        "value": 2
      },
      {
        "group": "1",
        "value": 7
      }
    ]
  }
];

function normalizeValues(values) {
   return groupNames.map((groupName)=>{
     const group=values.find(value=>value.group===groupName)
     if (group!=null) {
      return group
     } else {
       return {group:groupName,value:0}
     }
   })
}

const...