Merge pull request #2133 from mermaid-js/2132_style_journey_diagram

FIX: Added new theme user journey diagram specific theme variables
mermaid-js · Jun 25, 2021 · c133595 · c133595
2 parents 3a65551 + 8b55b83
commit c133595
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js
@@ -22,14 +22,15 @@ function drawActorLegend(diagram) {
   // Draw the actors
   let yPos = 60;
   Object.keys(actors).forEach(person => {
-    const colour = actors[person];
+    const colour = actors[person].color;
 
     const circleData = {
       cx: 20,
       cy: yPos,
       r: 7,
       fill: colour,
-      stroke: '#000'
+      stroke: '#000',
+      pos: actors[person].position
     };
     svgDraw.drawCircle(diagram, circleData);
 
@@ -65,7 +66,10 @@ export const draw = function(text, id) {
   for (let member in actors) delete actors[member];
   let actorPos = 0;
   actorNames.forEach(actorName => {
-    actors[actorName] = conf.actorColours[actorPos % conf.actorColours.length];
+    actors[actorName] = {
+      color: conf.actorColours[actorPos % conf.actorColours.length],
+      position: actorPos
+    };
     actorPos++;
   });
 

diff --git a/src/diagrams/user-journey/styles.js b/src/diagrams/user-journey/styles.js
@@ -24,7 +24,7 @@ const getStyles = options =>
   }
 
   .face {
-    fill: #FFF8DC;
+    ${options.faceColor ? `fill: ${options.faceColor}` : 'fill: #FFF8DC'};
     stroke: #999;
   }
 
@@ -113,6 +113,27 @@ const getStyles = options =>
   .task-type-7, .section-type-7  {
     ${options.fillType0 ? `fill: ${options.fillType7}` : ''};
   }
+
+  .actor-0 {
+    ${options.actor0 ? `fill: ${options.actor0}` : ''};
+  }
+  .actor-1 {
+    ${options.actor1 ? `fill: ${options.actor1}` : ''};
+  }
+  .actor-2 {
+    ${options.actor2 ? `fill: ${options.actor2}` : ''};
+  }
+  .actor-3 {
+    ${options.actor3 ? `fill: ${options.actor3}` : ''};
+  }
+  .actor-4 {
+    ${options.actor4 ? `fill: ${options.actor4}` : ''};
+  }
+  .actor-5 {
+    ${options.actor5 ? `fill: ${options.actor5}` : ''};
+  }
+
+  }
 `;
 
 export default getStyles;
diff --git a/src/diagrams/user-journey/svgDraw.js b/src/diagrams/user-journey/svgDraw.js
@@ -108,6 +108,7 @@ export const drawCircle = function(element, circleData) {
   const circleElement = element.append('circle');
   circleElement.attr('cx', circleData.cx);
   circleElement.attr('cy', circleData.cy);
+  circleElement.attr('class', 'actor-' + circleData.pos);
   circleElement.attr('fill', circleData.fill);
   circleElement.attr('stroke', circleData.stroke);
   circleElement.attr('r', circleData.r);
@@ -247,15 +248,16 @@ export const drawTask = function(elem, task, conf) {
 
   let xPos = task.x + 14;
   task.people.forEach(person => {
-    const colour = task.actors[person];
+    const colour = task.actors[person].color;
 
     const circle = {
       cx: xPos,
       cy: task.y,
       r: 7,
       fill: colour,
       stroke: '#000',
-      title: person
+      title: person,
+      pos: task.actors[person].position
     };
 
     drawCircle(g, circle);