Update: Add border for legend item (fixes #28) (#103)

* Update: Add border for legend item (fixes #28) * Docs: Fixed renaming of Graph.md * Chore: Moved panHelpers out of controls folder
cerner · Oct 17, 2019 · 1c69ed6 · 1c69ed6
1 parent 7b79b8f
commit 1c69ed6
Show file tree

Hide file tree

Showing 19 changed files with 410 additions and 328 deletions.
diff --git a/README.md b/README.md
@@ -104,12 +104,13 @@ npm i @cerner/carbon-graphs --save-dev
 
 ## Potential features
 
--   [ ] Upgrade to latest D3 version
 -   [ ] Scatter-plot graph
--   [ ] Area graphs
--   [ ] Area spline graphs
+-   [ ] Bubble graph
+-   [ ] Upgrade to latest D3 version
 -   [ ] Support additional themes
 -   [ ] a11y
+-   [ ] Area graph
+-   [ ] Area spline graph
 -   [ ] Separate graph types to plugin based
 -   [ ] DST
 -   [ ] Tick counts

diff --git a/build/index.html b/build/index.html
@@ -14,7 +14,7 @@
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="tooltip" class="tooltip" style="display: none;"></div>
-        <main id="root"></main>
+        <div id="root"></div>
         <script src="/dist/bundle.js"></script>
     </body>
 </html>
diff --git a/dev/app.less b/dev/app.less
@@ -1,7 +1,14 @@
+body {
+    margin: 0;
+    padding: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
 .carbon-graph-container,
 .legend-bindto-container {
     font-size: 0.75rem;
-    padding: 5rem 0;
+    padding: 3rem 0;
 }
 
 .bindto-container {
@@ -60,7 +67,7 @@
         display: inline-block;
 
         & .popup-label {
-            color: #0074b8;
+            color: #01579b;
 
             &:after {
                 content: ": ";

diff --git a/dev/examples/controls/bar.js b/dev/examples/controls/bar.js
@@ -4,7 +4,7 @@ import Carbon from "../../../src/main/js/carbon";
 import utils from "../../../src/main/js/helpers/utils";
 import { getDemoData } from "../data";
 import { loadDatelinePopup, loadTextLabelPopup, loadBarPopup } from "../popup";
-import { createPanningControls } from "./panHelpers";
+import { createPanningControls } from "../panHelpers";
 
 const tickValues = [
     new Date(2018, 0, 1).toISOString(),

diff --git a/dev/examples/controls/gantt.js b/dev/examples/controls/gantt.js
@@ -9,7 +9,7 @@ import {
     loadTrackLabelPopup,
     loadTrackPopup
 } from "../popup";
-import { createPanningControls } from "./panHelpers";
+import { createPanningControls } from "../panHelpers";
 
 const daysToMilliseconds = (d) => 24 * 60 * 60 * 1000 * d;
 const scheduled = {

diff --git a/dev/examples/controls/line.js b/dev/examples/controls/line.js
@@ -1,7 +1,7 @@
 import Carbon from "../../../src/main/js/carbon";
 import utils from "../../../src/main/js/helpers/utils";
 import { getDemoData } from "../data";
-import { createPanningControls } from "./panHelpers";
+import { createPanningControls } from "../panHelpers";
 
 const tickValues = [
     new Date(2016, 0, 1, 1, 0).toISOString(),

diff --git a/dev/examples/controls/pairedResult.js b/dev/examples/controls/pairedResult.js
@@ -2,7 +2,7 @@ import Carbon from "../../../src/main/js/carbon";
 import utils from "../../../src/main/js/helpers/utils";
 import { getDemoData } from "../data";
 import { loadDatelinePopup } from "../popup";
-import { createPanningControls } from "./panHelpers";
+import { createPanningControls } from "../panHelpers";
 
 const tickValues = [
     new Date(2016, 0, 1, 1, 0).toISOString(),

diff --git a/dev/examples/controls/timeline.js b/dev/examples/controls/timeline.js
@@ -1,7 +1,7 @@
 import Carbon from "../../../src/main/js/carbon";
 import { getDemoData } from "../data";
 import utils from "../../../src/main/js/helpers/utils";
-import { createPanningControls } from "./panHelpers";
+import { createPanningControls } from "../panHelpers";
 
 export const renderTimeline = (id) => {
     const timelineDefault = Carbon.api.timeline(

diff --git a/dev/examples/controls/panHelpers.js → dev/examples/panHelpers.js b/dev/examples/controls/panHelpers.js → dev/examples/panHelpers.js
@@ -1,13 +1,14 @@
 import d3 from "d3";
-import Carbon from "../../../src/main/js/carbon";
+import Carbon from "../../src/main/js/carbon";
 import {
     LEFT_CHEVRON,
     RIGHT_CHEVRON
-} from "../../../src/main/js/core/Shape/shapeDefinitions";
+} from "../../src/main/js/core/Shape/shapeDefinitions";
 
 /**
- * Creats Panning container to hold the navigation buttons
+ * Creates Panning container to hold the navigation buttons
  *
+ * @private
  * @param {Array} container - Contains array of the html elements
  * @returns { HTMLElement } return html element
  */
@@ -17,6 +18,7 @@ const createPanningContainer = (container) =>
 /**
  * createNavigationButton to control the graph movement
  *
+ * @private
  * @param {Array} container - container we need to append the navigation button
  * @param {object} icon - icon to add inside the buttons
  * @param {Function} action - function to move to graph
@@ -39,8 +41,9 @@ const createNavigationButton = (container, icon, action, className) =>
         );
 
 /**
- *moveLeftHandler moves the graph to left on click of the button
+ * moveLeftHandler moves the graph to left on click of the button
  *
+ * @private
  * @param {object} graphOptions - graph object which we have to re-create
  * @param {object} shift - rate by which we have to shift
  * @returns {object} returns the update axis to re-create the graph
@@ -55,8 +58,9 @@ const moveLeftHandler = (graphOptions, shift) => () => {
 };
 
 /**
- *moveRightHandler moves the graph to left on click of the button
+ * moveRightHandler moves the graph to left on click of the button
  *
+ * @private
  * @param {object} graphOptions - graph object which we have to re-create
  * @param {object} shift - rate by which we have to shift
  * @returns {object} returns the update axis to re-create the graph
@@ -71,8 +75,9 @@ const moveRightHandler = (graphOptions, shift) => () => {
 };
 
 /**
- *createPanningControls to create the navigation button with the click handler
+ * createPanningControls to create the navigation button with the click handler
  *
+ * @private
  * @param {string} id - id of the div where we have to insert the navigation buttons
  * @param {object} graphOptions - graph data to perform operations on the graph
  * @returns {undefined} returns nothing
@@ -97,4 +102,5 @@ const createPanningControls = (id, graphOptions) => {
         "nav-right"
     );
 };
+
 export { createPanningControls, moveRightHandler, moveLeftHandler };
diff --git a/docs/contributing/README.md b/docs/contributing/README.md
@@ -2,20 +2,20 @@
 
 Thanks for contributing to Carbon! :1st_place_medal: :1st_place_medal:
 
--   [Contributing to Carbon](#Contributing-to-Carbon)
-    -   [Code of Conduct](#Code-of-Conduct)
-    -   [Consumers](#Consumers)
-    -   [Developers](#Developers)
-        -   [Development](#Development)
-            -   [Pulling in dependencies](#Pulling-in-dependencies)
-            -   [Building the project](#Building-the-project)
-        -   [Code Review](#Code-Review)
-            -   [Pull Request checklist](#Pull-Request-checklist)
-            -   [Commit message format](#Commit-message-format)
-            -   [Pull Request](#Pull-Request)
-        -   [Release](#Release)
-        -   [Deploying the site to GitHub](#Deploying-the-site-to-GitHub)
-    -   [Breaking changes](#Breaking-changes)
+-   [Contributing to Carbon](#contributing-to-carbon)
+    -   [Code of Conduct](#code-of-conduct)
+    -   [Consumers](#consumers)
+    -   [Developers](#developers)
+        -   [Development](#development)
+            -   [Pulling in dependencies](#pulling-in-dependencies)
+            -   [Building the project](#building-the-project)
+        -   [Code Review](#code-review)
+            -   [Pull Request checklist](#pull-request-checklist)
+            -   [Commit message format](#commit-message-format)
+            -   [Pull Request](#pull-request)
+        -   [Release](#release)
+        -   [Deploying the site to GitHub](#deploying-the-site-to-github)
+    -   [Breaking changes](#breaking-changes)
 
 This project uses NPM for dependency management and provides NPM scripts to call on `Webpack` to run tasks on the project.
 To get started, you will need to checkout this project.
@@ -47,27 +47,27 @@ Before starting development on a Carbon project, please complete the following s
 
 After checking out the project, you will want to run the following command to pull in dependencies needed by the project:
 
-```
+```sh
 npm install
 ```
 
 When contributing to Carbon, you would need to run the below command and load the test page. The test page auto reloads whenever you make any changes to the .CSS, .JS files or if you make any changes to the sample .html file
 
-```
+```sh
 npm run dev
 ```
 
 Open in browser:
 
-```
+```sh
 http://localhost:9991/
 ```
 
 #### Building the project
 
 To build the project, run the build script:
 
-```
+```sh
 npm run build && npm run build:dist
 ```
 

diff --git a/docs/core/GraphAPI.md → docs/core/Graph.md b/docs/core/GraphAPI.md → docs/core/Graph.md