Support/MetricsDashboardPRD/implementation: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
(category -> Support Archive)
 
(6 intermediate revisions by one other user not shown)
Line 1: Line 1:
<font color="red">[paulc] (Draft) This page will show documentation for the Metrics dashboard.</font>
{{draft}}


= Simple tutorial =
= Simple tutorial =
Line 14: Line 14:
SELECT SUM(measure) AS count, DATE(date_field) AS date_field
SELECT SUM(measure) AS count, DATE(date_field) AS date_field


FROM f_events NATURAL JOIN d_date NATURAL JOIN d_eventtype
FROM f_events NATURAL JOIN d_date  
  NATURAL JOIN d_eventtype


WHERE $date_range$ AND sourceType = 'knowledge base' AND actionType = 'create' $range_groupby$ ORDER BY date_field DESC;
WHERE $date_range$ AND sourceType = 'knowledge base'
  AND actionType = 'create' $range_groupby$  
  ORDER BY date_field DESC;
</pre>
</pre>
* Click on the "Create new metric" button below this form
* Click on the "Create new metric" button below this form
Line 28: Line 31:
Content:
Content:
<pre>
<pre>
<div class="metricbox">
{metric name="# new KB posts" value="count" sparkline=true toggle=true table=true trend=true}
{metric sparkline=true numpoints=5 name="# new KB posts"}
<div class="title">
<a class="toggle-button">Toggle</a>
New KB posts: {metric name="# new KB posts" count="count" }
{metric trend=true name="# new KB posts" count="count"}
</div>
<div class="toggle">
{metric table=true numpoints=5 name="# new KB posts"}
Tada!
</div>
</div>
</pre>
</pre>
* Click on the "Create new tab" button below this form
* Click on the "Create new tab" button below this form
Line 93: Line 85:
* Order - gives the order of the tab in the display (tabs are sorted ascendingly by this)
* Order - gives the order of the tab in the display (tabs are sorted ascendingly by this)
* Tab content - smarty content that will be parsed in metrics-tab.php. This, too, may contain some functions
* Tab content - smarty content that will be parsed in metrics-tab.php. This, too, may contain some functions
** The basic layout to create a metrics tab looks like this:
** The metrics are created using a smarty {metric} function, with the following syntax:
<pre>
<pre>
<div class="metricbox">
/**
</pre>
* Smarty function for getting a metric. Syntax:
(REQUIRED) this contains the entire metric
* {metric  
<pre>
* [sparkline|trend|table|toggle][=true]
{metric sparkline=true numpoints=5 name="# new KB posts"}
* [name="name from metrics_metric"
</pre>
* id="id from metrics_metric"] (one of name and id required)
Syntax for a sparkline, numpoints is the number of data points to plot, name specifies which metric data to examine.
* numrows = # of data pts to go back (max # of row from SQL query)
<pre>
* value = "name of field in SQL query to display"
<div class="title">
* date_field = "date column in SQL to get dates from"
</pre>
* html_before (optional) = "HTMl before table"
(REQUIRED) contains metric title
* html_after (optional) = "HTML after table"
<pre>
* }
<a class="toggle-button">Toggle</a>
* @param string name (required if id not specified) metric name to get
</pre>
* @param integer id (required if name not specified) metric id to get
(REQUIRED) contains the toggle button for expanding a table of past results under the metric
* @param string title (optional) title to display, defaults to name
<pre>
* @param integer numrows (optional) number of data points to show in the sparkline
New KB posts: {metric name="# new KB posts" count="count" }
* also number of rows to show in the table, defaults to all if not specified
</pre>
* @param string value name of field in SQL query to display
Gets the metric results. these are expected to be the first result of the populated array, and we're looking for the column aliased as "count" in the MySQL query, for query name "# new KB posts"
* @param string date_field (optional) name of field in SQL query to get dates from
<pre>
* defaults to "date_field"
{metric trend=true name="# new KB posts" count="count"}
* @param string html_before (optional) HTMl before table
</pre>
* @param string html_after (optional) HTML after table
Gets the trend and automatically assigns a class to it: trend-red for decreasing, trend-green for increasing, trend-gray for unchanged. Note: this may not work without metrics_pastresults enabled in preferences.
*
<pre>
* @param boolean sparkline defaults to false, specify "sparkline"  
</div>
* or "sparkline=true" to enable
<div class="toggle">
* @param boolean trend defaults to true, specify "sparkline"
{metric table=true numpoints=5 name="# new KB posts"}
* or "sparkline=false" to disable
</pre>
* @param boolean table defaults to true, specify "table"  
This generates the metrics table. numpoints is the number of points = number of rows (same as for the sparkline).
* or "table=false" to disable
<pre>
* @param boolean toggle defaults to false, specify "toggle"
Tada! And this is just plain text or HTML you can include!
* or "toggle=true" to enable
</div>
* @return HTML formatted for metric
</div>
*/
<div class="metrics-box">
Another metric goes here...
</div>
</pre>
</pre>
** Include option=true if you want option to show up, where option is one of: sparkline, trend, toggle, table


