feat: styling for all parameters added

docs/docs/configuration.md

@@ -48,7 +48,7 @@ Compatibility tests are included for latest LTS Python versions that have ``Secu
 | 3.8     | 14 Oct 2019 | 14 Oct 2024      | 3.8.17  |
 | 3.7     | 26 Jun 2018 | 27 Jun 2023      | 3.7.17  |
 
-{: .highlight }
+`{: .highlight }`
 >You can use ``multicloud-diagrams`` with ``Python`` versions ``<3.7`` that do not have official ``Security Support`` with your own verification.
 >
 >Since  ``27 Jun 2023`` Python ``3.7`` has no security support, ``multicloud-diagrams`` are still support this version (pipeline with full features compatibility check), however on next Python LTS releases

docs/docs/core-components/colors.md

@@ -8,86 +8,103 @@ date: 2023-08-16
 
 # Customization
 {: .d-inline-block }
+{: .no_toc }
 
-New (v0.3.12)
+New (v0.3.13)
 {: .label .label-green }
 
-## Style
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+## Use Style Object to override any parameter
+
+When passing ``style`` parameter, we can customize the representation of particular Vertex. Here is the list of most widely used
+parameters of style.
 
 ```python
 style = {
-    'fillColor': '#FF0000'
+    'fillColor': '#FF0000',
+    'fillOpacity': '50',
+    'shadow': '1',
+    'gradientColor': '#FFFF33',
+    'gradientDirection': 'north'
 }
 ```
 
-## Code Snippet:
+{: .highlight }
+Each Node in this documentation has full list of its style parameters. You can check all styles at ``Advanced for Geeks`` section.
+
+## Changing FillColor to RED (node with Error or Alarm):
+
+### Code Snippet:
+{: .no_toc }
 
 ```python
 {% root_include_snippet ../tests/core/test_colors.py color_red%}
 ```
 
 ## Rendering:
+{: .no_toc }
 
 ![layers](output/jpg/color_red.jpg)
 
-### Full XML dump:
-
-```xml
-{% root_include docs/core-components/output/drawio/color_red.drawio%}
-```
-
-### drawio file:
 
-Download generated ``color_red.drawio``:
+## Adding Opacity and Background Shadow:
 
-[Download](output/drawio/color_red.drawio){: .btn .btn-purple }
-
-
-## Code Snippet:
+### Code Snippet:
+{: .no_toc }
 
 ```python
-{% root_include_snippet ../tests/core/test_colors.py color_blue%}
+{% root_include_snippet ../tests/core/test_colors.py color_shadow_opacity%}
 ```
 
 ## Rendering:
+{: .no_toc }
 
-![layers](output/jpg/color_blue.jpg)
+![layers](output/jpg/color_shadow_opacity.jpg)
 
-### Full XML dump:
+## Gradient Fill
 
-```xml
-{% root_include docs/core-components/output/drawio/color_blue.drawio%}
-```
-
-### drawio file:
-
-Download generated ``color_blue.drawio``:
-
-[Download](output/drawio/color_blue.drawio){: .btn .btn-purple }
+When specifying ``gradient fill`` it is mandatory to set 3 style params:
+- fillColor
+- gradientColor
+- gradientDirection
 
+``gradientDirection`` can have the following values:
+- north
+- south
+- west
+- east
+- radial
 
 ## Code Snippet:
+{: .no_toc }
 
 ```python
-{% root_include_snippet ../tests/core/test_colors.py color_table%}
+{% root_include_snippet ../tests/core/test_colors.py color_gradient%}
 ```
 
 ## Rendering:
+{: .no_toc }
+![layers](output/jpg/color_gradient.jpg)
 
-![layers](output/jpg/color_table.jpg)
-
-### Full XML dump:
-
-```xml
-{% root_include docs/core-components/output/drawio/color_table.drawio%}
-```
 
-### drawio file:
-
-Download generated ``color_table.drawio``:
-
-[Download](output/drawio/color_table.drawio){: .btn .btn-purple }
+## Applying Colors to Table
 
