how to uncycle and change column ratio with jeet - stylus

I am trying to break from 4 columns to 3 by uncycling,
the initial ratio looks like this
col(1/4, gutter: .5, cycle: 4)
then i try changing it at laptop resolution to only 3 columns
uncycle()
col(1/3, gutter: .5, cycle: 3)
is there any way to change ratios like this?

According to their column API, I think you should use
col(1/3, gutter: .5, uncycle:4, cycle: 3)

You are close, the correct way to do this is:
#include col(1/3, $uncycle:4, $cycle:3);
So basically you first uncycle the number of previous cycles, and after that you enter the new number of cycles.
For more information, check the Jeet documentation. http://jeet.gs

Related

How do 'nubs' work in Bot Framework React Webchat?

I am aiming to make messages in a Microsoft Bot Framework Chatbot appear more like 'speech bubbles' and have a triangular 'nub' display to the side of each, eg
The React Webchat client provided as part of the Bot Framework has optional properties to control the size and position of nubs which are
bubbleNubOffset?: number | 'bottom' | 'top';
bubbleNubSize?: number;
My first question is: Regardless of what (positive) bubbleNubOffset value is used, the nub always appears at the top of the message bubble rather than being offset eg
How can I move the nub down to appear more like the first image? Setting bubbleNubOffset to any negative number moves the nub to the bottom of the message bubble.
The source in GitHub for them has a comment
/**
* Nub offset ''bottom' will render nub at the bottom
* A positive or negative number will shift nub offset up/down
* "top" is equivalent to positive zero.
* "bottom" is equivalent to negative zero.
*/
but it doesn't appear to actually work like that.
My second question is: Without adding CSS to set the z-index of the message element, setting the bubbleNubSize causes the nub to be displayed in front of the message eg:
Is there a way to avoid this via configuration or is custom CSS the only way to do it?
My guess is you are supplying too large of a value to the bubbleNubSize property. For instance, here are the values that I use in my test Web Chat client.
bubbleBackground: 'black',
bubbleBorderColor: 'red',
bubbleBorderRadius: 9,
bubbleBorderWidth: 2,
bubbleTextColor: 'white',
bubbleNubSize: 5,
bubbleNubOffset: 'bottom'
bubbleFromUserBackground: 'black',
bubbleFromUserBorderColor: 'green',
bubbleFromUserBorderRadius: 9,
bubbleFromUserBorderWidth: 2,
bubbleFromUserTextColor: 'white',
bubbleFromUserNubSize: 5,
bubbleFromUserNubOffset: 'top'
Thankfully, Web Chat has built-in logic that helps interpret how the bubble and nub displays based on the values you provide. For instance, the nub mirrors vertically depending on the offset, and the border radius of the nub corner to be used is set to 0 to create a visually seamless flow.

LiveCharts - How to prevent the Y-Axis from showing double values?

I have a Columndiagram. This diagram may have Y values from 0 to very larg numbers.
My problem:
When the Y values are small (from my observation smaller than 7), the chart shows double values. (for example: 0, 0.01, 0.02 ... , 0.1), which is in my case not correct.
What I want:
force the Y Axis to use integers.
What I cannot do:
I cannot define a seperator for the Y axis and set its Step to 1. Becuase if I do it, I'll have Step= 1 even if the values are very large, which is not desirable.
Is there any workaround for it?
By default, the library decides the step (when you don't force it) with the CalculateSeparator() method (for more info see this), since the library should also allow you to plot decimal values, it can not be forced to display only integers.
A simple work around I can think of, is to force the Axis.MaxValue property.
In your case, when your values are less than 7, I would force the Axis.MaxValue to 10 (or any other value that works fine for you), then when the data in your chart is greater than 7, you can set Axis.MaxValue back to double.NaN and the library will calculate this limit by it self.
I hope it helps you.

Angular NVD3 y-axis scale

I have an app that creates discrete bar charts. For some odd reason (which seems to be an internal error in the library), the y-axis scales to a data value which has the LOWEST number of integers in the value. For example, one data set has (1750, 1056, 1200, 850). The y-axis scales the maximum range to "850", even though the other numbers are all larger. I've tried using the forceY function, setting the maximum range value to the callback of the data value in my json, but it doesn't work. The problem only corrects itself if all of the numbers in the data set have the same number of integers in the value (i.e. all hundreds, thousands, etc). What is going on and is there a way to fix it??
For reference, here is my plnkr. Go to the "Top 5 SIC by Comments" report chart to see what I mean. The same problem occurs with the "Top 5 Topics by Comments" report chart as well. If anyone has any insight as to how to fix this problem, please let me know. Thank you ahead of time.

Create GitHub punch card like plots with JFreeChart

I am looking for suggestions as how to create plots similar to GitHub punch cards with JFreeChart. E.g.
I guess it's some variant of a heat map, or two dimensional histogram.
Ok, so I found XYBubbleRenderer which looks like a good starting point.
create a MatrixSeries with rows = 7, columns = 24
fill in the frequencies accordingly. I found it useful to normalise the values first to 0...1, then take the square root (smaller values have a bit better visible circles), then multiply by 0.5 (otherwise the circles are too large)
create a MatrixSeriesCollection from that
use ChartFactory.createBubbleChart
the circle outline can only be removed via plot.getRenderer.setSeriesOutlinePaint(0, new Color(0, 0, 0, 0))
ensure integer tick units on both axis
x-axis range -0.5 to 23.5, y-axis range -0.5 to 6.5 (or 0.5 to 7.5 if you use Calendar.DAY_OF_WEEK)
custom NumberTickUnit for the y-axis to use day labels instead of numbers
The result:
In addition to XYBubbleRenderer, suggested here, also consider a suitable implementation of TableCellRenderer and Icon, illustrated here.

SSRS line chart. How to stop numbers from repeating in vertical axis

I have a line chart in ssrs. Whenever the highest line values are 1 or 2 instead of getting a scale of 0,1,2 which is what I want, I get 0,1,1,2,2. This dosn't make sense especially because the number values are not decimals and are unformatted.
Please help.
The Expression for the vertical axis Interval should be below expressions.
If your value is sum
=IIF(Max(Sum(Fields!Item.Value))<20,1,"Auto")
If your value is count
=IIF(Max(Count(Fields!Item.Value))<20,1,"Auto")
Note: I used 20 as the above that the Auto will work good. Make according to your requirement.
Sounds like there is formatting on the vertical axis: That it's actually trying to show 0, .5, 1.0, 1.5, & 2 but after rounding that comes out as 0,1,1,2,2
You should change the vertical axis interval from "Auto" to 1:
I understand that this is quite old post. Still I wanted to reply..
I faced the same issue on column chart when the scale was of small range....
So I used the following expression in axis properties->interval
=IIF(Max(Fields!count_Items.Value)>=6,0,1) - [note: here 0 means - Auto interval]
Hope this answer helps someone. :)
The problem here is not only the interval but also the maximum value of the range that the axis uses. You can set the value for the Interval with this type of expression IIF(Max(Sum(Fields!Item.Value))<20,1,"Auto") but the axis can still make the scale too large. It then tends to fill in with decimals or if you suppress decimals you get repeating integers.
Use a custom code like this:
Public Shared Function AxisRange(ByVal Number As Double) As String
Dim RangeString as String
If Number <=5 Then
RangeString ="5"
Else If Number <=10 Then
RangeString = "10"
Else RangeString = "Auto"
End If
Return RangeString
End Function
In the Maximum value of the range use an expression like:
=code.AxisRange(Max(Fields!Field.Value))
By doing this you force the maximum value of the range to be a similar size to the maximum value in your chart. This solves the problem.

Resources