I use the BreakpointObserver from '#angular/cdk/layout' in my projects which uses pixel values for screen sizes like Breakpoints.Medium or Breakpoints.Small. How can I get these values in my scss?
Related
In Vaadin 14.6.1, I tried to create a Vaadin heatmap foollowing the documentation / example from here.
However, I encountered a few problems/questions, listed in descending order of importance below:
The heatmap supported 30 rows by 30 columns; but when I tried 40 rows by 40 columns, the entire heatmap showed a single color (blue in my case).
Is it possible to manually set the minimum numeric value and maximum numeric value for the color scheme. This way, if I plot my data one day and it has values in the range of 0 to 1, but on another dataset from another day, the numeric values range from between 0 and 0.5, the color scheme range won't automatically change (to being between 0 and 0.5) and confuse the user.
In the documentation, it has the following methods listed, but they do not seem to exist in Vaadin 14.6.1
plotOptions.setBorderColor(SolidColor.WHITE);
plotOptions.setBorderWidth(2);
When I hover over the datapoints, is there a way that the tooltip can only show the numeric value (and not the x, y coordinate or the series name etc.?)
Is there any limit to the number of datapoints? I'm hoping that if #1 above is resolved that I can plot a 100 by 100 (ie 10,000) point heatmap.
If I plot 100by100, there will be many labels on the x and y axis. In my case, the x and y axis are actually numerical, so I did what the documentation suggested and just placed category labels in the xaxis and yaxis spots. However, is there any way to only display every "nth" label, so that the x-axis and y-axis is not so crowded? (This would essentially mimic what Vaadin does for normal line charts' xaxis and yaxis).
I'm not that experienced with Vaadin Chart, but these are the questions that I can comment on:
(1) With 40x40 items you go over the threshold of 1000 in which the Chart switches into "turbo" mode for performance reasons. This seems to not be compatible with the heatmap series. You can disable turbo mode by setting plotOptions.setTurboThreshold(0);
(2) Unfortunately the ColorAxis doesn't support this, it only has an API for min and max color. Definitely a valid use-case though, and it seems to be supported by the Highcharts library that the Vaadin Chart uses under the hood. You should consider opening a feature request for this in the Github repo.
(3) This seems to be a documentation issue. The methods are available in later Vaadin platform versions, but not in 14.6.
(5) In theory not, but in practice there will be a huge performance hit in the browser due to the excessive amount of DOM elements (quick test of 100x100 froze the browser for 10s). I'm afraid the component isn't really made for such extreme use-cases. In this case it might be better to utilize a low-level JS drawing library using the canvas, or draw an image on the server-side and display that in the browser. Maybe you can also consider modifying your use-case so that you only display one slice of your data and allow the user to switch between slices.
I notice that when I use LoginForm it has a default size. I can't quite figure out how it gets this size. I would like to standardize the sizes of all my forms, e.g. FormLayout and LoginForm. I do not mind making my FormLayouts match the size of the LoginForm -or- set the LoginForm and FormLayouts to my own preset size. The problem is that when I set the LoginForm's width as a percentage, it never seems to match the same size as the FormLayouts... the LoginForm always comes out smaller for the same percentage.
Is there any way to set my LoginForms and FormLayouts to have the same width consistently?
Currently, there does not seem to be a way how to get the fields from a LoginForm with the Java API. There is a GitHub issue for a similar issue.
As described in the issue, you could execute JavaScript to get the relevant element. Then, you could modify its CSS manually. To set the width of a LoginForm, you could use vaadin-login-form-wrapper.
UI.getCurrent().getPage().executeJavaScript("document.getElementsByTagName('vaadin-login-form-wrapper')[0].style.width = '200px';");
Alternatively, you could use raw CSS and change the attributes of this element.
After investigating the CSS, you could find out that the width of the form is defined by the CSS variable --lumo-size-m. The max-width of the vaadin-login-form-wraper is defined by calc(var(--lumo-size-m) * 10). Therefore, you could also change the theme or just get the width from there and use it for your FormLayouts.
We are using Highstock to display our data.
The project has pre-existing code that uses CSS transform to make the chart larger or smaller e.g. transform: scale(0.7)
The problem is, this CSS transform causes the cursor to be offset when using the navigator bar and hovering over data points.
The requirements at the minute mean I cannot take out the transform to use the inbuilt Chart.setSize() function.
Here is the attempt so far: http://jsfiddle.net/c8bfwhg0/30/
NOTE: I tried getting the post-transform height and width and applying Chart.setSize() with those values, but the problem persists.
I've created a scatter highchart in Jaspersoft Server 6.2 (called ad hoc reports in the product) but encountered a strange problem where I cannot get normal color related properties to take effect. I normally just the property: colors ["#999999"] to other types of charts in Jaspersoft Server but for some reason this does not work in a scatter chart, I also tried using rgba values in the property.
I have searched extensively for a solution and everything that seems to apply to normal highcharts doesn't appear to work in Jaspersoft Server. I've tried adding the following properties:
series.color
series.data.color
series.marker.color
plotOptions.scatter.color
With hex and rgba values defined but the data points either remain black or disappear altogether. It's something that's very easy to manipulate in other chart types but scatter chart tye seems quite restrictive in Jaspersoft so perhaps not. Is there something simple I'm missing here?
i have a google charts continuous hAxis that is shifting to the left, in between data points.
so for instance, normally the hAxis label is as follows:
for some reason, without changing anything, when i have this on staging server, it does the following:
this is on a rails app, so it might have to do with assets being combined, but what chart attribute could be causing this?
label1 ends up missing, and everything is shifted to the left.
i know this is not a CSS issue, as when i view source from the SVG, the actual label1 isn't even in the dataset that google charts generates.
i would prefer not to set the hAxis ticks, and avoid switching to Discrete, and am wondering if there is some sort of position being offset.
i tried to play around with allowContainerBoundaryTextCufoff and explicitly setting the minValue and maxValue of hAxis but to no avail. any ideas why this is being shifted?