From 2eec246d252b2dea7db8079383c8560896a04373 Mon Sep 17 00:00:00 2001
From: Pascal Berger <pascal.berger@gmail.com>
Date: Mon, 18 Jun 2018 20:27:36 +0200
Subject: [PATCH] (GH-34) Add report using DevExtreme PivotGrid

---
 .../GenericIssueReportGeneratorTests.cs       |   1 +
 .../Cake.Issues.Reporting.Generic.csproj      |   1 +
 .../GenericIssueReportTemplate.cs             |   8 +-
 .../GenericIssueReportTemplateExtensions.cs   |   3 +
 .../Templates/DxPivotGrid.cshtml              | 146 ++++++++++++++++++
 5 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 src/Cake.Issues.Reporting.Generic/Templates/DxPivotGrid.cshtml

diff --git a/src/Cake.Issues.Reporting.Generic.Tests/GenericIssueReportGeneratorTests.cs b/src/Cake.Issues.Reporting.Generic.Tests/GenericIssueReportGeneratorTests.cs
index c98b7d05..c46da5a3 100644
--- a/src/Cake.Issues.Reporting.Generic.Tests/GenericIssueReportGeneratorTests.cs
+++ b/src/Cake.Issues.Reporting.Generic.Tests/GenericIssueReportGeneratorTests.cs
@@ -43,6 +43,7 @@ public sealed class TheInternalCreateReportMethod
             [InlineData(GenericIssueReportTemplate.HtmlDiagnostic)]
             [InlineData(GenericIssueReportTemplate.HtmlDataTable)]
             [InlineData(GenericIssueReportTemplate.HtmlDxDataGrid)]
+            [InlineData(GenericIssueReportTemplate.HtmlDxPivotGrid)]
             public void Should_Generate_Report_From_Embedded_Template(GenericIssueReportTemplate template)
             {
                 // Given
diff --git a/src/Cake.Issues.Reporting.Generic/Cake.Issues.Reporting.Generic.csproj b/src/Cake.Issues.Reporting.Generic/Cake.Issues.Reporting.Generic.csproj
index 1039e88c..4f481ab3 100644
--- a/src/Cake.Issues.Reporting.Generic/Cake.Issues.Reporting.Generic.csproj
+++ b/src/Cake.Issues.Reporting.Generic/Cake.Issues.Reporting.Generic.csproj
@@ -86,6 +86,7 @@
     <None Include="packages.config" />
     <EmbeddedResource Include="Templates\DataTable.cshtml" />
     <EmbeddedResource Include="Templates\DxDataGrid.cshtml" />
+    <EmbeddedResource Include="Templates\DxPivotGrid.cshtml" />
   </ItemGroup>
   <ItemGroup>
     <Analyzer Include="..\packages\Microsoft.CodeQuality.Analyzers.2.6.0\analyzers\dotnet\cs\Microsoft.CodeQuality.Analyzers.dll" />
diff --git a/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplate.cs b/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplate.cs
index 0b74370c..ad7fc4a2 100644
--- a/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplate.cs
+++ b/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplate.cs
@@ -18,6 +18,12 @@ public enum GenericIssueReportTemplate
         /// <summary>
         /// Template for a HTML report containing a rich data grid with sorting, filtering, grouping and search capabilities.
         /// </summary>
-        HtmlDxDataGrid
+        HtmlDxDataGrid,
+
+        /// <summary>
+        /// Template for a HTML report containing a pivot grid showing number of errors, warnings, suggestions and hints,
+        /// with a detail drill down view and an overview chart.
+        /// </summary>
+        HtmlDxPivotGrid
     }
 }
diff --git a/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplateExtensions.cs b/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplateExtensions.cs
index 2a52854a..759ef8b7 100644
--- a/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplateExtensions.cs
+++ b/src/Cake.Issues.Reporting.Generic/GenericIssueReportTemplateExtensions.cs
@@ -25,6 +25,9 @@ public static string GetTemplateResourceName(this GenericIssueReportTemplate tem
                 case GenericIssueReportTemplate.HtmlDxDataGrid:
                     return "DxDataGrid.cshtml";
 
+                case GenericIssueReportTemplate.HtmlDxPivotGrid:
+                    return "DxPivotGrid.cshtml";
+
                 default:
                     throw new ArgumentOutOfRangeException(nameof(template));
             }
