Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WDC SDK seems doesn't work with React Or may be I'm not using it the right way #315

Open
duongthienlee opened this issue Jun 28, 2019 · 1 comment
Open

WDC SDK seems doesn't work with React Or may be I'm not using it the right way #315

duongthienlee opened this issue Jun 28, 2019 · 1 comment
Assignees
@maxrandolph

Comments

@duongthienlee
Copy link

duongthienlee commented Jun 28, 2019 •
edited
Loading

I keep getting this error ReferenceError: Can't find variable: Set file: http://localhost:1337/bundle.min.js line: 33098

It looks like window.tableau.getSchema() and myConnector.getData() have never been called. I add a log message, but it has never been executed.

Here is my html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dashboard</title>
  <link rel="shortcut icon" href="favicon.ico">
</head>

<body>
  <div id="app">
  </div>
  <script id="tableauScript" src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
</body>

</html>

Here is the component that will display on Tableu WDC, the route will be enter via WDC on Tableu Desktop app is http://localhost:1337/tableau/wdc

import React, { Component } from 'react';

class TableauWDC extends Component {
    submit() {
        window.tableau.connectionName = "USGS Earthquake Feed"; // This will be the data source name in Tableau
        window.tableau.submit(); // This sends the connector object to Tableau
    }
    loadJSON(path, success, error) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    if (success)
                        success(JSON.parse(xhr.responseText));
                } else {
                    if (error)
                        error(xhr);
                }
            }
        };
        xhr.open("GET", path, true);
        xhr.send();
    }
    componentDidMount() {
        let isReady = document.getElementById("tableauScript");
        isReady && this.setConnect()
    }
    setConnect() {
        var myConnector = window.tableau.makeConnector();
        myConnector.getSchema = function (schemaCallback) {
            window.tableau.log("getSchema")
            var cols = [{
                id: "id",
                dataType: window.tableau.dataTypeEnum.string
            }, {
                id: "mag",
                alias: "magnitude",
                dataType: window.tableau.dataTypeEnum.float
            }, {
                id: "title",
                alias: "title",
                dataType: window.tableau.dataTypeEnum.string
            }, {
                id: "location",
                dataType: window.tableau.dataTypeEnum.geometry
            }];

            var tableSchema = {
                id: "earthquakeFeed",
                alias: "Earthquakes with magnitude greater than 4.5 in the last seven days",
                columns: cols
            };

            schemaCallback([tableSchema]);
        };
        // Download the data
        myConnector.getData = function (table) {
            window.tableau.log("getData")
            this.loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson',
                function (data) {
                    var feat = data.features,
                        tableData = [];

                    // Iterate over the JSON object
                    for (var i = 0, len = feat.length; i < len; i++) {
                        tableData.push({
                            "id": feat[i].id,
                            "mag": feat[i].properties.mag,
                            "title": feat[i].properties.title,
                            "location": feat[i].geometry
                        });
                    }

                    table.appendRows(tableData);
                },
                function (xhr) { console.error(xhr); }
            );
        };

        
        window.tableau.registerConnector(myConnector);
       
    }
    render() {
        return (
            <div style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: "100%"
            }}>

                <button onClick={() => this.submit()} className="btn btn-success" >Get Earthquake Data!</button>

            </div>
        );
    }
}

export default TableauWDC;

I keep getting these errors.

A snippet from the error is below here

An error occurred while communicating with Web Data Connector.

The connector has reported an unrecoverable error and cannot proceed. If the connector has reported details of the error, they are displayed in the pane below.
ReferenceError: Can't find variable: Set   file: http://localhost:1337/bundle.min.js   line: 33098
ReferenceError: Can't find variable: Set   file: http://localhost:1337/bundle.min.js   line: 33098

enter image description here

Version of React:
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router": "^3.2.0"
@lexi-sh
Copy link

lexi-sh commented Oct 14, 2021

I attempted to create a react-based WDC this week, ran into similar issues. What I found specifically was that the init message from the Dispatcher was never called from my app. I believe, looking at the bundled code, the dispatcher triggers the init message after the dom has been fully loaded, so it's possible that React stops whatever event the WDC library is listening for.

I couldn't get it to work and ended up ditching it for a non-framework solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@maxrandolph maxrandolph

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lexi-sh @maxrandolph @duongthienlee