618 new react clip-art like graphics for your dashboards

So was just looking at random react components out there and stumbled upon this https://justinlettau.com/react-undraw/ and I thought the graphics looked really nice, and would make a great component to fill any blank spaces you may have on your dashboard with some beautiful professional looking graphics.


I have plonked this on the powershell gallery which will in-turn synchronize to the powershell universal dashboard market place. I know I am going to look at implementing some of these graphics into my dashboard tomorrow :smiley:

6 Likes

Fancy! I gotta try these!
Keep em flowin’

1 Like

Thanks man…the only thing is as I imported the whole package it is a massive 13mb…but hopefully you will not notice those 13 floppy disks of data flowing through your hyper-speed work network. Just to put the icing on the cake I even did a short blog on this tonight, as well as building it tonight, as well as getting 4 kids to bed superman :roll_eyes: :rofl:

3 Likes

13 MB for some fancyness is a decent tradeoff :open_mouth:
Damn dude, does UK time go slower than the rest of the world? Or did you clickertrain your kids? :open_mouth:

no man I cut back on my smoking habit, and just smash out code instead :cowboy_hat_face: got to clean up my act. might have to post some before and after pics of some dashboard pages I change tomorrow. The main thing to me in designing something is consistency…now UD users have 618 consistent illustrations to choose from :smiley:

1 Like

Nice! These look awesome! Solid work again! You’ve got a typo in the Color parameter though :wink:

2 Likes

Need a snus?
I look forward to said before and after pics dude :slight_smile:

As much as i fancy the GB English, Adam has a fair point. Most custom components and UD in general is built with US English, and might cause some confusion. Go for a good ol’ alias? :slightly_smiling_face:

1 Like

Will look to modify function to change this parameter name, or add an alias for it. Thanks for the feedback :smile:

Now published a 1.0.1 version onto the powershell gallery with the -Color parameter as the name for it, also went all out and took another screen-grab and made a change to the picture for the icon to be displayed as well as modification to the syntax highlighter code.

1 Like

Haha I was just jokin around :laughing:

Even though Color is the correct spelling of it :stuck_out_tongue_closed_eyes:

Ok nothing to special here, but it now looks more consistent. So here is the before picture:-


The graphic was borrowed from some random internet address, and had the map to the other side, and above and below this I had random parallax images.
So now after implementing some New-UDunDraw images I now have:-

See how consistent the dashboard looks now…all the same type of looking images

1 Like

Dude. That looks pro!

1 Like

Your the boss, boss. Wanted to keep the naming consistent with all the other commands using the incorrect spelling :grinning:

1 Like

Thanks man :sunglasses: I thought this would be some handy clipart to bring to the UD world.

Dude,
You’re a frontend pro :open_mouth:

2 Likes

Seems like this is my most popular component for universal dashboard. So made another clipart like component, that literally has an unlimited number of high quality images for your dashboard. I have now published New-UDUnSplash to the marketplace here:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDUnSplash
which has a nice README I wrote this morning on it.
Hoping this will be as popular as the New-UDunDraw component. I will certainly be using these images from www.unsplash.com on my dashboard through this component. :grinning:

4 Likes

Great Job adam, i think your next step is to combine all of your custom components in one module.
this will make it easier for any one to find all of your awesome creation in one module.
i was able to do that as a preparation for V3 its much easier than install each component individually.

1 Like

This is fantastic, can’t believe I’ve only just discovered this! Great job @psDevUK as always :+1:

Do you have any links to pages that list out all the drawings that can be used? I noticed that the link in your blog goes to a 404 page so it might have been moved. I had a look here https://undraw.co/search but the names don’t seem to match up (perhaps this site has new images that aren’t available in the module?).

Cheers.

1 Like

Thanks @tom.obrien this does seem to be my most popular custom component I released. I just went to https://undraw.co/search and did a search for fatherhood and see that image returned…all the image names will be listed in the function PS1 file. But yeah I did do this a while ago, and visiting https://www.npmjs.com/package/react-undraw I see they last updated it 1 month ago, so I am guessing as I did mine in December 2019 I am a good few versions behind…It does take time to do these custom components, but if you after the latest and greatest up-to-date version then it looks like I need to put on my building hat and build it again.

Funny you say that, after I sent that post I did open up the module and found the parameter set validation and put that in an array to create a dashboard with all of the images and their param value names! It’s not as easy as the search function on undraw.co but seems to do the trick!

Yeah looks like a lot of them are included but I guess as with all things they’ve added some new ones since then!

A new version would be fantastic but I appreciate it takes a lot of effort to make these components :slight_smile:

I remember when I released this component it was huge in file size,as it included the images with it…if you look through the change logs you will see:

  • Illustrations are no longer included! You must download SVG files from unDraw directly, and place the files in an undraw folder in the root of your project.
  • Remove setDefaultProps method. Use defaultProps instead.

I cannot seem to find a download all button on the undraw website…so first step will be a script needs cooking up to download all the svg images automatically, as I do not want to do this manually :slight_smile:
Ok scrub that seen another download so this did have 618 images it has now doubled and in file size
React component library for undraw.co (1263 illustrations)
Need to make sure these are all included as params:-
https://github.com/vdelacou/iblis-react-undraw/tree/master/src/components