Chart-click for Grid-edit

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/highcharts/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts/modules/exporting.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts/modules/offline-exporting.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts/modules/accessibility.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>

<div id="container-chart"></div>

<div id="container-grid"></div>

CSS

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

#container-grid {
    height: 400px;
}

JavaScript

const rndStr = () => String.fromCharCode(...Array(5).fill().map(() => 97 + Math.random() * 26 | 0));
const dataTable = new Grid.DataTable({
  columns: {
    'Fruit': Array.from({ length: 500 }, () => rndStr()),
    'Quantity': Array.from({ length: 500 }, (_, i) => Math.round(Math.sin(i * 0.1) * 100)),
  }
});

const chart = new Highcharts.Chart('container-chart', {
  title: {
    text: 'Fruits',
  },
  chart: {
    styledMode: true,
  },
  series: [{
    name: 'Fruit Consumption',
    data: dataTable.getRows(),
    findNearestPointBy: 'xy',
    point: {
      events: {
        click: (event) => {
          const point = event.point;
          // Extra dashboards code:
          // const board = Dashboards.boards[0];
          // const grid = board.mountedComponents[1].component.grid;
          const vp = grid.viewport;
          vp.cellEditing?.stopEditing(false);
          vp.scrollToRow(point.x);
          requestAnimationFrame(() => {
            // After scroll
            const row = vp.getRow(point.x);
            vp.cellEditing?.startEditing(row.cells[1]);
          });
        },
      },
    },
  }],
  xAxis: {
    type: 'category',
  },
});

const grid = new Grid.Grid('container-grid', {
  columns: [{
    id: 'Quantity',
    cells: {
      editMode: {
        enabled: true,
      },
      events: {
        afterEdit: () => {
          chart.container.scrollIntoView();
          chart.series[0].update({
            data: dataTable.getRows(),
          });
        },
      },
    },
  }],
  dataTable,
});