initial commit

aulneau · aulneau · commit 504560c500eb · 2018-02-21T14:54:55.000-06:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.idea
+yarn.lock
+.next
diff --git a/components/plot.js b/components/plot.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import plotly from 'plotly.js/dist/plotly';
+import createPlotComponent from 'react-plotly.js/factory';
+
+const Plot = createPlotComponent(plotly);
+
+export default () => (
+  <Plot
+    data={[
+      {
+        type: 'scatter',
+        mode: 'lines+points',
+        x: [1, 2, 3],
+        y: [2, 6, 3],
+        marker: {color: 'red'}
+      },
+      {
+        type: 'bar',
+        x: [1, 2, 3],
+        y: [2, 5, 3]
+      }
+    ]}
+
+    layout={{
+      width: 320,
+      height: 240,
+      title: 'A Fancy Plot'
+    }}
+  />
+)
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "next.js-with-react-plotly.js",
+  "description": "A next.js example with react-plotly.js",
+  "version": "0.0.1",
+  "author": "Thomas Osmonson <hello@ineffable.co>",
+  "bugs": {
+    "url": "https://github.com/aulneau/next.js-with-react-plotly.js/issues",
+    "email": "hello@ineffable.co"
+  },
+  "dependencies": {
+    "fs": "^0.0.1-security",
+    "next": "^5.0.0",
+    "plotly.js": "^1.34.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-plotly.js": "^1.4.0"
+  },
+  "repository": "aulneau/next.js-with-react-plotly.js",
+  "scripts": {
+    "build": "next build",
+    "dev": "next",
+    "start": "next start"
+  }
+}
diff --git a/pages/index.js b/pages/index.js
@@ -0,0 +1,16 @@
+import React, {Fragment} from 'react';
+import Head from 'next/head'
+import dynamic from 'next/dynamic'
+
+const DynamicPlot = dynamic(import('../components/plot'), {
+  ssr: false
+})
+
+export default () => (
+  <Fragment>
+    <Head>
+      <title>next.js react-plotly.js example</title>
+    </Head>
+    <DynamicPlot />
+  </Fragment>
+)

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +node_modules
 +.idea
 +yarn.lock
 +.next