marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-17 19:24:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

#931 Aligning code standard

Browse Source
This commit is contained in:
knsv
2019-09-12 12:55:20 -07:00
parent ad5669b523
commit e14922f15c
3 changed files with 115 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/diagrams/pie/parser/pie.spec.js
View File

@@ -1,37 +1,36 @@
/* eslint-env jasmine */ /* eslint-env jasmine */
import pieDb from '../pieDb' import pieDb from '../pieDb';
import pie from './pie' import pie from './pie';
import { setConfig } from '../../../config' import { setConfig } from '../../../config';
setConfig({ setConfig({
securityLevel: 'strict' securityLevel: 'strict'
}) });
describe('when parsing pie', function () { describe('when parsing pie', function() {
beforeEach(function () { beforeEach(function() {
pie.parser.yy = pieDb pie.parser.yy = pieDb;
pie.parser.yy.clear() pie.parser.yy.clear();
}) });
it('should handle simple pie', function () { it('should handle simple pie', function() {
const res = pie.parser.parse('pie \n"ash" : 60\n"bat" : 40\n') const res = pie.parser.parse('pie \n"ash" : 60\n"bat" : 40\n');
const sections = pieDb.getSections() const sections = pieDb.getSections();
console.log('sections: ', sections) console.log('sections: ', sections);
const section1 = sections['ash'] const section1 = sections['ash'];
expect(section1).toBe(60) expect(section1).toBe(60);
}) });
it('should handle simple pie with positive decimal', function () { it('should handle simple pie with positive decimal', function() {
const res = pie.parser.parse('pie \n"ash" : 60.67\n"bat" : 40\n') const res = pie.parser.parse('pie \n"ash" : 60.67\n"bat" : 40\n');
const sections = pieDb.getSections() const sections = pieDb.getSections();
console.log('sections: ', sections) console.log('sections: ', sections);
const section1 = sections['ash'] const section1 = sections['ash'];
expect(section1).toBe(60.67) expect(section1).toBe(60.67);
}) });
it('should handle simple pie with negative decimal', function () { it('should handle simple pie with negative decimal', function() {
expect(()=>{ expect(() => {
pie.parser.parse('pie \n"ash" : 60.67\n"bat" : 40..12\n'); pie.parser.parse('pie \n"ash" : 60.67\n"bat" : 40..12\n');
}).toThrowError(); }).toThrowError();
}) });
}) });

48
src/diagrams/pie/pieDb.js
View File

@@ -1,40 +1,40 @@
/** /**
* *
*/ */
import { logger } from '../../logger' import { logger } from '../../logger';
let sections = {} let sections = {};
let title = '' let title = '';
const addSection = function (id, value) { const addSection = function(id, value) {
if (typeof sections[id] === 'undefined') { if (typeof sections[id] === 'undefined') {
sections[id] = value sections[id] = value;
logger.debug('Added new section :', id) logger.debug('Added new section :', id);
// console.log('Added new section:', id, value) // console.log('Added new section:', id, value)
} }
} };
const getSections = () => sections const getSections = () => sections;
const setTitle = function (txt) { const setTitle = function(txt) {
title = txt title = txt;
} };
const getTitle = function () { const getTitle = function() {
return title return title;
} };
const cleanupValue = function (value) { const cleanupValue = function(value) {
if (value.substring(0, 1) === ':') { if (value.substring(0, 1) === ':') {
value = value.substring(1).trim() value = value.substring(1).trim();
return Number(value.trim()) return Number(value.trim());
} else { } else {
return Number(value.trim()) return Number(value.trim());
} }
} };
const clear = function () { const clear = function() {
sections = {} sections = {};
title = '' title = '';
} };
// export const parseError = (err, hash) => { // export const parseError = (err, hash) => {
// global.mermaidAPI.parseError(err, hash) // global.mermaidAPI.parseError(err, hash)
// } // }
@@ -47,4 +47,4 @@ export default {
setTitle, setTitle,
getTitle getTitle
// parseError // parseError
} };

115
src/diagrams/pie/pieRenderer.js
View File

