Skip to content

Commit

Permalink
modify multi value callout as per design
Browse files Browse the repository at this point in the history
  • Loading branch information
@krkshitij
krkshitij committed Jul 27, 2023
1 parent 97c6be7 commit 1434e27
Show file tree
Hide file tree
Showing 24 changed files with 705 additions and 632 deletions.
129 changes: 61 additions & 68 deletions packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -423,38 +423,32 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
className=
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-blend-mode: normal, luminosity;
background-color: #ffffff;
display: grid;
overflow: hidden;
padding-bottom: 10px;
color: #323130;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 11px;
padding-top: 16px;
}
>
<div
className=
{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 8px;
}
style={Object {}}
>
<div
className=
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: #605e5c;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16px;
opacity: 0.8;
font-weight: 600;
}
data-is-focusable={false}
role="text"
Expand All @@ -467,69 +461,68 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
>
<div
data-is-focusable={false}
key="callout-content-0"
role="text"
style={Object {}}
style={
Object {
"marginBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
}
}
>
<div
style={Object {}}
>
<div>
<div
className=
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
border-left: 4px solid red;
color: #323130;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 16px;
font-weight: 400;
margin-top: 13px;
padding-left: 8px;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
forced-color-adjust: none;
align-items: center;
display: flex;
}
id="0_80"
>
<div>
<div
className=
<svg
className=
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: #605e5c;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
color: rgb(255, 255, 255);
}
>
metaData1
</div>
<div
className=
{
flex-shrink: 0;
margin-right: 8px;
}
height={14}
transform="rotate(0, 0, 0)"
viewBox="-1 -1 14 14"
width={14}
>
<path
d="M1 1 L12 1 L12 12 L1 12 L1 1 Z"
fill="red"
/>
</svg>
<div
className=
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 22px;
}
@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
color: rgb(255, 255, 255);
}
>
80
</div>
{
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
style={
Object {
"marginRight": "24px",
}
}
>
metaData1
</div>
<div
className=
{
flex-shrink: 0;
font-weight: 600;
}
>
80
</div>
</div>
</div>
Expand Down
131 changes: 65 additions & 66 deletions packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
calculateLongestLabelWidth,
createYAxisLabels,
ChartTypes,
ChartHoverCardVariant,
} from '../../utilities/index';
import { LegendShape, Shape } from '../Legends/index';

Expand Down Expand Up @@ -509,12 +510,11 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private _multiValueCallout = (calloutProps: any) => {
const yValueHoverSubCountsExists: boolean = this._yValueHoverSubCountsExists(calloutProps.YValueHover);
const { updatedTime } = this.props;

return (
<div className={this._classNames.calloutContentRoot}>
<div
className={this._classNames.calloutDateTimeContainer}
style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}
>
<div className={this._classNames.calloutDateTimeContainer}>
<div
className={this._classNames.calloutContentX}
{...getAccessibleDataObject(calloutProps!.xAxisCalloutAccessibilityData, 'text', false)}
Expand All @@ -531,34 +531,27 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
const isLast: boolean = index + 1 === yValues.length;
const { shouldDrawBorderBottom = false } = yValue;
return (
<div
{...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}
key={`callout-content-${index}`}
style={
yValueHoverSubCountsExists
? {
display: 'inline-block',
...(shouldDrawBorderBottom && {
borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,
paddingBottom: '10px',
}),
}
: {
...(shouldDrawBorderBottom && {
borderBottom: `1px solid ${this.props.theme!.semanticColors.menuDivider}`,
paddingBottom: '10px',
}),
}
}
>
{this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}
</div>
<React.Fragment key={`callout-content-${index}`}>
<div
{...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}
style={{
paddingLeft: !yValueHoverSubCountsExists || index === 0 ? '0px' : '16px',
paddingRight: !yValueHoverSubCountsExists || isLast ? '0px' : '16px',
marginBottom: yValueHoverSubCountsExists || isLast ? '0px' : '8px',
}}
>
{this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}
</div>
{shouldDrawBorderBottom && <div className={this._classNames.divider} />}
</React.Fragment>
);
})}
{!!calloutProps.descriptionMessage && (
<div className={this._classNames.descriptionMessage}>{calloutProps.descriptionMessage}</div>
)}
</div>
{(!!calloutProps.descriptionMessage || !!updatedTime) && <div className={this._classNames.divider} />}
{!!calloutProps.descriptionMessage && (
<div className={this._classNames.descriptionMessage}>{calloutProps.descriptionMessage}</div>
)}
{!!updatedTime && <div className={this._classNames.updatedTime}>Updated {updatedTime.toLocaleString()}</div>}
</div>
);
};
Expand All @@ -583,63 +576,69 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
yValueHoverSubCountsExists: boolean,
isLast: boolean,
): React.ReactNode {
const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };
const toDrawShape = xValue.index !== undefined && xValue.index !== -1;
const _classNames = getClassNames(this.props.styles!, {
theme: this.props.theme!,
width: this.state._width,
height: this.state._height,
className: this.props.className,
isRtl: this._isRtl,
lineColor: xValue.color,
toDrawShape,
});

