drupal-figli-compta/web/modules/custom/figli_compta_ledger/js/dashboard.js

/**
 * @file
 * Dashboard: charts and aggregate totals (chiffre d'affaires par année,
 * répartition par type, top clients), computed server-side
 * (DashboardStatsController -- plain SQL GROUP BY, not Entity API) and
 * rendered here as small dependency-free div/CSS bar charts. No charting
 * library: this project vendors its own JS (see js/vendor/), and a
 * handful of bar/line charts don't warrant pulling one in. Solde par
 * compte lives on its own page (js/dashboard-repartition.js).
 */
(function (Drupal, Vue) {
  'use strict';

  const EUR = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });
  const EUR_ROUND = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 });
  const TYPE_LABELS = {
    entree: 'Entrée client',
    charge: 'Charge structurelle',
    versement: 'Versement freelance',
    achat: 'Achat client',
    hebergement: 'Hébergement',
    sous_traitant: 'Sous-traitant',
    salaire_stage: 'Salaire / stage',
    charges_local_pro: 'Charges local pro',
    autre: 'Autre',
  };
  // Stable colour per type, independent of sort order -- a viewer
  // comparing this chart across page loads shouldn't see "achat" change
  // colour just because its rank shifted.
  const TYPE_COLORS = {
    entree: '#1a7f37',
    charge: '#6b7280',
    versement: '#d97a0a',
    achat: '#3b6fe0',
    hebergement: '#0e9182',
    sous_traitant: '#c9312b',
    salaire_stage: '#0891b2',
    charges_local_pro: '#65a30d',
    autre: '#9061f0',
  };

  async function fetchStats() {
    const res = await fetch('/dashboard/api/stats', { headers: { Accept: 'application/json' } });
    if (!res.ok) throw new Error('/dashboard/api/stats a répondu ' + res.status);
    return res.json();
  }

  // Horizontal bar chart -- one row per item, label left, proportional
  // bar, value right. Switches to a zero-centered "diverging" layout
  // automatically when values can be negative (solde par compte), so a
  // debit and a credit of the same magnitude read as mirror images
  // instead of one dwarfing the other from a shared zero baseline.
  const HBarChart = {
    props: {
      items: { type: Array, required: true },
      formatValue: { type: Function, required: true },
      colorFor: { type: Function, default: null },
      // Narrower label/value columns, smaller text -- for the per-année
      // small-multiples grids, where a full-width chart wouldn't fit in
      // a grid card. Same prop as dashboard-compte.js's own HBarChart
      // copy (this project duplicates the component rather than sharing
      // it between dashboard.js/dashboard-compte.js, see dashboard.css).
      compact: { type: Boolean, default: false },
    },
    computed: {
      hasNegative() {
        return this.items.some((i) => i.value < 0);
      },
      maxAbs() {
        return Math.max(1, ...this.items.map((i) => Math.abs(i.value)));
      },
    },
    methods: {
      fillStyle(item) {
        const pct = (Math.abs(item.value) / this.maxAbs) * 100;
        if (this.hasNegative) {
          return item.value >= 0
            ? { left: '50%', width: pct / 2 + '%' }
            : { right: '50%', width: pct / 2 + '%' };
        }
        return { left: 0, width: pct + '%' };
      },
      fillColor(item) {
        if (this.colorFor) return this.colorFor(item);
        return item.value < 0 ? 'var(--figli-error)' : 'var(--figli-positive)';
      },
    },
    template:
      '<div class="figli-hbar-chart" :class="{\'is-compact\': compact}">' +
      '<div class="figli-hbar-row" v-for="item in items" :key="item.label">' +
      '<div class="figli-hbar-label" :title="item.label">{{ item.label }}</div>' +
      '<div class="figli-hbar-track" :class="{\'is-diverging\': hasNegative}">' +
      '<div class="figli-hbar-zero" v-if="hasNegative"></div>' +
      '<div class="figli-hbar-fill" :style="[fillStyle(item), {background: fillColor(item)}]"></div>' +
      '</div>' +
      '<div class="figli-hbar-value">{{ formatValue(item.value) }}</div>' +
      '</div>' +
      '</div>',
  };

  // Vertical bar chart -- for a short time series (CA par année): a
  // handful of columns read left-to-right as a trend more naturally than
  // horizontal bars would.
  const VBarChart = {
    props: {
      items: { type: Array, required: true },
      formatValue: { type: Function, required: true },
    },
    computed: {
      max() {
        return Math.max(1, ...this.items.map((i) => i.value));
      },
    },
    methods: {
      barHeight(item) {
        return Math.max(2, (item.value / this.max) * 100) + '%';
      },
    },
    template:
      '<div class="figli-vbar-chart">' +
      '<div class="figli-vbar-col" v-for="item in items" :key="item.label">' +
      '<div class="figli-vbar-value">{{ formatValue(item.value) }}</div>' +
      '<div class="figli-vbar-track"><div class="figli-vbar-fill" :style="{height: barHeight(item)}"></div></div>' +
      '<div class="figli-vbar-label">{{ item.label }}</div>' +
      '</div>' +
      '</div>',
  };

  const App = {
    components: { HBarChart, ColumnChart: VBarChart },
    data() {
      return { loading: true, error: null, stats: null };
    },
    computed: {
      caParAnneeItems() {
        if (!this.stats) return [];
        return this.stats.annees.map((y) => ({ label: y, value: this.stats.ca_par_annee[y] || 0 }));
      },
      typeItems() {
        if (!this.stats) return [];
        return Object.entries(this.stats.total_par_type)
          .map(([type, value]) => ({ label: TYPE_LABELS[type] || type, value, type }))
          .sort((a, b) => b.value - a.value);
      },
      topClientsItems() {
        if (!this.stats) return [];
        return this.stats.top_clients.map((c) => ({ label: c.client, value: c.ca }));
      },
      // Small multiples, one per year -- same source as typeItems() above
      // (total_par_type_par_annee is the same node-level SQL query, just
      // also grouped by année, no extra request). Mirrors
      // dashboard-compte.js's typeItemsParAnnee, but that one filters a
      // full row list client-side (it has one, scoped to a single
      // compte); this page never fetches full rows (see this file's
      // docblock), so the per-année breakdown has to already be
      // pre-aggregated server-side.
      typeItemsParAnnee() {
        if (!this.stats) return [];
        return this.stats.annees.map((annee) => {
          const parType = this.stats.total_par_type_par_annee[annee] || {};
          const items = Object.entries(parType)
            .map(([type, value]) => ({ label: TYPE_LABELS[type] || type, value, type }))
            .sort((a, b) => b.value - a.value);
          return { annee, items };
        }).filter((y) => y.items.length);
      },
      // Same idea for topClientsItems() -- top_clients_par_annee is
      // already capped to 8 per year server-side (see
      // DashboardStatsController::stats()), same reasoning as
      // dashboard-compte.js capping its own per-année version to 5.
      topClientsParAnnee() {
        if (!this.stats) return [];
        return this.stats.annees.map((annee) => {
          const items = (this.stats.top_clients_par_annee[annee] || [])
            .map((c) => ({ label: c.client, value: c.ca }));
          return { annee, items };
        }).filter((y) => y.items.length);
      },
      totalCA() {
        if (!this.stats) return 0;
        return Object.values(this.stats.ca_par_annee).reduce((a, b) => a + b, 0);
      },
      caAnneeEnCours() {
        if (!this.stats || !this.stats.annees.length) return null;
        const derniere = this.stats.annees[this.stats.annees.length - 1];
        return { annee: derniere, value: this.stats.ca_par_annee[derniere] || 0 };
      },
      totalActivite() {
        if (!this.stats) return 0;
        return Object.values(this.stats.total_par_type).reduce((a, b) => a + b, 0);
      },
    },
    methods: {
      formatEur(v) {
        return EUR.format(v);
      },
      formatEurRound(v) {
        return EUR_ROUND.format(v);
      },
      typeColor(item) {
        return TYPE_COLORS[item.type] || '#6b7280';
      },
      async load() {
        this.loading = true;
        this.error = null;
        try {
          this.stats = await fetchStats();
        } catch (err) {
          this.error = err.message;
        } finally {
          this.loading = false;
        }
      },
    },
    mounted() {
      this.load();
    },
  };

  Drupal.behaviors.figliComptaDashboard = {
    attach(context) {
      const root = context.querySelector ? context.querySelector('#figli-dashboard-app') : null;
      if (root && !root.dataset.figliInitialized) {
        root.dataset.figliInitialized = '1';
        Vue.createApp(App).mount(root);
      }
    },
  };
})(Drupal, Vue);