Skip to content

Commit 6d038d8

Browse files
erossinierossini
committed
Callbacks and add new value and dataset at runtime
1 parent 0cd12d6 commit 6d038d8

57 files changed

Lines changed: 4598 additions & 174 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎ChartjsDemo/Data/AnimationExamples.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
public class AnimationExamples
44
{
55
public static List<string> AnimationText = new List<string>() { "January", "February", "March", "April", "May", "June", "July" };
6-
public static List<decimal> SimpleLine = new List<decimal>() { 65, 59, 80, 81, 56, 55, 40 };
6+
public static List<decimal?> SimpleLine = new List<decimal?>() { 65, 59, 80, 81, 56, 55, 40 };
77
}
88
}

‎ChartjsDemo/Data/BarDataExamples.cs‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ public static class BarDataExamples
1616
};
1717

1818
public static List<string> GroupedLabels = new List<string>() { "1900", "1950", "1999", "2050" };
19-
public static List<decimal> Grouped1 = new List<decimal>() { 133, 221, 783, 2478 };
20-
public static List<decimal> Grouped2 = new List<decimal>() { 408, 547, 675, 734 };
19+
public static List<decimal?> Grouped1 = new List<decimal?>() { 133, 221, 783, 2478 };
20+
public static List<decimal?> Grouped2 = new List<decimal?>() { 408, 547, 675, 734 };
21+
22+
public static List<string> CallbackLabels = new List<string>() { "Q1", "Q2", "Q3", "Q4" };
23+
public static List<decimal?> CallbackValues = new List<decimal?> { 50000, 60000, 70000, 1800000 };
2124
}

