JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="control_div"></div>
  <div id="chart_div"></div>
</div>

JavaScript

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      cols: [{
        label: 'Month',
        type: 'date'
      }]
    });

    // load months in reverse
    var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'});
    var today = new Date();
    var monthCount = 12;
    var selectedRow;
    var rowIndex;
    while (monthCount--) {
      // get row values
      var monthDate = new Date(today.getFullYear(), monthCount, 1);
      var monthName = formatDate.formatValue(monthDate);

      // use object notation when setting value
      rowIndex = data.addRow([{
        // value
        v: monthDate,

        // formatted value
        f: monthName
      }]);

      // set selected row
      if (monthName === formatDate.formatValue(today)) {
        selectedRow = rowIndex;
      }
    }

    // sort data
    data.sort({column: 0});

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({
      controlType: 'CategoryFilter',
      containerId: 'control_div',
      options: {
        filterColumnIndex: 0,
        ui: {
          allowMultiple: false,
          allowNone: false,
          allowTyping: false,
          label: '',
          labelStacking: 'vertical',
          sortValues: false
        },
        // use month name
        useFormattedValue: true
      },
      // state needs formatted value
      state: {
        selectedValues: [data.getFormattedValue(selectedRow, 0)]
      }
    });

    // or set state here -- just need month name
    control.setState({selectedValues: [formatDate.formatValue(today)]});

    var chart = new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'chart_div',
      options:{
        allowHtml: true
      }
    });

    dash.bind(control, chart);
    dash.draw(data);
  },
  packages: ['controls', 'corechart', 'table']
});