New: No Data View (fixes #39) (#68)

* New: No Data View (fixes #39) * New: No Data View (fixes #39) * New: No Data View (fixes #39) Address review comment * New: No Data View (fixes #39) Add necessary Tests * New: No Data View (fixes #39) Code cleanup * New: No Data View (fixes #39) Code cleanup and documentation * New: No Data View (fixes #39) Update font-size to fit to all screen sizes * New: No Data View (fixes #39) Update example * New: No Data View (fixes #39) Update test to use the constants * New: No Data View (fixes #39) Revert the chage added by mistake
cerner · Sep 3, 2019 · cee3ab1 · cee3ab1
1 parent 1d740f2
commit cee3ab1
Show file tree

Hide file tree

Showing 29 changed files with 333 additions and 36 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -4,6 +4,7 @@ Cerner Corporation
 -   Dinesh Singh [@Dinesh94Singh]
 -   Veronica Mazur [@veronimazur]
 -   Swati Kode [@swatikode]
+-   Sharath M H [@SharathAlur]
 
 [@abhijit945]: https://github.com/abhijit945
 [@dinesh94singh]: https://github.com/Dinesh94Singh

diff --git a/dev/app.js b/dev/app.js
@@ -70,7 +70,8 @@ import {
     renderLineYHidden,
     renderMultiLine,
     renderMultiLineRegion,
-    renderMultiLineIdenticalDatasetRegion
+    renderMultiLineIdenticalDatasetRegion,
+    renderNoDataView
 } from "./examples/controls/line";
 import {
     renderMultiPairedResultRegion,
@@ -156,6 +157,11 @@ renderSiteApp(
                     pathname: "/line/shapes-hidden",
                     content: renderLineShapesHidden,
                     title: "Shapes Hidden"
+                },
+                {
+                    pathname: "/line/no-data",
+                    content: renderNoDataView,
+                    title: "No Data"
                 }
             ]
         },

diff --git a/dev/examples/controls/line.js b/dev/examples/controls/line.js
@@ -419,3 +419,11 @@ export const renderLineXOrientationTop = (id) => {
     );
     return lineDefault;
 };
+export const renderNoDataView = (id) => {
+    const axisData = utils.deepClone(getDemoData(`#${id}`, "NO_DATA_VIEW"));
+    const lineDefault = Carbon.api.graph(axisData);
+    lineDefault.loadContent(
+        Carbon.api.line(getDemoData(`#${id}`, "NO_DATA_VIEW").data[0])
+    );
+    return lineDefault;
+};
diff --git a/dev/examples/data.js b/dev/examples/data.js
@@ -1665,6 +1665,64 @@ const DATA = [
             showVGrid: true,
             showHGrid: true
         })
