Financial Chart - Beta

New topic in the right place to track my work in progress Financial Chart Custom Component.

@augustin.ziegler here is a Candlestick Chart with exponential moving averages 13 and 50 day.

React-Stockcharts is VERY specific about the format of the data. As I’m obtaining the data for my scenario with another process I’m putting the transformed CSV’s into a directory that the Control will obtain them from via a NodeJS WebServer (see below).

The format my module takes for the CSV Stock Data is to provide CSV delimited Stock Data with Header Columns;

Open,High,Close,Low,Volume,Date

Date format MUST be dd-mm-yyyy (e.g 17-01-2017)
This means single digits days of the month must be padded with '0’

Transform the data using PowerShell something like this;

  • Obtain your stock data from your source. Transform it for the correct date format and column headings
  • Export it to a folder removing quotes e.g
$1y | Select-Object | ConvertTo-Csv -NoTypeInformation -Delimiter "," | ForEach-Object { $_ -replace '"', '' } | ForEach-Object { $_ -replace '/', '-' } | ForEach-Object { $_ -replace ' 10:00:00 PM', '' } | ForEach-Object { $_ -replace ',1-', ',01-' } | ForEach-Object { $_ -replace ',2-', ',02-' } | ForEach-Object { $_ -replace ',3-', ',03-' } | ForEach-Object { $_ -replace ',4-', ',04-' } | ForEach-Object { $_ -replace ',5-', ',05-' } | ForEach-Object { $_ -replace ',6-', ',06-' } | ForEach-Object { $_ -replace ',7-', ',07-' } | ForEach-Object { $_ -replace ',8-', ',08-' } | ForEach-Object { $_ -replace ',9-', ',09-' } | out-file -encoding ASCII "c:\chartdata\AST-AX-1y.csv"

Here is the small Node Web Server Script that is the URI for the Control to get the data from. You can start that from PowerShell using;

# node server.js <datadir> <port>
& node server.js 'C:\chartdata' 10010

Here is the beta work in progress module if you want to test it. I’ve verified it works on two different machines. https://github.com/darrenjrobinson/UniversalDashboard.UDFinancialChart

Here is a sample UD using it

import-module UniversalDashboard.Community

if (Get-Module UniversalDashboard.UDFinancialChart) {
    Remove-Module UniversalDashboard.UDFinancialChart
}
import-module "$($env:USERPROFILE)\<path-to-module>\UniversalDashboard.UDFinancialChart\UniversalDashboard.UDFinancialChart.psm1" -Force 

Get-UDDashboard | Stop-UDDashboard

$Theme = New-UDTheme -Name "darrenjrobinson" -Definition @{
    '.dropdown-content'                                                                                 = @{
        'min-width' = '450px'
    }
    '.btn-floating'                                                                                     = @{
        'background-color' = '#26a69a'
    }
    '.collection .collection-item'                                                                      = @{
        'line-height' = '1.0rem'
        'padding'     = '5px 10px';
    }  
    '.ud-grid' = @{
        'color' = '#ffab40'
    } 
    '.card, .card-panel' = @{
         'color' = '#ffab40' 
     }
      
    '.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating)' = @{
        'color' = '#ffab40' 
    }

} -Parent DarkDefault


$myDashboard =  New-UDDashboard -Title "darrenjrobinson.com - Universal Dashboard Custom Financial Chart Component" -Content {    
    New-UdHtml -Markup "<b>Symbol:</b>AST</br>" 
        New-UDLayout -Columns 1 -Content {       
            New-FinancialChart -stockData "http://localhost:10010/AST-AX-3y.csv"   
        }
} -Theme $Theme

Start-UDDashboard -ListenAddress 127.0.0.1 -Port 10003 -Dashboard $myDashboard -Force

Cheers,
DR

4 Likes

Great work … Will give it a try in the next days …

Awesome work @darrenjrobinson especially on your first component. There are many helpful people in these forums to name a few:-
@adam @AlonGvili @BoSen29 @wsl2001 @mylabonline
who have all helped me in the past on custom components. So just putting it out there that if you feel your stuck in a dead-end tunnel, then have the code available like on github and I am sure either myself or another helpful member will try to assist.
I too have to work with a lot of financial data so very excited to try this out.

2 Likes

I’ve built a live version too for intraday live udpates (1 min intervals).
The bottom lines showing trade volume and the upper level the trades.

Now if I could only pass in parameters earlier from the PSModule I would be able to build a single Module with multiple graph types PowerShell Module Params accessible before componentDidMount() rather than a module per graph type.

DR

2 Likes

Some great progress this morning thx to @AlonGvili
I’ve been able to build a module with multiple graph types and with a little trickery get them to display concurrently on a page.

A couple of bugs to squish and an enhancement or two and I will be able to publish the module.

DR

3 Likes

Version 1 is now available.
Blog Post with the details here https://blog.darrenjrobinson.com/react-stockcharts-for-powershell-universal-dashboard/
GitHub Repo here https://github.com/darrenjrobinson/UniversalDashboard.UDFinancialChart
PowerShell Gallery here https://www.powershellgallery.com/packages/UniversalDashboard.UDFinancialChart

Enjoy,
DR

2 Likes

This is awesome! Nice work!

Just one comment. You can use Publish-UDFolder to serve that CSV for your stock data if you don’t want to start a node server: https://docs.universaldashboard.io/webserver/published-folders

Thx @adam
I went the Node Server route as it gave me complete control over MIME-Types and CORS etc. Does UDFolder allow MIME-Type configuration for differing file types?

UD uses the FIleExtensionsContentTypeProvider to set the mime types: https://github.com/dotnet/aspnetcore/blob/master/src/Middleware/StaticFiles/src/FileExtensionContentTypeProvider.cs#L22

That said, UD doesn’t offer the ability to configure them nor the ability to configure cors so if you want more control node seems like a good way to go.

1 Like

Version 1.0.1 of my UniversalDashboard.UDFinancialChart Module is available (PS Gallery). It includes an additional 4 charts as shown below.

Candle Stick Chart with Bollinger Band Overlay

Candle Stick Chart with MA

Candle Stick Chart with MACD Indicator

Candle Stick Chart with RSI Indicator

Enjoy,
DR

3 Likes

Looks amazing! FYI, if you want this to show up on the UD Marketplace, you can include the ud-component tag in your manifest.

https://marketplace.universaldashboard.io/

Thx. Ah, nice.

Is it possible to edit that in PSGallery rather than publishing another version with just the additional tag?

DR

No, I don’t think so. Maybe just add the tag when you publish a new release :wink:

A new release means additional charts.
I’m taking requests.
Which additional Financial Chart(s) would anyone like added?

DR

Final update.
Four New Charts
Powershell Gallery updated https://www.powershellgallery.com/packages/UniversalDashboard.UDFinancialChart/1.0.2 and now with the ud-component tag so it should also appear in the https://marketplace.universaldashboard.io/

Candle Stick Chart with SAR

Candle Stick Chart with Gann Fan

OHLC Char with Elder Ray Indicator

OHLC Chart with Elder Impulse Indicator

Enjoy,
DR

1 Like