sanddance react example

package.json

{
  "name": "project1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.1.3",
    "jquery": "^3.4.1",
    "merge": "^1.2.1",
    "oidc-client": "^1.9.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.1",
    "reactstrap": "^8.4.1",
    "rimraf": "^2.6.2",
    "@deck.gl/core": "8.3.7",
    "@deck.gl/layers": "8.3.7",
    "@msrvida/sanddance-react": "^3",
    "@msrvida/sanddance-explorer": "^3",
    "@fluentui/react": "^7.150.0",
    "@luma.gl/core": "^8.3.1",
    "vega": "^5.17.0"
  },
  "devDependencies": {
    "ajv": "^6.9.1",
    "cross-env": "^5.2.0",
    "typescript": "^3.7.5",
    "eslint": "^6.8.0",
    "eslint-config-react-app": "^5.2.0",
    "eslint-plugin-flowtype": "^4.6.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.3",
    "nan": "^2.14.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

sanddance.js

import * as deck from '@deck.gl/core';
import * as layers from '@deck.gl/layers';
import * as luma from '@luma.gl/core';
import * as fluentui from '@fluentui/react';
import * as vega from 'vega';
import React, { Component } from 'react';
import * as ReactDOM from 'react-dom';
import { Explorer, use } from '@msrvida/sanddance-explorer';
import "@msrvida/sanddance-explorer/dist/css/sanddance-explorer.css"
fluentui.initializeIcons();
use(fluentui, React, ReactDOM, vega, deck, layers, luma);

export class FetchData extends Component {
  static displayName = FetchData.name;

  constructor(props) {
    super(props);
    this.state = { forecasts: [], loading: true };
  }

  componentDidMount() {
    this.populateWeatherData();
  }

  static renderForecastsTable(forecasts) {
    
    const explorerProps = {
        logoClickUrl: 'https://microsoft.github.io/SandDance/',
        mounted: explorer => {
            explorer.load(forecasts);
        }
    };
    return (
      <div>
         <Explorer {...explorerProps} />
      </div>
    );
    //return (
    //  <table className='table table-striped' aria-labelledby="tabelLabel">
    //    <thead>
    //      <tr>
    //        <th>Date</th>
    //        <th>Temp. (C)</th>
    //        <th>Temp. (F)</th>
    //        <th>Summary</th>
    //      </tr>
    //    </thead>
    //    <tbody>
    //      {forecasts.map(forecast =>
    //        <tr key={forecast.date}>
    //          <td>{forecast.date}</td>
    //          <td>{forecast.temperatureC}</td>
    //          <td>{forecast.temperatureF}</td>
    //          <td>{forecast.summary}</td>
    //        </tr>
    //      )}
    //    </tbody>
    //  </table>
    //);
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : FetchData.renderForecastsTable(this.state.forecasts);

    return (
      <div>
        <h1 id="tabelLabel" >CCars dashboards</h1>
        <p>This component demonstrates fetching data from the server.</p>
        {contents}
      </div>
    );
  }

  async populateWeatherData() {
    const response = await fetch('weatherforecast');
    const data = await response.json();
    this.setState({ forecasts: data, loading: false });
  }
}