data-primals-engine 1.4.1 → 1.4.2

package/README.md

@@ -1,4 +1,4 @@
-# Data Primals Engine
+# data-primals-engine
 [![Node.js CI](https://github.com/anonympins/data-primals-engine/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/anonympins/data-primals-engine/actions/workflows/node.js.yml)
 ![](https://img.shields.io/npm/dw/data-primals-engine)
 ![](https://img.shields.io/npm/last-update/data-primals-engine)
@@ -33,15 +33,6 @@
 - **📦 Starter Packs**: Quickly bootstrap applications with pre-built data packs for CRM, e-commerce, and more.
 - **📄Auto-Generated API Documentation**: Interactive API documentation available via the interface or at `/api-docs`.
 
-## ⚛️ Frontend Integration (React)
-
-This engine is designed to work seamlessly with its dedicated client library, **`data-primals-engine/client`**. This library provides a complete set of React hooks and UI components to build a rich, data-centric user interface on top of the backend.
-
-While this README focuses on the backend engine and its API, you can find detailed instructions on how to integrate the client part in your React application here:
-
-➡️ **[View the Frontend Integration Guide](https://github.com/anonympins/data-primals-engine/tree/develop/client)**
-
-
 ## 🌟 Why Choose data-primals-engine?
 
 - **Zero Boilerplate**: Focus on your business logic, not infrastructure
@@ -129,10 +120,11 @@ By default, the app runs on port **7633** : http://localhost:7633
 
 The engine includes a pluggable system for user management. For development and testing, it uses a `DefaultUserProvider` which creates a volatile **`demo`** user. This is perfect for getting started quickly without setting up a user database.
 
-For production environments, you should extend the base `UserProvider` class to connect to your actual user database (e.g., another MongoDB collection, a SQL database, or an external authentication service). This allows you to implement your own logic for finding users and validating passwords.
+For production environments, you should use SSO providers as seen in the page below, or extend the base `UserProvider` class to connect to your actual user database (e.g., another MongoDB collection, a SQL database, or an external authentication service). This allows you to implement your own logic for finding and creating users.
+
+### Model generation
+Models are the way to handle structured data. They organize data and they can be declared in JSON.
 
-### Models
-Define schemas using JSON:
 ```json
 {
   "name": "product",
@@ -150,12 +142,8 @@ Define schemas using JSON:
   ]
 }
 ```
-### Smart Relations
-- Handles up to 2,000 direct relations by default (can be customized)
-- For larger datasets, use intermediate collections
-- Automatic indexing on key fields
-- Custom indexing on fields
-- Custom fields :
+
+### Custom fields types
 
 | Type        | Description                                                                         | 	Properties/Notes                                                         | 
 |:------------|:------------------------------------------------------------------------------------|:--------------------------------------------------------------------------|
@@ -180,6 +168,12 @@ Define schemas using JSON:
 | model	      | Stores a model by name                                                              | –                                                                         |                                            
 | modelField	 | Stores a model field path	                                                          | –                                                                         |                                            
 
+### Other model features
+- Handles up to 2,000 direct relations by default (can be customized). For larger datasets, use intermediate collections
+- Automatic indexing on key fields
+- Custom indexing on fields
+- Anonymizable fields (encrypted for API users)
+
 ### Model constraints
 ```javascript
 {
@@ -826,6 +820,16 @@ Results are merged together if multiple events are triggered.
 - arrays are concatenated
 - objects are merged using spread operator
 
+---
+
+## ⚛️ Frontend Integration (React)
+
+This engine is designed to work seamlessly with its dedicated client library, **`data-primals-engine/client`**. This library provides a complete set of React hooks and UI components to build a rich, data-centric user interface on top of the backend.
+
+While this README focuses on the backend engine and its API, you can find detailed instructions on how to integrate the client part in your React application here:
+
+➡️ **[View the Frontend Integration Guide](https://github.com/anonympins/data-primals-engine/tree/develop/client)**
+
 
 ---
 

package/client/src/AssistantChat.jsx

@@ -1,16 +1,26 @@
 // client/src/components/AssistantChat.jsx
 
 import React, { useState, useMemo, useEffect, useRef } from 'react';
-import { FaRobot, FaPaperPlane, FaTimes, FaExpand, FaCompress } from 'react-icons/fa';
+import { FaRobot, FaPaperPlane, FaTimes, FaExpand, FaCompress, FaPlus } from 'react-icons/fa';
 import './AssistantChat.scss';
 import { useModelContext } from "./contexts/ModelContext.jsx";
 import { Trans, useTranslation } from "react-i18next";
 import Markdown from 'react-markdown';
 import {useQueryClient} from "react-query";
 import {providers} from "../../src/modules/assistant/constants.js";
+import DashboardChart from "./DashboardChart.jsx";
+import {useUI} from "./contexts/UIContext.jsx";
+import Button from "./Button.jsx";
+import {getUserHash, getUserId} from "../../src/data.js";
+import {useNavigation} from "react-router";
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {useNavigate} from "react-router-dom";
+import {DataTable} from "./DataTable.jsx";
 
 const AssistantChat = ({ config }) => {
-    const { selectedModel } = useModelContext();
+    const { selectedModel, models } = useModelContext();
+    const { me } = useAuthContext();
+    const nav = useNavigate();
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
@@ -19,6 +29,7 @@ const AssistantChat = ({ config }) => {
     ]);
     const [input, setInput] = useState('');
     const [isLoading, setIsLoading] = useState(false);
+    const { setChartToAdd } = useUI();
 
     // NOUVEL ÉTAT : Stocke une action en attente de confirmation de l'utilisateur
     const [pendingConfirmation, setPendingConfirmation] = useState(null);
@@ -74,7 +85,8 @@ const AssistantChat = ({ config }) => {
                 const botMessage = {
                     from: 'bot',
                     text: null,
-                    actionDetails: null // Pour stocker les détails de l'action à afficher
+                    actionDetails: null,
+                    chartConfig: null// Pour stocker les détails de l'action à afficher
                 };
 
                 // Gérer le texte à afficher
@@ -104,7 +116,15 @@ const AssistantChat = ({ config }) => {
                 }
 
                 // On ajoute le message à la liste uniquement s'il a du contenu textuel
-                if (botMessage.text) {
+                if (result.chartConfig) {
+                    botMessage.chartConfig = result.chartConfig;
+                }
+                // Si des données tabulaires sont retournées
+                if (result.dataResult) {
+                    botMessage.dataResult = result.dataResult;
+                }
+                // On ajoute le message à la liste uniquement s'il a du contenu textuel ou un graphique
+                if (botMessage.text || botMessage.chartConfig || botMessage.dataResult) {
                     setMessages(prev => [...prev, botMessage]);
                 }
 
@@ -225,7 +245,30 @@ const AssistantChat = ({ config }) => {
             <div className="chat-messages">
                 {messages.map((msg, index) => (
                     <div key={index} className={`message ${msg.from}`}>
-                        <Markdown>{msg.text}</Markdown>
+                        {msg.text && <Markdown>{msg.text}</Markdown>}
+                        {msg.chartConfig && (
+                            <div className="chart-container">
+                                <DashboardChart config={msg.chartConfig} />
+                                <div className="chart-actions" style={{ marginTop: '8px', textAlign: 'right' }}>
+                                    <Button onClick={() => {
+                                        nav('/user/'+getUserHash(me)+'/dashboards');
+                                        setChartToAdd(msg.chartConfig);
+                                    }} title={t('assistant.addToDashboard', 'Ajouter au tableau de bord')}>
+                                        <FaPlus />
+                                        <span style={{ marginLeft: '8px' }}>
+                                            {t('assistant.addToDashboard', 'Ajouter au tableau de bord')}
+                                        </span>
+                                    </Button>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* NOUVEAU : Affichage des données tabulaires */}
+                        {msg.dataResult && (
+                            <div className="data-table-container">
+                                <DataTable model={models.find(f => f.name === msg.dataResult.model)} advanced={false} data={msg.dataResult.data} />
+                            </div>
+                        )}
                         {msg.actionDetails && (
                             <div className="action-details">
                                 {msg.actionDetails.model && (

package/client/src/AssistantChat.scss

@@ -125,7 +125,6 @@ $input-height: 50px;
   gap: 12px;
 
   .message {
-    max-width: 80%;
     p {
       padding: 4px 8px;
       border-radius: 18px;

package/client/src/ChartConfigModal.jsx

@@ -55,6 +55,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
     const [chartType, setChartType] = useState('bar');
     const [chartAggregationType, setChartAggregationType] = useState('count');
     const [chartTitle, setChartTitle] = useState('');
+    const [timeUnit, setTimeUnit] = useState('day');
 
     const currentModel = models.find(f => f.name === selectedModel && f._user === me.username);
 
@@ -74,6 +75,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                 setColorField(initialConfig.chartBackgroundColor || null);
                 setGroupByLabelField(initialConfig.groupByLabelField || '');
                 setChartAggregationType(initialConfig.aggregationType || 'count');
+                setTimeUnit(initialConfig.timeUnit || 'day');
                 // Note: modelFields et relatedModelFields seront chargés par les autres useEffects
                 // déclenchés par le changement de selectedModel et groupByField.
             } else {
@@ -87,6 +89,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                 setGroupByField('');
                 setGroupByLabelField('');
                 setChartAggregationType('count');
+                setTimeUnit('day');
                 setModelFields([]);
                 setRelatedModelFields([]);
             }
@@ -155,6 +158,9 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
     const isRelationGroupBy = isGroupingChart && modelFields.find(f => f.name === groupByField)?.type === 'relation';
     const isYAxisRequiredForValidation = chartAggregationType && !['count'].includes(chartAggregationType);
 
+    const xAxisFieldDefinition = modelFields.find(f => f.name === xAxisField);
+    const isTemporal = !isGroupingChart && xAxisFieldDefinition && ['date', 'datetime'].includes(xAxisFieldDefinition.type);
+
     // handleSave (inchangé - envoie l'état actuel)
     const handleSave = () => {
         const isValid = selectedModel && chartType && chartTitle &&
@@ -178,6 +184,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                 aggregationType: chartAggregationType,
                 chartBackgroundColor: colorField,
                 filter,
+                timeUnit: isTemporal ? timeUnit : undefined,
             });
         } else {
             let errorMsg = t('chartConfigModal.fillFields', "Veuillez remplir tous les champs requis.");
@@ -321,15 +328,33 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                                 )}
                             </>
                         ) : (
-                            <SelectField
-                                label={t('chartConfigModal.xAxis', 'Axe X')}
-                                value={xAxisField}
-                                onChange={(item) => setXAxisField(item.value)}
-                                items={[{label: t('selectPlaceholder', 'Choisir...'), value: ''}, ...xAxisOptions]}
-                                required={!isGroupingChart}
-                                disabled={xAxisOptions.length === 0}
-                                hint={xAxisOptions.length === 0 ? t('chartConfigModal.noXAxisFields', 'Aucun champ utilisable pour l\'axe X') : ''}
-                            />
+                            <>
+                                <SelectField
+                                    label={t('chartConfigModal.xAxis', 'Axe X')}
+                                    value={xAxisField}
+                                    onChange={(item) => setXAxisField(item.value)}
+                                    items={[{label: t('selectPlaceholder', 'Choisir...'), value: ''}, ...xAxisOptions]}
+                                    required={!isGroupingChart}
+                                    disabled={xAxisOptions.length === 0}
+                                    hint={xAxisOptions.length === 0 ? t('chartConfigModal.noXAxisFields', 'Aucun champ utilisable pour l\'axe X') : ''}
+                                />
+                                {isTemporal && (
+                                    <SelectField
+                                        label={t('charts.timeUnit', 'Échelle de temps')}
+                                        value={timeUnit}
+                                        onChange={(item) => setTimeUnit(item.value)}
+                                        items={[
+                                            { value: 'minute', label: t('time.minute', 'Minute') },
+                                            { value: 'hour', label: t('time.hour', 'Heure') },
+                                            { value: 'day', label: t('time.day', 'Jour') },
+                                            { value: 'week', label: t('time.week', 'Semaine') },
+                                            { value: 'month', label: t('time.month', 'Mois') },
+                                            { value: 'year', label: t('time.year', 'Année') },
+                                        ]}
+                                        hint={t('charts.timeUnitHelp', "Définit l'unité de regroupement pour l'axe des dates.")}
+                                    />
+                                )}
+                            </>
                         )}
 
                         {/* Axe Y (inchangé) */}