Skip to content

Commit

Permalink
chore: build version(v1.0.2)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fwm227
fwm227 committed Jul 15, 2019
1 parent 60fffd7 commit 2e3b002
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 71 deletions.
2 changes: 1 addition & 1 deletion README.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

> The bar-chart visualization plugin
[![Build Status](https://travis-ci.org/reming0227/bar-chartjs.svg?branch=master)](https://travis-ci.org/reming0227/bar-chartjs) [![Version](https://img.shields.io/badge/npm-1.0.1-blue.svg)](https://www.npmjs.com/package/bar-chartjs)
[![Build Status](https://travis-ci.org/reming0227/bar-chartjs.svg?branch=master)](https://travis-ci.org/reming0227/bar-chartjs) [![Version](https://img.shields.io/badge/npm-1.0.2-blue.svg)](https://www.npmjs.com/package/bar-chartjs)

## 📦 Installation

Expand Down
2 changes: 1 addition & 1 deletion core/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ BarChart.prototype.drawBars = function (move_position) {
label_val: optionManager.labels[Math.floor((move_position.x - self.yAxis_left) / step_len)],
data_val: bar.val,
style: bar.d_style
}
};
} else isSelect = false;
drawBar(self.context, bar, isSelect);
});
Expand Down
166 changes: 99 additions & 67 deletions lib/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
}

