Initial commit: igny8 project

frontend/node_modules/apexcharts/src/modules/annotations/Annotations.js

@@ -0,0 +1,325 @@
+import Graphics from '../../modules/Graphics'
+import Utils from '../../utils/Utils'
+import Helpers from './Helpers'
+import XAxisAnnotations from './XAxisAnnotations'
+import YAxisAnnotations from './YAxisAnnotations'
+import PointsAnnotations from './PointsAnnotations'
+import Options from './../settings/Options'
+
+/**
+ * ApexCharts Annotations Class for drawing lines/rects on both xaxis and yaxis.
+ *
+ * @module Annotations
+ **/
+export default class Annotations {
+  constructor(ctx) {
+    this.ctx = ctx
+    this.w = ctx.w
+    this.graphics = new Graphics(this.ctx)
+
+    if (this.w.globals.isBarHorizontal) {
+      this.invertAxis = true
+    }
+
+    this.helpers = new Helpers(this)
+    this.xAxisAnnotations = new XAxisAnnotations(this)
+    this.yAxisAnnotations = new YAxisAnnotations(this)
+    this.pointsAnnotations = new PointsAnnotations(this)
+
+    if (this.w.globals.isBarHorizontal && this.w.config.yaxis[0].reversed) {
+      this.inversedReversedAxis = true
+    }
+
+    this.xDivision = this.w.globals.gridWidth / this.w.globals.dataPoints
+  }
+
+  drawAxesAnnotations() {
+    const w = this.w
+    if (w.globals.axisCharts && w.globals.dataPoints) {
+      // w.globals.dataPoints check added to fix  #1832
+      let yAnnotations = this.yAxisAnnotations.drawYAxisAnnotations()
+      let xAnnotations = this.xAxisAnnotations.drawXAxisAnnotations()
+      let pointAnnotations = this.pointsAnnotations.drawPointAnnotations()
+
+      const initialAnim = w.config.chart.animations.enabled
+
+      const annoArray = [yAnnotations, xAnnotations, pointAnnotations]
+      const annoElArray = [
+        xAnnotations.node,
+        yAnnotations.node,
+        pointAnnotations.node,
+      ]
+      for (let i = 0; i < 3; i++) {
+        w.globals.dom.elGraphical.add(annoArray[i])
+        if (initialAnim && !w.globals.resized && !w.globals.dataChanged) {
+          // fixes apexcharts/apexcharts.js#685
+          if (
+            w.config.chart.type !== 'scatter' &&
+            w.config.chart.type !== 'bubble' &&
+            w.globals.dataPoints > 1
+          ) {
+            annoElArray[i].classList.add('apexcharts-element-hidden')
+          }
+        }
+        w.globals.delayedElements.push({ el: annoElArray[i], index: 0 })
+      }
+
+      // background sizes needs to be calculated after text is drawn, so calling them last
+      this.helpers.annotationsBackground()
+    }
+  }
+
+  drawImageAnnos() {
+    const w = this.w
+
+    w.config.annotations.images.map((s, index) => {
+      this.addImage(s, index)
+    })
+  }
+
+  drawTextAnnos() {
+    const w = this.w
+
+    w.config.annotations.texts.map((t, index) => {
+      this.addText(t, index)
+    })
+  }
+
+  addXaxisAnnotation(anno, parent, index) {
+    this.xAxisAnnotations.addXaxisAnnotation(anno, parent, index)
+  }
+
+  addYaxisAnnotation(anno, parent, index) {
+    this.yAxisAnnotations.addYaxisAnnotation(anno, parent, index)
+  }
+
+  addPointAnnotation(anno, parent, index) {
+    this.pointsAnnotations.addPointAnnotation(anno, parent, index)
+  }
+
+  addText(params, index) {
+    const {
+      x,
+      y,
+      text,
+      textAnchor,
+      foreColor,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      cssClass,
+      backgroundColor,
+      borderWidth,
+      strokeDashArray,
+      borderRadius,
+      borderColor,
+      appendTo = '.apexcharts-svg',
+      paddingLeft = 4,
+      paddingRight = 4,
+      paddingBottom = 2,
+      paddingTop = 2,
+    } = params
+
+    const w = this.w
+
+    let elText = this.graphics.drawText({
+      x,
+      y,
+      text,
+      textAnchor: textAnchor || 'start',
+      fontSize: fontSize || '12px',
+      fontWeight: fontWeight || 'regular',
+      fontFamily: fontFamily || w.config.chart.fontFamily,
+      foreColor: foreColor || w.config.chart.foreColor,
+      cssClass: 'apexcharts-text ' + cssClass ? cssClass : '',
+    })
+
+    const parent = w.globals.dom.baseEl.querySelector(appendTo)
+    if (parent) {
+      parent.appendChild(elText.node)
+    }
+
+    const textRect = elText.bbox()
+
+    if (text) {
+      const elRect = this.graphics.drawRect(
+        textRect.x - paddingLeft,
+        textRect.y - paddingTop,
+        textRect.width + paddingLeft + paddingRight,
+        textRect.height + paddingBottom + paddingTop,
+        borderRadius,
+        backgroundColor ? backgroundColor : 'transparent',
+        1,
+        borderWidth,
+        borderColor,
+        strokeDashArray
+      )
+
+      parent.insertBefore(elRect.node, elText.node)
+    }
+  }
+
+  addImage(params, index) {
+    const w = this.w
+
+    const {
+      path,
+      x = 0,
+      y = 0,
+      width = 20,
+      height = 20,
+      appendTo = '.apexcharts-svg',
+    } = params
+
+    let img = w.globals.dom.Paper.image(path)
+    img.size(width, height).move(x, y)
+
+    const parent = w.globals.dom.baseEl.querySelector(appendTo)
+    if (parent) {
+      parent.appendChild(img.node)
+    }
+
+    return img
+  }
+
+  // The addXaxisAnnotation method requires a parent class, and user calling this method externally on the chart instance may not specify parent, hence a different method
+  addXaxisAnnotationExternal(params, pushToMemory, context) {
+    this.addAnnotationExternal({
+      params,
+      pushToMemory,
+      context,
+      type: 'xaxis',
+      contextMethod: context.addXaxisAnnotation,
+    })
+    return context
+  }
+
+  addYaxisAnnotationExternal(params, pushToMemory, context) {
+    this.addAnnotationExternal({
+      params,
+      pushToMemory,
+      context,
+      type: 'yaxis',
+      contextMethod: context.addYaxisAnnotation,
+    })
+    return context
+  }
+
+  addPointAnnotationExternal(params, pushToMemory, context) {
+    if (typeof this.invertAxis === 'undefined') {
+      this.invertAxis = context.w.globals.isBarHorizontal
+    }
+
+    this.addAnnotationExternal({
+      params,
+      pushToMemory,
+      context,
+      type: 'point',
+      contextMethod: context.addPointAnnotation,
+    })
+    return context
+  }
+
+  addAnnotationExternal({
+    params,
+    pushToMemory,
+    context,
+    type,
+    contextMethod,
+  }) {
+    const me = context
+    const w = me.w
+    const parent = w.globals.dom.baseEl.querySelector(
+      `.apexcharts-${type}-annotations`
+    )
+    const index = parent.childNodes.length + 1
+
+    const options = new Options()
+    const axesAnno = Object.assign(
+      {},
+      type === 'xaxis'
+        ? options.xAxisAnnotation
+        : type === 'yaxis'
+        ? options.yAxisAnnotation
+        : options.pointAnnotation
+    )
+
+    const anno = Utils.extend(axesAnno, params)
+
+    switch (type) {
+      case 'xaxis':
+        this.addXaxisAnnotation(anno, parent, index)
+        break
+      case 'yaxis':
+        this.addYaxisAnnotation(anno, parent, index)
+        break
+      case 'point':
+        this.addPointAnnotation(anno, parent, index)
+        break
+    }
+
+    // add background
+    let axesAnnoLabel = w.globals.dom.baseEl.querySelector(
+      `.apexcharts-${type}-annotations .apexcharts-${type}-annotation-label[rel='${index}']`
+    )
+    const elRect = this.helpers.addBackgroundToAnno(axesAnnoLabel, anno)
+    if (elRect) {
+      parent.insertBefore(elRect.node, axesAnnoLabel)
+    }
+
+    if (pushToMemory) {
+      w.globals.memory.methodsToExec.push({
+        context: me,
+        id: anno.id ? anno.id : Utils.randomId(),
+        method: contextMethod,
+        label: 'addAnnotation',
+        params,
+      })
+    }
+
+    return context
+  }
+
+  clearAnnotations(ctx) {
+    const w = ctx.w
+    let annos = w.globals.dom.baseEl.querySelectorAll(
+      '.apexcharts-yaxis-annotations, .apexcharts-xaxis-annotations, .apexcharts-point-annotations'
+    )
+
+    // annotations added externally should be cleared out too
+    for (let i = w.globals.memory.methodsToExec.length - 1; i >= 0; i--) {
+      if (
+        w.globals.memory.methodsToExec[i].label === 'addText' ||
+        w.globals.memory.methodsToExec[i].label === 'addAnnotation'
+      ) {
+        w.globals.memory.methodsToExec.splice(i, 1)
+      }
+    }
+
+    annos = Utils.listToArray(annos)
+
+    // delete the DOM elements
+    Array.prototype.forEach.call(annos, (a) => {
+      while (a.firstChild) {
+        a.removeChild(a.firstChild)
+      }
+    })
+  }
+
+  removeAnnotation(ctx, id) {
+    const w = ctx.w
+    let annos = w.globals.dom.baseEl.querySelectorAll(`.${id}`)
+
+    if (annos) {
+      w.globals.memory.methodsToExec.map((m, i) => {
+        if (m.id === id) {
+          w.globals.memory.methodsToExec.splice(i, 1)
+        }
+      })
+
+      Array.prototype.forEach.call(annos, (a) => {
+        a.parentElement.removeChild(a)
+      })
+    }
+  }
+}

