Skip to content

Commit 73191ff

Browse files
mhspeltMischa Speltgvreddy04
authored
Line Chart Fill (#828)
* Add LineChartDataset Fill options * Updated documentation * LineChartDataset.cs - code cleanup * Code cleanup * #828 Formating updated * #828: LineChartDataset - formating updates * Charts demos - updated --------- Co-authored-by: Mischa Spelt <[email protected]> Co-authored-by: Vikram Reddy <[email protected]>
1 parent 2cc30bc commit 73191ff

File tree

5 files changed

+316
-48
lines changed

5 files changed

+316
-48
lines changed

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<PageTitle>@title</PageTitle>
44

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl"/>
5+
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
66

77
<h1>Blazor Line Chart</h1>
88
<div class="lead mb-3">
@@ -17,26 +17,26 @@
1717
Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
1818
</div>
1919

20-
<SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works"/>
20+
<SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
2121
<div class="mb-3">
2222
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
2323
</div>
2424
<Callout Heading="TIP" Color="CalloutColor.Success">
2525
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.
2626
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.
2727
</Callout>
28-
<Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true"/>
28+
<Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true" />
2929
<div class="my-3"></div>
3030
<Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
3131

32-
<SectionHeading Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale"/>
32+
<SectionHeading Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale" />
3333
<div class="my-3">
3434
By default, the chart is using the default locale of the platform on which it is running.
3535
In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
3636
</div>
37-
<Demo Type="typeof(LineChart_Demo_02_Locale)" Tabs="true"/>
37+
<Demo Type="typeof(LineChart_Demo_02_Locale)" Tabs="true" />
3838

39-
<SectionHeading Size="HeadingSize.H4" Text="Add data dynamically for a specific dataset" PageUrl="@pageUrl" HashTagName="add-data-dynamically-for-a-specific-dataset"/>
39+
<SectionHeading Size="HeadingSize.H4" Text="Add data dynamically for a specific dataset" PageUrl="@pageUrl" HashTagName="add-data-dynamically-for-a-specific-dataset" />
4040
<Demo Type="typeof(LineChart_Demo_03_Dynamically_add_data)" Tabs="true" />
4141

4242
<SectionHeading Size="HeadingSize.H4" Text="Data labels" PageUrl="@pageUrl" HashTagName="data-labels" />
@@ -45,6 +45,9 @@
4545
<SectionHeading Size="HeadingSize.H4" Text="Tick Configuration" PageUrl="@pageUrl" HashTagName="tick-configuration" />
4646
<Demo Type="typeof(LineChart_Demo_05_Tick_Configuration)" Tabs="true" />
4747

48+
<SectionHeading Size="HeadingSize.H4" Text="Fill between datasets" PageUrl="@pageUrl" HashTagName="dataset-fill" />
49+
<Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
50+
4851
@code {
4952
private readonly string pageUrl = "/charts/line-chart";
5053
private readonly string title = "Blazor Line Chart";

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
</div>
44

55
<div class="mt-5">
6-
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
7-
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()" Disabled="@(datasetsCount >= 12)"> Add Dataset </Button>
8-
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
9-
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
10-
<Button Type="ButtonType.Button" Class="mb-2" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
6+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
7+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
8+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await AddDataAsync()"> Add Data </Button>
9+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
10+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
1111
</div>
1212

1313
@code {
@@ -23,8 +23,12 @@
2323
protected override void OnInitialized()
2424
{
2525
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
26-
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
27-
lineChartOptions.Scales.Y!.Max = 250;
26+
lineChartOptions = new()
27+
{
28+
IndexAxis = "x",
29+
Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false },
30+
Responsive = true,
31+
};
2832
}
2933

3034
protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -125,13 +129,10 @@
125129
{
126130
Label = $"Team {datasetsCount}",
127131
Data = GetRandomData(),
128-
BackgroundColor = c.ToRgbString(),
132+
BackgroundColor = c.ToRgbaString(),
129133
BorderColor = c.ToRgbString(),
130-
BorderWidth = 2,
131-
HoverBorderWidth = 4,
132-
// PointBackgroundColor = c.ToRgbString(),
133-
// PointRadius = 0, // hide points
134-
// PointHoverRadius = 4,
134+
PointRadius = new List<double> { 5 },
135+
PointHoverRadius = new List<double> { 8 },
135136
};
136137
}
137138

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
</div>
44

55
<div class="mt-5">
6-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </Button>
7-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToCenter()"> Alignment: center (default) </Button>
8-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToEnd()"> Alignment: end </Button>
6+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </Button>
7+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ChangeTicksAlignmentToCenter()"> Alignment: center (default) </Button>
8+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ChangeTicksAlignmentToEnd()"> Alignment: end </Button>
99
</div>
1010

1111
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<LineChart Height="200" @ref="lineChart" Width="500" />
2+
3+
<div class="mt-5">
4+
<Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await NoFillAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> No fill</Button>
5+
<Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToNextAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to next (relative index +1)</Button>
6+
<Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToZeroAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to specific (absolute index 0) </Button>
7+
<Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToReferenceAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to specific (by object reference)</Button>
8+
<Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToStartAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to start </Button>
9+
<Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToEndAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to end</Button>
10+
<Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToValueAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to value 50</Button>
11+
</div>
12+
13+
@code {
14+
private LineChart lineChart = default!;
15+
private LineChartOptions lineChartOptions = default!;
16+
private ChartData chartData = default!;
17+
18+
private int datasetsCount;
19+
private int labelsCount;
20+
21+
private Random random = new();
22+
23+
protected override void OnInitialized()
24+
{
25+
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(4) };
26+
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
27+
}
28+
29+
protected override async Task OnAfterRenderAsync(bool firstRender)
30+
{
31+
if (firstRender)
32+
{
33+
await lineChart.InitializeAsync(chartData, lineChartOptions);
34+
}
35+
await base.OnAfterRenderAsync(firstRender);
36+
}
37+
38+
public async Task NoFillAsync()
39+
{
40+
var middle = chartData.Datasets[1] as LineChartDataset;
41+
middle!.Fill = null;
42+
await lineChart.UpdateAsync(chartData, lineChartOptions);
43+
}
44+
45+
public async Task FillToNextAsync()
46+
{
47+
var middle = chartData.Datasets[1] as LineChartDataset;
48+
middle!.FillToDataset(1, true);
49+
await lineChart.UpdateAsync(chartData, lineChartOptions);
50+
}
51+
52+
public async Task FillToZeroAsync()
53+
{
54+
var middle = chartData.Datasets[1] as LineChartDataset;
55+
middle!.FillToDataset(0, false);
56+
await lineChart.UpdateAsync(chartData, lineChartOptions);
57+
}
58+
59+
public async Task FillToReferenceAsync()
60+
{
61+
var middle = chartData.Datasets[1] as LineChartDataset;
62+
var fillTo = chartData.Datasets[3] as LineChartDataset;
63+
64+
middle!.FillToDataset(chartData, fillTo!);
65+
await lineChart.UpdateAsync(chartData, lineChartOptions);
66+
}
67+
68+
public async Task FillToStartAsync()
69+
{
70+
var middle = chartData.Datasets[1] as LineChartDataset;
71+
middle!.FillToStart();
72+
await lineChart.UpdateAsync(chartData, lineChartOptions);
73+
}
74+
75+
public async Task FillToEndAsync()
76+
{
77+
var middle = chartData.Datasets[1] as LineChartDataset;
78+
middle!.FillToEnd();
79+
await lineChart.UpdateAsync(chartData, lineChartOptions);
80+
}
81+
82+
public async Task FillToValueAsync()
83+
{
84+
var middle = chartData.Datasets[1] as LineChartDataset;
85+
middle!.FillToValue(50.0);
86+
await lineChart.UpdateAsync(chartData, lineChartOptions);
87+
}
88+
89+
#region Data Preparation
90+
91+
private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
92+
{
93+
var datasets = new List<IChartDataset>();
94+
95+
for (var index = 0; index < numberOfDatasets; index++)
96+
{
97+
datasets.Add(GetRandomLineChartDataset());
98+
}
99+
100+
return datasets;
101+
}
102+
103+
private LineChartDataset GetRandomLineChartDataset()
104+
{
105+
var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
106+
107+
datasetsCount += 1;
108+
109+
return new LineChartDataset
110+
{
111+
Label = $"Team {datasetsCount}",
112+
Data = GetRandomData(),
113+
BackgroundColor = c.ToRgbaString(),
114+
BorderCapStyle = "round",
115+
BorderColor = c.ToRgbString(),
116+
BorderWidth = 2,
117+
HoverBorderWidth = 4,
118+
PointBackgroundColor = new List<string>() { c.ToRgbString() },
119+
// PointRadius = 0, // hide points
120+
PointHoverRadius = new List<double>() { 4 },
121+
};
122+
}
123+
124+
private List<double?> GetRandomData()
125+
{
126+
var data = new List<double?>();
127+
for (var index = 0; index < labelsCount; index++)
128+
{
129+
data.Add(random.Next(200));
130+
}
131+
132+
return data;
133+
}
134+
135+
private List<string> GetDefaultDataLabels(int numberOfLabels)
136+
{
137+
var labels = new List<string>();
138+
for (var index = 0; index < numberOfLabels; index++)
139+
{
140+
labels.Add(GetNextDataLabel());
141+
}
142+
143+
return labels;
144+
}
145+
146+
private string GetNextDataLabel()
147+
{
148+
labelsCount += 1;
149+
return $"Day {labelsCount}";
150+
}
151+
152+
#endregion Data Preparation
153+
}

0 commit comments

Comments
 (0)