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.

Widget Types

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 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:

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_AdminDashboardFramework::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\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

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.

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

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

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 utilise 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