import React from 'react';
import ReactDOM from 'react-dom';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/style.min.css';

fetch(
  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
)
  .then((res) => res.json())
  .then((dataCfg) => {
    // original: fields.values = ['number']
    //           data = [{ ..., number: 123, ... }]
    //           meta = [{ field: 'number', name: '数量' }]

    const newValueKey = 'a-long-field-id-that-trigger-width-calc-bug';
    dataCfg.fields.values[0] = newValueKey;
    dataCfg.meta[0].field = newValueKey;
    dataCfg.data.forEach(item => item[newValueKey] = item.number);

    const s2Options = {
      width: 600.32,
      height: 480,
      style: {
        layoutWidthType: 'compact',
        frozenRowHeader: true,
        colCfg: {
          height: 32,
        },
        device: 'pc'
      }
    };

    ReactDOM.render(
      <SheetComponent dataCfg={dataCfg} options={s2Options} />,
      document.getElementById('container'),
    );
  });