GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-21 06:53:17 +08:00
Code Issues Projects Releases Wiki Activity

chore!: rename D3Sections type into D3Section

Browse Source
This commit is contained in:
Reda Al Sulais 2023-08-20 22:36:11 +03:00
parent 1c8e13b9c1
commit 341db13279
2 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/mermaid/src/diagrams/pie/pieRenderer.ts
View File

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

2
packages/mermaid/src/diagrams/pie/pieTypes.ts
View File

@ -36,7 +36,7 @@ export interface PieStyleOptions {
export type Sections = Record<string, number>; export type Sections = Record<string, number>;
export interface D3Sections { export interface D3Section {
label: string; label: string;
value: number; value: number;
} }