fix(react-chart): update ZoomAndPan plugin ts declaration (#2109)

packages/dx-chart-core/src/index.ts

@@ -5,7 +5,7 @@ export * from './plugins/series/computeds';
 export * from './plugins/stack/computeds';
 export * from './plugins/animation/computeds';
 export * from './plugins/tooltip/computeds';
-export * from './plugins/zoom-pan/computeds';
+export * from './plugins/zoom-and-pan/computeds';
 export * from './utils/series';
 export * from './utils/scale';
 export * from './utils/legend';

packages/dx-chart-core/src/plugins/zoom-pan/computeds.test.ts → packages/dx-chart-core/src/plugins/zoom-and-pan/computeds.test.ts

@@ -9,7 +9,7 @@ import {
   adjustLayout, getViewport, getDeltaForTouches, isKeyPressed, getWheelDelta, isMultiTouch,
   attachEvents, detachEvents, getRect,
 } from './computeds';
-import { ScalesCache, ViewportOptions } from '../../types';
+import { ScalesCache, Viewport } from '../../types';
 
 jest.mock('../../utils/scale', () => ({
   ...require.requireActual('../../utils/scale'),  // for `rangesEqual`
@@ -170,7 +170,7 @@ describe('ZoomAndPan', () => {
       [ARGUMENT_DOMAIN]: argScale,
       'domain-1': valScale,
     } as any;
-    const viewport: ViewportOptions = {
+    const viewport: Viewport = {
       argumentStart: 'A', argumentEnd: 'B',
       valueStart: 100, valueEnd: 200,
     };

packages/dx-chart-core/src/plugins/zoom-pan/computeds.ts → packages/dx-chart-core/src/plugins/zoom-and-pan/computeds.ts

@@ -7,7 +7,7 @@ import {
 } from '../../utils/scale';
 import {
   NumberArray,
-  ViewportOptions,
+  Viewport,
   ScalesCache,
   DomainInfoCache,
   RangesCache,
@@ -21,17 +21,17 @@ import {
 } from '../../types';
 import { Size } from '@devexpress/dx-react-core';
 
-const getArgumentBounds = (viewport?: ViewportOptions): DomainBounds | null => (
+const getArgumentBounds = (viewport?: Viewport): DomainBounds | null => (
   viewport && viewport.argumentStart !== undefined && viewport.argumentEnd !== undefined
     ? [viewport.argumentStart, viewport.argumentEnd] : null
 );
 
-const getValueBounds = (viewport?: ViewportOptions): DomainBounds | null => (
+const getValueBounds = (viewport?: Viewport): DomainBounds | null => (
   viewport && viewport.valueStart !== undefined && viewport.valueEnd !== undefined
     ? [viewport.valueStart, viewport.valueEnd] : null
 );
 
-const getValueScaleName = (viewport?: ViewportOptions) => (
+const getValueScaleName = (viewport?: Viewport) => (
   getValueDomainName(viewport && viewport.scaleName)
 );
 
@@ -66,7 +66,7 @@ const update = (
 
 /** @internal */
 export const adjustLayout = (
-  domains: DomainInfoCache, ranges: RangesCache, viewport?: ViewportOptions,
+  domains: DomainInfoCache, ranges: RangesCache, viewport?: Viewport,
 ) => {
   const changes = {};
   const argumentBounds = getArgumentBounds(viewport);
@@ -105,7 +105,7 @@ export const getViewport = (
   deltas: Readonly<[number, number]> | null,
   anchors: Readonly<[number, number]> | null,
   ranges: Readonly<[NumberArray, NumberArray]> | null,
-  viewport?: ViewportOptions, onViewportChange?: OnViewportChangeFn,
+  viewport?: Viewport, onViewportChange?: OnViewportChangeFn,
 ) => {
   const changes: any = {};
   const argumentBounds = boundsForScale(

packages/dx-chart-core/src/types/index.ts

@@ -6,7 +6,7 @@ export * from './plugins.scale.types';
 export * from './plugins.layout-manager.types';
 export * from './plugins.axis.types';
 export * from './plugins.animation.types';
-export * from './plugins.zoom-pan.types';
+export * from './plugins.zoom-and-pan.types';
 export * from './utils.event-tracker.types';
 export * from './utils.hover-state.types';
 export * from './utils.legend.types';

packages/dx-chart-core/src/types/plugins.zoom-pan.types.ts → packages/dx-chart-core/src/types/plugins.zoom-and-pan.types.ts

@@ -1,14 +1,14 @@
 /** @internal */
 export type DomainBounds = Readonly<[any, any]>;
 
-export type ViewportOptions = {
+export type Viewport = {
   readonly argumentStart?: any;
   readonly argumentEnd?: any;
   readonly scaleName?: string;
   readonly valueStart?: any;
   readonly valueEnd?: any;
 };
 
-export type OnViewportChangeFn = (viewport: ViewportOptions) => void;
+export type OnViewportChangeFn = (viewport: Viewport) => void;
 
 export type Interaction = 'none' | 'pan' | 'zoom' | 'both';

packages/dx-react-chart-bootstrap4/api/dx-react-chart-bootstrap4.api.md

@@ -19,6 +19,8 @@ import { SplineSeries as SplineSeries_2 } from '@devexpress/dx-react-chart';
 import { Title as Title_2 } from '@devexpress/dx-react-chart';
 import { Tooltip as Tooltip_2 } from '@devexpress/dx-react-chart';
 import { ValueAxis as ValueAxis_2 } from '@devexpress/dx-react-chart';
+import { Viewport } from '@devexpress/dx-react-chart';
+import { ZoomAndPan as ZoomAndPan_2 } from '@devexpress/dx-react-chart';
 
 // @public (undocumented)
 export namespace AreaSeries {
@@ -343,6 +345,27 @@ export interface ValueAxisProps {
   tickSize?: number;
 }
 
+// @public (undocumented)
+export namespace ZoomAndPan {
+  export type DragBoxProps = ZoomAndPan_2.DragBoxProps;
+}
+
+// @public
+export const ZoomAndPan: React.ComponentType<ZoomAndPanProps> & {
+  DragBox: React.ComponentType<ZoomAndPan_2.DragBoxProps & { className?: string; style?: React.CSSProperties; [x: string]: any }>;
+};
+
+// @public (undocumented)
+export interface ZoomAndPanProps {
+  defaultViewport?: Viewport;
+  dragBoxComponent?: React.ComponentType<ZoomAndPan_2.DragBoxProps>;
+  interactionWithArguments?: 'none' | 'pan' | 'zoom' | 'both';
+  interactionWithValues?: 'none' | 'pan' | 'zoom' | 'both';
+  onViewportChange?: (viewport: Viewport) => void;
+  viewport?: Viewport;
+  zoomRegionKey?: 'shift' | 'alt' | 'ctrl';
+}
+
 
 // (No @packageDocumentation comment for this package)
 

packages/dx-react-chart-bootstrap4/src/index.js

@@ -15,4 +15,4 @@ export { ValueAxis } from './plugins/value-axis';
 export { ArgumentAxis } from './plugins/argument-axis';
 
 export { Tooltip } from './plugins/tooltip';
-export { ZoomAndPan } from './plugins/zoom-pan';
+export { ZoomAndPan } from './plugins/zoom-and-pan';

packages/dx-react-chart-bootstrap4/src/plugins/zoom-pan.jsx → packages/dx-react-chart-bootstrap4/src/plugins/zoom-and-pan.jsx

@@ -1,5 +1,5 @@
 import { ZoomAndPan as ZoomAndPanBase } from '@devexpress/dx-react-chart';
 import { withComponents } from '@devexpress/dx-react-core';
-import { DragBox } from '../templates/zoom-pan/drag-box';
+import { DragBox } from '../templates/zoom-and-pan/drag-box';
 
 export const ZoomAndPan = withComponents({ DragBox })(ZoomAndPanBase);

packages/dx-react-chart-material-ui/api/dx-react-chart-material-ui.api.md

@@ -19,6 +19,8 @@ import { SplineSeries as SplineSeries_2 } from '@devexpress/dx-react-chart';
 import { Title as Title_2 } from '@devexpress/dx-react-chart';
 import { Tooltip as Tooltip_2 } from '@devexpress/dx-react-chart';
 import { ValueAxis as ValueAxis_2 } from '@devexpress/dx-react-chart';
+import { Viewport } from '@devexpress/dx-react-chart';
+import { ZoomAndPan as ZoomAndPan_2 } from '@devexpress/dx-react-chart';
 
 // @public (undocumented)
 export namespace AreaSeries {
@@ -343,6 +345,27 @@ export interface ValueAxisProps {
   tickSize?: number;
 }
 
+// @public (undocumented)
+export namespace ZoomAndPan {
+  export type DragBoxProps = ZoomAndPan_2.DragBoxProps;
+}
+
+// @public
+export const ZoomAndPan: React.ComponentType<ZoomAndPanProps> & {
+  DragBox: React.ComponentType<ZoomAndPan_2.DragBoxProps & { className?: string; style?: React.CSSProperties; [x: string]: any }>;
+};
+
+// @public (undocumented)
+export interface ZoomAndPanProps {
+  defaultViewport?: Viewport;
+  dragBoxComponent?: React.ComponentType<ZoomAndPan_2.DragBoxProps>;
+  interactionWithArguments?: 'none' | 'pan' | 'zoom' | 'both';
+  interactionWithValues?: 'none' | 'pan' | 'zoom' | 'both';
+  onViewportChange?: (viewport: Viewport) => void;
+  viewport?: Viewport;
+  zoomRegionKey?: 'shift' | 'alt' | 'ctrl';
+}
+
 
 // (No @packageDocumentation comment for this package)
 

packages/dx-react-chart-material-ui/src/index.js

@@ -13,4 +13,4 @@ export { ValueAxis } from './plugins/value-axis';
 export { ArgumentAxis } from './plugins/argument-axis';
 
 export { Tooltip } from './plugins/tooltip';
-export { ZoomAndPan } from './plugins/zoom-pan';
+export { ZoomAndPan } from './plugins/zoom-and-pan';

packages/dx-react-chart-material-ui/src/plugins/zoom-pan.jsx → packages/dx-react-chart-material-ui/src/plugins/zoom-and-pan.jsx

@@ -1,5 +1,5 @@
 import { ZoomAndPan as ZoomAndPanBase } from '@devexpress/dx-react-chart';
 import { withComponents } from '@devexpress/dx-react-core';
-import { DragBox } from '../templates/zoom-pan/drag-box';
+import { DragBox } from '../templates/zoom-and-pan/drag-box';
 
 export const ZoomAndPan = withComponents({ DragBox })(ZoomAndPanBase);

packages/dx-react-chart/api/dx-react-chart.api.md

@@ -254,7 +254,7 @@ export type NumberArray = [number, number];
 export type OffsetFn = (series: StackData, order: number[]) => void;
 
 // @public (undocumented)
-export type OnViewportChangeFn = (viewport: ViewportOptions) => void;
+export type OnViewportChangeFn = (viewport: Viewport) => void;
 
 // @public (undocumented)
 export type OrderFn = (series: StackData) => number[];
@@ -596,7 +596,7 @@ export interface ValueScaleProps extends ScaleProps {
 }
 
 // @public (undocumented)
-export type ViewportOptions = {
+export type Viewport = {
   readonly argumentStart?: any;
   readonly argumentEnd?: any;
   readonly scaleName?: string;
@@ -617,12 +617,12 @@ export namespace ZoomAndPan {
 
 // @public (undocumented)
 export interface ZoomAndPanProps {
-  defaultViewport?: ViewportOptions;
+  defaultViewport?: Viewport;
   dragBoxComponent: React.ComponentType<ZoomAndPan.DragBoxProps>;
   interactionWithArguments?: Interaction;
   interactionWithValues?: Interaction;
   onViewportChange?: OnViewportChangeFn;
-  viewport?: ViewportOptions;
+  viewport?: Viewport;
   zoomRegionKey?: 'shift' | 'alt' | 'ctrl';
 }
 

packages/dx-react-chart/docs/reference/zoom-and-pan.md

@@ -23,17 +23,17 @@ import { ZoomAndPan } from '@devexpress/dx-react-chart';
 
 Name | Type | Default | Description
 -----|------|---------|------------
-defaultViewport? | [ZoomAndPan.Viewport](#zoomandpanviewport) | The default viewport.
-viewport? | [ZoomAndPan.Viewport](#zoomandpanviewport) | The viewport.
-onViewportChange? | (viewport: [ZoomAndPan.Viewport](#zoomandpanviewport)) => void | A function that is executed when the viewport changes.
+defaultViewport? | [Viewport](#viewport) | The default viewport.
+viewport? | [Viewport](#viewport) | The viewport.
+onViewportChange? | (viewport: [Viewport](#viewport)) => void | A function that is executed when the viewport changes.
 interactionWithArguments? | 'none' | 'pan' | 'zoom' | 'both' | The type of interaction available for the argument scale.
 interactionWithValues? | 'none' | 'pan' | 'zoom' | 'both' | The type of interaction available for the value scale.
 zoomRegionKey? | 'shift' | 'alt' | 'ctrl' | The key the allows a user to zoom a region by selecting it with the mouse drag gesture.
 dragBoxComponent? | ComponentType<[ZoomAndPan.DragBoxProps](#zoomandpandragboxprops)> | A component that renders the rectangle that appears when a user zooms a region.
 
 ## Interfaces
 
-### ZoomAndPan.Viewport
+### Viewport
 
 The viewport configuration.
 

packages/dx-react-chart/src/index.ts

@@ -17,7 +17,7 @@ export { SplineSeries } from './plugins/spline-series';
 export { Axis, ArgumentAxis, ValueAxis } from './plugins/axis';
 export { Tooltip } from './plugins/tooltip';
 
-export * from './plugins/zoom-pan';
+export * from './plugins/zoom-and-pan';
 
 export * from './plugins/event-tracker';
 export * from './plugins/hover-state';

packages/dx-react-chart/src/plugins/zoom-pan.test.tsx → packages/dx-react-chart/src/plugins/zoom-and-pan.test.tsx

@@ -5,7 +5,7 @@ import {
   pluginDepsToComponents, getComputedState,
 } from '@devexpress/dx-testing';
 import { adjustLayout, attachEvents, detachEvents } from '@devexpress/dx-chart-core';
-import { ZoomAndPan } from './zoom-pan';
+import { ZoomAndPan } from './zoom-and-pan';
 
 jest.mock('@devexpress/dx-chart-core', () => ({
   adjustLayout: jest.fn().mockReturnValue('adjusted-ranges'),

packages/dx-react-chart/src/types/index.ts

@@ -7,7 +7,7 @@ export {
   BBoxes, BBoxesChange,
   StackList, StacksOptions, OffsetFn, OrderFn,
   EventHandlers, NumberArray, Location,
-  DomainBounds, ViewportOptions, OnViewportChangeFn, EventHandlerFn,
+  DomainBounds, Viewport, OnViewportChangeFn, EventHandlerFn,
 
   AreaSeries, LineSeries, SplineSeries, BarSeries, ScatterSeries, PieSeries,
   SeriesProps, PathComponentProps, PathComponentPathProps, PointComponentProps,

packages/dx-react-chart/src/types/plugins.zoom-pan.types.ts

@@ -1,15 +1,15 @@
 import {
-  ViewportOptions,
+  Viewport,
   OnViewportChangeFn,
   EventHandlerFn,
   Interaction,
 } from './index';
 
 export interface ZoomAndPanProps {
   /** A default viewport */
-  defaultViewport?: ViewportOptions;
+  defaultViewport?: Viewport;
   /** A viewport */
-  viewport?: ViewportOptions;
+  viewport?: Viewport;
   /** A function that is executed when viewport changes */
   onViewportChange?: OnViewportChangeFn;
   /** Interaction with arguments */
@@ -26,7 +26,7 @@ type Rect = { x: number; y: number; width: number; height: number; };
 
 /** @internal */
 export type ZoomAndPanState = {
-  viewport?: ViewportOptions;
+  viewport?: Viewport;
   rectBox?: Rect | null;
 };