@carbon/charts - npm Package Compare versions

Comparing version 0.14.1 to 0.15.0

base-axis-chart.d.ts

@@ -41,4 +41,6 @@ import { ScaleBand, ScaleLinear } from "d3-scale";
     setYAxis(noAnimation?: boolean): void;
+    drawGrid(): void;
     drawXGrid(): void;
     drawYGrid(): void;
+    drawBackdrop(): void;
     addOrUpdateThresholds(yGrid: any, animate?: any): void;
@@ -45,0 +47,0 @@ updateXandYGrid(noAnimation?: boolean): void;

base-axis-chart.js

@@ -58,5 +58,4 @@ var __extends = (this && this.__extends) || (function () {
             this.setYAxis();
-            // Draw the x & y grid
-            this.drawXGrid();
-            this.drawYGrid();
+            // Draws the grid
+            this.drawGrid();
             this.addOrUpdateLegend();
@@ -330,6 +329,3 @@ }
                 .attr("x1", 0)
-                .attr("x2", chartSize.width)
-                .attr("stroke", Configuration.scales.domain.color)
-                .attr("fill", Configuration.scales.domain.color)
-                .attr("stroke-width", Configuration.scales.domain.strokeWidth);
+                .attr("x2", chartSize.width);
         }
@@ -373,2 +369,9 @@ var tickHeight = this.getLargestTickHeight(yAxisRef.selectAll(".tick"));
     };
+    BaseAxisChart.prototype.drawGrid = function () {
+        // Draw the x & y grid
+        this.drawXGrid();
+        this.drawYGrid();
+        // Draw the backdrop
+        this.drawBackdrop();
+    };
     BaseAxisChart.prototype.drawXGrid = function () {
@@ -400,2 +403,15 @@ var yHeight = this.getChartSize().height - this.getBBox(".x.axis").height;
     };