@@ -1,83 +1,87 @@
/** /**
* Created by AshishJ on 11-09-2019. * Created by AshishJ on 11-09-2019.
*/ */
import * as d3 from 'd3' import * as d3 from 'd3';
import pieData from './pieDb' import pieData from './pieDb';
import pieParser from './parser/pie' import pieParser from './parser/pie';
import { logger } from '../../logger' import { logger } from '../../logger';
const conf = { const conf = {};
} export const setConf = function(cnf) {
export const setConf = function (cnf) { const keys = Object.keys(cnf);
const keys = Object.keys(cnf)
keys.forEach(function (key) { keys.forEach(function(key) {
conf[key] = cnf[key] conf[key] = cnf[key];
}) });
} };
/** /**
* Draws a Pie Chart with the data given in text. * Draws a Pie Chart with the data given in text.
* @param text * @param text
* @param id * @param id
*/ */
let w let w;
export const draw = (txt, id, ver) => { export const draw = (txt, id, ver) => {
try { try {
const parser = pieParser.parser const parser = pieParser.parser;
parser.yy = pieData parser.yy = pieData;
logger.debug('Rendering info diagram\n' + txt) logger.debug('Rendering info diagram\n' + txt);
// Parse the Pie Chart definition // Parse the Pie Chart definition
parser.yy.clear() parser.yy.clear();
parser.parse(txt) parser.parse(txt);
logger.debug('Parsed info diagram') logger.debug('Parsed info diagram');
const elem = document.getElementById(id) const elem = document.getElementById(id);
w = elem.parentElement.offsetWidth w = elem.parentElement.offsetWidth;
if (typeof w === 'undefined') { if (typeof w === 'undefined') {
w = 1200 w = 1200;
} }
if (typeof conf.useWidth !== 'undefined') { if (typeof conf.useWidth !== 'undefined') {
w = conf.useWidth w = conf.useWidth;
} }
const h = 450 const h = 450;
elem.setAttribute('height', '100%') elem.setAttribute('height', '100%');
// Set viewBox // Set viewBox
elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h) elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
// Fetch the default direction, use TD if none was found // Fetch the default direction, use TD if none was found
var width = w// 450 var width = w; // 450
var height = 450 var height = 450;
var margin = 40 var margin = 40;
var radius = Math.min(width, height) / 2 - margin var radius = Math.min(width, height) / 2 - margin;
var svg = d3.select('#' + id).append('svg') var svg = d3
.select('#' + id)
.append('svg')
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
.append('g') .append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
var data = pieData.getSections() var data = pieData.getSections();
logger.info(data) logger.info(data);
// set the color scale // set the color scale
var color = d3.scaleOrdinal() var color = d3
.scaleOrdinal()
.domain(data) .domain(data)
.range(d3.schemeSet2) .range(d3.schemeSet2);
// Compute the position of each group on the pie: // Compute the position of each group on the pie:
var pie = d3.pie() var pie = d3.pie().value(function(d) {
.value(function (d) { return d.value }) return d.value;
var dataReady = pie(d3.entries(data)) });
var dataReady = pie(d3.entries(data));
// Now I know that group A goes from 0 degrees to x degrees and so on. // Now I know that group A goes from 0 degrees to x degrees and so on.
// shape helper to build arcs: // shape helper to build arcs:
var arcGenerator = d3.arc() var arcGenerator = d3
.arc()
.innerRadius(0) .innerRadius(0)
.outerRadius(radius) .outerRadius(radius);
// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function. // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
svg svg
@@ -86,10 +90,12 @@ export const draw = (txt, id, ver) => {
.enter() .enter()
.append('path') .append('path')
.attr('d', arcGenerator) .attr('d', arcGenerator)
.attr('fill', function (d) { return (color(d.data.key)) }) .attr('fill', function(d) {
return color(d.data.key);
})
.attr('stroke', 'black') .attr('stroke', 'black')
.style('stroke-width', '2px') .style('stroke-width', '2px')
.style('opacity', 0.7) .style('opacity', 0.7);
// Now add the annotation. Use the centroid method to get the best coordinates // Now add the annotation. Use the centroid method to get the best coordinates
svg svg
@@ -97,23 +103,28 @@ export const draw = (txt, id, ver) => {
.data(dataReady) .data(dataReady)
.enter() .enter()
.append('text') .append('text')
.text(function (d) { return d.data.key }) .text(function(d) {
.attr('transform', function (d) { return 'translate(' + arcGenerator.centroid(d) + ')' }) return d.data.key;
})
.attr('transform', function(d) {
return 'translate(' + arcGenerator.centroid(d) + ')';
})
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.style('font-size', 17) .style('font-size', 17);
svg.append('text') svg
.append('text')
.text(parser.yy.getTitle()) .text(parser.yy.getTitle())
.attr('x', 0) .attr('x', 0)
.attr('y', -(h - 50) / 2) .attr('y', -(h - 50) / 2)
.attr('class', 'pieTitleText') .attr('class', 'pieTitleText');
} catch (e) { } catch (e) {
logger.error('Error while rendering info diagram') logger.error('Error while rendering info diagram');
logger.error(e.message) logger.error(e.message);
} }
} };
export default { export default {
setConf, setConf,
draw draw
} };