Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to disable sort? #4

Open
yfilali opened this issue Dec 26, 2016 · 3 comments
Open

Option to disable sort? #4

yfilali opened this issue Dec 26, 2016 · 3 comments

Comments

@yfilali
Copy link

yfilali commented Dec 26, 2016

Hi, when showing a funnel with a predetermined order, like that of a defined sequence of stages, is there a way to disable the sort all together? As far as I can tell, the sort option checking is not strict. If it's not === asc, then it's sorted descending regardless of what's passed including false.

In my case, my stages are predetermined and the funnel needs to show the number of tickets at each stage. Showing "New" tickets label anywhere but the top of the funnel is confusing. Likewise, Closed tickets must be the bottom of the funnel as the end stage. (New -> Requesting Info -> Resolved -> Closed)

@tayronsff
Copy link

Hello guys, anyway we can disable sorting?

@AaronF
Copy link

AaronF commented Jan 30, 2019

As a temporary solution, I've implemented the following (I've tried to edit as little as possible, so it's by no means the best solution, but it seems to work).

Line 204 to 213 on Chart.Funnel.js i've changed to:

var dwRatio = bottomWidth / dMax;
var sortedDataAndLabels;

if(sort === 'keep'){
	sortedDataAndLabels = valAndLabels
} else {
	sortedDataAndLabels = valAndLabels.sort(
		sort === 'asc' ?
			function (a, b) {
				return a.val - b.val;
			} :
			function (a, b) {
				return b.val - a.val;
			}
	);
}

Then when initialising the chart, I add sort: 'keep' as an option

@egouy
Copy link

egouy commented Jun 7, 2020

To expand on the work of @AaronF:

I would also change line 289 from:
bottomWidth = nextElement ? nextElement.val * dwRatio : me.topWidth;
to:
bottomWidth = elementData.val * dwRatio;

That way it looks more like a pyramid with stacked bars:

pyramid_chart_example

I then customized the fork from YetiForce (V1.1.2) since it's the one I've been using.

Commented lines 188 to 190 on Chart.Funnel.js (I only need the keep option so faster this way):

dataPositions.sort(function (a, b) {
  return chart.options.sort === 'asc' ? a.value - b.value : b.value - a.value;
});

Added right after line 320:

else if (sort === 'keep' || sort === 'data-keep') {
  upperWidth = elementData.val * dwRatio;
  bottomWidth = elementData.val * dwRatio;
}

You can see it here:
https://codepen.io/egouy/pen/yLeNwpN

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants