Move OS chart to ChartJS.

.idea/.idea.DiscImageChef.Server/.idea/watcherTasks.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="scss" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="SCSS" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="sass" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>

DiscImageChef.Server/Controllers/StatsController.cs

@@ -115,23 +115,6 @@ namespace DiscImageChef.Server.Controllers
 
                     ViewBag.repOperatingSystems = operatingSystems.OrderBy(os => os.name).ToList();
 
-                    List<PieSeriesData> osPieData = new List<PieSeriesData>();
-
-                    decimal totalOsCount = ctx.OperatingSystems.Sum(o => o.Count);
-
-                    foreach(string os in ctx.OperatingSystems.Select(o => o.Name).Distinct().ToList())
-                    {
-                        decimal osCount = ctx.OperatingSystems.Where(o => o.Name == os).Sum(o => o.Count);
-
-                        osPieData.Add(new PieSeriesData
-                        {
-                            Name = DetectOS.GetPlatformName((PlatformID)Enum.Parse(typeof(PlatformID), os)),
-                            Y    = (double?)(osCount / totalOsCount), Sliced = os == "Linux", Selected = os == "Linux"
-                        });
-                    }
-
-                    ViewData["osPieData"] = osPieData;
-
                     List<PieSeriesData> linuxPieData = new List<PieSeriesData>();
 
                     decimal linuxCount = ctx.OperatingSystems.Where(o => o.Name == PlatformID.Linux.ToString()).
@@ -528,5 +511,25 @@ namespace DiscImageChef.Server.Controllers
 
             return null;
         }
+
+        public IActionResult GetOsData()
+        {
+            var query = ctx.OperatingSystems.GroupBy(x => new
+            {
+                x.Name
+            }, x => x.Count).Select(g => new
+            {
+                g.Key.Name, Count = g.Sum()
+            });
+
+            string[][] result = new string[2][];
+            result[0] = query.Select(x => x.Name).ToArray();
+            result[1] = query.Select(x => x.Count.ToString()).ToArray();
+
+            for(int i = 0; i < result[0].Length; i++)
+                result[0][i] = DetectOS.GetPlatformName((PlatformID)Enum.Parse(typeof(PlatformID), result[0][i]));
+
+            return Json(result);
+        }
     }
 }

DiscImageChef.Server/DiscImageChef.Server.csproj

@@ -66,6 +66,8 @@
 
   <ItemGroup>
     <_ContentIncludedByDefault Remove="wwwroot\js\site.js" />
+    <_ContentIncludedByDefault Remove="wwwroot\css\js\colors\dos.js" />
+    <_ContentIncludedByDefault Remove="wwwroot\css\js\colors\mac.js" />
   </ItemGroup>
 
 </Project>

DiscImageChef.Server/Views/Shared/_Layout.cshtml

@@ -41,10 +41,12 @@
         case 24:
             <link href="~/css/mac/dicserver.css" rel="stylesheet" type="text/css" />
             <link href="~/css/mac/dicserver_highcharts.css" rel="stylesheet" type="text/css" />
+            <script src="~/js/colors/mac.js"></script>
             break;
         default:
             <link href="~/css/dos/dicserver.css" rel="stylesheet" type="text/css" />
             <link href="~/css/dos/dicserver_highcharts.css" rel="stylesheet" type="text/css" />
+            <script src="~/js/colors/dos.js"></script>
             break;
     }
     <meta charset="utf-8" />
@@ -90,7 +92,7 @@
         Claunia.com
     </a>
 </footer>
-<script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+<script crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script crossorigin="anonymous" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
 <script crossorigin="anonymous" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 </body>

DiscImageChef.Server/Views/Stats/Index.cshtml

@@ -60,7 +60,8 @@
                 </li>
             </ol>
             <div class="carousel-inner">
-                <div class="active carousel-item" id="osChart">
+                <div class="active carousel-item">
+                    <canvas id="osChart"></canvas>
                 </div>
                 <div class="carousel-item" id="linuxChart">
                 </div>
@@ -505,54 +506,44 @@
     </div>
 }
 </div>
