How to build an analytics dashboard using react-admin? - reactjs

I need some support or guidance on how to build an analytics/stats page using react-admin. I've googled ways to do so but I have found nothing so far and it looks like react-admin is too tight in the sense of customization.
What I need
So basically I need a way to count the number of posts, users, or even comments from a resource. Something show like this:
Can be seen as something like this on another independent page:
But basically, something where you can grab the data from your data provider and render it like a normal analytics board or something like that.
Is this a possible way to do it in react-admin? Are there other ways, like another 3rd party integration that could help me with this? Any suggestions I'll appreciate them!

In this case, you will have to:
Create a dashboard
Pass as a parameter to react-admin component.
Example: https://marmelab.com/react-admin/Tutorial.html#using-a-custom-home-page
In your dashboard, you will have to get the information and draw with other libs, and use an API to get the information.

Related

Generate shareable link feature in Django?

I have a Django Rest Framework application that is fed in data from a csv. I then use React to create dashboards and Widgets from that data. I want to be able to generate a link to share a read-only version of any dashboard, much like in Google docs etc. Anyone clicking on that link will be able to see the dashboard with all the charts and analytics etc. The link can be shared much like how you share a Google Forms link. I'm not sure how to go about doing that. Any help / pointers would be appreciated. Thank you!
I think theoretically you need to use a router on your react app (e.g. https://reactrouter.com/ ).
If you're using create-react-app, you can also refer to https://create-react-app.dev/docs/adding-a-router/#:~:text=Create%20React%20App%20doesn't,is%20the%20most%20popular%20one.) .
With this you can directly read parameters on a certain page within your react app, that you can then use to build a concrete call to the backend, to retrieve the necessary data to build your dashboard.
The 'link builder' functionality most likely needs to be implemented on the backend, so you can have the necessary parameters you need to gather the necessary data, maybe by using query strings.
If you want to make it more complex, you would need to implement on the backend a kind of tokenized access, that could store the full call parameters on the backend side, and associate them with a token of some kind, that you could then provide to your clients.
e.g. : http://djangoappxpto.com/link/12345abcd points to a react page component that then executes a fetch to http://djangoappxpto.com/api/getStats/12345abcd which once received by python would internally mean something like http://djangoappxpto.com/api/generateStatsReport/?param1=a&param2=b&param3=w&param4=aa .

how can access to the cell edited in tabulator with react

I'm using react tabulator, displaying the data works perfectly, but I need to allow that the user can add tags in some cells, it's not clear to me how to achieve this because the docs only have concise information about this and using the standard (vanilla js) library, I can't find a reacts way to achieve this
I'd like to connect the event with a redux dispatcher because I need to run an action when the user add or delete tags, but not sure if it's possible with this lib
I'd appreciate any help, guide, or clue about how can I achieve this, thank you so much
Use react-tabulator instead of tabulator

Will admin on rest play nicely with cloudinary/postgres on the same tab?

Before i start looking down this road i have different datasources that would need to be updated in the same tab if i was to attempt to use react-admin, wondering if i'll be able to modify it to do what i need?
For anyone else who happened to land here and had as little experience as i did when i asked this.... you can use the cloudinary widget in your react-admin app and pass the returned url off to your mutation no problem.

2sxc - Getting URL path from DNN link parameter / Tab ID

I am working on integrating a 2sxc content WebAPI feed into a ReactJS application.
I have managed to get a JSON feed of data into the application, and am in the process of mapping out the data.
I'm wondering what the best practice would be to "resolve" a URL which is coming through as a DNN Page/ Tab ID.
Below I will showcase the various points this is referenced...
First the Setup of the entity / data types...
Then this is an example entry with the data filled out... The page link / URL is set up to point to another internal page on the DNN website:
Finally you can see this data item come through as a JSON feed via the 2sxc API:
What is the best way to convert this piece of data into a URL which can be used in a SPA type application?
There isn't any "server-side" code going on, just reading a JSON feed on the client side...
My initial idea would be to parse this piece of data in JS, to extract the number then use something like this:
http://www.dotnetnuke.com/tabid/85/default.aspx
http://www.dotnetnuke.com/default.aspx?tabid=85
I was hoping someone with more experience would be able to suggest a better / cleaner approach.
Thanks in advance
If you were server-side in Razor you'd be doing something like this:
#using DotNetNuke.Common
View List
XXXX = Dnn.Tab.TabID or define a string with the tab id you want
I seem to have a vague memory that I saw somewhere that Daniel (2sxc) has a way to use Globals.NavigateUrl() or similar on the client side, but I have no idea where or if I did see that.
The Default.aspx?tabid=xx format will certainly work, as it's the oldest DNN convention and is still used in fallbacks. The urls aren't nice, but it's ok.
The reason you're seeing this is because the query doesn't perform the automatic lookup with the AsDynamic(...) does for you. There is an endpoint to look them up, but they are not official, so they could change and therefor I don't want to suggest that you use them.
So if you really want a nicer url, you should either see if DNN has a REST API for this, or you could create a small own 2sxc-api endpoint (in the api folder) just to look that up, then using the NavigateURL. Would be cool if you shared your work.

DotNetNuke -- Inserting URL parameters in forms

We are migrating our website to DotNetNuke and are looking to replicate the functionality of our survey page. Currently, on the bottom of every e-mail we send through our CRM system, there is a link to a satisfaction survey along with some parameters to pre-populate some of the fields. So the URL looks something like like:
/survey.aspx?ticketID=1234&userName=John+Doe
I found the custom module "helferlein_Form" which seems okay for actually creating the form that the user fills in, but I don't see a way to pre-populate the fields. DotNetNuke does let you insert tokens(ex: [Date:now], [User:username]), but I don't see a way to grab individual parameters from the URL. Is there something I'm missing that will let me do that?
I'm not familiar with that module either, but I would strongly recommend using Xmod for customized forms that allow you to easily grab url parameters.
I'm not sure about the module you reference.
However, in my experience Dynamic Forms from Data Springs would fit the bill perfect. It has the ability to pre-fill and even run custom SQL queries to get data.
You should definitely try our My Tokens module.
It allows you to access the URL parameters using [Get:ticketID] or [QueryString:tickedID]. You can also build SQL tokens that use these parameters to return a list of items for example to populate a dropdown.
Also try our Action Form module which integrates very nice with My Tokens.
If you have a module you like and want to use you can always write a little javascript to grab the variables out of the URL and pre-populate your form fields using javascript.

Resources