\nLe nom du module sera hh_dashmodule<\/strong><\/p>\n
Pour commencer notre module sera greff\u00e9 sur les hooks suivants :<\/p>\n
– dashboardZoneTwo<\/strong> ( Bloc central du dashboard ) OU dashboardZoneOne ( Colonne de gauche du dashboard ) Le code est volontairement simplifi\u00e9 pour comprendre l’essentiel.<\/p>\n Je passe rapidement sur les hooks ansi que sur le hook hookDashboardZoneTwo<\/strong> qui affiche uniquement un template smarty.<\/p>\n La particularit\u00e9 des modules de type dashboard et que les donn\u00e9es sont mises \u00e0 jour via des scripts ajax, qui appellent le hook DashboardData<\/strong> des modules.<\/p>\n C’est donc dans cette fonction qu’il va falloir renvoyer les informations \u00e0 afficher.<\/p>\n Les plages de dates s\u00e9lectionn\u00e9es via le tableau de bord sont disponibles lors de l’appel comme vous pouvez le voir dans le code, et ce sont ces param\u00e8tres qui vont nous permettre de renvoyer les donn\u00e9es ad\u00e9quates<\/p>\n Les types de donn\u00e9es natifs sont les suivants :<\/p>\n Nous allons voir type par type comment g\u00e9rer leur affichage, qui n\u00e9cessitera \u00e0 la fois du code dans le fichier tpl \u00ab\u00a0views\/templates\/hook\/hookDashboardZoneTwo.tpl\u00a0\u00bb et dans le fichier php<\/p>\n – Type data_value<\/span><\/strong><\/p>\n Le type data_value est le plus simple, il suffit de renvoyer une valeur ( int \/ string ) dans le tableau Dans le tpl il est n\u00e9cessaire de mettre le code suivant :<\/p>\n Le rendu sera le suivant :<\/p>\n – Type data_table<\/span><\/strong><\/p>\n Pour le type data_table il est n\u00e9cessaire de renvoyer un tableau format\u00e9 sous la forme suivante :<\/p>\n Dans le tpl il est n\u00e9cessaire de mettre le code suivant :<\/p>\n Le rendu sera le suivant :<\/p>\n – Type data_trends<\/strong><\/span><\/p>\n Pour le type data_trends il est n\u00e9cessaire de renvoyer un tableau formatt\u00e9 sous la forme suivante :<\/p>\n <\/p>\n Dans le tpl il est n\u00e9cessaire de mettre le code suivant :<\/p>\n Le rendu sera le suivant :<\/p>\n – Type data_list_small<\/strong><\/span><\/p>\n Pour le type data_list_small il est n\u00e9cessaire de renvoyer un tableau format\u00e9 sous la forme suivante :<\/p>\n Dans le tpl il est n\u00e9cessaire de mettre le code suivant :<\/p>\n Le rendu sera le suivant :<\/p>\n – Type data_chart<\/strong><\/span><\/p>\n Le type chart est lui plus complexe et n\u00e9cessite l’ajout d’un fichier javascript sp\u00e9cifique au module. Il est donc possible de g\u00e9n\u00e9rer l’ensemble des types de graphiques pr\u00e9sent\u00e9s par la librairie, le format de donn\u00e9es attendu \u00e9tant sp\u00e9cifique \u00e0 chaque type de graphique, voici le principe g\u00e9n\u00e9ral et comment faire \u00e0 travers 2 exemples de type \u00ab\u00a0line\u00a0\u00bb et \u00ab\u00a0bar\u00a0\u00bb. Les donn\u00e9es export\u00e9es via le php seront les suivantes :<\/p>\n Dans le tpl il est n\u00e9cessaire de mettre le code suivant :<\/p>\n En suppl\u00e9ment il faut \u00e9galement rajouter le contenu suivant dans le fichier views\/js\/hh_dashmodule.js Le rendu sera le suivant :<\/p>\n <\/p>\n Et voila nous avons fait le tour du fonctionnement des modules de type dashboard sous Prestashop. <\/p>\n
\n– dashboardData<\/strong> ( R\u00e9cup\u00e9rations des donn\u00e9es du dashboard)
\n– actionAdminControllerSetMedia<\/strong> ( Pour ajouter le js sp\u00e9cifique du module.)<\/p>\n
\nactionAdminControllerSetMedia<\/strong> dont le code sera le suivant :<\/p>\n \/**\r\n * Ajout du js sp\u00e9cifique du module dans le dashboard\r\n *\/\r\n public function hookActionAdminControllerSetMedia()\r\n {\r\n if (get_class($this->context->controller) == 'AdminDashboardController') {\r\n $this->context->controller->addJs($this->_path.'views\/js\/'.$this->name.'.js');\r\n }\r\n }\r\n<\/pre>\n \/**\r\n * Hook Dasboard Principale\r\n * @return type\r\n *\/\r\n public function hookDashboardZoneTwo()\r\n {\r\n return $this->display(__FILE__, 'views\/templates\/hook\/hookDashboardZoneTwo.tpl');\r\n }\r\n<\/pre>\n \/**\r\n * Hook de r\u00e9cup\u00e9ration des donn\u00e9es\r\n * @param type $params\r\n *\/\r\n public function hookDashboardData($params)\r\n {\r\n \/**\r\n * Param\u00e8tres envoy\u00e9s par leur dashboard pour actualiser les stats\r\n *\/\r\n $from = $params['date_from'];\r\n $to = $params['date_to'];\r\n\r\n \/\/Exemple de requ\u00eate qui utilise les pram\u00e8tres\r\n $customers = Db::getInstance()->executeS(\"SELECT DATE(date_add) AS date, COUNT(*) AS nbre \"\r\n . \"FROM \" . _DB_PREFIX_ . \"customer \"\r\n . \"WHERE DATE(date_add) >= '\" . pSQL($from) . \"' AND DATE(date_add) <= '\" . pSQL($to) . \"' \" . \"GROUP BY DATE(date_add)\"); \/\/Renvoi de tous les types de donn\u00e9es possibles return [ 'data_value' =>\r\n [\r\n 'current_time' => time(),\r\n 'customers' => $customers,\r\n 'sample_data' => 'Test de donn\u00e9es fixe<\/strong>',\r\n ],\r\n 'data_table' => $this->_getSampleDataTable(),\r\n 'data_trends' => $this->_getSampleDataTrends(),\r\n 'data_list_small' => $this->_getSampleDataListSmall(),\r\n 'data_chart' => $this->_getSampleDataChart(),\r\n ];\r\n }\r\n<\/pre>\n\n
\n‘data_value’ du hook comme dans l’exemple ci-dessous.<\/p>\nreturn [\r\n 'data_value' =>\r\n [\r\n 'current_time' => time(),\r\n 'sample_data' => 'Test de donn\u00e9es fixe<\/strong>',\r\n ],\r\n];\r\n<\/pre>\n
<div class=\"data_value\">\r\n{* Information remplie automatiquement par le script l'id correspond \u00e0 la cl\u00e9 du tableau renvoy\u00e9 dans data-value *}\r\n<span id=\"current_time\"><\/span>\r\n<span id=\"sample_data\"><\/span>\r\n<\/div>\r\n<\/pre>\n![\"Prestashop](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2017\/09\/dashboard-type-value.jpg\")
<\/p>\nreturn [\r\n 'table_hh_sample_table' => [\r\n \/\/Header de la table\r\n 'header' => [\r\n \/\/Champ(s) wrapper(s) optionnel(s)\r\n ['title' => 'sample_column_1','class' => 'text-left' , 'wrapper_start' => '','wrapper_stop' => '<\/strong>'],\r\n ['title' => 'sample_column_2','class' => 'text-left'],\r\n ['title' => 'sample_column_2','class' => 'text-left'],\r\n ],\r\n \/\/Corps de la table\r\n 'body' => [\r\n [\r\n \/\/Champ wrapper optionnel\r\n ['id' => 'sample_column_1','value' => 'test value', 'class' => 'text-left'],\r\n ['id' => 'sample_column_2','value' => 'test value column2', 'class' => 'text-left','wrapper_start' => '','wrapper_stop' => '<\/strong>'],\r\n ['id' => 'sample_column_3','value' => 'test value column3', 'class' => 'text-left'],\r\n ],\r\n [\r\n ['id' => 'sample_column_1','value' => 'test value row 2', 'class' => 'text-left'],\r\n ['id' => 'sample_column_2','value' => 'test value row 2 column2', 'class' => 'text-left'],\r\n ['id' => 'sample_column_3','value' => 'test value row 2 column3', 'class' => 'text-left'],\r\n ],\r\n [\r\n ['id' => 'sample_column_1','value' => 'test value row 3', 'class' => 'text-left'],\r\n ['id' => 'sample_column_2','value' => 'test value row 3 column2', 'class' => 'text-left'],\r\n ['id' => 'sample_column_3','value' => 'test value row 3 column3', 'class' => 'text-left'],\r\n ]\r\n ]\r\n ],\r\n ];\r\n<\/pre>\n
<table class=\"table data_table\" id=\"table_hh_sample_table\">\r\n<thead><\/thead>\r\n<tbody><\/tbody>\r\n<\/table>\r\n<\/pre>\n
![\"Prestashop](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2017\/09\/dashboard-type-table.jpg\")
<\/p>\n return [\r\n 'dash_trend_sample_1' => [\r\n 'way' => 'up',\r\n 'value' => 3,\r\n ],\r\n 'dash_trend_sample_2' => [\r\n 'way' => 'down',\r\n 'value' => 3,\r\n ]\r\n ];\r\n<\/pre>\n
{l s='trend up' mod='hh_dashmodule'}<dd class=\"dash_trend\"><span id=\"dash_trend_sample_1\"><\/span><\/dd>\r\n{l s='trend down' mod='hh_dashmodule'}<dd class=\"dash_trend\"><span id=\"dash_trend_sample_2\"><\/span><\/dd>\r\n<\/pre>\n![\"Prestashop](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2017\/09\/dashboard-type-trend.jpg\")
<\/p>\nreturn [\r\n 'dash_list_small_sample' => [\r\n 'key1 : ' => ' value1',\r\n 'key2 : ' => ' value2',\r\n 'key3 : ' => [ 'value1', 'value2'],\r\n ],\r\n ];\r\n<\/pre>\n
<div class=\"dash_list_small\">\r\n<ul id=\"dash_list_small_sample1\">\r\n<\/ul>\r\n<\/div>\r\n<\/pre>\n
![\"Prestashop](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2017\/09\/dashboard-type-list.jpg\")
<\/p>\n
\nLes graphiques sont g\u00e9n\u00e9r\u00e9s via la librairie javascript nv3d<\/strong> http:\/\/nvd3.org\/examples\/index.html<\/p>\n
\nPour tous les autres types, je vous invites \u00e0 voir directement sur le site de la libairie nv3d.<\/p>\nreturn [\r\n \/\/Graphique de type ligne\r\n 'data_chart_sample_1' => [\r\n 'chart_type' => 'sample_chart_line_model', \/\/Nom de la fonction d'initialisation dans le fichier hh_dashmodule.js\r\n 'chart_xaxis_label' => 'X axis Label',\r\n 'chart_yaxis_label' => 'Y axis Label',\r\n 'data' => [\r\n [\r\n 'color' => '#7777ff',\r\n 'area' => true,\r\n 'values' => [\r\n ['x' => '1', 'y' => 10],\r\n ['x' => '2', 'y' => 20],\r\n ['x' => '3', 'y' => 30],\r\n ['x' => '4', 'y' => 60],\r\n ]\r\n ],\r\n ]\r\n ],\r\n 'data_chart_sample_2' => [\r\n 'chart_type' => 'sample_chart_bar_model', \/\/Nom de la fonction d'initialisation dans le fichier hh_dashmodule.js\r\n 'chart_xaxis_label' => 'X axis Label',\r\n 'chart_yaxis_label' => 'Y axis Label',\r\n 'data' => [\r\n [\r\n 'values' => [\r\n ['label' => '2017-09-20', 'value' => 10],\r\n ['label' => '2017-09-21', 'value' => 20],\r\n ['label' => '2017-09-22', 'value' => 15],\r\n ['label' => '2017-09-23', 'value' => 7],\r\n ['label' => '2017-09-24', 'value' => 35],\r\n ]\r\n ],\r\n ]\r\n ],\r\n ];\r\n<\/pre>\n
<div id=\"data_chart_sample_1\" class=\"chart with-transitions\">\r\n <svg><\/svg>\r\n <\/div>\r\n \r\n <p>{l s='Bar Chart' mod='hh_dashmodule'}<\/p>\r\n <div id=\"data_chart_sample_2\" class=\"chart with-transitions\">\r\n <svg><\/svg>\r\n <\/div>\r\n<\/pre>\n
\nLe point essentiel \u00e0 retenir \u00e9tant que les donn\u00e9es de notre tableau sont envoy\u00e9es dans la variable chart_details<\/strong><\/p>\n\/**\r\n * La librairie utilis\u00e9e est nvd3 : pour plus d'informations => http:\/\/nvd3.org\/examples\/index.html\r\n * documentation : https:\/\/nvd3-community.github.io\/nvd3\/examples\/documentation.html\r\n *\/\r\n\r\n\/**\r\n * Mod\u00e8le d'exemple de graphique en ligne\r\n * @param string widget_name\r\n * @param array chart_details\r\n * @returns chart\r\n *\/\r\nfunction sample_chart_line_model(widget_name, chart_details) {\r\n\r\n nv.addGraph(function () {\r\n var chart = nv.models.lineChart()\r\n .margin({left: 100}) \/\/Adjust chart margins to give the x-axis some breathing room.\r\n .useInteractiveGuideline(true) \/\/We want nice looking tooltips and a guideline!\r\n .transitionDuration(350) \/\/how fast do you want the lines to transition?\r\n .showLegend(true) \/\/Show the legend, allowing users to turn on\/off line series.\r\n .showYAxis(true) \/\/Show the y-axis\r\n .showXAxis(true) \/\/Show the x-axis\r\n ;\r\n\r\n \/\/Chart x-axis settings \r\n chart.xAxis\r\n .axisLabel(chart_details.chart_xaxis_label)\r\n .tickFormat(d3.format('d'));\r\n\r\n \/\/Chart y-axis settings \r\n chart.yAxis\r\n .axisLabel(chart_details.chart_yaxis_label)\r\n .tickFormat(d3.format('d'));\r\n\r\n d3.select('#data_chart_sample_1 svg') \/\/Select the element you want to render the chart in. \r\n .datum(chart_details.data) \/\/Populate the element with chart data...\r\n .call(chart); \/\/Finally, render the chart!\r\n\r\n \/\/Update the chart when window resizes.\r\n nv.utils.windowResize(function () {\r\n chart.update()\r\n });\r\n return chart;\r\n });\r\n}\r\n\/**\r\n * Mod\u00e8le d'exemple de graphique en barre\r\n * @param string widget_name\r\n * @param array chart_details\r\n * @returns chart\r\n *\/\r\nfunction sample_chart_bar_model(widget_name, chart_details) {\r\n\r\n nv.addGraph(function () {\r\n var chart = nv.models.discreteBarChart()\r\n .x(function (d) {\r\n return d.label\r\n }) \/\/Specify the data accessors.\r\n .y(function (d) {\r\n return parseInt(d.value)\r\n })\r\n .staggerLabels(true) \/\/Too many bars and not enough room? Try staggering labels.\r\n .tooltips(false) \/\/Don't show tooltips\r\n .showValues(true) \/\/...instead, show the bar value right on top of each bar.\r\n .transitionDuration(350)\r\n .valueFormat(d3.format('d'))\r\n ;\r\n \r\n \/\/Chart x-axis settings \r\n chart.xAxis.axisLabel(chart_details.chart_xaxis_label);\r\n\r\n \/\/Chart y-axis settings \r\n chart.yAxis\r\n .axisLabel(chart_details.chart_yaxis_label)\r\n .tickFormat(d3.format('d'));\r\n\r\n d3.select('#data_chart_sample_2 svg')\r\n .datum(chart_details.data)\r\n .call(chart);\r\n\r\n nv.utils.windowResize(chart.update);\r\n\r\n return chart;\r\n });\r\n}\r\n\r\n<\/pre>\n![\"Prestashop](\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2017\/09\/dashboard-type-chart.jpg\")
<\/p>\n
\nN’h\u00e9sitez pas \u00e0 remonter vos questions \ud83d\ude09<\/p>\n