Component | Nested Donut: Adding showSegmentLabels property

#0
f5 · Feb 27, 2024 · a70f874 · a70f874
1 parent 40ec346
commit a70f874
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/packages/angular/src/components/nested-donut/nested-donut.component.ts b/packages/angular/src/components/nested-donut/nested-donut.component.ts
@@ -132,6 +132,10 @@ export class VisNestedDonutComponent<Datum> implements NestedDonutConfigInterfac
   /** When true, the component will display empty segments (the ones that have `0` values) as tiny slices.
    * Default: `false` */
   @Input() showEmptySegments?: boolean
+
+  /** Show labels for individual segments. Default: `true` */
+  @Input() showSegmentLabels?: boolean
+
   @Input() data: Datum[]
 
   component: NestedDonut<Datum> | undefined

diff --git a/packages/ts/src/components/nested-donut/config.ts b/packages/ts/src/components/nested-donut/config.ts
@@ -57,6 +57,7 @@ export interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterf
    * Default: `false`
   */
   showEmptySegments?: boolean;
+  showSegmentLabels?: boolean;
 }
 
 export const NestedDonutDefaultConfig: NestedDonutConfigInterface<unknown> = {
@@ -77,6 +78,7 @@ export const NestedDonutDefaultConfig: NestedDonutConfigInterface<unknown> = {
   segmentLabelColor: undefined,
   showBackground: false,
   showEmptySegments: false,
+  showSegmentLabels: true,
   sort: undefined,
   value: undefined,
 }
diff --git a/packages/ts/src/components/nested-donut/index.ts b/packages/ts/src/components/nested-donut/index.ts
@@ -68,6 +68,10 @@ NestedDonutConfigInterface<Datum>
     const { config } = this
     const duration = isNumber(customDuration) ? customDuration : config.duration
 
+    if (config.layers === undefined || config.layers.length === 0) {
+      console.warn('Unovis | Nested Donut: No layers defined.')
+      return
+    }
     const layers = this._getLayerSettings()
     const data = this._getHierarchyData(layers)
 
@@ -139,19 +143,21 @@ NestedDonutConfigInterface<Datum>
       .call(removeArc, duration)
 
     // Segment labels
-    const labels = this.arcGroup
-      .selectAll<SVGTextElement, NestedDonutSegment<Datum>>(`.${s.segmentLabel}`)
-      .data(data, d => d._id)
+    if (config.showSegmentLabels) {
+      const labels = this.arcGroup
+        .selectAll<SVGTextElement, NestedDonutSegment<Datum>>(`.${s.segmentLabel}`)
+        .data(data, d => d._id)
 
-    const labelsEnter = segmentsEnter.append('text')
-      .attr('class', s.segmentLabel)
-      .call(createLabel, this.arcGen)
+      const labelsEnter = segmentsEnter.append('text')
+        .attr('class', s.segmentLabel)
+        .call(createLabel, this.arcGen)
 
-    labels.merge(labelsEnter)
-      .call(updateLabel, config, this.arcGen, duration)
+      labels.merge(labelsEnter)
+        .call(updateLabel, config, this.arcGen, duration)
 
-    labels.exit<NestedDonutSegment<Datum>>()
-      .call(removeLabel, duration)
+      labels.exit<NestedDonutSegment<Datum>>()
+        .call(removeLabel, duration)
+    }
 
     // Chart labels
     this.centralLabel