diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html index 3afa1d410f2b40287c44bf1a9d30fd9d89cadcca..9d54cb342379ada779dc60d0516ff2d85ce0f406 100644 --- a/src/app/components/network-legend/network-legend.component.html +++ b/src/app/components/network-legend/network-legend.component.html @@ -25,6 +25,12 @@ <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color> </span> </td> + <td *ngSwitchCase="'diamond'"> + <span class="node {{ nodeGroup.value.shape }}" + [style.background-color]=nodeGroup.value.color + > + </span> + </td> <td *ngSwitchCase="'star'"> <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss index bba868ab615b7285bc0d2458f5ea1123763ae2ec..2bb0011222cae2b57c512ab7c5ce9880f0cf4339 100644 --- a/src/app/components/network-legend/network-legend.component.scss +++ b/src/app/components/network-legend/network-legend.component.scss @@ -19,6 +19,14 @@ div.legend { .text{ font-style: italic; } + .diamond { + height: 75%; + text-align: center; + transform: rotate(45deg); + width: 75%; + margin-left: 12.5%; + display: inline-block; + } .box{ // class "box" exists in bulma css, we need only small changes height: 100%; diff --git a/src/app/config.ts b/src/app/config.ts index da58c647057df73e70ab236265e95fe065994004..50bfb974ee5a098df53920f0811e4e507aa2b4a2 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -1,7 +1,7 @@ export interface NodeGroup { groupName: string; color: string; - shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box'; + shape: 'circle' | 'triangle' | 'star' | 'square' | 'image' | 'text' | 'ellipse' | 'box' | 'diamond'; type: string; image?: string; detailShowLabel?: boolean; diff --git a/src/index.html b/src/index.html index 267cf14b73e69522b4da02a25468670dc24d5a5a..008027054a28eadef07cedf3372539efad9c512b 100644 --- a/src/index.html +++ b/src/index.html @@ -36,7 +36,7 @@ <network-expander id="netexp1" config='{ - "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "box"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}}, + "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "diamond"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "circle"}}, "edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}}, "identifier": "symbol" }'