Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[POC] Export legend data from charts #33712

Closed
wants to merge 2 commits into from
Closed

[POC] Export legend data from charts #33712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0cf032
export legend data from charts
krkshitij Jan 22, 2025
f4486c2
export legend config
krkshitij Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 22 additions & 7 deletions packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,11 @@ import {
formatDate,
getSecureProps,
areArraysEqual,
transformLegendDataForExport,
} from '../../utilities/index';
import { ILegend, Legends } from '../Legends/index';
import { DirectionalHint } from '@fluentui/react/lib/Callout';
import { IChart } from '../../types/index';
import { IChart, IExportedLegend } from '../../types/index';

const getClassNames = classNamesFunction<IAreaChartStyleProps, IAreaChartStyles>();

Expand Down Expand Up @@ -129,6 +130,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
private _firstRenderOptimization: boolean;
private _emptyChartId: string;
private _cartesianChartRef: React.RefObject<IChart>;
private _points: ILineChartPoints[] = [];

public constructor(props: IAreaChartProps) {
super(props);
Expand Down Expand Up @@ -183,14 +185,14 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
public render(): JSX.Element {
if (!this._isChartEmpty()) {
const { lineChartData } = this.props.data;
const points = this._addDefaultColors(lineChartData);
const { colors, opacity, data, calloutPoints } = this._createSet(points);
this._points = this._addDefaultColors(lineChartData);
const { colors, opacity, data, calloutPoints } = this._createSet(this._points);
this._calloutPoints = calloutPoints;
const isXAxisDateType = getXAxisType(points);
const isXAxisDateType = getXAxisType(this._points);
this._colors = colors;
this._opacity = opacity;
this._data = data.renderData;
const legends: JSX.Element = this._getLegendData(points);
const legends: JSX.Element = this._renderLegends(this._points);

const tickParams = {
tickValues: this.props.tickValues,
Expand All @@ -215,7 +217,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
<CartesianChart
{...this.props}
chartTitle={this._getChartTitle()}
points={points}
points={this._points}
chartType={ChartTypes.AreaChart}
calloutProps={calloutProps}
legendBars={legends}
Expand Down Expand Up @@ -274,6 +276,12 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
return this._cartesianChartRef.current?.chartContainer || null;
}

public get legend(): IExportedLegend {
return {
items: transformLegendDataForExport(this._getLegendData(this._points), this.state.selectedLegends),
};
}

private _getDomainNRangeValues = (
points: ILineChartPoints[],
margins: IMargins,
Expand Down Expand Up @@ -624,7 +632,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
});
}

private _getLegendData = (points: ILineChartPoints[]): JSX.Element => {
private _getLegendData = (points: ILineChartPoints[]): ILegend[] => {
const data = points;
const actions: ILegend[] = [];

Expand All @@ -651,6 +659,13 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt

actions.push(legend);
});

return actions;
};

