From 5a6c0a941f5073069a994b8a826d996a437e76ab Mon Sep 17 00:00:00 2001 From: algifari85 Date: Wed, 6 Jan 2021 14:54:56 +0100 Subject: [PATCH 1/2] Added Line Chart Interpolation sample --- .../Pages/Charts/Line/Interpolation.razor | 125 ++++++++++++++++++ ChartJs.Blazor.Samples/Server/samples.json | 12 +- 2 files changed, 133 insertions(+), 4 deletions(-) create mode 100644 ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Interpolation.razor diff --git a/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Interpolation.razor b/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Interpolation.razor new file mode 100644 index 0000000..fa7e01a --- /dev/null +++ b/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Interpolation.razor @@ -0,0 +1,125 @@ +@page "/charts/line/interpolation" +@using ChartJs.Blazor.LineChart +@layout SampleLayout + + + + + +@code { + private const int InitalCount = 7; + private int?[] datapoints; + Random rand = new Random(); + private LineConfig _config; + private Chart _chart; + + protected override void OnInitialized() + { + datapoints = new int?[] { 0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170 }; + + IEnumerable labels = new string[] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" }; + + _config = new LineConfig + { + Options = new LineOptions + { + Responsive = true, + Title = new OptionsTitle + { + Display = true, + Text = "ChartJs.Blazor Line Chart - Cubic interpolation mode" + }, + Tooltips = new Tooltips + { + Mode = InteractionMode.Nearest, + Intersect = true + }, + Hover = new Hover + { + Mode = InteractionMode.Nearest, + Intersect = true + }, + Scales = new Scales + { + + XAxes = new List + { + new CategoryAxis + { + ScaleLabel = new ScaleLabel + { + LabelString = "Month" + } + } + }, + YAxes = new List + { + new LinearCartesianAxis + { + ScaleLabel = new ScaleLabel + { + LabelString = "Value", + Display = true + }, + Ticks = new LinearCartesianTicks + { + SuggestedMin = -10, + SuggestedMax = 200 + } + } + } + } + } + }; + + IDataset dataset1 = new LineDataset(datapoints) + { + Label = "Cubic interpolation (monotone)", + BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Red), + BorderColor = ColorUtil.FromDrawingColor(ChartColors.Red), + Fill = FillingMode.Disabled, + CubicInterpolationMode = CubicInterpolationMode.Monotone, + LineTension = 0.4 + }; + IDataset dataset2 = new LineDataset(datapoints) + { + Label = "Cubic interpolation", + BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Blue), + BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue), + Fill = FillingMode.Disabled, + LineTension = 0.4 + }; + + IDataset dataset3 = new LineDataset(datapoints) + { + Label = "Linear interpolation (default)", + BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Green), + BorderColor = ColorUtil.FromDrawingColor(ChartColors.Green), + Fill = FillingMode.Disabled, + LineTension = 0 + + }; + + _config.Data.Labels.AddRange(labels); + _config.Data.Datasets.Add(dataset1); + _config.Data.Datasets.Add(dataset2); + _config.Data.Datasets.Add(dataset3); + } + + private void RandomizeData() + { + + for(int i = 0; i < datapoints.Count(); i++) + { + datapoints[i] = rand.NextDouble() < 0.05 ? null : (int?)RandomScalingFactor(); + } + + foreach (IDataset dataset in _config.Data.Datasets) + { + dataset.Clear(); + dataset.AddRange(datapoints); + } + + _chart.Update(); + } +} diff --git a/ChartJs.Blazor.Samples/Server/samples.json b/ChartJs.Blazor.Samples/Server/samples.json index f2e6e44..40c13ab 100644 --- a/ChartJs.Blazor.Samples/Server/samples.json +++ b/ChartJs.Blazor.Samples/Server/samples.json @@ -23,10 +23,14 @@ "Title": "Basic", "Path": "charts/line/basic" }, - { - "Title": "Stepped", - "Path": "charts/line/stepped" - } + { + "Title": "Stepped", + "Path": "charts/line/stepped" + }, + { + "Title": "Interpolation", + "Path": "charts/line/interpolation" + } ] }, { From 339c202a41c7f6a222dafd0e5f43c283e2da7e46 Mon Sep 17 00:00:00 2001 From: algifari85 Date: Thu, 7 Jan 2021 19:24:59 +0100 Subject: [PATCH 2/2] Fixed indentation in samles.json. Resolved remarks in Interpolation.razor according to PR comments. --- .editorconfig | 3 ++ .../Pages/Charts/Line/Interpolation.razor | 43 ++++++++----------- ChartJs.Blazor.Samples/Server/samples.json | 16 +++---- 3 files changed, 29 insertions(+), 33 deletions(-) diff --git a/.editorconfig b/.editorconfig index 7af7164..c938674 100644 --- a/.editorconfig +++ b/.editorconfig @@ -15,6 +15,9 @@ trim_trailing_whitespace = true [project.json] indent_size = 2 +[samples.json] +indent_size = 2 + # C# files [*.cs] # New line preferences diff --git a/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Interpolation.razor b/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Interpolation.razor index fa7e01a..dd27fec 100644 --- a/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Interpolation.razor +++ b/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Interpolation.razor @@ -7,17 +7,15 @@ @code { - private const int InitalCount = 7; - private int?[] datapoints; - Random rand = new Random(); + private const int InitalCount = 12; + private int?[] _datapoints; + private Random _rng = new Random(); private LineConfig _config; private Chart _chart; protected override void OnInitialized() { - datapoints = new int?[] { 0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170 }; - - IEnumerable labels = new string[] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" }; + _datapoints = new int?[] { 0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170 }; _config = new LineConfig { @@ -41,19 +39,15 @@ }, Scales = new Scales { - XAxes = new List - { + { new CategoryAxis { - ScaleLabel = new ScaleLabel - { - LabelString = "Month" - } + ScaleLabel = new ScaleLabel() } - }, + }, YAxes = new List - { + { new LinearCartesianAxis { ScaleLabel = new ScaleLabel @@ -72,7 +66,7 @@ } }; - IDataset dataset1 = new LineDataset(datapoints) + IDataset dataset1 = new LineDataset(_datapoints) { Label = "Cubic interpolation (monotone)", BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Red), @@ -81,26 +75,26 @@ CubicInterpolationMode = CubicInterpolationMode.Monotone, LineTension = 0.4 }; - IDataset dataset2 = new LineDataset(datapoints) + + IDataset dataset2 = new LineDataset(_datapoints) { - Label = "Cubic interpolation", + Label = "Cubic interpolation (default)", BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Blue), BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue), Fill = FillingMode.Disabled, LineTension = 0.4 }; - IDataset dataset3 = new LineDataset(datapoints) + IDataset dataset3 = new LineDataset(_datapoints) { - Label = "Linear interpolation (default)", + Label = "Linear interpolation", BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Green), BorderColor = ColorUtil.FromDrawingColor(ChartColors.Green), Fill = FillingMode.Disabled, LineTension = 0 - }; - _config.Data.Labels.AddRange(labels); + _config.Data.Labels.AddRange(Enumerable.Range(0, InitalCount).Select(i => i.ToString())); _config.Data.Datasets.Add(dataset1); _config.Data.Datasets.Add(dataset2); _config.Data.Datasets.Add(dataset3); @@ -108,16 +102,15 @@ private void RandomizeData() { - - for(int i = 0; i < datapoints.Count(); i++) + for(int i = 0; i < _datapoints.Count(); i++) { - datapoints[i] = rand.NextDouble() < 0.05 ? null : (int?)RandomScalingFactor(); + _datapoints[i] = _rng.NextDouble() < 0.05 ? null : (int?)RandomScalingFactor(); } foreach (IDataset dataset in _config.Data.Datasets) { dataset.Clear(); - dataset.AddRange(datapoints); + dataset.AddRange(_datapoints); } _chart.Update(); diff --git a/ChartJs.Blazor.Samples/Server/samples.json b/ChartJs.Blazor.Samples/Server/samples.json index 40c13ab..ef0ffe9 100644 --- a/ChartJs.Blazor.Samples/Server/samples.json +++ b/ChartJs.Blazor.Samples/Server/samples.json @@ -23,14 +23,14 @@ "Title": "Basic", "Path": "charts/line/basic" }, - { - "Title": "Stepped", - "Path": "charts/line/stepped" - }, - { - "Title": "Interpolation", - "Path": "charts/line/interpolation" - } + { + "Title": "Stepped", + "Path": "charts/line/stepped" + }, + { + "Title": "Interpolation", + "Path": "charts/line/interpolation" + } ] }, {