Skip to content

Commit 0bb5cd1

Browse files
MindFreezeMindFreeze
committed
feat: single entities are now centered instead of at the top
1 parent 8f44975 commit 0bb5cd1

File tree

4 files changed

+17
-17
lines changed

4 files changed

+17
-17
lines changed

‎__tests__/__snapshots__/basic.test.ts.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,14 @@ exports[`SankeyChart matches a simple snapshot 2`] = `
3030
3131
</defs>
3232
33-
<path d="M0,0 C50,0 50,0 100,0 L100,97 C50,97 50,97.5 0,97.5 Z" fill="url(#gradient0.0.0)" fill-opacity="0.4"></path>
33+
<path d="M0,2.5 C50,2.5 50,0 100,0 L100,97 C50,97 50,100 0,100 Z" fill="url(#gradient0.0.0)" fill-opacity="0.4"></path>
3434
35-
<path d="M0,97.5 C50,97.5 50,103 100,103 L100,200 C50,200 50,195 0,195 Z" fill="url(#gradient0.0.1)" fill-opacity="0.4"></path>
35+
<path d="M0,100 C50,100 50,103 100,103 L100,200 C50,200 50,197.5 0,197.5 Z" fill="url(#gradient0.0.1)" fill-opacity="0.4"></path>
3636
3737
</svg>
3838
</div>
3939
40-
40+
<div class="spacerv" style="height:2.5px;"></div>
4141
4242
<div class="box type-entity" style="height:195px;">
4343
<div style="background-color:var(--primary-color);" title="2W " class="">

‎__tests__/__snapshots__/remaining.test.ts.snap‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ exports[`SankeyChart with remaining type entities matches snapshot 2`] = `
2525
2626
</defs>
2727
28-
<path d="M0,0 C50,0 50,0 100,0 L100,61.62162162162163 C50,61.62162162162163 50,61 0,61 Z" fill="url(#gradient0.0.0)" fill-opacity="0.4"></path>
28+
<path d="M0,69.5 C50,69.5 50,5 100,5 L100,66.62162162162163 C50,66.62162162162163 50,130.5 0,130.5 Z" fill="url(#gradient0.0.0)" fill-opacity="0.4"></path>
2929
3030
</svg>
3131
</div>
3232
33-
33+
<div class="spacerv" style="height:69.5px;"></div>
3434
3535
<div class="box type-entity" style="height:61px;">
3636
<div style="background-color:var(--warning-color);" title="2kW Total" class="">
@@ -69,16 +69,16 @@ exports[`SankeyChart with remaining type entities matches snapshot 2`] = `
6969
7070
</defs>
7171
72-
<path d="M0,0 C50,0 50,0 100,0 L100,63 C50,63 50,63.2879899767317 0,63.2879899767317 Z" fill="url(#gradient1.0.0)" fill-opacity="0.4"></path>
72+
<path d="M0,5 C50,5 50,0 100,0 L100,63 C50,63 50,68.2879899767317 0,68.2879899767317 Z" fill="url(#gradient1.0.0)" fill-opacity="0.4"></path>
7373
74-
<path d="M0,63.2879899767317 C50,63.2879899767317 50,68.5 100,68.5 L100,131.5 C50,131.5 50,126.60998747091463 0,126.60998747091463 Z" fill="url(#gradient1.0.1)" fill-opacity="0.4"></path>
74+
<path d="M0,68.2879899767317 C50,68.2879899767317 50,68.5 100,68.5 L100,131.5 C50,131.5 50,131.60998747091463 0,131.60998747091463 Z" fill="url(#gradient1.0.1)" fill-opacity="0.4"></path>
7575
76-
<path d="M0,126.60998747091462 C50,126.60998747091462 50,137 100,137 L100,200 C50,200 50,190 0,190 Z" fill="url(#gradient1.0.2)" fill-opacity="0.4"></path>
76+
<path d="M0,131.60998747091463 C50,131.60998747091463 50,137 100,137 L100,200 C50,200 50,195.00000000000003 0,195.00000000000003 Z" fill="url(#gradient1.0.2)" fill-opacity="0.4"></path>
7777
7878
</svg>
7979
</div>
8080
81-
81+
<div class="spacerv" style="height:5px;"></div>
8282
8383
<div class="box type-remaining_child_state" style="height:190px;">
8484
<div style="background-color:darkslateblue;" title="6kW Total
@@ -121,7 +121,7 @@ IDK" class="">
121121
122122
</defs>
123123
124-
<path d="M0,0 C50,0 50,0 100,0 L100,62.932367149758456 C50,62.932367149758456 50,63 0,63 Z" fill="url(#gradient2.0.0)" fill-opacity="0.4"></path>
124+
<path d="M0,0 C50,0 50,68.5 100,68.5 L100,131.43236714975845 C50,131.43236714975845 50,63 0,63 Z" fill="url(#gradient2.0.0)" fill-opacity="0.4"></path>
125125
126126
127127
<defs>
@@ -133,7 +133,7 @@ IDK" class="">
133133
134134
</defs>
135135
136-
<path d="M0,68.5 C50,68.5 50,62.932367149758456 100,62.932367149758456 L100,63 C50,63 50,68.56766917293233 0,68.56766917293233 Z" fill="url(#gradient2.1.0)" fill-opacity="0.4"></path>
136+
<path d="M0,68.5 C50,68.5 50,131.43236714975845 100,131.43236714975845 L100,131.5 C50,131.5 50,68.56766917293233 0,68.56766917293233 Z" fill="url(#gradient2.1.0)" fill-opacity="0.4"></path>
137137
138138
139139
<defs>
@@ -203,12 +203,12 @@ Blaa" class="">
203203
204204
</defs>
205205
206-
<path d="M0,0 C50,0 50,0 100,0 L100,63 C50,63 50,63 0,63 Z" fill="url(#gradient3.0.0)" fill-opacity="0.4"></path>
206+
<path d="M0,68.5 C50,68.5 50,68.5 100,68.5 L100,131.5 C50,131.5 50,131.5 0,131.5 Z" fill="url(#gradient3.0.0)" fill-opacity="0.4"></path>
207207
208208
</svg>
209209
</div>
210210
211-
211+
<div class="spacerv" style="height:68.5px;"></div>
212212
213213
<div class="box type-passthrough" style="height:63px;">
214214
<div style="background-color:red;" title="2kW " class="">
@@ -223,7 +223,7 @@ Blaa" class="">
223223
<div class="section" style="">
224224
225225
226-
226+
<div class="spacerv" style="height:68.5px;"></div>
227227
228228
<div class="box type-entity" style="height:63px;">
229229
<div style="background-color:red;" title="2kW " class="">

‎src/chart.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -361,8 +361,8 @@ export class Chart extends LitElement {
361361
}
362362
// calc margin betwee boxes
363363
const extraSpace = sectionSize - totalSize;
364-
const spacerSize = sizedBoxes.length > 1 ? extraSpace / (sizedBoxes.length - 1) : sectionSize;
365-
let offset = 0;
364+
const spacerSize = sizedBoxes.length > 1 ? extraSpace / (sizedBoxes.length - 1) : extraSpace / 2;
365+
let offset = sizedBoxes.length > 1 ? 0 : extraSpace / 2;
366366
// calc y positions. needed for connectors
367367
sizedBoxes = sizedBoxes.map(box => {
368368
const top = offset;

‎src/section.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export function renderSection(props: {
113113
const sizeProp = props.vertical ? 'width' : 'height';
114114
115115
return html`
116-
${i > 0 ? html`<div class="spacerv" style=${styleMap({ [sizeProp]: spacerSize + 'px' })}></div>` : null}
116+
${box.top > 0 ? html`<div class="spacerv" style=${styleMap({ [sizeProp]: spacerSize + 'px' })}></div>` : null}
117117
${extraSpacers
118118
? html`<div class="spacerv" style=${styleMap({ [sizeProp]: extraSpacers + 'px' })}></div>`
119119
: null}

0 commit comments

Comments
 (0)