@fluentui/react-charting 5.16.22 → 5.16.23

package/lib/components/HorizontalBarChart/HorizontalBarChart.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { IHorizontalBarChartProps } from './HorizontalBarChart.types';
-export declare const HorizontalBarChart: React.FunctionComponent<IHorizontalBarChartProps>;

package/lib/components/HorizontalBarChart/HorizontalBarChart.js

@@ -1,6 +0,0 @@
-import { styled } from '@fluentui/react/lib/Utilities';
-import { HorizontalBarChartBase } from './HorizontalBarChart.base';
-import { getHorizontalBarChartStyles } from './HorizontalBarChart.styles';
-// Create a HorizontalBarChart variant which uses these default styles and this styled subcomponent.
-export var HorizontalBarChart = styled(HorizontalBarChartBase, getHorizontalBarChartStyles);
-//# sourceMappingURL=HorizontalBarChart.js.map

package/lib/components/HorizontalBarChart/HorizontalBarChart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HorizontalBarChart.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAMvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAE1E,oGAAoG;AACpG,MAAM,CAAC,IAAM,kBAAkB,GAAsD,MAAM,CAIzF,sBAAsB,EAAE,2BAA2B,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport {\n  IHorizontalBarChartProps,\n  IHorizontalBarChartStyleProps,\n  IHorizontalBarChartStyles,\n} from './HorizontalBarChart.types';\nimport { HorizontalBarChartBase } from './HorizontalBarChart.base';\nimport { getHorizontalBarChartStyles } from './HorizontalBarChart.styles';\n\n// Create a HorizontalBarChart variant which uses these default styles and this styled subcomponent.\nexport const HorizontalBarChart: React.FunctionComponent<IHorizontalBarChartProps> = styled<\n  IHorizontalBarChartProps,\n  IHorizontalBarChartStyleProps,\n  IHorizontalBarChartStyles\n>(HorizontalBarChartBase, getHorizontalBarChartStyles);\n"]}

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

@@ -1,2 +0,0 @@
-import { IHorizontalBarChartStyleProps, IHorizontalBarChartStyles } from './HorizontalBarChart.types';
-export declare const getHorizontalBarChartStyles: (props: IHorizontalBarChartStyleProps) => IHorizontalBarChartStyles;

package/lib/components/HorizontalBarChart/HorizontalBarChart.styles.js