+## Code Snippet:
+{: .no_toc }
 
+```python
+{% root_include_snippet ../tests/core/test_colors.py color_table%}
+```
 
+## Rendering
+{: .no_toc }
 
+![layers](output/jpg/color_table.jpg)

docs/docs/core-components/core-components.md

@@ -8,6 +8,7 @@ date: 2023-08-07
 ---
 
 # Core Components
+{: .no_toc }
 
 To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed.
 {: .fs-6 .fw-300 }

docs/docs/core-components/output/drawio/color_gradient.drawio

@@ -0,0 +1 @@
+<mxfile host="multicloud-diagrams" agent="PIP package multicloud-diagrams. Generate resources in draw.io compatible format for Cloud infrastructure. Copyrights @ Roman Tsypuk 2023. MIT license." type="MultiCloud"><diagram id="diagram_1" name="AWS components"><mxGraphModel dx="1015" dy="661" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="1"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: prod-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#FFFF33;gradientColor=#3333FF;html=1;gradientDirection=north;" parent="1" vertex="1"><mxGeometry width="69" height="72" as="geometry" /></mxCell></root></mxGraphModel></diagram></mxfile>

docs/docs/core-components/output/drawio/color_blue.drawio → docs/docs/core-components/output/drawio/color_shadow_opacity.drawio

@@ -1 +1 @@
-<mxfile host="multicloud-diagrams" agent="PIP package multicloud-diagrams. Generate resources in draw.io compatible format for Cloud infrastructure. Copyrights @ Roman Tsypuk 2023. MIT license." type="MultiCloud"><diagram id="diagram_1" name="AWS components"><mxGraphModel dx="1015" dy="661" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="1"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: prod-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#0000FF;gradientColor=none;html=1;" parent="1" vertex="1"><mxGeometry width="69" height="72" as="geometry" /></mxCell></root></mxGraphModel></diagram></mxfile>
+<mxfile host="multicloud-diagrams" agent="PIP package multicloud-diagrams. Generate resources in draw.io compatible format for Cloud infrastructure. Copyrights @ Roman Tsypuk 2023. MIT license." type="MultiCloud"><diagram id="diagram_1" name="AWS components"><mxGraphModel dx="1015" dy="661" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="1"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: prod-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#00FF00;gradientColor=none;html=1;fillOpacity=50;shadow=1;" parent="1" vertex="1"><mxGeometry width="69" height="72" as="geometry" /></mxCell></root></mxGraphModel></diagram></mxfile>

docs/docs/core-components/vertices_edges.md

@@ -15,10 +15,9 @@ through programming API or from YAML-based files.
 ## Vertex
 
 ```python
-def add_vertex(self, 
-               node_id: str, node_name: str, metadata: dict = None,
-               node_type: str = '', layer_name: str = None, layer_id: str = None,
-               fill_color: str = None, x: int = None, y: int = None)
+def add_vertex(self, node_id: str, node_name: str, metadata: dict = None, 
+               node_type: str = '', layer_name: str = None, layer_id: str = None, 
+               style: dict = None, x: int = None, y: int = None)
 ```
 
 | Mandatory     |                                                                                                                                                                                                       |
