<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <!-- Defines the variables named foo_data and foo_data_sc -->
    <script type="text/javascript" src="../out/data.js"></script>

    <script type="text/javascript">

      // Load the Visualization API and some packages.
      google.charts.load('current', {'packages':['corechart', 'geochart', 'table']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawCharts);

      function privacyBudget(rappor_params) {
        p = rappor_params.probIrr0;
        q = rappor_params.probIrr1;
        h = Math.max(1., rappor_params.numHashes); // Basic RAPPOR is signaled by numHashes == 0
        return h * Math.abs(Math.log(q * (1 - p) / (p * (1 - q))));
      }

      // Callback that invokes the chart-drawing functions.
      // NOTE: "_SC" refers to charts that represent data from the
      // "Straight Counting" pipeline.
      function drawCharts() {
        drawUsageByModulePieChart_SC();
        // without differentially private release
        drawUsageByModuleIntervalChart(false);
        // with differentially private release
        drawUsageByModuleIntervalChart(true);

        drawUsageByCityGeoChart_SC();
        drawUsageAndRatingBubbleChart();

        drawUsageByHourColumnChart_SC();
        drawUsageByHourColumnChart();

        drawPopularUrlsTables();
        drawPopularUrlsColumnChart_SC();

        drawPopularHelpQueriesColumnChart_SC();
        drawPopularHelpQueriesTables();
      };

      function drawUsageByModulePieChart_SC() {
        // Parse the data table.
        var data = new google.visualization.DataTable(usage_by_module_data_sc);

        // Set chart options
        var options = {'title':'Top Modules by Usage',
                       'width':400,
                       'height':300};
        // Instantiate and draw our chart.
        var chart = new google.visualization.PieChart(document.getElementById('usage_by_module_chart_sc'));
        chart.draw(data, options);
      };

      function drawUsageByModuleIntervalChart(with_private_release) {
        // Format the title to include privacy budget
        var privacy_eps = privacyBudget(usage_by_module_params).toFixed(2);
        var title = 'Top Modules by Usage, Estimates with 95% Confidence Intervals' +
        ' (privacy budget = ' + privacy_eps + ')';
        if (with_private_release) {
          title = 'Modules by Usage. Weak RAPPOR privacy with Laplacian noise for differentially private release.' +
          ' (Privacy budget = 1)';
        }

        var usage_data = with_private_release ? usage_by_module_pr_data : usage_by_module_data
        var data = new google.visualization.DataTable(usage_data);

        var chart_height = with_private_release ? 750 : 450
        var chart_width = with_private_release ? 650 : 600
        var options = {
            title: title,
            curveType: 'function',
            pointSize: 5,
            lineWidth: 0,
            orientation: 'vertical',
            height: chart_height,
            width: chart_width,
            intervals: { style: 'bars', color: 'grey' },
            vAxis: {title: 'Module'},
            hAxis: {title: 'Usage Count', viewWindow: {min: 0},
                    minorGridlines: {count: 4}}
        };
        element_id = with_private_release ? 'usage_by_module_with_pr_chart' : 'usage_by_module_chart'
        var chart = new google.visualization.LineChart(document.getElementById(element_id));
        chart.draw(data, options);
      };

      function drawUsageByCityGeoChart_SC() {
        // Parse the data table.
        var data = new google.visualization.DataTable(usage_by_city_data_sc)
        var options = {
          region: 'US',
          'width': 500,
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#85e085',
          displayMode: 'markers',
          colorAxis: {colors: ['red', 'yellow', 'green']}
        };
        // Instantiate and draw our chart.
        var chart = new google.visualization.GeoChart(document.getElementById('usage_by_city_chart_sc'));
        chart.draw(data, options);
      }

      function drawUsageAndRatingBubbleChart() {
        // Parse the data table.
        var data = new google.visualization.DataTable(usage_by_city_data)

        var options = {
          title: 'Correlation between Fuchsia usage counts and ' +
                 'ratings for various US Cities. (Size of bubble ' +
                 'reflects, but is not proportional to, size of ' +
                 'confidence interval for count.)',
          width: 900,
          height: 600,
          hAxis: {title: 'Usage Count'},
          vAxis: {title: 'Rating'},
          sizeAxis: {minValue: 0, maxValue: 200, minSize: 5, maxSize: 25},
          bubble: {textStyle: {fontSize: 11}}
        };

        var chart = new google.visualization.BubbleChart(document.getElementById('usage_and_rating_chart'));
        chart.draw(data, options);
      }

      function drawUsageByHourColumnChart_SC() {
        // Parse the data table.
        var data = new google.visualization.DataTable(usage_by_hour_data_sc)
        var options = {
          title: 'Fuchsia usage, by hour of the day, PST',
          'width': 650,
          'height': 400,
          hAxis: {
            title: 'Hour of Day',
            gridlines: {count: 12},
          },
          vAxis: {viewWindow: {max: 1200}},
        };

        // Instantiate and draw our chart.
        var chart = new google.visualization.ColumnChart(document.getElementById('usage_by_hour_chart_sc'));
        chart.draw(data, options);
      }

      function drawUsageByHourColumnChart() {
        // Format the title to include privacy budget
        var privacy_eps = privacyBudget(usage_by_hour_params).toFixed(2);
        var title = 'Fuchsia usage by hour, estimates with 95% Confidence Intervals' +
        ' (privacy budget = ' + privacy_eps + ')';

        // Parse the data table.
        var data = new google.visualization.DataTable(usage_by_hour_data);
        var options = {
          title: title,
          'width': 900,
          'height': 400,
          intervals: { color: 'black', 'lineWidth':2, 'barWidth': 1.2},
          hAxis: {
            title: 'Hour of Day',
            gridlines: {count: 12},
          },
          vAxis: {viewWindow: {max: 1200}},
        };

        // Instantiate and draw our chart.
        var chart = new google.visualization.ColumnChart(document.getElementById('usage_by_hour_chart'));
        chart.draw(data, options);
      }

      function drawPopularHelpQueriesColumnChart_SC() {
        // Parse the data table.
        var data = new google.visualization.DataTable(popular_help_queries_histogram_data_sc)
        var options = {
          title: 'Popular help queries -- histogram',
          'width': 700,
          hAxis: {
            title: 'Popular help queries',
            gridlines: {count: 12},
          },
        };

        // Instantiate and draw our chart.
        var chart = new google.visualization.ColumnChart(document.getElementById('popular_help_queries_chart_sc'));
        chart.draw(data, options);
      }

      function drawPopularUrlsColumnChart_SC() {
        // Parse the data table.
        var data = new google.visualization.DataTable(popular_urls_histogram_data_sc)
        var options = {
          title: 'Popular urls -- histogram',
          'width': 700,
          'height': 400,
          hAxis: {
            title: 'Popular urls',
            gridlines: {count: 12},
          },
        };

        // Instantiate and draw our chart.
        var chart = new google.visualization.ColumnChart(document.getElementById('popular_urls_chart_sc'));
        chart.draw(data, options);
      }

      function drawTable(data_var, element_id) {
        // Parse the data table.
        var data = new google.visualization.DataTable(data_var);

        // Instantiate and draw our table.
        var table = new google.visualization.Table(document.getElementById(element_id));

        table.draw(data, {
            showRowNumber: false,
            alternatingRowStyle: true,
            sortAscending: false,
            allowHtml: true,
            cssClassNames: {headerRow: 'table_header'},
            width: 500,
            frozenColumns: 1,
        });
      }

      function drawPopularUrlsTables() {
        drawTable(popular_urls_data_sc, 'popular_urls_table_sc')
        drawTable(popular_urls_data, 'popular_urls_table')
      }

      function drawPopularHelpQueriesTables() {
        drawTable(popular_help_queries_data_sc, 'popular_help_queries_table_sc')
        drawTable(popular_help_queries_data, 'popular_help_queries_table')
      }

    </script>
  </head>

  <style>
.table_header {
   text-align: left;
  }
 </style>

  <body>
    <table>
      <tr>
        <th> Straight Counting Pipeline </th>
        <th> Cobalt Prototype Pipeline </th>
      </tr>

      <tr>
        <td><div id="usage_by_module_chart_sc"></div></td>
        <td><div id="usage_by_module_chart"></div>
        </td>
      </tr>

      <tr>
        <td></div></td>
        <td><div id="usage_by_module_with_pr_chart"></div>
        </td>
      </tr>

      <tr>
        <td>
          Fuchsia Usage and Ratings By City
          <div id="usage_by_city_chart_sc"></div>
        </td>
        <td>
          <div id="usage_and_rating_chart"></div>
        </td>
      </tr>

      <tr>
        <td>
          <div id="usage_by_hour_chart_sc"></div>
        </td>
        <td>
          <div id="usage_by_hour_chart"></div>
        </td>
      </tr>

      <tr>
        <td>&nbsp;</td><td>&nbsp;</td>
      </tr>

      <tr>
        <td>
          Top 50 URLs by usage
          <div id="popular_urls_table_sc"></div>
        </td>
        <td style="vertical-align:top">
          URLs decrypted because they occur at least 20 times.
          <div id="popular_urls_table"></div>
        </td>
      </tr>

      <tr>
        <td colspan="2"><div id="popular_urls_chart_sc"></div></td>
      </tr>

      <tr>
        <td>&nbsp;</td><td>&nbsp;</td>
      </tr>

      <tr>
        <td colspan="2"><div id="popular_help_queries_chart_sc"></div></td>
      </tr>

      <tr>
        <td>&nbsp;</td><td>&nbsp;</td>
      </tr>

      <tr>
        <td>
          Fuchsia Top 50 Popular Help Queries
          <div id="popular_help_queries_table_sc"></div>
        </td>
        <td style="vertical-align:top">
          Help Queries decrypted because they occur at least 20 times.
          <div id="popular_help_queries_table"></div>
        </td>
      </tr>

    </table>


  </body>
</html>