@fluentui/react-charting 5.23.62 → 5.23.64

package/lib/components/CommonComponents/CartesianChart.types.d.ts

@@ -0,0 +1,556 @@
+import * as React from 'react';
+import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
+import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
+import { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { ILegendsProps } from '../Legends/index';
+import { IAccessibilityProps, IChart, IDataPoint, IGroupedVerticalBarChartData, IHeatMapChartDataPoint, IHorizontalBarChartWithAxisDataPoint, ILineChartPoints, IMargins, IVerticalBarChartDataPoint, IVerticalStackedBarDataPoint } from '../../types/index';
+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';
+/**
+ * Cartesian Chart style properties
+ * {@docCategory CartesianChart}
+ */
+export interface ICartesianChartStyleProps {
+    /**
+     * Theme (provided through customization.)
+     */
+    theme: ITheme;
+    /**
+     * Additional CSS class(es) to apply to the Chart.
+     */
+    className?: string;
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * Height of the chart.
+     */
+    height?: number;
+    /**
+     * Color of the chart.
+     */
+    color?: string;
+    /**
+     * Link to redirect if click action for graph
+     */
+    href?: string;
+    /**
+     * prop to check if the chart is selected or hovered upon to determine opacity
+     */
+    shouldHighlight?: boolean;
+    /**
+     * prop to check if the Page is in Rtl
+     */
+    isRtl?: boolean;
+    /**
+     * color of the line
+     */
+    lineColor?: string;
+    /**
+     * boolean flag which determines if shape is drawn in callout
+     */
+    toDrawShape?: boolean;
+    /**
+     * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+     */
+    enableReflow?: boolean;
+}
+/**
+ * Cartesian Chart styles
+ * {@docCategory CartesianChart}
+ */
+export interface ICartesianChartStyles {
+    /**
+     *  Style for the root element.
+     */
+    root?: IStyle;
+    /**
+     * Style for the element containing the x-axis.
+     */
+    xAxis?: IStyle;
+    /**
+     * Style for the element containing the y-axis.
+     */
+    yAxis?: IStyle;
+    /**
+     * Style for legend container
+     */
+    legendContainer?: IStyle;
+    /**
+     * line hover box css
+     */
+    hover?: IStyle;
+    /**
+     * styles for callout root-content
+     */
+    calloutContentRoot?: IStyle;
+    /**
+     * styles for callout x-content
+     */
+    calloutContentX?: IStyle;
+    /**
+     * styles for callout y-content
+     */
+    calloutContentY?: IStyle;
+    /**
+     * styles for description message
+     */
+    descriptionMessage?: IStyle;
+    /**
+     * styles for callout Date time container
+     */
+    calloutDateTimeContainer?: IStyle;
+    /**
+     * styles for callout info container
+     */
+    calloutInfoContainer?: IStyle;
+    /**
+     * styles for callout block container
+     */
+    calloutBlockContainer?: IStyle;
+    /**
+     * styles for callout legend text
+     */
+    calloutlegendText?: IStyle;
+    /**
+     * styles for tooltip
+     */
+    tooltip?: IStyle;
+    /**
+     * styles for tooltip
+     */
+    axisTitle?: IStyle;
+    /**
+     * Style for the chart Title.
+     */
+    chartTitle?: IStyle;
+    /**
+     * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
+     */
+    opacityChangeOnHover?: IStyle;
+    /**
+     * styles for the shape object in the callout
+     */
+    shapeStyles?: IStyle;
+    /**
+     * Styles for the chart wrapper div
+     */
+    chartWrapper?: IStyle;
+}
+/**
+ * Cartesian Chart properties
+ * {@docCategory CartesianChart}
+ */
+export interface ICartesianChartProps {
+    /**
+     * Below height used for resizing of the chart
+     * Wrap chart in your container and send the updated height and width to these props.
+     * These values decide wheather chart re render or not. Please check examples for reference
+     */
+    height?: number;
+    /**
+     * Below width used for resizing of the chart
+     * Wrap chart in your container and send the updated height and width to these props.
+     * These values decide wheather chart re render or not. Please check examples for reference
+     */
+    width?: number;
+    /**
+     * this prop takes its parent as a HTML element to define the width and height of the chart
+     */
+    parentRef?: HTMLElement | null;
+    /**
+     * Additional CSS class(es) to apply to the Chart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * Margins for the chart
+     * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`
+     * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values
+     */
+    margins?: IMargins;
+    /** decides wether to show/hide legends
+     * @defaultvalue false
+     */
+    hideLegend?: boolean;
+    /**
+     * Do not show tooltips in chart
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * this prop takes values that you want the chart to render on x-axis
+     * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you
+     * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart
+     */
+    tickValues?: number[] | Date[] | string[];
+    /**
+     * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'
+     * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis
+     * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.
+     */
+    tickFormat?: string;
+    /**
+     * Width of line stroke
+     */
+    strokeWidth?: number;
+    /**
+     * x Axis labels tick padding. This defines the gap between tick labels and tick lines.
+     * @default 10
+     */
+    xAxisTickPadding?: number;
+    /**
+     * the format in for the data on y-axis. For data object this can be specified to your requirement.
+     *  Eg: d3.format(".0%")(0.123),d3.format("+20")(42);
+     * Please look at https://github.com/d3/d3-format for all the formats supported
+     */
+    yAxisTickFormat?: any;
+    /**
+     * Secondary y-scale options
+     * By default this is not defined, meaning there will be no secondary y-scale.
+     */
+    secondaryYScaleOptions?: {
+        /** Minimum value (0 by default) */
+        yMinValue?: number;
+        /** Maximum value (100 by default) */
+        yMaxValue?: number;
+    };
+    /**
+     * minimum  data value point in y-axis
+     */
+    yMinValue?: number;
+    /**
+     * maximum data value point in y-axis
+     */
+    yMaxValue?: number;
+    /**
+     * maximum data value point in x-axis
+     */
+    xMaxValue?: number;
+    /**
+     * Number of ticks on the y-axis.
+     * Tick count should be factor of difference between (yMinValue, yMaxValue)?
+     * @default 4
+     */
+    yAxisTickCount?: number;
+    /**
+     * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.
+     * Does not work for string axis.
+     * @default 6
+     */
+    xAxisTickCount?: number;
+    /**
+     * define the size of the tick lines on the x-axis
+     * @default 10
+     */
+    xAxistickSize?: number;
+    /**
+     * defines the space between the tick line and the data label
+     * @default 10
+     */
+    tickPadding?: number;
+    /**
+     * Url that the data-viz needs to redirect to upon clicking on it
+     */
+    href?: string;
+    /**
+     * Label to apply to the whole chart.
+     * @deprecated - Use your chart label for the chart.
+     */
+    chartLabel?: string;
+    /**
+     * overflow props for the legends
+     */
+    legendsOverflowProps?: Partial<IOverflowSetProps>;
+    legendsOverflowText?: any;
+    /**
+     * focus zone props in hover card for legends
+     */
+    focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;
+    /**
+     * Enable the legends to wrap lines if there is not enough space to show all legends on a single line
+     */
+    enabledLegendsWrapLines?: boolean;
+    legendProps?: Partial<ILegendsProps>;
+    /**
+     *@default false
+     *Used for to elipse x axis labes and show tooltip on x axis labels
+     */
+    showXAxisLablesTooltip?: boolean;
+    /**
+     * @default 4
+     * Used for X axis labels
+     * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.
+     */
+    noOfCharsToTruncate?: number;
+    /**
+     * @default false
+     * Used to wrap x axis labels values (whole value)
+     */
+    wrapXAxisLables?: boolean;
+    /**
+     * @default false
+     * Used to rotate x axis labels by 45 degrees
+     */
+    rotateXAxisLables?: boolean;
+    /**
+     * The prop used to define the date time localization options
+     */
+    dateLocalizeOptions?: Intl.DateTimeFormatOptions;
+    /**
+     * The prop used to define a custom locale for the date time format.
+     */
+    timeFormatLocale?: TimeLocaleDefinition;
+    /**
+     * The prop used to define a custom datetime formatter for date axis.
+     */
+    customDateTimeFormatter?: (dateTime: Date) => string;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
+    /**
+     * Callout customization props
+     */
+    calloutProps?: Partial<ICalloutProps>;
+    /**
+     * props for the svg; use this to include aria-* or other attributes on the tag
+     */
+    svgProps?: React.SVGProps<SVGSVGElement>;
+    /**
+     * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows
+     * @default True for LineChart but False for other charts
+     */
+    enableReflow?: boolean;
+    /**
+     * Prop to set the x axis title
+     * @default undefined
+     * Minimum bottom margin required for x axis title is 55px
+     */
+    xAxisTitle?: string;
+    /**
+     * Prop to set the y axis title
+     * @default undefined
+     * Minimum left margin required for y axis title is 60px and for RTL is 40px
+     * Minimum right margin required for y axis title is 40px and for RTL is 60px
+     */
+    yAxisTitle?: string;
+    /**
+     * Prop to set the secondary y axis title
+     * @default undefined
+     * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px
+     */
+    secondaryYAxistitle?: string;
+    /**
+     * Whether to use UTC time for axis scale, ticks, and the time display in callouts.
+     * When set to `true`, time is displayed equally, regardless of the user's timezone settings.
+     * @default true
+     */
+    useUTC?: boolean;
+    /**
+     * @default false
+     * Used for enabling negative values in Y axis.
+     */
+    supportNegativeData?: boolean;
+    /**
+     * @default false
+     * The prop used to decide rounded ticks on y axis
+     */
+    roundedTicks?: boolean;
+    /**
+     * Optional callback to access the IChart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IChart>;
+    /**
+     * Determines whether overlapping x-axis tick labels should be hidden.
+     * @default false
+     */
+    hideTickOverlap?: boolean;
+}
+export interface IYValueHover {
+    legend?: string;
+    y?: number;
+    color?: string;
+    data?: string | number;
+    shouldDrawBorderBottom?: boolean;
+    yAxisCalloutData?: string | {
+        [id: string]: number;
+    };
+    index?: number;
+    callOutAccessibilityData?: IAccessibilityProps;
+}
+export interface IChildProps {
+    xScale?: any;
+    yScale?: any;
+    yScaleSecondary?: any;
+    containerHeight?: number;
+    containerWidth?: number;
+}
+export interface IModifiedCartesianChartProps extends ICartesianChartProps {
+    /**
+     * Define the chart title
+     */
+    chartTitle?: string;
+    /**
+     * Only used for Area chart
+     * Value used to draw y axis of that chart.
+     */
+    maxOfYVal?: number;
+    /**
+     * Data of the chart
+     */
+    points: any;
+    /**
+     * Define type of the chart
+     */
+    chartType: ChartTypes;
+    /** X axis type */
+    xAxisType: XAxisTypes;
+    /** Y axis type */
+    yAxisType?: YAxisType;
+    /**
+     * Legends of the chart.
+     */
+    legendBars: JSX.Element | null;
+    /**
+     * Callout props
+     */
+    calloutProps: Partial<ICalloutProps> & {
+        isCalloutVisible: boolean;
+        id: string;
+        YValueHover?: IYValueHover[];
+        hoverXValue?: string | number | null;
+        legend?: string;
+        color?: string;
+        YValue?: string | number;
+        XValue?: string;
+        descriptionMessage?: string;
+    };
+    /**
+     * Callback method used for to get margins to the chart.
+     */
+    getmargins?: (margins: IMargins) => void;
+    /**
+     * This is a call back method to the chart from cartesian chart.
+     * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.
+     * It also contians an optional param xAxisElement - defines as x axis scale element.
+     * This param used to enable feature word wrap of Xaxis.
+     */
+    getGraphData?: any;
+    /**
+     * Used for bar chart graphs.
+     * To define width of the bar
+     */
+    barwidth?: number;
+    /**
+     * Used for tick styles of the x axis of the chart
+     * Tick params are applicable for date axis only.
+     */
+    tickParams?: {
+        tickValues?: number[] | Date[] | string[];
+        tickFormat?: string;
+    };
+    /**
+     * it's padding between bar's or lines in the graph
+     */
+    xAxisPadding?: number;
+    /**
+     * it's padding between bar's or lines in the graph
+     */
+    yAxisPadding?: number;
+    /**
+     * Children elements specific to derived chart types.
+     */
+    children(props: IChildProps): React.ReactNode;
+    /**
+     * To enable callout for individualbar or complete stack. Using for only Vertical stacked bar chart.
+     * @default false
+     * @type \{boolean \}
+     */
+    isCalloutForStack?: boolean;
+    /** dataset values to find out domain of the String axis
+     * Present using for only vertical stacked bar chart and grouped vertical bar chart
+     */
+    datasetForXAxisDomain?: string[];
+    /** Own callout design */
+    customizedCallout?: any;
+    /**
+     * if the data points for the y-axis is of type string, then we need to give this
+     * prop to construct the y-axis
+     */
+    stringDatasetForYAxisDomain?: string[];
+    /**
+     * Focus zone direction to the chart
+     * @default FocusZoneDirection.horizontal
+     */
+    focusZoneDirection?: FocusZoneDirection;
+    /**
+     * props to send into the chart hover card
+     */
+    chartHoverProps?: IChartHoverCardProps;
+    /**
+     * props to send to the focuszone
+     */
+    svgFocusZoneProps?: IFocusZoneProps;
+    /**
+     * The prop used to define the culture to localize the numbers and date
+     */
+    culture?: string;
+    getAxisData?: any;
+    /**
+     * Callback method used when mouse leaves the chart boundary.
+     */
+    onChartMouseLeave?: () => void;
+    /** Callback method to get extra margins for domain */
+    getDomainMargins?: (containerWidth: number) => IMargins;
+    /** Padding between each bar/line-point */
+    xAxisInnerPadding?: number;
+    /** Padding before first bar/line-point and after last bar/line-point */
+    xAxisOuterPadding?: number;
+    /**
+     *@default false
+     *Used for to elipse y axis labes and show tooltip on x axis labels
+     */
+    showYAxisLablesTooltip?: boolean;
+    /**
+     *@default false
+     *Used for showing complete y axis lables   */
+    showYAxisLables?: boolean;
+    /**
+     * @default false
+     * Used to control the first render cycle Performance optimization code.
+     */
+    enableFirstRenderOptimization?: boolean;
+    /**
+     * Get the min and max values of the y-axis
+     */
+    getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[], yAxisType: YAxisType | undefined) => {
+        startValue: number;
+        endValue: number;
+    };
+    /**
+     * Create the y-axis
+     */
+    createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean) => ScaleLinear<number, number, never>;
+    /**
+     * Get the domain and range values
+     */
+    getDomainNRangeValues: (points: ILineChartPoints[] | IVerticalBarChartDataPoint[] | IVerticalStackedBarDataPoint[] | IHorizontalBarChartWithAxisDataPoint[] | IGroupedVerticalBarChartData[] | IHeatMapChartDataPoint[], margins: IMargins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
+    /**
+     * Create the string y-axis
+     */
+    createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined) => ScaleBand<string>;
+    /**
+     * Callback to access the public methods and properties of the component.
+     */
+    ref?: IRefObject<IChart>;
+}

