Available Widget Types

Currently available in beta

Admin Dashboard is currently available in beta, which means some of the features, specifications, and details provided herein are subject to change. We recommend checking back regularly for the most up-to-date information and viewing our roadmap in regard to the general availability release.

We currently provide a set of "base" widget types and a set of "custom" widget types as part of our default admin dashboard offering. Hyvä technology partners and other vendors may also provide additional widget types.

Base Widget Types

• Charts
  • Bar Chart
  • Line Chart
  • Pie Chart
• Checklist
• Links
• Number
• Text

Charts

Many of the widget types provided by Hyvä Commerce utilise charts as an effective way to showcase statistics and provide users with powerful visual representations. In order to be extensible, customisable, and ease the development process, we provide base implementations of some common chart types:

• Bar Chart
• Line Chart
• Pie Chart

Apex Charts

The chart-based widgets utilised by Hyvä Commerce are powered by ApexCharts 4.7.0, which comes bundled with the Hyva_AdminDashboardFramework module. There are a few other key chart-related files to be aware of:

Hyva/AdminDashboardFramework/view/adminhtml/web/js/lib/apexcharts-*.js

This file contains the minified ApexCharts library. The version is appended to the file name meaning apexcharts-4.7.0.js contains version 4.7.0 of the library.

 

Hyva/AdminDashboardFramework/view/adminhtml/requirejs-config.js

This file simply maps the ApexCharts library file to the ApexCharts alias for use elsewhere in the codebase. See the official Magento documentation on this topic for more information.

 

Hyva_AdminDashboardFramework::js/charts/apex-charts.phtml

This template is responsible for loading the ApexCharts library and making it available via the window.ApexCharts object before dispatching the dashboard-charts-ready event - in case developers wish to use the loading of this library as a trigger for their own code.

 

Hyva_AdminDashboardBaseWidgets::js/widget/default-chart.phtml

This template defines the chartWidget AlpineJS component which aims to serve as a base abstraction for other AlpineJS components created for other chart types. It contains a set of default chart configuration options to control things such as whether to show the chart toolbars and where to position the legend etc. It also provides a set of default options for when the chart is empty - ensuring grid lines, axis labels, and other elements are removed in favour of a message for the user.

The chartWidget component also provides the logic for receiving chart data, initialising the chart, and rendering the chart in the browser - including two extension points in the form of the beforeRender() and afterRender() functions.

Tip

See the official ApexCharts documentation for more information.

Bar Chart

• Class: Hyva\AdminDashboardBaseWidgets\Model\Widget\BarChart
• Display Type: bar_chart
• Templates:
  • HTML: Hyva_AdminDashboardBaseWidgets::widget/bar-chart.phtml
  • JavaScript: Hyva_AdminDashboardBaseWidgets::js/widget/bar-chart.phtml
• Alpine Component: barChartWidget

The barChartWidget component extends from the base chartWidget component and acts as the base for all bar chart widgets.

Line Chart

• Class: Hyva\AdminDashboardBaseWidgets\Model\Widget\LineChart
• Display Type: line_chart
• Templates:
  • HTML: Hyva_AdminDashboardBaseWidgets::widget/line-chart.phtml
  • JavaScript: Hyva_AdminDashboardBaseWidgets::js/widget/line-chart.phtml
• Alpine Component: lineChartWidget

The lineChartWidget component extends from the base chartWidget component and acts as the base for all line chart widgets.

Pie Chart

• Class: Hyva\AdminDashboardBaseWidgets\Model\Widget\PieChart
• Display Type: pie_chart
• Templates:
  • HTML: Hyva_AdminDashboardBaseWidgets::widget/pie-chart.phtml
  • JavaScript: Hyva_AdminDashboardBaseWidgets::js/widget/pie-chart.phtml
• Alpine Component: pieChartWidget

The pieChartWidget component extends from the base chartWidget component and acts as the base for all pie chart widgets.

Checklist

• Class: Hyva\AdminDashboardBaseWidgets\Model\Widget\CheckList
• Display Type: checklist
• Templates:
  • HTML: Hyva_AdminDashboardBaseWidgets::widget/checklist.phtml
  • JavaScript: Hyva_AdminDashboardBaseWidgets::js/widget/checklist.phtml
• Alpine Component: checklistWidget

Links

• Class: Hyva\AdminDashboardBaseWidgets\Model\Widget\Links
• Display Type: links
• Template: Hyva_AdminDashboardBaseWidgets::widget/links.phtml

Number

• Class: Hyva\AdminDashboardBaseWidgets\Model\Widget\Number
• Display Type: number
• Template: Hyva_AdminDashboardBaseWidgets::widget/number.phtml

Text

• Class: Hyva\AdminDashboardBaseWidgets\Model\Widget\Text
• Display Type: text
• Template: Hyva_AdminDashboardBaseWidgets::widget/text.phtml

Custom Widget Types

• Google CrUX History
• Orders By Country
• Order Volume
• Recent Orders
• Sales Funnel Activity

Google CrUX History

• Class: Hyva\AdminDashboardGoogleCruxHistoryWidget\Model\Widget\GoogleCruxHistory
• Display Type: template
• Templates:
  • HTML: Hyva_AdminDashboardGoogleCruxHistoryWidget::widget/google-crux-history.phtml
  • JavaScript: Hyva_AdminDashboardGoogleCruxHistoryWidget::js/widget/google-crux-history.phtml
• Alpine Component: cruxHistoryChart

Due to the bespoke nature of the chart used for this widget, it does not extend from any of the base chart implementations.

Warning

This widget type is only available when the Hyva_AdminDashboardGoogleCruxHistoryWidget module is installed and enabled.

Orders by Country

• Class: Hyva\AdminDashboardCustomWidgets\Model\Widget\OrdersByCountry
• Display Type: template
• Templates:
  • HTML: Hyva_AdminDashboardCustomWidgets::widget/orders-by-country.phtml
  • JavaScript: Hyva_AdminDashboardCustomWidgets::js/widget/orders-by-country.phtml
• Alpine Component: ordersByCountryWidget

The Alpine component for this widget type extends from the base pie chart widget component.

Order Volume

• Class: Hyva\AdminDashboardCustomWidgets\Model\Widget\OrderVolume
• Display Type: line_chart
• Alpine Component: lineChartWidget

Recent Orders

• Class: Hyva\AdminDashboardCustomWidgets\Model\Widget\RecentOrders
• Display Type: template
• Templates:
  • HTML: Hyva_AdminDashboardCustomWidgets::widget/recent-orders.phtml
  • JavaScript: Hyva_AdminDashboardCustomWidgets::js/widget/recent-orders.phtml
• Alpine Component: recentOrdersWidget

Sales Funnel Activity

• Class: Hyva\AdminDashboardCustomWidgets\Model\Widget\SalesFunnelActivity
• Display Type: template
• Templates:
  • HTML: Hyva_AdminDashboardCustomWidgets::widget/sales-funnel-activity.phtml
  • JavaScript: Hyva_AdminDashboardCustomWidgets::js/widget/sales-funnel-activity.phtml
• Alpine Component: customerSalesBehaviour