<div class="content">
  <div class="content__container">
    <h3>Radial Chart</h3>
    <rs-radial-chart>
      <div id="chart"></div>
      <div id="legend"></div>
    </rs-radial-chart>
  </div>
</div>

.content__container {
  padding: 1em;
}

rs-radial-chart {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


/* --- Chart customisation --- */

.stripe {
  mask: url(#mask-stripe);
}


/* --- Segment background hover  --- */

.d3-rc .segment-bg {
  transition: opacity cubic-bezier(0.175, 0.885, 0.335, 1.155) 800ms;
}

.d3-rc .segment-bg:not(:hover) {
  opacity: 0.0;
}

.d3-rc .segment-bg:hover {
  opacity: 1.0;
}

/* --- Average band and colour  --- */

.d3-rc .band circle {
  fill: none;
  stroke-width: 16px;
  stroke-opacity: 0.4;
}

#legend {
  height: 150px;
}

function _dummyData(range) {
  let color = d3.scale.category20(),
      r = RedsiftCore.Lang.localShortMonths();
  r = r.concat(RedsiftCore.Lang.localShortMonths(), RedsiftCore.Lang.localShortMonths());
  return r.map((m, i) => {
    let v = Math.random() * range;
    return {
      name: m,
      value: v,
      color: () => { return color(v); },
      classed: (i !== 1) ? undefined : 'stripe'
    };
  }).filter((d, i) => { return i < 12; });
}

// With native web components support (e.g. chrome) the WebComponentsReady event will NOT fire.
// Web components upgrade synchronously, so there is no need for that. If you have to use the
// web components polyfill enable the following event listener:
// (see https://www.polymer-project.org/1.0/docs/migration.html#polymer-ready)
// window.addEventListener('WebComponentsReady', function(e) {
var chart = document.querySelector('rs-radial-chart');

if (chart) {
  // Setup radial chart via public API
  chart.data = _dummyData(200);

  var count = 0;
  setInterval(() => {
    chart.data =  _dummyData((Math.random() * 400) + 20);
  }, 2500);
}
// });