search

datopian / datahub

🌀 Rapidly build rich data portals using a modern frontend framework
https://datahub.io/opensource
MIT License
2.17k stars 322 forks source link

Increase width of views #1099

Closed anuveyatsu closed 4 weeks ago

anuveyatsu commented 2 months ago

Eg, I have a map view on my Geojson data here (which is working great btw with multiple layers 😄) but its width is a bit narrow which makes it difficult to read. This is not a bug but an idea that probably very secondary 😃

How to reproduce

image

Expected behavior

Have it wider.. but again this might not be the case on other examples so I'm not sure if that should be even fixed but a good one to have in the issue tracker.

Daniellappv commented 2 months ago

@anuveyatsu this is great and please tag me next time for visibility, we will add this to our backlog and it's a great suggestion

olayway commented 1 month ago

It's not so easy to implement as width of data vis components used in markdown is constrained by the layout's content width. I tried applying dynamic negative margin to these components and it did work well for some components but for other it would require extra tweaks as by default they would look weird.

E.g. map component looks ok:

image

But Plotly line charts looks like this:

image

As a quick fix, which I think is needed anyway as we're dealing with "data-vis-rich" pages by definition, I'd increase the overall data story layout's content width a bit.

And in the future we might 1) make sure every portaljs component allows for passing custom styles in style prop (e.g. Map does allow to do that so it should be possible to apply negative margin) 2) create additional prop like width = 'normal' | 'full' | 'medium' | 'wide'. But that would require some shaping first I think.

@rufuspollock let me know what you think

rufuspollock commented 1 month ago

Ok, lets just make it a bit wider. For me most important is images and charts. I wonder if some hack for prose somehow in tailwind.

olayway commented 4 weeks ago

Ok, I've increased the content width (https://github.com/datopian/datahub-next/commit/1a1a39d01c62ec5b448260189396dd1af4cda550) Closing as FIXED for now

olayway commented 4 weeks ago

In case we still want to make data visualisations/images wider than the text, this is how I managed to achieve this, but maybe there is a better solution

image