frontend/node_modules/apexcharts/src/modules/annotations/Helpers.js

@@ -0,0 +1,258 @@
+import CoreUtils from '../CoreUtils'
+
+export default class Helpers {
+  constructor(annoCtx) {
+    this.w = annoCtx.w
+    this.annoCtx = annoCtx
+  }
+
+  setOrientations(anno, annoIndex = null) {
+    const w = this.w
+
+    if (anno.label.orientation === 'vertical') {
+      const i = annoIndex !== null ? annoIndex : 0
+      const xAnno = w.globals.dom.baseEl.querySelector(
+        `.apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='${i}']`
+      )
+
+      if (xAnno !== null) {
+        const xAnnoCoord = xAnno.getBoundingClientRect()
+        xAnno.setAttribute(
+          'x',
+          parseFloat(xAnno.getAttribute('x')) - xAnnoCoord.height + 4
+        )
+
+        const yOffset =
+          anno.label.position === 'top' ? xAnnoCoord.width : -xAnnoCoord.width
+        xAnno.setAttribute('y', parseFloat(xAnno.getAttribute('y')) + yOffset)
+
+        const { x, y } = this.annoCtx.graphics.rotateAroundCenter(xAnno)
+        xAnno.setAttribute('transform', `rotate(-90 ${x} ${y})`)
+      }
+    }
+  }
+
+  addBackgroundToAnno(annoEl, anno) {
+    const w = this.w
+
+    if (!annoEl || !anno.label.text || !String(anno.label.text).trim()) {
+      return null
+    }
+
+    const elGridRect = w.globals.dom.baseEl
+      .querySelector('.apexcharts-grid')
+      .getBoundingClientRect()
+
+    const coords = annoEl.getBoundingClientRect()
+
+    let {
+      left: pleft,
+      right: pright,
+      top: ptop,
+      bottom: pbottom,
+    } = anno.label.style.padding
+
+    if (anno.label.orientation === 'vertical') {
+      ;[ptop, pbottom, pleft, pright] = [pleft, pright, ptop, pbottom]
+    }
+
+    const x1 = coords.left - elGridRect.left - pleft
+    const y1 = coords.top - elGridRect.top - ptop
+    const elRect = this.annoCtx.graphics.drawRect(
+      x1 - w.globals.barPadForNumericAxis,
+      y1,
+      coords.width + pleft + pright,
+      coords.height + ptop + pbottom,
+      anno.label.borderRadius,
+      anno.label.style.background,
+      1,
+      anno.label.borderWidth,
+      anno.label.borderColor,
+      0
+    )
+
+    if (anno.id) {
+      elRect.node.classList.add(anno.id)
+    }
+
+    return elRect
+  }
+
+  annotationsBackground() {
+    const w = this.w
+
+    const add = (anno, i, type) => {
+      const annoLabel = w.globals.dom.baseEl.querySelector(
+        `.apexcharts-${type}-annotations .apexcharts-${type}-annotation-label[rel='${i}']`
+      )
+
+      if (annoLabel) {
+        const parent = annoLabel.parentNode
+        const elRect = this.addBackgroundToAnno(annoLabel, anno)
+
+        if (elRect) {
+          parent.insertBefore(elRect.node, annoLabel)
+
+          if (anno.label.mouseEnter) {
+            elRect.node.addEventListener(
+              'mouseenter',
+              anno.label.mouseEnter.bind(this, anno)
+            )
+          }
+          if (anno.label.mouseLeave) {
+            elRect.node.addEventListener(
+              'mouseleave',
+              anno.label.mouseLeave.bind(this, anno)
+            )
+          }
+          if (anno.label.click) {
+            elRect.node.addEventListener(
+              'click',
+              anno.label.click.bind(this, anno)
+            )
+          }
+        }
+      }
+    }
+
+    w.config.annotations.xaxis.forEach((anno, i) => add(anno, i, 'xaxis'))
+    w.config.annotations.yaxis.forEach((anno, i) => add(anno, i, 'yaxis'))
+    w.config.annotations.points.forEach((anno, i) => add(anno, i, 'point'))
+  }
+
+  getY1Y2(type, anno) {
+    const w = this.w
+    let y = type === 'y1' ? anno.y : anno.y2
+    let yP
+    let clipped = false
+
+    if (this.annoCtx.invertAxis) {
+      const labels = w.config.xaxis.convertedCatToNumeric
+        ? w.globals.categoryLabels
+        : w.globals.labels
+      const catIndex = labels.indexOf(y)
+      const xLabel = w.globals.dom.baseEl.querySelector(
+        `.apexcharts-yaxis-texts-g text:nth-child(${catIndex + 1})`
+      )
+
+      yP = xLabel
+        ? parseFloat(xLabel.getAttribute('y'))
+        : (w.globals.gridHeight / labels.length - 1) * (catIndex + 1) -
+          w.globals.barHeight
+
+      if (anno.seriesIndex !== undefined && w.globals.barHeight) {
+        yP -=
+          (w.globals.barHeight / 2) * (w.globals.series.length - 1) -
+          w.globals.barHeight * anno.seriesIndex
+      }
+    } else {
+      const seriesIndex = w.globals.seriesYAxisMap[anno.yAxisIndex][0]
+      const yPos = w.config.yaxis[anno.yAxisIndex].logarithmic
+        ? new CoreUtils(this.annoCtx.ctx).getLogVal(
+            w.config.yaxis[anno.yAxisIndex].logBase,
+            y,
+            seriesIndex
+          ) / w.globals.yLogRatio[seriesIndex]
+        : (y - w.globals.minYArr[seriesIndex]) /
+          (w.globals.yRange[seriesIndex] / w.globals.gridHeight)
+
+      yP =
+        w.globals.gridHeight - Math.min(Math.max(yPos, 0), w.globals.gridHeight)
+      clipped = yPos > w.globals.gridHeight || yPos < 0
+
+      if (anno.marker && (anno.y === undefined || anno.y === null)) {
+        yP = 0
+      }
+
+      if (w.config.yaxis[anno.yAxisIndex]?.reversed) {
+        yP = yPos
+      }
+    }
+
+    if (typeof y === 'string' && y.includes('px')) {
+      yP = parseFloat(y)
+    }
+
+    return { yP, clipped }
+  }
+
+  getX1X2(type, anno) {
+    const w = this.w
+    const x = type === 'x1' ? anno.x : anno.x2
+    const min = this.annoCtx.invertAxis ? w.globals.minY : w.globals.minX
+    const max = this.annoCtx.invertAxis ? w.globals.maxY : w.globals.maxX
+    const range = this.annoCtx.invertAxis
+      ? w.globals.yRange[0]
+      : w.globals.xRange
+    let clipped = false
+
+    let xP = this.annoCtx.inversedReversedAxis
+      ? (max - x) / (range / w.globals.gridWidth)
+      : (x - min) / (range / w.globals.gridWidth)
+
+    if (
+      (w.config.xaxis.type === 'category' ||
+        w.config.xaxis.convertedCatToNumeric) &&
+      !this.annoCtx.invertAxis &&
+      !w.globals.dataFormatXNumeric
+    ) {
+      if (!w.config.chart.sparkline.enabled) {
+        xP = this.getStringX(x)
+      }
+    }
+
+    if (typeof x === 'string' && x.includes('px')) {
+      xP = parseFloat(x)
+    }
+
+    if ((x === undefined || x === null) && anno.marker) {
+      xP = w.globals.gridWidth
+    }
+
+    if (
+      anno.seriesIndex !== undefined &&
+      w.globals.barWidth &&
+      !this.annoCtx.invertAxis
+    ) {
+      xP -=
+        (w.globals.barWidth / 2) * (w.globals.series.length - 1) -
+        w.globals.barWidth * anno.seriesIndex
+    }
+
+    if (xP > w.globals.gridWidth) {
+      xP = w.globals.gridWidth
+      clipped = true
+    } else if (xP < 0) {
+      xP = 0
+      clipped = true
+    }
+
+    return { x: xP, clipped }
+  }
+
+  getStringX(x) {
+    const w = this.w
+    let rX = x
+
+    if (
+      w.config.xaxis.convertedCatToNumeric &&
+      w.globals.categoryLabels.length
+    ) {
+      x = w.globals.categoryLabels.indexOf(x) + 1
+    }
+
+    const catIndex = w.globals.labels
+      .map((item) => (Array.isArray(item) ? item.join(' ') : item))
+      .indexOf(x)
+
+    const xLabel = w.globals.dom.baseEl.querySelector(
+      `.apexcharts-xaxis-texts-g text:nth-child(${catIndex + 1})`
+    )
+
+    if (xLabel) {
+      rX = parseFloat(xLabel.getAttribute('x'))
+    }
+
+    return rX
+  }
+}

