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

adds

Browse Source 
test dashboard data
This commit is contained in:
hackerESQ
2024-08-06 22:59:17 -05:00
parent 38e07cadd7
commit eb260b2990
10 changed files with 205 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/ib-apex-chart.blade.php
+73 -86
View File
@@ -73,92 +73,79 @@
$seriesData = json_encode($seriesData)
@endphp
<div
id="chart"
wire:key="{{ rand() }}"
x-data="{
data: {{ $seriesData }},
init(){
<div
id="chart"
wire:key="{{ rand() }}"
x-data="{
data: {{ $seriesData }},
init(){
var charts = document.querySelectorAll('.apex-chart')
charts.forEach((chart)=>{
console.log(chart)
})
var existingChart = ApexCharts.getChartByID('{{ $name }}');
if (existingChart) {
console.log('found it')
existingChart.destroy();
this.data.chart.events = {
mounted: function (chartContext, config) {
console.log('moount', chartContext)
renderCustomLegend(chartContext);
},
updated: function (chartContext, config) {
console.log('update')
renderCustomLegend(chartContext);
}
console.log('did not find')
this.data.chart.events = {
mounted: function (chartContext, config) {
console.log('moount', chartContext)
renderCustomLegend(chartContext);
},
updated: function (chartContext, config) {
console.log('update')
renderCustomLegend(chartContext);
}
}
var chart = new ApexCharts(document.querySelector('#chart-{{ $name }}'), this.data);
chart.render();
function renderCustomLegend(chartContext) {
var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
if (!legendContainer) return;
legendContainer.innerHTML = ''; // Clear any existing legend items
chartContext.w.globals.seriesNames.forEach(function (seriesName, i) {
var seriesColor = chartContext.w.config.colors[i];
var legendItem = document.createElement('div');
legendItem.classList.add('flex', 'items-center', 'm-2', 'cursor-pointer');
legendItem.setAttribute('data-series-index', i);
var colorBox = document.createElement('span');
colorBox.id = seriesName
colorBox.classList.add('w-4', 'h-4', 'inline-block', 'mr-2');
colorBox.style.backgroundColor = seriesColor;
var labelText = document.createElement('span');
labelText.textContent = seriesName;
legendItem.appendChild(colorBox);
legendItem.appendChild(labelText);
legendContainer.appendChild(legendItem);
// Initial visibility state
var isCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(i);
if (isCollapsed) {
legendItem.classList.add('opacity-50');
}
legendItem.addEventListener('click', function () {
var seriesIndex = parseInt(this.getAttribute('data-series-index'), 10);
var isCurrentlyCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(seriesIndex);
chart.toggleSeries(chartContext.w.globals.seriesNames[seriesIndex]);
if (isCurrentlyCollapsed) {
this.classList.remove('opacity-50');
} else {
this.classList.add('opacity-50');
}
});
});
}
}
}"
>
<div id="chart-{{ $name }}" class="apex-chart"></div>
</div>
var chart = new ApexCharts(document.querySelector('#chart-{{ $name }}'), this.data);
chart.render();
function renderCustomLegend(chartContext) {
var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
if (!legendContainer) return;
legendContainer.innerHTML = ''; // Clear any existing legend items
chartContext.w.globals.seriesNames.forEach(function (seriesName, i) {
var seriesColor = chartContext.w.config.colors[i];
var legendItem = document.createElement('div');
legendItem.classList.add('flex', 'items-center', 'm-2', 'cursor-pointer');
legendItem.setAttribute('data-series-index', i);
var colorBox = document.createElement('span');
colorBox.id = seriesName
colorBox.classList.add('w-4', 'h-4', 'inline-block', 'mr-2');
colorBox.style.backgroundColor = seriesColor;
var labelText = document.createElement('span');
labelText.textContent = seriesName;
legendItem.appendChild(colorBox);
legendItem.appendChild(labelText);
legendContainer.appendChild(legendItem);
// Initial visibility state
var isCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(i);
if (isCollapsed) {
legendItem.classList.add('opacity-50');
}
legendItem.addEventListener('click', function () {
var seriesIndex = parseInt(this.getAttribute('data-series-index'), 10);
var isCurrentlyCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(seriesIndex);
chart.toggleSeries(chartContext.w.globals.seriesNames[seriesIndex]);
if (isCurrentlyCollapsed) {
this.classList.remove('opacity-50');
} else {
this.classList.add('opacity-50');
}
});
});
}
}
}"
>
<div id="chart-{{ $name }}" class="apex-chart"></div>
</div>
resources/views/components/partials/side-bar.blade.php
+9 -1
View File
@@ -3,7 +3,15 @@
<x-menu-item title="{{ __('Dashboard') }}" icon="o-home" link="{{ @route('dashboard') }}" />
<x-menu-sub title="{{ __('Portfolios') }}" icon="o-document-duplicate">
@foreach (auth()->user()->portfolios as $portfolio)
<x-menu-item title="{{ $portfolio->title }}" icon="o-document" link="{{ route('portfolio.show', ['portfolio' => $portfolio->id ]) }}" />
<x-menu-item icon="o-document" link="{{ route('portfolio.show', ['portfolio' => $portfolio->id ]) }}" exact>
<x-slot:title>
{{ $portfolio->title }}
@if($portfolio->wishlist)
<x-badge value="{{ __('Wishlist') }}" class="badge-primary badge-sm ml-2" />
@endif
</x-slot:title>
</x-menu-item>
@endforeach
<x-menu-item title="{{ __('Create Portfolio') }}" icon="o-document-plus" link="{{ @route('portfolio.create') }}" />