Working linkable partition metric.

Author: anderly

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "saintsystems/nova-linkable-metrics",
-    "version":"2.0.0",
+    "version":"4.0.0",
     "description": "Linkable metrics for Laravel Nova 4.x.",
     "keywords": [
         "laravel",

dist/js/card.js

@@ -1,4 +1 @@
-{
-    "/js/card.js": "/js/card.js",
-    "/css/card.css": "/css/card.css"
-}
+{}

dist/mix-manifest.json

@@ -3,10 +3,11 @@ import upperFirst from 'lodash/upperFirst'
 
 import BaseLinkableValueMetric from './components/Base/BaseValueMetric'
 import BaseLinkableTrendMetric from './components/Base/BaseTrendMetric'
+import BaseLinkablePartitionMetric from './components/Base/BasePartitionMetric'
 
 import LinkableValueMetric from './components/LinkableValueMetric'
 import LinkableTrendMetric from './components/LinkableTrendMetric'
-// import LinkablePartitionMetric from './components/LinkablePartitionMetric'
+import LinkablePartitionMetric from './components/LinkablePartitionMetric'
 
 Nova.booting((app, store) => {
   // const requireComponent = require.context(
@@ -32,7 +33,8 @@ Nova.booting((app, store) => {
 
   app.component('BaseLinkableValueMetric', BaseLinkableValueMetric)
   app.component('BaseLinkableTrendMetric', BaseLinkableTrendMetric)
+  app.component('BaseLinkablePartitionMetric', BaseLinkablePartitionMetric)
   app.component('linkable-value-metric', LinkableValueMetric)
   app.component('linkable-trend-metric', LinkableTrendMetric)
-  // app.component('linkable-partition-metric', LinkablePartitionMetric)
+  app.component('linkable-partition-metric', LinkablePartitionMetric)
 })

resources/js/card.js

@@ -1,11 +1,13 @@
 <template>
   <LoadingCard :loading="loading" class="px-6 py-4">
     <h3 class="h-6 flex mb-3 text-sm font-bold">
-      {{ title }}
+      <Link :href="this.url" :title="title" class="link-default font-normal">
+        {{ title }}
 
-      <span class="ml-auto font-semibold text-gray-400 text-xs"
-        >({{ formattedTotal }} {{ __('total') }})</span
-      >
+        <span class="ml-auto font-semibold text-gray-400 text-xs"
+          >({{ formattedTotal }} {{ __('total') }})</span
+        >
+      </Link>
     </h3>
 
     <HelpTextTooltip :text="helpText" :width="helpWidth" />
@@ -18,12 +20,19 @@
             :key="item.color"
             class="text-xs leading-normal"
           >
-            <span
-              class="inline-block rounded-full w-2 h-2 mr-2"
-              :style="{
-                backgroundColor: item.color,
-              }"
-            />{{ item.label }} ({{ item.value }} - {{ item.percentage }}%)
+            <component
+              :is="item.label in partitionLinks ? 'a' : 'span'"
+              target="_blank"
+              :href="`${item.label in partitionLinks ? partitionLinks[item.label] : '#'}`"
+              class='link-default font-normal no-underline'
+            >
+              <span
+                class="inline-block rounded-full w-2 h-2 mr-2"
+                :style="{
+                  backgroundColor: item.color,
+                }"
+              />{{ item.label }} ({{ item.value }} - {{ item.percentage }}%)
+            </component>
           </li>
         </ul>
       </div>
@@ -68,6 +77,8 @@ export default {
     helpText: {},
     helpWidth: {},
     chartData: Array,
+    partitionLinks: Array,
+    url: '',
   },
 
   data: () => ({

resources/js/components/Base/BasePartitionMetric.vue

@@ -17,7 +17,7 @@
       </div>
 
       <p class="flex items-center text-4xl mb-4">
-        <Link :href="this.url" :title="title" class="link-default font-normal">
+        <Link :href="this.url" :title="title" class="link-defaultd">
           {{ formattedValue }}
         </Link>
         <span v-if="suffix" class="ml-2 text-sm font-bold">{{
@@ -37,7 +37,7 @@
   import debounce from 'lodash/debounce'
   import Chartist from 'chartist'
   import 'chartist/dist/chartist.min.css'
-  import { singularOrPlural } from '@/mixins'//'laravel-nova'
+  import { singularOrPlural } from '@/mixins'
   import ChartistTooltip from 'chartist-plugin-tooltips-updated'
   import 'chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css'
 

resources/js/components/Base/BaseTrendMetric.vue

@@ -31,7 +31,7 @@
             class="flex items-center text-4xl"
             :rounded="false"
           >
-            <Link :href="this.url" :title="title" class="link-default font-normal">
+            <Link :href="this.url" :title="title" class="link-default">
               <span v-tooltip="`${tooltipFormattedValue}`">
               {{ formattedValue }}
               </span>
@@ -107,8 +107,8 @@
   </template>
 
   <script>
-  import { increaseOrDecrease, singularOrPlural } from 'laravel-nova'
-  import { CopiesToClipboard } from 'laravel-nova'
+  import { increaseOrDecrease, singularOrPlural } from '@/util'
+  import { CopiesToClipboard } from '@/mixins'
 
   export default {
     name: 'BaseLinkableValueMetric',

resources/js/components/Base/BaseValueMetric.vue

@@ -1,18 +1,22 @@
 <template>
-    <BasePartitionMetric
+    <component :is="this.card.url ? 'BaseLinkablePartitionMetric' : 'BasePartitionMetric'"
       :title="card.name"
       :help-text="card.helpText"
       :help-width="card.helpWidth"
       :chart-data="chartData"
+      :partition-links="partitionLinks"
       :loading="loading"
+      :url="this.card.url"
     />
   </template>
 
   <script>
-  import { MetricBehavior } from 'laravel-nova'
-  import { minimum } from '../util'
+  import { MetricBehavior } from '@/mixins'
+  import { minimum } from '@/util'
 
   export default {
+    name: 'LinkablePartitionMetric',
+
     mixins: [MetricBehavior],
 
     props: {
@@ -40,6 +44,7 @@
     data: () => ({
       loading: true,
       chartData: [],
+      partitionLinks: [],
     }),
 
     watch: {
@@ -71,10 +76,11 @@
         minimum(Nova.request().get(this.metricEndpoint, this.metricPayload)).then(
           ({
             data: {
-              value: { value },
+              value: { value, partitionLinks },
             },
           }) => {
             this.chartData = value
+            this.partitionLinks = partitionLinks
             this.loading = false
           }
         )

resources/js/components/LinkablePartitionMetric.vue

@@ -19,8 +19,8 @@
 
   <script>
   import map from 'lodash/map'
-  import { InteractsWithDates, MetricBehavior } from 'laravel-nova' //'@/mixins'
-  import { minimum } from '../util'
+  import { InteractsWithDates, MetricBehavior } from '@/mixins'
+  import { minimum } from '@/util'
 
   export default {
     name: 'LinkableTrendMetric',

resources/js/components/LinkableTrendMetric.vue

@@ -23,17 +23,12 @@
 
   <script>
   import { minimum } from '@/util'
-  import { InteractsWithDates, MetricBehavior } from '@/mixins' //'laravel-nova'
-  // import BaseLinkableValueMetric from './Base/BaseValueMetric'
-  // import { BaseValueMetric } from 'laravel-nova'
+  import { InteractsWithDates, MetricBehavior } from '@/mixins'
+
   export default {
 
     name: 'LinkableValueMetric',
 
-    // components: [
-    //   BaseLinkableValueMetric
-    // ],
-
     // mixins: [InteractsWithDates, MetricBehavior],
 
     props: {