Skip to content

Available Widget Types

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

The widget contracts themselves live in the Hyva_AdminDashboardApi module. The classes listed below are the concrete widgets shipped by the runtime modules Hyva_AdminDashboardWidgets, Hyva_AdminDashboardCmsWidgets, and Hyva_AdminDashboardGoogleCruxHistoryWidget.

Widget Types

Abandoned Carts

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\AbandonedCarts
  • Display Type: date-interval-table
  • Template: Hyva_AdminDashboardFramework::widget/table.phtml

Average Order Value

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\AverageOrderValue
  • Display Type: template
  • Templates:
    • HTML: Hyva_AdminDashboardWidgets::widget/average-order-value.phtml
    • JavaScript: Hyva_AdminDashboardFramework::js/widget/date-interval.phtml
  • Alpine Component: dateIntervalWidget

Best Selling Products

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\BestSellingProducts
  • Display Type: table
  • Template: Hyva_AdminDashboardFramework::widget/table.phtml

Charts

Many of the widget types provided by Hyvä Commerce utilize charts as an effective way to showcase statistics and provide users with powerful visual representations. To stay extensible, customizable, and easy to work with, we provide base implementations of some common chart types:

Apex Charts

The chart-based widgets used 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, so apexcharts-4.7.0.js contains version 4.7.0 of the library.

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

This file maps the ApexCharts library file to the ApexCharts alias for use elsewhere in the codebase. See the official Magento documentation on RequireJS mapping 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_AdminDashboardFramework::js/widget/default-chart.phtml

This template defines the chartWidget Alpine.js component, which serves as a base abstraction for the Alpine.js 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. 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 favor of a message for the user.

The chartWidget component also provides the logic for receiving chart data, initializing 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\AdminDashboardFramework\Model\Widget\AbstractBarChart
  • Display Type: bar_chart
  • Templates:
    • HTML: Hyva_AdminDashboardFramework::widget/bar-chart.phtml
    • JavaScript: Hyva_AdminDashboardFramework::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\AdminDashboardFramework\Model\Widget\AbstractLineChart
  • Display Type: line_chart
  • Templates:
    • HTML: Hyva_AdminDashboardFramework::widget/line-chart.phtml
    • JavaScript: Hyva_AdminDashboardFramework::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\AdminDashboardFramework\Model\Widget\AbstractPieChart
  • Display Type: pie_chart
  • Templates:
    • HTML: Hyva_AdminDashboardFramework::widget/pie-chart.phtml
    • JavaScript: Hyva_AdminDashboardFramework::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\AdminDashboardWidgets\Model\Widget\CheckList
  • Display Type: template
  • Templates:
    • HTML: Hyva_AdminDashboardWidgets::widget/checklist.phtml
    • JavaScript: Hyva_AdminDashboardWidgets::js/widget/checklist.phtml
  • Alpine Component: checklistWidget

Customer Order Totals

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\CustomerOrderTotals
  • Display Type: date-interval-table
  • Template: Hyva_AdminDashboardFramework::widget/table.phtml

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.

Hyvä CMS Scheduled Releases

  • Class: Hyva\AdminDashboardCmsWidgets\Model\Widget\CmsScheduledReleases
  • Display Type: template
  • Template: Hyva_AdminDashboardCmsWidgets::widget/cms-scheduled-releases.phtml

Warning

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

Launchpad

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\Launchpad
  • Display Type: template
  • Templates:
    • HTML: Hyva_AdminDashboardWidgets::widget/launchpad.phtml
    • JavaScript: Hyva_AdminDashboardWidgets::js/widget/launchpad.phtml
  • Alpine Component: initDashboardLaunchpad
  • Class: Hyva\AdminDashboardWidgets\Model\Widget\Links
  • Display Type: template
  • Template: Hyva_AdminDashboardWidgets::widget/links.phtml

Module Versions

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\ModuleVersions
  • Display Type: table
  • Template: Hyva_AdminDashboardFramework::widget/table.phtml

Most Viewed Products

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\MostViewedProducts
  • Display Type: table
  • Templates: Hyva_AdminDashboardFramework::widget/table.phtml

New Customers

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\NewCustomers
  • Display Type: table
  • Templates: Hyva_AdminDashboardFramework::widget/table.phtml

Orders by Country

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\OrdersByCountry
  • Display Type: template
  • Templates:
    • HTML: Hyva_AdminDashboardWidgets::widget/orders-by-country.phtml
    • JavaScript: Hyva_AdminDashboardWidgets::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\AdminDashboardWidgets\Model\Widget\OrderVolume
  • Display Type: template
  • Templates:
    • HTML: Hyva_AdminDashboardWidgets::widget/order-volume.phtml
    • JavaScript: Hyva_AdminDashboardWidgets::js/widget/order-volume.phtml
  • Alpine Component: lineChartWidget

