const el = document.createElement('gui-dashboard');
const data = {
  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'),
    ],
    [-2.5, 1.458, 0.009, 5.64],
  ],
};
const chart = {
  component: 'gui-chart',
  title: 'Chart',
  position: { direction: 'right' },
  attrs: {
    config: {
      cursor: true,
      xAxis: {
        scale: 'time',
      },
      yAxes: {
        temp: {},
      },
      table: data,
      series: [
        {
          title: 'Value',
          type: 'line',
          yAxis: 'temp',
          xCol: 0,
          yCol: 1,
        },
      ],
    },
  },
};
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))
    ],
  }
}}