javier/investbrain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

unique IDs for each chart

Browse Source
This commit is contained in:
hackerESQ
2024-08-04 18:28:03 -05:00
parent c9922ed370
commit b64117dbb9
3 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/ib-apex-chart.blade.php
+19 -11
View File
@@ -14,7 +14,6 @@
'show' => false, 'show' => false,
], ],
], ],
'colors' => ['#00E396', '#0090FF'], 'colors' => ['#00E396', '#0090FF'],
'stroke' => [ 'stroke' => [
'curve' => "smooth", 'curve' => "smooth",
@@ -55,17 +54,16 @@
] ]
], ],
'grid' => [ 'grid' => [
'strokeColor' => "#000",
'padding' => [ 'padding' => [
'top' => 0, 'top' => 0,
'left' => -30, 'left' => -30,
'right' => 0, 'right' => 0,
'bottom' => 15 'bottom' => -5
] ]
], ],
'legend' => [ 'legend' => [
'show' => false, 'show' => false,
// 'position' => 'top',
// 'horizontalAlign' => 'left'
], ],
], $data); ], $data);
$data = json_encode($data) $data = json_encode($data)
@@ -100,7 +98,10 @@
chart.render(); chart.render();
async function renderCustomLegend(chartContext) { async function renderCustomLegend(chartContext) {
var legendContainer = document.querySelector('#chart-legend'); var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
if (!legendContainer) return;
legendContainer.innerHTML = ''; // Clear any existing legend items legendContainer.innerHTML = ''; // Clear any existing legend items
chartContext.w.globals.seriesNames.forEach(function (seriesName, i) { chartContext.w.globals.seriesNames.forEach(function (seriesName, i) {
@@ -123,13 +124,13 @@
legendContainer.appendChild(legendItem); legendContainer.appendChild(legendItem);
// Initial visibility state // Initial visibility state
console.log(chartContext.w.globals.collapsedSeriesIndices.includes(i))
var isCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(i); var isCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(i);
if (isCollapsed) { if (isCollapsed) {
legendItem.classList.add('opacity-50'); legendItem.classList.add('opacity-50');
} }
legendItem.addEventListener('click', function () { legendItem.addEventListener('click', function () {
var seriesIndex = parseInt(this.getAttribute('data-series-index'), 10); var seriesIndex = parseInt(this.getAttribute('data-series-index'), 10);
var isCurrentlyCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(seriesIndex); var isCurrentlyCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(seriesIndex);
@@ -144,12 +145,19 @@
}); });
} }
function generateRandomArray(length, min, max) {
const randomArray = [];
for (let i = 0; i < length; i++) {
randomArray.push(Math.floor(Math.random() * (max - min + 1)) + min);
}
return randomArray;
}
function generateDayWiseTimeSeries(s, count) { function generateDayWiseTimeSeries(s, count) {
var values = [[ var values = [
4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5 generateRandomArray(20, 2, 60),
], [ generateRandomArray(20, 2, 60)
2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2 ];
]];
var i = 0; var i = 0;
var series = []; var series = [];
var x = new Date('11 Nov 2012').getTime(); var x = new Date('11 Nov 2012').getTime();
resources/views/livewire/dashboard.blade.php
+3 -3
View File
@@ -89,7 +89,7 @@ new class extends Component {
<div class="flex items-center"> <div class="flex items-center">
<h2 class="text-xl mr-4">Performance</h2> <h2 class="text-xl mr-4">Performance</h2>
<div id="chart-legend" class="flex space-around"></div> <div id="chart-legend-dashboard" class="flex space-around"></div>
</div> </div>
@@ -110,9 +110,9 @@ new class extends Component {
</div> </div>
<div <div
class="relative h-[280px]" class="h-[280px] mb-5"
> >
<x-ib-apex-chart :data="[]" name="portfolio" /> <x-ib-apex-chart :data="[]" name="dashboard" />
</div> </div>
resources/views/livewire/portfolio/show.blade.php
+6 -6
View File
@@ -81,7 +81,7 @@ new class extends Component {
<div class="flex items-center"> <div class="flex items-center">
<h2 class="text-xl mr-4">Performance</h2> <h2 class="text-xl mr-4">Performance</h2>
<div id="chart-legend" class="flex space-around"></div> <div id="chart-legend-portfolio-{{ $portfolio->id }}" class="flex space-around"></div>
</div> </div>
@@ -101,12 +101,12 @@ new class extends Component {
</div> </div>
<div {{-- <div
class="relative h-[280px]" class="h-[280px]"
> > --}}
<x-ib-apex-chart :data="[]" name="portfolio" /> <x-ib-apex-chart :data="[]" name="portfolio-{{ $portfolio->id }}" />
</div> {{-- </div> --}}
</x-card> </x-card>