apexcharts
Advanced tools
Comparing version 3.50.0 to 3.51.0
{ | ||
"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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
4603717
75416