private _renderLegends = (points: ILineChartPoints[]): JSX.Element => {
const actions = this._getLegendData(points);

return (
<Legends
legends={actions}
Expand Down
20 changes: 15 additions & 5 deletions packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,11 +177,21 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =

const exportAsImage = React.useCallback(
(opts?: IImageExportOptions) => {
return toImage(chartRef.current?.chartContainer, {
background: theme.semanticColors.bodyBackground,
scale: 3,
...opts,
});
return toImage(
chartRef.current?.chartContainer,
{
items: [],
textStyles: {
color: theme.semanticColors.bodyText,
},
...chartRef.current?.legend,
},
{
background: theme.semanticColors.bodyBackground,
scale: 3,
...opts,
},
);
},
[theme],
);
Expand Down
81 changes: 38 additions & 43 deletions packages/charts/react-charting/src/components/DeclarativeChart/imageExporter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { create as d3Create, select as d3Select, Selection } from 'd3-selection';
import { calculateLongestLabelWidth } from '../../utilities/utilities';
import { IExportedLegend } from '../HorizontalBarChart/index';

/**
* {@docCategory DeclarativeChart}
Expand All @@ -10,7 +12,11 @@ export interface IImageExportOptions {
background?: string;
}

export function toImage(chartContainer?: HTMLElement | null, opts: IImageExportOptions = {}): Promise<string> {
export function toImage(
chartContainer: HTMLElement | null | undefined,
legend: IExportedLegend | undefined,
opts: IImageExportOptions = {},
): Promise<string> {
return new Promise((resolve, reject) => {
if (!chartContainer) {
return reject(new Error('Chart container is not defined'));
Expand All @@ -19,7 +25,7 @@ export function toImage(chartContainer?: HTMLElement | null, opts: IImageExportO
try {
const background =
typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';
const svg = toSVG(chartContainer, background);
const svg = toSVG(chartContainer, legend, background);

const svgData = new XMLSerializer().serializeToString(svg.node);
const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));
Expand All @@ -37,15 +43,15 @@ export function toImage(chartContainer?: HTMLElement | null, opts: IImageExportO
});
}

function toSVG(chartContainer: HTMLElement, background: string) {
function toSVG(chartContainer: HTMLElement, legend: IExportedLegend | undefined, background: string) {
const svg = chartContainer.querySelector<SVGSVGElement>('svg');
if (!svg) {
throw new Error('SVG not found');
}

const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();
const classNames = new Set<string>();
const legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight, classNames);
const legendGroup = cloneLegendsToSVG(chartContainer, legend, svgWidth, svgHeight, classNames);
const w1 = Math.max(svgWidth, legendGroup.width);
const h1 = svgHeight + legendGroup.height;
const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)
Expand Down Expand Up @@ -102,29 +108,32 @@ function toSVG(chartContainer: HTMLElement, background: string) {
};
}

function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHeight: number, classNames: Set<string>) {
const legendButtons = chartContainer.querySelectorAll<HTMLElement>(`
button[class^="legend-"],
[class^="legendContainer-"] div[class^="overflowIndicationTextStyle-"],
[class^="legendsContainer-"] div[class^="overflowIndicationTextStyle-"]
`);
if (legendButtons.length === 0) {
function cloneLegendsToSVG(
chartContainer: HTMLElement,
legend: IExportedLegend | undefined,
svgWidth: number,
svgHeight: number,
classNames: Set<string>,
) {
if (!legend || legend.items.length === 0) {
return {
node: null,
width: 0,
height: 0,
};
}

const { items: legends } = legend;
const legendGroup = d3Create<SVGGElement>('svg:g');
let legendX = 0;
let legendY = 8;
let legendLine: Selection<SVGGElement, unknown, null, undefined>[] = [];
const legendLines: (typeof legendLine)[] = [];
const legendLineWidths: number[] = [];

for (let i = 0; i < legendButtons.length; i++) {
const { width: legendWidth } = legendButtons[i].getBoundingClientRect();
for (let i = 0; i < legends.length; i++) {
const textOffset = 28;
const legendWidth = calculateLongestLabelWidth([legends[i].name]) + textOffset + 8;
const legendItem = legendGroup.append('g');

legendLine.push(legendItem);
Expand All @@ -138,49 +147,35 @@ function cloneLegendsToSVG(chartContainer: HTMLElement, svgWidth: number, svgHei
legendY += 32;
}

let legendText: HTMLDivElement | null;
let textOffset = 0;

if (legendButtons[i].tagName.toLowerCase() === 'button') {
const legendRect = legendButtons[i].querySelector<HTMLDivElement>('[class^="rect"]');
const { backgroundColor: legendColor, borderColor: legendBorderColor } = getComputedStyle(legendRect!);

legendText = legendButtons[i].querySelector<HTMLDivElement>('[class^="text"]');
legendText!.classList.forEach(className => classNames.add(`.${className}`));
legendItem
.append('rect')
.attr('x', legendX + 8)
.attr('y', svgHeight + legendY + 8)
.attr('width', 12)
.attr('height', 12)
.attr('fill', legendColor)
.attr('stroke-width', 1)
.attr('stroke', legendBorderColor);
textOffset = 28;
} else {
legendText = legendButtons[i] as HTMLDivElement;
legendText.classList.forEach(className => classNames.add(`.${className}`));
textOffset = 8;
}
legendItem
.append('rect')
.attr('x', legendX + 8)
.attr('y', svgHeight + legendY + 8)
.attr('width', 12)
.attr('height', 12)
.style('fill', legends[i].isSelected ? legends[i].color : 'transparent')
.style('stroke-width', 1)
.style('stroke', legends[i].color);

const { color: textColor } = getComputedStyle(legendText!);
legendItem
.append('text')
.attr('x', legendX + textOffset)
.attr('y', svgHeight + legendY + 8)
.attr('dominant-baseline', 'hanging')
.attr('class', legendText!.getAttribute('class'))
.attr('fill', textColor)
.text(legendText!.textContent);
.style('fill', resolveCSSVariables(chartContainer, legend.textStyles?.color || '#000000'))
.style('font-family', getComputedStyle(chartContainer).fontFamily)
.style('font-size', 12)
.style('font-weight', 400)
.style('opacity', legends[i].isSelected ? 1 : 0.67)
.text(legends[i].name);
legendX += legendWidth;
}

legendLines.push(legendLine);
legendLineWidths.push(legendX);
legendY += 32;

const centerLegends = true;
if (centerLegends) {
if (legend.centerAlign) {
legendLines.forEach((ln, idx) => {
const offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);
ln.forEach(item => {
Expand Down
25 changes: 20 additions & 5 deletions packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ import {
getNextColor,
getNextGradient,
areArraysEqual,
transformLegendDataForExport,
} from '../../utilities/index';
import { convertToLocaleString } from '../../utilities/locale-util';
import { IChart } from '../../types/index';
import { IChart, IExportedLegend } from '../../types/index';

const getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();
const LEGEND_CONTAINER_HEIGHT = 40;
Expand Down Expand Up @@ -50,6 +51,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
private _calloutId: string;
private _calloutAnchorPoint: IChartDataPoint | null;
private _emptyChartId: string | null;
private _points: IChartDataPoint[] = [];

public static getDerivedStateFromProps(
nextProps: Readonly<IDonutChartProps>,
Expand Down Expand Up @@ -113,7 +115,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar

public render(): JSX.Element {
const { data, hideLegend = false } = this.props;
const points = this._addDefaultColors(data?.chartData);
this._points = this._addDefaultColors(data?.chartData);

this._classNames = getClassNames(this.props.styles!, {
theme: this.props.theme!,
Expand All @@ -123,12 +125,12 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
className: this.props.className!,
});

const legendBars = this._createLegends(points);
const legendBars = this._renderLegends(this._points);
const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;
const donutMarginVertical = this.props.hideLabels ? 0 : 40;
const outerRadius =
Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;
const chartData = this._elevateToMinimums(points.filter((d: IChartDataPoint) => d.data! >= 0));
const chartData = this._elevateToMinimums(this._points.filter((d: IChartDataPoint) => d.data! >= 0));
const valueInsideDonut =
this.props.innerRadius !== 0 ? this._valueInsideDonut(this.props.valueInsideDonut!, chartData!) : '';
return !this._isChartEmpty() ? (
Expand Down Expand Up @@ -212,6 +214,13 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
return this._rootElem;
}

public get legend(): IExportedLegend {
return {
items: transformLegendDataForExport(this._getLegendData(this._points), this.state.selectedLegends),
centerAlign: this.props.legendProps?.centerLegends ?? true,
};
}

private _closeCallout = () => {
this.setState({
showHover: false,
Expand Down Expand Up @@ -254,7 +263,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
node.setAttribute('viewBox', viewbox);
}

private _createLegends(chartData: IChartDataPoint[]): JSX.Element {
private _getLegendData(chartData: IChartDataPoint[]): ILegend[] {
const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {
const color: string = this.props.enableGradient
? point.gradient?.[0] || getNextGradient(index, 0, this.props.theme?.isInverted)[0]
Expand All @@ -275,6 +284,12 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
return legend;
});

return legendDataItems;
}

private _renderLegends(chartData: IChartDataPoint[]): JSX.Element {
const legendDataItems = this._getLegendData(chartData);

const legends = (
<Legends
legends={legendDataItems}
Expand Down
Loading