const { culture } = this.props;
const { culture, calloutVariant } = this.props;
const yValue = convertToLocaleString(xValue.y, culture);
if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {
return (
<div style={yValueHoverSubCountsExists ? marginStyle : {}}>
<div>
{yValueHoverSubCountsExists && (
<div className="ms-fontWeight-semibold" style={{ fontSize: '12pt' }}>
<div className={this._classNames.calloutContentX} style={{ marginBottom: '8px' }}>
{xValue.legend!} ({yValue})
</div>
)}
<div id={`${index}_${xValue.y}`} className={_classNames.calloutBlockContainer}>
{toDrawShape && (
<Shape
svgProps={{
className: _classNames.shapeStyles,
}}
pathProps={{ fill: xValue.color }}
shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}
/>
)}
<div>
<div className={_classNames.calloutlegendText}> {xValue.legend}</div>
<div className={_classNames.calloutContentY}>
{convertToLocaleString(
xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data,
culture,
)}
{(yValueHoverSubCountsExists || calloutVariant === ChartHoverCardVariant.LongLegend) && (
<div className={this._classNames.calloutlegendText} style={{ marginBottom: '4px' }}>
{xValue.legend}
</div>
)}
<div id={`${index}_${xValue.y}`} className={this._classNames.calloutBlockContainer}>
<Shape
svgProps={{
className: this._classNames.shapeStyles,
}}
pathProps={{ fill: xValue.color }}
shape={Points[toDrawShape ? xValue.index! % Object.keys(pointTypes).length : 1] as LegendShape}
/>
{!yValueHoverSubCountsExists && calloutVariant !== ChartHoverCardVariant.LongLegend && (
<div className={this._classNames.calloutlegendText} style={{ marginRight: '24px' }}>
{xValue.legend}
</div>
)}
<div className={this._classNames.calloutContentY}>
{convertToLocaleString(
xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data,
culture,
)}
</div>
</div>
</div>
);
} else {
const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };
return (
<div style={marginStyle}>
<div className="ms-fontWeight-semibold" style={{ fontSize: '12pt' }}>
<div>
<div className={this._classNames.calloutContentX} style={{ marginBottom: '8px' }}>
{xValue.legend!} ({yValue})
</div>
{Object.keys(subcounts).map((subcountName: string) => {
{Object.keys(subcounts).map((subcountName: string, idx, sc) => {
return (
<div key={subcountName} className={_classNames.calloutBlockContainer}>
<div className={_classNames.calloutlegendText}> {convertToLocaleString(subcountName, culture)}</div>
<div className={_classNames.calloutContentY}>
{convertToLocaleString(subcounts[subcountName], culture)}
<div key={subcountName} style={idx + 1 === sc.length ? {} : { marginBottom: '8px' }}>
<div className={this._classNames.calloutlegendText} style={{ marginBottom: '4px' }}>
{convertToLocaleString(subcountName, culture)}
</div>
<div className={this._classNames.calloutBlockContainer}>
<Shape
svgProps={{
className: this._classNames.shapeStyles,
}}
pathProps={{ fill: xValue.color }}
shape={Points[toDrawShape ? xValue.index! % Object.keys(pointTypes).length : 1] as LegendShape}
/>
<div className={this._classNames.calloutContentY}>
{convertToLocaleString(subcounts[subcountName], culture)}
</div>
</div>
</div>
);
Expand Down
Loading

0 comments on commit 1434e27

Please sign in to comment.