update dual configs in rollup, add styles to $.create()

README.md

@@ -14,6 +14,12 @@
 More information at the website: https://frappe.github.io/charts
 
 ### Usage
+
+Install
+```
+npm install frappe-charts
+```
+
 Include it in your html:
 ```
 <script src="frappe-charts.min.js"></script>

docs/assets/js/index.js

@@ -44,7 +44,8 @@ let bar_composite_chart = new Chart ({
 	data: bar_composite_data,
 	type: 'bar',
 	height: 180,
-	is_navigable: 1
+	is_navigable: 1,
+	is_series: 1
 	// region_fill: 1
 });
 
@@ -52,7 +53,8 @@ let line_composite_chart = new Chart ({
 	parent: "#chart-composite-2",
 	data: line_composite_data,
 	type: 'line',
-	height: 180
+	height: 180,
+	is_series: 1
 });
 
 bar_composite_chart.parent.addEventListener('data-select', (e) => {
@@ -87,7 +89,8 @@ let type_chart = new Chart({
 	title: "My Awesome Chart",
 	data: type_data,
 	type: 'bar',
-	height: 250
+	height: 250,
+	// is_series: 1
 });
 
 Array.prototype.slice.call(

docs/index.html

@@ -249,7 +249,6 @@
       </svg>
     </a>
 
-    <!--<script src="../dist/frappe-charts.min.js"></script>-->
     <script src="assets/js/frappe-charts.min.js"></script>
     <script src="assets/js/index.js"></script>
   </body>

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "charts",
+  "name": "frappe-charts",
   "version": "0.0.1",
   "description": "https://frappe.github.io/charts",
   "main": "dist/frappe-charts.js",

rollup.config.js

@@ -10,35 +10,69 @@ import nested from 'postcss-nested';
 import cssnext from 'postcss-cssnext';
 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()
+		],
+	}
+];

src/scripts/charts/AxisChart.js

@@ -137,7 +137,7 @@ export default class AxisChart extends BaseChart {
 
 		this.x_axis_group.textContent = '';
 		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(this.is_series) {
 					// Skip some axis lines if X axis is a series

src/scripts/charts/PercentageChart.js

@@ -35,9 +35,7 @@ export default class PercentageChart extends BaseChart {
 	make_draw_area() {
 		this.chart_div = $.create('div', {
 			className: 'div',
-			inside: this.chart_wrapper,
-			width: this.base_width,
-			height: this.base_height
+			inside: this.chart_wrapper
 		});
 
 		this.chart = $.create('div', {
@@ -96,8 +94,10 @@ export default class PercentageChart extends BaseChart {
 		this.slice_totals.map((total, i) => {
 			let slice = $.create('div', {
 				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);
 		});

src/scripts/helpers/dom.js

@@ -25,8 +25,13 @@ $.create = (tag, o) => {
 			var ref = $(val);
 			ref.parentNode.insertBefore(element, 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;
 		}
 		else {