carbon-addons-data-viz-react - npm Package Compare versions

Comparing version 1.22.0 to 1.23.0

cjs/components/DataTooltip/DataTooltip.js

@@ -54,4 +54,5 @@ 'use strict';
   id: _propTypes2.default.string,
-  heading: _propTypes2.default.string,
-  isActive: _propTypes2.default.bool
+  heading: _propTypes2.default.array,
+  isActive: _propTypes2.default.bool,
+  hasSections: _propTypes2.default.bool
 };
@@ -64,3 +65,4 @@
   heading: null,
-  isActive: true
+  isActive: true,
+  hasSections: false
 };
@@ -78,7 +80,3 @@
     key: 'renderTooltipData',
-    value: function renderTooltipData() {
-      var _props = this.props,
-          data = _props.data,
-          heading = _props.heading;
-
+    value: function renderTooltipData(data, heading) {
       var items = data.map(function (item, i) {
@@ -125,30 +123,46 @@ var divStyle = void 0;
   }, {
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          className = _props2.className,
-          direction = _props2.direction,
-          heading = _props2.heading,
-          isActive = _props2.isActive,
-          data = _props2.data,
-          other = (0, _objectWithoutProperties3.default)(_props2, ['className', 'direction', 'heading', 'isActive', 'data']);
-
-
-      var tooltipClasses = (0, _classnames2.default)('bx--tooltip', 'bx--data-tooltip', {
+    key: 'getTootlTipClasses',
+    value: function getTootlTipClasses(isActive, className) {
+      return (0, _classnames2.default)('bx--tooltip', 'bx--data-tooltip', {
         'bx--tooltip--shown': isActive
       }, className);
-
-      var tooltipListClasses = (0, _classnames2.default)('bx--data-tooltip-list', {
+    }
+  }, {
+    key: 'getTootleTipListClasses',
+    value: function getTootleTipListClasses(data) {
+      return (0, _classnames2.default)('bx--data-tooltip-list', {
         'bx--data-tooltip-list--block': data.length >= 4
       });
-
-      var listStyle = {
+    }
+  }, {
+    key: 'getListStyle',
+    value: function getListStyle(data) {
+      return {
         columnCount: data.length > 3 ? '2' : '1',
         columnGap: '1.25rem'
       };
-
-      var headingClasses = (0, _classnames2.default)('bx--data-tooltip__label', {
+    }
+  }, {
+    key: 'getHeadingClasses',
+    value: function getHeadingClasses(data) {
+      return (0, _classnames2.default)('bx--data-tooltip__label', {
         'bx--data-tooltip__label--no-margin': data.length === 1
       });
-
+    }
+  }, {
+    key: 'renderTooltipHeading',
+    value: function renderTooltipHeading(data, heading) {
+      var headingClasses = this.getHeadingClasses(data);
+      return heading && _react2.default.createElement(
+        'p',
+        { className: headingClasses },
+        heading
+      );
+    }
+  }, {
+    key: 'renderTooltipBody',
+    value: function renderTooltipBody(data, heading) {
+      var direction = this.props.direction;
+      var tooltipListClasses = this.getTootleTipListClasses(data);
+      var listStyle = this.getListStyle(data);
       if (data.length === 1 && data[0].color) {
@@ -161,2 +175,50 @@ if (direction === 'top') {
       }
+      return _react2.default.createElement(
+        'ul',
+        { className: tooltipListClasses, style: listStyle },
+        this.renderTooltipData(data, heading)
+      );
+    }
+  }, {
+    key: 'renderTooltipSections',
+    value: function renderTooltipSections(data, heading) {
+      var self = this;
+      return data.map(function (section, i) {
+        return _react2.default.createElement(
+          'div',
+          null,
+          self.renderTooltipHeading(data, heading[i]),
+          self.renderTooltipBody(section, heading[i])
+        );
+      });
+    }
+  }, {
+    key: 'renderAllSections',
+    value: function renderAllSections(data, heading) {
+      var sections = this.renderTooltipSections(data, heading);
+      return sections.map(function (section) {
+        return section;
+      });
+    }
+  }, {
+    key: 'renderDefault',
+    value: function renderDefault(data, heading) {
+      return _react2.default.createElement(
+        'div',
+        null,
+        this.renderTooltipHeading(data, heading),
+        this.renderTooltipBody(data, heading)
+      );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          direction = _props.direction,
+          heading = _props.heading,
+          isActive = _props.isActive,
+          data = _props.data,
+          hasSections = _props.hasSections,
+          other = (0, _objectWithoutProperties3.default)(_props, ['className', 'direction', 'heading', 'isActive', 'data', 'hasSections']);
 
@@ -166,15 +228,6 @@ return _react2.default.createElement(
         (0, _extends3.default)({
-          className: tooltipClasses,
+          className: this.getTootlTipClasses(isActive, className),
           'data-floating-menu-direction': direction
         }, other),
-        heading && _react2.default.createElement(
-          'p',
-          { className: headingClasses },
-          heading
-        ),
-        _react2.default.createElement(
-          'ul',
-          { className: tooltipListClasses, style: listStyle },
-          this.renderTooltipData()
-        )
+        hasSections ? this.renderAllSections(data, heading) : this.renderDefault(data, heading)
       );
@@ -181,0 +234,0 @@ }

cjs/components/DataTooltip/DataTooltip.story.js

@@ -29,4 +29,6 @@ 'use strict';
 
+var sectionData = [[{ data: '5.3%', label: 'CPU', color: '#3b1a40' }, { data: '8.9%', label: 'CPU', color: '#473793' }, { data: '35.1%', label: 'CPU', color: '#3c6df0' }, { data: '46.5%', label: 'CPU', color: '#00a68f' }, { data: '0.2%', label: 'CPU', color: '#48d4bb' }, { data: '25.4%', label: 'CPU', color: '#9b82f3' }], [{ data: '5.3%', label: 'CPU', color: '#3b1a40' }, { data: '8.9%', label: 'CPU', color: '#473793' }, { data: '35.1%', label: 'CPU', color: '#3c6df0' }, { data: '46.5%', label: 'CPU', color: '#00a68f' }, { data: '0.2%', label: 'CPU', color: '#48d4bb' }, { data: '25.4%', label: 'CPU', color: '#9b82f3' }]];
+var defaultHeading = ['Mar 1 @ 11:26 AM'];
+var sectionsHeading = ['Mar 1 @ 11:26 AM', 'Mar 2 @ 11:26 AM'];
 var props = {
-  heading: 'Mar 1 @ 11:26 AM',
   direction: 'top',
@@ -41,11 +43,29 @@ isActive: true
 }).addWithInfo('Single', '\n        Data Tooltip.\n      ', function () {
-  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({ data: data.slice(0, data.length - 5) }, props));
+  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({
+    heading: defaultHeading,
+    data: data.slice(0, data.length - 5)
+  }, props));
 }).addWithInfo('Triple', '\n      Data Tooltip.\n    ', function () {
-  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({ data: data.slice(0, data.length - 3) }, props));
+  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({
+    heading: defaultHeading,
+    data: data.slice(0, data.length - 3)
+  }, props));
 }).addWithInfo('Quad', '\n      Data Tooltip.\n    ', function () {
-  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({ data: data.slice(0, data.length - 2) }, props));
+  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({
+    heading: defaultHeading,
+    data: data.slice(0, data.length - 2)
+  }, props));
 }).addWithInfo('Quint', '\n        Data Tooltip.\n      ', function () {
-  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({ data: data.slice(0, data.length - 1) }, props));
+  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({
+    heading: defaultHeading,
+    data: data.slice(0, data.length - 1)
+  }, props));
 }).addWithInfo('Max', '\n      Data Tooltip.\n    ', function () {
-  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({ data: data }, props));
+  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({ heading: defaultHeading, data: data }, props));
+}).addWithInfo('Sections', '\n      Data Tooltip.\n    ', function () {
+  return _react2.default.createElement(_DataTooltip2.default, (0, _extends3.default)({
+    heading: sectionsHeading,
+    data: sectionData,
+    hasSections: true
+  }, props));
 });

es/components/DataTooltip/DataTooltip.js

@@ -17,4 +17,5 @@ import _extends from 'babel-runtime/helpers/extends';
   id: PropTypes.string,
-  heading: PropTypes.string,
-  isActive: PropTypes.bool
+  heading: PropTypes.array,
+  isActive: PropTypes.bool,
+  hasSections: PropTypes.bool
 };
