@carbon/charts 0.41.20 → 0.41.24

package/components/graphs/area-stacked.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-stacked.js","sourceRoot":"","sources":["area-stacked.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport * as Configuration from \"../../configuration\";\nimport {\n\tRoles,\n\tScaleTypes,\n\tEvents,\n\tColorClassNameTypes,\n\tCartesianOrientations\n} from \"../../interfaces\";\n\n// D3 Imports\nimport { area } from \"d3-shape\";\n\nexport class StackedArea extends Component {\n\ttype = \"area-stacked\";\n\n\tareaGenerator: any;\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\t\tthis.model.setStackedGroups(this.model.getDataGroupNames());\n\n\t\t// Highlight correct area on legend item hovers\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Legend.ITEM_HOVER,\n\t\t\tthis.handleLegendOnHover\n\t\t);\n\n\t\t// Un-highlight area on legend item mouseouts\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Legend.ITEM_MOUSEOUT,\n\t\t\tthis.handleLegendMouseOut\n\t\t);\n\t}\n\n\trender(animate = true) {\n\t\tconst svg = this.getContainerSVG({ withinChartClip: true });\n\t\tconst self = this;\n\t\tconst options = this.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tconst percentage = Object.keys(options.axes).some(\n\t\t\t(axis) => options.axes[axis].percentage\n\t\t);\n\n\t\tconst stackedData = this.model.getStackedData({\n\t\t\tpercentage,\n\t\t\tgroups: this.configs.groups\n\t\t});\n\n\t\t// area doesnt have to use the main range and domain axes - they can be mapped to the secondary (in the case of a combo chart)\n\t\t// however area _cannot_ have multiple datasets that are mapped to _different_ ranges and domains so we can use the first data item\n\t\tconst domainAxisPosition = this.services.cartesianScales.getDomainAxisPosition(\n\t\t\t{ datum: stackedData[0][0] }\n\t\t);\n\t\tconst rangeAxisPosition = this.services.cartesianScales.getRangeAxisPosition(\n\t\t\t{ datum: stackedData[0][0] }\n\t\t);\n\t\tconst mainYScale = this.services.cartesianScales.getScaleByPosition(\n\t\t\trangeAxisPosition\n\t\t);\n\n\t\tconst areas = svg\n\t\t\t.selectAll(\"path.area\")\n\t\t\t.data(stackedData, (d) => d[0][groupMapsTo]);\n\n\t\t// D3 area generator function\n\t\tthis.areaGenerator = area()\n\t\t\t.x((d: any, i) =>\n\t\t\t\tthis.services.cartesianScales.getValueThroughAxisPosition(\n\t\t\t\t\tdomainAxisPosition,\n\t\t\t\t\td.data.sharedStackKey,\n\t\t\t\t\ti\n\t\t\t\t)\n\t\t\t)\n\t\t\t.y0((d) => mainYScale(d[0]))\n\t\t\t.y1((d) => mainYScale(d[1]))\n\t\t\t.curve(this.services.curves.getD3Curve());\n\n\t\tareas.exit().attr(\"opacity\", 0).remove();\n\n\t\tconst enteringAreas = areas.enter().append(\"path\").attr(\"opacity\", 0);\n\n\t\tenteringAreas\n\t\t\t.merge(areas)\n\t\t\t.data(stackedData, (d) => d[0][groupMapsTo])\n\t\t\t.attr(\"class\", \"area\")\n\t\t\t.attr(\"class\", (d) =>\n\t\t\t\tthis.model.getColorClassName({\n\t\t\t\t\tclassNameTypes: [ColorClassNameTypes.FILL],\n\t\t\t\t\tdataGroupName: d[0][groupMapsTo],\n\t\t\t\t\toriginalClassName: \"area\"\n\t\t\t\t})\n\t\t\t)\n\t\t\t.attr(\"fill\", (d) => self.model.getFillColor(d[0][groupMapsTo]))\n\t\t\t.attr(\"role\", Roles.GRAPHICS_SYMBOL)\n\t\t\t.attr(\"aria-roledescription\", \"area\")\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition(\n\t\t\t\t\t\"area-update-enter\",\n\t\t\t\t\tanimate\n\t\t\t\t)\n\t\t\t)\n\t\t\t.attr(\"opacity\", Configuration.area.opacity.selected)\n\t\t\t.attr(\"d\", this.areaGenerator);\n\t}\n\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\t\tconst options = this.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tthis.parent\n\t\t\t.selectAll(\"path.area\")\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition(\"legend-hover-area\")\n\t\t\t)\n\t\t\t.attr(\"opacity\", (d) => {\n\t\t\t\tif (d[0][groupMapsTo] !== hoveredElement.datum().name) {\n\t\t\t\t\treturn Configuration.area.opacity.unselected;\n\t\t\t\t}\n\n\t\t\t\treturn Configuration.area.opacity.selected;\n\t\t\t});\n\t};\n\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent\n\t\t\t.selectAll(\"path.area\")\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition(\"legend-mouseout-area\")\n\t\t\t)\n\t\t\t.attr(\"opacity\", Configuration.area.opacity.selected);\n\t};\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent\n\t\t\t.selectAll(\"path.area\")\n\t\t\t.on(\"mouseover\", null)\n\t\t\t.on(\"mousemove\", null)\n\t\t\t.on(\"mouseout\", null);\n\t}\n}\n"]}
+{"version":3,"file":"area-stacked.js","sourceRoot":"","sources":["area-stacked.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,aAAa,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACN,KAAK,EAEL,MAAM,EACN,mBAAmB,GAEnB,MAAM,kBAAkB,CAAC;AAE1B,aAAa;AACb,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;IAAiC,+BAAS;IAA1C;QAAA,qEAiIC;QAhIA,UAAI,GAAG,cAAc,CAAC;QA4FtB,yBAAmB,GAAG,UAAC,KAAkB;YAChC,IAAA,4CAAc,CAAkB;YACxC,IAAM,OAAO,GAAG,KAAI,CAAC,UAAU,EAAE,CAAC;YAC1B,IAAA,sCAAW,CAAkB;YAErC,KAAI,CAAC,MAAM;iBACT,SAAS,CAAC,WAAW,CAAC;iBACtB,UAAU,CACV,KAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAC5D;iBACA,IAAI,CAAC,SAAS,EAAE,UAAC,CAAC;gBAClB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,cAAc,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE;oBACtD,OAAO,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;iBAC7C;gBAED,OAAO,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;YAC5C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,0BAAoB,GAAG,UAAC,KAAkB;YACzC,KAAI,CAAC,MAAM;iBACT,SAAS,CAAC,WAAW,CAAC;iBACtB,UAAU,CACV,KAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAC/D;iBACA,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACxD,CAAC,CAAC;;IAUH,CAAC;IA5HA,0BAAI,GAAJ;QACC,IAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAE5C,+CAA+C;QAC/C,cAAc,CAAC,gBAAgB,CAC9B,MAAM,CAAC,MAAM,CAAC,UAAU,EACxB,IAAI,CAAC,mBAAmB,CACxB,CAAC;QAEF,6CAA6C;QAC7C,cAAc,CAAC,gBAAgB,CAC9B,MAAM,CAAC,MAAM,CAAC,aAAa,EAC3B,IAAI,CAAC,oBAAoB,CACzB,CAAC;IACH,CAAC;IAED,4BAAM,GAAN,UAAO,OAAc;QAArB,iBAsEC;QAtEM,wBAAA,EAAA,cAAc;QACpB,IAAM,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5D,IAAM,IAAI,GAAG,IAAI,CAAC;QAClB,IAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC1B,IAAA,sCAAW,CAAkB;QAErC,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAChD,UAAC,IAAI,IAAK,OAAA,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,EAA7B,CAA6B,CACvC,CAAC;QAEF,IAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;YAC7C,UAAU,YAAA;YACV,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;SAC3B,CAAC,CAAC;QAEH,8HAA8H;QAC9H,mIAAmI;QACnI,IAAM,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,qBAAqB,CAC7E,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAC5B,CAAC;QACF,IAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,oBAAoB,CAC3E,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAC5B,CAAC;QACF,IAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,kBAAkB,CAClE,iBAAiB,CACjB,CAAC;QAEF,IAAM,KAAK,GAAG,GAAG;aACf,SAAS,CAAC,WAAW,CAAC;aACtB,IAAI,CAAC,WAAW,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,EAAjB,CAAiB,CAAC,CAAC;QAE9C,6BAA6B;QAC7B,IAAI,CAAC,aAAa,GAAG,IAAI,EAAE;aACzB,CAAC,CAAC,UAAC,CAAM,EAAE,CAAC;YACZ,OAAA,KAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,2BAA2B,CACxD,kBAAkB,EAClB,CAAC,CAAC,IAAI,CAAC,cAAc,EACrB,CAAC,CACD;QAJD,CAIC,CACD;aACA,EAAE,CAAC,UAAC,CAAC,IAAK,OAAA,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAhB,CAAgB,CAAC;aAC3B,EAAE,CAAC,UAAC,CAAC,IAAK,OAAA,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAhB,CAAgB,CAAC;aAC3B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC;QAE3C,KAAK,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;QAEzC,IAAM,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QAEtE,aAAa;aACX,KAAK,CAAC,KAAK,CAAC;aACZ,IAAI,CAAC,WAAW,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,EAAjB,CAAiB,CAAC;aAC3C,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC;aACrB,IAAI,CAAC,OAAO,EAAE,UAAC,CAAC;YAChB,OAAA,KAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;gBAC5B,cAAc,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC;gBAC1C,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;gBAChC,iBAAiB,EAAE,MAAM;aACzB,CAAC;QAJF,CAIE,CACF;aACA,IAAI,CAAC,MAAM,EAAE,UAAC,CAAC,IAAK,OAAA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,EAA1C,CAA0C,CAAC;aAC/D,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,eAAe,CAAC;aACnC,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC;aACpC,UAAU,CACV,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,CACtC,mBAAmB,EACnB,OAAO,CACP,CACD;aACA,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;aACpD,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACjC,CAAC;IA8BD,6BAAO,GAAP;QACC,yBAAyB;QACzB,IAAI,CAAC,MAAM;aACT,SAAS,CAAC,WAAW,CAAC;aACtB,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC;aACrB,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC;aACrB,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACxB,CAAC;IACF,kBAAC;AAAD,CAAC,AAjID,CAAiC,SAAS,GAiIzC","sourcesContent":["// Internal Imports\nimport { Component } from '../component';\nimport * as Configuration from '../../configuration';\nimport {\n\tRoles,\n\tScaleTypes,\n\tEvents,\n\tColorClassNameTypes,\n\tCartesianOrientations,\n} from '../../interfaces';\n\n// D3 Imports\nimport { area } from 'd3-shape';\n\nexport class StackedArea extends Component {\n\ttype = 'area-stacked';\n\n\tareaGenerator: any;\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\n\t\t// Highlight correct area on legend item hovers\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Legend.ITEM_HOVER,\n\t\t\tthis.handleLegendOnHover\n\t\t);\n\n\t\t// Un-highlight area on legend item mouseouts\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Legend.ITEM_MOUSEOUT,\n\t\t\tthis.handleLegendMouseOut\n\t\t);\n\t}\n\n\trender(animate = true) {\n\t\tconst svg = this.getContainerSVG({ withinChartClip: true });\n\t\tconst self = this;\n\t\tconst options = this.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tconst percentage = Object.keys(options.axes).some(\n\t\t\t(axis) => options.axes[axis].percentage\n\t\t);\n\n\t\tconst stackedData = this.model.getStackedData({\n\t\t\tpercentage,\n\t\t\tgroups: this.configs.groups,\n\t\t});\n\n\t\t// area doesnt have to use the main range and domain axes - they can be mapped to the secondary (in the case of a combo chart)\n\t\t// however area _cannot_ have multiple datasets that are mapped to _different_ ranges and domains so we can use the first data item\n\t\tconst domainAxisPosition = this.services.cartesianScales.getDomainAxisPosition(\n\t\t\t{ datum: stackedData[0][0] }\n\t\t);\n\t\tconst rangeAxisPosition = this.services.cartesianScales.getRangeAxisPosition(\n\t\t\t{ datum: stackedData[0][0] }\n\t\t);\n\t\tconst mainYScale = this.services.cartesianScales.getScaleByPosition(\n\t\t\trangeAxisPosition\n\t\t);\n\n\t\tconst areas = svg\n\t\t\t.selectAll('path.area')\n\t\t\t.data(stackedData, (d) => d[0][groupMapsTo]);\n\n\t\t// D3 area generator function\n\t\tthis.areaGenerator = area()\n\t\t\t.x((d: any, i) =>\n\t\t\t\tthis.services.cartesianScales.getValueThroughAxisPosition(\n\t\t\t\t\tdomainAxisPosition,\n\t\t\t\t\td.data.sharedStackKey,\n\t\t\t\t\ti\n\t\t\t\t)\n\t\t\t)\n\t\t\t.y0((d) => mainYScale(d[0]))\n\t\t\t.y1((d) => mainYScale(d[1]))\n\t\t\t.curve(this.services.curves.getD3Curve());\n\n\t\tareas.exit().attr('opacity', 0).remove();\n\n\t\tconst enteringAreas = areas.enter().append('path').attr('opacity', 0);\n\n\t\tenteringAreas\n\t\t\t.merge(areas)\n\t\t\t.data(stackedData, (d) => d[0][groupMapsTo])\n\t\t\t.attr('class', 'area')\n\t\t\t.attr('class', (d) =>\n\t\t\t\tthis.model.getColorClassName({\n\t\t\t\t\tclassNameTypes: [ColorClassNameTypes.FILL],\n\t\t\t\t\tdataGroupName: d[0][groupMapsTo],\n\t\t\t\t\toriginalClassName: 'area',\n\t\t\t\t})\n\t\t\t)\n\t\t\t.attr('fill', (d) => self.model.getFillColor(d[0][groupMapsTo]))\n\t\t\t.attr('role', Roles.GRAPHICS_SYMBOL)\n\t\t\t.attr('aria-roledescription', 'area')\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition(\n\t\t\t\t\t'area-update-enter',\n\t\t\t\t\tanimate\n\t\t\t\t)\n\t\t\t)\n\t\t\t.attr('opacity', Configuration.area.opacity.selected)\n\t\t\t.attr('d', this.areaGenerator);\n\t}\n\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\t\tconst options = this.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tthis.parent\n\t\t\t.selectAll('path.area')\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition('legend-hover-area')\n\t\t\t)\n\t\t\t.attr('opacity', (d) => {\n\t\t\t\tif (d[0][groupMapsTo] !== hoveredElement.datum().name) {\n\t\t\t\t\treturn Configuration.area.opacity.unselected;\n\t\t\t\t}\n\n\t\t\t\treturn Configuration.area.opacity.selected;\n\t\t\t});\n\t};\n\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent\n\t\t\t.selectAll('path.area')\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition('legend-mouseout-area')\n\t\t\t)\n\t\t\t.attr('opacity', Configuration.area.opacity.selected);\n\t};\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent\n\t\t\t.selectAll('path.area')\n\t\t\t.on('mouseover', null)\n\t\t\t.on('mousemove', null)\n\t\t\t.on('mouseout', null);\n\t}\n}\n"]}

package/components/graphs/area.d.ts

@@ -1,4 +1,4 @@
-import { Component } from "../component";
+import { Component } from '../component';
 export declare class Area extends Component {
     type: string;
     gradient_id: string;

package/components/graphs/area.js

@@ -12,28 +12,28 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 // Internal Imports
-import { Component } from "../component";
-import * as Configuration from "../../configuration";
-import { CartesianOrientations, Events, ColorClassNameTypes } from "../../interfaces";
-import { GradientUtils, DOMUtils } from "../../services";
-import { Tools } from "../../tools";
-import settings from "carbon-components/es/globals/js/settings";
+import { Component } from '../component';
+import * as Configuration from '../../configuration';
+import { CartesianOrientations, Events, ColorClassNameTypes, } from '../../interfaces';
+import { GradientUtils, DOMUtils } from '../../services';
+import { Tools } from '../../tools';
+import settings from 'carbon-components/es/globals/js/settings';
 // D3 Imports
-import { area } from "d3-shape";
-import { select } from "d3-selection";
+import { area } from 'd3-shape';
+import { select } from 'd3-selection';
 var Area = /** @class */ (function (_super) {
     __extends(Area, _super);
     function Area() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = "area";
-        _this.gradient_id = "gradient-id-" + Math.floor(Math.random() * 99999999999);
+        _this.type = 'area';
+        _this.gradient_id = 'gradient-id-' + Math.floor(Math.random() * 99999999999);
         _this.handleLegendOnHover = function (event) {
             var hoveredElement = event.detail.hoveredElement;
             _this.parent
-                .selectAll("path.area")
-                .transition(_this.services.transitions.getTransition("legend-hover-area"))
-                .attr("opacity", function (group) {
-                if (group.name !== hoveredElement.datum()["name"]) {
+                .selectAll('path.area')
+                .transition(_this.services.transitions.getTransition('legend-hover-area'))
+                .attr('opacity', function (group) {
+                if (group.name !== hoveredElement.datum()['name']) {
                     return Configuration.area.opacity.unselected;
                 }
                 return Configuration.area.opacity.selected;
@@ -41,9 +41,9 @@ var Area = /** @class */ (function (_super) {
         };
         _this.handleLegendMouseOut = function (event) {
             _this.parent
-                .selectAll("path.area")
-                .transition(_this.services.transitions.getTransition("legend-mouseout-area"))
-                .attr("opacity", Configuration.area.opacity.selected);
+                .selectAll('path.area')
+                .transition(_this.services.transitions.getTransition('legend-mouseout-area'))
+                .attr('opacity', Configuration.area.opacity.selected);
         };
         return _this;
     }
@@ -64,7 +64,7 @@ var Area = /** @class */ (function (_super) {
         var areaGenerator = area().curve(this.services.curves.getD3Curve());
         // Update the bound data on area groups
         var groupedData = this.model.getGroupedData(this.configs.groups);
-        var bounds = Tools.getProperty(this.getOptions(), "bounds");
+        var bounds = Tools.getProperty(this.getOptions(), 'bounds');
         var boundsEnabled = bounds && groupedData && groupedData.length === 1;
         if (!boundsEnabled && bounds) {
             console.warn("Bounds can only be shown when having 1 single datagroup, you've supplied " + groupedData.length); // eslint-disable-line no-console
@@ -94,20 +94,20 @@ var Area = /** @class */ (function (_super) {
                 .y(function (d, i) { return cartesianScales.getDomainValue(d, i); });
         }
         // Is gradient enabled or not
-        var isGradientEnabled = Tools.getProperty(this.getOptions(), "color", "gradient", "enabled");
+        var isGradientEnabled = Tools.getProperty(this.getOptions(), 'color', 'gradient', 'enabled');
         // Should gradient style be applicable
         var isGradientAllowed = groupedData && groupedData.length === 1 && isGradientEnabled;
         if (groupedData.length > 1 && isGradientEnabled) {
-            console.error("Gradients can only be enabled when having 1 single dataset");
+            console.error('Gradients can only be enabled when having 1 single dataset');
         }
-        var areas = svg.selectAll("path.area").data(groupedData);
-        var chartprefix = Tools.getProperty(this.getOptions(), "style", "prefix");
+        var areas = svg.selectAll('path.area').data(groupedData);
+        var chartprefix = Tools.getProperty(this.getOptions(), 'style', 'prefix');
         var chartSVG = DOMUtils.appendOrSelect(select(this.services.domUtils.getHolder()), "svg." + settings.prefix + "--" + chartprefix + "--chart-svg");
         // Remove elements that need to be exited
         // We need exit at the top here to make sure that
         // Data filters are processed before entering new elements
         // Or updating existing ones
-        areas.exit().attr("opacity", 0).remove();
+        areas.exit().attr('opacity', 0).remove();
         // if there is no grouped data (if all data groups are turned OFF with legend which can happen in the case of combo charts)
         if (!groupedData.length) {
             return;
@@ -116,89 +116,94 @@ var Area = /** @class */ (function (_super) {
         var strokePathElement = chartSVG
             .select("path." + this.model.getColorClassName({
             classNameTypes: [ColorClassNameTypes.STROKE],
-            dataGroupName: groupedData[0].name
+            dataGroupName: groupedData[0].name,
         }))
             .node();
         var colorValue = strokePathElement
-            ? getComputedStyle(strokePathElement, null).getPropertyValue("stroke")
+            ? getComputedStyle(strokePathElement, null).getPropertyValue('stroke')
             : null;
         if (isGradientAllowed && colorValue) {
             GradientUtils.appendOrUpdateLinearGradient({
                 svg: this.parent,
-                id: groupedData[0].name.replace(" ", "") +
-                    "_" +
+                id: groupedData[0].name.replace(' ', '') +
+                    '_' +
                     this.gradient_id,
-                x1: "0%",
-                x2: "0%",
-                y1: "0%",
-                y2: "100%",
-                stops: GradientUtils.getStops(domain, colorValue)
+                x1: '0%',
+                x2: '0%',
+                y1: '0%',
+                y2: '100%',
+                stops: GradientUtils.getStops(domain, colorValue),
             });
         }
         else {
             // make sure there is no linearGradient if no gradient is allowed
-            if (!this.parent.selectAll("defs linearGradient").empty()) {
-                this.parent.selectAll("defs linearGradient").each(function () {
+            if (!this.parent.selectAll('defs linearGradient').empty()) {
+                this.parent.selectAll('defs linearGradient').each(function () {
                     this.parentNode.remove();
                 });
             }
         }
         var self = this;
         // Enter paths that need to be introduced
-        var enteringAreas = areas.enter().append("path");
+        var enteringAreas = areas.enter().append('path');
         if (isGradientAllowed) {
             enteringAreas
                 .merge(areas)
-                .style("fill", function (group) {
-                return "url(#" + group.name.replace(" ", "") + "_" + _this.gradient_id + ")";
+                .style('fill', function (group) {
+                return "url(#" + group.name.replace(' ', '') + "_" + _this.gradient_id + ")";
             })
-                .attr("class", "area")
-                .attr("class", function (group) {
+                .attr('class', 'area')
+                .attr('class', function (group) {
                 return _this.model.getColorClassName({
                     classNameTypes: [ColorClassNameTypes.FILL],
                     dataGroupName: group.name,
-                    originalClassName: "area"
+                    originalClassName: 'area',
                 });
             })
-                .attr("d", function (group) {
+                .attr('d', function (group) {
                 var data = group.data;
                 return areaGenerator(data);
             });
         }
         else {
             enteringAreas
-                .attr("opacity", 0)
+                .attr('opacity', 0)
                 .merge(areas)
-                .attr("class", "area")
-                .attr("class", function (group) {
+                .attr('class', 'area')
+                .attr('class', function (group) {
                 return _this.model.getColorClassName({
-                    classNameTypes: [ColorClassNameTypes.FILL, ColorClassNameTypes.STROKE],
+                    classNameTypes: [
+                        ColorClassNameTypes.FILL,
+                        ColorClassNameTypes.STROKE,
+                    ],
                     dataGroupName: group.name,
-                    originalClassName: "area"
+                    originalClassName: 'area',
                 });
             })
-                .style("fill", function (group) { return self.model.getFillColor(group.name); })
-                .transition(this.services.transitions.getTransition("area-update-enter", animate))
-                .attr("opacity", boundsEnabled ? 1 : Configuration.area.opacity.selected)
-                .attr("d", function (group) {
+                .style('fill', function (group) { return self.model.getFillColor(group.name); })
+                .transition(this.services.transitions.getTransition('area-update-enter', animate))
+                .attr('opacity', boundsEnabled ? 1 : Configuration.area.opacity.selected)
+                .attr('d', function (group) {
                 var data = group.data;
                 return areaGenerator(data);
             });
             if (boundsEnabled) {
                 enteringAreas
-                    .attr("fill-opacity", Configuration.area.opacity.selected)
-                    .attr("stroke", function (group) { return self.model.getStrokeColor(group.name); })
-                    .style("stroke-dasharray", "2, 2")
-                    .attr("stroke-width", 0.7 + "px");
+                    .attr('fill-opacity', Configuration.area.opacity.selected)
+                    .attr('stroke', function (group) {
+                    return self.model.getStrokeColor(group.name);
+                })
+                    .style('stroke-dasharray', '2, 2')
+                    .attr('stroke-width', 0.7 + 'px');
             }
         }
     };
     Area.prototype.destroy = function () {
         // Remove event listeners
         this.parent
-            .selectAll("path.area")
-            .on("mousemove", null)
-            .on("mouseout", null);
+            .selectAll('path.area')
+            .on('mousemove', null)
+            .on('mouseout', null);
         // Remove legend listeners
         var eventsFragment = this.services.events;
         eventsFragment.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);

package/components/graphs/area.js.map

@@ -1 +1 @@
-{"version":3,"file":"area.js","sourceRoot":"","sources":["area.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport * as Configuration from \"../../configuration\";\nimport {\n\tCartesianOrientations,\n\tEvents,\n\tColorClassNameTypes\n} from \"../../interfaces\";\nimport { GradientUtils, DOMUtils } from \"../../services\";\nimport { Tools } from \"../../tools\";\nimport settings from \"carbon-components/es/globals/js/settings\";\n\n// D3 Imports\nimport { area } from \"d3-shape\";\nimport { select } from \"d3-selection\";\n\nexport class Area extends Component {\n\ttype = \"area\";\n\tgradient_id = \"gradient-id-\" + Math.floor(Math.random() * 99999999999);\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\n\t\t// Highlight correct area on legend item hovers\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Legend.ITEM_HOVER,\n\t\t\tthis.handleLegendOnHover\n\t\t);\n\n\t\t// Un-highlight area on legend item mouseouts\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Legend.ITEM_MOUSEOUT,\n\t\t\tthis.handleLegendMouseOut\n\t\t);\n\t}\n\n\trender(animate = true) {\n\t\tconst svg = this.getContainerSVG({ withinChartClip: true });\n\t\tlet domain = [0, 0];\n\n\t\tconst { cartesianScales } = this.services;\n\n\t\tconst orientation = cartesianScales.getOrientation();\n\t\tconst areaGenerator = area().curve(this.services.curves.getD3Curve());\n\n\t\t// Update the bound data on area groups\n\t\tconst groupedData = this.model.getGroupedData(this.configs.groups);\n\n\t\tconst bounds = Tools.getProperty(this.getOptions(), \"bounds\"); \n\t\tconst boundsEnabled = bounds && groupedData && groupedData.length === 1;\n\n\t\tif (!boundsEnabled && bounds) {\n\t\t\tconsole.warn(\n\t\t\t\t`Bounds can only be shown when having 1 single datagroup, you've supplied ${groupedData.length}`\n\t\t\t); // eslint-disable-line no-console\n\t\t}\n\n\t\tconst upperBound = (d, i) =>\n\t\t\tboundsEnabled\n\t\t\t\t? cartesianScales.getBoundedScaledValues(d, i)[0]\n\t\t\t\t: cartesianScales.getRangeValue(0);\n\n\t\tconst lowerBound = (d, i) =>\n\t\tboundsEnabled\n\t\t\t? cartesianScales.getBoundedScaledValues(d, i)[1]\n\t\t\t: cartesianScales.getRangeValue(d, i);\n\n\t\tif (orientation === CartesianOrientations.VERTICAL) {\n\t\t\tdomain = this.services.cartesianScales.getMainYScale().domain();\n\t\t\tareaGenerator\n\t\t\t\t.x((d, i) => cartesianScales.getDomainValue(d, i))\n\t\t\t\t.y0((d, i) => upperBound(d, i))\n\t\t\t\t.y1((d, i) => lowerBound(d, i));\n\t\t} else {\n\t\t\tdomain = this.services.cartesianScales.getMainXScale().domain();\n\t\t\tareaGenerator\n\t\t\t\t.x0((d, i) => upperBound(d, i))\n\t\t\t\t.x1((d, i) => lowerBound(d, i))\n\t\t\t\t.y((d, i) => cartesianScales.getDomainValue(d, i));\n\t\t}\n\n\t\t// Is gradient enabled or not\n\t\tconst isGradientEnabled = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t\"color\",\n\t\t\t\"gradient\",\n\t\t\t\"enabled\"\n\t\t);\n\n\t\t// Should gradient style be applicable\n\t\tconst isGradientAllowed =\n\t\t\tgroupedData && groupedData.length === 1 && isGradientEnabled;\n\n\t\tif (groupedData.length > 1 && isGradientEnabled) {\n\t\t\tconsole.error(\n\t\t\t\t\"Gradients can only be enabled when having 1 single dataset\"\n\t\t\t);\n\t\t}\n\n\t\tconst areas = svg.selectAll(\"path.area\").data(groupedData);\n\n\t\tconst chartprefix = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t\"style\",\n\t\t\t\"prefix\"\n\t\t);\n\t\tconst chartSVG = DOMUtils.appendOrSelect(\n\t\t\tselect(this.services.domUtils.getHolder()),\n\t\t\t`svg.${settings.prefix}--${chartprefix}--chart-svg`\n\t\t);\n\n\t\t// Remove elements that need to be exited\n\t\t// We need exit at the top here to make sure that\n\t\t// Data filters are processed before entering new elements\n\t\t// Or updating existing ones\n\t\tareas.exit().attr(\"opacity\", 0).remove();\n\n\t\t// if there is no grouped data (if all data groups are turned OFF with legend which can happen in the case of combo charts)\n\t\tif (!groupedData.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// The fill value of area has been overwritten, get color value from stroke color class instead\n\t\tconst strokePathElement = chartSVG\n\t\t\t.select(\n\t\t\t\t`path.${this.model.getColorClassName({\n\t\t\t\t\tclassNameTypes: [ColorClassNameTypes.STROKE],\n\t\t\t\t\tdataGroupName: groupedData[0].name\n\t\t\t\t})}`\n\t\t\t)\n\t\t\t.node();\n\n\t\tconst colorValue = strokePathElement\n\t\t\t? getComputedStyle(strokePathElement, null).getPropertyValue(\n\t\t\t\t\t\"stroke\"\n\t\t\t  )\n\t\t\t: null;\n\n\t\tif (isGradientAllowed && colorValue) {\n\t\t\tGradientUtils.appendOrUpdateLinearGradient({\n\t\t\t\tsvg: this.parent,\n\t\t\t\tid:\n\t\t\t\t\tgroupedData[0].name.replace(\" \", \"\") +\n\t\t\t\t\t\"_\" +\n\t\t\t\t\tthis.gradient_id,\n\t\t\t\tx1: \"0%\",\n\t\t\t\tx2: \"0%\",\n\t\t\t\ty1: \"0%\",\n\t\t\t\ty2: \"100%\",\n\t\t\t\tstops: GradientUtils.getStops(domain, colorValue)\n\t\t\t});\n\t\t} else {\n\t\t\t// make sure there is no linearGradient if no gradient is allowed\n\t\t\tif (!this.parent.selectAll(\"defs linearGradient\").empty()) {\n\t\t\t\tthis.parent.selectAll(\"defs linearGradient\").each(function () {\n\t\t\t\t\tthis.parentNode.remove();\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\tconst self = this;\n\n\t\t// Enter paths that need to be introduced\n\t\tconst enteringAreas = areas.enter().append(\"path\");\n\t\tif (isGradientAllowed) {\n\t\t\tenteringAreas\n\t\t\t\t.merge(areas)\n\t\t\t\t.style(\n\t\t\t\t\t\"fill\",\n\t\t\t\t\t(group) =>\n\t\t\t\t\t\t`url(#${group.name.replace(\" \", \"\")}_${\n\t\t\t\t\t\t\tthis.gradient_id\n\t\t\t\t\t\t})`\n\t\t\t\t)\n\t\t\t\t.attr(\"class\", \"area\")\n\t\t\t\t.attr(\"class\", (group) =>\n\t\t\t\t\tthis.model.getColorClassName({\n\t\t\t\t\t\tclassNameTypes: [ColorClassNameTypes.FILL],\n\t\t\t\t\t\tdataGroupName: group.name,\n\t\t\t\t\t\toriginalClassName: \"area\"\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t\t.attr(\"d\", (group) => {\n\t\t\t\t\tconst { data } = group;\n\t\t\t\t\treturn areaGenerator(data);\n\t\t\t\t});\n\t\t} else {\n\t\t\tenteringAreas\n\t\t\t\t.attr(\"opacity\", 0)\n\t\t\t\t.merge(areas)\n\t\t\t\t.attr(\"class\", \"area\")\n\t\t\t\t.attr(\"class\", (group) =>\n\t\t\t\t\tthis.model.getColorClassName({\n\t\t\t\t\t\tclassNameTypes: [ColorClassNameTypes.FILL, ColorClassNameTypes.STROKE],\n\t\t\t\t\t\tdataGroupName: group.name,\n\t\t\t\t\t\toriginalClassName: \"area\"\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t\t.style(\"fill\", (group) => self.model.getFillColor(group.name))\n\t\t\t\t.transition(\n\t\t\t\t\tthis.services.transitions.getTransition(\n\t\t\t\t\t\t\"area-update-enter\",\n\t\t\t\t\t\tanimate\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.attr(\"opacity\", boundsEnabled ? 1 : Configuration.area.opacity.selected)\n\t\t\t\t.attr(\"d\", (group) => {\n\t\t\t\t\tconst { data } = group;\n\t\t\t\t\treturn areaGenerator(data);\n\t\t\t\t});\n\n\t\t\t\tif (boundsEnabled){\n\t\t\t\t\tenteringAreas\n\t\t\t\t\t\t.attr(\"fill-opacity\", Configuration.area.opacity.selected)\n\t\t\t\t\t\t.attr(\"stroke\", (group) => self.model.getStrokeColor(group.name))\n\t\t\t\t\t\t.style(\"stroke-dasharray\", \"2, 2\")\n\t\t\t\t\t\t.attr(\"stroke-width\", 0.7 + \"px\");\n\n\t\t\t\t}\n\t\t}\n\t}\n\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\n\t\tthis.parent\n\t\t\t.selectAll(\"path.area\")\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition(\"legend-hover-area\")\n\t\t\t)\n\t\t\t.attr(\"opacity\", (group) => {\n\t\t\t\tif (group.name !== hoveredElement.datum()[\"name\"]) {\n\t\t\t\t\treturn Configuration.area.opacity.unselected;\n\t\t\t\t}\n\n\t\t\t\treturn Configuration.area.opacity.selected;\n\t\t\t});\n\t};\n\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent\n\t\t\t.selectAll(\"path.area\")\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition(\"legend-mouseout-area\")\n\t\t\t)\n\t\t\t.attr(\"opacity\", Configuration.area.opacity.selected);\n\t};\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent\n\t\t\t.selectAll(\"path.area\")\n\t\t\t.on(\"mousemove\", null)\n\t\t\t.on(\"mouseout\", null);\n\n\t\t// Remove legend listeners\n\t\tconst eventsFragment = this.services.events;\n\t\teventsFragment.removeEventListener(\n\t\t\tEvents.Legend.ITEM_HOVER,\n\t\t\tthis.handleLegendOnHover\n\t\t);\n\t\teventsFragment.removeEventListener(\n\t\t\tEvents.Legend.ITEM_MOUSEOUT,\n\t\t\tthis.handleLegendMouseOut\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"area.js","sourceRoot":"","sources":["area.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from '../component';\nimport * as Configuration from '../../configuration';\nimport {\n\tCartesianOrientations,\n\tEvents,\n\tColorClassNameTypes,\n} from '../../interfaces';\nimport { GradientUtils, DOMUtils } from '../../services';\nimport { Tools } from '../../tools';\nimport settings from 'carbon-components/es/globals/js/settings';\n\n// D3 Imports\nimport { area } from 'd3-shape';\nimport { select } from 'd3-selection';\n\nexport class Area extends Component {\n\ttype = 'area';\n\tgradient_id = 'gradient-id-' + Math.floor(Math.random() * 99999999999);\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\n\t\t// Highlight correct area on legend item hovers\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Legend.ITEM_HOVER,\n\t\t\tthis.handleLegendOnHover\n\t\t);\n\n\t\t// Un-highlight area on legend item mouseouts\n\t\teventsFragment.addEventListener(\n\t\t\tEvents.Legend.ITEM_MOUSEOUT,\n\t\t\tthis.handleLegendMouseOut\n\t\t);\n\t}\n\n\trender(animate = true) {\n\t\tconst svg = this.getContainerSVG({ withinChartClip: true });\n\t\tlet domain = [0, 0];\n\n\t\tconst { cartesianScales } = this.services;\n\n\t\tconst orientation = cartesianScales.getOrientation();\n\t\tconst areaGenerator = area().curve(this.services.curves.getD3Curve());\n\n\t\t// Update the bound data on area groups\n\t\tconst groupedData = this.model.getGroupedData(this.configs.groups);\n\n\t\tconst bounds = Tools.getProperty(this.getOptions(), 'bounds');\n\t\tconst boundsEnabled = bounds && groupedData && groupedData.length === 1;\n\n\t\tif (!boundsEnabled && bounds) {\n\t\t\tconsole.warn(\n\t\t\t\t`Bounds can only be shown when having 1 single datagroup, you've supplied ${groupedData.length}`\n\t\t\t); // eslint-disable-line no-console\n\t\t}\n\n\t\tconst upperBound = (d, i) =>\n\t\t\tboundsEnabled\n\t\t\t\t? cartesianScales.getBoundedScaledValues(d, i)[0]\n\t\t\t\t: cartesianScales.getRangeValue(0);\n\n\t\tconst lowerBound = (d, i) =>\n\t\t\tboundsEnabled\n\t\t\t\t? cartesianScales.getBoundedScaledValues(d, i)[1]\n\t\t\t\t: cartesianScales.getRangeValue(d, i);\n\n\t\tif (orientation === CartesianOrientations.VERTICAL) {\n\t\t\tdomain = this.services.cartesianScales.getMainYScale().domain();\n\t\t\tareaGenerator\n\t\t\t\t.x((d, i) => cartesianScales.getDomainValue(d, i))\n\t\t\t\t.y0((d, i) => upperBound(d, i))\n\t\t\t\t.y1((d, i) => lowerBound(d, i));\n\t\t} else {\n\t\t\tdomain = this.services.cartesianScales.getMainXScale().domain();\n\t\t\tareaGenerator\n\t\t\t\t.x0((d, i) => upperBound(d, i))\n\t\t\t\t.x1((d, i) => lowerBound(d, i))\n\t\t\t\t.y((d, i) => cartesianScales.getDomainValue(d, i));\n\t\t}\n\n\t\t// Is gradient enabled or not\n\t\tconst isGradientEnabled = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'color',\n\t\t\t'gradient',\n\t\t\t'enabled'\n\t\t);\n\n\t\t// Should gradient style be applicable\n\t\tconst isGradientAllowed =\n\t\t\tgroupedData && groupedData.length === 1 && isGradientEnabled;\n\n\t\tif (groupedData.length > 1 && isGradientEnabled) {\n\t\t\tconsole.error(\n\t\t\t\t'Gradients can only be enabled when having 1 single dataset'\n\t\t\t);\n\t\t}\n\n\t\tconst areas = svg.selectAll('path.area').data(groupedData);\n\n\t\tconst chartprefix = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'style',\n\t\t\t'prefix'\n\t\t);\n\t\tconst chartSVG = DOMUtils.appendOrSelect(\n\t\t\tselect(this.services.domUtils.getHolder()),\n\t\t\t`svg.${settings.prefix}--${chartprefix}--chart-svg`\n\t\t);\n\n\t\t// Remove elements that need to be exited\n\t\t// We need exit at the top here to make sure that\n\t\t// Data filters are processed before entering new elements\n\t\t// Or updating existing ones\n\t\tareas.exit().attr('opacity', 0).remove();\n\n\t\t// if there is no grouped data (if all data groups are turned OFF with legend which can happen in the case of combo charts)\n\t\tif (!groupedData.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// The fill value of area has been overwritten, get color value from stroke color class instead\n\t\tconst strokePathElement = chartSVG\n\t\t\t.select(\n\t\t\t\t`path.${this.model.getColorClassName({\n\t\t\t\t\tclassNameTypes: [ColorClassNameTypes.STROKE],\n\t\t\t\t\tdataGroupName: groupedData[0].name,\n\t\t\t\t})}`\n\t\t\t)\n\t\t\t.node();\n\n\t\tconst colorValue = strokePathElement\n\t\t\t? getComputedStyle(strokePathElement, null).getPropertyValue(\n\t\t\t\t\t'stroke'\n\t\t\t  )\n\t\t\t: null;\n\n\t\tif (isGradientAllowed && colorValue) {\n\t\t\tGradientUtils.appendOrUpdateLinearGradient({\n\t\t\t\tsvg: this.parent,\n\t\t\t\tid:\n\t\t\t\t\tgroupedData[0].name.replace(' ', '') +\n\t\t\t\t\t'_' +\n\t\t\t\t\tthis.gradient_id,\n\t\t\t\tx1: '0%',\n\t\t\t\tx2: '0%',\n\t\t\t\ty1: '0%',\n\t\t\t\ty2: '100%',\n\t\t\t\tstops: GradientUtils.getStops(domain, colorValue),\n\t\t\t});\n\t\t} else {\n\t\t\t// make sure there is no linearGradient if no gradient is allowed\n\t\t\tif (!this.parent.selectAll('defs linearGradient').empty()) {\n\t\t\t\tthis.parent.selectAll('defs linearGradient').each(function () {\n\t\t\t\t\tthis.parentNode.remove();\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\tconst self = this;\n\n\t\t// Enter paths that need to be introduced\n\t\tconst enteringAreas = areas.enter().append('path');\n\t\tif (isGradientAllowed) {\n\t\t\tenteringAreas\n\t\t\t\t.merge(areas)\n\t\t\t\t.style(\n\t\t\t\t\t'fill',\n\t\t\t\t\t(group) =>\n\t\t\t\t\t\t`url(#${group.name.replace(' ', '')}_${\n\t\t\t\t\t\t\tthis.gradient_id\n\t\t\t\t\t\t})`\n\t\t\t\t)\n\t\t\t\t.attr('class', 'area')\n\t\t\t\t.attr('class', (group) =>\n\t\t\t\t\tthis.model.getColorClassName({\n\t\t\t\t\t\tclassNameTypes: [ColorClassNameTypes.FILL],\n\t\t\t\t\t\tdataGroupName: group.name,\n\t\t\t\t\t\toriginalClassName: 'area',\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t\t.attr('d', (group) => {\n\t\t\t\t\tconst { data } = group;\n\t\t\t\t\treturn areaGenerator(data);\n\t\t\t\t});\n\t\t} else {\n\t\t\tenteringAreas\n\t\t\t\t.attr('opacity', 0)\n\t\t\t\t.merge(areas)\n\t\t\t\t.attr('class', 'area')\n\t\t\t\t.attr('class', (group) =>\n\t\t\t\t\tthis.model.getColorClassName({\n\t\t\t\t\t\tclassNameTypes: [\n\t\t\t\t\t\t\tColorClassNameTypes.FILL,\n\t\t\t\t\t\t\tColorClassNameTypes.STROKE,\n\t\t\t\t\t\t],\n\t\t\t\t\t\tdataGroupName: group.name,\n\t\t\t\t\t\toriginalClassName: 'area',\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t\t.style('fill', (group) => self.model.getFillColor(group.name))\n\t\t\t\t.transition(\n\t\t\t\t\tthis.services.transitions.getTransition(\n\t\t\t\t\t\t'area-update-enter',\n\t\t\t\t\t\tanimate\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.attr(\n\t\t\t\t\t'opacity',\n\t\t\t\t\tboundsEnabled ? 1 : Configuration.area.opacity.selected\n\t\t\t\t)\n\t\t\t\t.attr('d', (group) => {\n\t\t\t\t\tconst { data } = group;\n\t\t\t\t\treturn areaGenerator(data);\n\t\t\t\t});\n\n\t\t\tif (boundsEnabled) {\n\t\t\t\tenteringAreas\n\t\t\t\t\t.attr('fill-opacity', Configuration.area.opacity.selected)\n\t\t\t\t\t.attr('stroke', (group) =>\n\t\t\t\t\t\tself.model.getStrokeColor(group.name)\n\t\t\t\t\t)\n\t\t\t\t\t.style('stroke-dasharray', '2, 2')\n\t\t\t\t\t.attr('stroke-width', 0.7 + 'px');\n\t\t\t}\n\t\t}\n\t}\n\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\n\t\tthis.parent\n\t\t\t.selectAll('path.area')\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition('legend-hover-area')\n\t\t\t)\n\t\t\t.attr('opacity', (group) => {\n\t\t\t\tif (group.name !== hoveredElement.datum()['name']) {\n\t\t\t\t\treturn Configuration.area.opacity.unselected;\n\t\t\t\t}\n\n\t\t\t\treturn Configuration.area.opacity.selected;\n\t\t\t});\n\t};\n\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent\n\t\t\t.selectAll('path.area')\n\t\t\t.transition(\n\t\t\t\tthis.services.transitions.getTransition('legend-mouseout-area')\n\t\t\t)\n\t\t\t.attr('opacity', Configuration.area.opacity.selected);\n\t};\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent\n\t\t\t.selectAll('path.area')\n\t\t\t.on('mousemove', null)\n\t\t\t.on('mouseout', null);\n\n\t\t// Remove legend listeners\n\t\tconst eventsFragment = this.services.events;\n\t\teventsFragment.removeEventListener(\n\t\t\tEvents.Legend.ITEM_HOVER,\n\t\t\tthis.handleLegendOnHover\n\t\t);\n\t\teventsFragment.removeEventListener(\n\t\t\tEvents.Legend.ITEM_MOUSEOUT,\n\t\t\tthis.handleLegendMouseOut\n\t\t);\n\t}\n}\n"]}

package/components/graphs/bar-grouped.d.ts

@@ -1,5 +1,5 @@
-import { Bar } from "./bar";
-import { ScaleBand } from "d3-scale";
+import { Bar } from './bar';
+import { ScaleBand } from 'd3-scale';
 export declare class GroupedBar extends Bar {
     type: string;
     groupScale: ScaleBand<any>;

package/components/graphs/bar-grouped.js

@@ -12,36 +12,36 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 // Internal Imports
-import { Bar } from "./bar";
-import { Tools } from "../../tools";
-import { CartesianOrientations, ColorClassNameTypes, Events, Roles } from "../../interfaces";
+import { Bar } from './bar';
+import { Tools } from '../../tools';
+import { CartesianOrientations, ColorClassNameTypes, Events, Roles, } from '../../interfaces';
 // D3 Imports
-import { map } from "d3-collection";
-import { select } from "d3-selection";
-import { scaleBand } from "d3-scale";
+import { map } from 'd3-collection';
+import { select } from 'd3-selection';
+import { scaleBand } from 'd3-scale';
 var GroupedBar = /** @class */ (function (_super) {
     __extends(GroupedBar, _super);
     function GroupedBar() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = "grouped-bar";
+        _this.type = 'grouped-bar';
         _this.padding = 5;
         // Highlight elements that match the hovered legend item
         _this.handleLegendOnHover = function (event) {
             var hoveredElement = event.detail.hoveredElement;
             var groupMapsTo = _this.getOptions().data.groupMapsTo;
             _this.parent
-                .selectAll("path.bar")
-                .transition(_this.services.transitions.getTransition("legend-hover-bar"))
-                .attr("opacity", function (d) {
-                return d[groupMapsTo] !== hoveredElement.datum()["name"] ? 0.3 : 1;
+                .selectAll('path.bar')
+                .transition(_this.services.transitions.getTransition('legend-hover-bar'))
+                .attr('opacity', function (d) {
+                return d[groupMapsTo] !== hoveredElement.datum()['name'] ? 0.3 : 1;
             });
         };
         // Un-highlight all elements
         _this.handleLegendMouseOut = function (event) {
             _this.parent
-                .selectAll("path.bar")
-                .transition(_this.services.transitions.getTransition("legend-mouseout-bar"))
-                .attr("opacity", 1);
+                .selectAll('path.bar')
+                .transition(_this.services.transitions.getTransition('legend-mouseout-bar'))
+                .attr('opacity', 1);
         };
         return _this;
     }
@@ -68,23 +68,23 @@ var GroupedBar = /** @class */ (function (_super) {
         }).keys();
         // Update data on bar groups
         var barGroups = svg
-            .selectAll("g.bars")
+            .selectAll('g.bars')
             .data(allDataLabels, function (label) { return label; });
         // Remove dot groups that need to be removed
-        barGroups.exit().attr("opacity", 0).remove();
+        barGroups.exit().attr('opacity', 0).remove();
         // Add the bar groups that need to be introduced
         var barGroupsEnter = barGroups
             .enter()
-            .append("g")
-            .classed("bars", true)
-            .attr("role", Roles.GROUP)
-            .attr("data-name", "bars");
+            .append('g')
+            .classed('bars', true)
+            .attr('role', Roles.GROUP)
+            .attr('data-name', 'bars');
         // Update data on all bars
         var allBarGroups = barGroupsEnter.merge(barGroups);
         allBarGroups
             // Transition
-            .transition(this.services.transitions.getTransition("bar-group-update-enter", animate))
-            .attr("transform", function (label, i) {
+            .transition(this.services.transitions.getTransition('bar-group-update-enter', animate))
+            .attr('transform', function (label, i) {
             var scaleValue = _this.services.cartesianScales.getDomainValue(label, i);
             var translateBy = scaleValue - _this.getGroupWidth() / 2;
             // const translateBy = scaleValue - this.getGroupWidth(null) / 2 + this.getBarWidth(null);
@@ -97,25 +97,25 @@ var GroupedBar = /** @class */ (function (_super) {
                 return "translate(0, " + translateBy + ")";
             }
         });
-        var bars = allBarGroups.selectAll("path.bar").data(function (label) { return _this.getDataCorrespondingToLabel(label); }, function (d) { return d[groupMapsTo]; });
+        var bars = allBarGroups.selectAll('path.bar').data(function (label) { return _this.getDataCorrespondingToLabel(label); }, function (d) { return d[groupMapsTo]; });
         // Remove bars that are no longer needed
-        bars.exit().attr("opacity", 0).remove();
+        bars.exit().attr('opacity', 0).remove();
         // Add the bars that need to be introduced
-        var barsEnter = bars.enter().append("path").attr("opacity", 0);
+        var barsEnter = bars.enter().append('path').attr('opacity', 0);
         // code for vertical grouped bar charts
         barsEnter
             .merge(bars)
-            .classed("bar", true)
-            .transition(this.services.transitions.getTransition("bar-update-enter", animate))
-            .attr("class", function (d) {
+            .classed('bar', true)
+            .transition(this.services.transitions.getTransition('bar-update-enter', animate))
+            .attr('class', function (d) {
             return _this.model.getColorClassName({
                 classNameTypes: [ColorClassNameTypes.FILL],
                 dataGroupName: d[groupMapsTo],
-                originalClassName: "bar"
+                originalClassName: 'bar',
             });
         })
-            .style("fill", function (d) { return _this.model.getFillColor(d[groupMapsTo]); })
-            .attr("d", function (d) {
+            .style('fill', function (d) { return _this.model.getFillColor(d[groupMapsTo]); })
+            .attr('d', function (d) {
             /*
              * Orientation support for horizontal/vertical bar charts
              * Determine coordinates needed for a vertical set of paths
@@ -135,71 +135,71 @@ var GroupedBar = /** @class */ (function (_super) {
             }
             return Tools.generateSVGPathString({ x0: x0, x1: x1, y0: y0, y1: y1 }, _this.services.cartesianScales.getOrientation());
         })
-            .attr("opacity", 1)
+            .attr('opacity', 1)
             // a11y
-            .attr("role", Roles.GRAPHICS_SYMBOL)
-            .attr("aria-roledescription", "bar")
-            .attr("aria-label", function (d) { return d.value; });
+            .attr('role', Roles.GRAPHICS_SYMBOL)
+            .attr('aria-roledescription', 'bar')
+            .attr('aria-label', function (d) { return d.value; });
         // Add event listeners to elements drawn
         this.addEventListeners();
     };
     GroupedBar.prototype.addEventListeners = function () {
         var self = this;
         this.parent
-            .selectAll("path.bar")
-            .on("mouseover", function (datum) {
+            .selectAll('path.bar')
+            .on('mouseover', function (datum) {
             var hoveredElement = select(this);
-            hoveredElement.classed("hovered", true);
-            hoveredElement.transition(self.services.transitions.getTransition("graph_element_mouseover_fill_update"));
+            hoveredElement.classed('hovered', true);
+            hoveredElement.transition(self.services.transitions.getTransition('graph_element_mouseover_fill_update'));
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
                 element: hoveredElement,
-                datum: datum
+                datum: datum,
             });
             // Show tooltip
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
-                data: [datum]
+                data: [datum],
             });
         })
-            .on("mousemove", function (datum) {
+            .on('mousemove', function (datum) {
             var hoveredElement = select(this);
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {
                 element: hoveredElement,
-                datum: datum
+                datum: datum,
             });
             self.services.events.dispatchEvent(Events.Tooltip.MOVE);
         })
-            .on("click", function (datum) {
+            .on('click', function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
                 element: select(this),
-                datum: datum
+                datum: datum,
             });
         })
-            .on("mouseout", function (datum) {
+            .on('mouseout', function (datum) {
             var hoveredElement = select(this);
-            hoveredElement.classed("hovered", false);
-            hoveredElement.transition(self.services.transitions.getTransition("graph_element_mouseout_fill_update"));
+            hoveredElement.classed('hovered', false);
+            hoveredElement.transition(self.services.transitions.getTransition('graph_element_mouseout_fill_update'));
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum
+                datum: datum,
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement
+                hoveredElement: hoveredElement,
             });
         });
     };
     GroupedBar.prototype.destroy = function () {
         // Remove event listeners
         this.parent
-            .selectAll("path.bar")
-            .on("mouseover", null)
-            .on("mousemove", null)
-            .on("mouseout", null);
+            .selectAll('path.bar')
+            .on('mouseover', null)
+            .on('mousemove', null)
+            .on('mouseout', null);
         // Remove legend listeners
         var eventsFragment = this.services.events;
         eventsFragment.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
@@ -230,8 +230,8 @@ var GroupedBar = /** @class */ (function (_super) {
     // Gets the correct width for bars based on options & configurations
     GroupedBar.prototype.getBarWidth = function () {
         var options = this.getOptions();
-        var providedWidth = Tools.getProperty(options, "bars", "width");
-        var providedMaxWidth = Tools.getProperty(options, "bars", "maxWidth");
+        var providedWidth = Tools.getProperty(options, 'bars', 'width');
+        var providedMaxWidth = Tools.getProperty(options, 'bars', 'maxWidth');
         // If there's a provided width, compare with maxWidth and
         // Determine which to return
         if (providedWidth !== null) {