jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

wrap legend for aggregation charts

Browse Source
This commit is contained in:
Prateeksha Singh 2018-04-20 09:28:45 +05:30
parent a0b4719456
commit ee53223020
12 changed files with 79 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
dist/frappe-charts.esm.js vendored
View File

@ -1698,19 +1698,29 @@ class AggregationChart extends BaseChart {
renderLegend() {
let s = this.state;
this.legendArea.textContent = '';
this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
let count = 0;
let y = 0;
this.legendTotals.map((d, i) => {
let barWidth = 110;
let rect = legendDot(
barWidth * i + 5,
'0',
let divisor = Math.floor(
(this.width - getExtraWidth(this.measures))/barWidth
);
if(count > divisor) {
count = 0;
y += 20;
}
let x = barWidth * count + 5;
let dot = legendDot(
x,
y,
5,
this.colors[i],
`${s.labels[i]}: ${d}`
);
this.legendArea.appendChild(rect);
this.legendArea.appendChild(dot);
count++;
});
}
}
@ -2225,16 +2235,22 @@ class PercentageChart extends AggregationChart {
constructor(parent, args) {
super(parent, args);
this.type = 'percentage';
this.barOptions = args.barOptions || {};
this.barOptions.height = this.barOptions.height
|| PERCENTAGE_BAR_DEFAULT_HEIGHT;
this.barOptions.depth = this.barOptions.depth
|| PERCENTAGE_BAR_DEFAULT_DEPTH;
this.setup();
}
setMeasures(options) {
let m = this.measures;
this.barOptions = options.barOptions || {};
let b = this.barOptions;
b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT;
b.depth = b.depth || PERCENTAGE_BAR_DEFAULT_DEPTH;
m.paddings.right = 30;
m.legendHeight = 80;
m.baseHeight = b.height * 10 + b.depth * 0.5;
}
setupComponents() {
let s = this.state;

2
dist/frappe-charts.min.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js.map
View File

File diff suppressed because one or more lines are too long

8
docs/assets/js/index.js
View File

@ -58,7 +58,7 @@ let typeChartArgs = {
height: 300,
colors: customColors,
maxLegendPoints: 6,
// maxLegendPoints: 6,
maxSlices: 10,
tooltipOptions: {
@ -82,6 +82,12 @@ Array.prototype.slice.call(
typeChartArgs.colors = customColors;
}
if(type !== 'percentage') {
typeChartArgs.height = 300;
} else {
typeChartArgs.height = undefined;
}
let newChart = new Chart("#chart-aggr", typeChartArgs);
if(newChart){
aggrChart = newChart;

17
docs/assets/js/index.min.js vendored
View File

@ -46,12 +46,6 @@ var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001
// Universal constants
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
/**
* Returns whether or not two given arrays are equal.
* @param {Array} arr1 First array
@ -120,6 +114,7 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
// https://stackoverflow.com/a/11252167/6495043
function clone(date) {
@ -160,8 +155,6 @@ function addDays(date, numberOfDays) {
date.setDate(date.getDate() + numberOfDays);
}
// Composite Chart
// ================================================================================
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
var lineCompositeData = {
@ -352,7 +345,7 @@ var typeChartArgs = {
height: 300,
colors: customColors,
maxLegendPoints: 6,
// maxLegendPoints: 6,
maxSlices: 10,
tooltipOptions: {
@ -378,6 +371,12 @@ Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button'
typeChartArgs.colors = customColors;
}
if (type !== 'percentage') {
typeChartArgs.height = 300;
} else {
typeChartArgs.height = undefined;
}
var newChart = new Chart("#chart-aggr", typeChartArgs);
if (newChart) {
aggrChart = newChart;

2
docs/assets/js/index.min.js.map
View File

File diff suppressed because one or more lines are too long

21
src/js/charts/AggregationChart.js
View File

@ -1,5 +1,6 @@
import BaseChart from './BaseChart';
import { legendDot } from '../utils/draw';
import { getExtraWidth } from '../utils/constants';
export default class AggregationChart extends BaseChart {
constructor(parent, args) {
@ -57,19 +58,29 @@ export default class AggregationChart extends BaseChart {
renderLegend() {
let s = this.state;
this.legendArea.textContent = '';
this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
let count = 0;
let y = 0;
this.legendTotals.map((d, i) => {
let barWidth = 110;
let rect = legendDot(
barWidth * i + 5,
'0',
let divisor = Math.floor(
(this.width - getExtraWidth(this.measures))/barWidth
);
if(count > divisor) {
count = 0;
y += 20;
}
let x = barWidth * count + 5;
let dot = legendDot(
x,
y,
5,
this.colors[i],
`${s.labels[i]}: ${d}`
);
this.legendArea.appendChild(rect);
this.legendArea.appendChild(dot);
count++;
});
}
}

20
src/js/charts/PercentageChart.js
View File

@ -7,16 +7,22 @@ export default class PercentageChart extends AggregationChart {
constructor(parent, args) {
super(parent, args);
this.type = 'percentage';
this.barOptions = args.barOptions || {};
this.barOptions.height = this.barOptions.height
|| PERCENTAGE_BAR_DEFAULT_HEIGHT;
this.barOptions.depth = this.barOptions.depth
|| PERCENTAGE_BAR_DEFAULT_DEPTH;
this.setup();
}
setMeasures(options) {
let m = this.measures;
this.barOptions = options.barOptions || {};
let b = this.barOptions;
b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT;
b.depth = b.depth || PERCENTAGE_BAR_DEFAULT_DEPTH;
m.paddings.right = 30;
m.legendHeight = 80;
m.baseHeight = b.height * 10 + b.depth * 0.5;
}
setupComponents() {
let s = this.state;