add interface for cartesian chart

microsoft · Dec 22, 2024 · 5b2ce3d · 5b2ce3d
1 parent de674df
commit 5b2ce3d
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 25 deletions.
diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md
@@ -263,6 +263,12 @@ export interface IBasestate {
     }[];
 }
 
+// @public (undocumented)
+export interface ICartesianChart {
+    // (undocumented)
+    chartContainer: HTMLDivElement | null;
+}
+
 // @public
 export interface ICartesianChartProps {
     calloutProps?: Partial<ICalloutProps>;
@@ -1097,8 +1103,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     maxOfYVal?: number;
     onChartMouseLeave?: () => void;
     points: any;
-    // Warning: (ae-forgotten-export) The symbol "CartesianChartBase" needs to be exported by the entry point index.d.ts
-    ref?: IRefObject<CartesianChartBase>;
+    ref?: IRefObject<ICartesianChart>;
     showYAxisLables?: boolean;
     showYAxisLablesTooltip?: boolean;
     stringDatasetForYAxisDomain?: string[];

diff --git a/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -44,8 +44,7 @@ import {
 } from '../../utilities/index';
 import { ILegend, Legends } from '../Legends/index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import { IChart } from '../../types/index';
-import { CartesianChartBase } from '../CommonComponents/CartesianChart.base';
+import { ICartesianChart, IChart } from '../../types/index';
 
 const getClassNames = classNamesFunction<IAreaChartStyleProps, IAreaChartStyles>();
 
@@ -127,7 +126,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   private _enableComputationOptimization: boolean;
   private _firstRenderOptimization: boolean;
   private _emptyChartId: string;
-  private _cartesianChartRef: React.RefObject<CartesianChartBase>;
+  private _cartesianChartRef: React.RefObject<ICartesianChart>;
 
   public constructor(props: IAreaChartProps) {
     super(props);

diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -32,6 +32,7 @@ import {
 } from '../../utilities/index';
 import { LegendShape, Shape } from '../Legends/index';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
+import { ICartesianChart } from '../../types/index';
 
 const getClassNames = classNamesFunction<ICartesianChartStyleProps, ICartesianChartStyles>();
 const ChartHoverCard = React.lazy(() =>
@@ -63,7 +64,10 @@ export interface ICartesianChartState {
  * 2.Callout
  * 3.Fit parent Continer
  */
-export class CartesianChartBase extends React.Component<IModifiedCartesianChartProps, ICartesianChartState> {
+export class CartesianChartBase
+  extends React.Component<IModifiedCartesianChartProps, ICartesianChartState>
+  implements ICartesianChart
+{
   public chartContainer: HTMLDivElement;
   private _classNames: IProcessedStyleSet<ICartesianChartStyles>;
   private legendContainer: HTMLDivElement;

diff --git a/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -7,6 +7,7 @@ import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
 import {
   IAccessibilityProps,
+  ICartesianChart,
   IChart,
   IDataPoint,
   IGroupedVerticalBarChartData,
@@ -21,7 +22,6 @@ import { IChartHoverCardProps } from '../../utilities/index';
 import { TimeLocaleDefinition } from 'd3-time-format';
 import { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';
 import { ScaleBand, ScaleLinear } from 'd3-scale';
-import { CartesianChartBase } from './CartesianChart.base';
 
 /**
  * Cartesian Chart style properties
@@ -702,5 +702,5 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
   /**
    * Callback to access the public methods and properties of the component.
    */
-  ref?: IRefObject<CartesianChartBase>;
+  ref?: IRefObject<ICartesianChart>;
 }
diff --git a/...ts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/...ts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
@@ -46,8 +46,7 @@ import {
   IRefArrayData,
   Legends,
 } from '../../index';
-import { IChart } from '../../types/index';
-import { CartesianChartBase } from '../CommonComponents/CartesianChart.base';
+import { ICartesianChart, IChart } from '../../types/index';
 
 const COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';
 const getClassNames = classNamesFunction<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>();
@@ -109,7 +108,7 @@ export class GroupedVerticalBarChartBase
   private _groupWidth: number;
   private _xAxisInnerPadding: number;
   private _xAxisOuterPadding: number;
-  private _cartesianChartRef: React.RefObject<CartesianChartBase>;
+  private _cartesianChartRef: React.RefObject<ICartesianChart>;
 
   public constructor(props: IGroupedVerticalBarChartProps) {
     super(props);

diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
@@ -1,5 +1,11 @@
 import { CartesianChart, IChildProps, IModifiedCartesianChartProps } from '../../components/CommonComponents/index';
-import { IAccessibilityProps, IChart, IHeatMapChartData, IHeatMapChartDataPoint } from '../../types/IDataPoint';
+import {
+  IAccessibilityProps,
+  ICartesianChart,
+  IChart,
+  IHeatMapChartData,
+  IHeatMapChartDataPoint,
+} from '../../types/IDataPoint';
 import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { classNamesFunction, getId, initializeComponentRef, memoizeFunction } from '@fluentui/react/lib/Utilities';
 import { FocusZoneDirection } from '@fluentui/react-focus';
@@ -24,7 +30,6 @@ import {
 import { Target } from '@fluentui/react';
 import { format as d3Format } from 'd3-format';
 import { timeFormat as d3TimeFormat } from 'd3-time-format';
-import { CartesianChartBase } from '../CommonComponents/CartesianChart.base';
 
 type DataSet = {
   dataSet: RectanglesGraphData;
@@ -115,7 +120,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
   private _yAxisType: YAxisType;
   private _calloutAnchorPoint: FlattenData | null;
   private _emptyChartId: string;
-  private _cartesianChartRef: React.RefObject<CartesianChartBase>;
+  private _cartesianChartRef: React.RefObject<ICartesianChart>;
 
   public constructor(props: IHeatMapChartProps) {
     super(props);

diff --git a/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
@@ -14,6 +14,7 @@ import {
   IRefArrayData,
   IMargins,
   IChart,
+  ICartesianChart,
 } from '../../types/IDataPoint';
 import { IChildProps, IYValueHover } from '../CommonComponents/CartesianChart.types';
 import { CartesianChart } from '../CommonComponents/CartesianChart';
@@ -41,7 +42,6 @@ import {
   createStringYAxisForHorizontalBarChartWithAxis,
   getNextGradient,
 } from '../../utilities/index';
-import { CartesianChartBase } from '../CommonComponents/CartesianChart.base';
 
 const getClassNames = classNamesFunction<IHorizontalBarChartWithAxisStyleProps, IHorizontalBarChartWithAxisStyles>();
 export interface IHorizontalBarChartWithAxisState extends IBasestate {
@@ -79,7 +79,7 @@ export class HorizontalBarChartWithAxisBase
   private _xAxisType: XAxisTypes;
   private _yAxisType: YAxisType;
   private _calloutAnchorPoint: IHorizontalBarChartWithAxisDataPoint | null;
-  private _cartesianChartRef: React.RefObject<CartesianChartBase>;
+  private _cartesianChartRef: React.RefObject<ICartesianChart>;
 
   public constructor(props: IHorizontalBarChartWithAxisProps) {
     super(props);

diff --git a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -49,8 +49,7 @@ import {
   createStringYAxis,
   formatDate,
 } from '../../utilities/index';
-import { IChart } from '../../types/index';
-import { CartesianChartBase } from '../CommonComponents/CartesianChart.base';
+import { ICartesianChart, IChart } from '../../types/index';
 
 type NumericAxis = D3Axis<number | { valueOf(): number }>;
 const getClassNames = classNamesFunction<ILineChartStyleProps, ILineChartStyles>();
@@ -187,7 +186,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private _firstRenderOptimization: boolean;
   private _emptyChartId: string;
   private _isRTL: boolean = getRTL();
-  private _cartesianChartRef: React.RefObject<CartesianChartBase>;
+  private _cartesianChartRef: React.RefObject<ICartesianChart>;
 
   constructor(props: ILineChartProps) {
     super(props);

diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -53,8 +53,7 @@ import {
   formatDate,
   getNextGradient,
 } from '../../utilities/index';
-import { IChart } from '../../types/index';
-import { CartesianChartBase } from '../CommonComponents/CartesianChart.base';
+import { ICartesianChart, IChart } from '../../types/index';
 
 enum CircleVisbility {
   show = 'visibility',
@@ -107,7 +106,7 @@ export class VerticalBarChartBase
   private _emptyChartId: string;
   private _xAxisInnerPadding: number;
   private _xAxisOuterPadding: number;
-  private _cartesianChartRef: React.RefObject<CartesianChartBase>;
+  private _cartesianChartRef: React.RefObject<ICartesianChart>;
 
   public constructor(props: IVerticalBarChartProps) {
     super(props);

diff --git a/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -60,8 +60,7 @@ import {
   formatDate,
   getNextGradient,
 } from '../../utilities/index';
-import { IChart } from '../../types/index';
-import { CartesianChartBase } from '../CommonComponents/CartesianChart.base';
+import { ICartesianChart, IChart } from '../../types/index';
 
 const getClassNames = classNamesFunction<IVerticalStackedBarChartStyleProps, IVerticalStackedBarChartStyles>();
 type NumericAxis = D3Axis<number | { valueOf(): number }>;
@@ -132,7 +131,7 @@ export class VerticalStackedBarChartBase
   private _emptyChartId: string;
   private _xAxisInnerPadding: number;
   private _xAxisOuterPadding: number;
-  private _cartesianChartRef: React.RefObject<CartesianChartBase>;
+  private _cartesianChartRef: React.RefObject<ICartesianChart>;
 
   public constructor(props: IVerticalStackedBarChartProps) {
     super(props);

diff --git a/packages/charts/react-charting/src/index.ts b/packages/charts/react-charting/src/index.ts
@@ -98,6 +98,7 @@ export type {
   SLink,
   SNode,
   IChart,
+  ICartesianChart,
 } from './types/index';
 export type {
   IChartHoverCardProps,

diff --git a/packages/charts/react-charting/src/types/IDataPoint.ts b/packages/charts/react-charting/src/types/IDataPoint.ts
@@ -821,3 +821,10 @@ export interface ICustomizedCalloutData {
 export interface IChart {
   container: HTMLElement | null;
 }
+
+/**
+ * {@docCategory CartesianChart}
+ */
+export interface ICartesianChart {
+  chartContainer: HTMLDivElement | null;
+}