Skip to content

Commit

Permalink
heatmap yaxis labels offsetY; fixes #2033
Browse files Browse the repository at this point in the history
  • Loading branch information
@junedchhipa
junedchhipa committed Sep 13, 2023
1 parent 467665c commit 3255e72
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 30 deletions.
24 changes: 11 additions & 13 deletions src/charts/HeatMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default class HeatMap {
const graphics = new Graphics(this.ctx)

let ret = graphics.group({
class: 'apexcharts-heatmap'
class: 'apexcharts-heatmap',
})

ret.attr('clip-path', `url(#gridRectMask${w.globals.cuid})`)
Expand Down Expand Up @@ -62,7 +62,7 @@ export default class HeatMap {
class: `apexcharts-series apexcharts-heatmap-series`,
seriesName: Utils.escapeString(w.globals.seriesNames[i]),
rel: i + 1,
'data:realIndex': i
'data:realIndex': i,
})
this.ctx.series.addCollapsedClassToSeries(elSeries, i)

Expand Down Expand Up @@ -102,7 +102,7 @@ export default class HeatMap {
: xDivision,
height: w.config.fill.image.height
? w.config.fill.image.height
: yDivision
: yDivision,
})
}

Expand All @@ -111,7 +111,7 @@ export default class HeatMap {
let rect = graphics.drawRect(x1, y1, xDivision, yDivision, radius)
rect.attr({
cx: x1,
cy: y1
cy: y1,
})

rect.node.classList.add('apexcharts-heatmap-rect')
Expand All @@ -127,7 +127,7 @@ export default class HeatMap {
stroke: w.config.plotOptions.heatmap.useFillColorAsStroke
? color
: w.globals.stroke.colors[0],
color
color,
})

this.helpers.addListeners(rect)
Expand Down Expand Up @@ -168,7 +168,7 @@ export default class HeatMap {
value: w.globals.series[i][j],
seriesIndex: i,
dataPointIndex: j,
w
w,
})

