lavolp3 / MMM-AVStock

MagicMirror module for displaying stock price with Alphavantage API
MIT License
38 stars 18 forks source link

Enhancement request: Rotating values in table view #29

Closed requiemmg closed 3 years ago

requiemmg commented 3 years ago

HI @lavolp3 and thanks for the current update, very nice. Unfortunately, I habe quite a number of stocks to request, which takes up most of the page (I use mmm-pages to rotate pages). So, the new layout takes up more space and the nice graphs will not display, as the number of stocks is too big. Maybe, for table mode, you could make "pages", so that a maximum of x rows is shown (and graphs below) and rotate between the pages every x seconds? Would be great!

lavolp3 commented 3 years ago

Good idea, I was also thinking about a grid view, showing the ticker items in a grid. Let me work on it.

lavolp3 commented 3 years ago

New Version 2.1.0 includes a grid view. Have a look at it and let me know what you think! I have preferred this to the rotating table pages idea.

requiemmg commented 3 years ago

First: Thanks for the great work! As Grid view surely is a good idea and looks good, this is still only true for a limited number of assets. I have two problems:

First: I have about 30+ assets in my list, constantly growing as I keep investing in various things. No matter if I change the code or css, at some time I will run out of space or readabilty. Ticker is not a real alternative.

Second: The charts do not show up. Here's my config file:

{ module: "MMM-AVStock", position: "top_bar", //"bottom_bar" is better formode:ticker config: { apiKey : "removed", // https://www.alphavantage.co/ timeFormat: "DD-MM-YYYY HH:mm:ss", symbols : ["removed"], alias: ["removed"], tickerDuration: 45, // Ticker will be cycled once per this second. chartDays: 50, //Formode:series, how much daily data will be taken. (max. 90) chartWidth: 200, pollInterval : 1000*15, // (Changed in ver 1.1.0) - Only For Premium Account mode : "grid", // "table", "ticker", "series" direction: "column", showChart: "true", width: 600, decimals: 2, // number o decimals for all values including decimals (prices, price changes, change%...) candleSticks : true, //show candle sticks if mode is Series coloredCandles : true, //colored bars: red and green for negative and positive candles premiumAccount: false // To change poolInterval, set this to true - Only For Premium Account } },

lavolp3 commented 3 years ago

@requiemmg showChart is a boolean. You need to set true instead of "true".

lavolp3 commented 3 years ago

Try setting classes: "xsmall" and in custom.css you can set

#AVSTOCK .grid-wrap .stock_item {
  width: 100px;
}

or less.

can't offer more for the moment

requiemmg commented 3 years ago

Thanks, the classes: xsmall does help, but I liked table view more. Maybe you'll find time to add a per page view or scrolling solution sometime.

For the charts: They do not show up. I rewrote the config file from scratch (copy/paste from your wiki site), and let it running for more than one hour, but no charts are being shown.

Furthermore, another module which should show below (MMM-News) does not show up.

Screenshot (as you see, it shows the Name of the Asset which should be displayed as a chart, but only blank screen below. No difference if changing width or row/column view: https://imgur.com/a/C5XKRIP

Current config:

       {
            module: "MMM-AVStock",
            position: "upper_third", //"bottom_bar" is better for `mode:ticker`
            config: {
                apiKey : "removed", // https://www.alphavantage.co/
                classes: "xsmall",
                width: '100%',
                timeFormat: "DD-MM-YYYY HH:mm",
                symbols : ["removed"],
                alias: ["removed"], 
                tickerDuration: 20,
                chartDays: 90,
                mode : "grid",                  // "table" or "ticker"
                direction: "column",
                showChart: true,
                chartWidth: null,
                showVolume: true,
                chartInterval: "daily",          // choose from ["intraday", "daily", "weekly", "monthly"]
                movingAverage: {
                    type: 'SMA',
                    periods: [200],
                   },
                decimals : 2,
                chartType: 'line',                // 'line', 'candlestick', or 'ohlc'
                chartLineColor: '#eee',
                chartLabelColor: '#eee',
                coloredCandles: true,
                debug: false
                },
        },

Any ideas?

lavolp3 commented 3 years ago

Yes, width needs to be a number. Integer. Sorry for the confusion, I might have changed that just recently.

There's still a lot to do apparently

requiemmg commented 3 years ago

Thanks for your support.

config: { apiKey : "removed", // https://www.alphavantage.co/ classes: "xsmall", width: 800, timeFormat: "DD-MM-YYYY HH:mm",

rest unchanged. Does not change anything. Also not if set in ""

lavolp3 commented 3 years ago

@requiemmg Have a look at the latest commit V2.3.0. It inlcudes a multi-table layout. Let me know if that works for you!

requiemmg commented 3 years ago

It does, perfect now! Except that I still have the issue that the charts do not show. I just get a line with the index and value and percentage, but no graph is being displayed. Will open another issue.