@fluentui/react-charting 5.23.58 → 5.23.60

package/lib-amd/types/IDataPoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\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 React.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?: React.SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: React.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   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\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\n/**\n * {@docCategory Chart}\n */\nexport interface IChart {\n  chartContainer: HTMLElement | null;\n}\n"]}
+{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\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   * Marker size of the points\n   */\n  markerSize?: number;\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 React.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?: React.SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: React.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   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\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\n/**\n * {@docCategory Chart}\n */\nexport interface IChart {\n  chartContainer: HTMLElement | null;\n  toImage?: (opts?: IImageExportOptions) => Promise<string>;\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IImageExportOptions {\n  width?: number;\n  height?: number;\n  scale?: number;\n  background?: string;\n}\n"]}

package/lib-amd/utilities/image-export-utils.d.ts

@@ -0,0 +1,13 @@
+import { IImageExportOptions } from '../types/index';
+import { ILegend, ILegendContainer } from '../Legends';
+export declare function toImage(chartContainer: HTMLElement | null | undefined, legendsToSvgCallback?: ILegendContainer['toSVG'], isRTL?: boolean, opts?: IImageExportOptions): Promise<string>;
+export declare function cloneLegendsToSVG(legends: ILegend[], svgWidth: number, config: {
+    selectedLegends: Record<string, boolean>;
+    centerLegends: boolean;
+    textClassName: string;
+    isRTL: boolean;
+}, legendContainer?: HTMLElement | null): {
+    node: SVGGElement | null;
+    width: number;
+    height: number;
+};

package/lib-amd/{components/DeclarativeChart/imageExporter.js → utilities/image-export-utils.js}

@@ -1,8 +1,9 @@
-define(["require", "exports", "tslib", "d3-selection", "../../utilities/index"], function (require, exports, tslib_1, d3_selection_1, index_1) {
+define(["require", "exports", "tslib", "d3-selection", "./index", "../components/Legends/Legends.styles"], function (require, exports, tslib_1, d3_selection_1, index_1, Legends_styles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.toImage = void 0;
-    function toImage(chartContainer, opts) {
+    exports.cloneLegendsToSVG = exports.toImage = void 0;
+    function toImage(chartContainer, legendsToSvgCallback, isRTL, opts) {
+        if (isRTL === void 0) { isRTL = false; }
         if (opts === void 0) { opts = {}; }
         return new Promise(function (resolve, reject) {
             if (!chartContainer) {
@@ -10,7 +11,7 @@ define(["require", "exports", "tslib", "d3-selection", "../../utilities/index"],
             }
             try {
                 var background = typeof opts.background === 'string' ? (0, index_1.resolveCSSVariables)(chartContainer, opts.background) : 'transparent';
-                var svg = toSVG(chartContainer, background);
+                var svg = toSVG(chartContainer, legendsToSvgCallback, isRTL, background);
                 var svgData = new XMLSerializer().serializeToString(svg.node);
                 var svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));
                 svgToPng(svgDataUrl, {
@@ -29,7 +30,7 @@ define(["require", "exports", "tslib", "d3-selection", "../../utilities/index"],
     exports.toImage = toImage;
     var SVG_STYLE_PROPERTIES = ['display', 'fill', 'fill-opacity', 'opacity', 'stroke', 'stroke-width', 'transform'];
     var SVG_TEXT_STYLE_PROPERTIES = ['font-family', 'font-size', 'font-weight', 'text-anchor'];
-    function toSVG(chartContainer, background) {
+    function toSVG(chartContainer, legendsToSvgCallback, isRTL, background) {
         var svg = chartContainer.querySelector('svg');
         if (!svg) {
             throw new Error('SVG not found');
@@ -42,17 +43,20 @@ define(["require", "exports", "tslib", "d3-selection", "../../utilities/index"],
         var clonedSvgElements = clonedSvg.node().getElementsByTagName('*');
         for (var i = 0; i < svgElements.length; i++) {
             if (svgElements[i].tagName.toLowerCase() === 'text') {
-                copyStyle(tslib_1.__spreadArray(tslib_1.__spreadArray([], SVG_STYLE_PROPERTIES, true), SVG_TEXT_STYLE_PROPERTIES, true), svgElements[i], clonedSvgElements[i]);
+                (0, index_1.copyStyle)(tslib_1.__spreadArray(tslib_1.__spreadArray([], SVG_STYLE_PROPERTIES, true), SVG_TEXT_STYLE_PROPERTIES, true), svgElements[i], clonedSvgElements[i]);
             }
             else {
-                copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);
+                (0, index_1.copyStyle)(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);
             }
         }
         var _a = svg.getBoundingClientRect(), svgWidth = _a.width, svgHeight = _a.height;
-        var legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight);
+        var legendGroup = typeof legendsToSvgCallback === 'function'
+            ? legendsToSvgCallback(svgWidth, isRTL)
+            : { node: null, width: 0, height: 0 };
         var w1 = Math.max(svgWidth, legendGroup.width);
         var h1 = svgHeight + legendGroup.height;
         if (legendGroup.node) {
+            (0, d3_selection_1.select)(legendGroup.node).attr('transform', "translate(0, ".concat(svgHeight, ")"));
             clonedSvg.append(function () { return legendGroup.node; });
         }
         clonedSvg
@@ -62,91 +66,102 @@ define(["require", "exports", "tslib", "d3-selection", "../../utilities/index"],
             .attr('width', w1)
             .attr('height', h1)
             .attr('fill', background);
-        clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', "0 0 ".concat(w1, " ").concat(h1));
+        clonedSvg
+            .attr('width', w1)
+            .attr('height', h1)
+            .attr('viewBox', "0 0 ".concat(w1, " ").concat(h1))
+            .attr('direction', isRTL ? 'rtl' : 'ltr');
         return {
             node: clonedSvg.node(),
             width: w1,
             height: h1,
         };
     }
-    var LEGEND_RECT_STYLE_PROPERTIES_MAP = {
-        'background-color': 'fill',
-        'border-color': 'stroke',
-    };
     var LEGEND_TEXT_STYLE_PROPERTIES_MAP = {
         color: 'fill',
         'font-family': 'font-family',
         'font-size': 'font-size',
         'font-weight': 'font-weight',
-        opacity: 'opacity',
     };
-    function cloneLegendsToSVG(chartContainer, svgWidth, svgHeight) {
-        var legendButtons = chartContainer.querySelectorAll("\n    button[class^=\"legend-\"],\n    [class^=\"legendContainer-\"] div[class^=\"overflowIndicationTextStyle-\"],\n    [class^=\"legendsContainer-\"] div[class^=\"overflowIndicationTextStyle-\"]\n  ");
-        if (legendButtons.length === 0) {
+    function cloneLegendsToSVG(legends, svgWidth, config, legendContainer) {
+        if (legends.length === 0) {
             return {
                 node: null,
                 width: 0,
                 height: 0,
             };
         }
+        var selectedLegends = config.selectedLegends, centerLegends = config.centerLegends, textClassName = config.textClassName, isRTL = config.isRTL;
         var legendGroup = (0, d3_selection_1.create)('svg:g');
-        var legendX = 0;
-        var legendY = 8;
+        var legendX = centerLegends ? 0 : Legends_styles_1.LEGEND_CONTAINER_MARGIN_START;
+        var legendY = Legends_styles_1.LEGEND_CONTAINER_MARGIN_TOP;
         var legendLine = [];
         var legendLines = [];
         var legendLineWidths = [];
+        var noLegendsSelected = Object.keys(selectedLegends).length === 0;
         var _loop_1 = function (i) {
-            var legendWidth = legendButtons[i].getBoundingClientRect().width;
+            var textOffset = Legends_styles_1.LEGEND_PADDING + Legends_styles_1.LEGEND_SHAPE_SIZE + Legends_styles_1.LEGEND_SHAPE_MARGIN_END;
+            var legendText = (0, index_1.createMeasurementSpan)(legends[i].title, textClassName, legendContainer);
+            var legendWidth = textOffset + legendText.getBoundingClientRect().width + Legends_styles_1.LEGEND_PADDING;
             var legendItem = legendGroup.append('g');
-            legendLine.push(legendItem);
+            legendLine.push({ elem: legendItem, width: legendWidth });
             if (legendX + legendWidth > svgWidth && legendLine.length > 1) {
                 legendLine.pop();
                 legendLines.push(legendLine);
                 legendLineWidths.push(legendX);
-                legendLine = [legendItem];
-                legendX = 0;
-                legendY += 32;
-            }
-            var legendText;
-            var textOffset = 0;
-            if (legendButtons[i].tagName.toLowerCase() === 'button') {
-                var legendRect_1 = legendButtons[i].querySelector('[class^="rect"]');
-                legendText = legendButtons[i].querySelector('[class^="text"]');
-                legendItem
-                    .append('rect')
-                    .attr('x', legendX + 8)
-                    .attr('y', svgHeight + legendY + 8)
-                    .attr('width', 12)
-                    .attr('height', 12)
-                    .attr('stroke-width', 1)
-                    .call(function (selection) { return copyStyle(LEGEND_RECT_STYLE_PROPERTIES_MAP, legendRect_1, selection.node()); });
-                textOffset = 28;
-            }
-            else {
-                legendText = legendButtons[i];
-                textOffset = 8;
+                legendLine = [{ elem: legendItem, width: legendWidth }];
+                legendX = centerLegends ? 0 : Legends_styles_1.LEGEND_CONTAINER_MARGIN_START;
+                legendY += Legends_styles_1.LEGEND_HEIGHT;
             }
+            var isLegendActive = selectedLegends[legends[i].title] || noLegendsSelected;
+            legendItem
+                .append('rect')
+                .attr('x', legendX + (isRTL ? legendWidth - Legends_styles_1.LEGEND_PADDING - Legends_styles_1.LEGEND_SHAPE_SIZE : Legends_styles_1.LEGEND_PADDING))
+                .attr('y', legendY + Legends_styles_1.LEGEND_PADDING)
+                .attr('width', Legends_styles_1.LEGEND_SHAPE_SIZE)
+                .attr('height', Legends_styles_1.LEGEND_SHAPE_SIZE)
+                .style('fill', isLegendActive ? legends[i].color : 'transparent')
+                .style('stroke-width', Legends_styles_1.LEGEND_SHAPE_BORDER)
+                .style('stroke', legends[i].color);
             legendItem
                 .append('text')
-                .attr('x', legendX + textOffset)
-                .attr('y', svgHeight + legendY + 8)
+                .attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset))
+                .attr('y', legendY + Legends_styles_1.LEGEND_PADDING)
                 .attr('dominant-baseline', 'hanging')
-                .text(legendText.textContent)
-                .call(function (selection) { return copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()); });
+                .style('opacity', isLegendActive ? 1 : Legends_styles_1.INACTIVE_LEGEND_TEXT_OPACITY)
+                .text(legends[i].title)
+                .call(function (selection) { return (0, index_1.copyStyle)(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()); });
             legendX += legendWidth;
         };
-        for (var i = 0; i < legendButtons.length; i++) {
+        for (var i = 0; i < legends.length; i++) {
             _loop_1(i);
         }
         legendLines.push(legendLine);
         legendLineWidths.push(legendX);
-        legendY += 32;
-        var centerLegends = true;
+        legendY += Legends_styles_1.LEGEND_HEIGHT;
         if (centerLegends) {
             legendLines.forEach(function (ln, idx) {
-                var offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);
+                var lineOffsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);
+                var remLineWidth = legendLineWidths[idx];
+                var itemOffsetX = 0;
                 ln.forEach(function (item) {
-                    item.attr('transform', "translate(".concat(offsetX, ", 0)"));
+                    var newOffsetX = lineOffsetX + (isRTL ? remLineWidth - item.width - itemOffsetX : 0);
+                    item.elem.attr('transform', "translate(".concat(newOffsetX, ", 0)"));
+                    remLineWidth -= item.width;
+                    itemOffsetX += item.width;
+                });
+            });
+        }
+        else if (isRTL) {
+            var w1_1 = Math.max.apply(Math, tslib_1.__spreadArray([svgWidth], legendLineWidths, false));
+            legendLines.forEach(function (ln) {
+                var remLineWidth = w1_1 - Legends_styles_1.LEGEND_CONTAINER_MARGIN_START;
+                var itemOffsetX = Legends_styles_1.LEGEND_CONTAINER_MARGIN_START;
+                ln.forEach(function (item) {
+                    var newOffsetX = remLineWidth - item.width - itemOffsetX;
+                    item.elem.attr('transform', "translate(".concat(newOffsetX, ", 0)"));
+                    remLineWidth -= item.width;
+                    itemOffsetX += item.width;
                 });
             });
         }
@@ -156,6 +171,7 @@ define(["require", "exports", "tslib", "d3-selection", "../../utilities/index"],
             height: legendY,
         };
     }
+    exports.cloneLegendsToSVG = cloneLegendsToSVG;
     function svgToPng(svgDataUrl, opts) {
         if (opts === void 0) { opts = {}; }
         return new Promise(function (resolve, reject) {
@@ -221,19 +237,5 @@ define(["require", "exports", "tslib", "d3-selection", "../../utilities/index"],
         }
         return result;
     }
-    function copyStyle(properties, fromEl, toEl) {
-        var styles = getComputedStyle(fromEl);
-        if (Array.isArray(properties)) {
-            properties.forEach(function (prop) {
-                (0, d3_selection_1.select)(toEl).style(prop, styles.getPropertyValue(prop));
-            });
-        }
-        else {
-            Object.entries(properties).forEach(function (_a) {
-                var fromProp = _a[0], toProp = _a[1];
-                (0, d3_selection_1.select)(toEl).style(toProp, styles.getPropertyValue(fromProp));
-            });
-        }
-    }
 });
-//# sourceMappingURL=imageExporter.js.map
+//# sourceMappingURL=image-export-utils.js.map

package/lib-amd/utilities/image-export-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-export-utils.js","sourceRoot":"../src/","sources":["utilities/image-export-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { create as d3Create, select as d3Select, Selection } from 'd3-selection';\nimport { copyStyle, createMeasurementSpan, resolveCSSVariables } from './index';\nimport { IImageExportOptions } from '../types/index';\nimport { ILegend, ILegendContainer } from '../Legends';\nimport {\n  LEGEND_CONTAINER_MARGIN_TOP,\n  LEGEND_CONTAINER_MARGIN_START,\n  LEGEND_PADDING,\n  LEGEND_HEIGHT,\n  LEGEND_SHAPE_BORDER,\n  LEGEND_SHAPE_SIZE,\n  LEGEND_SHAPE_MARGIN_END,\n  INACTIVE_LEGEND_TEXT_OPACITY,\n} from '../components/Legends/Legends.styles';\n\nexport function toImage(\n  chartContainer: HTMLElement | null | undefined,\n  legendsToSvgCallback?: ILegendContainer['toSVG'],\n  isRTL: boolean = false,\n  opts: IImageExportOptions = {},\n): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (!chartContainer) {\n      return reject(new Error('Chart container is not defined'));\n    }\n\n    try {\n      const background =\n        typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';\n      const svg = toSVG(chartContainer, legendsToSvgCallback, isRTL, background);\n\n      const svgData = new XMLSerializer().serializeToString(svg.node);\n      const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n\n      svgToPng(svgDataUrl, {\n        width: opts.width || svg.width,\n        height: opts.height || svg.height,\n        scale: opts.scale,\n      })\n        .then(resolve)\n        .catch(reject);\n    } catch (err) {\n      return reject(err);\n    }\n  });\n}\n\nconst SVG_STYLE_PROPERTIES = ['display', 'fill', 'fill-opacity', 'opacity', 'stroke', 'stroke-width', 'transform'];\nconst SVG_TEXT_STYLE_PROPERTIES = ['font-family', 'font-size', 'font-weight', 'text-anchor'];\n\nfunction toSVG(\n  chartContainer: HTMLElement,\n  legendsToSvgCallback: ILegendContainer['toSVG'] | undefined,\n  isRTL: boolean,\n  background: string,\n) {\n  const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n  if (!svg) {\n    throw new Error('SVG not found');\n  }\n\n  const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n    .attr('width', null)\n    .attr('height', null)\n    .attr('viewBox', null);\n  const svgElements = svg.getElementsByTagName('*');\n  const clonedSvgElements = clonedSvg.node()!.getElementsByTagName('*');\n\n  for (let i = 0; i < svgElements.length; i++) {\n    if (svgElements[i].tagName.toLowerCase() === 'text') {\n      copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], svgElements[i], clonedSvgElements[i]);\n    } else {\n      copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);\n    }\n  }\n\n  const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n  const legendGroup =\n    typeof legendsToSvgCallback === 'function'\n      ? legendsToSvgCallback(svgWidth, isRTL)\n      : { node: null, width: 0, height: 0 };\n  const w1 = Math.max(svgWidth, legendGroup.width);\n  const h1 = svgHeight + legendGroup.height;\n\n  if (legendGroup.node) {\n    d3Select(legendGroup.node).attr('transform', `translate(0, ${svgHeight})`);\n    clonedSvg.append(() => legendGroup.node);\n  }\n  clonedSvg\n    .insert('rect', ':first-child')\n    .attr('x', 0)\n    .attr('y', 0)\n    .attr('width', w1)\n    .attr('height', h1)\n    .attr('fill', background);\n  clonedSvg\n    .attr('width', w1)\n    .attr('height', h1)\n    .attr('viewBox', `0 0 ${w1} ${h1}`)\n    .attr('direction', isRTL ? 'rtl' : 'ltr');\n\n  return {\n    node: clonedSvg.node()!,\n    width: w1,\n    height: h1,\n  };\n}\n\nconst LEGEND_TEXT_STYLE_PROPERTIES_MAP = {\n  color: 'fill',\n  'font-family': 'font-family',\n  'font-size': 'font-size',\n  'font-weight': 'font-weight',\n};\n\nexport function cloneLegendsToSVG(\n  legends: ILegend[],\n  svgWidth: number,\n  config: {\n    selectedLegends: Record<string, boolean>;\n    centerLegends: boolean;\n    textClassName: string;\n    isRTL: boolean;\n  },\n  legendContainer?: HTMLElement | null,\n) {\n  if (legends.length === 0) {\n    return {\n      node: null,\n      width: 0,\n      height: 0,\n    };\n  }\n\n  const { selectedLegends, centerLegends, textClassName, isRTL } = config;\n  const legendGroup = d3Create<SVGGElement>('svg:g');\n  let legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n  let legendY = LEGEND_CONTAINER_MARGIN_TOP;\n  let legendLine: { elem: Selection<SVGGElement, unknown, null, undefined>; width: number }[] = [];\n  const legendLines: (typeof legendLine)[] = [];\n  const legendLineWidths: number[] = [];\n  const noLegendsSelected = Object.keys(selectedLegends).length === 0;\n\n  for (let i = 0; i < legends.length; i++) {\n    const textOffset = LEGEND_PADDING + LEGEND_SHAPE_SIZE + LEGEND_SHAPE_MARGIN_END;\n    const legendText = createMeasurementSpan(legends[i].title, textClassName, legendContainer);\n    const legendWidth = textOffset + legendText.getBoundingClientRect().width + LEGEND_PADDING;\n    const legendItem = legendGroup.append('g');\n\n    legendLine.push({ elem: legendItem, width: legendWidth });\n    if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n      legendLine.pop();\n      legendLines.push(legendLine);\n      legendLineWidths.push(legendX);\n\n      legendLine = [{ elem: legendItem, width: legendWidth }];\n      legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n      legendY += LEGEND_HEIGHT;\n    }\n\n    const isLegendActive = selectedLegends[legends[i].title] || noLegendsSelected;\n\n    legendItem\n      .append('rect')\n      .attr('x', legendX + (isRTL ? legendWidth - LEGEND_PADDING - LEGEND_SHAPE_SIZE : LEGEND_PADDING))\n      .attr('y', legendY + LEGEND_PADDING)\n      .attr('width', LEGEND_SHAPE_SIZE)\n      .attr('height', LEGEND_SHAPE_SIZE)\n      .style('fill', isLegendActive ? legends[i].color : 'transparent')\n      .style('stroke-width', LEGEND_SHAPE_BORDER)\n      .style('stroke', legends[i].color);\n\n    legendItem\n      .append('text')\n      .attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset))\n      .attr('y', legendY + LEGEND_PADDING)\n      .attr('dominant-baseline', 'hanging')\n      .style('opacity', isLegendActive ? 1 : INACTIVE_LEGEND_TEXT_OPACITY)\n      .text(legends[i].title)\n      .call(selection => copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()!));\n\n    legendX += legendWidth;\n  }\n\n  legendLines.push(legendLine);\n  legendLineWidths.push(legendX);\n  legendY += LEGEND_HEIGHT;\n\n  if (centerLegends) {\n    legendLines.forEach((ln, idx) => {\n      const lineOffsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n      let remLineWidth = legendLineWidths[idx];\n      let itemOffsetX = 0;\n      ln.forEach(item => {\n        const newOffsetX = lineOffsetX + (isRTL ? remLineWidth - item.width - itemOffsetX : 0);\n        item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n        remLineWidth -= item.width;\n        itemOffsetX += item.width;\n      });\n    });\n  } else if (isRTL) {\n    const w1 = Math.max(svgWidth, ...legendLineWidths);\n    legendLines.forEach(ln => {\n      let remLineWidth = w1 - LEGEND_CONTAINER_MARGIN_START;\n      let itemOffsetX = LEGEND_CONTAINER_MARGIN_START;\n      ln.forEach(item => {\n        const newOffsetX = remLineWidth - item.width - itemOffsetX;\n        item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n        remLineWidth -= item.width;\n        itemOffsetX += item.width;\n      });\n    });\n  }\n\n  return {\n    node: legendGroup.node(),\n    width: Math.max(...legendLineWidths),\n    height: legendY,\n  };\n}\n\nfunction svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const scale = opts.scale || 1;\n    const w0 = opts.width || 300;\n    const h0 = opts.height || 150;\n    const w1 = scale * w0;\n    const h1 = scale * h0;\n\n    const canvas = document.createElement('canvas');\n    const img = new Image();\n\n    canvas.width = w1;\n    canvas.height = h1;\n\n    img.onload = function () {\n      const ctx = canvas.getContext('2d');\n      if (!ctx) {\n        return reject(new Error('Canvas context is null'));\n      }\n\n      ctx.clearRect(0, 0, w1, h1);\n      ctx.drawImage(img, 0, 0, w1, h1);\n\n      const imgData = canvas.toDataURL('image/png');\n      resolve(imgData);\n    };\n\n    img.onerror = function (err) {\n      reject(err);\n    };\n\n    img.src = svgDataUrl;\n  });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/**\n * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n *\n * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n  let result = '';\n  const length = str.length;\n  let index = 0;\n  let chr;\n  let part;\n  while (index < length) {\n    chr = str.charAt(index++);\n    if (chr === '%') {\n      if (str.charAt(index) === 'u') {\n        part = str.slice(index + 1, index + 5);\n        if (hex4.exec(part)) {\n          result += String.fromCharCode(parseInt(part, 16));\n          index += 5;\n          continue;\n        }\n      } else {\n        part = str.slice(index, index + 2);\n        if (hex2.exec(part)) {\n          result += String.fromCharCode(parseInt(part, 16));\n          index += 2;\n          continue;\n        }\n      }\n    }\n    result += chr;\n  }\n  return result;\n}\n"]}

package/lib-amd/utilities/utilities.d.ts

@@ -413,4 +413,6 @@ export declare const formatDate: (date: Date, useUTC?: boolean) => string;
 export declare function getSecureProps(props?: Record<string, any>): Record<string, any>;
 export declare function areArraysEqual(arr1?: string[], arr2?: string[]): boolean;
 export declare function resolveCSSVariables(chartContainer: HTMLElement, styleRules: string): string;
+export declare function copyStyle(properties: string[] | Record<string, string>, fromEl: Element, toEl: Element): void;
+export declare const createMeasurementSpan: (text: string | number, className: string, parentElement?: HTMLElement | null) => HTMLElement;
 export {};

package/lib-amd/utilities/utilities.js

@@ -1,8 +1,8 @@
-define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-selection", "d3-format", "d3-time-format", "d3-time", "d3-format"], function (require, exports, tslib_1, d3_axis_1, d3_array_1, d3_scale_1, d3_selection_1, d3_format_1, d3_time_format_1, d3_time_1, d3_format_2) {
+define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-selection", "d3-format", "d3-time-format", "d3-time", "d3-format", "@fluentui/react"], function (require, exports, tslib_1, d3_axis_1, d3_array_1, d3_scale_1, d3_selection_1, d3_format_1, d3_time_format_1, d3_time_1, d3_format_2, react_1) {
     "use strict";
     var _a;
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.formatDate = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatValueWithSIPrefix = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = void 0;
+    exports.createMeasurementSpan = exports.copyStyle = exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.formatDate = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatValueWithSIPrefix = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = void 0;
     var ChartTypes;
     (function (ChartTypes) {
         ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -1212,5 +1212,50 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         });
     }
     exports.resolveCSSVariables = resolveCSSVariables;
+    function copyStyle(properties, fromEl, toEl) {
+        var styles = getComputedStyle(fromEl);
+        if (Array.isArray(properties)) {
+            properties.forEach(function (prop) {
+                (0, d3_selection_1.select)(toEl).style(prop, styles.getPropertyValue(prop));
+            });
+        }
+        else {
+            Object.entries(properties).forEach(function (_a) {
+                var fromProp = _a[0], toProp = _a[1];
+                (0, d3_selection_1.select)(toEl).style(toProp, styles.getPropertyValue(fromProp));
+            });
+        }
+    }
+    exports.copyStyle = copyStyle;
+    var MEASUREMENT_SPAN_STYLE = {
+        position: 'absolute',
+        visibility: 'hidden',
+        top: '-20000px',
+        left: 0,
+        padding: 0,
+        margin: 0,
+        border: 'none',
+        whiteSpace: 'pre',
+    };
+    var MEASUREMENT_SPAN_ID = (0, react_1.getId)('measurement_span_');
+    var createMeasurementSpan = function (text, className, parentElement) {
+        var measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+        if (!measurementSpan) {
+            measurementSpan = document.createElement('span');
+            measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
+            measurementSpan.setAttribute('aria-hidden', 'true');
+            if (parentElement) {
+                parentElement.appendChild(measurementSpan);
+            }
+            else {
+                document.body.appendChild(measurementSpan);
+            }
+        }
+        measurementSpan.setAttribute('class', className);
+        Object.assign(measurementSpan.style, MEASUREMENT_SPAN_STYLE);
+        measurementSpan.textContent = "".concat(text);
+        return measurementSpan;
+    };
+    exports.createMeasurementSpan = createMeasurementSpan;
 });
 //# sourceMappingURL=utilities.js.map