frontend/node_modules/apexcharts/src/modules/annotations/PointsAnnotations.js

@@ -0,0 +1,136 @@
+import Utils from '../../utils/Utils'
+import Helpers from './Helpers'
+
+export default class PointAnnotations {
+  constructor(annoCtx) {
+    this.w = annoCtx.w
+    this.annoCtx = annoCtx
+    this.helpers = new Helpers(this.annoCtx)
+  }
+
+  addPointAnnotation(anno, parent, index) {
+    const w = this.w
+
+    if (w.globals.collapsedSeriesIndices.indexOf(anno.seriesIndex) > -1) {
+      return
+    }
+
+    let result = this.helpers.getX1X2('x1', anno)
+    let x = result.x
+    let clipX = result.clipped
+    result = this.helpers.getY1Y2('y1', anno)
+    let y = result.yP
+    let clipY = result.clipped
+
+    if (!Utils.isNumber(x)) return
+
+    if (!(clipY || clipX)) {
+      let optsPoints = {
+        pSize: anno.marker.size,
+        pointStrokeWidth: anno.marker.strokeWidth,
+        pointFillColor: anno.marker.fillColor,
+        pointStrokeColor: anno.marker.strokeColor,
+        shape: anno.marker.shape,
+        pRadius: anno.marker.radius,
+        class: `apexcharts-point-annotation-marker ${anno.marker.cssClass} ${
+          anno.id ? anno.id : ''
+        }`,
+      }
+
+      let point = this.annoCtx.graphics.drawMarker(
+        x + anno.marker.offsetX,
+        y + anno.marker.offsetY,
+        optsPoints
+      )
+
+      parent.appendChild(point.node)
+
+      const text = anno.label.text ? anno.label.text : ''
+
+      let elText = this.annoCtx.graphics.drawText({
+        x: x + anno.label.offsetX,
+        y:
+          y +
+          anno.label.offsetY -
+          anno.marker.size -
+          parseFloat(anno.label.style.fontSize) / 1.6,
+        text,
+        textAnchor: anno.label.textAnchor,
+        fontSize: anno.label.style.fontSize,
+        fontFamily: anno.label.style.fontFamily,
+        fontWeight: anno.label.style.fontWeight,
+        foreColor: anno.label.style.color,
+        cssClass: `apexcharts-point-annotation-label ${
+          anno.label.style.cssClass
+        } ${anno.id ? anno.id : ''}`,
+      })
+
+      elText.attr({
+        rel: index,
+      })
+
+      parent.appendChild(elText.node)
+
+      // TODO: deprecate this as we will use custom
+      if (anno.customSVG.SVG) {
+        let g = this.annoCtx.graphics.group({
+          class:
+            'apexcharts-point-annotations-custom-svg ' + anno.customSVG.cssClass,
+        })
+
+        g.attr({
+          transform: `translate(${x + anno.customSVG.offsetX}, ${
+            y + anno.customSVG.offsetY
+          })`,
+        })
+
+        g.node.innerHTML = anno.customSVG.SVG
+        parent.appendChild(g.node)
+      }
+
+      if (anno.image.path) {
+        let imgWidth = anno.image.width ? anno.image.width : 20
+        let imgHeight = anno.image.height ? anno.image.height : 20
+
+        point = this.annoCtx.addImage({
+          x: x + anno.image.offsetX - imgWidth / 2,
+          y: y + anno.image.offsetY - imgHeight / 2,
+          width: imgWidth,
+          height: imgHeight,
+          path: anno.image.path,
+          appendTo: '.apexcharts-point-annotations',
+        })
+      }
+
+      if (anno.mouseEnter) {
+        point.node.addEventListener(
+          'mouseenter',
+          anno.mouseEnter.bind(this, anno)
+        )
+      }
+      if (anno.mouseLeave) {
+        point.node.addEventListener(
+          'mouseleave',
+          anno.mouseLeave.bind(this, anno)
+        )
+      }
+      if (anno.click) {
+        point.node.addEventListener('click', anno.click.bind(this, anno))
+      }
+    }
+  }
+
+  drawPointAnnotations() {
+    let w = this.w
+
+    let elg = this.annoCtx.graphics.group({
+      class: 'apexcharts-point-annotations',
+    })
+
+    w.config.annotations.points.map((anno, index) => {
+      this.addPointAnnotation(anno, elg.node, index)
+    })
+
+    return elg
+  }
+}

