I'm currently developing my own Metrics in Vega. Here is an example...
I am just using text marks, here is the source code for a very similar example to mine. In the example height and width are specified. However, I'm looking for the text to be autosized - that is, height and width are determined from the space the marks take up. The usual global setting to do this would be, autosize: pad or autosize: fit but these don't seem to correctly fit text marks on their own.
I'm reaching out to anyone who knows how to do this. Since I am using these in a Kibana dashboard, the autofitting would allow us to scale these metrics to any size we'd like, independent of any amount of text.
Many thanks.
To answer my own question,
I defined a 100x100 grid using scales and axes in Vega. And then plotted my words to fit inside this grid - since you can specify the x,y positions of the words.
After this the autofit applied correctly. I made sure to scale the fontsize (which is height of text in pixels) to the height of the panel (external signal).
Finally I had to hide the axes. So inside the axes I added this labels: false, domain: false. With a few extra additions this was my result. This is totally resizable within Kibana.
Related
Label in CN1 is limited to being a Single line.
Now that we have to use SpanLabel for anything that can take more than 1 line,
we face one issue.
When we have a strict design that uses consistent height for a list item, we have to give max/min lines allowed for the SpanLabel (At least that's how it works in Android And Flutter).
When I searched for anything that says line in SpanLabel file, I only found that word in one place, that too in a comment.
It did not feel right using fixed height/width property to a SpanLabel as they will vary with fonts and font sizes. The hight should be calculated with respect to the number of lines of the text & font config like font size, line spacing, padding, etc.
What is the right way to achieve consistent height across various SpanLabel despite the varied length of the text they display?
The "right way" would be the layout manager as it would allocate the right amount of space to the span label and everything else. E.g. if you use TableLayout you can allocate the height as percentage.
SpanLabel is technically a TextArea that's encapsulated. It has that distinction between rows/lines which isn't exposed within SpanLabel. But you can manipulate the underlying text area by using getTextComponent().
Is there a way to provide line width in bokeh in data space, or alternatively can the line width be fixed in a way that zooming does not alter it?
I am trying to draw lines right next to one another without clashes or gaps between them.
Currently, I am using a mapping from line width to coordinate width and change the line widths and line coords in sync to achieve this, but as soon as I zoom the line width is adapted.
Is there a way to provide line width in bokeh in data space
No, but feature requests are welcome!
can the line width be fixed in a way that zooming does not alter it?
Line width is set in screen units - zooming does not alter it by default.
It seems like the problem is that you change your line width in response to the range changes, and zooming does change ranges.
pls check link. I want to set the plot height of all charts equally, how to do it?
link here: jsfiddle.net/doanvh/vqn24y5w/14/ (type http:// left link)
Image here
You can find the highest value of the height among all charts and based on the found value, modify the rest. I have modified your example a little bit by adding a function (look for the updatePlotHeights function between script tags, HTML tab) that performs a simple calculation that makes all charts' heights equal. Also I have decreased charts' widths in order for you to display them horizontally to compare them.
Example:
http://jsfiddle.net/BlackLabel/qbs6k3Lp/
I found my yAxis label too big to be shown--it was truncated by the left border.
I tried increasing the left margin, with no success. It seems that the label text is left-aligned. So increasing the margin only gets the label further away from the ticks text.
Please see the attached screenshots. The one with wider gap is margin.left=70. The other one is with margin.left=40. No matter which case, the 'Expenditures' seems to be truncated on the left side.
Is there anywhere in the dc.css that I can change this configuration?
Thank you!!
You can adjust where the axis labels are placed relative to the edge by using the second parameter when you call the .xAxisLabel() and .yAxisLabel() methods. This sets the "padding" (actually the offset from the left/bottom).
coordinateGridMixin.xAxisLabel docs
coordinateGridMixin.yAxisLabel docs
It's confusing that the text size gets set through the stylesheet but the positioning can't be. I'm not sure if there's any way around this, though
How can I autoscale the text font size in a web page in order to make text in a div or p fit within given bounds?
There are nice solutions for Android, like this one, but I haven't found any for GWT.
Do you guys have any?
Thanks!
There are sevaral solutions to this problem:
(1) render the text, measure its width (myLabel.getOffsetWidth(), compare to the desired width, change font size if it does not fit and start over (remember to do this inside the Scheduler's deferred command, or your offset width will be zero);
(2) use FitText.js (http://fittextjs.com/);
(3) use canvas which can auto-fit text into provided space;
(4) use ellipsis when text overflows;
(5) use viewport units for text font (limited browser support at this time): http://css-tricks.com/viewport-sized-typography/
(6) create a different, more fluid UI design that handles content size better.