marmelab / marmelab/EventDrops

Unable to get basic timeline to work with unpkg libraries

Open
#281 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.3k
Forks
233
PR merge metrics
No merged PRs in 30d

Description

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>

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Usage example and the related index.html, then reproduce the unpkg loading errors in Firefox or Chrome. Inspect how the published event-drops and d3 scripts load in a browser without a bundler; done means the basic timeline renders without the global ReferenceError or the reported source map error.

Written by the indexing model from the issue text.

Assessment

Tech stack
d3js, javascript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.