@@ -267,6 +267,10 @@ const DEFAULT_COLORS = { | |||
heatmap: HEATMAP_COLORS | |||
}; | |||
/** | |||
* Returns the value of a number upto 2 decimal places. | |||
* @param {Number} d Any number | |||
*/ | |||
function floatTwo(d) { | |||
return parseFloat(d.toFixed(2)); | |||
} | |||
@@ -1263,25 +1267,19 @@ class BaseChart { | |||
} | |||
makeContainer() { | |||
this.container = $.create('div', { | |||
className: 'chart-container', | |||
innerHTML: `<h6 class="title">${this.title}</h6> | |||
<h6 class="sub-title uppercase">${this.subtitle}</h6> | |||
<div class="frappe-chart graphics"></div> | |||
<div class="graph-stats-container"></div>` | |||
}); | |||
// Chart needs a dedicated parent element | |||
this.parent.innerHTML = ''; | |||
this.parent.appendChild(this.container); | |||
this.container = $.create('div', { | |||
inside: this.parent, | |||
className: 'chart-container' | |||
}); | |||
this.chartWrapper = this.container.querySelector('.frappe-chart'); | |||
this.statsWrapper = this.container.querySelector('.graph-stats-container'); | |||
this.container = this.container; | |||
} | |||
makeTooltip() { | |||
this.tip = new SvgTip({ | |||
parent: this.chartWrapper, | |||
parent: this.container, | |||
colors: this.colors | |||
}); | |||
this.bindTooltip(); | |||
@@ -1344,7 +1342,7 @@ class BaseChart { | |||
elementsToAnimate = elementsToAnimate.concat(c.update(animate)); | |||
}); | |||
if(elementsToAnimate.length > 0) { | |||
runSMILAnimation(this.chartWrapper, this.svg, elementsToAnimate); | |||
runSMILAnimation(this.container, this.svg, elementsToAnimate); | |||
setTimeout(() => { | |||
components.forEach(c => c.make()); | |||
this.updateNav(); | |||
@@ -1368,11 +1366,11 @@ class BaseChart { | |||
makeChartArea() { | |||
if(this.svg) { | |||
this.chartWrapper.removeChild(this.svg); | |||
this.container.removeChild(this.svg); | |||
} | |||
this.svg = makeSVGContainer( | |||
this.chartWrapper, | |||
'chart', | |||
this.container, | |||
'frappe-chart chart', | |||
this.baseWidth, | |||
this.baseHeight | |||
); | |||
@@ -1409,7 +1407,7 @@ class BaseChart { | |||
}; | |||
document.addEventListener('keydown', (e) => { | |||
if(isElementInViewport(this.chartWrapper)) { | |||
if(isElementInViewport(this.container)) { | |||
e = e || window.event; | |||
if(this.keyActions[e.keyCode]) { | |||
this.keyActions[e.keyCode](); | |||
@@ -1517,26 +1515,26 @@ class AggregationChart extends BaseChart { | |||
} | |||
renderLegend() { | |||
let s = this.state; | |||
// let s = this.state; | |||
this.statsWrapper.textContent = ''; | |||
// this.statsWrapper.textContent = ''; | |||
this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints); | |||
// this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints); | |||
let xValues = s.labels; | |||
this.legendTotals.map((d, i) => { | |||
if(d) { | |||
let stats = $.create('div', { | |||
className: 'stats', | |||
inside: this.statsWrapper | |||
}); | |||
stats.innerHTML = `<span class="indicator"> | |||
<i style="background: ${this.colors[i]}"></i> | |||
<span class="text-muted">${xValues[i]}:</span> | |||
${d} | |||
</span>`; | |||
} | |||
}); | |||
// let xValues = s.labels; | |||
// this.legendTotals.map((d, i) => { | |||
// if(d) { | |||
// let stats = $.create('div', { | |||
// className: 'stats', | |||
// inside: this.statsWrapper | |||
// }); | |||
// stats.innerHTML = `<span class="indicator"> | |||
// <i style="background: ${this.colors[i]}"></i> | |||
// <span class="text-muted">${xValues[i]}:</span> | |||
// ${d} | |||
// </span>`; | |||
// } | |||
// }); | |||
} | |||
} | |||
@@ -1549,16 +1547,16 @@ class PercentageChart extends AggregationChart { | |||
} | |||
makeChartArea() { | |||
this.chartWrapper.className += ' ' + 'graph-focus-margin'; | |||
this.chartWrapper.style.marginTop = '45px'; | |||
this.container.className += ' ' + 'graph-focus-margin'; | |||
this.container.style.marginTop = '45px'; | |||
this.statsWrapper.className += ' ' + 'graph-focus-margin'; | |||
this.statsWrapper.style.marginBottom = '30px'; | |||
this.statsWrapper.style.paddingTop = '0px'; | |||
// this.statsWrapper.className += ' ' + 'graph-focus-margin'; | |||
// this.statsWrapper.style.marginBottom = '30px'; | |||
// this.statsWrapper.style.paddingTop = '0px'; | |||
this.svg = $.create('div', { | |||
className: 'div', | |||
inside: this.chartWrapper | |||
inside: this.container | |||
}); | |||
this.chart = $.create('div', { | |||
@@ -1593,12 +1591,12 @@ class PercentageChart extends AggregationChart { | |||
bindTooltip() { | |||
let s = this.state; | |||
this.chartWrapper.addEventListener('mousemove', (e) => { | |||
this.container.addEventListener('mousemove', (e) => { | |||
let slice = e.target; | |||
if(slice.classList.contains('progress-bar')) { | |||
let i = slice.getAttribute('data-index'); | |||
let gOff = getOffset(this.chartWrapper), pOff = getOffset(slice); | |||
let gOff = getOffset(this.container), pOff = getOffset(slice); | |||
let x = pOff.left - gOff.left + slice.offsetWidth/2; | |||
let y = pOff.top - gOff.top - 6; | |||
@@ -2107,8 +2105,8 @@ class PieChart extends AggregationChart { | |||
} | |||
bindTooltip() { | |||
this.chartWrapper.addEventListener('mousemove', this.mouseMove); | |||
this.chartWrapper.addEventListener('mouseleave', this.mouseLeave); | |||
this.container.addEventListener('mousemove', this.mouseMove); | |||
this.container.addEventListener('mouseleave', this.mouseLeave); | |||
} | |||
mouseMove(e){ | |||
@@ -2389,6 +2387,7 @@ function getMaxCheckpoint(value, distribution) { | |||
} | |||
const COL_SIZE = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE; | |||
class Heatmap extends BaseChart { | |||
constructor(parent, options) { | |||
super(parent, options); | |||
@@ -2430,7 +2429,7 @@ class Heatmap extends BaseChart { | |||
} | |||
calcWidth() { | |||
this.baseWidth = (this.no_of_cols) * COL_SIZE; | |||
this.baseWidth = (this.no_of_cols + 99) * COL_SIZE; | |||
if(this.discreteDomains) { | |||
this.baseWidth += (COL_SIZE * NO_OF_YEAR_MONTHS); | |||
@@ -2446,12 +2445,6 @@ class Heatmap extends BaseChart { | |||
'data-groups', | |||
`translate(0, 20)` | |||
); | |||
this.container.querySelector('.title').style.display = 'None'; | |||
this.container.querySelector('.sub-title').style.display = 'None'; | |||
this.container.querySelector('.graph-stats-container').style.display = 'None'; | |||
this.chartWrapper.style.marginTop = '0px'; | |||
this.chartWrapper.style.paddingTop = '0px'; | |||
} | |||
calc() { | |||
@@ -2591,7 +2584,7 @@ class Heatmap extends BaseChart { | |||
let month = getMonthName(parseInt(dateParts[1])-1, true); | |||
let gOff = this.chartWrapper.getBoundingClientRect(), pOff = e.target.getBoundingClientRect(); | |||
let gOff = this.container.getBoundingClientRect(), pOff = e.target.getBoundingClientRect(); | |||
let width = parseInt(e.target.getAttribute('width')); | |||
let x = pOff.left - gOff.left + (width+2)/2; | |||
@@ -3070,8 +3063,8 @@ class AxisChart extends BaseChart { | |||
bindTooltip() { | |||
// NOTE: could be in tooltip itself, as it is a given functionality for its parent | |||
this.chartWrapper.addEventListener('mousemove', (e) => { | |||
let o = getOffset(this.chartWrapper); | |||
this.container.addEventListener('mousemove', (e) => { | |||
let o = getOffset(this.container); | |||
let relX = e.pageX - o.left - this.leftMargin; | |||
let relY = e.pageY - o.top - this.translateY; | |||
@@ -3120,21 +3113,21 @@ class AxisChart extends BaseChart { | |||
} | |||
renderLegend() { | |||
let s = this.data; | |||
this.statsWrapper.textContent = ''; | |||
if(s.datasets.length > 1) { | |||
s.datasets.map((d, i) => { | |||
let stats = $.create('div', { | |||
className: 'stats', | |||
inside: this.statsWrapper | |||
}); | |||
stats.innerHTML = `<span class="indicator"> | |||
<i style="background: ${this.colors[i]}"></i> | |||
${d.name} | |||
</span>`; | |||
}); | |||
} | |||
// let s = this.data; | |||
// this.statsWrapper.textContent = ''; | |||
// if(s.datasets.length > 1) { | |||
// s.datasets.map((d, i) => { | |||
// let stats = $.create('div', { | |||
// className: 'stats', | |||
// inside: this.statsWrapper | |||
// }); | |||
// stats.innerHTML = `<span class="indicator"> | |||
// <i style="background: ${this.colors[i]}"></i> | |||
// ${d.name} | |||
// </span>`; | |||
// }); | |||
// } | |||
} | |||
makeOverlay() { | |||
@@ -3280,6 +3273,7 @@ class AxisChart extends BaseChart { | |||
// removeDataPoint(index = 0) {} | |||
} | |||
// import MultiAxisChart from './charts/MultiAxisChart'; | |||
const chartTypes = { | |||
// multiaxis: MultiAxisChart, | |||
percentage: PercentageChart, | |||
@@ -1 +1 @@ | |||
.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px}.chart-container .graph-stats-container:after,.chart-container .graph-stats-container:before{content:"";display:block}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px} | |||
.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px}.chart-container .graph-stats-container:after,.chart-container .graph-stats-container:before{content:"";display:block}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px} |
@@ -1,5 +1,4 @@ | |||
import BaseChart from './BaseChart'; | |||
import { $ } from '../utils/dom'; | |||
export default class AggregationChart extends BaseChart { | |||
constructor(parent, args) { | |||
@@ -48,25 +47,25 @@ export default class AggregationChart extends BaseChart { | |||
} | |||
renderLegend() { | |||
let s = this.state; | |||
// let s = this.state; | |||
this.statsWrapper.textContent = ''; | |||
// this.statsWrapper.textContent = ''; | |||
this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints); | |||
// this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints); | |||
let xValues = s.labels; | |||
this.legendTotals.map((d, i) => { | |||
if(d) { | |||
let stats = $.create('div', { | |||
className: 'stats', | |||
inside: this.statsWrapper | |||
}); | |||
stats.innerHTML = `<span class="indicator"> | |||
<i style="background: ${this.colors[i]}"></i> | |||
<span class="text-muted">${xValues[i]}:</span> | |||
${d} | |||
</span>`; | |||
} | |||
}); | |||
// let xValues = s.labels; | |||
// this.legendTotals.map((d, i) => { | |||
// if(d) { | |||
// let stats = $.create('div', { | |||
// className: 'stats', | |||
// inside: this.statsWrapper | |||
// }); | |||
// stats.innerHTML = `<span class="indicator"> | |||
// <i style="background: ${this.colors[i]}"></i> | |||
// <span class="text-muted">${xValues[i]}:</span> | |||
// ${d} | |||
// </span>`; | |||
// } | |||
// }); | |||
} | |||
} |
@@ -2,7 +2,7 @@ import BaseChart from './BaseChart'; | |||
import { dataPrep, zeroDataPrep, getShortenedLabels } from '../utils/axis-chart-utils'; | |||
import { Y_AXIS_MARGIN } from '../utils/constants'; | |||
import { getComponent } from '../objects/ChartComponents'; | |||
import { $, getOffset, fire } from '../utils/dom'; | |||
import { getOffset, fire } from '../utils/dom'; | |||
import { calcChartIntervals, getIntervalSize, getValueRange, getZeroIndex, scale } from '../utils/intervals'; | |||
import { floatTwo } from '../utils/helpers'; | |||
import { makeOverlay, updateOverlay } from '../utils/draw'; | |||
@@ -345,8 +345,8 @@ export default class AxisChart extends BaseChart { | |||
bindTooltip() { | |||
// NOTE: could be in tooltip itself, as it is a given functionality for its parent | |||
this.chartWrapper.addEventListener('mousemove', (e) => { | |||
let o = getOffset(this.chartWrapper); | |||
this.container.addEventListener('mousemove', (e) => { | |||
let o = getOffset(this.container); | |||
let relX = e.pageX - o.left - this.leftMargin; | |||
let relY = e.pageY - o.top - this.translateY; | |||
@@ -395,21 +395,21 @@ export default class AxisChart extends BaseChart { | |||
} | |||
renderLegend() { | |||
let s = this.data; | |||
this.statsWrapper.textContent = ''; | |||
if(s.datasets.length > 1) { | |||
s.datasets.map((d, i) => { | |||
let stats = $.create('div', { | |||
className: 'stats', | |||
inside: this.statsWrapper | |||
}); | |||
stats.innerHTML = `<span class="indicator"> | |||
<i style="background: ${this.colors[i]}"></i> | |||
${d.name} | |||
</span>`; | |||
}); | |||
} | |||
// let s = this.data; | |||
// this.statsWrapper.textContent = ''; | |||
// if(s.datasets.length > 1) { | |||
// s.datasets.map((d, i) => { | |||
// let stats = $.create('div', { | |||
// className: 'stats', | |||
// inside: this.statsWrapper | |||
// }); | |||
// stats.innerHTML = `<span class="indicator"> | |||
// <i style="background: ${this.colors[i]}"></i> | |||
// ${d.name} | |||
// </span>`; | |||
// }); | |||
// } | |||
} | |||
makeOverlay() { | |||
@@ -100,25 +100,19 @@ export default class BaseChart { | |||
} | |||
makeContainer() { | |||
this.container = $.create('div', { | |||
className: 'chart-container', | |||
innerHTML: `<h6 class="title">${this.title}</h6> | |||
<h6 class="sub-title uppercase">${this.subtitle}</h6> | |||
<div class="frappe-chart graphics"></div> | |||
<div class="graph-stats-container"></div>` | |||
}); | |||
// Chart needs a dedicated parent element | |||
this.parent.innerHTML = ''; | |||
this.parent.appendChild(this.container); | |||
this.container = $.create('div', { | |||
inside: this.parent, | |||
className: 'chart-container' | |||
}); | |||
this.chartWrapper = this.container.querySelector('.frappe-chart'); | |||
this.statsWrapper = this.container.querySelector('.graph-stats-container'); | |||
this.container = this.container; | |||
} | |||
makeTooltip() { | |||
this.tip = new SvgTip({ | |||
parent: this.chartWrapper, | |||
parent: this.container, | |||
colors: this.colors | |||
}); | |||
this.bindTooltip(); | |||
@@ -181,7 +175,7 @@ export default class BaseChart { | |||
elementsToAnimate = elementsToAnimate.concat(c.update(animate)); | |||
}); | |||
if(elementsToAnimate.length > 0) { | |||
runSMILAnimation(this.chartWrapper, this.svg, elementsToAnimate); | |||
runSMILAnimation(this.container, this.svg, elementsToAnimate); | |||
setTimeout(() => { | |||
components.forEach(c => c.make()); | |||
this.updateNav(); | |||
@@ -205,11 +199,11 @@ export default class BaseChart { | |||
makeChartArea() { | |||
if(this.svg) { | |||
this.chartWrapper.removeChild(this.svg); | |||
this.container.removeChild(this.svg); | |||
} | |||
this.svg = makeSVGContainer( | |||
this.chartWrapper, | |||
'chart', | |||
this.container, | |||
'frappe-chart chart', | |||
this.baseWidth, | |||
this.baseHeight | |||
); | |||
@@ -246,7 +240,7 @@ export default class BaseChart { | |||
}; | |||
document.addEventListener('keydown', (e) => { | |||
if(isElementInViewport(this.chartWrapper)) { | |||
if(isElementInViewport(this.container)) { | |||
e = e || window.event; | |||
if(this.keyActions[e.keyCode]) { | |||
this.keyActions[e.keyCode](); | |||
@@ -7,7 +7,6 @@ import { HEATMAP_DISTRIBUTION_SIZE, HEATMAP_SQUARE_SIZE, | |||
HEATMAP_GUTTER_SIZE } from '../utils/constants'; | |||
const COL_SIZE = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE; | |||
const EXTRA_COLS = 3; | |||
export default class Heatmap extends BaseChart { | |||
constructor(parent, options) { | |||
@@ -50,7 +49,7 @@ export default class Heatmap extends BaseChart { | |||
} | |||
calcWidth() { | |||
this.baseWidth = (this.no_of_cols) * COL_SIZE; | |||
this.baseWidth = (this.no_of_cols + 99) * COL_SIZE; | |||
if(this.discreteDomains) { | |||
this.baseWidth += (COL_SIZE * NO_OF_YEAR_MONTHS); | |||
@@ -66,12 +65,6 @@ export default class Heatmap extends BaseChart { | |||
'data-groups', | |||
`translate(0, 20)` | |||
); | |||
this.container.querySelector('.title').style.display = 'None'; | |||
this.container.querySelector('.sub-title').style.display = 'None'; | |||
this.container.querySelector('.graph-stats-container').style.display = 'None'; | |||
this.chartWrapper.style.marginTop = '0px'; | |||
this.chartWrapper.style.paddingTop = '0px'; | |||
} | |||
calc() { | |||
@@ -212,7 +205,7 @@ export default class Heatmap extends BaseChart { | |||
let month = getMonthName(parseInt(dateParts[1])-1, true); | |||
let gOff = this.chartWrapper.getBoundingClientRect(), pOff = e.target.getBoundingClientRect(); | |||
let gOff = this.container.getBoundingClientRect(), pOff = e.target.getBoundingClientRect(); | |||
let width = parseInt(e.target.getAttribute('width')); | |||
let x = pOff.left - gOff.left + (width+2)/2; | |||
@@ -10,16 +10,16 @@ export default class PercentageChart extends AggregationChart { | |||
} | |||
makeChartArea() { | |||
this.chartWrapper.className += ' ' + 'graph-focus-margin'; | |||
this.chartWrapper.style.marginTop = '45px'; | |||
this.container.className += ' ' + 'graph-focus-margin'; | |||
this.container.style.marginTop = '45px'; | |||
this.statsWrapper.className += ' ' + 'graph-focus-margin'; | |||
this.statsWrapper.style.marginBottom = '30px'; | |||
this.statsWrapper.style.paddingTop = '0px'; | |||
// this.statsWrapper.className += ' ' + 'graph-focus-margin'; | |||
// this.statsWrapper.style.marginBottom = '30px'; | |||
// this.statsWrapper.style.paddingTop = '0px'; | |||
this.svg = $.create('div', { | |||
className: 'div', | |||
inside: this.chartWrapper | |||
inside: this.container | |||
}); | |||
this.chart = $.create('div', { | |||
@@ -54,12 +54,12 @@ export default class PercentageChart extends AggregationChart { | |||
bindTooltip() { | |||
let s = this.state; | |||
this.chartWrapper.addEventListener('mousemove', (e) => { | |||
this.container.addEventListener('mousemove', (e) => { | |||
let slice = e.target; | |||
if(slice.classList.contains('progress-bar')) { | |||
let i = slice.getAttribute('data-index'); | |||
let gOff = getOffset(this.chartWrapper), pOff = getOffset(slice); | |||
let gOff = getOffset(this.container), pOff = getOffset(slice); | |||
let x = pOff.left - gOff.left + slice.offsetWidth/2; | |||
let y = pOff.top - gOff.top - 6; | |||
@@ -142,8 +142,8 @@ export default class PieChart extends AggregationChart { | |||
} | |||
bindTooltip() { | |||
this.chartWrapper.addEventListener('mousemove', this.mouseMove); | |||
this.chartWrapper.addEventListener('mouseleave', this.mouseLeave); | |||
this.container.addEventListener('mousemove', this.mouseMove); | |||
this.container.addEventListener('mouseleave', this.mouseLeave); | |||
} | |||
mouseMove(e){ | |||
@@ -14,7 +14,7 @@ export const DATA_COLOR_DIVISIONS = { | |||
pie: 'labels', | |||
percentage: 'labels', | |||
heatmap: HEATMAP_DISTRIBUTION_SIZE | |||
} | |||
}; | |||
export const VERT_SPACE_OUTSIDE_BASE_CHART = 50; | |||
export const TRANSLATE_Y_BASE_CHART = 20; | |||
@@ -57,4 +57,4 @@ export const DEFAULT_COLORS = { | |||
pie: DEFAULT_CHART_COLORS, | |||
percentage: DEFAULT_CHART_COLORS, | |||
heatmap: HEATMAP_COLORS | |||
} | |||
}; |
@@ -80,11 +80,6 @@ | |||
stroke-width: 2px; | |||
} | |||
} | |||
.multiaxis-chart { | |||
.line-horizontal, .y-axis-guide { | |||
stroke-width: 2px; | |||
} | |||
} | |||
.dataset-path { | |||
stroke-width: 2px; | |||
} | |||