=== Assigning metrics to tabs ===
=== Assigning metrics to tabs ===
Line 140: Line 130:
* metrics-tab.php grabs the tab content, runs it through smarty with the given metrics functions, and returns HTML output that then populates the tab
* metrics-tab.php grabs the tab content, runs it through smarty with the given metrics functions, and returns HTML output that then populates the tab
* metrics-tab also populates the arrays $m and $m_id, both associative arrays which contain the metrics data in the following format:
* metrics-tab also populates the arrays $m and $m_id, both associative arrays which contain the metrics data in the following format:
   $metric['result'] -- the query result, an array of rows with data returned by the metric query
   $metric['result']
   $metric['range'] -- the actual range in English (Weekly, Monthly, etc)
The query result, an array of rows with data returned by the metric query. This is an array of results of the SQL query. E.g. $metric['result'][0]['count'] will contain the actual count displayed result for the function:
   $metric['range_id'] -- the range id (the value displayed in parentheses on the admin page)
<pre>
   $metric['datatype'] -- the data type (Integer, Float, etc)
{metric name="# new KB posts" value="column name" }
   $metric['datatype_id'] -- the data id (similar to range id, displayed in parentheses)
</pre>
And $metric['result'][1]['column name'] will contain the first past result, etc.
   $metric['range']
The actual range in English (Weekly, Monthly, etc)
   $metric['range_id']
The range id (the value displayed in parentheses on the admin page)
   $metric['datatype']
The data type (Integer, Float, etc)
   $metric['datatype_id']
The data id (similar to range id, displayed in parentheses)
* $m['insert metric name here'] contains the above data (allows addressing metrics by name)
* $m['insert metric name here'] contains the above data (allows addressing metrics by name)
* $m_id[metric_id(integer)] contains the above data as well (allows addressing metrics by id)
* $m_id[metric_id(integer)] contains the above data as well (allows addressing metrics by id)
Line 150: Line 149:
   {metric expr="@m['# new KB posts']['range_id']"}
   {metric expr="@m['# new KB posts']['range_id']"}
The above gets the range_id of a metric named "# new KB posts" (case sensitive!)
The above gets the range_id of a metric named "# new KB posts" (case sensitive!)
= Feedback =
[paulc] Please add your feedback here.
[[Category:Support Archive]]

Latest revision as of 09:21, 14 July 2021

Draft-template-image.png THIS PAGE IS A WORKING DRAFT Pencil-emoji U270F-gray.png
The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly.
If you have any questions or ideas, please add them as a new topic on the discussion page.

Simple tutorial

This is included first because, as a developer, my technical skills of understanding and explaining are not always intuitive, so it's better to walk through this example before you read the technical aspects below. Once that is done, you should read the rest of this document and re-do the tutorial, by correlating the steps with the information below.

Create a simple metric

  • Go to /tiki-admin_metrics.php (you will need admin rights for this)
  • Click on "Edit/Create Metric" at the top links, you will be taken down the page to /tiki-admin_metrics.php#editcreate
  • Enter the following information:

Name: # new KB posts Range: Weekly Datatype: Integer Query:

SELECT SUM(measure) AS count, DATE(date_field) AS date_field

FROM f_events NATURAL JOIN d_date 
  NATURAL JOIN d_eventtype

WHERE $date_range$ AND sourceType = 'knowledge base'
   AND actionType = 'create' $range_groupby$ 
   ORDER BY date_field DESC;
  • Click on the "Create new metric" button below this form
  • Once the form is submitted, notice the new metric shows up in the list at the top under the heading "Metrics"

Create a tab

  • Click on "Edit/Create Tab" at the top links, you will be taken down the page to /tiki-admin_metrics.php#editcreatetab
  • Enter the following information:

Name: Overview Order: 1 Content:

{metric name="# new KB posts" value="count" sparkline=true toggle=true  table=true trend=true}
  • Click on the "Create new tab" button below this form
  • Once the form is submitted, notice the new tab shows up in the list under the heading "Tabs"

Assign the metric to the tab

Now that you have a metric and a tab, it's time to assign the former to the latter.

  • Click on "Assign Metric" at the top links, you will be taken down the page to /tiki-admin_metrics.php#assign
  • Select the metric name "# new KB posts" and the tab "Overview"
  • Click on the "Assign" button below this form
  • Once the form is submitted, notice the new assigned metric shows up in the list under the heading "Assigned Metrics"

CONGRATULATIONS! You have just created a simple metrics tab!

Dashboard UI

Overview

Go to:

 /tiki-metrics.php
  • No sidebar for more room
  • Uses JQuery, JQuery UI and JQuery Sparklines
  • Tabs fetch content through AJAX from /metrics-tab.php
  • Parameters passed to /metrics-tab.php:
    • tab_id (integer)
    • date range in format yyyy-mm-dd, date_from and date_to
    • range_type - weekly, monthly, custom

