Dash dataTable Conditional Formatting for specific cell value doesn't work - plotly-dash

I have a multiple header data frame and I succeeded to extract the column names by two functions.
I have comparison rows in my data every third line (that compares the two rows values before it) and contains one of the values: "Imporoved", "Not Improved" etc...
For example the table looks something like that:
measure1 | measure2
previouse 70 | 80
new 60 | 100
compare IMPROVED | SIGNIFICANT DEGRADED
I'm trying to add conditional formatting that will color a cell in a certain way if it equals to one of the options of the comparison values. The conditional formatting does not work in a way it does not raise an error but does not display any of the highlighting.
I tried the following code:
style_data_conditional=
[{
'if': {
'filter_query': '{{{col}}} = "SIGNIFICANT DEGRADED"'.format(
col=col),
'column_id': col
},
'backgroundColor': 'black',
'color': '#FF1616'
} for col in columns_names
]
+
[
{
'if': {
'filter_query': '{{{col}}} = "NOT IMPROVED"'.format(
col=col),
'column_id': col
},
'backgroundColor': 'CD7B05',
'color': '#D3C4AF'
} for col in columns_names
]
+
[
{
'if': {
'filter_query': '{{{col}}} = "IMPROVED"'.format(
col=col),
'column_id': col
},
'backgroundColor': '82C729',
'color': '#F4FFE7'
} for col in columns_names
]
+
[
{
'if': {
'filter_query': '{{{col}}} = "SIGNIFICANT IMPROVED"'.format(
col=col),
'column_id': col
},
'backgroundColor': '8FFF0C',
'color': 'white'
} for col in columns_names
]
At first I had a problem with accessing the column names because of the multi headers, but I fixed it and "columns_names" is a list containing the actual columns names (for example columns_names = [['counter1', 'Average'],['counter1', 'max'],...]).
I don't know why the it won't display, the table remains white.
Will appreciate some help!

Related

Remove spacing between bar in bar graph( react-chart-js)

issue that i am facing is, i have my bar graph made using react-chart-js. i want to remove space between the bar and center align the bar's . The bar's should have Thickness equal to 50
I try using dummy data ,that way i got the desired output but that is not the correct way of doing . Also I try using barPercentage , categoryPercentage option but didnt get the desired output
Link for CodeSandbox
I don't know if this actually works out of the box. There is nothing in the documentation about this use case either.
You could do it with ghost values to extend the chart in general.
This is not really a solution, but it may be an option.
const labels = ["","","January", "February", "March","",""];
export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: labels.map((elem, index) => {
if (index > 1 && index < 5)
return faker.datatype.number({ min: 0, max: 1000 })
}),
backgroundColor: "rgba(255, 99, 132, 0.5)",
barThickness: 50
}
]
};

Responsive mat-grid-list

I intend to use a mat-grid-list with a set of responsive cards.
My problem is that I'm having errors with the breakpoints and I can't understand.
Can anyone help me?
DEMO
ts
cardLayout = this.breakpointObserver
.observe([Breakpoints.Handset, Breakpoints.Tablet])
.pipe(
map(({ matches }) => {
if (matches) {
return {
columns: 1,
miniCard: { cols: 1, rows: 1 },
chart: { cols: 1, rows: 2 },
table: { cols: 1, rows: 4 },
};
}
return {
columns: 4,
miniCard: { cols: 1, rows: 1 },
chart: { cols: 2, rows: 2 },
table: { cols: 4, rows: 4 },
};
})
);
Error
Bad Breakpoint size
That's because you have multiple subscriptions to your observable, so the values are resolved sequentially.
So when your observable emits, first subscriber (mat-grid-list) gets updated to the new layout, change detection is fired and DOM is updated. All of this happens BEFORE the mat-grid-tile gets updated, so you end up with colspans from the previous layout on children while parent has a single column.
You can use *ngIf with as syntax to store the value locally and refer to the stored value in the children elements, e.g.
<ng-container *ngIf="cardLayout | async as layout">
<mat-grid-list [cols]="layout.columns" rowHeight="200px">
<mat-grid-tile
[colspan]="layout.miniCard.cols"
[rowspan]="layout.miniCard.rows"
>
...
</mat-grid-tile>
</mat-grid-list>
</ng-container>
This allows for a single subscription (which should be more performant as well), increases readability and removes unnecessary sequential DOM updates.
Forked stackblitz here.

Google Spreadsheets: generate all combinations of 4 columns with 8 rows each