frontend/node_modules/apexcharts/src/modules/annotations/XAxisAnnotations.js

@@ -0,0 +1,133 @@
+import Utils from '../../utils/Utils'
+import Helpers from './Helpers'
+
+export default class XAnnotations {
+  constructor(annoCtx) {
+    this.w = annoCtx.w
+    this.annoCtx = annoCtx
+
+    this.invertAxis = this.annoCtx.invertAxis
+
+    this.helpers = new Helpers(this.annoCtx)
+  }
+
+  addXaxisAnnotation(anno, parent, index) {
+    let w = this.w
+
+    let result = this.helpers.getX1X2('x1', anno)
+    let x1 = result.x
+    let clipX1 = result.clipped
+    let clipX2 = true
+    let x2
+
+    const text = anno.label.text
+
+    let strokeDashArray = anno.strokeDashArray
+
+    if (!Utils.isNumber(x1)) return
+
+    if (anno.x2 === null || typeof anno.x2 === 'undefined') {
+      if (!clipX1) {
+        let line = this.annoCtx.graphics.drawLine(
+          x1 + anno.offsetX, // x1
+          0 + anno.offsetY, // y1
+          x1 + anno.offsetX, // x2
+          w.globals.gridHeight + anno.offsetY, // y2
+          anno.borderColor, // lineColor
+          strokeDashArray, //dashArray
+          anno.borderWidth
+        )
+        parent.appendChild(line.node)
+        if (anno.id) {
+          line.node.classList.add(anno.id)
+        }
+      }
+    } else {
+      let result = this.helpers.getX1X2('x2', anno)
+      x2 = result.x
+      clipX2 = result.clipped
+
+      if (x2 < x1) {
+        let temp = x1
+        x1 = x2
+        x2 = temp
+      }
+
+      let rect = this.annoCtx.graphics.drawRect(
+        x1 + anno.offsetX, // x1
+        0 + anno.offsetY, // y1
+        x2 - x1, // x2
+        w.globals.gridHeight + anno.offsetY, // y2
+        0, // radius
+        anno.fillColor, // color
+        anno.opacity, // opacity,
+        1, // strokeWidth
+        anno.borderColor, // strokeColor
+        strokeDashArray // stokeDashArray
+      )
+      rect.node.classList.add('apexcharts-annotation-rect')
+      rect.attr('clip-path', `url(#gridRectMask${w.globals.cuid})`)
+      parent.appendChild(rect.node)
+      if (anno.id) {
+        rect.node.classList.add(anno.id)
+      }
+    }
+
+    if (!(clipX1 && clipX2)) {
+      let textRects = this.annoCtx.graphics.getTextRects(
+        text,
+        parseFloat(anno.label.style.fontSize)
+      )
+      let textY =
+        anno.label.position === 'top'
+          ? 4
+          : anno.label.position === 'center'
+          ? w.globals.gridHeight / 2 +
+            (anno.label.orientation === 'vertical' ? textRects.width / 2 : 0)
+          : w.globals.gridHeight
+
+      let elText = this.annoCtx.graphics.drawText({
+        x: x1 + anno.label.offsetX,
+        y:
+          textY +
+          anno.label.offsetY -
+          (anno.label.orientation === 'vertical'
+            ? anno.label.position === 'top'
+              ? textRects.width / 2 - 12
+              : -textRects.width / 2
+            : 0),
+        text,
+        textAnchor: anno.label.textAnchor,
+        fontSize: anno.label.style.fontSize,
+        fontFamily: anno.label.style.fontFamily,
+        fontWeight: anno.label.style.fontWeight,
+        foreColor: anno.label.style.color,
+        cssClass: `apexcharts-xaxis-annotation-label ${
+          anno.label.style.cssClass
+        } ${anno.id ? anno.id : ''}`,
+      })
+
+      elText.attr({
+        rel: index,
+      })
+
+      parent.appendChild(elText.node)
+
+      // after placing the annotations on svg, set any vertically placed annotations
+      this.annoCtx.helpers.setOrientations(anno, index)
+    }
+  }
+  drawXAxisAnnotations() {
+    let w = this.w
+
+    let elg = this.annoCtx.graphics.group({
+      class: 'apexcharts-xaxis-annotations',
+    })
+
+    w.config.annotations.xaxis.map((anno, index) => {
+      this.addXaxisAnnotation(anno, elg.node, index)
+    })
+
+    return elg
+  }
+}

