function trapezoidPath (height, topBase, bottomBase) {
  const
    topBaseOffset = (100 - topBase) / 2,
    bottomBaseOffset = (100 - bottomBase) / 2

  const
    topRule = topBaseOffset === 0 ? '50% 0' : `${topBaseOffset}% 0%, ${100 - topBaseOffset}% 0%`,
    bottomRule = `${100 - bottomBaseOffset}% 100%, ${bottomBaseOffset}% 100%`

  return `polygon(${topRule}, ${bottomRule})`
}

function calculateStyles (data) {
  const totalArea = data.reduce((acc, entry) => acc + entry.value, 0)

  // At each iteration of data, we calculate a triangle sizes; this triangle is
  // the sum of the slices that we already iterated from top to bottom of our "pyramid"
  //
  // ````/\ 
  // ```/..\ - first slice --> triangle
  // ``/....\- second slice + first --> triangle
  // `/______\ - third slice + first + second --> triangle
  // 
  // To find the sizes of each individual slice, we will just substract
  // the current triangle size from the previous value
  let
    areaAcc = 0,
    prevSizesCoef = 0

  // Create the style data for each item
  const styles = data.map(item => {
    // Calculate the area ratio of current triangle
    areaAcc = areaAcc + item.value
    const areaRatio = areaAcc / totalArea

    // Calculate the slice sizes coefficient
    const sizesCoef = Math.sqrt(areaRatio)
    const sliceHeight = sizesCoef - prevSizesCoef

    // Calculate path style
    const path = trapezoidPath(sliceHeight * 100, prevSizesCoef * 100, sizesCoef * 100)

    // Update
    prevSizesCoef = sizesCoef

    return (
      `clip-path: ${path};
      height: ${sliceHeight * 100}%;
      width: 100%;`
    )
  })

  return styles
}

function Pyramid(data) {
  const styles = calculateStyles(data)
  
  const containerStyle = (
    `height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;`
  )
  
  const template = (
  `<div class="pyramid-chart-container" style="${containerStyle}">
    ${data.map((entry, index) => 
    `<div class="pyramid-chart-slice"
          title="${entry.title}"
          style="${styles[index]}">
    </div>`).join('')}
  </div>`)
  
  return template
}

const data = [
  { value: 11, title: 'Grains' },
  { value: 9, title: 'Fruit & Vegetables' },
  { value: 6, title: 'Diary & Meat' },
  { value: 2, title: 'Grass, Oil & Sweets' }
]

data.reverse()

document.getElementById('root').innerHTML = Pyramid(data)