Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

apexcharts

Package Overview
Dependencies
Maintainers
2
Versions
223
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

apexcharts - npm Package Compare versions

Comparing version 3.50.0 to 3.51.0

2

package.json
{
"name": "apexcharts",
"version": "3.50.0",
"version": "3.51.0",
"description": "A JavaScript Chart Library",

@@ -5,0 +5,0 @@ "repository": {

@@ -113,4 +113,3 @@ import BarDataLabels from './common/bar/DataLabels'

let {columnGroupIndex} =
this.barHelpers.getGroupIndex(realIndex)
let { columnGroupIndex } = this.barHelpers.getGroupIndex(realIndex)

@@ -278,4 +277,4 @@ // el to which series will be drawn

series,
barHeight: paths.barHeight ? paths.barHeight : barHeight,
barWidth: paths.barWidth ? paths.barWidth : barWidth,
barHeight: Math.abs(paths.barHeight ? paths.barHeight : barHeight),
barWidth: Math.abs(paths.barWidth ? paths.barWidth : barWidth),
elDataLabelsWrap,

@@ -282,0 +281,0 @@ elGoalsMarkers,

@@ -28,4 +28,4 @@ import CoreUtils from '../modules/CoreUtils'

series = w.globals.comboCharts
? seriesIndex.map((_) => w.globals.seriesPercent[_])
: w.globals.seriesPercent.slice()
? seriesIndex.map((_) => w.globals.seriesPercent[_])
: w.globals.seriesPercent.slice()
}

@@ -50,4 +50,4 @@

let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
let {groupIndex, columnGroupIndex} =
this.barHelpers.getGroupIndex(realIndex)
let { groupIndex, columnGroupIndex } =
this.barHelpers.getGroupIndex(realIndex)
this.groupCtx = this[w.globals.seriesGroups[groupIndex]]

@@ -192,3 +192,3 @@

type: 'bar',
visibleSeries: 0,
visibleSeries: columnGroupIndex,
})

@@ -215,3 +215,11 @@ }

initialPositions(x, y, xDivision, yDivision, zeroH, zeroW, translationsIndex) {
initialPositions(
x,
y,
xDivision,
yDivision,
zeroH,
zeroW,
translationsIndex
) {
let w = this.w

@@ -228,9 +236,9 @@

} else {
barHeight = yDivision * parseInt(userBarHeight, 10) / 100
barHeight = (yDivision * parseInt(userBarHeight, 10)) / 100
}
zeroW =
w.globals.padHorizontal
+ (this.isReversed
? w.globals.gridWidth - this.baseLineInvertedY
: this.baseLineInvertedY)
w.globals.padHorizontal +
(this.isReversed
? w.globals.gridWidth - this.baseLineInvertedY
: this.baseLineInvertedY)

@@ -264,3 +272,3 @@ // initial y position is half of barHeight * half of number of Bars

}
// Up to this point, barWidth is the width that will accommodate all bars

@@ -377,3 +385,10 @@ // at each datapoint or category.

pathFrom: paths.pathFrom,
goalX: this.barHelpers.getGoalValues('x', zeroW, null, i, j, translationsIndex),
goalX: this.barHelpers.getGoalValues(
'x',
zeroW,
null,
i,
j,
translationsIndex
),
barXPosition,

@@ -408,3 +423,5 @@ barYPosition,

// TODO: move the barWidth factor to barXPosition
x = (seriesVal - w.globals.minX) / this.xRatio - barWidth / 2 * w.globals.barGroups.length
x =
(seriesVal - w.globals.minX) / this.xRatio -
(barWidth / 2) * w.globals.barGroups.length
}

@@ -411,0 +428,0 @@

@@ -89,3 +89,3 @@ import Graphics from '../../../modules/Graphics'

if (w.config.dataLabels.enabled) {
const yLabel = this.barCtx.series[i][j]
const yLabel = w.globals.series[i][j]

@@ -131,3 +131,3 @@ textRects = graphics.getTextRects(

j,
val: series[i][j],
val: w.globals.series[i][j],
barHeight,

@@ -140,3 +140,3 @@ barWidth,

y: dataLabelsPos.dataLabelsY,
val: this.barCtx.isRangeBar ? [y1, y2] : series[i][j],
val: this.barCtx.isRangeBar ? [y1, y2] : w.globals.series[i][j],
i: realIndex,

@@ -222,3 +222,3 @@ j,

bcx = bcx - strokeWidth / 2 + columnGroupIndex * barWidth
bcx = bcx - strokeWidth / 2

@@ -249,3 +249,3 @@ let dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints

let valIsNegative = this.barCtx.series[i][j] < 0
let valIsNegative = w.globals.series[i][j] < 0

@@ -255,3 +255,2 @@ let newY = y

newY = y + (valIsNegative ? barHeight : -barHeight)
y = y - barHeight
}

@@ -338,9 +337,12 @@

// width divided into equal parts
let xDivision = w.globals.gridWidth / w.globals.dataPoints
let xDivision = dataPointsDividedWidth
totalDataLabelsX =
totalDataLabelsBcx
+ barWidth * (w.globals.barGroups.length - 0.5)
- (w.globals.isXNumeric ? barWidth : xDivision)
+ barTotalDataLabelsConfig.offsetX
totalDataLabelsBcx +
(w.globals.isXNumeric
? (-barWidth * w.globals.barGroups.length) / 2
: (w.globals.barGroups.length * barWidth) / 2 -
(w.globals.barGroups.length - 1) * barWidth -
xDivision) +
barTotalDataLabelsConfig.offsetX
}

@@ -392,4 +394,2 @@

bcy += columnGroupIndex * barHeight
let dataLabelsY =

@@ -407,3 +407,3 @@ bcy -

let valIsNegative = this.barCtx.series[i][j] < 0
let valIsNegative = w.globals.series[i][j] < 0

