@fluentui/react-charting 5.12.25 → 5.12.28

package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var tslib_1 = require("tslib");
+var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
+var react_1 = require("@fluentui/react");
+var isIE11Var = react_1.isIE11();
+var getStyles = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var className = props.className, theme = props.theme, isRtl = props.isRtl, shouldHighlight = props.shouldHighlight, href = props.href, _j = props.lineColor, lineColor = _j === void 0 ? 'transparent' : _j, toDrawShape = props.toDrawShape;
+    var fonts = theme.fonts;
+    return {
+        root: [
+            theme.fonts.medium,
+            {
+                display: 'flex',
+                width: '100%',
+                height: '100%',
+                flexDirection: 'column',
+                overflow: 'hidden',
+            },
+            className,
+        ],
+        xAxis: {
+            selectors: {
+                text: [
+                    theme.fonts.tiny,
+                    {
+                        fill: theme.semanticColors.bodyText,
+                        fontWeight: '600',
+                        selectors: (_a = {},
+                            _a[Styling_1.HighContrastSelectorBlack] = {
+                                fill: 'rgb(179, 179, 179)',
+                            },
+                            _a),
+                    },
+                ],
+                line: {
+                    opacity: 0.2,
+                    stroke: theme.semanticColors.bodyText,
+                    width: '1px',
+                    selectors: (_b = {},
+                        _b[Styling_1.HighContrastSelectorBlack] = {
+                            opacity: 0.1,
+                            stroke: 'rgb(179, 179, 179)',
+                        },
+                        _b),
+                },
+                path: {
+                    display: 'none',
+                },
+            },
+        },
+        yAxis: {
+            selectors: {
+                text: [
+                    theme.fonts.tiny,
+                    {
+                        fill: theme.semanticColors.bodyText,
+                        fontWeight: '600',
+                        selectors: (_c = {},
+                            _c[Styling_1.HighContrastSelectorBlack] = {
+                                fill: 'rgb(179, 179, 179)',
+                            },
+                            _c),
+                    },
+                ],
+                path: {
+                    display: 'none',
+                },
+                line: {
+                    opacity: 0.2,
+                    stroke: theme.semanticColors.bodyText,
+                    selectors: (_d = {},
+                        _d[Styling_1.HighContrastSelectorBlack] = {
+                            opacity: 0.1,
+                            stroke: 'rgb(179, 179, 179)',
+                        },
+                        _d),
+                },
+                g: [
+                    isRtl &&
+                        !isIE11Var && {
+                        textAnchor: 'end',
+                    },
+                ],
+            },
+        },
+        opacityChangeOnHover: {
+            opacity: shouldHighlight ? '' : '0.1',
+            cursor: href ? 'pointer' : 'default',
+        },
+        legendContainer: [
+            {
+                marginTop: '8px',
+                marginLeft: '20px',
+            },
+        ],
+        calloutContentRoot: [
+            {
+                display: 'grid',
+                overflow: 'hidden',
+                padding: '11px 16px 10px 16px',
+                backgroundColor: theme.semanticColors.bodyBackground,
+                backgroundBlendMode: 'normal, luminosity',
+            },
+        ],
+        calloutDateTimeContainer: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+        },
+        calloutContentX: [
+            tslib_1.__assign(tslib_1.__assign({}, fonts.small), { lineHeight: '16px', opacity: '0.8', color: theme.semanticColors.bodySubtext }),
+        ],
+        calloutBlockContainer: [
+            theme.fonts.mediumPlus,
+            {
+                marginTop: '13px',
+                color: theme.semanticColors.bodyText,
+            },
+            !toDrawShape && {
+                selectors: (_e = {},
+                    _e[Styling_1.HighContrastSelector] = {
+                        forcedColorAdjust: 'none',
+                    },
+                    _e),
+                borderLeft: "4px solid " + lineColor,
+                paddingLeft: '8px',
+            },
+            toDrawShape && {
+                display: 'flex',
+            },
+        ],
+        shapeStyles: {
+            marginRight: '8px',
+        },
+        calloutlegendText: tslib_1.__assign(tslib_1.__assign({}, fonts.small), { lineHeight: '16px', selectors: (_f = {},
+                _f[Styling_1.HighContrastSelectorBlack] = {
+                    color: 'rgb(255, 255, 255)',
+                },
+                _f), color: theme.semanticColors.bodySubtext }),
+        calloutContentY: [
+            tslib_1.__assign(tslib_1.__assign({}, fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_g = {},
+                    _g[Styling_1.HighContrastSelectorBlack] = {
+                        color: 'rgb(255, 255, 255)',
+                    },
+                    _g) }),
+        ],
+        descriptionMessage: [
+            theme.fonts.small,
+            {
+                selectors: (_h = {},
+                    _h[Styling_1.HighContrastSelectorBlack] = {
+                        color: 'rgb(255, 255, 255)',
+                    },
+                    _h),
+                color: theme.semanticColors.bodyText,
+                marginTop: '10px',
+                paddingTop: '10px',
+                borderTop: "1px solid " + theme.semanticColors.menuDivider,
+            },
+        ],
+    };
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=CartesianChart.styles.js.map

