Pr chartjs time options

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor

@@ -6,33 +6,33 @@
 
 <h1>Blazor Line Chart</h1>
 <div class="lead mb-3">
-    A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
-    It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
+  A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
+  It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
 </div>
 
 <CarbonAds />
 
 <SectionHeading Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" HashTagName="prerequisites" />
 <div class="mb-3">
-    Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
+  Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
 </div>
 
 <SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
 <div class="mb-3">
-    In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
+  In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
 </div>
 <Callout Heading="TIP" Color="CalloutColor.Success">
-    For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
-    These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+  For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
+  These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
 </Callout>
 <Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true" />
 <div class="my-3"></div>
 <Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale" />
 <div class="my-3">
-    By default, the chart is using the default locale of the platform on which it is running.
-    In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
+  By default, the chart is using the default locale of the platform on which it is running.
+  In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
 </div>
 <Demo Type="typeof(LineChart_Demo_02_Locale)" Tabs="true" />
 
@@ -48,9 +48,12 @@
 <SectionHeading Size="HeadingSize.H4" Text="Fill between datasets" PageUrl="@pageUrl" HashTagName="dataset-fill" />
 <Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H4" Text="Time Axis" PageUrl="@pageUrl" HashTagName="time-axis" />
+<Demo Type="typeof(LineChart_Demo_07_Time_Axis)" Tabs="true" />
+
 @code {
-    private readonly string pageUrl = "/charts/line-chart";
-    private readonly string title = "Blazor Line Chart";
-    private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
-    private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
+  private readonly string pageUrl = "/charts/line-chart";
+  private readonly string title = "Blazor Line Chart";
+  private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+  private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_07_Time_Axis.razor

@@ -0,0 +1,95 @@
+<LineChart Height="200" @ref="lineChart" Width="500" />
+
+@* You need to enable a date adapter for ChartJS, e.g. Luxon: *@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.5.0/luxon.min.js" integrity="sha512-SN7iwxiJt9nFKiLayg3NjLItXPwRfBr4SQSIugMeBFrD4lIFJe1Z/exkTZYAg3Ul+AfZEGws2PQ+xSoaWfxRQQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.3.1/chartjs-adapter-luxon.umd.js" integrity="sha512-shMguvn9vyPHoXeEEPgqLX+f7zEHpuYbhK4xcBMS+IATkIj/1P+PhnWC4wMhFUekmSZqKTvL43cHnRkAlrMJ3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<div class="mt-5">
+  <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="@(async () => await TextLabels())" Size="ButtonSize.Small" Type="ButtonType.Button"> Text labels</Button>
+  <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="@(async () => await DateLabels("dd-MM-yyyy"))" Size="ButtonSize.Small" Type="ButtonType.Button"> Date labels [European format]</Button>
+  <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="@(async () => await DateLabels("MM/dd/yy"))" Size="ButtonSize.Small" Type="ButtonType.Button"> Date labels [US format]</Button>
+</div>
+
+@code {
+  private LineChart lineChart = default!;
+  private LineChartOptions lineChartOptions = default!;
+  private ChartData chartData = default!;
+  private DateTime startOfYear = new DateTime( DateTime.Today.Year, 1, 1 );
+
+  protected override void OnInitialized()
+  {
+    var colors = ColorUtility.CategoricalTwelveColors;
+
+    var rng = new Random();
+    var labels = new List<string>();
+    var data = new List<double?>();
+    for( int i = 0; i < 20; i++ )
+    {
+      labels.Add( startOfYear.AddDays( rng.Next( 0, 365 ) ).ToString( "yyyy-MM-dd" ) );
+      data.Add( rng.Next( 0, 200 ) );
+    }
+
+    var datasets = new List<IChartDataset>();
+    labels.Sort();
+    var dataset = new LineChartDataset
+      {
+        Label = "Value",
+        Data = data,
+        BackgroundColor = colors[ 0 ],
+        BorderColor = colors[ 0 ],
+        BorderWidth = 2,
+        HoverBorderWidth = 4
+      };
+    datasets.Add( dataset );
+
+    chartData = new ChartData { Labels = labels, Datasets = datasets };
+
+    lineChartOptions = new();
+    lineChartOptions.Responsive = true;
+    lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };
+
+    lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Day", Display = true };
+    lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Value", Display = true };
+  }
+
+  protected async Task TextLabels()
+  {
+    // Set the defaults
+    lineChartOptions.Scales.X!.Type = null;
+    lineChartOptions.Scales.X!.Time = null;
+
+    lineChartOptions.Scales.X!.Min = null;
+    lineChartOptions.Scales.X!.Max = null;
+
+    await lineChart.UpdateAsync( chartData, lineChartOptions );
+  }
+
+  protected async Task DateLabels( string format )
+  {
+    lineChartOptions.Scales.X!.Type = ChartAxesType.Time;
+    lineChartOptions.Scales.X!.Time = new ChartTimeAxisOptions()
+      {
+        TooltipFormat = format,
+        DisplayFormats = new
+        {
+          month = format
+        },
+        Unit = ChartTimeUnit.Month
+      };
+
+    lineChartOptions.Scales.X!.Min = startOfYear.ToString( "yyyy-MM-dd" );
+    lineChartOptions.Scales.X!.Max = startOfYear.AddYears( 1 ).ToString( "yyyy-MM-dd" );
+
+    await lineChart.UpdateAsync( chartData, lineChartOptions );
+  }
+
+  protected override async Task OnAfterRenderAsync( bool firstRender )
+  {
+    if( firstRender )
+    {
+      await lineChart.InitializeAsync( chartData, lineChartOptions );
+    }
+    await base.OnAfterRenderAsync( firstRender );
+  }
+
+}