add sample with icon and text

reaviz · Nov 22, 2024 · c51075f · c51075f
1 parent 250f78d
commit c51075f
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/docs/demos/Cluster.story.tsx b/docs/demos/Cluster.story.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { Billboard, Svg, Text } from 'glodrei';
+import { Billboard, Html, Svg, Text } from 'glodrei';
 import { Color, DoubleSide } from 'three';
 import { a } from '@react-spring/three';
 import { GraphCanvas, Icon, Label, lightTheme, Sphere } from '../../src';
@@ -468,13 +468,7 @@ export const Custom = () => (
     draggable
     edges={clusterEdges}
     clusterAttribute="type"
-    onRenderCluster={({
-      label,
-      opacity,
-      outerRadius,
-      innerRadius,
-      theme
-    }) => (
+    onRenderCluster={({ label, opacity, outerRadius, innerRadius, theme }) => (
       <>
         <Ring
           outerRadius={outerRadius}
@@ -488,15 +482,25 @@ export const Custom = () => (
         />
         {label && (
           <a.group position={label.position as any}>
-            <Label
-              text={label.text}
-              opacity={label.opacity}
-              fontUrl={label.fontUrl}
-              stroke={theme?.cluster?.label?.stroke}
-              active={false}
-              color={new Color('#2A6475')}
-              fontSize={theme?.cluster?.label?.fontSize ?? 12}
-            />
+            <Html as="div" center distanceFactor={500}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center'
+                }}
+              >
+                <svg
+                  fill="#7CA0AB"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 30 30"
+                  width="50px"
+                  height="50px"
+                >
+                  <path d="M28,6.937c-0.957,0.425-1.985,0.711-3.064,0.84c1.102-0.66,1.947-1.705,2.345-2.951c-1.03,0.611-2.172,1.055-3.388,1.295 c-0.973-1.037-2.359-1.685-3.893-1.685c-2.946,0-5.334,2.389-5.334,5.334c0,0.418,0.048,0.826,0.138,1.215 c-4.433-0.222-8.363-2.346-10.995-5.574C3.351,6.199,3.088,7.115,3.088,8.094c0,1.85,0.941,3.483,2.372,4.439 c-0.874-0.028-1.697-0.268-2.416-0.667c0,0.023,0,0.044,0,0.067c0,2.585,1.838,4.741,4.279,5.23 c-0.447,0.122-0.919,0.187-1.406,0.187c-0.343,0-0.678-0.034-1.003-0.095c0.679,2.119,2.649,3.662,4.983,3.705 c-1.825,1.431-4.125,2.284-6.625,2.284c-0.43,0-0.855-0.025-1.273-0.075c2.361,1.513,5.164,2.396,8.177,2.396 c9.812,0,15.176-8.128,15.176-15.177c0-0.231-0.005-0.461-0.015-0.69C26.38,8.945,27.285,8.006,28,6.937z" />
+                </svg>
+                <span style={{ fontSize: 24 }}>{label.text}</span>
+              </div>
+            </Html>
           </a.group>
         )}
       </>