Add reusable widget to display single metric w/ sparkline & evolution percent (+ other changes) (#13101)

* Add empty metric for single metric view.

* Add new isReusable property to widget metadata & if set to true, do not grey out the widget in the dashboard manager, even if the widget is used in the dashboard.

* Initial working version of single metric view.

* Get single metric view widget to work and look correctly (no series picker).

* Add series picker to single metric widget and add filter_last_period_evolution parameter.

* Persist metric change through dashboard widget parameter saving.

* Loading state for single metric view.

* Make new evolution param work on processed reports + tweak component implementation.

* Tweak CSS and make sure angular components are compiled in widget preview.

* Make component work with widget preview and avoid unnecessary widget reloads when multiple widgets of the same type are shown.

* Generalize JS lastN range period computing and use to create standalone sparkline angular component and get rid of need for "past-period" argument to single metric view.

* Add format_metrics: "1" to API.get method.

* Add escaping to _angularComponent.twig.

* hacky fix for formatting revenue columns

* Format past data values & allow evolution to be calculated for processed metrics.

* filter evolution changes

* Fix issue in subtable recursion for processed metric computation & metric formatting + add new processed metric compute hooks to fix bug in evolution calculation on subtables.

* remove isReusable property.

* attempting to change strategy

* simpler solution that does not require backend changes

* remove unneeded code + fix issue w/ formatted metrics

* remove some more unneeded code

* write UI test

* add new screenshots

* Add all goals to single metric view picker.

* move category

* fix test

* fixing more tests

* Fixing some UI tests.

* Update more screenshots.

* update two more screenshots

3 files changed, 26 insertions, 4 deletions

diff --git a/tests/PHPUnit/Integration/Category/CategoryListTest.php b/tests/PHPUnit/Integration/Category/CategoryListTest.php
index 1a663c1918..9adf91d00d 100644
--- a/tests/PHPUnit/Integration/Category/CategoryListTest.php
+++ b/tests/PHPUnit/Integration/Category/CategoryListTest.php
@@ -35,6 +35,7 @@ class CategoryListTest extends IntegrationTestCase
 
         $this->assertSame(array(
             'General_Actions',
+            'General_Generic',
             'General_Visitors',
             'Dashboard_Dashboard',
             'General_MultiSitesSummary',
diff --git a/tests/PHPUnit/Integration/WidgetsListTest.php b/tests/PHPUnit/Integration/WidgetsListTest.php
index f775b60dfa..92658fb48a 100644
--- a/tests/PHPUnit/Integration/WidgetsListTest.php
+++ b/tests/PHPUnit/Integration/WidgetsListTest.php
@@ -42,6 +42,7 @@ class WidgetsListTest extends IntegrationTestCase
         $numberOfWidgets = array(
             'Dashboard_Dashboard' => 1,
             'General_Actions' => 15,
+            'General_Generic' => 1,
             'General_Visitors' => 35,
             'SEO' => 2,
             'Goals_Goals' => 3,
@@ -91,7 +92,7 @@ class WidgetsListTest extends IntegrationTestCase
         $perCategory = $this->getWidgetsPerCategory(WidgetsList::get());
 
         // number of main categories
-        $this->assertEquals(10, count($perCategory));
+        $this->assertEquals(11, count($perCategory));
         $this->assertEquals($initialGoalsWidgets + 2, count($perCategory['Goals_Goals'])); // make sure widgets for that goal were added
     }
 
@@ -105,7 +106,7 @@ class WidgetsListTest extends IntegrationTestCase
         $perCategory = $this->getWidgetsPerCategory(WidgetsList::get());
 
         // number of main categories
-        $this->assertEquals(11, count($perCategory));
+        $this->assertEquals(12, count($perCategory));
 
         // check if each category has the right number of widgets
         $numberOfWidgets = array(
@@ -127,12 +128,12 @@ class WidgetsListTest extends IntegrationTestCase
 
         $list = WidgetsList::get();
 
-        $this->assertCount(11, $this->getWidgetsPerCategory($list));
+        $this->assertCount(12, $this->getWidgetsPerCategory($list));
 
         $list->remove('SEO', 'NoTeXiStInG');
 
         $perCategory = $this->getWidgetsPerCategory($list);
-        $this->assertCount(11, $perCategory);
+        $this->assertCount(12, $perCategory);
 
         $this->assertArrayHasKey('SEO', $perCategory);
         $this->assertCount(2, $perCategory['SEO']);
diff --git a/tests/PHPUnit/System/expected/test_apiGetReportMetadata__API.getWidgetMetadata.xml b/tests/PHPUnit/System/expected/test_apiGetReportMetadata__API.getWidgetMetadata.xml
index a9d6028b21..3001779c4c 100644
--- a/tests/PHPUnit/System/expected/test_apiGetReportMetadata__API.getWidgetMetadata.xml
+++ b/tests/PHPUnit/System/expected/test_apiGetReportMetadata__API.getWidgetMetadata.xml
@@ -2998,6 +2998,26 @@
 		</widgets>
 	</row>
 	<row>
+		<name>Metric</name>
+		<category>
+			<id>General_Generic</id>
+			<name>Generic</name>
+			<order>70</order>
+			<icon />
+		</category>
+		<subcategory />
+		<module>CoreVisualizations</module>
+		<action>singleMetricView</action>
+		<order>99</order>
+		<parameters>
+			<module>CoreVisualizations</module>
+			<action>singleMetricView</action>
+			<column />
+		</parameters>
+		<uniqueId>widgetCoreVisualizationssingleMetricViewcolumn</uniqueId>
+		<isWide>0</isWide>
+	</row>
+	<row>
 		<name>Pie graph</name>
 		<category>
 			<id>ExampleUI_UiFramework</id>