Skip to content

Commit b0106cd

Browse files
author
Mischa Spelt
committed
Merge branch 'pr-chartjs-plugins' into wise2
# Conflicts: # BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor # blazorbootstrap/Models/Charts/ChartPlugins/ChartPlugins.cs
2 parents 17b8ca1 + f121f49 commit b0106cd

File tree

3 files changed

+211
-0
lines changed

3 files changed

+211
-0
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@
5151
<SectionHeading Size="HeadingSize.H4" Text="Time Axis" PageUrl="@pageUrl" HashTagName="time-axis" />
5252
<Demo Type="typeof(LineChart_Demo_07_Time_Axis)" Tabs="true" />
5353

54+
<SectionHeading Size="HeadingSize.H4" Text="(Custom) Plugins" PageUrl="@pageUrl" HashTagName="plugins" />
55+
<Demo Type="typeof(LineChart_Demo_08_Plugins)" Tabs="true" />
56+
5457
@code {
5558
private readonly string pageUrl = "/charts/line-chart";
5659
private readonly string title = "Blazor Line Chart";

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

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
@using System.Text.Json.Serialization
2+
<div class="container-fluid overflow-x-auto">
3+
<LineChart @ref="lineChart" Width="800" />
4+
</div>
5+
<small>This line chart has the Zoom (built-in), Annotations (built-in), DragData (locally defined) and Crosshair (anonymous) plugins enabled.</small>
6+
7+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3/dist/chartjs-plugin-annotation.min.js" integrity="sha256-8BDDxChCyYOB80/6VhOpmr7qI5EIDyDPzxsWePPFVfo=" crossorigin="anonymous"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@2/dist/chartjs-plugin-crosshair.min.js" integrity="sha256-5bTtdEYtbjO36pQbMCXOsoYW5u5jfYfyI41LelMTTbQ=" crossorigin="anonymous"></script>
9+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2/dist/chartjs-plugin-zoom.min.js" integrity="sha256-UDxwmAK+KFxnav4Dab9fcgZtCwwjkpGIwxWPNcAyepw=" crossorigin="anonymous"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@2/dist/chartjs-plugin-dragdata.min.js" integrity="sha256-TVzMefO8VbXaQ5GV1xGhZbFEGUGOm/x/y7bQGhxyKuE=" crossorigin="anonymous"></script>
11+
12+
@code {
13+
private LineChart lineChart = default!;
14+
private LineChartOptions lineChartOptions = default!;
15+
private ChartData chartData = default!;
16+
17+
protected override void OnInitialized()
18+
{
19+
var colors = ColorUtility.CategoricalTwelveColors;
20+
var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
21+
var datasets = new List<IChartDataset>();
22+
23+
var dataset1 = new LineChartDataset
24+
{
25+
Label = "Windows",
26+
Data = new List<double?> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
27+
BorderWidth = 2,
28+
HoverBorderWidth = 4,
29+
BackgroundColor = colors[ 0 ],
30+
BorderColor = colors[ 0 ],
31+
};
32+
datasets.Add( dataset1 );
33+
34+
var dataset2 = new LineChartDataset
35+
{
36+
Label = "macOS",
37+
Data = new List<double?> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
38+
BorderWidth = 2,
39+
HoverBorderWidth = 4,
40+
BackgroundColor = colors[ 1 ],
41+
BorderColor = colors[ 1 ],
42+
};
43+
datasets.Add( dataset2 );
44+
45+
var dataset3 = new LineChartDataset
46+
{
47+
Label = "Other",
48+
Data = new List<double?> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
49+
BorderWidth = 2,
50+
HoverBorderWidth = 4,
51+
BackgroundColor = colors[ 2 ],
52+
BorderColor = colors[ 2 ],
53+
};
54+
datasets.Add( dataset3 );
55+
56+
chartData = new ChartData { Labels = labels, Datasets = datasets };
57+
58+
lineChartOptions = new();
59+
lineChartOptions.Responsive = true;
60+
lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };
61+
62+
lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "2019", Display = true };
63+
lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
64+
65+
lineChartOptions.Plugins.Title!.Text = "Operating system";
66+
lineChartOptions.Plugins.Title.Display = true;
67+
68+
EnableDragDataPlugin();
69+
EnableZoomPlugin();
70+
EnableAnnotationsPlugin();
71+
EnableCrosshairsPlugin();
72+
}
73+
74+
[JsonSourceGenerationOptions( DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull, PropertyNamingPolicy = JsonKnownNamingPolicy.CamelCase )]
75+
public class DragDataPlugin : ChartPlugin
76+
{
77+
public bool? DragX { get; set; }
78+
public bool? DragY { get; set; }
79+
public bool? ShowTooltip { get; set; }
80+
}
81+
82+
private void EnableDragDataPlugin()
83+
{
84+
// Example of a plugin class deriving from ChartPlugin that is defined locally
85+
lineChartOptions.Plugins.Add( "dragData", new DragDataPlugin() { DragX = true, ShowTooltip = false } );
86+
87+
// Alternative way to access the plugin:
88+
var plugin = lineChartOptions.Plugins.Get<DragDataPlugin>();
89+
plugin.ShowTooltip = true;
90+
}
91+
92+
private void EnableAnnotationsPlugin()
93+
{
94+
// Example of the built-in Annotation plugin class.
95+
var annotations = new ChartPluginsAnnotation()
96+
{
97+
Annotations = new List<Annotation>()
98+
};
99+
100+
foreach( LineChartDataset dataset in chartData.Datasets )
101+
{
102+
var average = dataset.Data.Average();
103+
annotations.Annotations.Add( new LineAnnotation()
104+
{
105+
BorderColor = dataset.BorderColor,
106+
BorderDash = [ 2, 2 ],
107+
YMin = average,
108+
YMax = average
109+
} );
110+
}
111+
112+
annotations.Annotations.Add( new BoxAnnotation()
113+
{
114+
XMin = 3.5,
115+
XMax = 8.75,
116+
YMin = 1250000,
117+
YMax = 4750000,
118+
BorderWidth = 2,
119+
BorderColor = "gray",
120+
BorderDash = [ 1, 1 ],
121+
BackgroundColor = "rgba(255, 255, 0, 0.1)",
122+
ShadowOffsetX = 5,
123+
ShadowOffsetY = 5
124+
} );
125+
126+
lineChartOptions.Plugins.Add( "annotation", annotations );
127+
}
128+
129+
private void EnableZoomPlugin()
130+
{
131+
// Example of the built-in Zoom plugin class.
132+
var zoom = new ChartPluginsZoom()
133+
{
134+
Zoom = new()
135+
{
136+
Wheel = new()
137+
{
138+
Enabled = true
139+
},
140+
Pinch = new()
141+
{
142+
Enabled = true
143+
},
144+
Mode = ZoomMode.Y,
145+
ScaleMode = ZoomMode.XY,
146+
},
147+
Pan = new()
148+
{
149+
Enabled = true,
150+
Mode = ZoomMode.XY
151+
},
152+
Limits = new()
153+
{
154+
X = new() { MinimumIsOriginal = true, MaximumIsOriginal = true, MinRange = 1.0 },
155+
Y = new() { MinimumIsOriginal = true, MaximumIsOriginal = true, MinRange = 1.0 }
156+
}
157+
};
158+
159+
lineChartOptions.Plugins.Add( "zoom", zoom );
160+
}
161+
162+
private void EnableCrosshairsPlugin()
163+
{
164+
// Example of an anonymous plugin class, i.e. one that does not derive from ChartPlugin.
165+
// Note that you cannot .Get() or .TryGet() it later.
166+
// Demo configuration taken directly from https://github.com/abelheinsbroek/chartjs-plugin-crosshair
167+
var crossHairs = new
168+
{
169+
line = new
170+
{
171+
color = "#F66",
172+
width = 1,
173+
},
174+
sync = new
175+
{
176+
enabled = true,
177+
group = 1,
178+
suppressTooltips = false
179+
},
180+
zoom = new
181+
{
182+
enabled = true,
183+
zoomboxBackgroundColor = "rgba(66,133,244,0.2)",
184+
zoomboxBorderColor = "#48F",
185+
zoomButtonText = "Reset Zoom",
186+
zoomButtonClass = "reset-zoom",
187+
}
188+
};
189+
190+
lineChartOptions.Plugins.AddObject( "crosshairs", crossHairs );
191+
}
192+
193+
194+
protected override async Task OnAfterRenderAsync( bool firstRender )
195+
{
196+
if( firstRender )
197+
{
198+
await lineChart.InitializeAsync( chartData, lineChartOptions );
199+
}
200+
await base.OnAfterRenderAsync( firstRender );
201+
}
202+
203+
}

‎blazorbootstrap/Models/Charts/ChartPlugins/ChartPlugins.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ public class ChartPlugins
1919

2020
#region Methods
2121

22+
public void AddObject( string key, object plugin )
23+
{
24+
customPlugins.Add( key, plugin );
25+
}
26+
2227
public void Add<T>( string key, T plugin )
2328
where T : ChartPlugin
2429
{

0 commit comments

Comments
 (0)