var optionManager = {
data: [],
series: [],
labels: [],
margin: {
top: 30,
Expand Down Expand Up @@ -81,35 +81,31 @@
style: '#ccc',
width: 1
},
bar: {
defaultBar: {
// set default style of bar
style: {
"default": 'rgba(16, 142, 233, 0.6)',
select: 'rgb(16, 142, 233)'
}
},
style: {
axis: '#aaa',
line: '#ccc'
},
duration: 500,
tooltip: {
title: '',
style: 'rgba(0, 0, 0, 0.6)',
height: 50,
radius: 4,
mark: {
radius: 5,
style: 'rgb(16, 142, 233)'
radius: 5
},
font: {
size: 14,
family: 'Arial',
style: 'rgba(0, 0, 0, 0.6)'
style: 'rgb(255, 255, 255)'
}
}
};

var barInfns = ['x', 'y', 'w', 'h'];
var barInfns = ['x', 'y', 'w', 'h', 'val', 'd_style', 'a_style'];
/**
* Create bar
* @return {Object} item instance of bar-chart
Expand All @@ -129,7 +125,7 @@


function drawBar(ctx, bar, isSelect) {
if (isSelect) ctx.fillStyle = optionManager.bar.style.select;else ctx.fillStyle = optionManager.bar.style["default"];
if (isSelect) ctx.fillStyle = bar.a_style;else ctx.fillStyle = bar.d_style;
ctx.fillRect(bar.x, bar.y, bar.w, bar.h);
}

Expand Down Expand Up @@ -159,12 +155,13 @@
/**
* Draw Axis
* @param {Object} ctx context of bar-chart
* @param {Number} base_pos the position of line that mark zero in y-axis
* @param {Number} yAxis_left margin-left
* @param {Number} area_w area width
* @param {Number} area_h area height
*/

function drawAxis(ctx, yAxis_left, area_w, area_h) {
function drawAxis(ctx, base_pos, yAxis_left, area_w, area_h) {
ctx.beginPath();
ctx.strokeStyle = optionManager.yAxis.line.style;
ctx.lineWidth = optionManager.yAxis.line.width;
Expand All @@ -174,8 +171,8 @@
ctx.beginPath();
ctx.strokeStyle = optionManager.xAxis.line.style;
ctx.lineWidth = optionManager.xAxis.line.width;
ctx.moveTo(yAxis_left, area_h);
ctx.lineTo(area_w + yAxis_left, area_h);
ctx.moveTo(yAxis_left, base_pos);
ctx.lineTo(area_w + yAxis_left, base_pos);
ctx.stroke();
}
/**
Expand All @@ -187,7 +184,7 @@
*/


function drawXAxisLabel(ctx, yAxis_left, area_w, area_h) {
function drawXAxisLabel(ctx, base_pos, yAxis_left, area_w, area_h) {
var labels = optionManager.labels;
var x_step = area_w / (labels.length + 1);
var tickLength = optionManager.xAxis.tick.length;
Expand All @@ -198,9 +195,10 @@
ctx.fillStyle = optionManager.xAxis.font.style;

for (var i = 1; i <= labels.length; i++) {
ctx.moveTo(yAxis_left + i * x_step, area_h);
ctx.lineTo(yAxis_left + i * x_step, area_h + tickLength);
ctx.fillText(labels[i - 1], yAxis_left + i * x_step, area_h + 20);
var x_pos = Math.round(i * x_step);
ctx.moveTo(yAxis_left + x_pos, base_pos);
ctx.lineTo(yAxis_left + x_pos, base_pos + tickLength);
ctx.fillText(labels[i - 1], yAxis_left + x_pos, area_h + 20);
}

ctx.closePath();
Expand All @@ -219,21 +217,22 @@

function drawYAxisLabel(ctx, tick, yAxis_left, phyStep, area_w, area_h) {
var tickLength = optionManager.yAxis.tick.length;
var yStepAcc = tick[0];
ctx.textBaseline = 'middle';
ctx.textAlign = 'right';
ctx.font = "".concat(optionManager.yAxis.font.size, "px ").concat(optionManager.yAxis.font.family);
ctx.fillStyle = optionManager.yAxis.font.style;

for (var i = 0; i <= tick[3]; i++) {
for (var i = 0; i <= tick[3]; i++, yStepAcc += tick[2]) {
ctx.beginPath();
ctx.fillText(tick[2] * i, yAxis_left - 10, Math.round(area_h - i * phyStep));
ctx.fillText(yStepAcc, yAxis_left - 10, Math.round(area_h - i * phyStep));
ctx.strokeStyle = optionManager.yAxis.tick.style;
ctx.lineWidth = optionManager.yAxis.tick.width;
ctx.moveTo(yAxis_left - tickLength, Math.round(area_h - i * phyStep));
ctx.lineTo(yAxis_left, Math.round(area_h - i * phyStep));
ctx.closePath();
ctx.stroke();
if (i === 0) continue;
if (i === Math.abs(tick[0]) / tick[2]) continue;
ctx.beginPath();
ctx.strokeStyle = optionManager.guideLine.style;
ctx.lineWidth = optionManager.guideLine.width;
Expand All @@ -257,8 +256,9 @@
var yAxis_left = barChart.yAxis_left;
var area_w = barChart.areaW;
var area_h = barChart.areaH;
drawAxis(ctx, yAxis_left, area_w, area_h);
drawXAxisLabel(ctx, yAxis_left, area_w, area_h);
var base_pos = area_h + Math.round(tick[0] * barChart.phyScale);
drawAxis(ctx, base_pos, yAxis_left, area_w, area_h);
drawXAxisLabel(ctx, base_pos, yAxis_left, area_w, area_h);
drawYAxisLabel(ctx, tick, yAxis_left, phyStep, area_w, area_h);
}

Expand Down Expand Up @@ -295,7 +295,10 @@
if (formatStep >= 0 && formatStep <= 0.1) formatStep = 0.1;else if (formatStep >= 0.100001 && formatStep <= 0.2) formatStep = 0.2;else if (formatStep >= 0.200001 && formatStep <= 0.25) formatStep = 0.25;else if (formatStep >= 0.250001 && formatStep <= 0.5) formatStep = 0.5;else formatStep = 1;
formatStep *= tempStep; // modify min-tick

if (parseInt(minTick / formatStep) !== minTick / formatStep) minTick = parseInt(minTick / formatStep) * formatStep; // modify max-tick
if (parseInt(minTick / formatStep) !== minTick / formatStep) {
if (minTick < 0) minTick = -1 * Math.ceil(Math.abs(minTick / formatStep)) * formatStep;else minTick = parseInt(minTick / formatStep) * formatStep;
} // modify max-tick


if (parseInt(maxTick / formatStep) !== maxTick / formatStep) maxTick = (parseInt(maxTick / formatStep) + 1) * formatStep; // modify step-number

Expand Down Expand Up @@ -370,12 +373,12 @@
* @param {Number} idx select index
*/

function drawTooltip(ctx, move_position, idx) {
function drawTooltip(ctx, move_position, info) {
var markRadius = optionManager.tooltip.mark.radius;
var tooltipText = "".concat(optionManager.tooltip.title).concat(optionManager.data[idx]);
var tooltipText = "".concat(optionManager.tooltip.title, " ").concat(info.data_val);
ctx.font = "".concat(optionManager.tooltip.font.size, "px ").concat(optionManager.tooltip.font.family);
var descWidth = ctx.measureText(tooltipText).width;
var titleWidth = ctx.measureText(optionManager.labels[idx]).width;
var titleWidth = ctx.measureText(info.label_val).width;
var width = descWidth > titleWidth ? descWidth : titleWidth;
width += 3 * markRadius;
var additionWidth = 12;
Expand Down Expand Up @@ -409,12 +412,13 @@
ctx.fillStyle = '#fff';
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillText(optionManager.labels[idx], moveX + additionWidth / 2, moveY + 0.85 * tooltipHeight / 3);
ctx.fillStyle = optionManager.tooltip.font.style;
ctx.fillText(info.label_val, moveX + additionWidth / 2, moveY + 0.85 * tooltipHeight / 3);
ctx.fillText(tooltipText, moveX + additionWidth / 2 + 3 * markRadius, moveY + 2.1 * tooltipHeight / 3);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = optionManager.tooltip.mark.style;
ctx.fillStyle = info.style;
ctx.arc(moveX + additionWidth / 2 + markRadius, moveY + 2 * tooltipHeight / 3, markRadius, 0, 2 * Math.PI);
ctx.fill();
}
Expand Down Expand Up @@ -451,15 +455,15 @@

BarChart.prototype.initEvent = function (canvasDom) {
var self = this;
var mouse_position = Object.create(null);
var move_position = Object.create(null);
canvasDom.addEventListener('mousemove', function () {
mouse_position.x = event.clientX - self.boundingRect.left;
mouse_position.y = event.clientY - self.boundingRect.top;
move_position.x = event.clientX - self.boundingRect.left;
move_position.y = event.clientY - self.boundingRect.top;
clearTimeout(timer);
var timer = setTimeout(function () {
self.context.clearRect(0, 0, self.canvasW, self.canvasH);
drawFrame(self);
self.drawBars(mouse_position);
self.drawBars(move_position);
}, 1000 / 60);
});
};
Expand All @@ -469,9 +473,15 @@


BarChart.prototype.initData = function () {
this.animQuota = 0;
this.min_data = Math.min.apply(Math, _toConsumableArray(optionManager.data));
this.max_data = Math.max.apply(Math, _toConsumableArray(optionManager.data));
if (optionManager.series.length > 1) this.series = true;
this.animIdx = 0;
var totalData = [];
optionManager.series.forEach(function (item, idx) {
totalData = totalData.concat(item.data);
});
this.min_data = Math.min.apply(Math, _toConsumableArray(totalData));
this.max_data = Math.max.apply(Math, _toConsumableArray(totalData));
this.max_abs_data = Math.max(Math.abs(this.min_data), Math.abs(this.max_data));
};
/**
* Init context
Expand Down Expand Up @@ -509,18 +519,28 @@


BarChart.prototype.initBars = function () {
var _this = this;

this.bars = [];
this.phyScale = (this.areaH - optionManager.margin.top) / this.tick[1];
var bar_w = this.areaW / (optionManager.data.length + 1) / 2;
var next_x_axis = bar_w * 1.5;
optionManager.data.forEach(function (val, index) {
var bar = createBar(next_x_axis + _this.yAxis_left, _this.areaH, bar_w, -1 * val * _this.phyScale);

_this.bars.push(bar);
var self = this;
self.bars = [];
self.phyScale = (self.areaH - optionManager.margin.top) / (self.tick[1] - self.tick[0]);
var step_len = self.areaW / (optionManager.labels.length + 1);
var bar_w = step_len / (2 * optionManager.series.length);
var big_step = 0,
small_step = 0;
optionManager.series.forEach(function (item, index) {
big_step = 0;
small_step += 1.5 * bar_w; // set default style

if (!helpers.isObject(item.style)) {
item.style = Object.create(null);
item.style["default"] = optionManager.defaultBar.style["default"];
item.style.active = optionManager.defaultBar.style.select;
}

next_x_axis += 2 * bar_w;
item.data.forEach(function (val, idx) {
var bar = createBar(big_step + small_step + self.yAxis_left, self.areaH + self.tick[0] * self.phyScale, bar_w, -1 * val * self.phyScale, val, item.style["default"], item.style.active);
self.bars.push(bar);
big_step += step_len;
});
});
};
/**
Expand All @@ -529,11 +549,12 @@


BarChart.prototype.caculateScele = function () {
this.tick = helpers.getTick(this.min_data >= 0 ? 0 : this.min_data, this.max_data);
this.context.font = "".concat(optionManager.yAxis.font.size, " ").concat(optionManager.yAxis.font.size);
this.yAxis_left = parseInt(2 * this.context.measureText(this.tick[1]).width);
this.areaW = this.canvasW - this.yAxis_left;
this.areaH = this.canvasH - optionManager.margin.bottom;
var self = this;
self.tick = helpers.getTick(self.min_data >= 0 ? 0 : self.min_data, self.max_data);
self.context.font = "".concat(optionManager.yAxis.font.size, " ").concat(optionManager.yAxis.font.size);
self.yAxis_left = parseInt(3 * self.context.measureText(self.tick[1]).width);
self.areaW = self.canvasW - self.yAxis_left;
self.areaH = self.canvasH - optionManager.margin.bottom;
};
/**
* Render bar-chart
Expand All @@ -554,34 +575,45 @@
BarChart.prototype.drawBars = function (move_position) {
var self = this,
isSelect = false,
selIdx = -1;
selInfo;
var step_len = self.areaW / (optionManager.labels.length + 1);
self.bars.forEach(function (bar, idx) {
if (move_position && move_position.x >= bar.x && move_position.x <= bar.x + bar.w && move_position.y <= bar.y && move_position.y >= bar.y + bar.h) selIdx = idx;
if (move_position && move_position.x > bar.x && move_position.x < bar.x + bar.w && (move_position.y > bar.y + bar.h && move_position.y < bar.y || move_position.y > bar.y && move_position.y < bar.y + bar.h)) {
isSelect = true;
selInfo = {
label_val: optionManager.labels[Math.floor((move_position.x - self.yAxis_left) / step_len)],
data_val: bar.val,
style: bar.d_style
};
} else isSelect = false;

drawBar(self.context, bar, isSelect);
});

if (~selIdx) {
drawTooltip(self.context, move_position, selIdx);
}
if (selInfo) drawTooltip(self.context, move_position, selInfo);
};
/**
* Animation
*/


BarChart.prototype.animation = function () {
var ctx = this.context;
var tickMove = this.max_data * this.phyScale / (optionManager.duration * 1e-3 * 60);
ctx.clearRect(0, 0, this.canvasW, this.canvasH);
var self = this;
var ctx = self.context;
var tickMove = self.max_abs_data * self.phyScale / (optionManager.duration * 1e-3 * 60);
var baseLineH = self.canvasH + self.tick[0] * self.phyScale - optionManager.margin.bottom;
ctx.clearRect(0, 0, self.canvasW, self.canvasH);
ctx.save();
drawFrame(this);
this.animQuota -= tickMove;
ctx.rect(0, this.canvasH - optionManager.margin.bottom, this.canvasW, this.animQuota);
drawFrame(self);
self.animIdx -= tickMove;
var temp = self.animIdx;
ctx.beginPath();
ctx.rect(0, baseLineH - temp, self.canvasW, 2 * temp);
ctx.closePath();
ctx.clip();
this.drawBars();
self.drawBars();

if (this.animQuota > -1 * this.max_data * this.phyScale) {
var anim = this.animation.bind(this);
if (self.animIdx > -1 * self.max_abs_data * self.phyScale) {
var anim = self.animation.bind(self);
helpers.requestAnimationFrame()(anim);
}

Expand Down
Loading

0 comments on commit 2e3b002

Please sign in to comment.