Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 24x 24x 24x 24x 24x 24x 24x 24x 60x 16x 16x 60x 24x 20x 20x 20x 20x 60x 20x 20x 20x 60x 24x | import * as React from 'react';
import { pie as d3Pie } from 'd3-shape';
import { ScaleOrdinal, scaleOrdinal } from 'd3-scale';
import { IPieProps } from './Pie.types';
import { LabeledArc } from '../Arc/Arc';
import { IArcData } from '../Arc/Arc.types';
import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
import { getColorFromToken, getNextColor } from '../../../utilities/colors';
export class Pie extends React.Component<IPieProps, {}> {
public static defaultProps: Partial<IPieProps> = {
pie: d3Pie()
.padAngle(0.01)
.sort(null)
/* eslint-disable @typescript-eslint/no-explicit-any */
.value((d: any) => d.y),
};
private colors: ScaleOrdinal<string | number, any>;
constructor(props: IPieProps) {
super(props);
}
public arcGenerator = (d: IArcData, i: number): JSX.Element => {
return (
<LabeledArc
culture={this.props.culture}
key={i}
data={d}
innerRadius={this.props.innerRadius}
outerRadius={this.props.outerRadius}
color={`${this.colors(i)}`}
theme={this.props.theme}
/>
);
};
public render(): JSX.Element {
// const getClassNames = classNamesFunction<IPieProps, IPieStyles>();
const { pie, data, width, height, chartTitle, theme } = this.props;
const defaultColors: Array<string> = [];
Iif (data && !this.props.colors) {
for (let i = 0; i < data.length; i++) {
defaultColors.push(getNextColor(i, 0, theme?.isInverted));
}
}
const { colors = defaultColors } = this.props;
this.colors = scaleOrdinal().range(colors.map(color => getColorFromToken(color)));
const piechart = pie(data);
const translate = `translate(${width / 2}, ${height / 2})`;
return (
<FocusZone direction={FocusZoneDirection.domOrder}>
<svg width={width} height={height} aria-label={chartTitle}>
<g className="pie" transform={translate}>
{piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}
</g>
</svg>
</FocusZone>
);
}
}
|