Source: bar/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
import Facet from '../facet/';
import paddingMixin from '../paddingMixin';
import sortMixin from '../sortMixin/';
import stackMixin from '../stackMixin';
import streamMixin from '../streamMixin';
import {mixedMeasure} from '../../modules/measureField';
import {attrFunc, genFunc, mix, setMethodFromDefaultObj} from '../../modules/util';
import _annotation from './_annotation';
import _axis from './_axis';
import _domain from './_domain';
import _facet from './_facet';
import _legend from './_legend';
import _mark from './_mark';
import _munge from './_munge';
import _padding from './_panning';
import _range from './_range';
import _region from './_region';
import _tooltip from './_tooltip';

const orients  = ['vertical', 'horizontal'];
const conditions = ['normal', 'count', 'mixed'];
const _attrs = {
  annotation: false,
  mono: true, 
  orient: orients[0],
  padding: 0.05,
  showDiff: false,
    regionPadding: 0.1,
    thickness: false,
};

/**
 * renders a bar chart
 * @class Bar
 * @augments Core
 * @augments RectLinear
 * @augments Facet
 * @augments SortMixin
 * @augments PaddingMixin
 * @augments StreamMixin
 * @todo write examples
 */
class Bar extends mix(Facet).with(sortMixin, paddingMixin, stackMixin, streamMixin) {
  constructor() {
    super();
    this.setAttrs(_attrs);
    this.process('munge', _munge, {isPre:true})
      .process('domain', _domain,  {isPre:true})
      .process('range', _range,  {isPre:true})
      .process('axis', _axis)
      .process('region', _region)
      .process('facet', _facet, {allow: function() {return this.isFacet()}})
      .process('mark', _mark, {allow: function() {return !this.isFacet()}})
      .process('legend', _legend)
      .process('tooltip', _tooltip)
      .process('padding', _padding)
      .process('annotation', _annotation);
  }
  measureName() {
    let measures = this.measures();
    let yField;
    if (this.condition() === conditions[2]) yField = mixedMeasure.field; 
    else if (this.aggregated() && measures[0].field === mixedMeasure.field) yField = measures[0].field;
    else yField = measures[0].field + '-' + measures[0].op;
    return yField;
  }

  muteToLegend(d) {
    this.muteLegend(this.isFacet() ? d.parent.data.key : d.data.key);
  }
  muteFromLegend(legend) {
    if (this.isFacet()) this.muteRegions(legend.key);
    else this.muteNodes(legend.key);
  }

  demuteToLegend(d) {
    this.demuteLegend(this.isFacet() ? d.parent.data.key : d.data.key);
  }

  demuteFromLegend(legend) {
    if (this.isFacet()) this.demuteRegions(legend.key);
    this.demuteNodes(legend.key);
  }

  isCount() {
    return this.condition() === conditions[1];
  }

  isFacet() {
    return this.facet() && this.isNested() && !this.stacked();
  }
  
  isMixed() {
    return this.condition() === conditions[2] ;
  }
  
  isNested() {
    let dimensions = this.dimensions();
    let condition = this.condition();
    return dimensions.length === 2 || (condition == conditions[2] && dimensions.length === 1);
  }
  
  isVertical() {
    return this.orient() === orients[0];
  }

  isNestedAndSortByValue() {
    return this.isNested() && this.sortByValue() !== 'natural';
  }
} 

/**
 * If annotation is specified, sets the annotation settings and returns the instance itself. This annotation feature only works in the mono-bar condition and shows differences between bars. If annotation value is true or the it's showLable property is true, shows the label. If annotation is not specified, returns the instance's current annotation setting.
 * @function
 * @example
 * bar.annotation(true); //shows the annotation which shows the difference between bars
 * @param {boolean|object} [annotation=false] It is true or showLabel is true shows annotation label.
 * @param {boolean} annotation.showLabel=true 
 * @param {string} [annotation.color=#477cd2] sets the annotation label color
 * @return {annotation|Bar}
 */
Bar.prototype.annotation = setMethodFromDefaultObj('annotation', {showLabel: true, color: '#477cd2'});

/**
 * If showDiff is specified, sets the showDiff settings and returns the instance itself. This showDiff feature only works in the grouped stacked-bar condition and shows differences between bars. If showDiff value is true or object, shows the differences. If showDiff is not specified, returns the instance's current showDiff setting.
 * @function
 * @example
 * bar.showDiff(true); //shows the diffrences between stacked bars
 * @param {boolean|object} [showDiff=false] It is true or showLabel is true shows annotation label.
 * @param {string} showDiff.neuFill=#c0ccda 
 * @param {string} showDiff.incStroke=#477cd2 
 * @param {string} showDiff.incFill=#40bbfb 
 * @param {string} showDiff.decStroke=#f06292 
 * @param {string} showDiff.decFill=#f06292 
 * @return {showDiff|Bar}
 */
Bar.prototype.showDiff = setMethodFromDefaultObj('showDiff', {neuFill: '#c0ccda', incStroke:'#477cd2', incFill: '#40bbfb', decStroke: '#f06292', decFill: '#f06292'});

/**
 * If annotation is specified, sets the mono settings and returns the instance itself. This mono feature only works in the mono-bar condition. It render bars with different colors when it is false.  If mono is not specified, returns the instance's current annotation setting.
 * @function
 * @example
 * bar.mono(false); // renders bars with different colors according to its color pattern
 * @param {boolean} [mono=true]
 * @return {mono|Bar}
 */
Bar.prototype.mono = attrFunc('mono');

/**
 * If orient is specified, sets theorientmono settings and returns the instance itself. It transforms the bar chart's orient according to the value. If orient is not specified, returns the instance's current orient setting.
 * @function
 * @example
 * bar.orient('horizontal'); // renders the horizontal bar chart
 * @param {string} [orient='vertical'] (vertical|horizontal)
 * @return {orient|Bar}
 */
Bar.prototype.orient = attrFunc('orient');

/**
 * If barWidth is specified, sets each bar width(or height on vertical bar) and returns the instance itself. If barWidth is not specified, or barWidth bigger than origin barWidth, just  returns the instance's current barWidth setting. Not surpport Stacked Bar Chart.
 * @function
 * @example
 * bar.orient('horizontal'); // renders the horizontal bar chart
 * @param {boolean|number} [barWidth=false] false or specific number
 * @return {barWidth|Bar}
 */
Bar.prototype.barWidth = attrFunc('barWidth');

function domainY(yField, munged, level = 0, nested = false, aggregated = false, stacked = false, showDiff = false) {
  const yDomain = yField.level(level)
  .munged(munged)
  .aggregated(aggregated)
  .domain(0, stacked);
  
  if (yDomain[0] > 0) yDomain[0] = 0;
  else if (yDomain[1] < 0) yDomain[1] = 0;

  if (showDiff && !nested) {
    if (yDomain[0] === 0) yDomain[1] *= 1.25;
    else if (yDomain[1] === 0) yDomain[0] *= 1.25;
  }
 return yDomain;
}
export default genFunc(Bar);
export {conditions, domainY};