jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

feat: tune spacing for legends

Browse Source
This commit is contained in:
Shivam Mishra 2020-07-28 16:24:58 +05:30
parent 89fc842330
commit 5e17dea6de
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,7 +66,7 @@ export default class AggregationChart extends BaseChart {
let count = 0; let count = 0;
let y = 0; let y = 0;
this.legendTotals.map((d, i) => { this.legendTotals.map((d, i) => {
let barWidth = 150; let barWidth = 120;
let divisor = Math.floor( let divisor = Math.floor(
(this.width - getExtraWidth(this.measures))/barWidth (this.width - getExtraWidth(this.measures))/barWidth
); );

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

@ -1,7 +1,7 @@
import AggregationChart from './AggregationChart'; import AggregationChart from './AggregationChart';
import { getOffset } from '../utils/dom'; import { getOffset } from '../utils/dom';
import { getComponent } from '../objects/ChartComponents'; import { getComponent } from '../objects/ChartComponents';
import { PERCENTAGE_BAR_DEFAULT_HEIGHT } from '../utils/constants'; import { PERCENTAGE_BAR_DEFAULT_HEIGHT, getExtraHeight } from '../utils/constants';
export default class PercentageChart extends AggregationChart { export default class PercentageChart extends AggregationChart {
constructor(parent, args) { constructor(parent, args) {
@ -18,8 +18,11 @@ export default class PercentageChart extends AggregationChart {
b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT; b.height = b.height || PERCENTAGE_BAR_DEFAULT_HEIGHT;
m.paddings.right = 30; m.paddings.right = 30;
m.legendHeight = 60; m.paddings.top = 60;
m.baseHeight = (b.height + b.depth * 0.5) * 8; m.paddings.bottom = 0;
m.legendHeight = 80;
m.baseHeight = (b.height) * 8 + getExtraHeight(m);
} }
setupComponents() { setupComponents() {
@ -71,12 +74,13 @@ export default class PercentageChart extends AggregationChart {
this.container.addEventListener('mousemove', (e) => { this.container.addEventListener('mousemove', (e) => {
let bars = this.components.get('percentageBars').store; let bars = this.components.get('percentageBars').store;
let bar = e.target; let bar = e.target;
if(bars.includes(bar)) { if (bars.includes(bar)) {
let i = bars.indexOf(bar); let i = bars.indexOf(bar);
let gOff = getOffset(this.container), pOff = getOffset(bar); let gOff = getOffset(this.container), pOff = getOffset(bar);
let x = pOff.left - gOff.left + parseInt(bar.getAttribute('width'))/2; let width = bar.getAttribute('width') || bar.getBoundingClientRect().width;
let x = pOff.left - gOff.left + parseInt(width)/2;
let y = pOff.top - gOff.top; let y = pOff.top - gOff.top;
let title = (this.formattedLabels && this.formattedLabels.length>0 let title = (this.formattedLabels && this.formattedLabels.length>0
? this.formattedLabels[i] : this.state.labels[i]) + ': '; ? this.formattedLabels[i] : this.state.labels[i]) + ': ';