How to translate the text in Vega - vega-lite

I would like when I use text in Vega it is internationalized.
for example :
legend: {
....
labelExpr: "datum.value == 'TIME' ? i18next.t('LATE') : i18next.t('TIME')"
}
in this example internationalization does not work.
Is there a solution to be able to translate easily in Vega ?

Vega expressions cannot be arbitrary javascript; the functionality available is listed here: https://vega.github.io/vega/docs/expressions/
Translation is not among the available functionality. The best way to do this is probably to pre-populate a translated column in the dataset before passing it to the vega specification.

Related

Can you create a title case function in Vega-Lite?

is there a way to create or add a title case function in Vega-Lite? I've tried using this Vega Documentation and am currently using a "hacky" way to get Title Case with a replace function, but I'd like to use a more sustainable/acceptable way for getting this done. Below is the current code I'm using, which is temporarily okay but not sustainable:
{"calculate": "replace(replace(replace(replace(replace(replace(datum['classification'],'_',' '),'_',' '),'_',' '),'all','All'),' r',' R'),' j',' J')","as": "Classification"}

How do I format the text in a `hover` tooltip of a Slate Bar Chart?

In my bar chart, I have large numbers that are hard to read quickly. I'd like to add commas to make it more readable.
For example: 123456789 --> 123,456,789
How do I do this in Slate?
Under the "Misc" section of the widget editor, you can configure the format of your chart tooltips. The input accepts handlebars, so you can use the formatNumber helper to template a tooltip based on the bar chart hover value:
{{formatNumber w_chart.hover.yValue '0,0'}}
From the Slate documentation (Slate > References > Helper reference):
formatNumber
The formatNumber helper format any given number to a string using the Numeral.js (http://numeraljs.com/) library. Note that the value must be a number and the format must be a string.
Example:
Using formatNumber on a number:
{{formatNumber 1400 '0,0'}} # renders to "1,400"
For more examples of formating a number, please check the Numeral.js library.

sorting on field with an additional filter in Vega-lite

This might be a somewhat obscure use case.
As you can see below, I have the bar (count) overlaid. I want to sort the bars in the background (where is_overview set to 1), but currently, the filtering is set to all of count, which includes is_overview being set to 0.
I need the sort to be on a filtered field.
I went through the sorting documentation but I cannot figure out a way to support this use case. If you might have ideas, I would really appreciate the help!
Editor code
If you want custom sort behavior, often the best approach is to use a calculate transform, which makes available all of the vega expression syntax, and define a new custom field on which to sort.
In your example, you could do something like this:
"transform": [
{"calculate": "datum.is_overview ? datum.count : null", "as": "order"}
],
and then sort on the order property.
The result looks like this (vega editor):

Polymer 1.x: How to filter iron-data-table?

How do I add a filter attribute to <iron-data-table? (Please post a plunk demo.)
I forked this plunk. Then I tried to add a filter by adding the following line:
<iron-data-table
...
filter="['item.user.name.first.length', '< 5']">
Which broke the plunk. Here is the new (now broken) plunk.
The documentation here describes the filter attribute as follows:
filter An array containing path/filter value pairs that are used to filter the items.
But it lacks an example of how to use it.
How do I add a filter attribute to <iron-data-table? (Please post a plunk demo.)
This isn't a very well documented feature:
Normally, you would go about using filter-by and filter-value properties in <data-table-column> elements, but you can also access the filter property directly.
When it comes to filtering items data source, there is only "contains" kind of filtering available. So, you pretty much can't do filtering based on string length like in your Plnkr with those. For more custom filtering functionality, you need to go using a function dataSource where you can do anything you want using the filters provided as arguments for the data source function.
Anyways, in case you want still to access filter directly and for example provide a default filtering value, you need to set the value to be an array of objects, which have a path and filter property:
this.filter = [{path: 'user.name.first', filter: 'donna'}];
Here's an example: http://plnkr.co/edit/KIefwLNHeinkOgERWOvZ?p=preview

can we change the font color of a field based upon the value of another field?

I know we can change the font color of a field based upon the value of the same field as follows..
=IIF(Fields!Field-name.Value<100,"red","green")
writing this expression in the font property of particular field.
But how can we change the font color of one field basing on another field's values? Is it possible to change in this way?
Yes, you can reference any fields in the expression; it will use the value(s) in the current scope.
With some simple data:
And a simple table:
I have set the FieldValue2 textbox to have its Color based on an expression using the FieldValue1 value:
=IIf(Fields!FieldValue1.Value < 100, "Red", "Green")
Which works as expected:
You cannot use CSS, because CSS does not allow variables.
May I suggest instead using SASS, which does support variables, and using javascript to change said variables.
See a guide for SASS here