@fluentui/react-charting 5.23.63 → 5.23.65

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js

@@ -0,0 +1,10 @@
+import { styled } from '../../Utilities';
+import { GroupedVerticalBarChartBase } from './GroupedVerticalBarChart.base';
+import { getStyles } from './GroupedVerticalBarChart.styles';
+// Create a GroupedVerticalBarChart variant which uses these default styles and this styled subcomponent.
+/**
+ * GroupedVerticalBarchart component.
+ * {@docCategory GroupedVerticalBarChart}
+ */
+export var GroupedVerticalBarChart = styled(GroupedVerticalBarChartBase, getStyles);
+//# sourceMappingURL=GroupedVerticalBarChart.js.map

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedVerticalBarChart.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAMzC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAE7D,yGAAyG;AACzG;;;GAGG;AACH,MAAM,CAAC,IAAM,uBAAuB,GAA2D,MAAM,CAInG,2BAA2B,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport {\n  IGroupedVerticalBarChartProps,\n  IGroupedVerticalBarChartStyleProps,\n  IGroupedVerticalBarChartStyles,\n} from '../../index';\nimport { GroupedVerticalBarChartBase } from './GroupedVerticalBarChart.base';\nimport { getStyles } from './GroupedVerticalBarChart.styles';\n\n// Create a GroupedVerticalBarChart variant which uses these default styles and this styled subcomponent.\n/**\n * GroupedVerticalBarchart component.\n * {@docCategory GroupedVerticalBarChart}\n */\nexport const GroupedVerticalBarChart: React.FunctionComponent<IGroupedVerticalBarChartProps> = styled<\n  IGroupedVerticalBarChartProps,\n  IGroupedVerticalBarChartStyleProps,\n  IGroupedVerticalBarChartStyles\n>(GroupedVerticalBarChartBase, getStyles);\n"]}

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles } from '../../index';
+export declare const getStyles: (props: IGroupedVerticalBarChartStyleProps) => IGroupedVerticalBarChartStyles;

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js

