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

Segregate Labels #24

Merged
merged 6 commits into from
Jun 1, 2020
Merged

Segregate Labels #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0ecc59c
issue/7
Jul 21, 2019
690305e
adding labels and fixing minimum bar height
Jul 28, 2019
57395a5
fixing labels to be a separate component to the bars.
Aug 21, 2019
f234735
patching from upstream
Aug 21, 2019
2b0b8bf
Merge remote-tracking branch 'upstream/master'
Aug 21, 2019
6a3edfe
adding label size back in
Aug 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 54 additions & 23 deletions dist/vue-bars.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,18 @@ function generateGradientStepsCss (from, to, count) {

/**
* Calculate the coordinate
* @param {number[]|object[]} arr
* @param {object} boundary
* @param {number[]|object[]} inArr
* @param {object} boundary
* @param {object} props
* @param {boolean} hasLabels
* @return {object[]}
*/
function genPoints (inArr, ref, ref$1) {
function genPoints (inArr, ref, ref$1, hasLabels) {
var minX = ref.minX;
var minY = ref.minY;
var maxX = ref.maxX;
var maxY = ref.maxY;
var minBarHeight = ref.minBarHeight;
var labelRotate = ref.labelRotate;
var labelSize = ref.labelSize;
var max = ref$1.max;
var min = ref$1.min;

Expand All @@ -73,7 +73,7 @@ function genPoints (inArr, ref, ref$1) {
var absMaxVal = Math.abs(maxValue);
var absMinVal = Math.abs(minValue);
var gridX = (maxX - minX) / (arr.length - 1);
var labelHeight = 20;
var labelHeight = hasLabels ? 20 : 0;

var delta = 0;
if (minValue < 0 && maxValue < 0) {
Expand All @@ -89,15 +89,13 @@ function genPoints (inArr, ref, ref$1) {
var zeroLine = minValue < 0 ? absMinVal : 0;

return arr.map(function (value, index) {
var label = typeof inArr[index].title !== 'undefined' ? inArr[index].title : '';
var title = typeof inArr[index].value === 'number' ? inArr[index].value : inArr[index];
var title = typeof inArr[index] === 'number' ? inArr[index] : inArr[index].title;
var height = Math.abs(value);
var barHeight = (height * heightMultiplier - yAdjust > minBarHeight ? height * heightMultiplier - yAdjust : minBarHeight);
return {
x: index * gridX + minX,
y: maxY - barHeight - (value >= 0 || value === 0 && minValue >= 0 ? zeroLine * heightMultiplier : zeroLine * heightMultiplier - barHeight) - labelHeight - yAdjust,
height: barHeight,
label: label,
title: title
}
})
Expand All @@ -106,10 +104,6 @@ function genPoints (inArr, ref, ref$1) {
function genBars (_this, arr, h) {
var ref = _this.boundary;
var maxX = ref.maxX;
var maxY = ref.maxY;
var labelRotate = ref.labelRotate;
var labelColor = ref.labelColor;
var labelSize = ref.labelSize;
var totalWidth = (maxX) / (arr.length - 1);
if (!_this.barWidth) {
_this.barWidth = totalWidth - (_this.padding || 5);
Expand Down Expand Up @@ -149,6 +143,25 @@ function genBars (_this, arr, h) {
h('title', {}, [item.title])
])
});
return rects
}

function genLabels (_this, arr, labels, h) {
var ref = _this.labelProps;
var maxX = ref.maxX;
var maxY = ref.maxY;
var labelRotate = ref.labelRotate;
var labelSize = ref.labelSize;
var labelColor = ref.labelColor;
var totalWidth = (maxX) / (arr.length - 1);
if (!_this.barWidth) {
_this.barWidth = totalWidth - (_this.padding || 5);
}
if (!_this.rounding) {
_this.rounding = 2;
}

var offsetX = (totalWidth - _this.barWidth) / 2;
var translateOffsetX = labelRotate >= 0 ? 10 : -10;
var xaxis = h(
'g',
Expand All @@ -160,6 +173,7 @@ function genBars (_this, arr, h) {
},
arr.map(function (item, index) {
var labelOffsetX = labelRotate < 0 ? item.x + offsetX : item.x - offsetX;
var title = labels[index];
return h(
'g',
{
Expand All @@ -174,33 +188,38 @@ function genBars (_this, arr, h) {
{
attrs: {
class: 'v-bars--label-text',
style: ("text-anchor:middle; fill:" + labelColor + "; font-size: " + labelSize + "em;"),
title: item.title
style: ("text-anchor:middle; fill:" + labelColor + "; font-size:" + labelSize + "em;"),
title: title
}
},
[
item.label
title
]
)
]
)
})
);
return rects.concat(xaxis);
return xaxis
}

var Path = {
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min'],
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],

render: function render (h) {
var ref = this;
var data = ref.data;
var boundary = ref.boundary;
var max = ref.max;
var min = ref.min;
var points = genPoints(data, boundary, { max: max, min: min });
var labelData = ref.labelData;
var points = genPoints(data, boundary, { max: max, min: min }, labelData.length);
var labels = genLabels(this, points, labelData, h);
var bars = genBars(this, points, h);

if (labels.children.length) {
bars = bars.concat(labels);
}
return h(
'g',
{
Expand Down Expand Up @@ -245,9 +264,13 @@ var Bars = {
type: Number,
default: 3
},
labelData: {
type: Array,
default: function () { return []; }
},
labelRotate: {
type: Number,
default: 0
default: -45
},
labelSize: {
type: Number,
Expand Down Expand Up @@ -278,15 +301,23 @@ var Bars = {
minY: padding,
maxX: viewWidth - padding,
maxY: viewHeight - padding,
minBarHeight: this.minBarHeight,
minBarHeight: this.minBarHeight
};
var labelProps = {
minX: padding,
minY: padding,
maxX: viewWidth - padding,
maxY: viewHeight - padding,
labelData: this.labelData,
labelRotate: this.labelRotate,
labelColor: this.labelColor,
labelSize: this.labelSize
labelSize: this.labelSize,
labelColor: this.labelColor
};
var props = this.$props;

props.boundary = boundary;
props.id = 'vue-bars-' + this._uid;
props.labelProps = labelProps;

return h('svg', {
attrs: {
Expand Down
81 changes: 56 additions & 25 deletions dist/vue-bars.esm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,18 +50,18 @@ function generateGradientStepsCss (from, to, count) {

/**
* Calculate the coordinate
* @param {number[]|object[]} arr
* @param {object} boundary
* @param {number[]|object[]} inArr
* @param {object} boundary
* @param {object} props
* @param {boolean} hasLabels
* @return {object[]}
*/
function genPoints (inArr, ref, ref$1) {
function genPoints (inArr, ref, ref$1, hasLabels) {
var minX = ref.minX;
var minY = ref.minY;
var maxX = ref.maxX;
var maxY = ref.maxY;
var minBarHeight = ref.minBarHeight;
var labelRotate = ref.labelRotate;
var labelSize = ref.labelSize;
var max = ref$1.max;
var min = ref$1.min;

Expand All @@ -71,7 +71,7 @@ function genPoints (inArr, ref, ref$1) {
var absMaxVal = Math.abs(maxValue);
var absMinVal = Math.abs(minValue);
var gridX = (maxX - minX) / (arr.length - 1);
var labelHeight = 20;
var labelHeight = hasLabels ? 20 : 0;

var delta = 0;
if (minValue < 0 && maxValue < 0) {
Expand All @@ -87,15 +87,13 @@ function genPoints (inArr, ref, ref$1) {
var zeroLine = minValue < 0 ? absMinVal : 0;

return arr.map(function (value, index) {
var label = typeof inArr[index].title !== 'undefined' ? inArr[index].title : '';
var title = typeof inArr[index].value === 'number' ? inArr[index].value : inArr[index];
var title = typeof inArr[index] === 'number' ? inArr[index] : inArr[index].title;
var height = Math.abs(value);
var barHeight = (height * heightMultiplier - yAdjust > minBarHeight ? height * heightMultiplier - yAdjust : minBarHeight);
return {
x: index * gridX + minX,
y: maxY - barHeight - (value >= 0 || value === 0 && minValue >= 0 ? zeroLine * heightMultiplier : zeroLine * heightMultiplier - barHeight) - labelHeight - yAdjust,
height: barHeight,
label: label,
title: title
}
})
Expand All @@ -104,10 +102,6 @@ function genPoints (inArr, ref, ref$1) {
function genBars (_this, arr, h) {
var ref = _this.boundary;
var maxX = ref.maxX;
var maxY = ref.maxY;
var labelRotate = ref.labelRotate;
var labelColor = ref.labelColor;
var labelSize = ref.labelSize;
var totalWidth = (maxX) / (arr.length - 1);
if (!_this.barWidth) {
_this.barWidth = totalWidth - (_this.padding || 5);
Expand Down Expand Up @@ -147,6 +141,25 @@ function genBars (_this, arr, h) {
h('title', {}, [item.title])
])
});
return rects
}

function genLabels (_this, arr, labels, h) {
var ref = _this.labelProps;
var maxX = ref.maxX;
var maxY = ref.maxY;
var labelRotate = ref.labelRotate;
var labelSize = ref.labelSize;
var labelColor = ref.labelColor;
var totalWidth = (maxX) / (arr.length - 1);
if (!_this.barWidth) {
_this.barWidth = totalWidth - (_this.padding || 5);
}
if (!_this.rounding) {
_this.rounding = 2;
}

var offsetX = (totalWidth - _this.barWidth) / 2;
var translateOffsetX = labelRotate >= 0 ? 10 : -10;
var xaxis = h(
'g',
Expand All @@ -158,6 +171,7 @@ function genBars (_this, arr, h) {
},
arr.map(function (item, index) {
var labelOffsetX = labelRotate < 0 ? item.x + offsetX : item.x - offsetX;
var title = labels[index];
return h(
'g',
{
Expand All @@ -173,32 +187,37 @@ function genBars (_this, arr, h) {
attrs: {
class: 'v-bars--label-text',
style: ("text-anchor:middle; fill:" + labelColor + "; font-size:" + labelSize + "em;"),
title: item.title
title: title
}
},
[
item.label
title
]
)
]
)
})
);
return rects.concat(xaxis);
return xaxis
}

var Path = {
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min'],
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],

render: function render (h) {
var ref = this;
var data = ref.data;
var boundary = ref.boundary;
var max = ref.max;
var min = ref.min;
var points = genPoints(data, boundary, { max: max, min: min });
var labelData = ref.labelData;
var points = genPoints(data, boundary, { max: max, min: min }, labelData.length);
var labels = genLabels(this, points, labelData, h);
var bars = genBars(this, points, h);

if (labels.children.length) {
bars = bars.concat(labels);
}
return h(
'g',
{
Expand Down Expand Up @@ -243,18 +262,22 @@ var Bars = {
type: Number,
default: 3
},
labelData: {
type: Array,
default: function () { return []; }
},
labelRotate: {
type: Number,
default: -45
},
labelColor: {
type: String,
default: '#999999'
},
labelSize: {
type: Number,
default: 0.7
},
labelColor: {
type: String,
default: '#999999'
},
height: Number,
width: Number,
padding: {
Expand All @@ -276,15 +299,23 @@ var Bars = {
minY: padding,
maxX: viewWidth - padding,
maxY: viewHeight - padding,
minBarHeight: this.minBarHeight,
minBarHeight: this.minBarHeight
};
var labelProps = {
minX: padding,
minY: padding,
maxX: viewWidth - padding,
maxY: viewHeight - padding,
labelData: this.labelData,
labelRotate: this.labelRotate,
labelColor: this.labelColor,
labelSize: this.labelSize
labelSize: this.labelSize,
labelColor: this.labelColor
};
var props = this.$props;

props.boundary = boundary;
props.id = 'vue-bars-' + this._uid;
props.labelProps = labelProps;

return h('svg', {
attrs: {
Expand Down
Loading