Pie chart legend placement is at bottom left.

[richardbarad]

Pie chart legend text is appearing off center in report in: http://alpha.blueraster.io/gfw-mapbuilder/396-resizing-widgets/. The legend placement is currently set to bottom which seems to place it at the bottom left. Based on VEGA documentation, there does not seem to be an option to have the legend placement set to bottom-center.

Possible solutions:

• There is an option in VEGA to specify x and y settings for the legend. I tried to make these proportional so that the to the height and width so that the legend would be centered and posted a new widget LCC widget: cdc27c28-2ca4-4027-9593-634a362f38db.

• Other option could be to place a max-width on the MapBuilder side so that the container size is always square.

Open to other ideas as well!

Note:: We have custom country analysis which use pie charts as well so we will need to make sure the solution is deployed in a way such that it can be applied to other analysis. For example, hazard analysis here: https://atlas.mepa.gov.ge/maps/map?l=en

[kaylakremer]

@richardbarad I already posted about it in Slack, but just copying what I wrote for here!

kkremer [5:31 PM]
@rbarad It looks like the max-width approach works and I can individually control how wide each widget gets via CSS! So I think this should all work once you update the signals! I temporarily chose a max-width of 500px to demonstrate, but we can set that to be whatever value we think is appropriate for it.

build: http://alpha.blueraster.io/gfw-mapbuilder/436-smaller-max-width/

We can try to apply the same thing to the pie chart legend as well!

[richardbarad]

@kaylakremer. Thanks!

Just to confirm, we would use a Max width for both pie charts and badges? How does MapBuilder know which widgets to apply a max-width to? Is this something we would specify in the configuration file.

Richard

[kaylakremer]

@richardbarad Yes, that would be the idea to set max-width for both pie charts and badges. I plan to ask Lucas about this tomorrow, but my guess is this will best be handled by the configuration file.

[kaylakremer]

Hey @richardbarad! After researching this some more, I think it may be possible to center position the legend if we use Vega Charts version 5.0 or higher.

I found this in the Vega docs. Scroll down to Legend Layout Properties >= 5.0

I also found it addressed here in Vega's Github Issues

As their example shows with orient set to bottom, we should then be able to center align it. My guess would be something like this:

"legends": [ {
            columnPadding: 30,
            columns: 2,
            direction: "vertical",
            fill: "color",
            labelFontSize: 9.5,
            orient: "bottom",
            title: {
              signal: "legend"
            },
            titleBaseline: "top",
            titleFontSize: 9.5,
            titleFontStyle: "normal",
            legend: {
              layout: {
                bottom: {
                  anchor: "middle",
                  direction: "vertical",
                  center: true,
                  margin: 2,
                }
              }
            }
}]

It seems like we're currently using Vega 3.0.7. I'm not sure if upgrading to the latest version of Vega would break anything. I'll keep looking for other solutions in the meantime if you don't think upgrading the Vega version is a good idea.

[richardbarad]

@kaylakremer. Thank you for researching this!

Do you know if upgrading to the latest version of VEGA would be an update that just needs to made in MapBuilder or would it also require changes to the API. I know our CMS Widgets which are also saved in the API are using version 3.x.

Also, did applying the max-width not address this issue?

Richard

[kaylakremer]

@richardbarad I don't know the answer to your first question. I'll have to ask @SwampGuzzler about it! Or perhaps @csphang can answer this too?

max-width unfortunately did not work. The positioning of the legend seems to be completely controlled by the config. I was able to get the legend to move around a bit by changing the offset and orient values. But I've still been unsuccessful at getting it to position perfectly center.

[richardbarad]

@kaylakremer. Thanks! Let me know what @SwampGuzzler says about the first question. Is updating the VEGA version of the MapBuilder easy enough to test?

If not, could you try this widget and see how it behaves: 9f37ac20-772f-42a9-a118-91f433194d55? It might not be perfectly center, but I was experimenting with it a bit outside of MapBuilder and it did a pretty good job of keeping the legend under the pie chart even if it was not centered!

Richard

[kaylakremer]

@richardbarad I tried out your new widget ID and I think we're close (see screenshot). The legend is now centered, even when I resize the window, but the pie chart is now off. With the widget ID I was using before, 1b84364d-0efd-4d60-81ef-870f7d13ee7b, the pie chart center-aligned, but not the legend. So I think if we combine how the pie chart is set up from 1b84364d-0efd-4d60-81ef-870f7d13ee7b and how you set up the legend in 9f37ac20-772f-42a9-a118-91f433194d55, everything should work!

Do you mind creating a new widget ID to test this out?

[richardbarad]

At @kaylakremer. Please try this on: 467a3e96-1b78-47a3-bb6f-e26a2cf58370.

I am not sure why the one above 1b84364d-0efd-4d60-81ef-870f7d13ee7b is not working though because it worked fine the online Vega editor! See link below. Let me know if you have any thoughts!

Link

[richardbarad]

@kaylakremer.

I modified the widget configuration a bit, and it seems like that on initial load the pie chart loads correctly, but once you start to resize the pie chart it is no longer centered.

In the widget, the x is listed as width/2 so I thought that should center it in the middle of the area. Any chance this could be something on your side? I am attaching a video of the behavior. I realized this issue was also present in the widget configuration where the legend was not centered.
piechart_video.zip

[kaylakremer]

@richardbarad Putting the build here that I slacked you: http://alpha.blueraster.io/gfw-mapbuilder/452-update-resources-to-distinguish-chart-types/

It looks like setting the max-width to be whatever the pie chart's width is solves the problem!

As I mentioned, if you need to make any further adjustments to the pie chart's width or the x positioning of the legend, just let me know and I will update the max-width of the pie chart's container. Once you think everything is good, I will update #452 since that ticket also fixes this issue!

[richardbarad]

@kaylakremer.

I just updated the widget pie chart to have a width of 290px. Please update the max-width as well! Also, I think the fire badge chart is tagged as a bar chart instead of a badge chart.

[kaylakremer]

@richardbarad Great, I'll update it now! And good catch on the fires badge. I'll update that to be a badge instead of a bar

[csphang]

Verified as fixed on consolidated builds and country builds. for example,
http://alpha.blueraster.io/gfw-mapbuilder/new-report-consolidated-builds/tierras-indigenas/