Merge pull request #1915 from mermaid-js/1906_gantt_font

1906 gantt font
This commit is contained in:
Knut Sveidqvist
2021-02-27 14:05:46 +01:00
committed by GitHub
5 changed files with 33 additions and 46 deletions

View File

@@ -25,17 +25,17 @@
<body>
<h1>info below</h1>
<div class="flex">
<div class="mermaid" style="width: 50%; height: 400px;">
%%{init: { "logLevel": 1, "journey": {"useMaxWidth": false }} }%%
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
<div class="mermaid" style="width: 100%; height: 400px;">
%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div>
<div class="mermaid2" style="width: 50%; height: 400px;">
flowchart TD
@@ -133,13 +133,12 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
fontFamily: 'courier',
curve: 'cardinal',
securityLevel: 'loose',
sequence:{mirrorActors:false}
});
function callback(){alert('It worked');}
</script>

View File

@@ -537,7 +537,7 @@ const config = {
***Default value 50**.
*/
topPadding: 50,
rightPadding: 75,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
@@ -567,17 +567,15 @@ const config = {
***Default value 11**.
*/
fontSize: 11,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| fontFamily | font Family | string | required |"Open-Sans", "sans-serif" |
*| sectionFontSize | Font size for secions| Integer | Required | Any Positive Value |
*
***Notes:**
*
***Default value '"Open-Sans", "sans-serif"'**.
***Default value 11**.
*/
fontFamily: '"Open-Sans", "sans-serif"',
sectionFontSize: 11,
/**
*| Parameter | Description |Type | Required | Values|
@@ -638,7 +636,7 @@ const config = {
***Notes:**
***Default value 10**..
*/
diagramMarginY: 20,
diagramMarginY: 10,
/**
*| Parameter | Description |Type | Required | Values|

View File

@@ -11,30 +11,19 @@ import {
import { parser } from './parser/gantt';
import common from '../common/common';
import ganttDb from './ganttDb';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils';
parser.yy = ganttDb;
const conf = {
titleTopMargin: 25,
barHeight: 20,
barGap: 4,
topPadding: 50,
rightPadding: 75,
leftPadding: 75,
gridLineStartPadding: 35,
fontSize: 11,
fontFamily: '"Open-Sans", "sans-serif"'
};
export const setConf = function(cnf) {
const keys = Object.keys(cnf);
keys.forEach(function(key) {
conf[key] = cnf[key];
});
export const setConf = function() {
// const keys = Object.keys(cnf);
// keys.forEach(function(key) {
// conf[key] = cnf[key];
// });
};
let w;
export const draw = function(text, id) {
const conf = getConfig().gantt;
parser.yy.clear();
parser.parse(text);
@@ -415,6 +404,8 @@ export const draw = function(text, id) {
return (d[1] * theGap) / 2 + theTopPad;
}
})
.attr('font-size', conf.sectionFontSize)
.attr('font-size', conf.sectionFontSize)
.attr('class', function(d) {
for (let i = 0; i < categories.length; i++) {
if (d[0] === categories[i]) {

View File

@@ -42,8 +42,8 @@ const getStyles = options =>
.sectionTitle {
text-anchor: start;
font-size: 11px;
text-height: 14px;
// font-size: ${options.ganttFontSize};
// text-height: 14px;
font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-family: var(--mermaid-font-family);
@@ -90,14 +90,14 @@ const getStyles = options =>
font-family: var(--mermaid-font-family);
}
.taskText:not([font-size]) {
font-size: 11px;
}
// .taskText:not([font-size]) {
// font-size: ${options.ganttFontSize};
// }
.taskTextOutsideRight {
fill: ${options.taskTextDarkColor};
text-anchor: start;
font-size: 11px;
// font-size: ${options.ganttFontSize};
font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-family: var(--mermaid-font-family);
@@ -106,7 +106,7 @@ const getStyles = options =>
.taskTextOutsideLeft {
fill: ${options.taskTextDarkColor};
text-anchor: end;
font-size: 11px;
// font-size: ${options.ganttFontSize};
}
/* Special case clickable */

View File

@@ -141,7 +141,6 @@ export const bounds = {
cnt++;
// The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
const n = _self.sequenceItems.length - cnt + 1;
_self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);
_self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);