JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

JavaScript

const categories = [
  '2013,Qtr 4,October,1',
  '2013,Qtr 4,October,2',
  '2013,Qtr 4,October,3',

  '2013,Qtr 4,November,1',
  '2013,Qtr 4,November,2',
  '2013,Qtr 4,November,3',


  '2013,Qtr 4,December,1',
  '2013,Qtr 4,December,2',
  '2013,Qtr 4,December,3',


  '2014,Qtr 4,October,1',
  '2014,Qtr 4,October,2',
  '2014,Qtr 4,October,3',

  '2014,Qtr 4,November,1',
  '2014,Qtr 4,November,2',
  '2014,Qtr 4,November,3',


  '2014,Qtr 4,December,1',
  '2014,Qtr 4,December,2',
  '2014,Qtr 4,December,3',


];
/* 
const categories1 = [
  '2013,Qtr 4,October,1',
  '2013,Qtr 4,October,2',
    '2013,Qtr 4,October,3',

  '2013,Qtr 4,November,1',
  '2013,Qtr 4,November,2',
    '2013,Qtr 4,November,3',


  '2013,Qtr 4,December,1',
  '2013,Qtr 4,December,2',
    '2013,Qtr 4,December,3',


  '2014,Qtr 4,October,1',
  '2014,Qtr 4,October,2',
    '2014,Qtr 4,October,3',

  '2014,Qtr 4,November,1',
  '2014,Qtr 4,November,2',
    '2014,Qtr 4,November,3',


  '2014,Qtr 4,December,1',
  '2014,Qtr 4,December,2',
    '2014,Qtr 4,December,3',


]; */

const levelTracker = {};

categories.forEach((category, categoryIndex) => {
  const stepWidth = 20;
  const levelInfo = category.split(',').map((displayName, level) => {
    return {
      displayName,
      level
    };
  });
  const bottomLeafLevel = levelInfo.length - 1;

  console.log('levelInfo', levelInfo);

  let hasParentValueChanged = false;
  let parentLevel = bottomLeafLevel;

  //Iterate levelInfo

  levelInfo.forEach(({
    level,
    displayName
  }, index) => {



    if (hasParentValueChanged && parentLevel === level) {
      // Reset parent level
      hasParentValueChanged = false;
      parentLevel = bottomLeafLevel;
    }

    if (levelTracker[index] === undefined) {

      // Initialize level tracker
      levelTracker[index] = {
        label: displayName,
        elongatedWidth: 0,
        startX: 0,
        level
      };

      if (level !== 0 && level < bottomLeafLevel) {
        // Draw horizontal group...