Passing arrays to react component - Solved

Hi All, so I don’t ask for it often but I am in need of some help…I have developed a cross-browser WordTree chart I have put a copy on github with a readme and demo included here…


So this all works great, everything works…great…however if I try and read the data from a text file or I manually do not paste the data in then it doesn’t work :-1: so literally I felt I wasted today at work, as I was able to concat the SQL results to make sentences…and this chart even handled the 270,000+ rows I pasted into it…however no matter how I format my text file to be read as an array, and using [array] and [io.system.readallline] and all sorts…felt I exhausted every avenue…I could see this being really useful, if you could actually dynamically pass the array list to it…can anyone explain, or figure this out, as I would like to plonk this on the marketplace for others to use…but having to statically provide the data seems a bit rubbish…so please help a brother in need.

can you upload to gh the real js files and not the bundled one, so we can take a look at the source code :+1:

1 Like

this what you after bud https://github.com/psDevUK/UDWordTree/blob/master/Components/UDWordTree.jsx
This is where i was getting my info for it from https://react-google-charts.com/wordtree-chart

So like if I just have a text file that is sentences, it is missing the enclosing [ ] brackets in the react inspector…however if I add the [ ] to the variable holding the get-contents it formmats it wrong
Capture
So like results 0 and 1 are formatted correctly as I edited these…it is automatically adding the speech marks…I did see they had some regect to determine what a sentence is…been looking at this same problem for too long now
Yo @BoSen29 could I use the Invoke-UDJavaScript to call a javascript formatted array? I tried but my VSCODE seems to not like the idea…

Just for my understanding, the problem is also occurring with the example in your projects ReadMe?

I do not have a laptop here as it is time to sleep but one thing that came to my mind is that the data is rendered (in PS or JS) as it is only 1 depth. Like in ConvertFrom- Json -Depth 1 … This should return exactly this format … Maybe there is somewhere such an implementation from Powershell to JS but should impact other components too … Just some thoughts :wink:

The read me example works…but this means you have to manually provide the data…I would like to be able to get this from a text file or dynamic variable. I cannot seem to find a way to do this

1 Like

Can you please past in your code to import the file content? :slight_smile: Including your file content …

Will keep looking on this tomorrow,need to get some sleepand try using get content woth foreach and return every item as [array] and then invoke it , the invoke will create new array like the root array

1 Like

Hope I understood the problem and this one is helping you:

file UDWordTree_data.txt

UniversalDashboard is Powershell most popular web framework
Powershell UniversalDashboard works on all platforms
Powershell UniversalDashboard is awesome
Powershell UniversalDashboard is versatile
Powershell UniversalDashboard is perfect
Powershell UniversalDashboard is great value
Powershell UniversalDashboard is easy to use
Powershell UniversalDashboard great for displaying data
Powershell UniversalDashboard great for creating bespoke applications
Powershell UniversalDashboard great for presentations
Powershell UniversalDashboard has many charts
Powershell UniversalDashboard has many components
Powershell UniversalDashboard has a forum
Powershell UniversalDashboard has a marketplace

Code

#read file content
$Data = Get-Content "UDWordTree_data.txt"

#init list variable
[System.Collections.ArrayList]$UDWordTreeData = @()

#foreach file content and add to list
$Data | %{
    $UDWordTreeData.Add(@([string]$_)) | Out-Null
}

#test variable format
ConvertTo-Json $UDWordTreeData

Json Output

[
    [
        "UniversalDashboard is Powershell most popular web framework"
    ],
    [
        "Powershell UniversalDashboard works on all platforms"
    ],
    [
        "Powershell UniversalDashboard is awesome"
    ],
    [
        "Powershell UniversalDashboard is versatile"
    ],
    [
        "Powershell UniversalDashboard is perfect"
    ],
    [
        "Powershell UniversalDashboard is great value"
    ],
    [
        "Powershell UniversalDashboard is easy to use"
    ],
    [
        "Powershell UniversalDashboard great for displaying data"
    ],
    [
        "Powershell UniversalDashboard great for creating bespoke applications"
    ],
    [
        "Powershell UniversalDashboard great for presentations"
    ],
    [
        "Powershell UniversalDashboard has many charts"
    ],
    [
        "Powershell UniversalDashboard has many components"
    ],
    [
        "Powershell UniversalDashboard has a forum"
    ],
    [
        "Powershell UniversalDashboard has a marketplace"
    ]
]

And its working in your demo

Import-Module -Name universaldashboard.Community -RequiredVersion 2.8.1
Import-Module 'universaldashboard.UDWordTree'

Get-UDDashboard | Stop-UDDashboard

$theme = New-UDTheme -Name 'Basic' -Definition @{
    'main' = @{
        'padding-left'   = '5px'
        'padding-right'  = '5px'
        'padding-top'    = '5px'
        'padding-bottom' = '5px'
    }
} -Parent 'Default'

Start-UDDashboard -Port 1000 -Dashboard (
    New-UDDashboard -Title 'Powershell UniversalDashboard' -Theme $theme -Content {
        New-UDRow -Columns {
            New-UDColumn -Size 12 -Content {
                #read file content
                $Data = Get-Content "UDWordTree_data.txt"

                #init list variable
                [System.Collections.ArrayList]$UDWordTreeData = @()

                #foreach file content and add to list
                $Data | %{
                    $UDWordTreeData.Add(@([string]$_)) | Out-Null
                }

                New-UDWordTree -Id "WORDTREE"-width "100%" -height "400px" -data { $UDWordTreeData } -word "UniversalDashboard"
            }
        }
    }
)
1 Like

Another think that came to my mind is that for such scenarios/problems a wrapper function like Out-UDTableData would be great.

Or doing my above code in the main function and accept only a string list.
But this will not be possible with the invoke command.

I can write that for you if you want?

1 Like

Man @augustin.ziegler I was so close but no cigar as they used to say…dude I cannot thank you enough…you made me feel pretty incompetent by fixing the issue, I was really close, but wasn’t doing the .Add method or the [string] or doing it to out-null but wow, you fixed the issue! :astonished: :grin:
I can now chuck this on the marketplace with your name on it as well, as yesterday I got over 270,000+ rows showing in this WordTree and it rendered amazingly fast considering the data.
Just need to implement a little search box to dynamically change the word it filters on, and could see this being so useful for analyzing huge amounts of data (if the data is words) also means all results on one page…seriously thank you so much legend!

1 Like

Seriously man all the google charts look like they need arrays to work…as they are all fully cross-browser compatible I will look into doing some more now, as you have solved the riddle of passing the data in a nice manner :+1:

No problem … I also had a glance on the Google Timeline chart … As i already opened an issue for this also can fit to UA

Maybe we can work on this one together?

1 Like

For sure man…team-work makes the dream-work…Happy I could get the timeline built, chuck a copy on github and then do some coding…
There is hardly any dependencies on these charts so will put this at the top of my R&D list

1 Like