@fluentui/react-charting 5.12.25 → 5.12.26

package/lib-amd/components/VerticalBarChart/VerticalBarChart.styles.js

@@ -0,0 +1,27 @@
+define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var getStyles = function (props) {
+        var shouldHighlight = props.shouldHighlight, theme = props.theme;
+        return {
+            opacityChangeOnHover: {
+                opacity: shouldHighlight ? '' : '0.1',
+            },
+            xAxisTicks: [],
+            yAxisTicks: [
+                {
+                    transform: 'scaleX(-1)',
+                },
+            ],
+            yAxisDomain: [
+                {
+                    transform: 'scaleX(-1)',
+                },
+            ],
+            tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none' }),
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=VerticalBarChart.styles.js.map

package/lib-amd/components/VerticalBarChart/VerticalBarChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/VerticalBarChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAkC;QAClD,IAAA,eAAe,GAAY,KAAK,gBAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QACzC,OAAO;YACL,oBAAoB,EAAE;gBACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;aACtC;YAED,UAAU,EAAE,EAAE;YAEd,UAAU,EAAE;gBACV;oBACE,SAAS,EAAE,YAAY;iBACxB;aACF;YACD,WAAW,EAAE;gBACX;oBACE,SAAS,EAAE,YAAY;iBACxB;aACF;YAED,OAAO,wCACF,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,GACtB;SACF,CAAC;IACJ,CAAC,CAAC;IAjCW,QAAA,SAAS,aAiCpB","sourcesContent":["import { IVerticalBarChartStyleProps, IVerticalBarChartStyles } from '../../index';\n\nexport const getStyles = (props: IVerticalBarChartStyleProps): IVerticalBarChartStyles => {\n  const { shouldHighlight, theme } = props;\n  return {\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n    },\n\n    xAxisTicks: [],\n\n    yAxisTicks: [\n      {\n        transform: 'scaleX(-1)',\n      },\n    ],\n    yAxisDomain: [\n      {\n        transform: 'scaleX(-1)',\n      },\n    ],\n\n    tooltip: {\n      ...theme.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: theme.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n    },\n  };\n};\n"]}

package/lib-amd/components/VerticalBarChart/VerticalBarChart.types.d.ts

@@ -0,0 +1,105 @@
+import { IStyle } from '@fluentui/react/lib/Styling';
+import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { ICartesianChartProps, ICartesianChartStyleProps, ICartesianChartStyles, IVerticalBarChartDataPoint } from '../../index';
+import { ILineChartLineOptions } from '../../types/index';
+export interface IVerticalBarChartProps extends ICartesianChartProps {
+    /**
+     * Data to render in the chart.
+     */
+    data?: IVerticalBarChartDataPoint[];
+    /**
+     * Define a custom callout renderer for a data point.
+     */
+    onRenderCalloutPerDataPoint?: IRenderFunction<IVerticalBarChartDataPoint>;
+    /**
+     * Width of each bar in the chart.
+     */
+    barWidth?: number;
+    /**
+     * Colors from which to select the color of each bar.
+     */
+    colors?: string[];
+    /**
+     * chart title for the chart
+     */
+    chartTitle?: string;
+    /**
+     * Legend text for the line datapoint in the chart
+     */
+    lineLegendText?: string;
+    /**
+     * color for the legend  of the line in the chart
+     * @default theme.yellow
+     */
+    lineLegendColor?: string;
+    /**
+     * This prop makes sure that all the bars are of same color.
+     * it will take the first color from the array of colors in
+     * prop `colors` or if  `colors` prop is not given then default color is  palette.blueLight
+     * @default false
+     */
+    useSingleColor?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IVerticalBarChartStyleProps, IVerticalBarChartStyles>;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * it's padding between bar's or lines in the graph
+     */
+    xAxisPadding?: number;
+    /**
+     * options for the line drawn
+     */
+    lineOptions?: ILineChartLineOptions;
+}
+export interface IVerticalBarChartStyleProps extends ICartesianChartStyleProps {
+    /**
+     * color of the datapoint legend
+     */
+    legendColor?: string;
+}
+export interface IVerticalBarChartStyles extends ICartesianChartStyles {
+    /**
+     * Style for the chart label.
+     * @deprecated
+     */
+    chartLabel?: IStyle;
+    /**
+     * Style for the line representing the domain of the x-axis.
+     * @deprecated
+     */
+    xAxisDomain?: IStyle;
+    /**
+     * Style for the lines representing the ticks along the x-axis.
+     * @deprecated
+     */
+    xAxisTicks?: IStyle;
+    /**
+     * Style for the text labeling each tick along the x-axis.
+     * @deprecated
+     */
+    xAxisText?: IStyle;
+    /**
+     * Style for the line representing the domain of the y-axis.
+     * @deprecated
+     */
+    yAxisDomain?: IStyle;
+    /**
+     * Style for the lines representing the ticks along the y-axis.
+     * @deprecated
+     */
+    yAxisTicks?: IStyle;
+    /**
+     * Style for the text labeling each tick along the y-axis.
+     * @deprecated
+     */
+    yAxisText?: IStyle;
+    /**
+     * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
+     */
+    opacityChangeOnHover: IStyle;
+}

package/lib-amd/components/VerticalBarChart/VerticalBarChart.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=VerticalBarChart.types.js.map

package/lib-amd/components/VerticalBarChart/VerticalBarChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalBarChart.types.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/VerticalBarChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IVerticalBarChartDataPoint,\n} from '../../index';\nimport { ILineChartLineOptions } from '../../types/index';\n\nexport interface IVerticalBarChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data?: IVerticalBarChartDataPoint[];\n\n  /**\n   * Define a custom callout renderer for a data point.\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IVerticalBarChartDataPoint>;\n\n  /**\n   * Width of each bar in the chart.\n   */\n  barWidth?: number;\n\n  /**\n   * Colors from which to select the color of each bar.\n   */\n  colors?: string[];\n\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Legend text for the line datapoint in the chart\n   */\n  lineLegendText?: string;\n\n  /**\n   * color for the legend  of the line in the chart\n   * @default theme.yellow\n   */\n\n  lineLegendColor?: string;\n\n  /**\n   * This prop makes sure that all the bars are of same color.\n   * it will take the first color from the array of colors in\n   * prop `colors` or if  `colors` prop is not given then default color is  palette.blueLight\n   * @default false\n   */\n  useSingleColor?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IVerticalBarChartStyleProps, IVerticalBarChartStyles>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * it's padding between bar's or lines in the graph\n   */\n  xAxisPadding?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n}\n\nexport interface IVerticalBarChartStyleProps extends ICartesianChartStyleProps {\n  /**\n   * color of the datapoint legend\n   */\n  legendColor?: string;\n}\n\nexport interface IVerticalBarChartStyles extends ICartesianChartStyles {\n  /**\n   * Style for the chart label.\n   * @deprecated\n   */\n  chartLabel?: IStyle;\n\n  /**\n   * Style for the line representing the domain of the x-axis.\n   * @deprecated\n   */\n  xAxisDomain?: IStyle;\n\n  /**\n   * Style for the lines representing the ticks along the x-axis.\n   * @deprecated\n   */\n  xAxisTicks?: IStyle;\n\n  /**\n   * Style for the text labeling each tick along the x-axis.\n   * @deprecated\n   */\n  xAxisText?: IStyle;\n\n  /**\n   * Style for the line representing the domain of the y-axis.\n   * @deprecated\n   */\n  yAxisDomain?: IStyle;\n\n  /**\n   * Style for the lines representing the ticks along the y-axis.\n   * @deprecated\n   */\n  yAxisTicks?: IStyle;\n\n  /**\n   * Style for the text labeling each tick along the y-axis.\n   * @deprecated\n   */\n  yAxisText?: 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"]}

package/lib-amd/components/VerticalBarChart/index.d.ts

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

package/lib-amd/components/VerticalBarChart/index.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "tslib", "./VerticalBarChart", "./VerticalBarChart.types"], function (require, exports, tslib_1, VerticalBarChart_1, VerticalBarChart_types_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(VerticalBarChart_1, exports);
+    tslib_1.__exportStar(VerticalBarChart_types_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/VerticalBarChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/index.ts"],"names":[],"mappings":";;;IAAA,kDAAmC;IACnC,wDAAyC","sourcesContent":["export * from './VerticalBarChart';\nexport * from './VerticalBarChart.types';\n"]}

package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { IAccessibilityProps, IBasestate, IVerticalStackedBarChartProps, IVerticalStackedChartProps, IVSChartDataPoint } from '../../index';
+export interface IVerticalStackedBarChartState extends IBasestate {
+    selectedLegendTitle: string;
+    dataPointCalloutProps?: IVSChartDataPoint;
+    stackCalloutProps?: IVerticalStackedChartProps;
+    activeXAxisDataPoint: number | string;
+    callOutAccessibilityData?: IAccessibilityProps;
+}
+export declare class VerticalStackedBarChartBase extends React.Component<IVerticalStackedBarChartProps, IVerticalStackedBarChartState> {
+    private _points;
+    private _dataset;
+    private _xAxisLabels;
+    private _bars;
+    private _xAxisType;
+    private _barWidth;
+    private _additionalSpace;
+    private _calloutId;
+    private _colors;
+    private margins;
+    private _isRtl;
+    private _createLegendsForLine;
+    private _lineObject;
+    private _tooltipId;
+    private _yMax;
+    private _calloutAnchorPoint;
+    constructor(props: IVerticalStackedBarChartProps);
+    componentDidUpdate(prevProps: IVerticalStackedBarChartProps): void;
+    render(): React.ReactNode;
+    /**
+     * This function tells us what to focus either the whole stack as focusable item.
+     * or each individual item in the stack as focusable item. basically it depends
+     * on the prop `isCalloutForStack` if it's false user can focus each individual bar
+     * within the bar if it's true then user can focus whole bar as item.
+     * but if we have lines in the chart then we force the user to focus only the whole
+     * bar, even if isCalloutForStack is false
+     */
+    private _toFocusWholeStack;
+    private _getFormattedLineData;
+    private _getLineLegends;
+    private _createLines;
+    private _getCircleVisibilityAndRadius;
+    private _adjustProps;
+    private _createDataSetLayer;
+    private _getMargins;
+    private _renderCallout;
+    private _getCustomizedCallout;
+    private _onLegendClick;
+    private _onLegendHover;
+    private _onLegendLeave;
+    private _getLegendData;
+    private _onRectHover;
+    private _onRectFocusHover;
+    private _lineHover;
+    private _lineHoverOut;
+    private _onStackHover;
+    private _onStackHoverFocus;
+    private _onRectFocus;
+    private _onStackFocus;
+    private _handleMouseOut;
+    private _handleChartMouseLeave;
+    private _onClick;
+    private _getBarGapAndScale;
+    private _createBar;
+    private _getScales;
+    private _createNumericBars;
+    private _createStringBars;
+    private _getGraphData;
+    private _closeCallout;
+    private _getAxisData;
+}