Merge pull request #285 from reaviz/extend-theme

Add ability to customise Label font size and offset
reaviz · Oct 16, 2024 · 63e11f3 · 63e11f3
2 parents dcdc83c + 5192c01
commit 63e11f3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/docs/Theme.mdx b/docs/Theme.mdx
@@ -66,6 +66,8 @@ export interface Theme {
     label?: {
       stroke?: ColorRepresentation;
       color: ColorRepresentation;
+      fontSize?: number;
+      offset?: [number, number, number];
     };
   };
 }

diff --git a/src/symbols/Cluster.tsx b/src/symbols/Cluster.tsx
@@ -92,14 +92,28 @@ export const Cluster: FC<ClusterProps> = ({
       : theme.cluster?.inactiveOpacity
     : theme.cluster?.opacity;
 
+  const labelPositionOffset = useMemo(() => {
+    const defaultPosition = [0, -offset, 2];
+    const themeOffset = theme.cluster?.label?.offset;
+    if (themeOffset) {
+      return [
+        defaultPosition[0] - themeOffset[0],
+        defaultPosition[1] - themeOffset[1],
+        defaultPosition[2] - themeOffset[2]
+      ];
+    }
+
+    return defaultPosition;
+  }, [offset, theme.cluster?.label?.offset]);
+
   const { circleOpacity, circlePosition, labelPosition } = useSpring({
     from: {
       circlePosition: [center.x, center.y, -1],
       circleOpacity: 0,
-      labelPosition: [0, -offset, 2]
+      labelPosition: labelPositionOffset
     },
     to: {
-      labelPosition: [0, -offset, 2],
+      labelPosition: labelPositionOffset,
       circlePosition: position ? [position.x, position.y, -1] : [0, 0, -1],
       circleOpacity: opacity
     },
@@ -200,7 +214,7 @@ export const Cluster: FC<ClusterProps> = ({
                 stroke={theme.cluster.label.stroke}
                 active={false}
                 color={theme.cluster?.label.color}
-                fontSize={12}
+                fontSize={theme.cluster?.label.fontSize ?? 12}
               />
             </a.group>
           )}

diff --git a/src/themes/theme.ts b/src/themes/theme.ts
@@ -56,6 +56,14 @@ export interface Theme {
     label?: {
       stroke?: ColorRepresentation;
       color: ColorRepresentation;
+      /**
+       * Size of the cluster label
+       */
+      fontSize?: number;
+      /**
+       * Offset of the cluster label relative to the default
+       */
+      offset?: [number, number, number];
     };
   };
 }