topic Re: Custom Visual component for Dashboards and Notebooks in Developer Q&A Forum

Custom Visual component for Dashboards and Notebooks

Zoltan — Fri, 24 Jan 2025 09:50:56 GMT

Hi,

We can't seem to be able to fit our requirements for data visualization into the current dashboard visual "Categorical", as we require some additional stacking / grouping.

Is there any plan in the future to be able to deploy our own corporate custom visual for dashboards and / or notebooks, that we could then select from the list of visuals?

Even if the settings page would be a json or a yaml, it would still be quite useful. There's a lot we could do without actually going with full blown custom app extension - without having to do the whole page with a custom app.

As an example, I have a dashboard where I already have 10 + timeseries bar chart.

Now, because of this request I have to add 2 custom non timeseries based stacked bar charts, it seems to me that currently my only option is to rebuild the whole page as a custom extension app page, but it means I have to rebuild the 10 existing visuals as well on the page (customers want all of this on one page).

Thanks,

Zoltan

Re: Custom Visual component for Dashboards and Notebooks

MikeleH — Fri, 24 Jan 2025 09:53:32 GMT

Hi @Zoltan ,

Can you be more specific about what you're missing with the categorical bar chart?

JFYI the visualizatiuon already supports stacking / grouping.

Re: Custom Visual component for Dashboards and Notebooks

Zoltan — Fri, 24 Jan 2025 10:48:14 GMT

Hi Mikele,

Thanks for the prompt reply.

I can't seem to find how to display these records, so that each bar is a data.area, and each bar is stacked by pg_int. I can do that with Bar chart, but Bar chart requires a time field. Histogram requires a range, that's not applicabe here either - it's just classical sub category.

For the sake of simplicity, here's a sample data that represents the structure that I fetch with some more complext DQL:

data json: """
[{
"pg_int": "1",
"data.area": "01A",
"num_items": 32730
},
{
"pg_int": "2",
"data.area": "02A",
"num_items": 8640
},
{
"pg_int": "1",
"data.area": "02A",
"num_items": 36276
},
{
"pg_int": "2",
"data.area": "02A",
"num_items": 4320
}]
"""

When I look at

https://developer.dynatrace.com/design/components-preview/charts/CategoricalBarChart/ it's quite straight forward how to do stacked bars based on sub categories, but I can't seem to find any information on how to achieve the same with

https://docs.dynatrace.com/docs/analyze-explore-automate/dashboards-and-notebooks/edit-visualizations/visualization-chart-bar-categorical

And neither the doc mentions anything about how to select column for stacking.

Screenshots attached.

Re: Custom Visual component for Dashboards and Notebooks

MikeleH — Mon, 27 Jan 2025 10:14:53 GMT

Hi @Zoltan ,

I think that the issue is the way in which your data is structured. Here are 2x examples that I just created:

Let me know if this helps 🙂

Re: Custom Visual component for Dashboards and Notebooks

ludovic-abraham — Mon, 27 Jan 2025 14:32:13 GMT

Hello,

I'm having similar issue with categorical visualization.

The proposed solution seems to work with test data, but I see the record content has to be at the root level.

By working with logs, I managed to build a record similar to your example but the created record is inside a field, not at the root.

If I take your example it would look like this:

data record(r = record(name = "01A", pg_int_1 = 32730, pg_int_2 = 0)), record(r =record(name = "02A", pg_int_1 = 36276, pg_int_2 = 8640))

How do you do to have the content of the record at the root level to be able to use categorical vizualisation ?

Regards

Re: Custom Visual component for Dashboards and Notebooks

MikeleH — Mon, 27 Jan 2025 14:49:07 GMT

Hi @ludovic-abraham

For that you could use the fieldsFlatten command - https://docs.dynatrace.com/docs/discover-dynatrace/references/dynatrace-query-language/commands/structuring-commands#fieldsFlatten

data record(r = record(name = "01A", pg_int_1 = 86598, pg_int_2 = 0)), record(r = record(name = "02A", pg_int_1 = 26253, pg_int_2 = 8640)) | fieldsFlatten r | fieldsRemove r

Re: Custom Visual component for Dashboards and Notebooks

ludovic-abraham — Mon, 27 Jan 2025 15:13:25 GMT

Hello @MikeleH ,

Thanks a lot, at first I thought it was not working with fieldsFlatten but the prefix added by this function seems to do the job and I confirm I'm able to use categorical visualization with it.

Again thank you

Regards

Re: Custom Visual component for Dashboards and Notebooks

Zoltan — Thu, 06 Feb 2025 09:22:36 GMT

Hi Mikele,

I was able to create the stacked bars with your suggestion.
Something that is still a bit bothering me is that with this solution I need to know up front all the stacking categories, and create fields from them.

fetch logs
...
| fieldsAdd pg_int_1 = if(pg_int == 1, 1), pg_int_2 = if(pg_int == 2, 1), pg_int_3 = if(pg_int == 3, 1), pg_int_4 = if(pg_int >= 4, 1)
| summarize by: {data.area}, pq_1 = sum(pg_int_1), pq_2 = sum(pg_int_2), pq_3 = sum(pg_int_3), pq_4 = sum(pg_int_4)

With timeseries bar chart, the stacking values are values of a specific field, so we don't have to know them up front:

fetch logs
...
| fieldsAdd pq_int_s = toString(pq_int)
| makeTimeseries by:{pq_int_s}, count()

Would it be possible to add one more field selector to the settings of the Categorical Bar Chart?

Something like

group by / stacked by field selector?

This way, the data's grouping could look the same as with time timeseries bar chart - we could just add by:{main_grouping, secondary_grouping}

Then select which one is the x axis grouping, which one is the stacking grouping

Btw, our custom visualization request is still applicable, as we have a request to visualize things like this - a custom heatmap:

Re: Custom Visual component for Dashboards and Notebooks

MikeleH — Tue, 11 Feb 2025 07:24:23 GMT

Hi @Zoltan ,

Thanks for the feedback, we will take this into account in our future iterations.

Regarding the Heatmap visualization, this is something that we're currently working on

Re: Custom Visual component for Dashboards and Notebooks

Zoltan — Fri, 14 Feb 2025 12:54:47 GMT

Hi Mikele,

Thanks for the info. The heatmap is a welcome addition, and it is greatly welcome.
Nevertheless, I'm still casting a vote for a "luggable custom visual, with some interface perhaps, that we could extend, or something similar".

I do understand though that this could become a complexity bomb.
On the other hand, if it would be feasible, it would allow your team to add official "pluggable" components as well.
I'd be happy to spend some time together to share some thoughts, or brainstorm on how it could be feasible, but I will be honest, I have not yet looked into the source code of the dashboards and notebooks.

Best Regards,

Zoltan