mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge pull request #3842 from mermaid-js/per/revert-1d9fefe7ac65990e4dd06a7e0e29976a873db844
Revert "Added pie"
This commit is contained in:
Sidharth Vinod
GitHub
commit
4143032b66
@ -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"
|
||||
@ -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;
|
||||
@ -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');
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
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>
|
||||
|
||||
@ -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';
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
@ -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) {
|
||||
@ -77,6 +66,4 @@ export default {
|
||||
getShowData,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
setDiagramType,
|
||||
getDiagramType,
|
||||
};
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
@ -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;
|
||||
@ -371,5 +191,4 @@ export const draw = (txt, id, _version, diagObj) => {
|
||||
|
||||
export default {
|
||||
draw,
|
||||
// drawBarChart,
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user