feat: create a 'chart' component and use it for nova, eco and nutri-s…

…core
openfoodfacts · Jun 11, 2024 · 685ec7e · 685ec7e
1 parent c69c838
commit 685ec7e
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 28 deletions.
diff --git a/frontend/public/off.html b/frontend/public/off.html
@@ -258,7 +258,7 @@
                       <searchalicious-facet-terms  name="ecoscore_grade"></searchalicious-facet-terms>
                     </searchalicious-facets>
                   </div>
-                  <div class="large-10 columns">
+                  <div class="large-8 columns">
                     <div id="search_results" style="clear: left">
                       <div id="products_tabs_content" class="tabs-content">
                         <div class="tabs content active" id="products_all">
@@ -312,7 +312,11 @@
                     </div>
                   </div>
                   <div class="large-2 columns">
-                    <searchalicious-charts search-name="off"/>
+                    <searchalicious-charts search-name="off">
+                      <searchalicious-chart label="Nutri-score distribution" key="nutriscore_grade", categories='["a", "b", "c", "d", "e", "unknown", "not-applicable"]''></searchalicious-chart>
+                      <searchalicious-chart label="Nova score distribution" key="nova_group", categories='["1", "2", "3", "4", "undefined", "not-applicable"]'></searchalicious-chart>
+                      <searchalicious-chart label="Eco score distribution" key="ecoscore_grade", categories='["a", "b", "c", "d", "e", "unknown", "not-applicable"]''></searchalicious-chart>
+                    </searchalicious-charts>
                   </div>
                 </div>
               </div>

diff --git a/frontend/src/search-charts.ts b/frontend/src/search-charts.ts
@@ -1,56 +1,103 @@
 import {LitElement, html} from 'lit';
-import {customElement, state} from 'lit/decorators.js';
+import {
+  customElement,
+  state,
+  property,
+  queryAssignedNodes,
+} from 'lit/decorators.js';
 
 import {SearchaliciousResultCtlMixin} from './search-results-ctl';
 
 import {SearchResultEvent} from './events';
 // @ts-ignore eslint-disable-next-line @typescript-eslint/ban-ts-comment  no-var
 declare var vega: any;
 
+interface ChartInfo {
+  id: string;
+  key: string;
+  values: HistogramValues;
+}
+
+interface HistogramValues {
+  [key: string]: number;
+}
+
 @customElement('searchalicious-charts')
 export class SearchaliciousCharts extends SearchaliciousResultCtlMixin(
   LitElement
 ) {
   @state()
-  nbResults = 0;
+  @property()
+  charts?: Array<ChartInfo>;
+
+  @queryAssignedNodes({flatten: true})
+  slotNodes!: Array<Node>;
 
   override render() {
-    return html`<div id="pigeon"></div>`;
+    return html`<div><slot></slot></div>`;
+  }
+
+  _chartNodes(): SearchaliciousChart[] {
+    return this.slotNodes.filter(
+      (node) => node instanceof SearchaliciousChart
+    ) as SearchaliciousChart[];
   }
 
   override handleResults(event: SearchResultEvent) {
-    this.nbResults = event.detail.results.length;
+    this._chartNodes().forEach((node) => {
+      node.values = Object.fromEntries(
+        node.categories.map((category) => [category, 0])
+      );
+    });
+
+    for (const result of event.detail.results) {
+      this._chartNodes().forEach((node) => {
+        node.values[result[node.key]] += 1;
+      });
+    }
+  }
+}
 
+@customElement('searchalicious-chart')
+export class SearchaliciousChart extends LitElement {
+  @property()
+  key: string;
 
-    const nutriScoreValues = {
-      'a': 0,
-      'b': 0,
-      'c': 0,
-      'd': 0,
-      'e': 0,
-      'unknown': 0
-    };
+  @property()
+  label: string;
 
-    event.detail.results.map((result: any) => {
-      nutriScoreValues[result.nutriscore_grade] += 1;
-    });
+  @property({type: Array})
+  categories: Array<string>;
 
-    console.log(event.detail.results)
-    const container = this.renderRoot.querySelector('#pigeon');
+  @property({attribute: false})
+  values?: any = [];
 
+  override render() {
+    const nbResults = Object.values(this.values).reduce(
+      (prev, c) => c + prev,
+      0
+    );
+    console.log(nbResults, this.values);
+    const display = nbResults > 0 ? '' : 'display: none';
+    return html`<div id="${this.key}" style="${display}"></div>`;
+  }
+
+  override updated() {
+    const container = this.renderRoot.querySelector(`#${this.key}`);
     const view = new vega.View(
       vega.parse({
         $schema: 'https://vega.github.io/schema/vega/v5.json',
-        description:
-          'Nutriscore distribution',
-        width: 400,
-        height: 200,
+        title: this.label,
+        width: container.offsetWidth,
+        height: 140,
         padding: 5,
-
         data: [
           {
             name: 'table',
-            values: Array.from(Object.entries(nutriScoreValues), ([key, value]) => ({ category: key, amount: value}));
+            values: Array.from(Object.entries(this.values), ([key, value]) => ({
+              category: key,
+              amount: value,
+            })),
           },
         ],
         signals: [
@@ -82,10 +129,8 @@ export class SearchaliciousCharts extends SearchaliciousResultCtlMixin(
         ],
 
         axes: [
-          {orient: 'bottom', scale: 'xscale'},
-          {orient: 'left', scale: 'yscale'},
+          {orient: 'bottom', scale: 'xscale', domain: false, ticks: false},
         ],
-
         marks: [
           {
             type: 'rect',
@@ -139,5 +184,6 @@ export class SearchaliciousCharts extends SearchaliciousResultCtlMixin(
 declare global {
   interface HTMLElementTagNameMap {
     'searchalicious-charts': SearchaliciousCharts;
+    'searchalicious-chart': SearchaliciousChart;
   }
 }