Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
visually separate the datetime labels to identify years from months a…
…nd months from days
  • Loading branch information
junedchhipa committed Aug 3, 2019
1 parent be0a671 commit 88004b2
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 1 deletion.
3 changes: 3 additions & 0 deletions src/modules/Graphics.js
Expand Up @@ -449,6 +449,7 @@ class Graphics {
textAnchor,
fontSize,
fontFamily,
fontWeight,
foreColor,
opacity
} = opts
Expand All @@ -463,6 +464,7 @@ class Graphics {
foreColor = w.config.chart.foreColor
}
fontFamily = fontFamily || w.config.chart.fontFamily
fontWeight = fontWeight || 'regular'

let elText
if (Array.isArray(text)) {
Expand All @@ -482,6 +484,7 @@ class Graphics {
'dominant-baseline': 'auto',
'font-size': fontSize,
'font-family': fontFamily,
'font-weight': fontWeight,
fill: foreColor,
class: 'apexcharts-text ' + opts.cssClass ? opts.cssClass : ''
})
Expand Down
22 changes: 21 additions & 1 deletion src/modules/axes/AxesUtils.js
Expand Up @@ -16,6 +16,8 @@ export default class AxesUtils {
let xlbFormatter = w.globals.xLabelFormatter
let customFormatter = w.config.xaxis.labels.formatter

let isBold = false

let xFormat = new Formatters(this.ctx)
let timestamp = rawLabel
label = xFormat.xLabelFormat(xlbFormatter, rawLabel, timestamp)
Expand All @@ -24,7 +26,24 @@ export default class AxesUtils {
label = customFormatter(rawLabel, labels[i], i)
}

const determineHighestUnit = (unit) => {
let highestUnit = null
timelineLabels.forEach((t) => {
if (t.unit === 'month') {
highestUnit = 'year'
} else if (t.unit === 'day') {
highestUnit = 'month'
} else if (t.unit === 'hour') {
highestUnit = 'day'
} else if (t.unit === 'minute') {
highestUnit = 'hour'
}
})

return highestUnit === unit
}
if (timelineLabels.length > 0) {
isBold = determineHighestUnit(timelineLabels[i].unit)
x = timelineLabels[i].position
label = timelineLabels[i].value
} else {
Expand All @@ -48,7 +67,8 @@ export default class AxesUtils {

return {
x,
text: label
text: label,
isBold
}
}

Expand Down
1 change: 1 addition & 0 deletions src/modules/axes/XAxis.js
Expand Up @@ -110,6 +110,7 @@ export default class XAxis {
y: this.offY + w.config.xaxis.labels.offsetY + offsetYCorrection,
text: '',
textAnchor: 'middle',
fontWeight: label.isBold ? 600 : 400,
fontSize: this.xaxisFontSize,
fontFamily: this.xaxisFontFamily,
foreColor: Array.isArray(this.xaxisForeColors)
Expand Down

0 comments on commit 88004b2

Please sign in to comment.