Skip to content

Commit e824d80

Browse files
author
Mostafa Kamal
committed
update 1.0.0 version
Co-Authored-By: Mostafa Kamal <radionishi@gmail.com>
1 parent c7b6b10 commit e824d80

4 files changed

Lines changed: 101 additions & 23 deletions

File tree

‎dist/index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
'use strict';
22

33
function Collection(collection) {
4-
console.log(collection);
4+
if(collection !== undefined){
5+
console.log(collection)
6+
}
7+
console.log('@0devco/chart loaded');
58
}
69

710
Collection.prototype.setup = require('./setup');
@@ -10,4 +13,4 @@ var chart = function collect(collection) {
1013
};
1114

1215
module.exports = chart;
13-
module.exports.default = chart;
16+
module.exports.default = chart;

‎dist/setup.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,9 @@ module.exports = function setup(chartEl) {
128128
ticks: {
129129
beginAtZero: is_BeginZeroX,
130130
display: is_hideX,
131-
fontSize: 30,
132-
fontColor: 'red'
131+
fontSize: chartEl.fontSizeX || 17,
132+
fontColor: chartEl.fontColorX || 'black',
133+
fontFamily: chartEl.fontFamilyX
133134
}
134135
}],
135136
yAxes: [{
@@ -142,7 +143,10 @@ module.exports = function setup(chartEl) {
142143
},
143144
ticks: {
144145
beginAtZero: is_BeginZeroY,
145-
display: is_hideY
146+
display: is_hideY,
147+
fontSize: chartEl.fontSizeY || 17,
148+
fontColor: chartEl.fontColorY || 'black',
149+
fontFamily: chartEl.fontFamilyY
146150
}
147151
}]
148152
}

‎src/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
'use strict';
22

33
function Collection(collection) {
4-
console.log(collection);
4+
if(collection !== undefined){
5+
console.log(collection)
6+
}
7+
console.log('@0devco/chart loaded');
58
}
69

710
Collection.prototype.setup = require('./setup');

‎src/setup.js‎

