bjorndcode / nova-analytics Goto Github PK

I mentioned it in #3 already but came to a false conclusion.

The problem
All Cards I did not register with Nova::cards will be returned with the call to /nova-vendor/bjorndcode/nova-analytics/cards, but their own call to metrics/{metric} will result in a 404.

The reason of the problem
When the metrics/{metric} route is called nova looks for all Cards inside the $cards array with the instance of Metric::class. Since a card which was not registered with Nova never resides inside the $cards array, no card is found and the abort(404) is called.

// NovaRequest
public function metric()
{
 return $this->availableMetrics()->first(function ($metric) {
            return $this->metric === $metric->uriKey();
        }) ?: abort(404);
}

public function availableMetrics()
{
    return Nova::availableDashboardCards($this)->whereInstanceOf(Metric::class);
}

The quick and dirty solution
Adding the cards when they are needed and remove them right afterwards.

// AnalyticsToolController
public function index(NovaRequest $request)
    {
        \Nova::cards(AnalyticsDashboard::indexCards($request)->toArray());

        return tap(AnalyticsDashboard::indexCards($request), function ($cards) {
            \Nova::$cards = [];
        });
    }

the clean solution
The problem arises from the endpoint metrics/{metric} which is called from the Metrics/ValueMetric.vue class.

metricEndpoint() {
            // ...
            } else {
                return `/nova-api/metrics/${this.card.uriKey}`
            }
        },

The Metrics/ValueMetric.vue component is resolved from the CardWrapper.vue. Which itself is resolved from the Cards.vue component.

<component
           // ...
            :is="card.component"
          // ...
        />

So to wrap it all up:

• build a own Cards, CardWrapper & all Metrics Vue Component and point it to a different endpoint
• add routes to the api.php file
• mirror Nova's metrics request logic

Problem: There's a fill on the svg element, while the fill should be dynamic & on the path element of the svg image.
This results in a fixed color for the icon which is not following the theme settings.

Expected behavior: The icon should follow the theme settings.

What we have now:

<svg fill="#B3C1D1" width="20" height="15" xmlns="http://www.w3.org/2000/svg" class="sidebar-icon">
  <path d="..."></path>
</svg>

What it should be like:

<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" class="sidebar-icon">
  <path fill="var(--sidebar-icon)" fill-rule="evenodd" d="..."></path>
</svg>