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

Merge pull request #2919 from khiga8/kh-user-journey

Browse Source 
feat: add accessible description and title to user journey
This commit is contained in:
Knut Sveidqvist
2022-04-12 07:36:41 +02:00
committed by GitHub
parent 7aa037ee60 cda21c50ac
commit 3c725b97b1
6 changed files with 85 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
demos/journey.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
journey
title My day
accDescription A user journey diagram of a typical day in my life
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>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
});
</script>
</body>
</html>

21
src/diagrams/user-journey/journeyDb.js
View File

@@ -2,7 +2,10 @@ import mermaidAPI from '../../mermaidAPI';
import * as configApi from '../../config'; import * as configApi from '../../config';
import common from '../common/common'; import common from '../common/common';
const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
let title = ''; let title = '';
let description = '';
let currentSection = ''; let currentSection = '';
const sections = []; const sections = [];
@@ -18,18 +21,26 @@ export const clear = function () {
tasks.length = 0; tasks.length = 0;
currentSection = ''; currentSection = '';
title = ''; title = '';
description = '';
rawTasks.length = 0; rawTasks.length = 0;
}; };
export const setTitle = function (txt) { const setTitle = function (txt) {
let sanitizedText = common.sanitizeText(txt, configApi.getConfig()); title = sanitizeText(txt);
title = sanitizedText;
}; };
export const getTitle = function () { const getTitle = function () {
return title; return title;
}; };
const setAccDescription = function (txt) {
description = sanitizeText(txt);
};
const getAccDescription = function () {
return description;
};
export const addSection = function (txt) { export const addSection = function (txt) {
currentSection = txt; currentSection = txt;
sections.push(txt); sections.push(txt);
@@ -125,6 +136,8 @@ export default {
clear, clear,
setTitle, setTitle,
getTitle, getTitle,
setAccDescription,
getAccDescription,
addSection, addSection,
getSections, getSections,
getTasks, getTasks,

12
src/diagrams/user-journey/journeyDb.spec.js
View File

@@ -31,12 +31,12 @@ describe('when using the journeyDb', function () {
journeyDb.addTask('test2', '1: id2'); journeyDb.addTask('test2', '1: id2');
journeyDb.clear(); journeyDb.clear();
}); });
it.each` it.each`
fn | expected fn | expected
${'getTasks'} | ${[]} ${'getTasks'} | ${[]}
${'getTitle'} | ${''} ${'getTitle'} | ${''}
${'getSections'} | ${[]} ${'getAccDescription'} | ${''}
${'getSections'} | ${[]}
`('should clear $fn', ({ fn, expected }) => { `('should clear $fn', ({ fn, expected }) => {
expect(journeyDb[fn]()).toEqual(expected); expect(journeyDb[fn]()).toEqual(expected);
}); });
@@ -44,6 +44,7 @@ describe('when using the journeyDb', function () {
describe('tasks and actors should be added', function () { describe('tasks and actors should be added', function () {
journeyDb.setTitle('Shopping'); journeyDb.setTitle('Shopping');
journeyDb.setAccDescription('A user journey for family shopping');
journeyDb.addSection('Journey to the shops'); journeyDb.addSection('Journey to the shops');
journeyDb.addTask('Get car keys', ':5:Dad'); journeyDb.addTask('Get car keys', ':5:Dad');
journeyDb.addTask('Go to car', ':3:Dad, Mum, Child#1, Child#2'); journeyDb.addTask('Go to car', ':3:Dad, Mum, Child#1, Child#2');
@@ -52,6 +53,7 @@ describe('when using the journeyDb', function () {
journeyDb.addTask('Go shopping', ':5:Mum'); journeyDb.addTask('Go shopping', ':5:Mum');
expect(journeyDb.getTitle()).toEqual('Shopping'); expect(journeyDb.getTitle()).toEqual('Shopping');
expect(journeyDb.getAccDescription()).toEqual('A user journey for family shopping');
expect(journeyDb.getTasks()).toEqual([ expect(journeyDb.getTasks()).toEqual([
{ {
score: 5, score: 5,

4
src/diagrams/user-journey/journeyRenderer.js
View File

@@ -4,6 +4,7 @@ import journeyDb from './journeyDb';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils'; import { configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
parser.yy = journeyDb; parser.yy = journeyDb;
@@ -100,6 +101,7 @@ export const draw = function (text, id) {
.attr('font-weight', 'bold') .attr('font-weight', 'bold')
.attr('y', 25); .attr('y', 25);
} }
const height = box.stopy - box.starty + 2 * conf.diagramMarginY; const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX; const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
@@ -120,6 +122,8 @@ export const draw = function (text, id) {
diagram.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`); diagram.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`);
diagram.attr('preserveAspectRatio', 'xMinYMin meet'); diagram.attr('preserveAspectRatio', 'xMinYMin meet');
diagram.attr('height', height + extraVertForTitle + 25); diagram.attr('height', height + extraVertForTitle + 25);
addSVGAccessibilityFields(parser.yy, diagram, id);
}; };
export const bounds = { export const bounds = {

2
src/diagrams/user-journey/parser/journey.jison
View File

@@ -25,6 +25,7 @@
"journey" return 'journey'; "journey" return 'journey';
"title"\s[^#\n;]+ return 'title'; "title"\s[^#\n;]+ return 'title';
"accDescription"\s[^#\n;]+ return 'accDescription';
"section"\s[^#:\n;]+ return 'section'; "section"\s[^#:\n;]+ return 'section';
[^#:\n;]+ return 'taskName'; [^#:\n;]+ return 'taskName';
":"[^#\n;]+ return 'taskData'; ":"[^#\n;]+ return 'taskData';
@@ -64,6 +65,7 @@ directive
statement statement
: title {yy.setTitle($1.substr(6));$$=$1.substr(6);} : title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
| accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
| section {yy.addSection($1.substr(8));$$=$1.substr(8);} | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
| taskName taskData {yy.addTask($1, $2);$$='task';} | taskName taskData {yy.addTask($1, $2);$$='task';}
| directive | directive

10
src/diagrams/user-journey/parser/journey.spec.js
View File

@@ -19,6 +19,16 @@ describe('when parsing a journey diagram it', function () {
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
}); });
it('it should handle an accDescription', function () {
const str =
'journey\n' +
'accDescription A user journey for family shopping\n' +
'title Adding journey diagram functionality to mermaid\n' +
'section Order from website';
expect(parserFnConstructor(str)).not.toThrow();
});
it('should handle a section definition', function () { it('should handle a section definition', function () {
const str = const str =
'journey\n' + 'journey\n' +