import { mount } from 'svelte'
import './app.css'
import App from './App.svelte'


// Método de carga de la licencia de DevExtreme, necesario para evitar el mensaje de advertencia en la consola del navegador.
import config from "devextreme/core/config"; 
import { licenseKey } from "./devextreme-license.js"; 
config({ licenseKey });

const app = mount(App, {
  target: document.getElementById('app'),
})

export default app

export const licenseKey = "TU_CLAVE_DE_LICENCIA";

<script>
  import { onMount } from "svelte";

  // PivotGrid
  import PivotGrid from "devextreme/ui/pivot_grid";

  // Chart
  import Chart from "devextreme/viz/chart";

  // Exportación
  import ExcelJS from "exceljs";
  import { saveAs } from "file-saver";

  // Localización
  import esMessages from "devextreme/localization/messages/es.json";
  import { loadMessages, locale } from "devextreme/localization";

  loadMessages(esMessages);
  locale("es");

  import { sales } from "./data.js";

  let pivotEl;
  let chartEl;

  let pivotGrid;
  let chart;
  let data = $state(sales);

  onMount(() => {
    chart = new Chart(chartEl, {
      commonSeriesSettings: { type: "line" },
      tooltip: {
        enabled: true,
        format: { type: "currency", currency: "EUR", precision: 0 }
      },
      size: { height: 200 }
    });

    pivotGrid = new PivotGrid(pivotEl, {
      allowSortingBySummary: true,
      allowFiltering: true,
      showBorders: true,

      fieldChooser: {
        enabled: true,
        height: 400,
        title: "Selector de campos"
      },

      export: { enabled: true },

      onExporting(e) {
        const workbook = new ExcelJS.Workbook();
        const worksheet = workbook.addWorksheet("Pivot");

        import("devextreme/excel_exporter").then(({ exportPivotGrid }) => {
          exportPivotGrid({
            component: e.component,
            worksheet
          }).then(() => {
            workbook.xlsx.writeBuffer().then((buffer) => {
              saveAs(new Blob([buffer]), "pivot.xlsx");
            });
          });
        });

        e.cancel = true;
      },

      dataSource: {
        fields: [
          { caption: "Región", dataField: "region", area: "row" },
          { caption: "Ciudad", dataField: "city", area: "row" },

          // Año → Trimestre → Mes (filtros OK)
          { dataField: "date", dataType: "date", area: "column", groupInterval: "year", caption: "Año" },
          { dataField: "date", dataType: "date", area: "column", groupInterval: "quarter", caption: "Trimestre" },
          { dataField: "date", dataType: "date", area: "column", groupInterval: "month", caption: "Mes" },

          {
            caption: "Total",
            dataField: "amount",
            dataType: "number",
            summaryType: "sum",
            area: "data",
            format: {
              formatter(value) {
                if (value == null) return "";
                return new Intl.NumberFormat("es-ES", {
                  useGrouping: true, // separador de miles
                  // style: "currency",
                  // currency: "EUR",
                  minimumFractionDigits: 0,
                  maximumFractionDigits: 0
                }).format(value);
              }
            }
          }
        ],
        store: data
      }
    });

    pivotGrid.bindChart(chart, {
      dataFieldsDisplayMode: "splitPanes",
      alternateDataFields: false
    });

    none_demo();
  });

  $effect(() => {
    if (pivotGrid) {
      pivotGrid.option("dataSource.store", data);
    }
  });

  function none_demo() {
    const botones = document.querySelectorAll('div[style*="cursor: pointer"]');
    botones.forEach((boton) => {
      boton.click();
    });
  }

</script>

<div bind:this={chartEl}></div>
<div bind:this={pivotEl} style="height:600px;"></div>