From 9869cfea628d8a4e9ab25520f25d7b8c459171f3 Mon Sep 17 00:00:00 2001
From: Marcos Iglesias <miglesiasvalle@lyft.com>
Date: Tue, 24 Nov 2020 10:21:18 -0800
Subject: [PATCH] Adds LineChart example

---
 src/App.js                  | 19 ++++++++++++++++---
 src/line/LineChartImport.js |  9 +++++++++
 src/line/data.js            | 28 ++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 src/line/LineChartImport.js
 create mode 100644 src/line/data.js

diff --git a/src/App.js b/src/App.js
index 4adbcd9..3762ef4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,20 +5,28 @@ import './App.css';
 
 import DonutChartImport from './donut/DonutChartImport';
 import DonutChartCommonJS from './donut/DonutChartCommonJS';
-
 import DonutChartLibESM from './donut/DonutChartLibESM';
 import DonutChartLibCJS from './donut/DonutChartLibCJS';
 import DonutChartLibUMD from './donut/DonutChartLibUMD';
 
+import LineChartImport from './line/LineChartImport';
+
 class App extends Component {
   render() {
     return (
       <div className="App">
         <header className="App-header">
-          <img src={britechartsLogo} className="brc-logo" alt="Britecharts-React logo" />
+          <img
+            src={britechartsLogo}
+            className="brc-logo"
+            alt="Britecharts-React logo"
+          />
           <img src={reactLogo} className="react-logo" alt="logo" />
-          <h1 className="App-title">Welcome to the Britecharts-React demo project!</h1>
+          <h1 className="App-title">
+            Welcome to the Britecharts-React demo project!
+          </h1>
         </header>
+        <h2>Donut Chart</h2>
         <div className="chart-container">
           <h3>Loading with ES2015 imports from dist/</h3>
           <DonutChartImport />
@@ -39,6 +47,11 @@ class App extends Component {
           <h3>Loading with UMD from lib/</h3>
           <DonutChartLibUMD />
         </div>
+        <h2>Line Chart</h2>
+        <div className="chart-container">
+          <h3>Loading with ES2015 imports from dist</h3>
+          <LineChartImport />
+        </div>
       </div>
     );
   }
diff --git a/src/line/LineChartImport.js b/src/line/LineChartImport.js
new file mode 100644
index 0000000..361c7fd
--- /dev/null
+++ b/src/line/LineChartImport.js
@@ -0,0 +1,9 @@
+import React from "react";
+import { withTwoTopics } from "./data";
+import { Line, axisTimeCombinations } from "britecharts-react";
+
+const LineChartImport = () => (
+  <Line data={withTwoTopics()} xAxisFormat={axisTimeCombinations.MINUTE_HOUR} />
+);
+
+export default LineChartImport;
diff --git a/src/line/data.js b/src/line/data.js
new file mode 100644
index 0000000..cf437db
--- /dev/null
+++ b/src/line/data.js
@@ -0,0 +1,28 @@
+export const withTwoTopics = () => ({
+    data: [
+      {
+        topicName: "San Francisco",
+        name: 1,
+        date: "2017-01-16T16:00:00-08:00",
+        value: 1,
+      },
+      {
+        topicName: "San Francisco",
+        name: 1,
+        date: "2017-01-17T16:00:00-08:00",
+        value: 2,
+      },
+      {
+        topicName: "Oakland",
+        name: 2,
+        date: "2017-01-16T16:00:00-08:00",
+        value: 3,
+      },
+      {
+        topicName: "Oakland",
+        name: 2,
+        date: "2017-01-17T16:00:00-08:00",
+        value: 7,
+      }
+    ],
+});
\ No newline at end of file