Skip to content

Commit a230e63

Browse files
joadanjoadan
committed
Added ToggleDataPointSelection
1 parent 6de7dec commit a230e63

File tree

8 files changed

+116
-58
lines changed

8 files changed

+116
-58
lines changed

‎docs/BlazorApexCharts.Docs/Components/ChartEvents/DataPointSelection.razor

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
<DemoContainer>
1+
<Button class="mb-2" OnClick=ToggleDataPoint BackgroundColor="TablerColor.Primary">Toggle Data Point</Button>
2+
3+
4+
<DemoContainer>
25
<ApexChart TItem="Order"
36
Title="Order Net Value"
47
OnDataPointSelection=DataPointsSelected
5-
Debug>
8+
@ref=chart>
69

710
<ApexPointSeries TItem="Order"
811
Items="Orders"
@@ -57,10 +60,24 @@
5760
private List<Order> Orders { get; set; } = SampleData.GetOrders();
5861
private SelectedData<Order> selectedData;
5962
private ApexChart<Order> detailsChart;
60-
63+
private ApexChart<Order> chart;
64+
6165
private void DataPointsSelected(SelectedData<Order> selectedData)
6266
{
67+
if (!selectedData.IsSelected)
68+
{
69+
this.selectedData = null;
70+
return;
71+
}
72+
6373
this.selectedData = selectedData;
6474
detailsChart?.RenderAsync();
6575
}
76+
77+
private async Task ToggleDataPoint()
78+
{
79+
80+
await chart.ToggleDataPointSelectionAsync(1, 1);
81+
}
82+
6683
}

‎docs/BlazorApexCharts.Docs/Components/Methods/Annotations/Basic.razor

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
<DemoContainer>
1010

1111
<ApexChart @ref=chart TItem="Order"
12-
Title="@title">
12+
Title="@title"
13+
Debug>
1314

1415
<ApexPointSeries TItem="Order"
1516
Items="orders"

‎docs/BlazorApexCharts.Docs/Components/Methods/ToggleDataPoint/Basic.razor

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<DemoContainer>
2+
3+
<Button class="mb-2" OnClick=ToggleDataPoint BackgroundColor="TablerColor.Primary">Toggle Data Point</Button>
4+
5+
6+
<ApexChart TItem="Order"
7+
Title="Order Gross Value"
8+
@ref=chart>
9+
10+
<ApexPointSeries TItem="Order"
11+
Items="orders"
12+
Name="Gross Value"
13+
SeriesType="SeriesType.Pie"
14+
XValue="@(e => e.Country)"
15+
YAggregate="@(e => e.Sum(e => e.GrossValue))"
16+
OrderByDescending="e=>e.X" />
17+
</ApexChart>
18+
</DemoContainer>
19+
20+
21+
@code {
22+
private List<Order> orders { get; set; } = SampleData.GetOrders();
23+
private ApexChart<Order> chart;
24+
private string message;
25+
26+
private async Task ToggleDataPoint()
27+
{
28+
29+
await chart.ToggleDataPointSelectionAsync(0, null);
30+
}
31+
}

‎docs/BlazorApexCharts.Docs/Components/Methods/ZoomX/ZoomX.razor renamed to ‎docs/BlazorApexCharts.Docs/Components/Methods/ToggleDataPoint/ToggleDataPoint.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@page "/methods/zoomx"
1+
@page "/methods/toggle-data-point"
22

3-
<DocExamples Title="Zoom X">
3+
<DocExamples Title="Toogle Data Point Selection">
44
<CodeSnippet Title=Basic ClassName=@typeof(Basic).ToString()>
55
<Snippet>
66
<Basic />

‎docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,8 @@
125125
<NavbarMenuItem Text="Show/Hide Series" Href="methods/show-hide-series" />
126126
<NavbarMenuItem Text="Annotations" Href="methods/annotations" />
127127
<NavbarMenuItem Text="Data Uri" Href="methods/data-uri" />
128+
<NavbarMenuItem Text="Toggle Data Point" Href="methods/toggle-data-point" />
129+
128130
<NavbarMenuItem Text="Zoom X" Href="methods/zoomx" />
129131
</SubMenu>
130132
</NavbarMenuItem>

‎src/Blazor-ApexCharts/ApexChart.razor.cs

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,18 @@ public async Task UpdateSeriesAsync(bool animate = true)
343343
await JSRuntime.InvokeVoidAsync("blazor_apexchart.updateSeries", Options.Chart.Id, jsonSeries, animate);
344344
}
345345

