Skip to content

Commit

Permalink
chore(charts): Simplify pattern visibility
Browse files Browse the repository at this point in the history 
Closes #7541
  • Loading branch information
@dlabrecq
dlabrecq committed Jun 11, 2022
1 parent bde91d1 commit 54205bc
Show file tree
Hide file tree
Showing 14 changed files with 173 additions and 178 deletions.
18 changes: 6 additions & 12 deletions packages/react-charts/src/components/Chart/Chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
getDefaultData,
getDefaultPatternScale
} from '../ChartUtils';
import { PatternScaleInterface } from '../ChartUtils/chart-patterns';

/**
* See https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/index.d.ts
Expand Down Expand Up @@ -307,13 +308,6 @@ export interface ChartProps extends VictoryChartProps {
* @propType number | { top: number, bottom: number, left: number, right: number }
*/
padding?: PaddingProps;
/**
* The optional ID to prefix pattern defs
*
* @example patternId="pattern"
* @beta
*/
patternId?: string;
/**
* The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
* This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
Expand All @@ -326,7 +320,7 @@ export interface ChartProps extends VictoryChartProps {
* @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
* @beta
*/
patternScale?: string[];
patternScale?: PatternScaleInterface[];
/**
* Note: This prop should not be set manually.
*
Expand Down Expand Up @@ -469,7 +463,6 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
themeColor,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
themeVariant,
patternId = getPatternId(),
patternScale,
isPatternDefs = false,

Expand All @@ -488,12 +481,13 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
top: getPaddingForSide('top', padding, theme.chart.padding)
};

const patternId = React.useMemo(() => getPatternId(), []);
const defaultColorScale = getDefaultColorScale(colorScale as any, theme.chart.colorScale as string[]);
const defaultPatternScale = getDefaultPatternScale({
colorScale: defaultColorScale,
patternScale,
isPatternDefs,
patternId,
isPatternDefs
patternScale
});

// Add pattern props for legend tooltip
Expand Down Expand Up @@ -605,7 +599,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
>
{renderChildren()}
{getLegend()}
{isPatternDefs && getPatternDefs({ patternId, patternScale: defaultColorScale })}
{isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale })}
</VictoryChart>
);
};
Expand Down
11 changes: 2 additions & 9 deletions packages/react-charts/src/components/ChartDonut/ChartDonut.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { ChartContainer } from '../ChartContainer';
import { ChartLabel } from '../ChartLabel';
import { ChartPie, ChartPieLegendPosition, ChartPieProps } from '../ChartPie';
import { ChartCommonStyles, ChartDonutStyles, ChartThemeDefinition } from '../ChartTheme';
import { getPieLabelX, getPieLabelY, getPaddingForSide } from '../ChartUtils';
import { getPieLabelX, getPieLabelY, getPaddingForSide, PatternScaleInterface } from '../ChartUtils';

interface ChartDonutSubTitleInterface {
dy?: number;
Expand Down Expand Up @@ -361,13 +361,6 @@ export interface ChartDonutProps extends ChartPieProps {
* @propType number | Function
*/
padAngle?: NumberOrCallback;
/**
* The optional ID to prefix pattern defs
*
* @example patternId="pattern"
* @beta
*/
patternId?: string;
/**
* The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
* This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
Expand All @@ -380,7 +373,7 @@ export interface ChartDonutProps extends ChartPieProps {
* @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
* @beta
*/
patternScale?: string[];
patternScale?: PatternScaleInterface[];
/**
* The padding props specifies the amount of padding in number of pixels between
* the edge of the chart and any rendered child components. This prop can be given
Expand Down
40 changes: 8 additions & 32 deletions packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,10 @@ import { ChartContainer } from '../ChartContainer';
import { ChartDonut, ChartDonutProps } from '../ChartDonut';
import { ChartDonutStyles, ChartThemeDefinition } from '../ChartTheme';
import {
getDefaultColorScale,
getDefaultPatternScale,
getDonutThresholdDynamicTheme,
getDonutThresholdStaticTheme,
getPaddingForSide,
getPatternDefs,
getPatternId
PatternScaleInterface
} from '../ChartUtils';

export enum ChartDonutThresholdDonutOrientation {
Expand Down Expand Up @@ -320,13 +317,6 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
* @propType number | { top: number, bottom: number, left: number, right: number }
*/
padding?: PaddingProps;
/**
* The optional ID to prefix pattern defs
*
* @example patternId="pattern"
* @beta
*/
patternId?: string;
/**
* The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
* This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
Expand All @@ -339,7 +329,7 @@ export interface ChartDonutThresholdProps extends ChartDonutProps {
* @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
* @beta
*/
patternScale?: string[];
patternScale?: PatternScaleInterface[];
/**
* Specifies the radius of the chart. If this property is not provided it is computed
* from width, height, and padding props
Expand Down Expand Up @@ -480,7 +470,6 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
invert = false,
labels = [], // Don't show any tooltip labels by default, let consumer override if needed
padding,
patternId = getPatternId(),
patternScale,
radius,
standalone = true,
Expand Down Expand Up @@ -512,14 +501,6 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
padding: defaultPadding
});

const defaultColorScale = getDefaultColorScale(colorScale, theme.pie.colorScale as string[]);
const defaultPatternScale = getDefaultPatternScale({
colorScale: defaultColorScale,
patternScale,
patternId,
isPatternDefs
});

// Returns computed data representing pie chart slices
const getComputedData = () => {
// Format and sort data. Sorting ensures thresholds are displayed in the correct order and simplifies calculations.
Expand Down Expand Up @@ -549,13 +530,13 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
};

// Render dynamic utilization donut cart
const computedData = getComputedData();
const renderChildren = () =>
React.Children.toArray(children).map((child, index) => {
if (React.isValidElement(child)) {
const { data: childData, ...childProps } = child.props;
const datum = Data.formatData([childData], childProps, ['x', 'y']); // Format child data independently of this component's props
const dynamicTheme = childProps.theme || getDonutThresholdDynamicTheme(childProps.themeColor || themeColor);

return React.cloneElement(child, {
constrainToVisibleArea,
colorScale,
Expand All @@ -565,7 +546,7 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
invert,
key: `pf-chart-donut-threshold-child-${index}`,
padding: defaultPadding,
...(!childProps.isPatternDefs && defaultPatternScale && { patternScale: [null, ...defaultPatternScale] }),
patternShift: computedData.length,
radius: chartRadius - 14, // Donut utilization radius is threshold radius minus 14px spacing
showStatic: false,
standalone: false,
Expand All @@ -585,13 +566,13 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
allowTooltip={allowTooltip}
colorScale={colorScale}
constrainToVisibleArea={constrainToVisibleArea}
data={getComputedData()}
data={computedData}
height={height}
isPatternDefs={isPatternDefs}
key="pf-chart-donut-threshold"
labels={labels}
padding={defaultPadding}
patternId={patternId}
patternScale={defaultPatternScale ? defaultPatternScale : undefined}
patternScale={patternScale}
standalone={false}
theme={theme}
width={width}
Expand All @@ -610,11 +591,7 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
theme,
...containerComponent.props
},
[
chart,
renderChildren(),
isPatternDefs && getPatternDefs({ offset: 1, patternId, patternScale: defaultColorScale })
]
[chart, renderChildren()]
);

return standalone ? (
Expand All @@ -623,7 +600,6 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
<React.Fragment>
{chart}
{renderChildren()}
{isPatternDefs && getPatternDefs({ offset: 1, patternId, patternScale: defaultColorScale })}
</React.Fragment>
);
};
Expand Down
62 changes: 21 additions & 41 deletions packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { SliceProps, VictoryPie, VictorySliceLabelPositionType } from 'victory-p
import { ChartContainer } from '../ChartContainer';
import { ChartDonut, ChartDonutProps } from '../ChartDonut';
import { ChartCommonStyles, ChartThemeDefinition, ChartDonutUtilizationStyles } from '../ChartTheme';
import { getDefaultColorScale, getDefaultPatternScale, getDonutUtilizationTheme, getPatternId } from '../ChartUtils';
import { getDonutUtilizationTheme, PatternScaleInterface } from '../ChartUtils';

export enum ChartDonutUtilizationLabelPosition {
centroid = 'centroid',
Expand Down Expand Up @@ -243,13 +243,6 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
* to a <g> tag on web, and a react-native-svg <G> tag on mobile
*/
groupComponent?: React.ReactElement<any>;
/**
* Flag indicating parent isPatternDefs prop is in use
* Do not use
* @hide
* @private
*/
hasPatternDefs?: boolean;
/**
* Specifies the height the svg viewBox of the chart container. This value should be given as a
* number of pixels.
Expand Down Expand Up @@ -389,13 +382,6 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
* @propType number | { top: number, bottom: number, left: number, right: number }
*/
padding?: PaddingProps;
/**
* The optional ID to prefix pattern defs
*
* @example patternId="pattern"
* @beta
*/
patternId?: string;
/**
* The patternScale prop is an optional prop that defines a pattern to be applied to the children, where applicable.
* This prop should be given as an array of CSS colors, or as a string corresponding to a URL. Patterns will be
Expand All @@ -408,7 +394,15 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
* @example patternScale={['url("#pattern:0")', 'url("#pattern:1")', 'url("#pattern:2")']}
* @beta
*/
patternScale?: string[];
patternScale?: PatternScaleInterface[];
/**
* Flag indicating to shift pattern scale for ChartDonutThreshold
* Do not use
*
* @private
* @hide
*/
patternShift?: number;
/**
* Specifies the radius of the chart. If this property is not provided it is computed
* from width, height, and padding props
Expand Down Expand Up @@ -613,14 +607,13 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
colorScale,
containerComponent = <ChartContainer />,
data,
hasPatternDefs,
invert = false,
legendPosition = ChartCommonStyles.legend.position as ChartDonutUtilizationLegendPosition,
padding,
patternId = getPatternId(),
patternScale,
patternShift,
showStatic = true,
showStaticPattern = false,
showStaticPattern = true,
standalone = true,
themeColor,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Expand All @@ -636,23 +629,11 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
width = theme.pie.width,
...rest
}: ChartDonutUtilizationProps) => {
const defaultColorScale = getDefaultColorScale(colorScale, theme.pie.colorScale as string[]);
const defaultPatternScale = getDefaultPatternScale({
colorScale: defaultColorScale,
patternScale,
patternId,
isPatternDefs
});

// Hide static pattern and handle edge case where parent does not use isPatternDefs
// Hide pattern for the static, unused portion of the donut utilization chart
const defaultPatternScale: PatternScaleInterface[] = [];
const hideStaticPattern = showStatic && !showStaticPattern;
const hideThresholdPatterns = !patternScale && hasPatternDefs === false;
if (defaultPatternScale && (hideStaticPattern || hideThresholdPatterns)) {
for (let i = 0; i < defaultPatternScale.length; i++) {
if (i !== 0) {
defaultPatternScale[i] = null;
}
}
if (!patternScale && hideStaticPattern) {
defaultPatternScale.push({ visible: true }, { visible: false });
}

// Returns computed data representing pie chart slices
Expand Down Expand Up @@ -692,9 +673,8 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
// Returns theme based on threshold and current value
const getThresholdTheme = () => {
const newTheme = { ...theme };

if (data) {
const datum = getData();
const datum = getData();
if (datum) {
const donutThresholds = getDonutThresholds();
const mergeThemeProps = (i: number) => {
// Merge just the first color of dynamic (blue, green, etc.) with static (gray) for expected colorScale
Expand Down Expand Up @@ -731,14 +711,14 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
colorScale={colorScale}
data={getComputedData()}
height={height}
isPatternDefs={isPatternDefs}
key="pf-chart-donut-utilization"
legendPosition={legendPosition}
padding={padding}
patternId={patternId}
patternScale={defaultPatternScale ? defaultPatternScale : undefined}
patternScale={defaultPatternScale.length > 0 ? defaultPatternScale : patternScale}
patternShift={patternShift}
standalone={false}
theme={getThresholdTheme()}
isPatternDefs={isPatternDefs}
width={width}
{...rest}
/>
Expand Down
Loading

0 comments on commit 54205bc

Please sign in to comment.