feat: add widget barometer

components.d.ts

@@ -447,18 +447,29 @@ declare module 'vue' {
     TreeView: typeof import('./src/components/TreeView.vue')['default']
     UserHistorySaveSearchForm: typeof import('./src/components/UserHistorySaveSearchForm.vue')['default']
     VersionNumber: typeof import('./src/components/VersionNumber.vue')['default']
+    WidgetBarometer: typeof import('./src/components/Widget/WidgetBarometer.vue')['default']
+    WidgetBarometerEntry: typeof import('./src/components/Widget/WidgetBarometerEntry.vue')['default']
+    WidgetBarometerEntryDiskUsage: typeof import('./src/components/Widget/WidgetBarometerEntryDiskUsage.vue')['default']
+    WidgetBarometerEntryDocuments: typeof import('./src/components/Widget/WidgetBarometerEntryDocuments.vue')['default']
+    WidgetBarometerEntryEntity: typeof import('./src/components/Widget/WidgetBarometerEntryEntity.vue')['default']
+    WidgetBarometerEntryLocations: typeof import('./src/components/Widget/WidgetBarometerEntryLocations.vue')['default']
+    WidgetBarometerEntryOrganization: typeof import('./src/components/Widget/WidgetBarometerEntryOrganization.vue')['default']
+    WidgetBarometerEntryPersons: typeof import('./src/components/Widget/WidgetBarometerEntryPersons.vue')['default']
     WidgetDiskUsage: typeof import('./src/components/Widget/WidgetDiskUsage.vue')['default']
     WidgetDocumentsByCreationDate: typeof import('./src/components/Widget/WidgetDocumentsByCreationDate.vue')['default']
     WidgetDocumentsByCreationDateByPath: typeof import('./src/components/Widget/WidgetDocumentsByCreationDateByPath.vue')['default']
     WidgetDuplicates: typeof import('./src/components/Widget/WidgetDuplicates.vue')['default']
     WidgetEmpty: typeof import('./src/components/Widget/WidgetEmpty.vue')['default']
     WidgetEntities: typeof import('./src/components/Widget/WidgetEntities.vue')['default']
+    WidgetEntity: typeof import('./src/components/Widget/WidgetEntity.vue')['default']
+    WidgetEntityDocuments: typeof import('./src/components/Widget/WidgetEntityDocuments.vue')['default']
     WidgetFieldFacets: typeof import('./src/components/Widget/WidgetFieldFacets.vue')['default']
     WidgetFileBarometer: typeof import('./src/components/Widget/WidgetFileBarometer.vue')['default']
     WidgetListGroup: typeof import('./src/components/Widget/WidgetListGroup.vue')['default']
     WidgetNames: typeof import('./src/components/Widget/WidgetNames.vue')['default']
     WidgetNested: typeof import('./src/components/Widget/WidgetNested.vue')['default']
     WidgetProject: typeof import('./src/components/Widget/WidgetProject.vue')['default']
+    WidgetProjectMetrics: typeof import('./src/components/Widget/WidgetProjectMetrics.vue')['default']
     WidgetRecommendedBy: typeof import('./src/components/Widget/WidgetRecommendedBy.vue')['default']
     WidgetSearchBar: typeof import('./src/components/Widget/WidgetSearchBar.vue')['default']
     WidgetText: typeof import('./src/components/Widget/WidgetText.vue')['default']

src/components/Widget/WidgetBarometer.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="widget-entities d-flex flex-wrap gap-4">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

src/components/Widget/WidgetBarometerEntry.vue

@@ -0,0 +1,31 @@
+<template>
+  <b-card
+    tag="a"
+    :href="to"
+    class="widget-entity"
+    body-class="d-flex flex-column align-items-center gap-1"
+    :border-variant="variant"
+  >
+    <phosphor-icon :variant="variant" :name="icon" :weight="ICON_WEIGHT.BOLD" />
+    <span class="widget-entity__value fw-bold"
+      ><slot>{{ humanValue }}</slot></span
+    >
+    <span class="widget-entity__label text-secondary-emphasis">{{ label }}</span>
+  </b-card>
+</template>
+
+<script setup>
+import { PhosphorIcon } from '@icij/murmur-next'
+
+import humanNumber from '@/utils/humanNumber'
+import { ICON_WEIGHT } from '@/enums/iconWeights'
+import { variantValidator } from '@/enums/variants'
+const props = defineProps({
+  icon: { type: String },
+  value: { type: [Number, String] },
+  label: { type: String },
+  to: { type: String, default: '#' },
+  variant: { type: String, validator: variantValidator }
+})
+const humanValue = typeof props.value === 'number' ? humanNumber(props.value) : props.value
+</script>

src/components/Widget/WidgetBarometerEntryDiskUsage.vue

@@ -0,0 +1,18 @@
+<template>
+  <widget-barometer-entry :icon="icon" :label="label" :to="to">{{ value }}</widget-barometer-entry>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+import WidgetBarometerEntry from '@/components/Widget/WidgetBarometerEntry'
+import humanSize from '@/utils/humanSize'
+const props = defineProps({
+  size: { type: Number, default: null }
+})
+const { t } = useI18n()
+const icon = 'floppy-disk'
+const to = `#`
+const label = t('widget.diskUsage.details')
+const value = humanSize(props.size)
+</script>

src/components/Widget/WidgetBarometerEntryDocuments.vue

@@ -0,0 +1,20 @@
+<template>
+  <widget-barometer-entry :icon="icon" :label="label" :to="to">{{ value }}</widget-barometer-entry>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+import WidgetBarometerEntry from '@/components/Widget/WidgetBarometerEntry'
+import humanNumber from '@/utils/humanNumber'
+const props = defineProps({
+  nbDocuments: { type: Number },
+  nbDocumentsOnDisks: { type: Number }
+})
+const { t } = useI18n()
+const icon = 'files'
+const to = `#`
+const label = `${t('widget.barometer.amongWhich')} ${props.nbDocumentsOnDisks} ${t('widget.barometer.onDisk')}`
+const humanNbDocs = humanNumber(props.nbDocuments)
+const value = t('widget.barometer.document', { n: props.nbDocuments, value: humanNbDocs })
+</script>

src/enums/variants.js

@@ -19,6 +19,20 @@ const OUTLINE_DANGER = 'outline-danger'
 const OUTLINE_LIGHT = 'outline-light'
 const OUTLINE_DARK = 'outline-dark'
 
+const CATEGORY_BAN = 'category-ban'
+const CATEGORY_PERSON = 'category-person'
+const CATEGORY_ORGANIZATION = 'category-organization'
+const CATEGORY_LOCATION = 'category-location'
+const CATEGORY_EMAIL = 'category-email'
+
+export const VARIANT_CATEGORY = Object.freeze({
+  CATEGORY_BAN,
+  CATEGORY_PERSON,
+  CATEGORY_ORGANIZATION,
+  CATEGORY_LOCATION,
+  CATEGORY_EMAIL
+})
+
 export const VARIANT_PLAIN = Object.freeze({
   ACTION,
   PRIMARY,
@@ -42,6 +56,11 @@ export const VARIANT = Object.freeze({
   WARNING,
   LIGHT,
   DARK,
+  CATEGORY_BAN,
+  CATEGORY_PERSON,
+  CATEGORY_ORGANIZATION,
+  CATEGORY_LOCATION,
+  CATEGORY_EMAIL,
   OUTLINE_ACTION,
   OUTLINE_PRIMARY,
   OUTLINE_SECONDARY,

src/lang/en.json

@@ -1182,7 +1182,7 @@
       "title": "Authors"
     },
     "barometer": {
-      "document": "no documents | 1 document | {total} documents",
+      "document": "no documents | {value} document | {value} documents",
       "amongWhich": "among which",
       "onDisk": "on disk"
     },

src/stories/components/Widget/WidgetBarometer.stories.js

@@ -0,0 +1,72 @@
+import { variantsArgType } from '~storybook/utils'
+import { getCategoryIcon } from '@/utils/namedEntity'
+import { ENTITY_CATEGORY } from '@/enums/entityCategories'
+import { VARIANT } from '@/enums/variants'
+import WidgetBarometer from '@/components/Widget/WidgetBarometer'
+import WidgetBarometerEntry from '@/components/Widget/WidgetBarometerEntry'
+import WidgetBarometerEntryDocuments from '@/components/Widget/WidgetBarometerEntryDocuments'
+import WidgetBarometerEntryDiskUsage from '@/components/Widget/WidgetBarometerEntryDiskUsage'
+const documents = {
+  nbDocuments: 43,
+  nbDocumentsOnDisks: 123
+}
+const diskUsage = {
+  size: 300050005050
+}
+const persons = {
+  icon: getCategoryIcon(ENTITY_CATEGORY.PERSON),
+  label: 'Persons',
+  value: 9000,
+  variant: VARIANT.CATEGORY_PERSON
+}
+const organizations = {
+  icon: getCategoryIcon(ENTITY_CATEGORY.ORGANIZATION),
+  label: 'Organizations',
+  value: 9000,
+  variant: VARIANT.CATEGORY_ORGANIZATION
+}
+const locations = {
+  icon: getCategoryIcon(ENTITY_CATEGORY.LOCATION),
+  label: 'Locations',
+  value: 9000,
+  variant: VARIANT.CATEGORY_LOCATION
+}
+const emails = {
+  icon: getCategoryIcon(ENTITY_CATEGORY.EMAIL),
+  label: 'Emails',
+  value: 9000,
+  variant: VARIANT.CATEGORY_EMAIL
+}
+const args = { documents, diskUsage, persons, organizations, locations, emails }
+
+export default {
+  title: 'Components/Widget/WidgetBarometer',
+  component: WidgetBarometer,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: variantsArgType
+  },
+  args,
+  render: (args) => ({
+    components: {
+      WidgetBarometer,
+      WidgetBarometerEntry,
+      WidgetBarometerEntryDocuments,
+      WidgetBarometerEntryDiskUsage
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <widget-barometer>
+        <WidgetBarometerEntryDocuments  v-bind="args.documents"/>
+        <WidgetBarometerEntryDiskUsage  v-bind="args.diskUsage"/>
+        <WidgetBarometerEntry  v-bind="args.persons"/>
+        <WidgetBarometerEntry v-bind="args.organizations"/>
+        <WidgetBarometerEntry v-bind="args.locations"/>
+        <WidgetBarometerEntry v-bind="args.emails"/>
+      </widget-barometer>
+    `
+  })
+}
+export const Default = {}

src/stories/components/Widget/WidgetBarometerEntry.stories.js

@@ -0,0 +1,18 @@
+import WidgetBarometerEntry from '@/components/Widget/WidgetBarometerEntry'
+import { variantsArgType } from '~storybook/utils'
+
+export default {
+  title: 'Components/Widget/WidgetBarometerEntry',
+  component: WidgetBarometerEntry,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: variantsArgType
+  },
+  args: {
+    icon: 'floppy-disk',
+    label: 'records',
+    value: '30000',
+    variant: 'action'
+  }
+}
+export const Default = {}