346+
/// <summary>
347+
/// For no axis charts only provide the seriesIndex value, set dataPointIndex to null
348+
/// </summary>
349+
/// <param name="seriesIndex"></param>
350+
/// <param name="dataPointIndex"></param>
351+
/// <returns></returns>
352+
public async Task ToggleDataPointSelectionAsync(int seriesIndex, int? dataPointIndex)
353+
{
354+
await JSRuntime.InvokeVoidAsync("blazor_apexchart.toggleDataPointSelection", Options.Chart.Id, seriesIndex, dataPointIndex);
355+
356+
}
357+
346358
public async Task ToggleSeriesAsync(string seriesName)
347359
{
348360
await JSRuntime.InvokeVoidAsync("blazor_apexchart.toggleSeries", Options.Chart.Id, seriesName);
@@ -489,8 +501,9 @@ public void DataPointSelected(DataPointSelection<TItem> selectedDataPoints)
489501

490502
var selection = new SelectedData<TItem>
491503
{
492-
Series = series,
493-
DataPoint = dataPoint
504+
Series = series,
505+
DataPoint = dataPoint,
506+
IsSelected = selectedDataPoints.SelectedDataPoints.Any(e=> e!= null && e.Any(e=> e != null && e.HasValue)),
494507
};
495508

496509
OnDataPointSelection.InvokeAsync(selection);

‎src/Blazor-ApexCharts/Models/DataPoints/DataPointSelection.cs

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
using System;
2-
using System.Collections.Generic;
3-
using System.Linq;
4-
using System.Threading.Tasks;
1+
using System.Collections.Generic;
52

63
namespace ApexCharts
74
{
85
public class DataPointSelection<TItem> where TItem : class
96
{
10-
public List<object> SelectedDataPoints { get; set; }
7+
public List<List<int?>> SelectedDataPoints { get; set; }
118
public int DataPointIndex { get; set; }
129
public int SeriesIndex { get; set; }
1310

@@ -20,6 +17,7 @@ public class SelectedData<TItem> where TItem:class
2017
{
2118
public Series<TItem> Series { get; set; }
2219
public IDataPoint<TItem> DataPoint { get; set; }
20+
public bool IsSelected { get; internal set; }
2321

2422
}
2523

‎src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,25 @@
3333
}
3434
},
3535

36+
LogMethodCall(chart, method, data) {
37+
if (chart !== undefined) {
38+
if (chart.opts.debug === true) {
39+
console.log('------');
40+
console.log('Method:' + method);
41+
console.log("Chart Id: " + chart.opts.chart.id)
42+
if (data !== undefined) {
43+
console.log(data);
44+
}
45+
console.log('------');
46+
}
47+
}
48+
},
3649

3750
updateOptions(id, options, redrawPaths, animate, updateSyncedCharts) {
3851
var data = JSON.parse(options);
3952
var chart = this.findChart(id);
4053
if (chart !== undefined) {
41-
if (chart.options.debug === true) {
42-
console.log('Update options id: ' + id);
43-
console.log(data);
44-
console.log('------');
45-
}
54+
this.LogMethodCall(chart, "updateOptions", options);
4655
chart.updateOptions(data, redrawPaths, animate, updateSyncedCharts);
4756
}
4857
},
@@ -51,20 +60,36 @@
5160
var newData = JSON.parse(data);
5261
var chart = this.findChart(id);
5362
if (chart !== undefined) {
63+
this.LogMethodCall(chart, "appendDate", newData);
5464
return chart.appendData(newData);
5565
}
5666
},
5767

68+
toggleDataPointSelection(id, seriesIndex, dataPointIndex) {
69+
var chart = this.findChart(id);
70+
if (chart !== undefined) {
71+
this.LogMethodCall(chart, "toggleDataPointSelection [" + seriesIndex + '] [' + dataPointIndex + ']');
72+
var pointIndex;
73+
if (dataPointIndex !== null) {
74+
pointIndex = dataPointIndex;
75+
}
76+
77+
return chart.toggleDataPointSelection(seriesIndex, pointIndex);
78+
}
79+
},
80+
5881
zoomX(id, start, end) {
5982
var chart = this.findChart(id);
6083
if (chart !== undefined) {
84+
this.LogMethodCall(chart, 'zoomX ' + start + ", " + end);
6185
return chart.zoomX(start, end);
6286
}
6387
},
6488

6589
resetSeries(id, shouldUpdateChart, shouldResetZoom) {
6690
var chart = this.findChart(id);
6791
if (chart !== undefined) {
92+
this.LogMethodCall(chart, 'resetSeries ' + shouldUpdateChart + ", " + shouldResetZoom);
6893
return chart.resetSeries(shouldUpdateChart, shouldResetZoom);
6994
}
7095
},
@@ -73,6 +98,7 @@
7398
var opt = JSON.parse(options);
7499
var chart = this.findChart(id);
75100
if (chart !== undefined) {
101+
this.LogMethodCall(chart, 'dataUri', options);
76102
return chart.dataURI(opt);
77103
}
78104

