refactor pieRenderer

packages/mermaid/src/diagrams/pie/pieRenderer.ts

@@ -1,65 +1,89 @@
-// @ts-nocheck - placeholder to be handled
-import d3, { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
+import d3, { scaleOrdinal, pie as d3pie, arc } from 'd3';
+
 import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { getConfig } from '../../config.js';
 import { parseFontSize } from '../../utils.js';
-import type { DrawDefinition, HTML } from '../../diagram-api/types.js';
+import type { DrawDefinition, Group, HTML, SVG } from '../../diagram-api/types.js';
 import type { D3Sections, PieDB, PieDiagramConfig, Sections } from './pieTypes.js';
-import { MermaidConfig } from '../../config.type.js';
+import type { MermaidConfig } from '../../config.type.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+
+const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
+  // Compute the position of each group on the pie:
+  const pieData: D3Sections[] = Object.entries(sections).map(
+    (element: [string, number]): D3Sections => {
+      return {
+        label: element[0],
+        value: element[1],
+      };
+    }
+  );
+  const pie: d3.Pie<unknown, D3Sections> = d3pie<D3Sections>().value(
+    (d3Section: D3Sections): number => d3Section.value
+  );
+  return pie(pieData);
+};
 
 /**
  * Draws a Pie Chart with the data given in text.
  *
  * @param text - pie chart code
  * @param id - diagram id
+ * @param _version - MermaidJS version from package.json.
+ * @param diagObj - A standard diagram containing the DB and the text and type etc of the diagram.
  */
