background color for legend

src/app/components/network-legend/network-legend.component.html

@@ -22,38 +22,38 @@
               </span>
             </td>
             <td *ngSwitchCase="'hexagon'">
-              <span class="node hexagon" [style.color]=nodeGroup.value.color>
+              <span class="node hexagon" [style.color]=nodeGroup.value.color.background>
                 &#x2B23;
               </span>
             </td>
             <td *ngSwitchCase="'triangle'">
-              <span class="node triangle" [style.border-bottom-color]=nodeGroup.value.color>
+              <span class="node triangle" [style.border-bottom-color]=nodeGroup.value.color.background>
               </span>
             </td>
             <td *ngSwitchCase="'triangleDown'">
-              <span class="node triangleDown" [style.border-top-color]=nodeGroup.value.color>
+              <span class="node triangleDown" [style.border-top-color]=nodeGroup.value.color.background>
               </span>
             </td>
             <td *ngSwitchCase="'diamond'">
               <span class="node diamond" 
-                    [style.background-color]=nodeGroup.value.color
+                    [style.background-color]=nodeGroup.value.color.background
               >
               </span>
             </td>
             <td *ngSwitchCase="'star'">
               <span class="node star"
-                    [style.border-bottom-color]=nodeGroup.value.color
-                    [style.color]=nodeGroup.value.color
+                    [style.border-bottom-color]=nodeGroup.value.color.background
+                    [style.color]=nodeGroup.value.color.background
               >
               </span>
             </td>
             <td *ngSwitchCase="'circle'">
-              <span class="node circle" [style.background-color]=nodeGroup.value.color>
+              <span class="node circle" [style.background-color]=nodeGroup.value.color.background>
               ...
               </span>
               </td>
             <td *ngSwitchDefault>
-              <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
+              <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color.background>
               </span>
               </td>
             <td>&nbsp;{{ nodeGroup.value.groupName }}</td>

src/index.html

@@ -35,7 +35,7 @@
 
   <network-expander id="netexp1"
                     config='{
-                      "nodeGroups": {"selectedNode": {"font": {"size": "18"} }, "0.5": {"font": "18px verdana blue", "type": "0.5er Instanz", "color": "green", "groupName": "0.5", "shape": "hexagon"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "#632345", "groupName": "patient group", "shape": "dot", "size": "50"}, "pugGroup": {"type": "woof woof", "color": "grey", "groupName": "Pug Group", "shape": "triangle", "image": "https://static.raymondcamden.com/images/2016/11/pug.png"}},
+                      "nodeGroups": {"selectedNode": {"font": {"size": "18"} }, "0.5": {"font": "18px verdana blue", "type": "0.5er Instanz", "color": "green", "groupName": "0.5", "shape": "star"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "#632345", "groupName": "patient group", "shape": "dot", "size": "50"}, "pugGroup": {"type": "woof woof", "color": "grey", "groupName": "Pug Group", "shape": "triangle", "image": "https://static.raymondcamden.com/images/2016/11/pug.png"}},
                       "edgeGroups": {"xxx": {"color": "black", "groupName": "xxx Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
                       "identifier": "symbol"
                     }'