@@ -1,69 +0,0 @@
-import { __assign } from "tslib";
-import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';
-import { HorizontalBarChartVariant, } from './HorizontalBarChart.types';
-export var getHorizontalBarChartStyles = function (props) {
-    var className = props.className, theme = props.theme, width = props.width, barHeight = props.barHeight, showTriangle = props.showTriangle, variant = props.variant, hideLabels = props.hideLabels;
-    var palette = theme.palette;
-    return {
-        root: [
-            {
-                display: 'flex',
-                flexDirection: 'column',
-                width: width ? width : '100%',
-            },
-            className,
-        ],
-        items: {
-            marginBottom: showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale ? '16px' : '10px',
-        },
-        chart: {
-            width: '100%',
-            height: barHeight ? barHeight : 12,
-            display: 'block',
-            overflow: 'visible',
-        },
-        barWrapper: {
-            stroke: theme.palette.white,
-            strokeWidth: 2,
-        },
-        chartTitle: __assign(__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
-        chartTitleLeft: {
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            display: 'block',
-            color: theme.palette.neutralPrimary,
-            marginBottom: variant === HorizontalBarChartVariant.AbsoluteScale ? '4px' : '5px',
-        },
-        chartTitleRight: {
-            fontSize: FontSizes.medium,
-            fontWeight: FontWeights.semibold,
-            color: theme.palette.neutralPrimary,
-        },
-        chartDataTextDenominator: {
-            fontSize: FontSizes.medium,
-            color: theme.palette.neutralPrimary,
-        },
-        benchmarkContainer: {
-            position: 'relative',
-            height: '7px',
-            marginTop: '-3px',
-            marginBottom: '-1px',
-        },
-        triangle: {
-            width: '0',
-            height: '0',
-            borderLeft: '4px solid transparent',
-            borderRight: '4px solid transparent',
-            borderTop: '7px solid',
-            borderTopColor: palette.blue,
-            marginBottom: '4px',
-            position: 'absolute',
-        },
-        barLabel: __assign(__assign({}, theme.fonts.small), { fontWeight: FontWeights.semibold, fill: theme.palette.neutralPrimary }),
-        chartWrapper: {
-            paddingRight: variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,
-        },
-    };
-};
-//# sourceMappingURL=HorizontalBarChart.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HorizontalBarChart.styles.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EACL,yBAAyB,GAG1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,CAAC,IAAM,2BAA2B,GAAG,UAAC,KAAoC;IACtE,IAAA,SAAS,GAAiE,KAAK,UAAtE,EAAE,KAAK,GAA0D,KAAK,MAA/D,EAAE,KAAK,GAAmD,KAAK,MAAxD,EAAE,SAAS,GAAwC,KAAK,UAA7C,EAAE,YAAY,GAA0B,KAAK,aAA/B,EAAE,OAAO,GAAiB,KAAK,QAAtB,EAAE,UAAU,GAAK,KAAK,WAAV,CAAW;IAChF,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;IAE3B,OAAO;QACL,IAAI,EAAE;YACJ;gBACE,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;aAC9B;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,YAAY,EAAE,YAAY,IAAI,OAAO,KAAK,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACpG;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YAClC,OAAO,EAAE,OAAO;YAChB,QAAQ,EAAE,SAAS;SACpB;QACD,UAAU,EAAE;YACV,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC3B,WAAW,EAAE,CAAC;SACf;QACD,UAAU,wBACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,GAChC;QACD,cAAc,EAAE;YACd,YAAY,EAAE,UAAU;YACxB,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YACnC,YAAY,EAAE,OAAO,KAAK,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;SAClF;QACD,eAAe,EAAE;YACf,QAAQ,EAAE,SAAS,CAAC,MAAM;YAC1B,UAAU,EAAE,WAAW,CAAC,QAAQ;YAChC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACpC;QACD,wBAAwB,EAAE;YACxB,QAAQ,EAAE,SAAS,CAAC,MAAM;YAC1B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACpC;QACD,kBAAkB,EAAE;YAClB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,KAAK;YACb,SAAS,EAAE,MAAM;YACjB,YAAY,EAAE,MAAM;SACrB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,UAAU,EAAE,uBAAuB;YACnC,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,WAAW;YACtB,cAAc,EAAE,OAAO,CAAC,IAAI;YAC5B,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,UAAU;SACrB;QACD,QAAQ,wBACH,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,UAAU,EAAE,WAAW,CAAC,QAAQ,EAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,GACnC;QACD,YAAY,EAAE;YACZ,YAAY,EAAE,OAAO,KAAK,yBAAyB,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAC1F;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\nimport {\n  HorizontalBarChartVariant,\n  IHorizontalBarChartStyleProps,\n  IHorizontalBarChartStyles,\n} from './HorizontalBarChart.types';\n\nexport const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps): IHorizontalBarChartStyles => {\n  const { className, theme, width, barHeight, showTriangle, variant, hideLabels } = props;\n  const { palette } = theme!;\n\n  return {\n    root: [\n      {\n        display: 'flex',\n        flexDirection: 'column',\n        width: width ? width : '100%',\n      },\n      className,\n    ],\n    items: {\n      marginBottom: showTriangle || variant === HorizontalBarChartVariant.AbsoluteScale ? '16px' : '10px',\n    },\n    chart: {\n      width: '100%',\n      height: barHeight ? barHeight : 12,\n      display: 'block',\n      overflow: 'visible',\n    },\n    barWrapper: {\n      stroke: theme.palette.white,\n      strokeWidth: 2,\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 === HorizontalBarChartVariant.AbsoluteScale ? '4px' : '5px',\n    },\n    chartTitleRight: {\n      fontSize: FontSizes.medium,\n      fontWeight: FontWeights.semibold,\n      color: theme.palette.neutralPrimary,\n    },\n    chartDataTextDenominator: {\n      fontSize: FontSizes.medium,\n      color: theme.palette.neutralPrimary,\n    },\n    benchmarkContainer: {\n      position: 'relative',\n      height: '7px',\n      marginTop: '-3px',\n      marginBottom: '-1px',\n    },\n    triangle: {\n      width: '0',\n      height: '0',\n      borderLeft: '4px solid transparent',\n      borderRight: '4px solid transparent',\n      borderTop: '7px solid',\n      borderTopColor: palette.blue,\n      marginBottom: '4px',\n      position: 'absolute',\n    },\n    barLabel: {\n      ...theme.fonts.small,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n    },\n    chartWrapper: {\n      paddingRight: variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,\n    },\n  };\n};\n"]}

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

@@ -1,172 +0,0 @@
-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';
-export interface IHorizontalBarChartProps {
-    /**
-     * An array of chart data points for the Horizontal 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.
-     */
-    hideRatio?: boolean[];
-    /**
-     * Do not show tooltips in chart
-     *
-     * @default false
-     */
-    hideTooltip?: boolean;
-    /**
-     * This property tells how to show data text on top right of bar chart.
-     * If barChartCustomData props added, then this props will be overrided.
-     * @default 'default'
-     */
-    chartDataMode?: ChartDataMode;
-    /**
-     * Call to provide customized styling that will layer on top of the variant rules.
-     */
-    styles?: IStyleFunctionOrObject<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>;
-    /**
-     * Define a custom callout renderer for a horizontal bar
-     */
-    onRenderCalloutPerHorizontalBar?: IRenderFunction<IChartDataPoint>;
-    /**
-     * props for the callout in the chart
-     */
-    calloutProps?: Partial<ICalloutProps>;
-    /**
-     * Custom text to the chart (right side of the chart)
-     * IChartProps will be available as props to the method prop.
-     * If this method not given, default values (IHorizontalDataPoint {x,y})
-     * will be used to display the data/text based on given chartModeData prop.
-     */
-    barChartCustomData?: IRenderFunction<IChartProps>;
-    /**
-     * The prop used to define the culture to localized the numbers
-     */
-    culture?: string;
-    /**
-     * Prop to define the variant of HorizontalBarChart to render
-     * @default HorizontalBarChartVariant.PartToWhole
-     */
-    variant?: HorizontalBarChartVariant;
-    /**
-     * Prop to hide the bar labels
-     * @default false
-     */
-    hideLabels?: boolean;
-}
-export interface IHorizontalBarChartStyleProps {
-    /**
-     * Theme (provided through customization.)
-     */
-    theme: ITheme;
-    /**
-     * Additional CSS class(es) to apply to the StackedBarChart.
-     */
-    className?: string;
-    /**
-     * Width of the chart.
-     */
-    width: number | undefined;
-    /**
-     * line color for callout
-     */
-    color?: string;
-    /**
-     * Height of bar chart
-     * @default 15
-     */
-    barHeight?: number;
-    /**
-     * prop to check if benchmark data is provided
-     */
-    showTriangle?: boolean;
-    /**
-     * Prop to define the variant of HorizontalBarChart to render
-     */
-    variant?: HorizontalBarChartVariant;
-    /**
-     * Prop to hide the bar labels
-     */
-    hideLabels?: boolean;
-}
-export interface IHorizontalBarChartStyles {
-    /**
-     * Styling for the root container
-     */
-    root: IStyle;
-    /**
-     * Styling for each item in the container
-     */
-    items: IStyle;
-    /**
-     * Style for the chart.
-     */
-    chart: IStyle;
-    /**
-     * Style for the chart Title.
-     */
-    chartTitle: IStyle;
-    /**
-     * Style for the bars.
-     */
-    barWrapper: IStyle;
-    /**
-     * Style for left side text of the chart title
-     */
-    chartTitleLeft: IStyle;
-    /**
-     * Style for right side text of the chart title
-     */
-    chartTitleRight: IStyle;
-    /**
-     * Style for the chart data text denominator.
-     */
-    chartDataTextDenominator: IStyle;
-    /**
-     * Style for the benchmark container
-     */
-    benchmarkContainer: IStyle;
-    /**
-     * Style for the benchmark triangle
-     */
-    triangle: IStyle;
-    /**
-     * Style for the bar labels
-     */
-    barLabel: IStyle;
-    /**
-     * Style for the div containing the chart
-     */
-    chartWrapper: IStyle;
-}
-/**
- * Chart data mode for chart data text
- * default: show the datapoint.x value
- * fraction: show the fraction of datapoint.x/datapoint.y
- * percentage: show the percentage of (datapoint.x/datapoint.y)%
- */
-export declare type ChartDataMode = 'default' | 'fraction' | 'percentage';
-export declare enum HorizontalBarChartVariant {
-    PartToWhole = "part-to-whole",
-    AbsoluteScale = "absolute-scale"
-}

package/lib/components/HorizontalBarChart/HorizontalBarChart.types.js

@@ -1,6 +0,0 @@
-export var HorizontalBarChartVariant;
-(function (HorizontalBarChartVariant) {
-    HorizontalBarChartVariant["PartToWhole"] = "part-to-whole";
-    HorizontalBarChartVariant["AbsoluteScale"] = "absolute-scale";
-})(HorizontalBarChartVariant || (HorizontalBarChartVariant = {}));
-//# sourceMappingURL=HorizontalBarChart.types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HorizontalBarChart.types.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.types.ts"],"names":[],"mappings":"AA6MA,MAAM,CAAN,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACnC,0DAA6B,CAAA;IAC7B,6DAAgC,CAAA;AAClC,CAAC,EAHW,yBAAyB,KAAzB,yBAAyB,QAGpC","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';\n\nexport interface IHorizontalBarChartProps {\n  /**\n   * An array of chart data points for the Horizontal 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   */\n  hideRatio?: boolean[];\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * This property tells how to show data text on top right of bar chart.\n   * If barChartCustomData props added, then this props will be overrided.\n   * @default 'default'\n   */\n  chartDataMode?: ChartDataMode;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>;\n\n  /**\n   * Define a custom callout renderer for a horizontal bar\n   */\n  onRenderCalloutPerHorizontalBar?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * Custom text to the chart (right side of the chart)\n   * IChartProps will be available as props to the method prop.\n   * If this method not given, default values (IHorizontalDataPoint {x,y})\n   * will be used to display the data/text based on given chartModeData prop.\n   */\n  barChartCustomData?: IRenderFunction<IChartProps>;\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 HorizontalBarChart to render\n   * @default HorizontalBarChartVariant.PartToWhole\n   */\n  variant?: HorizontalBarChartVariant;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n}\n\nexport interface IHorizontalBarChartStyleProps {\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 | undefined;\n\n  /**\n   * line color for callout\n   */\n  color?: string;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n\n  /**\n   * prop to check if benchmark data is provided\n   */\n  showTriangle?: boolean;\n\n  /**\n   * Prop to define the variant of HorizontalBarChart to render\n   */\n  variant?: HorizontalBarChartVariant;\n\n  /**\n   * Prop to hide the bar labels\n   */\n  hideLabels?: boolean;\n}\n\nexport interface IHorizontalBarChartStyles {\n  /**\n   * Styling for the root container\n   */\n  root: IStyle;\n\n  /**\n   * Styling for each item in the container\n   */\n  items: IStyle;\n\n  /**\n   * Style for the chart.\n   */\n  chart: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle: IStyle;\n\n  /**\n   * Style for the bars.\n   */\n  barWrapper: IStyle;\n\n  /**\n   * Style for left side text of the chart title\n   */\n  chartTitleLeft: IStyle;\n\n  /**\n   * Style for right side text of the chart title\n   */\n  chartTitleRight: IStyle;\n\n  /**\n   * Style for the chart data text denominator.\n   */\n  chartDataTextDenominator: IStyle;\n\n  /**\n   * Style for the benchmark container\n   */\n  benchmarkContainer: IStyle;\n\n  /**\n   * Style for the benchmark triangle\n   */\n  triangle: 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 * Chart data mode for chart data text\n * default: show the datapoint.x value\n * fraction: show the fraction of datapoint.x/datapoint.y\n * percentage: show the percentage of (datapoint.x/datapoint.y)%\n */\nexport type ChartDataMode = 'default' | 'fraction' | 'percentage';\n\nexport enum HorizontalBarChartVariant {\n  PartToWhole = 'part-to-whole',\n  AbsoluteScale = 'absolute-scale',\n}\n"]}

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

@@ -1,3 +0,0 @@
-export * from './HorizontalBarChart';
-export * from './HorizontalBarChart.types';
-export * from '../../types/index';

package/lib/components/HorizontalBarChart/index.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './HorizontalBarChart.types';\nexport * from '../../types/index';\n"]}

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

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { ILegendsProps } from './Legends.types';
-export interface ILegendState {
-    selectedLegend: string;
-    activeLegend: string;
-    isHoverCardVisible: boolean;
-    /** Set of legends selected when multiple selection is allowed */
-    selectedLegends: {
-        [key: string]: boolean;
-    };
-}
-export declare class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
-    private _hoverCardRef;
-    private _classNames;
-    /** Boolean variable to check if one or more legends are selected */
-    private _isLegendSelected;
-    constructor(props: ILegendsProps);
-    render(): JSX.Element;
-    private _generateData;
-    private _onRenderData;
-    private _onReduceData;
-    private _onGrowData;
-    /**
-     * This function will get called when there is an ability to
-     * select  multiple legends
-     * @param legend ILegend
-     */
-    private _canSelectMultipleLegends;
-    /**
-     * This function will get called when there is
-     * ability to select only single legend
-     * @param legend ILegend
-     */
-    private _canSelectOnlySingleLegend;
-    private _onClick;
-    private _onRenderCompactCard;
-    private _renderOverflowItems;
-    private _hoverCardVisible;
-    private _onHoverOverLegend;
-    private _onLeave;
-    private _renderButton;
-    private _getShape;
-    private _getColor;
-}

