I have a dataset of dates and times that I eat my meals (working with nutritionist), like so:
May 31, 8 AM, breakfast
May 31, 12:30 PM, lunch
May 31, 6 PM, dinner
June 1, 1 PM, lunch
June 1, 5 PM, dinner
Notice that above, breakfast is missing on the second day. When I render the dataset with the date as the X-axis and time of day as the Y-axis, meals are rendered as a dot, and missed meals are not rendered.
In Vega-Lite, how do I insert a red tick to represent the missed meal?
Edit: Here is the chart in Vega Editor, along with a start (line 116) at trying to use impute to create the red ticks, which causes the chart to not render.
Use the impute transform to fill in the missing gaps.
https://vega.github.io/vega-lite/docs/impute.html
Related
I'm listing out a table that has the results of a tournament. I have the final placements, as well as the original seeds for each team in the tournament. I'm adding a small bubble with a +/- of how the final placement compares to the original seeding. I'd like to make the background get a darker red as the team did worse, and darker green as the team did better.
Example:
Team A finished 1st and was seeded 3rd -> light green
Team B finish 2nd and was seeded 30th -> dark green
Team C finished 10th was seeded 8th -> light red
Team D finish 30th and was seeded 1st -> dark red
I'd like to set a limit obviously for how dark/light the colors get, so teams that out/under performed past a certain amount would all have the same dark tone.
My site is built using Angular, but is this possible to do with just some simple CSS?
Here is a picture from another site that has this already implemented:
As you can see, the final finish is listed on the left, and how well they performed in comparison to their original seeding is on the right. Blank signifies Seed == Finish
You can create an array for the colors
TS:
colors = [{ finished: "1st", color: "light green" }, { finished: "30th", color: "dark green"}]
Loop through your data in a table (or how you prefer) and add ngStyle:
<table>
<th>Team</th>
<th>Finished</th>
<tr *ngFor="let res of colors" [ngStyle]="{'background':getColor(res.finished)}">
<td>res.whateveryourfieldiscalled</td>
<td>res.whateveryourfieldiscalled</td>
</tr>
</table>
And then add it with a ts getColor method:
getColor(finished) {
return this.colors.filter(item => item.finished === finished)[0].color
}
May I seek help,
Word Wrap or Word break is not working on my string,
This is the text,
The company's revenue has been increasing for the last five years with an overall growth of 49% between 2015 and 2019. Revenue increased 7% to $426.4 million for the year ended December 29, 2019, as compared to $398.2 million for the year ended December 30, 2018. The increase was primarily driven by $28.5 million in incremental revenue from an additional 359 operating weeks provided by new restaurants opened during and subsequent to the year ended December 30, 2018 as well as an increase in its comparable restaurant sales. Net income increased by $0.7 million and 12% to $6.2 million for the year ended December 29, 2019 as compared to $5.5 million during the comparable period in 2018. This was due to the increase in depreciation and amortization costs, as well as the increase in income tax benefits. The company's cash equivalents at the end of 2019 totaled $10.1 million, an increase of $2 million from the previous year. Operating activities generated $43.4 million, while investing activities used $33.3 million. Financing activities used another $8.3 million primarily for common stock repurchases and line of credit payments.
This is my CSS
.txt {
word-break: break-all;
word-wrap: break-word;
min-height:150px;
max-width:150px;
overflow-x: auto;
}
Here is my HTML
<td>
<div class="txt">{{ $value }}</div>
</td>
What happens is
The string is not breaking it shows in one line, even if overflow is hidden or not,
It seems to work fine:
.txt {
word-break: break-all;
word-wrap: break-word;
min-height:150px;
max-width:150px;
overflow-x: auto;
}
<div class="txt">
The company's revenue has been increasing for the last five years with an overall growth of 49% between 2015 and 2019. Revenue increased 7% to $426.4 million for the year ended December 29, 2019, as compared to $398.2 million for the year ended December 30, 2018. The increase was primarily driven by $28.5 million in incremental revenue from an additional 359 operating weeks provided by new restaurants opened during and subsequent to the year ended December 30, 2018 as well as an increase in its comparable restaurant sales. Net income increased by $0.7 million and 12% to $6.2 million for the year ended December 29, 2019 as compared to $5.5 million during the comparable period in 2018. This was due to the increase in depreciation and amortization costs, as well as the increase in income tax benefits. The company's cash equivalents at the end of 2019 totaled $10.1 million, an increase of $2 million from the previous year. Operating activities generated $43.4 million, while investing activities used $33.3 million. Financing activities used another $8.3 million primarily for common stock repurchases and line of credit payments.
</div>
Did you "inspect" your div to see if some other css rule is messing the thing?
When you hit F12 in your browser and then select your div either by clicking on it (1 or 2), you'll see what styles are applied to it in 3.
You'll likely see word-break: break-all; or the same with word-wrap because it is overriden by some other rule.
you can do this instead of nesting div into td
.txt {
word-break: break-all;
word-wrap: break-word;
min-height:150px;
max-width:150px;
}
<table>
<tr>
<td class="txt">skdjfhskadjfhsdlkajfhdsakljfhsdakjfhslkadjfhsdalkjfhsadlkjfhsdalkjfhsadlkjfhsdakljfhsdalkjfhsadlkjfhsdalkjfhsladkjfhslakjfhlskadjfh</td>
<tr>
</table>
I’m looking to achieve the following however am unable to with conditional formatting.
I have a sheet whereby staff will input ‘Leave’ on days they are on leave and ‘Office Day’ in days they will be in the office (other days will be WFH and not inputted).
I want to be able to highlight cells when a column has X number of ‘Leave’ cells (so 15 or more would be Light red, 11-14 would be orange and 10 and less would be green for example) and also highlight cells when there are X number of ‘Office Days’ (i.e 8 or more would be dark red, 6-7 would be purple and 5 and less would be blue) so we can manage capacity.
I’m not sure if I can achieve this with a script instead?
You can do this entirely with conditional formatting. Assuming your "Leave" and "Office Day" values are in column B, you can use the following custom formulas as conditional format rules applied to all of column B:
=AND(COUNTIF(B:B, "Leave")>=15, B1="Leave")
=AND(COUNTIF(B:B, "Leave")>=11, COUNTIF(B:B, "Leave")<15, B1="Leave")
=AND(COUNTIF(B:B, "Leave")<=10, B1="Leave")
=AND(COUNTIF(B:B, "Office Day")>=8, B1="Office Day")
=AND(COUNTIF(B:B, "Office Day")>=6, COUNTIF(B:B, "Office Day")<8,B1="Office Day")
=AND(COUNTIF(B:B, "Office Day")<=5, B1="Office Day")
I have a table of clearances and their expiry dates. If a clearance has expired I would like it to be red, if it expires within 6 months I want it to be amber, if it expires in more than 6 months green and if it is yet to be granted (hence doesn't yet have an expiry date) then black.
I have got the text to default as black and then have
RED
[C_ExpiryDate]<Now()
AMBER
DateDiff("m",[C_ExpiryDate],Now())<6 And [C_ExpiryDate]>Now()
GREEN
DateDiff("m",[C_ExpiryDate],Now())>6 And [C_ExpiryDate]>Now()
This seems to have a few different problems, the red works fine from what I can tell. But the other two seem to be handled poorly, for example a clearance with 06 Sep 2015 is amber (today is 03 July 2014 so this should be green). Similar for 05 Mar 2017, I think it is just looking at the month regardless of the year, but I'm not too sure how to handle this better.
Not sure if it might be easier to default as green and perhaps write something like
[C_ExpiryDate] = ""
But this didn't seem to do anything and everything was coming up as green even when there was a blank date. Similar for single quotations.
Any suggestions appreciated...
Which version of MS Access are you using? This works for me:
The way you have it written this is happening (i'm substituting #06/Sept/2015# for [C_ExpiryDate] to keep with your example)
Red?
#06/Sept/2015#<Now() --> False
Amber?
DateDiff("m",#06/Sept/2015#,Now())<6 And #06/Sept/2015#>Now() --> True
Green is not evaluated
The problem is that you have the greater date first and the lesser date last. Switch them.
Or alternatively, since you are checking [C_ExpiryDate]>Now() anyway you can take the absolute value of them and not worry about order.
#06/Sept/2015# < Now() --> False (Red)
DateDiff("m",Now(),#06/Sept/2015#) < 6 And #06/Sept/2015# > Now() --> False (Amber)
DateDiff("m",Now(),#06/Sept/2015#) > 6 And #06/Sept/2015# > Now() --> True (Green)
You have no equal to 6 months condition though. Something for you to think about.
Instead of separate option menus (one for year and one for month), how could I merge year and month into visually one single menu for a date attribute?
Each option would be a year/month pair, i.e.
2014 January
2014 February
Currently I have this code: f.date_select :begin_date, discard_day: true (to visually exclude the days).
You might like the following small jQueryUI code, which does exactly what you describe: http://lucianocosta.info/jquery.mtz.monthpicker/