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

Comparing version 1.4.0 to 1.4.1

cjs/components/GaugeGraph/GaugeGraph.js

@@ -93,4 +93,2 @@ 'use strict';
     value: function initialRender() {
-      console.log(this.state);
-
       this.renderSVG();
@@ -97,0 +95,0 @@ }

cjs/components/LineGraph/LineGraph.js

@@ -40,3 +40,4 @@ 'use strict';
   margin: _propTypes2.default.object,
-  labelOffset: _propTypes2.default.number,
+  labelOffsetX: _propTypes2.default.number,
+  labelOffsetY: _propTypes2.default.number,
   axisOffset: _propTypes2.default.number,
@@ -58,3 +59,4 @@ timeFormat: _propTypes2.default.string,
   },
-  labelOffset: 55,
+  labelOffsetX: 65,
+  labelOffsetY: 55,
   axisOffset: 16,
@@ -85,3 +87,4 @@ timeFormat: '%I:%M:%S',
       margin: _this.props.margin,
-      labelOffset: _this.props.labelOffset,
+      labelOffsetX: _this.props.labelOffsetX,
+      labelOffsetY: _this.props.labelOffsetY,
       axisOffset: _this.props.axisOffset,
@@ -153,2 +156,7 @@ timeFormat: _this.props.timeFormat,
       this.svg.append('g').attr('class', 'bx--axis bx--axis--x').attr('transform', 'translate(0, ' + height + ')').call(xAxis).selectAll('text').attr('y', axisOffset).style('text-anchor', 'end').attr('transform', 'rotate(-65)');
+
+      this.svg.selectAll('.bx--axis--y path').style('display', 'none');
+      this.svg.selectAll('.bx--axis path').attr('stroke', '#5A6872');
+      this.svg.selectAll('.tick line').attr('stroke', '#5A6872');
+      this.svg.selectAll('.tick text').attr('fill', '#5A6872');
     }
@@ -159,3 +167,4 @@ }, {
       var _state4 = this.state,
-          labelOffset = _state4.labelOffset,
+          labelOffsetY = _state4.labelOffsetY,
+          labelOffsetX = _state4.labelOffsetX,
           xAxisLabel = _state4.xAxisLabel,
@@ -167,5 +176,7 @@ yAxisLabel = _state4.yAxisLabel,
 
-      var yLabel = this.svg.select('.bx--axis--y').append('text').text('' + yAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + -labelOffset + ', ' + height / 2 + ') rotate(-90)');
+      var yLabel = this.svg.select('.bx--axis--y').append('text').text('' + yAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + -labelOffsetY + ', ' + height / 2 + ') rotate(-90)');
 
-      var xLabel = this.svg.select('.bx--axis--x').append('text').text('' + xAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + width / 2 + ', ' + labelOffset + ')');
+      var xLabel = this.svg.select('.bx--axis--x').append('text').text('' + xAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + width / 2 + ', ' + labelOffsetX + ')');
+
+      this.svg.selectAll('.bx--graph-label').attr('font-size', '10').attr('font-weight', '700').attr('fill', '#5A6872').attr('text-anchor', 'middle');
     }
@@ -185,3 +196,3 @@ }, {
 
-      var path = this.svg.append('g').datum(data).append('path').attr('class', 'bx--line').attr('d', line);
+      var path = this.svg.append('g').datum(data).append('path').attr('class', 'bx--line').attr('stroke', '#00a69f').attr('stroke-width', 2).attr('fill', 'none').attr('pointer-events', 'none').attr('d', line);
 
@@ -188,0 +199,0 @@ var totalLength = path.node().getTotalLength();

cjs/components/LineGraph/LineGraph.story.js

@@ -34,2 +34,3 @@ 'use strict';
 });
+
 var props = {
@@ -40,3 +41,3 @@ data: data,
     right: 20,
-    bottom: 70,
+    bottom: 75,
     left: 65
@@ -46,3 +47,4 @@ },
   width: 800,
-  labelOffset: 55,
+  labelOffsetY: 55,
+  labelOffsetX: 65,
   axisOffset: 16,
@@ -49,0 +51,0 @@ timeFormat: '%I:%M:%S'

cjs/components/ScatterPlot/ScatterPlot.js

@@ -150,2 +150,7 @@ 'use strict';
       this.svg.append('g').attr('class', 'bx--axis bx--axis--x').attr('transform', 'translate(0, ' + height + ')').call(xAxis).selectAll('text').attr('y', axisOffset).style('text-anchor', 'end').attr('transform', 'rotate(-65)');
+
+      this.svg.selectAll('.bx--axis--y path').style('display', 'none');
+      this.svg.selectAll('.bx--axis path').attr('stroke', '#5A6872');
+      this.svg.selectAll('.tick line').attr('stroke', '#5A6872');
+      this.svg.selectAll('.tick text').attr('fill', '#5A6872');
     }
@@ -166,2 +171,4 @@ }, {
       var xLabel = this.svg.select('.bx--axis--x').append('text').text('' + xAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + width / 2 + ', ' + labelOffset + ')');
+
+      this.svg.selectAll('.bx--graph-label').attr('font-size', '10').attr('font-weight', '700').attr('fill', '#5A6872').attr('text-anchor', 'middle');
     }
