Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Revert "Added pie" #3842

Merged
merged 1 commit into from
Nov 22, 2022
Merged

Revert "Added pie" #3842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 16 additions & 30 deletions cypress/platform/per.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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,
};