FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix(charts): add individual padding vars for donut charts (#2529) · patternfly/patternfly-react@771eee8 · GitHub

/ patternfly-react Public

Commit 771eee8

Browse files
dlabrecq
authored and
jschuler
committed
fix(charts): add individual padding vars for donut charts (#2529)
Fixes #2528
1 parent 7ae5b17 commit 771eee8

15 files changed

Lines changed: 173 additions & 1495 deletions

File tree

‎packages/patternfly-4/react-charts/src/components/Chart/Chart.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@ import {
2323
ChartLegendWrapper
2424
} from "../ChartLegend";
2525
import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme';
26-
import { getTheme } from '../ChartUtils';
27-
import { getPaddingForSide } from '../ChartUtils/chart-padding';
26+
import { getPaddingForSide, getTheme } from '../ChartUtils';
2827

2928
/**
3029
* See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts
@@ -169,6 +168,8 @@ export interface ChartProps extends VictoryChartProps {
169168
* Because Victory renders responsive containers, the width and height props do not determine the width and
170169
* height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
171170
* pixels will depend on the size of the container the chart is rendered into.
171+
*
172+
* Typically, the parent container is set to the same width in order to maintain the aspect ratio.
172173
*/
173174
height?: number;
174175
/**
@@ -347,6 +348,8 @@ export interface ChartProps extends VictoryChartProps {
347348
* Because Victory renders responsive containers, the width and height props do not determine the width and
348349
* height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
349350
* pixels will depend on the size of the container the chart is rendered into.
351+
*
352+
* Typically, the parent container is set to the same width in order to maintain the aspect ratio.
350353
*/
351354
width?: number;
352355
}
@@ -372,7 +375,6 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
372375
width = theme.chart.width,
373376
...rest
374377
}: ChartProps) => {
375-
376378
const defaultPadding = {
377379
bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
378380
left: getPaddingForSide('left', padding, theme.chart.padding),
@@ -405,7 +407,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
405407
return null;
406408
}
407409
let dx = 0;
408-
let dy = defaultPadding.top || 0;
410+
let dy = defaultPadding.top;
409411
if (legendPosition === ChartLegendPosition.bottom) {
410412
dy += ChartCommonStyles.legend.margin;
411413
} else if (legendPosition === ChartLegendPosition.bottomLeft) {

‎packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.tsx‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ import { ChartContainer } from '../ChartContainer';
1616
import { ChartLabel } from '../ChartLabel';
1717
import { ChartPie, ChartPieLegendPosition, ChartPieProps } from '../ChartPie';
1818
import { ChartCommonStyles, ChartDonutStyles, ChartThemeDefinition } from '../ChartTheme';
19-
import { ChartTooltip } from '../ChartTooltip';
20-
import { getLabelX, getLabelY } from "../ChartUtils";
19+
import { getLabelX, getLabelY } from '../ChartUtils';
2120

2221
export enum ChartDonutLabelPosition {
2322
centroid = 'centroid',
@@ -130,8 +129,7 @@ export interface ChartDonutProps extends ChartPieProps {
130129
*/
131130
dataComponent?: React.ReactElement<any>;
132131
/**
133-
* Specifies the height of the donut chart. This value should be given as a
134-
* number of pixels.
132+
* Specifies the height of the donut chart. This value should be given as a number of pixels.
135133
*
136134
* Because Victory renders responsive containers, the width and height props do not determine the width and
137135
* height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
@@ -144,7 +142,7 @@ export interface ChartDonutProps extends ChartPieProps {
144142
* legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut
145143
* height.
146144
*
147-
* The innerRadius may also need to be set when changing the donut size.
145+
* Note: innerRadius may need to be set when using this property.
148146
*/
149147
donutHeight?: number;
150148
/**
@@ -156,8 +154,7 @@ export interface ChartDonutProps extends ChartPieProps {
156154
*/
157155
donutDy?: number;
158156
/**
159-
* Specifies the width of the donut chart. This value should be given as a
160-
* number of pixels.
157+
* Specifies the width of the donut chart. This value should be given as a number of pixels.
161158
*
162159
* Because Victory renders responsive containers, the width and height props do not determine the width and
163160
* height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
@@ -169,7 +166,7 @@ export interface ChartDonutProps extends ChartPieProps {
169166
* By default, donutWidth is the min. of either height or width. This covers most use cases in order to accommodate
170167
* legends within the same SVG. However, donutWidth (not width) may need to be set in order to adjust the donut width.
171168
*
172-
* The innerRadius may also need to be set when changing the donut size.
169+
* Note: innerRadius may need to be set when using this property.
173170
*/
174171
donutWidth?: number;
175172
/**
@@ -241,7 +238,13 @@ export interface ChartDonutProps extends ChartPieProps {
241238
* height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
242239
* pixels will depend on the size of the container the chart is rendered into.
243240
*
244-
* Note: innerRadius may need to be set when using this property.
241+
* Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size)
242+
* in order to accommodate the extra legend.
243+
*
244+
* By default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate
245+
* legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut height.
246+
*
247+
* Typically, the parent container is set to the same width in order to maintain the aspect ratio.
245248
*/
246249
height?: number;
247250
/**
@@ -339,12 +342,13 @@ export interface ChartDonutProps extends ChartPieProps {
339342
* the edge of the chart and any rendered child components. This prop can be given
340343
* as a number or as an object with padding specified for top, bottom, left
341344
* and right.
345+
*
346+
* Note: innerRadius may need to be set when using this property.
342347
*/
343348
padding?: PaddingProps;
344349
/**
345350
* Specifies the radius of the chart. If this property is not provided it is computed
346351
* from width, height, and padding props
347-
*
348352
*/
349353
radius?: number;
350354
/**
@@ -436,14 +440,19 @@ export interface ChartDonutProps extends ChartPieProps {
436440
*/
437441
titleComponent?: React.ReactElement<any>;
438442
/**
439-
* Specifies the width of the svg viewBox of the chart container. This value should be given as a
440-
* number of pixels.
443+
* Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.
441444
*
442445
* Because Victory renders responsive containers, the width and height props do not determine the width and
443446
* height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
444447
* pixels will depend on the size of the container the chart is rendered into.
445448
*
446-
* Note: innerRadius may need to be set when using this property.
449+
* Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size)
450+
* in order to accommodate the extra legend.
451+
*
452+
* By default, donutWidth is the min. of either height or width. This covers most use cases in order to accommodate
453+
* legends within the same SVG. However, donutWidth (not width) may need to be set in order to adjust the donut width.
454+
*
455+
* Typically, the parent container is set to the same width in order to maintain the aspect ratio.
447456
*/
448457
width?: number;
449458
/**
@@ -489,15 +498,15 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
489498

490499
// destructure last
491500
theme = getDonutTheme(themeColor, themeVariant),
492-
493501
capHeight = 1.1,
494502
height = theme.pie.height,
495503
width = theme.pie.width,
496504
donutHeight = Math.min(height, width),
497-
donutWidth = Math.min(height, width, donutHeight),
505+
donutWidth = Math.min(height, width),
498506
innerRadius = (Math.min(donutHeight, donutWidth) - 34) / 2,
499507
...rest
500508
}: ChartDonutProps) => {
509+
const donutSize = Math.min(donutHeight, donutWidth);
501510

502511
// Returns subtitle
503512
const getSubTitle = () => {
@@ -511,14 +520,14 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
511520
textAnchor: subTitlePosition === 'right' ? 'start' : 'middle',
512521
verticalAnchor: 'middle',
513522
x: getLabelX({
514-
chartWidth: donutWidth,
523+
chartWidth: donutSize,
515524
dx: subTitleDx,
516525
labelPosition: subTitlePosition,
517526
legendPosition,
518527
svgWidth: width
519528
}),
520529
y: getLabelY({
521-
chartHeight: donutHeight,
530+
chartHeight: donutSize,
522531
dy: subTitleDy,
523532
labelPosition: subTitlePosition
524533
}),
@@ -540,14 +549,14 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
540549
textAnchor: 'middle',
541550
verticalAnchor: 'middle',
542551
x: getLabelX({
543-
chartWidth: donutWidth,
552+
chartWidth: donutSize,
544553
dx: donutDx,
545554
labelPosition: 'center',
546555
legendPosition,
547556
svgWidth: width
548557
}),
549558
y: getLabelY({
550-
chartHeight: donutHeight,
559+
chartHeight: donutSize,
551560
dy: donutDy,
552561
labelPosition: 'center'
553562
}),
@@ -559,12 +568,11 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
559568
<ChartPie
560569
height={height}
561570
innerRadius={innerRadius > 0 ? innerRadius : 0}
562-
labelComponent={<ChartTooltip theme={theme} />}
563571
legendPosition={legendPosition}
564572
pieDx={donutDx}
565573
pieDy={donutDy}
566-
pieHeight={donutHeight}
567-
pieWidth={donutWidth}
574+
pieHeight={donutSize}
575+
pieWidth={donutSize}
568576
standalone={false}
569577
theme={theme}
570578
width={width}

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL