From 837a6588212238456b3418d4e816f69c1218f03f Mon Sep 17 00:00:00 2001 From: Marc-AntoineA Date: Wed, 19 Jun 2024 16:34:42 +0200 Subject: [PATCH] feat: implement scores distributions charts using vega MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently implemented in frontend, I will work on a new PR to put the logic in the API. Basic vega implementation Ref #157 --- frontend/.eslintrc.json | 3 +- frontend/README.md | 1 + frontend/public/off.html | 9 +- frontend/public/vega5.js | 2 + frontend/src/mixins/search-results-ctl.ts | 2 +- frontend/src/search-a-licious.ts | 1 + frontend/src/search-chart.ts | 216 ++++++++++++++++++++++ 7 files changed, 231 insertions(+), 3 deletions(-) create mode 100644 frontend/public/vega5.js create mode 100644 frontend/src/search-chart.ts diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index 4fd1dc0b..9d337c96 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -27,7 +27,8 @@ { "argsIgnorePattern": "^_" } - ] + ], + "@typescript-eslint/ban-ts-comment": "off" }, "overrides": [ { diff --git a/frontend/README.md b/frontend/README.md index 49a7dcfd..33b8d06e 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -36,6 +36,7 @@ The project is currently composed of several widgets * it can be used to replace the default button * searchalicious-button-transparent is a transparent button with defined style * it can be used to replace the default button +* searchalicious-chart renders vega chart, currently only for distribution. Requires [vega](https://vega.github.io/). You can give a specific `name` attribute to your search bar. Then all other component that needs to connect with this search must use the same value in `search-name` attribute diff --git a/frontend/public/off.html b/frontend/public/off.html index efd673d7..cddf65a3 100644 --- a/frontend/public/off.html +++ b/frontend/public/off.html @@ -255,7 +255,7 @@ -
+
@@ -308,6 +308,11 @@
+
+ + + +
@@ -323,6 +328,8 @@ + + ' + ); + return false; + } + throw e; + } + } + + // vega rendering requires an html component with id == this.key + // and consequently must be called AFTER render + // Method updated is perfect for that + // See lit.dev components lifecycle: https://lit.dev/docs/components/lifecycle/ + override updated() { + if (this.vegaRepresentation === undefined) return; + + const container = this.renderRoot.querySelector(`#${this.key}`); + + // How to display a vega chart: https://vega.github.io/vega/usage/#view + const view = new vega.View(vega.parse(this.vegaRepresentation), { + renderer: 'svg', + container: container, + hover: true, + }); + view.runAsync(); + } +} + +declare global { + interface HTMLElementTagNameMap { + 'searchalicious-chart': SearchaliciousChart; + } +}