@@ -27,14 +26,14 @@ def add_vertex(self,
 | **node_name** | any value (FQDN, URL, alpha-numeric value, etc.)                                                                                                                                                      |
 | **node_type** | there is a defined list of supported node_types for rendering (**dynamodb**, **lambda_function**, etc.), if node type is not supported, fallback will be used. Each node on documentation page has node_type. |
 
-| Optional       |                                                                                     |
-|:---------------|:------------------------------------------------------------------------------------|
-| **metadata**   | key/value pairs used to represent additional information                            |
-| **layer_name** | vertices can be added to specific layer, if not specified the default layer is used |
-| **layer_id**   | for programmatic access layers can be referenced also by ID                         |
-| **fill_color** | if specified changes default Vertex fill color                                      |
-| **x**          | positioning Vertex on palette                                                       |
-| **y**          | positioning Vertex on palette                                                       |
+| Optional       |                                                                                                                                                                  |
+|:---------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **metadata**   | key/value pairs used to represent additional information                                                                                                         |
+| **layer_name** | vertices can be added to specific layer, if not specified the default layer is used                                                                              |
+| **layer_id**   | for programmatic access layers can be referenced also by ID                                                                                                      |
+| **style**      | if specified changes default Vertex styling (color, fillColor, opacity, etc.) Check [Customization](/docs/core-components/colors.html) section for more details. |
+| **x**          | positioning Vertex on palette                                                                                                                                    |
+| **y**          | positioning Vertex on palette                                                                                                                                    |
 
 ### Code Snippet NO Metadata:
 

multicloud_diagrams/__init__.py

@@ -146,39 +146,39 @@ def get_node_template(self, node_type: str) -> dict:
                 f'No such nodeType: {node_type} in the Library (using default fallback icon Info). Please contact maintainer to add it, or provide MergeRequest')
             return self.supported_vertex['fallback_vertex'].copy()
 
-    def add_snapshot(self, table_id='', table_name='', fill_color='', snapshot: str = '', width="300"):
+    def add_snapshot(self, table_id='', table_name='', style: dict = None, snapshot: str = '', width="300"):
         if not table_id:
             table_id = table_name
-        self.prepare_table(table_id=table_id, table_name=table_name, fill_color=fill_color, rows_count=1, width=width)
+        self.prepare_table(table_id=table_id, table_name=table_name, style=style, rows_count=1, width=width)
         self.prepare_row(1, snapshot, table_id, width)
 
