selecting color based on background of bar/gap.

mckn · Aug 28, 2024 · 0baa8f7 · 0baa8f7
1 parent 229718e
commit 0baa8f7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
@@ -25,18 +25,20 @@ export function Bar(props: Props): ReactElement {
   );
 }
 
-const getStyles = (color: string) => (theme: GrafanaTheme2) => {
+const getStyles = (bgColor: string) => (theme: GrafanaTheme2) => {
+  const textColor = theme.colors.getContrastText(bgColor, 1.5);
+
   return {
     bar: css({
       flexGrow: 2,
-      backgroundColor: color,
+      backgroundColor: bgColor,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
     }),
     text: css({
       margin: 0,
-      color: theme.colors.text.maxContrast,
+      color: textColor,
       paddingLeft: '5px',
       paddingRight: '5px',
       textOverflow: 'ellipsis',

diff --git a/src/components/BarGap.tsx b/src/components/BarGap.tsx
@@ -55,7 +55,8 @@ const getStyles = (from: DisplayValue, to?: DisplayValue) => (theme: GrafanaThem
 
   const toPercent = to.percent ?? 0;
   const fromPercent = from.percent ?? 0;
-  const color = tinycolor(from.color).darken(15).toHexString();
+  const bgColor = tinycolor(from.color).darken(15).toHexString();
+  const textColor = theme.colors.getContrastText(bgColor);
   const topLeft = 100 * ((1 - fromPercent) / 2);
   const topRight = 100 - topLeft;
   const bottomLeft = 100 * ((1 - toPercent) / 2);
@@ -73,13 +74,13 @@ const getStyles = (from: DisplayValue, to?: DisplayValue) => (theme: GrafanaThem
     barGap: css({
       width: '100%',
       height: '100%',
-      backgroundColor: color,
+      backgroundColor: bgColor,
       clipPath: `polygon(${topLeft}% 0%, ${topRight}% 0%, ${bottomRight}% 100%, ${bottomLeft}% 100%)`,
     }),
     percentage: css({
       display: 'flex',
       position: 'absolute',
-      color: theme.colors.text.maxContrast,
+      color: textColor,
       width: `${toPercent * 100}%`,
       justifyContent: 'center',
       alignItems: 'center',