@fluentui/react-charting 5.21.32 → 5.22.1

package/lib/types/IDataPoint.d.ts

@@ -121,6 +121,11 @@ export interface IChartDataPoint {
      * Color for the legend in the chart. If not provided, it will fallback on the default color palette.
      */
     color?: string;
+    /**
+     * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.
+     * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.
+     */
+    gradient?: [string, string];
     /**
      * placeholder data point
      */
@@ -162,6 +167,11 @@ export interface IVerticalBarChartDataPoint {
      * color for the legend in the chart
      */
     color?: string;
+    /**
+     * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.
+     * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.
+     */
+    gradient?: [string, string];
     /**
      * Callout data for x axis
      * This is an optional prop, If haven;t given legend will take
@@ -207,6 +217,11 @@ export interface IHorizontalBarChartWithAxisDataPoint {
      * color for the legend in the chart
      */
     color?: string;
+    /**
+     * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.
+     * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.
+     */
+    gradient?: [string, string];
     /**
      * Callout data for x axis
      * This is an optional prop, If haven;t given legend will take
@@ -485,6 +500,11 @@ export interface IVSChartDataPoint {
      * color for the legend in the chart
      */
     color?: string;
+    /**
+     * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.
+     * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.
+     */
+    gradient?: [string, string];
     /**
      * Callout data for x axis
      * This is an optional prop, If haven;t given legend will take
@@ -560,6 +580,11 @@ export interface IGVBarChartSeriesPoint {
      * Color for the legend in the chart
      */
     color: string;
+    /**
+     * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.
+     * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.
+     */
+    gradient?: [string, string];
     /**
      * Legend text in the chart
      */

package/lib/types/IDataPoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import { SankeyLink, SankeyNode } from 'd3-sankey';\nimport { SVGProps } from 'react';\nimport { LegendShape } from '../components/Legends/Legends.types';\n\nexport interface IBasestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IMargins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalStackedBarDataPoint extends Omit<IDataPoint, 'x'> {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale.\n   */\n  x: number | string | Date;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: IHorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: ILineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalBarChart {\n  y: IVerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface ILineChartLineOptions extends SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: ILineChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: IAccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: IChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: ILineChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  SankeyChartData?: ISankeyChartData;\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ISankeyChartData {\n  nodes: SNode[];\n  links: SLink[];\n}\n\ninterface ISNodeExtra {\n  /**\n   * A unique identifier for this node.\n   */\n  nodeId: number | string;\n  /**\n   * The display name for this node in the UX.\n   */\n  name: string;\n  color?: string;\n  borderColor?: string;\n  actualValue?: number;\n  layer?: number;\n}\n\ninterface ISLinkExtra {\n  /**\n   * The index within `ISankeyChartData.nodes` of the source node.\n   */\n  source: number;\n  /**\n   * The index within `ISankeyChartData.nodes` of the target node.\n   */\n  target: number;\n  /**\n   * The weight of this link between the two nodes.\n   */\n  value: number;\n  unnormalizedValue?: number;\n}\n\nexport type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IAccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IVerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: IVSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string | Date;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: ILineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalStackedBarChart {\n  y: number;\n  color: string;\n  legend: string;\n  /**\n   * Data to show in callout\n   */\n  data?: number;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color: string;\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: IGVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: IGVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartDataPoint {\n  x: string | Date | number;\n  y: string | Date | number;\n  value: number;\n  /**\n   * The value/ text to be rendered in the rectange\n   */\n  rectText?: string | number;\n  /**\n   * denomination to show in the callout\n   */\n  ratio?: [number, number];\n  /**\n   * description message to the callout\n   */\n  descriptionMessage?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartData {\n  /**\n   * name of the legend\n   */\n  legend: string;\n  data: IHeatMapChartDataPoint[];\n  /**\n   * This  number will be used to get the color for the legend\n   */\n  value: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutData {\n  x: number | string | Date;\n  values: ICustomizedCalloutDataPoint[];\n}\n"]}
+{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import { SankeyLink, SankeyNode } from 'd3-sankey';\nimport { SVGProps } from 'react';\nimport { LegendShape } from '../components/Legends/Legends.types';\n\nexport interface IBasestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IMargins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalStackedBarDataPoint extends Omit<IDataPoint, 'x'> {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale.\n   */\n  x: number | string | Date;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: IHorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: ILineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalBarChart {\n  y: IVerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface ILineChartLineOptions extends SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: ILineChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: IAccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: IChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: ILineChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  SankeyChartData?: ISankeyChartData;\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ISankeyChartData {\n  nodes: SNode[];\n  links: SLink[];\n}\n\ninterface ISNodeExtra {\n  /**\n   * A unique identifier for this node.\n   */\n  nodeId: number | string;\n  /**\n   * The display name for this node in the UX.\n   */\n  name: string;\n  color?: string;\n  borderColor?: string;\n  actualValue?: number;\n  layer?: number;\n}\n\ninterface ISLinkExtra {\n  /**\n   * The index within `ISankeyChartData.nodes` of the source node.\n   */\n  source: number;\n  /**\n   * The index within `ISankeyChartData.nodes` of the target node.\n   */\n  target: number;\n  /**\n   * The weight of this link between the two nodes.\n   */\n  value: number;\n  unnormalizedValue?: number;\n}\n\nexport type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IAccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IVerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: IVSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string | Date;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: ILineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalStackedBarChart {\n  y: number;\n  color: string;\n  legend: string;\n  /**\n   * Data to show in callout\n   */\n  data?: number;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: IGVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: IGVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartDataPoint {\n  x: string | Date | number;\n  y: string | Date | number;\n  value: number;\n  /**\n   * The value/ text to be rendered in the rectange\n   */\n  rectText?: string | number;\n  /**\n   * denomination to show in the callout\n   */\n  ratio?: [number, number];\n  /**\n   * description message to the callout\n   */\n  descriptionMessage?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartData {\n  /**\n   * name of the legend\n   */\n  legend: string;\n  data: IHeatMapChartDataPoint[];\n  /**\n   * This  number will be used to get the color for the legend\n   */\n  value: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutData {\n  x: number | string | Date;\n  values: ICustomizedCalloutDataPoint[];\n}\n"]}

package/lib/utilities/gradients.d.ts

@@ -0,0 +1,30 @@
+export declare const DataVizGradientPalette: {
+    gradient1: string;
+    gradient2: string;
+    gradient3: string;
+    gradient4: string;
+    gradient5: string;
+    gradient6: string;
+    gradient7: string;
+    gradient8: string;
+    gradient9: string;
+    gradient10: string;
+    gradient1Ext: string;
+    gradient2Ext: string;
+    gradient3Ext: string;
+    gradient4Ext: string;
+    gradient5Ext: string;
+    gradient6Ext: string;
+    gradient7Ext: string;
+    gradient8Ext: string;
+    gradient9Ext: string;
+    gradient10Ext: string;
+    success: string;
+    highSuccess: string;
+    warning: string;
+    error: string;
+    highError: string;
+    disabled: string;
+};
+export declare const getNextGradient: (index: number, offset?: number, isDarkTheme?: boolean) => [string, string];
+export declare const getGradientFromToken: (token: string, isDarkTheme?: boolean) => [string, string];

package/lib/utilities/gradients.js

@@ -0,0 +1,173 @@
+export var DataVizGradientPalette = {
+    gradient1: 'default.1',
+    gradient2: 'default.2',
+    gradient3: 'default.3',
+    gradient4: 'default.4',
+    gradient5: 'default.5',
+    gradient6: 'default.6',
+    gradient7: 'default.7',
+    gradient8: 'default.8',
+    gradient9: 'default.9',
+    gradient10: 'default.10',
+    // extended gradients
+    gradient1Ext: 'extended.1',
+    gradient2Ext: 'extended.2',
+    gradient3Ext: 'extended.3',
+    gradient4Ext: 'extended.4',
+    gradient5Ext: 'extended.5',
+    gradient6Ext: 'extended.6',
+    gradient7Ext: 'extended.7',
+    gradient8Ext: 'extended.8',
+    gradient9Ext: 'extended.9',
+    gradient10Ext: 'extended.10',
+    // status gradients
+    success: 'semantic.success',
+    highSuccess: 'semantic.highSuccess',
+    warning: 'semantic.warning',
+    error: 'semantic.error',
+    highError: 'semantic.highError',
+    disabled: 'semantic.disabled',
+};
+var defaultGradientPalette = {
+    '1': [
+        ['#4760D5', '#637CEF'],
+        ['#4F6BED', '#637CEF'], // [cornflower.shade10, cornflower.tint10],
+    ],
+    '2': [
+        ['#795AA6', '#9373C0'],
+        ['#8764B8', '#A083C9'], // [orchid.primary, orchid.tint20],
+    ],
+    '3': [
+        ['#159195', '#2AA0A4'],
+        ['#159195', '#2AA0A4'], // [teal.tint10, teal.tint20],
+    ],
+    '4': [
+        ['#B146C2', '#C36BD1'],
+        ['#B146C2', '#C36BD1'], // [lilac.primary, lilac.tint20],
+    ],
+    '5': [
+        ['#3487C7', '#3A96DD'],
+        ['#3487C7', '#3A96DD'], // [lightBlue.shade20, lightBlue.primary],
+    ],
+    '6': [
+        ['#0E7A0B', '#13A10E'],
+        ['#11910D', '#27AC22'], // [lightGreen.shade10, lightGreen.tint10],
+    ],
+    '7': [
+        ['#E61C99', '#EE5FB7'],
+        ['#E61C99', '#EE5FB7'], // [hotPink.tint10, hotPink.tint30],
+    ],
+    '8': [
+        ['#CA5010', '#D77440'],
+        ['#CA5010', '#D77440'], // [pumpkin.primary, pumpkin.tint10],
+    ],
+    '9': [
+        ['#57811B', '#689920'],
+        ['#57811B', '#689920'], // [lime.shade20, lime.shade10],
+    ],
+    '10': [
+        ['#937700', '#AE8C00'],
+        ['#937700', '#AE8C00'], // [gold.shade20, gold.shade10],
+    ],
+};
+var extendedGradientPalette = {
+    '1': [
+        ['#2C3C85', '#3C51B4'],
+        ['#93A4F4', '#C8D1FA'], // [cornflower.tint30, cornflower.tint40],
+    ],
+    '2': [
+        ['#4C3867', '#674C8C'],
+        ['#A083C9', '#B29AD4'], // [orchid.tint20, orchid.tint30],
+    ],
+    '3': [
+        ['#02494C', '#038387'],
+        ['#4CB4B7', '#9BD9DB'], // [teal.tint30, teal.tint40],
+    ],
+    '4': [
+        ['#63276D', '#863593'],
+        ['#C36BD1', '#CF87DA'], // [lilac.tint20, lilac.tint30],
+    ],
+    '5': [
+        ['#20547C', '#2C72A8'],
+        ['#4FA1E1', '#83BDEB'], // [lightBlue.tint10, lightBlue.tint30],
+    ],
+    '6': [
+        ['#0B5A08', '#0E7A0B'],
+        ['#27AC22', '#5EC75A'], // [lightGreen.tint10, lightGreen.tint30],
+    ],
+    '7': [
+        ['#AD006A', '#E3008C'],
+        ['#EE5FB7', '#F7ADDA'], // [hotPink.tint30, hotPink.tint40],
+    ],
+    '8': [
+        ['#9A3D0C', '#CA5010'],
+        ['#D77440', '#DF8E64'], // [pumpkin.tint20, pumpkin.tint30],
+    ],
+    '9': [
+        ['#405F14', '#57811B'],
+        ['#73AA24', '#A4CC6C'], // [lime.primary, lime.tint30],
+    ],
+    '10': [
+        ['#6D5700', '#937700'],
+        ['#D0B232', '#DAC157'], // [gold.tint20, gold.tint30],
+    ],
+};
+var semanticGradientPalette = {
+    success: [
+        ['#0C5E0C', '#107C10'],
+        ['#218C21', '#359B35'], // [green.tint10, green.tint20],
+    ],
+    highSuccess: [
+        ['#107C10', '#359B35'],
+        ['#359B35', '#9FD89F'], // [green.tint20, green.tint40],
+    ],
+    warning: [
+        ['#DE590B', '#F7630C'],
+        ['#DE590B', '#F87528'], // [orange.shade10, orange.tint10],
+    ],
+    error: [
+        ['#B10E1C', '#CC2635'],
+        ['#D33F4C', '#EEACB2'], // [cranberry.tint20, cranberry.tint40],
+    ],
+    highError: [
+        ['#6E0811', '#B10E1C'],
+        ['#D33F4C', '#DC626D'], // [cranberry.tint20, cranberry.tint30],
+    ],
+    disabled: [
+        ['#E6E6E6', '#F0F0F0'],
+        ['#E6E6E6', '#F0F0F0'],
+    ],
+};
+var Gradients = {
+    default: defaultGradientPalette,
+    semantic: semanticGradientPalette,
+    extended: extendedGradientPalette, // extended gradients
+};
+var DEFAULT_COLORS = Object.values(defaultGradientPalette);
+var TOKENS = Object.values(DataVizGradientPalette);
+var getThemeSpecificGradient = function (gradients, isDarkTheme) {
+    if (gradients.length === 0) {
+        return ['', ''];
+    }
+    var colorIdx = Number(isDarkTheme);
+    if (colorIdx < gradients.length) {
+        return gradients[colorIdx];
+    }
+    return gradients[0];
+};
+export var getNextGradient = function (index, offset, isDarkTheme) {
+    if (offset === void 0) { offset = 0; }
+    if (isDarkTheme === void 0) { isDarkTheme = false; }
+    var gradients = DEFAULT_COLORS[(index + offset) % DEFAULT_COLORS.length];
+    return getThemeSpecificGradient(gradients, isDarkTheme);
+};
+export var getGradientFromToken = function (token, isDarkTheme) {
+    if (isDarkTheme === void 0) { isDarkTheme = false; }
+    if (TOKENS.indexOf(token) >= 0) {
+        var _a = token.split('.'), paletteName = _a[0], colorCode = _a[1];
+        var colors = Gradients[paletteName][colorCode];
+        return getThemeSpecificGradient(colors, isDarkTheme);
+    }
+    return [token, token];
+};
+//# sourceMappingURL=gradients.js.map

package/lib/utilities/gradients.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradients.js","sourceRoot":"../src/","sources":["utilities/gradients.ts"],"names":[],"mappings":"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","sourcesContent":["export const DataVizGradientPalette = {\n  gradient1: 'default.1',\n  gradient2: 'default.2',\n  gradient3: 'default.3',\n  gradient4: 'default.4',\n  gradient5: 'default.5',\n  gradient6: 'default.6',\n  gradient7: 'default.7',\n  gradient8: 'default.8',\n  gradient9: 'default.9',\n  gradient10: 'default.10',\n  // extended gradients\n  gradient1Ext: 'extended.1',\n  gradient2Ext: 'extended.2',\n  gradient3Ext: 'extended.3',\n  gradient4Ext: 'extended.4',\n  gradient5Ext: 'extended.5',\n  gradient6Ext: 'extended.6',\n  gradient7Ext: 'extended.7',\n  gradient8Ext: 'extended.8',\n  gradient9Ext: 'extended.9',\n  gradient10Ext: 'extended.10',\n  // status gradients\n  success: 'semantic.success',\n  highSuccess: 'semantic.highSuccess',\n  warning: 'semantic.warning',\n  error: 'semantic.error',\n  highError: 'semantic.highError',\n  disabled: 'semantic.disabled',\n};\n\n/**\n * Key: Color code.\n * Value:\n *\n * Index 0 - Default gradient for light theme\n *      ├── Index 0 - start color of gradient\n *      └── Index 1 - end color of gradient\n *\n * Index 1 - gradient for dark theme\n *      ├── Index 0 - start color of gradient\n *      └── Index 1 - end color of gradient\n */\ntype GradientPalette = { [key: string]: [string, string][] };\n\nconst defaultGradientPalette: GradientPalette = {\n  '1': [\n    ['#4760D5', '#637CEF'], // [cornflower.shade10, cornflower.tint10],\n    ['#4F6BED', '#637CEF'], // [cornflower.shade10, cornflower.tint10],\n  ],\n  '2': [\n    ['#795AA6', '#9373C0'], // [orchid.shade20, orchid.tint10],\n    ['#8764B8', '#A083C9'], // [orchid.primary, orchid.tint20],\n  ],\n  '3': [\n    ['#159195', '#2AA0A4'], // [teal.tint10, teal.tint20],\n    ['#159195', '#2AA0A4'], // [teal.tint10, teal.tint20],\n  ],\n  '4': [\n    ['#B146C2', '#C36BD1'], // [lilac.primary, lilac.tint20],\n    ['#B146C2', '#C36BD1'], // [lilac.primary, lilac.tint20],\n  ],\n  '5': [\n    ['#3487C7', '#3A96DD'], // [lightBlue.shade10, lightBlue.primary],\n    ['#3487C7', '#3A96DD'], // [lightBlue.shade20, lightBlue.primary],\n  ],\n  '6': [\n    ['#0E7A0B', '#13A10E'], // [lightGreen.shade20, lightGreen.primary],\n    ['#11910D', '#27AC22'], // [lightGreen.shade10, lightGreen.tint10],\n  ],\n  '7': [\n    ['#E61C99', '#EE5FB7'], // [hotPink.tint10, hotPink.tint30],\n    ['#E61C99', '#EE5FB7'], // [hotPink.tint10, hotPink.tint30],\n  ],\n  '8': [\n    ['#CA5010', '#D77440'], // [pumpkin.primary, pumpkin.tint20],\n    ['#CA5010', '#D77440'], // [pumpkin.primary, pumpkin.tint10],\n  ],\n  '9': [\n    ['#57811B', '#689920'], // [lime.shade20, lime.shade10],\n    ['#57811B', '#689920'], // [lime.shade20, lime.shade10],\n  ],\n  '10': [\n    ['#937700', '#AE8C00'], // [gold.shade20, gold.shade10],\n    ['#937700', '#AE8C00'], // [gold.shade20, gold.shade10],\n  ],\n};\n\nconst extendedGradientPalette: GradientPalette = {\n  '1': [\n    ['#2C3C85', '#3C51B4'], // [cornflower.shade30, cornflower.shade20],\n    ['#93A4F4', '#C8D1FA'], // [cornflower.tint30, cornflower.tint40],\n  ],\n  '2': [\n    ['#4C3867', '#674C8C'], // [orchid.shade30, orchid.shade20],\n    ['#A083C9', '#B29AD4'], // [orchid.tint20, orchid.tint30],\n  ],\n  '3': [\n    ['#02494C', '#038387'], // [teal.shade30, teal.primary],\n    ['#4CB4B7', '#9BD9DB'], // [teal.tint30, teal.tint40],\n  ],\n  '4': [\n    ['#63276D', '#863593'], // [lilac.shade30, lilac.shade20],\n    ['#C36BD1', '#CF87DA'], // [lilac.tint20, lilac.tint30],\n  ],\n  '5': [\n    ['#20547C', '#2C72A8'], // [lightBlue.shade30, lightBlue.shade20],\n    ['#4FA1E1', '#83BDEB'], // [lightBlue.tint10, lightBlue.tint30],\n  ],\n  '6': [\n    ['#0B5A08', '#0E7A0B'], // [lightGreen.shade30, lightGreen.shade20],\n    ['#27AC22', '#5EC75A'], // [lightGreen.tint10, lightGreen.tint30],\n  ],\n  '7': [\n    ['#AD006A', '#E3008C'], // [hotPink.shade20, hotPink.primary],\n    ['#EE5FB7', '#F7ADDA'], // [hotPink.tint30, hotPink.tint40],\n  ],\n  '8': [\n    ['#9A3D0C', '#CA5010'], // [pumpkin.shade20, pumpkin.primary],\n    ['#D77440', '#DF8E64'], // [pumpkin.tint20, pumpkin.tint30],\n  ],\n  '9': [\n    ['#405F14', '#57811B'], // [lime.shade30, lime.shade20],\n    ['#73AA24', '#A4CC6C'], // [lime.primary, lime.tint30],\n  ],\n  '10': [\n    ['#6D5700', '#937700'], // [gold.shade30, gold.shade20],\n    ['#D0B232', '#DAC157'], // [gold.tint20, gold.tint30],\n  ],\n};\n\nconst semanticGradientPalette: GradientPalette = {\n  success: [\n    ['#0C5E0C', '#107C10'], // [green.shade20, green.primary],\n    ['#218C21', '#359B35'], // [green.tint10, green.tint20],\n  ],\n  highSuccess: [\n    ['#107C10', '#359B35'], // [green.primary, green.tint20],\n    ['#359B35', '#9FD89F'], // [green.tint20, green.tint40],\n  ],\n  warning: [\n    ['#DE590B', '#F7630C'], // [orange.shade10, orange.primary],\n    ['#DE590B', '#F87528'], // [orange.shade10, orange.tint10],\n  ],\n  error: [\n    ['#B10E1C', '#CC2635'], // [cranberry.shade10, cranberry.tint10],\n    ['#D33F4C', '#EEACB2'], // [cranberry.tint20, cranberry.tint40],\n  ],\n  highError: [\n    ['#6E0811', '#B10E1C'], // [cranberry.shade30, cranberry.shade10],\n    ['#D33F4C', '#DC626D'], // [cranberry.tint20, cranberry.tint30],\n  ],\n  disabled: [\n    ['#E6E6E6', '#F0F0F0'],\n    ['#E6E6E6', '#F0F0F0'],\n  ],\n};\n\nconst Gradients: { [key: string]: GradientPalette } = {\n  default: defaultGradientPalette, // base gradients\n  semantic: semanticGradientPalette, // status gradients\n  extended: extendedGradientPalette, // extended gradients\n};\n\nconst DEFAULT_COLORS = Object.values(defaultGradientPalette);\nconst TOKENS = Object.values(DataVizGradientPalette);\n\nconst getThemeSpecificGradient = (gradients: [string, string][], isDarkTheme: boolean): [string, string] => {\n  if (gradients.length === 0) {\n    return ['', ''];\n  }\n\n  const colorIdx = Number(isDarkTheme);\n\n  if (colorIdx < gradients.length) {\n    return gradients[colorIdx];\n  }\n\n  return gradients[0];\n};\n\nexport const getNextGradient = (index: number, offset: number = 0, isDarkTheme: boolean = false): [string, string] => {\n  const gradients = DEFAULT_COLORS[(index + offset) % DEFAULT_COLORS.length];\n  return getThemeSpecificGradient(gradients, isDarkTheme);\n};\n\nexport const getGradientFromToken = (token: string, isDarkTheme: boolean = false): [string, string] => {\n  if (TOKENS.indexOf(token) >= 0) {\n    const [paletteName, colorCode] = token.split('.');\n    const colors = Gradients[paletteName][colorCode];\n\n    return getThemeSpecificGradient(colors, isDarkTheme);\n  }\n  return [token, token];\n};\n"]}

package/lib/utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ChartHoverCard/index';
 export * from './utilities';
 export * from './colors';
+export * from './gradients';
 export * from './vbc-utils';

package/lib/utilities/index.js

@@ -1,5 +1,6 @@
 export * from './ChartHoverCard/index';
 export * from './utilities';
 export * from './colors';
+export * from './gradients';
 export * from './vbc-utils';
 //# sourceMappingURL=index.js.map

package/lib/utilities/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC","sourcesContent":["export * from './ChartHoverCard/index';\nexport * from './utilities';\nexport * from './colors';\nexport * from './vbc-utils';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC","sourcesContent":["export * from './ChartHoverCard/index';\nexport * from './utilities';\nexport * from './colors';\nexport * from './gradients';\nexport * from './vbc-utils';\n"]}

package/lib/version.js

@@ -1,5 +1,5 @@
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 import { setVersion } from '@fluentui/set-version';
-setVersion('@fluentui/react-charting', '5.21.32');
+setVersion('@fluentui/react-charting', '5.22.1');
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.21.32');"]}
+{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,0BAA0B,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.22.1');"]}

package/lib-amd/components/DonutChart/Arc/Arc.js

@@ -50,20 +50,37 @@ define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib
         };
         Arc.prototype.render = function () {
             var _a;
-            var _b;
+            var _b, _c, _d, _e, _f;
             var arc = (_a = this.props, _a.arc), href = _a.href, focusedArcId = _a.focusedArcId;
             var getClassNames = (0, Utilities_1.classNamesFunction)();
             var classNames = getClassNames(Arc_styles_1.getStyles, {
                 color: this.props.color,
                 href: href,
                 theme: this.props.theme,
+                nextColor: this.props.nextColor,
             });
             var id = this.props.uniqText + this.props.data.data.legend.replace(/\s+/, '') + this.props.data.data.data;
             var opacity = this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '' ? 1 : 0.1;
+            var startAngle = (_c = (_b = this.props.data) === null || _b === void 0 ? void 0 : _b.startAngle) !== null && _c !== void 0 ? _c : 0;
+            var endAngle = ((_e = (_d = this.props.data) === null || _d === void 0 ? void 0 : _d.endAngle) !== null && _e !== void 0 ? _e : 0) - startAngle;
+            var cornerRadius = this.props.roundCorners ? 3 : 0;
+            var clipId = (0, Utilities_1.getId)('Arc_clip') + "".concat(this.props.color, "_").concat(this.props.nextColor);
             return (React.createElement("g", { ref: this.currentRef },
-                !!focusedArcId && focusedArcId === id && (React.createElement("path", { id: id + 'focusRing', d: arc(this.props.focusData), className: classNames.focusRing })),
-                React.createElement("path", { id: id, d: arc(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '', onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, opacity: opacity, onClick: href ? this._redirectToUrl.bind(this, href) : (_b = this.props.data) === null || _b === void 0 ? void 0 : _b.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
-                this._renderArcLabel(classNames.arcLabel)));
+                !!focusedArcId && focusedArcId === id && (React.createElement("path", { id: id + 'focusRing', d: arc.cornerRadius(cornerRadius)(this.props.focusData), className: classNames.focusRing })),
+                React.createElement("path", { id: id, d: arc.cornerRadius(cornerRadius)(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, fill: this.props.enableGradient ? 'transparent' : this.props.color, "data-is-focusable": this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '', onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, opacity: opacity, onClick: href ? this._redirectToUrl.bind(this, href) : (_f = this.props.data) === null || _f === void 0 ? void 0 : _f.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
+                this._renderArcLabel(classNames.arcLabel),
+                this.props.enableGradient && (React.createElement(React.Fragment, null,
+                    React.createElement("clipPath", { id: clipId },
+                        React.createElement("path", { d: arc.cornerRadius(cornerRadius)(this.props.data) })),
+                    React.createElement("foreignObject", { x: "-50%", y: "-50%", width: "100%", height: "100%", clipPath: "url(#".concat(clipId, ")") },
+                        React.createElement("div", { style: {
+                                width: '100%',
+                                height: '100%',
+                                background: this.props.enableGradient
+                                    ? "conic-gradient(\n                      from ".concat(startAngle, "rad,\n                      ").concat(this.props.color, ",\n                      ").concat(this.props.nextColor, " ").concat(endAngle, "rad\n                    )")
+                                    : this.props.color,
+                                opacity: opacity,
+                            } }))))));
         };
         Arc.prototype._onFocus = function (data, id) {
             this.props.onFocusCallback(data, id, this.currentRef.current);

package/lib-amd/components/DonutChart/Arc/Arc.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatValueWithSIPrefix } from '../../../utilities/index';\n\nexport interface IArcState {\n  isCalloutVisible?: boolean;\n}\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: d3Arc(),\n  };\n\n  public state: {} = {};\n\n  private currentRef = React.createRef<SVGPathElement>();\n  private _isRTL: boolean = getRTL();\n\n  public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> | null {\n    _updateChart(nextProps);\n    return null;\n  }\n\n  public updateChart(newProps: IArcProps): void {\n    _updateChart(newProps);\n  }\n\n  public render(): JSX.Element {\n    const { arc, href, focusedArcId } = this.props;\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(getStyles, {\n      color: this.props.color,\n      href: href!,\n      theme: this.props.theme!,\n    });\n    const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n    const opacity: number =\n      this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '' ? 1 : 0.1;\n    return (\n      <g ref={this.currentRef}>\n        {!!focusedArcId && focusedArcId === id && (\n          <path id={id + 'focusRing'} d={arc(this.props.focusData)} className={classNames.focusRing} />\n        )}\n        <path\n          id={id}\n          d={arc(this.props.data)}\n          onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n          className={classNames.root}\n          data-is-focusable={this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === ''}\n          onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseLeave={this._hoverOff}\n          onBlur={this._onBlur}\n          opacity={opacity}\n          onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n          aria-label={this._getAriaLabel()}\n          role=\"img\"\n        />\n        {this._renderArcLabel(classNames.arcLabel)}\n      </g>\n    );\n  }\n\n  private _onFocus(data: IChartDataPoint, id: string): void {\n    this.props.onFocusCallback!(data, id, this.currentRef.current);\n  }\n\n  private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n    mouseEvent.persist();\n    this.props.hoverOnCallback!(data, mouseEvent);\n  }\n\n  private _hoverOff = (): void => {\n    this.props.hoverLeaveCallback!();\n  };\n\n  private _onBlur = (): void => {\n    this.props.onBlurCallback!();\n  };\n\n  private _redirectToUrl(href: string | undefined): void {\n    href ? (window.location.href = href) : '';\n  }\n\n  private _getAriaLabel = (): string => {\n    const point = this.props.data!.data;\n    const legend = point.xAxisCalloutData || point.legend;\n    const yValue = point.yAxisCalloutData || point.data || 0;\n    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n  };\n\n  private _renderArcLabel = (className: string) => {\n    const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props;\n\n    if (\n      hideLabels ||\n      Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n      (activeArc !== data!.data.legend && activeArc !== '')\n    ) {\n      return null;\n    }\n\n    const [base, perp] = arc.centroid(data);\n    const hyp = Math.sqrt(base * base + perp * perp);\n    const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n    const angle = (data!.startAngle + data!.endAngle) / 2;\n    const arcValue = data!.value;\n\n    return (\n      <text\n        x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n        y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n        textAnchor={angle > Math.PI !== this._isRTL ? 'end' : 'start'}\n        dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n        className={className}\n        aria-hidden={true}\n      >\n        {showLabelsInPercent\n          ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n          : formatValueWithSIPrefix(arcValue)}\n      </text>\n    );\n  };\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n  newProps.arc.innerRadius(newProps.innerRadius);\n  newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}
+{"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { arc as d3Arc } from 'd3-shape';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatValueWithSIPrefix } from '../../../utilities/index';\n\nexport interface IArcState {\n  isCalloutVisible?: boolean;\n}\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n  public static defaultProps: Partial<IArcProps> = {\n    arc: d3Arc(),\n  };\n\n  public state: {} = {};\n\n  private currentRef = React.createRef<SVGPathElement>();\n  private _isRTL: boolean = getRTL();\n\n  public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> | null {\n    _updateChart(nextProps);\n    return null;\n  }\n\n  public updateChart(newProps: IArcProps): void {\n    _updateChart(newProps);\n  }\n\n  public render(): JSX.Element {\n    const { arc, href, focusedArcId } = this.props;\n    const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n    const classNames = getClassNames(getStyles, {\n      color: this.props.color,\n      href: href!,\n      theme: this.props.theme!,\n      nextColor: this.props.nextColor,\n    });\n    const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n    const opacity: number =\n      this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '' ? 1 : 0.1;\n\n    const startAngle = this.props.data?.startAngle ?? 0;\n    const endAngle = (this.props.data?.endAngle ?? 0) - startAngle;\n    const cornerRadius = this.props.roundCorners ? 3 : 0;\n\n    const clipId = getId('Arc_clip') + `${this.props.color}_${this.props.nextColor}`;\n\n    return (\n      <g ref={this.currentRef}>\n        {!!focusedArcId && focusedArcId === id && (\n          <path\n            id={id + 'focusRing'}\n            d={arc.cornerRadius(cornerRadius)(this.props.focusData)}\n            className={classNames.focusRing}\n          />\n        )}\n\n        <path\n          id={id}\n          d={arc.cornerRadius(cornerRadius)(this.props.data)}\n          onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n          className={classNames.root}\n          fill={this.props.enableGradient ? 'transparent' : this.props.color}\n          data-is-focusable={this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === ''}\n          onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n          onMouseLeave={this._hoverOff}\n          onBlur={this._onBlur}\n          opacity={opacity}\n          onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n          aria-label={this._getAriaLabel()}\n          role=\"img\"\n        />\n        {this._renderArcLabel(classNames.arcLabel)}\n\n        {this.props.enableGradient && (\n          <>\n            <clipPath id={clipId}>\n              <path d={arc.cornerRadius(cornerRadius)(this.props.data)} />\n            </clipPath>\n            <foreignObject x=\"-50%\" y=\"-50%\" width=\"100%\" height=\"100%\" clipPath={`url(#${clipId})`}>\n              <div\n                style={{\n                  width: '100%',\n                  height: '100%',\n                  background: this.props.enableGradient\n                    ? `conic-gradient(\n                      from ${startAngle}rad,\n                      ${this.props.color},\n                      ${this.props.nextColor} ${endAngle}rad\n                    )`\n                    : this.props.color,\n                  opacity,\n                }}\n              />\n            </foreignObject>\n          </>\n        )}\n      </g>\n    );\n  }\n\n  private _onFocus(data: IChartDataPoint, id: string): void {\n    this.props.onFocusCallback!(data, id, this.currentRef.current);\n  }\n\n  private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n    mouseEvent.persist();\n    this.props.hoverOnCallback!(data, mouseEvent);\n  }\n\n  private _hoverOff = (): void => {\n    this.props.hoverLeaveCallback!();\n  };\n\n  private _onBlur = (): void => {\n    this.props.onBlurCallback!();\n  };\n\n  private _redirectToUrl(href: string | undefined): void {\n    href ? (window.location.href = href) : '';\n  }\n\n  private _getAriaLabel = (): string => {\n    const point = this.props.data!.data;\n    const legend = point.xAxisCalloutData || point.legend;\n    const yValue = point.yAxisCalloutData || point.data || 0;\n    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n  };\n\n  private _renderArcLabel = (className: string) => {\n    const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels, activeArc } = this.props;\n\n    if (\n      hideLabels ||\n      Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n      (activeArc !== data!.data.legend && activeArc !== '')\n    ) {\n      return null;\n    }\n\n    const [base, perp] = arc.centroid(data);\n    const hyp = Math.sqrt(base * base + perp * perp);\n    const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n    const angle = (data!.startAngle + data!.endAngle) / 2;\n    const arcValue = data!.value;\n\n    return (\n      <text\n        x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n        y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n        textAnchor={angle > Math.PI !== this._isRTL ? 'end' : 'start'}\n        dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n        className={className}\n        aria-hidden={true}\n      >\n        {showLabelsInPercent\n          ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n          : formatValueWithSIPrefix(arcValue)}\n      </text>\n    );\n  };\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n  newProps.arc.innerRadius(newProps.innerRadius);\n  newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}

package/lib-amd/components/DonutChart/Arc/Arc.types.d.ts

@@ -81,6 +81,21 @@ export interface IArcProps {
      * Prop to hide the arc labels
      */
     hideLabels?: boolean;
+    /**
+     * Prop to enable the gradient in the arc
+     * @default false
+     */
+    enableGradient?: boolean;
+    /**
+     * Prop to enable the round corners in the chart
+     * @default false
+     */
+    roundCorners?: boolean;
+    /**
+     * Next color stop for the gradient
+     * [Only used when enableGradient is True].
+     */
+    nextColor: string;
 }
 export interface IArcData {
     /**

package/lib-amd/components/DonutChart/Arc/Arc.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\nexport interface IArcProps {\n  /**\n   * Theme\n   */\n  theme: ITheme;\n  /**\n   * Data to render in the Arc.\n   */\n  data?: IArcData;\n\n  /**\n   * Data to render focused Arc\n   */\n  focusData?: IArcData;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n  /**\n   * shape for  Arc.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  arc?: any;\n\n  /**\n   * innerRadius of the Arc.\n   */\n  innerRadius?: number;\n\n  /**\n   * outerRadius of the Arc.\n   */\n  outerRadius?: number;\n\n  /**\n   * Color for the Arc.\n   */\n  color: string;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop used to define the sum of all arc values\n   */\n  totalValue?: number;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n}\n\nexport interface IArcData {\n  /**\n   * Data to render in the chart for individual arc.\n   */\n  data: IChartDataPoint;\n  /**\n   * endAngle of the Arc\n   */\n  endAngle: number;\n  /**\n   * index of the Arc\n   */\n  index: number;\n  /**\n   * padAngle of the Arc\n   */\n  padAngle: number;\n  /**\n   * startAngle of the Arc\n   */\n  startAngle: number;\n  /**\n   * value of the Arc\n   */\n  value: number;\n}\n\nexport interface IArcStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: IStyle;\n\n  /**\n   * styles for the focus\n   */\n  focusRing: IStyle;\n\n  /**\n   * Style for the arc labels\n   */\n  arcLabel: IStyle;\n}\n"]}
+{"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\nexport interface IArcProps {\n  /**\n   * Theme\n   */\n  theme: ITheme;\n  /**\n   * Data to render in the Arc.\n   */\n  data?: IArcData;\n\n  /**\n   * Data to render focused Arc\n   */\n  focusData?: IArcData;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n  /**\n   * shape for  Arc.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  arc?: any;\n\n  /**\n   * innerRadius of the Arc.\n   */\n  innerRadius?: number;\n\n  /**\n   * outerRadius of the Arc.\n   */\n  outerRadius?: number;\n\n  /**\n   * Color for the Arc.\n   */\n  color: string;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop used to define the sum of all arc values\n   */\n  totalValue?: number;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Prop to enable the gradient in the arc\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   * Next color stop for the gradient\n   * [Only used when enableGradient is True].\n   */\n  nextColor: string;\n}\n\nexport interface IArcData {\n  /**\n   * Data to render in the chart for individual arc.\n   */\n  data: IChartDataPoint;\n  /**\n   * endAngle of the Arc\n   */\n  endAngle: number;\n  /**\n   * index of the Arc\n   */\n  index: number;\n  /**\n   * padAngle of the Arc\n   */\n  padAngle: number;\n  /**\n   * startAngle of the Arc\n   */\n  startAngle: number;\n  /**\n   * value of the Arc\n   */\n  value: number;\n}\n\nexport interface IArcStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: IStyle;\n\n  /**\n   * styles for the focus\n   */\n  focusRing: IStyle;\n\n  /**\n   * Style for the arc labels\n   */\n  arcLabel: IStyle;\n}\n"]}

package/lib-amd/components/DonutChart/DonutChart.base.js

@@ -29,15 +29,21 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 });
             };
             _this._hoverCallback = function (data, e) {
+                var _a, _b, _c, _d;
                 if (_this._calloutAnchorPoint !== data) {
                     _this._calloutAnchorPoint = data;
                     _this._currentHoverElement = e;
+                    var color = data.color;
+                    if (_this.props.enableGradient) {
+                        var pointIndex = Math.max(((_b = (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.chartData) === null || _b === void 0 ? void 0 : _b.findIndex(function (item) { return item.legend === data.legend; })) || 0, 0);
+                        color = ((_c = data.gradient) === null || _c === void 0 ? void 0 : _c[0]) || (0, index_3.getNextGradient)(pointIndex, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[0];
+                    }
                     _this.setState({
                         /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */
                         showHover: _this.state.selectedLegend === '' || _this.state.selectedLegend === data.legend,
                         value: data.data.toString(),
                         legend: data.legend,
-                        color: data.color,
+                        color: color,
                         xCalloutValue: data.xAxisCalloutData,
                         yCalloutValue: data.yAxisCalloutData,
                         dataPointCalloutProps: data,
@@ -130,7 +136,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, handleTabKey: react_focus_1.FocusZoneTabbableElements.all },
                     React.createElement("div", null,
                         React.createElement("svg", { className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle, ref: function (node) { return _this._setViewBox(node); } },
-                            React.createElement(index_2.Pie, { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels })))),
+                            React.createElement(index_2.Pie, { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, enableGradient: this.props.enableGradient, roundCorners: this.props.roundCorners, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels })))),
                 React.createElement(Callout_1.Callout, tslib_1.__assign({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: Callout_1.DirectionalHint.topAutoEdge, gapSpace: 15, hidden: !(!this.props.hideTooltip && this.state.showHover), id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true, 
                     /** Keep the callout updated with details of focused/hovered arc */
                     shouldUpdateWhenHidden: true }, this.props.calloutProps, (0, index_3.getAccessibleDataObject)(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(index_1.ChartHoverCard, { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value, color: this.state.color, culture: this.props.culture }))),
@@ -164,7 +170,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
         DonutChartBase.prototype._createLegends = function (chartData) {
             var _this = this;
             var legendDataItems = chartData.map(function (point, index) {
-                var color = point.color;
+                var _a, _b;
+                var color = _this.props.enableGradient
+                    ? ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || (0, index_3.getNextGradient)(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0]
+                    : point.color;
                 // mapping data to the format Legends component needs
                 var legend = {
                     title: point.legend,