+    BaseAxisChart.prototype.drawBackdrop = function () {
+        // Get height from the grid
+        var xGridHeight = this.innerWrap.select(".x.grid").node().getBBox().height;
+        var yGridBBox = this.innerWrap.select(".y.grid").node().getBBox();
+        this.innerWrap
+            .append("rect")
+            .classed("chart-grid-backdrop", true)
+            .attr("x", yGridBBox.x)
+            .attr("y", yGridBBox.y)
+            .attr("width", yGridBBox.width)
+            .attr("height", xGridHeight)
+            .lower();
+    };
     BaseAxisChart.prototype.addOrUpdateThresholds = function (yGrid, animate) {
@@ -402,0 +418,0 @@ var _this = this;

base-chart.js

@@ -364,3 +364,4 @@ // D3 Imports
             container.attr("chart-id", chartId)
-                .classed("chart-wrapper", true);
+                .classed("chart-wrapper", true)
+                .classed("carbon--theme--" + this.options.theme, true);
             if (container.select(".legend-wrapper").nodes().length === 0) {
@@ -477,3 +478,2 @@ var legendWrapper = container.append("div")
         }
-        this.container.selectAll(".legend-btn").style("display", "inline-block");
         var svgWidth = this.container.select("g.inner-wrap").node().getBBox().width;
@@ -480,0 +480,0 @@ if (this.isLegendOnRight()) {

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.14.1](https://github.com/IBM/carbon-charts/compare/v0.14.0...v0.14.1) (2019-07-11)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
 # [0.14.0](https://github.com/IBM/carbon-charts/compare/v0.13.0...v0.14.0) (2019-07-10)
@@ -8,0 +16,0 @@

configuration.d.ts

@@ -14,2 +14,11 @@ import { ScaleBand, ScaleLinear } from "d3-scale";
 /**
+ * enum of all supported chart themes
+ */
+export declare enum ChartTheme {
+    WHITE = "white",
+    G100 = "g100",
+    G90 = "g90",
+    G10 = "g10",
+}
+/**
  * enum of all possible tooltip sizes
@@ -81,2 +90,6 @@ */
     /**
+     * supported chart theme
+     */
+    theme?: ChartTheme;
+    /**
      * tooltip configuration
@@ -468,2 +481,3 @@ */
             strokeOpacity: number;
+            fillOpacity: number;
         };
@@ -470,0 +484,0 @@ mouseout: {

configuration.js

@@ -21,2 +21,12 @@ import { Tools } from "./tools";
 /**
+ * enum of all supported chart themes
+ */
+export var ChartTheme;
+(function (ChartTheme) {
+    ChartTheme["WHITE"] = "white";
+    ChartTheme["G100"] = "g100";
+    ChartTheme["G90"] = "g90";
+    ChartTheme["G10"] = "g10";
+})(ChartTheme || (ChartTheme = {}));
+/**
  * enum of all possible tooltip sizes
@@ -50,2 +60,3 @@ */
     },
+    theme: ChartTheme.WHITE,
     overlay: {
@@ -270,3 +281,4 @@ types: {
             strokeWidth: 4,
-            strokeOpacity: 0.5
+            strokeOpacity: 0.5,
+            fillOpacity: 1,
         },
@@ -336,3 +348,3 @@ mouseout: {
     inactive: {
-        backgroundColor: "white",
+        backgroundColor: "transparent",
         borderStyle: "solid",
@@ -339,0 +351,0 @@ borderWidth: "2px"

package.json

 {
   "name": "@carbon/charts",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Carbon charting components",
@@ -47,4 +47,6 @@ "main": "./index.umd.js",
     "@carbon/colors": "10.1.1",
+    "@carbon/themes": "10.3.1",
     "@carbon/utils-position": "1.1.0",
     "babel-polyfill": "6.26.0",
+    "carbon-components": "10.3.2",
     "resize-observer-polyfill": "1.5.0"
@@ -51,0 +53,0 @@ },

scatter-chart.js

@@ -73,3 +73,7 @@ var __extends = (this && this.__extends) || (function () {
         var circleShouldBeFilled = radius < Configuration.lines.points.minNonFilledRadius || this.constructor === ScatterChart;
-        return circleShouldBeFilled ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : "white";
+        if (circleShouldBeFilled) {
+            return this.getStrokeColor(d.datasetLabel, d.label, d.value);
+        }
+        // returns null which discards any attribute allocations using return value
+        return null;
     };
@@ -185,2 +189,3 @@ ScatterChart.prototype.getCircleFillOpacity = function () {
         var accessibility = this.options.accessibility;
+        var circleRadius = this.getCircleRadius();
         this.svg.selectAll("circle.dot")
@@ -192,5 +197,6 @@ .on("click", function (d) { return self.dispatchEvent("line-onClick", d); })
                 .attr("stroke", self.colorScale[d.datasetLabel](d.label))
-                .attr("stroke-opacity", Configuration.lines.points.mouseover.strokeOpacity);
+                .attr("stroke-opacity", Configuration.lines.points.mouseover.strokeOpacity)
+                .style("fill", self.colorScale[d.datasetLabel](d.label))
+                .attr("fill-opacity", Configuration.lines.points.mouseover.fillOpacity);
             self.showTooltip(d, this);
-            self.reduceOpacity(this);
         })
@@ -203,3 +209,5 @@ .on("mousemove", function (d) { return self.tooltip.positionTooltip(); })
                 .attr("stroke", self.colorScale[d.datasetLabel](d.label))
-                .attr("stroke-opacity", Configuration.lines.points.mouseout.strokeOpacity);
+                .attr("stroke-opacity", Configuration.lines.points.mouseout.strokeOpacity)
+                .style("fill", self.getCircleFill(circleRadius, d))
+                .attr("fill-opacity", self.getCircleFillOpacity());
             self.hideTooltip();
@@ -206,0 +214,0 @@ });

services/colorPalettes.d.ts

@@ -1,4 +0,6 @@
-export declare const LIGHT_1: any[];
-export declare const LIGHT_2: any[];
-export declare const DARK_1: any[];
+export declare const WHITE: any[];
+export declare const WHITE_2: any[];
+export declare const G10: any[];
+export declare const G90: any[];
+export declare const G100: any[];
 export declare const DEFAULT: any[];

services/colorPalettes.js

 import colors from "./colors";
-export var LIGHT_1 = [
+export var WHITE = [
     colors.purple(60),
@@ -11,3 +11,3 @@ colors.teal(30),
 ];
-export var LIGHT_2 = [
+export var WHITE_2 = [
     colors.purple(60),
@@ -21,3 +21,3 @@ colors.magenta(30),
 ];
-export var DARK_1 = [
+export var G10 = [
     colors.purple(60),
@@ -31,3 +31,5 @@ colors.teal(30),
 ];
-export var DEFAULT = LIGHT_1;
+export var G90 = G10;
+export var G100 = G10;
+export var DEFAULT = WHITE;
 //# sourceMappingURL=/home/travis/build/carbon-design-system/carbon-charts/packages/core/services/colorPalettes.js.map

tools.d.ts

@@ -32,4 +32,4 @@ export declare namespace Tools {
     function getTranslationValues(elementRef: HTMLElement): {
-        tx: string;
-        ty: string;
+        tx: string | number;
+        ty: string | number;
     };
@@ -36,0 +36,0 @@ /**************************************

tools.js

@@ -109,6 +109,10 @@ // Functions
     function getTranslationValues(elementRef) {
+        // returns matrix(a, b, c, d, tx, ty) of transformation values (2d transform)
         var transformMatrix = window.getComputedStyle(elementRef).getPropertyValue("transform").replace(/\s/g, "");
-        // returns matrix(a, b, c, d, tx, ty) of transformation values (2d transform)
         var transformValues = transformMatrix.substring(transformMatrix.indexOf("(") + 1, transformMatrix.indexOf(")")).split(",");
-        return { tx: transformValues[4], ty: transformValues[5] };
+        // if there are no translations, return { dx: 0,  dy: 0 } instead of undefined
+        return {
+            tx: transformValues[4] ? transformValues[4] : 0,
+            ty: transformValues[5] ? transformValues[5] : 0
+        };
     }
@@ -115,0 +119,0 @@ Tools.getTranslationValues = getTranslationValues;

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the 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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2012887

increased by0.66%

Number of package files

101

increased by4.12%

Lines of code

6479

increased by2.43%

Worsened metrics

Dependency count

7

increased by40%

Dependency changes

• + Added@carbon/themes@10.3.1

• + Addedcarbon-components@10.3.2

• + Added@carbon/colors@10.2.0(transitive)

• + Added@carbon/themes@10.3.1(transitive)

• + Addedcarbon-components@10.3.2(transitive)

• + Addedcarbon-icons@7.0.7(transitive)

• + Addedflatpickr@4.6.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedlodash.debounce@4.0.8(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedwarning@3.0.0(transitive)