Closed KaylaKremer closed 5 years ago
roying
commented
5 years ago Tooltip appears to work properly in bar and line charts on my Microsoft Windows computers.
Tested on:
richardbarad
commented
5 years ago @roying. Thanks for your feedback on this and for investigating this! I work with @KaylaKremer on this project.
To clarify, the issue is only present when you load the widgets in an analysis report and is not present when you load the widget in the analysis panel. The workflow for loading the report is:
I believe you may have missed step 5 highlighted above.
I am also attaching a video to help you replicate the workflow. To clarify, in the report we add a signal to dynamically resize the width so that it is wider when rendering inside the report. When we render the widget in the analysis panel as you did above we do not modify the width signal. Thus, the bug seems to be created by resizing the widget. The workflow we use for resizing the widget is documented in @KaylaKremer comment above!
Let me know if you need additional information from our side!
Best,
Richard
roying
commented
5 years ago Chrome debug console shows Cross-Origin Resource Sharing (CORS) errors and Vega errors. Try to resolve the CORS issue first.
https://en.m.wikipedia.org/wiki/Cross-origin_resource_sharing
richardbarad
commented
5 years ago @roying. Thank you for reviewing this and for providing your comments! I believe the VEGA and CORS errors you were seeing were caused by an issue with one of the urls used in the vega widget which returns the data used in the visualization. The analysis url we use was not returning a response and thus the request failed. I saw the same issue yesterday, but just checked again and it is working now. If you are still having issues could you try analyzing a smaller area? Analyzing a large area will often return errors.
Please note that the error above were for a different widget (The Tree Cover Loss / Gain & ANNUAL TREE COVER LOSS) which are the first and second widgets in the report. I do not think the errors should have implications on the widgets mentioned above (CO2 EMISSIONS FROM BIOMASS LOSS or the points in GLAD ALERTS PER MONTH).
Hope this clarifies things, and thank you very much for your support. I can also send you a link to the Visualization in the Vega editor if that will troubleshoot!
Best,
Richard
roying
commented
5 years ago Vega tooltip works in the horizontal bar charts in this page (on my Windows computer with Chrome browser), so the issue is not likely due to a Vega bug with tooltip or with Microsoft Windows.
By the way, it appears your are using Vega 4.2.0 and not v3.0.7 as stated in the title:
loadjsfile('https://cdnjs.cloudflare.com/ajax/libs/vega/4.2.0/vega.min.js', { charset: 'UTF-8' });
KaylaKremer
commented
5 years ago @roying ,
Thank you for looking into this! And apologies for mentioning the wrong Vega version. I was under the impression we were using 3.0.7 since that is what we have listed in our package.json. But you are right, it appears we are indeed using 4.2.0. I will update the issue title to reflect the correct version.
I also should have been more specific and said that the tooltip issue appears for vertical bar charts and line charts. The horizontal bar charts don't seem affected as we do not resize the charts' heights, only their widths.
roying
commented
5 years ago Could you provide the Vega specs, example data and code used in resizing?
KaylaKremer
commented
5 years ago Hi @roying ,
Thank you for your reply.
I have all of the specs we used mentioned in my original post:
For our Vega specs, here is the API call for the CO2 EMISSIONS FROM BIOMASS LOSS bar chart as an example: https://api.resourcewatch.org/v1/widget/ac38fdbd-fdb1-4d8e-9109-674013fb51a2?period=2001-01-01,2018-12-31&thresh=30&geostore=277e65fb0fbf5c6fb8f73143e559fc38& All of the specs for our charts are set up in a similar manner.
We also add in {"type": "fit", "resize": true} and a signal to override the width:
{ name: "width", update: "containerSize()[0]*0.95", value: "", on: [ { events: { source: "window", type: "resize" }, update: "containerSize()[0]*0.95" } ] }
The final config comes out looking like this:
I'm using the CO2 EMISSIONS FROM BIOLOSS as the example data.
The code used to resize the chart uses React Measure
Here is a screenshot of how we manually add in the autosize & width signal to what's returned from the API call:
And how we implement React Measure:
richardbarad
commented
5 years ago @roying. Also here is a link to the VEGA chart for biomass in the VEGA editor. I grabbed the widget configuration from the url @KaylaKremer shared and copied it into the editor. This is the configuration prior to applying the autosize and width signal which Kayla showed above.
roying
commented
5 years ago Could you provide complete Vega spec for the line chart (GLAD ALERTS PER MONTH)?
jheer
commented
5 years ago Thank you @roying for helping to investigate this issue! It is much appreciated. π
I do not have easy access to a Windows environment so I'm afraid I can't be of much help for the time being, but I will monitor this issue.
richardbarad
commented
5 years ago roying
commented
5 years ago Found something interesting.
For "Print Report", .css file is:
including styles for DOM elements for Vega chart:
.vega-chart > canvas { max-width: 60rem; width: 100%; margin: 1rem auto; } .vega-chart-bar-container { max-width: 60rem; width: 100%; margin: 1rem auto; } .vega-chart-line-container { max-width: 60rem; width: 100%; margin: 1rem auto; } .vega-chart-badge-container { max-width: 30rem; width: 100%; margin: 1rem auto; } .vega-chart-pie-container { max-width: 290px; width: 100%; margin: 1rem auto; }
In Microsoft Windows computer Chrome browser at normal font size of 100%, the rendered Vega chart has div width of 960 and canvas width of 922 pixels (with issue of Vega tooltips for line chart not appearing when mouse is hovering over symbols).
But when the browser font size is increased to 400%, lo and behold, Vega toolips appear for the line chart and positioned correctly for the vertical bar chart. The rendered chart has div width of 251 and canvas width of 249 pixels.
To find a solution or workaround, try:
=================================================================
==================================================================
roying
commented
5 years ago Further testing on effect of changing browser font size zoom level:
Windows 7 (32-bit)
Chrome Version 76.0.3809.100 (Official Build) (32-bit) - at zoom level 400% or higher, Vega tooltip for line chart appears Note: Chrome browser crashes frequently when changing zoom levels
FireFox - only allows zoom level to 300% - Vega tooltips do not appear for line chart
Windows 10 (64-bit)
Chrome: same behavior as in Windows 7
Microsoft Edge: similar to Chrome when browser zoom level at 425% or higher (Vega tooltip for line chart appears at this zoom level)
roying
commented
5 years ago Here is a complete working example (html, javascript and Vega spec) using similar css style and Vega spec as the line chart. Vega chart appears to work properly with tooltips (at browser default zoom level of 100% in Microsoft Windows computer).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/vega@4"></script>
</head>
<body>
<div style="border:1px solid green; width:100%; margin:1rem auto;">
<div id="vis" style="border:1px dotted red; width:100%; max-width:60rem; margin:1rem auto;">
</div>
</div>
</body>
<script>
var vega_spec =
{
"$schema": "https://vega.github.io/schema/vega/v4.0.json",
"width": 400,
"height": 250,
"background": "beige",
"padding": 10,
"autosize": { "type": "fit",
"contains": "padding",
"resize": true
},
"signals": [
{ "name": "width",
"value": "",
"update": "containerSize()[0] * 0.95",
"on": [
{ "events": { "source": "window",
"type": "resize"
},
"update": "containerSize()[0] * 0.95"
}
]
},
{
"name": "language",
"value": "en",
"bind": {
"input": "hidden",
"name":" ",
"options": [
"fr",
"ka",
"es",
"en",
"pt",
"zh",
"id"
]
}
},
{
"name": "ylabel",
"value": "Years",
"update": "if(language=='en','Number of Alerts', if(language=='fr','Nombre dβalertes',if(language=='es','NΓΊmero de alertas',if(language=='pt','NΓΊmero de alertas',if(language=='ka','Number of Alerts',if(language=='zh','ι’θ¦ζ¬‘ζ°','Jumlah Peringatan'))))))"
},
{
"name": "xlabel",
"value": "Month",
"update": "if(language=='en','Month', if(language=='fr','Mois',if(language=='es','Meses',if(language=='pt','Meses',if(language=='ka','αααααα',if(language=='zh','ζδ»½','Bulan'))))))"
}
],
"data": [
{
"name": "data",
"format": {
"property": "data.attributes.value"
},
"url": "https://production-api.globalforestwatch.org/v1/glad-alerts?period=2015-01-01,2019-12-31&aggregate_values=true&aggregate_by=month&geostore=5df84c1c1a60417a6bbb65e05868ce1d",
"transform": [
{
"type": "formula",
"as": "month",
"expr": "datum.month - 1"
},
{
"type": "impute",
"groupby": [
"year"
],
"keyvals": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11
],
"key": "month",
"field": "count",
"method": "value",
"value": 0
},
{
"type": "collect",
"sort": {
"field": [
"year",
"month"
]
}
},
{
"type": "formula",
"as": "date",
"expr": "datetime(datum.year, datum.month)"
},
{
"type": "filter",
"expr": "datum.date < datetime(2019, 7)"
}
]
},
{
"name": "months",
"values": [
{
"month":0,
"en": "Jan",
"fr": "Janv.",
"pt": "Jan.",
"es": "Ene.",
"ka": "ααα.",
"zh": "δΈζ",
"id": "Jan."
},
{
"month":1,
"en": "Feb",
"fr": "FΓ©v.",
"pt": "Fev.",
"es": "Feb.",
"ka": "ααα.",
"zh": "δΊζ",
"id": "Feb."
},
{
"month":2,
"en": "Mar",
"fr": "Mars",
"pt": "Mar.",
"es": "Mar.",
"ka": "ααα .",
"zh": "δΈζ",
"id": "Mar."
},
{
"month":3,
"en": "Apr",
"fr": "Avril",
"pt": "Abr.",
"es": "Abr.",
"ka": "ααα .",
"zh": "εζ",
"id": "Apr."
},
{
"month":4,
"en": "May",
"fr": "Mai",
"pt": "Mai",
"es": "Mayo",
"ka": "αααα‘.",
"zh": "δΊζ",
"id": "Mei"
},
{
"month":5,
"en": "Jun",
"fr": "Juin",
"pt": "Jun.",
"es": "Jun.",
"ka": "ααα.",
"zh": "ε
ζ",
"id": "Jun"
},
{
"month":6,
"en": "Jul",
"fr": "Juil.",
"pt": "Jul.",
"es": "Jul.",
"ka": "ααα.",
"zh": "δΈζ",
"id": "Jul"
},
{
"month":7,
"en": "Aug",
"fr": "AoΓ»t",
"pt": "Ago.",
"es": "Ago.",
"ka": "ααα.",
"zh": "ε
«ζ",
"id": "Agu."
},
{
"month":8,
"en": "Sep",
"fr": "Sept.",
"pt": "Set.",
"es": "Sept.",
"ka": "α‘αα₯.",
"zh": "δΉζ",
"id": "Sep."
},
{
"month":9,
"en": "Oct",
"fr": "Oct.",
"pt": "Out.",
"es": "Oct.",
"ka": "αα₯α’.",
"zh": "εζ",
"id": "Okt."
},
{
"month":10,
"en": "Nov",
"fr": "Nov.",
"pt": "Nov.",
"es": "Nov.",
"ka": "ααα.",
"zh": "εδΈζ",
"id": "Nov."
},
{
"month":11,
"en": "Dec",
"fr": "DΓ©c.",
"pt": "Dez.",
"es": "Dic.",
"ka": "ααα.",
"zh": "εδΊζ",
"id": "Des."
}
]
},
{
"name": "lookup",
"values": [
{
"hex": "#d8d8d8",
"year": "2015"
},
{
"hex": "#aaaaaa",
"year": "2016"
},
{
"hex": "#8A8A8A",
"year": "2017"
},
{
"hex": "#fc92f7",
"year": "2018"
},
{
"hex": "#ed07e1",
"year": "2019"
}
]
},
{
"name": "table_viz",
"source": "data",
"transform": [
{
"type": "lookup",
"from": "lookup",
"key": "year",
"fields": [
"year"
],
"values": [
"hex"
]
},
{
"type": "lookup",
"from": "months",
"key": "month",
"fields": [
"month"
],
"values": [
{"signal":"language"}
],
"as":["month_name"]
}
]
}
],
"scales": [
{
"name": "x",
"type": "point",
"padding": 0.3,
"range": "width",
"domain": {
"data": "table_viz",
"field": "month_name"
}
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {
"data": "data",
"field": "count"
}
},
{
"name": "color",
"type": "ordinal",
"domain": {
"data": "table_viz",
"field": "year"
},
"range": {
"data": "table_viz",
"field": "hex"
}}
],
"axes": [
{
"title": {"signal":"xlabel"},
"orient": "bottom",
"scale": "x",
"labelBound": true,
"labelAngle": -90,
"labelAlign": "right",
"labelBaseline":"middle"
},
{
"title": {"signal":"ylabel"},
"orient": "left",
"scale": "y",
"format": ",.0f"
}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"name": "series",
"data": "table_viz",
"groupby": "year"
}
},
"marks": [
{
"type": "line",
"from": {
"data": "series"
},
"encode": {
"enter": {
"x": {
"scale": "x",
"field": "month_name"
},
"y": {
"scale": "y",
"field": "count"
},
"strokeWidth": {
"value": 0.6
},
"interpolate": {
"value": "linear"
},
"strokeOpacity": {
"value": 1
},
"stroke": {
"scale": "color",
"field": "year"
}
}
}
},
{
"type": "symbol",
"from": {
"data": "table_viz"
},
"encode": {
"enter": {
"x": {
"scale": "x",
"field": "month_name"
},
"y": {
"scale": "y",
"field": "count"
},
"fill": {
"scale": "color",
"field": "year"
},
"size": {
"value": 13
},
"tooltip": [
{
"signal": "if(language=='en',datum.count + ' alerts in ' + datum.month_name + ' ' + datum.year, if(language=='fr',datum.count + ' alertes en ' + datum.month_name + ' ' + datum.year,if(language=='es',datum.count + ' Alertas en ' + datum.month_name + ' ' + datum.year,if(language=='pt',datum.count + ' Alertas em ' + datum.month_name + ' ' + datum.year,if(language=='ka',datum.count + ' α¨αα’α§ααααααααα α¨αααα‘α£αα ' + datum.month_name + ' ' + datum.year,if(language=='zh',datum.count + ' ζι ' + datum.month_name + ' ' + datum.year, datum.count + ' Lansiran di ' + datum.month_name + ' ' + datum.year))))))"
}
]
}
}
}
]
}
],
"legends": [
{
"fill": "color",
"orient": "bottom",
"columns":3,
"columnPadding": 25,
"direction": "horizontal",
"titleFontSize": 11,
"labelFontSize": 10,
"symbolOpacity": 0.6
}
]
}
;
var vegaRuntime = vega.parse(vega_spec);
var vegaView = new vega.View(vegaRuntime)
.logLevel(vega.Warn)
.initialize("#vis")
.renderer('canvas')
.hover()
.run();
</script>
</html>This article discusses the effects of using rem units instead of pixels. This may explain why the issue (Vega tooltips not appearing in line chart after resizing window) is observed only in Windows computers:
In Windows, a user can change his DPI scaling settings to something above 100%, which is very similar to the CSS reference pixel in the browser.
If you change your preference in Microsoft Windows to scale the user interface of the Operating System, all applications including your Browser will receive this DPI scale information and will apply a default Zoom which is magnification and not text zoom.
R.I.P. REM, Viva CSS Reference Pixel! https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/comment-page-1/
KaylaKremer
commented
5 years ago @roying ,
Thank you so much for taking the time to look into this for us! Your first suggestion of changing Vega to use svg instead of canvas did the trick. But it's very good to know about the effects of rem units on Windows computers too. We will definitely keep this in mind if we encounter any other issues with the tooltips.
Again, we really appreciate your help with figuring this out! I'll go ahead and close this issue out.
Hello,
My team and I are using
Vega 4.2.0(We would prefer not to upgrade to the latest version as it may break other parts of our app) and are encountering odd behavior with the tooltip only on Windows PC. For the bar charts, the tooltip does not correlate with where the user hovers the cursor. And for the line charts, the hover does not appear at all over the points.Screenshots:
We have tested on different Windows and Mac computers and in the following browsers with these specs:
The results seem consistent in that only Windows PCs experience this issue and it occurs in all browsers.
We have a test build, which you can use to reproduce the issue with here: http://alpha.blueraster.io/gfw-mapbuilder/new-report-consolidated-builds/default/
To replicate:
Start Drawingorange button.Print Reportbutton.CO2 EMISSIONS FROM BIOMASS LOSSor the points inGLAD ALERTS PER MONTH(other bar charts appear slightly off as well).For our Vega specs, here is the API call for the
CO2 EMISSIONS FROM BIOMASS LOSSbar chart as an example: https://api.resourcewatch.org/v1/widget/ac38fdbd-fdb1-4d8e-9109-674013fb51a2?period=2001-01-01,2018-12-31&thresh=30&geostore=277e65fb0fbf5c6fb8f73143e559fc38& All of the specs for our charts are set up in a similar manner. We also add in{"type": "fit", "resize": true}and a signal to override the width:My team and I appreciate any assistance or suggestions on how to fix this bug. Thanks!