apexcharts/src/charts/common/treemap/Helpers.js

A JavaScript Chart Library

// @ts-check
import Utils from '../../../utils/Utils'
import Graphics from '../../../modules/Graphics'
import DataLabels from '../../../modules/DataLabels'

export default class TreemapHelpers {
  /**
   * @param {import('../../../types/internal').ChartStateW} w
   * @param {import('../../../types/internal').ChartContext} ctx
   */
  constructor(w, ctx) {
    this.ctx = ctx
    this.w = w
  }

  checkColorRange() {
    const w = this.w

    let negRange = false
    const chartOpts = w.config.plotOptions[w.config.chart.type]

    if (chartOpts.colorScale.ranges.length > 0) {
      /**
       * @param {number} range
       */
      chartOpts.colorScale.ranges.map((/** @type {any} */ range) => {
        if (range.from <= 0) {
          negRange = true
        }
      })
    }
    return negRange
  }

  /**
   * @param {string} chartType
   * @param {number} i
   * @param {number} j
   * @param {any} negRange
   */
  getShadeColor(chartType, i, j, negRange) {
    const w = this.w

    let colorShadePercent = 1
    const shadeIntensity = w.config.plotOptions[chartType].shadeIntensity

    const colorProps = this.determineColor(chartType, i, j)

    if (/** @type {any} */ (w.globals).hasNegs || negRange) {
      if (w.config.plotOptions[chartType].reverseNegativeShade) {
        if (colorProps.percent < 0) {
          colorShadePercent =
            (colorProps.percent / 100) * (shadeIntensity * 1.25)
        } else {
          colorShadePercent =
            (1 - colorProps.percent / 100) * (shadeIntensity * 1.25)
        }
      } else {
        if (colorProps.percent <= 0) {
          colorShadePercent =
            1 - (1 + colorProps.percent / 100) * shadeIntensity
        } else {
          colorShadePercent = (1 - colorProps.percent / 100) * shadeIntensity
        }
      }
    } else {
      colorShadePercent = 1 - colorProps.percent / 100
      if (chartType === 'treemap') {
        colorShadePercent =
          (1 - colorProps.percent / 100) * (shadeIntensity * 1.25)
      }
    }

    let color = colorProps.color
    const utils = new Utils()

    if (w.config.plotOptions[chartType].enableShades) {
      // The shadeColor function may return either an RGB or a hex color value
      // However, hexToRgba requires the input to be in hex format
      // The ternary operator checks if the color is in RGB format, and if so, converts it to hex
      if (this.w.config.theme.mode === 'dark') {
        const shadeColor = utils.shadeColor(
          colorShadePercent * -1,
          colorProps.color,
        )
        color = Utils.hexToRgba(
          Utils.isColorHex(shadeColor) ? shadeColor : Utils.rgb2hex(shadeColor),
          w.config.fill.opacity,
        )
      } else {
        const shadeColor = utils.shadeColor(colorShadePercent, colorProps.color)
        color = Utils.hexToRgba(
          Utils.isColorHex(shadeColor) ? shadeColor : Utils.rgb2hex(shadeColor),
          w.config.fill.opacity,
        )
      }
    }

    return { color, colorProps }
  }

  /**
   * @param {string} chartType
   * @param {number} i
   * @param {number} j
   */
  determineColor(chartType, i, j) {
    const w = this.w

    const val = w.seriesData.series[i][j]

    const chartOpts = w.config.plotOptions[chartType]

    let seriesNumber = chartOpts.colorScale.inverse ? j : i

    if (chartOpts.distributed && w.config.chart.type === 'treemap') {
      seriesNumber = j
    }

    let color = w.globals.colors[seriesNumber]
    let foreColor = null
    let min = Math.min(...w.seriesData.series[i])
    let max = Math.max(...w.seriesData.series[i])

    if (!chartOpts.distributed && chartType === 'heatmap') {
      min = w.globals.minY
      max = w.globals.maxY
    }

    if (typeof chartOpts.colorScale.min !== 'undefined') {
      min =
        chartOpts.colorScale.min < w.globals.minY
          ? chartOpts.colorScale.min
          : w.globals.minY
      max =
        chartOpts.colorScale.max > w.globals.maxY
          ? chartOpts.colorScale.max
          : w.globals.maxY
    }

    const total = Math.abs(max) + Math.abs(min)

    let percent = (100 * val) / (total === 0 ? total - 0.000001 : total)

    if (chartOpts.colorScale.ranges.length > 0) {
      const colorRange = chartOpts.colorScale.ranges
      /**
       * @param {number} range
       */
      colorRange.map((/** @type {any} */ range) => {
        if (val >= range.from && val <= range.to) {
          color = range.color
          foreColor = range.foreColor ? range.foreColor : null
          min = range.from
          max = range.to
          const rTotal = Math.abs(max) + Math.abs(min)
          percent = (100 * val) / (rTotal === 0 ? rTotal - 0.000001 : rTotal)
        }
      })
    }

    return {
      color,
      foreColor,
      percent,
    }
  }

  /** @param {{ text?: any, x?: any, y?: any, i?: any, j?: any, colorProps?: any, fontSize?: any, series?: any }} opts */
  calculateDataLabels({ text, x, y, i, j, colorProps, fontSize }) {
    const w = this.w
    const dataLabelsConfig = w.config.dataLabels

    const graphics = new Graphics(this.w)

    const dataLabels = new DataLabels(this.w, this.ctx)

    let elDataLabelsWrap = null

    if (dataLabelsConfig.enabled) {
      elDataLabelsWrap = graphics.group({
        class: 'apexcharts-data-labels',
      })

      const offX = dataLabelsConfig.offsetX
      const offY = dataLabelsConfig.offsetY

      const dataLabelsX = x + offX
      const dataLabelsY =
        y + parseFloat(dataLabelsConfig.style.fontSize) / 3 + offY

      dataLabels.plotDataLabelsText({
        x: dataLabelsX,
        y: dataLabelsY,
        text,
        i,
        j,
        color: colorProps.foreColor,
        parent: elDataLabelsWrap,
        fontSize,
        dataLabelsConfig,
      })
    }

    return elDataLabelsWrap
  }
}