3 files changed, 32 insertions, 6 deletions

diff --git a/src/client/views/nodes/DataViz.scss b/src/client/views/nodes/DataViz.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/nodes/DataViz.scss
diff --git a/src/client/views/nodes/DataViz.tsx b/src/client/views/nodes/DataViz.tsx
new file mode 100644
index 000000000..a3ffade70
--- /dev/null
+++ b/src/client/views/nodes/DataViz.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { ViewBoxBaseComponent } from '../DocComponent';
+import "./DataViz.scss";
+import { FieldView, FieldViewProps } from "./FieldView";
+
+export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() {
+
+    constructor(props: any) {
+        super(props);
+    }
+
+
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(DataVizBox, fieldKey);
+    }
+
+    render() {
+        return (
+        <div className="dataViz">
+            <div>
+                Hi
+            </div>
+        </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index db076c069..371d85a32 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -16,14 +16,15 @@ import { SearchBox } from "../search/SearchBox";
 import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo";
 import { YoutubeBox } from "./../../apis/youtube/YoutubeBox";
 import { AudioBox } from "./AudioBox";
+import { FontIconBox } from "./button/FontIconBox";
 import { ColorBox } from "./ColorBox";
 import { ComparisonBox } from "./ComparisonBox";
+import { DataVizBox } from "./DataViz";
 import { DocumentViewProps } from "./DocumentView";
 import "./DocumentView.scss";
 import { EquationBox } from "./EquationBox";
 import { FieldView, FieldViewProps } from "./FieldView";
 import { FilterBox } from "./FilterBox";
-import { FontIconBox } from "./button/FontIconBox";
 import { FormattedTextBox, FormattedTextBoxProps } from "./formattedText/FormattedTextBox";
 import { FunctionPlotBox } from "./FunctionPlotBox";
 import { ImageBox } from "./ImageBox";
@@ -31,17 +32,17 @@ import { KeyValueBox } from "./KeyValueBox";
 import { LabelBox } from "./LabelBox";
 import { LinkAnchorBox } from "./LinkAnchorBox";
 import { LinkBox } from "./LinkBox";
+import { MapBox } from "./MapBox/MapBox";
 import { PDFBox } from "./PDFBox";
-import { PresBox } from "./trails/PresBox";
+import { RecordingBox } from "./RecordingBox";
 import { ScreenshotBox } from "./ScreenshotBox";
 import { ScriptingBox } from "./ScriptingBox";
 import { SliderBox } from "./SliderBox";
+import { PresBox } from "./trails/PresBox";
 import { VideoBox } from "./VideoBox";
 import { WebBox } from "./WebBox";
 import React = require("react");
 import XRegExp = require("xregexp");
-import { MapBox } from "./MapBox/MapBox";
-import { RecordingBox } from "./RecordingBox";
 
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
@@ -227,8 +228,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
                     PDFBox, VideoBox, AudioBox, RecordingBox, PresBox, YoutubeBox, PresElementBox, SearchBox, FilterBox, FunctionPlotBox,
                     ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, LinkBox, ScriptingBox, MapBox,
-                    ScreenshotBox,
-                    HTMLtag, ComparisonBox
+                    ScreenshotBox, DataVizBox, HTMLtag, ComparisonBox
                 }}
                 bindings={bindings}
                 jsx={layoutFrame}