-
-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: move vega charts to API #185
Conversation
frontend/src/mixins/search-ctl.ts
Outdated
} = { | ||
q: queryParts.join(' '), | ||
langs: this.langs, | ||
page_size: this.pageSize.toString(), | ||
index: this.index, | ||
charts: ['nutriscore_grade', 'nova_group', 'ecoscore_grade'].join(',') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It should be a property.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as facets
, charts is built from <searchalicious-chart name=.../>
nodes.
… feat-implement-vega-serverside
* any agg: true search field can be used; * code mutulization with facets ; * list of charts is listed from <searchalicious-chart/> list
559ba92
to
4be2add
Compare
4be2add
to
5dea4e5
Compare
{"category": bucket["key"], "amount": bucket["doc_count"]} | ||
for bucket in buckets | ||
if bucket["key"] != "unknown" | ||
] | ||
values.sort(key=lambda x: x["category"]) | ||
|
||
charts[chart_name] = { | ||
"$schema": "https://vega.github.io/schema/vega/v5.json", | ||
"title": chart_name, | ||
"autosize": {"type": "fit", "contains": "padding"}, | ||
"signals": [ | ||
{ | ||
"name": "width", | ||
"init": "containerSize()[0]", | ||
"on": [{"events": "window:resize", "update": "containerSize()[0]"}], | ||
}, | ||
{ | ||
"name": "tooltip", | ||
"value": {}, | ||
"on": [ | ||
{"events": "rect:pointerover", "update": "datum"}, | ||
{"events": "rect:pointerout", "update": "{}"}, | ||
], | ||
}, | ||
], | ||
"height": 140, | ||
"padding": 5, | ||
"data": [ | ||
{ | ||
"name": "table", | ||
"values": values, | ||
}, | ||
], | ||
"scales": [ | ||
{ | ||
"name": "xscale", | ||
"type": "band", | ||
"domain": {"data": "table", "field": "category"}, | ||
"range": "width", | ||
"padding": 0.05, | ||
"round": True, | ||
}, | ||
{ | ||
"name": "yscale", | ||
"domain": {"data": "table", "field": "amount"}, | ||
"nice": True, | ||
"range": "height", | ||
}, | ||
], | ||
"axes": [ | ||
{"orient": "bottom", "scale": "xscale", "domain": False, "ticks": False} | ||
], | ||
"marks": [ | ||
{ | ||
"type": "rect", | ||
"from": {"data": "table"}, | ||
"encode": { | ||
"enter": { | ||
"x": {"scale": "xscale", "field": "category"}, | ||
"width": {"scale": "xscale", "band": 1}, | ||
"y": {"scale": "yscale", "field": "amount"}, | ||
"y2": {"scale": "yscale", "value": 0}, | ||
}, | ||
"update": { | ||
"fill": {"value": "steelblue"}, | ||
}, | ||
"hover": { | ||
"fill": {"value": "red"}, | ||
}, | ||
}, | ||
}, | ||
{ | ||
"type": "text", | ||
"encode": { | ||
"enter": { | ||
"align": {"value": "center"}, | ||
"baseline": {"value": "bottom"}, | ||
"fill": {"value": "#333"}, | ||
}, | ||
"update": { | ||
"x": { | ||
"scale": "xscale", | ||
"signal": "tooltip.category", | ||
"band": 0.5, | ||
}, | ||
"y": { | ||
"scale": "yscale", | ||
"signal": "tooltip.amount", | ||
"offset": -2, | ||
}, | ||
"text": {"signal": "tooltip.amount"}, | ||
"fillOpacity": [ | ||
{"test": "datum === tooltip", "value": 0}, | ||
{"value": 1}, | ||
], | ||
}, | ||
}, | ||
}, | ||
], | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For me, you have to give data by API and then build the options in frontend like this :
This allows to avoid chart options for every graph
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After discussion, we will keep it like this right now. Might be re-discussed with Alex.
app/validations.py
Outdated
return errors | ||
global_config = cast(Config, CONFIG) | ||
index_id, index_config = global_config.get_index_config(index_id) | ||
if index_config is None: | ||
raise ValueError(f"Cannot get index config for index_id {index_id}") | ||
for field_name in facets: | ||
print(index_config) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fix me
… feat-implement-vega-serverside
What
This PR implements moves vega charts serverside and generalizes it a little (we just have to add
<searchalicious-chart name="..."/>
clientside).Resolves #123