@fluentui/react-charting 5.23.63 → 5.23.64

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.styles.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMultiStackedBarChartStyles = void 0;
+var tslib_1 = require("tslib");
+var MultiStackedBarChart_types_1 = require("./MultiStackedBarChart.types");
+var Styling_1 = require("@fluentui/react/lib/Styling");
+var getMultiStackedBarChartStyles = function (props) {
+    var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href, variant = props.variant, hideLabels = props.hideLabels;
+    return {
+        root: [
+            theme.fonts.medium,
+            'ms-StackedBarChart',
+            {
+                display: 'flex',
+                flexDirection: 'column',
+                width: width ? width : '100%',
+            },
+            className,
+        ],
+        items: {
+            marginBottom: '11px',
+        },
+        chart: {
+            width: '100%',
+            height: barHeight ? barHeight : 12,
+            display: 'block',
+            overflow: 'visible',
+        },
+        chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
+        chartTitleLeft: {
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            display: 'block',
+            color: theme.palette.neutralPrimary,
+            marginBottom: variant === MultiStackedBarChart_types_1.MultiStackedBarChartVariant.AbsoluteScale ? '4px' : '5px',
+        },
+        singleChartRoot: {
+            width: width ? width : '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            marginBottom: variant === MultiStackedBarChart_types_1.MultiStackedBarChartVariant.AbsoluteScale ? '16px' : '10px',
+        },
+        opacityChangeOnHover: {
+            opacity: shouldHighlight ? '' : '0.1',
+            cursor: href ? 'pointer' : 'default',
+            selectors: {
+                '&:focus': {
+                    stroke: theme.palette.black,
+                    strokeWidth: '2px',
+                },
+            },
+        },
+        ratioNumerator: {
+            fontSize: Styling_1.FontSizes.medium,
+            fontWeight: Styling_1.FontWeights.semibold,
+            color: theme.palette.neutralPrimary,
+        },
+        ratioDenominator: {
+            fontSize: Styling_1.FontSizes.medium,
+            color: theme.palette.neutralPrimary,
+        },
+        placeHolderOnHover: {
+            opacity: shouldHighlight ? '' : '0.1',
+            cursor: 'default',
+            selectors: {
+                '&:focus': {
+                    stroke: theme.palette.black,
+                    strokeWidth: '2px',
+                },
+            },
+        },
+        legendContainer: {
+            margin: '5px 0px 0px 4px',
+        },
+        noData: {
+            cursor: href ? 'pointer' : 'default',
+        },
+        barLabel: {
+            fontSize: Styling_1.FontSizes.small,
+            fontWeight: Styling_1.FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
+        },
+        chartWrapper: {
+            paddingRight: variant === MultiStackedBarChart_types_1.MultiStackedBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,
+        },
+    };
+};
+exports.getMultiStackedBarChartStyles = getMultiStackedBarChartStyles;
+//# sourceMappingURL=MultiStackedBarChart.styles.js.map

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  IMultiStackedBarChartStyleProps,\n  IMultiStackedBarChartStyles,\n  MultiStackedBarChartVariant,\n} from './MultiStackedBarChart.types';\nimport { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\n\nexport const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleProps): IMultiStackedBarChartStyles => {\n  const { className, width, barHeight, shouldHighlight, theme, href, variant, hideLabels } = props;\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-StackedBarChart',\n      {\n        display: 'flex',\n        flexDirection: 'column',\n        width: width ? width : '100%',\n      },\n      className,\n    ],\n    items: {\n      marginBottom: '11px',\n    },\n    chart: {\n      width: '100%',\n      height: barHeight ? barHeight : 12,\n      display: 'block',\n      overflow: 'visible',\n    },\n    chartTitle: {\n      ...theme.fonts.small,\n      display: 'flex',\n      justifyContent: 'space-between',\n    },\n    chartTitleLeft: {\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      display: 'block',\n      color: theme.palette.neutralPrimary,\n      marginBottom: variant === MultiStackedBarChartVariant.AbsoluteScale ? '4px' : '5px',\n    },\n    singleChartRoot: {\n      width: width ? width : '100%',\n      display: 'flex',\n      flexDirection: 'column',\n      marginBottom: variant === MultiStackedBarChartVariant.AbsoluteScale ? '16px' : '10px',\n    },\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n      cursor: href ? 'pointer' : 'default',\n      selectors: {\n        '&:focus': {\n          stroke: theme.palette.black,\n          strokeWidth: '2px',\n        },\n      },\n    },\n    ratioNumerator: {\n      fontSize: FontSizes.medium,\n      fontWeight: FontWeights.semibold,\n      color: theme.palette.neutralPrimary,\n    },\n    ratioDenominator: {\n      fontSize: FontSizes.medium,\n      color: theme.palette.neutralPrimary,\n    },\n    placeHolderOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n      cursor: 'default',\n      selectors: {\n        '&:focus': {\n          stroke: theme.palette.black,\n          strokeWidth: '2px',\n        },\n      },\n    },\n    legendContainer: {\n      margin: '5px 0px 0px 4px',\n    },\n    noData: {\n      cursor: href ? 'pointer' : 'default',\n    },\n    barLabel: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n    },\n    chartWrapper: {\n      paddingRight: variant === MultiStackedBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,\n    },\n  };\n};\n"]}

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.types.d.ts

@@ -0,0 +1,223 @@
+import { IChartProps, IChartDataPoint } from './index';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
+import { IFocusZoneProps } from '@fluentui/react-focus';
+import { ILegendsProps } from '../Legends/index';
+/**
+ * Multi Stacked Bar Chart properties
+ * {@docCategory MultiStackedBarChart}
+ */
+export interface IMultiStackedBarChartProps {
+    /**
+     * An array of chart data points for the multistacked bar chart
+     */
+    data?: IChartProps[];
+    /**
+     * Width of bar chart
+     */
+    width?: number;
+    /**
+     * Height of bar chart
+     * @default 15
+     */
+    barHeight?: number;
+    /**
+     * Additional CSS class(es) to apply to the StackedBarChart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * This property tells whether to show ratio on top of stacked bar chart or not.
+     * This property is applicable only if there are 1 or 2 datapoints.
+     */
+    hideRatio?: boolean[];
+    /**
+     * Do not show the legend at the bottom of chart
+     *
+     * @default false
+     */
+    hideLegend?: boolean;
+    /**
+     * Do not show tooltips in chart
+     *
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>;
+    /**
+     * Url that the data-viz needs to redirect to upon clicking on it
+     */
+    href?: string;
+    /**
+     * If this value is set to true the denominator will not be shown for the ratio above the chart
+     * This prop is applicable only if hide ratio is false and there are exactly 2 datapoints.
+     */
+    hideDenominator?: boolean[];
+    /**
+     * overflow props for legend
+     */
+    legendsOverflowProps?: Partial<IOverflowSetProps>;
+    /**
+     * text for overflow legends string
+     */
+    legendsOverflowText?: string;
+    /**
+     * focus zone props in hover card for legends
+     */
+    focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;
+    /**
+     * props for the legends in the chart
+     */
+    legendProps?: Partial<ILegendsProps>;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;
+    /**
+     * props for the callout in the chart
+     */
+    calloutProps?: Partial<ICalloutProps>;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * Prop to define the variant of MultiStackedBarChart to render
+     * @default MultiStackedBarChartVariant.PartToWhole
+     */
+    variant?: MultiStackedBarChartVariant;
+    /**
+     * Prop to hide the bar labels
+     * @default false
+     */
+    hideLabels?: boolean;
+    /**
+     * @default false
+     * The prop used to enable gradient fill color for the chart.
+     */
+    enableGradient?: boolean;
+    /**
+     * @default false
+     * The prop used to enable rounded corners for the chart.
+     */
+    roundCorners?: boolean;
+}
+/**
+ * Multi Stacked Bar Chart style properties
+ * {@docCategory MultiStackedBarChart}
+ */
+export interface IMultiStackedBarChartStyleProps {
+    /**
+     * Theme (provided through customization.)
+     */
+    theme: ITheme;
+    /**
+     * Additional CSS class(es) to apply to the StackedBarChart.
+     */
+    className?: string;
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * barHeight for each chart
+     */
+    barHeight?: number;
+    /**
+     * color of the datapoint legend
+     */
+    legendColor?: string;
+    /**
+     * prop to check if the chart is selcted or hovered upon to determine opacity
+     */
+    shouldHighlight?: boolean;
+    /**
+     * prop to check to decide cursor type
+     */
+    href?: string;
+    /**
+     * Prop to define the variant of MultiStackedBarChart to render
+     */
+    variant?: MultiStackedBarChartVariant;
+    /**
+     * Prop to hide the bar labels
+     */
+    hideLabels?: boolean;
+}
+/**
+ * Multi Stacked Bar Chart styles
+ * {@docCategory MultiStackedBarChart}
+ */
+export interface IMultiStackedBarChartStyles {
+    /**
+     * Styling for the root container
+     */
+    root: IStyle;
+    /**
+     * Styling for the root container of each chart in the multistacked bar chart
+     */
+    singleChartRoot: IStyle;
+    /**
+     * Styling for each item in the container
+     */
+    items: IStyle;
+    /**
+     * Styling for each svg in the multistacked bar chart
+     */
+    chart: IStyle;
+    /**
+     * Styling for chart title of the stacked bar chart
+     */
+    chartTitle: IStyle;
+    /**
+     * Style for left side text of the chart title
+     */
+    chartTitleLeft: IStyle;
+    /**
+     * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
+     */
+    opacityChangeOnHover: IStyle;
+    /**
+     * Style for the chart ratio numerator
+     */
+    ratioNumerator: IStyle;
+    /**
+     * Style for the chart ratio denominator
+     */
+    ratioDenominator: IStyle;
+    /**
+     * Style to change the opacity of placeholder data point when we hover a single bar or legend
+     */
+    placeHolderOnHover: IStyle;
+    /**
+     * Style for the legends container
+     */
+    legendContainer: IStyle;
+    /**
+     * Style for stacked bar chart with no data
+     */
+    noData: IStyle;
+    /**
+     * Style for the bar labels
+     */
+    barLabel: IStyle;
+    /**
+     * Style for the div containing the chart
+     */
+    chartWrapper: IStyle;
+}
+/**
+ * {@docCategory MultiStackedBarChart}
+ */
+export declare enum MultiStackedBarChartVariant {
+    PartToWhole = "part-to-whole",
+    AbsoluteScale = "absolute-scale"
+}

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.types.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiStackedBarChartVariant = void 0;
+/**
+ * {@docCategory MultiStackedBarChart}
+ */
+var MultiStackedBarChartVariant;
+(function (MultiStackedBarChartVariant) {
+    MultiStackedBarChartVariant["PartToWhole"] = "part-to-whole";
+    MultiStackedBarChartVariant["AbsoluteScale"] = "absolute-scale";
+})(MultiStackedBarChartVariant || (exports.MultiStackedBarChartVariant = MultiStackedBarChartVariant = {}));
+//# sourceMappingURL=MultiStackedBarChart.types.js.map

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStackedBarChart.types.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.types.ts"],"names":[],"mappings":";;;AAsQA;;GAEG;AACH,IAAY,2BAGX;AAHD,WAAY,2BAA2B;IACrC,4DAA6B,CAAA;IAC7B,+DAAgC,CAAA;AAClC,CAAC,EAHW,2BAA2B,2CAA3B,2BAA2B,QAGtC","sourcesContent":["import { IChartProps, IChartDataPoint } from './index';\nimport { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { ILegendsProps } from '../Legends/index';\n\n/**\n * Multi Stacked Bar Chart properties\n * {@docCategory MultiStackedBarChart}\n */\nexport interface IMultiStackedBarChartProps {\n  /**\n   * An array of chart data points for the multistacked bar chart\n   */\n  data?: IChartProps[];\n\n  /**\n   * Width of bar chart\n   */\n  width?: number;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * This property tells whether to show ratio on top of stacked bar chart or not.\n   * This property is applicable only if there are 1 or 2 datapoints.\n   */\n  hideRatio?: boolean[];\n\n  /**\n   * Do not show the legend at the bottom of chart\n   *\n   * @default false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * If this value is set to true the denominator will not be shown for the ratio above the chart\n   * This prop is applicable only if hide ratio is false and there are exactly 2 datapoints.\n   */\n  hideDenominator?: boolean[];\n\n  /**\n   * overflow props for legend\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  /**\n   * text for overflow legends string\n   */\n  legendsOverflowText?: string;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to define the variant of MultiStackedBarChart to render\n   * @default MultiStackedBarChartVariant.PartToWhole\n   */\n  variant?: MultiStackedBarChartVariant;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n\n  /**\n   * @default false\n   * The prop used to enable gradient fill color for the chart.\n   */\n  enableGradient?: boolean;\n\n  /**\n   * @default false\n   * The prop used to enable rounded corners for the chart.\n   */\n  roundCorners?: boolean;\n}\n\n/**\n * Multi Stacked Bar Chart style properties\n * {@docCategory MultiStackedBarChart}\n */\nexport interface IMultiStackedBarChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * barHeight for each chart\n   */\n  barHeight?: number;\n\n  /**\n   * color of the datapoint legend\n   */\n  legendColor?: 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 to decide cursor type\n   */\n  href?: string;\n\n  /**\n   * Prop to define the variant of MultiStackedBarChart to render\n   */\n  variant?: MultiStackedBarChartVariant;\n\n  /**\n   * Prop to hide the bar labels\n   */\n  hideLabels?: boolean;\n}\n\n/**\n * Multi Stacked Bar Chart styles\n * {@docCategory MultiStackedBarChart}\n */\nexport interface IMultiStackedBarChartStyles {\n  /**\n   * Styling for the root container\n   */\n  root: IStyle;\n\n  /**\n   * Styling for the root container of each chart in the multistacked bar chart\n   */\n  singleChartRoot: IStyle;\n\n  /**\n   * Styling for each item in the container\n   */\n  items: IStyle;\n\n  /**\n   * Styling for each svg in the multistacked bar chart\n   */\n  chart: IStyle;\n\n  /**\n   * Styling for chart title of the stacked bar chart\n   */\n  chartTitle: IStyle;\n\n  /**\n   * Style for left side text of the chart title\n   */\n  chartTitleLeft: 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   * Style for the chart ratio numerator\n   */\n  ratioNumerator: IStyle;\n\n  /**\n   * Style for the chart ratio denominator\n   */\n  ratioDenominator: IStyle;\n\n  /**\n   * Style to change the opacity of placeholder data point when we hover a single bar or legend\n   */\n  placeHolderOnHover: IStyle;\n\n  /**\n   * Style for the legends container\n   */\n  legendContainer: IStyle;\n\n  /**\n   * Style for stacked bar chart with no data\n   */\n  noData: IStyle;\n\n  /**\n   * Style for the bar labels\n   */\n  barLabel: IStyle;\n\n  /**\n   * Style for the div containing the chart\n   */\n  chartWrapper: IStyle;\n}\n\n/**\n * {@docCategory MultiStackedBarChart}\n */\nexport enum MultiStackedBarChartVariant {\n  PartToWhole = 'part-to-whole',\n  AbsoluteScale = 'absolute-scale',\n}\n"]}

package/lib-commonjs/components/StackedBarChart/StackedBarChart.base.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { IAccessibilityProps, IChartDataPoint } from './index';
+import { IStackedBarChartProps } from '../../index';
+export interface IStackedBarChartState {
+    isCalloutVisible: boolean;
+    selectedLegend: string;
+    activeLegend: string;
+    refSelected: any;
+    dataForHoverCard: number;
+    color: string;
+    xCalloutValue?: string;
+    yCalloutValue?: string;
+    dataPointCalloutProps?: IChartDataPoint;
+    callOutAccessibilityData?: IAccessibilityProps;
+    calloutLegend: string;
+    barSpacingInPercent: number;
+}
+export declare class StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {
+    static defaultProps: Partial<IStackedBarChartProps>;
+    private _classNames;
+    private _calloutId;
+    private _refArray;
+    private _calloutAnchorPoint;
+    private _emptyChartId;
+    private barChartSvgRef;
+    private _isRTL;
+    constructor(props: IStackedBarChartProps);
+    componentDidMount(): void;
+    render(): JSX.Element;
+    private _adjustProps;
+    /**
+     * The Create bar functions returns an array of <rect> elements, which form the bars
+     * For each bar an x value, and a width needs to be specified
+     * The computations are done based on percentages
+     * Extra margin is also provided, in the x value to provide some spacing
+     */
+    private _createBarsAndLegends;
+    private _onBarFocus;
+    private _addLegend;
+    private _generateEmptyBar;
+    private _refCallback;
+    private _onClick;
+    private _onHover;
+    private _onLeave;
+    private _onBarHover;
+    private _onBarLeave;
+    private _handleChartMouseLeave;
+    private _redirectToUrl;
+    private _closeCallout;
+    /**
+     * This function checks if the given legend is highlighted or not.
+     * A legend can be highlighted in 2 ways:
+     * 1. selection: if the user clicks on it
+     * 2. hovering: if there is no selected legend and the user hovers over it
+     */
+    private _legendHighlighted;
+    /**
+     * This function checks if none of the legends is selected or hovered.
+     */
+    private _noLegendHighlighted;
+    private _getAriaLabel;
+    private _isChartEmpty;
+}