let dataLabels = this.helpers.calculateDataLabels({
Expand All @@ -178,7 +178,7 @@ export default class HeatMap {
i,
j,
colorProps: heatColorProps,
series: heatSeries
series: heatSeries,
})
if (dataLabels !== null) {
elSeries.add(dataLabels)
Expand All @@ -200,8 +200,6 @@ export default class HeatMap {
yAxisScale.push('')
}
w.globals.yAxisScale[0].result = yAxisScale
let divisor = w.globals.gridHeight / w.globals.series.length
w.config.yaxis[0].labels.offsetY = -(divisor / 2)

return ret
}
Expand All @@ -214,13 +212,13 @@ export default class HeatMap {
x: x + width / 2,
y: y + height / 2,
width: 0,
height: 0
height: 0,
},
{
x,
y,
width,
height
height,
},
speed,
() => {
Expand All @@ -231,11 +229,11 @@ export default class HeatMap {

animateHeatColor(el, colorFrom, colorTo, speed) {
el.attr({
fill: colorFrom
fill: colorFrom,
})
.animate(speed)
.attr({
fill: colorTo
fill: colorTo,
})
}
}
8 changes: 6 additions & 2 deletions src/modules/Data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,11 @@ export default class Data {
this.fallbackToCategory = true
this.twoDSeriesX.push(ser[activeI].data[j].x)

if (!isNaN(ser[activeI].data[j].x)) {
if (
!isNaN(ser[activeI].data[j].x) &&
this.w.config.xaxis.type !== 'category' &&
typeof ser[activeI].data[j].x !== 'string'
) {
gl.isXNumeric = true
}
}
Expand Down Expand Up @@ -293,7 +297,7 @@ export default class Data {
rangeName: id,
}

// mutating config object by adding a new property
// CAUTION: mutating config object by adding a new property
// TODO: As this is specifically for timeline rangebar charts, update the docs mentioning the series only supports xy format
ser[i].data[j].rangeName = id

Expand Down
37 changes: 22 additions & 15 deletions src/modules/axes/YAxis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ export default class YAxis {
let elYaxis = graphics.group({
class: 'apexcharts-yaxis',
rel: realIndex,
transform: 'translate(' + w.globals.translateYAxisX[realIndex] + ', 0)'
transform: 'translate(' + w.globals.translateYAxisX[realIndex] + ', 0)',
})

if (this.axesUtils.isYAxisHidden(realIndex)) {
return elYaxis
}

let elYaxisTexts = graphics.group({
class: 'apexcharts-yaxis-texts-g'
class: 'apexcharts-yaxis-texts-g',
})

elYaxis.add(elYaxisTexts)
Expand Down Expand Up @@ -100,9 +100,16 @@ export default class YAxis {
return Array.isArray(yColors) ? yColors[i] : yColors
}

let offsetY = w.config.yaxis[realIndex].labels.offsetY

if (w.config.chart.type === 'heatmap') {
const divisor = w.globals.gridHeight / w.globals.series.length - 1
offsetY = offsetY - divisor / 2
}

let label = graphics.drawText({
x: xPad,
y: l + tickAmount / 10 + w.config.yaxis[realIndex].labels.offsetY + 1,
y: l + tickAmount / 10 + offsetY + 1,
text: val,
textAnchor,
fontSize: yaxisFontSize,
Expand All @@ -111,7 +118,7 @@ export default class YAxis {
maxWidth: w.config.yaxis[realIndex].labels.maxWidth,
foreColor: getForeColor(),
isPlainText: false,
cssClass: 'apexcharts-yaxis-label ' + yaxisStyle.cssClass
cssClass: 'apexcharts-yaxis-label ' + yaxisStyle.cssClass,
})
if (i === tickAmount) {
firstLabel = label
Expand All @@ -138,7 +145,7 @@ export default class YAxis {

if (w.config.yaxis[realIndex].title.text !== undefined) {
let elYaxisTitle = graphics.group({
class: 'apexcharts-yaxis-title'
class: 'apexcharts-yaxis-title',
})

let x = 0
Expand All @@ -159,7 +166,7 @@ export default class YAxis {
fontFamily: w.config.yaxis[realIndex].title.style.fontFamily,
cssClass:
'apexcharts-yaxis-title-text ' +
w.config.yaxis[realIndex].title.style.cssClass
w.config.yaxis[realIndex].title.style.cssClass,
})

elYaxisTitle.add(elYAxisTitleText)
Expand Down Expand Up @@ -208,12 +215,12 @@ export default class YAxis {
let graphics = new Graphics(this.ctx)

let elXaxis = graphics.group({
class: 'apexcharts-xaxis apexcharts-yaxis-inversed'
class: 'apexcharts-xaxis apexcharts-yaxis-inversed',
})

let elXaxisTexts = graphics.group({
class: 'apexcharts-xaxis-texts-g',
transform: `translate(${w.globals.translateXAxisX}, ${w.globals.translateXAxisY})`
transform: `translate(${w.globals.translateXAxisX}, ${w.globals.translateXAxisY})`,
})

elXaxis.add(elXaxisTexts)
Expand Down Expand Up @@ -290,7 +297,7 @@ export default class YAxis {
fontWeight: w.config.xaxis.labels.style.fontWeight,
isPlainText: false,
cssClass:
'apexcharts-xaxis-label ' + w.config.xaxis.labels.style.cssClass
'apexcharts-xaxis-label ' + w.config.xaxis.labels.style.cssClass,
})

elXaxisTexts.add(elTick)
Expand Down Expand Up @@ -345,7 +352,7 @@ export default class YAxis {
const graphics = new Graphics(this.ctx)
if (w.config.xaxis.title.text !== undefined) {
let elYaxisTitle = graphics.group({
class: 'apexcharts-xaxis-title apexcharts-yaxis-title-inversed'
class: 'apexcharts-xaxis-title apexcharts-yaxis-title-inversed',
})

let elYAxisTitleText = graphics.drawText({
Expand All @@ -363,7 +370,7 @@ export default class YAxis {
fontWeight: w.config.xaxis.title.style.fontWeight,
foreColor: w.config.xaxis.title.style.color,
cssClass:
'apexcharts-xaxis-title-text ' + w.config.xaxis.title.style.cssClass
'apexcharts-xaxis-title-text ' + w.config.xaxis.title.style.cssClass,
})

elYaxisTitle.add(elYAxisTitleText)
Expand All @@ -379,11 +386,11 @@ export default class YAxis {

let yAxisLabelsCoord = {
width: 0,
height: 0
height: 0,
}
let yAxisTitleCoord = {
width: 0,
height: 0
height: 0,
}

let elYAxisLabelsWrap = w.globals.dom.baseEl.querySelector(
Expand Down Expand Up @@ -441,7 +448,7 @@ export default class YAxis {
if (w.config.yaxis[realIndex].title.text === undefined || realIndex < 0) {
return {
xPos: x,
padd: 0
padd: 0,
}
}

Expand Down Expand Up @@ -475,7 +482,7 @@ export default class YAxis {

return {
xPos: x,
padd
padd,
}
}

Expand Down

0 comments on commit 3255e72

Please sign in to comment.