Skip to content

Commit

Permalink
fix #4623; use x value from w.config.series instead of w.globals.labels
Browse files Browse the repository at this point in the history
  • Loading branch information
@junedchhipa
junedchhipa committed Oct 11, 2024
1 parent 4b82033 commit cbeb9cb
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 98 deletions.
3 changes: 2 additions & 1 deletion samples/react/timelines/multi-series-group-rows.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,8 @@
const toYear = new Date(opts.y2).getFullYear()

const w = opts.ctx.w
let ylabel = w.globals.labels[opts.dataPointIndex]
let ylabel =
w.config.series[opts.seriesIndex].data?.[opts.dataPointIndex]?.x
let seriesName = w.config.series[opts.seriesIndex].name
? w.config.series[opts.seriesIndex].name
: ''
Expand Down
3 changes: 2 additions & 1 deletion samples/source/timelines/multi-series-group-rows.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ tooltip: {
const toYear = new Date(opts.y2).getFullYear()

const w = opts.ctx.w
let ylabel = w.globals.labels[opts.dataPointIndex]
let ylabel =
w.config.series[opts.seriesIndex].data?.[opts.dataPointIndex]?.x
let seriesName = w.config.series[opts.seriesIndex].name
? w.config.series[opts.seriesIndex].name
: ''
Expand Down
190 changes: 97 additions & 93 deletions samples/vanilla-js/timelines/multi-series-group-rows.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@
<link href="../../assets/styles.css" rel="stylesheet" />

<style>

#chart {
max-width: 650px;
margin: 35px auto;
}

#chart {
max-width: 650px;
margin: 35px auto;
}
</style>

<script>
Expand All @@ -32,30 +30,27 @@
)
</script>


<script src="../../../dist/apexcharts.js"></script>


