feat(bar): add non zero based bar chart

[ajaxlab]

Issue

Resolves #2408 Non zerobased bar chart

Details

General

• This PR support a range value for bar chart.
• The range value consists of two numbers of array..
• For a dataset with single numbers it draws as it was.
• If start value is greater than end value it will throw an error.
• Tests, docs, apis and demo added.

For stack bar chart

If a chart has a range value then it draws absolute position (not stacked)

Test cases

Basic

{
  data: {
    columns: [
      ["data1",  -100, 100, [100, 200], [200, 300]]
    ],
    type: "bar"
  }
}

Reversed range

{
  data: {
    columns: [
      ["data1",  -100, 100, [200, 100], [300, 200]]
    ],
    type: "bar"
  }
}

Throws an error

Multiple

{
  data: {
    columns: [
      ["data1", [100, 200], [200, 300]],
      ["data2", [-100, 100], [-50, -30]],
    ],
    type: "bar"
  }
}

With single numbers

{
  data: {
    columns: [
      ["data1", 100, 200, [100, 200], [200, 300]],
      ["data2", -100, -50, [-100, 100], [-50, -30]],
    ],
    type: "bar"
  }
}

With a groups option

{
  data: {
    columns: [
      ["data1", 200, [100, 200], [200, 300]],
      ["data2", -50, [-100, 50], [-50, -30]],
    ],
    type: "bar",
    groups: [["data1", "data2"]],
  }
}

Demo

[coveralls]

Coverage increased (+0.02%) to 90.086% when pulling 2714dc1 on ajaxlab:feature-2408-nonzero-based-bar into ff3cf99 on naver:master.

[netil]

Please, checkout the mIssing part to complete:

• Documentation
• Example code: https://github.com/naver/billboard.js/blob/master/demo/demo.js

[netil]

isRange is too broad, because [n, n] ranged array value used only in bar type. In this condition, when data is given with [n, n] format, but not being "bar" type will meet the condition.

So, rather than "isRange()", determining ranged bar type value should work only for bar type like .isBubbleZTtype().

[ajaxlab]

@netil

How about naming .isBarRangeType(d) ?
like

billboard.js/src/ChartInternal/internals/type.ts

Lines 158 to 160 in f84ab3e

	isAreaRangeType(d): boolean {
	return this.isTypeOf(d, TYPE_BY_CATEGORY.AreaRange);
	},

[netil]

util.ts is the collection for general purposes. Ranged array data is only used for bar type, so for now including this in a global utility file might not necessary.

[ajaxlab]

@netil
Okay I'll move the code to a bar related place.

[netil]

The data format for ranged bar data, should be following as [start, end]. There's no need to get min/max value. To get reason for this, it should be able treat data values as [end, start] case, which isn't proper data format that will be accepted.

// is enough return as:
return v.join(" ~ ")

[ajaxlab]

@netil
Okay I got it, so you mean the following code should not render any thing right?

{
  data: {
    columns: [
      ["data1",  [200, 100], [300, 200]]
    ],
    type: "bar"
  }
}

Then I have another question, the above code should throw an error or just does't render quietly?

[netil]

IMO, it should throw error to let user know issue explicitly. Currently there's no general error handling, which should be added in future.

[ajaxlab]

Okay I'll make it throw an error :)

[ajaxlab]

@netil
I've updated this PR as your review comments. 😃