JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<!-- Cant align line with x axis withiut breaking bar chart  -->
<svg width="960" height="500" id="chart"></svg>

JavaScript

let payloadResponse = {
    "text": "",
    "chart": "bar",
    "dims": [{
      "dim0": "Year Month"
    }],
    "metrics": [{
      "metric0": "Joiners"
    }, {
      "metric1": "Leavers"
    }],
    "totals": [{
      "metric0": "400",
      "metric1": "446"
    }],
    "data": [{
      "dim0": "2021-01",
      "metric0": "36",
      "metric1": "46"
    }, {
      "dim0": "2021-02",
      "metric0": "27",
      "metric1": "30"
    }, {
      "dim0": "2021-03",
      "metric0": "33",
      "metric1": "46"
    }, {
      "dim0": "2021-04",
      "metric0": "35",
      "metric1": "40"
    }, {
      "dim0": "2021-05",
      "metric0": "36",
      "metric1": "45"
    }, {
      "dim0": "2021-06",
      "metric0": "48",
      "metric1": "36"
    }, {
      "dim0": "2021-07",
      "metric0": "31",
      "metric1": "37"
    }, {
      "dim0": "2021-08",
      "metric0": "39",
      "metric1": "33"
    }, {
      "dim0": "2021-09",
      "metric0": "34",
      "metric1": "45"
    }, {
      "dim0": "2021-10",
      "metric0": "47",
      "metric1": "43"
    }, {
      "dim0": "2021-11",
      "metric0": "34",
      "metric1": "45"
    }]
  }
	let options = {};
  let barWidth;
  let labelLengths = [];

  const response = _.cloneDeep(payloadResponse);
  const d3ChartData = [];
  const horizontal = false
  
  
  console.log("response","",response)

  response.data.forEach(m => {
    m.metric0 = parseFloat(m.metric0);
  });


  const total = _.sumBy(response.data, 'metric0')
  const { percentValues } = options;

  console.log("percentValues","",percentValues)
  
  const metrics = [];
  response.metrics.forEach(m => {
    metrics.push({ key: Object.keys(m)[0], name: Object.values(m)[0] });
  });
  
    const dimensions = [];
  response.dims.forEach(d => {
    dimensions.push({ key: Object.keys(d)[0], name: Object.values(d)[0] });
  });
  
    response.data.forEach(row => {
    const newobject = {};
    newobject["category"] = row[dimensions[0].key];
   ...