From eb4a6fd2ed26baa36ee2cb7ea795345ea1331f4d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 16 Apr 2024 08:45:22 +0530 Subject: [PATCH] docs: Add quadrant point styling Co-authored-by: ilyes-ced <109927235+ilyes-ced@users.noreply.github.com> --- docs/syntax/quadrantChart.md | 83 +++++++++++++++++++ .../mermaid/src/docs/syntax/quadrantChart.md | 63 ++++++++++++++ 2 files changed, 146 insertions(+) diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index fdf866779..ba8063845 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -168,3 +168,86 @@ quadrantChart quadrant-3 Delegate quadrant-4 Delete ``` + +### Point styling + +Points can either be styled directly or with defined shared classes + +1. Direct styling + +```md +Point A: [0.9, 0.0] radius: 12 +Point B: [0.8, 0.1] color: #ff3300, radius: 10 +Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0 +Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0 +``` + +2. Classes styling + +```md +Point A:::class1: [0.9, 0.0] +Point B:::class2: [0.8, 0.1] +Point C:::class3: [0.7, 0.2] +Point D:::class3: [0.7, 0.2] +classDef class1 color: #109060 +classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px +classDef class3 color: #f00fff, radius : 10 +``` + +#### Available styles: + +| Parameter | Description | +| ------------ | ---------------------------------------------------------------------- | +| color | Fill color of the point | +| radius | Radius of the point | +| stroke-width | Border width of the point | +| stroke-color | Border color of the point (useless when stroke-width is not specified) | + +> **Note** +> Order of preference: +> +> 1. Direct styles +> 2. Class styles +> 3. Theme styles + +## Example on styling + +```mermaid-example +quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.9, 0.0] radius: 12 + Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10 + Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0 + Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0 + Campaign E:::class2: [0.5, 0.4] + Campaign F:::class3: [0.4, 0.5] color: #0000ff + classDef class1 color: #109060 + classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px + classDef class3 color: #f00fff, radius : 10 +``` + +```mermaid +quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.9, 0.0] radius: 12 + Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10 + Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0 + Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0 + Campaign E:::class2: [0.5, 0.4] + Campaign F:::class3: [0.4, 0.5] color: #0000ff + classDef class1 color: #109060 + classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px + classDef class3 color: #f00fff, radius : 10 +``` diff --git a/packages/mermaid/src/docs/syntax/quadrantChart.md b/packages/mermaid/src/docs/syntax/quadrantChart.md index d6793aea6..39bbcafa1 100644 --- a/packages/mermaid/src/docs/syntax/quadrantChart.md +++ b/packages/mermaid/src/docs/syntax/quadrantChart.md @@ -136,3 +136,66 @@ quadrantChart quadrant-3 Delegate quadrant-4 Delete ``` + +### Point styling + +Points can either be styled directly or with defined shared classes + +1. Direct styling + +```md +Point A: [0.9, 0.0] radius: 12 +Point B: [0.8, 0.1] color: #ff3300, radius: 10 +Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0 +Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0 +``` + +2. Classes styling + +```md +Point A:::class1: [0.9, 0.0] +Point B:::class2: [0.8, 0.1] +Point C:::class3: [0.7, 0.2] +Point D:::class3: [0.7, 0.2] +classDef class1 color: #109060 +classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px +classDef class3 color: #f00fff, radius : 10 +``` + +#### Available styles: + +| Parameter | Description | +| ------------ | ---------------------------------------------------------------------- | +| color | Fill color of the point | +| radius | Radius of the point | +| stroke-width | Border width of the point | +| stroke-color | Border color of the point (useless when stroke-width is not specified) | + +```note +Order of preference: +1. Direct styles +2. Class styles +3. Theme styles +``` + +## Example on styling + +```mermaid-example +quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.9, 0.0] radius: 12 + Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10 + Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0 + Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0 + Campaign E:::class2: [0.5, 0.4] + Campaign F:::class3: [0.4, 0.5] color: #0000ff + classDef class1 color: #109060 + classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px + classDef class3 color: #f00fff, radius : 10 +```