JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<script src="https://rawgit.com/gionkunz/chartist-js/develop/dist/chartist.min.js"></script>
<script src="https://rawgit.com/jlmakes/scrollreveal/master/dist/scrollreveal.min.js"></script>
<div>
  <p class="sr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta alias ipsa eligendi, obcaecati, accusantium autem molestias beatae, ipsum explicabo libero eum! Quis, nesciunt et vel! A doloremque, pariatur! Architecto, et.</p>
  <p class="sr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aperiam ullam nihil repudiandae non fuga ea tempore impedit. Voluptatum, deleniti ipsum autem tempore voluptatem quas nam aspernatur facilis, quod error.</p>
  <p class="sr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum id ex eligendi fugit dolore vel accusantium eveniet, earum maiores molestias consequuntur autem velit, dignissimos quia odit officia veniam quaerat architecto.</p>
</div>
<section class="sr">
<h1>Your most productive month was <em>July</em></h1>
<p>You completed <strong>780 tasks</strong> that month.</p>

<div class="graph_holder">
<div class="graph monthly ct-golden-section"></div>

<div class="month_list">
  <div class="month"><span class="month_name">Jan</span><span class="month_tasks">05</span></div>
  <div class="month"><span class="month_name">Feb</span><span class="month_tasks">28</span></div>
  <div class="month"><span class="month_name">Mar</span><span class="month_tasks">32</span></div>
  <div class="month"><span class="month_name">Apr</span><span class="month_tasks">36</span></div>
  <div class="month"><span class="month_name">May</span><span class="month_tasks">12</span></div>
  <div class="month"><span class="month_name">Jun</span><span class="month_tasks">42</span></div>
  <div class="month peak"><span class="month_name">Jul</span><span class="month_tasks">48</span></div>
  <div class="month"><span class="month_name">Aug</span><span class="month_tasks">40</span></div>
  <div class="month"><span...

CSS

body { padding: 3rem; font-family: sans-serif; background-color: #fff; }

section {
  background-color: #FAFAFA;
  border-radius: 4px;
  padding: 1rem 2rem;
  position: relative;
  padding-bottom: 0;
  margin: 0 auto;
  margin-bottom: 2rem;
  overflow: hidden;
  max-width: 1000px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

h1 {
  font-weight: bold;
  color: #383838;
  font-size: 24px;
}

h1 em {
  font-style: normal;
  color: #FA2B21;
}

p {
  color: #616161;
  font-size: 16px;
}

p strong {
 color: #383838; 
}

.graph_holder {
  margin-left: -2rem;
  width: calc(100% + 4rem);
  overflow-x: scroll;
}
.month_list {
  display: flex;
  justify-content: space-around;
  //position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-width: 800px;
  background: rgba(219, 219, 219, 0.2);
}
.month {
  padding: 1rem;
  font-size: 13px;
  color: #383838;
}
.month_name {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.month_tasks {
  display: block;
  text-align: center;
  width: 100%;
}
.peak .month_name {
  background-color: #FA2B21;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  margin-bottom: 0.1rem;
  color: #fff;
}
.graph {
  min-height: 350px;
  min-width: 800px;
}

.graph.hourly {
  min-width: 1200px;
}

.graph.hourly + .month_list {
  min-width: 1200px;
}

.graph svg {
  display: block;
}

/*.graph svg path {
  transition: all 5s cubic-bezier(0.075, 0.82, 0.165, 1);
}*/

.graph.monthly .ct-area {
  fill: url(#gradientRed);
}

.graph.hourly .ct-area {
  fill: url(#gradientBlue);
}

Babel + JSX

// SCROLL REVEAL
const scrollReveal = ScrollReveal();
scrollReveal.reveal('.sr', {
  scale: 1,
  //reset: 1,
  duration: 1500,
  afterReveal: (element) => {
  	const chart = element.querySelector('.graph');

    if (chart) {
      initChart(chart);
    }
  }
});

//const charts = document.querySelectorAll('.graph');
const chartOptions = {
  low: 0,
  showArea: true,
  showLine: false,
  axisX: {
    showLabel: false,
    showGrid: false,
    offset: 0,
    scaleMinSpace:0
  },
  axisY: {
    showLabel: false,
    showGrid: false,
    offset: 0,
    scaleMinSpace:0
  },
  width: '100%',
  height: '350px',
  chartPadding: 0,
  seriesBarDistance: 0,
  showPoint: false,
  fullWidth: true
};

const randomNum = () => {
	return Math.floor(Math.random() * 100);
};

const getData = (amount) => {
	let data = [];
  for (let i = 0; i < amount; i++) {
  	data[i] = randomNum();
  }

	return [data];
};

const getGradients = () => {
  return [{
  	name: 'gradientBlue',
    colorFrom: 'rgba(219, 219, 219, 0.2)',
    colorTo: 'rgba(23, 212, 199, 1.0)'
  },
  {
  	name: 'gradientRed',
    colorFrom: 'rgba(219, 219, 219, 0.2)',
    colorTo: 'rgba(212, 45, 24, 1)'
  }];
};

const buildGradients = (data) => {
  const defs = data.svg.elem('defs');
  const gradients = getGradients();

	for (const gradient of gradients) {
    defs.elem('linearGradient', {
      id: gradient.name, x1: 0, y1: 1, x2: 0, y2: 0
    }).elem('stop', {
      offset: 0, 'stop-color': gradient.colorFrom
    }).parent().elem('stop', {
      offset: 1, 'stop-color': gradient.colorTo
    });
  }
};

const animateChart = (chartData) => {
  chartData.element.animate({
    d: {
      //begin: 10,
      dur: 8000,
      from: chartData.path.clone().scale(1, 0).translate(0, chartData.chartRect.height()).stringify(),
      to: chartData.path.clone().stringify(),
      easing: Chartist.Svg.Easing.easeOutCirc
    }
  });
};

const initChart = (chart) => {
	const dataAmount = chart.classList.contains('monthly') ? 12 : 24;
 ...