JSFiddle - React, Tailwind, and code Playground

by damiantt

HTML

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
  google.load('visualization', '1', {
    packages: ['corechart']
  });

</script>

<script type="text/javascript">
  function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day', 'dummy'],
      ['Work', 11, 0],
      ['Eat', 2, 0],
      ['Commute', 2, 0],
      ['Watch TV', 2, 0],
      ['Sleep', 7, 0]
    ]);

    var options = {
        pieSliceBorderColor: "transparent",
        title: "So, how was your day?",
        sliceVisibilityThreshold: 0,
        slices: {
          0: {
            color: '#6B8E23'
          },
          1: {
            color: 'blue'
          },
          2: {
            color: 'green'
          },
          3: {
            color: 'black'
          },
          4: {
            color: 'pink'
          }
        }
      }
      // Create and draw the visualization.
    var chart = new google.visualization.PieChart(document.getElementById('visualization'));

    chart.draw(data, options);

    var hiddenFields = [];

    function afterDraw() {
      for (var i = 0; i < hiddenFields.length; i++) {
        $('svg>g:nth-child(4)>g:nth-child(' + (hiddenFields[i] + 2) + ') circle').css({
          "stroke": "#909090",
          "fill": "#909090"
        });
        $('svg>g:nth-child(4)>g:nth-child(' + (hiddenFields[i] + 2) + ') text').css({
          "stroke": "#909090",
          "fill": "#909090"
        });
      }
    };
    google.visualization.events.addListener(chart, 'select', function() {
      var selectedRow = chart.getSelection()[0].row;
      if (data.getValue(selectedRow, 1) === 0) { //pojaw się
        data.setValue(selectedRow, 1, data.getValue(selectedRow, 2));
        var index = hiddenFields.indexOf(selectedRow);
       ...