@fluentui/react-charting 5.23.62 → 5.23.64

package/lib-commonjs/components/GaugeChart/GaugeChart.styles.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("@fluentui/react");
+var getStyles = function (props) {
+    var _a, _b, _c, _d;
+    var theme = props.theme, chartValueSize = props.chartValueSize, chartWidth = props.chartWidth, chartHeight = props.chartHeight, className = props.className, lineColor = props.lineColor, toDrawShape = props.toDrawShape, solidFill = props.solidFill, gradientFill = props.gradientFill, opacity = props.opacity;
+    return {
+        root: [
+            theme.fonts.medium,
+            'ms-GaugeChart',
+            {
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%',
+            },
+            className,
+        ],
+        chart: {
+            display: 'block',
+            width: chartWidth,
+            height: chartHeight,
+        },
+        limits: {
+            fontSize: react_1.FontSizes.small,
+            fontWeight: react_1.FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
+        },
+        chartValue: {
+            fontSize: chartValueSize,
+            fontWeight: react_1.FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
+        },
+        sublabel: {
+            fontSize: react_1.FontSizes.small,
+            fontWeight: react_1.FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
+        },
+        needle: {
+            fill: theme.palette.black,
+            stroke: theme.semanticColors.bodyBackground,
+        },
+        chartTitle: {
+            fontSize: react_1.FontSizes.small,
+            fill: theme.palette.neutralPrimary,
+        },
+        segment: {
+            outline: 'none',
+            stroke: theme.semanticColors.focusBorder,
+            fill: solidFill,
+            fillOpacity: opacity,
+        },
+        gradientSegment: {
+            width: '100%',
+            height: '100%',
+            background: gradientFill,
+            opacity: opacity,
+        },
+        legendsContainer: {
+            width: chartWidth,
+        },
+        calloutContentRoot: [
+            {
+                display: 'grid',
+                overflow: 'hidden',
+                padding: '11px 16px 10px 16px',
+                backgroundColor: theme.semanticColors.bodyBackground,
+                backgroundBlendMode: 'normal, luminosity',
+            },
+        ],
+        calloutDateTimeContainer: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+        },
+        calloutContentX: [
+            tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { lineHeight: '16px', opacity: '0.85', color: theme.semanticColors.bodySubtext }),
+        ],
+        calloutBlockContainer: [
+            theme.fonts.mediumPlus,
+            {
+                marginTop: '13px',
+                color: theme.semanticColors.bodyText,
+            },
+            !toDrawShape && {
+                selectors: (_a = {},
+                    _a[react_1.HighContrastSelector] = {
+                        forcedColorAdjust: 'none',
+                    },
+                    _a),
+                borderLeft: "4px solid ".concat(lineColor),
+                paddingLeft: '8px',
+            },
+            toDrawShape && {
+                display: 'flex',
+            },
+        ],
+        shapeStyles: {
+            marginRight: '8px',
+        },
+        calloutlegendText: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { lineHeight: '16px', selectors: (_b = {},
+                _b[react_1.HighContrastSelectorBlack] = {
+                    color: 'rgb(255, 255, 255)',
+                },
+                _b), color: theme.semanticColors.bodySubtext }),
+        calloutContentY: [
+            tslib_1.__assign(tslib_1.__assign({}, theme.fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_c = {},
+                    _c[react_1.HighContrastSelectorBlack] = {
+                        color: 'rgb(255, 255, 255)',
+                    },
+                    _c) }),
+        ],
+        descriptionMessage: [
+            theme.fonts.small,
+            {
+                selectors: (_d = {},
+                    _d[react_1.HighContrastSelectorBlack] = {
+                        color: 'rgb(255, 255, 255)',
+                    },
+                    _d),
+                color: theme.semanticColors.bodyText,
+                marginTop: '10px',
+                paddingTop: '10px',
+                borderTop: "1px solid ".concat(theme.semanticColors.menuDivider),
+            },
+        ],
+    };
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=GaugeChart.styles.js.map

