Skip to content

Commit

Permalink
cropped yaxis fixed in multiple yaxis
Browse files Browse the repository at this point in the history
  • Loading branch information
@junedchhipa
junedchhipa committed Sep 14, 2018
1 parent 2960533 commit 8817230
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 131 deletions.
4 changes: 1 addition & 3 deletions samples/heatmap/multiple.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,7 @@
dataLabels: {
enabled: false
},
colors: ["#F3B415", "#F27036", "#663F59", "#6A6E94", "#4E88B4", "#00A7C6", "#18D8D8", '#A9D794',
'#46AF78'
],
colors: ["#F3B415", "#F27036", "#663F59", "#6A6E94", "#4E88B4", "#00A7C6", "#18D8D8", '#A9D794','#46AF78'],
series: [{
name: 'Metric1',
data: generateData(20, {
Expand Down
24 changes: 4 additions & 20 deletions samples/line/basic-line.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,26 +42,10 @@
stroke: {
curve: 'straight'
},
chartOptions: {
xaxis: {
categories: ['In', 'Out']
},
yaxis: [{
},{
labels: {show: false}
}]
},

series: [
{
name: 'Summer',
data: [27,40]
},
{
name: 'Winter',
data: [21,0]
}
],
series: [{
name: "Desktops",
data: [30, 41, 35, 51, 49, 62, 69, 91, 126]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
Expand Down
54 changes: 16 additions & 38 deletions samples/mixed/multiple-yaxes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,38 +72,33 @@
},
axisBorder: {
show: true,
color: '#3f51b5'
color: '#008FFB'
},
labels: {
style: {
color: '#3f51b5',
},
formatter: function(val) {
return val + "%"
color: '#008FFB',
}
},
title: {
text: "Income (thousand crores)"
text: "Income (thousand crores)",
},
tooltip: {
enabled: true
}
},

{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#FFA600'
color: '#00E396'
},
labels: {
style: {
color: '#FFA600',
},
formatter: function(val) {
return val + "**"
color: '#00E396',
}
},
title: {
Expand All @@ -117,15 +112,12 @@
},
axisBorder: {
show: true,
color: '#03a9f4'
color: '#FEB019'
},
labels: {
style: {
color: '#03a9f4',
color: '#FEB019',
},
formatter: function(val) {
return val + "!!"
}
},
title: {
text: "Revenue (thousand crores)"
Expand All @@ -135,28 +127,14 @@
],
tooltip: {
followCursor: true,
// y: [{
// formatter: function (y) {
// if(typeof y !== "undefined") {
// return y + " f"
// }
// return y;
// }
// }, {
// formatter: function (y) {
// if(typeof y !== "undefined") {
// return y + " crores"
// }
// return y;
// }
// }, {
// formatter: function (y) {
// if(typeof y !== "undefined") {
// return y + " lakhs crores"
// }
// return y;
// }
// }]
y: {
formatter: function (y) {
if(typeof y !== "undefined") {
return y + " thousand crores"
}
return y;
}
}
}
}

Expand Down
74 changes: 5 additions & 69 deletions src/modules/Dimensions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,8 @@ class Dimensions {
}

// after drawing everything, set the Y axis positions
this.setYAxisXPosition(yaxisLabelCoords, ytitleCoords)
let objyAxis = new YAxis(this.ctx)
objyAxis.setYAxisXPosition(yaxisLabelCoords, ytitleCoords)
}

setGridCoordsForNonAxisCharts (lgRect) {
Expand Down Expand Up @@ -275,15 +276,13 @@ class Dimensions {

setGridXPosForDualYAxis (ytitleCoords, yaxisLabelCoords) {
let w = this.w
// if(w.config.yaxis.length > 1) {
w.config.yaxis.map((yaxe, index) => {
if (!w.globals.ignoreYAxisIndexes.includes(index) && !w.config.yaxis[index].floating) {
if (yaxe.opposite) {
w.globals.translateX = w.globals.translateX - (yaxisLabelCoords[index].width + ytitleCoords[index].width) - (parseInt(w.config.yaxis[index].labels.style.fontSize) / 1.2)
w.globals.translateX = w.globals.translateX - (yaxisLabelCoords[index].width + ytitleCoords[index].width) - (parseInt(w.config.yaxis[index].labels.style.fontSize) / 1.2) - 12
}
}
})
// }
}

titleSubtitleOffset () {
Expand Down Expand Up @@ -317,11 +316,12 @@ class Dimensions {
getTotalYAxisWidth () {
let w = this.w
let yAxisWidth = 0
let padding = 10

w.globals.yLabelsCoords.map((yLabelCoord, index) => {
let floating = w.config.yaxis[index].floating
if (yLabelCoord.width > 0 && !floating) {
yAxisWidth = yAxisWidth + yLabelCoord.width
yAxisWidth = yAxisWidth + yLabelCoord.width + padding
if (w.globals.ignoreYAxisIndexes.includes(index)) {
yAxisWidth = yAxisWidth - yLabelCoord.width
}
Expand Down Expand Up @@ -465,70 +465,6 @@ class Dimensions {
}
}

setYAxisXPosition (yaxisLabelCoords, ytitleCoords) {
let w = this.w

let xLeft = 0
let xRight = 0
let leftDrawnYs = 0 // already drawn y axis on left side
let rightDrawnYs = 4 // already drawn y axis on right side
let multipleYPadd = 5
this.multipleYs = false

if (w.config.yaxis.length > 1) {
this.multipleYs = true
}

w.config.yaxis.map((yaxe, index) => {
let yAxisWidth = (yaxisLabelCoords[index].width + ytitleCoords[index].width)

let objyAxis = new YAxis(this.ctx)

let paddingForYAxisTitle = objyAxis.xPaddingForYAxisTitle(index, {
width: yaxisLabelCoords[index].width
}, {
width: ytitleCoords[index].width
}, yaxe.opposite)

if (w.config.yaxis.length > 1) {
// multiple yaxis
yAxisWidth = yAxisWidth + Math.abs(paddingForYAxisTitle.padd)
} else {
// just a single y axis in axis chart
if (yaxe.title.text === undefined) {
yAxisWidth = yAxisWidth + Math.abs(paddingForYAxisTitle.padd) + 15
} else {
yAxisWidth = yAxisWidth + Math.abs(paddingForYAxisTitle.padd)
}
}

if (!yaxe.opposite) {
// left side y axis
let offset = yAxisWidth
if (w.globals.ignoreYAxisIndexes.includes(index)) {
offset = 0
}

if (this.multipleYs) {
xLeft = w.globals.translateX - yAxisWidth - leftDrawnYs + multipleYPadd + (parseInt(w.config.yaxis[index].labels.style.fontSize) / 1.2) + yaxe.labels.offsetX + 5
} else {
xLeft = w.globals.translateX - yAxisWidth + yaxisLabelCoords[index].width + yaxe.labels.offsetX + 2
}

leftDrawnYs = leftDrawnYs + offset
w.globals.translateYAxisX[index] = xLeft
} else {
// right side y axis
xRight = w.globals.gridWidth + (w.globals.translateX) + rightDrawnYs + 26 + (w.globals.series.length - w.globals.collapsedSeries.length)

rightDrawnYs = rightDrawnYs + yAxisWidth
w.globals.translateYAxisX[index] = xRight - yaxe.labels.offsetX
}

// w.globals.yAxisWidths.push(yAxisWidth)
})
}

/**
* Get Y Axis Dimensions
* @memberof Dimensions
Expand Down
70 changes: 69 additions & 1 deletion src/modules/axes/YAxis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ class YAxis {
let x = this.xPaddingForYAxisTitle(realIndex, yAxisLabelsCoord, yAxisTitleCoord, yAxisOpposite)

yAxisTitle.setAttribute(
'x', x.xPos
'x', x.xPos - (yAxisOpposite ? 10 : 0)
)
}

Expand Down Expand Up @@ -330,6 +330,74 @@ class YAxis {

return {xPos: x, padd}
}

// sets the x position of the y-axis by counting the labels width, title width and any offset
setYAxisXPosition (yaxisLabelCoords, ytitleCoords) {
let w = this.w

let xLeft = 0
let xRight = 0
let leftDrawnYs = 0 // already drawn y axis on left side
let rightDrawnYs = 1 // already drawn y axis on right side
let multipleYPadd = 20
this.multipleYs = false

if (w.config.yaxis.length > 1) {
this.multipleYs = true
}

w.config.yaxis.map((yaxe, index) => {
let yAxisWidth = (yaxisLabelCoords[index].width + ytitleCoords[index].width)

let paddingForYAxisTitle = this.xPaddingForYAxisTitle(index, {
width: yaxisLabelCoords[index].width
}, {
width: ytitleCoords[index].width
}, yaxe.opposite)

if (w.config.yaxis.length > 1) {
// multiple yaxis
yAxisWidth = yAxisWidth + Math.abs(paddingForYAxisTitle.padd)
} else {
// just a single y axis in axis chart
if (yaxe.title.text === undefined) {
yAxisWidth = yAxisWidth + Math.abs(paddingForYAxisTitle.padd) + 15
} else {
yAxisWidth = yAxisWidth + Math.abs(paddingForYAxisTitle.padd)
}
}

if (!yaxe.opposite) {
// left side y axis
let offset = yAxisWidth + 5
if (w.globals.ignoreYAxisIndexes.includes(index)) {
offset = 0
}

if (this.multipleYs) {
xLeft = w.globals.translateX - yAxisWidth - leftDrawnYs + multipleYPadd + (parseInt(w.config.yaxis[index].labels.style.fontSize) / 1.2) + yaxe.labels.offsetX
} else {
xLeft = w.globals.translateX - yAxisWidth + yaxisLabelCoords[index].width + yaxe.labels.offsetX
}

leftDrawnYs = leftDrawnYs + offset
w.globals.translateYAxisX[index] = xLeft
} else {
// right side y axis
xRight = w.globals.gridWidth + (w.globals.translateX) + rightDrawnYs + 30 + (w.globals.series.length - w.globals.collapsedSeries.length)

w.globals.collapsedSeries.forEach((c) => {
if (c.index === index) {
rightDrawnYs = rightDrawnYs - yAxisWidth
}
})
rightDrawnYs = rightDrawnYs + yAxisWidth
w.globals.translateYAxisX[index] = xRight - yaxe.labels.offsetX
}

// w.globals.yAxisWidths.push(yAxisWidth)
})
}
}

module.exports = YAxis

0 comments on commit 8817230

Please sign in to comment.