Skip to content

Commit 8c8f017

Browse files
gdfreitasgdfreitas
committed
add props to customize tooltips
1 parent 6fee41f commit 8c8f017

File tree

6 files changed

+95
-27
lines changed

6 files changed

+95
-27
lines changed

‎src/CentileChart/CentileChart.tsx

+34-10
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ function CentileChart({
321321
constrainToVisibleArea
322322
backgroundPadding={5}
323323
pointerLength={5}
324-
cornerRadius={0}
324+
cornerRadius={styles.toolTipBorderRadius}
325325
flyoutHeight={(datum) => {
326326
const numberOfLines = datum.text.length;
327327
return numberOfLines * 18 * textScaleFactor; // 18 is the line height
@@ -919,7 +919,15 @@ function CentileChart({
919919
{/* Creates the Centile Label toggle button */}
920920
{
921921
<GradientLabelsButtonWrapper>
922-
<StyledButtonTooltip>
922+
<StyledButtonTooltip
923+
backgroundColor={styles.toggleTooltipStyle.backgroundColor}
924+
color={styles.toggleTooltipStyle.color}
925+
fontSize={styles.toggleTooltipStyle.fontSize}
926+
fontFamily={styles.toggleTooltipStyle.fontFamily}
927+
fontWeight={styles.toggleTooltipStyle.fontWeight}
928+
fontStyle={styles.toggleTooltipStyle.fontStyle}
929+
borderRadius={styles.toggleTooltipStyle.borderRadius}
930+
>
923931
<StyledGradientLabelsButton
924932
$color={styles.toggleStyle.activeColour}
925933
size={5}
@@ -931,21 +939,29 @@ function CentileChart({
931939
:
932940
<ShowCentileLabelIcon/>
933941
}
934-
{ centileLabels ?
935-
<div className='tooltip'>Hide Centile Labels</div>
936-
:
937-
<div className='tooltip'>Show Centile Labels</div>
938-
}
939-
</StyledGradientLabelsButton>
940942

943+
</StyledGradientLabelsButton>
944+
{ centileLabels ?
945+
<div className='tooltip'>Hide Centile Labels</div>
946+
:
947+
<div className='tooltip'>Show Centile Labels</div>
948+
}
941949
</StyledButtonTooltip>
942950
</GradientLabelsButtonWrapper>
943951
}
944952

945953
{/* Creates the Zoom to see whole lifespan button */}
946954
{ childMeasurements.length > 0 &&
947955
<FullScreenButtonWrapper>
948-
<StyledButtonTooltip>
956+
<StyledButtonTooltip
957+
backgroundColor={styles.toggleTooltipStyle.backgroundColor}
958+
color={styles.toggleTooltipStyle.color}
959+
fontSize={styles.toggleTooltipStyle.fontSize}
960+
fontFamily={styles.toggleTooltipStyle.fontFamily}
961+
fontWeight={styles.toggleTooltipStyle.fontWeight}
962+
fontStyle={styles.toggleTooltipStyle.fontStyle}
963+
borderRadius={styles.toggleTooltipStyle.borderRadius}
964+
>
949965
<StyledFullScreenButton
950966
onClick={()=> fullScreenPressed()}
951967
$color={styles.toggleStyle.activeColour}
@@ -966,7 +982,15 @@ function CentileChart({
966982
{/* Creates the Copy button */}
967983
{ enableExport && (
968984
<ShareButtonWrapper>
969-
<StyledButtonTooltip>
985+
<StyledButtonTooltip
986+
backgroundColor={styles.toggleTooltipStyle.backgroundColor}
987+
color={styles.toggleTooltipStyle.color}
988+
fontSize={styles.toggleTooltipStyle.fontSize}
989+
fontFamily={styles.toggleTooltipStyle.fontFamily}
990+
fontWeight={styles.toggleTooltipStyle.fontWeight}
991+
fontStyle={styles.toggleTooltipStyle.fontStyle}
992+
borderRadius={styles.toggleTooltipStyle.borderRadius}
993+
>
970994
<StyledShareButton
971995
$color={styles.toggleStyle.activeColour}
972996
size={5}

‎src/RCPCHChart/RCPCHChart.stories.tsx

+18-9
Original file line numberDiff line numberDiff line change
@@ -477,8 +477,8 @@ export const CustomThemeStylesChart: Story = {
477477
midParentalHeightData: {},
478478
enableZoom: true,
479479
chartType: 'centile',
480-
enableExport: false,
481-
exportChartCallback: () => {},
480+
enableExport: true,
481+
exportChartCallback: (svg) => console.log(svg),
482482
theme: 'custom',
483483
customThemeStyles: {
484484
chartStyle: {
@@ -495,6 +495,14 @@ export const CustomThemeStylesChart: Story = {
495495
name: 'sans-serif',
496496
size: 13,
497497
},
498+
tooltipStroke: '#5a526b',
499+
tooltipBorderRadius: 4,
500+
tooltipBackgroundColour: '#5a526b',
501+
tooltipTextStyle: {
502+
colour: '#fffdfd',
503+
name: 'sans-serif',
504+
size: 14,
505+
},
498506
toggleButtonActiveColour: '#B89F81',
499507
toggleButtonInactiveColour: '#e8dbcc',
500508
toggleButtonTextStyle: {
@@ -503,13 +511,14 @@ export const CustomThemeStylesChart: Story = {
503511
size: 16,
504512
weight: 400,
505513
},
506-
tooltipStroke: '#EBE1D3',
507-
tooltipBackgroundColour: '#5a526b',
508-
tooltipTextStyle: {
509-
colour: '#fffdfd',
510-
name: 'sans-serif',
511-
size: 14,
512-
},
514+
toggleButtonTooltipStyle: {
515+
backgroundColour: '#5a526b',
516+
borderRadius: 4,
517+
colour: 'white',
518+
size: 14,
519+
name: 'sans-serif',
520+
weight: 400,
521+
}
513522
},
514523
axisStyle: {
515524
axisStroke: '#EDE7DD',

‎src/SDSChart/SDSChart.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ const SDSChart: React.FC<SDSChartProps> = (
270270
<VictoryTooltip
271271
constrainToVisibleArea
272272
pointerLength={5}
273-
cornerRadius={0}
273+
cornerRadius={styles.toolTipBorderRadius}
274274
flyoutStyle={styles.toolTipFlyout}
275275
style={styles.toolTipMain}
276276
/>
@@ -574,7 +574,15 @@ const SDSChart: React.FC<SDSChartProps> = (
574574
{/* Creates the Copy button - note if user has disabled this, must have an empty div to allow the toggle buttons to remain in the center */}
575575
{ enableExport ? (
576576
<ShareButtonWrapper>
577-
<StyledButtonTooltip>
577+
<StyledButtonTooltip
578+
backgroundColor={styles.toggleTooltipStyle.backgroundColor}
579+
color={styles.toggleTooltipStyle.color}
580+
fontSize={styles.toggleTooltipStyle.fontSize}
581+
fontFamily={styles.toggleTooltipStyle.fontFamily}
582+
fontWeight={styles.toggleTooltipStyle.fontWeight}
583+
fontStyle={styles.toggleTooltipStyle.fontStyle}
584+
borderRadius={styles.toggleTooltipStyle.borderRadius}
585+
>
578586
<StyledShareButton
579587
$color={styles.toggleStyle.activeColour}
580588
size={5}

‎src/SubComponents/StyledButtonTooltip.tsx

+16-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import styled from 'styled-components';
22

3-
export const StyledButtonTooltip = styled.div`
3+
export const StyledButtonTooltip = styled.div<{
4+
backgroundColor?: string,
5+
color?: string,
6+
fontSize?: number,
7+
fontFamily?: string,
8+
fontWeight?: string,
9+
fontStyle?: string,
10+
borderRadius?: string,
11+
}>`
412
position: relative;
513
614
.tooltip {
@@ -9,12 +17,14 @@ export const StyledButtonTooltip = styled.div`
917
left: 50%;
1018
transform: translateX(-50%);
1119
display: none;
12-
background-color: #333;
13-
color: #fff;
20+
background-color: ${(props) => props.backgroundColor};
21+
color: ${(props) => props.color};
1422
padding: 5px;
15-
border-radius: 4px;
16-
font-size: 14px;
17-
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
23+
border-radius: ${(props) => props.borderRadius}px;
24+
font-size: ${(props) => props.fontSize}px;
25+
font-weight: ${(props) => props.fontWeight};
26+
font-style: ${(props) => props.fontStyle};
27+
font-family: ${(props) => props.fontFamily};
1828
}
1929
2030
&:hover .tooltip {

‎src/functions/makeAllStyles.ts

+10
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ function makeAllStyles(
6363
fill: chartStyle?.backgroundColour ?? white,
6464
}
6565
},
66+
toolTipBorderRadius: chartStyle?.tooltipBorderRadius ?? 0,
6667
toolTipFlyout: {
6768
stroke: chartStyle?.tooltipStroke ?? midGrey, // tooltip border colour
6869
fill: chartStyle?.tooltipBackgroundColour ?? midGrey, // tooltip backgroundcolour
@@ -299,6 +300,15 @@ function makeAllStyles(
299300
fontStyle: chartStyle?.toggleButtonTextStyle?.style === 'italic' ? 'italic' : 'normal',
300301
margin: 0
301302
},
303+
toggleTooltipStyle: {
304+
backgroundColor: chartStyle?.toggleButtonTooltipStyle?.backgroundColour ?? '#333',
305+
color: chartStyle?.toggleButtonTooltipStyle?.colour ?? '#fff',
306+
fontSize: chartStyle?.toggleButtonTooltipStyle?.size ?? 14,
307+
fontFamily: chartStyle?.toggleButtonTooltipStyle?.name ?? `'Montserrat', Helvetica, Arial, sans-serif;`,
308+
fontWeight: chartStyle?.toggleButtonTooltipStyle?.weight ?? 400,
309+
fontStyle: chartStyle?.toggleButtonTooltipStyle?.style ?? 'regular',
310+
borderRadius: chartStyle?.toggleButtonTooltipStyle?.borderRadius ?? 4,
311+
},
302312
referenceTextStyle: {
303313
fontSize: referenceStyle?.size ?? 8,
304314
fontFamily: referenceStyle?.name ?? 'Arial',

‎src/interfaces/StyleObjects.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export interface ChartStyle {
1010
toggleButtonInactiveColour?: string; // buttons - inactive colour
1111
toggleButtonActiveColour?: string; // buttons - active colour
1212
toggleButtonTextStyle?: TextStyle; // buttons text: includes fontFamily, fontSize, colour, style, weight
13+
toggleButtonTooltipStyle?: ToggleButtonTooltipStyle;
1314
}
1415
export interface MeasurementStyle {
1516
measurementFill?: string; // measurement point fill colour - only apply to SDS charts
@@ -56,6 +57,12 @@ export interface AxisThresholdLineStyle {
5657
}
5758

5859
export interface ReferenceStyle extends TextStyle {}
60+
61+
export interface ToggleButtonTooltipStyle extends TextStyle {
62+
backgroundColour?: string;
63+
borderRadius?: number;
64+
}
65+
5966
export interface TextStyle {
6067
name?: string;
6168
colour?: string;

0 commit comments

Comments
 (0)