-export const draw: DrawDefinition = (txt, id, _version, diagramObject) => {
-  try {
-    log.debug('rendering pie chart\n' + txt);
-    const db: PieDB = diagramObject.db as PieDB;
+export const draw: DrawDefinition = (text, id, _version, diagObj) => {
+  log.debug('rendering pie chart\n' + text);
+
+  const db: PieDB = diagObj.db as PieDB;
   const globalConfig: MermaidConfig = getConfig();
-    const config: Required<PieDiagramConfig> = db.getConfig();
+  const pieConfig: Required<PieDiagramConfig> = db.getConfig();
 
   const height = 450;
-    const { securityLevel } = globalConfig;
-    // handle root and document for when rendering in sandbox mode
-    let sandboxElement: HTML | undefined;
-    if (securityLevel === 'sandbox') {
-      sandboxElement = select('#i' + id);
-    }
-    const root =
-      securityLevel === 'sandbox'
-        ? select(sandboxElement?.node()?.contentDocument?.body as HTMLIFrameElement)
-        : select('body');
-    const doc = securityLevel === 'sandbox' ? sandboxElement?.nodes()[0].contentDocument : document;
-    const elem = doc?.getElementById(id);
-    const width: number = elem?.parentElement?.offsetWidth ?? config.useWidth;
-
-    const diagram = root.select('#' + id);
-    // TODO: use global `useMaxWidth` until making setConfig update pie setConfig
-    configureSvgSize(diagram, height, width, globalConfig?.pie?.useMaxWidth ?? true);
-
+  // TODO: remove document width
+  const width: number =
+    document.getElementById(id)?.parentElement?.offsetWidth ?? pieConfig.useWidth;
+  const svg: SVG = selectSvgElement(id);
   // Set viewBox
-    elem?.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+  svg.attr('viewBox', `0 0 ${width} ${height}`);
+  configureSvgSize(svg, height, width, globalConfig?.pie?.useMaxWidth ?? true);
 
-    const margin = 40;
-    const legendRectSize = 18;
-    const legendSpacing = 4;
+  const MARGIN = 40;
+  const LEGEND_RECT_SIZE = 18;
+  const LEGEND_SPACING = 4;
 
-    const radius: number = Math.min(width, height) / 2 - margin;
-
-    const svg = diagram
-      .append('g')
-      .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
-
-    const sections: Sections = db.getSections();
-    let sum = 1;
-    Object.keys(sections).forEach((key: string): void => {
-      sum += sections[key];
-    });
+  const group: Group = svg.append('g');
+  group.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
 
   const { themeVariables } = globalConfig;
+  const textPosition: number = pieConfig.textPosition;
+  let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
+  outerStrokeWidth ??= 2;
+
+  const radius: number = Math.min(width, height) / 2 - MARGIN;
+  // Shape helper to build arcs:
+  const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
+    d3.PieArcDatum<D3Sections>
+  >()
+    .innerRadius(0)
+    .outerRadius(radius);
+  const labelArcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
+    d3.PieArcDatum<D3Sections>
+  >()
+    .innerRadius(radius * textPosition)
+    .outerRadius(radius * textPosition);
+
+  group
+    .append('circle')
+    .attr('cx', 0)
+    .attr('cy', 0)
+    .attr('r', radius + outerStrokeWidth / 2)
+    .attr('class', 'pieOuterCircle');
+
+  const sections: Sections = db.getSections();
+  const arcs: d3.PieArcDatum<D3Sections>[] = createPieArcs(sections);
+
   const myGeneratedColors = [
     themeVariables.pie1,
     themeVariables.pie2,
@@ -74,75 +98,42 @@ export const draw: DrawDefinition = (txt, id, _version, diagramObject) => {
     themeVariables.pie11,
     themeVariables.pie12,
   ];
-
-    const textPosition: number = config.textPosition;
-    let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
-    outerStrokeWidth ??= 2;
-
   // Set the color scale
-    const color: d3.ScaleOrdinal<string, unknown, never> = scaleOrdinal().range(myGeneratedColors);
-
-    // Compute the position of each group on the pie:
-    const pieData: D3Sections[] = Object.entries(sections)
-      .map((element: [string, number], index: number): D3Sections => {
-        return {
-          order: index,
-          label: element[0],
-          value: element[1],
-        };
-      })
-      .sort((a: D3Sections, b: D3Sections): number => {
-        // Sort slices in clockwise direction
-        return a.order - b.order;
-      });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const pie = d3pie().value((d: any): number => d.value);
-    // @ts-ignore - figure out how to assign D3Section[] to PieArcDatum
-    const dataReady = pie(pieData);
-
-    // Shape helper to build arcs:
-    const arcGenerator = arc().innerRadius(0).outerRadius(radius);
-    const labelArcGenerator = arc()
-      .innerRadius(radius * textPosition)
-      .outerRadius(radius * textPosition);
-
-    svg
-      .append('circle')
-      .attr('cx', 0)
-      .attr('cy', 0)
-      .attr('r', radius + outerStrokeWidth / 2)
-      .attr('class', 'pieOuterCircle');
+  const color: d3.ScaleOrdinal<string, 12, never> = scaleOrdinal(myGeneratedColors);
 
   // Build the pie chart: each part of the pie is a path that we build using the arc function.
-    svg
+  group
     .selectAll('mySlices')
-      .data(dataReady)
+    .data(arcs)
     .enter()
     .append('path')
     .attr('d', arcGenerator)
-      .attr('fill', (datum: { data: D3Sections }) => {
+    .attr('fill', (datum) => {
       return color(datum.data.label);
     })
     .attr('class', 'pieCircle');
 
+  let sum = 0;
+  Object.keys(sections).forEach((key: string): void => {
+    sum += sections[key];
+  });
   // Now add the percentage.
   // Use the centroid method to get the best coordinates.
-    svg
+  group
     .selectAll('mySlices')
-      .data(dataReady)
+    .data(arcs)
     .enter()
     .append('text')
     .text((datum: { data: D3Sections }): string => {
       return ((datum.data.value / sum) * 100).toFixed(0) + '%';
     })
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .attr('transform', (datum: any): string => {
+    .attr('transform', (datum: d3.PieArcDatum<D3Sections>): string => {
       return 'translate(' + labelArcGenerator.centroid(datum) + ')';
     })
     .style('text-anchor', 'middle')
     .attr('class', 'slice');
 
-    svg
+  group
     .append('text')
     .text(db.getDiagramTitle())
     .attr('x', 0)
@@ -150,42 +141,40 @@ export const draw: DrawDefinition = (txt, id, _version, diagramObject) => {
     .attr('class', 'pieTitleText');
 
   // Add the legends/annotations for each section
-    const legend = svg
+  const legend = group
     .selectAll('.legend')
     .data(color.domain())
     .enter()
     .append('g')
     .attr('class', 'legend')
-      .attr('transform', (_datum: D3Sections, index: number): string => {
-        const height = legendRectSize + legendSpacing;
+    .attr('transform', (_datum, index: number): string => {
+      const height = LEGEND_RECT_SIZE + LEGEND_SPACING;
       const offset = (height * color.domain().length) / 2;
-        const horizontal = 12 * legendRectSize;
+      const horizontal = 12 * LEGEND_RECT_SIZE;
       const vertical = index * height - offset;
       return 'translate(' + horizontal + ',' + vertical + ')';
     });
 
   legend
     .append('rect')
-      .attr('width', legendRectSize)
-      .attr('height', legendRectSize)
+    .attr('width', LEGEND_RECT_SIZE)
+    .attr('height', LEGEND_RECT_SIZE)
     .style('fill', color)
     .style('stroke', color);
 
   legend
-      .data(dataReady)
+    .data(arcs)
     .append('text')
-      .attr('x', legendRectSize + legendSpacing)
-      .attr('y', legendRectSize - legendSpacing)
-      .text((datum: { data: D3Sections }): string => {
+    .attr('x', LEGEND_RECT_SIZE + LEGEND_SPACING)
+    .attr('y', LEGEND_RECT_SIZE - LEGEND_SPACING)
+    .text((datum: d3.PieArcDatum<D3Sections>): string => {
+      const { label, value } = datum.data;
       if (db.getShowData()) {
-          return datum.data.label + ' [' + datum.data.value + ']';
+        return `${label} [${value}]`;
       } else {
-          return datum.data.label;
+        return label;
       }
     });
-  } catch (e) {
-    log.error('error while rendering pie chart\n', e);
-  }
 };
 
 export const renderer = { draw };

packages/mermaid/src/diagrams/pie/pieTypes.ts

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