Расположение текста рядом с div на основе доступного пространства

Question

Цель:

В настоящее время строит график в React, пытаясь показать доступное время в течение определенного периода времени. Диаграмма заполнена элементами, которые имеют время и имя. Я хочу динамически расположить текст (имя) рядом с div (время), если есть свободное место. Цель состоит в том, чтобы иметь диаграмму со столбцами, где столбцы расположены рядом друг с другом в новой строке с названием элемента рядом с ним.

В конце оно должно выглядеть примерно так:

-- Item 1
  ---- Item 2
      ----- Item 3
           --- Item 4
              -- Item 5
                ---- Item 6

Диаграмма может получить максимальную длину родительского контейнера. Поэтому может случиться так, что рядом с баром нет места. В этом случае я хотел бы отобразить текст в левой части панели. Это должно происходить так, чтобы полосы все еще «касались» друг друга, то есть текст оставлялся бы там, где была бы строка, если бы она была справа.

Окончательный пример:

Container:
____________________________
|  -- Item 1               |                     
|    ---- Item 2           |
|        ----- Item 3      |
|              --- Item 4  |
|          Item 5 --       |
|             Item 6 ----  |
____________________________

Проблема:

Мой код уже правильно отображает блоки. У меня проблема в том, что текст толкает все это (включая полосу) вправо, чтобы он больше не выравнивался с полосой выше.

____________________________
|  -- Item 1               |                     
|    ---- Item 2           |
|        ----- Item 3      |
|              --- Item 4  |
|                  Item 5 --       
|                    Item 6 ----  
____________________________

Код:

{
  flatArray.map((p, index) => {
    usedWidth += p.width;
    if (usedWidth < totalWidth / 2) {
      return (
        <Grid
          container
          direction="column"
          alignItems="center"
          style={{ marginTop: 30 * index, width: p.width, height: 30 }}
        >
          <div
            style={{
              backgroundColor: p.color,
              width: p.width,
              height: 30
            }}
          />
          <div style={{ display: "flex" }}>
            <Typography variant="body1" noWrap style={{ marginLeft: 10 }}>
              {p.title}
            </Typography>
          </div>
        </Grid>
      );
    }
    return (
      <Grid
        container
        direction="column"
        alignItems="center"
        style={{ marginTop: 30 * index, width: p.width, height: 30 }}
      >
        <div style={{ display: "flex", float: "left" }}>
          <Typography variant="body1" noWrap>
            {p.title}
          </Typography>
        </div>
        <div
          style={{
            backgroundColor: p.color,
            width: p.width,
            height: 30
          }}
        />
      </Grid>
    );
  });
}

Кроме того, сейчас я просто смотрю, будет ли планка расширяться более чем вдвое, поскольку я не мог найти способ проверить, достаточно ли этого. место для текста осталось.

Answer 1

Попробуйте это

var a = document.getElementById("menu");
var px=0;
var cDiv = a.children;
for (var i = 0; i < cDiv.length; i++) {
    if (cDiv[i].tagName == "LI") {   //or use toUpperCase()
    px = px +20;
    cDiv[i].style.marginLeft = px+'px';  //do styling here
    }
}

.menu{
  list-style-type : none;
}

<ul class="menu" id="menu">
  <li>----Tea</li>
  <li>----Coffee</li>
  <li>----Boost</li>
  <li>----Horlicks</li>
  <li>----Green Tea</li>
</ul>