<h1>Pyramid Chart Component</h1>
<div id='example'></div>

<div class='description'>
  <h2>Plain</h2>
  <p>It's plain HTML and CSS in output.</p>
  <h2>Responsivness</h2>
  <p>It's responsive by default. Just set the height and width for your container.</p>
  <h2>Interactivity</h2>
    <p>You can use both JS or CSS to make it interactive. In this example only <code>:hover</code> is used</p>
</div>
<div class='description'>
  <h2>Defaults</h2>
  <p>The default styles are inline inside the component.</p>
    <p>The default <strong>slices</strong> styles are <strong><code>clip-path</code></strong>, <strong><code>height</code></strong>, <strong><code>width</code></strong>. <br />
  Them <strong>should not be overrided</strong>.</p>
  <p>The default <strong>container</strong> styles make it a flexbox. You could override it, but it's not recommended.</p> 
  <h2>Use in your Pens</h2>
  <p>You can use this Pen's JS as a dependency in your Pens.</p>
  <p>This example is tuned inside HTML section, so don't worry — it will not be drawn in your code.</p>
</div>
<div class='description'>
  <h2>Known issues</h2>
  <ol>
    <li>
      <p>
      <strong>Slice height percentage</strong>: you can't tweak it.
      A slice height is a percentage relative to the total container height.
      <br />
      You can tweak the width, as it's 100% of the total;
      </p>
      <p>
      <strong>Workaround</strong>: use paddings to resize;
      </p>
      <p>
      <strong>Fix</strong>: you can try to put slices inside containers and apply the calculated height to containers while the slices will be 100% in height.
      </p>
    </li>
    <li>
      <p>
        <strong>Borders</strong>: that's it — you can't just assign plain css borders to it.
      </p>
      <p>
      <strong>Workaround</strong>: currently no simple workarounds.
      </p>
      <p>
      <strong>Fix</strong>: as in previous issue you can try to play with containers. <br />
        You can use container background and apply to it the same <code>clip-path</code>. If container will be  bigger than slice, it will look like a border.
      <p>
        Another option could be using SVG.
      </p>
      <p>
        The drawback is that it kills the HTML & CSS simplicity of this component.
      </p>
    </li>
  </ol>
</div>
<script>
  // I use the JS source as external for other pens, that's why I render this example inline here
window.onload = function () {
  ReactDOM.render(
    React.createElement(
      Pyramid,
      { data: [
          { value: 1, 
            props: { 
              title: '25 percent', 
              style: { backgroundColor: 'steelblue' }
            }},
          { value: 1, 
            props: { 
              title: '25 percent', 
              style: { backgroundColor: 'yellow' }
            }},
          { value: 1, 
            props: { 
              title: '25 percent', 
              style: { backgroundColor: 'khaki' }
            }},
          { value: 1, 
            props: { 
              title: '25 percent', 
              style: { backgroundColor: '#C86428' }
            }}
      ]}),
    document.getElementById('example')
  )
}
</script>