bugfix

bricks/bar.js

@@ -9,7 +9,8 @@ bricks.ChartBar = class extends bricks.EchartsExt {
 		data,
 		line_options,
 		nameField,
-		valueFields
+		valueField
+		serieField:
 	}
 	*/
 	values_from_data(data, name){
@@ -19,6 +20,7 @@ bricks.ChartBar = class extends bricks.EchartsExt {
 		});
 		return d;
 	}
+	
 	lineinfo_from_data(data, name){
 		return {
 			name:name,

bricks/css/bricks.css

@@ -6,6 +6,16 @@ body {
 	overflow: auto;
 	display: flex;
 }
+* {
+	box-sizing: border-box!important;
+}
+.card {
+	border-radius: 8px;
+	padding: 5px;
+	margin: 5px;
+	background-color: #f5f5f5;
+	border: 1px solid #888888;
+}
 
 .griddata {
 	display: grid;

bricks/echartsext.js

@@ -9,6 +9,8 @@ bricks.EchartsExt = class extends bricks.VBox {
 		data_url:
 		nameField:
 		valueField:
+		serieField:
+		valueFields:
 		data_params:
 		data:[]
 	}
@@ -32,9 +34,65 @@ bricks.EchartsExt = class extends bricks.VBox {
 		}
 		this.bind('element_resize', this.chart.resize.bind(this.chart));
 	}
+	pivotify(data){
+		var series = [];
+		data.forEach(x => {
+			if (series.indexOf(x[this.serieField]) == -1){
+				series.push(x[this.serieField]);
+			}
+		});
+		data.sort( (x, y) => {
+			if(x[this.nameField] > y[this.nameField]) return 1;
+			if(x[this.nameField] < y[this.nameField]) return -1;
+			return 0;
+		});
+		var ndic = {}
+		for (var i=0;i<data.length;i++){
+			var k = data[i][this.nameField];
+			if( !ndic[k] ){
+				ndic[k] = {
+				};
+				ndic[k][this.nameField] = data[i][this.nameField];
+			}
+			ndic[k][data[i][this.serieField]] = data[i][this.valueField];
+		}
+		var nd = Object.values(ndic);
+		nd.sort( (x, y) => {
+			if(x[this.nameField] > y[this.nameField]) return 1;
+			if(x[this.nameField] < y[this.nameField]) return -1;
+			return 0;
+		});
+		return nd;
+	}
+	get_series(data){
+		if (!this.serieField){
+			return null;
+		}
+		var series = [];
+		data.forEach(x => {
+			if (series.indexOf(x[this.serieField]) == -1){
+				series.push(x[this.serieField]);
+			}
+		});
+		return series;
+	}
 	render_data(){
 		var data = this.user_data;
+		if (this.serieField){
+			if (!this.valueField) this.valueFields[0];
+			this.valueFields = this.get_series(data);
+			data = this.pivotify(data);
+		}
 		var opts = this.setup_options(data);
+		opts.grid = {
+			left: '3%',
+			right: '3%',
+			bottom: '3%',
+			containLabel: true
+		};
+		if (this.valueFields.length>1 && opts.legend ){
+			opts.legend.data = this.valueFields;
+		}
 		console.log('opts=', opts);
 		this.chart.setOption(opts);
 		this.chart.on('click', this.click_handle.bind(this));