@@ -0,0 +1,17 @@
+import { __assign } from "tslib";
+import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';
+export var getStyles = function (props) {
+    var theme = props.theme, href = props.href;
+    return {
+        opacityChangeOnHover: {
+            cursor: href ? 'pointer' : 'default',
+        },
+        tooltip: __assign(__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none' }),
+        barLabel: {
+            fontSize: FontSizes.small,
+            fontWeight: FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
+        },
+    };
+};
+//# sourceMappingURL=GroupedVerticalBarChart.styles.js.map

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedVerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAGrE,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAyC;IACzD,IAAA,KAAK,GAAW,KAAK,MAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IAC9B,OAAO;QACL,oBAAoB,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;SACrC;QAED,OAAO,wBACF,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;QAED,QAAQ,EAAE;YACR,QAAQ,EAAE,SAAS,CAAC,KAAK;YACzB,UAAU,EAAE,WAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACnC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\nimport { IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles } from '../../index';\n\nexport const getStyles = (props: IGroupedVerticalBarChartStyleProps): IGroupedVerticalBarChartStyles => {\n  const { theme, href } = props;\n  return {\n    opacityChangeOnHover: {\n      cursor: href ? 'pointer' : 'default',\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    barLabel: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n    },\n  };\n};\n"]}

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.d.ts

@@ -0,0 +1,126 @@
+import { IStyle } from '@fluentui/react/lib/Styling';
+import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { ICartesianChartStyles, ICartesianChartStyleProps, ICartesianChartProps, IGroupedVerticalBarChartData, IGVBarChartSeriesPoint } from '../../index';
+/**
+ * Grouped Vertical Bar Chart properties
+ * {@docCategory GroupedVerticalBarChart}
+ */
+export interface IGroupedVerticalBarChartProps extends ICartesianChartProps {
+    /**
+     * chart title for the chart
+     */
+    chartTitle?: string;
+    /**
+     * Data to render in the chart.
+     */
+    data: IGroupedVerticalBarChartData[];
+    /**
+     * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px,
+     * which may decrease to prevent overlap. When set to `'auto'`, the bar width is calculated from padding values.
+     * @default 16
+     */
+    barwidth?: number | 'default' | 'auto';
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>;
+    /**
+     * color of the datapoint legend
+     * @deprecated Dont use this property. colour will pick from given data
+     */
+    legendColor?: string;
+    /**
+     * This prop used to draw X axis grid line on tha chart. Default value will be false
+     * @deprecated Dont use this property. Handling with default value.
+     */
+    showXAxisGridLines?: boolean;
+    /**
+     * This prop used to draw Y axis grid lines on the chart. Default value will be true
+     * @deprecated Dont use this property. Lines are drawn by default
+     */
+    showYAxisGridLines?: boolean;
+    /**
+     * This prop takes the boolean value and used for to display x-axis path or transparent.
+     * This is a optional prop and default value is false. It dont show X-Axis path as tranparent.
+     * @deprecated Dont use this property. Axis line are removed by default
+     */
+    showXAxisPath?: boolean;
+    /**
+     * This prop takes the boolean value and used for to display y-axis path or transparent.
+     * This is a optional prop and default value is false. It dont show Y-Axis path as tranparent.
+     * @deprecated Dont use this property. No need to display Y axis path. Handling default
+     */
+    showYAxisPath?: boolean;
+    /**
+     * Define a custom callout renderer for a stack
+     */
+    onRenderCalloutPerDataPoint?: IRenderFunction<IGVBarChartSeriesPoint>;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+    /**
+     * To display multi stack callout or single callout
+     * @default false
+     */
+    isCalloutForStack?: boolean;
+    /**
+     * Prop to hide the bar labels
+     * @default false
+     */
+    hideLabels?: boolean;
+    /**
+     * Maximum width of a bar, in pixels.
+     * @default 24
+     */
+    maxBarWidth?: number;
+    /**
+     * Padding between groups as a fraction of the [step](https://d3js.org/d3-scale/band#band_step).
+     * Takes a number in the range [0, 1]. Only applicable to string x-axis.
+     * Note: groupWidthInTermsOfBarWidth is calculated at runtime based on
+     * the number of bars in a group and the gap between the bars.
+     * @default 2 / (2 + groupWidthInTermsOfBarWidth)
+     */
+    xAxisInnerPadding?: number;
+    /**
+     * Padding before the first group and after the last group as a fraction of
+     * the [step](https://d3js.org/d3-scale/band#band_step). Takes a number in the range [0, 1].
+     * Only applicable to string x-axis.
+     */
+    xAxisOuterPadding?: number;
+    /**
+     * @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;
+    /**
+     * Specifies the mode of the chart.
+     * @default 'default'
+     */
+    mode?: 'default' | 'plotly';
+}
+/**
+ * Grouped Vertical Bar Chart style properties
+ * {@docCategory GroupedVerticalBarChart}
+ */
+export interface IGroupedVerticalBarChartStyleProps extends ICartesianChartStyleProps {
+}
+/**
+ * Grouped Vertical Bar Chart styles
+ * {@docCategory GroupedVerticalBarChart}
+ */
+export interface IGroupedVerticalBarChartStyles extends ICartesianChartStyles {
+    /**
+     * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
+     */
+    opacityChangeOnHover: IStyle;
+    /**
+     * Style for the bar labels
+     */
+    barLabel: IStyle;
+}

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.js

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

package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedVerticalBarChart.types.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  ICartesianChartStyles,\n  ICartesianChartStyleProps,\n  ICartesianChartProps,\n  IGroupedVerticalBarChartData,\n  IGVBarChartSeriesPoint,\n} from '../../index';\n\n/**\n * Grouped Vertical Bar Chart properties\n * {@docCategory GroupedVerticalBarChart}\n */\nexport interface IGroupedVerticalBarChartProps extends ICartesianChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * Data to render in the chart.\n   */\n  data: IGroupedVerticalBarChartData[];\n\n  /**\n   * Width of each bar in the chart. When set to `undefined` or `'default'`, the bar width defaults to 16px,\n   * which may decrease to prevent overlap. When set to `'auto'`, the bar width is calculated from padding values.\n   * @default 16\n   */\n  barwidth?: number | 'default' | 'auto';\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>;\n\n  /**\n   * color of the datapoint legend\n   * @deprecated Dont use this property. colour will pick from given data\n   */\n  legendColor?: string;\n\n  /**\n   * This prop used to draw X axis grid line on tha chart. Default value will be false\n   * @deprecated Dont use this property. Handling with default value.\n   */\n  showXAxisGridLines?: boolean;\n\n  /**\n   * This prop used to draw Y axis grid lines on the chart. Default value will be true\n   * @deprecated Dont use this property. Lines are drawn by default\n   */\n  showYAxisGridLines?: boolean;\n\n  /**\n   * This prop takes the boolean value and used for to display x-axis path or transparent.\n   * This is a optional prop and default value is false. It dont show X-Axis path as tranparent.\n   * @deprecated Dont use this property. Axis line are removed by default\n   */\n  showXAxisPath?: boolean;\n\n  /**\n   * This prop takes the boolean value and used for to display y-axis path or transparent.\n   * This is a optional prop and default value is false. It dont show Y-Axis path as tranparent.\n   * @deprecated Dont use this property. No need to display Y axis path. Handling default\n   */\n  showYAxisPath?: boolean;\n\n  /**\n   * Define a custom callout renderer for a stack\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<IGVBarChartSeriesPoint>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * To display multi stack callout or single callout\n   * @default false\n   */\n  isCalloutForStack?: boolean;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Maximum width of a bar, in pixels.\n   * @default 24\n   */\n  maxBarWidth?: number;\n\n  /**\n   * Padding between groups as a fraction of the [step](https://d3js.org/d3-scale/band#band_step).\n   * Takes a number in the range [0, 1]. Only applicable to string x-axis.\n   * Note: groupWidthInTermsOfBarWidth is calculated at runtime based on\n   * the number of bars in a group and the gap between the bars.\n   * @default 2 / (2 + groupWidthInTermsOfBarWidth)\n   */\n  xAxisInnerPadding?: number;\n\n  /**\n   * Padding before the first group and after the last group as a fraction of\n   * the [step](https://d3js.org/d3-scale/band#band_step). Takes a number in the range [0, 1].\n   * Only applicable to string x-axis.\n   */\n  xAxisOuterPadding?: number;\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   * Specifies the mode of the chart.\n   * @default 'default'\n   */\n  mode?: 'default' | 'plotly';\n}\n\n/**\n * Grouped Vertical Bar Chart style properties\n * {@docCategory GroupedVerticalBarChart}\n */\nexport interface IGroupedVerticalBarChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * Grouped Vertical Bar Chart styles\n * {@docCategory GroupedVerticalBarChart}\n */\nexport interface IGroupedVerticalBarChartStyles extends ICartesianChartStyles {\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 bar labels\n   */\n  barLabel: IStyle;\n}\n"]}

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

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

