A stream constains the following objects
const data = [
{ type: 'gps', id: 1, val: 1 },
{ type: 'gps', id: 2, val: 2 },
{ type: 'speed', id: 2, val: 3 },
{ type: 'gps', id: 3, val: 4 },
{ type: 'speed', id: 4, val: 5 },
{ type: 'gps', id: 4, val: 6 },
{ type: 'gps', id: 5, val: 7 }
]
In case the ids are the same, the objects are merged. If no id matches up, the object is ignored:
[
[{type: 'gps', id:2, val:2}, { type: 'speed', id: 2, val: 3 }],
[{ type: 'speed', id: 4, val: 5 },{ type: 'gps', id: 4, val: 6 }]
]
My idea was to group objects with the same type, ending up with two new streams
Rx.Observable.from(data)
.groupBy((x) => x.type)
.flatMap((g) => ...)
....
and then to merge/zip them again if the id is equal.
I'm not sure how to specify this in Rx and I'm also not sure if this is a good approach.
There is no need to split the stream and merge it back again. You can use scan to collect the objects and filter out the ones that do not meet to condition
const data = [
{ type: 'gps', id: 1, val: 1 },
{ type: 'gps', id: 2, val: 2 },
{ type: 'speed', id: 2, val: 3 },
{ type: 'gps', id: 3, val: 4 },
{ type: 'speed', id: 4, val: 5 },
{ type: 'gps', id: 4, val: 6 },
{ type: 'gps', id: 5, val: 7 }
]
const generator$ = Rx.Observable.from(data)
generator$
.scan((acc, x) => {
if (R.contains(x.id, R.pluck('id', acc))) {
acc.push(x);
} else {
acc = [x]
}
return acc
}, [])
.filter(x => x.length > 1)
.subscribe(console.log)
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>
Related
I am trying to set up a simple org chart with Highcharts to display our association board and functions.Below the president, there are 4 level 1 items, then there are 3 folks at level 2 and I would like to add another 5 folks also at level 2 but all this would not fit given the chart width, so I would like to extend the level 2 line so that these 5 level 2 folks get displayed below, pretty much like a level 3...just like this
I believe that this is easy but just couldn't figure it out...
Thanks for helping out
Philippe
Try to manipulate properties offsetHorizontal and offsetVertical.
series: [{
type: 'organization',
name: 'Digital Transformation',
keys: ['from', 'to'],
data: [
['CEO', 'Department1'],
['CEO', 'Department2'],
['CEO', 'Department3'],
['CEO', 'Department4'],
['CEO', 'Department5'],
['CEO', 'Department4x'],
],
levels: [{
level: 0,
color: 'silver',
dataLabels: {
color: 'white'
},
height: 25
}, {
level: 1,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 2,
color: 'green',
dataLabels: {
color: 'black'
},
height: 25
}],
nodes: [{
id: '',
title: 'CEO',
name: null,
color: "#000000",
info: "CEO"
}, {
className: 'title',
id: 'Department1',
title: 'Department1',
name: '',
layout: 'hanging',
}, {
id: 'Department2',
title: 'Department2',
name: '',
layout: 'hanging',
}, {
id: 'Department3',
title: 'Department3',
name: '',
layout: 'hanging',
}, {
id: 'Department4',
title: 'Department4',
name: '',
layout: 'hanging',
}, {
id: 'Department5',
title: 'Department5',
name: '',
layout: 'hanging',
level: 1,
offsetHorizontal: 15,
offsetVertical: 0,
}, {
id: 'Department4x',
title: 'Department4x',
name: '',
layout: 'hanging',
level: 2
}],
}],
Live demo:
https://jsfiddle.net/BlackLabel/0tk6n94L/
API References:
https://api.highcharts.com/highcharts/series.organization.nodes.offsetHorizontal
https://api.highcharts.com/highcharts/series.organization.nodes.offsetVertical
I am using treemaps for a comparison purpose. I am using highchart.com for visualization.
I am showing two different treemaps side by side and hence providing a way of comparison for users. I want to link two same boxes in different treemaps. For example, I have two different treemaps and both have word "Bananas" in common. I want that when I hover on Box containing "Bananas" in first treemap, it highlights the same box of "Bananas" in 2nd treemap.
Is this even possible?
here is the code which generates the treemap.
Highcharts.chart('treemap1', {
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 1'
}
});
Highcharts.chart('treemap2', {
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 2'
}
});
.treemap-chart {
float: left;
width: 50%
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>
Image of the output here:
codeoutput
You can do this by setting the state of a the hovered point in the mouseOver event and removing the state in the mouseOut event. Like this for the first chart, and the same for second chart changing the variable chart2 to chart1:
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('hover')
}
}
},
mouseOut: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('')
}
}
}
}
}
}
},
var chart1 = Highcharts.chart('treemap1', {
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('hover')
}
}
},
mouseOut: function(event) {
for (var i = 0; i < chart2.series[0].data.length; i++) {
if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
chart2.series[0].data[i].setState('')
}
}
}
}
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 1'
}
});
var chart2 = Highcharts.chart('treemap2', {
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
for (var i = 0; i < chart1.series[0].data.length; i++) {
if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
chart1.series[0].data[i].setState('hover')
}
}
},
mouseOut: function(event) {
for (var i = 0; i < chart1.series[0].data.length; i++) {
if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
chart1.series[0].data[i].setState('')
}
}
}
}
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Treemap 2'
}
});
.treemap-chart {
float: left;
width: 50%
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>
Working jsfiddle example: https://jsfiddle.net/ewolden/czn1rjxu/2/
I am trying to create TreeMap with multiple series, the series are getting plotted on the graph with both series clubbed together, but I want only one series to be displayed at a time. Basically legand can be used but for treemap it's showing values.
This is the jsfiddle I am trying to work on
JavaScript files used
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
The treemap should be updated as per the series selected.
Highchart Bound Using
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
enabled: true,
},
series: [{
name:"Series 1",
stack: 'aeroplanes',
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A -Series 1',
value: 6,
colorValue: 1
}, {
name: 'B -Series 1',
value: 6,
colorValue: 2
}, {
name: 'C -Series 1',
value: 4,
colorValue: 3
}, {
name: 'D -Series 1',
value: 3,
colorValue: 4
}, {
name: 'E -Series 1',
value: 2,
colorValue: 5
}, {
name: 'F -Series 1',
value: 2,
colorValue: 6
}, {
name: 'G -Series 1',
value: 1,
colorValue: 7
}]
},
// Second Series
{
name:"Series 2",
type: 'treemap',
stack: 'aeroplanes2',
layoutAlgorithm: 'squarified',
visible:true,
data: [{
name: 'AA -Series 2',
value: 16,
colorValue: 2
}, {
name: 'BB -Series 2',
value: 26,
colorValue: 2
}, {
name: 'Cc -Series 2',
value: 14,
colorValue: 2
}, {
name: 'Dd -Series 2',
value: 13,
colorValue: 2
}, {
name: 'Ee -Series 2',
value: 12,
colorValue: 2
}, {
name: 'Ff -Series 2',
value: 12,
colorValue: 2
}, {
name: 'Gg -Series 2',
value: 11,
colorValue: 2
}]
}],
title: {
text: 'Highcharts Treemap'
},
plotOptions: {
treemap: {
stacking: 'percent'
}
},
});
By default showInLegend equals to false for treemap series - it needs to be enabled manually. In legendItemClick event I handled series visibility toggling:
plotOptions: {
treemap: {
showInLegend: true,
events: {
legendItemClick: function() {
this.chart.series.forEach((s) => s.setVisible());
return false;
}
}
}
}
Live demo: http://jsfiddle.net/kkulig/0n49vv74/
API references:
https://api.highcharts.com/highcharts/plotOptions.treemap.events.legendItemClick
https://api.highcharts.com/highcharts/plotOptions.treemap.showInLegend
https://api.highcharts.com/class-reference/Highcharts.Series#setVisible
I am attempting to combine two hashes together, and am having trouble figuring out the best method to do it. I feel like there must be an easy way to do it with enumerables...
I'd like to turn this:
[{ id: 5, count: 10 }, { id: 6, count: -3 }, { id: 5, count: -2 }, { id: 3, count: 4}]
into this:
[{ id: 5, count: 8 }, { id: 6, count: -3 }, { id: 3, count: 4}]
So that hashes with the same "id" are summed together. Anyone have any ideas on how to quickly do this?
I tried Hash.merge but that didn't work correctly...
Here is a way :
hash = [{ id: 5, count: 10 }, { id: 6, count: -3 }, { id: 5, count: -2 }, { id: 3, count: 4}]
merged_hash = hash.group_by { |h| h[:id] }.map do |_,v|
v.reduce do |h1,h2|
h1.merge(h2) { |k,o,n| k == :count ? o + n : o }
end
end
merged_hash
# => [{:id=>5, :count=>8}, {:id=>6, :count=>-3}, {:id=>3, :count=>4}]
Look at these methods Hash#merge, Enumerable#reduce and Enumerable#group_by.
My series data and column chart look like this.
series data array values are the count which i need to display on the top of bars and series percentwithingroupvalues array data as in the fiddle should be my Y-axis data.
How to acheive this? Below is my data
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
/*Percentage is calculated as
Below values are random
(5)*100/(5+2+3)
*/
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
percentwithingroupvalues:[20,20,20,20,20]
}]
You need to set for each point object { }, instead of value y , see: http://jsfiddle.net/tRKad/3/
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.custom;
}
}
}
},
series: [{
name: 'John',
data: [{
custom: 5,
y: 20
}, {
custom: 3,
y: 15
}, {
custom: 4,
y: 11
}, {
custom: 22,
y: 7
}, {
custom: 33,
y: 2
}],
}]