From a84b6324f5575937294850eb74a2ae179eb5fe61 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 17 Apr 2024 09:23:07 +0200 Subject: [PATCH 1/3] refactor(MicroBarChart): replace react-jss with css module --- .../MicroBarChart/MicroBarChart.module.css | 58 +++++++++++++++ .../MicroBarChart/MicroBarChart.tsx | 72 +++---------------- 2 files changed, 68 insertions(+), 62 deletions(-) create mode 100644 packages/charts/src/components/MicroBarChart/MicroBarChart.module.css diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css b/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css new file mode 100644 index 00000000000..f62e1f0e70c --- /dev/null +++ b/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css @@ -0,0 +1,58 @@ +.container { + display: flex; + flex-direction: column; + overflow: hidden; + font-family: var(--sapFontFamily); + font-weight: normal; + width: 100%; + height: 100%; + justify-content: space-around; +} + +.barContainer { + cursor: auto; +} + +.barContainerActive { + cursor: pointer; + + &:active { + opacity: 0.3 !important; + } +} + +.labelContainer { + display: flex; + justify-content: space-between; +} + +.valueContainer { + display: flex; + background-color: var(--sapContent_Placeholderloading_Background); +} + +.valueBar { + height: 100%; +} + +.label { + color: var(--sapContent_LabelColor); + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: var(--sapFontSmallSize); + max-width: 70%; +} + +.text { + padding-left: 6px; + display: inline-block; + overflow: hidden; + font-size: var(--sapFontSmallSize); + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--sapTextColor); + text-align: right; +} diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx index 9c428e5ead5..891483e4160 100644 --- a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx +++ b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx @@ -1,10 +1,9 @@ 'use client'; -import { enrichEventWithDetails, ThemingParameters } from '@ui5/webcomponents-react-base'; +import { enrichEventWithDetails, ThemingParameters, useStylesheet } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { CSSProperties } from 'react'; import React, { createElement, forwardRef, useCallback, useMemo } from 'react'; -import { createUseStyles } from 'react-jss'; import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js'; import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js'; import type { IChartDimension } from '../../interfaces/IChartDimension.js'; @@ -12,6 +11,7 @@ import type { IChartMeasure } from '../../interfaces/IChartMeasure.js'; import { ChartContainer } from '../../internal/ChartContainer.js'; import { defaultFormatter } from '../../internal/defaults.js'; import { BarChartPlaceholder } from '../BarChart/Placeholder.js'; +import { classNames, styleData } from './MicroBarChart.module.css.js'; interface MeasureConfig extends Omit { /** @@ -86,65 +86,13 @@ const resolveColor = (index: number, color = null) => { return ThemingParameters[`sapChart_Sequence_${(index % 11) + 1}`]; }; -const MicroBarChartStyles = { - container: { - display: 'flex', - flexDirection: 'column', - overflow: 'hidden', - fontFamily: ThemingParameters.sapFontFamily, - fontWeight: 'normal', - width: '100%', - height: '100%', - justifyContent: 'space-around' - }, - barContainer: { - cursor: 'auto' - }, - barContainerActive: { - '&:active': { opacity: '0.3 !important' }, - cursor: 'pointer' - }, - labelContainer: { - display: 'flex', - justifyContent: 'space-between' - }, - valueContainer: { - display: 'flex', - backgroundColor: ThemingParameters.sapContent_Placeholderloading_Background - }, - valueBar: { height: '100%' }, - label: { - color: ThemingParameters.sapContent_LabelColor, - display: 'block', - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - fontSize: ThemingParameters.sapFontSmallSize, - maxWidth: '70%' - }, - text: { - paddingLeft: '6px', - display: 'inline-block', - overflow: 'hidden', - fontSize: ThemingParameters.sapFontSmallSize, - boxSizing: 'border-box', - - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - color: ThemingParameters.sapTextColor, - textAlign: 'right' - } -}; - -const useStyles = createUseStyles(MicroBarChartStyles, { name: 'MicroBarChart' }); - /** * The `MicroBarChart` compares different values of the same category to each other by displaying them in a compact way. */ const MicroBarChart = forwardRef((props, ref) => { const { loading, dataset, onDataPointClick, style, className, slot, ChartPlaceholder, ...rest } = props; - const classes = useStyles(); + useStylesheet(styleData, MicroBarChart.displayName); const dimension = useMemo( () => ({ @@ -186,7 +134,7 @@ const MicroBarChart = forwardRef((props, ref }, [measure.accessor, onDataPointClick] ); - const barContainerClasses = clsx(classes.barContainer, onDataPointClick && classes.barContainerActive); + const barContainerClasses = clsx(classNames.barContainer, onDataPointClick && classNames.barContainerActive); const { maxValue: _0, dimension: _1, measure: _2, ...propsWithoutOmitted } = rest; return ( ((props, ref resizeDebounce={250} {...propsWithoutOmitted} > -
+
{dataset?.map((item, index) => { const dimensionValue = getValueByDataKey(item, dimension.accessor); const measureValue = getValueByDataKey(item, measure.accessor); @@ -219,23 +167,23 @@ const MicroBarChart = forwardRef((props, ref } return (
-
- +
+ {formattedDimension} - + {measure.hideDataLabel ? '' : formattedMeasure}
Date: Wed, 17 Apr 2024 10:12:38 +0200 Subject: [PATCH 2/3] fix tests --- .../charts/src/components/MicroBarChart/MicroBarChart.cy.tsx | 4 ++-- .../charts/src/components/MicroBarChart/MicroBarChart.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.cy.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.cy.tsx index 8fe2cad3ab7..03c115717b9 100644 --- a/packages/charts/src/components/MicroBarChart/MicroBarChart.cy.tsx +++ b/packages/charts/src/components/MicroBarChart/MicroBarChart.cy.tsx @@ -23,7 +23,7 @@ describe('MicroBarChart', () => { it('Basic', () => { cy.mount(); cy.get('.recharts-responsive-container').should('be.visible'); - cy.get('div[class^=MicroBarChart-valueBar]').should('have.length', 3); + cy.get('[data-component-name="MicroBarChartValueBar"]').should('have.length', 3); cy.findByText(text1).should('be.visible'); cy.findByText(text2).should('be.visible'); @@ -39,7 +39,7 @@ describe('MicroBarChart', () => { /> ); cy.get('.recharts-responsive-container').should('be.visible'); - cy.get('div[class^=MicroBarChart-valueBar]').should('have.length', 3); + cy.get('[data-component-name="MicroBarChartValueBar"]').should('have.length', 3); cy.findByText(`${text1} - formatted`).should('be.visible'); cy.findByText(`${text2} - formatted`).should('be.visible'); diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx index 891483e4160..edfa0c45c17 100644 --- a/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx +++ b/packages/charts/src/components/MicroBarChart/MicroBarChart.tsx @@ -184,6 +184,7 @@ const MicroBarChart = forwardRef((props, ref >
Date: Wed, 17 Apr 2024 10:24:11 +0200 Subject: [PATCH 3/3] use logical css --- .../src/components/MicroBarChart/MicroBarChart.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css b/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css index f62e1f0e70c..abaf2cd6efb 100644 --- a/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css +++ b/packages/charts/src/components/MicroBarChart/MicroBarChart.module.css @@ -46,7 +46,7 @@ } .text { - padding-left: 6px; + padding-inline-start: 6px; display: inline-block; overflow: hidden; font-size: var(--sapFontSmallSize);