From ca5daa0e4f493e4a6730ed4870c36a6de0031fbe Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Sun, 23 Jul 2023 23:48:43 +0530 Subject: [PATCH 1/6] modify chart hover card as per design --- .../__snapshots__/DonutChart.test.tsx.snap | 81 ++++----- .../__snapshots__/DonutChartRTL.test.tsx.snap | 162 +++++++----------- .../GroupedVerticalBarChart.test.tsx.snap | 80 ++++----- .../GroupedVerticalBarChartRTL.test.tsx.snap | 80 ++++----- .../__snapshots__/HeatMapChart.test.tsx.snap | 146 ++++++---------- .../HorizontalBarChart.test.tsx.snap | 81 ++++----- .../HorizontalBarChartWithAxis.test.tsx.snap | 89 +++++----- .../MultiStackedBarChart.test.tsx.snap | 81 ++++----- .../StackedBarChart.test.tsx.snap | 81 ++++----- .../VerticalBarChart.test.tsx.snap | 89 +++++----- .../VerticalBarChartRTL.test.tsx.snap | 89 +++++----- .../VerticalStackedBarChart.test.tsx.snap | 89 +++++----- .../VerticalStackedBarChartRTL.test.tsx.snap | 89 +++++----- .../ChartHoverCard/ChartHoverCard.base.tsx | 58 ++++--- .../ChartHoverCard/ChartHoverCard.styles.ts | 136 +++++++-------- .../ChartHoverCard/ChartHoverCard.types.ts | 39 ++++- 16 files changed, 628 insertions(+), 842 deletions(-) diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index 530573c78d09e..39e12e4c53548 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -199,87 +199,66 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover 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; } >
-
- -
+ 2020/04/30 +
-
- 2020/04/30 -
+ +
20,000 diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap index 551ad53f5f2a7..ca18e74d59566 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap @@ -172,87 +172,66 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = ` class= { + -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; } >
-
- -
+ 2020/04/30 +
-
- 2020/04/30 -
+ +
20,000 @@ -1234,87 +1213,66 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover 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; } >
-
- -
+ 2020/04/30 +
-
- 2020/04/30 -
+ +
20,000 diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap index eccc78c98f254..a82fc4626f52c 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap @@ -660,85 +660,65 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly 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; } >
-
- -
+
-
+ height={14} + transform="rotate(0, 0, 0)" + viewBox="-1 -1 14 14" + width={14} + > + +
66 diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap index 3bd8ef6e150d3..0366c65d04771 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap @@ -1202,85 +1202,65 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly 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; } >
-
- -
+
-
+ height={14} + transform="rotate(0, 0, 0)" + viewBox="-1 -1 14 14" + width={14} + > + +
66 diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap index 78a1e9731e086..ce7b23e669af4 100644 --- a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap +++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap @@ -408,144 +408,112 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove 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; } >
-
- -
+ Execllent (0-200) +
-
- Execllent (0-200) -
+ +
50
-
-
- - 50 - - / - - 2,391 - + { + font-weight: 600; + } + > + 50 + + + / 2,391 + +
+
a good day to start with in Texas with best air quality diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap index 495795292a967..d6afa452a5adc 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap @@ -416,87 +416,66 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo 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; } >
-
- -
+ 2020/04/30 +
-
- 2020/04/30 -
+ +
19% diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap index 047636d3e3e73..ef7892abdaf9a 100644 --- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap +++ b/packages/react-charting/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap @@ -1087,73 +1087,69 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct 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; } >
-
- 37% - -
+ 37% +
+ + +
Apples @@ -1162,13 +1158,8 @@ exports[`HorizontalBarChartWithAxis - mouse events Should render callout correct className= { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #00188f; - font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - font-size: 28px; - font-weight: bold; - line-height: 36px; + flex-shrink: 0; + font-weight: 600; } > 2020/04/30 diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap index 5d9bc64f1b2a5..b9b1e9d0542f6 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap @@ -570,87 +570,66 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on 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; } >
-
- -
+ 2020/04/30 +
-
- 2020/04/30 -
+ +
40% diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap index 2b3a46ccbecef..83e6eb7a6cf0b 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap @@ -275,87 +275,66 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse 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; } >
-
- -
+ first Lorem ipsum dolor sit amet +
-
- first Lorem ipsum dolor sit amet -
+ +
40 diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap index 828e8962dccc6..0873bf8b70f8a 100644 --- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap @@ -615,73 +615,69 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous 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; } >
-
- 2020/04/30 - -
+ 2020/04/30 +
+ + +
Second @@ -690,13 +686,8 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous className= { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #002050; - font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - font-size: 28px; - font-weight: bold; - line-height: 36px; + flex-shrink: 0; + font-weight: 600; } > 20% diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap index 7ddc5bc624d93..6b70fbcd35249 100644 --- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap @@ -3263,73 +3263,69 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous 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; } >
-
- 2020/04/30 - -
+ 2020/04/30 +
+ + +
Second @@ -3338,13 +3334,8 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous className= { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #002050; - font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - font-size: 28px; - font-weight: bold; - line-height: 36px; + flex-shrink: 0; + font-weight: 600; } > 20% diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap index d2915a27babcf..43b4b1311c55d 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap @@ -554,73 +554,69 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly 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; } >
-
- 2020/04/30 - -
+ 2020/04/30 +
+ + +
Metadata1 @@ -629,13 +625,8 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly className= { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #0078d4; - font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - font-size: 28px; - font-weight: bold; - line-height: 36px; + flex-shrink: 0; + font-weight: 600; } > 40% diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap index 2701e910e20c2..e954a1640f97c 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap @@ -900,73 +900,69 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly 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; } >
-
- 2020/04/30 - -
+ 2020/04/30 +
+ + +
Metadata1 @@ -975,13 +971,8 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly className= { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #0078d4; - font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; - font-size: 28px; - font-weight: bold; - line-height: 36px; + flex-shrink: 0; + font-weight: 600; } > 40% diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx index 1308a3c325b00..83c1936015f39 100644 --- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx +++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.base.tsx @@ -1,41 +1,59 @@ import * as React from 'react'; -import { IChartHoverCardStyles, IChartHoverCardStyleProps, IChartHoverCardProps } from './ChartHoverCard.types'; +import { + IChartHoverCardStyles, + IChartHoverCardStyleProps, + IChartHoverCardProps, + ChartHoverCardVariant, +} from './ChartHoverCard.types'; import { classNamesFunction, IProcessedStyleSet } from '@fluentui/react'; -import { convertToLocaleString } from '../index'; +import { convertToLocaleString, Points } from '../../utilities/index'; +import { LegendShape, Shape } from '../../components/Legends/index'; const getClassNames = classNamesFunction(); + export class ChartHoverCardBase extends React.Component { private _classNames: IProcessedStyleSet; + public render(): React.ReactNode { - const { color, Legend, XValue, YValue, styles, theme, ratio, descriptionMessage, culture } = this.props; + const { color, Legend, XValue, YValue, styles, theme, ratio, descriptionMessage, culture, variant, updatedTime } = + this.props; + this._classNames = getClassNames(styles!, { theme: theme!, - color: color, - XValue: XValue, - isRatioPresent: !!ratio, + variant, + hasBothMetrics: !!YValue && !!ratio, }); + return (
-
-
{XValue}
- {/*TO DO if we add time for callout then will use this */} - {/*
07:00am
*/} -
+
{XValue || convertToLocaleString(Legend, culture)}
-
+ {variant === ChartHoverCardVariant.LongLegend && !!XValue && !!Legend && (
{convertToLocaleString(Legend, culture)}
+ )} +
+ + {variant !== ChartHoverCardVariant.LongLegend && !!XValue && !!Legend && ( +
{convertToLocaleString(Legend, culture)}
+ )}
{convertToLocaleString(YValue, culture)}
+ {!!ratio && ( +
+ {convertToLocaleString(ratio[0], culture)} + {' / ' + convertToLocaleString(ratio[1], culture)} +
+ )}
- {!!ratio && ( -
- <> - {convertToLocaleString(ratio[0], culture)}/ - {convertToLocaleString(ratio[1], culture)} - -
- )}
+ {(!!descriptionMessage || !!updatedTime) &&
} {!!descriptionMessage &&
{descriptionMessage}
} + {!!updatedTime &&
Updated {updatedTime.toLocaleString()}
}
); } diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts index 16918a422ccba..612f4022643c3 100644 --- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts +++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts @@ -1,83 +1,73 @@ -import { IChartHoverCardStyles, IChartHoverCardStyleProps } from './ChartHoverCard.types'; -import { FontWeights } from '@fluentui/react/lib/Styling'; +import { IChartHoverCardStyles, IChartHoverCardStyleProps, ChartHoverCardVariant } from './ChartHoverCard.types'; +import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling'; export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChartHoverCardStyles => { - const { color, XValue, theme, isRatioPresent = false } = props; + const { theme, variant, hasBothMetrics } = props; return { - calloutContentRoot: [ - { - display: 'grid', - overflow: 'hidden', - padding: '11px 16px 10px 16px', - backgroundColor: theme.semanticColors.bodyBackground, - backgroundBlendMode: 'normal, luminosity', - }, - ], - calloutDateTimeContainer: { + calloutContentRoot: { + ...theme.fonts.medium, + color: theme.semanticColors.bodyText, + padding: '16px', + backgroundColor: theme.semanticColors.bodyBackground, + backgroundBlendMode: 'normal, luminosity', + }, + + calloutDateTimeContainer: {}, + + calloutContentX: { + fontWeight: FontWeights.semibold, + marginBottom: '8px', + }, + + calloutBlockContainer: { display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', + alignItems: 'center', }, - calloutContentX: [ - theme.fonts.small, - { - lineHeight: '16px', - opacity: '0.8', - color: theme.semanticColors.bodySubtext, - }, - ], - calloutBlockContainer: [ - theme.fonts.xxLarge, - { - marginTop: XValue ? '13px' : 'unset', - paddingLeft: '8px', - lineHeight: '22px', - color: theme.semanticColors.bodyText, - borderLeft: `4px solid ${color}`, - }, - ], - calloutlegendText: [ - theme.fonts.small, - { - lineHeight: '16px', - color: theme.semanticColors.bodyText, - }, - ], - calloutContentY: [ - theme.fonts.xxLarge, - { - color: color ? color : theme.semanticColors.bodyText, - fontWeight: 'bold', - lineHeight: '36px', - }, - ], - calloutInfoContainer: [ - isRatioPresent && { - display: 'flex', - alignItems: 'flex-end', - }, - ], - ratio: [ - theme.fonts.small, - { - marginLeft: '6px', - color: theme.semanticColors.bodyText, - }, - ], - numerator: { - fontWeight: FontWeights.bold, + + calloutlegendText: { + marginRight: variant === ChartHoverCardVariant.LongLegend ? '0px' : '24px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + marginBottom: variant === ChartHoverCardVariant.LongLegend ? '4px' : '0px', }, - denominator: { + + calloutContentY: { fontWeight: FontWeights.semibold, + flexShrink: 0, + }, + + calloutInfoContainer: {}, + + ratio: { + marginLeft: hasBothMetrics ? '24px' : '0px', + flexShrink: 0, + }, + + numerator: { + fontWeight: FontWeights.semibold, + }, + + denominator: {}, + + descriptionMessage: { + fontSize: FontSizes.small, + }, + + calloutLegendIcon: { + marginRight: '8px', + }, + + divider: { + height: '1px', + backgroundColor: '#c8c8c8', + marginTop: '8px', + marginBottom: '8px', + }, + + updatedTime: { + marginTop: '8px', + fontSize: FontSizes.small, }, - descriptionMessage: [ - theme.fonts.small, - { - color: theme.semanticColors.bodyText, - marginTop: '10px', - paddingTop: '10px', - borderTop: `1px solid ${theme.semanticColors.menuDivider}`, - }, - ], }; }; diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts index 144282bd4e753..cb0f5f1bb851b 100644 --- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts +++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts @@ -1,4 +1,10 @@ import { ITheme, IStyle, IStyleFunctionOrObject } from '@fluentui/react'; + +export enum ChartHoverCardVariant { + ShortLegend = 'short-legend', + LongLegend = 'long-legend', +} + export interface IChartHoverCardProps { /** * X value for hover card @@ -42,6 +48,17 @@ export interface IChartHoverCardProps { * The prop used to define the culture to localized the numbers */ culture?: string; + + /** + * Specifies the variant of ChartHoverCard to be rendered + * @defaultvalue ChartHoverCardVariant.ShortLegend + */ + variant?: ChartHoverCardVariant; + + /** + * Time at which the chart data was last updated + */ + updatedTime?: Date; } export interface IChartHoverCardStyles { @@ -94,6 +111,15 @@ export interface IChartHoverCardStyles { * styles for the description */ descriptionMessage?: IStyle; + + /** styles for the legend icon */ + calloutLegendIcon?: IStyle; + + /** styles for the group divider */ + divider?: IStyle; + + /** styles for the updated time text */ + updatedTime?: IStyle; } export interface IChartHoverCardStyleProps { @@ -103,17 +129,12 @@ export interface IChartHoverCardStyleProps { theme: ITheme; /** - * color for hover card + * Specifies the variant of ChartHoverCard to be rendered */ - color?: string; - - /** - * X value for hover card - */ - XValue?: string; + variant?: ChartHoverCardVariant; /** - * indicate if denomination is present + * Indicates whether both YValue and ratio are present */ - isRatioPresent?: boolean; + hasBothMetrics?: boolean; } From 7a154f093dd083195f8c98de48a0fb2f5555b33e Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Sun, 23 Jul 2023 23:50:57 +0530 Subject: [PATCH 2/6] add change file --- ...eact-charting-fd86b4aa-b2f7-413c-83e4-4cb434fe6a75.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-fd86b4aa-b2f7-413c-83e4-4cb434fe6a75.json diff --git a/change/@fluentui-react-charting-fd86b4aa-b2f7-413c-83e4-4cb434fe6a75.json b/change/@fluentui-react-charting-fd86b4aa-b2f7-413c-83e4-4cb434fe6a75.json new file mode 100644 index 0000000000000..1683e09d73c65 --- /dev/null +++ b/change/@fluentui-react-charting-fd86b4aa-b2f7-413c-83e4-4cb434fe6a75.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Modify hover card as per design", + "packageName": "@fluentui/react-charting", + "email": "kumarkshitij@microsoft.com", + "dependentChangeType": "patch" +} From 47d6d610ca0ce89603cffeabed32dea1bec3d53e Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Thu, 27 Jul 2023 11:12:00 +0530 Subject: [PATCH 3/6] modify multi value callout as per design --- .../__snapshots__/AreaChart.test.tsx.snap | 129 ++++---- .../__snapshots__/AreaChartRTL.test.tsx.snap | 129 ++++---- .../CommonComponents/CartesianChart.base.tsx | 131 ++++---- .../CommonComponents/CartesianChart.styles.ts | 124 +++----- .../CommonComponents/CartesianChart.types.ts | 33 +- .../__snapshots__/DonutChart.test.tsx.snap | 14 +- .../__snapshots__/DonutChartRTL.test.tsx.snap | 28 +- .../components/GaugeChart/GaugeChart.base.tsx | 127 ++++---- .../GaugeChart/GaugeChart.styles.ts | 121 +++----- .../components/GaugeChart/GaugeChart.types.ts | 32 +- .../__snapshots__/GaugeChart.test.tsx.snap | 286 ++++++++---------- .../GroupedVerticalBarChart.test.tsx.snap | 12 +- .../GroupedVerticalBarChartRTL.test.tsx.snap | 12 +- .../__snapshots__/HeatMapChart.test.tsx.snap | 14 +- .../HorizontalBarChart.test.tsx.snap | 14 +- .../HorizontalBarChartWithAxis.test.tsx.snap | 15 +- .../__snapshots__/LineChart.test.tsx.snap | 129 ++++---- .../__snapshots__/LineChartRTL.test.tsx.snap | 129 ++++---- .../MultiStackedBarChart.test.tsx.snap | 14 +- .../StackedBarChart.test.tsx.snap | 14 +- .../VerticalBarChart.test.tsx.snap | 15 +- .../VerticalBarChartRTL.test.tsx.snap | 15 +- .../VerticalStackedBarChart.test.tsx.snap | 15 +- .../VerticalStackedBarChartRTL.test.tsx.snap | 15 +- .../ChartHoverCard/ChartHoverCard.base.tsx | 4 +- .../ChartHoverCard/ChartHoverCard.styles.ts | 7 +- .../ChartHoverCard/ChartHoverCard.types.ts | 14 +- .../AreaChart/AreaChart.Multiple.Example.tsx | 30 ++ 28 files changed, 849 insertions(+), 773 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap index dd51632647b90..9f91f5ffad5a5 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap @@ -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; } >
-
+
-
-
- - metaData1 -
-
+ + +
- 80 -
+ { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + style={ + Object { + "marginRight": "24px", + } + } + > + metaData1 +
+
+ 80
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap index 8df081a9230a2..4345da0667a56 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap @@ -750,38 +750,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; } >
-
+
-
-
- - metaData1 -
-
+ + +
- 80 -
+ { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + style={ + Object { + "marginRight": "24px", + } + } + > + metaData1 +
+
+ 80
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index dd9fd3cec6264..475fcc021e41d 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -32,6 +32,7 @@ import { calculateLongestLabelWidth, createYAxisLabels, ChartTypes, + ChartHoverCardVariant, } from '../../utilities/index'; import { LegendShape, Shape } from '../Legends/index'; @@ -509,12 +510,11 @@ export class CartesianChartBase extends React.Component { const yValueHoverSubCountsExists: boolean = this._yValueHoverSubCountsExists(calloutProps.YValueHover); + const { updatedTime } = this.props; + return (
-
+
- {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)} -
+ +
+ {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)} +
+ {shouldDrawBorderBottom &&
} + ); })} - {!!calloutProps.descriptionMessage && ( -
{calloutProps.descriptionMessage}
- )}
+ {(!!calloutProps.descriptionMessage || !!updatedTime) &&
} + {!!calloutProps.descriptionMessage && ( +
{calloutProps.descriptionMessage}
+ )} + {!!updatedTime &&
Updated {updatedTime.toLocaleString()}
}
); }; @@ -583,46 +576,41 @@ export class CartesianChartBase extends React.Component +
{yValueHoverSubCountsExists && ( -
+
{xValue.legend!} ({yValue})
)} -
- {toDrawShape && ( - - )} -
-
{xValue.legend}
-
- {convertToLocaleString( - xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data, - culture, - )} + {(yValueHoverSubCountsExists || calloutVariant === ChartHoverCardVariant.LongLegend) && ( +
+ {xValue.legend} +
+ )} +
+ + {!yValueHoverSubCountsExists && calloutVariant !== ChartHoverCardVariant.LongLegend && ( +
+ {xValue.legend}
+ )} +
+ {convertToLocaleString( + xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data, + culture, + )}
@@ -630,16 +618,27 @@ export class CartesianChartBase extends React.Component -
+
+
{xValue.legend!} ({yValue})
- {Object.keys(subcounts).map((subcountName: string) => { + {Object.keys(subcounts).map((subcountName: string, idx, sc) => { return ( -
-
{convertToLocaleString(subcountName, culture)}
-
- {convertToLocaleString(subcounts[subcountName], culture)} +
+
+ {convertToLocaleString(subcountName, culture)} +
+
+ +
+ {convertToLocaleString(subcounts[subcountName], culture)} +
); diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts index 783b67fb24f27..0105a3a521e85 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts @@ -1,12 +1,12 @@ import { ICartesianChartStyleProps, ICartesianChartStyles } from './CartesianChart.types'; -import { HighContrastSelectorBlack, HighContrastSelector } from '@fluentui/react/lib/Styling'; +import { HighContrastSelectorBlack, FontWeights, FontSizes } from '@fluentui/react/lib/Styling'; import { isIE11 } from '@fluentui/react'; const isIE11Var: boolean = isIE11(); export const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyles => { - const { className, theme, isRtl, shouldHighlight, href, lineColor = 'transparent', toDrawShape } = props; - const { fonts } = theme!; + const { className, theme, isRtl, shouldHighlight, href } = props; + return { root: [ theme.fonts.medium, @@ -99,85 +99,59 @@ export const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyl marginLeft: '20px', }, ], - calloutContentRoot: [ - { - display: 'grid', - overflow: 'hidden', - padding: '11px 16px 10px 16px', - backgroundColor: theme.semanticColors.bodyBackground, - backgroundBlendMode: 'normal, luminosity', - }, - ], + + calloutContentRoot: { + ...theme.fonts.medium, + color: theme.semanticColors.bodyText, + padding: '16px', + backgroundColor: theme.semanticColors.bodyBackground, + backgroundBlendMode: 'normal, luminosity', + }, + calloutDateTimeContainer: { + marginBottom: '8px', + }, + + calloutContentX: { + fontWeight: FontWeights.semibold, + }, + + calloutBlockContainer: { display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', + alignItems: 'center', }, - calloutContentX: [ - { - ...fonts.small, - lineHeight: '16px', - opacity: '0.8', - color: theme.semanticColors.bodySubtext, - }, - ], - calloutBlockContainer: [ - theme.fonts.mediumPlus, - { - marginTop: '13px', - color: theme.semanticColors.bodyText, - }, - !toDrawShape && { - selectors: { - [HighContrastSelector]: { - forcedColorAdjust: 'none', - }, - }, - borderLeft: `4px solid ${lineColor}`, - paddingLeft: '8px', - }, - toDrawShape && { - display: 'flex', - }, - ], + shapeStyles: { marginRight: '8px', + flexShrink: 0, }, + calloutlegendText: { - ...fonts.small, - lineHeight: '16px', - selectors: { - [HighContrastSelectorBlack]: { - color: 'rgb(255, 255, 255)', - }, - }, - color: theme.semanticColors.bodySubtext, + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + flexGrow: 1, + }, + + calloutContentY: { + fontWeight: FontWeights.semibold, + flexShrink: 0, + }, + + divider: { + height: '1px', + backgroundColor: '#c8c8c8', + marginTop: '8px', + marginBottom: '8px', + }, + + descriptionMessage: { + fontSize: FontSizes.small, + }, + + updatedTime: { + marginTop: '8px', + fontSize: FontSizes.small, }, - calloutContentY: [ - { - ...fonts.mediumPlus, - fontWeight: 'bold', - lineHeight: '22px', - selectors: { - [HighContrastSelectorBlack]: { - color: 'rgb(255, 255, 255)', - }, - }, - }, - ], - descriptionMessage: [ - theme.fonts.small, - { - selectors: { - [HighContrastSelectorBlack]: { - color: 'rgb(255, 255, 255)', - }, - }, - color: theme.semanticColors.bodyText, - marginTop: '10px', - paddingTop: '10px', - borderTop: `1px solid ${theme.semanticColors.menuDivider}`, - }, - ], }; }; diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts index f479a0b4b372f..100dbafcdb425 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -6,7 +6,7 @@ import { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus'; import { ICalloutProps } from '@fluentui/react/lib/Callout'; import { ILegendsProps } from '../Legends/index'; import { IAccessibilityProps, IMargins } from '../../types/index'; -import { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index'; +import { ChartHoverCardVariant, ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index'; import * as d3TimeFormat from 'd3-time-format'; export interface ICartesianChartStyleProps { @@ -49,16 +49,6 @@ export interface ICartesianChartStyleProps { * prop to check if the Page is in Rtl */ isRtl?: boolean; - - /** - * color of the line - */ - lineColor?: string; - - /** - * boolean flag which determines if shape is drawn in callout - */ - toDrawShape?: boolean; } export interface ICartesianChartStyles { @@ -151,6 +141,16 @@ export interface ICartesianChartStyles { * Styles for the chart wrapper div */ chartWrapper?: IStyle; + + /** + * Styles for the group divider in callout + */ + divider?: IStyle; + + /** + * Styles for the updated time text in callout + */ + updatedTime?: IStyle; } export interface ICartesianChartProps { @@ -380,6 +380,17 @@ export interface ICartesianChartProps { * @default True for LineChart but False for other charts */ enableReflow?: boolean; + + /** + * Specifies the variant of hover card to be rendered + * @defaultvalue ChartHoverCardVariant.ShortLegend + */ + calloutVariant?: ChartHoverCardVariant; + + /** + * Time at which the chart data was last updated + */ + updatedTime?: Date; } export interface IYValueHover { diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index 39e12e4c53548..919da1b80955e 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -217,12 +217,19 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover className= { - font-weight: 600; margin-bottom: 8px; } > - 2020/04/30 - +
+ 2020/04/30 + +
- 2020/04/30 - +
+ 2020/04/30 + +
- 2020/04/30 - +
+ 2020/04/30 + +
{ const yValueHoverSubCountsExists: boolean = this._yValueHoverSubCountsExists(calloutProps.YValueHover); + const { updatedTime } = this.props; + return (
-
+
- {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)} -
+ +
+ {this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)} +
+ {shouldDrawBorderBottom &&
} + ); })} - {!!calloutProps.descriptionMessage && ( -
{calloutProps.descriptionMessage}
- )}
+ {(!!calloutProps.descriptionMessage || !!updatedTime) &&
} + {!!calloutProps.descriptionMessage && ( +
{calloutProps.descriptionMessage}
+ )} + {!!updatedTime &&
Updated {updatedTime.toLocaleString()}
}
); }; @@ -592,42 +585,41 @@ export class GaugeChartBase extends React.Component +
{yValueHoverSubCountsExists && ( -
+
{xValue.legend!} ({yValue})
)} -
- {toDrawShape && ( - - )} -
-
{xValue.legend}
-
- {convertToLocaleString( - xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data, - culture, - )} + {(yValueHoverSubCountsExists || calloutVariant === ChartHoverCardVariant.LongLegend) && ( +
+ {xValue.legend} +
+ )} +
+ + {!yValueHoverSubCountsExists && calloutVariant !== ChartHoverCardVariant.LongLegend && ( +
+ {xValue.legend}
+ )} +
+ {convertToLocaleString( + xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data, + culture, + )}
@@ -635,16 +627,27 @@ export class GaugeChartBase extends React.Component -
+
+
{xValue.legend!} ({yValue})
- {Object.keys(subcounts).map((subcountName: string) => { + {Object.keys(subcounts).map((subcountName: string, idx, sc) => { return ( -
-
{convertToLocaleString(subcountName, culture)}
-
- {convertToLocaleString(subcounts[subcountName], culture)} +
+
+ {convertToLocaleString(subcountName, culture)} +
+
+ +
+ {convertToLocaleString(subcounts[subcountName], culture)} +
); diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts index ccc767b32e0ab..cc2634c10c9d2 100644 --- a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts +++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts @@ -1,8 +1,8 @@ -import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack } from '@fluentui/react'; +import { FontSizes, FontWeights } from '@fluentui/react'; import { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types'; export const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => { - const { theme, chartValueSize, chartWidth, chartHeight, className, lineColor, toDrawShape } = props; + const { theme, chartValueSize, chartWidth, chartHeight, className } = props; return { root: [ @@ -58,85 +58,58 @@ export const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => { width: chartWidth, }, - calloutContentRoot: [ - { - display: 'grid', - overflow: 'hidden', - padding: '11px 16px 10px 16px', - backgroundColor: theme.semanticColors.bodyBackground, - backgroundBlendMode: 'normal, luminosity', - }, - ], + calloutContentRoot: { + ...theme.fonts.medium, + color: theme.semanticColors.bodyText, + padding: '16px', + backgroundColor: theme.semanticColors.bodyBackground, + backgroundBlendMode: 'normal, luminosity', + }, + calloutDateTimeContainer: { + marginBottom: '8px', + }, + + calloutContentX: { + fontWeight: FontWeights.semibold, + }, + + calloutBlockContainer: { display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', + alignItems: 'center', }, - calloutContentX: [ - { - ...theme.fonts.small, - lineHeight: '16px', - opacity: '0.8', - color: theme.semanticColors.bodySubtext, - }, - ], - calloutBlockContainer: [ - theme.fonts.mediumPlus, - { - marginTop: '13px', - color: theme.semanticColors.bodyText, - }, - !toDrawShape && { - selectors: { - [HighContrastSelector]: { - forcedColorAdjust: 'none', - }, - }, - borderLeft: `4px solid ${lineColor}`, - paddingLeft: '8px', - }, - toDrawShape && { - display: 'flex', - }, - ], + shapeStyles: { marginRight: '8px', + flexShrink: 0, }, + calloutlegendText: { - ...theme.fonts.small, - lineHeight: '16px', - selectors: { - [HighContrastSelectorBlack]: { - color: 'rgb(255, 255, 255)', - }, - }, - color: theme.semanticColors.bodySubtext, + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + flexGrow: 1, + }, + + calloutContentY: { + fontWeight: FontWeights.semibold, + flexShrink: 0, + }, + + divider: { + height: '1px', + backgroundColor: '#c8c8c8', + marginTop: '8px', + marginBottom: '8px', + }, + + descriptionMessage: { + fontSize: FontSizes.small, + }, + + updatedTime: { + marginTop: '8px', + fontSize: FontSizes.small, }, - calloutContentY: [ - { - ...theme.fonts.mediumPlus, - fontWeight: 'bold', - lineHeight: '22px', - selectors: { - [HighContrastSelectorBlack]: { - color: 'rgb(255, 255, 255)', - }, - }, - }, - ], - descriptionMessage: [ - theme.fonts.small, - { - selectors: { - [HighContrastSelectorBlack]: { - color: 'rgb(255, 255, 255)', - }, - }, - color: theme.semanticColors.bodyText, - marginTop: '10px', - paddingTop: '10px', - borderTop: `1px solid ${theme.semanticColors.menuDivider}`, - }, - ], }; }; diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts index 49a1456494c4f..6c6ec4c3a37f6 100644 --- a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts +++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts @@ -3,6 +3,7 @@ import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { ILegendsProps } from '../Legends/index'; import { IAccessibilityProps } from '../../types/index'; import { ICalloutProps } from '@fluentui/react/lib/Callout'; +import { ChartHoverCardVariant } from '../../utilities/index'; export interface IGaugeChartSegment { /** @@ -126,6 +127,17 @@ export interface IGaugeChartProps { * Props for the callout in the chart */ calloutProps?: Partial; + + /** + * Specifies the variant of hover card to be rendered + * @defaultvalue ChartHoverCardVariant.ShortLegend + */ + calloutVariant?: ChartHoverCardVariant; + + /** + * Time at which the chart data was last updated + */ + updatedTime?: Date; } export interface IGaugeChartStyleProps { @@ -153,16 +165,6 @@ export interface IGaugeChartStyleProps { * Additional CSS class(es) to apply to the chart */ className?: string; - - /** - * Color of the line - */ - lineColor?: string; - - /** - * Boolean flag which determines if shape is drawn in callout - */ - toDrawShape?: boolean; } export interface IGaugeChartStyles { @@ -255,4 +257,14 @@ export interface IGaugeChartStyles { * Styles for the shape object in the callout */ shapeStyles?: IStyle; + + /** + * Styles for the group divider in callout + */ + divider?: IStyle; + + /** + * Styles for the updated time text in callout + */ + updatedTime?: IStyle; } diff --git a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap index e460dbf1020bc..74122d81236d6 100644 --- a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap +++ b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap @@ -533,37 +533,32 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou class= { + -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; } >
-
-
- - Low Risk -
-
+ + +
- 0 - 33 -
+ { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + style="margin-right: 24px;" + > + Low Risk +
+
+ 0 - 33
@@ -640,64 +628,57 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou
-
-
- - Medium Risk -
-
+ + +
- 34 - 67 -
+ { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + style="margin-right: 24px;" + > + Medium Risk +
+
+ 34 - 67
@@ -705,64 +686,57 @@ exports[`GaugeChart - event listeners testing should show a callout when the mou
-
-
- - High Risk -
-
+ + +
- 68 - 100 -
+ { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + style="margin-right: 24px;" + > + High Risk +
+
+ 68 - 100
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap index a82fc4626f52c..b04ec3684f852 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap @@ -678,11 +678,18 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly className= { - font-weight: 600; margin-bottom: 8px; } > - +
+ +
- +
+ +
- Execllent (0-200) - +
+ Execllent (0-200) + +
- 2020/04/30 - +
+ 2020/04/30 + +
- 37% - +
+ 37% + +
-
+
-
-
- - metaData1 -
-
+ + +
- 50 -
+ { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + style={ + Object { + "marginRight": "24px", + } + } + > + metaData1 +
+
+ 50
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap index 1e8b8514ba0ac..08d8b0ad218d7 100644 --- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap @@ -721,38 +721,32 @@ exports[`LineChart - 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; } >
-
+
-
-
- - metaData1 -
-
+ + +
- 50 -
+ { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + style={ + Object { + "marginRight": "24px", + } + } + > + metaData1 +
+
+ 50
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap index b9b1e9d0542f6..17a95493e822e 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap @@ -588,12 +588,19 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on className= { - font-weight: 600; margin-bottom: 8px; } > - 2020/04/30 - +
+ 2020/04/30 + +
- first Lorem ipsum dolor sit amet - +
+ first Lorem ipsum dolor sit amet + +
- 2020/04/30 - +
+ 2020/04/30 + +
- 2020/04/30 - +
+ 2020/04/30 + +
- 2020/04/30 - +
+ 2020/04/30 + +
- 2020/04/30 - +
+ 2020/04/30 + +
-
{XValue || convertToLocaleString(Legend, culture)}
+
+
{XValue || convertToLocaleString(Legend, culture)}
+
{variant === ChartHoverCardVariant.LongLegend && !!XValue && !!Legend && (
{convertToLocaleString(Legend, culture)}
diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts index 612f4022643c3..bef250b142a90 100644 --- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts +++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts @@ -12,11 +12,12 @@ export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChar backgroundBlendMode: 'normal, luminosity', }, - calloutDateTimeContainer: {}, + calloutDateTimeContainer: { + marginBottom: '8px', + }, calloutContentX: { fontWeight: FontWeights.semibold, - marginBottom: '8px', }, calloutBlockContainer: { @@ -30,6 +31,7 @@ export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChar overflow: 'hidden', whiteSpace: 'nowrap', marginBottom: variant === ChartHoverCardVariant.LongLegend ? '4px' : '0px', + flexGrow: 1, }, calloutContentY: { @@ -56,6 +58,7 @@ export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChar calloutLegendIcon: { marginRight: '8px', + flexShrink: 0, }, divider: { diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts index cb0f5f1bb851b..25d7eb7b991a0 100644 --- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts +++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.types.ts @@ -50,7 +50,7 @@ export interface IChartHoverCardProps { culture?: string; /** - * Specifies the variant of ChartHoverCard to be rendered + * Specifies the variant of hover card to be rendered * @defaultvalue ChartHoverCardVariant.ShortLegend */ variant?: ChartHoverCardVariant; @@ -112,13 +112,19 @@ export interface IChartHoverCardStyles { */ descriptionMessage?: IStyle; - /** styles for the legend icon */ + /** + * styles for the legend icon + */ calloutLegendIcon?: IStyle; - /** styles for the group divider */ + /** + * styles for the group divider + */ divider?: IStyle; - /** styles for the updated time text */ + /** + * styles for the updated time text + */ updatedTime?: IStyle; } diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx index 4e816dc6308bc..811160b8633ba 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx @@ -33,42 +33,52 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi { x: 20, y: 9, + yAxisCalloutData: { 'Subcount1-1': 2, 'Subcount1-2': 3, 'Subcount1-3': 4 }, }, { x: 25, y: 14, + yAxisCalloutData: { 'Subcount1-1': 3, 'Subcount1-2': 5, 'Subcount1-3': 6 }, }, { x: 30, y: 14, + yAxisCalloutData: { 'Subcount1-1': 3, 'Subcount1-2': 5, 'Subcount1-3': 6 }, }, { x: 35, y: 23, + yAxisCalloutData: { 'Subcount1-1': 6, 'Subcount1-2': 8, 'Subcount1-3': 9 }, }, { x: 40, y: 20, + yAxisCalloutData: { 'Subcount1-1': 5, 'Subcount1-2': 7, 'Subcount1-3': 8 }, }, { x: 45, y: 31, + yAxisCalloutData: { 'Subcount1-1': 9, 'Subcount1-2': 10, 'Subcount1-3': 12 }, }, { x: 50, y: 29, + yAxisCalloutData: { 'Subcount1-1': 8, 'Subcount1-2': 10, 'Subcount1-3': 11 }, }, { x: 55, y: 27, + yAxisCalloutData: { 'Subcount1-1': 8, 'Subcount1-2': 9, 'Subcount1-3': 10 }, }, { x: 60, y: 37, + yAxisCalloutData: { 'Subcount1-1': 11, 'Subcount1-2': 12, 'Subcount1-3': 14 }, }, { x: 65, y: 51, + yAxisCalloutData: { 'Subcount1-1': 16, 'Subcount1-2': 17, 'Subcount1-3': 18 }, }, ]; @@ -76,42 +86,52 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi { x: 20, y: 21, + yAxisCalloutData: { 'Subcount2-1': 6, 'Subcount2-2': 7, 'Subcount2-3': 8 }, }, { x: 25, y: 25, + yAxisCalloutData: { 'Subcount2-1': 7, 'Subcount2-2': 8, 'Subcount2-3': 10 }, }, { x: 30, y: 10, + yAxisCalloutData: { 'Subcount2-1': 2, 'Subcount2-2': 3, 'Subcount2-3': 5 }, }, { x: 35, y: 10, + yAxisCalloutData: { 'Subcount2-1': 2, 'Subcount2-2': 3, 'Subcount2-3': 5 }, }, { x: 40, y: 14, + yAxisCalloutData: { 'Subcount2-1': 3, 'Subcount2-2': 5, 'Subcount2-3': 6 }, }, { x: 45, y: 18, + yAxisCalloutData: { 'Subcount2-1': 5, 'Subcount2-2': 6, 'Subcount2-3': 7 }, }, { x: 50, y: 9, + yAxisCalloutData: { 'Subcount2-1': 2, 'Subcount2-2': 3, 'Subcount2-3': 4 }, }, { x: 55, y: 23, + yAxisCalloutData: { 'Subcount2-1': 6, 'Subcount2-2': 8, 'Subcount2-3': 9 }, }, { x: 60, y: 7, + yAxisCalloutData: { 'Subcount2-1': 1, 'Subcount2-2': 2, 'Subcount2-3': 4 }, }, { x: 65, y: 55, + yAxisCalloutData: { 'Subcount2-1': 17, 'Subcount2-2': 18, 'Subcount2-3': 20 }, }, ]; @@ -119,42 +139,52 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi { x: 20, y: 30, + yAxisCalloutData: { 'Subcount3-1': 9, 'Subcount3-2': 10, 'Subcount3-3': 11 }, }, { x: 25, y: 35, + yAxisCalloutData: { 'Subcount3-1': 10, 'Subcount3-2': 12, 'Subcount3-3': 13 }, }, { x: 30, y: 33, + yAxisCalloutData: { 'Subcount3-1': 10, 'Subcount3-2': 11, 'Subcount3-3': 12 }, }, { x: 35, y: 40, + yAxisCalloutData: { 'Subcount3-1': 12, 'Subcount3-2': 13, 'Subcount3-3': 15 }, }, { x: 40, y: 10, + yAxisCalloutData: { 'Subcount3-1': 2, 'Subcount3-2': 3, 'Subcount3-3': 5 }, }, { x: 45, y: 40, + yAxisCalloutData: { 'Subcount3-1': 12, 'Subcount3-2': 13, 'Subcount3-3': 15 }, }, { x: 50, y: 34, + yAxisCalloutData: { 'Subcount3-1': 10, 'Subcount3-2': 11, 'Subcount3-3': 13 }, }, { x: 55, y: 40, + yAxisCalloutData: { ['Subcount3-1']: 12, 'Subcount3-2': 13, 'Subcount3-3': 15 }, }, { x: 60, y: 60, + yAxisCalloutData: { 'Subcount3-1': 19, 'Subcount3-2': 20, 'Subcount3-3': 21 }, }, { x: 65, y: 40, + yAxisCalloutData: { 'Subcount3-1': 12, 'Subcount3-2': 13, 'Subcount3-3': 15 }, }, ]; From 26e7853a058942a0d32982e3b446abeff677c4d6 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Fri, 28 Jul 2023 14:35:43 +0530 Subject: [PATCH 4/6] add test case for callout variant --- .../VerticalStackedBarChart.test.tsx | 20 + .../VerticalStackedBarChart.test.tsx.snap | 922 ++++++++++++++++++ 2 files changed, 942 insertions(+) diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx index a91183d816c10..b434b6d600632 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx @@ -9,6 +9,7 @@ import { IVerticalStackedBarChartProps, VerticalStackedBarChart, IVerticalStackedChartProps, + ChartHoverCardVariant, } from '../../index'; import { IVerticalStackedBarChartState, VerticalStackedBarChartBase } from './VerticalStackedBarChart.base'; import toJson from 'enzyme-to-json'; @@ -320,6 +321,25 @@ describe('VerticalStackedBarChart - mouse events', () => { const tree = toJson(wrapper, { mode: 'deep' }); expect(tree).toMatchSnapshot(); }); + + it('Should render long legend variant of callout correctly on mouseover', async () => { + wrapper = mount( + , + ); + + // Wait for the chart to be resized + await new Promise(resolve => setTimeout(resolve)); + wrapper.update(); + + wrapper.find('rect').at(0).simulate('mouseover'); + const tree = toJson(wrapper, { mode: 'deep' }); + expect(tree).toMatchSnapshot(); + }); }); describe('Render empty chart aria label div when chart is empty', () => { diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap index 50cb1c41625a3..696877b282fd8 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap @@ -1914,6 +1914,928 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
`; +exports[`VerticalStackedBarChart - mouse events Should render long legend variant of callout correctly on mouseover 1`] = ` +