@@ -27,3 +28,4 @@
   heading: null,
-  isActive: true
+  isActive: true,
+  hasSections: false
 };
@@ -42,7 +44,3 @@
     key: 'renderTooltipData',
-    value: function renderTooltipData() {
-      var _props = this.props,
-          data = _props.data,
-          heading = _props.heading;
-
+    value: function renderTooltipData(data, heading) {
       var items = data.map(function (item, i) {
@@ -89,29 +87,46 @@ var divStyle = void 0;
   }, {
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          className = _props2.className,
-          direction = _props2.direction,
-          heading = _props2.heading,
-          isActive = _props2.isActive,
-          data = _props2.data,
-          other = _objectWithoutProperties(_props2, ['className', 'direction', 'heading', 'isActive', 'data']);
-
-      var tooltipClasses = classNames('bx--tooltip', 'bx--data-tooltip', {
+    key: 'getTootlTipClasses',
+    value: function getTootlTipClasses(isActive, className) {
+      return classNames('bx--tooltip', 'bx--data-tooltip', {
         'bx--tooltip--shown': isActive
       }, className);
-
-      var tooltipListClasses = classNames('bx--data-tooltip-list', {
+    }
+  }, {
+    key: 'getTootleTipListClasses',
+    value: function getTootleTipListClasses(data) {
+      return classNames('bx--data-tooltip-list', {
         'bx--data-tooltip-list--block': data.length >= 4
       });
-
-      var listStyle = {
+    }
+  }, {
+    key: 'getListStyle',
+    value: function getListStyle(data) {
+      return {
         columnCount: data.length > 3 ? '2' : '1',
         columnGap: '1.25rem'
       };
-
-      var headingClasses = classNames('bx--data-tooltip__label', {
+    }
+  }, {
+    key: 'getHeadingClasses',
+    value: function getHeadingClasses(data) {
+      return classNames('bx--data-tooltip__label', {
         'bx--data-tooltip__label--no-margin': data.length === 1
       });
-
+    }
+  }, {
+    key: 'renderTooltipHeading',
+    value: function renderTooltipHeading(data, heading) {
+      var headingClasses = this.getHeadingClasses(data);
+      return heading && React.createElement(
+        'p',
+        { className: headingClasses },
+        heading
+      );
+    }
+  }, {
+    key: 'renderTooltipBody',
+    value: function renderTooltipBody(data, heading) {
+      var direction = this.props.direction;
+      var tooltipListClasses = this.getTootleTipListClasses(data);
+      var listStyle = this.getListStyle(data);
       if (data.length === 1 && data[0].color) {
@@ -124,2 +139,50 @@ if (direction === 'top') {
       }
+      return React.createElement(
+        'ul',
+        { className: tooltipListClasses, style: listStyle },
+        this.renderTooltipData(data, heading)
+      );
+    }
+  }, {
+    key: 'renderTooltipSections',
+    value: function renderTooltipSections(data, heading) {
+      var self = this;
+      return data.map(function (section, i) {
+        return React.createElement(
+          'div',
+          null,
+          self.renderTooltipHeading(data, heading[i]),
+          self.renderTooltipBody(section, heading[i])
+        );
+      });
+    }
+  }, {
+    key: 'renderAllSections',
+    value: function renderAllSections(data, heading) {
+      var sections = this.renderTooltipSections(data, heading);
+      return sections.map(function (section) {
+        return section;
+      });
+    }
+  }, {
+    key: 'renderDefault',
+    value: function renderDefault(data, heading) {
+      return React.createElement(
+        'div',
+        null,
+        this.renderTooltipHeading(data, heading),
+        this.renderTooltipBody(data, heading)
+      );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          direction = _props.direction,
+          heading = _props.heading,
+          isActive = _props.isActive,
+          data = _props.data,
+          hasSections = _props.hasSections,
+          other = _objectWithoutProperties(_props, ['className', 'direction', 'heading', 'isActive', 'data', 'hasSections']);
 
@@ -129,15 +192,6 @@ return React.createElement(
         _extends({
-          className: tooltipClasses,
+          className: this.getTootlTipClasses(isActive, className),
           'data-floating-menu-direction': direction
         }, other),
-        heading && React.createElement(
-          'p',
-          { className: headingClasses },
-          heading
-        ),
-        React.createElement(
-          'ul',
-          { className: tooltipListClasses, style: listStyle },
-          this.renderTooltipData()
-        )
+        hasSections ? this.renderAllSections(data, heading) : this.renderDefault(data, heading)
       );
@@ -144,0 +198,0 @@ }

es/components/DataTooltip/DataTooltip.story.js

@@ -16,4 +16,6 @@ import _extends from 'babel-runtime/helpers/extends';
 
+var sectionData = [[{ data: '5.3%', label: 'CPU', color: '#3b1a40' }, { data: '8.9%', label: 'CPU', color: '#473793' }, { data: '35.1%', label: 'CPU', color: '#3c6df0' }, { data: '46.5%', label: 'CPU', color: '#00a68f' }, { data: '0.2%', label: 'CPU', color: '#48d4bb' }, { data: '25.4%', label: 'CPU', color: '#9b82f3' }], [{ data: '5.3%', label: 'CPU', color: '#3b1a40' }, { data: '8.9%', label: 'CPU', color: '#473793' }, { data: '35.1%', label: 'CPU', color: '#3c6df0' }, { data: '46.5%', label: 'CPU', color: '#00a68f' }, { data: '0.2%', label: 'CPU', color: '#48d4bb' }, { data: '25.4%', label: 'CPU', color: '#9b82f3' }]];
+var defaultHeading = ['Mar 1 @ 11:26 AM'];
+var sectionsHeading = ['Mar 1 @ 11:26 AM', 'Mar 2 @ 11:26 AM'];
 var props = {
-  heading: 'Mar 1 @ 11:26 AM',
   direction: 'top',
@@ -28,11 +30,29 @@ isActive: true
 }).addWithInfo('Single', '\n        Data Tooltip.\n      ', function () {
-  return React.createElement(DataTooltip, _extends({ data: data.slice(0, data.length - 5) }, props));
+  return React.createElement(DataTooltip, _extends({
+    heading: defaultHeading,
+    data: data.slice(0, data.length - 5)
+  }, props));
 }).addWithInfo('Triple', '\n      Data Tooltip.\n    ', function () {
-  return React.createElement(DataTooltip, _extends({ data: data.slice(0, data.length - 3) }, props));
+  return React.createElement(DataTooltip, _extends({
+    heading: defaultHeading,
+    data: data.slice(0, data.length - 3)
+  }, props));
 }).addWithInfo('Quad', '\n      Data Tooltip.\n    ', function () {
-  return React.createElement(DataTooltip, _extends({ data: data.slice(0, data.length - 2) }, props));
+  return React.createElement(DataTooltip, _extends({
+    heading: defaultHeading,
+    data: data.slice(0, data.length - 2)
+  }, props));
 }).addWithInfo('Quint', '\n        Data Tooltip.\n      ', function () {
-  return React.createElement(DataTooltip, _extends({ data: data.slice(0, data.length - 1) }, props));
+  return React.createElement(DataTooltip, _extends({
+    heading: defaultHeading,
+    data: data.slice(0, data.length - 1)
+  }, props));
 }).addWithInfo('Max', '\n      Data Tooltip.\n    ', function () {
-  return React.createElement(DataTooltip, _extends({ data: data }, props));
+  return React.createElement(DataTooltip, _extends({ heading: defaultHeading, data: data }, props));
+}).addWithInfo('Sections', '\n      Data Tooltip.\n    ', function () {
+  return React.createElement(DataTooltip, _extends({
+    heading: sectionsHeading,
+    data: sectionData,
+    hasSections: true
+  }, props));
 });

package.json

 {
   "name": "carbon-addons-data-viz-react",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Carbon Data Visualization",
@@ -9,4 +9,3 @@ "main": "cjs/index.js",
     "type": "git",
-    "url":
-      "https://github.com/carbon-design-system/carbon-addons-data-viz-react.git"
+    "url": "https://github.com/carbon-design-system/carbon-addons-data-viz-react.git"
   },
@@ -72,11 +71,20 @@ "author": "tw15egan <[e-mail]>",
     "precommit": "lint-staged",
-    "semantic-release":
-      "semantic-release pre && npm publish && semantic-release post",
-    "test": ""
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
+    "test": "echo \"Error: no test specified\" && exit 0"
   },
-  "files": ["cjs/**/*", "es/**/*", "scss/**/*"],
+  "files": [
+    "cjs/**/*",
+    "es/**/*",
+    "scss/**/*"
+  ],
   "eslintConfig": {
     "parser": "babel-eslint",
-    "extends": ["eslint:recommended", "plugin:jsx-a11y/recommended"],
-    "plugins": ["react", "jsx-a11y"],
+    "extends": [
+      "eslint:recommended",
+      "plugin:jsx-a11y/recommended"
+    ],
+    "plugins": [
+      "react",
+      "jsx-a11y"
+    ],
     "rules": {
@@ -94,5 +102,10 @@ "react/jsx-uses-vars": 1,
         {
-          "components": ["Label"],
+          "components": [
+            "Label"
+          ],
           "required": {
-            "some": ["nesting", "id"]
+            "some": [
+              "nesting",
+              "id"
+            ]
           },
@@ -112,3 +125,7 @@ "allowChildren": false
   "babel": {
-    "presets": ["./scripts/env", "react", "stage-1"],
+    "presets": [
+      "./scripts/env",
+      "react",
+      "stage-1"
+    ],
     "plugins": [
@@ -126,5 +143,12 @@ "transform-object-assign",
   "lint-staged": {
-    "*.js": ["prettier", "lint", "git add"],
-    "*.{css,scss}": ["prettier", "git add"]
+    "*.js": [
+      "prettier",
+      "lint",
+      "git add"
+    ],
+    "*.{css,scss}": [
+      "prettier",
+      "git add"
+    ]
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

186790

increased by3.3%

Lines of code

4309

increased by3.96%

No dependency changes