Brainstorm and Create a way to Automate Updates for DRS and Record Holder Leaderboards

[tehchives]

Currently, the DRS and Record Holder leaderboards use images that I created in a photo editor, but there is likely a way we can keep the background but superimpose plaintext drawn from the Database or other repo. This would make it much easier to update (either manually or, ideally, automatically as new filings and data are released).

[jergy2]

It would be relatively simple to make the same or similar display that is currently an image file using just HTML and some CSS.

Considering that as of now this information is apparently only updated manually, you could just manually modify the text of the HTML each time an update needs to be made. This would be easy to implement and maintain and suitable in the case of infrequent updates.

When there becomes a more active set of data that changes over time that would reflect the leaderboard info and rankings, then it would be suitable to automate this using javascript for example to fetch the information and update the text in the HTML.

[tehchives]

I communicated with jergy2 additionally on Discord and he provided the following code:

---

`

    <div class="numbers">
        <div style="margin-top: 30px;"></div>
        <div class="number-row">1</div>
        <div class="number-row">2</div>
        <div class="number-row">3</div>
    </div>

    <div class="list">
        <div class="title">
            <div>Ticker</div>
            <div>Record Holders</div>
        </div>
        <div class="list-item first-item">
            <div>BHF</div>
            <div>1,500,000</div>
        </div>
        <div class="list-item second-item">
            <div>PRU</div>
            <div>1,096,339</div>
        </div>
        <div class="list-item third-item">
            <div>T</div>
            <div>781,511</div>
        </div>
        <div class="list-item">
            <div>VZ</div>
            <div>462,587</div>
        </div>
        <div class="list-item">
            <div>IBM</div>
            <div>388,977</div>
        </div>
        <div class="list-item">
            <div>XOM</div>
            <div>308,630</div>
        </div>
        <div class="list-item">
            <div>CINF</div>
            <div>258,700</div>
        </div>
        <div class="list-item">
            <div>WFC</div>
            <div>231,886</div>
        </div>
        <div class="list-item">
            <div>PFG</div>
            <div>219,911</div>
        </div>
        <div class="list-item">
            <div>WMT</div>
            <div>209,870</div>
        </div>
    </div>
</div>

`<style>
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 0.8em;
height:20px;
}
.list-container {
display: flex;
flex-direction: row;
margin-top: 10px;
}
.numbers {
flex-shrink: 2;
}
.number-row {
text-align: right;
margin-right: 4px;
margin-bottom: 10px;
height: 36px;
}
.list {
background-color: white;
display: flex;
flex-direction: column;

    }
    .list-item-container {
        display: flex;
        flex-direction: row;
    }
    .list-item-number {
        width: 10px;
    }
    .list-item {
        min-width: 200px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: rgb(20, 79, 155);
        border-radius: 2px;
        padding: 2px;
        padding-left: 4px;
        padding-right: 4px;
        margin-bottom: 10px;
        border: 1px solid gray;
        font-size: 1.2em;
        color: white;
    }
    .first-item {
        background-color: rgb(236, 190, 8);
        color: black;
    }
    .second-item {
        background-color: rgb(135, 165, 201);
        color: black;
    }
    .third-item {
        background-color: rgb(214, 153, 64);
        color: black;
    }
</style>

` ` ---

which he said should output:

This could be repurposed not only to update more simply, but also to solve both leaderboard update problems (and future ones as well!)

I will be poking around in the Wix devtools to try and get this injected code to function properly. Thank you so much to @jergy2 !!

Edit - I am not sure why the above code is getting split into sections like that in this comment, but it's all a single block.

[tehchives]

Okay - I've figured it out! Got a custom element working with jergy's above code. There's cleanup work to do on both pages that I don't have time to do tonight, but this is very close to ready for a data update.

[JamesAlfonse]

WOOO! Exciting stuff. Thanks @jergy2 and @tehchives !

One step closer to automating that entire process 😁

[tehchives]

I've created some files to track sourcing and host this code over in wix-site-public - Tomorrow will update the pages themselves.