const el = document.createElement('gui-dashboard');
const data = new gc.core.Table([
  [
    new Date('2019-01-01T15:15:00Z'),
    new Date('2019-01-02T15:15:00Z'),
    new Date('2020-01-03T15:15:00Z'),
    new Date('2021-01-04T15:15:00Z'),
  ],
  [-2.5, 1.458, 0.009, 5.64],
]);
data.headers = ['Date', 'Value'];
const chart = {
  component: 'gui-chart',
  title: 'Chart',
  position: { direction: 'right' },
  attrs: {
    value: data,
    config: {
      cursor: true,
      xAxis: {
        scale: 'time',
      },
      yAxes: {
        temp: {},
      },
      series: [
        {
          title: 'Value',
          type: 'line+scatter',
          yAxis: 'temp',
          xCol: 0,
          yCol: 1,
          plotRadius: 3,
        },
      ],
    },
  },
  table: {
    component: 'gui-table',
    title: 'Temperature table',
    position: { direction: 'right' },
    attrs: { value: data },
  },
};
const table = {
  component: 'gui-table',
  title: 'Table',
  position: { direction: 'right' },
  attrs: {
    value: data,
  },
};
el.components = { chart: chart, table: table };
el.updateEvery = 1000;
el.associations = {
  chart: ['fetcher'],
  table: ['fetcher'],
};
el.fetchers = {
  fetcher: (el) => {
    el.value = {
      meta: [{ header: 'Date' }, { header: 'Value' }],
      cols: [
        [
          new Date('2019-01-01T15:15:00Z'),
          new Date('2019-01-02T15:15:00Z'),
          new Date('2020-01-03T15:15:00Z'),
          new Date('2021-01-04T15:15:00Z'),
        ],
        Array.from({ length: 4 }, () => Math.random() * 10),
      ],
    };
  },
};