List view - unformatted value

[themox]

Platform

Ubuntu Desktop 20.04

Node.js Version

16.14.0

MagicMirror Version

2.19.0

Module Version

v2.6.3

Description

Displaying stock prices in vertical format, not scrolling, using custom css When pulling down information, CSS allows formatting for changes (increase or decrease in value) using span.high and span.low respectively, but does not provide a span for values that are unchanged. Therefore these values do not come in well.

Expected behavior

There should be a span.static or something like it that allows custom CSS to be written for those values as well. Or maybe I just couldn't find it, in which case help, please! :)

Current behavior

No response

Possible solution

No response

Steps to reproduce

Run MMM-Jast in vertical mode with custom span.high and span.low values.

Here is the block of custom CSS I use for MMM-Jast on my mirror:

.jast-wrapper {
        display: inline;
        text-align: left;
}

.jast-wrapper {
        /*horizontal-align: left;*/
        overflow: hidden;
        --size: 20px;
        font-size: var(--size);
        line-height: calc(var(--size) * 1.22);
}

.jast-wrapper .jast-stock {
        width: 400px;
        border-style: none;
        border-width: 1px;
        padding-left: 0px;
        clear: left;
}


.jast-wrapper .jast-stock span.high {
        text-align: right;
        float: right;
}

.jast-wrapper .jast-stock span.low {
        text-align: right;
        float: right;
}

.jast-wrapper span.jast-change {

        display: inline-block;
        text-align: right;
        float: right;
        width: 60px;
        margin-right: 10px;
        padding-left: 10px;

}

Log

No response

config.js

Just showing the MMM-Jast config:


{
        module: "MMM-Jast",
        position: "top_right",
        config: {
                maxWidth: "100%",
                updateIntervalInSeconds: 300,
                fadeSpeedInSeconds: 3.5,
                scroll: "none", // One of ["none", "vertical", "horizontal"]
                useGrouping: false,
                currencyStyle: "code", // One of ["code", "symbol", "name"]
                lastUpdateFormat: "HH:mm",
                showColors: true,
                showCurrency: true,
                showChangePercent: true,
                showChangeValue: false,
                showChangeValueCurrency: false,
                showLastUpdate: true,
                showPortfolioValue: true,
                showPortfolioGrowthPercent: false,
                showPortfolioGrowth: true,
                numberDecimalsValues: 2,
                numberDecimalsPercentages: 1,
                virtualHorizontalMultiplier: 2,
                stocks: [
                        { name: "Apple", symbol: "AAPL", quantity: 1 },
                        { name: "Aerojet Rocketdyne", symbol: "AJRD", quantity: 1 },
                        { name: "Amazon", symbol: "AMZN", quantity: 1 },
                        { name: "B&N Education", symbol: "BNED", quantity: 1 },
                        { name: "Disney", symbol: "DIS", quantity: 1 },
                        { name: "Facebook", symbol: "FB", quantity: 1 },
                        { name: "GoPro", symbol: "GPRO", quantity: 1 },
                        { name: "Innovio", symbol: "INO", quantity: 1 },
                        { name: "Intel Corp", symbol: "INTC", quantity: 1 },
                        { name: "Lyft", symbol: "LYFT", quantity: 1 },
                        { name: "Moderna", symbol: "MRNA", quantity: 1 },
                        { name: "Nikola", symbol: "NKLA", quantity: 1 },
                        { name: "Microsoft", symbol: "MSFT", quantity: 1 },
                        { name: "Nintendo", symbol: "NTDOY", quantity: 1 },
                        { name: "Party City", symbol: "PRTY", quantity: 1 },
                        { name: "Peloton", symbol: "PTON", quantity: 1 },
                        { name: "Tesla", symbol: "TSLA", quantity: 1 },
                        { name: "United Airlines", symbol: "UAL", quantity: 1 },
                ]

        }
},// end MMM-Jast stock ticker

### Additional info

I would love to create pull requests for you and add features but I'm not sure how you're generating your code since it is mini-fied.  If you are open to that, I'd be interested in discussing further.

[jalibu]

Hi @themox,
thank you for your feedback.
I‘ll check if I‘ll add that in the next release.

[themox]

@jalibu Thanks - much appreciated on the help w/ CSS! It definitely improves but is not quite there. A suggestion would be to add a change value of 0.00 so it aligns with the others that have changes. I appreciate the module and the work you have put into it. My favorite of the available stock modules for MM.

[themox]

Here you can see what I'm trying to do with the Innovio line - no change to that stock value. Also trying to remove the circles from the change line, still experimenting with the CSS on that.

[jalibu]

Hi @themox ,
please checkout the development branch and give me feedback. Please also remove all your MMM-Jast related custom css. Your expected behaviour should now work out of the box.

[themox]

@jalibu That works great, thanks!

[jalibu]

fixed