Move OS chart to ChartJS.

This commit is contained in:
2019-11-03 03:20:04 +00:00
parent d3ca6d5204
commit 6eb888c637
7 changed files with 123 additions and 67 deletions

View File

@@ -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>

View File

@@ -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);
}
}
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 src="https://code.highcharts.com/modules/exporting.js"></script>
@{
/* string highChartsTitleColor;
string highChartsDataLabelColor;
switch(DateTime.UtcNow.DayOfYear)
<script crossorigin="anonymous" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
function DrawPie(elementName, label, dataLabels, data)
{
// 24th January, Macintosh launch
case 24:
highChartsTitleColor = "#000000";
highChartsDataLabelColor = "#000000";
break;
default:
highChartsTitleColor = "#AAAAAA";
highChartsDataLabelColor = "#FFFFFF";
break;
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
}
}}}
);
}
Hashtable highChartsTitleStyle = new Hashtable {{"color", highChartsTitleColor}};
PlotOptionsPieDataLabelsStyle highChartsDataLabelStyle = new PlotOptionsPieDataLabelsStyle {Color = highChartsDataLabelColor, TextOutline = "0px"};
@(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))
@(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))
*/
function DrawOsPie(osData)
{
DrawPie("osChart", "Operating systems", osData[0], osData[1])
}
window.onload = () => {
var foo = document.body.style['highcharts-color-0'];
$.ajax({dataType: "json", url: "/Stats/GetOsData", success: DrawOsPie, cache:false});
}
</script>

View File

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

View File

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