diff --git a/src/Cake.Issues.Reporting.Generic/Templates/DxPivotGrid.cshtml b/src/Cake.Issues.Reporting.Generic/Templates/DxPivotGrid.cshtml
new file mode 100644
index 00000000..7ad58e32
--- /dev/null
+++ b/src/Cake.Issues.Reporting.Generic/Templates/DxPivotGrid.cshtml
@@ -0,0 +1,146 @@
+@model IEnumerable<Cake.Issues.IIssue>
+
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title>Issues Report</title>
+
+    @* DevExtreme dependencies *@
+    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script>
+    @* DevExtreme themes *@
+    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.common.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.light.css" />
+    @* DevExtreme library *@
+    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/18.1.3/js/dx.all.js"></script>
+</head>
+<body class="dx-viewport">
+    <h1>Issues Report</h1>
+
+    <div class="container">
+        <div id="pivotgrid-chart"></div>
+        <div id="pivotgrid"></div>
+        <div id="pivotgrid-popup"></div>
+    </div>
+
+    <script type="text/javascript">
+        var issues = [];
+        @foreach (var issue in Model)
+        {
+            @:issues.push({ProviderName: "@issue.ProviderName", ProviderType: "@issue.ProviderType", Priority: "@issue.Priority", PriorityName: "@issue.PriorityName", Project: "@issue.Project", Path: "@if (issue.AffectedFileRelativePath != null) { @issue.AffectedFileRelativePath.GetDirectory() }", File: "@if (issue.AffectedFileRelativePath != null) { @issue.AffectedFileRelativePath.GetFilename() }", Line: "@issue.Line", Rule: "@issue.Rule", RuleUrl: "@issue.RuleUrl", Message: "@issue.Message"});
+        }
+    </script>
+    <script type="text/javascript">
+        $(function(){
+            var pivotGridChart = $("#pivotgrid-chart").dxChart({
+                commonSeriesSettings: {
+                    type: "bar"
+                },
+                tooltip: {
+                    enabled: true,
+                    customizeTooltip: function(args) {
+                        return {
+                            html: "Total " + args.seriesName + ": " + args.valueText
+                        };
+                    }
+                },
+                size: {
+                    height: 200
+                },
+                adaptiveLayout: {
+                    width: 450
+                }
+            }).dxChart("instance");
+
+            var pivotGrid = $("#pivotgrid").dxPivotGrid({
+                height: "calc(100% - 200px)",
+                allowFiltering: true,
+                fieldPanel: {
+                    showColumnFields: false,
+                    showDataFields: false,
+                    showFilterFields: true,
+                    showRowFields: false,
+                    allowFieldDragging: true,
+                    visible: true
+                },
+                onCellClick: function(e) {
+                    if (e.area == "data") {
+                        var pivotGridDataSource = e.component.getDataSource(),
+                            rowPathLength = e.cell.rowPath.length,
+                            rowPathName = e.cell.rowPath[rowPathLength - 1],
+                            popupTitle = (rowPathName ? rowPathName : "Total") + " issues";
+
+                        drillDownDataSource = pivotGridDataSource.createDrillDownDataSource(e.cell);
+                        pivotgridPopup.option("title", popupTitle);
+                        pivotgridPopup.show();
+                    }
+                },
+                dataSource: {
+                    fields: [
+                        {
+                            caption: "Project",
+                            dataField: "Project",
+                            area: "row" 
+                        },
+                        {
+                            caption: "Path",
+                            dataField: "Path",
+                            area: "row" 
+                        },
+                        {
+                            caption: "File",
+                            dataField: "File",
+                            area: "row" 
+                        },
+                        {
+                            caption: "PriorityName",
+                            dataField: "PriorityName",
+                            area: "column" 
+                        },
+                        {
+                            caption: "Provider",
+                            dataField: "ProviderName",
+                            area: "filter" 
+                        },
+                        {
+                            caption: "Count",
+                            dataField: "Rule",
+                            area: "data" 
+                        }
+                    ],
+                    store: issues
+                }
+            }).dxPivotGrid("instance");
+
+            pivotGrid.bindChart(
+                pivotGridChart, {
+                    inverted: true,
+                    dataFieldsDisplayMode: "splitPanes",
+                    alternateDataFields: false
+            });
+
+            var pivotgridPopup = $("#pivotgrid-popup").dxPopup({
+                width: 600,
+                height: 400,
+                resizeEnabled: true,
+                contentTemplate: function(contentElement) {
+                    $("<div />")
+                        .addClass("drill-down")
+                        .dxDataGrid({
+                            width: "100%",
+                            height: "100%",
+                            columns: ["Project", "Path", "File", "Line", "Rule", "Message"]
+                        })
+                        .appendTo(contentElement);
+                },
+                onShowing: function() {
+                    $(".drill-down")
+                        .dxDataGrid("instance")
+                        .option("dataSource", drillDownDataSource);
+                }
+            }).dxPopup("instance");
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file