@@ -1,24 +1,11 @@ | |||||
import '../scss/charts.scss'; | import '../scss/charts.scss'; | ||||
import MultiAxisChart from './charts/MultiAxisChart'; | |||||
// import MultiAxisChart from './charts/MultiAxisChart'; | |||||
import PercentageChart from './charts/PercentageChart'; | import PercentageChart from './charts/PercentageChart'; | ||||
import PieChart from './charts/PieChart'; | import PieChart from './charts/PieChart'; | ||||
import Heatmap from './charts/Heatmap'; | import Heatmap from './charts/Heatmap'; | ||||
import AxisChart from './charts/AxisChart'; | import AxisChart from './charts/AxisChart'; | ||||
// if (ENV !== 'production') { | |||||
// // Enable LiveReload | |||||
// document.write( | |||||
// '<script src="http://' + (location.host || 'localhost').split(':')[0] + | |||||
// ':35729/livereload.js?snipver=1"></' + 'script>' | |||||
// ); | |||||
// } | |||||
// If type is bar | |||||
const chartTypes = { | const chartTypes = { | ||||
// multiaxis: MultiAxisChart, | // multiaxis: MultiAxisChart, | ||||
percentage: PercentageChart, | percentage: PercentageChart, | ||||
@@ -33,8 +33,8 @@ export default class AxisChart extends BaseChart { | |||||
setMargins() { | setMargins() { | ||||
super.setMargins(); | super.setMargins(); | ||||
this.translateXLeft = Y_AXIS_MARGIN; | |||||
this.translateXRight = Y_AXIS_MARGIN; | |||||
this.leftMargin = Y_AXIS_MARGIN; | |||||
this.rightMargin = Y_AXIS_MARGIN; | |||||
} | } | ||||
prepareData(data=this.data) { | prepareData(data=this.data) { | ||||
@@ -315,7 +315,7 @@ export default class AxisChart extends BaseChart { | |||||
// 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.chartWrapper.addEventListener('mousemove', (e) => { | ||||
let o = getOffset(this.chartWrapper); | let o = getOffset(this.chartWrapper); | ||||
let relX = e.pageX - o.left - this.translateXLeft; | |||||
let relX = e.pageX - o.left - this.leftMargin; | |||||
let relY = e.pageY - o.top - this.translateY; | let relY = e.pageY - o.top - this.translateY; | ||||
if(relY < this.height + this.translateY * 2) { | if(relY < this.height + this.translateY * 2) { | ||||
@@ -341,7 +341,7 @@ export default class AxisChart extends BaseChart { | |||||
let xVal = s.xAxis.positions[i]; | let xVal = s.xAxis.positions[i]; | ||||
// let delta = i === 0 ? s.unitWidth : xVal - s.xAxis.positions[i-1]; | // let delta = i === 0 ? s.unitWidth : xVal - s.xAxis.positions[i-1]; | ||||
if(relX > xVal - s.unitWidth/2) { | if(relX > xVal - s.unitWidth/2) { | ||||
let x = xVal + this.translateXLeft; | |||||
let x = xVal + this.leftMargin; | |||||
let y = s.yExtremes[i] + this.translateY; | let y = s.yExtremes[i] + this.translateY; | ||||
let values = this.data.datasets.map((set, j) => { | let values = this.data.datasets.map((set, j) => { | ||||
@@ -2,6 +2,8 @@ import SvgTip from '../objects/SvgTip'; | |||||
import { $, isElementInViewport, getElementContentWidth } from '../utils/dom'; | import { $, isElementInViewport, getElementContentWidth } from '../utils/dom'; | ||||
import { makeSVGContainer, makeSVGDefs, makeSVGGroup } from '../utils/draw'; | import { makeSVGContainer, makeSVGDefs, makeSVGGroup } from '../utils/draw'; | ||||
import { getStringWidth } from '../utils/helpers'; | import { getStringWidth } from '../utils/helpers'; | ||||
import { VERT_SPACE_OUTSIDE_BASE_CHART, TRANSLATE_Y_BASE_CHART, LEFT_MARGIN_BASE_CHART, | |||||
RIGHT_MARGIN_BASE_CHART, INIT_CHART_UPDATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT } from '../utils/constants'; | |||||
import { getColor, DEFAULT_COLORS } from '../utils/colors'; | import { getColor, DEFAULT_COLORS } from '../utils/colors'; | ||||
import { getDifferentChart } from '../config'; | import { getDifferentChart } from '../config'; | ||||
import { runSMILAnimation } from '../utils/animation'; | import { runSMILAnimation } from '../utils/animation'; | ||||
@@ -77,15 +79,14 @@ export default class BaseChart { | |||||
} | } | ||||
setMargins() { | setMargins() { | ||||
// TODO: think for all | |||||
let height = this.argHeight; | let height = this.argHeight; | ||||
this.baseHeight = height; | this.baseHeight = height; | ||||
this.height = height - 40; // change | |||||
this.translateY = 20; | |||||
this.height = height - VERT_SPACE_OUTSIDE_BASE_CHART; | |||||
this.translateY = TRANSLATE_Y_BASE_CHART; | |||||
// Horizontal margins | // Horizontal margins | ||||
this.translateXLeft = 60; | |||||
this.translateXRight = 40; | |||||
this.leftMargin = LEFT_MARGIN_BASE_CHART; | |||||
this.rightMargin = RIGHT_MARGIN_BASE_CHART; | |||||
} | } | ||||
validate(){ | validate(){ | ||||
@@ -154,7 +155,7 @@ export default class BaseChart { | |||||
// TODO: remove timeout and decrease post animate time in chart component | // TODO: remove timeout and decrease post animate time in chart component | ||||
if(init) { | if(init) { | ||||
this.data = this.realData; | this.data = this.realData; | ||||
setTimeout(() => {this.update();}, 400); | |||||
setTimeout(() => {this.update();}, INIT_CHART_UPDATE_TIMEOUT); | |||||
} | } | ||||
this.renderLegend(); | this.renderLegend(); | ||||
@@ -171,7 +172,7 @@ export default class BaseChart { | |||||
// } | // } | ||||
// }); | // }); | ||||
this.baseWidth = getElementContentWidth(this.parent) - outerAnnotationsWidth; | this.baseWidth = getElementContentWidth(this.parent) - outerAnnotationsWidth; | ||||
this.width = this.baseWidth - (this.translateXLeft + this.translateXRight); | |||||
this.width = this.baseWidth - (this.leftMargin + this.rightMargin); | |||||
} | } | ||||
update(data=this.data) { | update(data=this.data) { | ||||
@@ -206,7 +207,7 @@ export default class BaseChart { | |||||
setTimeout(() => { | setTimeout(() => { | ||||
components.forEach(c => c.make()); | components.forEach(c => c.make()); | ||||
this.updateNav(); | this.updateNav(); | ||||
}, 400); | |||||
}, CHART_POST_ANIMATE_TIMEOUT); | |||||
} else { | } else { | ||||
this.updateNav(); | this.updateNav(); | ||||
} | } | ||||
@@ -246,7 +247,7 @@ export default class BaseChart { | |||||
this.drawArea = makeSVGGroup( | this.drawArea = makeSVGGroup( | ||||
this.svg, | this.svg, | ||||
this.type + '-chart', | this.type + '-chart', | ||||
`translate(${this.translateXLeft}, ${this.translateY})` | |||||
`translate(${this.leftMargin}, ${this.translateY})` | |||||
); | ); | ||||
} | } | ||||
@@ -17,8 +17,8 @@ export default class MultiAxisChart extends AxisChart { | |||||
setMargins() { | setMargins() { | ||||
super.setMargins(); | super.setMargins(); | ||||
let noOfLeftAxes = this.data.datasets.filter(d => d.axisPosition === 'left').length; | let noOfLeftAxes = this.data.datasets.filter(d => d.axisPosition === 'left').length; | ||||
this.translateXLeft = (noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN; | |||||
this.translateXRight = (this.data.datasets.length - noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN; | |||||
this.leftMargin = (noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN; | |||||
this.rightMargin = (this.data.datasets.length - noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN; | |||||
} | } | ||||
prepareYAxis() { } | prepareYAxis() { } | ||||
@@ -1,5 +1,12 @@ | |||||
export const VERT_SPACE_OUTSIDE_BASE_CHART = 40; | |||||
export const TRANSLATE_Y_BASE_CHART = 20; | |||||
export const LEFT_MARGIN_BASE_CHART = 60; | |||||
export const RIGHT_MARGIN_BASE_CHART = 40; | |||||
export const Y_AXIS_MARGIN = 60; | export const Y_AXIS_MARGIN = 60; | ||||
export const INIT_CHART_UPDATE_TIMEOUT = 400; | |||||
export const CHART_POST_ANIMATE_TIMEOUT = 400; | |||||
export const DEFAULT_AXIS_CHART_TYPE = 'line'; | export const DEFAULT_AXIS_CHART_TYPE = 'line'; | ||||
export const AXIS_DATASET_CHART_TYPES = ['line', 'bar']; | export const AXIS_DATASET_CHART_TYPES = ['line', 'bar']; | ||||
@@ -7,5 +14,4 @@ export const BAR_CHART_SPACE_RATIO = 0.5; | |||||
export const MIN_BAR_PERCENT_HEIGHT = 0.01; | export const MIN_BAR_PERCENT_HEIGHT = 0.01; | ||||
export const LINE_CHART_DOT_SIZE = 4; | export const LINE_CHART_DOT_SIZE = 4; | ||||
export const DOT_OVERLAY_SIZE_INCR = 4; | export const DOT_OVERLAY_SIZE_INCR = 4; |
@@ -3,22 +3,6 @@ import { getStringWidth } from './helpers'; | |||||
import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from './animate'; | import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from './animate'; | ||||
import { DOT_OVERLAY_SIZE_INCR } from './constants'; | import { DOT_OVERLAY_SIZE_INCR } from './constants'; | ||||
/* | |||||
<filter id="glow" x="-10%" y="-10%" width="120%" height="120%"> | |||||
<feGaussianBlur stdDeviation="0.5 0.5" result="glow"></feGaussianBlur> | |||||
<feMerge> | |||||
<feMergeNode in="glow"></feMergeNode> | |||||
<feMergeNode in="glow"></feMergeNode> | |||||
<feMergeNode in="glow"></feMergeNode> | |||||
</feMerge> | |||||
</filter> | |||||
filter: url(#glow); | |||||
fill: #fff; | |||||
*/ | |||||
const AXIS_TICK_LENGTH = 6; | const AXIS_TICK_LENGTH = 6; | ||||
const LABEL_MARGIN = 4; | const LABEL_MARGIN = 4; | ||||
export const FONT_SIZE = 10; | export const FONT_SIZE = 10; | ||||