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

return pieRender back to original and update it partially

Browse Source
This commit is contained in:
Yokozuna59 2023-06-16 23:58:56 +03:00
parent c17b723295
commit bd6795032f
1 changed files with 56 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,10 @@
import { select, scaleOrdinal, pie as d3pie, arc } from 'd3'; import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
import { log } from '../../logger.js'; import { log } from '../../logger.js';
import { configureSvgSize } from '../../setupGraphViewbox.js'; import { configureSvgSize } from '../../setupGraphViewbox.js';
import { getConfig } from '../../config.js'; import * as configApi from '../../config.js';
import { parseFontSize } from '../../utils.js'; import { parseFontSize } from '../../utils.js';
import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
import type { PieDb, Sections } from './pieTypes.js'; let conf = configApi.getConfig();
/** /**
* Draws a Pie Chart with the data given in text. * Draws a Pie Chart with the data given in text.
@ -13,47 +13,50 @@ import type { PieDb, Sections } from './pieTypes.js';
* @param text - pie chart code * @param text - pie chart code
* @param id - diagram id * @param id - diagram id
*/ */
const draw: DrawDefinition = (txt, id, _version, diagObj) => { let width;
const height = 450;
export const draw = (txt, id, _version, diagObj) => {
try { try {
log.debug('rendering pie chart\n' + txt); conf = configApi.getConfig();
log.debug('Rendering info diagram\n' + txt);
const config = getConfig(); const securityLevel = configApi.getConfig().securityLevel;
let width: number | undefined = config.pie?.useWidth; // Handle root and Document for when rendering in sandbox mode
const height = 450; let sandboxElement;
const { securityLevel } = config;
// handle root and document for when rendering in sandbox mode
let sandboxElement: HTML | undefined;
let document: Document | null | undefined;
if (securityLevel === 'sandbox') { if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id); sandboxElement = select('#i' + id);
document = sandboxElement.nodes()[0].contentDocument;
width = document?.parentElement?.offsetWidth;
} }
const root =
// @ts-ignore - figure out how to assign HTML to document type securityLevel === 'sandbox'
const root: HTML = ? select(sandboxElement.nodes()[0].contentDocument.body)
sandboxElement !== undefined && document !== undefined && document !== null
? select(document)
: select('body'); : select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// parse the Pie Chart definition // Parse the Pie Chart definition
const db = diagObj.db as PieDb; diagObj.db.clear();
db.clear();
log.debug('parsing pie chart');
diagObj.parser.parse(txt); diagObj.parser.parse(txt);
log.debug('Parsed info diagram');
const elem = doc.getElementById(id);
width = elem.parentElement.offsetWidth;
if (width === undefined) { if (width === undefined) {
width = 1200; width = 1200;
} }
const diagram: SVG = root.select('#' + id); if (conf.useWidth !== undefined) {
configureSvgSize(diagram, height, width, config.pie?.useMaxWidth || true); width = conf.useWidth;
}
if (conf.pie.useWidth !== undefined) {
width = conf.pie.useWidth;
}
// set viewBox const diagram = root.select('#' + id);
document?.parentElement?.setAttribute('viewBox', '0 0 ' + width + ' ' + height); configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
// fetch the default direction, use TD if none was found // Set viewBox
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
// Fetch the default direction, use TD if none was found
const margin = 40; const margin = 40;
const legendRectSize = 18; const legendRectSize = 18;
const legendSpacing = 4; const legendSpacing = 4;
@ -64,7 +67,13 @@ const draw: DrawDefinition = (txt, id, _version, diagObj) => {
.append('g') .append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
const themeVariables = config.themeVariables; const data = diagObj.db.getSections();
let sum = 0;
Object.keys(data).forEach(function (key) {
sum += data[key];
});
const themeVariables = conf.themeVariables;
const myGeneratedColors = [ const myGeneratedColors = [
themeVariables.pie1, themeVariables.pie1,
themeVariables.pie2, themeVariables.pie2,
@ -80,33 +89,26 @@ const draw: DrawDefinition = (txt, id, _version, diagObj) => {
themeVariables.pie12, themeVariables.pie12,
]; ];
const textPosition = config.pie?.textPosition ?? 0.75; const textPosition = conf.pie?.textPosition ?? 0.75;
let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth); let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
outerStrokeWidth ??= 2; outerStrokeWidth ??= 2;
// Set the color scale // Set the color scale
const color = scaleOrdinal().range(myGeneratedColors); const color = scaleOrdinal().range(myGeneratedColors);
const sections: Sections = db.getSections(); // Compute the position of each group on the pie:
let sum = 0; const pieData = Object.entries(data).map(function (el, idx) {
Object.keys(sections).forEach((key: string) => {
sum += sections[key];
});
// compute the position of each group on the pie:
const pieData = Object.entries(sections).map((el: [string, number], index: number) => {
return { return {
order: index, order: idx,
name: el[0], name: el[0],
value: el[1], value: el[1],
}; };
}); });
const pie = d3pie() const pie = d3pie()
// @ts-ignore: TODO Fix ts errors .value(function (d) {
.value((d) => { return d.value;
return d;
}) })
.sort((a, b) => { .sort(function (a, b) {
// Sort slices in clockwise direction // Sort slices in clockwise direction
return a.order - b.order; return a.order - b.order;
}); });
@ -132,8 +134,7 @@ const draw: DrawDefinition = (txt, id, _version, diagObj) => {
.enter() .enter()
.append('path') .append('path')
.attr('d', arcGenerator) .attr('d', arcGenerator)
// @ts-ignore: TODO Fix ts errors .attr('fill', function (d) {
.attr('fill', (d) => {
return color(d.data.name); return color(d.data.name);
}) })
.attr('class', 'pieCircle'); .attr('class', 'pieCircle');
@ -145,12 +146,10 @@ const draw: DrawDefinition = (txt, id, _version, diagObj) => {
.data(dataReady) .data(dataReady)
.enter() .enter()
.append('text') .append('text')
// @ts-ignore: TODO Fix ts errors .text(function (d) {
.text((d) => {
return ((d.data.value / sum) * 100).toFixed(0) + '%'; return ((d.data.value / sum) * 100).toFixed(0) + '%';
}) })
// @ts-ignore: TODO Fix ts errors .attr('transform', function (d) {
.attr('transform', (d) => {
return 'translate(' + labelArcGenerator.centroid(d) + ')'; return 'translate(' + labelArcGenerator.centroid(d) + ')';
}) })
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
@ -158,7 +157,7 @@ const draw: DrawDefinition = (txt, id, _version, diagObj) => {
svg svg
.append('text') .append('text')
.text(db.getDiagramTitle()) .text(diagObj.db.getDiagramTitle())
.attr('x', 0) .attr('x', 0)
.attr('y', -(height - 50) / 2) .attr('y', -(height - 50) / 2)
.attr('class', 'pieTitleText'); .attr('class', 'pieTitleText');
@ -170,12 +169,11 @@ const draw: DrawDefinition = (txt, id, _version, diagObj) => {
.enter() .enter()
.append('g') .append('g')
.attr('class', 'legend') .attr('class', 'legend')
// @ts-ignore: TODO Fix ts errors .attr('transform', function (d, i) {
.attr('transform', (d, index: number) => {
const height = legendRectSize + legendSpacing; const height = legendRectSize + legendSpacing;
const offset = (height * color.domain().length) / 2; const offset = (height * color.domain().length) / 2;
const horizontal = 12 * legendRectSize; const horizontal = 12 * legendRectSize;
const vertical = index * height - offset; const vertical = i * height - offset;
return 'translate(' + horizontal + ',' + vertical + ')'; return 'translate(' + horizontal + ',' + vertical + ')';
}); });
@ -191,16 +189,16 @@ const draw: DrawDefinition = (txt, id, _version, diagObj) => {
.append('text') .append('text')
.attr('x', legendRectSize + legendSpacing) .attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing) .attr('y', legendRectSize - legendSpacing)
// @ts-ignore: TODO Fix ts errors .text(function (d) {
.text((d) => { if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) {
if (db.getShowData()) {
return d.data.name + ' [' + d.data.value + ']'; return d.data.name + ' [' + d.data.value + ']';
} else { } else {
return d.data.name; return d.data.name;
} }
}); });
} catch (e) { } catch (e) {
log.error('error while rendering pie chart', e); log.error('Error while rendering info diagram');
log.error(e);
} }
}; };