From 8794fa0b38a8af6a6dece3120be26520bdeb824d Mon Sep 17 00:00:00 2001 From: Yokozuna59 Date: Sat, 17 Jun 2023 03:28:08 +0300 Subject: [PATCH] clean up pieRenderer.ts --- .../mermaid/src/diagrams/pie/pieRenderer.ts | 78 +++++++++---------- 1 file changed, 37 insertions(+), 41 deletions(-) diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index b7ef819e4..80969016c 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -2,10 +2,10 @@ import { select, scaleOrdinal, pie as d3pie, arc } from 'd3'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import * as configApi from '../../config.js'; +import { getConfig } from '../../config.js'; import { parseFontSize } from '../../utils.js'; - -let conf = configApi.getConfig(); +import { DrawDefinition } from '../../diagram-api/types.js'; +import { PieDb, Sections } from './pieTypes.js'; /** * Draws a Pie Chart with the data given in text. @@ -13,15 +13,15 @@ let conf = configApi.getConfig(); * @param text - pie chart code * @param id - diagram id */ -let width; -const height = 450; -export const draw = (txt, id, _version, diagObj) => { +export const draw: DrawDefinition = (txt, id, _version, diagramObject) => { try { - conf = configApi.getConfig(); - log.debug('Rendering info diagram\n' + txt); + log.debug('rendering pie chart\n' + txt); - const securityLevel = configApi.getConfig().securityLevel; - // Handle root and Document for when rendering in sandbox mode + let width: number; + const height = 450; + const config = getConfig(); + const { securityLevel } = config; + // handle root and document for when rendering in sandbox mode let sandboxElement; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); @@ -31,32 +31,29 @@ export const draw = (txt, id, _version, diagObj) => { ? select(sandboxElement.nodes()[0].contentDocument.body) : select('body'); const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; - - // Parse the Pie Chart definition - diagObj.db.clear(); - diagObj.parser.parse(txt); - log.debug('Parsed info diagram'); const elem = doc.getElementById(id); width = elem.parentElement.offsetWidth; + // Parse the Pie Chart definition + const db = diagramObject.db as PieDb; + db.clear(); + + log.debug('parsing pie chart'); + diagramObject.parser.parse(txt); + if (width === undefined) { width = 1200; } - - if (conf.useWidth !== undefined) { - width = conf.useWidth; - } - if (conf.pie.useWidth !== undefined) { - width = conf.pie.useWidth; + if (config.pie?.useWidth !== undefined) { + width = config.pie.useWidth; } const diagram = root.select('#' + id); - configureSvgSize(diagram, height, width, conf.pie.useMaxWidth); + configureSvgSize(diagram, height, width, config.pie?.useMaxWidth ?? true); // Set viewBox elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height); - // Fetch the default direction, use TD if none was found const margin = 40; const legendRectSize = 18; const legendSpacing = 4; @@ -67,13 +64,13 @@ export const draw = (txt, id, _version, diagObj) => { .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); - const data = diagObj.db.getSections(); + const sections: Sections = db.getSections(); let sum = 0; - Object.keys(data).forEach(function (key) { - sum += data[key]; + Object.keys(sections).forEach((key: string): void => { + sum += sections[key]; }); - const themeVariables = conf.themeVariables; + const themeVariables = config.themeVariables; const myGeneratedColors = [ themeVariables.pie1, themeVariables.pie2, @@ -89,7 +86,7 @@ export const draw = (txt, id, _version, diagObj) => { themeVariables.pie12, ]; - const textPosition = conf.pie?.textPosition ?? 0.75; + const textPosition = config.pie?.textPosition ?? 0.75; let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth); outerStrokeWidth ??= 2; @@ -97,7 +94,7 @@ export const draw = (txt, id, _version, diagObj) => { const color = scaleOrdinal().range(myGeneratedColors); // Compute the position of each group on the pie: - const pieData = Object.entries(data).map(function (el, idx) { + const pieData = Object.entries(sections).map(function (el, idx) { return { order: idx, name: el[0], @@ -105,10 +102,10 @@ export const draw = (txt, id, _version, diagObj) => { }; }); const pie = d3pie() - .value(function (d) { + .value((d): number => { return d.value; }) - .sort(function (a, b) { + .sort((a, b): number => { // Sort slices in clockwise direction return a.order - b.order; }); @@ -134,7 +131,7 @@ export const draw = (txt, id, _version, diagObj) => { .enter() .append('path') .attr('d', arcGenerator) - .attr('fill', function (d) { + .attr('fill', (d) => { return color(d.data.name); }) .attr('class', 'pieCircle'); @@ -146,10 +143,10 @@ export const draw = (txt, id, _version, diagObj) => { .data(dataReady) .enter() .append('text') - .text(function (d) { + .text((d): string => { return ((d.data.value / sum) * 100).toFixed(0) + '%'; }) - .attr('transform', function (d) { + .attr('transform', (d): string => { return 'translate(' + labelArcGenerator.centroid(d) + ')'; }) .style('text-anchor', 'middle') @@ -157,7 +154,7 @@ export const draw = (txt, id, _version, diagObj) => { svg .append('text') - .text(diagObj.db.getDiagramTitle()) + .text(db.getDiagramTitle()) .attr('x', 0) .attr('y', -(height - 50) / 2) .attr('class', 'pieTitleText'); @@ -169,11 +166,11 @@ export const draw = (txt, id, _version, diagObj) => { .enter() .append('g') .attr('class', 'legend') - .attr('transform', function (d, i) { + .attr('transform', (d, index: number): string => { const height = legendRectSize + legendSpacing; const offset = (height * color.domain().length) / 2; const horizontal = 12 * legendRectSize; - const vertical = i * height - offset; + const vertical = index * height - offset; return 'translate(' + horizontal + ',' + vertical + ')'; }); @@ -189,16 +186,15 @@ export const draw = (txt, id, _version, diagObj) => { .append('text') .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize - legendSpacing) - .text(function (d) { - if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) { + .text((d): string => { + if (db.getShowData()) { return d.data.name + ' [' + d.data.value + ']'; } else { return d.data.name; } }); } catch (e) { - log.error('Error while rendering info diagram'); - log.error(e); + log.error('error while rendering pie chart\n', e); } };