Banque France

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>

<div id="container1"></div>
<div id="container2"></div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid-lite.css");

.banque-france-base {
  --hcg-font-size: 14px;
  --hcg-padding: 10px;
  --hcg-background: #efefef;
  --hcg-header-font-weight: 600;

  --hcg-caption-font-size: 18px;

  --hcg-button-color: #000000;
  --hcg-button-border-radius: 5px;
  --hcg-button-hover-background: #d6d6d6;
}

.banque-france-theme1 {
  --hcg-border-width: 1px;
  --hcg-row-border-color: #ffffff;
  --hcg-column-border-color: #ffffff;
}

.banque-france-theme2 {
  --hcg-border-width: 2px;
  --hcg-border-color: #ffffff;
  --hcg-row-even-background: #d9e5f2;
  --hcg-header-background: #3e76a8;
  --hcg-header-font-weight: normal;
  --hcg-link-color: #3e76a8;
  --hcg-link-font-weight: 800;
}







.hcg-container .empty {
  background-color: #d9e5f2 !important;
}

.hcg-container.banque-france-theme1 thead tr:last-child th,
.hcg-container tr:has(.borderBottom) td {
  border-bottom-color: #000000;
}

.hcg-container :has(+ .borderLeft) {
  border-right-color: #000000;
}

.hcg-container tbody tr:has(.bold.borderBottom) td {
  font-weight: 600;
  border-bottom-width: 2px;
}

.hcg-container.banque-france-theme1 tbody tr:last-child td {
  font-weight: 600;
}











.hcg-container.banque-france-theme2 .section {
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.hcg-container.banque-france-theme2 .bold .hcg-header-cell-content {
  color: #ffffff;
  font-weight: 800;
}


















body {
  background: var(--highcharts-background-color);
  color: var(--highcharts-neutral-color-100);
}

.hcg-header-cell-content {
  white-space: normal;
}

#container1,
#container2 {
  padding: 12px;
}

JavaScript

Grid.grid('container1', {
  dataTable: {
    columns: {
      rowHeader: [
        'Financement des SNF',
        'Financement par crédit bancaire',
        'Investissement',
        'Equipement',
        'Immobilier',
        'Trésorerie',
        'Autres',
        'Crédits <= 1 million',
        'Crédits > 1 million',
        'Financement de marché',
      ],
      outstanding: [
        2105.3,
        1387.5,
        1013.3,
        634.1,
        379.2,
        296.5,
        77.6,
        ,
        ,
        717.7,
      ],
      transactions: [45.9, 32.1, , , , , , , , 13.9],
      newBusiness: [685.8, 336.9, , , , , , 119.1, 217.9, 348.9],
      growth0824: [2.3, 2, 3.1, 2.8, 3.6, -2.8, 8.6, , , 2.9],
      growth0625: [1.6, 2.1, 3.9, 3.8, 3.9, -3.8, 4.5, , , 0.7],
      growth0725: [2.4, 2.6, 3.9, 4.0, 3.8, -2.2, 4.8, , , 2],
      growth0825: [2.2, 2.4, 3.9, 4, 3.7, -3.2, 5.1, , , 2],
      cost0824: [4.16, 4.51, , , , , , 4.28, 4.67, 3.48],
      cost0625: [3.49, 3.57, , , , , , 3.75, 3.47, 3.34],
      cost0725: [3.47, 3.57, , , , , , 3.73, 3.5, 3.28],
      cost0825: [3.36, 3.39, , , , , , 3.65, 3.21, 3.3],
    },
  },
  rendering: {
    theme: 'banque-france-base banque-france-theme1',
  },
  caption: {
    text: "1- Vue d'ensemble des SNF : Encours et flux en Mds €, taux de croissance annuel et coût en %",
  },
  header: [
    {
      format: '',
      columns: [
        {
          columnId: 'rowHeader',
          format: '',
        },
      ],
    },
    {
      format: 'aoüt-2025 (p)',
      className: 'hcg-center borderLeft',
      columns: [
        {
          columnId: 'outstanding',
          format: 'Encours',
          className: 'hcg-center',
        },
        {
          columnId: 'transactions',
          format: 'Flux nets sur 12 moins',
          className: 'hcg-center',
        },
        {
          columnId: 'newBusiness',
          format: 'Flux brut sur 12...