@@ -413,3 +413,2 @@ let newX = x

newX = x + (valIsNegative ? -barWidth : barWidth)
x = w.globals.gridWidth - barWidth
totalDataLabelsAnchor = valIsNegative ? 'start' : 'end'

@@ -646,13 +645,4 @@ }

totalDataLabelText = graphics.drawText({
// TODO: Add gap, visibleI
x:
x -
(!w.globals.isBarHorizontal && w.globals.barGroups.length
? (barWidth * (w.globals.barGroups.length - 1)) / 2
: 0),
y:
y -
(w.globals.isBarHorizontal && w.globals.barGroups.length
? (barHeight * (w.globals.barGroups.length - 1)) / 2
: 0),
x: x,
y: y,
foreColor: barTotalDataLabelsConfig.style.color,

@@ -659,0 +649,0 @@ text: val,

@@ -202,3 +202,3 @@ import Fill from '../../../modules/Fill'

if (w.config.series[i].data[j] && w.config.series[i].data[j].fillColor) {
if (w.config.series[i].data[j]?.fillColor) {
fillColor = w.config.series[i].data[j].fillColor

@@ -218,3 +218,3 @@ }

: Array.isArray(w.config.fill.type)
? w.config.fill.type[i]
? w.config.fill.type[realIndex]
: w.config.fill.type,

@@ -221,0 +221,0 @@ })

@@ -70,3 +70,2 @@ import CoreUtils from '../modules/CoreUtils'

this._initSerieVariables(series, i, realIndex)

@@ -107,3 +106,3 @@

lineYPosition,
translationsIndex
translationsIndex,
})

@@ -130,3 +129,3 @@ prevY = firstPrevY.prevY

lineYPosition,
translationsIndex
translationsIndex,
})

@@ -210,3 +209,4 @@ prevY2 = firstPrevY2.prevY

for (let s = 0; s < segments; s++) {
paths.linePaths[s] = rangePaths.linePaths[s + segments] + paths.linePaths[s]
paths.linePaths[s] =
rangePaths.linePaths[s + segments] + paths.linePaths[s]
}

@@ -320,3 +320,12 @@ paths.linePaths.splice(segments)

_calculatePathsFrom({ type, series, i, realIndex, translationsIndex, prevX, prevY, prevY2 }) {
_calculatePathsFrom({
type,
series,
i,
realIndex,
translationsIndex,
prevX,
prevY,
prevY2,
}) {
const w = this.w

@@ -386,3 +395,3 @@ const graphics = new Graphics(this.ctx)

w.globals.seriesXvalues[realIndex][
w.globals.seriesXvalues[realIndex].length - forecast.count - 1
w.globals.seriesXvalues[realIndex].length - forecast.count - 1
]

@@ -570,4 +579,4 @@ const elForecastMask = graphics.drawRect(

(!this.w.config.chart.stackOnlyBar ||
this.w.config.series[realIndex]?.type === 'bar'
|| this.w.config.series[realIndex]?.type === 'column'))
this.w.config.series[realIndex]?.type === 'bar' ||
this.w.config.series[realIndex]?.type === 'column'))

@@ -611,5 +620,7 @@ let curve = w.config.stroke.curve

