IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Heatmap: do not dim the values in the color scale legend (#50976)

Browse Source
This commit is contained in:
Ryan McKinley 2022-06-17 07:24:53 -07:00 committed by GitHub
parent 644503f5e6
commit c6f7e53e38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/core/components/ColorScale/ColorScale.tsx
View File

@ -20,7 +20,6 @@ type HoverState = {
value: number;
};
const LEFT_OFFSET = 2;
const GRADIENT_STOPS = 10;
export const ColorScale = ({ colorPalette, min, max, display, hoverValue, useStopsPercentage }: Props) => {
@ -64,15 +63,15 @@ export const ColorScale = ({ colorPalette, min, max, display, hoverValue, useSto
</div>
{display && (
<div className={styles.followerContainer}>
{percent != null && (scaleHover.isShown || hoverValue !== undefined) && (
<span className={styles.hoverValue} style={{ left: `${percent - LEFT_OFFSET}%` }}>
{display(hoverValue || scaleHover.value)}
</span>
)}
<div className={styles.legendValues} style={{ opacity: scaleHover.isShown || hoverValue ? 0.3 : 1 }}>
<div className={styles.legendValues}>
<span>{display(min)}</span>
<span>{display(max)}</span>
</div>
{percent != null && (scaleHover.isShown || hoverValue !== undefined) && (
<span className={styles.hoverValue} style={{ left: `${percent}%` }}>
{display(hoverValue ?? scaleHover.value)}
</span>
)}
</div>
)}
</div>
@ -137,17 +136,25 @@ const getStyles = (theme: GrafanaTheme2, colors: string[]) => ({
scaleGradient: css`
background: linear-gradient(90deg, ${colors.join()});
height: 10px;
pointer-events: none;
`,
legendValues: css`
display: flex;
justify-content: space-between;
pointer-events: none;
`,
hoverValue: css`
position: absolute;
padding-top: 4px;
margin-top: -14px;
padding: 3px 15px;
background: ${theme.colors.background.primary};
transform: translateX(-50%);
`,
followerContainer: css`
position: relative;
pointer-events: none;
white-space: nowrap;
height: 10px;
`,
follower: css`
position: absolute;
@ -155,7 +162,6 @@ const getStyles = (theme: GrafanaTheme2, colors: string[]) => ({
width: 14px;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
border: 2px solid ${theme.colors.text.primary};
margin-top: 5px;
`,