How do I use a custom view for my dashboard lens?

You can optionally make your dashboard lens use a custom view. To do this you need to set the protected 
$viewstring on your lens to the view you would like to use.
<?php
namespace Aero\Admin\Lenses;
use Aero\Admin\AdminLens;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
class TopShippingCountriesLens extends AdminLens
{
   protected $view = 'admin::lenses.percentage-list';
   public function data(Request $request, array $date, array $compare): JsonResponse
   {
       return response()->json([]);
   }
}
Your view will have access to Blade and Vue as it is rendered as a slot. You will have access to the following variables:
Variable
Type
Description
lens.data
Vue
This is an object that holds the response from the data method of your admin lens. You can effectively pass any data you want in the json response and have access to it in Vue through this variable.
lens.date
Vue
This is an object that has start, end and compare keys.
lens.loading
Vue
This is a boolean that is true while the lens is making an API call to get its data.
lens.notLoading
Vue
This is a boolean that is false unless the lens is making an API call.
lens.noData
Vue
This is a boolean that is true if the store has no orders.
lens.hasData
Vue
This is a boolean that is true if the store has orders.
lens.renderDateGetVariables
Vue
This returns an empty string or the selected date formatted as the $dateGetVariables property on the lens class describes.
$title
Blade
This is the value of the $title property on your lens class.
$link
Blade
This is the value of the link() function on your lens class.
$noTextData
Blade
This is the value of the $noDataText property on your lens class.
Here is the code for our default lens view:
<div class="card h-full relative">
   <svg class="w-4 h-4 absolute pin-t pin-r m-4 text-grey-light stroke-current [ animation-spin ]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.111 18.068" v-if="lens.loading">
       <path d="M20,4V9h-.582M4.062,11A8,8,0,0,1,19.418,9m0,0H15M4,20V15h.581m0,0a8,8,0,0,0,15.357-2M4.581,15H9" transform="translate(-2.945 -2.964)" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
   </svg>
   <svg class="w-4 h-4 absolute pin-t pin-r m-4 text-success stroke-current [ animation-fade-out ]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.11 18.07" v-else>
       <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
           <path d="M2.06 10.03l4 4 10-10" data-name="Path 103"/>
       </g>
   </svg>
   <h3 class="uppercase text-base font-normal text-text h-auto p-0 mb-3">{{ $title }}</h3>
   <div class="flex flex-wrap -mx-3">
       <div class="w-1/2 px-3 mb-6" v-if="lens.loading || lens.noData">
           <div class="mb-1">
               <template v-if="lens.loading">
                   <skeleton-box height="2.125rem" width="4rem" />
               </template>
               <template v-else-if="lens.noData">
                   <p class="text-3xl font-medium mb-1">–</p>
               </template>
           </div>
           <template v-if="lens.loading">
               <skeleton-box width="9rem" height="0.8125rem" />
           </template>
           <template v-else-if="lens.noData">
               <p class="text-xs">{{ $noDataText }}</p>
           </template>
       </div>
       <div class="w-1/2 px-3 mb-6" v-if="lens.notLoading && lens.hasData" v-for="data in lens.data" :key="data.currency_code">
           <div class="mb-1">
               <p class="text-3xl font-medium" v-html="data.text"></p>
           </div>
           <p class="text-xs"><strong v-text="data.compare.percentage" class="font-medium" :class="{ 'text-success' : data.compare.up, 'text-error' : ! data.compare.up }"></strong> <span v-text="data.compare.text"></span></p>
       </div>
   </div>
   @isset($link)
       <a class="dashboard-link" v-if="lens.noData">{{ $link['text'] }}</a>
       <a class="dashboard-link" :href="'{{ $link['route'] }}' + lens.renderDateGetVariables" v-else>{{ $link['text'] }}</a>
   @endif
</div>
Adding Permissions to your Dashboard Lens
You can optionally make your dashboard lens require a permission (if the user doesn’t have the permission then the lens will not be rendered). To do this you need to set the protected static $permission string on your lens class to the permission you would like to use.
<?php
namespace Aero\Admin\Lenses;
use Aero\Admin\AdminLens;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
class TopShippingCountriesLens extends AdminLens
{
   protected static $permission = 'dashboard.lens.orders';
   public function data(Request $request, array $date, array $compare): JsonResponse
   {
       return response()->json([]);
   }
}