Skip to content

Commit

Permalink
Merge pull request #3842 from mermaid-js/per/revert-1d9fefe7ac65990e4…
Browse files Browse the repository at this point in the history 
…dd06a7e0e29976a873db844

Revert "Added pie"
  • Loading branch information
@sidharthv96
sidharthv96 committed Nov 22, 2022
2 parents 231965d + 9eb506f commit 4143032
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 238 deletions.
46 changes: 16 additions & 30 deletions cypress/platform/per.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
Expand All @@ -29,12 +25,6 @@
}
.mermaid svg {
/* font-size: 18px !important; */
background-color: #eee;
background-image: radial-gradient(#fff 1%, transparent 11%),
radial-gradient(#fff 1%, transparent 11%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-repeat: repeat;
}
.malware {
position: fixed;
Expand All @@ -56,33 +46,29 @@
<body>
<div>Security check</div>
<pre id="diagram" class="mermaid">
bar title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
</pre>

<!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
<script src="./mermaid.js"></script>

flowchart LR
A-->B
</pre
>
<pre id="diagram" class="mermaid2">
mindmap
root
ch1
ch2
</pre
>
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
<script src="./packages/mermaid/dist/mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
startOnLoad: true,
logLevel: 0,
// basePath: './packages/',
// themeVariables: { darkMode: true },
lazyLoadedDiagrams: [
'./mermaid-mindmap-detector.esm.mjs',
'./mermaid-example-diagram-detector.esm.mjs',
],
// lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
basePath: './packages/',
// themeVariables: {relationLabelColor: 'red'}
});
function callback() {
alert('It worked');
Expand Down
2 changes: 1 addition & 1 deletion demos/pie.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h1>Pie chart demos</h1>
pie title Pets adopted by volunteers
accTitle: simple pie char demo
accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
"Dogs" : 140
"Dogs" : 386
"Cats" : 85
"Rats" : 15
</pre>
Expand Down
10 changes: 2 additions & 8 deletions packages/mermaid/src/diagrams/pie/parser/pie.jison
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
<string>["] { this.popState(); }
<string>[^"]* { return "txt"; }
"pie" return 'PIE';
"bar" return 'BAR';
"showData" return 'showData';
":"[\s]*[\d]+(?:\.[\d]+)? return "value";
<<EOF>> return 'EOF';
Expand All @@ -54,15 +53,10 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
start
: eol start
| directive start
| document_type document
| document_type showData document {yy.setShowData(true);}
| PIE document
| PIE showData document {yy.setShowData(true);}
;

document_type
: PIE {yy.setDiagramType($1); }
| BAR {yy.setDiagramType($1); }
;

document
: /* empty */
| document line
Expand Down
13 changes: 0 additions & 13 deletions packages/mermaid/src/diagrams/pie/pieDb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {

let sections = {};
let showData = false;
let diagramType = 'pie';

export const parseDirective = function (statement, context, type) {
mermaidAPI.parseDirective(this, statement, context, type);
Expand All @@ -27,16 +26,6 @@ const addSection = function (id, value) {
log.debug('Added new section :', id);
}
};

const setDiagramType = function (diagType) {
diagramType = diagType;
log.debug('Added diag type :', diagType);
};

const getDiagramType = function () {
return diagramType;
};

const getSections = () => sections;

const setShowData = function (toggle) {
Expand Down Expand Up @@ -77,6 +66,4 @@ export default {
getShowData,
getAccDescription,
setAccDescription,
setDiagramType,
getDiagramType,
};
3 changes: 1 addition & 2 deletions packages/mermaid/src/diagrams/pie/pieDetector.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { DiagramDetector } from '../../diagram-api/types';

export const pieDetector: DiagramDetector = (txt) => {
const logOutput = txt.match(/^\s*pie/) !== null || txt.match(/^\s*bar/) !== null;
return logOutput;
return txt.match(/^\s*pie/) !== null;
};
187 changes: 3 additions & 184 deletions packages/mermaid/src/diagrams/pie/pieRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,200 +6,20 @@ import * as configApi from '../../config';
import addSVGAccessibilityFields from '../../accessibility';

let conf = configApi.getConfig();

/**
* Draws a Bar Chart with the data given in text.
* Draws a Pie Chart with the data given in text.
*
* @param text
* @param txt
* @param id
* @param _version
* @param diagObj
*/
// export const drawBarChart = (txt, id, _version, diagObj) => {
// try {
// let locDiagType;

// conf = configApi.getConfig();
// log.debug('Rendering info diagram\n' + txt);
// locDiagType = diagObj.db.getDiagramType();
// const securityLevel = configApi.getConfig().securityLevel;
// // Handle root and Document for when rendering in sandbox mode
// let sandboxElement;
// if (securityLevel === 'sandbox') {
// sandboxElement = select('#i' + id);
// }
// const root =
// securityLevel === 'sandbox'
// ? 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;

// if (typeof width === 'undefined') {
// width = 1200;
// }

// if (typeof conf.useWidth !== 'undefined') {
// width = conf.useWidth;
// }
// if (typeof conf.pie.useWidth !== 'undefined') {
// width = conf.pie.useWidth;
// }

// const diagram = root.select('#' + id);
// configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);

// addSVGAccessibilityFields(diagObj.db, diagram, id);
// // Set viewBox
// elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);

// // Fetch the default direction, use TD if none was found
// var margin = 40;
// var legendRectSize = 18;
// var legendSpacing = 4;

// var radius = Math.min(width, height) / 2 - margin;

// var svg = diagram
// .append('g')
// .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

// var data = diagObj.db.getSections();
// var sum = 0;
// Object.keys(data).forEach(function (key) {
// sum += data[key];
// });

// const themeVariables = conf.themeVariables;
// var myGeneratedColors = [
// themeVariables.pie1,
// themeVariables.pie2,
// themeVariables.pie3,
// themeVariables.pie4,
// themeVariables.pie5,
// themeVariables.pie6,
// themeVariables.pie7,
// themeVariables.pie8,
// themeVariables.pie9,
// themeVariables.pie10,
// themeVariables.pie11,
// themeVariables.pie12,
// ];

// // Set the color scale
// var color = scaleOrdinal().range(myGeneratedColors);

// // Compute the position of each group on the pie:
// var pieData = Object.entries(data).map(function (el, idx) {
// return {
// order: idx,
// name: el[0],
// value: el[1],
// };
// });
// var pie = d3pie()
// .value(function (d) {
// return d.value;
// })
// .sort(function (a, b) {
// // Sort slices in clockwise direction
// return a.order - b.order;
// });
// var dataReady = pie(pieData);

// // Shape helper to build arcs:
// var arcGenerator = arc().innerRadius(0).outerRadius(radius);

// // Build the pie chart: each part of the pie is a path that we build using the arc function.
// svg
// .selectAll('mySlices')
// .data(dataReady)
// .enter()
// .append('path')
// .attr('d', arcGenerator)
// .attr('fill', function (d) {
// return color(d.data.name);
// })
// .attr('class', 'pieCircle');

// // Now add the percentage.
// // Use the centroid method to get the best coordinates.
// svg
// .selectAll('mySlices')
// .data(dataReady)
// .enter()
// .append('text')
// .text(function (d) {
// return ((d.data.value / sum) * 100).toFixed(0) + '%';
// })
// .attr('transform', function (d) {
// return 'translate(' + arcGenerator.centroid(d) + ')';
// })
// .style('text-anchor', 'middle')
// .attr('class', 'slice');

// svg
// .append('text')
// .text(diagObj.db.getDiagramTitle())
// .attr('x', 0)
// .attr('y', -(height - 50) / 2)
// .attr('class', 'pieTitleText');

// // Add the legends/annotations for each section
// var legend = svg
// .selectAll('.legend')
// .data(color.domain())
// .enter()
// .append('g')
// .attr('class', 'legend')
// .attr('transform', function (d, i) {
// var height = legendRectSize + legendSpacing;
// var offset = (height * color.domain().length) / 2;
// var horizontal = 12 * legendRectSize;
// var vertical = i * height - offset;
// return 'translate(' + horizontal + ',' + vertical + ')';
// });

// legend
// .append('rect')
// .attr('width', legendRectSize)
// .attr('height', legendRectSize)
// .style('fill', color)
// .style('stroke', color);

// legend
// .data(dataReady)
// .append('text')
// .attr('x', legendRectSize + legendSpacing)
// .attr('y', legendRectSize - legendSpacing)
// .text(function (d) {
// if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) {
// return d.data.name + ' [' + d.data.value + ']';
// } else {
// return d.data.name;
// }
// });
// } catch (e) {
// log.error('Error while rendering info diagram');
// log.error(e);
// }
// };

let width;
const height = 450;
export const draw = (txt, id, _version, diagObj) => {
try {
let locDiagType;

conf = configApi.getConfig();
log.debug('Rendering info diagram\n' + txt);
locDiagType = diagObj.db.getDiagramType();

const securityLevel = configApi.getConfig().securityLevel;
// Handle root and Document for when rendering in sandbox mode
let sandboxElement;
Expand Down Expand Up @@ -371,5 +191,4 @@ export const draw = (txt, id, _version, diagObj) => {

export default {
draw,
// drawBarChart,
};

0 comments on commit 4143032

Please sign in to comment.