Migration guide v3.0.0

powsybl-single-line-diagram

LayoutParameter changes

feederInfoPrecision has been removed, as it was in conflict with the new way of dealing precision, based on the value unit: voltageValuePrecision, angleValuePrecision, powerValuePrecision.

CSS changes

New class sld-feeder-info to discriminate the elements generated from a FeederInfo

See next paragraph.

New classes sld-active-power/sld-reactive-power to discriminate more explicitly active/reactive power elements

In components.json, sld-arrow-p (resp. sld-arrow-q) is replaced by sld-active-power (resp. sld-reactive-power)

In CSS, before

.sld-arrow-p .sld-label {dominant-baseline: middle}
.sld-arrow-q .sld-label {dominant-baseline: middle}
(...)
.sld-arrow-p {fill:black}
.sld-arrow-q {fill:blue}

After

.sld-arrow-p {fill:black}
.sld-arrow-q {fill:blue}
(..)
.sld-feeder-info.sld-active-power {fill:black}
.sld-feeder-info.sld-reactive-power {fill:blue}

New sld-angle and sld-voltage classes to discriminate the text in the legend (nodes info)

By default, this is now displayed with following style:

.sld-angle, .sld-voltage {font: 10px "Verdana"}

New sld-legend class to discriminate the legend (nodes info) elements

No style is applied by default to this class

powsybl-network-area-diagram

CSS changes

There has been many changes in the CSS, so we advise you to apply your custom changes on the new CSS files.

Reasonable pixel size

All the values in the CSS files have been multiplied by 100: stroke-width, stroke-dasharray and font size.

New class nad-edge-path to discriminate lines drawn within nad-branch-edges and nad-3wt-edges.

Before

.nad-branch-edges polyline, .nad-branch-edges path {stroke: var(--nad-vl-color, lightgrey); stroke-width: 5; fill: none}
(...)
.nad-3wt-edges polyline {stroke: var(--nad-vl-color, lightgrey); stroke-width: 5; fill: none}
(...)
.nad-branch-edges .nad-disconnected polyline, .nad-3wt-edges .nad-disconnected polyline {stroke-dasharray: 10,10}
(...)
.nad-branch-edges .nad-overload polyline, .nad-branch-edges .nad-overload path {animation: line-blink 3s infinite}

After

.nad-branch-edges .nad-edge-path, .nad-3wt-edges .nad-edge-path {stroke: var(--nad-vl-color, lightgrey); stroke-width: 5; fill: none}
(...)
.nad-disconnected .nad-edge-path {stroke-dasharray: 10,10}
(...)
.nad-branch-edges .nad-overload .nad-edge-path {animation: line-blink 3s infinite}

New class nad-winding to discriminate winding element

Before

.nad-branch-edges circle {stroke: var(--nad-vl-color, lightgrey); stroke-width: 5; fill: none}
(...)
.nad-3wt-nodes circle {stroke: var(--nad-vl-color, lightgrey); stroke-width: 5; fill: none}

After

.nad-branch-edges .nad-winding, .nad-3wt-nodes .nad-winding {stroke: var(--nad-vl-color, lightgrey); stroke-width: 5; fill: none}

New class nad-busnode to discriminate bus nodes

Before

.nad-vl-nodes circle, .nad-vl-nodes path {fill: var(--nad-vl-color, lightblue)}

After

.nad-vl-nodes .nad-busnode {fill: var(--nad-vl-color, lightblue)}

Topological style classes

The classes nad-vlXXtoYY-ZZ have all been changed, and there's now only 9 of them for each base voltage interval, as the first color is now taken by the class nad-vlXXtoYY-line

Add phase-shifter arrow class

A new nad-pst-arrow class has been introduced, with following style:

.nad-pst-arrow {stroke: #6a6a6a; stroke-width: 4; stroke-linecap: round; fill: none}

Improved text nodes

New classes have been introduced for the new text nodes

.nad-text-nodes foreignObject {overflow: visible; color: black}
.nad-label-box {background-color: #6c6c6c20; width: max-content; padding: 10px; border-radius: 10px;}
.nad-legend-square {width: 20px; height: 20px; background: var(--nad-vl-color, black);}