Component | Donut: Configurable central label offsets

packages/dev/src/examples/misc/donut/half-donut-with-labels/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { VisSingleContainer, VisDonut } from '@unovis/react'
+import { DONUT_HALF_ANGLE_RANGE_TOP } from '@unovis/ts'
+
+export const title = 'Half Donut: Labels'
+export const subTitle = 'Testing the label offsets'
+export const component = (): JSX.Element => {
+  const data = [3, 2, 5, 4, 0, 1]
+
+  return (
+    <VisSingleContainer style={{ height: '100%' }} >
+      <VisDonut
+        value={d => d}
+        data={data}
+        padAngle={0.02}
+        duration={0}
+        arcWidth={80}
+        angleRange={DONUT_HALF_ANGLE_RANGE_TOP}
+        centralLabel='Central Label'
+        centralSubLabel='Central Sub Label'
+        centralLabelsOffsetY={-24}
+      />
+    </VisSingleContainer>
+  )
+}

packages/ts/src/components/donut/config.ts

@@ -42,6 +42,12 @@ export interface DonutConfigInterface<Datum> extends ComponentConfigInterface {
   showBackground?: boolean;
   /** Background angle range. When undefined, the value will be taken from `angleRange`. Default: `undefined` */
   backgroundAngleRange?: [number, number];
+
+  /** Central labels horizontal offset in pixels. Default: `undefined` */
+  centralLabelsOffsetX?: number;
+
+  /** Central labels vertical offset in pixels. Default: `undefined` */
+  centralLabelsOffsetY?: number;
 }
 
 export const DonutDefaultConfig: DonutConfigInterface<unknown> = {
@@ -62,4 +68,6 @@ export const DonutDefaultConfig: DonutConfigInterface<unknown> = {
   emptySegmentAngle: 0.5 * Math.PI / 180,
   showBackground: true,
   backgroundAngleRange: undefined,
+  centralLabelsOffsetX: undefined,
+  centralLabelsOffsetY: undefined,
 }

packages/ts/src/components/donut/index.ts

@@ -110,6 +110,10 @@ export class Donut<Datum> extends ComponentCore<Datum[], DonutConfigInterface<Da
     const translateX = this._width / 2 + (isHalfDonutLeft ? outerRadius / 2 : isHalfDonutRight ? -outerRadius / 2 : 0)
     const translate = `translate(${translateX},${translateY})`
 
+    const labelTranslateX = (config.centralLabelsOffsetX || 0) + translateX
+    const labelTranslateY = (config.centralLabelsOffsetY || 0) + translateY
+    const labelTranslate = `translate(${labelTranslateX},${labelTranslateY})`
+
     this.arcGroup.attr('transform', translate)
 
     this.arcGen
@@ -162,12 +166,12 @@ export class Donut<Datum> extends ComponentCore<Datum[], DonutConfigInterface<Da
 
     // Label
     this.centralLabel
-      .attr('transform', translate)
+      .attr('transform', labelTranslate)
       .attr('dy', config.centralSubLabel ? '-0.55em' : null)
       .text(config.centralLabel ?? null)
 
     this.centralSubLabel
-      .attr('transform', translate)
+      .attr('transform', labelTranslate)
       .attr('dy', config.centralLabel ? '0.55em' : null)
       .text(config.centralSubLabel ?? null)