Merge pull request Smile-SA#53 from Elastic-Suite/feat-ESP-206-add-be…

…havioral-data [Explain] - Add behavioral data in product detail #ESP-206
botisSmile · Aug 12, 2021 · eda5bd7 · eda5bd7
2 parents f4a72b4 + a9405d5
commit eda5bd7
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 17 deletions.
diff --git a/src/module-elasticsuite-explain/Model/Result/Item.php b/src/module-elasticsuite-explain/Model/Result/Item.php
@@ -113,19 +113,20 @@ public function __construct(
     public function getData()
     {
         $data = [
-            'id'          => (int) $this->document->getId(),
-            'name'        => $this->getDocumentSource('name'),
-            'sku'         => $this->getDocumentSource('sku'),
-            'price'       => $this->getProductPrice(),
-            'image'       => $this->getProductImage(),
-            'score'       => $this->getDocumentScore(),
-            'explanation' => $this->getDocumentExplanation(),
-            'sort'        => $this->getDocumentSort(),
-            'is_in_stock' => $this->isInStockProduct(),
-            'boosts'      => $this->getBoosts(),
-            'matches'     => $this->getMatches(),
-            'highlights'  => $this->getHighlights(),
-            'legends'     => $this->getLegends(),
+            'id'              => (int) $this->document->getId(),
+            'name'            => $this->getDocumentSource('name'),
+            'sku'             => $this->getDocumentSource('sku'),
+            'price'           => $this->getProductPrice(),
+            'image'           => $this->getProductImage(),
+            'score'           => $this->getDocumentScore(),
+            'explanation'     => $this->getDocumentExplanation(),
+            'sort'            => $this->getDocumentSort(),
+            'is_in_stock'     => $this->isInStockProduct(),
+            'boosts'          => $this->getBoosts(),
+            'matches'         => $this->getMatches(),
+            'highlights'      => $this->getHighlights(),
+            'legends'         => $this->getLegends(),
+            'behavioral_data' => $this->getBehavioralData(),
         ];
 
         return $data;
@@ -443,4 +444,14 @@ private function getLegends()
     {
         return $this->descriptionsGenerator->generate($this->getMatches());
     }
+
+    /**
+     * Get behavioral data for the current item.
+     *
+     * @return array
+     */
+    private function getBehavioralData()
+    {
+        return $this->document->getSource()['_stats'] ?? [];
+    }
 }
diff --git a/src/module-elasticsuite-explain/i18n/en_US.csv b/src/module-elasticsuite-explain/i18n/en_US.csv
@@ -68,3 +68,13 @@
 "Type your search","Type your search"
 "No terms for this query","No terms for this query"
 "No categories for this query","No categories for this query"
+"General Information","General Information"
+"Behavioral data","Behavioral data"
+"Daily (count)","Daily (count)"
+"Daily (ma)","Daily (ma)"
+"Weekly (count)","Weekly (count)"
+"Weekly (ma)","Weekly (ma)"
+"Views","Views"
+"Sales","Sales"
+"Conversion rate","Conversion rate"
+"Moving average","Moving average"
diff --git a/src/module-elasticsuite-explain/i18n/fr_FR.csv b/src/module-elasticsuite-explain/i18n/fr_FR.csv
@@ -68,3 +68,13 @@
 "Type your search","Écrivez votre recherche"
 "No terms for this query","Pas de recherches populaires pour cette recherche"
 "No categories for this query","Pas de catégories pour cette recherche"
+"General Information","Informations Générales"
+"Behavioral data","Données Comportementales"
+"Daily (count)","Par jour (total)"
+"Daily (ma)","Par jour (mm)"
+"Weekly (count)","Par semaine (total)"
+"Weekly (ma)","Par semaine (mm)"
+"Views","Vues"
+"Sales","Ventes"
+"Conversion rate","Taux de conversion"
+"Moving average","Moyenne mobile"
diff --git a/src/module-elasticsuite-explain/view/adminhtml/web/css/source/_module.less b/src/module-elasticsuite-explain/view/adminhtml/web/css/source/_module.less
@@ -204,6 +204,26 @@
     }
 }
 
