Merge pull request #334 from dcos-labs/ph/feat/add-chart-component

DCOS-54458 feat(chart): add chart component

package.json

@@ -41,12 +41,15 @@
   ],
   "typings": "dist/packages/index",
   "dependencies": {
+    "@types/chartist": "^0.9.46",
+    "chartist": "^0.11.0",
     "downshift": "3.2.10",
     "emotion": "9.2.12",
     "emotion-theming": "9.2.9",
     "focus-trap-react": "4.0.1",
     "immutable": "^4.0.0-rc.12",
     "memoize-one": "4.0.2",
+    "react-chartist": "^0.13.3",
     "react-click-outside": "3.0.1",
     "react-delegate-component": "1.0.0",
     "react-draggable": "3.2.1",

packages/chart/README.md

@@ -0,0 +1,38 @@
+# Chart
+
+Exposing [react-chartist](https://github.com/fraserxu/react-chartist)
+
+## LineChart
+
+The Linechart is rendering a single line on a graph based on provided data. the data is build up as a `key: value` object. The `key` is representing the label (e.g. a year) and the `value` is representing the datum (e.g. number of spacex launches) the component will generate a graph out of the information.
+
+The LineChart is exposing the following props
+```TS
+{
+  data: {
+    [label: string]: number;
+  };
+  type: string;
+}
+```
+
+And an implementation example looks like this:
+```JSX
+<LineChart
+  data={{
+    2006: 1,
+    2007: 1,
+    2008: 2,
+    2009: 1,
+    2010: 2,
+    2012: 2,
+    2013: 3,
+    2014: 6,
+    2015: 6,
+    2016: 8,
+    2017: 18,
+    2018: 21,
+    2019: 4
+  }}
+/>
+```