Recent Orders

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\RecentOrders
  • Display Type: table
  • Templates: Hyva_AdminDashboardFramework::widget/table.phtml

Recently Edited Categories

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\RecentlyEditedCategories
  • Display Type: template
  • Template: Hyva_AdminDashboardWidgets::widget/recently-edited.phtml

Hyvä CMS support

When Hyva_AdminDashboardCmsWidgets is installed, this widget's class is overridden by Hyva\AdminDashboardCmsWidgets\Model\Widget\RecentlyEditedHyvaCmsCategoryAttributes, which surfaces Hyvä CMS category attribute edits in addition to the Magento defaults.

Recently Edited CMS Blocks

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\RecentlyEditedCmsBlocks
  • Display Type: template
  • Template: Hyva_AdminDashboardWidgets::widget/recently-edited.phtml

Hyvä CMS support

When Hyva_AdminDashboardCmsWidgets is installed, this widget's class is overridden by Hyva\AdminDashboardCmsWidgets\Model\Widget\RecentlyEditedHyvaCmsBlocks.

Recently Edited CMS Pages

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\RecentlyEditedCmsPages
  • Display Type: template
  • Template: Hyva_AdminDashboardWidgets::widget/recently-edited.phtml

Hyvä CMS support

When Hyva_AdminDashboardCmsWidgets is installed, this widget's class is overridden by Hyva\AdminDashboardCmsWidgets\Model\Widget\RecentlyEditedHyvaCmsPages.

Recently Edited Hyvä CMS Menus

  • Class: Hyva\AdminDashboardCmsWidgets\Model\Widget\RecentlyEditedHyvaCmsMenus
  • Display Type: template
  • Template: Hyva_AdminDashboardWidgets::widget/recently-edited.phtml

Warning

This widget type is only available when the Hyva_AdminDashboardCmsWidgets module is installed alongside Hyvä CMS.

Recently Edited Products

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\RecentlyEditedProducts
  • Display Type: template
  • Template: Hyva_AdminDashboardWidgets::widget/recently-edited.phtml

Hyvä CMS support

When Hyva_AdminDashboardCmsWidgets is installed, this widget's class is overridden by Hyva\AdminDashboardCmsWidgets\Model\Widget\RecentlyEditedHyvaCmsProductAttributes, which surfaces Hyvä CMS product attribute edits in addition to the Magento defaults.

Sales Figures

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\SalesFigures
  • Display Type: template
  • Templates:
    • HTML: Hyva_AdminDashboardWidgets::widget/sales-figures.phtml
    • JavaScript: Hyva_AdminDashboardFramework::js/widget/date-interval.phtml
  • Alpine Component: dateIntervalWidget

Sales Funnel Activity

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\SalesFunnelActivity
  • Display Type: template
  • Templates:
    • HTML: Hyva_AdminDashboardWidgets::widget/sales-funnel-activity.phtml
    • JavaScript: Hyva_AdminDashboardFramework::js/widget/date-interval.phtml
  • Alpine Component: dateIntervalWidget

Search Activity

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\SearchActivity
  • Display Type: table
  • Templates: Hyva_AdminDashboardFramework::widget/table.phtml

Table

  • Display Type: table
  • Template: Hyva_AdminDashboardFramework::widget/table.phtml

The table display type does not have an associated widget class. Instead, any widget type can return an array of the correct shape to use the table display.

[
    'headings' => [
        'Foo',
        'Bar',
        'Baz',
    ],
    'rows' => [
        [
            'href' => 'https://foo.bar/',
            'values' => [
                'Foo',
                'Bar',
                'Baz',
            ],
        ],
        [
            'href' => 'https://bar.baz/',
            'values' => [
                'Bar',
                'Baz',
                'Foo',
            ],
        ],
    ],
    'footer' => [
        'Foo',
        'Bar',
        'Baz',
    ],
    'caption' => 'FooBarBaz',
]

Table Array Values

The absence of any of the top-level array keys means those elements will not render. For example, if a table does not require a caption then the caption key can be omitted.

Clickable Table Rows

The presence of a href value in a row means the admin user can click anywhere on that row to navigate to the given URL.

Text

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\Text
  • Display Type: template
  • Template: Hyva_AdminDashboardWidgets::widget/text.phtml

Top Coupons

  • Class: Hyva\AdminDashboardWidgets\Model\Widget\TopCoupons
  • Display Type: date-interval-table
  • Template: Hyva_AdminDashboardFramework::widget/table.phtml