‎ChartjsDemo/Data/LineDataExamples.cs‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
1-
namespace ChartjsDemo.Data
1+
using PSC.Blazor.Components.Chartjs.Models.Common;
2+
3+
namespace ChartjsDemo.Data
24
{
35
public static class LineDataExamples
46
{
57
public static List<string> SimpleLineText = new List<string>() { "January", "February", "March", "April", "May", "June", "July" };
6-
public static List<decimal> SimpleLine = new List<decimal>() { 65, 59, 80, 81, 56, 55, 40 };
7-
public static List<decimal> SimpleLine2 = new List<decimal>() { 33, 25, 35, 51, 54, 76, 45 };
8+
public static List<decimal?> SimpleLine = new List<decimal?>() { 65, 59, 80, 81, 86, 55, 40 };
9+
public static List<decimal?> SimpleLine2 = new List<decimal?>() { 33, 25, 35, 51, 54, 76, 60 };
10+
public static List<decimal?> SimpleLine3 = new List<decimal?>() { 53, 91, 39, 61, 39, 87, 23 };
811

912
// custom code
1013
public static List<string> CustomLineText = new List<string>() { "January", "February", "March", "April", "May", "June" };
11-
public static List<decimal> CustomLine = new List<decimal>() { 60, 80, 81, 56, 55, 40 };
14+
public static List<decimal?> CustomLine = new List<decimal?>() { 60, 80, 81, 56, 55, 40 };
1215

1316
// multi axes
1417
public static List<string> MultiAxesLineText = new List<string>() {
1518
"January;2015", "February;2015;Y", "March;2015",
1619
"January;2016", "February;2016;Y", "March;2016" };
17-
public static List<decimal> MultiAxesLine = new List<decimal>() { 12, 19, 3, 5, 2, 3 };
20+
public static List<decimal?> MultiAxesLine = new List<decimal?>() { 12, 19, 3, 5, 2, 3 };
21+
22+
public static List<decimal?> BreakLine = new List<decimal?>() { 0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170 };
23+
public static List<string> BreakLineText = new List<string>() { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11" };
1824
}
1925
}

‎ChartjsDemo/Data/PieDataExamples.cs‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
public static class PieDataExamples
44
{
55
public static List<string> SimplePieText = new List<string>() { "January", "February", "March" };
6-
public static List<decimal> SimplePie = new List<decimal>() { 300, 50, 100 };
6+
public static List<decimal?> SimplePie = new List<decimal?>() { 300, 50, 100 };
77

88
public static List<string> MultiPieText = new List<string>() { "Overall Yay", "Overall Nay", "Group A Yay", "Group A Nay", "Group B Yay", "Group B Nay", "Group C Yay", "Group C Nay" };
9-
public static List<decimal> MultiPie1 = new List<decimal>() { 21, 79 };
10-
public static List<decimal> MultiPie2 = new List<decimal>() { 33, 67 };
11-
public static List<decimal> MultiPie3 = new List<decimal>() { 20, 80 };
12-
public static List<decimal> MultiPie4 = new List<decimal>() { 10, 90 };
9+
public static List<decimal?> MultiPie1 = new List<decimal?>() { 21, 79 };
10+
public static List<decimal?> MultiPie2 = new List<decimal?>() { 33, 67 };
11+
public static List<decimal?> MultiPie3 = new List<decimal?>() { 20, 80 };
12+
public static List<decimal?> MultiPie4 = new List<decimal?>() { 10, 90 };
1313

1414
public static List<string> MultiPieBackground1 = new List<string>() { "#AAA", "#777" };
1515
public static List<string> MultiPieBackground2 = new List<string>() { "hsl(0, 100%, 60%)", "hsl(0, 100%, 35%)" };

‎ChartjsDemo/Data/PolarDataExamples.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
public static class PolarDataExamples
44
{
55
public static List<string> SimplePolarText = new List<string>() { "January", "February", "March", "April", "May" };
6-
public static List<decimal> SimplePolar = new List<decimal>() { 11, 16, 7, 3, 14 };
6+
public static List<decimal?> SimplePolar = new List<decimal?>() { 11, 16, 7, 3, 14 };
77
}
88
}

‎ChartjsDemo/Data/RadarDataExamples.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ public static class RadarDataExamples
2323
public static List<RadarDataset> RadarDatasets = new List<RadarDataset>() {
2424
new RadarDataset() {
2525
Label = "My First Dataset",
26-
Data = new List<decimal>() { 65, 59, 90, 81, 56, 55, 40 },
26+
Data = new List<decimal?>() { 65, 59, 90, 81, 56, 55, 40 },
2727
Fill = true,
2828
BackgroundColor = "rgba(255, 99, 132, 0.2)",
2929
BorderColor = "rgb(255, 99, 132)",
@@ -34,7 +34,7 @@ public static class RadarDataExamples
3434
},
3535
new RadarDataset() {
3636
Label = "My Second Dataset",
37-
Data = new List<decimal>() { 28, 48, 40, 19, 96, 27, 100 },
37+
Data = new List<decimal?>() { 28, 48, 40, 19, 96, 27, 100 },
3838
Fill = true,
3939
BackgroundColor = "rgba(54, 162, 235, 0.2)",
4040
BorderColor = "rgb(54, 162, 235)",

‎ChartjsDemo/Models/DataItem.cs‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,30 @@
22

33
public class DataItem
44
{
5+
/// <summary>
6+
/// Gets or sets the group.
7+
/// </summary>
8+
/// <value>
9+
/// The group.
10+
/// </value>
11+
[JsonPropertyName("group")]
12+
public string? Group { get; set; }
13+
514
/// <summary>
615
/// Gets or sets the name of the attribute
716
/// </summary>
817
/// <value>
918
/// The name of the attribute
1019
/// </value>
1120
[JsonPropertyName("name")]
12-
public string Name { get; set; }
21+
public string? Name { get; set; }
22+
1323
/// <summary>
1424
/// Gets or sets the value.
1525
/// </summary>
1626
/// <value>
1727
/// The value
1828
/// </value>
1929
[JsonPropertyName("value")]
20-
public decimal Value { get; set; }
21-
/// <summary>
22-
/// Gets or sets the group.
23-
/// </summary>
24-
/// <value>
25-
/// The group.
26-
/// </value>
27-
[JsonPropertyName("group")]
28-
public string Group { get; set; }
29-
}
30+
public decimal? Value { get; set; }
31+
}

‎ChartjsDemo/Pages/AreaSimple.razor‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,28 @@
22

33
<h3>Area Simple</h3>
44

5+
<p>
6+
This example shows a simple area chart. You can click on any point to see the value.
7+
</p>
8+
9+
<button @onclick="AddNewValue">Add new value</button>
10+
<button @onclick="AddNewDataset">Add new dataset</button>
11+
512
<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
613

14+
@if (!string.IsNullOrEmpty(HoverString))
15+
{
16+
<p>
17+
MouseOver: @HoverString
18+
</p>
19+
}
20+
@if(!string.IsNullOrEmpty(ClickString))
21+
{
22+
<p>
23+
You click on @ClickString
24+
</p>
25+
}
26+
727
<hr />
828

929
<h3>Code</h3>
@@ -58,19 +78,37 @@ protected override async Task OnInitializedAsync()
5878
private LineChartConfig? _config1;
5979
private Chart? _chart1;
6080

81+
private string? ClickString { get; set; }
82+
private string? HoverString { get; set; }
83+
6184
protected override async Task OnInitializedAsync()
6285
{
86+
ClickString = "No point is clicked";
87+
HoverString = "The mouse is not on the chart";
88+
6389
_config1 = new LineChartConfig()
6490
{
6591
Options = new Options()
6692
{
93+
OnClickAsync = onClickAsync,
94+
OnHoverAsync = onHoverAsync,
6795
Responsive = true,
6896
MaintainAspectRatio = false,
6997
Plugins = new Plugins()
7098
{
7199
Legend = new Legend()
72100
{
73101
Display = true
102+
},
103+
Tooltip = new Tooltip()
104+
{
105+
Callbacks = new Callbacks()
106+
{
107+
Label = (ctx) =>
108+
{
109+
return new[] { $"The value for this point is {ctx.Value}" };
110+
}
111+
}
74112
}
75113
}
76114
}
@@ -93,4 +131,49 @@ protected override async Task OnInitializedAsync()
93131
Fill = true
94132
});
95133
}
134+
135+
public ValueTask onClickAsync(CallbackGenericContext value)
136+
{
137+
ClickString = $"Dataset index: {value.DatasetIndex} - Value index: {value.DataIndex} - Value: {value.Value}";
138+
StateHasChanged();
139+
140+
return ValueTask.CompletedTask;
141+
}
142+
143+
private ValueTask onHoverAsync(HoverContext ctx)
144+
{
145+
HoverString = $"DataX: {ctx.DataX} - DataY: {ctx.DataY}";
146+
StateHasChanged();
147+
148+
return ValueTask.CompletedTask;
149+
}
150+
151+
private void AddNewValue()
152+
{
153+
Random rd = new Random();
154+
155+
_chart1.AddData(new List<string?>() { "Test1" }, 0, new List<decimal?>() { rd.Next(0, 200) });
156+
_chart1.AddData(null, 1, new List<decimal?>() { rd.Next(0, 200) });
157+
_chart1.AddData(null, 2, new List<decimal?>() { rd.Next(0, 200) });
158+
}
159+
160+
private void AddNewDataset()
161+
{
162+
Random rd = new Random();
163+
List<decimal?> addDS = new List<decimal?>();
164+
for (int i = 0; i < 8; i++)
165+
{
166+
addDS.Add(rd.Next(i, 200));
167+
}
168+
169+
var color = String.Format("#{0:X6}", rd.Next(0x1000000));
170+
171+
_chart1.AddDataset<LineDataset>(new LineDataset()
172+
{
173+
Label = $"Dataset {DateTime.Now}",
174+
Data = addDS,
175+
BorderColor = color,
176+
Fill = false
177+
});
178+
}
96179
}

0 commit comments

Comments
 (0)