+    },
+    {
+        NO_DATA_VIEW: (id) => ({
+            bindTo: id,
+            bindLegendTo: null,
+            axis: {
+                x: {
+                    show: true,
+                    label: "Data",
+                    lowerLimit: 80,
+                    upperLimit: 280,
+                    ticks: {
+                        show: true, // TODO Future implementation
+                        count: 10, // TODO Future implementation
+                        format: "",
+                        values: []
+                    }
+                },
+                y: {
+                    show: true,
+                    label: "Line Set A",
+                    lowerLimit: 0,
+                    upperLimit: 20
+                },
+                y2: {
+                    show: false,
+                    label: "Line Set B",
+                    lowerLimit: 0,
+                    upperLimit: 250
+                }
+            },
+            data: [
+                {
+                    key: "uid_1",
+                    label: {
+                        display: "Data Label 1"
+                    },
+                    color: Carbon.helpers.COLORS.BLACK,
+                    onClick: loadPopup,
+                    values: []
+                },
+                {
+                    key: "uid_2",
+                    label: {
+                        display: "Data Label 2"
+                    },
+                    shape: Carbon.helpers.SHAPES.TRIANGLE,
+                    color: Carbon.helpers.COLORS.BLUE,
+                    onClick: loadPopup,
+                    values: []
+                }
+            ],
+            showLabel: true,
+            showLegend: true,
+            showShapes: true,
+            showVGrid: true,
+            showHGrid: true
+        })
     }
 ];
 export const getDemoData = (id, type) => {

diff --git a/docs/README.md b/docs/README.md
@@ -210,7 +210,8 @@ const locale_custom = {
         "Okt",
         "Nov",
         "Dez"
-    ]
+    ],
+    noData: "No Data"
 };
 ```
 

diff --git a/docs/core/GraphAPI.md b/docs/core/GraphAPI.md
@@ -31,19 +31,20 @@ GraphAPI is a set of graphs that share a common set of base visualization struct
 
 ### Optional
 
-| Property Name | Expected | Default                                       | Description                                                                          |
-| ------------- | -------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
-| bindLegendTo  | string   | null                                          | If DOM id provided, binds legend into that container (Example: `"#legendContainer"`) |
-| locale        | object   | LOCALE.en_US                                  | Locale object for X-Axis tick values                                                 |
-| dimension     | object   | {}                                            | Refer [Dimension](#dimension)                                                        |
-| throttle      | number   | (1000/60) => time in ms                       | Delay between resize of a browser window                                             |
-| showLabel     | boolean  | true                                          | Toggle to show axes labels                                                           |
-| showLegend    | boolean  | true                                          | Toggle to show graph legend                                                          |
-| showShapes    | boolean  | true                                          | Toggle to show shapes in the line graph                                              |
-| showVGrid     | boolean  | true                                          | Toggle to show vertical grid                                                         |
-| showHGrid     | boolean  | true                                          | Toggle to show horizontal grid                                                       |
-| dateline      | array    | []                                            | Refer [Dateline](../helpers/Dateline.md)                                             |
-| padding       | object   | `{ top: 10, bottom: 5, left: 30, right: 50 }` | Refer [Padding](../controls/Padding.md)                                              |
+| Property Name  | Expected | Default                                       | Description                                                                          |
+| -------------- | -------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
+| bindLegendTo   | string   | null                                          | If DOM id provided, binds legend into that container (Example: `"#legendContainer"`) |
+| locale         | object   | LOCALE.en_US                                  | Locale object for X-Axis tick values                                                 |
+| dimension      | object   | {}                                            | Refer [Dimension](#dimension)                                                        |
+| throttle       | number   | (1000/60) => time in ms                       | Delay between resize of a browser window                                             |
+| showLabel      | boolean  | true                                          | Toggle to show axes labels                                                           |
+| showLegend     | boolean  | true                                          | Toggle to show graph legend                                                          |
+| showShapes     | boolean  | true                                          | Toggle to show shapes in the line graph                                              |
+| showVGrid      | boolean  | true                                          | Toggle to show vertical grid                                                         |
+| showHGrid      | boolean  | true                                          | Toggle to show horizontal grid                                                       |
+| dateline       | array    | []                                            | Refer [Dateline](../helpers/Dateline.md)                                             |
+| padding        | object   | `{ top: 10, bottom: 5, left: 30, right: 50 }` | Refer [Padding](../controls/Padding.md)                                              |
+| showNoDataText | boolean  | true                                          | Toggle to show no data text                                                          |
 
 ## Dimension
 

diff --git a/package.json b/package.json
@@ -166,4 +166,4 @@
     "test": "karma start ./build/karma/karma.config.js --single-run --no-auto-watch",
     "test:persist": "karma start ./build/karma/karma.config.js --no-single-run"
   }
-}
+}
diff --git a/src/main/js/controls/Gantt/GanttConfig.js b/src/main/js/controls/Gantt/GanttConfig.js
@@ -163,7 +163,7 @@ export const processInput = (input, config) => {
         x: {},
         y: {}
     };
-    config.locale = d3.locale(getDefaultValue(input.locale, DEFAULT_LOCALE));
+    config.d3Locale = d3.locale(getDefaultValue(input.locale, DEFAULT_LOCALE));
     config.throttle = getDefaultValue(
         input.throttle,
         constants.RESIZE_THROTTLE

diff --git a/src/main/js/controls/Gantt/helpers/creationHelpers.js b/src/main/js/controls/Gantt/helpers/creationHelpers.js
@@ -232,7 +232,7 @@ const getAxesScale = (axis, scale, config) => {
         config.axis.x.ticks.values,
         getXAxisWidth(config),
         getAxisTickFormat(
-            config.locale,
+            config.d3Locale,
             config.axis.x.ticks.format,
             config.axis.x.type
         ),

diff --git a/src/main/js/controls/Graph/Graph.js b/src/main/js/controls/Graph/Graph.js
@@ -30,7 +30,9 @@ import {
     scaleGraph,
     setAxisPadding,
     translateGraph,
-    updateAxesDomain
+    updateAxesDomain,
+    removeNoDataView,
+    drawNoDataView
 } from "./helpers/helpers";
 
 /**
@@ -260,6 +262,9 @@ class Graph extends Construct {
                     : containerSVG
             );
         }
+        if (this.config.showNoDataText) {
+            drawNoDataView(this.config, this.svg);
+        }
         attachEventHandlers(this);
         return this.svg;
     }
@@ -310,6 +315,9 @@ class Graph extends Construct {
         ) {
             redrawDatelineContent(this.scale, this.config, this.svg);
         }
+        if (utils.notEmpty(content.config.values)) {
+            removeNoDataView(this.svg);
+        }
         this.resize();
         return this;
     }
@@ -330,6 +338,14 @@ class Graph extends Construct {
         this.content.splice(index, 1);
         this.contentTargets.splice(index, 1);
         content.unload(this);
+        if (
+            this.config.showNoDataText &&
+            this.content.every((content) =>
+                utils.isEmpty(content.config.values)
+            )
+        ) {
+            drawNoDataView(this.config, this.svg);
+        }
         this.resize();
         return this;
     }

diff --git a/src/main/js/controls/Graph/GraphConfig.js b/src/main/js/controls/Graph/GraphConfig.js
@@ -85,7 +85,9 @@ export const processInput = (input, config, type) => {
     config.axis = _axis;
     config.dateline = getDefaultValue(utils.deepClone(input.dateline), []);
     config.padding = getPadding(config, input.padding);
-    config.locale = d3.locale(getDefaultValue(input.locale, DEFAULT_LOCALE));
+    config.locale = getDefaultValue(input.locale, DEFAULT_LOCALE);
+    config.showNoDataText = getDefaultValue(input.showNoDataText, true);
+    config.d3Locale = d3.locale(getDefaultValue(input.locale, DEFAULT_LOCALE));
     config.throttle = getDefaultValue(
         input.throttle,
         constants.RESIZE_THROTTLE

diff --git a/src/main/js/controls/Graph/helpers/helpers.js b/src/main/js/controls/Graph/helpers/helpers.js
@@ -544,6 +544,7 @@ const translateGraph = (control) => {
         control.svg,
         getYAxisYPosition
     );
+    translateNoDataView(control.config, control.svg);
 };
 /**
  * Pads the domain with some buffer that gets calculated based on input values.
@@ -675,6 +676,83 @@ const setAxisPadding = (axisPadding, { config }) => {
         axisPadding[yAxis] = config.axisPadding;
     }
 };
+/**
+ * Removes the No Data View from the node
+ *
+ * @private
+ * @param {d3.selection} svg - d3 selection node of svg.
+ * @returns {undefined} - returns nothing
+ */
+const removeNoDataView = (svg) => {
+    d3RemoveElement(svg, `.${styles.noDataContainer}`);
+};
+/**
+ * Append No Data View to the graph node.
+ *
+ * @private
+ * @param {object} config - config object derived from input JSON
+ * @param {d3.selection} svg - d3 selection node of svg.
+ * @returns {d3.selection} d3 selection node of svg.
+ */
+const drawNoDataView = (config, svg) => {
+    const noDataViewHeight =
+        getYAxisHeight(config) / constants.NO_DATA_VIEW_PROPORTION;
+
+    const noDataViewContainer = svg
+        .append("g")
+        .classed(styles.noDataContainer, true);
+
+    noDataViewContainer
+        .append("rect")
+        .classed(styles.noDataOverlay, true)
+        .attr(constants.X_AXIS, getXAxisXPosition(config))
+        .attr(
+            constants.Y_AXIS,
+            calculateVerticalPadding(config) + noDataViewHeight
+        )
+        .attr("height", noDataViewHeight)
+        .attr("width", getXAxisWidth(config));
+    noDataViewContainer
+        .append("text")
+        .classed(styles.noDataLabel, true)
+        .attr("x", getXAxisLabelXPosition(config))
+        .attr(
+            "y",
+            getYAxisLabelYPosition(config) + constants.NO_DATA_LABEL_PADDING
+        )
+        .append("tspan")
+        .text(config.locale.noData);
+
+    return svg;
+};
+
+/**
+ * Translates no data view rectangle and the label
+ * based on the current positioning on resize.
+ *
+ * @private
+ * @param {object} config - config object derived from input JSON
+ * @param {d3.selection} svg - d3 selection node of svg.
+ *  @returns {undefined} - returns nothing
+ */
+const translateNoDataView = (config, svg) => {
+    svg.select(`.${styles.noDataOverlay}`)
+        .transition()
+        .call(constants.d3Transition)
+        .attr(
+            "height",
+            getYAxisHeight(config) / constants.NO_DATA_VIEW_PROPORTION
+        )
+        .attr("width", getXAxisWidth(config));
+    svg.select(`.${styles.noDataLabel}`)
+        .transition()
+        .call(constants.d3Transition)
+        .attr("x", getXAxisLabelXPosition(config))
+        .attr(
+            "y",
+            getYAxisLabelYPosition(config) + constants.NO_DATA_LABEL_PADDING
+        );
+};
 
 export {
     translateAxes,
@@ -699,5 +777,7 @@ export {
     detachEventHandlers,
     d3RemoveElement,
     setAxisPadding,
-    getAxisInfoRowLabelHeight
+    getAxisInfoRowLabelHeight,
+    removeNoDataView,
+    drawNoDataView
 };
diff --git a/src/main/js/controls/Timeline/TimelineConfig.js b/src/main/js/controls/Timeline/TimelineConfig.js
@@ -26,7 +26,7 @@ export const processInput = (input, config) => {
     config.axis = {
         x: {}
     };
-    config.locale = d3.locale(getDefaultValue(input.locale, DEFAULT_LOCALE));
+    config.d3Locale = d3.locale(getDefaultValue(input.locale, DEFAULT_LOCALE));
     config.throttle = getDefaultValue(
         input.throttle,
         constants.RESIZE_THROTTLE

diff --git a/src/main/js/controls/Timeline/helpers/creationHelpers.js b/src/main/js/controls/Timeline/helpers/creationHelpers.js
@@ -137,7 +137,7 @@ const getAxesScale = (axis, scale, config) => {
         config.axis.x.ticks.values,
         getXAxisWidth(config),
         getAxisTickFormat(
-            config.locale,
+            config.d3Locale,
             config.axis.x.ticks.format,
             config.axis.x.type
         )

diff --git a/src/main/js/helpers/axis.js b/src/main/js/helpers/axis.js
@@ -175,7 +175,7 @@ const getAxesScale = (axis, scale, config) => {
         config.axis.x.ticks.values,
         getXAxisWidth(config),
         getAxisTickFormat(
-            config.locale,
+            config.d3Locale,
             config.axis.x.ticks.format,
             config.axis.x.type
         ),
@@ -313,7 +313,7 @@ const prepareHorizontalAxis = (scale, tickValues, config, orientation) =>
         tickValues,
         getXAxisWidth(config),
         getAxisTickFormat(
-            config.locale,
+            config.d3Locale,
             config.axis.x.ticks.format,
             config.axis.x.type
         ),

diff --git a/src/main/js/helpers/constants.js b/src/main/js/helpers/constants.js
@@ -238,5 +238,7 @@ export default {
     TICK_ORIENTATION: {
         TOP: -1,
         BOTTOM: 1
-    }
+    },
+    NO_DATA_VIEW_PROPORTION: 3,
+    NO_DATA_LABEL_PADDING: 15
 };
diff --git a/src/main/js/helpers/styles.js b/src/main/js/helpers/styles.js
@@ -43,6 +43,10 @@ export default {
     datelineGroup: "carbon-dateline-group",
     datelinePoint: "carbon-dateline-point",
     dateline: "carbon-dateline",
+    noDataContainer: "carbon-no-data-container",
+    noDataLabel: "carbon-no-data-label",
+    noDataOverlay: "carbon-no-data-overlay",
+
     /**
      * Line
      */

diff --git a/src/main/js/locale/de-DE.js b/src/main/js/locale/de-DE.js
@@ -45,5 +45,6 @@ export default {
         "Okt",
         "Nov",
         "Dez"
-    ]
+    ],
+    noData: "Keine Daten"
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -210,7 +210,8 @@ const locale_custom = { @@
             "Okt",
             "Nov",
             "Dez"
-        ]
+        ],
+        noData: "No Data"
     };
     ```
@@ Expand Down @@