package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianChart.styles.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ICartesianChartStyleProps, ICartesianChartStyles } from './CartesianChart.types';\nimport { HighContrastSelectorBlack, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { isIE11 } from '@fluentui/react';\n\nconst isIE11Var: boolean = isIE11();\n\nexport const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyles => {\n  const { className, theme, isRtl, shouldHighlight, href, lineColor = 'transparent', toDrawShape } = props;\n  const { fonts } = theme!;\n  return {\n    root: [\n      theme.fonts.medium,\n      {\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden',\n      },\n      className,\n    ],\n    xAxis: {\n      selectors: {\n        text: [\n          theme.fonts.tiny,\n          {\n            fill: theme.semanticColors.bodyText,\n            fontWeight: '600',\n            selectors: {\n              [HighContrastSelectorBlack]: {\n                fill: 'rgb(179, 179, 179)',\n              },\n            },\n          },\n        ],\n        line: {\n          opacity: 0.2,\n          stroke: theme.semanticColors.bodyText,\n          width: '1px',\n          selectors: {\n            [HighContrastSelectorBlack]: {\n              opacity: 0.1,\n              stroke: 'rgb(179, 179, 179)',\n            },\n          },\n        },\n        path: {\n          display: 'none',\n        },\n      },\n    },\n    yAxis: {\n      selectors: {\n        text: [\n          theme.fonts.tiny,\n          {\n            fill: theme.semanticColors.bodyText,\n            fontWeight: '600',\n            selectors: {\n              [HighContrastSelectorBlack]: {\n                fill: 'rgb(179, 179, 179)',\n              },\n            },\n          },\n        ],\n        path: {\n          display: 'none',\n        },\n        line: {\n          opacity: 0.2,\n          stroke: theme.semanticColors.bodyText,\n          selectors: {\n            [HighContrastSelectorBlack]: {\n              opacity: 0.1,\n              stroke: 'rgb(179, 179, 179)',\n            },\n          },\n        },\n        g: [\n          isRtl &&\n            !isIE11Var && {\n              textAnchor: 'end',\n            },\n        ],\n      },\n    },\n\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n      cursor: href ? 'pointer' : 'default',\n    },\n\n    legendContainer: [\n      {\n        marginTop: '8px',\n        marginLeft: '20px',\n      },\n    ],\n    calloutContentRoot: [\n      {\n        display: 'grid',\n        overflow: 'hidden',\n        padding: '11px 16px 10px 16px',\n        backgroundColor: theme.semanticColors.bodyBackground,\n        backgroundBlendMode: 'normal, luminosity',\n      },\n    ],\n    calloutDateTimeContainer: {\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n    },\n    calloutContentX: [\n      {\n        ...fonts.small,\n        lineHeight: '16px',\n        opacity: '0.8',\n        color: theme.semanticColors.bodySubtext,\n      },\n    ],\n    calloutBlockContainer: [\n      theme.fonts.mediumPlus,\n      {\n        marginTop: '13px',\n        color: theme.semanticColors.bodyText,\n      },\n      !toDrawShape && {\n        selectors: {\n          [HighContrastSelector]: {\n            forcedColorAdjust: 'none',\n          },\n        },\n        borderLeft: `4px solid ${lineColor}`,\n        paddingLeft: '8px',\n      },\n      toDrawShape && {\n        display: 'flex',\n      },\n    ],\n    shapeStyles: {\n      marginRight: '8px',\n    },\n    calloutlegendText: {\n      ...fonts.small,\n      lineHeight: '16px',\n      selectors: {\n        [HighContrastSelectorBlack]: {\n          color: 'rgb(255, 255, 255)',\n        },\n      },\n      color: theme.semanticColors.bodySubtext,\n    },\n    calloutContentY: [\n      {\n        ...fonts.mediumPlus,\n        fontWeight: 'bold',\n        lineHeight: '22px',\n        selectors: {\n          [HighContrastSelectorBlack]: {\n            color: 'rgb(255, 255, 255)',\n          },\n        },\n      },\n    ],\n    descriptionMessage: [\n      theme.fonts.small,\n      {\n        selectors: {\n          [HighContrastSelectorBlack]: {\n            color: 'rgb(255, 255, 255)',\n          },\n        },\n        color: theme.semanticColors.bodyText,\n        marginTop: '10px',\n        paddingTop: '10px',\n        borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n      },\n    ],\n  };\n};\n"]}

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

@@ -0,0 +1,400 @@
+import * as React from 'react';
+import { 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, IMargins } from '../../types/index';
+import { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';
+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 selcted 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;
+}
+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 Date time container
+     */
+    calloutInfoContainer?: IStyle;
+    /**
+     * styles for callout Date time container
+     */
+    calloutBlockContainer?: IStyle;
+    /**
+     * styles for callout y-content
+     */
+    calloutlegendText?: IStyle;
+    tooltip?: 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 set for the shape object in the callout
+     */
+    shapeStyles?: IStyle;
+}
+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[];
+    /**
+     * the format in for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'
+     * Please look at https://www.npmjs.com/package/d3-time-format for all the formats supported
+     */
+    tickFormat?: string;
+    /**
+     * Width of line stroke
+     */
+    strokeWidth?: number;
+    /**
+     * x Axis labels tick padding
+     * @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;
+    /**
+     * minimum  data value point in y-axis
+     */
+    yMinValue?: number;
+    /**
+     * maximum data value point in y-axis
+     */
+    yMaxValue?: 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
+     * @default 6
+     */
+    xAxisTickCount?: number;
+    /**
+     * define the size of the tick on the x-axis
+     * @default 10
+     */
+    xAxistickSize?: number;
+    /**
+     * define the space between the tick and the data point
+     * @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 display x axis labels values (whole value)
+     */
+    wrapXAxisLables?: boolean;
+    /**
+     * @default false
+     * Used to rotate x axis labels by 45 degrees
+     */
+    rotateXAxisLables?: boolean;
+    /**
+     * 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>;
+}
+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;
+    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;
+    /**
+     * Legeds of the chart.
+     */
+    legendBars: JSX.Element;
+    /**
+     * 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
+     */
+    tickParams?: {
+        tickValues?: number[] | Date[];
+        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(props: IChildProps): React.ReactNode;
+    /**
+     * To enable callout for bar. 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 localized the numbers
+     */
+    culture?: string;
+    getAxisData?: any;
+    /**
+     * Callback method used when mouse leaves the chart boundary.
+     */
+    onChartMouseLeave?: () => void;
+}

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=CartesianChart.types.js.map

package/lib-commonjs/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 { 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 { IAccessibilityProps, IMargins } from '../../types/index';\nimport { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index';\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 selcted 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\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 Date time container\n   */\n  calloutInfoContainer?: IStyle;\n\n  /**\n   * styles for callout Date time container\n   */\n  calloutBlockContainer?: IStyle;\n\n  /**\n   * styles for callout y-content\n   */\n  calloutlegendText?: IStyle;\n\n  tooltip?: 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 set for the shape object in the callout\n   */\n  shapeStyles?: IStyle;\n}\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[];\n\n  /**\n   * the format in 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://www.npmjs.com/package/d3-time-format for all the formats supported\n   */\n  tickFormat?: string;\n\n  /**\n   * Width of line stroke\n   */\n  strokeWidth?: number;\n\n  /**\n   * x Axis labels tick padding\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   * 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   * 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\n   * @default 6\n   */\n  xAxisTickCount?: number;\n\n  /**\n   * define the size of the tick on the x-axis\n   * @default 10\n   */\n  xAxistickSize?: number;\n\n  /**\n   * define the space between the tick and the data point\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 display 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; // check for RTL\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\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  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   * Legeds of the chart.\n   */\n  legendBars: JSX.Element;\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   */\n  tickParams?: {\n    tickValues?: number[] | Date[];\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  children(props: IChildProps): React.ReactNode;\n\n  /**\n   * To enable callout for bar. 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 localized the numbers\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"]}

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

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

package/lib-commonjs/components/CommonComponents/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CartesianChart"), exports);
+tslib_1.__exportStar(require("./CartesianChart.types"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/lib-commonjs/components/DonutChart/Arc/Arc.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IArcProps } from './index';
+export interface IArcState {
+    isCalloutVisible?: boolean;
+}
+export declare class Arc extends React.Component<IArcProps, IArcState> {
+    static defaultProps: Partial<IArcProps>;
+    state: {};
+    private currentRef;
+    static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> | null;
+    updateChart(newProps: IArcProps): void;
+    render(): JSX.Element;
+    componentDidUpdate(): void;
+    private _onFocus;
+    private _hoverOn;
+    private _hoverOff;
+    private _onBlur;
+    private _redirectToUrl;
+}