Merge pull request #35 from DP6/update-documentation

Update documentation

README.md

@@ -26,6 +26,9 @@ All this data is then stored in BigQuery's tables and connected to a Google Data
 - [Local Environment Requirements](#local-environment-requirements)
 - [Installation](#installation)
 - [Configuration](#configuration)
+- [Dashboard](#dashboard)
+- [How to contribute](#how-to-contribute)
+- [Support](#support)
 
 # GCP Requirements 
 
@@ -106,17 +109,61 @@ Within the bucket, open the "config" folder, find the "config.json" file and dow
 
 <img src="https://raw.githubusercontent.com/DP6/templates-centro-de-inovacoes/main/public/images/site_speed_dashboard_config_file.png"/>
 
-### CRuX Countries (Optional)
+### CrUX Countries (Optional)
 In case you want to change in which countries crux data will be extracted, you can also alter the COUNTRIES array, adding or removing countries using the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format.
 
 ```
 "COUNTRIES": ["br", "fr"]   // In this case, Brazil's and France's 
                             // data will be extracted  
 ```
 
-### Deploy
+### Deployment
 After finishing the setup, upload the file into the same GCP bucket, overwriting the previous file. After that, the setup is finished and you'll start collecting performance data on your BQ tables!
 
+# Dashboard
+After installing and seting up the urls and countries, you'll have the "back-end" done and ready to work, but you still won't be able to visualize the data you are collecting. In order to do that, you'll have to follow through the steps below.
+
+## Duplicating Data Sources
+In the dataset created in your GCP project, you can find three tables:
+
+- crux_table
+- psi_metrics_results
+- psi_suggestion_results
+
+Each table will compose a different Data Studio data source and all these datasources will compose the dashboard, that, in turn, will create the data visualization. You'll have to duplicate all the data sources below:
+
+- [CrUX Table - Template [Data Source - Bigquery]](https://datastudio.google.com/datasources/521b4106-d002-45d4-b428-f359ea9d4b33)
+- [PSI Table Results - Template [Data Source - Bigquery]](https://datastudio.google.com/datasources/4184e227-e6bf-4323-b224-f684ad58ee9b)
+- [PSI Table Suggestions - Template [Data Source - Bigquery]](https://datastudio.google.com/datasources/1313adbe-412a-406e-beef-e7313238c43b)
+
+To duplicate, follow the steps below:
+1. Click the
+<img src="https://lh3.googleusercontent.com/V6jKS63Ya_QVoDo7PfKcheXZ-j9Zcih4H8VxaBOMSGesBIT2m97cFIsHazykztgXwOrS=w36"  style="height: 20px; width:20px;"/> icon 
+on the top menu of each data source and then click "Copy Data Source".
+
+2. Select the GCP project in which you created your site speed dashboard BigQuery tables
+
+3. Select the BigQuery data source created when executing the terraform script
+
+4. Select the corresponding table that matches the Data Studio data source selected
+
+At the end, you'll have 3 new data sources connected to your tables.
+
+## Duplicating the dashboard template
+
+After duplicating the data sources, you'll need to duplicate the dashboard itself. To do that, follow this steps:
+
+1. Open the [Site Speed Dashboard - Template](https://datastudio.google.com/reporting/19dd4850-55a1-42ef-9de1-43f776b9ddbb/page/p_3exd7jginc) dashboard.
+
+2. Duplicate the dashboard by clicking at the 
+<img src="https://lh3.googleusercontent.com/Kz1M6nAGoh2SvZ44eaZ_c1scIotCBl_qJzei-gV6Q3RwuLm21XVaqfQMUK2bgzxmoLU=w36-h36" style="height: 20px; width:20px;"/> icon on the top menu and then at <img src="https://lh3.googleusercontent.com/V6jKS63Ya_QVoDo7PfKcheXZ-j9Zcih4H8VxaBOMSGesBIT2m97cFIsHazykztgXwOrS=w36"  style="height: 20px; width:20px;"/> *Make a Copy* option.
+
+3. Link each Original Data Source to your newly created data sources
+
+4. Click *Copy Report*.
+
+Now you have a beautiful dashboard ready to be used!
+
 # How to contribute
 
 Pull requests are welcome! We will love help to evolve this module. Feel free to browse open issues looking for something you can do. If you have a new feature or bug, please open a new issue to be followed up by our team.
@@ -129,7 +176,8 @@ Only contributions that meet the following requirements will be accepted:
 
 ## Api Docs
 
-- [Index.js](https://github.com/dp6/site-speed-dashboard/blob/master/docs/index.md)
+- [PSI](https://github.com/dp6/site-speed-dashboard/blob/master/functions/psi)
+- [CrUX](https://github.com/dp6/site-speed-dashboard/blob/master/functions/crux)
 
 # Support:
 

functions/crux/README.md

@@ -0,0 +1,76 @@
+# main.py
+## Overview
+
+<dl>
+
+<dt><a href="#main">main(context)</a></dt>
+<dd><p>Checks if CrUX's last month table already exists and, if it does, copies the data to your BigQuery's CrUX table</p></dd>
+
+</dl>
+
+## Parameters
+
+<a name="main"></a>
+
+## main(context)
+
+Checks if CrUX's month table already exists and, if it does, copies the data to your BigQuery's CrUX table
+
+**Kind**: global function
+
+| Param   | Type                | Description            |
+| ------- | ------------------- | -----------------------|
+| context | <code>String</code> | Context in which the request will be executed |
+
+# util_class.py
+
+<dl>
+
+**<dt>table_suffix()</dt>**
+<dd><p>Gets table suffix for the last month in CrUX's public dataset tables format</p></dd>
+
+**<dt>check_rows()</dt>**
+<dd><p>Gets number of rows in your BigQuery's CrUX table</p></dd>
+
+**<dt>check_table_crux()</dt>**
+<dd><p>Checks if last month's CrUX table already exists</p></dd>
+
+**<dt>check_last_month()</dt>**
+<dd><p>Checks if last month's CrUX data has already been inserted in your BigQuery's CrUX table</p></dd>
+
+**<dt>get_domains()</dt>**
+<dd><p>Gets list of URLs in the config.json file</p></dd>
+
+**<dt>get_countries()</dt>**
+<dd><p>Gets list of countries in the config.json file</p></dd>
+
+**<dt>update_crux_table()</dt>**
+<dd><p>Update your BigQuery's CrUX table</p></dd>
+
+</dl>
+
+# util_query.py
+
+## Overview
+
+<dl>
+
+<dt><a href="#crux_query">crux_query(countries,domains,table_suffix)</a></dt>
+<dd><p>Formats and executes query to retrieve data from CrUX's public dataset tables</p></dd>
+
+</dl>
+
+<a name="crux_query"></a>
+
+## Parameters
+## crux_query(countries,domains,table_suffix)
+
+Formats and executes query to retrieve data from CrUX's public dataset tables
+
+**Kind**: global function
+
+| Param        | Type                | Description             |
+| ------------ | ------------------- | ----------------------- |
+| countries    | <code>List</code>   | List of countries       |
+| domains      | <code>List</code>   | List of URLs            |
+| table_suffix | <code>String</code> | Suffix of the CrUX table|

functions/crux/main.py

@@ -3,7 +3,7 @@
 from util_class import Crux
 import logging
 import os
-
+ 
 logging.basicConfig(level=logging.INFO)
 
 storage_client = storage.Client()

functions/crux/util_class.py

@@ -38,9 +38,9 @@ def check_table_crux(self):
     def check_last_month(self):
         try:
             response = self.bigquery_client.query("""
-                SELECT if(count(*) > 0,true,false) as check_rows FROM `{table}`
-                where year_month = '{year_month}'
-
+                SELECT if(count(*) > 0,true,false) as check_rows 
+                FROM `{table}`
+                WHERE year_month = '{year_month}'
                 """.format(year_month = self.table_suffix(), table = self.crux_table)
             )
             return list(response.result())[0].values()[0]