Dashboard Goals (dashgoals)

This dashboard is constructed as a module, but the front-end interface is shown in the Dashboard page. It shows valuable Traffic, Conversion, Average Cart Value and Sales forecasts, depending on the active sales through the timeline.

Main block components

Header part of the block

  • Chart material icon - icon identifying the block.

  • Forecast - the title of the block.

  • Active year - displays the current year information.

  • Arrows - switching the year forward or backward by one step.

  • Refresh icon - once clicked, refreshes the whole block with the updated information.

Configuration grid wheel

Allows to manually update the values of the Forecast chart. Once clicked, there will be a UI animation in the same block, flipping down the configuration table from Tables Hoverable UI Kit. There are these elements:

  • 12 months.

  • Each has Traffic.

  • Conversion Rate (percentage value).

  • Average Cart Value.

  • Sales (automatically generated).

  • Save - this call-to-action button (from Button Basics UI Kit), saves the desired configuration and closes the table, refreshes the page.

Tabs

The component is made from the Button With Radio Buttons UI Kit. Custom tabs are made with different color circles and titles. These are:

  • Purple circle and Traffic.

  • Green circle and Conversion.

  • Blue circle and Average Cart Value.

  • Orange circle and Sales.

If the one of the tabs is active and showing the information, it will be shown as selected and greyed.

The chart

The information chart is made aligned with the X and Y coordinates.

X - shows the timeline of the annual year, with the 4 months.

Y - shows the value coordinates from negative to positive.

Last updated