Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uses percentages for line width in the NAD #2264

Merged
merged 10 commits into from
Sep 24, 2024
Merged

Uses percentages for line width in the NAD #2264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
383972c
Uses percentages for line width in the NAD
Sep 18, 2024
5fd9417
Param tweaks
Sep 23, 2024
a7d1494
Merge branch 'main' into nad_readability
EstherDarkish Sep 23, 2024
f705ce5
WIP Disconnected nodes test
Sep 23, 2024
497ce90
Rollback to put the disconnect fix in another PR
Sep 23, 2024
ae2e4ae
Merge branch 'main' into nad_readability
EstherDarkish Sep 24, 2024
7d3edbc
NAD: Enlarge lines when zooming in a lot
Sep 24, 2024
f14e5fc
Merge branch 'main' into nad_readability
souissimai Sep 24, 2024
3f524e2
Merge branch 'main' into nad_readability
EstherDarkish Sep 24, 2024
8cb5317
Merge branch 'main' into nad_readability
EstherDarkish Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 37 additions & 9 deletions src/components/diagrams/networkAreaDiagram/network-area-diagram-content.jsx
View file
Open in desktop
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
Open in desktop
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%;
}
}
Loading