Skip to content

Commit

Permalink
Fixed #13711, did not able to drillup with nodes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@karolkolodziej @TorsteinHonsi
karolkolodziej authored and TorsteinHonsi committed Sep 7, 2020
1 parent 307a7bd commit f693dbf
Show file tree
Hide file tree
Showing 9 changed files with 267 additions and 2 deletions.
12 changes: 11 additions & 1 deletion js/Extensions/Drilldown.js
View file
Expand Up @@ -406,6 +406,8 @@ defaultOptions.drilldown = {
*
* @sample {highcharts} highcharts/drilldown/basic/
* Basic drilldown
* @sample {highcharts} highcharts/demo/organization-drilldown
* Organization chart drilldown
*
* @type {string}
* @since 3.0.8
Expand Down Expand Up @@ -772,7 +774,15 @@ ColumnSeries.prototype.animateDrillupTo = function (init) {
// Do dummy animation on first point to get to complete
syncTimeout(function () {
if (newSeries.points) { // May be destroyed in the meantime, #3389
newSeries.points.forEach(function (point, i) {
// Unable to drillup with nodes, #13711
var seriesWithNodes = [];
newSeries.data.forEach(function (el) {
seriesWithNodes.push(el);
});
if (newSeries.nodes) {
seriesWithNodes = seriesWithNodes.concat(newSeries.nodes);
}
seriesWithNodes.forEach(function (point, i) {
// Fade in other points
var verb = i === (level && level.pointIndex) ? 'show' : 'fadeIn', inherit = verb === 'show' ? true : void 0, dataLabel = point.dataLabel;
if (point.graphic) { // #3407
Expand Down
1 change: 1 addition & 0 deletions samples/highcharts/demo/index.htm
View file
Expand Up @@ -157,6 +157,7 @@ <h4>More chart types</h4>
<li><a href="examples/sankey-diagram/index.htm">Sankey diagram</a></li>
<li><a href="examples/dependency-wheel/index.htm">Dependency wheel</a></li>
<li><a href="examples/organization-chart/index.htm">Organization chart</a></li>
<li><a href="examples/organization-drilldown/index.htm">Organization chart</a></li>
<li><a href="examples/x-range/index.htm">X-range series</a></li>
<li><a href="examples/wordcloud/index.htm">Word cloud</a></li>
<li><a href="examples/column-pyramid/index.htm">Column pyramid chart</a></li>
Expand Down
Empty file added samples/highcharts/demo/organization-drilldown/demo.css
View file
Empty file.
10 changes: 10 additions & 0 deletions samples/highcharts/demo/organization-drilldown/demo.details
View file
@@ -0,0 +1,10 @@
---
name: Organization chart drilldown
authors:
- Torstein Hønsi
js_wrap: b
tags:
- Highcharts demo
categories:
- More chart types
...
6 changes: 6 additions & 0 deletions samples/highcharts/demo/organization-drilldown/demo.html
View file
@@ -0,0 +1,6 @@
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>

<div id="container"></div>
160 changes: 160 additions & 0 deletions samples/highcharts/demo/organization-drilldown/demo.js
View file
@@ -0,0 +1,160 @@
Highcharts.chart('container', {
chart: {
height: 300,
width: 600,
inverted: true,
type: 'organization'
},
title: {
text: 'Highcharts Organization Chart'
},
series: [{
name: 'Highsoft',
data: [{
from: "CO",
to: "DIV01"
}, {
from: 'CO',
to: 'DIV02'
}, {
from: 'CO',
to: 'DIV03'
}, {
from: 'CO',
to: 'DIV04'
}, {
from: 'CO',
to: 'DIV05'
}, {
from: 'CO',
to: 'DIV06'
}],
nodes: [{
id: 'DIV01',
title: 'Div Hd 1',
name: 'Div. 1',
drilldown: "DIV01"
}, {
id: 'DIV02',
title: 'Div Hd 2',
name: 'Div. 2',
drilldown: 'DIV02'
}, {
id: 'DIV03',
title: 'Div Hd 3',
name: 'Div. 3',
drilldown: 'DIV03'
}, {
id: 'DIV04',
title: 'Div Hd 4',
name: 'Div. 4',
drilldown: 'DIV04'
}, {
id: 'DIV05',
title: 'Div Hd 5',
name: 'Div. 5',
drilldown: 'DIV05'
}, {
id: 'DIV06',
title: 'Div Hd 6',
name: 'Div. 6',
drilldown: 'DIV06'
}]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0
}
},
activeDataLabelStyle: {
color: 'contrast'
},
series: [{
id: "DIV01",
name: "DIV01",
keys: ['from', 'to'],
data: [
['DIV01', 'DEP01']
],
nodes: [{
id: 'DEP01',
title: 'Dept Hd 1',
name: 'Dept. 1',
layout: 'hanging'
}]
}, {
id: "DIV02",
name: "DIV02",
keys: ['from', 'to'],
data: [
['DIV02', 'DEP02']
],
nodes: [{
id: 'DEP02',
title: 'Dept Hd 2',
name: 'Dept. 2',
layout: 'hanging'
}]
}, {
id: "DIV03",
name: "DIV03",
keys: ['from', 'to'],
data: [
['DIV03', 'DEP03']
],
nodes: [{
id: 'DEP03',
title: 'Dept Hd 3',
name: 'Dept. 3',
layout: 'hanging'
}]
}, {
id: "DIV04",
name: "DIV04",
keys: ['from', 'to'],
data: [
['DIV04', 'DEP04']
],
nodes: [{
id: 'DEP04',
title: 'Dept Hd 4',
name: 'Dept. 4',
layout: 'hanging'
}]
}, {
id: "DIV05",
name: "DIV05",
keys: ['from', 'to'],
data: [
['DIV05', 'DEP05']
],
nodes: [{
id: 'DEP05',
title: 'Dept Hd 5',
name: 'Dept. 5',
layout: 'hanging'
}]
}, {
id: "DIV06",
name: "DIV06",
keys: ['from', 'to'],
data: [
['DIV06', 'DEP06']
],
nodes: [{
id: 'DEP06',
title: 'Dept Hd 6',
name: 'Dept. 6',
layout: 'hanging'
}]
}]
},
tooltip: {
outside: true
},
exporting: {
allowHTML: true
}
});
1 change: 1 addition & 0 deletions samples/unit-tests/series-organization/organization/demo.html
View file
@@ -1,6 +1,7 @@
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="qunit"></div>
<div id="qunit-fixture"></div>
Expand Down
67 changes: 67 additions & 0 deletions samples/unit-tests/series-organization/organization/demo.js
View file
Expand Up @@ -70,3 +70,70 @@ QUnit.test('Organization single data', assert => {
'The SVG should not contain NaN'
);
});

QUnit.test('Drilldown in the organization chart should be allowed, #13711.', assert => {
var clock = TestUtilities.lolexInstall(),
chart = Highcharts.chart('container', {
chart: {
type: 'organization'
},
series: [{
data: [{
from: "A",
to: "B"
}],
nodes: [{
id: 'B',
drilldown: "B-drill"
}]
}],
drilldown: {
activeDataLabelStyle: {
color: 'contrast'
},
series: [{
id: "B-drill",
name: "CD",
keys: ['from', 'to'],
data: [
['C', 'D']
]
}]
}
});

assert.strictEqual(
chart.series[0].points[0].from,
'A',
'The chart should render correctly.'
);

chart.series[0].points[0].toNode.doDrilldown();

setTimeout(function () {
assert.strictEqual(
chart.series[0].points[0].from,
'C',
'Drilldown should be performed and the points should be changed.'
);
assert.ok(
chart.series[0].nodes[0].graphic.visibility !== 'hidden',
'Node should be visible.'
);
chart.drillUp();
}, 500);

setTimeout(function () {
assert.strictEqual(
chart.series[0].points[0].from,
'A',
'Drillup should be performed and the points should be changed.'
);
assert.ok(
chart.series[0].nodes[0].graphic.visibility !== 'hidden',
'Node should be visible.'
);
}, 1000);

TestUtilities.lolexRunAndUninstall(clock);
});
12 changes: 11 additions & 1 deletion ts/Extensions/Drilldown.ts
View file
Expand Up @@ -621,6 +621,8 @@ defaultOptions.drilldown = {
*
* @sample {highcharts} highcharts/drilldown/basic/
* Basic drilldown
* @sample {highcharts} highcharts/demo/organization-drilldown
* Organization chart drilldown
*
* @type {string}
* @since 3.0.8
Expand Down Expand Up @@ -1119,7 +1121,15 @@ ColumnSeries.prototype.animateDrillupTo = function (init?: boolean): void {
// Do dummy animation on first point to get to complete
syncTimeout(function (): void {
if (newSeries.points) { // May be destroyed in the meantime, #3389
newSeries.points.forEach(function (
// Unable to drillup with nodes, #13711
var seriesWithNodes: Array<any> = [];
newSeries.data.forEach(function (el): void {
seriesWithNodes.push(el);
});
if (newSeries.nodes) {
seriesWithNodes = seriesWithNodes.concat(newSeries.nodes);
}
seriesWithNodes.forEach(function (
point: Point,
i: number
): void {
Expand Down

0 comments on commit f693dbf

Please sign in to comment.