marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-26 02:39:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'pie_chart_themeing' into state-diagram-themeing

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-05-06 07:52:09 +02:00
parent a1cd398e4d edb06b12e9
commit 785e5552ae
17 changed files with 511 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +1,14 @@
/**
* Created by AshishJ on 11-09-2019.
*/
import { select, scaleOrdinal, schemeSet2, pie as d3pie, entries, arc } from 'd3';
import { select, scaleOrdinal, pie as d3pie, entries, arc } from 'd3';
import pieData from './pieDb';
import pieParser from './parser/pie';
import { log } from '../../logger';
import { configureSvgSize } from '../../utils';
import * as configApi from '../../config';
const conf = {};
export const setConf = function(cnf) {
const keys = Object.keys(cnf);
keys.forEach(function(key) {
conf[key] = cnf[key];
});
};
let conf = configApi.getConfig();
/**
* Draws a Pie Chart with the data given in text.
@@ -25,6 +19,7 @@ let width;
const height = 450;
export const draw = (txt, id) => {
try {
conf = configApi.getConfig();
const parser = pieParser.parser;
parser.yy = pieData;
log.debug('Rendering info diagram\n' + txt);
@@ -39,12 +34,12 @@ export const draw = (txt, id) => {
width = 1200;
}
if (typeof conf.useWidth !== 'undefined') {
if (typeof conf.pie.useWidth !== 'undefined') {
width = conf.useWidth;
}
const diagram = select('#' + id);
configureSvgSize(diagram, height, width, conf.useMaxWidth);
configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
// Set viewBox
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
@@ -66,10 +61,26 @@ export const draw = (txt, id) => {
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()
.domain(data)
.range(schemeSet2);
.range(myGeneratedColors);
// Compute the position of each group on the pie:
var pie = d3pie().value(function(d) {
@@ -156,6 +167,5 @@ export const draw = (txt, id) => {
};
export default {
setConf,
draw
};

6
src/mermaidAPI.js
View File

@@ -414,8 +414,8 @@ const render = function(id, _txt, cb, container) {
infoRenderer.draw(txt, id, pkg.version);
break;
case 'pie':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
pieRenderer.setConf(cnf.pie);
//cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
//pieRenderer.setConf(cnf.pie);
pieRenderer.draw(txt, id, pkg.version);
break;
case 'er':
@@ -574,7 +574,7 @@ function updateRendererConfigs(conf) {
stateRenderer.setConf(conf.state);
stateRendererV2.setConf(conf.state);
infoRenderer.setConf(conf.class);
pieRenderer.setConf(conf.class);
// pieRenderer.setConf(conf.class);
erRenderer.setConf(conf.er);
journeyRenderer.setConf(conf.journey);
requirementRenderer.setConf(conf.requirement);

14
src/themes/theme-base.js
View File

@@ -134,6 +134,20 @@ class Theme {
this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
/* pie */
this.pie1 = this.pie1 || this.primaryColor;
this.pie2 = this.pie2 || this.secondaryColor;
this.pie3 = this.pie3 || this.tertiaryColor;
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;

28
src/themes/theme-dark.js
View File

@@ -138,6 +138,34 @@ class Theme {
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
/* pie */
// this.pie1 = this.pie1 || this.primaryColor;
// this.pie2 = this.pie2 || this.secondaryColor;
// this.pie3 = this.pie3 || this.tertiaryColor;
// this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
// this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
// this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
// this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
// this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
// this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
// this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
// this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
// this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
this.pie1 = this.pie1 || '#0b0000';
this.pie2 = this.pie2 || '#4d1037';
this.pie3 = this.pie3 || '#3f5258';
this.pie4 = this.pie4 || '#4f2f1b';
this.pie5 = this.pie5 || '#6e0a0a';
this.pie6 = this.pie6 || '#3b0048';
this.pie7 = this.pie7 || '#995a01';
this.pie8 = this.pie8 || '#154706';
this.pie9 = this.pie9 || '#161722';
this.pie10 = this.pie10 || '#00296f';
this.pie11 = this.pie11 || '#01629c';
this.pie12 = this.pie12 || '#010029';
/* class */
this.classText = this.primaryTextColor;

14
src/themes/theme-default.js
View File

@@ -151,6 +151,20 @@ class Theme {
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
/* pie */
this.pie1 = this.pie1 || this.primaryColor;
this.pie2 = this.pie2 || this.secondaryColor;
this.pie3 = this.pie3 || adjust(this.tertiaryColor, { l: -40 });
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -20 });
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -20 });
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -40 });
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: -40 });
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -40 });
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -90, l: -40 });
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -30 });
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;

13
src/themes/theme-forest.js
View File

@@ -121,6 +121,19 @@ class Theme {
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
/* pie */
this.pie1 = this.pie1 || this.primaryColor;
this.pie2 = this.pie2 || this.secondaryColor;
this.pie3 = this.pie3 || this.tertiaryColor;
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -30 });
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { h: +40, l: -40 });
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -50 });
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -50 });
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -50 });
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;

28
src/themes/theme-neutral.js
View File

@@ -157,6 +157,34 @@ class Theme {
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
// /* pie */
this.pie1 = this.pie1 || '#F4F4F4';
this.pie2 = this.pie2 || '#555';
this.pie3 = this.pie3 || '#BBB';
this.pie4 = this.pie4 || '#777';
this.pie5 = this.pie5 || '#999';
this.pie6 = this.pie6 || '#DDD';
this.pie7 = this.pie7 || '#FFF';
this.pie8 = this.pie8 || '#DDD';
this.pie9 = this.pie9 || '#BBB';
this.pie10 = this.pie10 || '#999';
this.pie11 = this.pie11 || '#777';
this.pie12 = this.pie12 || '#555';
// this.pie1 = this.pie1 || '#212529';
// this.pie2 = this.pie2 || '#343A40';
// this.pie3 = this.pie3 || '#495057';
// this.pie4 = this.pie4 || '#6C757D';
// this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
// this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
// this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
// this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
// this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
// this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
// this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
// this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;