diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index 57dd4002b..d9287283a 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -5,22 +5,22 @@ import { configureSvgSize } from '../../setupGraphViewbox.js'; import { getConfig } from '../../config.js'; import { cleanAndMerge, parseFontSize } from '../../utils.js'; import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; -import type { D3Sections, PieDB, Sections } from './pieTypes.js'; +import type { D3Section, PieDB, Sections } from './pieTypes.js'; import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; -const createPieArcs = (sections: Sections): d3.PieArcDatum[] => { +const createPieArcs = (sections: Sections): d3.PieArcDatum[] => { // Compute the position of each group on the pie: - const pieData: D3Sections[] = Object.entries(sections).map( - (element: [string, number]): D3Sections => { + const pieData: D3Section[] = Object.entries(sections).map( + (element: [string, number]): D3Section => { return { label: element[0], value: element[1], }; } ); - const pie: d3.Pie = d3pie().value( - (d3Section: D3Sections): number => d3Section.value + const pie: d3.Pie = d3pie().value( + (d3Section: D3Section): number => d3Section.value ); return pie(pieData); }; @@ -63,13 +63,11 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { const textPosition: number = pieConfig.textPosition; const radius: number = Math.min(width, height) / 2 - MARGIN; // Shape helper to build arcs: - const arcGenerator: d3.Arc> = arc< - d3.PieArcDatum - >() + const arcGenerator: d3.Arc> = arc>() .innerRadius(0) .outerRadius(radius); - const labelArcGenerator: d3.Arc> = arc< - d3.PieArcDatum + const labelArcGenerator: d3.Arc> = arc< + d3.PieArcDatum >() .innerRadius(radius * textPosition) .outerRadius(radius * textPosition); @@ -82,7 +80,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { .attr('class', 'pieOuterCircle'); const sections: Sections = db.getSections(); - const arcs: d3.PieArcDatum[] = createPieArcs(sections); + const arcs: d3.PieArcDatum[] = createPieArcs(sections); const myGeneratedColors = [ themeVariables.pie1, @@ -108,7 +106,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { .enter() .append('path') .attr('d', arcGenerator) - .attr('fill', (datum: d3.PieArcDatum) => { + .attr('fill', (datum: d3.PieArcDatum) => { return color(datum.data.label); }) .attr('class', 'pieCircle'); @@ -124,10 +122,10 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { .data(arcs) .enter() .append('text') - .text((datum: d3.PieArcDatum): string => { + .text((datum: d3.PieArcDatum): string => { return ((datum.data.value / sum) * 100).toFixed(0) + '%'; }) - .attr('transform', (datum: d3.PieArcDatum): string => { + .attr('transform', (datum: d3.PieArcDatum): string => { return 'translate(' + labelArcGenerator.centroid(datum) + ')'; }) .style('text-anchor', 'middle') @@ -167,7 +165,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { .append('text') .attr('x', LEGEND_RECT_SIZE + LEGEND_SPACING) .attr('y', LEGEND_RECT_SIZE - LEGEND_SPACING) - .text((datum: d3.PieArcDatum): string => { + .text((datum: d3.PieArcDatum): string => { const { label, value } = datum.data; if (db.getShowData()) { return `${label} [${value}]`; diff --git a/packages/mermaid/src/diagrams/pie/pieTypes.ts b/packages/mermaid/src/diagrams/pie/pieTypes.ts index f8ba8441a..dd7097e6f 100644 --- a/packages/mermaid/src/diagrams/pie/pieTypes.ts +++ b/packages/mermaid/src/diagrams/pie/pieTypes.ts @@ -36,7 +36,7 @@ export interface PieStyleOptions { export type Sections = Record; -export interface D3Sections { +export interface D3Section { label: string; value: number; }