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
