JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<script src="http://www.google.com/jsapi?.js"></script>
<div id="dashboard">
    <div id="control1"></div>
    <div id="control2"></div>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
</div>

JavaScript

google.load('visualization', '1', {packages: ['controls']});

function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Region/State', 'Color', 'Population'],
        ['USA', 'California', 'Dark Green', 700000],
        ['USA', 'California', 'Light Green', 776733],
        ['USA', 'California', 'Dark Blue', 3000000],
        ['USA', 'California', 'Light Blue', 3694820],
        ['USA', 'New York', 'Dark Green', 2000000],
        ['USA', 'New York', 'Light Green', 657592],
        ['USA', 'New York', 'Dark Blue', 8000000],
        ['USA', 'New York', 'Light Blue', 3175173],
        ['France', 'Ile-de-France', 'Dark Green', 2000000],
        ['France', 'Ile-de-France', 'Light Green', 1093031],
        ['France', 'Ile-de-France', 'Dark Blue', 100000],
        ['France', 'Ile-de-France', 'Light Blue', 51372],
        ['France', 'Provence', 'Dark Green', 800000],
        ['France', 'Provence', 'Light Green', 252395],
        ['France', 'Provence', 'Dark Blue', 300000],
        ['France', 'Provence', 'Light Blue', 73556] 
    ]);
    
    // Define category pickers for 'Country', 'Region/State' and 'City'
    var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control1',
        'options': {
            'filterColumnLabel': 'Country',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false,
                'allowNone': false
            }
        },
        'state': {
            selectedValues: ['USA']
        }
    });
    
    var regionPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Region/State',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
     ...