@fluentui/react-charting 5.16.24 → 5.16.25

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

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

package/lib/components/HorizontalBarChart/HorizontalBarChart.js

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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

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

package/lib/components/HorizontalBarChart/index.js

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,293 @@
+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