Content as array in Construct based Graph types (#29)

cerner · Dec 14, 2020 · 52be245 · 52be245
1 parent 238726e
commit 52be245
Show file tree

Hide file tree

Showing 16 changed files with 385 additions and 163 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -5,6 +5,7 @@
 - Avinash Gupta [@avinashg1994]
 - Ben Cai [@benbcai]
 - Dinesh Singh [@Dinesh94Singh]
+- Harold Vilander[@hvilander]
 - Janani Gunasekaran [@JananiGunasekaran]
 - Matt Henkes [@mjhenkes]
 - Pranav Agarwal [@pranav300]
@@ -19,6 +20,7 @@
 [@avinashg1994]: https://github.com/avinashg1994
 [@benbcai]: https://github.com/benbcai
 [@dinesh94singh]: https://github.com/Dinesh94Singh
+[@hvilander]: https://github.com/hvilander
 [@JananiGunasekaran]: https://github.com/JananiGunasekaran
 [@mjhenkes]: https://github.com/mjhenkes
 [@pranav300]: https://github.com/pranav300

diff --git a/packages/carbon-graphs/CHANGELOG.md b/packages/carbon-graphs/CHANGELOG.md
@@ -9,6 +9,7 @@
   * For consistency updated reflow in Graph and Gantt constructs to update the eventlines.
   * Added code to handle null/undefined/blank in paired result graph during both initial load and reflow.
   * Updated `packages/carbon-graphs/README.md` so that it has more essential information about Carbon.
+  * Added array handling for loadContent on Construct based graphs.
 
 ## 2.15.0 - (November 24, 2020)
 

diff --git a/packages/carbon-graphs/dev/examples/controls/gantt.js b/packages/carbon-graphs/dev/examples/controls/gantt.js
@@ -752,7 +752,8 @@ export const renderGanttStyle = (id) => {
   data.showActionLegend = false;
   data.dateline = [];
   const ganttDefault = Carbon.api.gantt(data);
-  ganttDefault.loadContent({
+  const contentArray = [];
+  contentArray.push({
     key: 'track 0',
     trackLabel: {
       display: 'Default',
@@ -770,7 +771,8 @@ export const renderGanttStyle = (id) => {
       },
     ],
   });
-  ganttDefault.loadContent({
+
+  contentArray.push({
     key: 'track 1',
     trackLabel: {
       display: 'Hollow only',
@@ -791,7 +793,8 @@ export const renderGanttStyle = (id) => {
       },
     ],
   });
-  ganttDefault.loadContent({
+
+  contentArray.push({
     key: 'track 2',
     trackLabel: {
       display: 'Dotted, Hollow',
@@ -812,7 +815,8 @@ export const renderGanttStyle = (id) => {
       },
     ],
   });
-  ganttDefault.loadContent({
+
+  contentArray.push({
     key: 'track 3',
     trackLabel: {
       display: 'Percentage',
@@ -831,7 +835,8 @@ export const renderGanttStyle = (id) => {
       },
     ],
   });
-  ganttDefault.loadContent({
+
+  contentArray.push({
     key: 'track 4',
     trackLabel: {
       display: 'Task Hashed',
@@ -852,7 +857,8 @@ export const renderGanttStyle = (id) => {
       },
     ],
   });
-  ganttDefault.loadContent({
+
+  contentArray.push({
     key: 'track 5',
     trackLabel: {
       display: 'Activity',
@@ -870,7 +876,7 @@ export const renderGanttStyle = (id) => {
     ],
   });
 
-  ganttDefault.loadContent({
+  contentArray.push({
     key: 'track 6',
     trackLabel: {
       display: 'Activity Hashed',
@@ -891,7 +897,7 @@ export const renderGanttStyle = (id) => {
     ],
   });
 
-  ganttDefault.loadContent({
+  contentArray.push({
     key: 'track 7',
     trackLabel: {
       display: 'Activity and Task',
@@ -919,6 +925,8 @@ export const renderGanttStyle = (id) => {
       },
     ],
   });
+
+  ganttDefault.loadContent(contentArray);
   return ganttDefault;
 };
 export const renderGanttDateTimeBuckets = (id) => {

diff --git a/packages/carbon-graphs/dev/examples/controls/line.js b/packages/carbon-graphs/dev/examples/controls/line.js
@@ -414,12 +414,10 @@ export const renderLineLegendTo = (id) => {
   );
   data.bindLegendTo = '#legendContainer';
   const lineTime = Carbon.api.graph(data);
-  lineTime.loadContent(
-    Carbon.api.line(getDemoData(`#${id}`, 'LINE_TIMESERIES').data[0]),
-  );
-  lineTime.loadContent(
-    Carbon.api.line(getDemoData(`#${id}`, 'LINE_TIMESERIES').data[2]),
-  );
+  const line1 = Carbon.api.line(getDemoData(`#${id}`, 'LINE_TIMESERIES').data[0]);
+  const line2 = Carbon.api.line(getDemoData(`#${id}`, 'LINE_TIMESERIES').data[2]);
+
+  lineTime.loadContent([line1, line2])
   return lineTime;
 };
 export const renderLineDateTimeBuckets = (id) => {

diff --git a/packages/carbon-graphs/dev/examples/controls/timeline.js b/packages/carbon-graphs/dev/examples/controls/timeline.js
@@ -18,8 +18,11 @@ export const renderTimeline = (id) => {
   const timelineDefault = Carbon.api.timeline(
     getDemoData(`#${id}`, 'TIMELINE'),
   );
-  timelineDefault.loadContent(getDemoData(`#${id}`, 'TIMELINE').data[0]);
-  timelineDefault.loadContent(getDemoData(`#${id}`, 'TIMELINE').data[1]);
+  const contentArray = [
+    getDemoData(`#${id}`, 'TIMELINE').data[0],
+    getDemoData(`#${id}`, 'TIMELINE').data[1]
+  ];
+  timelineDefault.loadContent(contentArray);
   return timelineDefault;
 };
 export const renderTimelineCustomContentPadding = (id) => {

diff --git a/packages/carbon-graphs/src/js/controls/Gantt/Gantt.js b/packages/carbon-graphs/src/js/controls/Gantt/Gantt.js
@@ -4,15 +4,12 @@ import * as d3 from 'd3';
 import Construct from '../../core/Construct';
 import { getYAxisHeight, updateXAxisDomain } from '../../helpers/axis';
 import constants from '../../helpers/constants';
-import {
-  contentLoadHandler,
-  contentUnloadHandler,
-} from '../../helpers/constructUtils';
+import { contentHandler } from '../../helpers/constructUtils';
 import { createDateline } from '../../helpers/dateline';
 import errors from '../../helpers/errors';
 import {
   createEventline,
-  redrawEventlineContent 
+  redrawEventlineContent
 } from "../../helpers/eventline";
 import { createLegend, reflowLegend } from '../../helpers/legend';
 import getElementBoxSizingParameters from '../../helpers/paddingUtils';
@@ -277,15 +274,15 @@ class Gantt extends Construct {
   }
 
   /**
-     * Loads the content onto the graph.
-     * The content serves as a 1to1 relationship. For rendering
-     * multiple data sets respective number of content needs to be provided.
-     *
-     * @param {object|Array} content - Gantt content to be loaded
-     * @returns {Gantt} - Gantt instance
-     */
+   * Loads the content into the graph.
+   * Content can be provided as a singular data set, or as an array when
+   * rendering multiple data sets.
+   *
+   * @param {object|array} content - Gantt content to be loaded
+   * @returns {Gantt} - Gantt instance
+   */
   loadContent(content) {
-    contentLoadHandler(content, (i) => {
+    contentHandler(content, (i) => {
       const index = prepareLoadAtIndex(
         this.scale,
         this.config,
@@ -306,15 +303,16 @@ class Gantt extends Construct {
   }
 
   /**
-     * Unloads the content from the graph.
-     * The content serves as a 1to1 relationship. For rendering
-     * multiple data sets respective number of content needs to be provided.
-     *
-     * @param {object|Array} content - Gantt content to be removed
-     * @returns {Gantt} - Gantt instance
-     */
+   *
+   * Unloads the content from the graph.
+   * Content can be provided as a singular data set, or as an array when
+   * rendering multiple data sets.
+   *
+   * @param {object|array} content - Gantt content to be removed
+   * @returns {Gantt} - Gantt instance
+   */
   unloadContent(content) {
-    contentUnloadHandler(content, (i) => {
+    contentHandler(content, (i) => {
       const index = this.tracks.indexOf(i.key);
       if (index < 0) {
         throw new Error(errors.THROW_MSG_INVALID_OBJECT_PROVIDED);

diff --git a/packages/carbon-graphs/src/js/controls/Graph/Graph.js b/packages/carbon-graphs/src/js/controls/Graph/Graph.js
@@ -2,6 +2,7 @@
 
 import * as d3 from 'd3';
 import Construct from '../../core/Construct';
+import { contentHandler } from "../../helpers/constructUtils";
 import {
   calculateAxesLabelSize,
   calculateAxesSize,
@@ -328,14 +329,11 @@ class Graph extends Construct {
   }
 
   /**
-     * Loads the content onto the graph.
-     * The content serves as a 1to1 relationship. For rendering
-     * multiple data sets respective number of content needs to be provided.
-     *
-     * @param {object} content - Graph content
-     * @returns {Graph} - Graph instance
-     */
-  loadContent(content) {
+   * Performs the needed tasks to add content to this graph
+   * @param {object} content - a single content object.
+   * @returns nothing
+   */
+  processContent(content) {
     validateContent(this.content, content);
     this.content.push(content);
     this.contentConfig.push(content.config);
@@ -349,56 +347,74 @@ class Graph extends Construct {
     );
     if (
       this.config.allowCalibration
-            && isRangeModified(this.config, content.config.yAxis)
+      && isRangeModified(this.config, content.config.yAxis)
     ) {
       updateAxesDomain(this.config, content);
     }
     content.load(this);
     if (
       utils.notEmpty(this.config.dateline)
-            && this.config.axis.x.type === AXIS_TYPE.TIME_SERIES
+      && this.config.axis.x.type === AXIS_TYPE.TIME_SERIES
     ) {
       redrawDatelineContent(this.scale, this.config, this.svg);
     }
     if (
       utils.notEmpty(this.config.eventline)
-            && this.config.axis.x.type === AXIS_TYPE.TIME_SERIES
+      && this.config.axis.x.type === AXIS_TYPE.TIME_SERIES
     ) {
       redrawEventlineContent(this.scale, this.config, this.svg);
     }
     if (utils.notEmpty(content.config.values)) {
       removeNoDataView(this.svg);
     }
+  }
+
+  /**
+   * Loads the content into the graph.
+   * Content can be provided as a singular data set, or as an array when
+   * rendering multiple data sets.
+   *
+   * @param {object|array} content - Graph content
+   * @returns {Graph} - Graph instance
+   */
+  loadContent(content) {
+    contentHandler(content, (i) => {
+      this.processContent(i);
+    })
+
     this.resize();
     return this;
   }
 
   /**
-     * Unloads the content from the graph.
-     * The content serves as a 1to1 relationship. For rendering
-     * multiple data sets respective number of content needs to be provided.
-     *
-     * Input can be either a GraphContent instance or
-     * just an object containing a `key` of the content to be removed
-     *
-     * @param {object} input - Graph content to be removed
-     * @returns {Graph} - Graph instance
-     */
+   * Unloads the content from the graph.
+   * Content can be provided as a singular data set, or as an array when
+   * rendering multiple data sets.
+   *
+   * Input can be either a GraphContent instance or
+   * just an object containing a `key` of the content to be removed
+   *
+   * @param {object|array} input - Graph content to be removed
+   * @returns {Graph} - Graph instance
+   */
   unloadContent(input) {
-    const index = this.contentKeys.indexOf(input.key || input.config.key);
-    if (index < 0) {
-      throw new Error(errors.THROW_MSG_INVALID_OBJECT_PROVIDED);
-    }
-    this.content[index].unload(this);
-    this.content.splice(index, 1);
-    this.contentConfig.splice(index, 1);
-    this.contentKeys.splice(index, 1);
-    if (
-      this.config.showNoDataText
-            && this.content.every((content) => utils.isEmpty(content.config.values))
-    ) {
-      drawNoDataView(this.config, this.svg);
-    }
+    contentHandler(input, (i) => {
+      const index = this.contentKeys.indexOf(i.key || i.config.key);
+      if (index < 0) {
+        throw new Error(errors.THROW_MSG_INVALID_OBJECT_PROVIDED);
+      }
+      this.content[index].unload(this);
+      this.content.splice(index, 1);
+      this.contentConfig.splice(index, 1);
+      this.contentKeys.splice(index, 1);
+      if (
+        this.config.showNoDataText
+        && this.content.every((content) => utils.isEmpty(content.config.values))
+      ) {
+        drawNoDataView(this.config, this.svg);
+      }
+    })
+
     this.resize();
     return this;
   }