Skip to content

Commit 1d9fefe

Browse files
pbrolin47pbrolin47
committed
Added pie
1 parent 3d7883f commit 1d9fefe

File tree

6 files changed

+239
-23
lines changed

6 files changed

+239
-23
lines changed

‎cypress/platform/per.html

+30-16
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
rel="stylesheet"
77
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
88
/>
9+
<link
10+
href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
11+
rel="stylesheet"
12+
/>
913
<link
1014
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
1115
rel="stylesheet"
@@ -25,6 +29,12 @@
2529
}
2630
.mermaid svg {
2731
/* font-size: 18px !important; */
32+
background-color: #eee;
33+
background-image: radial-gradient(#fff 1%, transparent 11%),
34+
radial-gradient(#fff 1%, transparent 11%);
35+
background-size: 20px 20px;
36+
background-position: 0 0, 10px 10px;
37+
background-repeat: repeat;
2838
}
2939
.malware {
3040
position: fixed;
@@ -46,29 +56,33 @@
4656
<body>
4757
<div>Security check</div>
4858
<pre id="diagram" class="mermaid">
49-
flowchart LR
50-
A-->B
51-
</pre
52-
>
53-
<pre id="diagram" class="mermaid2">
54-
mindmap
55-
root
56-
ch1
57-
ch2
58-
</pre
59-
>
60-
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
61-
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
62-
<script src="./packages/mermaid/dist/mermaid.js"></script>
59+
bar title Pets adopted by volunteers
60+
"Dogs" : 386
61+
"Cats" : 85
62+
"Rats" : 15
63+
</pre>
64+
65+
<!-- <div id="cy"></div> -->
66+
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
67+
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
68+
<!-- <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script> -->
69+
<script src="./mermaid.js"></script>
70+
6371
<script>
6472
mermaid.parseError = function (err, hash) {
6573
// console.error('Mermaid error: ', err);
6674
};
6775
mermaid.initialize({
76+
theme: 'forest',
6877
startOnLoad: true,
6978
logLevel: 0,
70-
basePath: './packages/',
71-
// themeVariables: {relationLabelColor: 'red'}
79+
// basePath: './packages/',
80+
// themeVariables: { darkMode: true },
81+
lazyLoadedDiagrams: [
82+
'./mermaid-mindmap-detector.esm.mjs',
83+
'./mermaid-example-diagram-detector.esm.mjs',
84+
],
85+
// lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
7286
});
7387
function callback() {
7488
alert('It worked');

‎demos/pie.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h1>Pie chart demos</h1>
1919
pie title Pets adopted by volunteers
2020
accTitle: simple pie char demo
2121
accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
22-
"Dogs" : 386
22+
"Dogs" : 140
2323
"Cats" : 85
2424
"Rats" : 15
2525
</pre>

‎packages/mermaid/src/diagrams/pie/parser/pie.jison

+8-2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
4040
<string>["] { this.popState(); }
4141
<string>[^"]* { return "txt"; }
4242
"pie" return 'PIE';
43+
"bar" return 'BAR';
4344
"showData" return 'showData';
4445
":"[\s]*[\d]+(?:\.[\d]+)? return "value";
4546
<<EOF>> return 'EOF';
@@ -53,10 +54,15 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
5354
start
5455
: eol start
5556
| directive start
56-
| PIE document
57-
| PIE showData document {yy.setShowData(true);}
57+
| document_type document
58+
| document_type showData document {yy.setShowData(true);}
5859
;
5960

61+
document_type
62+
: PIE {yy.setDiagramType($1); }
63+
| BAR {yy.setDiagramType($1); }
64+
;
65+
6066
document
6167
: /* empty */
6268
| document line

‎packages/mermaid/src/diagrams/pie/pieDb.js

+13
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414

1515
let sections = {};
1616
let showData = false;
17+
let diagramType = 'pie';
1718

1819
export const parseDirective = function (statement, context, type) {
1920
mermaidAPI.parseDirective(this, statement, context, type);
@@ -26,6 +27,16 @@ const addSection = function (id, value) {
2627
log.debug('Added new section :', id);
2728
}
2829
};
30+
31+
const setDiagramType = function (diagType) {
32+
diagramType = diagType;
33+
log.debug('Added diag type :', diagType);
34+
};
35+
36+
const getDiagramType = function () {
37+
return diagramType;
38+
};
39+
2940
const getSections = () => sections;
3041

3142
const setShowData = function (toggle) {
@@ -66,4 +77,6 @@ export default {
6677
getShowData,
6778
getAccDescription,
6879
setAccDescription,
80+
setDiagramType,
81+
getDiagramType,
6982
};

‎packages/mermaid/src/diagrams/pie/pieDetector.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import type { DiagramDetector } from '../../diagram-api/types';
22

33
export const pieDetector: DiagramDetector = (txt) => {
4-
return txt.match(/^\s*pie/) !== null;
4+
const logOutput = txt.match(/^\s*pie/) !== null || txt.match(/^\s*bar/) !== null;
5+
console.log(logOutput);
6+
return logOutput;
57
};

‎packages/mermaid/src/diagrams/pie/pieRenderer.js

+184-3
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,200 @@ import * as configApi from '../../config';
66
import addSVGAccessibilityFields from '../../accessibility';
77

88
let conf = configApi.getConfig();
9-
109
/**
11-
* Draws a Pie Chart with the data given in text.
10+
* Draws a Bar Chart with the data given in text.
1211
*
1312
* @param text
13+
* @param txt
1414
* @param id
15+
* @param _version
16+
* @param diagObj
1517
*/
18+
// export const drawBarChart = (txt, id, _version, diagObj) => {
19+
// try {
20+
// let locDiagType;
21+
22+
// conf = configApi.getConfig();
23+
// log.debug('Rendering info diagram\n' + txt);
24+
// locDiagType = diagObj.db.getDiagramType();
25+
// const securityLevel = configApi.getConfig().securityLevel;
26+
// // Handle root and Document for when rendering in sandbox mode
27+
// let sandboxElement;
28+
// if (securityLevel === 'sandbox') {
29+
// sandboxElement = select('#i' + id);
30+
// }
31+
// const root =
32+
// securityLevel === 'sandbox'
33+
// ? select(sandboxElement.nodes()[0].contentDocument.body)
34+
// : select('body');
35+
// const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
36+
37+
// // Parse the Pie Chart definition
38+
// diagObj.db.clear();
39+
// diagObj.parser.parse(txt);
40+
// log.debug('Parsed info diagram');
41+
// const elem = doc.getElementById(id);
42+
// width = elem.parentElement.offsetWidth;
43+
44+
// if (typeof width === 'undefined') {
45+
// width = 1200;
46+
// }
47+
48+
// if (typeof conf.useWidth !== 'undefined') {
49+
// width = conf.useWidth;
50+
// }
51+
// if (typeof conf.pie.useWidth !== 'undefined') {
52+
// width = conf.pie.useWidth;
53+
// }
54+
55+
// const diagram = root.select('#' + id);
56+
// configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
57+
58+
// addSVGAccessibilityFields(diagObj.db, diagram, id);
59+
// // Set viewBox
60+
// elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
61+
62+
// // Fetch the default direction, use TD if none was found
63+
// var margin = 40;
64+
// var legendRectSize = 18;
65+
// var legendSpacing = 4;
66+
67+
// var radius = Math.min(width, height) / 2 - margin;
68+
69+
// var svg = diagram
70+
// .append('g')
71+
// .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
72+
73+
// var data = diagObj.db.getSections();
74+
// var sum = 0;
75+
// Object.keys(data).forEach(function (key) {
76+
// sum += data[key];
77+
// });
78+
79+
// const themeVariables = conf.themeVariables;
80+
// var myGeneratedColors = [
81+
// themeVariables.pie1,
82+
// themeVariables.pie2,
83+
// themeVariables.pie3,
84+
// themeVariables.pie4,
85+
// themeVariables.pie5,
86+
// themeVariables.pie6,
87+
// themeVariables.pie7,
88+
// themeVariables.pie8,
89+
// themeVariables.pie9,
90+
// themeVariables.pie10,
91+
// themeVariables.pie11,
92+
// themeVariables.pie12,
93+
// ];
94+
95+
// // Set the color scale
96+
// var color = scaleOrdinal().range(myGeneratedColors);
97+
98+
// // Compute the position of each group on the pie:
99+
// var pieData = Object.entries(data).map(function (el, idx) {
100+
// return {
101+
// order: idx,
102+
// name: el[0],
103+
// value: el[1],
104+
// };
105+
// });
106+
// var pie = d3pie()
107+
// .value(function (d) {
108+
// return d.value;
109+
// })
110+
// .sort(function (a, b) {
111+
// // Sort slices in clockwise direction
112+
// return a.order - b.order;
113+
// });
114+
// var dataReady = pie(pieData);
115+
116+
// // Shape helper to build arcs:
117+
// var arcGenerator = arc().innerRadius(0).outerRadius(radius);
118+
119+
// // Build the pie chart: each part of the pie is a path that we build using the arc function.
120+
// svg
121+
// .selectAll('mySlices')
122+
// .data(dataReady)
123+
// .enter()
124+
// .append('path')
125+
// .attr('d', arcGenerator)
126+
// .attr('fill', function (d) {
127+
// return color(d.data.name);
128+
// })
129+
// .attr('class', 'pieCircle');
130+
131+
// // Now add the percentage.
132+
// // Use the centroid method to get the best coordinates.
133+
// svg
134+
// .selectAll('mySlices')
135+
// .data(dataReady)
136+
// .enter()
137+
// .append('text')
138+
// .text(function (d) {
139+
// return ((d.data.value / sum) * 100).toFixed(0) + '%';
140+
// })
141+
// .attr('transform', function (d) {
142+
// return 'translate(' + arcGenerator.centroid(d) + ')';
143+
// })
144+
// .style('text-anchor', 'middle')
145+
// .attr('class', 'slice');
146+
147+
// svg
148+
// .append('text')
149+
// .text(diagObj.db.getDiagramTitle())
150+
// .attr('x', 0)
151+
// .attr('y', -(height - 50) / 2)
152+
// .attr('class', 'pieTitleText');
153+
154+
// // Add the legends/annotations for each section
155+
// var legend = svg
156+
// .selectAll('.legend')
157+
// .data(color.domain())
158+
// .enter()
159+
// .append('g')
160+
// .attr('class', 'legend')
161+
// .attr('transform', function (d, i) {
162+
// var height = legendRectSize + legendSpacing;
163+
// var offset = (height * color.domain().length) / 2;
164+
// var horz = 12 * legendRectSize;
165+
// var vert = i * height - offset;
166+
// return 'translate(' + horz + ',' + vert + ')';
167+
// });
168+
169+
// legend
170+
// .append('rect')
171+
// .attr('width', legendRectSize)
172+
// .attr('height', legendRectSize)
173+
// .style('fill', color)
174+
// .style('stroke', color);
175+
176+
// legend
177+
// .data(dataReady)
178+
// .append('text')
179+
// .attr('x', legendRectSize + legendSpacing)
180+
// .attr('y', legendRectSize - legendSpacing)
181+
// .text(function (d) {
182+
// if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) {
183+
// return d.data.name + ' [' + d.data.value + ']';
184+
// } else {
185+
// return d.data.name;
186+
// }
187+
// });
188+
// } catch (e) {
189+
// log.error('Error while rendering info diagram');
190+
// log.error(e);
191+
// }
192+
// };
193+
16194
let width;
17195
const height = 450;
18196
export const draw = (txt, id, _version, diagObj) => {
19197
try {
198+
let locDiagType;
199+
20200
conf = configApi.getConfig();
21201
log.debug('Rendering info diagram\n' + txt);
22-
202+
locDiagType = diagObj.db.getDiagramType();
23203
const securityLevel = configApi.getConfig().securityLevel;
24204
// Handle root and Document for when rendering in sandbox mode
25205
let sandboxElement;
@@ -191,4 +371,5 @@ export const draw = (txt, id, _version, diagObj) => {
191371

192372
export default {
193373
draw,
374+
// drawBarChart,
194375
};

0 commit comments

Comments
 (0)