for (let pii = pi; pii > 0; pii--) {
if (w.globals.collapsedSeriesIndices.indexOf(
seriesIndex?.[pii] || pii
) > -1) {
if (
w.globals.collapsedSeriesIndices.indexOf(
seriesIndex?.[pii] || pii
) > -1
) {
pii--

@@ -645,5 +656,6 @@ } else {

// push current Y that will be used as next series's bottom position
if (isNull
&& (w.config.stroke.curve === 'smooth'
|| w.config.stroke.curve === 'monotoneCubic')
if (
isNull &&
(w.config.stroke.curve === 'smooth' ||
w.config.stroke.curve === 'monotoneCubic')
) {

@@ -798,3 +810,3 @@ yArrj.push(null)

let rangeArea = type === 'rangeArea'
let isLowerRangeAreaPath = (type === 'rangeArea' && isRangeStart)
let isLowerRangeAreaPath = type === 'rangeArea' && isRangeStart

@@ -805,5 +817,6 @@ switch (curve) {

let getSmoothInputs = (xArr, yArr) => {
return xArr.map((_, i) => {
return [_, yArr[i]]
})
return xArr
.map((_, i) => {
return [_, yArr[i]]
})
.filter((_) => _[1] !== null)

@@ -847,5 +860,6 @@ }

case 1:
if (!(rangeArea
? xArrj.length === series[i].length
: (j === series[i].length - 2))
if (
!(rangeArea
? xArrj.length === series[i].length
: j === series[i].length - 2)
) {

@@ -862,5 +876,6 @@ break

const smoothInputs = getSmoothInputs(_xAj, _yAj)
const points = smoothInputs.length > 1
? spline.points(smoothInputs)
: smoothInputs
const points =
smoothInputs.length > 1
? spline.points(smoothInputs)
: smoothInputs

@@ -894,4 +909,3 @@ let smoothInputsLower = []

smoothInputs[_start][1]
)
+ svgPoints
) + svgPoints
} else if (rangeArea) {

@@ -902,9 +916,9 @@ linePath =

smoothInputsLower[_start][1]
)
+ graphics.line(
) +
graphics.line(
smoothInputs[_start][0],
smoothInputs[_start][1]
)
+ svgPoints
+ graphics.line(
) +
svgPoints +
graphics.line(
smoothInputsLower[_end][0],

@@ -918,9 +932,8 @@ smoothInputsLower[_end][1]

smoothInputs[_start][1]
)
+ svgPoints
) + svgPoints
areaPath =
linePath
+ graphics.line(smoothInputs[_end][0], areaBottomY)
+ graphics.line(smoothInputs[_start][0], areaBottomY)
+ 'z'
linePath +
graphics.line(smoothInputs[_end][0], areaBottomY) +
graphics.line(smoothInputs[_start][0], areaBottomY) +
'z'
areaPaths.push(areaPath)

@@ -952,5 +965,3 @@ }

// Need to add path portion that will join to the upper path
linePath =
graphics.move(pX, y2Arrj[j])
+ graphics.line(pX, pY)
linePath = graphics.move(pX, y2Arrj[j]) + graphics.line(pX, pY)
} else {

@@ -979,5 +990,5 @@ linePath = graphics.move(pX, pY)

areaPath +=
graphics.line(pX, areaBottomY)
+ graphics.line(segmentStartX, areaBottomY)
+ 'z'
graphics.line(pX, areaBottomY) +
graphics.line(segmentStartX, areaBottomY) +
'z'
linePaths.push(linePath)

@@ -994,9 +1005,8 @@ areaPaths.push(areaPath)

linePath +=
graphics.curve(x, y, x, y, x, y2)
+ graphics.move(x, y2)
graphics.curve(x, y, x, y, x, y2) + graphics.move(x, y2)
}
areaPath +=
graphics.curve(x, y, x, y, x, areaBottomY)
+ graphics.line(segmentStartX, areaBottomY)
+ 'z'
graphics.curve(x, y, x, y, x, areaBottomY) +
graphics.line(segmentStartX, areaBottomY) +
'z'
linePaths.push(linePath)

@@ -1040,5 +1050,3 @@ areaPaths.push(areaPath)

// Need to add path portion that will join to the upper path
linePath =
graphics.move(pX, y2Arrj[j])
+ graphics.line(pX, pY)
linePath = graphics.move(pX, y2Arrj[j]) + graphics.line(pX, pY)
} else {

@@ -1067,5 +1075,5 @@ linePath = graphics.move(pX, pY)

areaPath +=
graphics.line(pX, areaBottomY)
+ graphics.line(segmentStartX, areaBottomY)
+ 'z'
graphics.line(pX, areaBottomY) +
graphics.line(segmentStartX, areaBottomY) +
'z'
linePaths.push(linePath)

@@ -1084,5 +1092,5 @@ areaPaths.push(areaPath)

areaPath +=
graphics.line(x, areaBottomY)
+ graphics.line(segmentStartX, areaBottomY)
+ 'z'
graphics.line(x, areaBottomY) +
graphics.line(segmentStartX, areaBottomY) +
'z'
linePaths.push(linePath)

@@ -1122,3 +1130,5 @@ areaPaths.push(areaPath)

let pSize = this.strokeWidth - w.config.markers.strokeWidth / 2
if (!(pSize > 0)) { pSize = 0 }
if (!(pSize > 0)) {
pSize = 0
}
// fixes apexcharts.js#1282, #1252

@@ -1139,2 +1149,2 @@ let elPointsWrap = this.markers.plotChartMarkers(

export default Line
export default Line

@@ -389,4 +389,4 @@ import Pie from './Pie'

const x = barStartCords.x - this.barLabels.margin
const y = barStartCords.y
const x = barStartCords.x + this.barLabels.offsetX
const y = barStartCords.y + this.barLabels.offsetY
let elText = graphics.drawText({

@@ -393,0 +393,0 @@ x,

@@ -117,4 +117,2 @@ import Animations from '../modules/Animations'

radius = markerConfig.pSize
let pathFillCircle = fill.fillPath({

@@ -138,3 +136,2 @@ seriesNumber: realIndex,

fill: pathFillCircle,
r: radius,
})

@@ -150,3 +147,3 @@

anim.animateMarker(el, 0, radius, speed, w.globals.easing, () => {
anim.animateMarker(el, speed, w.globals.easing, () => {
window.setTimeout(() => {

@@ -164,3 +161,3 @@ anim.animationCompleted(el)

index: realIndex,
'default-marker-size': radius,
'default-marker-size': markerConfig.pSize,
})

@@ -167,0 +164,0 @@

@@ -92,7 +92,4 @@ import Utils from '../utils/Utils'

*/
animateMarker(el, from, to, speed, easing, cb) {
if (!from) from = 0
animateMarker(el, speed, easing, cb) {
el.attr({
r: from,
opacity: 0,

@@ -102,3 +99,2 @@ })

.attr({
r: to,
opacity: 1,

@@ -105,0 +101,0 @@ })

@@ -108,6 +108,13 @@ import Graphics from '../Graphics'

}
let existingYLabels = Utils.listToArray(
w.globals.dom.baseEl.querySelectorAll(
`.apexcharts-yaxis[rel='${realIndex}'] .apexcharts-yaxis-label tspan`
)
).map((_) => _.textContent)
let label = graphics.drawText({
x: xPad,
y: lY,
text: val,
text: existingYLabels.indexOf(val) >= 0 ? '' : val,
textAnchor,

@@ -114,0 +121,0 @@ fontSize: yaxisFontSize,

@@ -99,5 +99,5 @@ import Bar from '../charts/Bar'

gl.dom.Paper.node.style.background =
cnf.theme.mode === 'dark' && !cnf.chart.background
? '#424242'
: cnf.theme.mode === 'light' && !cnf.chart.background
cnf.theme.mode === 'dark' && !cnf.chart.background
? '#424242'
: cnf.theme.mode === 'light' && !cnf.chart.background
? '#fff'

@@ -258,10 +258,8 @@ : cnf.chart.background

console.warn(
'Chart or series type ',
nonComboType,
' can not appear with other chart or series types.'
'Chart or series type ',
nonComboType,
' can not appear with other chart or series types.'
)
}
if (columnSeries.series.length > 0
&& cnf.plotOptions.bar.horizontal
) {
if (columnSeries.series.length > 0 && cnf.plotOptions.bar.horizontal) {
// horizontal bars not supported in mixed charts

@@ -296,3 +294,8 @@ comboCount -= columnSeries.length

elGraph.push(
...coreUtils.drawSeriesByGroup(areaSeries, gl.areaGroups, 'area', line)
...coreUtils.drawSeriesByGroup(
areaSeries,
gl.areaGroups,
'area',
line
)
)

@@ -321,3 +324,8 @@ }

elGraph.push(
...coreUtils.drawSeriesByGroup(lineSeries, gl.lineGroups, 'line', line)
...coreUtils.drawSeriesByGroup(
lineSeries,
gl.lineGroups,
'line',
line
)
)

@@ -424,2 +432,5 @@ }

if (!cnf.chart.width) cnf.chart.width = '100%'
if (!cnf.chart.height) cnf.chart.height = 'auto'
gl.svgWidth = cnf.chart.width

@@ -447,3 +458,3 @@ gl.svgHeight = cnf.chart.height

let heightUnit = cnf.chart.height
let heightUnit = String(cnf.chart.height)
.toString()

@@ -520,3 +531,3 @@ .split(/[0-9]+/g)

legendHeight =
new Legend(this.ctx).legendHelpers.getLegendBBox().clwh + 10
new Legend(this.ctx).legendHelpers.getLegendDimensions().clwh + 10
}

@@ -666,5 +677,5 @@

if (typeof w.config.chart.events.selection !== 'function') {
let targets = Array.isArray(w.config.chart.brush.targets) ? w.config.chart.brush.targets : [
w.config.chart.brush.target,
]
let targets = Array.isArray(w.config.chart.brush.targets)
? w.config.chart.brush.targets
: [w.config.chart.brush.target]
// retro compatibility with single target option

@@ -696,3 +707,3 @@ targets.forEach((target) => {

max: e.xaxis.max,
}
},
},

@@ -699,0 +710,0 @@ false,

@@ -346,5 +346,3 @@ import Formatters from '../Formatters'

!gl.rotateXLabels &&
!w.config.xaxis.labels.trim &&
(w.config.xaxis.tickPlacement !== 'between' ||
w.globals.isBarHorizontal)
!w.config.xaxis.labels.trim
) {

@@ -351,0 +349,0 @@ this.dCtx.xPadRight = lbWidth / 2 + 1

@@ -728,25 +728,87 @@ import Animations from './Animations'

getMarkerPath(x, y, type, size) {
let d = ''
switch (type) {
case 'cross':
size = size / 1.4
d = `M ${x - size} ${y - size} L ${x + size} ${y + size} M ${
x - size
} ${y + size} L ${x + size} ${y - size}`
break
case 'plus':
size = size / 1.12
d = `M ${x - size} ${y} L ${x + size} ${y} M ${x} ${y - size} L ${x} ${
y + size
}`
break
case 'star':
case 'sparkle':
let points = 5
size = size * 1.15
if (type === 'sparkle') {
size = size / 1.1
points = 4
}
const step = Math.PI / points
for (let i = 0; i <= 2 * points; i++) {
const angle = i * step
const radius = i % 2 === 0 ? size : size / 2
const xPos = x + radius * Math.sin(angle)
const yPos = y - radius * Math.cos(angle)
d += (i === 0 ? 'M' : 'L') + xPos + ',' + yPos
}
d += 'Z'
break
case 'triangle':
d = `M ${x} ${y - size}
L ${x + size} ${y + size}
L ${x - size} ${y + size}
Z`
break
case 'square':
case 'rect':
size = size / 1.125
d = `M ${x - size} ${y - size}
L ${x + size} ${y - size}
L ${x + size} ${y + size}
L ${x - size} ${y + size}
Z`
break
case 'diamond':
size = size * 1.05
d = `M ${x} ${y - size}
L ${x + size} ${y}
L ${x} ${y + size}
L ${x - size} ${y}
Z`
break
case 'line':
size = size / 1.1
d = `M ${x - size} ${y}
L ${x + size} ${y}`
break
case 'circle':
default:
size = size * 2
d = `M ${x}, ${y}
m -${size / 2}, 0
a ${size / 2},${size / 2} 0 1,0 ${size},0
a ${size / 2},${size / 2} 0 1,0 -${size},0`
break
}
return d
}
/**
* Draws an 'X' at the given coordinates.
* @param {number} x - The x-coordinate of the 'X'.
* @param {number} y - The y-coordinate of the 'X'.
* @param {number} size - The size of the 'X'.
* @param {Object} opts - The options for the 'X'.
* @returns {Object} The created 'X'.
* @param {number} x - The x-coordinate of the marker
* @param {number} y - The y-coordinate of the marker.
* @param {number} size - The size of the marker
* @param {Object} opts - The options for the marker.
* @returns {Object} The created marker.
*/
drawXMarker(x, y, type, size, opts) {
let halfSize = size / 2
const d =
type === 'cross'
? `M ${x - halfSize} ${y - halfSize} L ${x + halfSize} ${
y + halfSize
} M ${x - halfSize} ${y + halfSize} L ${x + halfSize} ${
y - halfSize
}`
: `M ${x - halfSize} ${y} L ${x + halfSize} ${y} M ${x} ${
y - halfSize
} L ${x} ${y + halfSize}`
drawMarkerShape(x, y, type, size, opts) {
const path = this.drawPath({
d,
d: this.getMarkerPath(x, y, type, size, opts),
stroke: opts.pointStrokeColor,

@@ -756,2 +818,4 @@ strokeDashArray: opts.pointStrokeDashArray,

fill: opts.pointFillColor,
fillOpacity: opts.pointFillOpacity,
strokeOpacity: opts.pointStrokeOpacity,
})

@@ -762,2 +826,3 @@

cy: y,
shape: opts.shape,
class: opts.class ? opts.class : '',

@@ -773,75 +838,18 @@ })

let elPoint = null
if (opts?.shape === 'cross') {
elPoint = this.drawXMarker(x, y, opts?.shape, size * 1.8, {
...opts,
pointStrokeColor: opts.pointFillColor,
})
} else if (opts?.shape === 'plus') {
elPoint = this.drawXMarker(x, y, opts?.shape, size * 2, {
...opts,
pointStrokeColor: opts.pointFillColor,
})
} else if (opts?.shape === 'line') {
elPoint = this.drawLine(
x - size,
y,
x + size,
y,
opts.pointFillColor,
opts.pointStrokeDashArray,
opts.pointStrokeWidth,
opts.pointStrokeLineCap
)
elPoint.attr({
cx: x,
cy: y,
class: opts.class ? opts.class : '',
})
} else if (opts.shape === 'square' || opts.shape === 'rect') {
let radius = opts.pRadius === undefined ? size : opts.pRadius
if (y === null || !size) {
size = 0
radius = 0
}
let nSize = size * 2
let p = this.drawRect(nSize, nSize, nSize, nSize, radius)
p.attr({
x: x - nSize / 2,
y: y - nSize / 2,
cx: x,
cy: y,
class: opts.class ? opts.class : '',
fill: opts.pointFillColor,
'fill-opacity': opts.pointFillOpacity ? opts.pointFillOpacity : 1,
stroke: opts.pointStrokeColor,
'stroke-width': opts.pointStrokeWidth ? opts.pointStrokeWidth : 0,
'stroke-opacity': opts.pointStrokeOpacity ? opts.pointStrokeOpacity : 1,
})
elPoint = p
} else if (opts.shape === 'circle' || !opts.shape) {
if (!Utils.isNumber(y)) {
size = 0
y = 0
}
elPoint = this.drawCircle(size, {
cx: x,
cy: y,
class: opts.class ? opts.class : '',
stroke: opts.pointStrokeColor,
fill: opts.pointFillColor,
'fill-opacity': opts.pointFillOpacity ? opts.pointFillOpacity : 1,
'stroke-width': opts.pointStrokeWidth ? opts.pointStrokeWidth : 0,
'stroke-opacity': opts.pointStrokeOpacity ? opts.pointStrokeOpacity : 1,
})
if (!Utils.isNumber(y)) {
size = 0
y = 0
}
return elPoint
return this.drawMarkerShape(x, y, opts?.shape, size, {
...opts,
...(opts.shape === 'line' ||
opts.shape === 'plus' ||
opts.shape === 'cross'
? {
pointStrokeColor: opts.pointFillColor,
pointStrokeOpacity: opts.pointFillOpacity,
}
: {}),
})
}

@@ -848,0 +856,0 @@

@@ -45,4 +45,2 @@ import Graphics from '../Graphics'

display: flex;
}
.apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series, .apexcharts-legend.apx-legend-position-top .apexcharts-legend-series{
align-items: center;

@@ -63,3 +61,3 @@ }

cursor: pointer;
margin-right: 3px;
margin-right: 1px;
}

@@ -84,11 +82,9 @@

getLegendBBox() {
getLegendDimensions() {
const w = this.w
let currLegendsWrap =
w.globals.dom.baseEl.querySelector('.apexcharts-legend')
let currLegendsWrapRect = currLegendsWrap.getBoundingClientRect()
let currLegendsWrapWidth = currLegendsWrap.offsetWidth
let currLegendsWrapHeight = currLegendsWrap.offsetHeight
let currLegendsWrapWidth = currLegendsWrapRect.width
let currLegendsWrapHeight = currLegendsWrapRect.height
return {

@@ -95,0 +91,0 @@ clwh: currLegendsWrapHeight,

@@ -75,39 +75,30 @@ import CoreUtils from '../CoreUtils'

let mShape = w.config.legend.markers.shape || w.config.markers.shape
let mSize = w.config.legend.markers.size
let mOffsetX = w.config.legend.markers.offsetX
let mOffsetY = w.config.legend.markers.offsetY
let mBorderWidth = w.config.legend.markers.strokeWidth
let mBorderColor = w.config.legend.markers.strokeColor
let mBorderRadius = w.config.legend.markers.radius
let shape = mShape
if (Array.isArray(mShape)) {
shape = mShape[i]
}
let mSize = Array.isArray(w.config.legend.markers.size)
? parseFloat(w.config.legend.markers.size[i])
: parseFloat(w.config.legend.markers.size)
let mOffsetX = Array.isArray(w.config.legend.markers.offsetX)
? parseFloat(w.config.legend.markers.offsetX[i])
: parseFloat(w.config.legend.markers.offsetX)
let mOffsetY = Array.isArray(w.config.legend.markers.offsetY)
? parseFloat(w.config.legend.markers.offsetY[i])
: parseFloat(w.config.legend.markers.offsetY)
let mBorderWidth = Array.isArray(w.config.legend.markers.strokeWidth)
? parseFloat(w.config.legend.markers.strokeWidth[i])
: parseFloat(w.config.legend.markers.strokeWidth)
let mStyle = elMarker.style
mStyle.height =
(Array.isArray(mSize)
? parseFloat(mSize[i]) * 2
: parseFloat(mSize) * 2) + 'px'
mStyle.width =
(Array.isArray(mSize)
? parseFloat(mSize[i]) * 2
: parseFloat(mSize) * 2) + 'px'
mStyle.left =
(Array.isArray(mOffsetX)
? parseFloat(mOffsetX[i])
: parseFloat(mOffsetX)) + 'px'
mStyle.top =
(Array.isArray(mOffsetY)
? parseFloat(mOffsetY[i])
: parseFloat(mOffsetY)) + 'px'
mStyle.borderWidth = Array.isArray(mBorderWidth)
? mBorderWidth[i]
: mBorderWidth
mStyle.borderColor = Array.isArray(mBorderColor)
? mBorderColor[i]
: mBorderColor
mStyle.borderRadius = Array.isArray(mBorderRadius)
? parseFloat(mBorderRadius[i]) + 'px'
: parseFloat(mBorderRadius) + 'px'
mStyle.height = (mSize + mBorderWidth) * 2 + 'px'
mStyle.width = (mSize + mBorderWidth) * 2 + 'px'
mStyle.left = mOffsetX + 'px'
mStyle.top = mOffsetY + 'px'
if (w.config.legend.markers.customHTML) {
mStyle.background = 'transparent'
mStyle.color = fillcolor[i]
if (Array.isArray(w.config.legend.markers.customHTML)) {

@@ -120,25 +111,10 @@ if (w.config.legend.markers.customHTML[i]) {

}
}
let shape = mShape
if (Array.isArray(mShape)) {
shape = mShape[i]
}
if (shape !== 'circle') {
} else {
let markers = new Markers(this.ctx)
const markerConfig = markers.getMarkerConfig({
cssClass: 'apexcharts-marker',
cssClass: `apexcharts-legend-marker apexcharts-marker apexcharts-marker-${shape}`,
seriesIndex: i,
strokeWidth: mBorderWidth,
size: mSize,
pRadius: Array.isArray(mBorderRadius)
? mBorderRadius[i]
: mBorderRadius,
strokeWidth:
shape === 'plus' || shape === 'cross' || shape === 'line'
? Array.isArray(mBorderWidth)
? mBorderWidth[i]
: mBorderWidth
: 0,
})

@@ -152,26 +128,18 @@

: markerConfig.pointFillColor,
shape,
})
const shapes = SVG.select('.apexcharts-marker').members
shapes.forEach((shape) => {
shape.node.style.transform = 'translate(50%, 50%)'
const shapesEls = SVG.select(
'.apexcharts-legend-marker.apexcharts-marker'
).members
shapesEls.forEach((shapeEl) => {
if (shapeEl.node.classList.contains('apexcharts-marker-triangle')) {
shapeEl.node.style.transform = 'translate(50%, 45%)'
} else {
shapeEl.node.style.transform = 'translate(50%, 50%)'
}
})
SVGMarker.add(marker)
} else {
mStyle.color = fillcolor[i]
mStyle.borderRadius = '100%'
if (!w.config.legend.markers.customHTML) {
mStyle.background = fillcolor[i]
mStyle.setProperty('background', fillcolor[i], 'important')
// override with data color
if (w.globals.seriesColors[i] !== undefined) {
mStyle.background = w.globals.seriesColors[i]
mStyle.color = w.globals.seriesColors[i]
}
}
}
return elMarker

@@ -412,3 +380,3 @@ }

let lRect = this.legendHelpers.getLegendBBox()
let lRect = this.legendHelpers.getLegendDimensions()

@@ -440,3 +408,3 @@ let dimensions = new Dimensions(this.ctx)

let lRect = this.legendHelpers.getLegendBBox()
let lRect = this.legendHelpers.getLegendDimensions()

@@ -443,0 +411,0 @@ let offsetY = 20

@@ -115,3 +115,3 @@ import Filters from './Filters'

if (pSize) {
if (typeof pSize !== 'undefined') {
opts.pSize = pSize

@@ -214,26 +214,26 @@ }

addEvents(circle) {
addEvents(marker) {
const w = this.w
const graphics = new Graphics(this.ctx)
circle.node.addEventListener(
marker.node.addEventListener(
'mouseenter',
graphics.pathMouseEnter.bind(this.ctx, circle)
graphics.pathMouseEnter.bind(this.ctx, marker)
)
circle.node.addEventListener(
marker.node.addEventListener(
'mouseleave',
graphics.pathMouseLeave.bind(this.ctx, circle)
graphics.pathMouseLeave.bind(this.ctx, marker)
)
circle.node.addEventListener(
marker.node.addEventListener(
'mousedown',
graphics.pathMouseDown.bind(this.ctx, circle)
graphics.pathMouseDown.bind(this.ctx, marker)
)
circle.node.addEventListener('click', w.config.markers.onClick)
circle.node.addEventListener('dblclick', w.config.markers.onDblClick)
marker.node.addEventListener('click', w.config.markers.onClick)
marker.node.addEventListener('dblclick', w.config.markers.onDblClick)
circle.node.addEventListener(
marker.node.addEventListener(
'touchstart',
graphics.pathMouseDown.bind(this.ctx, circle),
graphics.pathMouseDown.bind(this.ctx, marker),
{ passive: true }

@@ -240,0 +240,0 @@ )

@@ -39,33 +39,2 @@ import Utils from '../utils/Utils'

}
let firstXIndex = 0
let lastXIndex = 0
let seriesX = undefined
if (gl.seriesX.length >= endingSeriesIndex) {
seriesX = [...new Set([].concat(...gl.seriesX.slice(startingSeriesIndex, endingSeriesIndex)))]
firstXIndex = 0
lastXIndex = seriesX.length - 1
// Eventually brushSource will be set if the current chart is a target.
// That is, after the appropriate event causes us to update.
let brush = gl.brushSource?.w.config.chart.brush
if ((cnf.chart.zoom.enabled && cnf.chart.zoom.autoScaleYaxis)
|| (brush?.enabled && brush?.autoScaleYaxis)
) {
// Scale the Y axis to the min..max within the zoomed X axis domain.
if (cnf.xaxis.min) {
for (
firstXIndex = 0;
firstXIndex < lastXIndex && seriesX[firstXIndex] < cnf.xaxis.min;
firstXIndex++
) {}
}
if (cnf.xaxis.max) {
for (
;
lastXIndex > firstXIndex && seriesX[lastXIndex] > cnf.xaxis.max;
lastXIndex--
) {}
}
}
}

@@ -86,2 +55,13 @@ let series = gl.series

}
let autoScaleYaxis = false
if (gl.seriesX.length >= endingSeriesIndex) {
// Eventually brushSource will be set if the current chart is a target.
// That is, after the appropriate event causes us to update.
let brush = gl.brushSource?.w.config.chart.brush
if ((cnf.chart.zoom.enabled && cnf.chart.zoom.autoScaleYaxis)
|| (brush?.enabled && brush?.autoScaleYaxis)
) {
autoScaleYaxis = true
}
}

@@ -107,5 +87,20 @@ for (let i = startingSeriesIndex; i < endingSeriesIndex; i++) {

}
if (!seriesX) {
firstXIndex = 0
lastXIndex = gl.series[i].length
let firstXIndex = 0
let lastXIndex = series[i].length - 1
if (autoScaleYaxis) {
// Scale the Y axis to the min..max within the possibly zoomed X axis domain.
if (cnf.xaxis.min) {
for (
;
firstXIndex < lastXIndex && gl.seriesX[i][firstXIndex] < cnf.xaxis.min;
firstXIndex++
) {}
}
if (cnf.xaxis.max) {
for (
;
lastXIndex > firstXIndex && gl.seriesX[i][lastXIndex] > cnf.xaxis.max;
lastXIndex--
) {}
}
}

@@ -112,0 +107,0 @@ for (let j = firstXIndex; j <= lastXIndex && j < gl.series[i].length; j++) {

@@ -326,3 +326,2 @@ import Utils from '../../utils/Utils'

shape: 'square',
radius: 2,
},

@@ -472,3 +471,3 @@ },

markers: {
size: 5,
size: 7,
strokeWidth: 1,

@@ -1077,3 +1076,3 @@ strokeColors: '#111',

markers: {
size: 3,
size: 5,
strokeWidth: 1,

@@ -1080,0 +1079,0 @@ strokeOpacity: 1,

@@ -101,3 +101,3 @@ /**

offsetY: 0,
radius: 2,
// radius: 2, // DEPRECATED
cssClass: '',

@@ -132,3 +132,3 @@ },

customSVG: {
// this will be deprecated in the next major version as it is going to be replaced with a better alternative below
// this will be deprecated in the next major version as it is going to be replaced with a better alternative below (image)
SVG: undefined,

@@ -588,3 +588,4 @@ cssClass: undefined,

enabled: false,
margin: 5,
offsetX: 0,
offsetY: 0,
useSeriesColors: true,

@@ -812,9 +813,9 @@ fontFamily: undefined,

markers: {
size: 6,
size: 7,
fillColors: undefined,
// width: 12, // [DEPRECATED]
// height: 12, // [DEPRECATED]
strokeWidth: 2,
strokeWidth: 1,
shape: undefined, // circle, square, line, plus, cross, star
radius: 2,
// radius: 2, // DEPRECATED
offsetX: 0,

@@ -849,3 +850,3 @@ offsetY: 0,

shape: 'circle', // circle, square, line, plus, cross
radius: 2,
// radius: 2, // DEPRECATED
offsetX: 0,

@@ -852,0 +853,0 @@ offsetY: 0,

@@ -200,3 +200,3 @@ import Utils from '../../utils/Utils'

if (x + ttCtx.tooltipRect.ttWidth > w.globals.gridWidth && !isReversed) {
if (x + ttCtx.tooltipRect.ttWidth > w.globals.gridWidth) {
x = x - ttCtx.tooltipRect.ttWidth

@@ -232,15 +232,2 @@ } else if (x < 0) {

) {
if (isReversed) {
x = x - ttCtx.tooltipRect.ttWidth
if (x < 0) {
x = 0
}
}
if (
isReversed &&
!(w.globals.isBarHorizontal && ttCtx.tooltipUtil.hasBars())
) {
y = y + barHeight - (w.globals.series[i][j] < 0 ? barHeight : 0) * 2
}
y = y + w.globals.translateY - ttCtx.tooltipRect.ttHeight / 2

@@ -247,0 +234,0 @@

@@ -64,3 +64,3 @@ import Graphics from '../Graphics'

cssClass: PointClasses,
seriesIndex: Number(pointsMain.getAttribute('data:realIndex')) // fixes apexcharts/apexcharts.js #1427
seriesIndex: Number(pointsMain.getAttribute('data:realIndex')), // fixes apexcharts/apexcharts.js #1427
})

@@ -163,4 +163,8 @@

if (newSize < 0) newSize = 0
elPoint.setAttribute('r', newSize)
if (newSize < 0) {
newSize = 0
}
const path = this.ttCtx.tooltipUtil.getPathFromPoint(point, newSize)
point.setAttribute('d', path)
}

@@ -171,3 +175,4 @@ }

const size = parseFloat(point.getAttribute('default-marker-size'))
point.setAttribute('r', size)
const path = this.ttCtx.tooltipUtil.getPathFromPoint(point, size)
point.setAttribute('d', path)
}

@@ -184,6 +189,8 @@

const size = parseFloat(points[p].getAttribute('default-marker-size'))
if (Utils.isNumber(size) && size >= 0) {
points[p].setAttribute('r', size)
const path = this.ttCtx.tooltipUtil.getPathFromPoint(points[p], size)
points[p].setAttribute('d', path)
} else {
points[p].setAttribute('r', 0)
points[p].setAttribute('d', 'M0,0')
}

@@ -190,0 +197,0 @@ }

@@ -166,5 +166,5 @@ import Graphics from '../Graphics'

* @param {int} - cy = point's y position, wherever point's y is, you need to move tooltip
* @param {int} - r = point's radius
* @param {int} - markerSize = point's size
*/
moveTooltip(cx, cy, r = null) {
moveTooltip(cx, cy, markerSize = null) {
let w = this.w

@@ -176,9 +176,9 @@

let pointR = r !== null ? parseFloat(r) : 1
let pointSize = markerSize !== null ? parseFloat(markerSize) : 1
let x = parseFloat(cx) + pointR + 5
let y = parseFloat(cy) + pointR / 2 // - tooltipRect.ttHeight / 2
let x = parseFloat(cx) + pointSize + 5
let y = parseFloat(cy) + pointSize / 2 // - tooltipRect.ttHeight / 2
if (x > w.globals.gridWidth / 2) {
x = x - tooltipRect.ttWidth - pointR - 10
x = x - tooltipRect.ttWidth - pointSize - 10
}

@@ -249,2 +249,3 @@

let cy = 0
const graphics = new Graphics(this.ctx)

@@ -270,14 +271,12 @@ let pointsArr = w.globals.pointsArray

let point = w.globals.dom.baseEl.querySelector(
`.apexcharts-series[data\\:realIndex='${capturedSeries}'] .apexcharts-series-markers circle`
`.apexcharts-series[data\\:realIndex='${capturedSeries}'] .apexcharts-series-markers path`
)
if (point && cy < w.globals.gridHeight && cy > 0) {
point.setAttribute('r', hoverSize)
const shape = point.getAttribute('shape')
point.setAttribute('cx', cx)
point.setAttribute('cy', cy)
const path = graphics.getMarkerPath(cx, cy, shape, hoverSize * 1.5)
point.setAttribute('d', path)
}
// point.style.opacity = w.config.markers.hover.opacity
this.moveXCrosshairs(cx)

@@ -302,2 +301,4 @@

let series = new Series(this.ctx)
const graphics = new Graphics(this.ctx)
activeSeries = series.getActiveConfigSeriesIndex('asc', [

@@ -335,2 +336,4 @@ 'line',

const shape = points[p].getAttribute('shape')
if (w.config.chart.type === 'rangeArea' && !w.globals.comboCharts) {

@@ -349,6 +352,6 @@ const rangeStartIndex = j + w.globals.series[p].length

) {
points[p] && points[p].setAttribute('r', hoverSize)
points[p] && points[p].setAttribute('cy', pcy)
const path = graphics.getMarkerPath(cx, pcy, shape, hoverSize)
points[p].setAttribute('d', path)
} else {
points[p] && points[p].setAttribute('r', 0)
points[p].setAttribute('d', '')
}

@@ -355,0 +358,0 @@ }

@@ -601,2 +601,3 @@ import Labels from './Labels'

w.globals.dom.baseEl.classList.add('apexcharts-tooltip-active')
opt.tooltipEl.classList.add('apexcharts-active')

@@ -618,2 +619,3 @@ } else if (e.type === 'mouseout' || e.type === 'touchend') {

if (e.type === 'mousemove' || e.type === 'touchmove') {
w.globals.dom.baseEl.classList.add('apexcharts-tooltip-active')
tooltipEl.classList.add('apexcharts-active')

@@ -650,2 +652,3 @@

tooltipEl.classList.remove('apexcharts-active')
w.globals.dom.baseEl.classList.remove('apexcharts-tooltip-active')
if (w.config.legend.tooltipHoverFormatter) {

@@ -741,2 +744,3 @@ this.legendLabels.forEach((l) => {

const xcrosshairs = this.getElXCrosshairs()
w.globals.dom.baseEl.classList.remove('apexcharts-tooltip-active')

@@ -743,0 +747,0 @@ opt.tooltipEl.classList.remove('apexcharts-active')

import Utilities from '../../utils/Utils'
import Graphics from '../Graphics'

@@ -313,2 +314,9 @@ /**

getPathFromPoint(point, size) {
let cx = Number(point.getAttribute('cx'))
let cy = Number(point.getAttribute('cy'))
let shape = point.getAttribute('shape')
return new Graphics(this.ctx).getMarkerPath(cx, cy, shape, size)
}
getElBars() {

@@ -315,0 +323,0 @@ return this.w.globals.dom.baseEl.querySelectorAll(

@@ -562,12 +562,10 @@ import Graphics from './Graphics'

// We can use the index of any series referenced by the Yaxis
// because they will all return the same value.
if (w.globals.seriesYAxisMap[index].length > 0) {
let seriesIndex = w.globals.seriesYAxisMap[index][0]
yHighestValue.push(
w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[seriesIndex] * me.startY
)
yLowestValue.push(
w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[seriesIndex] * me.endY
)
}
// because they will all return the same value, so we choose the first.
let seriesIndex = w.globals.seriesYAxisMap[index][0]
yHighestValue.push(
w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[seriesIndex] * me.startY
)
yLowestValue.push(
w.globals.yAxisScale[index].niceMax - xyRatios.yRatio[seriesIndex] * me.endY
)
})

@@ -574,0 +572,0 @@

@@ -440,3 +440,2 @@ // Typescript declarations for Apex class and module.

offsetY?: number
radius?: number
cssClass?: string

@@ -754,3 +753,4 @@ }

enabled?: boolean
margin?: number
offsetX?: number
offsetY?: number
useSeriesColors?: boolean

@@ -835,3 +835,2 @@ fontFamily?: string

offsetY?: number
radius?: number
customHTML?(): any

@@ -856,3 +855,3 @@ onClick?(): void

type MarkerShapeOptions = "circle" | "square" | "rect" | "line" | 'cross' | 'plus'
type MarkerShapeOptions = "circle" | "square" | "rect" | "line" | 'cross' | 'plus' | 'star' | 'sparkle' | 'diamond' | 'triangle'

@@ -879,4 +878,3 @@ type ApexMarkerShape = MarkerShapeOptions | MarkerShapeOptions[]

discrete?: ApexDiscretePoint[]
shape?: ApexMarkerShape
radius?: number
shape?: ApexMarkerShape
offsetX?: number

@@ -883,0 +881,0 @@ offsetY?: number

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc