Skip to content

Commit 2d109d2

Browse files
anna-shakhovaanna-shakhova
authored
Charts: fix Point type in events (DevExpress#30876)
1 parent c645914 commit 2d109d2

File tree

11 files changed

+115
-84
lines changed

11 files changed

+115
-84
lines changed

‎apps/demos/Demos/Charts/APISelectAPoint/Angular/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
[dataSource]="catBreedsData"
44
[rotated]="true"
55
title="Most Popular US Cat Breeds"
6-
(onPointClick)="pointClick($event)"
76
(onDone)="done($event)"
7+
(onPointClick)="pointClick($event)"
88
>
99
<dxi-series valueField="count" name="breeds" color="#a3d6d2">
1010
<dxo-selection-style color="#ec2e7a">

‎apps/demos/Demos/Charts/APISelectAPoint/Angular/app/app.component.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { NgModule, Component, enableProdMode } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4-
import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
4+
import { DxChartModule, type DxChartTypes } from 'devextreme-angular/ui/chart';
55
import { Service, CatBreed } from './app.service';
66

77
if (!/localhost/.test(document.location.host)) {
@@ -27,17 +27,18 @@ export class AppComponent {
2727
this.catBreedsData = service.getCatBreedsData();
2828
}
2929

30-
pointClick({ target: point }: DxChartTypes.PointClickEvent) {
30+
done(e: DxChartTypes.DoneEvent) {
31+
e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
32+
}
33+
34+
pointClick(e: DxChartTypes.PointClickEvent) {
35+
const point = e.target;
3136
if (point.isSelected()) {
3237
point.clearSelection();
3338
} else {
3439
point.select();
3540
}
3641
}
37-
38-
done(e: DxChartTypes.DoneEvent) {
39-
e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
40-
}
4142
}
4243

4344
@NgModule({

‎apps/demos/Demos/Charts/APISelectAPoint/React/App.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
import React from 'react';
2-
import Chart, {
2+
import {
3+
Chart,
34
CommonSeriesSettings,
45
Series,
56
SelectionStyle,
67
Hatching,
78
Legend,
89
Export,
10+
type ChartTypes,
911
} from 'devextreme-react/chart';
1012
import { catBreedsData } from './data.ts';
1113

12-
function onDone({ component }) {
13-
component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
14+
function onDone(e: ChartTypes.DoneEvent) {
15+
e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
1416
}
1517

16-
function onPointClick({ target: point }) {
18+
function onPointClick(e: ChartTypes.PointClickEvent) {
19+
const point = e.target;
1720
if (point.isSelected()) {
1821
point.clearSelection();
1922
} else {
@@ -27,9 +30,9 @@ function App() {
2730
id="chart"
2831
dataSource={catBreedsData}
2932
rotated={true}
33+
title="Most Popular US Cat Breeds"
3034
onDone={onDone}
3135
onPointClick={onPointClick}
32-
title="Most Popular US Cat Breeds"
3336
>
3437
<CommonSeriesSettings
3538
argumentField="breed"

‎apps/demos/Demos/Charts/APISelectAPoint/ReactJs/App.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import Chart, {
2+
import {
3+
Chart,
34
CommonSeriesSettings,
45
Series,
56
SelectionStyle,
@@ -9,10 +10,11 @@ import Chart, {
910
} from 'devextreme-react/chart';
1011
import { catBreedsData } from './data.js';
1112

12-
function onDone({ component }) {
13-
component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
13+
function onDone(e) {
14+
e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
1415
}
15-
function onPointClick({ target: point }) {
16+
function onPointClick(e) {
17+
const point = e.target;
1618
if (point.isSelected()) {
1719
point.clearSelection();
1820
} else {
@@ -25,9 +27,9 @@ function App() {
2527
id="chart"
2628
dataSource={catBreedsData}
2729
rotated={true}
30+
title="Most Popular US Cat Breeds"
2831
onDone={onDone}
2932
onPointClick={onPointClick}
30-
title="Most Popular US Cat Breeds"
3133
>
3234
<CommonSeriesSettings
3335
argumentField="breed"

‎apps/demos/Demos/Charts/APISelectAPoint/Vue/App.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,21 +25,23 @@
2525
</DxChart>
2626
</template>
2727
<script setup lang="ts">
28-
import DxChart, {
28+
import {
29+
DxChart,
2930
DxCommonSeriesSettings,
31+
DxSeries,
3032
DxSelectionStyle,
3133
DxHatching,
32-
DxSeries,
3334
DxLegend,
3435
DxExport,
3536
type DxChartTypes,
3637
} from 'devextreme-vue/chart';
3738
import { catBreedsData } from './data.ts';
3839
39-
function onDone({ component }) {
40-
component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
40+
function onDone(e: DxChartTypes.DoneEvent) {
41+
e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
4142
}
42-
function onPointClick({ target: point }: DxChartTypes.PointClickEvent) {
43+
function onPointClick(e: DxChartTypes.PointClickEvent) {
44+
const point = e.target;
4345
if (point.isSelected()) {
4446
point.clearSelection();
4547
} else {

‎apps/demos/Demos/Charts/APISelectAPoint/jQuery/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ $(() => {
22
const chart = $('#chart').dxChart({
33
dataSource,
44
rotated: true,
5+
title: {
6+
text: 'Most Popular US Cat Breeds',
7+
},
58
commonSeriesSettings: {
69
argumentField: 'breed',
710
type: 'bar',
@@ -15,9 +18,6 @@ $(() => {
1518
hatching: { direction: 'none' },
1619
},
1720
},
18-
title: {
19-
text: 'Most Popular US Cat Breeds',
20-
},
2121
legend: {
2222
visible: false,
2323
},

‎packages/devextreme/js/viz/chart.d.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -235,23 +235,23 @@ export type OptionChangedEvent = EventInfo<dxChart> & ChangedOptionInfo;
235235
* @type object
236236
* @inherits Cancelable,NativeEventInfo,PointInteractionInfo
237237
*/
238-
export type PointClickEvent = Cancelable & NativeEventInfo<dxChart, MouseEvent | PointerEvent> & PointInteractionInfo;
238+
export type PointClickEvent = Cancelable & NativeEventInfo<dxChart, MouseEvent | PointerEvent> & PointInteractionInfo<chartPointObject>;
239239

240240
/**
241241
* @docid _viz_chart_PointHoverChangedEvent
242242
* @public
243243
* @type object
244244
* @inherits EventInfo,PointInteractionInfo
245245
*/
246-
export type PointHoverChangedEvent = EventInfo<dxChart> & PointInteractionInfo;
246+
export type PointHoverChangedEvent = EventInfo<dxChart> & PointInteractionInfo<chartPointObject>;
247247

248248
/**
249249
* @docid _viz_chart_PointSelectionChangedEvent
250250
* @public
251251
* @type object
252252
* @inherits EventInfo,PointInteractionInfo
253253
*/
254-
export type PointSelectionChangedEvent = EventInfo<dxChart> & PointInteractionInfo;
254+
export type PointSelectionChangedEvent = EventInfo<dxChart> & PointInteractionInfo<chartPointObject>;
255255

256256
/**
257257
* @docid _viz_chart_SeriesClickEvent
@@ -286,15 +286,15 @@ export type SeriesSelectionChangedEvent = EventInfo<dxChart> & SeriesInteraction
286286
* @type object
287287
* @inherits EventInfo,_viz_chart_components_base_chart_TooltipInfo
288288
*/
289-
export type TooltipHiddenEvent = EventInfo<dxChart> & TooltipInfo;
289+
export type TooltipHiddenEvent = EventInfo<dxChart> & TooltipInfo<chartPointObject>;
290290

291291
/**
292292
* @docid _viz_chart_TooltipShownEvent
293293
* @public
294294
* @type object
295295
* @inherits EventInfo,_viz_chart_components_base_chart_TooltipInfo
296296
*/
297-
export type TooltipShownEvent = EventInfo<dxChart> & TooltipInfo;
297+
export type TooltipShownEvent = EventInfo<dxChart> & TooltipInfo<chartPointObject>;
298298

299299
/**
300300
* @docid _viz_chart_ZoomEndEvent
@@ -766,7 +766,7 @@ export interface chartSeriesObject extends baseSeriesObject {
766766
* @namespace DevExpress.viz
767767
* @docid
768768
*/
769-
export interface dxChartOptions extends BaseChartOptions<dxChart> {
769+
export interface dxChartOptions extends BaseChartOptions<dxChart, chartPointObject> {
770770
/**
771771
* @docid
772772
* @default true

‎packages/devextreme/js/viz/chart_components/base_chart.d.ts‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,26 +49,35 @@ import {
4949
* @docid
5050
* @hidden
5151
*/
52-
export interface PointInteractionInfo {
53-
/** @docid */
54-
readonly target: basePointObject;
52+
export interface PointInteractionInfo<TPoint extends basePointObject = basePointObject> {
53+
/**
54+
* @docid
55+
* @type object
56+
*/
57+
readonly target: TPoint;
5558
}
5659

5760
/**
5861
* @docid _viz_chart_components_base_chart_TooltipInfo
5962
* @hidden
6063
*/
61-
export interface TooltipInfo {
62-
/** @docid _viz_chart_components_base_chart_TooltipInfo.target */
63-
target?: basePointObject | dxChartAnnotationConfig | any;
64+
export interface TooltipInfo<TPoint extends basePointObject = basePointObject> {
65+
/**
66+
* @docid _viz_chart_components_base_chart_TooltipInfo.target
67+
* @type object
68+
*/
69+
target?: TPoint | dxChartAnnotationConfig | any;
6470
}
6571

6672
/**
6773
* @namespace DevExpress.viz
6874
* @docid
6975
* @type object
7076
*/
71-
export interface BaseChartOptions<TComponent> extends BaseWidgetOptions<TComponent> {
77+
export interface BaseChartOptions<
78+
TComponent,
79+
TPoint extends basePointObject = basePointObject,
80+
> extends BaseWidgetOptions<TComponent> {
7281
/**
7382
* @docid
7483
* @type object
@@ -144,51 +153,56 @@ export interface BaseChartOptions<TComponent> extends BaseWidgetOptions<TCompone
144153
* @type_function_param1 e:object
145154
* @type_function_param1_field component:this
146155
* @type_function_param1_field event:event
156+
* @type_function_param1_field target:object
147157
* @notUsedInTheme
148158
* @action
149159
* @public
150160
*/
151-
onPointClick?: ((e: NativeEventInfo<TComponent, MouseEvent | PointerEvent> & PointInteractionInfo) => void) | string;
161+
onPointClick?: ((e: NativeEventInfo<TComponent, MouseEvent | PointerEvent> & PointInteractionInfo<TPoint>) => void) | string;
152162
/**
153163
* @docid
154164
* @type_function_param1 e:object
155165
* @type_function_param1_field component:object
156166
* @type_function_param1_field element:object
167+
* @type_function_param1_field target:object
157168
* @notUsedInTheme
158169
* @action
159170
* @public
160171
*/
161-
onPointHoverChanged?: ((e: EventInfo<TComponent> & PointInteractionInfo) => void);
172+
onPointHoverChanged?: ((e: EventInfo<TComponent> & PointInteractionInfo<TPoint>) => void);
162173
/**
163174
* @docid
164175
* @type_function_param1 e:object
165176
* @type_function_param1_field component:object
166177
* @type_function_param1_field element:object
178+
* @type_function_param1_field target:object
167179
* @notUsedInTheme
168180
* @action
169181
* @public
170182
*/
171-
onPointSelectionChanged?: ((e: EventInfo<TComponent> & PointInteractionInfo) => void);
183+
onPointSelectionChanged?: ((e: EventInfo<TComponent> & PointInteractionInfo<TPoint>) => void);
172184
/**
173185
* @docid
174186
* @default null
175187
* @type_function_param1 e:object
176188
* @type_function_param1_field component:this
189+
* @type_function_param1_field target:object
177190
* @notUsedInTheme
178191
* @action
179192
* @public
180193
*/
181-
onTooltipHidden?: ((e: EventInfo<TComponent> & TooltipInfo) => void);
194+
onTooltipHidden?: ((e: EventInfo<TComponent> & TooltipInfo<TPoint>) => void);
182195
/**
183196
* @docid
184197
* @default null
185198
* @type_function_param1 e:object
186199
* @type_function_param1_field component:this
200+
* @type_function_param1_field target:object
187201
* @notUsedInTheme
188202
* @action
189203
* @public
190204
*/
191-
onTooltipShown?: ((e: EventInfo<TComponent> & TooltipInfo) => void);
205+
onTooltipShown?: ((e: EventInfo<TComponent> & TooltipInfo<TPoint>) => void);
192206
/**
193207
* @docid
194208
* @default "Material"

‎packages/devextreme/js/viz/pie_chart.d.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -178,39 +178,39 @@ export type OptionChangedEvent = EventInfo<dxPieChart> & ChangedOptionInfo;
178178
* @type object
179179
* @inherits NativeEventInfo,PointInteractionInfo
180180
*/
181-
export type PointClickEvent = NativeEventInfo<dxPieChart, MouseEvent | PointerEvent> & PointInteractionInfo;
181+
export type PointClickEvent = NativeEventInfo<dxPieChart, MouseEvent | PointerEvent> & PointInteractionInfo<piePointObject>;
182182

183183
/**
184184
* @docid _viz_pie_chart_PointHoverChangedEvent
185185
* @public
186186
* @type object
187187
* @inherits EventInfo,PointInteractionInfo
188188
*/
189-
export type PointHoverChangedEvent = EventInfo<dxPieChart> & PointInteractionInfo;
189+
export type PointHoverChangedEvent = EventInfo<dxPieChart> & PointInteractionInfo<piePointObject>;
190190

191191
/**
192192
* @docid _viz_pie_chart_PointSelectionChangedEvent
193193
* @public
194194
* @type object
195195
* @inherits EventInfo,PointInteractionInfo
196196
*/
197-
export type PointSelectionChangedEvent = EventInfo<dxPieChart> & PointInteractionInfo;
197+
export type PointSelectionChangedEvent = EventInfo<dxPieChart> & PointInteractionInfo<piePointObject>;
198198

199199
/**
200200
* @docid _viz_pie_chart_TooltipHiddenEvent
201201
* @public
202202
* @type object
203203
* @inherits EventInfo,_viz_chart_components_base_chart_TooltipInfo
204204
*/
205-
export type TooltipHiddenEvent = EventInfo<dxPieChart> & TooltipInfo;
205+
export type TooltipHiddenEvent = EventInfo<dxPieChart> & TooltipInfo<piePointObject>;
206206

207207
/**
208208
* @docid _viz_pie_chart_TooltipShownEvent
209209
* @public
210210
* @type object
211211
* @inherits EventInfo,_viz_chart_components_base_chart_TooltipInfo
212212
*/
213-
export type TooltipShownEvent = EventInfo<dxPieChart> & TooltipInfo;
213+
export type TooltipShownEvent = EventInfo<dxPieChart> & TooltipInfo<piePointObject>;
214214

215215
/**
216216
* @public
@@ -274,7 +274,7 @@ export interface PieChartSeries extends dxPieChartSeriesTypesCommonPieChartSerie
274274
* @namespace DevExpress.viz
275275
* @docid
276276
*/
277-
export interface dxPieChartOptions extends BaseChartOptions<dxPieChart> {
277+
export interface dxPieChartOptions extends BaseChartOptions<dxPieChart, piePointObject> {
278278
/**
279279
* @docid
280280
* @type object

0 commit comments

Comments
 (0)