I'd like to create a function for Google Sheets that allows me to list all possible combinations of the numbers 1 to 8, concatenated 4 times (from 1111 to 8888, I think that is 8^4 = 4096).
(I add a screenshot for clarity).
So far I tried with:
=ArrayFormula(transpose(split(concatenate(A2:A9&B2:B9&C2:C9&D2:D9& char(9)),char(9))))
...but this gives me only 8 combinations: 1111, 2222, 3333, 4444, 5555, 6666, 7777, 8888.
I'm slightly bad at programming, specially with new languages, so any help is very much appreciated!
Here is a little custom function that creates all combinations of rows (it's just easier to write for rows):
function combinations(arr) {
return arr.reduce(function(prod, row) {
var out = [];
for (i in row) {
out = out.concat(prod.map(function(x) {
return x.concat(row[i]);
}));
}
return out;
}, [[]]);
}
Using it as =combinations(A2:D9) would create 4^8 combinations, each of length 8, and that is not what you want. But it's easy enough to transpose:
=combinations(transpose(A2:D9))
The above function returns combinations as a rectangular array, so in your example the output would be 4 columns wide. If you want to join the combinations in one cell (so the output is a single column), use this modified version:
function joincombinations(arr) {
return arr.reduce(function(prod, row) {
var out = [];
for (i in row) {
out = out.concat(prod.map(function(x) {
return x.concat(row[i]);
}));
}
return out;
}, [[]]).map(function(row) {
return row.join("");
});
}
Usage: =joincombinations(transpose(A2:D9))
Try
=arrayformula(if(row(A:A)>4096,"",int((row(A:A)-1)/512)+1&mod(int((row(A:A)-1)/64),8)+1&mod(int((row(A:A)-1)/8),8)+1&mod(int((row(A:A)-1)/1),8)+1))
(needs at least 4096 rows in the sheet).

How to display yearly values on xAxis in Highcharts

I guess this is somewhat of a stupid question. But I am struggling since quite a while with this, not finding what the right way of data formatting is for my data.
I have yearly data like this, which I want to have displayed as such - 2001, 2002, 2003, ...:
time,lat,lon,Npp_1km
Date.UTC(2001/1/1),15,-90,1.266112766
Date.UTC(2002/1/1),15,-90,1.166646809
Date.UTC(2003/1/1),15,-90,1.020591489
Date.UTC(2004/1/1),15,-90,1.016010638
Date.UTC(2005/12/31),15,-90,1.08053617
Date.UTC(2006/12/31),15,-90,1.181195745
and my Highcharts code which looks like this:
xAxis: {
labels: {
style: {
color: "#666666"
},
x: 0
},
gridLineWidth: 1,
gridLineDashStyle: 'Dot',
tickWidth: 0,
type: 'datetime'
},
But the xAxis doesn't display the years but instead some "00:00:00.001".
I have tried many different formats for the timestamp - "2001-1-1", "2001/1/1", "1/1/2001", "1-1-2001", "Date.UTC(2001/1/1)". I have changed the "dateTimeLabelFormats" as well. But all in vain. It doesn't spit out "2001 - 2002 - 2003 - 2004".
Here is a fiddle.
What is the right way to achieve this? Thanks for any hints!
You had problems with parsing your data. All of your x values was not correct - that is the reason of your issue. You need to parse it a little bit different if you want to get the correct data for your chart:
$.get('data.csv', function(data) {
var temp = []
// Split the lines
var lines = data.split('\n');
// For each line, split the record into seperate attributes
$.each(lines, function(lineNo, line) {
var items = line.split(',');
if (lineNo !== 0) {
items[0] = items[0].substring(items[0].indexOf('(') + 1, items[0].indexOf(')'));
var x = new Date(items[0]),
y = parseFloat(items[3]);
if (!isNaN(y)) {
x = x.getTime();
options.series[0].data.push([x, y]);
}
}
});
Here you can see an example how it can work:
http://jsfiddle.net/pcpq6mtr/4/
Regards,
A simple solution can be put categories in xAxis if the time is fixed.
xAxis {
categories:[2001,2002,2003,2004,2005,2006]
}
If the time is not fixed. categories need to be calculated dynamically.

Bar chart with two series of different date/values ranges

I am using jqplot through Primefaces and Have input to Bar Chart like this:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: {"03-05-2015": 10, "06-05-2015": 3}
When I pass this data as BarChartModel, I got data wrongly drawn on the chart.
The data follows the first series, as the Series 2 is drawn after the Series 1 dates. I've to convert the data to be as follows in order to get the chart drawn fine:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, *"03-05-2015": 0*, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: { *"01-05-2015": 0* , "03-05-2015": 10, "06-05-2015": 3}
Notice the data items between * and *.
Any advice here? (if using DateAxis helps?)
I had the same problem with LinearChartModel when I has not using DateAxis.
As a workaround, I filled my series with all possible data and then reordered the list. Urg!
Should work with BarChartModel too.
Using DateAxis you just need to add your date axis with the timestamp, like this:
serie.set(new Date().getTime(), new Double(123));
or this
serie.set("2015-09-08", new Double(123));
Put the DateAxis in your LineChartModel like this:
DateAxis axis = new DateAxis("Data da inspeção");
linearModel.setZoom(true);
linearModel.getAxes().put(AxisType.X, axis);
linearModel.setExtender("linhaSetor");
And format your date in the extender.js:
function linhaSetor() {
this.cfg.axes.xaxis.tickOptions = {
show : true,
angle : 45,
formatString : '%d/%m/%y %Hh'
};
}
You don't even need to put the data in order.