From b72a359f116e4d9d63003ad0b4d0d6bb4a745d97 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Thu, 10 Oct 2024 11:19:46 -0400 Subject: [PATCH] refactor(chart): sw-2707 remove deprecated react --- src/components/README.md | 257 ++++++++++-------- .../__snapshots__/chart.test.js.snap | 67 ++++- .../__snapshots__/chartElements.test.js.snap | 29 -- .../__snapshots__/chartIcon.test.js.snap | 1 - src/components/chart/chart.js | 155 ++++------- src/components/chart/chartElements.js | 107 ++++---- src/components/chart/chartIcon.js | 53 ++-- src/components/chart/chartLegend.js | 12 +- .../__snapshots__/graphCardChart.test.js.snap | 28 -- .../graphCardChartLegend.test.js.snap | 11 - .../__snapshots__/product.config.test.js.snap | 12 - tests/__snapshots__/dist.test.js.snap | 4 +- 12 files changed, 334 insertions(+), 402 deletions(-) diff --git a/src/components/README.md b/src/components/README.md index ba78a6b8e..973dc39b5 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -507,71 +507,128 @@ PF Charts/Victory area, and line, charts generator. * [Chart](#Components.module_Chart) - * [~Chart(props)](#Components.module_Chart..Chart) ⇒ React.ReactNode - * [.propTypes](#Components.module_Chart..Chart.propTypes) : Object - * [.defaultProps](#Components.module_Chart..Chart.defaultProps) : Object + * [~Chart(props)](#Components.module_Chart..Chart) ⇒ JSX.Element + * [~ChartPadding](#Components.module_Chart..ChartPadding) : object + * [~ChartDataSet](#Components.module_Chart..ChartDataSet) : object -### Chart~Chart(props) ⇒ React.ReactNode +### Chart~Chart(props) ⇒ JSX.Element Return a chart and elements with a context provider. **Kind**: inner method of [Chart](#Components.module_Chart) - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
ParamTypeParamTypeDefault
propsobjectpropsobject
props.chartLegendReact.ReactNode | function[props.chartLegend]React.ReactNode | function
props.chartTooltipReact.ReactNode | function[props.chartTooltip]React.ReactNode | function
props.dataSetsArray[props.dataSets]Array.<ChartDataSet>[]
props.paddingobject[props.padding]ChartPadding{bottom:75, left:55, right:55, top:50 }
props.themeColorstring[props.themeColor]string | ChartThemeColor"ChartThemeColor.blue"
props.xAxisChartLabelReact.ReactNode | function[props.xAxisChartLabel]React.ReactNode | function
props.yAxisChartLabelReact.ReactNode | function[props.yAxisChartLabel]React.ReactNode | function
props.xAxisFixLabelOverlapboolean[props.xAxisFixLabelOverlap]booleantrue
props.xAxisLabelIncrementnumber[props.xAxisLabelIncrement]number1
props.xAxisTickFormatfunction[props.xAxisTickFormat]function
props.yAxisTickFormatfunction[props.yAxisTickFormat]function
props.xValueFormatfunction[props.xValueFormat]function
props.yValueFormatfunction[props.yValueFormat]function
+ -* [~Chart(props)](#Components.module_Chart..Chart) ⇒ React.ReactNode - * [.propTypes](#Components.module_Chart..Chart.propTypes) : Object - * [.defaultProps](#Components.module_Chart..Chart.defaultProps) : Object +### Chart~ChartPadding : object +**Kind**: inner typedef of [Chart](#Components.module_Chart) +**Properties** - + + + + + + + + + + + + + + + + +
NameType
bottomnumber
leftnumber
rightnumber
topnumber
-#### Chart.propTypes : Object -Prop types. + -**Kind**: static property of [Chart](#Components.module_Chart..Chart) - +### Chart~ChartDataSet : object +**Kind**: inner typedef of [Chart](#Components.module_Chart) +**Properties** -#### Chart.defaultProps : Object -Default props. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameType
dataArray.<{x: number, y: (number|undefined), xAxisLabel: (number|string|Date|undefined)}>
[animate]boolean | object
[chartType]ChartTypeVariant
[fill]string
[stroke]string
[strokeWidth]number
[strokeDasharray]string
[themeColor]string
[themeVariant]string
idstring
[interpolation]string
[style]object
[isStacked]boolean
[xAxisChartLabel]React.ReactNode | function
[yAxisChartLabel]React.ReactNode | function
[xAxisUseDataSet]boolean
[yAxisUseDataSet]boolean
-**Kind**: static property of [Chart](#Components.module_Chart..Chart) ## ChartAxisLabel @@ -674,53 +731,44 @@ Graph layer status. ## ChartElements * [ChartElements](#Chart.module_ChartElements) - * [~ChartElements(props)](#Chart.module_ChartElements..ChartElements) ⇒ React.ReactNode - * _static_ - * [.propTypes](#Chart.module_ChartElements..ChartElements.propTypes) : Object - * [.defaultProps](#Chart.module_ChartElements..ChartElements.defaultProps) : Object - * _inner_ - * [~VictoryVoronoiCursorContainer](#Chart.module_ChartElements..ChartElements..VictoryVoronoiCursorContainer) + * [~InterpolationTypes](#Chart.module_ChartElements..InterpolationTypes) : Object + * [~chartElementsDefaults](#Chart.module_ChartElements..chartElementsDefaults) : Object + * [~ChartElements(props)](#Chart.module_ChartElements..ChartElements) ⇒ JSX.Element + * [~VictoryVoronoiCursorContainer](#Chart.module_ChartElements..ChartElements..VictoryVoronoiCursorContainer) + * [~ChartTypeDefault](#Chart.module_ChartElements..ChartTypeDefault) : object + + + +### ChartElements~InterpolationTypes : Object +Available chart interpolation types + +**Kind**: inner constant of [ChartElements](#Chart.module_ChartElements) + +### ChartElements~chartElementsDefaults : Object +Chart elements default prop settings + +**Kind**: inner constant of [ChartElements](#Chart.module_ChartElements) -### ChartElements~ChartElements(props) ⇒ React.ReactNode +### ChartElements~ChartElements(props) ⇒ JSX.Element Aggregate, generate, a compatible Victory chart element/facet component. **Kind**: inner method of [ChartElements](#Chart.module_ChartElements) - + - + - +
ParamTypeParamTypeDefault
propsobjectpropsobject
props.chartTypeDefaultsobject[props.chartTypeDefaults]chartElementsDefaultschartElementsDefaults
- -* [~ChartElements(props)](#Chart.module_ChartElements..ChartElements) ⇒ React.ReactNode - * _static_ - * [.propTypes](#Chart.module_ChartElements..ChartElements.propTypes) : Object - * [.defaultProps](#Chart.module_ChartElements..ChartElements.defaultProps) : Object - * _inner_ - * [~VictoryVoronoiCursorContainer](#Chart.module_ChartElements..ChartElements..VictoryVoronoiCursorContainer) - - - -#### ChartElements.propTypes : Object -Prop types - -**Kind**: static property of [ChartElements](#Chart.module_ChartElements..ChartElements) - - -#### ChartElements.defaultProps : Object -Default props - -**Kind**: static property of [ChartElements](#Chart.module_ChartElements..ChartElements) #### ChartElements~VictoryVoronoiCursorContainer @@ -728,6 +776,28 @@ Note: both cursor and voronoiDimension attrs required if the need is to have... the tooltip populate consistently without being "near" a chart element y axis point **Kind**: inner constant of [ChartElements](#Chart.module_ChartElements..ChartElements) + + +### ChartElements~ChartTypeDefault : object +**Kind**: inner typedef of [ChartElements](#Chart.module_ChartElements) +**Properties** + + + + + + + + + + + + + + + +
NameType
componentChartArea | ChartLine | ChartThreshold
[interpolation]InterpolationTypes
[animate]Object
+ ## ChartHelpers @@ -946,16 +1016,21 @@ Generate x,y props. * [ChartIcon](#Chart.module_ChartIcon) * [~IconSize](#Chart.module_ChartIcon..IconSize) : Object + * [~IconSymbol](#Chart.module_ChartIcon..IconSymbol) : Object * [~getSize(size)](#Chart.module_ChartIcon..getSize) ⇒ string - * [~ChartIcon(props)](#Chart.module_ChartIcon..ChartIcon) ⇒ React.ReactNode - * [.propTypes](#Chart.module_ChartIcon..ChartIcon.propTypes) : Object - * [.defaultProps](#Chart.module_ChartIcon..ChartIcon.defaultProps) : Object + * [~ChartIcon(props)](#Chart.module_ChartIcon..ChartIcon) ⇒ JSX.Element ### ChartIcon~IconSize : Object Consistent icon sizing. +**Kind**: inner constant of [ChartIcon](#Chart.module_ChartIcon) + + +### ChartIcon~IconSymbol : Object +Consistent icon symbols + **Kind**: inner constant of [ChartIcon](#Chart.module_ChartIcon) @@ -978,79 +1053,39 @@ Emulate pf icon sizing for custom SVGs -### ChartIcon~ChartIcon(props) ⇒ React.ReactNode +### ChartIcon~ChartIcon(props) ⇒ JSX.Element Render an icon for use outside of Victory charts. **Kind**: inner method of [ChartIcon](#Chart.module_ChartIcon) - + - + - + - + - + - +
ParamTypeParamTypeDefault
propsobjectpropsobject
props.fillstring[props.fill]string
props.symbolstring[props.symbol]string | IconSymbol"IconSymbol.square"
props.sizestring[props.size]string | IconSize"IconSize.sm"
props.titlestring[props.title]string
- -* [~ChartIcon(props)](#Chart.module_ChartIcon..ChartIcon) ⇒ React.ReactNode - * [.propTypes](#Chart.module_ChartIcon..ChartIcon.propTypes) : Object - * [.defaultProps](#Chart.module_ChartIcon..ChartIcon.defaultProps) : Object - - - -#### ChartIcon.propTypes : Object -Prop types. - -**Kind**: static property of [ChartIcon](#Chart.module_ChartIcon..ChartIcon) - - -#### ChartIcon.defaultProps : Object -Default props. - -**Kind**: static property of [ChartIcon](#Chart.module_ChartIcon..ChartIcon) ## ChartLegend - -* [ChartLegend](#Chart.module_ChartLegend) - * [~ChartLegend()](#Chart.module_ChartLegend..ChartLegend) ⇒ React.ReactNode - * [.propTypes](#Chart.module_ChartLegend..ChartLegend.propTypes) - * [.defaultProps](#Chart.module_ChartLegend..ChartLegend.defaultProps) - -### ChartLegend~ChartLegend() ⇒ React.ReactNode +### ChartLegend~ChartLegend() ⇒ JSX.Element \| null Wrapper for rendering an HTML based legend. **Kind**: inner method of [ChartLegend](#Chart.module_ChartLegend) - -* [~ChartLegend()](#Chart.module_ChartLegend..ChartLegend) ⇒ React.ReactNode - * [.propTypes](#Chart.module_ChartLegend..ChartLegend.propTypes) - * [.defaultProps](#Chart.module_ChartLegend..ChartLegend.defaultProps) - - - -#### ChartLegend.propTypes -Prop types. - -**Kind**: static property of [ChartLegend](#Chart.module_ChartLegend..ChartLegend) - - -#### ChartLegend.defaultProps -Default props. - -**Kind**: static property of [ChartLegend](#Chart.module_ChartLegend..ChartLegend) ## ChartTooltip diff --git a/src/components/chart/__tests__/__snapshots__/chart.test.js.snap b/src/components/chart/__tests__/__snapshots__/chart.test.js.snap index 974b47092..6d85e9a5c 100644 --- a/src/components/chart/__tests__/__snapshots__/chart.test.js.snap +++ b/src/components/chart/__tests__/__snapshots__/chart.test.js.snap @@ -20,7 +20,7 @@ exports[`Chart Component should render a basic component: basic 1`] = ` "stackedElements": [], "stackedElementsById": {}, }, - "chartLegend": null, + "chartLegend": undefined, "chartWidth": 0, "dataSets": [], "hasData": true, @@ -37,14 +37,14 @@ exports[`Chart Component should render a basic component: basic 1`] = ` "tooltipDataSetLookUp": {}, "xAxisProps": { "fixLabelOverlap": false, - "label": null, + "label": undefined, "tickFormat": [Function], "tickValues": [], }, "yAxisProps": [ { "dependentAxis": true, - "label": null, + "label": undefined, "orientation": "left", "showGrid": true, "style": { @@ -230,7 +230,7 @@ exports[`Chart Component should setup basic chart settings: settings 1`] = ` }, }, }, - "chartLegend": null, + "chartLegend": undefined, "chartWidth": 0, "dataSets": [ { @@ -284,10 +284,61 @@ exports[`Chart Component should setup basic chart settings: settings 1`] = ` "top": 50, }, "themeColor": "blue", - "tooltipDataSetLookUp": {}, + "tooltipDataSetLookUp": { + "1": { + "itemsByKey": { + "ipsumGraph": { + "chartType": undefined, + "color": "#lorem", + "data": { + "x": 1, + "xAxisLabel": "1 x axis label", + "y": 1, + }, + }, + "loremGraph": { + "chartType": undefined, + "color": "#lorem", + "data": { + "x": 1, + "xAxisLabel": "1 x axis label", + "y": 1, + }, + }, + }, + "tooltip": undefined, + "x": 1, + "y": null, + }, + "2": { + "itemsByKey": { + "ipsumGraph": { + "chartType": undefined, + "color": "#lorem", + "data": { + "x": 2, + "xAxisLabel": "2 x axis label", + "y": 2, + }, + }, + "loremGraph": { + "chartType": undefined, + "color": "#lorem", + "data": { + "x": 2, + "xAxisLabel": "2 x axis label", + "y": 2, + }, + }, + }, + "tooltip": undefined, + "x": 2, + "y": null, + }, + }, "xAxisProps": { - "fixLabelOverlap": true, - "label": null, + "fixLabelOverlap": false, + "label": undefined, "tickFormat": [Function], "tickValues": [ 1, @@ -297,7 +348,7 @@ exports[`Chart Component should setup basic chart settings: settings 1`] = ` "yAxisProps": [ { "dependentAxis": true, - "label": null, + "label": undefined, "orientation": "left", "showGrid": true, "style": { diff --git a/src/components/chart/__tests__/__snapshots__/chartElements.test.js.snap b/src/components/chart/__tests__/__snapshots__/chartElements.test.js.snap index 8e2dee4a1..90ec28bb4 100644 --- a/src/components/chart/__tests__/__snapshots__/chartElements.test.js.snap +++ b/src/components/chart/__tests__/__snapshots__/chartElements.test.js.snap @@ -164,35 +164,6 @@ exports[`ChartElements Component should handle basic element settings from conte exports[`ChartElements Component should render a basic component: basic 1`] = ` diff --git a/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap b/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap index 900d8e11d..625d8d0b2 100644 --- a/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap +++ b/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap @@ -141,7 +141,6 @@ exports[`ChartIcon Component should render a basic component: basic 1`] = ` > `; diff --git a/src/components/chart/chart.js b/src/components/chart/chart.js index bb3fa1ed7..8bc3ebcb2 100644 --- a/src/components/chart/chart.js +++ b/src/components/chart/chart.js @@ -1,5 +1,4 @@ import React, { useRef, useState } from 'react'; -import PropTypes from 'prop-types'; import { ChartThemeColor } from '@patternfly/react-charts'; import { useShallowCompareEffect } from 'react-use'; import { ChartContext } from './chartContext'; @@ -22,35 +21,69 @@ import { useResizeObserver } from '../../hooks/useWindow'; * @property {module} ChartTooltip */ +/** + * @typedef {object} ChartPadding + * @property {number} bottom + * @property {number} left + * @property {number} right + * @property {number} top + */ + +/** + * @typedef {object} ChartDataSet + * @property {Array<{x: number, y: (number|undefined), xAxisLabel: (number|string|Date|undefined)}>} data + * @property {boolean|object} [animate] + * @property {ChartTypeVariant} [chartType] + * @property {string} [fill] + * @property {string} [stroke] + * @property {number} [strokeWidth] + * @property {string} [strokeDasharray] + * @property {string} [themeColor] + * @property {string} [themeVariant] + * @property {string} id + * @property {string} [interpolation] + * @property {object} [style] + * @property {boolean} [isStacked] + * @property {React.ReactNode|Function} [xAxisChartLabel] + * @property {React.ReactNode|Function} [yAxisChartLabel] + * @property {boolean} [xAxisUseDataSet] + * @property {boolean} [yAxisUseDataSet] + */ + /** * Return a chart and elements with a context provider. * * @param {object} props - * @param {React.ReactNode|Function} props.chartLegend - * @param {React.ReactNode|Function} props.chartTooltip - * @param {Array} props.dataSets - * @param {object} props.padding - * @param {string} props.themeColor - * @param {React.ReactNode|Function} props.xAxisChartLabel - * @param {React.ReactNode|Function} props.yAxisChartLabel - * @param {boolean} props.xAxisFixLabelOverlap - * @param {number} props.xAxisLabelIncrement - * @param {Function} props.xAxisTickFormat - * @param {Function} props.yAxisTickFormat - * @param {Function} props.xValueFormat - * @param {Function} props.yValueFormat - * @returns {React.ReactNode} + * @param {React.ReactNode|Function} [props.chartLegend] + * @param {React.ReactNode|Function} [props.chartTooltip] + * @param {Array} [props.dataSets=[]] + * @param {ChartPadding} [props.padding={bottom:75, left:55, right:55, top:50 }] + * @param {string|ChartThemeColor} [props.themeColor=ChartThemeColor.blue] + * @param {React.ReactNode|Function} [props.xAxisChartLabel] + * @param {React.ReactNode|Function} [props.yAxisChartLabel] + * @param {boolean} [props.xAxisFixLabelOverlap=true] + * @param {number} [props.xAxisLabelIncrement=1] + * @param {Function} [props.xAxisTickFormat] + * @param {Function} [props.yAxisTickFormat] + * @param {Function} [props.xValueFormat] + * @param {Function} [props.yValueFormat] + * @returns {JSX.Element} */ const Chart = ({ chartLegend, chartTooltip, - dataSets, - padding, - themeColor, + dataSets = [], + padding = { + bottom: 75, + left: 55, + right: 55, + top: 50 + }, + themeColor = ChartThemeColor.blue, xAxisChartLabel, yAxisChartLabel, xAxisFixLabelOverlap, - xAxisLabelIncrement, + xAxisLabelIncrement = 1, xAxisTickFormat, yAxisTickFormat, xValueFormat, @@ -171,88 +204,4 @@ const Chart = ({ ); }; -/** - * Prop types. - * - * @type {{chartTooltip: React.ReactNode|Function, xValueFormat: Function, padding: {top: number, left: number, - * bottom: number, right: number}, xAxisTickFormat: Function, themeColor: string, chartLegend: - * React.ReactNode|Function, yAxisTickFormat: Function, dataSets: Array, xAxisFixLabelOverlap: boolean, - * xAxisLabelIncrement: number, yValueFormat: Function}} - */ -Chart.propTypes = { - chartLegend: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), - chartTooltip: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), - dataSets: PropTypes.arrayOf( - PropTypes.shape({ - data: PropTypes.arrayOf( - PropTypes.shape({ - x: PropTypes.number.isRequired, - y: PropTypes.number, - xAxisLabel: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]) - }) - ), - animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), - chartType: PropTypes.oneOf([...Object.values(ChartTypeVariant)]), - fill: PropTypes.string, - stroke: PropTypes.string, - strokeWidth: PropTypes.number, - strokeDasharray: PropTypes.string, - themeColor: PropTypes.string, - themeVariant: PropTypes.string, - id: PropTypes.string.isRequired, - interpolation: PropTypes.string, - style: PropTypes.object, - isStacked: PropTypes.bool, - xAxisChartLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), - yAxisChartLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), - xAxisUseDataSet: PropTypes.bool, - yAxisUseDataSet: PropTypes.bool - }) - ), - padding: PropTypes.shape({ - bottom: PropTypes.number, - left: PropTypes.number, - right: PropTypes.number, - top: PropTypes.number - }), - themeColor: PropTypes.oneOf(Object.values(ChartThemeColor)), - xAxisChartLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), - yAxisChartLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), - xAxisFixLabelOverlap: PropTypes.bool, - xAxisLabelIncrement: PropTypes.number, - xAxisTickFormat: PropTypes.func, - yAxisTickFormat: PropTypes.func, - xValueFormat: PropTypes.func, - yValueFormat: PropTypes.func -}; - -/** - * Default props. - * - * @type {{chartTooltip: React.ReactNode|Function, xValueFormat: Function, padding: {top: number, left: number, - * bottom: number, right: number}, xAxisTickFormat: Function, themeColor: string, chartLegend: - * React.ReactNode|Function, yAxisTickFormat: Function, dataSets: Array, xAxisFixLabelOverlap: boolean, - * xAxisLabelIncrement: number, yValueFormat: Function}} - */ -Chart.defaultProps = { - chartLegend: null, - chartTooltip: null, - dataSets: [], - padding: { - bottom: 75, - left: 55, - right: 55, - top: 50 - }, - themeColor: 'blue', - xAxisChartLabel: null, - yAxisChartLabel: null, - xAxisFixLabelOverlap: true, - xAxisLabelIncrement: 1, - xAxisTickFormat: null, - yAxisTickFormat: null, - xValueFormat: null, - yValueFormat: null -}; - export { Chart as default, Chart, ChartTypeVariant }; diff --git a/src/components/chart/chartElements.js b/src/components/chart/chartElements.js index d55c18b86..0e91e0215 100644 --- a/src/components/chart/chartElements.js +++ b/src/components/chart/chartElements.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { VictoryStack as ChartStack, VictoryTooltip as ChartCursorTooltip } from 'victory'; import { createContainer } from 'victory-create-container'; import { Chart, ChartArea, ChartAxis, ChartContainer, ChartLine, ChartThreshold } from '@patternfly/react-charts'; @@ -13,6 +12,55 @@ import { ChartTypeVariant } from './chartHelpers'; * @module ChartElements */ +/** + * Available chart interpolation types + * + * @type {{monotoneX: string, step: string}} + */ +const InterpolationTypes = { + monotoneX: 'monotoneX', + step: 'step' +}; + +/** + * @typedef {object} ChartTypeDefault + * @property {(ChartArea|ChartLine|ChartThreshold)} component + * @property {InterpolationTypes} [interpolation] + * @property {{ duration: number, onLoad: { duration: number } }} [animate] + */ + +/** + * Chart elements default prop settings + * + * @type {{ChartTypeVariant: ChartTypeDefault}} + */ +const chartElementsDefaults = { + [ChartTypeVariant.area]: { + component: ChartArea, + animate: { + duration: 250, + onLoad: { duration: 250 } + }, + interpolation: InterpolationTypes.monotoneX + }, + [ChartTypeVariant.line]: { + component: ChartLine, + animate: { + duration: 250, + onLoad: { duration: 250 } + }, + interpolation: InterpolationTypes.monotoneX + }, + [ChartTypeVariant.threshold]: { + component: ChartThreshold, + animate: { + duration: 100, + onLoad: { duration: 100 } + }, + interpolation: InterpolationTypes.step + } +}; + /** * FixMe: Victory Charts v3.8.3+ conversion to TS alters props applied around VictoryTooltip * Recent conversions to TS for Victory Charts has altered the behavior around props @@ -25,10 +73,10 @@ import { ChartTypeVariant } from './chartHelpers'; * Aggregate, generate, a compatible Victory chart element/facet component. * * @param {object} props - * @param {object} props.chartTypeDefaults - * @returns {React.ReactNode} + * @param {chartElementsDefaults} [props.chartTypeDefaults=chartElementsDefaults] + * @returns {JSX.Element} */ -const ChartElements = ({ chartTypeDefaults }) => { +const ChartElements = ({ chartTypeDefaults = chartElementsDefaults }) => { const { chartSettings = {}, chartContainerRef, chartTooltipRef } = useChartContext(); const { chartDomain, @@ -134,53 +182,4 @@ const ChartElements = ({ chartTypeDefaults }) => { ); }; -/** - * Prop types - * - * @type {{chartTypeDefaults:{}}} - */ -ChartElements.propTypes = { - chartTypeDefaults: PropTypes.objectOf( - PropTypes.shape({ - component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired, - animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), - interpolation: PropTypes.oneOf(['monotoneX', 'step']) - }) - ) -}; - -/** - * Default props - * - * @type {{chartTypeDefaults:{}}} - */ -ChartElements.defaultProps = { - chartTypeDefaults: { - [ChartTypeVariant.area]: { - component: ChartArea, - animate: { - duration: 250, - onLoad: { duration: 250 } - }, - interpolation: 'monotoneX' - }, - [ChartTypeVariant.line]: { - component: ChartLine, - animate: { - duration: 250, - onLoad: { duration: 250 } - }, - interpolation: 'monotoneX' - }, - [ChartTypeVariant.threshold]: { - component: ChartThreshold, - animate: { - duration: 100, - onLoad: { duration: 100 } - }, - interpolation: 'step' - } - } -}; - -export { ChartElements as default, ChartElements }; +export { ChartElements as default, ChartElements, chartElementsDefaults, InterpolationTypes }; diff --git a/src/components/chart/chartIcon.js b/src/components/chart/chartIcon.js index a4e7f8c65..6d0736d89 100644 --- a/src/components/chart/chartIcon.js +++ b/src/components/chart/chartIcon.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { EyeIcon, EyeSlashIcon, SquareIcon } from '@patternfly/react-icons'; /** @@ -14,6 +13,20 @@ import { EyeIcon, EyeSlashIcon, SquareIcon } from '@patternfly/react-icons'; */ const IconSize = { sm: 'sm', md: 'md', lg: 'lg', xl: 'xl' }; +/** + * Consistent icon symbols + * + * @type {{eye: string, square: string, eyeSlash: string, infinity: string, threshold: string, dash: string}} + */ +const IconSymbol = { + dash: 'dash', + eye: 'eye', + eyeSlash: 'eyeSlash', + infinity: 'infinity', + square: 'square', + threshold: 'threshold' +}; + /** * Emulate pf icon sizing for custom SVGs * @@ -42,13 +55,13 @@ const getSize = size => { * Render an icon for use outside of Victory charts. * * @param {object} props - * @param {string} props.fill - * @param {string} props.symbol - * @param {string} props.size - * @param {string} props.title - * @returns {React.ReactNode} + * @param {string} [props.fill] + * @param {string|IconSymbol} [props.symbol=IconSymbol.square] + * @param {string|IconSize} [props.size=IconSize.sm] + * @param {string} [props.title] + * @returns {JSX.Element} */ -const ChartIcon = ({ fill, symbol, size, title, ...props }) => { +const ChartIcon = ({ fill, symbol = IconSymbol.square, size = IconSize.sm, title, ...props }) => { const svgProps = { ...props }; const iconProps = { size, title, ...props }; const fontProps = { style: { fontSize: getSize(size) }, title, ...props }; @@ -122,28 +135,4 @@ const ChartIcon = ({ fill, symbol, size, title, ...props }) => { return {setIcon()}; }; -/** - * Prop types. - * - * @type {{symbol: string, size: string, fill: string, title: string}} - */ -ChartIcon.propTypes = { - fill: PropTypes.string, - size: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([...Object.keys(IconSize)])]), - symbol: PropTypes.oneOf(['dash', 'eye', 'eyeSlash', 'infinity', 'square', 'threshold']), - title: PropTypes.string -}; - -/** - * Default props. - * - * @type {{symbol: string, size: string, fill: null, title: null}} - */ -ChartIcon.defaultProps = { - fill: null, - size: IconSize.sm, - symbol: 'square', - title: null -}; - -export { ChartIcon as default, ChartIcon, IconSize }; +export { ChartIcon as default, ChartIcon, IconSize, IconSymbol }; diff --git a/src/components/chart/chartLegend.js b/src/components/chart/chartLegend.js index be75c3dfb..57f26aa65 100644 --- a/src/components/chart/chartLegend.js +++ b/src/components/chart/chartLegend.js @@ -10,7 +10,7 @@ import { useChartContext, useToggleData } from './chartContext'; /** * Wrapper for rendering an HTML based legend. * - * @returns {React.ReactNode} + * @returns {JSX.Element|null} */ const ChartLegend = () => { const { getIsToggled, onHide, onRevert, onToggle } = useToggleData(); @@ -45,14 +45,4 @@ const ChartLegend = () => { ); }; -/** - * Prop types. - */ -ChartLegend.propTypes = {}; - -/** - * Default props. - */ -ChartLegend.defaultProps = {}; - export { ChartLegend as default, ChartLegend }; diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap index 3d3c8be5a..939928114 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap @@ -63,23 +63,9 @@ exports[`GraphCardChart Component should handle API response states: fulfilled 1 chartLegend={[Function]} chartTooltip={[Function]} dataSets={[]} - padding={ - { - "bottom": 75, - "left": 55, - "right": 55, - "top": 50, - } - } - themeColor="blue" - xAxisChartLabel={null} - xAxisFixLabelOverlap={true} xAxisLabelIncrement={1} xAxisTickFormat={[Function]} - xValueFormat={null} - yAxisChartLabel={null} yAxisTickFormat={[Function]} - yValueFormat={null} /> @@ -154,23 +140,9 @@ exports[`GraphCardChart Component should render a basic component: basic 1`] = ` chartLegend={[Function]} chartTooltip={[Function]} dataSets={[]} - padding={ - { - "bottom": 75, - "left": 55, - "right": 55, - "top": 50, - } - } - themeColor="blue" - xAxisChartLabel={null} - xAxisFixLabelOverlap={true} xAxisLabelIncrement={1} xAxisTickFormat={[Function]} - xValueFormat={null} - yAxisChartLabel={null} yAxisTickFormat={[Function]} - yValueFormat={null} /> diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap index 37e943f34..52305ff9f 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap @@ -71,14 +71,12 @@ exports[`GraphCardChartLegend Component should render a basic component: basic 1 icon={ } isDisabled={false} @@ -114,14 +112,12 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = ` icon={ } isDisabled={false} @@ -151,10 +147,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = ` component="a" icon={ } isDisabled={true} @@ -185,14 +178,12 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = ` icon={ } isDisabled={false} @@ -223,14 +214,12 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = ` icon={ } isDisabled={false} diff --git a/src/config/__tests__/__snapshots__/product.config.test.js.snap b/src/config/__tests__/__snapshots__/product.config.test.js.snap index f2001c568..9fa5390dc 100644 --- a/src/config/__tests__/__snapshots__/product.config.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.config.test.js.snap @@ -6404,10 +6404,8 @@ exports[`Product specific configurations should apply variations in inventory fi > , "dataLabel": "t([curiosity-inventory.header_Cores,curiosity-inventory.guestsHeader_Cores], {"context":"OpenShift Container Platform"})", @@ -6422,10 +6420,8 @@ exports[`Product specific configurations should apply variations in inventory fi > , "dataLabel": "t([curiosity-inventory.header_Sockets,curiosity-inventory.guestsHeader_Sockets], {"context":"OpenShift Container Platform"})", @@ -6701,10 +6697,8 @@ exports[`Product specific configurations should apply variations in inventory fi > , "dataLabel": "t([curiosity-inventory.header_Sockets,curiosity-inventory.guestsHeader_Sockets], {"context":"RHEL for x86"})", @@ -7324,10 +7318,8 @@ exports[`Product specific configurations should apply variations in inventory fi > , "dataLabel": "t([curiosity-inventory.header_Cores,curiosity-inventory.guestsHeader_Cores], {"context":"OpenShift Container Platform"})", @@ -7342,10 +7334,8 @@ exports[`Product specific configurations should apply variations in inventory fi > , "dataLabel": "t([curiosity-inventory.header_Sockets,curiosity-inventory.guestsHeader_Sockets], {"context":"OpenShift Container Platform"})", @@ -7621,10 +7611,8 @@ exports[`Product specific configurations should apply variations in inventory fi > , "dataLabel": "t([curiosity-inventory.header_Sockets,curiosity-inventory.guestsHeader_Sockets], {"context":"RHEL for x86"})", diff --git a/tests/__snapshots__/dist.test.js.snap b/tests/__snapshots__/dist.test.js.snap index bd7f5f865..23e12c8bf 100644 --- a/tests/__snapshots__/dist.test.js.snap +++ b/tests/__snapshots__/dist.test.js.snap @@ -839,8 +839,6 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/js/5436*js", "./dist/js/5600*js", "./dist/js/5606*js", - "./dist/js/5773*js", - "./dist/js/5773*txt", "./dist/js/5883*js", "./dist/js/5995*js", "./dist/js/6074*js", @@ -854,6 +852,8 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/js/6752*js", "./dist/js/6755*js", "./dist/js/6802*js", + "./dist/js/6950*js", + "./dist/js/6950*txt", "./dist/js/7019*js", "./dist/js/709*js", "./dist/js/7128*js",