Administration

Preferences

Go to:

 /tiki-admin?page=metrics
  • Show past results + count => how many results to track back on. This number affects the date range for a query.
  • Metrics Database => defaults to sumodw, the data warehouse where we keep all of the metrics tables

Editing Content

Go to:

 /tiki-admin_metrics.php

Creating metrics

Metrics have the following fields:

  • Name - gives the name by which metrics can be retrieved in tab content
  • Range - (more clearly, range type) how often this metric is to be collected, how it should be treated (not currently used in implementation, but available)
  • Data type - what type of data this metric returns
  • Query - the SQL query that will be run. MUST contain these tokens:
    • $date_range$ - must be placed in the WHERE clause, will be automatically replaced with something like:
 (date_field >= date_from AND date_field <= date_to)
    • $range_groupby$ - must be placed in the GROUP BY clause. If there isn't one, the $range_groupby$ token will contain the "GROUP BY" string. This looks like:
 GROUP BY WEEK(date_field,1) -- for weekly display
 GROUP BY MONTH(date_field) -- for monthly display
 GROUP BY date_field -- for custom display
      • Note: the $range_groupby$ token does not reflect the metric range type. Instead, it reflects the selected date range in the dashboard display

Creating tabs

Tabs have the following fields:

  • Name - gives the name of the tab, displayed on the dashboard
  • Order - gives the order of the tab in the display (tabs are sorted ascendingly by this)
  • Tab content - smarty content that will be parsed in metrics-tab.php. This, too, may contain some functions
    • The metrics are created using a smarty {metric} function, with the following syntax:
/**
 * Smarty function for getting a metric. Syntax:
 * {metric 
 * [sparkline|trend|table|toggle][=true]
 * [name="name from metrics_metric"
 * id="id from metrics_metric"] (one of name and id required)
 * numrows = # of data pts to go back (max # of row from SQL query)
 * value = "name of field in SQL query to display"
 * date_field = "date column in SQL to get dates from"
 * html_before (optional) = "HTMl before table"
 * html_after (optional) = "HTML after table"
 * }
 * @param string name (required if id not specified) metric name to get
 * @param integer id (required if name not specified) metric id to get
 * @param string title (optional) title to display, defaults to name
 * @param integer numrows (optional) number of data points to show in the sparkline
 * 		also number of rows to show in the table, defaults to all if not specified
 * @param string value name of field in SQL query to display
 * @param string date_field (optional) name of field in SQL query to get dates from
 * 		defaults to "date_field"
 * @param string html_before (optional) HTMl before table
 * @param string html_after (optional) HTML after table
 *
 * @param boolean sparkline defaults to false, specify "sparkline" 
 * 		or "sparkline=true" to enable
 * @param boolean trend defaults to true, specify "sparkline" 
 * 		or "sparkline=false" to disable
 * @param boolean table defaults to true, specify "table" 
 * 		or "table=false" to disable
 * @param boolean toggle defaults to false, specify "toggle" 
 * 		or "toggle=true" to enable
 * @return HTML formatted for metric
 */
    • Include option=true if you want option to show up, where option is one of: sparkline, trend, toggle, table

Assigning metrics to tabs

This process is fairly intuitive. When you assign a metric to a tab, it just means that the query for that metric will be run on that specific tab. Of course, since the tab content is customized, you can just assign all metrics everywhere. But the purpose of tabs grabbed through AJAX and assigning metrics to tabs is to ease the query load and decrease page loading time. So it's best practice to assign to each tab only the metrics that are actually going to be displayed.

How it all works

  • tiki-metrics.php calculates the date range, and range type. It passes these parameters to metrics-tab.php for each tab
  • metrics-tab.php grabs the tab content, runs it through smarty with the given metrics functions, and returns HTML output that then populates the tab
  • metrics-tab also populates the arrays $m and $m_id, both associative arrays which contain the metrics data in the following format:
 $metric['result']

The query result, an array of rows with data returned by the metric query. This is an array of results of the SQL query. E.g. $metric['result'][0]['count'] will contain the actual count displayed result for the function:

{metric name="# new KB posts" value="column name" }

And $metric['result'][1]['column name'] will contain the first past result, etc.

 $metric['range']

The actual range in English (Weekly, Monthly, etc)

 $metric['range_id']

The range id (the value displayed in parentheses on the admin page)

 $metric['datatype']

The data type (Integer, Float, etc)

 $metric['datatype_id']

The data id (similar to range id, displayed in parentheses)

  • $m['insert metric name here'] contains the above data (allows addressing metrics by name)
  • $m_id[metric_id(integer)] contains the above data as well (allows addressing metrics by id)

These values can be fetched by using:

 {metric expr="@m['# new KB posts']['range_id']"}

The above gets the range_id of a metric named "# new KB posts" (case sensitive!)

Feedback

[paulc] Please add your feedback here.