+.admin__top-info {
+    width: 100%;
+    .product-global-info {
+        width: 30%;
+    }
+    td {
+        vertical-align: top;
+    }
+    .behavioral-data-report {
+        td, th {
+            text-align: right;
+        }
+        .description {
+            text-decoration: underline dotted @color-green-apple;
+            font-style: oblique;
+            cursor: pointer;
+        }
+    }
+}
+
 #highlight-details, #fields-details {
     .fieldset-wrapper-title {
         padding: 14px 0 0px;

diff --git a/src/module-elasticsuite-explain/view/adminhtml/web/js/components/form/explain/result/item.js b/src/module-elasticsuite-explain/view/adminhtml/web/js/components/form/explain/result/item.js
@@ -19,7 +19,7 @@ define([
     'Smile_ElasticsuiteCatalog/js/form/element/product-sorter/item',
     'ko',
     'mage/translate'
-], function (Component, $, priceUtil, Item, ko) {
+], function (Component, $, priceUtil, Item, ko, $t) {
 
     'use strict';
 
@@ -51,6 +51,15 @@ define([
             for (const field in this.data.legends) {
                 this.legends.push(this.data.legends[field]);
             }
+
+            this.behavioral_data = [];
+            ['views', 'sales', 'conversion_rate'].forEach(function(type) {
+                if (this.data.behavioral_data.hasOwnProperty(type)) {
+                    this.data.behavioral_data[type]['type'] = type;
+                    this.data.behavioral_data[type]['label'] = this.getBehavioralDataLabel(type);
+                    this.behavioral_data.push(this.data.behavioral_data[type]);
+                }
+            }.bind(this));
         },
 
         getEffectClass : function () {
@@ -147,6 +156,29 @@ define([
             return this.legends;
         },
 
+        hasBehavioralData : function () {
+            return (this.behavioral_data.length > 0);
+        },
+
+        getBehavioralData : function () {
+            return this.behavioral_data;
+        },
+
+        getBehavioralDataLabel: function (type) {
+            switch (type) {
+                case 'views':
+                    return $t('Views');
+                case 'sales':
+                    return $t('Sales');
+                case 'conversion_rate':
+                    return $t('Conversion rate');
+            }
+        },
+
+        formatBehavioralDataValue: function (val, type) {
+            return type === 'conversion_rate' ? val * 100 + '%' : val;
+        },
+
         hasFieldDescriptionToShow : function (field) {
             return this.data.legends.hasOwnProperty(field);
         },

diff --git a/...module-elasticsuite-explain/view/adminhtml/web/template/form/element/explain-results.html b/...module-elasticsuite-explain/view/adminhtml/web/template/form/element/explain-results.html
@@ -258,9 +258,42 @@ <h1><span data-bind="html: getName(), attr: {title: getName()}"></span></h1>
 <div class="modal" id="productDetails" data-bind="with: currentProduct">
     <div class="info">
         <h1><span data-bind="html: getName(), attr: {title: getName()}"></span></h1>
-        <p class="sku" data-bind="text: getSku()"></p>
-        <p class="price" data-bind="text: getFormattedPrice()"></p>
-        <p class="stock" data-bind="text: getStockLabel()"></p>
+
+        <table class="admin__top-info">
+            <tr>
+                <td class="product-global-info">
+                    <h3 data-bind="i18n: 'General Information'"></h3>
+                    <p class="sku" data-bind="text: getSku()"></p>
+                    <p class="price" data-bind="text: getFormattedPrice()"></p>
+                    <p class="stock" data-bind="text: getStockLabel()"></p>
+                </td>
+                <td class="behavioral-data-report" data-bind="if: hasBehavioralData()">
+                    <h3 data-bind="i18n: 'Behavioral data'"></h3>
+                    <table class="admin__table-primary dashboard-data behavioral-data-report">
+                        <thead>
+                        <tr>
+                            <th class="data-grid-th no-link field"></th>
+                            <th class="data-grid-th no-link field"><span data-bind="i18n: 'Daily (count)'"></span></th>
+                            <th class="data-grid-th no-link field"><span class="description" data-bind="i18n: 'Daily (ma)', attr: {title: $t('Moving average')}"></span></th>
+                            <th class="data-grid-th no-link field"><span data-bind="i18n: 'Weekly (count)'"></span></th>
+                            <th class="data-grid-th no-link field"><span class="description"  data-bind="i18n: 'Weekly (ma)', attr: {title: $t('Moving average')}"></span></th>
+                            <th class="data-grid-th no-link field"><span data-bind="i18n: 'Total'"></span></th>
+                        </tr>
+                        </thead>
+                        <tbody data-bind="foreach: {data: getBehavioralData(), as: 'behavioralData'}" class="behavioralData">
+                        <tr>
+                            <td><span data-bind="i18n: label"></span></td>
+                            <td><span data-bind="text: $parent.formatBehavioralDataValue(daily.count, type)"></span></td>
+                            <td><span data-bind="text: $parent.formatBehavioralDataValue(daily.ma, type)"></span></td>
+                            <td><span data-bind="text: $parent.formatBehavioralDataValue(weekly.count, type)"></span></td>
+                            <td><span data-bind="text: $parent.formatBehavioralDataValue(weekly.ma, type)"></span></td>
+                            <td><span data-bind="text: $parent.formatBehavioralDataValue(total, type)"></span></td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </table>
 
         <br/>
         <h1 class="modal-title" data-bind="i18n: 'Matches'"></h1>