@@ -168,0 +175,0 @@ }, {

es/components/GaugeGraph/GaugeGraph.js

@@ -72,4 +72,2 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
     value: function initialRender() {
-      console.log(this.state);
-
       this.renderSVG();
@@ -76,0 +74,0 @@ }

es/components/LineGraph/LineGraph.js

@@ -19,3 +19,4 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
   margin: PropTypes.object,
-  labelOffset: PropTypes.number,
+  labelOffsetX: PropTypes.number,
+  labelOffsetY: PropTypes.number,
   axisOffset: PropTypes.number,
@@ -37,3 +38,4 @@ timeFormat: PropTypes.string,
   },
-  labelOffset: 55,
+  labelOffsetX: 65,
+  labelOffsetY: 55,
   axisOffset: 16,
@@ -64,3 +66,4 @@ timeFormat: '%I:%M:%S',
       margin: _this.props.margin,
-      labelOffset: _this.props.labelOffset,
+      labelOffsetX: _this.props.labelOffsetX,
+      labelOffsetY: _this.props.labelOffsetY,
       axisOffset: _this.props.axisOffset,
@@ -132,2 +135,7 @@ timeFormat: _this.props.timeFormat,
       this.svg.append('g').attr('class', 'bx--axis bx--axis--x').attr('transform', 'translate(0, ' + height + ')').call(xAxis).selectAll('text').attr('y', axisOffset).style('text-anchor', 'end').attr('transform', 'rotate(-65)');
+
+      this.svg.selectAll('.bx--axis--y path').style('display', 'none');
+      this.svg.selectAll('.bx--axis path').attr('stroke', '#5A6872');
+      this.svg.selectAll('.tick line').attr('stroke', '#5A6872');
+      this.svg.selectAll('.tick text').attr('fill', '#5A6872');
     }
@@ -138,3 +146,4 @@ }, {
       var _state4 = this.state,
-          labelOffset = _state4.labelOffset,
+          labelOffsetY = _state4.labelOffsetY,
+          labelOffsetX = _state4.labelOffsetX,
           xAxisLabel = _state4.xAxisLabel,
@@ -146,5 +155,7 @@ yAxisLabel = _state4.yAxisLabel,
 
-      var yLabel = this.svg.select('.bx--axis--y').append('text').text('' + yAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + -labelOffset + ', ' + height / 2 + ') rotate(-90)');
+      var yLabel = this.svg.select('.bx--axis--y').append('text').text('' + yAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + -labelOffsetY + ', ' + height / 2 + ') rotate(-90)');
 
-      var xLabel = this.svg.select('.bx--axis--x').append('text').text('' + xAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + width / 2 + ', ' + labelOffset + ')');
+      var xLabel = this.svg.select('.bx--axis--x').append('text').text('' + xAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + width / 2 + ', ' + labelOffsetX + ')');
+
+      this.svg.selectAll('.bx--graph-label').attr('font-size', '10').attr('font-weight', '700').attr('fill', '#5A6872').attr('text-anchor', 'middle');
     }
@@ -164,3 +175,3 @@ }, {
 
-      var path = this.svg.append('g').datum(data).append('path').attr('class', 'bx--line').attr('d', line);
+      var path = this.svg.append('g').datum(data).append('path').attr('class', 'bx--line').attr('stroke', '#00a69f').attr('stroke-width', 2).attr('fill', 'none').attr('pointer-events', 'none').attr('d', line);
 
@@ -167,0 +178,0 @@ var totalLength = path.node().getTotalLength();

es/components/LineGraph/LineGraph.story.js

@@ -24,2 +24,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 });
+
 var props = {
@@ -30,3 +31,3 @@ data: data,
     right: 20,
-    bottom: 70,
+    bottom: 75,
     left: 65
@@ -36,3 +37,4 @@ },
   width: 800,
-  labelOffset: 55,
+  labelOffsetY: 55,
+  labelOffsetX: 65,
   axisOffset: 16,
@@ -39,0 +41,0 @@ timeFormat: '%I:%M:%S'

es/components/ScatterPlot/ScatterPlot.js

@@ -129,2 +129,7 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
       this.svg.append('g').attr('class', 'bx--axis bx--axis--x').attr('transform', 'translate(0, ' + height + ')').call(xAxis).selectAll('text').attr('y', axisOffset).style('text-anchor', 'end').attr('transform', 'rotate(-65)');
+
+      this.svg.selectAll('.bx--axis--y path').style('display', 'none');
+      this.svg.selectAll('.bx--axis path').attr('stroke', '#5A6872');
+      this.svg.selectAll('.tick line').attr('stroke', '#5A6872');
+      this.svg.selectAll('.tick text').attr('fill', '#5A6872');
     }
@@ -145,2 +150,4 @@ }, {
       var xLabel = this.svg.select('.bx--axis--x').append('text').text('' + xAxisLabel).attr('class', 'bx--graph-label').attr('transform', 'translate(' + width / 2 + ', ' + labelOffset + ')');
+
+      this.svg.selectAll('.bx--graph-label').attr('font-size', '10').attr('font-weight', '700').attr('fill', '#5A6872').attr('text-anchor', 'middle');
     }
@@ -147,0 +154,0 @@ }, {

package.json

 {
   "name": "carbon-addons-data-viz-react",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Carbon Data Visualization",
@@ -51,4 +51,4 @@ "main": "cjs/index.js",
     "carbon-components-react": "^3.4.6",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2"
   },
@@ -55,0 +55,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

53945

increased by4.26%

Lines of code

1119

increased by2.57%

No dependency changes