@addev-be/ui 0.2.5 → 0.2.7

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -1,196 +1,287 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
-import {
-  formatMoney,
-  formatNumber,
-  formatPercentage,
-} from '../../../../helpers/numbers';
-import { numberFilter, textFilter } from './filters';
-
-import moment from 'moment';
-
-export const isColumnVisible = <R,>(
-  obj: DataGridColumn<R> | DataGridSettings
-): boolean => obj?.order !== -1;
-
-export const textColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => row[key] ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: textFilter(key),
-    ...options,
-  },
-});
-
-export const mailColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <a
-        // className="text-blue-500 hover:text-blue-700"
-        href={`mailto:${row[key]}`}
-      >
-        {row[key] ?? ''}
-      </a>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: textFilter(key),
-    ...options,
-  },
-});
-
-export const phoneColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <a
-        // className="text-blue-500 hover:text-blue-700"
-        href={`tel:${row[key]}`}
-      >
-        {row[key] ?? ''}
-      </a>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: textFilter(key),
-    ...options,
-  },
-});
-
-export const dateColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: textFilter(key),
-    ...options,
-  },
-});
-
-export const monthColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: textFilter(key),
-    ...options,
-  },
-});
-
-export const numberColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelFormatter: () => '#',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'number',
-      operator: 'equals',
-      values: [0],
-      getter: (value) => value ?? 0,
-    },
-    ...options,
-  },
-});
-
-export const moneyColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatMoney(row[key], decimals) ?? '',
-    excelFormatter: () => '#0.00',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: numberFilter(key),
-    ...options,
-  },
-});
-
-export const percentageColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => '#0.00',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: numberFilter(key),
-    ...options,
-  },
-});
-
-export const checkboxColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <>
-        <input type="checkbox" checked={row[key]} />
-        <span>{row[key] ? ' Oui' : ' Non'}</span>
-      </>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: numberFilter(key),
-    ...options,
-  },
-});
-
-export const colorColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: textFilter(key),
-    ...options,
-  },
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
+import {
+  formatMoney,
+  formatNumber,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+import { numberFilter, textFilter } from './filters';
+
+import moment from 'moment';
+import { repeat } from 'lodash';
+
+export const isColumnVisible = <R,>(
+  obj: DataGridColumn<R> | DataGridSettings
+): boolean => obj?.order !== -1;
+
+const buildExcelFormat = (decimals = 2, suffix = '') =>
+  `#0${decimals > 0 ? `.${repeat('0', decimals)}` : ''}${suffix}`;
+
+export const textColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: textFilter(key),
+    ...options,
+  },
+});
+
+export const mailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <a
+        // className="text-blue-500 hover:text-blue-700"
+        href={`mailto:${row[key]}`}
+      >
+        {row[key] ?? ''}
+      </a>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: textFilter(key),
+    ...options,
+  },
+});
+
+export const phoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <a
+        // className="text-blue-500 hover:text-blue-700"
+        href={`tel:${row[key]}`}
+      >
+        {row[key] ?? ''}
+      </a>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: textFilter(key),
+    ...options,
+  },
+});
+
+export const dateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: textFilter(key),
+    ...options,
+  },
+});
+
+export const monthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: textFilter(key),
+    ...options,
+  },
+});
+
+export const numberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatNumber(row[key], decimals) ?? '',
+    excelFormatter: () => '#',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: {
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
+    filter: {
+      ...numberFilter(key),
+      renderer: (value) => formatNumber(value, decimals) ?? '',
+    },
+    ...options,
+  },
+});
+
+export const moneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatMoney(row[key], decimals) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals, ' €'),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...numberFilter(key),
+      renderer: (value) => formatMoney(value, decimals) ?? '',
+    },
+    footer: {
+      sum: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatMoney(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatMoney(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
+    ...options,
+  },
+});
+
+export const percentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatPercentage(row[key]) ?? '',
+    excelFormatter: () => buildExcelFormat(decimals),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: numberFilter(key),
+    footer: {
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+    },
+    ...options,
+  },
+});
+
+export const checkboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <>
+        <input type="checkbox" checked={row[key]} />
+        <span>{row[key] ? ' Oui' : ' Non'}</span>
+      </>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: numberFilter(key),
+    footer: {
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      checked: (_, filteredRows) =>
+        `${filteredRows.filter((row) => !!row[key]).length} cochés`,
+      unchecked: (_, filteredRows) =>
+        `${filteredRows.filter((row) => !row[key]).length} décochés`,
+    },
+    ...options,
+  },
+});
+
+export const colorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<DataGridColumn<R>>
+): DataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: textFilter(key),
+    footer: (rows) => `${rows.length} éléments`,
+    ...options,
+  },
+});