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

Unable to get basic timeline to work with unpkg libraries #281

Open
chenc17 opened this issue Jan 14, 2020 · 4 comments
Open

Unable to get basic timeline to work with unpkg libraries #281

chenc17 opened this issue Jan 14, 2020 · 4 comments

Comments

@chenc17
Copy link

chenc17 commented Jan 14, 2020

What you were expecting:
I tried to make a very simple timeline without a module bundler by following the instructions in the "Usage" section.

What happened instead:
I get the following console errors:

"ReferenceError: global is not defined
n              https://unpkg.com/event-drops:1
_initialize https://unpkg.com/event-drops:1
t               https://unpkg.com/event-drops:1
call           https://unpkg.com/d3:2"

"Source map error: Error: request failed with status 404
Resource URL: https://unpkg.com/event-drops
Source Map URL: index.js.map"

Steps to reproduce:

Put the code in the "Related code" section below in a file called "index.html" and open it in a Firefox or Chrome browser.

Related code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Event Drops Demo</title>
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
        <link href="https://unpkg.com/event-drops/dist/style.css" rel="stylesheet" />
    </head>

    <body>
        <h1>Event Drops Demo</h1>
        <div id="eventdrops-demo" style="width: 90%;"></div>
        <footer>
            <p>
                Released under MIT license, courtesy of <a href="http://marmelab.com/">marmelab</a>
                and <a href="https://github.com/canalplus">Canal Plus</a>. More details on our
                <a href="https://github.com/marmelab/EventDrops">GitHub repository</a>.
            </p>
        </footer>

        <script src="https://unpkg.com/d3"></script>
        <script src="https://unpkg.com/event-drops"></script>
        <script id='code'>

            const chart = eventDrops({});

            const repositoriesData = [
            {
                name: 'admin-on-rest',
                data: [{ date: new Date('2014/09/15 14:21:31') } /* ... */],
            },
            {
                name: 'event-drops',
                data: [{ date: new Date('2014/09/15 13:24:57') } /* ... */],
            },
            {
                name: 'sedy',
                data: [{ date: new Date('2014/09/15 13:25:12') } /* ... */],
            },
            ];

            d3
            .select('#eventdrops-demo')
            .data([repositoriesData])
            .call(chart);
        </script>
    </body>
</html>
@cmsedore
Copy link

cmsedore commented Feb 1, 2020 •
edited
Loading

I see the same problem. You can resolve your issue by adding:

var global = global || window;

before

d3 .select('#eventdrops-demo'): .data([repositoriesData]) .call(chart);

However, even though this clears the error, the code still doesn't work (it doesn't seem to parse the data). You can force downgrade the library version to 1.0.0 :

<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
instead of:
<script src="https://unpkg.com/event-drops"></script>

and it will sort of work--at least it will paint a drop on the timeline, but it still isn't working correctly for me. (The drop doesn't get painted in the correct location vis a vis the legend, it doesn't scroll, but it will disappear if the time window for the drop is not in the range displayed on the timeline legend.)

@chenc17
Copy link
Author

chenc17 commented Feb 9, 2020

Hmm, ok! Thanks for looking into this for me!

@cmsedore
Copy link

Just a quick follow-up.

I have these libraries working together to render eventdrops:

<script src="https://unpkg.com/[email protected]/build/d3.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>

I have been unable to get newer versions working, which is disappointing since some of the features were desirable. In order to update with new data or selections, for example, I'm rendering in an iframe that I can reload with new parameters...

@Busteren
Copy link
Contributor

Hi,

I would recommend getting the latest from master and building the repo yourself.
There are a few PR I have made (which are merged) that fixes a few bugs (mentioned in this issue).
I am not a maintainer, so I cannot update NPM unfortunately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cmsedore @chenc17 @Busteren