package/lib/components/GroupedVerticalBarChart/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './GroupedVerticalBarChart';\nexport * from './GroupedVerticalBarChart.types';\n"]}

package/lib/components/HeatMapChart/HeatMapChart.base.d.ts

@@ -0,0 +1,160 @@
+import { IAccessibilityProps, IChart, IImageExportOptions } from '../../types/IDataPoint';
+import * as React from 'react';
+import { IHeatMapChartProps } from './HeatMapChart.types';
+import { Target } from '@fluentui/react';
+export interface IHeatMapChartState {
+    /**
+     * contains the selected legend string
+     */
+    selectedLegend: string;
+    /**
+     * contains the hovered legend string
+     */
+    activeLegend: string;
+    /**
+     * determines wethere to show or hide the callout
+     * @default false
+     */
+    isCalloutVisible: boolean;
+    /**
+     * y value to be shown in callout
+     */
+    calloutYValue: string;
+    /**
+     * legend title to be shown in callout
+     */
+    calloutLegend: string;
+    /**
+     * color of the text in the callout
+     */
+    calloutTextColor: string;
+    /**
+     * The target that the Callout should try to position itself based on
+     */
+    target: Target;
+    /**
+     * ratio to show in the callout
+     */
+    ratio: [number, number] | null;
+    /**
+     * description message to show in the callout
+     */
+    descriptionMessage: string;
+    /**
+     * id to give to callout for accesiblity purpose
+     */
+    calloutId: string;
+    /**
+     * Accessibility data for callout
+     */
+    callOutAccessibilityData?: IAccessibilityProps;
+}
+export declare class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatMapChartState> implements IChart {
+    private _classNames;
+    private _stringXAxisDataPoints;
+    private _stringYAxisDataPoints;
+    private _createSet;
+    private _dataSet;
+    private _colorScale;
+    private _xAxisScale;
+    private _yAxisScale;
+    /**
+     * This array contains ref for all the rectangles
+     * drawn inside the chard
+     */
+    private _rectRefArray;
+    private _xAxisType;
+    private _yAxisType;
+    private _calloutAnchorPoint;
+    private _emptyChartId;
+    private margins;
+    private _cartesianChartRef;
+    private _legendsRef;
+    constructor(props: IHeatMapChartProps);
+    componentDidUpdate(prevProps: IHeatMapChartProps): void;
+    render(): React.ReactNode;
+    get chartContainer(): HTMLElement | null;
+    toImage: (opts?: IImageExportOptions) => Promise<string>;
+    private _getMinMaxOfYAxis;
+    private _getDomainNRangeValues;
+    private _getXandY;
+    private _getMargins;
+    private _getOpacity;
+    private _rectRefCallback;
+    private _onRectFocus;
+    private _onRectMouseOver;
+    private _onRectBlurOrMouseOut;
+    private _handleChartMouseLeave;
+    private _getInvertedTextColor;
+    /**
+     * This is the function which is responsible for
+     * drawing the rectangle in the graph and also
+     * attaching dom events to that rectangles
+     */
+    private _createRectangles;
+    /**
+     * when the legend is hovered we need to highlight
+     * all the rectangles which fall under that category
+     * and un-highlight the rest of them
+     * @param legendTitle
+     */
+    private _onLegendHover;
+    /**
+     * when the mouse is out from the legend , we need
+     * to show the graph in initial mode.
+     */
+    private _onLegendLeave;
+    /**
+     * @param legendTitle
+     * when the legend is clicked we need to highlight
+     * all the rectangles which fall under that category
+     * and un highlight the rest of them
+     */
+    private _onLegendClick;
+    private _createLegendBars;
+    private _getColorScale;
+    private _getXIndex;
+    private _getYIndex;
+    /**
+     * This will create a new data set based on the prop
+     * @data
+     * We will be using This data set to contsruct our rectangles
+     * in the chart, we use this data set becuase, when we loop in this
+     * data and build the heat map, it will support accessibility as
+     * specified in the figma
+     */
+    private _createNewDataSet;
+    /**
+     * This function will return the final sorted and formatted x-axis points
+     * which will be rendered on the x-axis
+     * @param points
+     * @returns x-axis points
+     */
+    private _getXAxisDataPoints;
+    /**
+     * This function will return the final sorted and formatted y-axis points
+     * which will be rendered on the y-axis
+     * @param points
+     * @returns yaxis points
+     */
+    private _getYAxisDataPoints;
+    private _getStringFormattedDate;
+    private _getStringFormattedNumber;
+    private _getFormattedLabelForXAxisDataPoint;
+    private _getFormattedLabelForYAxisDataPoint;
+    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;
+    private _getChartTitle;
+}