Skip to content
This repository was archived by the owner on Feb 15, 2022. It is now read-only.

Commit ecd416c

Browse files
DeviaVirDeviaVir
authored
fix bug with using an array of objects (#11)
1 parent bd31e1f commit ecd416c

File tree

10 files changed

+1087
-96
lines changed

10 files changed

+1087
-96
lines changed

‎dist/vue-bars.common.js‎

Lines changed: 52 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,28 @@ function generateGradientStepsCss(from, to, count) {
5353
* @param {object} boundary
5454
* @return {object[]}
5555
*/
56-
function genPoints (arr, ref) {
56+
function genPoints (arr, ref, ref$1) {
5757
var minX = ref.minX;
5858
var minY = ref.minY;
5959
var maxX = ref.maxX;
6060
var maxY = ref.maxY;
61+
var max = ref$1.max;
62+
var min = ref$1.min;
6163

64+
arr = arr.map(function (item) { return (typeof item === 'number' ? item : item.value); });
65+
var minValue = Math.min.apply(Math, arr.concat( [min] )) - 0.001;
6266
var gridX = (maxX - minX) / (arr.length - 1);
63-
var gridY = (maxY - minY) / (Math.max.apply(Math, arr) - Math.min.apply(Math, arr));
64-
65-
return arr.map(function (item, index) {
66-
var value = typeof item === 'number' ? item : item.value;
67-
68-
return { x: index * gridX + minX, y: maxY - value * gridY, v: value }
67+
var gridY = (maxY - minY) / (Math.max.apply(Math, arr.concat( [max] )) + 0.001 - minValue);
68+
69+
return arr.map(function (value, index) {
70+
return {
71+
x: index * gridX + minX,
72+
y:
73+
maxY -
74+
(value - minValue) * gridY +
75+
+(index === arr.length - 1) * 0.00001 -
76+
+(index === 0) * 0.00001
77+
}
6978
})
7079
}
7180

@@ -114,10 +123,15 @@ function genBars (_this, arr, h) {
114123
}
115124

116125
var Path = {
117-
props: ['smooth', 'data', 'boundary', 'barWidth', 'rounding', 'id', 'gradient', 'growDuration'],
126+
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min'],
118127

119128
render: function render (h) {
120-
var points = genPoints(this.data, this.boundary);
129+
var ref = this;
130+
var data = ref.data;
131+
var boundary = ref.boundary;
132+
var max = ref.max;
133+
var min = ref.min;
134+
var points = genPoints(data, boundary, { max: max, min: min } );
121135
var bars = genBars(this, points, h);
122136

123137
return h('g', {
@@ -136,19 +150,27 @@ var Bars$1 = {
136150
type: Array,
137151
required: true
138152
},
153+
autoDraw: Boolean,
139154
barWidth: {
140155
type: Number,
141156
default: 8
142157
},
143-
rounding: {
144-
type: Number,
145-
default: 2
146-
},
147158
growDuration: {
148159
type: Number,
149160
default: 0.5
150161
},
151-
gradient: Array,
162+
gradient: {
163+
type: Array,
164+
default: function () { return ['#000']; }
165+
},
166+
max: {
167+
type: Number,
168+
default: -Infinity
169+
},
170+
min: {
171+
type: Number,
172+
default: Infinity
173+
},
152174
height: Number,
153175
width: Number,
154176
padding: {
@@ -161,7 +183,18 @@ var Bars$1 = {
161183
data: {
162184
immediate: true,
163185
handler: function handler (val) {
164-
if (!val || val.length < 2) { return }
186+
var this$1 = this;
187+
188+
this.$nextTick(function () {
189+
if (this$1.$isServer || !this$1.$refs.path || !this$1.autoDraw) {
190+
return
191+
}
192+
193+
var path = this$1.$refs.path.$el;
194+
195+
path.style.transform = 'none';
196+
path.style.transform = "scale(1,-1) translate(0,-" + (this$1.$refs.path.boundary.maxY) + ")";
197+
});
165198
}
166199
}
167200
},
@@ -172,21 +205,18 @@ var Bars$1 = {
172205
var width = ref.width;
173206
var height = ref.height;
174207
var padding = ref.padding;
175-
var barWidth = ref.barWidth;
176-
var rounding = ref.rounding;
177-
var gradient = ref.gradient;
178-
var growDuration = ref.growDuration;
179208
var viewWidth = width || 300;
180209
var viewHeight = height || 75;
181210
var boundary = {
182-
minX: padding, minY: padding,
183-
maxX: viewWidth - padding, maxY: viewHeight - padding
211+
minX: padding,
212+
minY: padding,
213+
maxX: viewWidth - padding,
214+
maxY: viewHeight - padding
184215
};
185216
var props = this.$props;
186217

187218
props.boundary = boundary;
188219
props.id = 'vue-bars-' + this._uid;
189-
this.pathId = props.id + '-path';
190220

191221
return h('svg', {
192222
attrs: {
@@ -197,7 +227,6 @@ var Bars$1 = {
197227
}, [
198228
h(Path, {
199229
props: props,
200-
attrs: { id: this.pathId },
201230
ref: 'path'
202231
})
203232
])

‎dist/vue-bars.esm.js‎

Lines changed: 52 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -51,19 +51,28 @@ function generateGradientStepsCss(from, to, count) {
5151
* @param {object} boundary
5252
* @return {object[]}
5353
*/
54-
function genPoints (arr, ref) {
54+
function genPoints (arr, ref, ref$1) {
5555
var minX = ref.minX;
5656
var minY = ref.minY;
5757
var maxX = ref.maxX;
5858
var maxY = ref.maxY;
59+
var max = ref$1.max;
60+
var min = ref$1.min;
5961

62+
arr = arr.map(function (item) { return (typeof item === 'number' ? item : item.value); });
63+
var minValue = Math.min.apply(Math, arr.concat( [min] )) - 0.001;
6064
var gridX = (maxX - minX) / (arr.length - 1);
61-
var gridY = (maxY - minY) / (Math.max.apply(Math, arr) - Math.min.apply(Math, arr));
62-
63-
return arr.map(function (item, index) {
64-
var value = typeof item === 'number' ? item : item.value;
65-
66-
return { x: index * gridX + minX, y: maxY - value * gridY, v: value }
65+
var gridY = (maxY - minY) / (Math.max.apply(Math, arr.concat( [max] )) + 0.001 - minValue);
66+
67+
return arr.map(function (value, index) {
68+
return {
69+
x: index * gridX + minX,
70+
y:
71+
maxY -
72+
(value - minValue) * gridY +
73+
+(index === arr.length - 1) * 0.00001 -
74+
+(index === 0) * 0.00001
75+
}
6776
})
6877
}
6978

@@ -112,10 +121,15 @@ function genBars (_this, arr, h) {
112121
}
113122

114123
var Path = {
115-
props: ['smooth', 'data', 'boundary', 'barWidth', 'rounding', 'id', 'gradient', 'growDuration'],
124+
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min'],
116125

117126
render: function render (h) {
118-
var points = genPoints(this.data, this.boundary);
127+
var ref = this;
128+
var data = ref.data;
129+
var boundary = ref.boundary;
130+
var max = ref.max;
131+
var min = ref.min;
132+
var points = genPoints(data, boundary, { max: max, min: min } );
119133
var bars = genBars(this, points, h);
120134

121135
return h('g', {
@@ -134,19 +148,27 @@ var Bars$1 = {
134148
type: Array,
135149
required: true
136150
},
151+
autoDraw: Boolean,
137152
barWidth: {
138153
type: Number,
139154
default: 8
140155
},
141-
rounding: {
142-
type: Number,
143-
default: 2
144-
},
145156
growDuration: {
146157
type: Number,
147158
default: 0.5
148159
},
149-
gradient: Array,
160+
gradient: {
161+
type: Array,
162+
default: function () { return ['#000']; }
163+
},
164+
max: {
165+
type: Number,
166+
default: -Infinity
167+
},
168+
min: {
169+
type: Number,
170+
default: Infinity
171+
},
150172
height: Number,
151173
width: Number,
152174
padding: {
@@ -159,7 +181,18 @@ var Bars$1 = {
159181
data: {
160182
immediate: true,
161183
handler: function handler (val) {
162-
if (!val || val.length < 2) { return }
184+
var this$1 = this;
185+
186+
this.$nextTick(function () {
187+
if (this$1.$isServer || !this$1.$refs.path || !this$1.autoDraw) {
188+
return
189+
}
190+
191+
var path = this$1.$refs.path.$el;
192+
193+
path.style.transform = 'none';
194+
path.style.transform = "scale(1,-1) translate(0,-" + (this$1.$refs.path.boundary.maxY) + ")";
195+
});
163196
}
164197
}
165198
},
@@ -170,21 +203,18 @@ var Bars$1 = {
170203
var width = ref.width;
171204
var height = ref.height;
172205
var padding = ref.padding;
173-
var barWidth = ref.barWidth;
174-
var rounding = ref.rounding;
175-
var gradient = ref.gradient;
176-
var growDuration = ref.growDuration;
177206
var viewWidth = width || 300;
178207
var viewHeight = height || 75;
179208
var boundary = {
180-
minX: padding, minY: padding,
181-
maxX: viewWidth - padding, maxY: viewHeight - padding
209+
minX: padding,
210+
minY: padding,
211+
maxX: viewWidth - padding,
212+
maxY: viewHeight - padding
182213
};
183214
var props = this.$props;
184215

185216
props.boundary = boundary;
186217
props.id = 'vue-bars-' + this._uid;
187-
this.pathId = props.id + '-path';
188218

189219
return h('svg', {
190220
attrs: {
@@ -195,7 +225,6 @@ var Bars$1 = {
195225
}, [
196226
h(Path, {
197227
props: props,
198-
attrs: { id: this.pathId },
199228
ref: 'path'
200229
})
201230
])

0 commit comments

Comments
 (0)