UI Kit data visualizations EAP

Hello everyone,

Following our RFC-49, I’m excited to announce that UI Kit data visualizations components are in Early Access Program (EAP). To start using this EAP, sign up using the Forge EAP form.

UI Kit data visualizations allow you to use chart components to organise and present data visually. For more detailed information about how to use the components, see here.

Best regards,
Jemma Swaak

5 Likes

Hi Jemma,

looking forward to use those :slight_smile:

Cheers,
paul

2 Likes

Hello,

I have been working with these today in a jira issue panel module and they feel and work great. Perfectly as expected. Slight question/feedback, I had was the decision behind a standalone component vs a property.

For example:

  • PieChart is a component and has a property to display it in isDonut shape.
  • BarChart is a component. HorizontalBarChart is a component.

Why isn’t there a boolean property to convert the BarChart to isHorizontal? Or asking it another way why is there no DonutChart component?

Consistency over the API would make this much easier to use and train others to use if possible. Either way is fine whichever is better for you, but I would just like to suggest some clean consistent format be chosen.

Thank you again, very happy with this! Very useful!

2 Likes

Hi @JemmaSwaak
Thanks for this update. It’s what I’m expecting.
About Single value, I’m confused with the data prop:

An array of numbers: The first number in the array is used as the display value, the second number in the array is used to calculate the increase/decrease percentage relative to the first number.

More intuitively, the first number is the previous value (e.g. 2500, like last month if we compared monthly) and the second number is the current value shown in the frontend (e.g. 5000). The increase/decrease percentage should be (5000 - 2500)/2500 = 100%.

Please take a look at this point and let me know if any questions.
Thanks,
YY1

Hi @Zishan

Thank you for your feedback, this is really valuable!

The reason why we initially decided to have multiple bar chart type is because horizontal charts have their axis flipped from a vertical chart, having different bar chart component gives us flexibility to add / modify functionality that only affects one direction.

Whereas all the props for a Donut and a Pie chart should behave the same no matter the visual state of the chart.

None of this is set in stone, which is why it is great to hear feedback during an EAP. We will take your feedback into consideration when working on the next stages of the visualisation components!

1 Like

Hi @YY1

Given the following code snippets:

This generates a single value chart with an increase indicator.

<SingleValueChart
  // 2500 - value shown in the frontend
  // 5000 - value used to calculate the increase percentage 
  data={[2500, 5000]}
/>

image
(Math.abs(5000 - 2500) / 5000) = 50%

This generates a single value chart with a decrease indicator

<SingleValueChart
  // 5000 - value shown in the frontend
  // 2500 - value used to calculate the decrease percentage
  data={[5000, 2500]}
/>

image
(Math.abs(2500 - 5000) / 2500) = 100%

Please let us know if this clears up the data prop of the single value chart, let us know how we could have worded it better / made it clearer.

Thank you for your feedback and for using the new visualisation components!

Thanks for the detailed explaination of the component.
Please also consider my above suggestion.

1 Like

Hi @YY1

Thank you for your suggestion!

I have raised this with the team that have created the visualisation components and they are taking this feedback onboard and will be revisiting the indicator functionality / calculation.

Cheers!

1 Like