package/lib/components/CommonComponents/CartesianChart.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CartesianChart.types.js.map

package/lib/components/CommonComponents/CartesianChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianChart.types.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { ILegendsProps } from '../Legends/index';\nimport {\n  IAccessibilityProps,\n  IChart,\n  IDataPoint,\n  IGroupedVerticalBarChartData,\n  IHeatMapChartDataPoint,\n  IHorizontalBarChartWithAxisDataPoint,\n  ILineChartPoints,\n  IMargins,\n  IVerticalBarChartDataPoint,\n  IVerticalStackedBarDataPoint,\n} from '../../types/index';\nimport { IChartHoverCardProps } from '../../utilities/index';\nimport { TimeLocaleDefinition } from 'd3-time-format';\nimport { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';\nimport { ScaleBand, ScaleLinear } from 'd3-scale';\n\n/**\n * Cartesian Chart style properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * Height of the chart.\n   */\n  height?: number;\n\n  /**\n   * Color of the chart.\n   */\n  color?: string;\n\n  /**\n   * Link to redirect if click action for graph\n   */\n  href?: string;\n\n  /**\n   * prop to check if the chart is selected or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check if the Page is in Rtl\n   */\n  isRtl?: boolean;\n\n  /**\n   * color of the line\n   */\n  lineColor?: string;\n\n  /**\n   * boolean flag which determines if shape is drawn in callout\n   */\n  toDrawShape?: boolean;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   */\n  enableReflow?: boolean;\n}\n\n/**\n * Cartesian Chart styles\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartStyles {\n  /**\n   *  Style for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Style for the element containing the x-axis.\n   */\n  xAxis?: IStyle;\n\n  /**\n   * Style for the element containing the y-axis.\n   */\n  yAxis?: IStyle;\n\n  /**\n   * Style for legend container\n   */\n  legendContainer?: IStyle;\n\n  /**\n   * line hover box css\n   */\n  hover?: IStyle;\n\n  /**\n   * styles for callout root-content\n   */\n  calloutContentRoot?: IStyle;\n\n  /**\n   * styles for callout x-content\n   */\n  calloutContentX?: IStyle;\n\n  /**\n   * styles for callout y-content\n   */\n  calloutContentY?: IStyle;\n\n  /**\n   * styles for description message\n   */\n  descriptionMessage?: IStyle;\n\n  /**\n   * styles for callout Date time container\n   */\n  calloutDateTimeContainer?: IStyle;\n\n  /**\n   * styles for callout info container\n   */\n  calloutInfoContainer?: IStyle;\n\n  /**\n   * styles for callout block container\n   */\n  calloutBlockContainer?: IStyle;\n\n  /**\n   * styles for callout legend text\n   */\n  calloutlegendText?: IStyle;\n\n  /**\n   * styles for tooltip\n   */\n  tooltip?: IStyle;\n\n  /**\n   * styles for tooltip\n   */\n  axisTitle?: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle?: IStyle;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover?: IStyle;\n\n  /**\n   * styles for the shape object in the callout\n   */\n  shapeStyles?: IStyle;\n\n  /**\n   * Styles for the chart wrapper div\n   */\n  chartWrapper?: IStyle;\n}\n\n/**\n * Cartesian Chart properties\n * {@docCategory CartesianChart}\n */\nexport interface ICartesianChartProps {\n  /**\n   * Below height used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  height?: number;\n\n  /**\n   * Below width used for resizing of the chart\n   * Wrap chart in your container and send the updated height and width to these props.\n   * These values decide wheather chart re render or not. Please check examples for reference\n   */\n  width?: number;\n\n  /**\n   * this prop takes its parent as a HTML element to define the width and height of the chart\n   */\n  parentRef?: HTMLElement | null;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * Margins for the chart\n   * @default `{ top: 20, bottom: 35, left: 40, right: 20 }`\n   * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values\n   */\n  margins?: IMargins;\n\n  /** decides wether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * this prop takes values that you want the chart to render on x-axis\n   * This is a optional parameter if not specified D3 will decide which values appear on the x-axis for you\n   * Please look at https://github.com/d3/d3-scale for more information on how D3 decides what data to appear on the axis of chart\n   */\n  tickValues?: number[] | Date[] | string[];\n\n  /**\n   * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'\n   * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis\n   * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.\n   */\n  tickFormat?: string;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * x Axis labels tick padding. This defines the gap between tick labels and tick lines.\n   * @default 10\n   */\n  xAxisTickPadding?: number;\n\n  /**\n   * the format in for the data on y-axis. For data object this can be specified to your requirement.\n   *  Eg: d3.format(\".0%\")(0.123),d3.format(\"+20\")(42);\n   * Please look at https://github.com/d3/d3-format for all the formats supported\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yAxisTickFormat?: any;\n\n  /**\n   * Secondary y-scale options\n   * By default this is not defined, meaning there will be no secondary y-scale.\n   */\n  secondaryYScaleOptions?: {\n    /** Minimum value (0 by default) */\n    yMinValue?: number;\n    /** Maximum value (100 by default) */\n    yMaxValue?: number;\n  };\n\n  /**\n   * minimum  data value point in y-axis\n   */\n  yMinValue?: number;\n\n  /**\n   * maximum data value point in y-axis\n   */\n  yMaxValue?: number;\n\n  /**\n   * maximum data value point in x-axis\n   */\n  xMaxValue?: number;\n\n  /**\n   * Number of ticks on the y-axis.\n   * Tick count should be factor of difference between (yMinValue, yMaxValue)?\n   * @default 4\n   */\n  yAxisTickCount?: number;\n\n  /**\n   * defines the number of ticks on the x-axis. Tries to match the nearest interval satisfying the count.\n   * Does not work for string axis.\n   * @default 6\n   */\n  xAxisTickCount?: number;\n\n  /**\n   * define the size of the tick lines on the x-axis\n   * @default 10\n   */\n  xAxistickSize?: number;\n\n  /**\n   * defines the space between the tick line and the data label\n   * @default 10\n   */\n  tickPadding?: number;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * Label to apply to the whole chart.\n   * @deprecated - Use your chart label for the chart.\n   */\n  chartLabel?: string;\n\n  /**\n   * overflow props for the legends\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n   */\n  enabledLegendsWrapLines?: boolean;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   *@default false\n   *Used for to elipse x axis labes and show tooltip on x axis labels\n   */\n  showXAxisLablesTooltip?: boolean;\n\n  /**\n   * @default 4\n   * Used for X axis labels\n   * While Giving showXAxisLablesTooltip prop, need to define after how many chars, we need to truncate the word.\n   */\n  noOfCharsToTruncate?: number;\n\n  /**\n   * @default false\n   * Used to wrap x axis labels values (whole value)\n   */\n  wrapXAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to rotate x axis labels by 45 degrees\n   */\n  rotateXAxisLables?: boolean;\n\n  /**\n   * The prop used to define the date time localization options\n   */\n  dateLocalizeOptions?: Intl.DateTimeFormatOptions;\n\n  /**\n   * The prop used to define a custom locale for the date time format.\n   */\n  timeFormatLocale?: TimeLocaleDefinition;\n\n  /**\n   * The prop used to define a custom datetime formatter for date axis.\n   */\n  customDateTimeFormatter?: (dateTime: Date) => string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;\n\n  /**\n   * Callout customization props\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * props for the svg; use this to include aria-* or other attributes on the tag\n   */\n  svgProps?: React.SVGProps<SVGSVGElement>;\n\n  /**\n   * Prop to disable shrinking of the chart beyond a certain limit and enable scrolling when the chart overflows\n   * @default True for LineChart but False for other charts\n   */\n  enableReflow?: boolean;\n\n  /**\n   * Prop to set the x axis title\n   * @default undefined\n   * Minimum bottom margin required for x axis title is 55px\n   */\n\n  xAxisTitle?: string;\n\n  /**\n   * Prop to set the y axis title\n   * @default undefined\n   * Minimum left margin required for y axis title is 60px and for RTL is 40px\n   * Minimum right margin required for y axis title is 40px and for RTL is 60px\n   */\n  yAxisTitle?: string;\n\n  /**\n   * Prop to set the secondary y axis title\n   * @default undefined\n   * If RTL is enabled, minimum left and right margins required for secondary y axis title is 60px\n   */\n  secondaryYAxistitle?: string;\n\n  /**\n   * Whether to use UTC time for axis scale, ticks, and the time display in callouts.\n   * When set to `true`, time is displayed equally, regardless of the user's timezone settings.\n   * @default true\n   */\n  useUTC?: boolean;\n\n  /**\n   * @default false\n   * Used for enabling negative values in Y axis.\n   */\n  supportNegativeData?: boolean;\n\n  /**\n   * @default false\n   * The prop used to decide rounded ticks on y axis\n   */\n  roundedTicks?: boolean;\n\n  /**\n   * Optional callback to access the IChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IChart>;\n\n  /**\n   * Determines whether overlapping x-axis tick labels should be hidden.\n   * @default false\n   */\n  hideTickOverlap?: boolean;\n}\n\nexport interface IYValueHover {\n  legend?: string;\n  y?: number;\n  color?: string;\n  data?: string | number;\n  shouldDrawBorderBottom?: boolean;\n  yAxisCalloutData?: string | { [id: string]: number };\n  index?: number;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IChildProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  xScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScale?: any;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  yScaleSecondary?: any;\n  containerHeight?: number;\n  containerWidth?: number;\n}\n\n// Only used for Cartesian chart base\nexport interface IModifiedCartesianChartProps extends ICartesianChartProps {\n  /**\n   * Define the chart title\n   */\n  chartTitle?: string;\n\n  /**\n   * Only used for Area chart\n   * Value used to draw y axis of that chart.\n   */\n  maxOfYVal?: number;\n\n  /**\n   * Data of the chart\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  points: any;\n\n  /**\n   * Define type of the chart\n   */\n  chartType: ChartTypes;\n\n  /** X axis type */\n  xAxisType: XAxisTypes;\n\n  /** Y axis type */\n  yAxisType?: YAxisType;\n\n  /**\n   * Legends of the chart.\n   */\n  legendBars: JSX.Element | null;\n\n  /**\n   * Callout props\n   */\n  calloutProps: Partial<ICalloutProps> & {\n    isCalloutVisible: boolean;\n    id: string;\n    YValueHover?: IYValueHover[];\n    hoverXValue?: string | number | null;\n    legend?: string;\n    color?: string;\n    YValue?: string | number;\n    XValue?: string;\n    descriptionMessage?: string;\n  };\n\n  /**\n   * Callback method used for to get margins to the chart.\n   */\n  getmargins?: (margins: IMargins) => void;\n\n  /**\n   * This is a call back method to the chart from cartesian chart.\n   * params are xScale, yScale, containerHeight, containerWidth. These values were used to draw the graph.\n   * It also contians an optional param xAxisElement - defines as x axis scale element.\n   * This param used to enable feature word wrap of Xaxis.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getGraphData?: any;\n\n  /**\n   * Used for bar chart graphs.\n   * To define width of the bar\n   */\n  barwidth?: number;\n\n  /**\n   * Used for tick styles of the x axis of the chart\n   * Tick params are applicable for date axis only.\n   */\n  tickParams?: {\n    tickValues?: number[] | Date[] | string[];\n    tickFormat?: string;\n  };\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  yAxisPadding?: number;\n\n  /**\n   * Children elements specific to derived chart types.\n   */\n  children(props: IChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for individualbar or complete stack. Using for only Vertical stacked bar chart.\n   * @default false\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n\n  /** dataset values to find out domain of the String axis\n   * Present using for only vertical stacked bar chart and grouped vertical bar chart\n   */\n  datasetForXAxisDomain?: string[];\n\n  /** Own callout design */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  customizedCallout?: any;\n\n  /**\n   * if the data points for the y-axis is of type string, then we need to give this\n   * prop to construct the y-axis\n   */\n  stringDatasetForYAxisDomain?: string[];\n\n  /**\n   * Focus zone direction to the chart\n   * @default FocusZoneDirection.horizontal\n   */\n  focusZoneDirection?: FocusZoneDirection;\n\n  /**\n   * props to send into the chart hover card\n   */\n  chartHoverProps?: IChartHoverCardProps;\n\n  /**\n   * props to send to the focuszone\n   */\n  svgFocusZoneProps?: IFocusZoneProps;\n\n  /**\n   * The prop used to define the culture to localize the numbers and date\n   */\n  culture?: string;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  getAxisData?: any;\n\n  /**\n   * Callback method used when mouse leaves the chart boundary.\n   */\n  onChartMouseLeave?: () => void;\n\n  /** Callback method to get extra margins for domain */\n  getDomainMargins?: (containerWidth: number) => IMargins;\n\n  /** Padding between each bar/line-point */\n  xAxisInnerPadding?: number;\n\n  /** Padding before first bar/line-point and after last bar/line-point */\n  xAxisOuterPadding?: number;\n\n  /**\n   *@default false\n   *Used for to elipse y axis labes and show tooltip on x axis labels\n   */\n  showYAxisLablesTooltip?: boolean;\n\n  /**\n   *@default false\n   *Used for showing complete y axis lables   */\n  showYAxisLables?: boolean;\n\n  /**\n   * @default false\n   * Used to control the first render cycle Performance optimization code.\n   */\n  enableFirstRenderOptimization?: boolean;\n\n  /**\n   * Get the min and max values of the y-axis\n   */\n  getMinMaxOfYAxis: (\n    points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[],\n    yAxisType: YAxisType | undefined,\n  ) => { startValue: number; endValue: number };\n\n  /**\n   * Create the y-axis\n   */\n  createYAxis: (\n    yAxisParams: IYAxisParams,\n    isRtl: boolean,\n    axisData: IAxisData,\n    isIntegralDataset: boolean,\n    useSecondaryYScale?: boolean,\n    supportNegativeData?: boolean,\n    roundedTicks?: boolean,\n  ) => ScaleLinear<number, number, never>;\n\n  /**\n   * Get the domain and range values\n   */\n  getDomainNRangeValues: (\n    points:\n      | ILineChartPoints[]\n      | IVerticalBarChartDataPoint[]\n      | IVerticalStackedBarDataPoint[]\n      | IHorizontalBarChartWithAxisDataPoint[]\n      | IGroupedVerticalBarChartData[]\n      | IHeatMapChartDataPoint[],\n    margins: IMargins,\n    width: number,\n    chartType: ChartTypes,\n    isRTL: boolean,\n    xAxisType: XAxisTypes,\n    barWidth: number,\n    tickValues: Date[] | number[] | string[] | undefined,\n    shiftX: number,\n  ) => IDomainNRange;\n\n  /**\n   * Create the string y-axis\n   */\n  createStringYAxis: (\n    yAxisParams: IYAxisParams,\n    dataPoints: string[],\n    isRtl: boolean,\n    barWidth: number | undefined,\n  ) => ScaleBand<string>;\n\n  /**\n   * Callback to access the public methods and properties of the component.\n   */\n  ref?: IRefObject<IChart>;\n}\n"]}

