Рассчитать фракцию как значение относительно других фракций

Question

Извиняюсь за то, что не могу показать код, я просто не уверен, как это сделать.

Я бы хотел добиться чего-то похожего на display: flex/grid с дробями:

Учитываяширина контейнера: 200px

И элементы: [0.5, 1, 50px]

Я должен быть в состоянии рассчитать дробные относительно друг друга:

item1: 50 (half the size of item 2)
item2: 100 (double the size of item 1)
item3: 50 (static size not a fraction)

const totalSize = 900;

const items = [1, 0.2, 75, 0.6, 1, 100];

const totalStaticSize = items.filter(n => n > 1).reduce((acc, n) => acc + n, 0);

const derivedItems = items.map(item => {
  if (item > 1) {
    // A static value.
    return item;
  }
  
  // How to calculate this fractional item relative to others?
  return item;
});

console.log(derivedItems);

Answer 1

let compute = (values, total) => {
  let parts = values.map(value => ({value: parseFloat(value), absolute: value.endsWith('px')}));
  let totalAbsolutes = parts.filter(p => p.absolute).reduce((sum, p) => sum + p.value, 0);
  let totalFractions = parts.filter(p => !p.absolute).reduce((sum, p) => sum + p.value, 0);
  return parts.map(p => (p.absolute ? p.value : p.value / totalFractions * (total - totalAbsolutes)) + 'px');
};

let computedValues = compute(['0.5', '1', '50px'], 200);
console.log(computedValues);

Answer 2

После вычитания статических элементов рассчитайте сумму дробных элементов, затем вы можете рассчитать процент каждого значения относительно оставшейся ширины контейнера (за вычетом суммы статических элементов):

const totalSize = 900;
const items = [1, 0.2, 75, 0.6, 1, 100];
const totalStaticSize = items.filter(n => n > 1).reduce((acc, n) => acc + n, 0);
const sum = derivedItems.reduce((a, b) => a + b, 0);
const percentages = derivedItems.map(d => d / sum);
const relativeToContainer = percentages.map(p => p * (totalSize - totalStaticSize));