@@ -83,11 +109,7 @@
83109
var data = JSON.parse(series);
84110
var chart = this.findChart(id);
85111
if (chart !== undefined) {
86-
if (chart.options.debug === true) {
87-
console.log('Update series id: ' + id);
88-
console.log(data.length);
89-
console.log('------');
90-
}
112+
this.LogMethodCall(chart, 'updateSeries', series);
91113
chart.updateSeries(data, animate);
92114
}
93115
},
@@ -96,11 +118,7 @@
96118
var data = JSON.parse(annotation);
97119
var chart = this.findChart(id);
98120
if (chart !== undefined) {
99-
if (chart.options.debug === true) {
100-
console.log('Add point annotation series id: ' + id);
101-
console.log(data);
102-
console.log('------');
103-
}
121+
this.LogMethodCall(chart, 'addPointAnnotation', annotation);
104122
chart.addPointAnnotation(data, pushToMemory);
105123
}
106124
},
@@ -109,11 +127,7 @@
109127
var data = JSON.parse(annotation);
110128
var chart = this.findChart(id);
111129
if (chart !== undefined) {
112-
if (chart.options.debug === true) {
113-
console.log('Add XAxis annotation id: ' + id);
114-
console.log(data);
115-
console.log('------');
116-
}
130+
this.LogMethodCall(chart, 'addXaxisAnnotation', annotation);
117131
chart.addXaxisAnnotation(data, pushToMemory);
118132
}
119133
},
@@ -122,66 +136,47 @@
122136
var data = JSON.parse(annotation);
123137
var chart = this.findChart(id);
124138
if (chart !== undefined) {
125-
if (chart.options.debug === true) {
126-
console.log('Add YAxis annotation id: ' + id);
127-
console.log(data);
128-
console.log('------');
129-
}
139+
this.LogMethodCall(chart, 'addYaxisAnnotation', annotation);
130140
chart.addYaxisAnnotation(data, pushToMemory);
131141
}
132142
},
133143

134144
clearAnnotations(id) {
135145
var chart = this.findChart(id);
136146
if (chart !== undefined) {
137-
if (chart.options.debug === true) {
138-
console.log('Clear annotations id: ' + id);
139-
console.log('------');
140-
}
147+
this.LogMethodCall(chart, 'clearAnnotations');
141148
chart.clearAnnotations();
142149
}
143150
},
144151

145152
removeAnnotation(chartid, id) {
146153
var chart = this.findChart(chartid);
147154
if (chart !== undefined) {
148-
if (chart.options.debug === true) {
149-
console.log('Remove annotation ' + id + ' Chartid: ' + chartid);
150-
console.log('------');
151-
}
155+
this.LogMethodCall(chart, 'removeAnnotation', id);
152156
chart.removeAnnotation(id);
153157
}
154158
},
155159

156160
toggleSeries(id, seriesName) {
157161
var chart = this.findChart(id);
158162
if (chart !== undefined) {
159-
160-
if (chart.options.debug === true) {
161-
console.log('Toogle series ' + seriesName + ' id: ' + id);
162-
}
163+
this.LogMethodCall(chart, 'toggleSeries', seriesName);
163164
chart.toggleSeries(seriesName)
164165
}
165166
},
166167

167168
showSeries(id, seriesName) {
168169
var chart = this.findChart(id);
169170
if (chart !== undefined) {
170-
171-
if (chart.options.debug === true) {
172-
console.log('Show series ' + seriesName + ' id: ' + id);
173-
}
171+
this.LogMethodCall(chart, 'showSeries', seriesName);
174172
chart.showSeries(seriesName)
175173
}
176174
},
177175

178176
hideSeries(id, seriesName) {
179177
var chart = this.findChart(id);
180178
if (chart !== undefined) {
181-
182-
if (chart.options.debug === true) {
183-
console.log('Hide series ' + seriesName + ' id: ' + id);
184-
}
179+
this.LogMethodCall(chart, 'hideSeries', seriesName);
185180
chart.hideSeries(seriesName)
186181
}
187182
},
@@ -201,6 +196,7 @@
201196

202197
options.dotNetObject = dotNetObject;
203198

199+
204200
options.chart.events = {
205201
dataPointSelection: (event, chartContext, config) => {
206202

0 commit comments

Comments
 (0)