@fluentui/react-charting 5.21.28 → 5.21.29

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

@@ -0,0 +1,111 @@
+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;
+}
+/**
+ * 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-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.js

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

package/lib-amd/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/**\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-amd/components/GroupedVerticalBarChart/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,152 @@
+import { IAccessibilityProps } 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> {
+    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;
+    constructor(props: IHeatMapChartProps);
+    render(): React.ReactNode;
+    private _getMinMaxOfYAxis;
+    private _getDomainNRangeValues;
+    private _getXandY;
+    private _getOpacity;
+    private _rectRefCallback;
+    private _onRectFocus;
+    private _onRectMouseOver;
+    private _onRectBlurOrMouseOut;
+    private _handleChartMouseLeave;
+    /**
+     * 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;
+}