-<script src="http://code.highcharts.com/highcharts.js"></script>
+<script crossorigin="anonymous" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
-<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<script>
-@{
+function DrawPie(elementName, label, dataLabels, data)
-    /*    string highChartsTitleColor;
+{
-    string highChartsDataLabelColor;
+    var ctx = document.getElementById(elementName);
+    var myChart = new Chart(ctx, {
+                type: 'pie',
+                data: {
+                    labels: dataLabels,
+                    datasets: [{
+                        label: label,
+                        data: data,
+                        backgroundColor: themeColors
+                    }]
+                },
+                options: {
+        responsive: true,
+        title: {
+            display: true,
+            text: label,
+            fontColor: chartTitleColor
+        },
+        legend: {
+                    labels: {
+                        fontColor: chartDataLabelColor
+                    }
+                }}}
+            );
+}
 
-    switch(DateTime.UtcNow.DayOfYear)
+function DrawOsPie(osData)
-    {
+{
-        // 24th January, Macintosh launch
+    DrawPie("osChart", "Operating systems", osData[0], osData[1])
-        case 24:
+}
-            highChartsTitleColor = "#000000";
-            highChartsDataLabelColor = "#000000";
-            break;
-        default:
-            highChartsTitleColor = "#AAAAAA";
-            highChartsDataLabelColor = "#FFFFFF";
-            break;
-    }
 
-    Hashtable highChartsTitleStyle = new Hashtable {{"color", highChartsTitleColor}};
+window.onload = () => {
-    PlotOptionsPieDataLabelsStyle highChartsDataLabelStyle = new PlotOptionsPieDataLabelsStyle {Color = highChartsDataLabelColor, TextOutline = "0px"};
+    var foo = document.body.style['highcharts-color-0'];
+    $.ajax({dataType: "json", url: "/Stats/GetOsData", success: DrawOsPie, cache:false});
+}
 
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Operating system usage", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["osPieData"] as List<PieSeriesData>}}}, "osChart", false))
+</script>
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Linux versions", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["linuxPieData"] as List<PieSeriesData>}}}, "linuxChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "macOS versions", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["macosPieData"] as List<PieSeriesData>}}}, "macosChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Windows versions", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["windowsPieData"] as List<PieSeriesData>}}}, "windowsChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "DiscImageChef versions", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["versionsPieData"] as List<PieSeriesData>}}}, "versionsChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Commands run", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["commandsPieData"] as List<PieSeriesData>}}}, "commandsChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Filters found", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["filtersPieData"] as List<PieSeriesData>}}}, "filtersChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Top 10 media image formats found", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["formatsPieData"] as List<PieSeriesData>}}}, "formatsChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Top 10 partitioning schemes found", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["partitionsPieData"] as List<PieSeriesData>}}}, "partitionsChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Top 10 filesystems found", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["filesystemsPieData"] as List<PieSeriesData>}}}, "filesystemsChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Top 10 media types found in images", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["virtualMediaPieData"] as List<PieSeriesData>}}}, "virtualMediaChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Top 10 media types found in real devices", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["realMediaPieData"] as List<PieSeriesData>}}}, "realMediaChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Devices found by bus", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["devicesBusPieData"] as List<PieSeriesData>}}}, "devicesBusChart", false))
-
-    @(Html.Highsoft().GetHighcharts(new Highcharts {Chart = new Chart {PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = new Shadow {Enabled = true}}, Title = new Title {Text = "Devices found by manufacturer", Style = highChartsTitleStyle}, Tooltip = new Tooltip {PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"}, PlotOptions = new PlotOptions {Pie = new PlotOptionsPie {AllowPointSelect = true, Cursor = PlotOptionsPieCursor.Pointer, DataLabels = new PlotOptionsPieDataLabels {Style = highChartsDataLabelStyle, Enabled = true, Format = "<b>{point.name}</b>: {point.percentage:.1f} %"}}}, Series = new List<Series> {new PieSeries {Name = "Percentage:", Data = ViewData["devicesManufacturerPieData"] as List<PieSeriesData>}}}, "devicesManufacturerChart", false))
-*/
-}

DiscImageChef.Server/wwwroot/js/colors/dos.js

@@ -0,0 +1,16 @@
+var themeColors =
+    [
+    "#FF5555",
+    "#00AA00",
+    "#AA5500",
+    "#AA55AA",
+    "#FF55FF",
+    "#55FFFF",
+    "#FFFF55",
+    "#AA00FF",
+    "#00AAAA",
+    "#AAAAAA"
+];
+
+var chartDataLabelColor = "#FFFFFF";
+var chartTitleColor = "#AAAAAA";

DiscImageChef.Server/wwwroot/js/colors/mac.js

@@ -0,0 +1,17 @@
+var themeColors =
+    [
+        "#1FB714",
+        "#FBF305",
+        "#FF6403",
+        "#562C05",
+        "#DD0907",
+        "#F20884",
+        "#4700A5",
+        "#0000D3",
+        "#02ABEA",
+        "#90713A",
+        "#006412"
+    ];
+
+var chartDataLabelColor = "#000000";
+var chartTitleColor = "#000000";