-    def create_table(self, rows, table_id='', table_name='', fill_color='', width=300, layer_name: str = None, layer_id: str = None,
+    def create_table(self, rows, table_id='', table_name='', style: dict = None, width=300, layer_name: str = None, layer_id: str = None,
                      x: int = None, y: int = None):
         parent_id = str(self.get_layer_id(layer_name, layer_id))
         if not table_id:
             table_id = table_name
-        self.prepare_table(table_id=table_id, table_name=table_name, fill_color=fill_color, rows_count=len(rows),
+        self.prepare_table(table_id=table_id, table_name=table_name, style=style, rows_count=len(rows),
                            width=width, parent_id=parent_id, x=x, y=y)
 
         y = 0
         for index, item in enumerate(rows):
             y = y + 30
             self.prepare_row(index, item, table_id, width, y=y)
 
-    def add_map(self, table_id='', table_name='', fill_color='', map: dict = None, width="300", layer_name: str = None, layer_id: str = None,
+    def add_map(self, table_id='', table_name='', style: dict = None, map: dict = None, width="300", layer_name: str = None, layer_id: str = None,
                 x: int = None, y: int = None):
         rows = []
         if map is not None:
             rows = [f'<b>{name}</b>: {value}' for name, value in map.items()]
-        self.create_table(rows=rows, table_id=table_id, table_name=table_name, fill_color=fill_color, width=width, layer_name=layer_name, layer_id=layer_id,
+        self.create_table(rows=rows, table_id=table_id, table_name=table_name, style=style, width=width, layer_name=layer_name, layer_id=layer_id,
                           x=x, y=y)
 
     # add_table
-    def add_list(self, table_id='', table_name='', fill_color='', rows=None, width=300, layer_name: str = None, layer_id: str = None,
+    def add_list(self, table_id='', table_name='', style: dict = None, rows=None, width=300, layer_name: str = None, layer_id: str = None,
                  x: int = None, y: int = None):
         if rows is None:
             rows = []
-        self.create_table(rows=rows, table_id=table_id, table_name=table_name, fill_color=fill_color, width=width, layer_name=layer_name, layer_id=layer_id,
+        self.create_table(rows=rows, table_id=table_id, table_name=table_name, style=style, width=width, layer_name=layer_name, layer_id=layer_id,
                           x=x, y=y)
 
     def prepare_row(self, index, snapshot, table_id='', width=300, y=30):
@@ -195,18 +195,22 @@ def prepare_row(self, index, snapshot, table_id='', width=300, y=30):
         # Position Vertex based on X,Y cords
         self.update_vertex_coords_width_height_from_prev_version(mx_geometry, f'vertex:{table_id}:row:{index}')
 
-    def prepare_table(self, table_id='', table_name='', fill_color='', rows_count=0, width=300, parent_id: str = "1",
+    def prepare_table(self, table_id='', table_name='', style: dict = None, rows_count=0, width=300, parent_id: str = "1",
                       x: int = None, y: int = None):
-        style = self.get_node_template('list')['style']
 
-        if fill_color:
-            style += f"fillColor={fill_color}"
+        if style is None:
+            style = {}
+
+        node_template = self.get_node_template('list')
+
+        # Customization
+        customize(node_template=node_template, style=style)
 
         mx_cell = Et.SubElement(self.root,
                                 'mxCell',
                                 id=f'vertex:{table_id}:list',
                                 value=f'<b>{table_name}</b>',
-                                style=style,
+                                style=f"{node_template['style']}",
                                 parent=parent_id,
                                 vertex="1")
 
@@ -243,8 +247,6 @@ def add_vertex(self, node_id: str, node_name: str, metadata: dict = None, node_t
 
             # Customization
             customize(node_template=node_template, style=style)
-            # for (key, value) in style.items():
-            #     node_template['style'] = update_style_by_key(style_str=node_template['style'], key=key, value=value)
 
             parent_id = str(self.get_layer_id(layer_name, layer_id))
             mx_cell = Et.SubElement(self.root,

tests/core/test_colors.py

@@ -21,9 +21,9 @@ def test_color_red(self):
         # docs
         self.mcd = mcd
 
-    def test_color_blue(self):
+    def test_color_shadow_opacity(self):
         # docs
-        self.node_type = 'color_blue'
+        self.node_type = 'color_shadow_opacity'
 
         # given
         mcd = MultiCloudDiagrams()
@@ -32,28 +32,56 @@ def test_color_blue(self):
         mcd.add_vertex(node_id="arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name",
                        node_name='prod-lambda-name',
                        node_type='lambda_function',
-                       style={'fillColor': '#0000FF'})
+                       style={
+                           'fillColor': '#00FF00',
+                           'fillOpacity': '50',
+                           'shadow': '1'
+                       })
 
         # then
         # docs
         self.mcd = mcd
 
-    def test_color_table(self):
+    def test_color_gradient(self):
         # docs
-        self.node_type = 'color_table'
+        self.node_type = 'color_gradient'
 
         # given
         mcd = MultiCloudDiagrams()
 
         # when
-        rows = [
-            'IndexName',
-            'IndexSizeBytes',
-            'IndexStatus',
-        ]
-
-        mcd.add_list(table_name='LSI:users_to_model-users-idx', rows=rows, fill_color='#FF9933;')
+        mcd.add_vertex(node_id="arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name",
+                       node_name='prod-lambda-name',
+                       node_type='lambda_function',
+                       style={
+                           'fillColor': '#FFFF33',
+                           'gradientColor': '#3333FF',
+                           'gradientDirection': 'north'
+                       })
 
         # then
         # docs
         self.mcd = mcd
+
+
+def test_color_table(self):
+    # docs
+    self.node_type = 'color_table'
+
+    # given
+    mcd = MultiCloudDiagrams()
+    rows = [
+        'IndexName',
+        'IndexSizeBytes',
+        'IndexStatus',
+    ]
+    style = {
+        'fillColor': '#FF9933',
+    }
+
+    # when
+    mcd.add_list(table_name='LSI:users_to_model-users-idx', rows=rows, style=style)
+
+    # then
+    # docs
+    self.mcd = mcd