package/lib/components/CommonComponents/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CartesianChart';
+export * from './CartesianChart.types';

package/lib/components/CommonComponents/index.js

@@ -0,0 +1,3 @@
+export * from './CartesianChart';
+export * from './CartesianChart.types';
+//# sourceMappingURL=index.js.map

package/lib/components/CommonComponents/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CommonComponents/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './CartesianChart';\nexport * from './CartesianChart.types';\n"]}

package/lib/components/DeclarativeChart/DeclarativeChart.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { IRefObject } from '@fluentui/react/lib/Utilities';
+import { IImageExportOptions } from '../../types/index';
+/**
+ * DeclarativeChart schema.
+ * {@docCategory DeclarativeChart}
+ */
+export interface Schema {
+    /**
+     * Plotly schema represented as JSON object
+     */
+    plotlySchema: any;
+}
+/**
+ * DeclarativeChart props.
+ * {@docCategory DeclarativeChart}
+ */
+export interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {
+    /**
+     * The schema representing the chart data, layout and configuration
+     */
+    chartSchema: Schema;
+    /**
+     * Callback when an event occurs
+     */
+    onSchemaChange?: (eventData: Schema) => void;
+    /**
+     * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IDeclarativeChart>;
+}
+/**
+ * {@docCategory DeclarativeChart}
+ */
+export interface IDeclarativeChart {
+    exportAsImage: (opts?: IImageExportOptions) => Promise<string>;
+}
+/**
+ * DeclarativeChart component.
+ * {@docCategory DeclarativeChart}
+ */
+export declare const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps>;