Importing functions which are used instead of importing complete lib…

…rary (#30185)

change/@fluentui-react-charting-6741ba08-9ad2-46d0-90a6-298da205529f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Importing functions which are used instead of importing complete library",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-charting/etc/react-charting.api.md

@@ -4,8 +4,6 @@
 
 ```ts
 
-import * as d3Sankey from 'd3-sankey';
-import * as d3TimeFormat from 'd3-time-format';
 import { FocusZoneDirection } from '@fluentui/react-focus';
 import { ICalloutContentStyleProps } from '@fluentui/react/lib/Callout';
 import { ICalloutContentStyles } from '@fluentui/react/lib/Callout';
@@ -22,7 +20,10 @@ import { IStyleFunctionOrObject as IStyleFunctionOrObject_2 } from '@fluentui/re
 import { ITheme } from '@fluentui/react/lib/Styling';
 import { ITheme as ITheme_2 } from '@fluentui/react';
 import * as React_2 from 'react';
+import { SankeyLink } from 'd3-sankey';
+import { SankeyNode } from 'd3-sankey';
 import { SVGProps } from 'react';
+import { TimeLocaleDefinition } from 'd3-time-format';
 
 // @public
 export const AreaChart: React_2.FunctionComponent<IAreaChartProps>;
@@ -242,7 +243,7 @@ export interface ICartesianChartProps {
     tickFormat?: string;
     tickPadding?: number;
     tickValues?: number[] | Date[];
-    timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition;
+    timeFormatLocale?: TimeLocaleDefinition;
     width?: number;
     wrapXAxisLables?: boolean;
     xAxisTickCount?: number;
@@ -1479,10 +1480,10 @@ export const Shape: React_2.FC<IShapeProps>;
 // Warning: (ae-forgotten-export) The symbol "ISLinkExtra" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export type SLink = d3Sankey.SankeyLink<ISNodeExtra, ISLinkExtra>;
+export type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;
 
 // @public (undocumented)
-export type SNode = d3Sankey.SankeyNode<ISNodeExtra, ISLinkExtra>;
+export type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;
 
 // @public
 export const Sparkline: React_2.FunctionComponent<ISparklineProps>;

packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -7,7 +7,7 @@ import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
 import { IAccessibilityProps, IMargins } from '../../types/index';
 import { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';
-import * as d3TimeFormat from 'd3-time-format';
+import { TimeLocaleDefinition } from 'd3-time-format';
 
 /**
  * Cartesian Chart style properties
@@ -370,7 +370,7 @@ export interface ICartesianChartProps {
   /**
    * The prop used to define a custom locale for the date time format.
    */
-  timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition;
+  timeFormatLocale?: TimeLocaleDefinition;
 
   /**
    * The prop used to define a custom datetime formatter for date axis.

packages/react-charting/src/components/DonutChart/Arc/Arc.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as shape from 'd3-shape';
+import { arc as d3Arc } from 'd3-shape';
 import { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';
 import { getStyles } from './Arc.styles';
 import { IChartDataPoint } from '../index';
@@ -13,7 +13,7 @@ export interface IArcState {
 
 export class Arc extends React.Component<IArcProps, IArcState> {
   public static defaultProps: Partial<IArcProps> = {
-    arc: shape.arc(),
+    arc: d3Arc(),
   };
 
   public state: {} = {};

packages/react-charting/src/components/DonutChart/DonutChart.base.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';
-import * as scale from 'd3-scale';
+import { ScaleOrdinal } from 'd3-scale';
 import { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';
@@ -33,7 +33,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
     innerRadius: 0,
     hideLabels: true,
   };
-  public _colors: scale.ScaleOrdinal<string, {}>;
+  public _colors: ScaleOrdinal<string, {}>;
   private _classNames: IProcessedStyleSet<IDonutChartStyles>;
   private _rootElem: HTMLElement | null;
   private _uniqText: string;

packages/react-charting/src/components/DonutChart/Pie/Pie.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as shape from 'd3-shape';
+import { pie as d3Pie } from 'd3-shape';
 import { IPieProps, IPieStyleProps, IPieStyles } from './index';
 import { Arc, IArcData } from '../Arc/index';
 import { IChartDataPoint } from '../index';
@@ -12,8 +12,7 @@ const TEXT_PADDING: number = 5;
 
 export class Pie extends React.Component<IPieProps, {}> {
   public static defaultProps: Partial<IPieProps> = {
-    pie: shape
-      .pie()
+    pie: d3Pie()
       .sort(null)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .value((d: any) => d.data)
@@ -27,8 +26,7 @@ export class Pie extends React.Component<IPieProps, {}> {
   constructor(props: IPieProps) {
     super(props);
     this._hoverCallback = this._hoverCallback.bind(this);
-    this._pieForFocusRing = shape
-      .pie()
+    this._pieForFocusRing = d3Pie()
       .sort(null)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .value((d: any) => d.data)

packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as shape from 'd3-shape';
+import { arc as d3Arc } from 'd3-shape';
 import { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';
 import {
   IGaugeChartProps,
@@ -319,8 +319,7 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
       total = maxValue;
     }
 
-    const arcGenerator = shape
-      .arc()
+    const arcGenerator = d3Arc()
       .padAngle(ARC_PADDING / this._outerRadius)
       .padRadius(this._outerRadius);
     const rtlSafeSegments = this._isRTL ? Array.from(segments).reverse() : segments;

packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx

@@ -24,7 +24,7 @@ import {
 } from '../../utilities/utilities';
 import { Target } from '@fluentui/react';
 import { format as d3Format } from 'd3-format';
-import * as d3TimeFormat from 'd3-time-format';
+import { timeFormat as d3TimeFormat } from 'd3-time-format';
 
 type DataSet = {
   dataSet: RectanglesGraphData;
@@ -640,7 +640,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
   private _getStringFormattedDate = (point: string, formatString?: string): string => {
     const date = new Date();
     date.setTime(+point);
-    return d3TimeFormat.timeFormat(formatString || '%b/%d')(date);
+    return d3TimeFormat(formatString || '%b/%d')(date);
   };
 
   private _getStringFormattedNumber = (point: string, formatString?: string): string => {

packages/react-charting/src/components/PieChart/Arc/Arc.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as shape from 'd3-shape';
+import { arc as d3Arc } from 'd3-shape';
 import { IArcProps, IArcState, IArcStyles } from './Arc.types';
 import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
 import { getStyles } from './Arc.styles';
@@ -8,7 +8,7 @@ import { SVGTooltipText } from '../../../utilities/SVGTooltipText';
 
 export class Arc extends React.Component<IArcProps, IArcState> {
   public static defaultProps: Partial<IArcProps> = {
-    arc: shape.arc(),
+    arc: d3Arc(),
   };
 
   protected _arcId: string;
@@ -66,7 +66,7 @@ export class LabeledArc extends Arc {
     const { data, culture } = this.props;
     const gap = 4;
     // placing the labels on the outside arc
-    const [labelX, labelY] = shape.arc().centroid({
+    const [labelX, labelY] = d3Arc().centroid({
       endAngle: data?.endAngle || 0,
       startAngle: data?.startAngle || 0,
       padAngle: data?.padAngle,

packages/react-charting/src/components/PieChart/Pie/Pie.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as shape from 'd3-shape';
-import * as scale from 'd3-scale';
+import { pie as d3Pie } from 'd3-shape';
+import { ScaleOrdinal, scaleOrdinal } from 'd3-scale';
 import { IPieProps } from './Pie.types';
 import { LabeledArc } from '../Arc/Arc';
 import { IArcData } from '../Arc/Arc.types';
@@ -9,14 +9,13 @@ import { getColorFromToken, getNextColor } from '../../../utilities/colors';
 
 export class Pie extends React.Component<IPieProps, {}> {
   public static defaultProps: Partial<IPieProps> = {
-    pie: shape
-      .pie()
+    pie: d3Pie()
       .padAngle(0.01)
       .sort(null)
       /* eslint-disable @typescript-eslint/no-explicit-any */
       .value((d: any) => d.y),
   };
-  private colors: scale.ScaleOrdinal<string | number, any>;
+  private colors: ScaleOrdinal<string | number, any>;
 
   constructor(props: IPieProps) {
     super(props);
@@ -48,7 +47,7 @@ export class Pie extends React.Component<IPieProps, {}> {
     }
     const { colors = defaultColors } = this.props;
 
-    this.colors = scale.scaleOrdinal().range(colors.map(color => getColorFromToken(color)));
+    this.colors = scaleOrdinal().range(colors.map(color => getColorFromToken(color)));
 
     const piechart = pie(data);
     const translate = `translate(${width / 2}, ${height / 2})`;

packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { classNamesFunction, getId, getRTL, memoizeFunction } from '@fluentui/react/lib/Utilities';
 import { ISankeyChartData, ISankeyChartProps, ISankeyChartStyleProps, ISankeyChartStyles } from './SankeyChart.types';
 import { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
-import * as d3Sankey from 'd3-sankey';
+import { SankeyLayout, SankeyGraph, sankey as d3Sankey, sankeyRight, sankeyJustify } from 'd3-sankey';
 import { area as d3Area, curveBumpX as d3CurveBasis } from 'd3-shape';
 import { sum as d3Sum } from 'd3-array';
 import { ChartHoverCard, IBasestate, IChartHoverCardProps, SLink, SNode } from '../../index';
@@ -61,7 +61,7 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
   private _calloutId: string;
   private _linkId: string;
   private _nodesInColumn: NodesInColumns;
-  private _sankey: d3Sankey.SankeyLayout<d3Sankey.SankeyGraph<{}, {}>, {}, {}>;
+  private _sankey: SankeyLayout<SankeyGraph<{}, {}>, {}, {}>;
   private _margins: IMargins;
   private _isRtl: boolean = getRTL();
   private _normalizeData: (data: ISankeyChartData) => void;
@@ -181,14 +181,13 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
     const height =
       this.state.containerHeight - this._margins.bottom! > 0 ? this.state.containerHeight - this._margins.bottom! : 0;
 
-    this._sankey = d3Sankey
-      .sankey()
+    this._sankey = d3Sankey()
       .nodeWidth(124)
       .extent([
         [this._margins.left!, this._margins.top!],
         [width - 1, height - 6],
       ])
-      .nodeAlign(this._isRtl ? d3Sankey.sankeyRight : d3Sankey.sankeyJustify);
+      .nodeAlign(this._isRtl ? sankeyRight : sankeyJustify);
 
     return { height, width };
   }
@@ -219,10 +218,7 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
    *
    * This is used to group nodes by column index.
    */
-  private _populateNodeInColumns(
-    graph: ISankeyChartData,
-    sankey: d3Sankey.SankeyLayout<d3Sankey.SankeyGraph<{}, {}>, {}, {}>,
-  ) {
+  private _populateNodeInColumns(graph: ISankeyChartData, sankey: SankeyLayout<SankeyGraph<{}, {}>, {}, {}>) {
     sankey(graph);
     const nodesInColumn: NodesInColumns = {};
     graph.nodes.forEach((node: SNode) => {

packages/react-charting/src/types/IDataPoint.ts

@@ -1,6 +1,7 @@
 import { SVGProps } from 'react';
 import { LegendShape } from '../components/Legends/Legends.types';
-import * as d3Sankey from 'd3-sankey';
+import { SankeyLink, SankeyNode } from 'd3-sankey';
+
 export interface IBasestate {
   _width?: number;
   _height?: number;
@@ -491,8 +492,8 @@ interface ISLinkExtra {
   unnormalizedValue?: number;
 }
 
-export type SNode = d3Sankey.SankeyNode<ISNodeExtra, ISLinkExtra>;
-export type SLink = d3Sankey.SankeyLink<ISNodeExtra, ISLinkExtra>;
+export type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;
+export type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;
 
 /**
  * {@docCategory IChartProps}

packages/react-charting/src/utilities/utilities.ts

@@ -3,7 +3,12 @@ import { max as d3Max, min as d3Min } from 'd3-array';
 import { scaleLinear as d3ScaleLinear, scaleTime as d3ScaleTime, scaleBand as d3ScaleBand } from 'd3-scale';
 import { select as d3Select, event as d3Event, selectAll as d3SelectAll } from 'd3-selection';
 import { format as d3Format } from 'd3-format';
-import * as d3TimeFormat from 'd3-time-format';
+import {
+  TimeLocaleObject as d3TimeLocaleObject,
+  timeFormat as d3TimeFormat,
+  timeFormatLocale as d3TimeFormatLocale,
+  TimeLocaleDefinition as d3TimeLocaleDefinition,
+} from 'd3-time-format';
 import {
   timeSecond as d3TimeSecond,
   timeMinute as d3TimeMinute,
@@ -171,8 +176,8 @@ export function createNumericXAxis(xAxisParams: IXAxisParams, chartType: ChartTy
   return { xScale: xAxisScale, tickValues };
 }
 
-function multiFormat(date: Date, locale?: d3TimeFormat.TimeLocaleObject) {
-  const timeFormat = locale ? locale.format : d3TimeFormat.timeFormat;
+function multiFormat(date: Date, locale?: d3TimeLocaleObject) {
+  const timeFormat = locale ? locale.format : d3TimeFormat;
   const formatMillisecond = timeFormat('.%L');
   const formatSecond = timeFormat(':%S');
   const formatMinute = timeFormat('%I:%M');
@@ -212,7 +217,7 @@ export function createDateXAxis(
   tickParams: ITickParams,
   culture?: string,
   options?: Intl.DateTimeFormatOptions,
-  timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition,
+  timeFormatLocale?: d3TimeLocaleDefinition,
   customDateTimeFormatter?: (dateTime: Date) => string,
 ) {
   const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount = 6 } = xAxisParams;
@@ -229,7 +234,7 @@ export function createDateXAxis(
       return domainValue.toLocaleString(culture, options);
     });
   } else if (timeFormatLocale) {
-    const locale: d3TimeFormat.TimeLocaleObject = d3TimeFormat.timeFormatLocale(timeFormatLocale!);
+    const locale: d3TimeLocaleObject = d3TimeFormatLocale(timeFormatLocale!);
 
     xAxis.tickFormat((domainValue: Date, _index: number) => {
       return multiFormat(domainValue, locale);
@@ -238,7 +243,7 @@ export function createDateXAxis(
 
   tickParams.tickValues ? xAxis.tickValues(tickParams.tickValues) : '';
   if (culture === undefined) {
-    tickParams.tickFormat ? xAxis.tickFormat(d3TimeFormat.timeFormat(tickParams.tickFormat)) : '';
+    tickParams.tickFormat ? xAxis.tickFormat(d3TimeFormat(tickParams.tickFormat)) : '';
   }
   if (xAxisElement) {
     d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');