diff --git a/packages/react-charts/src/victory/components/Chart/Chart.tsx b/packages/react-charts/src/victory/components/Chart/Chart.tsx index d6d2094ac79..c4920993b27 100644 --- a/packages/react-charts/src/victory/components/Chart/Chart.tsx +++ b/packages/react-charts/src/victory/components/Chart/Chart.tsx @@ -94,14 +94,14 @@ export interface ChartProps extends VictoryChartProps { /** * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ defaultAxes?: AxesType; /** * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ defaultPolarAxes?: AxesType; @@ -348,7 +348,7 @@ export interface ChartProps extends VictoryChartProps { /** * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ prependDefaultAxes?: boolean; @@ -391,7 +391,7 @@ export interface ChartProps extends VictoryChartProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartArea/ChartArea.tsx b/packages/react-charts/src/victory/components/ChartArea/ChartArea.tsx index 2c431291f89..0978e7d8eb7 100644 --- a/packages/react-charts/src/victory/components/ChartArea/ChartArea.tsx +++ b/packages/react-charts/src/victory/components/ChartArea/ChartArea.tsx @@ -311,7 +311,7 @@ export interface ChartAreaProps extends VictoryAreaProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/victory/components/ChartArea/examples/ChartArea.md index 375bd825d49..57980422a61 100644 --- a/packages/react-charts/src/victory/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/victory/components/ChartArea/examples/ChartArea.md @@ -18,7 +18,7 @@ import { getResizeObserver } from '@patternfly/react-core'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples ### Basic with right aligned legend diff --git a/packages/react-charts/src/victory/components/ChartAxis/ChartAxis.tsx b/packages/react-charts/src/victory/components/ChartAxis/ChartAxis.tsx index 4a35625036a..4d48dd5a684 100644 --- a/packages/react-charts/src/victory/components/ChartAxis/ChartAxis.tsx +++ b/packages/react-charts/src/victory/components/ChartAxis/ChartAxis.tsx @@ -305,7 +305,7 @@ export interface ChartAxisProps extends VictoryAxisProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartBar/ChartBar.tsx b/packages/react-charts/src/victory/components/ChartBar/ChartBar.tsx index f6b79b1efca..449b79065f6 100644 --- a/packages/react-charts/src/victory/components/ChartBar/ChartBar.tsx +++ b/packages/react-charts/src/victory/components/ChartBar/ChartBar.tsx @@ -306,7 +306,7 @@ export interface ChartBarProps extends VictoryBarProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ polar?: boolean; @@ -350,7 +350,7 @@ export interface ChartBarProps extends VictoryBarProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md b/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md index 2d4b0a9385a..54a523bca62 100644 --- a/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md +++ b/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md @@ -15,7 +15,7 @@ import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.tsx index 49660a60e25..1879c95fd50 100644 --- a/packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.tsx +++ b/packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.tsx @@ -425,7 +425,7 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ polar?: boolean; @@ -559,7 +559,7 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md index cac766f7b20..bd82ff34236 100644 --- a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md +++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md @@ -19,7 +19,7 @@ import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_colo ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples diff --git a/packages/react-charts/src/victory/components/ChartBullet/examples/ChartBullet.md b/packages/react-charts/src/victory/components/ChartBullet/examples/ChartBullet.md index f3c0a03ca8c..586698b60d6 100644 --- a/packages/react-charts/src/victory/components/ChartBullet/examples/ChartBullet.md +++ b/packages/react-charts/src/victory/components/ChartBullet/examples/ChartBullet.md @@ -16,7 +16,7 @@ import { getResizeObserver } from '@patternfly/react-core'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples ### Basic diff --git a/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-data.ts b/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-data.ts index ce591b5237c..509263b92b4 100644 --- a/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-data.ts +++ b/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-data.ts @@ -22,7 +22,8 @@ interface ChartBulletDataInterface { /** * Returns comparative measure data - * @private + * + * @private Not intended as public API and subject to change */ export const getComparativeMeasureData = ({ data, @@ -54,7 +55,8 @@ export const getComparativeMeasureData = ({ /** * Returns comparative error measure data - * @private + * + * @private Not intended as public API and subject to change */ export const getComparativeErrorMeasureData = ({ data, @@ -73,7 +75,8 @@ export const getComparativeErrorMeasureData = ({ /** * Returns comparative warning data - * @private + * + * @private Not intended as public API and subject to change */ export const getComparativeWarningMeasureData = ({ data, @@ -92,7 +95,8 @@ export const getComparativeWarningMeasureData = ({ /** * Returns primary dot measure data - * @private + * + * @private Not intended as public API and subject to change */ export const getPrimaryDotMeasureData = ({ data, @@ -115,7 +119,8 @@ export const getPrimaryDotMeasureData = ({ /** * Returns primary segment measure data - * @private + * + * @private Not intended as public API and subject to change */ export const getPrimarySegmentedMeasureData = ({ data, @@ -182,7 +187,8 @@ export const getPrimarySegmentedMeasureData = ({ /** * Returns qualitative range data - * @private + * + * @private Not intended as public API and subject to change */ export const getQualitativeRangeData = ({ data, diff --git a/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-domain.ts b/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-domain.ts index 45aaedc0337..ce65712311e 100644 --- a/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-domain.ts +++ b/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-domain.ts @@ -17,7 +17,8 @@ interface ChartBulletDomainInterface { /** * Returns the bullet chart's min and max domain for comparative / primary measures and qualitative range data - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletDomain = ({ comparativeErrorMeasureComponent, diff --git a/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-size.ts b/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-size.ts index 65a14cbd217..c477d141d5e 100644 --- a/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-size.ts +++ b/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-size.ts @@ -20,7 +20,8 @@ interface ChartBulletScaleInterface { /** * Scale dimensions - * @private + * + * @private Not intended as public API and subject to change */ const scaleDimensions = ({ defaultSize, @@ -42,13 +43,15 @@ const scaleDimensions = ({ /** * Scale bar width per the given size properties - * @private + * + * @private Not intended as public API and subject to change */ const scaleBarWidth = (props: ChartBulletScaleInterface) => Math.max(scaleDimensions(props), 0); /** * Scale size per the given size properties - * @private + * + * @private Not intended as public API and subject to change */ const scaleSize = ({ value, ...rest }: ChartBulletScaleInterface) => Math.round( @@ -69,7 +72,8 @@ interface ChartBulletSizeInterface { /** * Scale size per the given size properties - * @private + * + * @private Not intended as public API and subject to change */ export const getComparativeMeasureErrorWidth = ({ height, @@ -90,7 +94,8 @@ export const getComparativeMeasureErrorWidth = ({ /** * Returns comparative measure width - * @private + * + * @private Not intended as public API and subject to change */ export const getComparativeMeasureWidth = ({ height, @@ -111,7 +116,8 @@ export const getComparativeMeasureWidth = ({ /** * Returns comparative measure warning width - * @private + * + * @private Not intended as public API and subject to change */ export const getComparativeMeasureWarningWidth = ({ height, @@ -132,7 +138,8 @@ export const getComparativeMeasureWarningWidth = ({ /** * Returns primary dot measure size - * @private + * + * @private Not intended as public API and subject to change */ export const getPrimaryDotMeasureSize = ({ height, @@ -153,7 +160,8 @@ export const getPrimaryDotMeasureSize = ({ /** * Returns primary segmented measure width - * @private + * + * @private Not intended as public API and subject to change */ export const getPrimarySegmentedMeasureWidth = ({ height, @@ -175,7 +183,8 @@ export const getPrimarySegmentedMeasureWidth = ({ /** * Returns qualitative range bar width - * @private + * + * @private Not intended as public API and subject to change */ export const getQualitativeRangeBarWidth = ({ height, diff --git a/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-theme.ts b/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-theme.ts index 2cfb13f9950..7a73ae5ca0f 100644 --- a/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-theme.ts +++ b/packages/react-charts/src/victory/components/ChartBullet/utils/chart-bullet-theme.ts @@ -27,7 +27,8 @@ interface ChartBulletThemeInterface { /** * Returns legend color scale - * @private + * + * @private Not intended as public API and subject to change */ const getLegendColorScale = (computedData: any, legendData: any) => { const colorScale: string[] = []; @@ -43,7 +44,8 @@ const getLegendColorScale = (computedData: any, legendData: any) => { /** * Returns color scale - * @private + * + * @private Not intended as public API and subject to change */ export const getColorScale = ({ comparativeErrorMeasureData, @@ -103,7 +105,8 @@ export const getColorScale = ({ /** * Returns bullet chart theme with legend color scale - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletThemeWithLegendColorScale = ({ comparativeErrorMeasureData, diff --git a/packages/react-charts/src/victory/components/ChartContainer/ChartContainer.tsx b/packages/react-charts/src/victory/components/ChartContainer/ChartContainer.tsx index f4d9054e2f7..59b47e53dde 100644 --- a/packages/react-charts/src/victory/components/ChartContainer/ChartContainer.tsx +++ b/packages/react-charts/src/victory/components/ChartContainer/ChartContainer.tsx @@ -74,7 +74,7 @@ export interface ChartContainerProps extends VictoryContainerProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ polar?: boolean; diff --git a/packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.tsx index 4c459828991..e77ad41978d 100644 --- a/packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.tsx +++ b/packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.tsx @@ -27,7 +27,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ children?: React.ReactElement | React.ReactElement[]; @@ -138,7 +138,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ polar?: boolean; diff --git a/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorTooltip.tsx index f1456fba3d9..67a283ed8e4 100644 --- a/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorTooltip.tsx +++ b/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorTooltip.tsx @@ -143,7 +143,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ height?: number; @@ -249,7 +249,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ width?: number; diff --git a/packages/react-charts/src/victory/components/ChartDonut/ChartDonut.tsx b/packages/react-charts/src/victory/components/ChartDonut/ChartDonut.tsx index 69b73966bfa..8a24a7cb11d 100644 --- a/packages/react-charts/src/victory/components/ChartDonut/ChartDonut.tsx +++ b/packages/react-charts/src/victory/components/ChartDonut/ChartDonut.tsx @@ -402,7 +402,7 @@ export interface ChartDonutProps extends ChartPieProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonut.md b/packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonut.md index 5d488eb093f..92fcfb18479 100644 --- a/packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonut.md +++ b/packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonut.md @@ -12,7 +12,7 @@ import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples ### Basic diff --git a/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutThreshold.tsx b/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutThreshold.tsx index 62c16641768..b722abd7957 100644 --- a/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutThreshold.tsx +++ b/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutThreshold.tsx @@ -76,7 +76,7 @@ export interface ChartDonutThresholdProps extends ChartDonutProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ children?: React.ReactElement; @@ -320,7 +320,7 @@ export interface ChartDonutThresholdProps extends ChartDonutProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; @@ -383,7 +383,7 @@ export interface ChartDonutThresholdProps extends ChartDonutProps { * * @example themeColor={ChartThemeColor.blue} * - * @private + * @private Not intended as public API and subject to change * @hide */ themeColor?: string; diff --git a/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutUtilization.tsx b/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutUtilization.tsx index 655783fa874..64f7c39c535 100644 --- a/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutUtilization.tsx +++ b/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutUtilization.tsx @@ -260,7 +260,7 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ isStatic?: boolean; @@ -403,7 +403,7 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ patternUnshiftIndex?: number; @@ -419,7 +419,7 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartDonutUtilization.md b/packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartDonutUtilization.md index 408c0e23e27..89111da91e7 100644 --- a/packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartDonutUtilization.md +++ b/packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartDonutUtilization.md @@ -13,7 +13,7 @@ import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@pa ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Donut utilization examples ### Basic diff --git a/packages/react-charts/src/victory/components/ChartGroup/ChartGroup.tsx b/packages/react-charts/src/victory/components/ChartGroup/ChartGroup.tsx index 35aa3975936..a92b3c0eadf 100644 --- a/packages/react-charts/src/victory/components/ChartGroup/ChartGroup.tsx +++ b/packages/react-charts/src/victory/components/ChartGroup/ChartGroup.tsx @@ -355,7 +355,7 @@ export interface ChartGroupProps extends VictoryGroupProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartLabel/ChartLabel.tsx b/packages/react-charts/src/victory/components/ChartLabel/ChartLabel.tsx index 58c283ff22c..a150694ca73 100644 --- a/packages/react-charts/src/victory/components/ChartLabel/ChartLabel.tsx +++ b/packages/react-charts/src/victory/components/ChartLabel/ChartLabel.tsx @@ -44,7 +44,7 @@ export interface ChartLabelProps extends VictoryLabelProps { * * @propType number | string | Function * - * @private + * @private Not intended as public API and subject to change * @hide */ children?: StringOrNumberOrCallback; @@ -98,7 +98,7 @@ export interface ChartLabelProps extends VictoryLabelProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ index?: string | number; @@ -140,7 +140,7 @@ export interface ChartLabelProps extends VictoryLabelProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ polar?: boolean; @@ -155,7 +155,7 @@ export interface ChartLabelProps extends VictoryLabelProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ scale?: { x?: any; y?: any }; @@ -197,7 +197,7 @@ export interface ChartLabelProps extends VictoryLabelProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ width?: number; diff --git a/packages/react-charts/src/victory/components/ChartLegend/ChartLegend.tsx b/packages/react-charts/src/victory/components/ChartLegend/ChartLegend.tsx index d6c76c3a24f..03efdd8302e 100644 --- a/packages/react-charts/src/victory/components/ChartLegend/ChartLegend.tsx +++ b/packages/react-charts/src/victory/components/ChartLegend/ChartLegend.tsx @@ -217,7 +217,7 @@ export interface ChartLegendProps extends VictoryLegendProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md b/packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md index d75660d145a..1386771e2ce 100644 --- a/packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md +++ b/packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md @@ -49,7 +49,7 @@ import '@patternfly/patternfly/patternfly-charts.css'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples ### Basic with right aligned legend diff --git a/packages/react-charts/src/victory/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/victory/components/ChartLegendTooltip/ChartLegendTooltip.tsx index dfd8070ebea..7588e9cc5a0 100644 --- a/packages/react-charts/src/victory/components/ChartLegendTooltip/ChartLegendTooltip.tsx +++ b/packages/react-charts/src/victory/components/ChartLegendTooltip/ChartLegendTooltip.tsx @@ -42,7 +42,7 @@ export interface ChartLegendTooltipProps extends Omit { const { COLOR_SCALE } = props; @@ -107,8 +108,8 @@ export const ColorTheme = (props: ColorThemeInterface): ChartThemeDefinition => /** * Component color theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const ColorComponentTheme = (props: ColorThemeInterface): ChartComponentThemeDefinition => { const { COLOR_SCALE } = props; diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/blue-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/blue-theme.ts index 7f5d45e8f78..d96f9ac9d5e 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/blue-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/blue-theme.ts @@ -18,7 +18,8 @@ const COLOR_SCALE = [ /** * Blue color theme - * @private + * + * @private Not intended as public API and subject to change */ export const BlueColorTheme = ColorTheme({ COLOR_SCALE @@ -26,8 +27,8 @@ export const BlueColorTheme = ColorTheme({ /** * Blue color component theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const BlueColorComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/gray-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/gray-theme.ts index b84cb9d9a49..c27387a4807 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/gray-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/gray-theme.ts @@ -18,7 +18,8 @@ const COLOR_SCALE = [ /** * Gray color theme - * @private + * + * @private Not intended as public API and subject to change */ export const GrayColorTheme = ColorTheme({ COLOR_SCALE @@ -26,8 +27,8 @@ export const GrayColorTheme = ColorTheme({ /** * Gray component theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const GrayColorComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/green-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/green-theme.ts index 21fe9d393c2..80e9a634141 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/green-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/green-theme.ts @@ -18,7 +18,8 @@ const COLOR_SCALE = [ /** * Green color theme - * @private + * + * @private Not intended as public API and subject to change */ export const GreenColorTheme = ColorTheme({ COLOR_SCALE @@ -26,8 +27,8 @@ export const GreenColorTheme = ColorTheme({ /** * Green color component theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const GreenColorComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-ordered-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-ordered-theme.ts index dc383575975..24d3148f7d6 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-ordered-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-ordered-theme.ts @@ -58,7 +58,8 @@ const COLOR_SCALE = [ /** * Multi-color ordered theme - * @private + * + * @private Not intended as public API and subject to change */ export const MultiColorOrderedTheme = ColorTheme({ COLOR_SCALE @@ -66,8 +67,8 @@ export const MultiColorOrderedTheme = ColorTheme({ /** * Multi-color ordered component theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const MultiColorOrderedComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-unordered-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-unordered-theme.ts index dd524d32ab4..da0c73f50d8 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-unordered-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-unordered-theme.ts @@ -78,7 +78,8 @@ const COLOR_SCALE = [ /** * Multi-color unordered theme - * @private + * + * @private Not intended as public API and subject to change */ export const MultiColorUnorderedTheme = ColorTheme({ COLOR_SCALE @@ -86,8 +87,8 @@ export const MultiColorUnorderedTheme = ColorTheme({ /** * Multi-color unordered component theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const MultiColorUnorderedComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/orange-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/orange-theme.ts index cb29dcbba91..830d7dfc3bc 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/orange-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/orange-theme.ts @@ -18,7 +18,8 @@ const COLOR_SCALE = [ /** * Orange color theme - * @private + * + * @private Not intended as public API and subject to change */ export const OrangeColorTheme = ColorTheme({ COLOR_SCALE @@ -26,8 +27,8 @@ export const OrangeColorTheme = ColorTheme({ /** * Orange color component theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const OrangeColorComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/purple-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/purple-theme.ts index 21ffef53f35..60567e02ddb 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/purple-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/purple-theme.ts @@ -18,7 +18,8 @@ const COLOR_SCALE = [ /** * Purple ordered theme - * @private + * + * @private Not intended as public API and subject to change */ export const PurpleColorTheme = ColorTheme({ COLOR_SCALE @@ -26,8 +27,8 @@ export const PurpleColorTheme = ColorTheme({ /** * Purple color component theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const PurpleColorComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/skeleton-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/skeleton-theme.ts index 9b58ce91fbf..b83b2a812be 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/skeleton-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/skeleton-theme.ts @@ -18,8 +18,8 @@ const COLOR_SCALE = [ /** * Skeleton color theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const SkeletonColorTheme = ColorTheme({ COLOR_SCALE @@ -27,8 +27,8 @@ export const SkeletonColorTheme = ColorTheme({ /** * Skeleton color theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const SkeletonColorComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/teal-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/teal-theme.ts index 3c6f0c5c5b2..531ffd06278 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/teal-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/teal-theme.ts @@ -18,7 +18,8 @@ const COLOR_SCALE = [ /** * Teal color theme - * @private + * + * @private Not intended as public API and subject to change */ export const TealColorTheme = ColorTheme({ COLOR_SCALE @@ -26,8 +27,8 @@ export const TealColorTheme = ColorTheme({ /** * Teal color component theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const TealColorComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/yellow-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/yellow-theme.ts index 5a512442d3d..d54c626d8b6 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/yellow-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/yellow-theme.ts @@ -18,7 +18,8 @@ const COLOR_SCALE = [ /** * Yellow color theme - * @private + * + * @private Not intended as public API and subject to change */ export const YellowColorTheme = ColorTheme({ COLOR_SCALE @@ -26,8 +27,8 @@ export const YellowColorTheme = ColorTheme({ /** * Yellow color component theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const YellowColorComponentTheme = ColorComponentTheme({ COLOR_SCALE diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/skeleton-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/skeleton-theme.ts index 21863aed04f..e6e35c7d395 100644 --- a/packages/react-charts/src/victory/components/ChartTheme/themes/skeleton-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/skeleton-theme.ts @@ -16,7 +16,8 @@ const LABEL_CENTERED_PROPS = { /** * Victory color theme - * @private + * + * @private Not intended as public API and subject to change */ export const ColorTheme = (props: ColorThemeInterface): ChartThemeDefinition => { const { COLOR_SCALE } = props; @@ -192,8 +193,8 @@ export const ColorTheme = (props: ColorThemeInterface): ChartThemeDefinition => /** * Component color theme - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const ColorComponentTheme = (props: ColorThemeInterface): ChartComponentThemeDefinition => { const { COLOR_SCALE } = props; diff --git a/packages/react-charts/src/victory/components/ChartThreshold/ChartThreshold.tsx b/packages/react-charts/src/victory/components/ChartThreshold/ChartThreshold.tsx index 2eb9541cf76..a0579d7d706 100644 --- a/packages/react-charts/src/victory/components/ChartThreshold/ChartThreshold.tsx +++ b/packages/react-charts/src/victory/components/ChartThreshold/ChartThreshold.tsx @@ -268,7 +268,7 @@ export interface ChartThresholdProps extends VictoryLineProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ polar?: boolean; @@ -312,7 +312,7 @@ export interface ChartThresholdProps extends VictoryLineProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ sharedEvents?: { events: any[]; getEventState: Function }; diff --git a/packages/react-charts/src/victory/components/ChartThreshold/examples/ChartThreshold.md b/packages/react-charts/src/victory/components/ChartThreshold/examples/ChartThreshold.md index 4459735062b..5f393993846 100644 --- a/packages/react-charts/src/victory/components/ChartThreshold/examples/ChartThreshold.md +++ b/packages/react-charts/src/victory/components/ChartThreshold/examples/ChartThreshold.md @@ -30,7 +30,7 @@ import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_colo ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples diff --git a/packages/react-charts/src/victory/components/ChartTooltip/ChartTooltip.tsx b/packages/react-charts/src/victory/components/ChartTooltip/ChartTooltip.tsx index eb8b6de4df6..233c7e93b49 100644 --- a/packages/react-charts/src/victory/components/ChartTooltip/ChartTooltip.tsx +++ b/packages/react-charts/src/victory/components/ChartTooltip/ChartTooltip.tsx @@ -147,7 +147,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ height?: number; @@ -248,7 +248,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps { * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ width?: number; diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md index b798f2e6498..5950df0c986 100644 --- a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md @@ -41,7 +41,7 @@ import './chart-tooltip.css'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples ### Voronoi container diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-domain.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-domain.ts index 23a4a186a2c..b53e4d81ea8 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-domain.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-domain.ts @@ -19,7 +19,8 @@ interface SourcesInterface { /** * Chart domain interface - * @private + * + * @private Not intended as public API and subject to change */ export interface ChartDomain { x: [number, number]; @@ -28,7 +29,8 @@ export interface ChartDomain { /** * Returns the min and max domain for given data - * @private + * + * @private Not intended as public API and subject to change */ export const getDomain = ({ data, maxDomain, minDomain, x, y }: DomainInterface): ChartDomain => { // x-domain @@ -100,7 +102,8 @@ export const getDomain = ({ data, maxDomain, minDomain, x, y }: DomainInterface) /** * Returns the domain for given min and max properties - * @private + * + * @private Not intended as public API and subject to change */ export const getDomains = ({ maxDomain, minDomain, sources }: SourcesInterface): ChartDomain => { const domains: ChartDomain[] = []; diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-helpers.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-helpers.ts index d73f7b17c6b..a1e04b29ad6 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-helpers.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-helpers.ts @@ -6,13 +6,15 @@ interface ChartClassNameInterface { /** * Copied from exenv - * @private + * + * @private Not intended as public API and subject to change */ export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); /** * Returns the class name that will be applied to the outermost div rendered by the chart's container - * @private + * + * @private Not intended as public API and subject to change */ export const getClassName = ({ className }: ChartClassNameInterface) => { let cleanClassName; diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-interactive-legend.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-interactive-legend.ts index fba78a17d3d..f3fc1e5b7d1 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-interactive-legend.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-interactive-legend.ts @@ -22,7 +22,8 @@ interface ChartInteractiveLegendExtInterface extends ChartInteractiveLegendInter /** * Returns child names for each series, except given ID index - * @private + * + * @private Not intended as public API and subject to change */ const getChildNames = ({ chartNames, omitIndex }: ChartInteractiveLegendExtInterface) => { const result = [] as any; @@ -62,7 +63,8 @@ const getInteractiveLegendItems = ({ chartNames, omitIndex }: ChartInteractiveLe /** * Returns styles for interactive legend items - * @private + * + * @private Not intended as public API and subject to change */ export const getInteractiveLegendItemStyles = (hidden = false) => !hidden diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-label.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-label.ts index 3c94a2c702e..fb1a70922c8 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-label.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-label.ts @@ -32,14 +32,16 @@ interface ChartLabelTextSizeInterface { /** * Returns x coordinate for bullet labels - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletLabelX = ({ chartWidth, dx = 0, labelPosition }: ChartBulletLabelInterface) => labelPosition === 'top' && chartWidth ? Math.round(chartWidth / 2) : dx; /** * Returns y coordinate for bullet labels - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletLabelY = ({ chartHeight, dy = 0, labelPosition }: ChartBulletLabelInterface) => { switch (labelPosition) { @@ -54,7 +56,8 @@ export const getBulletLabelY = ({ chartHeight, dy = 0, labelPosition }: ChartBul /** * Returns x coordinate for pie labels - * @private + * + * @private Not intended as public API and subject to change */ export const getPieLabelX = ({ dx = 0, @@ -87,7 +90,8 @@ export const getPieLabelX = ({ /** * Returns x coordinate for pie labels - * @private + * + * @private Not intended as public API and subject to change */ export const getPieLabelY = ({ dy = 0, height, labelPosition, padding, width }: ChartPieLabelInterface) => { const origin = getPieOrigin({ height, padding, width }); @@ -106,7 +110,8 @@ export const getPieLabelY = ({ dy = 0, height, labelPosition, padding, width }: /** * Returns an approximate size for the give text - * @private + * + * @private Not intended as public API and subject to change */ export const getLabelTextSize = ({ text, theme }: ChartLabelTextSizeInterface): { height: number; width: number } => { const style: any = theme.legend.style.labels; diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-legend.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-legend.ts index d195cfa3ff4..6319a05e5cc 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-legend.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-legend.ts @@ -53,9 +53,9 @@ interface ChartLegendTextMaxSizeInterface { /** * Returns the max text length in a legend data set to calculate the x offset for right aligned legends. - * @private + * + * @private Not intended as public API and subject to change */ - export const getLegendMaxTextWidth = (legendData: any[], theme: ChartThemeDefinition) => { let legendXOffset = 0; legendData.map((data: any) => { @@ -69,7 +69,8 @@ export const getLegendMaxTextWidth = (legendData: any[], theme: ChartThemeDefini /** * Returns a legend which has been positioned per the given chart properties - * @private + * + * @private Not intended as public API and subject to change */ export const getComputedLegend = ({ allowWrap = true, @@ -153,7 +154,8 @@ export const getComputedLegend = ({ /** * Returns legend dimensions - * @private + * + * @private Not intended as public API and subject to change */ export const getLegendDimensions = ({ legendData, @@ -174,7 +176,8 @@ export const getLegendDimensions = ({ /** * Returns true if the legend is smaller than its container - * @private + * + * @private Not intended as public API and subject to change */ const doesLegendFit = ({ dx = 0, @@ -216,7 +219,8 @@ const doesLegendFit = ({ /** * Returns the number of legend items per row - * @private + * + * @private Not intended as public API and subject to change */ const getLegendItemsPerRow = ({ dx, @@ -255,7 +259,8 @@ const getLegendItemsPerRow = ({ /** * Returns the extra height required to accommodate wrapped legend items - * @private + * + * @private Not intended as public API and subject to change */ export const getLegendItemsExtraHeight = ({ legendData, @@ -287,14 +292,16 @@ export const getLegendItemsExtraHeight = ({ /** * Returns x coordinate for legend - * @private + * + * @private Not intended as public API and subject to change */ const getLegendX = ({ chartType, ...rest }: ChartLegendPositionInterface) => chartType === 'pie' ? getPieLegendX(rest) : getChartLegendX(rest); /** * Returns y coordinate for legend - * @private + * + * @private Not intended as public API and subject to change */ const getLegendY = ({ chartType, ...rest }: ChartLegendPositionInterface) => { switch (chartType) { @@ -309,7 +316,8 @@ const getLegendY = ({ chartType, ...rest }: ChartLegendPositionInterface) => { /** * Returns y coordinate for bullet legends - * @private + * + * @private Not intended as public API and subject to change */ const getBulletLegendY = ({ dy = 0, @@ -350,7 +358,8 @@ const getBulletLegendY = ({ /** * Returns x coordinate for chart legends - * @private + * + * @private Not intended as public API and subject to change */ const getChartLegendX = ({ dx = 0, @@ -389,7 +398,8 @@ const getChartLegendX = ({ /** * Returns y coordinate for chart legends - * @private + * + * @private Not intended as public API and subject to change */ const getChartLegendY = ({ dy = 0, @@ -431,7 +441,8 @@ const getChartLegendY = ({ /** * Returns x coordinate for pie legends - * @private + * + * @private Not intended as public API and subject to change */ const getPieLegendX = ({ dx = 0, @@ -465,7 +476,8 @@ const getPieLegendX = ({ /** * Returns y coordinate for pie legends - * @private + * + * @private Not intended as public API and subject to change */ const getPieLegendY = ({ dy = 0, @@ -502,7 +514,8 @@ const getPieLegendY = ({ /** * Returns an approximation of longest text width based on legend styles - * @private + * + * @private Not intended as public API and subject to change */ // eslint-disable-next-line @typescript-eslint/no-unused-vars const getMaxLegendTextSize = ({ legendData, theme }: ChartLegendTextMaxSizeInterface) => { diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-origin.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-origin.ts index d76c0fddde5..e2cce4d9e8e 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-origin.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-origin.ts @@ -9,7 +9,8 @@ interface ChartPieOriginInterface { /** * Returns the origin for pie based charts. For example, something with a radius such as pie, donut, donut utilization, * and donut threshold. - * @private + * + * @private Not intended as public API and subject to change */ export const getPieOrigin = ({ height, padding, width }: ChartPieOriginInterface) => { const { top, bottom, left, right } = Helpers.getPadding(padding); diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-padding.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-padding.ts index 6bc970b60b6..a56ef159973 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-padding.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-padding.ts @@ -2,7 +2,8 @@ import { PaddingProps } from 'victory-core'; /** * Helper function to return padding style properties - * @private + * + * @private Not intended as public API and subject to change */ export const getPaddingForSide = ( side: 'bottom' | 'left' | 'right' | 'top', diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-patterns.tsx b/packages/react-charts/src/victory/components/ChartUtils/chart-patterns.tsx index 8e95fd8ae0f..10548ac15f6 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-patterns.tsx +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-patterns.tsx @@ -1,5 +1,6 @@ import { Children, cloneElement, Fragment, isValidElement, useMemo } from 'react'; import uniqueId from 'lodash/uniqueId'; +import cloneDeep from 'lodash/cloneDeep'; interface PatternPropsInterface { children?: any; @@ -17,7 +18,8 @@ interface PatternPropsInterface { /** * Patterns were pulled from v3.0.3 of the script below, which uses the MIT license. * See https://github.com/highcharts/pattern-fill/blob/master/pattern-fill-v2.js - * @private + * + * @private Not intended as public API and subject to change */ const patterns: any = [ // Set 1 @@ -216,13 +218,15 @@ const patterns: any = [ /** * Helper function to return a pattern ID - * @private + * + * @private Not intended as public API and subject to change */ const getPatternId = () => uniqueId('pf-pattern'); /** * Helper function to return pattern defs ID - * @private + * + * @private Not intended as public API and subject to change */ const getPatternDefsId = (prefix: string, index: number) => { const id = `${prefix}:${index}`; @@ -231,7 +235,8 @@ const getPatternDefsId = (prefix: string, index: number) => { /** * Helper function to return pattern defs - * @private + * + * @private Not intended as public API and subject to change */ export const getPatternDefs = ({ colorScale, @@ -273,14 +278,16 @@ export const getPatternDefs = ({ /** * Helper function to return pattern IDs to use as color scale - * @private + * + * @private Not intended as public API and subject to change */ const getPatternScale = (colorScale: string[], patternId: string) => colorScale.map((val: any, index: number) => `url(#${getPatternDefsId(patternId, index)})`); /** * Helper function to return default color scale - * @private + * + * @private Not intended as public API and subject to change */ const getDefaultColorScale = (colorScale: string[], themeColorScale: string[]) => { const result: string[] = []; @@ -292,7 +299,8 @@ const getDefaultColorScale = (colorScale: string[], themeColorScale: string[]) = /** * Helper function to return default pattern scale - * @private + * + * @private Not intended as public API and subject to change */ const getDefaultPatternScale = ({ colorScale, patternId, patternScale }: PatternPropsInterface) => { if (patternScale) { @@ -304,7 +312,8 @@ const getDefaultPatternScale = ({ colorScale, patternId, patternScale }: Pattern /** * Merge pattern IDs with `data.fill` property, used by interactive pie chart legend - * @private + * + * @private Not intended as public API and subject to change */ export const mergePatternData = (data: any, patternScale: string[]) => { if (!patternScale) { @@ -321,7 +330,8 @@ export const mergePatternData = (data: any, patternScale: string[]) => { /** * Helper function to return default pattern props - * @private + * + * @private Not intended as public API and subject to change */ export const useDefaultPatternProps = ({ colorScale, @@ -330,7 +340,7 @@ export const useDefaultPatternProps = ({ themeColorScale }: PatternPropsInterface) => { const defaultColorScale = getDefaultColorScale(colorScale, themeColorScale); - let defaultPatternScale = patternScale; + let defaultPatternScale = cloneDeep(patternScale); let isPatternDefs = !patternScale && hasPatterns !== undefined; const patternId = useMemo(() => (isPatternDefs ? getPatternId() : undefined), [isPatternDefs]); @@ -358,7 +368,8 @@ export const useDefaultPatternProps = ({ /** * Helper function to render children with patterns - * @private + * + * @private Not intended as public API and subject to change */ export const renderChildrenWithPatterns = ({ children, patternScale, themeColor }: PatternPropsInterface) => Children.toArray(children).map((child, index) => { diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-theme-types.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-theme-types.ts index 17fbae280b3..0a9a25bc432 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-theme-types.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-theme-types.ts @@ -4,7 +4,8 @@ import merge from 'lodash/merge'; /** * Returns axis theme - * @private + * + * @private Not intended as public API and subject to change */ export const getAxisTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -14,7 +15,8 @@ export const getAxisTheme = (themeColor: string): ChartThemeDefinition => { /** * Returns bullet chart theme - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -24,7 +26,8 @@ export const getBulletTheme = (themeColor: string): ChartThemeDefinition => { /** * Returns comparative error measure theme for bullet chart - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletComparativeErrorMeasureTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -34,7 +37,8 @@ export const getBulletComparativeErrorMeasureTheme = (themeColor: string): Chart /** * Returns comparative measure theme for bullet chart - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletComparativeMeasureTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -44,7 +48,8 @@ export const getBulletComparativeMeasureTheme = (themeColor: string): ChartTheme /** * Returns comparative warning measure theme for bullet chart - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletComparativeWarningMeasureTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -54,7 +59,8 @@ export const getBulletComparativeWarningMeasureTheme = (themeColor: string): Cha /** * Returns group title theme for bullet chart - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletGroupTitleTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -64,7 +70,8 @@ export const getBulletGroupTitleTheme = (themeColor: string): ChartThemeDefiniti /** * Returns primary dot measure theme for bullet chart - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletPrimaryDotMeasureTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -74,7 +81,8 @@ export const getBulletPrimaryDotMeasureTheme = (themeColor: string): ChartThemeD /** * Returns primary negative measure theme for bullet chart - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletPrimaryNegativeMeasureTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -84,7 +92,8 @@ export const getBulletPrimaryNegativeMeasureTheme = (themeColor: string): ChartT /** * Returns primary segmented measure theme for bullet chart - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletPrimarySegmentedMeasureTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -94,7 +103,8 @@ export const getBulletPrimarySegmentedMeasureTheme = (themeColor: string): Chart /** * Returns qualitative range theme for bullet chart - * @private + * + * @private Not intended as public API and subject to change */ export const getBulletQualitativeRangeTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -104,7 +114,8 @@ export const getBulletQualitativeRangeTheme = (themeColor: string): ChartThemeDe /** * Returns theme for Chart component - * @private + * + * @private Not intended as public API and subject to change */ export const getChartTheme = (themeColor: string, showAxis: boolean): ChartThemeDefinition => { const theme = getTheme(themeColor); @@ -124,7 +135,8 @@ export const getChartTheme = (themeColor: string, showAxis: boolean): ChartTheme /** * Returns donut theme - * @private + * + * @private Not intended as public API and subject to change */ export const getDonutTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -134,7 +146,8 @@ export const getDonutTheme = (themeColor: string): ChartThemeDefinition => { /** * Returns dynamic donut threshold theme - * @private + * + * @private Not intended as public API and subject to change */ export const getDonutThresholdDynamicTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -144,7 +157,8 @@ export const getDonutThresholdDynamicTheme = (themeColor: string): ChartThemeDef /** * Returns static donut threshold theme - * @private + * + * @private Not intended as public API and subject to change */ export const getDonutThresholdStaticTheme = (themeColor: string, invert?: boolean): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -160,7 +174,8 @@ export const getDonutThresholdStaticTheme = (themeColor: string, invert?: boolea /** * Returns donut utilization theme - * @private + * + * @private Not intended as public API and subject to change */ export const getDonutUtilizationTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); @@ -170,7 +185,8 @@ export const getDonutUtilizationTheme = (themeColor: string): ChartThemeDefiniti /** * Returns threshold theme - * @private + * + * @private Not intended as public API and subject to change */ export const getThresholdTheme = (themeColor: string): ChartThemeDefinition => { const baseTheme = getTheme(themeColor); diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-theme.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-theme.ts index c0c4ed54a54..9e52be9a229 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-theme.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-theme.ts @@ -32,6 +32,7 @@ export const getCustomTheme = (themeColor: string, customTheme: ChartThemeDefini /** * Returns base theme for given color + * * @public */ export const getTheme = (themeColor: string): ChartThemeDefinition => { @@ -41,8 +42,8 @@ export const getTheme = (themeColor: string): ChartThemeDefinition => { /** * Returns base component theme for given color - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const getComponentTheme = (themeColor: string): ChartComponentThemeDefinition => { const theme = cloneDeep(ChartBaseComponentTheme); @@ -51,6 +52,7 @@ export const getComponentTheme = (themeColor: string): ChartComponentThemeDefini /** * Returns theme colors + * * @public */ export const getThemeColors = (themeColor: string) => { @@ -83,8 +85,8 @@ export const getThemeColors = (themeColor: string) => { /** * Returns theme component colors - * @private - * @beta + * + * @private Not intended as public API and subject to change */ export const getThemeComponentColors = (themeColor: string) => { switch (themeColor) { diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-tooltip.ts index 79d937d5d0d..96bbf59a0a9 100644 --- a/packages/react-charts/src/victory/components/ChartUtils/chart-tooltip.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-tooltip.ts @@ -48,7 +48,8 @@ interface ChartLegendTooltipVisibleTextInterface { * When using a cursor container, the tooltip can be offset from the cursor point. If offsetCursorDimensionX is true, * the tooltip will appear to the right the vertical cursor. If offsetCursorDimensionY is true, the tooltip will appear * above the vertical cursor. - * @private + * + * @private Not intended as public API and subject to change */ export const getCursorTooltipCenterOffset = ({ offsetCursorDimensionX = false, @@ -74,7 +75,8 @@ export const getCursorTooltipCenterOffset = ({ * When using a cursor container, the tooltip pointer orientation can be adjusted as the cursor approaches the edge of * the chart. If horizontal is true, the tooltip pointer will either be 'left' or 'right'. If horizontal is true, the * tooltip pointer will either be 'top' or 'bottom'. - * @private + * + * @private Not intended as public API and subject to change */ export const getCursorTooltipPoniterOrientation = ({ horizontal = true, @@ -90,7 +92,8 @@ export const getCursorTooltipPoniterOrientation = ({ /** * Returns props associated with legend data - * @private + * + * @private Not intended as public API and subject to change */ export const getLegendTooltipDataProps = (props: ChartLegendProps) => merge( @@ -117,7 +120,8 @@ export const getLegendTooltipDataProps = (props: ChartLegendProps) => /** * Returns the legend height and width - * @private + * + * @private Not intended as public API and subject to change */ export const getLegendTooltipSize = ({ legendData, @@ -219,7 +223,8 @@ export const getLegendTooltipSize = ({ /** * Returns visible legend data, while syncing color scale. If textAsLegendData is true, the text prop is used as * legend data so y values can be passed individually to the label component - * @private + * + * @private Not intended as public API and subject to change */ export const getLegendTooltipVisibleData = ({ activePoints, @@ -268,7 +273,8 @@ export const getLegendTooltipVisibleData = ({ /** * Returns visible text for interactive legends - * @private + * + * @private Not intended as public API and subject to change */ export const getLegendTooltipVisibleText = ({ activePoints, diff --git a/packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx b/packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx index ae94991e722..4c5b063a6ad 100644 --- a/packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx +++ b/packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx @@ -38,7 +38,7 @@ export interface ChartVoronoiContainerProps extends VictoryVoronoiContainerProps * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ children?: React.ReactElement | React.ReactElement[]; @@ -139,7 +139,7 @@ export interface ChartVoronoiContainerProps extends VictoryVoronoiContainerProps * * Note: This prop should not be set manually. * - * @private + * @private Not intended as public API and subject to change * @hide */ polar?: boolean; diff --git a/packages/react-charts/src/victory/components/Patterns/examples/patterns.md b/packages/react-charts/src/victory/components/Patterns/examples/patterns.md index 28c29d55fe5..7a54238e22a 100644 --- a/packages/react-charts/src/victory/components/Patterns/examples/patterns.md +++ b/packages/react-charts/src/victory/components/Patterns/examples/patterns.md @@ -52,7 +52,7 @@ import '@patternfly/patternfly/patternfly-charts.css'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples ### Basic pie chart diff --git a/packages/react-charts/src/victory/components/ResizeObserver/examples/resizeObserver.md b/packages/react-charts/src/victory/components/ResizeObserver/examples/resizeObserver.md index af0649bf7d8..ae20c1e35fe 100644 --- a/packages/react-charts/src/victory/components/ResizeObserver/examples/resizeObserver.md +++ b/packages/react-charts/src/victory/components/ResizeObserver/examples/resizeObserver.md @@ -40,7 +40,7 @@ import '@patternfly/patternfly/patternfly-charts.css'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. Charts scale within the parent container by default, so the `width` and `height` props do not actually determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number diff --git a/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md b/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md index a96990356b2..950ae09a827 100644 --- a/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md +++ b/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md @@ -21,7 +21,6 @@ propComponents: [ 'ChartVoronoiContainer' ] hideDarkMode: true -beta: true --- import { useState } from 'react'; @@ -32,7 +31,7 @@ import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_ ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples ### Area chart diff --git a/packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md b/packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md index ec28ab0d7fd..c069de4dcbd 100644 --- a/packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md +++ b/packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md @@ -20,7 +20,7 @@ import './sparkline.css'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. +The examples below are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. ## Examples ### Basic