@@ -14,6 +14,12 @@ | |||||
More information at the website: https://frappe.github.io/charts | More information at the website: https://frappe.github.io/charts | ||||
### Usage | ### Usage | ||||
Install | |||||
``` | |||||
npm install frappe-charts | |||||
``` | |||||
Include it in your html: | Include it in your html: | ||||
``` | ``` | ||||
<script src="frappe-charts.min.js"></script> | <script src="frappe-charts.min.js"></script> | ||||
@@ -44,7 +44,8 @@ let bar_composite_chart = new Chart ({ | |||||
data: bar_composite_data, | data: bar_composite_data, | ||||
type: 'bar', | type: 'bar', | ||||
height: 180, | height: 180, | ||||
is_navigable: 1 | |||||
is_navigable: 1, | |||||
is_series: 1 | |||||
// region_fill: 1 | // region_fill: 1 | ||||
}); | }); | ||||
@@ -52,7 +53,8 @@ let line_composite_chart = new Chart ({ | |||||
parent: "#chart-composite-2", | parent: "#chart-composite-2", | ||||
data: line_composite_data, | data: line_composite_data, | ||||
type: 'line', | type: 'line', | ||||
height: 180 | |||||
height: 180, | |||||
is_series: 1 | |||||
}); | }); | ||||
bar_composite_chart.parent.addEventListener('data-select', (e) => { | bar_composite_chart.parent.addEventListener('data-select', (e) => { | ||||
@@ -87,7 +89,8 @@ let type_chart = new Chart({ | |||||
title: "My Awesome Chart", | title: "My Awesome Chart", | ||||
data: type_data, | data: type_data, | ||||
type: 'bar', | type: 'bar', | ||||
height: 250 | |||||
height: 250, | |||||
// is_series: 1 | |||||
}); | }); | ||||
Array.prototype.slice.call( | Array.prototype.slice.call( | ||||
@@ -249,7 +249,6 @@ | |||||
</svg> | </svg> | ||||
</a> | </a> | ||||
<!--<script src="../dist/frappe-charts.min.js"></script>--> | |||||
<script src="assets/js/frappe-charts.min.js"></script> | <script src="assets/js/frappe-charts.min.js"></script> | ||||
<script src="assets/js/index.js"></script> | <script src="assets/js/index.js"></script> | ||||
</body> | </body> | ||||
@@ -1,5 +1,5 @@ | |||||
{ | { | ||||
"name": "charts", | |||||
"name": "frappe-charts", | |||||
"version": "0.0.1", | "version": "0.0.1", | ||||
"description": "https://frappe.github.io/charts", | "description": "https://frappe.github.io/charts", | ||||
"main": "dist/frappe-charts.js", | "main": "dist/frappe-charts.js", | ||||
@@ -10,35 +10,69 @@ import nested from 'postcss-nested'; | |||||
import cssnext from 'postcss-cssnext'; | import cssnext from 'postcss-cssnext'; | ||||
import cssnano from 'cssnano'; | import cssnano from 'cssnano'; | ||||
export default { | |||||
input: 'src/scripts/charts.js', | |||||
output: { | |||||
file: 'dist/frappe-charts.min.js', | |||||
format: 'iife', | |||||
export default [ | |||||
{ | |||||
input: 'src/scripts/charts.js', | |||||
output: { | |||||
file: 'dist/frappe-charts.min.js', | |||||
format: 'iife', | |||||
}, | |||||
name: 'Chart', | |||||
sourcemap: 'true', | |||||
plugins: [ | |||||
postcss({ | |||||
extensions: [ '.less' ], | |||||
plugins: [ | |||||
nested(), | |||||
cssnext({ warnForDuplicates: false }), | |||||
cssnano() | |||||
] | |||||
}), | |||||
eslint({ | |||||
exclude: [ | |||||
'src/styles/**', | |||||
] | |||||
}), | |||||
babel({ | |||||
exclude: 'node_modules/**', | |||||
}), | |||||
replace({ | |||||
exclude: 'node_modules/**', | |||||
ENV: JSON.stringify(process.env.NODE_ENV || 'development'), | |||||
}), | |||||
uglify() | |||||
], | |||||
}, | }, | ||||
name: 'Chart', | |||||
sourcemap: 'true', | |||||
plugins: [ | |||||
postcss({ | |||||
extensions: [ '.less' ], | |||||
plugins: [ | |||||
nested(), | |||||
cssnext({ warnForDuplicates: false }), | |||||
cssnano() | |||||
] | |||||
}), | |||||
eslint({ | |||||
exclude: [ | |||||
'src/styles/**', | |||||
] | |||||
}), | |||||
babel({ | |||||
exclude: 'node_modules/**', | |||||
}), | |||||
replace({ | |||||
exclude: 'node_modules/**', | |||||
ENV: JSON.stringify(process.env.NODE_ENV || 'development'), | |||||
}), | |||||
uglify() | |||||
], | |||||
}; | |||||
{ | |||||
input: 'src/scripts/charts.js', | |||||
output: { | |||||
file: 'docs/assets/js/frappe-charts.min.js', | |||||
format: 'iife', | |||||
}, | |||||
name: 'Chart', | |||||
sourcemap: 'false', | |||||
plugins: [ | |||||
postcss({ | |||||
extensions: [ '.less' ], | |||||
plugins: [ | |||||
nested(), | |||||
cssnext({ warnForDuplicates: false }), | |||||
cssnano() | |||||
] | |||||
}), | |||||
eslint({ | |||||
exclude: [ | |||||
'src/styles/**', | |||||
] | |||||
}), | |||||
babel({ | |||||
exclude: 'node_modules/**', | |||||
}), | |||||
replace({ | |||||
exclude: 'node_modules/**', | |||||
ENV: JSON.stringify(process.env.NODE_ENV || 'development'), | |||||
}), | |||||
uglify() | |||||
], | |||||
} | |||||
]; |
@@ -137,7 +137,7 @@ export default class AxisChart extends BaseChart { | |||||
this.x_axis_group.textContent = ''; | this.x_axis_group.textContent = ''; | ||||
this.x.map((point, i) => { | this.x.map((point, i) => { | ||||
let space_taken = this.get_strwidth(point); | |||||
let space_taken = this.get_strwidth(point) + 2; | |||||
if(space_taken > allowed_space) { | if(space_taken > allowed_space) { | ||||
if(this.is_series) { | if(this.is_series) { | ||||
// Skip some axis lines if X axis is a series | // Skip some axis lines if X axis is a series | ||||
@@ -35,9 +35,7 @@ export default class PercentageChart extends BaseChart { | |||||
make_draw_area() { | make_draw_area() { | ||||
this.chart_div = $.create('div', { | this.chart_div = $.create('div', { | ||||
className: 'div', | className: 'div', | ||||
inside: this.chart_wrapper, | |||||
width: this.base_width, | |||||
height: this.base_height | |||||
inside: this.chart_wrapper | |||||
}); | }); | ||||
this.chart = $.create('div', { | this.chart = $.create('div', { | ||||
@@ -96,8 +94,10 @@ export default class PercentageChart extends BaseChart { | |||||
this.slice_totals.map((total, i) => { | this.slice_totals.map((total, i) => { | ||||
let slice = $.create('div', { | let slice = $.create('div', { | ||||
className: `progress-bar background ${this.colors[i]}`, | className: `progress-bar background ${this.colors[i]}`, | ||||
style: `width: ${total*100/this.grand_total}%`, | |||||
inside: this.percentage_bar | |||||
inside: this.percentage_bar, | |||||
styles: { | |||||
width: total*100/this.grand_total + "%" | |||||
} | |||||
}); | }); | ||||
this.slices.push(slice); | this.slices.push(slice); | ||||
}); | }); | ||||
@@ -25,8 +25,13 @@ $.create = (tag, o) => { | |||||
var ref = $(val); | var ref = $(val); | ||||
ref.parentNode.insertBefore(element, ref); | ref.parentNode.insertBefore(element, ref); | ||||
element.appendChild(ref); | element.appendChild(ref); | ||||
} | |||||
else if (i in element) { | |||||
} else if (i === "styles") { | |||||
if(typeof val === "object") { | |||||
Object.keys(val).map(prop => { | |||||
element.style[prop] = val[prop]; | |||||
}); | |||||
} | |||||
} else if (i in element ) { | |||||
element[i] = val; | element[i] = val; | ||||
} | } | ||||
else { | else { | ||||