diff --git a/packages/angular/src/components/nested-donut/nested-donut.component.ts b/packages/angular/src/components/nested-donut/nested-donut.component.ts index 9ebe5f1a1..4bdd2fbda 100644 --- 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 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 | undefined diff --git a/packages/ts/src/components/nested-donut/config.ts b/packages/ts/src/components/nested-donut/config.ts index 3149da349..85edcfe05 100644 --- 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 extends ComponentConfigInterf * Default: `false` */ showEmptySegments?: boolean; + showSegmentLabels?: boolean; } export const NestedDonutDefaultConfig: NestedDonutConfigInterface = { @@ -77,6 +78,7 @@ export const NestedDonutDefaultConfig: NestedDonutConfigInterface = { 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 index 58b938869..43589df08 100644 --- a/packages/ts/src/components/nested-donut/index.ts +++ b/packages/ts/src/components/nested-donut/index.ts @@ -68,6 +68,10 @@ NestedDonutConfigInterface 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 .call(removeArc, duration) // Segment labels - const labels = this.arcGroup - .selectAll>(`.${s.segmentLabel}`) - .data(data, d => d._id) + if (config.showSegmentLabels) { + const labels = this.arcGroup + .selectAll>(`.${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>() - .call(removeLabel, duration) + labels.exit>() + .call(removeLabel, duration) + } // Chart labels this.centralLabel