package/lib/components/Legends/Legends.base.js

@@ -1,293 +0,0 @@
-import { __assign, __extends, __spreadArray } from "tslib";
-import * as React from 'react';
-import { HoverCard, HoverCardType } from '@fluentui/react/lib/HoverCard';
-import { classNamesFunction, find, getNativeProps, buttonProperties } from '@fluentui/react/lib/Utilities';
-import { ResizeGroup } from '@fluentui/react/lib/ResizeGroup';
-import { OverflowSet } from '@fluentui/react/lib/OverflowSet';
-import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
-import { Shape } from './shape';
-var getClassNames = classNamesFunction();
-var LegendsBase = /** @class */ (function (_super) {
-    __extends(LegendsBase, _super);
-    function LegendsBase(props) {
-        var _this = _super.call(this, props) || this;
-        /** Boolean variable to check if one or more legends are selected */
-        _this._isLegendSelected = false;
-        _this._onRenderData = function (data) {
-            var _a = _this.props, overflowProps = _a.overflowProps, _b = _a.allowFocusOnLegends, allowFocusOnLegends = _b === void 0 ? true : _b, _c = _a.canSelectMultipleLegends, canSelectMultipleLegends = _c === void 0 ? false : _c;
-            var rootStyles = {
-                root: {
-                    justifyContent: _this.props.centerLegends ? 'center' : 'unset',
-                    flexWrap: 'wrap',
-                },
-            };
-            return (React.createElement(FocusZone, __assign({}, (allowFocusOnLegends && {
-                role: 'listbox',
-                'aria-label': 'Legends',
-                'aria-multiselectable': canSelectMultipleLegends,
-            })),
-                React.createElement(OverflowSet, __assign({ items: data.primary, overflowItems: data.overflow, onRenderItem: _this._renderButton, onRenderOverflowButton: _this._renderOverflowItems }, overflowProps, { styles: __assign(__assign({}, rootStyles), overflowProps === null || overflowProps === void 0 ? void 0 : overflowProps.styles) }))));
-        };
-        _this._onReduceData = function (currentdata) {
-            if (currentdata.primary.length === 0) {
-                return;
-            }
-            var overflow = __spreadArray(__spreadArray([], currentdata.primary.slice(-1)), currentdata.overflow);
-            var primary = currentdata.primary.slice(0, -1);
-            return { primary: primary, overflow: overflow };
-        };
-        _this._onGrowData = function (currentdata) {
-            if (currentdata.overflow.length === 0) {
-                return;
-            }
-            var overflow = currentdata.overflow.slice(1);
-            var primary = __spreadArray(__spreadArray([], currentdata.primary), currentdata.overflow.slice(0, 1));
-            return { primary: primary, overflow: overflow };
-        };
-        /**
-         * This function will get called when there is an ability to
-         * select  multiple legends
-         * @param legend ILegend
-         */
-        _this._canSelectMultipleLegends = function (legend) {
-            var selectedLegends = __assign({}, _this.state.selectedLegends);
-            if (selectedLegends[legend.title]) {
-                // Delete entry for the deselected legend to make
-                // the number of keys equal to the number of selected legends
-                delete selectedLegends[legend.title];
-            }
-            else {
-                selectedLegends[legend.title] = true;
-                // Clear set if all legends are selected
-                if (Object.keys(selectedLegends).length === _this.props.legends.length) {
-                    selectedLegends = {};
-                }
-            }
-            _this.setState({ selectedLegends: selectedLegends });
-        };
-        /**
-         * This function will get called when there is
-         * ability to select only single legend
-         * @param legend ILegend
-         */
-        _this._canSelectOnlySingleLegend = function (legend) {
-            if (_this.state.selectedLegend === legend.title) {
-                _this.setState({ selectedLegend: '' });
-            }
-            else {
-                _this.setState({ selectedLegend: legend.title });
-            }
-        };
-        _this._onClick = function (legend) {
-            if (legend.action) {
-                var _a = _this.props.canSelectMultipleLegends, canSelectMultipleLegends = _a === void 0 ? false : _a;
-                if (canSelectMultipleLegends) {
-                    _this._canSelectMultipleLegends(legend);
-                }
-                else {
-                    _this._canSelectOnlySingleLegend(legend);
-                }
-                legend.action();
-            }
-        };
-        _this._onRenderCompactCard = function (expandingCard) {
-            var _a = _this.props, _b = _a.allowFocusOnLegends, allowFocusOnLegends = _b === void 0 ? true : _b, className = _a.className, styles = _a.styles, theme = _a.theme, _c = _a.canSelectMultipleLegends, canSelectMultipleLegends = _c === void 0 ? false : _c;
-            var overflowHoverCardLegends = [];
-            var classNames = getClassNames(styles, {
-                theme: theme,
-                className: className,
-            });
-            expandingCard.renderData.forEach(function (legend, index) {
-                var hoverCardElement = _this._renderButton(legend, index, true);
-                overflowHoverCardLegends.push(hoverCardElement);
-            });
-            var hoverCardData = (React.createElement(FocusZone, __assign({}, (allowFocusOnLegends && {
-                role: 'listbox',
-                'aria-label': 'Legends',
-                'aria-multiselectable': canSelectMultipleLegends,
-            }), { direction: FocusZoneDirection.vertical }, _this.props.focusZonePropsInHoverCard, { className: classNames.hoverCardRoot }), overflowHoverCardLegends));
-            return hoverCardData;
-        };
-        _this._renderOverflowItems = function (legends) {
-            var _a = _this.props.allowFocusOnLegends, allowFocusOnLegends = _a === void 0 ? true : _a;
-            var items = [];
-            legends.forEach(function (legend, i) {
-                items.push({ key: i.toString(), name: legend.title, onClick: legend.action });
-            });
-            var renderOverflowData = { renderData: legends };
-            var _b = _this.props, theme = _b.theme, className = _b.className, styles = _b.styles, overflowText = _b.overflowText;
-            var classNames = getClassNames(styles, {
-                theme: theme,
-                className: className,
-            });
-            var plainCardProps = {
-                onRenderPlainCard: _this._onRenderCompactCard,
-                renderData: renderOverflowData,
-            };
-            var overflowString = overflowText ? overflowText : 'more';
-            // execute similar to "_onClick" and "_onLeave" logic at HoverCard onCardHide event
-            var onHoverCardHideHandler = function () {
-                _this.setState({ isHoverCardVisible: false });
-                // Unhighlight the focused legend in the hover card
-                var activeOverflowItem = find(legends, function (legend) { return legend.title === _this.state.activeLegend; });
-                if (activeOverflowItem) {
-                    _this.setState({ activeLegend: '' });
-                    if (activeOverflowItem.onMouseOutAction) {
-                        activeOverflowItem.onMouseOutAction();
-                    }
-                }
-            };
-            return (React.createElement(HoverCard, { type: HoverCardType.plain, plainCardProps: plainCardProps, instantOpenOnClick: true, 
-                // eslint-disable-next-line react/jsx-no-bind
-                onCardHide: onHoverCardHideHandler, setInitialFocus: true, trapFocus: true, onCardVisible: _this._hoverCardVisible, styles: classNames.subComponentStyles.hoverCardStyles, cardDismissDelay: 300, target: _this._hoverCardRef },
-                React.createElement("div", __assign({ className: classNames.overflowIndicationTextStyle, ref: function (rootElem) { return (_this._hoverCardRef = rootElem); } }, (allowFocusOnLegends && {
-                    role: 'button',
-                    'aria-expanded': _this.state.isHoverCardVisible,
-                    'aria-label': items.length + " " + overflowString,
-                }), { "data-is-focusable": allowFocusOnLegends }),
-                    items.length,
-                    " ",
-                    overflowString)));
-        };
-        _this._hoverCardVisible = function () {
-            _this.setState({ isHoverCardVisible: true });
-        };
-        _this._onHoverOverLegend = function (legend) {
-            if (legend.hoverAction) {
-                _this.setState({ activeLegend: legend.title });
-                legend.hoverAction();
-            }
-        };
-        _this._onLeave = function (legend) {
-            if (legend.onMouseOutAction) {
-                _this.setState({ activeLegend: '' });
-                legend.onMouseOutAction();
-            }
-        };
-        _this._renderButton = function (data, index, overflow) {
-            var _a = _this.props.allowFocusOnLegends, allowFocusOnLegends = _a === void 0 ? true : _a;
-            var legend = {
-                title: data.title,
-                color: data.color,
-                shape: data.shape,
-                action: data.action,
-                hoverAction: data.hoverAction,
-                onMouseOutAction: data.onMouseOutAction,
-                stripePattern: data.stripePattern,
-                isLineLegendInBarChart: data.isLineLegendInBarChart,
-                opacity: data.opacity,
-            };
-            var color = _this._getColor(legend.title, legend.color);
-            var _b = _this.props, theme = _b.theme, className = _b.className, styles = _b.styles, _c = _b.canSelectMultipleLegends, canSelectMultipleLegends = _c === void 0 ? false : _c;
-            var classNames = getClassNames(styles, {
-                theme: theme,
-                className: className,
-                colorOnSelectedState: color,
-                borderColor: legend.color,
-                overflow: overflow,
-                stripePattern: legend.stripePattern,
-                isLineLegendInBarChart: legend.isLineLegendInBarChart,
-                opacity: legend.opacity,
-            });
-            var onClickHandler = function () {
-                _this._onClick(legend);
-            };
-            var onHoverHandler = function () {
-                _this._onHoverOverLegend(legend);
-            };
-            var onMouseOut = function () {
-                _this._onLeave(legend);
-            };
-            var shape = _this._getShape(classNames, legend, color);
-            return (React.createElement("button", __assign({}, (allowFocusOnLegends && {
-                'aria-selected': canSelectMultipleLegends
-                    ? !!_this.state.selectedLegends[legend.title]
-                    : _this.state.selectedLegend === legend.title,
-                role: 'option',
-                'aria-label': "" + legend.title,
-                'aria-setsize': data['aria-setsize'],
-                'aria-posinset': data['aria-posinset'],
-            }), (data.nativeButtonProps && __assign({}, data.nativeButtonProps)), { key: index, className: classNames.legend, onClick: onClickHandler, onMouseOver: onHoverHandler, onMouseOut: onMouseOut, onFocus: onHoverHandler, onBlur: onMouseOut, "data-is-focusable": allowFocusOnLegends }),
-                shape,
-                React.createElement("div", { className: classNames.text }, legend.title)));
-        };
-        _this.state = {
-            selectedLegend: '',
-            activeLegend: '',
-            isHoverCardVisible: false,
-            selectedLegends: {},
-        };
-        return _this;
-    }
-    LegendsBase.prototype.render = function () {
-        var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles;
-        this._classNames = getClassNames(styles, {
-            theme: theme,
-            className: className,
-        });
-        this._isLegendSelected = this.state.selectedLegend !== '' || Object.keys(this.state.selectedLegends).length > 0;
-        var dataToRender = this._generateData();
-        return (React.createElement("div", { className: this._classNames.root }, this.props.enabledWrapLines ? (this._onRenderData(dataToRender)) : (React.createElement(ResizeGroup, { data: dataToRender, onReduceData: this._onReduceData, onRenderData: this._onRenderData, onGrowData: this._onGrowData }))));
-    };
-    LegendsBase.prototype._generateData = function () {
-        var _this = this;
-        var _a = this.props.allowFocusOnLegends, allowFocusOnLegends = _a === void 0 ? true : _a;
-        var dataItems = this.props.legends.map(function (legend, index) {
-            return __assign(__assign({}, (allowFocusOnLegends && {
-                nativeButtonProps: getNativeProps(legend, buttonProperties, [
-                    'title',
-                ]),
-                'aria-setsize': _this.props.legends.length,
-                'aria-posinset': index + 1,
-            })), { title: legend.title, action: legend.action, hoverAction: legend.hoverAction, onMouseOutAction: legend.onMouseOutAction, color: legend.color, shape: legend.shape, stripePattern: legend.stripePattern, isLineLegendInBarChart: legend.isLineLegendInBarChart, opacity: legend.opacity, key: index });
-        });
-        var result = {
-            primary: dataItems,
-            overflow: [],
-        };
-        return result;
-    };
-    LegendsBase.prototype._getShape = function (classNames, legend, color) {
-        var svgParentProps = {
-            className: classNames.shape,
-        };
-        var svgChildProps = {
-            fill: color,
-            strokeWidth: 2,
-            stroke: legend.color,
-        };
-        return (React.createElement(Shape, { svgProps: svgParentProps, pathProps: svgChildProps, shape: legend.shape, classNameForNonSvg: classNames.rect }));
-    };
-    LegendsBase.prototype._getColor = function (title, color) {
-        var theme = this.props.theme;
-        var palette = theme.palette;
-        var legendColor = color;
-        // if one or more legends are selected
-        if (this._isLegendSelected) {
-            // if the given legend (title) is one of the selected legends
-            if (this.state.selectedLegend === title || this.state.selectedLegends[title]) {
-                legendColor = color;
-            }
-            // if the given legend is unselected
-            else {
-                legendColor = palette.white;
-            }
-        }
-        // if no legend is selected
-        else {
-            // if the given legend is hovered
-            // or none of the legends is hovered
-            if (this.state.activeLegend === title || this.state.activeLegend === '') {
-                legendColor = color;
-            }
-            // if there is a hovered legend but the given legend is not the one
-            else {
-                legendColor = palette.white;
-            }
-        }
-        return legendColor;
-    };
-    return LegendsBase;
-}(React.Component));
-export { LegendsBase };
-//# sourceMappingURL=Legends.base.js.map