From 5b2ce3d216cd373408b9c21a647287c4d97e6a19 Mon Sep 17 00:00:00 2001 From: krkshitij <110246001+krkshitij@users.noreply.github.com> Date: Sun, 22 Dec 2024 18:07:18 +0000 Subject: [PATCH] add interface for cartesian chart --- .../charts/react-charting/etc/react-charting.api.md | 9 +++++++-- .../src/components/AreaChart/AreaChart.base.tsx | 5 ++--- .../CommonComponents/CartesianChart.base.tsx | 6 +++++- .../CommonComponents/CartesianChart.types.ts | 4 ++-- .../GroupedVerticalBarChart.base.tsx | 5 ++--- .../src/components/HeatMapChart/HeatMapChart.base.tsx | 11 ++++++++--- .../HorizontalBarChartWithAxis.base.tsx | 4 ++-- .../src/components/LineChart/LineChart.base.tsx | 5 ++--- .../VerticalBarChart/VerticalBarChart.base.tsx | 5 ++--- .../VerticalStackedBarChart.base.tsx | 5 ++--- packages/charts/react-charting/src/index.ts | 1 + .../charts/react-charting/src/types/IDataPoint.ts | 7 +++++++ 12 files changed, 42 insertions(+), 25 deletions(-) diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index 96867896366f61..1e4bf02d5876d7 100644 --- 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; @@ -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; + ref?: IRefObject; 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 index 46b28545d9a3f8..92e573cc750092 100644 --- 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(); @@ -127,7 +126,7 @@ export class AreaChartBase extends React.Component; + private _cartesianChartRef: React.RefObject; 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 index efc71cb61e0f25..20d272fd4fe360 100644 --- 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(); const ChartHoverCard = React.lazy(() => @@ -63,7 +64,10 @@ export interface ICartesianChartState { * 2.Callout * 3.Fit parent Continer */ -export class CartesianChartBase extends React.Component { +export class CartesianChartBase + extends React.Component + implements ICartesianChart +{ public chartContainer: HTMLDivElement; private _classNames: IProcessedStyleSet; 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 index 996e7583bdb16a..1fc81135242175 100644 --- 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; + ref?: IRefObject; } diff --git a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx index 332535ea5eabdd..81a14523c15169 100644 --- a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx +++ b/packages/charts/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(); @@ -109,7 +108,7 @@ export class GroupedVerticalBarChartBase private _groupWidth: number; private _xAxisInnerPadding: number; private _xAxisOuterPadding: number; - private _cartesianChartRef: React.RefObject; + private _cartesianChartRef: React.RefObject; 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 index 892187428204a9..7cb7ee9136ebc7 100644 --- 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; + private _cartesianChartRef: React.RefObject; public constructor(props: IHeatMapChartProps) { super(props); diff --git a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx index dd8be1bca4aaaf..f8d715f0ff6475 100644 --- a/packages/charts/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx +++ b/packages/charts/react-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(); 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; + private _cartesianChartRef: React.RefObject; 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 index eadca43459bf45..e2c450c5978af5 100644 --- 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; const getClassNames = classNamesFunction(); @@ -187,7 +186,7 @@ export class LineChartBase extends React.Component; + private _cartesianChartRef: React.RefObject; 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 index ffe26bbac6f56c..69399bf52180ff 100644 --- 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; + private _cartesianChartRef: React.RefObject; public constructor(props: IVerticalBarChartProps) { super(props); diff --git a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 410052f02615ca..d61bfe9578bac0 100644 --- a/packages/charts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/charts/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(); type NumericAxis = D3Axis; @@ -132,7 +131,7 @@ export class VerticalStackedBarChartBase private _emptyChartId: string; private _xAxisInnerPadding: number; private _xAxisOuterPadding: number; - private _cartesianChartRef: React.RefObject; + private _cartesianChartRef: React.RefObject; public constructor(props: IVerticalStackedBarChartProps) { super(props); diff --git a/packages/charts/react-charting/src/index.ts b/packages/charts/react-charting/src/index.ts index 2ae3660ac7f75a..e632e74464c108 100644 --- 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 index 99693225be1149..b1c00e0906356c 100644 --- 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; +}