frontend/node_modules/apexcharts/src/modules/annotations/YAxisAnnotations.js

@@ -0,0 +1,140 @@
+import Helpers from './Helpers'
+import AxesUtils from '../axes/AxesUtils'
+
+export default class YAnnotations {
+  constructor(annoCtx) {
+    this.w = annoCtx.w
+    this.annoCtx = annoCtx
+
+    this.helpers = new Helpers(this.annoCtx)
+    this.axesUtils = new AxesUtils(this.annoCtx)
+
+  }
+
+  addYaxisAnnotation(anno, parent, index) {
+    let w = this.w
+
+    let strokeDashArray = anno.strokeDashArray
+
+    let result = this.helpers.getY1Y2('y1', anno)
+    let y1 = result.yP
+    let clipY1 = result.clipped
+    let y2
+    let clipY2 = true
+    let drawn = false
+
+    const text = anno.label.text
+
+    if (anno.y2 === null || typeof anno.y2 === 'undefined') {
+      if (!clipY1) {
+        drawn = true
+        let line = this.annoCtx.graphics.drawLine(
+          0 + anno.offsetX, // x1
+          y1 + anno.offsetY, // y1
+          this._getYAxisAnnotationWidth(anno), // x2
+          y1 + anno.offsetY, // y2
+          anno.borderColor, // lineColor
+          strokeDashArray, // dashArray
+          anno.borderWidth
+        )
+        parent.appendChild(line.node)
+        if (anno.id) {
+          line.node.classList.add(anno.id)
+        }
+      }
+    } else {
+      result = this.helpers.getY1Y2('y2', anno)
+      y2 = result.yP
+      clipY2 = result.clipped
+
+      if (y2 > y1) {
+        let temp = y1
+        y1 = y2
+        y2 = temp
+      }
+
+      if (!(clipY1 && clipY2)) {
+        drawn = true
+        let rect = this.annoCtx.graphics.drawRect(
+          0 + anno.offsetX, // x1
+          y2 + anno.offsetY, // y1
+          this._getYAxisAnnotationWidth(anno), // x2
+          y1 - y2, // y2
+          0, // radius
+          anno.fillColor, // color
+          anno.opacity, // opacity,
+          1, // strokeWidth
+          anno.borderColor, // strokeColor
+          strokeDashArray // stokeDashArray
+        )
+        rect.node.classList.add('apexcharts-annotation-rect')
+        rect.attr('clip-path', `url(#gridRectMask${w.globals.cuid})`)
+
+        parent.appendChild(rect.node)
+        if (anno.id) {
+          rect.node.classList.add(anno.id)
+        }
+      }
+    }
+    if (drawn) {
+      let textX =
+        anno.label.position === 'right'
+          ? w.globals.gridWidth
+          : anno.label.position === 'center'
+          ? w.globals.gridWidth / 2
+          : 0
+
+      let elText = this.annoCtx.graphics.drawText({
+        x: textX + anno.label.offsetX,
+        y: (y2 != null ? y2 : y1) + anno.label.offsetY - 3,
+        text,
+        textAnchor: anno.label.textAnchor,
+        fontSize: anno.label.style.fontSize,
+        fontFamily: anno.label.style.fontFamily,
+        fontWeight: anno.label.style.fontWeight,
+        foreColor: anno.label.style.color,
+        cssClass: `apexcharts-yaxis-annotation-label ${
+          anno.label.style.cssClass
+        } ${anno.id ? anno.id : ''}`
+      })
+
+      elText.attr({
+        rel: index
+      })
+
+      parent.appendChild(elText.node)
+    }
+  }
+
+  _getYAxisAnnotationWidth(anno) {
+    // issue apexcharts.js#2009
+    const w = this.w
+    let width = w.globals.gridWidth
+    if (anno.width.indexOf('%') > -1) {
+      width = (w.globals.gridWidth * parseInt(anno.width, 10)) / 100
+    } else {
+      width = parseInt(anno.width, 10)
+    }
+    return width + anno.offsetX
+  }
+
+  drawYAxisAnnotations() {
+    const w = this.w
+
+    let elg = this.annoCtx.graphics.group({
+      class: 'apexcharts-yaxis-annotations'
+    })
+
+    w.config.annotations.yaxis.forEach((anno, index) => {
+      anno.yAxisIndex = this.axesUtils.translateYAxisIndex(anno.yAxisIndex)
+      if (
+            !(this.axesUtils.isYAxisHidden(anno.yAxisIndex)
+            && this.axesUtils.yAxisAllSeriesCollapsed(anno.yAxisIndex))
+      ) {
+        this.addYaxisAnnotation(anno, elg.node, index)
+      }
+    })
+
+    return elg
+  }
+}