Lines changed: 85 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,87 @@
33
module.exports = function setup(chartEl) {
44
/* import chart js */
55
var Chart = require('chart.js');
6+
7+
/* https://twitter.com/0devco */
8+
69
/* chartEl data access by variable */
710
var datasetsArray = [];
811
for (var i = 0; i < chartEl.multiple; i++) {
912
var dataSet = {
1013
label: chartEl.label[i],
11-
fill: chartEl.fill[i],
1214
data: chartEl.data[i],
13-
borderDash: [chartEl.bdrDash[i]],
1415
backgroundColor: chartEl.bgColor[i],
1516
borderColor: chartEl.bdrColor[i],
16-
borderWidth: chartEl.bdrWidth[i]
1717
};
1818
datasetsArray.push(dataSet);
1919
}
20-
let is_animated = (chartEl.animated === false) ? 0 : 1500
21-
let is_title = chartEl.title ? true : false
22-
let is_legend = (chartEl.legend === false) ? false : true
23-
let is_drawOnChartArea = (chartEl.drawOnChartArea === false) ? false :true
24-
let is_tooltips = (chartEl.tooltips === false) ? false : true
25-
let is_BeginZeroY = (chartEl.beginZeroY === true) ? true : false
26-
let is_BeginZeroX = (chartEl.beginZeroX === true) ? true : false
27-
let is_hideX = (chartEl.hideX === true) ? false : true
28-
let is_hideY = (chartEl.hideY === true) ? false : true
20+
datasetsArray.forEach((d, index) => {
21+
/* fill flag */
22+
if (chartEl.fill !== undefined) {
23+
d['fill'] = (chartEl.fill[index] !== undefined) ? chartEl.fill[index] : true
24+
}
25+
/* border dash */
26+
if (chartEl.bdrDash !== undefined) {
27+
d['borderDash'] = (chartEl.bdrDash[index] !== undefined) ? [chartEl.bdrDash[index]] : [0]
28+
}
29+
/* border width */
30+
if (chartEl.bdrWidth !== undefined) {
31+
d['borderWidth'] = (chartEl.bdrWidth[index] !== undefined) ? chartEl.bdrWidth[index] : 1
32+
}
33+
/* tension (curve style)*/
34+
if (chartEl.tension !== undefined) {
35+
d['tension'] = (chartEl.tension[index] !== undefined) ? chartEl.tension[index] : 0.4
36+
}
37+
/* line step style */
38+
if (chartEl.stepLine !== undefined) {
39+
d['steppedLine'] = (chartEl.stepLine[index] !== undefined) ? chartEl.stepLine[index] : false
40+
}
41+
42+
43+
/* pointBackgroundColor */
44+
if (chartEl.pointBg !== undefined) {
45+
d['pointBackgroundColor'] = (chartEl.pointBg[index] !== undefined) ? chartEl.pointBg[index] : chartEl.pointBg[0]
46+
}
47+
/* pointRadius */
48+
49+
if (chartEl.pointRd !== undefined) {
50+
d['pointRadius'] = (chartEl.pointRd[index] !== undefined) ? chartEl.pointRd[index] : chartEl.pointRd[0]
51+
}
52+
/* pointBorderWidth */
53+
if (chartEl.pointBdrWd !== undefined) {
54+
d['pointBorderWidth'] = (chartEl.pointBdrWd[index] !== undefined) ? chartEl.pointBdrWd[index] : chartEl.pointBdrWd[0]
55+
}
56+
if (chartEl.pointBdrColor !== undefined) {
57+
d['pointBorderColor'] = (chartEl.pointBdrColor[index] !== undefined) ? chartEl.pointBdrColor[index] : chartEl.pointBdrColor[0]
58+
}
59+
/* point hover radius */
60+
if (chartEl.pointHvRd !== undefined) {
61+
d['pointHoverRadius'] = (chartEl.pointHvRd[index] !== undefined) ? chartEl.pointHvRd[index] : chartEl.pointHvRd[0]
62+
}
63+
/* pointHoverBackgroundColor */
64+
if (chartEl.pointHvBg !== undefined) {
65+
d['pointHoverBackgroundColor'] = (chartEl.pointHvBg[index] !== undefined) ? chartEl.pointHvBg[index] : chartEl.pointHvBg[0]
66+
}
67+
/* pointHoverBorderColor */
68+
if (chartEl.pointHvBdrColor !== undefined) {
69+
d['pointHoverBorderColor'] = (chartEl.pointHvBdrColor[index] !== undefined) ? chartEl.pointHvBdrColor[index] : chartEl.pointHvBdrColor[0]
70+
}
71+
/* point style */
72+
if (chartEl.pointStyle !== undefined) {
73+
d['pointStyle'] = (chartEl.pointStyle[index] !== undefined) ? chartEl.pointStyle[index] : chartEl.pointStyle[0]
74+
}
75+
})
76+
var is_animated = chartEl.animated === false ? 0 : 1500;
77+
var is_title = chartEl.title ? true : false;
78+
var is_legend = chartEl.legend === false ? false : true;
79+
var is_drawOnChartArea = chartEl.drawOnChartArea === false ? false : true;
80+
var is_tooltips = chartEl.tooltips === false ? false : true;
81+
var is_hover = chartEl.tooltips === false ? 'null' : 'point';
82+
var is_BeginZeroY = chartEl.beginZeroY === true ? true : false;
83+
var is_BeginZeroX = chartEl.beginZeroX === true ? true : false;
84+
var is_hideX = chartEl.hideX === true ? false : true;
85+
var is_hideY = chartEl.hideY === true ? false : true;
86+
2987

3088
/* create chart */
3189
var chartID = document.getElementById(chartEl.id);
@@ -49,7 +107,11 @@ module.exports = function setup(chartEl) {
49107
text: chartEl.title
50108
},
51109
tooltips: {
52-
enabled: is_tooltips
110+
enabled: is_tooltips,
111+
// backgroundColor: 'red'
112+
},
113+
hover: {
114+
mode: is_hover
53115
},
54116
animation: {
55117
duration: is_animated
@@ -58,27 +120,33 @@ module.exports = function setup(chartEl) {
58120
xAxes: [{
59121
stacked: chartEl.stackX || false,
60122
gridLines: {
61-
display: true,
123+
display: is_hideX,
62124
drawBorder: is_hideX,
63125
drawOnChartArea: is_drawOnChartArea,
64126
position: 'bottom'
65127
},
66128
ticks: {
67129
beginAtZero: is_BeginZeroX,
68-
display: is_hideX
130+
display: is_hideX,
131+
fontSize: chartEl.fontSizeX || 17,
132+
fontColor: chartEl.fontColorX || 'black',
133+
fontFamily: chartEl.fontFamilyX
69134
}
70135
}],
71136
yAxes: [{
72137
stacked: chartEl.stackY || false,
73138
gridLines: {
74-
display: true,
139+
display: is_hideY,
75140
drawBorder: is_hideY,
76141
drawOnChartArea: is_drawOnChartArea,
77142
position: 'left'
78143
},
79144
ticks: {
80145
beginAtZero: is_BeginZeroY,
81-
display: is_hideY
146+
display: is_hideY,
147+
fontSize: chartEl.fontSizeY || 17,
148+
fontColor: chartEl.fontColorY || 'black',
149+
fontFamily: chartEl.fontFamilyY
82150
}
83151
}]
84152
}

0 commit comments

Comments
 (0)