Unable to get basic timeline to work with unpkg libraries

chenc17 commented 4 years ago

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 commented 4 years ago

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/event-drops@1.0.0/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 commented 4 years ago

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

cmsedore commented 4 years ago

Just a quick follow-up.

I have these libraries working together to render eventdrops:

<script src="https://unpkg.com/d3@4.13.0/build/d3.min.js"></script>
<script src="https://unpkg.com/event-drops@1.2.0/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 commented 4 years ago

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.

marmelab / EventDrops

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