package/lib-commonjs/components/GaugeChart/GaugeChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.styles.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react';\nimport { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';\n\nexport const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {\n  const {\n    theme,\n    chartValueSize,\n    chartWidth,\n    chartHeight,\n    className,\n    lineColor,\n    toDrawShape,\n    solidFill,\n    gradientFill,\n    opacity,\n  } = props;\n\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-GaugeChart',\n      {\n        alignItems: 'center',\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n      },\n      className,\n    ],\n\n    chart: {\n      display: 'block',\n      width: chartWidth,\n      height: chartHeight,\n    },\n\n    limits: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n    },\n\n    chartValue: {\n      fontSize: chartValueSize,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n    },\n\n    sublabel: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n    },\n\n    needle: {\n      fill: theme.palette.black,\n      stroke: theme.semanticColors.bodyBackground,\n    },\n\n    chartTitle: {\n      fontSize: FontSizes.small,\n      fill: theme.palette.neutralPrimary,\n    },\n\n    segment: {\n      outline: 'none',\n      stroke: theme.semanticColors.focusBorder,\n      fill: solidFill,\n      fillOpacity: opacity,\n    },\n\n    gradientSegment: {\n      width: '100%',\n      height: '100%',\n      background: gradientFill,\n      opacity,\n    },\n\n    legendsContainer: {\n      width: chartWidth,\n    },\n\n    calloutContentRoot: [\n      {\n        display: 'grid',\n        overflow: 'hidden',\n        padding: '11px 16px 10px 16px',\n        backgroundColor: theme.semanticColors.bodyBackground,\n        backgroundBlendMode: 'normal, luminosity',\n      },\n    ],\n    calloutDateTimeContainer: {\n      display: 'flex',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n    },\n    calloutContentX: [\n      {\n        ...theme.fonts.small,\n        lineHeight: '16px',\n        opacity: '0.85',\n        color: theme.semanticColors.bodySubtext,\n      },\n    ],\n    calloutBlockContainer: [\n      theme.fonts.mediumPlus,\n      {\n        marginTop: '13px',\n        color: theme.semanticColors.bodyText,\n      },\n      !toDrawShape && {\n        selectors: {\n          [HighContrastSelector]: {\n            forcedColorAdjust: 'none',\n          },\n        },\n        borderLeft: `4px solid ${lineColor}`,\n        paddingLeft: '8px',\n      },\n      toDrawShape && {\n        display: 'flex',\n      },\n    ],\n    shapeStyles: {\n      marginRight: '8px',\n    },\n    calloutlegendText: {\n      ...theme.fonts.small,\n      lineHeight: '16px',\n      selectors: {\n        [HighContrastSelectorBlack]: {\n          color: 'rgb(255, 255, 255)',\n        },\n      },\n      color: theme.semanticColors.bodySubtext,\n    },\n    calloutContentY: [\n      {\n        ...theme.fonts.mediumPlus,\n        fontWeight: 'bold',\n        lineHeight: '22px',\n        selectors: {\n          [HighContrastSelectorBlack]: {\n            color: 'rgb(255, 255, 255)',\n          },\n        },\n      },\n    ],\n    descriptionMessage: [\n      theme.fonts.small,\n      {\n        selectors: {\n          [HighContrastSelectorBlack]: {\n            color: 'rgb(255, 255, 255)',\n          },\n        },\n        color: theme.semanticColors.bodyText,\n        marginTop: '10px',\n        paddingTop: '10px',\n        borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n      },\n    ],\n  };\n};\n"]}

package/lib-commonjs/components/GaugeChart/GaugeChart.types.d.ts

@@ -0,0 +1,273 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { ILegendsProps } from '../Legends/index';
+import { IAccessibilityProps, IChart } from '../../types/index';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
+/**
+ * Gauge Chart segment interface.
+ * {@docCategory GaugeChart}
+ */
+export interface IGaugeChartSegment {
+    /**
+     * Legend text for a segment
+     */
+    legend: string;
+    /**
+     * Size of the segment
+     */
+    size: number;
+    /**
+     * Color of the segment
+     */
+    color?: string;
+    /**
+     * Gradient color of the segment
+     */
+    gradient?: [string, string];
+    /**
+     * Accessibility data for the segment
+     */
+    accessibilityData?: IAccessibilityProps;
+}
+/**
+ * {@docCategory GaugeChart}
+ */
+export declare enum GaugeValueFormat {
+    Percentage = "percentage",
+    Fraction = "fraction"
+}
+/**
+ * {@docCategory GaugeChart}
+ */
+export declare enum GaugeChartVariant {
+    SingleSegment = "single-segment",
+    MultipleSegments = "multiple-segments"
+}
+/**
+ * Gauge Chart properties
+ * {@docCategory GaugeChart}
+ */
+export interface IGaugeChartProps {
+    /**
+     * Width of the chart
+     */
+    width?: number;
+    /**
+     * Height of the chart
+     */
+    height?: number;
+    /**
+     * Title of the chart
+     */
+    chartTitle?: string;
+    /**
+     * Current value of the gauge
+     */
+    chartValue: number;
+    /**
+     * Sections of the gauge
+     */
+    segments: IGaugeChartSegment[];
+    /**
+     * Minimum value of the gauge
+     * @defaultvalue 0
+     */
+    minValue?: number;
+    /**
+     * Maximum value of the gauge
+     */
+    maxValue?: number;
+    /**
+     * Additional text to display below the chart value
+     */
+    sublabel?: string;
+    /**
+     * Hide the min and max values of the gauge
+     * @defaultvalue false
+     */
+    hideMinMax?: boolean;
+    /**
+     * Format of the chart value
+     * @defaultvalue GaugeValueFormat.Percentage
+     */
+    chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string);
+    /**
+     * Decides whether to show/hide legends
+     * @defaultvalue false
+     */
+    hideLegend?: boolean;
+    legendProps?: Partial<ILegendsProps>;
+    /**
+     * Do not show tooltips in chart
+     * @defaultvalue false
+     */
+    hideTooltip?: boolean;
+    /**
+     * Additional CSS class(es) to apply to the chart
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization)
+     */
+    theme?: ITheme;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules
+     */
+    styles?: IStyleFunctionOrObject<IGaugeChartStyleProps, IGaugeChartStyles>;
+    /**
+     * Defines the culture to localize the numbers and dates
+     */
+    culture?: string;
+    /**
+     * Props for the callout in the chart
+     */
+    calloutProps?: Partial<ICalloutProps>;
+    /**
+     * Specifies the variant of GaugeChart to be rendered
+     * @defaultvalue GaugeChartVariant.MultipleSegments
+     */
+    variant?: GaugeChartVariant;
+    /**
+     * Prop to enable the gradient in the chart
+     * @default false
+     */
+    enableGradient?: boolean;
+    /**
+     * Prop to enable the round corners in the chart
+     * @default false
+     */
+    roundCorners?: boolean;
+    /**
+     * Optional callback to access the IChart interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IChart>;
+}
+/**
+ * Gauge Chart style properties
+ * {@docCategory GaugeChart}
+ */
+export interface IGaugeChartStyleProps {
+    /**
+     * Theme (provided through customization)
+     */
+    theme: ITheme;
+    /**
+     * Font size of the chart value
+     */
+    chartValueSize?: number;
+    /**
+     * Width of the chart
+     */
+    chartWidth?: number;
+    /**
+     * Height of the chart
+     */
+    chartHeight?: number;
+    /**
+     * Additional CSS class(es) to apply to the chart
+     */
+    className?: string;
+    /**
+     * Color of the line
+     */
+    lineColor?: string;
+    /**
+     * Boolean flag which determines if shape is drawn in callout
+     */
+    toDrawShape?: boolean;
+    /**
+     * solid color for the arc (when enableGradient is false)
+     */
+    solidFill?: string;
+    /**
+     * gradient for the arc (when enableGradient is true)
+     */
+    gradientFill?: string;
+    /**
+     * opacity of the arc
+     */
+    opacity?: number;
+}
+/**
+ * Gauge Chart styles
+ * {@docCategory GaugeChart}
+ */
+export interface IGaugeChartStyles {
+    /**
+     * Styles for the root element
+     */
+    root?: IStyle;
+    /**
+     * Styles for the chart
+     */
+    chart?: IStyle;
+    /**
+     * Styles for the min and max values
+     */
+    limits?: IStyle;
+    /**
+     * Styles for the chart value
+     */
+    chartValue?: IStyle;
+    /**
+     * Styles for the sublabel
+     */
+    sublabel?: IStyle;
+    /**
+     * Styles for the needle
+     */
+    needle?: IStyle;
+    /**
+     * Styles for the chart title
+     */
+    chartTitle?: IStyle;
+    /**
+     * Styles for the segments
+     */
+    segment?: IStyle;
+    /**
+     * Styles for gradient segments
+     */
+    gradientSegment?: IStyle;
+    /**
+     * Styles for the legends container
+     */
+    legendsContainer?: IStyle;
+    /**
+     * Styles for callout root-content
+     */
+    calloutContentRoot?: IStyle;
+    /**
+     * Styles for callout x-content
+     */
+    calloutContentX?: IStyle;
+    /**
+     * Styles for callout y-content
+     */
+    calloutContentY?: IStyle;
+    /**
+     * Styles for description message
+     */
+    descriptionMessage?: IStyle;
+    /**
+     * Styles for callout Date time container
+     */
+    calloutDateTimeContainer?: IStyle;
+    /**
+     * Styles for callout info container
+     */
+    calloutInfoContainer?: IStyle;
+    /**
+     * Styles for callout block container
+     */
+    calloutBlockContainer?: IStyle;
+    /**
+     * Styles for callout legend text
+     */
+    calloutlegendText?: IStyle;
+    /**
+     * Styles for the shape object in the callout
+     */
+    shapeStyles?: IStyle;
+}

package/lib-commonjs/components/GaugeChart/GaugeChart.types.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeChartVariant = exports.GaugeValueFormat = void 0;
+/**
+ * {@docCategory GaugeChart}
+ */
+var GaugeValueFormat;
+(function (GaugeValueFormat) {
+    GaugeValueFormat["Percentage"] = "percentage";
+    GaugeValueFormat["Fraction"] = "fraction";
+})(GaugeValueFormat || (exports.GaugeValueFormat = GaugeValueFormat = {}));
+/**
+ * {@docCategory GaugeChart}
+ */
+var GaugeChartVariant;
+(function (GaugeChartVariant) {
+    GaugeChartVariant["SingleSegment"] = "single-segment";
+    GaugeChartVariant["MultipleSegments"] = "multiple-segments";
+})(GaugeChartVariant || (exports.GaugeChartVariant = GaugeChartVariant = {}));
+//# sourceMappingURL=GaugeChart.types.js.map

package/lib-commonjs/components/GaugeChart/GaugeChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeChart.types.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.types.ts"],"names":[],"mappings":";;;AAqCA;;GAEG;AACH,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,6CAAyB,CAAA;IACzB,yCAAqB,CAAA;AACvB,CAAC,EAHW,gBAAgB,gCAAhB,gBAAgB,QAG3B;AAED;;GAEG;AACH,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,qDAAgC,CAAA;IAChC,2DAAsC,CAAA;AACxC,CAAC,EAHW,iBAAiB,iCAAjB,iBAAiB,QAG5B","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ILegendsProps } from '../Legends/index';\nimport { IAccessibilityProps, IChart } from '../../types/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\n\n/**\n * Gauge Chart segment interface.\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartSegment {\n  /**\n   * Legend text for a segment\n   */\n  legend: string;\n\n  /**\n   * Size of the segment\n   */\n  size: number;\n\n  /**\n   * Color of the segment\n   */\n  color?: string;\n\n  /**\n   * Gradient color of the segment\n   */\n  gradient?: [string, string];\n\n  /**\n   * Accessibility data for the segment\n   */\n  accessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory GaugeChart}\n */\nexport enum GaugeValueFormat {\n  Percentage = 'percentage',\n  Fraction = 'fraction',\n}\n\n/**\n * {@docCategory GaugeChart}\n */\nexport enum GaugeChartVariant {\n  SingleSegment = 'single-segment',\n  MultipleSegments = 'multiple-segments',\n}\n\n/**\n * Gauge Chart properties\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartProps {\n  /**\n   * Width of the chart\n   */\n  width?: number;\n\n  /**\n   * Height of the chart\n   */\n  height?: number;\n\n  /**\n   * Title of the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Current value of the gauge\n   */\n  chartValue: number;\n\n  /**\n   * Sections of the gauge\n   */\n  segments: IGaugeChartSegment[];\n\n  /**\n   * Minimum value of the gauge\n   * @defaultvalue 0\n   */\n  minValue?: number;\n\n  /**\n   * Maximum value of the gauge\n   */\n  maxValue?: number;\n\n  /**\n   * Additional text to display below the chart value\n   */\n  sublabel?: string;\n\n  /**\n   * Hide the min and max values of the gauge\n   * @defaultvalue false\n   */\n  hideMinMax?: boolean;\n\n  /**\n   * Format of the chart value\n   * @defaultvalue GaugeValueFormat.Percentage\n   */\n  chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string);\n\n  /**\n   * Decides whether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /*\n   * Props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\n\n  /**\n   * Do not show tooltips in chart\n   * @defaultvalue false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization)\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules\n   */\n  styles?: IStyleFunctionOrObject<IGaugeChartStyleProps, IGaugeChartStyles>;\n\n  /**\n   * Defines the culture to localize the numbers and dates\n   */\n  culture?: string;\n\n  /**\n   * Props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * Specifies the variant of GaugeChart to be rendered\n   * @defaultvalue GaugeChartVariant.MultipleSegments\n   */\n  variant?: GaugeChartVariant;\n\n  /**\n   * Prop to enable the gradient in the chart\n   * @default false\n   */\n  enableGradient?: boolean;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Optional callback to access the IChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IChart>;\n}\n\n/**\n * Gauge Chart style properties\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartStyleProps {\n  /**\n   * Theme (provided through customization)\n   */\n  theme: ITheme;\n\n  /**\n   * Font size of the chart value\n   */\n  chartValueSize?: number;\n\n  /**\n   * Width of the chart\n   */\n  chartWidth?: number;\n\n  /**\n   * Height of the chart\n   */\n  chartHeight?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n\n  /**\n   * Color of the line\n   */\n  lineColor?: string;\n\n  /**\n   * Boolean flag which determines if shape is drawn in callout\n   */\n  toDrawShape?: boolean;\n\n  /**\n   * solid color for the arc (when enableGradient is false)\n   */\n  solidFill?: string;\n\n  /**\n   * gradient for the arc (when enableGradient is true)\n   */\n  gradientFill?: string;\n\n  /**\n   * opacity of the arc\n   */\n  opacity?: number;\n}\n\n/**\n * Gauge Chart styles\n * {@docCategory GaugeChart}\n */\nexport interface IGaugeChartStyles {\n  /**\n   * Styles for the root element\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the chart\n   */\n  chart?: IStyle;\n\n  /**\n   * Styles for the min and max values\n   */\n  limits?: IStyle;\n\n  /**\n   * Styles for the chart value\n   */\n  chartValue?: IStyle;\n\n  /**\n   * Styles for the sublabel\n   */\n  sublabel?: IStyle;\n\n  /**\n   * Styles for the needle\n   */\n  needle?: IStyle;\n\n  /**\n   * Styles for the chart title\n   */\n  chartTitle?: IStyle;\n\n  /**\n   * Styles for the segments\n   */\n  segment?: IStyle;\n\n  /**\n   * Styles for gradient segments\n   */\n  gradientSegment?: IStyle;\n\n  /**\n   * Styles for the legends container\n   */\n  legendsContainer?: IStyle;\n\n  /**\n   * Styles for callout root-content\n   */\n  calloutContentRoot?: IStyle;\n\n  /**\n   * Styles for callout x-content\n   */\n  calloutContentX?: IStyle;\n\n  /**\n   * Styles for callout y-content\n   */\n  calloutContentY?: IStyle;\n\n  /**\n   * Styles for description message\n   */\n  descriptionMessage?: IStyle;\n\n  /**\n   * Styles for callout Date time container\n   */\n  calloutDateTimeContainer?: IStyle;\n\n  /**\n   * Styles for callout info container\n   */\n  calloutInfoContainer?: IStyle;\n\n  /**\n   * Styles for callout block container\n   */\n  calloutBlockContainer?: IStyle;\n\n  /**\n   * Styles for callout legend text\n   */\n  calloutlegendText?: IStyle;\n\n  /**\n   * Styles for the shape object in the callout\n   */\n  shapeStyles?: IStyle;\n}\n"]}

