Skip to content

Commit

Permalink
Fix chart title overflow (#25073)
Browse files Browse the repository at this point in the history 
* fix text overflow in horizontal bar chart

* add change file

* rename classNames

* fix text overflow in stacked bar chart

* update change file

* update snapshots

* replace title tooltip with fluentui tooltip

* update snapshots
  • Loading branch information
@krkshitij
krkshitij authored Oct 17, 2022
1 parent 8fa1802 commit eff4a29
Show file tree
Hide file tree
Showing 13 changed files with 1,170 additions and 206 deletions.
7 changes: 7 additions & 0 deletions change/@fluentui-react-charting-beea75ce-fc3b-4589-8902-28d31ef030fa.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Fix chart title overflow",
"packageName": "@fluentui/react-charting",
"email": "[email protected]",
"dependentChangeType": "patch"
}
20 changes: 12 additions & 8 deletions packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';
import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
import { TooltipHost, TooltipOverflowMode } from '@fluentui/react';

const getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();

Expand Down Expand Up @@ -88,12 +89,15 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
<FocusZone direction={FocusZoneDirection.horizontal}>
<div className={this._classNames.chartTitle}>
{points!.chartTitle && (
<div
className={this._classNames.chartDataText}
{...getAccessibleDataObject(points!.chartTitleAccessibilityData)}
<TooltipHost
overflowMode={TooltipOverflowMode.Self}
hostClassName={this._classNames.chartTitleLeft}
content={points!.chartTitle}
>
{points!.chartTitle}
</div>
<span {...getAccessibleDataObject(points!.chartTitleAccessibilityData)}>
{points!.chartTitle}
</span>
</TooltipHost>
)}
{chartDataText}
</div>
Expand Down Expand Up @@ -228,21 +232,21 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
switch (chartDataMode) {
case 'default':
return (
<div className={this._classNames.chartDataText} {...accessibilityData}>
<div className={this._classNames.chartTitleRight} {...accessibilityData}>
{convertToLocaleString(x, culture)}
</div>
);
case 'fraction':
return (
<div {...accessibilityData}>
<span className={this._classNames.chartDataText}>{convertToLocaleString(x, culture)}</span>
<span className={this._classNames.chartTitleRight}>{convertToLocaleString(x, culture)}</span>
<span className={this._classNames.chartDataTextDenominator}>{'/' + convertToLocaleString(y, culture)}</span>
</div>
);
case 'percentage':
const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) * 100), culture)}%`;
return (
<div className={this._classNames.chartDataText} {...accessibilityData}>
<div className={this._classNames.chartTitleRight} {...accessibilityData}>
{dataRatioPercentage}
</div>
);
Expand Down
9 changes: 8 additions & 1 deletion packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,14 @@ export const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps
justifyContent: 'space-between',
marginBottom: '3px',
},
chartDataText: {
chartTitleLeft: {
fontWeight: FontWeights.bold,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
display: 'block',
},
chartTitleRight: {
fontWeight: FontWeights.bold,
},
chartDataTextDenominator: {
Expand Down
9 changes: 7 additions & 2 deletions packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,9 +132,14 @@ export interface IHorizontalBarChartStyles {
barWrapper: IStyle;

/**
* Style for the chart data text.
* Style for left side text of the chart title
*/
chartDataText: IStyle;
chartTitleLeft: IStyle;

/**
* Style for right side text of the chart title
*/
chartTitleRight: IStyle;

/**
* Style for the chart data text denominator.
Expand Down
168 changes: 146 additions & 22 deletions ...charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,45 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
>
<div
className=
ms-TooltipHost
{
display: block;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
data-is-focusable={true}
role="text"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="none"
>
one
<span
data-is-focusable={true}
role="text"
>
one
</span>
<div
hidden={true}
id="tooltip2"
style={
Object {
"border": 0,
"height": 1,
"margin": -1,
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"whiteSpace": "nowrap",
"width": 1,
}
}
>
one
</div>
</div>
<div
className=
Expand All @@ -85,7 +116,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
&:focus {
outline: none;
}
data-focuszone-id="FocusZone2"
data-focuszone-id="FocusZone3"
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDownCapture={[Function]}
Expand Down Expand Up @@ -171,7 +202,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
&:focus {
outline: none;
}
data-focuszone-id="FocusZone3"
data-focuszone-id="FocusZone4"
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDownCapture={[Function]}
Expand All @@ -192,14 +223,45 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
>
<div
className=
ms-TooltipHost
{
display: block;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
data-is-focusable={true}
role="text"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="none"
>
two
<span
data-is-focusable={true}
role="text"
>
two
</span>
<div
hidden={true}
id="tooltip5"
style={
Object {
"border": 0,
"height": 1,
"margin": -1,
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"whiteSpace": "nowrap",
"width": 1,
}
}
>
two
</div>
</div>
<div
className=
Expand All @@ -220,7 +282,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
&:focus {
outline: none;
}
data-focuszone-id="FocusZone4"
data-focuszone-id="FocusZone6"
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDownCapture={[Function]}
Expand Down Expand Up @@ -503,14 +565,45 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
>
<div
className=
ms-TooltipHost
{
display: block;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
data-is-focusable={true}
role="text"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="none"
>
one
<span
data-is-focusable={true}
role="text"
>
one
</span>
<div
hidden={true}
id="tooltip2"
style={
Object {
"border": 0,
"height": 1,
"margin": -1,
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"whiteSpace": "nowrap",
"width": 1,
}
}
>
one
</div>
</div>
<div
className=
Expand All @@ -531,7 +624,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
&:focus {
outline: none;
}
data-focuszone-id="FocusZone2"
data-focuszone-id="FocusZone3"
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDownCapture={[Function]}
Expand Down Expand Up @@ -617,7 +710,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
&:focus {
outline: none;
}
data-focuszone-id="FocusZone3"
data-focuszone-id="FocusZone4"
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDownCapture={[Function]}
Expand All @@ -638,14 +731,45 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
>
<div
className=
ms-TooltipHost
{
display: block;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
data-is-focusable={true}
role="text"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="none"
>
two
<span
data-is-focusable={true}
role="text"
>
two
</span>
<div
hidden={true}
id="tooltip5"
style={
Object {
"border": 0,
"height": 1,
"margin": -1,
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"whiteSpace": "nowrap",
"width": 1,
}
}
>
two
</div>
</div>
<div
className=
Expand All @@ -666,7 +790,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
&:focus {
outline: none;
}
data-focuszone-id="FocusZone4"
data-focuszone-id="FocusZone6"
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDownCapture={[Function]}
Expand Down
11 changes: 8 additions & 3 deletions packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';
import { TooltipHost, TooltipOverflowMode } from '@fluentui/react';

const getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();

Expand Down Expand Up @@ -237,9 +238,13 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
<FocusZone direction={FocusZoneDirection.horizontal}>
<div className={this._classNames.chartTitle}>
{data!.chartTitle && (
<div {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>
<strong>{data!.chartTitle}</strong>
</div>
<TooltipHost
overflowMode={TooltipOverflowMode.Self}
hostClassName={this._classNames.chartTitleLeft}
content={data!.chartTitle}
>
<span {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>{data!.chartTitle}</span>
</TooltipHost>
)}
{showRatio && (
<div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>
Expand Down
8 changes: 8 additions & 0 deletions packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles } from './MultiStackedBarChart.types';
import { FontWeights } from '@fluentui/react/lib/Styling';

export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleProps): IMultiStackedBarChartStyles => {
const { className, width, barHeight, shouldHighlight, theme, href } = props;
Expand Down Expand Up @@ -26,6 +27,13 @@ export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleP
justifyContent: 'space-between',
marginBottom: '3px',
},
chartTitleLeft: {
fontWeight: FontWeights.bold,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
display: 'block',
},
singleChartRoot: {
width: width ? width : '100%',
display: 'flex',
Expand Down
Loading

0 comments on commit eff4a29

Please sign in to comment.