<script>
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
var _seed = 42
Math.random = function () {
_seed = (_seed * 16807) % 2147483647
return (_seed - 1) / 2147483646
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
</head>

<body>
<div id="chart"></div>
<div id="chart"></div>

<script>

var options = {
series: [
var options = {
series: [
// George Washington
{
name: 'George Washington',
Expand All @@ -64,10 +59,10 @@
x: 'President',
y: [
new Date(1789, 3, 30).getTime(),
new Date(1797, 2, 4).getTime()
]
new Date(1797, 2, 4).getTime(),
],
},
]
],
},
// John Adams
{
Expand All @@ -77,17 +72,17 @@
x: 'President',
y: [
new Date(1797, 2, 4).getTime(),
new Date(1801, 2, 4).getTime()
]
new Date(1801, 2, 4).getTime(),
],
},
{
x: 'Vice President',
y: [
new Date(1789, 3, 21).getTime(),
new Date(1797, 2, 4).getTime()
]
}
]
new Date(1797, 2, 4).getTime(),
],
},
],
},
// Thomas Jefferson
{
Expand All @@ -97,24 +92,24 @@
x: 'President',
y: [
new Date(1801, 2, 4).getTime(),
new Date(1809, 2, 4).getTime()
]
new Date(1809, 2, 4).getTime(),
],
},
{
x: 'Vice President',
y: [
new Date(1797, 2, 4).getTime(),
new Date(1801, 2, 4).getTime()
]
new Date(1801, 2, 4).getTime(),
],
},
{
x: 'Secretary of State',
y: [
new Date(1790, 2, 22).getTime(),
new Date(1793, 11, 31).getTime()
]
}
]
new Date(1793, 11, 31).getTime(),
],
},
],
},
// Aaron Burr
{
Expand All @@ -124,10 +119,10 @@
x: 'Vice President',
y: [
new Date(1801, 2, 4).getTime(),
new Date(1805, 2, 4).getTime()
]
}
]
new Date(1805, 2, 4).getTime(),
],
},
],
},
// George Clinton
{
Expand All @@ -137,10 +132,10 @@
x: 'Vice President',
y: [
new Date(1805, 2, 4).getTime(),
new Date(1812, 3, 20).getTime()
]
}
]
new Date(1812, 3, 20).getTime(),
],
},
],
},
// John Jay
{
Expand All @@ -150,10 +145,10 @@
x: 'Secretary of State',
y: [
new Date(1789, 8, 25).getTime(),
new Date(1790, 2, 22).getTime()
]
}
]
new Date(1790, 2, 22).getTime(),
],
},
],
},
// Edmund Randolph
{
Expand All @@ -163,10 +158,10 @@
x: 'Secretary of State',
y: [
new Date(1794, 0, 2).getTime(),
new Date(1795, 7, 20).getTime()
]
}
]
new Date(1795, 7, 20).getTime(),
],
},
],
},
// Timothy Pickering
{
Expand All @@ -176,10 +171,10 @@
x: 'Secretary of State',
y: [
new Date(1795, 7, 20).getTime(),
new Date(1800, 4, 12).getTime()
]
}
]
new Date(1800, 4, 12).getTime(),
],
},
],
},
// Charles Lee
{
Expand All @@ -189,10 +184,10 @@
x: 'Secretary of State',
y: [
new Date(1800, 4, 13).getTime(),
new Date(1800, 5, 5).getTime()
]
}
]
new Date(1800, 5, 5).getTime(),
],
},
],
},
// John Marshall
{
Expand All @@ -202,10 +197,10 @@
x: 'Secretary of State',
y: [
new Date(1800, 5, 13).getTime(),
new Date(1801, 2, 4).getTime()
]
}
]
new Date(1801, 2, 4).getTime(),
],
},
],
},
// Levi Lincoln
{
Expand All @@ -215,10 +210,10 @@
x: 'Secretary of State',
y: [
new Date(1801, 2, 5).getTime(),
new Date(1801, 4, 1).getTime()
]
}
]
new Date(1801, 4, 1).getTime(),
],
},
],
},
// James Madison
{
Expand All @@ -228,49 +223,62 @@
x: 'Secretary of State',
y: [
new Date(1801, 4, 2).getTime(),
new Date(1809, 2, 3).getTime()
]
}
]
new Date(1809, 2, 3).getTime(),
],
},
],
},
],
chart: {
chart: {
height: 350,
type: 'rangeBar'
type: 'rangeBar',
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '50%',
rangeBarGroupRows: true
}
rangeBarGroupRows: true,
},
},
colors: [
"#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0",
"#3F51B5", "#546E7A", "#D4526E", "#8D5B4C", "#F86624",
"#D7263D", "#1B998B", "#2E294E", "#F46036", "#E2C044"
'#008FFB',
'#00E396',
'#FEB019',
'#FF4560',
'#775DD0',
'#3F51B5',
'#546E7A',
'#D4526E',
'#8D5B4C',
'#F86624',
'#D7263D',
'#1B998B',
'#2E294E',
'#F46036',
'#E2C044',
],
fill: {
type: 'solid'
type: 'solid',
},
xaxis: {
type: 'datetime'
type: 'datetime',
},
legend: {
position: 'right'
position: 'right',
},
tooltip: {
custom: function(opts) {
custom: function (opts) {
const fromYear = new Date(opts.y1).getFullYear()
const toYear = new Date(opts.y2).getFullYear()

const w = opts.ctx.w
let ylabel = w.globals.labels[opts.dataPointIndex]
let ylabel =
w.config.series[opts.seriesIndex].data?.[opts.dataPointIndex]?.x
let seriesName = w.config.series[opts.seriesIndex].name
? w.config.series[opts.seriesIndex].name
: ''
const color = w.globals.colors[opts.seriesIndex]

return (
'<div class="apexcharts-tooltip-rangebar">' +
'<div> <span class="series-name" style="color: ' +
Expand All @@ -287,16 +295,12 @@
'</span></div>' +
'</div>'
)
}
}
};
},
},
}

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();


var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
</script>


</body>
</html>
3 changes: 2 additions & 1 deletion samples/vue/timelines/multi-series-group-rows.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,8 @@
const toYear = new Date(opts.y2).getFullYear()

const w = opts.ctx.w
let ylabel = w.globals.labels[opts.dataPointIndex]
let ylabel =
w.config.series[opts.seriesIndex].data?.[opts.dataPointIndex]?.x
let seriesName = w.config.series[opts.seriesIndex].name
? w.config.series[opts.seriesIndex].name
: ''
Expand Down
Loading

0 comments on commit cbeb9cb

Please sign in to comment.