LineChart: Interpolation modes demo added.

Author: gvreddy04

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor

@@ -83,6 +83,13 @@
     <Demo Type="typeof(LineChart_Demo_04_Locale)" Tabs="true" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H4" Name="Interpolation modes" PageUrl="@pageUrl" Link="interpolation-modes">
+    <Block>
+        TODO: Add a description for the Interpolation Modes section.
+    </Block>
+    <Demo Type="typeof(LineChart_Demo_05_Interpolation_Modes)" Tabs="true" />
+</Section>
+
 @code {
     private const string pageUrl = DemoRouteConstants.Demos_LineChart;
     private const string pageTitle = "Line Chart";

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_05_Interpolation_Modes.razor

@@ -0,0 +1,83 @@
+<LineChart @ref="lineChart" Width="600" />
+
+@code {
+    private LineChart lineChart = default!;
+    private LineChartOptions lineChartOptions = default!;
+    private ChartData chartData = default!;
+
+    private int dataCount = 12;
+    private List<double?> datapoints = [0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170];
+    private int datasetsCount;
+    private Random random = new();
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData { Labels = GetDefaultDataLabels(), Datasets = GetDefaultDataSets() };
+        lineChartOptions = new()
+        {
+            IndexAxis = "x",
+            Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false },
+            Responsive = true,
+        };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await lineChart.InitializeAsync(chartData, lineChartOptions);
+        }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    #region Data Preparation
+
+    private List<string> GetDefaultDataLabels()
+    {
+        var labels = new List<string>();
+
+        for (var index = 0; index < dataCount; index++)
+            labels.Add(index.ToString());
+
+        return labels;
+    }
+
+    private List<IChartDataset> GetDefaultDataSets()
+    {
+        var datasets = new List<IChartDataset>();
+
+        // 1.
+        datasets.Add(new LineChartDataset
+        {
+            Label = "Cubic interpolation (monotone)",
+            Data = datapoints,
+            BorderColor = ColorUtility.CategoricalSixColors[0].ToColor().ToRgbString(),
+            CubicInterpolationMode = "monotone",
+            Fill = false,
+            Tension = 0.4,
+        });
+
+        // 2.
+        datasets.Add(new LineChartDataset
+        {
+            Label = "Cubic interpolation",
+            Data = datapoints,
+            BorderColor = ColorUtility.CategoricalSixColors[1].ToColor().ToRgbString(),
+            Fill = false,
+            Tension = 0.4,
+        });
+
+        // 3.
+        datasets.Add(new LineChartDataset
+        {
+            Label = "Linear interpolation (default)",
+            Data = datapoints,
+            BorderColor = ColorUtility.CategoricalSixColors[2].ToColor().ToRgbString(),
+            Fill = false,
+        });
+
+        return datasets;
+    }
+
+    #endregion Data Preparation
+}