@osfarm/itineraire-technique 1.1.19 → 1.2.0

package/react/types.ts

@@ -0,0 +1,152 @@
+/**
+ * Types TypeScript pour les données d'itinéraire technique TIKA
+ */
+
+export interface ClimateData {
+  /** Températures moyennes mensuelles (12 valeurs, en °C) */
+  temperatures: number[];
+  /** Précipitations moyennes mensuelles (12 valeurs, en mm) */
+  precipitations: number[];
+}
+
+export interface ItineraireOptions {
+  /** Type de vue: 'horizontal', 'vertical', ou 'donut' */
+  view?: 'horizontal' | 'vertical' | 'donut';
+  /** Afficher la transcription textuelle */
+  show_transcript?: boolean;
+  /** Titre pour les interventions supérieures */
+  title_top_interventions?: string;
+  /** Titre pour les interventions inférieures */
+  title_bottom_interventions?: string;
+  /** Titre pour les étapes */
+  title_steps?: string;
+  /** Région géographique */
+  region?: string;
+  /** Afficher le diagramme climatique */
+  show_climate_diagram?: boolean;
+  /** Données climatiques */
+  climate_data?: ClimateData;
+}
+
+export interface Intervention {
+  /** Identifiant unique de l'intervention */
+  id: string;
+  /** Jour relatif au début de l'étape (peut être négatif pour avant) */
+  day: string | number;
+  /** Nom de l'intervention */
+  name: string;
+  /** Type d'intervention: 'intervention_top' ou 'intervention_bottom' */
+  type: 'intervention_top' | 'intervention_bottom';
+  /** Description détaillée de l'intervention */
+  description?: string;
+  /** Icône associée (nom FontAwesome ou URL) */
+  icon?: string;
+  /** Couleur de l'intervention (hex) */
+  color?: string;
+}
+
+export interface Step {
+  /** Identifiant unique de l'étape */
+  id: string;
+  /** Nom de la culture/étape */
+  name: string;
+  /** Date de début (ISO 8601 string ou Date) */
+  startDate: string | Date;
+  /** Date de fin (ISO 8601 string ou Date) */
+  endDate: string | Date;
+  /** Couleur de l'étape (hex) */
+  color?: string;
+  /** Description de l'étape */
+  description?: string;
+  /** Liste des interventions */
+  interventions?: Intervention[];
+  /** Durée calculée en mois */
+  duration?: number;
+  /** Attributs personnalisés */
+  attributes?: Record<string, string | number>;
+}
+
+export interface ItineraireData {
+  /** Titre de la rotation */
+  title: string;
+  /** Options de configuration */
+  options: ItineraireOptions;
+  /** Liste des étapes de la rotation */
+  steps: Step[];
+}
+
+export interface TimelineData extends Array<ItineraireData> {}
+
+export type RotationData = ItineraireData | TimelineData;
+
+/**
+ * Props pour le composant TikaRenderer
+ */
+export interface TikaRendererProps {
+  /** Données de l'itinéraire à afficher */
+  data: RotationData;
+  /** Largeur du conteneur */
+  width?: string | number;
+  /** Hauteur du conteneur */
+  height?: string | number;
+  /** Classes CSS additionnelles */
+  className?: string;
+  /** Callback lors du clic sur un élément */
+  onItemClick?: (itemId: string, event: Event) => void;
+  /** Callback lors du survol d'un élément */
+  onItemHover?: (itemId: string, event: Event) => void;
+}
+
+/**
+ * Props pour le composant TikaEditor
+ */
+export interface TikaEditorProps {
+  /** Données initiales de l'itinéraire */
+  initialData?: ItineraireData;
+  /** Callback lors de la sauvegarde */
+  onSave?: (data: ItineraireData) => void;
+  /** Callback lors de l'export */
+  onExport?: (data: ItineraireData) => void;
+  /** Classes CSS additionnelles */
+  className?: string;
+  /** Afficher les boutons Wiki (si intégration avec Wiki) */
+  showWikiButtons?: boolean;
+  /** Activer la sauvegarde automatique */
+  enableAutoSave?: boolean;
+  /** Intervalle de sauvegarde automatique (ms) */
+  autoSaveInterval?: number;
+}
+
+/**
+ * Interface de la classe RotationRenderer (pour référence)
+ */
+export interface IRotationRenderer {
+  data: RotationData;
+  chart: any; // Type echarts
+  render(): void;
+  renderChart(): void;
+  buildHTML(): string;
+  highlightItem(id: string): void;
+}
+
+/**
+ * Déclarations globales pour l'intégration avec le code existant
+ */
+declare global {
+  interface Window {
+    RotationRenderer: new (divID: string, data: RotationData) => IRotationRenderer;
+    echarts: any;
+    $: any;
+    _: any;
+    rotation_data?: ItineraireData;
+    refreshAttributesTable?: () => void;
+    refreshStepsButtonList?: () => void;
+    refreshInterventionsList?: () => void;
+    renderChart?: () => void;
+    exportToJsonFile?: (data: ItineraireData, fileName?: string) => void;
+    reactEditorSave?: () => void;
+    reactEditorExport?: () => void;
+  }
+}
+
+export {};

