Improve figure widget

code16 · Jul 17, 2023 · e0502b0 · e0502b0
1 parent 226548b
commit e0502b0
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 31 deletions.
diff --git a/packages/dashboard/scss/_page.scss b/packages/dashboard/scss/_page.scss
@@ -1,8 +1,11 @@
 
 .dashboard {
   .SharpDashboardPage {
-    .row+.row {
-      margin-top: 1rem;
+    .SharpGrid > * {
+      margin-bottom: 1rem;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
diff --git a/packages/dashboard/scss/components/_Widget.scss b/packages/dashboard/scss/components/_Widget.scss
@@ -2,7 +2,7 @@
   text-align: center;
   border-width: 0;
 
-  &--link {
+  &--panel.SharpWidget--link {
     border: 1px solid transparent;
     text-decoration: none;
     transition: $btn-transition;

diff --git a/packages/dashboard/src/components/Section.vue b/packages/dashboard/src/components/Section.vue
@@ -37,7 +37,7 @@
             </template>
         </div>
 
-        <Grid :rows="section.rows" row-class="gx-3" v-slot="{ itemLayout }">
+        <Grid :rows="section.rows" row-class="g-3" v-slot="{ itemLayout }">
             <slot :widget-layout="itemLayout" />
         </Grid>
     </div>

diff --git a/packages/dashboard/src/components/Widget.vue b/packages/dashboard/src/components/Widget.vue
@@ -1,9 +1,13 @@
 <template>
-    <component :is="tag" class="SharpWidget card" :class="classes" :href="widgetProps.link">
+    <div class="SharpWidget card" :class="classes" :href="widgetProps.link">
         <div class="card-body">
-            <component :is="widgetComp" v-bind="exposedProps"></component>
+            <component
+                :is="widgetComp"
+                :value="value"
+                v-bind="widgetProps"
+            />
         </div>
-    </component>
+    </div>
 </template>
 <script>
     import { widgetByType } from './widgets/index';
@@ -21,21 +25,13 @@
             classes() {
                 return {
                     'SharpWidget--chart': this.widgetType === 'graph',
+                    'SharpWidget--panel': this.widgetType === 'panel',
                     'SharpWidget--link': this.widgetProps.link,
                 }
             },
-            tag() {
-                return this.widgetProps.link ? 'a' : 'div';
-            },
             widgetComp() {
                 return widgetByType(this.widgetType, this.widgetProps.display);
             },
-            exposedProps() {
-                return { ...this.widgetProps, value:this.value }
-            },
-            hasLink() {
-                return !!this.widgetProps.link;
-            }
         },
     }
 </script>
diff --git a/packages/dashboard/src/components/widgets/Figure.vue b/packages/dashboard/src/components/widgets/Figure.vue
@@ -1,41 +1,60 @@
 <template>
     <div>
-        <h2 class="SharpWidget__title mb-3">
-            {{ title }}
-        </h2>
+        <template v-if="title">
+            <h2 class="SharpWidget__title mb-2">
+                {{ title }}
+            </h2>
+        </template>
         <div class="d-flex align-items-center">
-            <p class="display-4 fw-bold mb-0" :style="{ color: value.data.color }">
+            <p class="display-5 fw-bold mb-0" :style="{ color: value.data.color }">
                 {{ value.data.figure }}
                 <template v-if="value.data.unit">
-                    <span class="fs-4 fw-normal">{{ value.data.unit }}</span>
+                    <span class="fs-5 fw-normal">{{ value.data.unit }}</span>
                 </template>
             </p>
             <template v-if="value.data.evolution">
-                <div class="ms-3" :class="value.data.evolution.increase ? 'text-success' : 'text-danger'">
+                <div class="d-flex align-items-center ms-3"
+                    :style="{ color: value.data.evolution.increase ? '#198754' : '#dc3545' }"
+                >
                     <template v-if="value.data.evolution.increase">
-                        &uarr;
+                        <!-- heroicons: 20/solid/arrow-up -->
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
+                        </svg>
                     </template>
                     <template v-else>
-                        &darr;
+                        <!-- heroicons: 20/solid/arrow-down -->
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
+                        </svg>
                     </template>
-                    {{ value.data.evolution.value }}
+                    <span class="ms-1">
+                        {{ value.data.evolution.value }}
+                    </span>
                 </div>
             </template>
         </div>
         <template v-if="link">
             <div class="text-start mt-2">
-                See details
+                <a :href="link">
+                    {{ lang('dashboard.widget.link_label') }}
+                </a>
             </div>
         </template>
     </div>
 </template>
 
 <script>
+    import { lang } from "sharp";
+
     export default {
         props: {
             title: String,
             link: String,
             value: Object,
-        }
+        },
+        methods: {
+            lang,
+        },
     }
 </script>
diff --git a/packages/dashboard/src/components/widgets/Panel.vue b/packages/dashboard/src/components/widgets/Panel.vue
@@ -1,20 +1,39 @@
 <template>
     <div class="SharpWidgetPanel">
+        <template v-if="title">
+            <h2 class="SharpWidget__title mb-2">
+                {{ title }}
+            </h2>
+        </template>
         <TemplateRenderer name="WidgetPanel" :template="template" :template-data="value.data" />
+        <template v-if="link">
+            <a class="stretched-link" :href="link">
+                <span class="visually-hidden">
+                    {{ lang('dashboard.widget.link_label') }}
+                </span>
+            </a>
+        </template>
     </div>
 </template>
 
 <script>
     import { TemplateRenderer } from 'sharp/components';
+    import { lang } from "sharp";
 
     export default {
-        name:'SharpWidgetPanel',
+        name: 'SharpWidgetPanel',
+        inheritAttrs: false,
         components: {
             TemplateRenderer
         },
         props: {
             value: Object,
+            title: String,
             template: String,
-        }
+            link: String,
+        },
+        methods: {
+            lang,
+        },
     }
-</script>
+</script>
diff --git a/packages/dashboard/src/components/widgets/chart/Chart.vue b/packages/dashboard/src/components/widgets/chart/Chart.vue
@@ -1,7 +1,9 @@
 <template>
     <div>
         <template v-if="title">
-            <h2 class="SharpWidget__title mb-2 mt-3 px-3">{{title}}</h2>
+            <h2 class="SharpWidget__title mb-2 mt-3 px-3">
+                {{ title }}
+            </h2>
         </template>
         <component
             :is="chartComp"

diff --git a/resources/lang/front/en/dashboard.php b/resources/lang/front/en/dashboard.php
@@ -2,4 +2,5 @@
 
 return [
     'commands.dashboard.label' => 'Actions',
+    'widget.link_label' => 'See details',
 ];
diff --git a/resources/lang/front/fr/dashboard.php b/resources/lang/front/fr/dashboard.php
@@ -2,4 +2,5 @@
 
 return [
     'commands.dashboard.label' => 'Actions',
+    'widget.link_label' => 'See details',
 ];