package/lib-commonjs/components/GaugeChart/index.d.ts

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

package/lib-commonjs/components/GaugeChart/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./GaugeChart"), exports);
+tslib_1.__exportStar(require("./GaugeChart.types"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/GaugeChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/GaugeChart/index.ts"],"names":[],"mappings":";;;AAAA,uDAA6B;AAC7B,6DAAmC","sourcesContent":["export * from './GaugeChart';\nexport * from './GaugeChart.types';\n"]}

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { IAccessibilityProps, IGroupedVerticalBarChartProps, IGVBarChartSeriesPoint, IBasestate } from '../../index';
+import { IChart, IImageExportOptions } from '../../types/index';
+export interface IGroupedVerticalBarChartState extends IBasestate {
+    dataPointCalloutProps?: IGVBarChartSeriesPoint;
+    callOutAccessibilityData?: IAccessibilityProps;
+    calloutLegend: string;
+    selectedLegends: string[];
+}
+export declare class GroupedVerticalBarChartBase extends React.Component<IGroupedVerticalBarChartProps, IGroupedVerticalBarChartState> implements IChart {
+    static defaultProps: Partial<IGroupedVerticalBarChartProps>;
+    private _createSet;
+    private _dataset;
+    private _keys;
+    private _xAxisLabels;
+    private _datasetForBars;
+    private margins;
+    private _groupedVerticalBarGraph;
+    private _classNames;
+    private _refArray;
+    private _yMax;
+    private _calloutId;
+    private _tooltipId;
+    private _xAxisType;
+    private _isRtl;
+    private _calloutAnchorPoint;
+    private _barWidth;
+    private _domainMargin;
+    private _emptyChartId;
+    private _groupWidth;
+    private _xAxisInnerPadding;
+    private _xAxisOuterPadding;
+    private _cartesianChartRef;
+    private _legendsRef;
+    constructor(props: IGroupedVerticalBarChartProps);
+    componentDidUpdate(prevProps: IGroupedVerticalBarChartProps): void;
+    render(): React.ReactNode;
+    get chartContainer(): HTMLElement | null;
+    toImage: (opts?: IImageExportOptions) => Promise<string>;
+    private _getMinMaxOfYAxis;
+    private _getDomainNRangeValues;
+    private _getGraphData;
+    private _getMargins;
+    private _createDataSetOfGVBC;
+    private _getCustomizedCallout;
+    private _getOpacity;
+    private _onBarHover;
+    private _onBarLeave;
+    private _handleChartMouseLeave;
+    private _onBarFocus;
+    private _redirectToUrl;
+    private _refCallback;
+    private _buildGraph;
+    private _createDataset;
+    private _createX0Scale;
+    private _createX1Scale;
+    private _closeCallout;
+    private _onLegendHover;
+    private _onLegendLeave;
+    private _getLegendData;
+    private _onLegendSelectionChange;
+    private _getAxisData;
+    /**
+     * 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 _getHighlightedLegend;
+    private _getAriaLabel;
+    private _getDomainMargins;
+    private _isChartEmpty;
+    private _adjustProps;
+    private _getChartTitle;
+}