Make d3 an npm-managed dependency

Closes #91
2026-06-08 03:18:36 +03:00 · 2019-08-19 16:25:06 +02:00
parent 658a755e9d
commit b0e2e6dd45
8 changed files with 941 additions and 177 deletions
--- a/index.html
+++ b/index.html
@@ -6,7 +6,6 @@
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js" charset="utf-8"></script>
 </head>
 <body>
 <style>
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
-    "d3": "^4.9.1",
+    "d3": "^5.7.0",
    "es6-promise": "^4.1.1",
    "esm": "^3.2.25",
    "joi": "^14.0.1",
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -1,4 +1,5 @@
-/* global d3 */
+import { timeFormat, timeParse } from 'd3'
+
 /**
  * Get URI params to start with predefined set of
  * https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
@@ -67,14 +68,14 @@ export function parseDate (datetime) {
 }

 export function formatterWithYear (datetime) {
-  return d3.timeFormat('%d %b %Y, %H:%M')(datetime)
+  return timeFormat('%d %b %Y, %H:%M')(datetime)
 }

 export function formatter (datetime) {
-  return d3.timeFormat('%d %b, %H:%M')(datetime)
+  return timeFormat('%d %b, %H:%M')(datetime)
 }

-export const parseTimestamp = ts => d3.timeParse('%Y-%m-%dT%H:%M:%S')(ts)
+export const parseTimestamp = ts => timeParse('%Y-%m-%dT%H:%M:%S')(ts)

 export function compareTimestamp (a, b) {
  return (parseTimestamp(a.timestamp) > parseTimestamp(b.timestamp))
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -1,6 +1,6 @@
-/* global d3 */
 import React from 'react'
 import { connect } from 'react-redux'
+import * as d3 from 'd3'
 import * as selectors from '../selectors'
 import hash from 'object-hash'

--- a/src/components/TimelineAxis.jsx
+++ b/src/components/TimelineAxis.jsx
@@ -1,5 +1,5 @@
-/* global d3 */
 import React from 'react'
+import * as d3 from 'd3'

 class TimelineAxis extends React.Component {
  constructor () {
--- a/src/components/TimelineCategories.jsx
+++ b/src/components/TimelineCategories.jsx
@@ -1,5 +1,5 @@
-/* global d3 */
 import React from 'react'
+import * as d3 from 'd3'

 class TimelineCategories extends React.Component {
  constructor () {
--- a/src/reducers/utils/helpers.js
+++ b/src/reducers/utils/helpers.js
@@ -1,12 +1,13 @@
-/* global d3 */
+import { timeFormat, timeParse } from 'd3'
+
 export function parseDateTimes (arrayToParse) {
  const parsedArray = []

  arrayToParse.forEach(item => {
    let incomingDateTime = `${item.date}T00:00`
    if (item.time) incomingDateTime = `${item.date}T${item.time}`
-    const parser = d3.timeParse(process.env.INCOMING_DATETIME_FORMAT)
-    item.timestamp = d3.timeFormat('%Y-%m-%dT%H:%M:%S')(parser(incomingDateTime))
+    const parser = timeParse(process.env.INCOMING_DATETIME_FORMAT)
+    item.timestamp = timeFormat('%Y-%m-%dT%H:%M:%S')(parser(incomingDateTime))

    parsedArray.push(item)
  })
--- a/yarn.lock
+++ b/yarn.lock