Skip to content

Commit

Permalink
Uses percentages for line width in the NAD (#2264)
Browse files Browse the repository at this point in the history 
* Uses percentages for line width in the NAD

---------

Signed-off-by: BOUTIER Charly <charly.boutier@rte-france.com>
  • Loading branch information
@EstherDarkish
EstherDarkish authored Sep 24, 2024
1 parent 03b9018 commit 58f132e
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 22 deletions.
46 changes: 37 additions & 9 deletions src/components/diagrams/networkAreaDiagram/network-area-diagram-content.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,65 +27,93 @@ const dynamicCssRules = [
cssSelector: '.nad-edge-infos', // data on edges (arrows and values)
belowThresholdCssDeclaration: { display: 'block' },
aboveThresholdCssDeclaration: { display: 'none' },
threshold: 2200,
threshold: 2500,
thresholdStatus: THRESHOLD_STATUS.ABOVE,
},
{
cssSelector: '.nad-label-box', // tooltips linked to nodes
belowThresholdCssDeclaration: { display: 'block' },
aboveThresholdCssDeclaration: { display: 'none' },
threshold: 3000,
threshold: 3500,
thresholdStatus: THRESHOLD_STATUS.ABOVE,
},
{
cssSelector: '.nad-text-edges', // visual link between nodes and their tooltip
belowThresholdCssDeclaration: { display: 'block' },
aboveThresholdCssDeclaration: { display: 'none' },
threshold: 3000,
threshold: 3500,
thresholdStatus: THRESHOLD_STATUS.ABOVE,
},
{
cssSelector: '[class^="nad-vl0to30"], [class*=" nad-vl0to30"]',
belowThresholdCssDeclaration: { display: 'block' },
aboveThresholdCssDeclaration: { display: 'none' },
threshold: 4000,
threshold: 12000,
thresholdStatus: THRESHOLD_STATUS.BELOW,
},
{
cssSelector: '[class^="nad-vl30to50"], [class*=" nad-vl30to50"]',
belowThresholdCssDeclaration: { display: 'block' },
aboveThresholdCssDeclaration: { display: 'none' },
threshold: 4000,
threshold: 12000,
thresholdStatus: THRESHOLD_STATUS.BELOW,
},
{
cssSelector: '[class^="nad-vl50to70"], [class*=" nad-vl50to70"]',
belowThresholdCssDeclaration: { display: 'block' },
aboveThresholdCssDeclaration: { display: 'none' },
threshold: 9000,
threshold: 27000,
thresholdStatus: THRESHOLD_STATUS.BELOW,
},
{
cssSelector: '[class^="nad-vl70to120"], [class*=" nad-vl70to120"]',
belowThresholdCssDeclaration: { display: 'block' },
aboveThresholdCssDeclaration: { display: 'none' },
threshold: 9000,
threshold: 27000,
thresholdStatus: THRESHOLD_STATUS.BELOW,
},
{
cssSelector: '[class^="nad-vl120to180"], [class*=" nad-vl120to180"]',
belowThresholdCssDeclaration: { display: 'block' },
aboveThresholdCssDeclaration: { display: 'none' },
threshold: 12000,
threshold: 36000,
thresholdStatus: THRESHOLD_STATUS.BELOW,
},
{
cssSelector: '[class^="nad-vl180to300"], [class*=" nad-vl180to300"]',
belowThresholdCssDeclaration: { display: 'block' },
aboveThresholdCssDeclaration: { display: 'none' },
threshold: 20000,
threshold: 80000,
thresholdStatus: THRESHOLD_STATUS.BELOW,
},
{
cssSelector: '.nad-disconnected .nad-edge-path',
belowThresholdCssDeclaration: { 'stroke-dasharray': '10, 10' },
aboveThresholdCssDeclaration: { 'stroke-dasharray': '0.5%, 0.5%' },
threshold: 2500,
thresholdStatus: THRESHOLD_STATUS.ABOVE,
},
{
cssSelector: '.nad-branch-edges .nad-edge-path, .nad-3wt-edges .nad-edge-path',
belowThresholdCssDeclaration: { 'stroke-width': '3' },
aboveThresholdCssDeclaration: { 'stroke-width': '0.25%' },
threshold: 1000,
thresholdStatus: THRESHOLD_STATUS.ABOVE,
},
{
cssSelector: '.nad-branch-edges .nad-winding, .nad-3wt-nodes .nad-winding',
belowThresholdCssDeclaration: { 'stroke-width': '3' },
aboveThresholdCssDeclaration: { 'stroke-width': '0.25%' },
threshold: 1000,
thresholdStatus: THRESHOLD_STATUS.ABOVE,
},
{
cssSelector: '.nad-vl-nodes circle.nad-unknown-busnode',
belowThresholdCssDeclaration: { 'stroke-width': '3' },
aboveThresholdCssDeclaration: { 'stroke-width': '0.25%' },
threshold: 1000,
thresholdStatus: THRESHOLD_STATUS.ABOVE,
},
];

function NetworkAreaDiagramContent(props) {
Expand Down
26 changes: 13 additions & 13 deletions src/nad-index.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
.nad-branch-edges .nad-edge-path,
.nad-3wt-edges .nad-edge-path {
stroke: var(--nad-vl-color, lightgrey);
stroke-width: 5;
stroke-width: 0.25%;
fill: none;
}
.nad-branch-edges .nad-winding,
.nad-3wt-nodes .nad-winding {
stroke: var(--nad-vl-color, lightgrey);
stroke-width: 5;
stroke-width: 0.25%;
fill: none;
}
.nad-text-edges {
stroke: black;
stroke-width: 3;
stroke-width: 0.2%;
stroke-dasharray: 6, 7;
}
.nad-disconnected .nad-edge-path {
Expand All @@ -23,17 +23,17 @@
}
.nad-vl-nodes circle.nad-unknown-busnode {
stroke: var(--nad-vl-color, #808080);
stroke-width: 5;
stroke-width: 0.25%;
stroke-dasharray: 5, 5;
fill: none;
}
.nad-hvdc-edge polyline.nad-hvdc {
stroke: grey;
stroke-width: 20;
stroke-width: 1%;
}
.nad-pst-arrow {
stroke: #6a6a6a;
stroke-width: 4;
stroke-width: 0.2%;
stroke-linecap: round;
fill: none;
}
Expand Down Expand Up @@ -79,7 +79,7 @@ path.nad-arrow-in:not(.nad-state-in .nad-arrow-in) {
font: 20px serif;
dominant-baseline: middle;
stroke: #ffffffaa;
stroke-width: 10;
stroke-width: 8;
stroke-linejoin: round;
paint-order: stroke;
}
Expand Down Expand Up @@ -335,34 +335,34 @@ g.nad-disconnected > g.nad-disconnected { /* When both edges of a line are disco
80%,
100% {
stroke: var(--nad-vl-color, black);
stroke-width: 5;
stroke-width: 0.25%;
}
40% {
stroke: #ffeb3b;
stroke-width: 15;
stroke-width: 0.75%;
}
}
@keyframes node-over-blink {
0%,
80%,
100% {
stroke: white;
stroke-width: 5;
stroke-width: 0.25%;
}
40% {
stroke: #ff5722;
stroke-width: 15;
stroke-width: 0.75%;
}
}
@keyframes node-under-blink {
0%,
80%,
100% {
stroke: white;
stroke-width: 5;
stroke-width: 0.25%;
}
40% {
stroke: #00bcd4;
stroke-width: 15;
stroke-width: 0.75%;
}
}

0 comments on commit 58f132e

Please sign in to comment.