package/.github/copilot-instructions.md

@@ -1,56 +0,0 @@
-# Copilot Instructions for TIKA Itineraire Technique
-
-## Project Overview
-This project visualizes agricultural technical itineraries (sequences of interventions on a plot) for analysis and documentation. It provides both a visualizer and an editor, designed for easy integration into web pages and use on Triple Performance.
-
-## Architecture & Key Components
-- **HTML files**: Main entry points (`visualisateur.html`, `editor.html`, etc.)
-- **JS directory**: Core logic for rendering charts, editing, exporting, and managing interventions. Key files:
-  - `chart-render.js`: Main chart rendering logic (frise and rotation views)
-  - `editor-attributes.js`, `editor-crops.js`, `editor-export.js`, `editor-interventions.js`, `editor-wiki-editor.js`: Editor and data manipulation modules
-- **CSS/SCSS**: Styling for both editor and rendering views
-- **test/**: Contains example JSON data and templates for validation and development
-
-## Data Flow & Integration
-- Input data is provided as JSON, following the format in `test/test.json` and `test.after.json`
-- Rendering is performed by instantiating `RotationRenderer` with a target div and JSON data
-- External dependencies: Apache Echarts, JQuery, Bootstrap, Underscore (included via CDN in HTML)
-
-## Developer Workflows
-- **Build**: No complex build system; use npm to install and copy files as needed
-  - Example: `npm i @osfarm/itineraire-technique`
-  - Copy JS/CSS from `node_modules` to local `js/` and `css/` folders
-- **Testing**: Use the sample JSON files in `test/` for manual validation; no automated test runner
-- **Debugging**: Open HTML files in browser, use browser dev tools; inspect JSON format and rendering
-
-## Project-Specific Conventions
-- All rendering logic expects a specific JSON schema (see `test/test.json`)
-- Editor modules are split by concern (attributes, crops, interventions, etc.)
-- No framework; vanilla JS modules and direct DOM manipulation
-- CSS/SCSS files are mapped 1:1 to editor and rendering views
-
-## Integration Points
-- Designed for easy embedding in any HTML page
-- Used on Triple Performance and Google Spreadsheet add-on
-- Can be extended by adding new JS modules or updating JSON schema
-
-## Example Usage
-```js
-let renderer = new RotationRenderer('uneDIVID', jsonData);
-renderer.render();
-```
-
-## Key Files & Directories
-- `js/chart-render.js`: Main chart logic
-- `test/test.json`: Example data format
-- `editor.html`, `visualisateur.html`: Entry points
-- `css/styles-rendering.css`, `css/styles-editor.css`: Styling
-
-## Tips for AI Agents
-- Always validate JSON input against `test/test.json`
-- When adding features, follow the modular JS file structure
-- Reference CDN links for dependencies in HTML
-- Prefer direct DOM manipulation and vanilla JS patterns
-
----
-For questions about unclear conventions or missing documentation, ask the user for clarification or examples from their workflow.

package/.github/workflows/publish.yml

@@ -1,32 +0,0 @@
-name: Publish to npmjs
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org/'
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build (if needed)
-        run: npm run build
-        continue-on-error: true
-
-      - name: Publish to npmjs
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/scss/styles-editor.scss

@@ -1,149 +0,0 @@
-$button-color      : green;
-$button-hover-color: rgb(2, 102, 2);
-$button-text-color : white;
-$header-height     : 3rem;
-
-.main-header {
-    background-color: #6fa76f;
-    color           : white;
-    height          : $header-height;
-
-    display    : flex;
-    align-items: center;
-
-    .btn.show,
-    .btn:first-child:active,
-    :not(.btn-check)+.btn:active {
-        background-color: #026602;
-    }
-}
-
-.editor-view {
-    overflow-y: auto;
-
-    //scrollbar only for the editor
-    height: calc(100vh - #{$header-height + 1rem});
-}
-
-// Add a button in the rotation to edit right from the transcript
-.rotation_item {
-    .step-edit {
-        color         : #878787;
-        cursor        : pointer;
-        display       : none;
-        margin-left   : 10px;
-        font-size     : 70%;
-        vertical-align: super;
-    }
-
-    &:hover .step-edit {
-        display: inline !important;
-    }
-}
-
-.welcome-view {
-    background-color: #6fa76f;
-    color           : white;
-    padding         : 1rem;
-    margin-top      : 1rem;
-    border-radius   : 1rem;
-
-    #cropsContainer {
-        color: green;
-    }
-}
-
-.card-white {
-    background-color: white;
-    padding         : 1rem;
-    border-radius   : 1rem;
-}
-
-.card-holder {
-    background-color: whitesmoke;
-    padding         : 1rem;
-    border-radius   : 1rem;
-    margin          : auto
-}
-
-.editable-row {
-    background-color: #f7f7f7;
-    min-height      : 3rem;
-
-    display    : flex;
-    align-items: center;
-
-    border-radius: 0.5rem;
-
-    .edit-buttons {
-        visibility: hidden;
-    }
-
-    &:hover>.edit-buttons {
-        visibility: visible;
-    }
-}
-
-.intervention-row {
-    background: #e0e0e0;
-}
-
-.primary-button {
-    color           : $button-text-color;
-    background-color: $button-color;
-    border          : $button-color;
-
-    &:hover {
-        background-color: $button-hover-color;
-    }
-}
-
-.close-step-times {
-    background: none;
-    border    : none;
-    color     : #878787;
-    font-size : 120%;
-
-    &:hover {
-        color: #494949;
-    }
-}
-
-#cropsContainer{
-    .drag-handle {
-        color         : #CCC;
-        font-weight   : normal;
-        font-size     : 86%;
-        margin-right  : 10px;
-        vertical-align: middle;
-        cursor        : grab;
-    }
-
-    div.col {
-        cursor: pointer;
-    }
-}
-
-.form-control {
-    &.text-right {
-        text-align: right;
-    }
-}
-
-.modal {
-    .form-label {
-        font-weight: 600;
-    }
-}
-
-#code-snippet {
-    font-family     : monospace;
-    font-size       : 13px;
-    text-align      : left;
-    border          : 1px inset;
-    background-color: #f1f1f1;
-}
-
-#attributeName, #interventionName {
-    font-weight: bold;
-}

package/scss/styles-rendering.scss

@@ -1,184 +0,0 @@
-div.mainITKContainer {
-    container-type: inline-size;
-    container-name: myparent;
-    line-height   : 1rem;
-
-    .left-transcript {
-        display    : none;
-        width      : 50%;
-        font-family: Segoe UI;
-    }
-
-    .chart-div {
-        width: 100%;
-    }
-
-    .bottom-transcript {
-        display: none;
-    }
-
-    &.withTranscript {
-        .bottom-transcript {
-            display    : block;
-            font-family: Segoe UI;
-        }
-    }
-
-    @container myparent (min-width: 800px) {
-        &.withTranscript {
-            .left-transcript {
-                display: block;
-            }
-
-            .chart-div {
-                width: 50%;
-            }
-
-            .bottom-transcript {
-                display: none;
-            }
-        }
-    }
-
-    @container myparent (min-width: 1000px) {
-        &.withTranscript {
-            .left-transcript {
-                display: block;
-                width  : 40%;
-            }
-
-            .chart-div {
-                width: 60%;
-            }
-
-            .bottom-transcript {
-                display: none;
-            }
-        }
-    }
-
-    div.rotation_item {
-        background-color: #F8FAFC;
-        border-left     : #FFFFFF 14px solid;
-        border-radius   : 7px;
-        padding         : 8px 3px 5px 9px;
-        margin          : 12px 0;
-        overflow-x      : hidden;
-
-        &.highlighted {
-            box-shadow: 0px 4px 4px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16)),
-                0px 1px 16px 0px var(--UI-Shadow, rgba(17, 36, 69, 0.16));
-            background-color: #F0F3F5;
-        }
-
-        div.step-header {
-            h4 {
-                font-size    : 20px;
-                margin-bottom: 0;
-                margin-top   : 0;
-            }
-
-            div.step_dates {
-                font-size       : 11px;
-                background-color: #cdcccc;
-                color           : #000000;
-                margin          : 5px;
-                padding         : 2px 5px;
-                border-radius   : 5px;
-                height          : 20px;
-                float           : right;
-            }
-
-            div.collapse-button {
-                border-radius: 50%;
-                width        : 30px;
-                height       : 30px;
-                text-align   : center;
-                padding      : 5px 0px;
-                margin       : 0 5px 3px 0;
-                cursor       : pointer;
-                background   : #dfe6f7;
-                color        : #7a8bad;
-                float        : right;
-                transition   : transform 0.3s ease-in-out;
-            }
-        }
-
-        .step_description {
-            clear: both;
-        }
-
-        &.show-all {
-            div.collapse-button {
-                transform: rotate(180deg);
-            }
-
-            div.details {
-                max-height: 10000px;
-                /* Adjust this value as needed */
-            }
-        }
-
-        div.details {
-            max-height: 0px;
-            overflow  : hidden;
-            transition: max-height 0.3s ease-in-out;
-
-            div.intervention {
-                background-color: #FFFFFF;
-                border-radius   : 5px;
-                margin-bottom   : 11px;
-                padding         : 13px;
-                cursor          : pointer;
-
-                span.intervention_title {
-                    font-weight: bold;
-                }
-
-                span.intervention_date {
-                    color           : #707070;
-                    background-color: #F0F3F5;
-                    float           : right;
-                }
-
-                div.intervention_description {
-                    margin-top: 5px;
-                }
-            }
-        }
-
-        .step-edit {
-            display: none;
-        }
-    }
-
-    .charts {
-        width  : 100%;
-        height : 500px;
-        display: inline-block;
-    }
-
-    .transcript {
-        font-size      : 80%;
-        width          : 100%;
-        max-height     : 450px;
-        overflow-y     : scroll;
-        scroll-behavior: smooth;
-        padding        : 3px;
-    }
-}
-
-.rotation-tooltip {
-    max-width : 400px;
-    text-align: left;
-
-    div.step_dates {
-        font-size       : 9px;
-        background-color: #cdcccc;
-        color           : #000000;
-        margin          : 5px;
-        padding         : 0px 5px;
-        border-radius   : 5px;
-        float: right;
-    }
-}