Przeglądaj źródła

wrap legend for aggregation charts

tags/1.2.0
Prateeksha Singh 7 lat temu
rodzic
commit
ee53223020
12 zmienionych plików z 77 dodań i 39 usunięć
  1. +27
    -11
      dist/frappe-charts.esm.js
  2. +1
    -1
      dist/frappe-charts.min.cjs.js
  3. +1
    -1
      dist/frappe-charts.min.esm.js
  4. +1
    -1
      dist/frappe-charts.min.iife.js
  5. +1
    -1
      dist/frappe-charts.min.iife.js.map
  6. +1
    -1
      docs/assets/js/frappe-charts.min.js
  7. +1
    -1
      docs/assets/js/frappe-charts.min.js.map
  8. +7
    -1
      docs/assets/js/index.js
  9. +8
    -9
      docs/assets/js/index.min.js
  10. +1
    -1
      docs/assets/js/index.min.js.map
  11. +16
    -5
      src/js/charts/AggregationChart.js
  12. +12
    -6
      src/js/charts/PercentageChart.js

+ 27
- 11
dist/frappe-charts.esm.js Wyświetl plik

@@ -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,14 +2235,20 @@ class PercentageChart extends AggregationChart {
constructor(parent, args) {
super(parent, args);
this.type = 'percentage';
this.setup();
}

this.barOptions = args.barOptions || {};
this.barOptions.height = this.barOptions.height
|| PERCENTAGE_BAR_DEFAULT_HEIGHT;
this.barOptions.depth = this.barOptions.depth
|| PERCENTAGE_BAR_DEFAULT_DEPTH;
setMeasures(options) {
let m = this.measures;
this.barOptions = options.barOptions || {};

this.setup();
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() {


+ 1
- 1
dist/frappe-charts.min.cjs.js
Plik diff jest za duży
Wyświetl plik


+ 1
- 1
dist/frappe-charts.min.esm.js
Plik diff jest za duży
Wyświetl plik


+ 1
- 1
dist/frappe-charts.min.iife.js
Plik diff jest za duży
Wyświetl plik


+ 1
- 1
dist/frappe-charts.min.iife.js.map
Plik diff jest za duży
Wyświetl plik


+ 1
- 1
docs/assets/js/frappe-charts.min.js
Plik diff jest za duży
Wyświetl plik


+ 1
- 1
docs/assets/js/frappe-charts.min.js.map
Plik diff jest za duży
Wyświetl plik


+ 7
- 1
docs/assets/js/index.js Wyświetl plik

@@ -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;


+ 8
- 9
docs/assets/js/index.min.js Wyświetl plik

@@ -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;


+ 1
- 1
docs/assets/js/index.min.js.map
Plik diff jest za duży
Wyświetl plik


+ 16
- 5
src/js/charts/AggregationChart.js Wyświetl plik

@@ -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++;
});
}
}

+ 12
- 6
src/js/charts/PercentageChart.js Wyświetl plik

@@ -7,14 +7,20 @@ export default class PercentageChart extends AggregationChart {
constructor(parent, args) {
super(parent, args);
this.type = 'percentage';
this.setup();
}

this.barOptions = args.barOptions || {};
this.barOptions.height = this.barOptions.height
|| PERCENTAGE_BAR_DEFAULT_HEIGHT;
this.barOptions.depth = this.barOptions.depth
|| PERCENTAGE_BAR_DEFAULT_DEPTH;
setMeasures(options) {
let m = this.measures;
this.barOptions = options.barOptions || {};

this.setup();
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() {


Ładowanie…
Anuluj
Zapisz