jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

remove chartWrapper, title, legend HTML

Browse Source
This commit is contained in:
Prateeksha Singh 2018-03-21 19:07:23 +05:30
parent 8bc4d3f94c
commit 48b2d8122c
16 changed files with 128 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -267,6 +267,10 @@ const DEFAULT_COLORS = {
heatmap: HEATMAP_COLORS heatmap: HEATMAP_COLORS
}; };
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
function floatTwo(d) { function floatTwo(d) {
return parseFloat(d.toFixed(2)); return parseFloat(d.toFixed(2));
} }
@ -1263,25 +1267,19 @@ class BaseChart {
} }
makeContainer() { makeContainer() {
this.parent.innerHTML = '';
this.container = $.create('div', { this.container = $.create('div', {
className: 'chart-container', inside: this.parent,
innerHTML: `<h6 class="title">${this.title}</h6> className: 'chart-container'
<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.container = this.container;
this.parent.innerHTML = '';
this.parent.appendChild(this.container);
this.chartWrapper = this.container.querySelector('.frappe-chart');
this.statsWrapper = this.container.querySelector('.graph-stats-container');
} }
makeTooltip() { makeTooltip() {
this.tip = new SvgTip({ this.tip = new SvgTip({
parent: this.chartWrapper, parent: this.container,
colors: this.colors colors: this.colors
}); });
this.bindTooltip(); this.bindTooltip();
@ -1344,7 +1342,7 @@ class BaseChart {
elementsToAnimate = elementsToAnimate.concat(c.update(animate)); elementsToAnimate = elementsToAnimate.concat(c.update(animate));
}); });
if(elementsToAnimate.length > 0) { if(elementsToAnimate.length > 0) {
runSMILAnimation(this.chartWrapper, this.svg, elementsToAnimate); runSMILAnimation(this.container, this.svg, elementsToAnimate);
setTimeout(() => { setTimeout(() => {
components.forEach(c => c.make()); components.forEach(c => c.make());
this.updateNav(); this.updateNav();
@ -1368,11 +1366,11 @@ class BaseChart {
makeChartArea() { makeChartArea() {
if(this.svg) { if(this.svg) {
this.chartWrapper.removeChild(this.svg); this.container.removeChild(this.svg);
} }
this.svg = makeSVGContainer( this.svg = makeSVGContainer(
this.chartWrapper, this.container,
'chart', 'frappe-chart chart',
this.baseWidth, this.baseWidth,
this.baseHeight this.baseHeight
); );
@ -1409,7 +1407,7 @@ class BaseChart {
}; };
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if(isElementInViewport(this.chartWrapper)) { if(isElementInViewport(this.container)) {
e = e || window.event; e = e || window.event;
if(this.keyActions[e.keyCode]) { if(this.keyActions[e.keyCode]) {
this.keyActions[e.keyCode](); this.keyActions[e.keyCode]();
@ -1517,26 +1515,26 @@ class AggregationChart extends BaseChart {
} }
renderLegend() { 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; // let xValues = s.labels;
this.legendTotals.map((d, i) => { // this.legendTotals.map((d, i) => {
if(d) { // if(d) {
let stats = $.create('div', { // let stats = $.create('div', {
className: 'stats', // className: 'stats',
inside: this.statsWrapper // inside: this.statsWrapper
}); // });
stats.innerHTML = `<span class="indicator"> // stats.innerHTML = `<span class="indicator">
<i style="background: ${this.colors[i]}"></i> // <i style="background: ${this.colors[i]}"></i>
<span class="text-muted">${xValues[i]}:</span> // <span class="text-muted">${xValues[i]}:</span>
${d} // ${d}
</span>`; // </span>`;
} // }
}); // });
} }
} }
@ -1549,16 +1547,16 @@ class PercentageChart extends AggregationChart {
} }
makeChartArea() { makeChartArea() {
this.chartWrapper.className += ' ' + 'graph-focus-margin'; this.container.className += ' ' + 'graph-focus-margin';
this.chartWrapper.style.marginTop = '45px'; this.container.style.marginTop = '45px';
this.statsWrapper.className += ' ' + 'graph-focus-margin'; // this.statsWrapper.className += ' ' + 'graph-focus-margin';
this.statsWrapper.style.marginBottom = '30px'; // this.statsWrapper.style.marginBottom = '30px';
this.statsWrapper.style.paddingTop = '0px'; // this.statsWrapper.style.paddingTop = '0px';
this.svg = $.create('div', { this.svg = $.create('div', {
className: 'div', className: 'div',
inside: this.chartWrapper inside: this.container
}); });
this.chart = $.create('div', { this.chart = $.create('div', {
@ -1593,12 +1591,12 @@ class PercentageChart extends AggregationChart {
bindTooltip() { bindTooltip() {
let s = this.state; let s = this.state;
this.chartWrapper.addEventListener('mousemove', (e) => { this.container.addEventListener('mousemove', (e) => {
let slice = e.target; let slice = e.target;
if(slice.classList.contains('progress-bar')) { if(slice.classList.contains('progress-bar')) {
let i = slice.getAttribute('data-index'); 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 x = pOff.left - gOff.left + slice.offsetWidth/2;
let y = pOff.top - gOff.top - 6; let y = pOff.top - gOff.top - 6;
@ -2107,8 +2105,8 @@ class PieChart extends AggregationChart {
} }
bindTooltip() { bindTooltip() {
this.chartWrapper.addEventListener('mousemove', this.mouseMove); this.container.addEventListener('mousemove', this.mouseMove);
this.chartWrapper.addEventListener('mouseleave', this.mouseLeave); this.container.addEventListener('mouseleave', this.mouseLeave);
} }
mouseMove(e){ mouseMove(e){
@ -2389,6 +2387,7 @@ function getMaxCheckpoint(value, distribution) {
} }
const COL_SIZE = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE; const COL_SIZE = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE;
class Heatmap extends BaseChart { class Heatmap extends BaseChart {
constructor(parent, options) { constructor(parent, options) {
super(parent, options); super(parent, options);
@ -2430,7 +2429,7 @@ class Heatmap extends BaseChart {
} }
calcWidth() { calcWidth() {
this.baseWidth = (this.no_of_cols) * COL_SIZE; this.baseWidth = (this.no_of_cols + 99) * COL_SIZE;
if(this.discreteDomains) { if(this.discreteDomains) {
this.baseWidth += (COL_SIZE * NO_OF_YEAR_MONTHS); this.baseWidth += (COL_SIZE * NO_OF_YEAR_MONTHS);
@ -2446,12 +2445,6 @@ class Heatmap extends BaseChart {
'data-groups', 'data-groups',
`translate(0, 20)` `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() { calc() {
@ -2591,7 +2584,7 @@ class Heatmap extends BaseChart {
let month = getMonthName(parseInt(dateParts[1])-1, true); 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 width = parseInt(e.target.getAttribute('width'));
let x = pOff.left - gOff.left + (width+2)/2; let x = pOff.left - gOff.left + (width+2)/2;
@ -3070,8 +3063,8 @@ class AxisChart extends BaseChart {
bindTooltip() { bindTooltip() {
// NOTE: could be in tooltip itself, as it is a given functionality for its parent // NOTE: could be in tooltip itself, as it is a given functionality for its parent
this.chartWrapper.addEventListener('mousemove', (e) => { this.container.addEventListener('mousemove', (e) => {
let o = getOffset(this.chartWrapper); let o = getOffset(this.container);
let relX = e.pageX - o.left - this.leftMargin; let relX = e.pageX - o.left - this.leftMargin;
let relY = e.pageY - o.top - this.translateY; let relY = e.pageY - o.top - this.translateY;
@ -3120,21 +3113,21 @@ class AxisChart extends BaseChart {
} }
renderLegend() { renderLegend() {
let s = this.data; // let s = this.data;
this.statsWrapper.textContent = ''; // this.statsWrapper.textContent = '';
if(s.datasets.length > 1) { // if(s.datasets.length > 1) {
s.datasets.map((d, i) => { // s.datasets.map((d, i) => {
let stats = $.create('div', { // let stats = $.create('div', {
className: 'stats', // className: 'stats',
inside: this.statsWrapper // inside: this.statsWrapper
}); // });
stats.innerHTML = `<span class="indicator"> // stats.innerHTML = `<span class="indicator">
<i style="background: ${this.colors[i]}"></i> // <i style="background: ${this.colors[i]}"></i>
${d.name} // ${d.name}
</span>`; // </span>`;
}); // });
} // }
} }
makeOverlay() { makeOverlay() {
@ -3280,6 +3273,7 @@ class AxisChart extends BaseChart {
// removeDataPoint(index = 0) {} // removeDataPoint(index = 0) {}
} }
// import MultiAxisChart from './charts/MultiAxisChart';
const chartTypes = { const chartTypes = {
// multiaxis: MultiAxisChart, // multiaxis: MultiAxisChart,
percentage: PercentageChart, percentage: PercentageChart,

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.css vendored
View File

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

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

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

@ -1,5 +1,4 @@
import BaseChart from './BaseChart'; import BaseChart from './BaseChart';
import { $ } from '../utils/dom';
export default class AggregationChart extends BaseChart { export default class AggregationChart extends BaseChart {
constructor(parent, args) { constructor(parent, args) {
@ -48,25 +47,25 @@ export default class AggregationChart extends BaseChart {
} }
renderLegend() { 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; // let xValues = s.labels;
this.legendTotals.map((d, i) => { // this.legendTotals.map((d, i) => {
if(d) { // if(d) {
let stats = $.create('div', { // let stats = $.create('div', {
className: 'stats', // className: 'stats',
inside: this.statsWrapper // inside: this.statsWrapper
}); // });
stats.innerHTML = `<span class="indicator"> // stats.innerHTML = `<span class="indicator">
<i style="background: ${this.colors[i]}"></i> // <i style="background: ${this.colors[i]}"></i>
<span class="text-muted">${xValues[i]}:</span> // <span class="text-muted">${xValues[i]}:</span>
${d} // ${d}
</span>`; // </span>`;
} // }
}); // });
} }
} }

34
src/js/charts/AxisChart.js
View File

@ -2,7 +2,7 @@ import BaseChart from './BaseChart';
import { dataPrep, zeroDataPrep, getShortenedLabels } from '../utils/axis-chart-utils'; import { dataPrep, zeroDataPrep, getShortenedLabels } from '../utils/axis-chart-utils';
import { Y_AXIS_MARGIN } from '../utils/constants'; import { Y_AXIS_MARGIN } from '../utils/constants';
import { getComponent } from '../objects/ChartComponents'; 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 { calcChartIntervals, getIntervalSize, getValueRange, getZeroIndex, scale } from '../utils/intervals';
import { floatTwo } from '../utils/helpers'; import { floatTwo } from '../utils/helpers';
import { makeOverlay, updateOverlay } from '../utils/draw'; import { makeOverlay, updateOverlay } from '../utils/draw';
@ -345,8 +345,8 @@ export default class AxisChart extends BaseChart {
bindTooltip() { bindTooltip() {
// NOTE: could be in tooltip itself, as it is a given functionality for its parent // NOTE: could be in tooltip itself, as it is a given functionality for its parent
this.chartWrapper.addEventListener('mousemove', (e) => { this.container.addEventListener('mousemove', (e) => {
let o = getOffset(this.chartWrapper); let o = getOffset(this.container);
let relX = e.pageX - o.left - this.leftMargin; let relX = e.pageX - o.left - this.leftMargin;
let relY = e.pageY - o.top - this.translateY; let relY = e.pageY - o.top - this.translateY;
@ -395,21 +395,21 @@ export default class AxisChart extends BaseChart {
} }
renderLegend() { renderLegend() {
let s = this.data; // let s = this.data;
this.statsWrapper.textContent = ''; // this.statsWrapper.textContent = '';
if(s.datasets.length > 1) { // if(s.datasets.length > 1) {
s.datasets.map((d, i) => { // s.datasets.map((d, i) => {
let stats = $.create('div', { // let stats = $.create('div', {
className: 'stats', // className: 'stats',
inside: this.statsWrapper // inside: this.statsWrapper
}); // });
stats.innerHTML = `<span class="indicator"> // stats.innerHTML = `<span class="indicator">
<i style="background: ${this.colors[i]}"></i> // <i style="background: ${this.colors[i]}"></i>
${d.name} // ${d.name}
</span>`; // </span>`;
}); // });
} // }
} }
makeOverlay() { makeOverlay() {

28
src/js/charts/BaseChart.js
View File

@ -100,25 +100,19 @@ export default class BaseChart {
} }
makeContainer() { makeContainer() {
this.parent.innerHTML = '';
this.container = $.create('div', { this.container = $.create('div', {
className: 'chart-container', inside: this.parent,
innerHTML: `<h6 class="title">${this.title}</h6> className: 'chart-container'
<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.container = this.container;
this.parent.innerHTML = '';
this.parent.appendChild(this.container);
this.chartWrapper = this.container.querySelector('.frappe-chart');
this.statsWrapper = this.container.querySelector('.graph-stats-container');
} }
makeTooltip() { makeTooltip() {
this.tip = new SvgTip({ this.tip = new SvgTip({
parent: this.chartWrapper, parent: this.container,
colors: this.colors colors: this.colors
}); });
this.bindTooltip(); this.bindTooltip();
@ -181,7 +175,7 @@ export default class BaseChart {
elementsToAnimate = elementsToAnimate.concat(c.update(animate)); elementsToAnimate = elementsToAnimate.concat(c.update(animate));
}); });
if(elementsToAnimate.length > 0) { if(elementsToAnimate.length > 0) {
runSMILAnimation(this.chartWrapper, this.svg, elementsToAnimate); runSMILAnimation(this.container, this.svg, elementsToAnimate);
setTimeout(() => { setTimeout(() => {
components.forEach(c => c.make()); components.forEach(c => c.make());
this.updateNav(); this.updateNav();
@ -205,11 +199,11 @@ export default class BaseChart {
makeChartArea() { makeChartArea() {
if(this.svg) { if(this.svg) {
this.chartWrapper.removeChild(this.svg); this.container.removeChild(this.svg);
} }
this.svg = makeSVGContainer( this.svg = makeSVGContainer(
this.chartWrapper, this.container,
'chart', 'frappe-chart chart',
this.baseWidth, this.baseWidth,
this.baseHeight this.baseHeight
); );
@ -246,7 +240,7 @@ export default class BaseChart {
}; };
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if(isElementInViewport(this.chartWrapper)) { if(isElementInViewport(this.container)) {
e = e || window.event; e = e || window.event;
if(this.keyActions[e.keyCode]) { if(this.keyActions[e.keyCode]) {
this.keyActions[e.keyCode](); this.keyActions[e.keyCode]();

11
src/js/charts/Heatmap.js
View File

@ -7,7 +7,6 @@ import { HEATMAP_DISTRIBUTION_SIZE, HEATMAP_SQUARE_SIZE,
HEATMAP_GUTTER_SIZE } from '../utils/constants'; HEATMAP_GUTTER_SIZE } from '../utils/constants';
const COL_SIZE = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE; const COL_SIZE = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE;
const EXTRA_COLS = 3;
export default class Heatmap extends BaseChart { export default class Heatmap extends BaseChart {
constructor(parent, options) { constructor(parent, options) {
@ -50,7 +49,7 @@ export default class Heatmap extends BaseChart {
} }
calcWidth() { calcWidth() {
this.baseWidth = (this.no_of_cols) * COL_SIZE; this.baseWidth = (this.no_of_cols + 99) * COL_SIZE;
if(this.discreteDomains) { if(this.discreteDomains) {
this.baseWidth += (COL_SIZE * NO_OF_YEAR_MONTHS); this.baseWidth += (COL_SIZE * NO_OF_YEAR_MONTHS);
@ -66,12 +65,6 @@ export default class Heatmap extends BaseChart {
'data-groups', 'data-groups',
`translate(0, 20)` `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() { calc() {
@ -212,7 +205,7 @@ export default class Heatmap extends BaseChart {
let month = getMonthName(parseInt(dateParts[1])-1, true); 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 width = parseInt(e.target.getAttribute('width'));
let x = pOff.left - gOff.left + (width+2)/2; let x = pOff.left - gOff.left + (width+2)/2;

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

@ -10,16 +10,16 @@ export default class PercentageChart extends AggregationChart {
} }
makeChartArea() { makeChartArea() {
this.chartWrapper.className += ' ' + 'graph-focus-margin'; this.container.className += ' ' + 'graph-focus-margin';
this.chartWrapper.style.marginTop = '45px'; this.container.style.marginTop = '45px';
this.statsWrapper.className += ' ' + 'graph-focus-margin'; // this.statsWrapper.className += ' ' + 'graph-focus-margin';
this.statsWrapper.style.marginBottom = '30px'; // this.statsWrapper.style.marginBottom = '30px';
this.statsWrapper.style.paddingTop = '0px'; // this.statsWrapper.style.paddingTop = '0px';
this.svg = $.create('div', { this.svg = $.create('div', {
className: 'div', className: 'div',
inside: this.chartWrapper inside: this.container
}); });
this.chart = $.create('div', { this.chart = $.create('div', {
@ -54,12 +54,12 @@ export default class PercentageChart extends AggregationChart {
bindTooltip() { bindTooltip() {
let s = this.state; let s = this.state;
this.chartWrapper.addEventListener('mousemove', (e) => { this.container.addEventListener('mousemove', (e) => {
let slice = e.target; let slice = e.target;
if(slice.classList.contains('progress-bar')) { if(slice.classList.contains('progress-bar')) {
let i = slice.getAttribute('data-index'); 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 x = pOff.left - gOff.left + slice.offsetWidth/2;
let y = pOff.top - gOff.top - 6; let y = pOff.top - gOff.top - 6;

4
src/js/charts/PieChart.js
View File

@ -142,8 +142,8 @@ export default class PieChart extends AggregationChart {
} }
bindTooltip() { bindTooltip() {
this.chartWrapper.addEventListener('mousemove', this.mouseMove); this.container.addEventListener('mousemove', this.mouseMove);
this.chartWrapper.addEventListener('mouseleave', this.mouseLeave); this.container.addEventListener('mouseleave', this.mouseLeave);
} }
mouseMove(e){ mouseMove(e){

4
src/js/utils/constants.js
View File

@ -14,7 +14,7 @@ export const DATA_COLOR_DIVISIONS = {
pie: 'labels', pie: 'labels',
percentage: 'labels', percentage: 'labels',
heatmap: HEATMAP_DISTRIBUTION_SIZE heatmap: HEATMAP_DISTRIBUTION_SIZE
} };
export const VERT_SPACE_OUTSIDE_BASE_CHART = 50; export const VERT_SPACE_OUTSIDE_BASE_CHART = 50;
export const TRANSLATE_Y_BASE_CHART = 20; export const TRANSLATE_Y_BASE_CHART = 20;
@ -57,4 +57,4 @@ export const DEFAULT_COLORS = {
pie: DEFAULT_CHART_COLORS, pie: DEFAULT_CHART_COLORS,
percentage: DEFAULT_CHART_COLORS, percentage: DEFAULT_CHART_COLORS,
heatmap: HEATMAP_COLORS heatmap: HEATMAP_COLORS
} };

5
src/scss/charts.scss
View File

@ -80,11 +80,6 @@
stroke-width: 2px; stroke-width: 2px;
} }
} }
.multiaxis-chart {
.line-horizontal, .y-axis-guide {
stroke-width: 2px;
}
}
.dataset-path { .dataset-path {
stroke-width: 2px; stroke-width: 2px;
} }