@carbon/charts 0.30.20 → 0.30.24

package/components/graphs/bar-stacked.js

@@ -125,7 +125,7 @@ var StackedBar = /** @class */ (function (_super) {
             .on("mouseover", function (datum) {
             var hoveredElement = select(this);
             hoveredElement.transition(self.services.transitions.getTransition("graph_element_mouseover_fill_update"))
-                .attr("fill", color(hoveredElement.attr("fill")).darker(0.7).toString());
+                .attr("fill", function (d) { return color(self.model.getFillColor(d[groupMapsTo])).darker(0.7).toString(); });
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
                 element: hoveredElement,

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

@@ -1 +1 @@
-{"version":3,"file":"bar-stacked.js","sourceRoot":"","sources":["bar-stacked.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Tools } from \"../../tools\";\nimport { Bar } from \"./bar\";\nimport {\n\tRoles,\n\tTooltipTypes,\n\tEvents,\n\tCartesianOrientations\n} from \"../../interfaces\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { color } from \"d3-color\";\nimport { map } from \"d3-collection\";\n\nexport class StackedBar extends Bar {\n\ttype = \"stacked-bar\";\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\n\t\t// Highlight correct circle on legend item hovers\n\t\teventsFragment.addEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\n\t\t// Un-highlight circles on legend item mouseouts\n\t\teventsFragment.addEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n\n\trender(animate: boolean) {\n\t\t// Grab container SVG\n\t\tconst svg = this.getContainerSVG();\n\n\t\t// Chart options mixed with the internal configurations\n\t\tconst displayData = this.model.getDisplayData();\n\t\tconst options = this.model.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tconst domainIdentifier = this.services.cartesianScales.getDomainIdentifier();\n\n\t\t// Create the data and keys that'll be used by the stack layout\n\t\tconst stackKeys = map(displayData, datum => datum[domainIdentifier]).keys();\n\t\tconst stackData = this.model.getStackedData();\n\n\t\t// Update data on all bar groups\n\t\tconst barGroups = svg.selectAll(\"g.bars\")\n\t\t\t.data(stackData, d => d.key);\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\tbarGroups.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add bar groups that need to be introduced\n\t\tbarGroups.enter()\n\t\t\t.append(\"g\")\n\t\t\t.classed(\"bars\", true)\n\t\t\t.attr(\"role\", Roles.GROUP);\n\n\t\t// Update data on all bars\n\t\tconst bars = svg.selectAll(\"g.bars\").selectAll(\"path.bar\")\n\t\t\t.data(data => data);\n\n\t\t// Remove bars that need to be removed\n\t\tbars.exit()\n\t\t\t.remove();\n\n\t\tbars.enter()\n\t\t\t.append(\"path\")\n\t\t\t.merge(bars)\n\t\t\t.classed(\"bar\", true)\n\t\t\t.transition(this.services.transitions.getTransition(\"bar-update-enter\", animate))\n\t\t\t.attr(\"fill\", d => this.model.getFillColor(d[groupMapsTo]))\n\t\t\t.attr(\"d\", (d, i) => {\n\t\t\t\tconst key = stackKeys[i];\n\n\t\t\t\t/*\n\t\t\t\t* Orientation support for horizontal/vertical bar charts\n\t\t\t\t* Determine coordinates needed for a vertical set of paths\n\t\t\t\t* to draw the bars needed, and pass those coordinates down to\n\t\t\t\t* generateSVGPathString() to decide whether it needs to flip them\n\t\t\t\t*/\n\t\t\t\tconst barWidth = this.getBarWidth();\n\t\t\t\tconst x0 = this.services.cartesianScales.getDomainValue(key, i) - barWidth / 2;\n\t\t\t\tconst x1 = x0 + barWidth;\n\t\t\t\tconst y0 = this.services.cartesianScales.getRangeValue(d[0], i);\n\t\t\t\tlet y1 = this.services.cartesianScales.getRangeValue(d[1], i);\n\n\t\t\t\t// Add the divider gap\n\t\t\t\tif (Math.abs(y1 - y0) > 0 && Math.abs(y1 - y0) > options.bars.dividerSize) {\n\t\t\t\t\tif (this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {\n\t\t\t\t\t\ty1 += 1;\n\t\t\t\t\t} else {\n\t\t\t\t\t\ty1 -= 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn Tools.generateSVGPathString(\n\t\t\t\t\t{ x0, x1, y0, y1 },\n\t\t\t\t\tthis.services.cartesianScales.getOrientation()\n\t\t\t\t);\n\t\t\t})\n\t\t\t.attr(\"opacity\", 1)\n\t\t\t// a11y\n\t\t\t.attr(\"role\", Roles.GRAPHICS_SYMBOL)\n\t\t\t.attr(\"aria-roledescription\", \"bar\")\n\t\t\t.attr(\"aria-label\", d => d.value);\n\n\t\t// Add event listeners for the above elements\n\t\tthis.addEventListeners();\n\t}\n\n\t// Highlight elements that match the hovered legend item\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-hover-bar\"))\n\t\t\t.attr(\"opacity\", d => (d.datasetLabel !== hoveredElement.datum()[\"key\"]) ? 0.3 : 1);\n\t}\n\n\t// Un-highlight all elements\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-mouseout-bar\"))\n\t\t\t.attr(\"opacity\", 1);\n\t}\n\n\taddEventListeners() {\n\t\tconst options = this.model.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tconst self = this;\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.on(\"mouseover\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\n\t\t\t\thoveredElement.transition(self.services.transitions.getTransition(\"graph_element_mouseover_fill_update\"))\n\t\t\t\t\t.attr(\"fill\", color(hoveredElement.attr(\"fill\")).darker(0.7).toString());\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mousemove\", function(datum) {\n\t\t\t\tconst displayData = self.model.getDisplayData();\n\t\t\t\tconst hoveredElement = select(this);\n\n\t\t\t\tconst domainIdentifier = self.services.cartesianScales.getDomainIdentifier();\n\t\t\t\tconst rangeIdentifier = self.services.cartesianScales.getRangeIdentifier();\n\t\t\t\tconst { groupMapsTo } = self.model.getOptions().data;\n\n\t\t\t\tlet matchingDataPoint = displayData.find(d => {\n\t\t\t\t\treturn d[rangeIdentifier] === datum.data[datum.group] &&\n\t\t\t\t\t\td[domainIdentifier].toString() === datum.data.sharedStackKey &&\n\t\t\t\t\t\td[groupMapsTo] === datum.group;\n\t\t\t\t});\n\n\t\t\t\tif (matchingDataPoint === undefined) {\n\t\t\t\t\tmatchingDataPoint = {\n\t\t\t\t\t\t[domainIdentifier]: datum.data.sharedStackKey,\n\t\t\t\t\t\t[rangeIdentifier]: datum.data[datum.group],\n\t\t\t\t\t\t[groupMapsTo]: datum.group\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\t// Show tooltip\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.SHOW, {\n\t\t\t\t\thoveredElement,\n\t\t\t\t\tdata: matchingDataPoint,\n\t\t\t\t\ttype: TooltipTypes.DATAPOINT\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"click\", function(datum) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mouseout\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\t\t\t\thoveredElement.classed(\"hovered\", false);\n\n\t\t\t\thoveredElement.transition(self.services.transitions.getTransition(\"graph_element_mouseout_fill_update\"))\n\t\t\t\t\t.attr(\"fill\", (d: any) => self.model.getFillColor(d[groupMapsTo]));\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\n\t\t\t\t// Hide tooltip\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.HIDE, { hoveredElement });\n\t\t\t});\n\t}\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.on(\"mouseover\", null)\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(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\t\teventsFragment.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n}\n"]}
+{"version":3,"file":"bar-stacked.js","sourceRoot":"","sources":["bar-stacked.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Tools } from \"../../tools\";\nimport { Bar } from \"./bar\";\nimport {\n\tRoles,\n\tTooltipTypes,\n\tEvents,\n\tCartesianOrientations\n} from \"../../interfaces\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { color } from \"d3-color\";\nimport { map } from \"d3-collection\";\n\nexport class StackedBar extends Bar {\n\ttype = \"stacked-bar\";\n\n\tinit() {\n\t\tconst eventsFragment = this.services.events;\n\n\t\t// Highlight correct circle on legend item hovers\n\t\teventsFragment.addEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\n\t\t// Un-highlight circles on legend item mouseouts\n\t\teventsFragment.addEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n\n\trender(animate: boolean) {\n\t\t// Grab container SVG\n\t\tconst svg = this.getContainerSVG();\n\n\t\t// Chart options mixed with the internal configurations\n\t\tconst displayData = this.model.getDisplayData();\n\t\tconst options = this.model.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tconst domainIdentifier = this.services.cartesianScales.getDomainIdentifier();\n\n\t\t// Create the data and keys that'll be used by the stack layout\n\t\tconst stackKeys = map(displayData, datum => datum[domainIdentifier]).keys();\n\t\tconst stackData = this.model.getStackedData();\n\n\t\t// Update data on all bar groups\n\t\tconst barGroups = svg.selectAll(\"g.bars\")\n\t\t\t.data(stackData, d => d.key);\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\tbarGroups.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add bar groups that need to be introduced\n\t\tbarGroups.enter()\n\t\t\t.append(\"g\")\n\t\t\t.classed(\"bars\", true)\n\t\t\t.attr(\"role\", Roles.GROUP);\n\n\t\t// Update data on all bars\n\t\tconst bars = svg.selectAll(\"g.bars\").selectAll(\"path.bar\")\n\t\t\t.data(data => data);\n\n\t\t// Remove bars that need to be removed\n\t\tbars.exit()\n\t\t\t.remove();\n\n\t\tbars.enter()\n\t\t\t.append(\"path\")\n\t\t\t.merge(bars)\n\t\t\t.classed(\"bar\", true)\n\t\t\t.transition(this.services.transitions.getTransition(\"bar-update-enter\", animate))\n\t\t\t.attr(\"fill\", d => this.model.getFillColor(d[groupMapsTo]))\n\t\t\t.attr(\"d\", (d, i) => {\n\t\t\t\tconst key = stackKeys[i];\n\n\t\t\t\t/*\n\t\t\t\t* Orientation support for horizontal/vertical bar charts\n\t\t\t\t* Determine coordinates needed for a vertical set of paths\n\t\t\t\t* to draw the bars needed, and pass those coordinates down to\n\t\t\t\t* generateSVGPathString() to decide whether it needs to flip them\n\t\t\t\t*/\n\t\t\t\tconst barWidth = this.getBarWidth();\n\t\t\t\tconst x0 = this.services.cartesianScales.getDomainValue(key, i) - barWidth / 2;\n\t\t\t\tconst x1 = x0 + barWidth;\n\t\t\t\tconst y0 = this.services.cartesianScales.getRangeValue(d[0], i);\n\t\t\t\tlet y1 = this.services.cartesianScales.getRangeValue(d[1], i);\n\n\t\t\t\t// Add the divider gap\n\t\t\t\tif (Math.abs(y1 - y0) > 0 && Math.abs(y1 - y0) > options.bars.dividerSize) {\n\t\t\t\t\tif (this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {\n\t\t\t\t\t\ty1 += 1;\n\t\t\t\t\t} else {\n\t\t\t\t\t\ty1 -= 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn Tools.generateSVGPathString(\n\t\t\t\t\t{ x0, x1, y0, y1 },\n\t\t\t\t\tthis.services.cartesianScales.getOrientation()\n\t\t\t\t);\n\t\t\t})\n\t\t\t.attr(\"opacity\", 1)\n\t\t\t// a11y\n\t\t\t.attr(\"role\", Roles.GRAPHICS_SYMBOL)\n\t\t\t.attr(\"aria-roledescription\", \"bar\")\n\t\t\t.attr(\"aria-label\", d => d.value);\n\n\t\t// Add event listeners for the above elements\n\t\tthis.addEventListeners();\n\t}\n\n\t// Highlight elements that match the hovered legend item\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-hover-bar\"))\n\t\t\t.attr(\"opacity\", d => (d.datasetLabel !== hoveredElement.datum()[\"key\"]) ? 0.3 : 1);\n\t}\n\n\t// Un-highlight all elements\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-mouseout-bar\"))\n\t\t\t.attr(\"opacity\", 1);\n\t}\n\n\taddEventListeners() {\n\t\tconst options = this.model.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\n\t\tconst self = this;\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.on(\"mouseover\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\n\t\t\t\thoveredElement.transition(self.services.transitions.getTransition(\"graph_element_mouseover_fill_update\"))\n\t\t\t\t\t.attr(\"fill\", (d: any) => color(self.model.getFillColor(d[groupMapsTo])).darker(0.7).toString());\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mousemove\", function(datum) {\n\t\t\t\tconst displayData = self.model.getDisplayData();\n\t\t\t\tconst hoveredElement = select(this);\n\n\t\t\t\tconst domainIdentifier = self.services.cartesianScales.getDomainIdentifier();\n\t\t\t\tconst rangeIdentifier = self.services.cartesianScales.getRangeIdentifier();\n\t\t\t\tconst { groupMapsTo } = self.model.getOptions().data;\n\n\t\t\t\tlet matchingDataPoint = displayData.find(d => {\n\t\t\t\t\treturn d[rangeIdentifier] === datum.data[datum.group] &&\n\t\t\t\t\t\td[domainIdentifier].toString() === datum.data.sharedStackKey &&\n\t\t\t\t\t\td[groupMapsTo] === datum.group;\n\t\t\t\t});\n\n\t\t\t\tif (matchingDataPoint === undefined) {\n\t\t\t\t\tmatchingDataPoint = {\n\t\t\t\t\t\t[domainIdentifier]: datum.data.sharedStackKey,\n\t\t\t\t\t\t[rangeIdentifier]: datum.data[datum.group],\n\t\t\t\t\t\t[groupMapsTo]: datum.group\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\t// Show tooltip\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.SHOW, {\n\t\t\t\t\thoveredElement,\n\t\t\t\t\tdata: matchingDataPoint,\n\t\t\t\t\ttype: TooltipTypes.DATAPOINT\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"click\", function(datum) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mouseout\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\t\t\t\thoveredElement.classed(\"hovered\", false);\n\n\t\t\t\thoveredElement.transition(self.services.transitions.getTransition(\"graph_element_mouseout_fill_update\"))\n\t\t\t\t\t.attr(\"fill\", (d: any) => self.model.getFillColor(d[groupMapsTo]));\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\n\t\t\t\t// Hide tooltip\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.HIDE, { hoveredElement });\n\t\t\t});\n\t}\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent.selectAll(\"path.bar\")\n\t\t\t.on(\"mouseover\", null)\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(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\t\teventsFragment.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n}\n"]}

package/components/graphs/bar.d.ts

@@ -1,4 +1,4 @@
 import { Component } from "../component";
 export declare class Bar extends Component {
-    protected getBarWidth(): number;
+    protected getBarWidth(allDataLabels?: string[]): number;
 }

package/components/graphs/bar.js

@@ -19,7 +19,7 @@ var Bar = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     // Gets the correct width for bars based on options & configurations
-    Bar.prototype.getBarWidth = function () {
+    Bar.prototype.getBarWidth = function (allDataLabels) {
         var options = this.model.getOptions();
         var mainXScale = this.services.cartesianScales.getMainXScale();
         if (!mainXScale.step) {

package/components/graphs/bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar.js","sourceRoot":"","sources":["bar.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;IAAyB,uBAAS;IAAlC;;IAkBA,CAAC;IAjBA,oEAAoE;IAC1D,yBAAW,GAArB;QACC,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACxC,IAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QAEjE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YACrB,OAAO,IAAI,CAAC,GAAG,CACd,OAAO,CAAC,IAAI,CAAC,QAAQ,EACrB,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,CACvD,CAAC;SACF;QAED,OAAO,IAAI,CAAC,GAAG,CACd,OAAO,CAAC,IAAI,CAAC,QAAQ,EACrB,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,CACrB,CAAC;IACH,CAAC;IACF,UAAC;AAAD,CAAC,AAlBD,CAAyB,SAAS,GAkBjC","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\n\nexport class Bar extends Component {\n\t// Gets the correct width for bars based on options & configurations\n\tprotected getBarWidth() {\n\t\tconst options = this.model.getOptions();\n\t\tconst mainXScale = this.services.cartesianScales.getMainXScale();\n\n\t\tif (!mainXScale.step) {\n\t\t\treturn Math.min(\n\t\t\t\toptions.bars.maxWidth,\n\t\t\t\t(5 / mainXScale.ticks().length) * options.bars.maxWidth\n\t\t\t);\n\t\t}\n\n\t\treturn Math.min(\n\t\t\toptions.bars.maxWidth,\n\t\t\tmainXScale.step() / 2\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"bar.js","sourceRoot":"","sources":["bar.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;IAAyB,uBAAS;IAAlC;;IAkBA,CAAC;IAjBA,oEAAoE;IAC1D,yBAAW,GAArB,UAAsB,aAAwB;QAC7C,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACxC,IAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;QAEjE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YACrB,OAAO,IAAI,CAAC,GAAG,CACd,OAAO,CAAC,IAAI,CAAC,QAAQ,EACrB,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,CACvD,CAAC;SACF;QAED,OAAO,IAAI,CAAC,GAAG,CACd,OAAO,CAAC,IAAI,CAAC,QAAQ,EACrB,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,CACrB,CAAC;IACH,CAAC;IACF,UAAC;AAAD,CAAC,AAlBD,CAAyB,SAAS,GAkBjC","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\n\nexport class Bar extends Component {\n\t// Gets the correct width for bars based on options & configurations\n\tprotected getBarWidth(allDataLabels?: string[]) {\n\t\tconst options = this.model.getOptions();\n\t\tconst mainXScale = this.services.cartesianScales.getMainXScale();\n\n\t\tif (!mainXScale.step) {\n\t\t\treturn Math.min(\n\t\t\t\toptions.bars.maxWidth,\n\t\t\t\t(5 / mainXScale.ticks().length) * options.bars.maxWidth\n\t\t\t);\n\t\t}\n\n\t\treturn Math.min(\n\t\t\toptions.bars.maxWidth,\n\t\t\tmainXScale.step() / 2\n\t\t);\n\t}\n}\n"]}

package/components/graphs/donut.js

@@ -30,6 +30,12 @@ var Donut = /** @class */ (function (_super) {
         // Call render() from Pie
         _super.prototype.render.call(this, animate);
         var self = this;
+        // if there are no data, remove the center content
+        // that is the old one and do nothing
+        if (this.model.isDataEmpty()) {
+            this.getContainerSVG().select("g.center").remove();
+            return;
+        }
         var svg = DOMUtils.appendOrSelect(this.getContainerSVG(), "g.center");
         var options = this.model.getOptions();
         // Compute the outer radius needed

package/components/graphs/donut.js.map

@@ -1 +1 @@
-{"version":3,"file":"donut.js","sourceRoot":"","sources":["donut.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Pie } from \"./pie\";\nimport { DOMUtils } from \"../../services\";\nimport { Tools } from \"../../tools\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { interpolateNumber, interpolateRound } from \"d3-interpolate\";\n\nexport class Donut extends Pie {\n\ttype = \"donut\";\n\n\trender(animate = true) {\n\t\t// Call render() from Pie\n\t\tsuper.render(animate);\n\n\t\tconst self = this;\n\n\t\tconst svg = DOMUtils.appendOrSelect(this.getContainerSVG(), \"g.center\");\n\t\tconst options = this.model.getOptions();\n\n\t\t// Compute the outer radius needed\n\t\tconst radius = this.computeRadius();\n\n\t\t// Add the number shown in the center of the donut\n\t\tDOMUtils.appendOrSelect(svg, \"text.donut-figure\")\n\t\t\t.attr(\"text-anchor\", \"middle\")\n\t\t\t.style(\"font-size\", () => options.donut.center.numberFontSize(radius))\n\t\t\t.transition(this.services.transitions.getTransition(\"donut-figure-enter-update\", animate))\n\t\t\t.tween(\"text\", function() {\n\t\t\t\treturn self.centerNumberTween(select(this));\n\t\t\t});\n\n\t\t// Add the label below the number in the center of the donut\n\t\tDOMUtils.appendOrSelect(svg, \"text.donut-title\")\n\t\t\t.attr(\"text-anchor\", \"middle\")\n\t\t\t.style(\"font-size\", () => options.donut.center.titleFontSize(radius))\n\t\t\t.attr(\"y\", options.donut.center.titleYPosition(radius))\n\t\t\t.text(Tools.getProperty(options, \"donut\", \"center\", \"label\"));\n\t}\n\n\tgetInnerRadius() {\n\t\t// Compute the outer radius needed\n\t\tconst radius = this.computeRadius();\n\n\t\treturn radius * (3 / 4);\n\t}\n\n\tcenterNumberTween(d3Ref) {\n\t\tconst options = this.model.getOptions();\n\n\t\tlet donutCenterFigure = Tools.getProperty(options, \"donut\", \"center\", \"number\");\n\t\tif (donutCenterFigure === null) {\n\t\t\tdonutCenterFigure = this.model.getDisplayData().reduce((accumulator, d) => {\n\t\t\t\treturn accumulator + d.value;\n\t\t\t}, 0);\n\t\t}\n\n\t\t// Remove commas from the current value string, and convert to an int\n\t\tconst currentValue = parseInt(d3Ref.text().replace(/[, ]+/g, \"\"), 10) || 0;\n\n\t\tlet interpolateFunction;\n\t\tif (currentValue % 1 === 0 && donutCenterFigure % 1 === 0) {\n\t\t\tinterpolateFunction = interpolateRound;\n\t\t} else {\n\t\t\tinterpolateFunction = interpolateNumber;\n\t\t}\n\n\t\tconst i = interpolateFunction(currentValue, donutCenterFigure);\n\n\t\treturn t => {\n\t\t\tconst { numberFormatter } = options.donut.center;\n\t\t\td3Ref.text(numberFormatter(i(t)));\n\t\t};\n\t}\n}\n"]}
+{"version":3,"file":"donut.js","sourceRoot":"","sources":["donut.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Pie } from \"./pie\";\nimport { DOMUtils } from \"../../services\";\nimport { Tools } from \"../../tools\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { interpolateNumber, interpolateRound } from \"d3-interpolate\";\n\nexport class Donut extends Pie {\n\ttype = \"donut\";\n\n\trender(animate = true) {\n\t\t// Call render() from Pie\n\t\tsuper.render(animate);\n\n\t\tconst self = this;\n\n\t\t// if there are no data, remove the center content\n\t\t// that is the old one and do nothing\n\t\tif (this.model.isDataEmpty()) {\n\t\t\tthis.getContainerSVG().select(\"g.center\").remove();\n\t\t\treturn;\n\t\t}\n\n\t\tconst svg = DOMUtils.appendOrSelect(this.getContainerSVG(), \"g.center\");\n\t\tconst options = this.model.getOptions();\n\n\t\t// Compute the outer radius needed\n\t\tconst radius = this.computeRadius();\n\n\t\t// Add the number shown in the center of the donut\n\t\tDOMUtils.appendOrSelect(svg, \"text.donut-figure\")\n\t\t\t.attr(\"text-anchor\", \"middle\")\n\t\t\t.style(\"font-size\", () => options.donut.center.numberFontSize(radius))\n\t\t\t.transition(this.services.transitions.getTransition(\"donut-figure-enter-update\", animate))\n\t\t\t.tween(\"text\", function() {\n\t\t\t\treturn self.centerNumberTween(select(this));\n\t\t\t});\n\n\t\t// Add the label below the number in the center of the donut\n\t\tDOMUtils.appendOrSelect(svg, \"text.donut-title\")\n\t\t\t.attr(\"text-anchor\", \"middle\")\n\t\t\t.style(\"font-size\", () => options.donut.center.titleFontSize(radius))\n\t\t\t.attr(\"y\", options.donut.center.titleYPosition(radius))\n\t\t\t.text(Tools.getProperty(options, \"donut\", \"center\", \"label\"));\n\t}\n\n\tgetInnerRadius() {\n\t\t// Compute the outer radius needed\n\t\tconst radius = this.computeRadius();\n\n\t\treturn radius * (3 / 4);\n\t}\n\n\tcenterNumberTween(d3Ref) {\n\t\tconst options = this.model.getOptions();\n\n\t\tlet donutCenterFigure = Tools.getProperty(options, \"donut\", \"center\", \"number\");\n\t\tif (donutCenterFigure === null) {\n\t\t\tdonutCenterFigure = this.model.getDisplayData().reduce((accumulator, d) => {\n\t\t\t\treturn accumulator + d.value;\n\t\t\t}, 0);\n\t\t}\n\n\t\t// Remove commas from the current value string, and convert to an int\n\t\tconst currentValue = parseInt(d3Ref.text().replace(/[, ]+/g, \"\"), 10) || 0;\n\n\t\tlet interpolateFunction;\n\t\tif (currentValue % 1 === 0 && donutCenterFigure % 1 === 0) {\n\t\t\tinterpolateFunction = interpolateRound;\n\t\t} else {\n\t\t\tinterpolateFunction = interpolateNumber;\n\t\t}\n\n\t\tconst i = interpolateFunction(currentValue, donutCenterFigure);\n\n\t\treturn t => {\n\t\t\tconst { numberFormatter } = options.donut.center;\n\t\t\td3Ref.text(numberFormatter(i(t)));\n\t\t};\n\t}\n}\n"]}

package/components/graphs/scatter.d.ts

@@ -4,6 +4,7 @@ export declare class Scatter extends Component {
     type: string;
     init(): void;
     render(animate: boolean): void;
+    isDatapointThresholdAnomaly(datum: any, index: number): boolean;
     styleCircles(selection: Selection<any, any, any, any>, animate: boolean): void;
     handleLegendOnHover: (event: CustomEvent<any>) => void;
     handleLegendMouseOut: (event: CustomEvent<any>) => void;

package/components/graphs/scatter.js

@@ -74,6 +74,32 @@ var Scatter = /** @class */ (function (_super) {
         // Add event listeners to elements drawn
         this.addEventListeners();
     };
+    // A value is an anomaly if is above all defined domain and range thresholds
+    Scatter.prototype.isDatapointThresholdAnomaly = function (datum, index) {
+        var handleThresholds = this.configs.handleThresholds;
+        if (!handleThresholds) {
+            return false;
+        }
+        var cartesianScales = this.services.cartesianScales;
+        var orientation = cartesianScales.getOrientation();
+        // Get highest domain and range thresholds
+        var _a = Tools.flipDomainAndRangeBasedOnOrientation(this.services.cartesianScales.getHighestDomainThreshold(), this.services.cartesianScales.getHighestRangeThreshold(), orientation), xThreshold = _a[0], yThreshold = _a[1];
+        var _b = Tools.flipDomainAndRangeBasedOnOrientation(function (d, i) { return cartesianScales.getDomainValue(d, i); }, function (d, i) { return cartesianScales.getRangeValue(d, i); }, orientation), getXValue = _b[0], getYValue = _b[1];
+        // Get datum x and y values
+        var xValue = getXValue(datum, index);
+        var yValue = getYValue(datum, index);
+        // To be an anomaly, the value has to be higher or equal than the threshold value
+        // (if are present, both range and domain threshold values)
+        if (yThreshold && xThreshold) {
+            return yValue <= yThreshold.scaleValue && xValue >= xThreshold.scaleValue;
+        }
+        if (yThreshold) {
+            return yValue <= yThreshold.scaleValue;
+        }
+        if (xThreshold) {
+            return xValue >= xThreshold.scaleValue;
+        }
+    };
     Scatter.prototype.styleCircles = function (selection, animate) {
         var _this = this;
         // Chart options mixed with the internal configurations
@@ -88,6 +114,8 @@ var Scatter = /** @class */ (function (_super) {
         var _b = Tools.flipDomainAndRangeBasedOnOrientation(getDomainValue, getRangeValue, cartesianScales.getOrientation()), getXValue = _b[0], getYValue = _b[1];
         selection.raise()
             .classed("dot", true)
+            // Set class to highlight the dots that are above all the thresholds, in both directions (vertical and horizontal)
+            .classed("threshold-anomaly", function (d, i) { return _this.isDatapointThresholdAnomaly(d, i); })
             .classed("filled", function (d) { return _this.model.getIsFilled(d[groupMapsTo], d[domainIdentifier], d, filled); })
             .classed("unfilled", function (d) { return !_this.model.getIsFilled(d[groupMapsTo], d[domainIdentifier], d, filled); })
             .attr("cx", getXValue)

package/components/graphs/scatter.js.map

@@ -1 +1 @@
-{"version":3,"file":"scatter.js","sourceRoot":"","sources":["scatter.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { TooltipTypes, Roles, Events } from \"../../interfaces\";\nimport { Tools } from \"../../tools\";\n\n// D3 Imports\nimport { select, Selection, event as d3Event } from \"d3-selection\";\n\nexport class Scatter extends Component {\n\ttype = \"scatter\";\n\n\tinit() {\n\t\tconst { events } = this.services;\n\t\t// Highlight correct circle on legend item hovers\n\t\tevents.addEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\t\t// Un-highlight circles on legend item mouseouts\n\t\tevents.addEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n\n\trender(animate: boolean) {\n\t\t// Grab container SVG\n\t\tconst svg = this.getContainerSVG();\n\n\t\tconst groupedData = this.model.getGroupedData();\n\n\t\t// Update data on dot groups\n\t\tconst dotGroups = svg.selectAll(\"g.dots\")\n\t\t\t.data(groupedData, group => group.name);\n\n\t\t// Remove dot groups that need to be removed\n\t\tdotGroups.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add the dot groups that need to be introduced\n\t\tconst dotGroupsEnter = dotGroups.enter()\n\t\t\t.append(\"g\")\n\t\t\t\t.classed(\"dots\", true)\n\t\t\t\t.attr(\"role\", Roles.GROUP);\n\n\t\tconst rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();\n\t\t// Update data on all circles\n\t\tconst dots = dotGroupsEnter.merge(dotGroups)\n\t\t\t.selectAll(\"circle.dot\")\n\t\t\t.data(group => group.data.filter(datum => datum[rangeIdentifier] !== null && datum[rangeIdentifier] !== undefined));\n\n\t\t// Add the circles that need to be introduced\n\t\tconst dotsEnter = dots.enter()\n\t\t\t.append(\"circle\")\n\t\t\t.attr(\"opacity\", 0);\n\n\t\t// Apply styling & position\n\t\tconst circlesToStyle = dotsEnter.merge(dots);\n\t\tthis.styleCircles(circlesToStyle, animate);\n\n\t\t// Add event listeners to elements drawn\n\t\tthis.addEventListeners();\n\t}\n\n\tstyleCircles(selection: Selection<any, any, any, any>, animate: boolean) {\n\t\t// Chart options mixed with the internal configurations\n\t\tconst options = this.model.getOptions();\n\t\tconst { filled } = options.points;\n\t\tconst { cartesianScales, transitions } = this.services;\n\n\t\tconst { groupMapsTo } = options.data;\n\t\tconst domainIdentifier = cartesianScales.getDomainIdentifier();\n\t\tconst rangeIdentifier = cartesianScales.getRangeIdentifier();\n\n\t\tconst getDomainValue = (d, i) => cartesianScales.getDomainValue(d, i);\n\t\tconst getRangeValue = (d, i) => cartesianScales.getRangeValue(d, i);\n\t\tconst [getXValue, getYValue] = Tools.flipDomainAndRangeBasedOnOrientation(\n\t\t\tgetDomainValue,\n\t\t\tgetRangeValue,\n\t\t\tcartesianScales.getOrientation()\n\t\t);\n\n\t\tselection.raise()\n\t\t\t.classed(\"dot\", true)\n\t\t\t.classed(\"filled\", d => this.model.getIsFilled(d[groupMapsTo], d[domainIdentifier], d, filled))\n\t\t\t.classed(\"unfilled\", d => !this.model.getIsFilled(d[groupMapsTo], d[domainIdentifier], d, filled))\n\t\t\t.attr(\"cx\", getXValue)\n\t\t\t.transition(transitions.getTransition(\"scatter-update-enter\", animate))\n\t\t\t.attr(\"cy\", getYValue)\n\t\t\t.attr(\"r\", options.points.radius)\n\t\t\t.attr(\"fill\", d => {\n\t\t\t\tif (this.model.getIsFilled(d[groupMapsTo], d[domainIdentifier], d, filled)) {\n\t\t\t\t\treturn this.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.attr(\"fill-opacity\", filled ? 0.2 : 1)\n\t\t\t.attr(\"stroke\", d => this.model.getStrokeColor(d[groupMapsTo], d[domainIdentifier], d))\n\t\t\t.attr(\"opacity\", 1)\n\t\t\t// a11y\n\t\t\t.attr(\"role\", Roles.GRAPHICS_SYMBOL)\n\t\t\t.attr(\"aria-roledescription\", \"point\")\n\t\t\t.attr(\"aria-label\", d => d[rangeIdentifier]);\n\n\t\t// Add event listeners to elements drawn\n\t\tthis.addEventListeners();\n\t}\n\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\n\t\tthis.parent.selectAll(\"circle.dot\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-hover-scatter\"))\n\t\t\t.attr(\"opacity\", d => (d[groupMapsTo] !== hoveredElement.datum()[\"name\"]) ? 0.3 : 1);\n\t}\n\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent.selectAll(\"circle.dot\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-mouseout-scatter\"))\n\t\t\t.attr(\"opacity\", 1);\n\t}\n\n\taddEventListeners() {\n\t\tconst self = this;\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\t\tconst domainIdentifier = this.services.cartesianScales.getDomainIdentifier();\n\n\t\tthis.parent.selectAll(\"circle\")\n\t\t\t.on(\"mouseover mousemove\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\n\t\t\t\thoveredElement.classed(\"hovered\", true)\n\t\t\t\t\t.style(\"fill\", (d: any) => self.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d));\n\n\t\t\t\tconst eventNameToDispatch = d3Event.type === \"mouseover\" ? Events.Scatter.SCATTER_MOUSEOVER : Events.Scatter.SCATTER_MOUSEMOVE;\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(eventNameToDispatch, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\n\t\t\t\t// Show tooltip\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.SHOW, {\n\t\t\t\t\thoveredElement,\n\t\t\t\t\ttype: TooltipTypes.DATAPOINT\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"click\", function(datum) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Scatter.SCATTER_CLICK, {\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mouseout\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\t\t\t\thoveredElement.classed(\"hovered\", false);\n\n\t\t\t\tif (!self.configs.filled) {\n\t\t\t\t\thoveredElement.style(\"fill\", null);\n\t\t\t\t}\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Scatter.SCATTER_MOUSEOUT, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\n\t\t\t\t// Hide tooltip\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.HIDE, { hoveredElement });\n\t\t\t});\n\t}\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent.selectAll(\"circle\")\n\t\t\t.on(\"mousemove\", null)\n\t\t\t.on(\"mouseout\", null);\n\n\t\t// Remove legend listeners\n\t\tconst { events } = this.services;\n\t\tevents.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\t\tevents.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n}\n"]}
+{"version":3,"file":"scatter.js","sourceRoot":"","sources":["scatter.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { TooltipTypes, Roles, Events } from \"../../interfaces\";\nimport { Tools } from \"../../tools\";\n\n// D3 Imports\nimport { select, Selection, event as d3Event } from \"d3-selection\";\n\nexport class Scatter extends Component {\n\ttype = \"scatter\";\n\n\tinit() {\n\t\tconst { events } = this.services;\n\t\t// Highlight correct circle on legend item hovers\n\t\tevents.addEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\t\t// Un-highlight circles on legend item mouseouts\n\t\tevents.addEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n\n\trender(animate: boolean) {\n\t\t// Grab container SVG\n\t\tconst svg = this.getContainerSVG();\n\n\t\tconst groupedData = this.model.getGroupedData();\n\n\t\t// Update data on dot groups\n\t\tconst dotGroups = svg.selectAll(\"g.dots\")\n\t\t\t.data(groupedData, group => group.name);\n\n\t\t// Remove dot groups that need to be removed\n\t\tdotGroups.exit()\n\t\t\t.attr(\"opacity\", 0)\n\t\t\t.remove();\n\n\t\t// Add the dot groups that need to be introduced\n\t\tconst dotGroupsEnter = dotGroups.enter()\n\t\t\t.append(\"g\")\n\t\t\t\t.classed(\"dots\", true)\n\t\t\t\t.attr(\"role\", Roles.GROUP);\n\n\t\tconst rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();\n\t\t// Update data on all circles\n\t\tconst dots = dotGroupsEnter.merge(dotGroups)\n\t\t\t.selectAll(\"circle.dot\")\n\t\t\t.data(group => group.data.filter(datum => datum[rangeIdentifier] !== null && datum[rangeIdentifier] !== undefined));\n\n\t\t// Add the circles that need to be introduced\n\t\tconst dotsEnter = dots.enter()\n\t\t\t.append(\"circle\")\n\t\t\t.attr(\"opacity\", 0);\n\n\t\t// Apply styling & position\n\t\tconst circlesToStyle = dotsEnter.merge(dots);\n\t\tthis.styleCircles(circlesToStyle, animate);\n\n\t\t// Add event listeners to elements drawn\n\t\tthis.addEventListeners();\n\t}\n\n\t// A value is an anomaly if is above all defined domain and range thresholds\n\tisDatapointThresholdAnomaly(datum: any, index: number) {\n\t\tconst { handleThresholds } = this.configs;\n\t\tif (!handleThresholds) { return false; }\n\n\t\tconst { cartesianScales } = this.services;\n\t\tconst orientation = cartesianScales.getOrientation();\n\n\t\t// Get highest domain and range thresholds\n\t\tconst [xThreshold, yThreshold] = Tools.flipDomainAndRangeBasedOnOrientation(\n\t\t\tthis.services.cartesianScales.getHighestDomainThreshold(),\n\t\t\tthis.services.cartesianScales.getHighestRangeThreshold(),\n\t\t\torientation\n\t\t);\n\n\t\tconst [getXValue, getYValue] = Tools.flipDomainAndRangeBasedOnOrientation(\n\t\t\t(d, i) => cartesianScales.getDomainValue(d, i),\n\t\t\t(d, i) => cartesianScales.getRangeValue(d, i),\n\t\t\torientation\n\t\t);\n\n\t\t// Get datum x and y values\n\t\tconst xValue = getXValue(datum, index);\n\t\tconst yValue = getYValue(datum, index);\n\n\t\t// To be an anomaly, the value has to be higher or equal than the threshold value\n\t\t// (if are present, both range and domain threshold values)\n\t\tif (yThreshold && xThreshold) {\n\t\t\treturn yValue <= yThreshold.scaleValue && xValue >= xThreshold.scaleValue;\n\t\t}\n\n\t\tif (yThreshold) {\n\t\t\treturn yValue <= yThreshold.scaleValue;\n\t\t}\n\n\t\tif (xThreshold) {\n\t\t\treturn xValue >= xThreshold.scaleValue;\n\t\t}\n\t}\n\n\tstyleCircles(selection: Selection<any, any, any, any>, animate: boolean) {\n\t\t// Chart options mixed with the internal configurations\n\t\tconst options = this.model.getOptions();\n\t\tconst { filled } = options.points;\n\t\tconst { cartesianScales, transitions } = this.services;\n\n\t\tconst { groupMapsTo } = options.data;\n\t\tconst domainIdentifier = cartesianScales.getDomainIdentifier();\n\t\tconst rangeIdentifier = cartesianScales.getRangeIdentifier();\n\n\t\tconst getDomainValue = (d, i) => cartesianScales.getDomainValue(d, i);\n\t\tconst getRangeValue = (d, i) => cartesianScales.getRangeValue(d, i);\n\t\tconst [getXValue, getYValue] = Tools.flipDomainAndRangeBasedOnOrientation(\n\t\t\tgetDomainValue,\n\t\t\tgetRangeValue,\n\t\t\tcartesianScales.getOrientation()\n\t\t);\n\n\t\tselection.raise()\n\t\t\t.classed(\"dot\", true)\n\t\t\t// Set class to highlight the dots that are above all the thresholds, in both directions (vertical and horizontal)\n\t\t\t.classed(\"threshold-anomaly\", (d, i) => this.isDatapointThresholdAnomaly(d, i))\n\t\t\t.classed(\"filled\", d => this.model.getIsFilled(d[groupMapsTo], d[domainIdentifier], d, filled))\n\t\t\t.classed(\"unfilled\", d => !this.model.getIsFilled(d[groupMapsTo], d[domainIdentifier], d, filled))\n\t\t\t.attr(\"cx\", getXValue)\n\t\t\t.transition(transitions.getTransition(\"scatter-update-enter\", animate))\n\t\t\t.attr(\"cy\", getYValue)\n\t\t\t.attr(\"r\", options.points.radius)\n\t\t\t.attr(\"fill\", d => {\n\t\t\t\tif (this.model.getIsFilled(d[groupMapsTo], d[domainIdentifier], d, filled)) {\n\t\t\t\t\treturn this.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.attr(\"fill-opacity\", filled ? 0.2 : 1)\n\t\t\t.attr(\"stroke\", d => this.model.getStrokeColor(d[groupMapsTo], d[domainIdentifier], d))\n\t\t\t.attr(\"opacity\", 1)\n\t\t\t// a11y\n\t\t\t.attr(\"role\", Roles.GRAPHICS_SYMBOL)\n\t\t\t.attr(\"aria-roledescription\", \"point\")\n\t\t\t.attr(\"aria-label\", d => d[rangeIdentifier]);\n\n\t\t// Add event listeners to elements drawn\n\t\tthis.addEventListeners();\n\t}\n\n\thandleLegendOnHover = (event: CustomEvent) => {\n\t\tconst { hoveredElement } = event.detail;\n\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\n\t\tthis.parent.selectAll(\"circle.dot\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-hover-scatter\"))\n\t\t\t.attr(\"opacity\", d => (d[groupMapsTo] !== hoveredElement.datum()[\"name\"]) ? 0.3 : 1);\n\t}\n\n\thandleLegendMouseOut = (event: CustomEvent) => {\n\t\tthis.parent.selectAll(\"circle.dot\")\n\t\t\t.transition(this.services.transitions.getTransition(\"legend-mouseout-scatter\"))\n\t\t\t.attr(\"opacity\", 1);\n\t}\n\n\taddEventListeners() {\n\t\tconst self = this;\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\t\tconst domainIdentifier = this.services.cartesianScales.getDomainIdentifier();\n\n\t\tthis.parent.selectAll(\"circle\")\n\t\t\t.on(\"mouseover mousemove\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\n\t\t\t\thoveredElement.classed(\"hovered\", true)\n\t\t\t\t\t.style(\"fill\", (d: any) => self.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d));\n\n\t\t\t\tconst eventNameToDispatch = d3Event.type === \"mouseover\" ? Events.Scatter.SCATTER_MOUSEOVER : Events.Scatter.SCATTER_MOUSEMOVE;\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(eventNameToDispatch, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\n\t\t\t\t// Show tooltip\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.SHOW, {\n\t\t\t\t\thoveredElement,\n\t\t\t\t\ttype: TooltipTypes.DATAPOINT\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"click\", function(datum) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Scatter.SCATTER_CLICK, {\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mouseout\", function(datum) {\n\t\t\t\tconst hoveredElement = select(this);\n\t\t\t\thoveredElement.classed(\"hovered\", false);\n\n\t\t\t\tif (!self.configs.filled) {\n\t\t\t\t\thoveredElement.style(\"fill\", null);\n\t\t\t\t}\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Scatter.SCATTER_MOUSEOUT, {\n\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\tdatum\n\t\t\t\t});\n\n\t\t\t\t// Hide tooltip\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.HIDE, { hoveredElement });\n\t\t\t});\n\t}\n\n\tdestroy() {\n\t\t// Remove event listeners\n\t\tthis.parent.selectAll(\"circle\")\n\t\t\t.on(\"mousemove\", null)\n\t\t\t.on(\"mouseout\", null);\n\n\t\t// Remove legend listeners\n\t\tconst { events } = this.services;\n\t\tevents.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);\n\t\tevents.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);\n\t}\n}\n"]}

package/components/graphs/skeleton.d.ts

@@ -0,0 +1,22 @@
+import { Component } from "../component";
+export declare class Skeleton extends Component {
+    type: string;
+    xScale: any;
+    yScale: any;
+    backdrop: any;
+    render(): void;
+    renderSkeleton(showShimmerEffect: boolean): void;
+    renderGridSkeleton(showShimmerEffect: boolean): void;
+    renderVertOrHorizSkeleton(showShimmerEffect: boolean): void;
+    renderPieSkeleton(showShimmerEffect: boolean): void;
+    renderDonutSkeleton(showShimmerEffect: boolean): void;
+    setScales(): void;
+    drawBackdrop(showShimmerEffect: boolean): void;
+    drawXGrid(showShimmerEffect: boolean): void;
+    drawYGrid(showShimmerEffect: boolean): void;
+    drawRing(outerRadius: number, innerRadius: number, shimmer?: boolean): void;
+    computeOuterRadius(): any;
+    computeInnerRadius(): number;
+    setShimmerEffect(gradientId: string): void;
+    removeSkeleton(): void;
+}

package/components/graphs/skeleton.js

@@ -0,0 +1,241 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+// Internal Imports
+import { Component } from "../component";
+import { DOMUtils } from "../../services";
+import { Tools } from "../../tools";
+import { Skeletons, CartesianOrientations } from "../../interfaces/enums";
+// D3 Imports
+import { scaleLinear } from "d3-scale";
+import { easeLinear } from "d3-ease";
+import { arc } from "d3-shape";
+var Skeleton = /** @class */ (function (_super) {
+    __extends(Skeleton, _super);
+    function Skeleton() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "skeleton";
+        return _this;
+    }
+    Skeleton.prototype.render = function () {
+        var svg = this.parent;
+        var parent = svg.node().parentNode;
+        var _a = DOMUtils.getSVGElementSize(parent, { useAttrs: true }), width = _a.width, height = _a.height;
+        svg.attr("width", width).attr("height", height);
+        var isDataEmpty = this.model.isDataEmpty();
+        var isDataLoading = Tools.getProperty(this.model.getOptions(), "data", "loading");
+        if (isDataEmpty) {
+            this.renderSkeleton(isDataLoading);
+        }
+        else if (!isDataEmpty && isDataLoading) {
+            throw new Error("Something went wrong. You can't provided non-empty data and data loading together.");
+        }
+        else {
+            this.removeSkeleton();
+        }
+    };
+    Skeleton.prototype.renderSkeleton = function (showShimmerEffect) {
+        if (this.configs.skeleton === Skeletons.GRID) {
+            this.renderGridSkeleton(showShimmerEffect);
+        }
+        else if (this.configs.skeleton === Skeletons.VERT_OR_HORIZ) {
+            this.renderVertOrHorizSkeleton(showShimmerEffect);
+        }
+        else if (this.configs.skeleton === Skeletons.PIE) {
+            this.renderPieSkeleton(showShimmerEffect);
+        }
+        else if (this.configs.skeleton === Skeletons.DONUT) {
+            this.renderDonutSkeleton(showShimmerEffect);
+        }
+        else {
+            throw new Error("\"" + this.configs.skeleton + "\" is not a valid Skeleton type.");
+        }
+    };
+    Skeleton.prototype.renderGridSkeleton = function (showShimmerEffect) {
+        this.setScales();
+        this.drawBackdrop(showShimmerEffect);
+        this.drawXGrid(showShimmerEffect);
+        this.drawYGrid(showShimmerEffect);
+        if (showShimmerEffect) {
+            this.setShimmerEffect("shimmer-lines");
+        }
+    };
+    Skeleton.prototype.renderVertOrHorizSkeleton = function (showShimmerEffect) {
+        var orientation = this.services.cartesianScales.getOrientation();
+        this.setScales();
+        this.drawBackdrop(showShimmerEffect);
+        if (orientation === CartesianOrientations.VERTICAL) {
+            this.drawYGrid(showShimmerEffect);
+        }
+        if (orientation === CartesianOrientations.HORIZONTAL) {
+            this.drawXGrid(showShimmerEffect);
+        }
+        this.setShimmerEffect("shimmer-lines");
+    };
+    Skeleton.prototype.renderPieSkeleton = function (showShimmerEffect) {
+        var outerRadius = this.computeOuterRadius();
+        var innerRadius = 0;
+        this.drawRing(outerRadius, innerRadius, showShimmerEffect);
+        if (showShimmerEffect) {
+            this.setShimmerEffect("shimmer-areas");
+        }
+    };
+    Skeleton.prototype.renderDonutSkeleton = function (showShimmerEffect) {
+        var outerRadius = this.computeOuterRadius();
+        var innerRadius = this.computeInnerRadius();
+        this.drawRing(outerRadius, innerRadius, showShimmerEffect);
+        if (showShimmerEffect) {
+            this.setShimmerEffect("shimmer-areas");
+        }
+    };
+    Skeleton.prototype.setScales = function () {
+        var xRange = this.services.cartesianScales.getMainXScale().range();
+        var yRange = this.services.cartesianScales.getMainYScale().range();
+        this.xScale = scaleLinear().domain([0, 1]).range(xRange);
+        this.yScale = scaleLinear().domain([0, 1]).range(yRange);
+    };
+    Skeleton.prototype.drawBackdrop = function (showShimmerEffect) {
+        var svg = this.parent;
+        var parent = svg.node().parentNode;
+        var _a = DOMUtils.getSVGElementSize(parent, { useAttrs: true }), width = _a.width, height = _a.height;
+        this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-skeleton.DAII").attr("width", width).attr("height", height);
+        var backdropRect = DOMUtils.appendOrSelect(this.backdrop, "rect.chart-skeleton-backdrop");
+        backdropRect
+            .attr("width", "100%")
+            .attr("height", "100%");
+        var _b = this.xScale.range(), xScaleStart = _b[0], xScaleEnd = _b[1];
+        var _c = this.yScale.range(), yScaleEnd = _c[0], yScaleStart = _c[1];
+        this.backdrop
+            .merge(backdropRect)
+            .attr("x", xScaleStart)
+            .attr("y", yScaleStart);
+        backdropRect
+            .classed("shimmer-effect-lines", showShimmerEffect)
+            .classed("empty-state-lines", !showShimmerEffect);
+    };
+    Skeleton.prototype.drawXGrid = function (showShimmerEffect) {
+        var height = this.backdrop.attr("height");
+        var width = this.backdrop.attr("width");
+        var ticksNumber = Tools.getProperty(this.model.getOptions(), "grid", "x", "numberOfTicks");
+        var ticksValues = this.xScale.ticks(ticksNumber).map(function (d) { return d * width; });
+        var xGridG = DOMUtils.appendOrSelect(this.backdrop, "g.x.skeleton");
+        var update = xGridG.selectAll("line").data(ticksValues);
+        update.enter()
+            .append("line")
+            .merge(update)
+            .attr("x1", function (d) { return d; })
+            .attr("x2", function (d) { return d; })
+            .attr("y1", 0)
+            .attr("y2", height);
+        xGridG.selectAll("line")
+            .classed("shimmer-effect-lines", showShimmerEffect)
+            .classed("empty-state-lines", !showShimmerEffect);
+    };
+    Skeleton.prototype.drawYGrid = function (showShimmerEffect) {
+        var height = this.backdrop.attr("height");
+        var width = this.backdrop.attr("width");
+        var ticksNumber = Tools.getProperty(this.model.getOptions(), "grid", "y", "numberOfTicks");
+        var ticksValues = this.xScale.ticks(ticksNumber).map(function (d) { return d * height; });
+        var yGridG = DOMUtils.appendOrSelect(this.backdrop, "g.y.skeleton");
+        var update = yGridG.selectAll("line").data(ticksValues);
+        update.enter()
+            .append("line")
+            .merge(update)
+            .attr("x1", 0)
+            .attr("x2", width)
+            .attr("y1", function (d) { return d; })
+            .attr("y2", function (d) { return d; });
+        yGridG.selectAll("line")
+            .classed("shimmer-effect-lines", showShimmerEffect)
+            .classed("empty-state-lines", !showShimmerEffect);
+    };
+    Skeleton.prototype.drawRing = function (outerRadius, innerRadius, shimmer) {
+        if (shimmer === void 0) { shimmer = true; }
+        var svg = this.parent;
+        var _a = DOMUtils.getSVGElementSize(svg.node().parentNode, { useAttrs: true }), width = _a.width, height = _a.height;
+        var container = DOMUtils.appendOrSelect(svg, "svg.chart-skeleton")
+            .attr("width", width)
+            .attr("height", height);
+        var options = this.model.getOptions().pie;
+        var skeletonAreaContainer = DOMUtils.appendOrSelect(container, "rect.chart-skeleton-area-container")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", "none");
+        var arcPathGenerator = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius)
+            .startAngle(0)
+            .endAngle(Math.PI * 2);
+        // centering circle inside the container
+        var tcx = outerRadius + Math.abs(options.radiusOffset);
+        var tcy = outerRadius + (Math.min(width, height) - outerRadius * 2) / 2;
+        DOMUtils.appendOrSelect(container, "path")
+            .attr("class", "skeleton-area-shape")
+            .attr("transform", "translate(" + tcx + ", " + tcy + ")")
+            .attr("d", arcPathGenerator)
+            .classed("shimmer-effect-areas", shimmer)
+            .classed("empty-state-areas", !shimmer);
+    };
+    // same logic in pie
+    Skeleton.prototype.computeOuterRadius = function () {
+        var options = this.model.getOptions();
+        var _a = DOMUtils.getSVGElementSize(this.parent.node().parentNode, { useAttrs: true }), width = _a.width, height = _a.height;
+        var radius = Math.min(width, height) / 2;
+        return radius + options.pie.radiusOffset;
+    };
+    // same logic in donut
+    Skeleton.prototype.computeInnerRadius = function () {
+        return this.computeOuterRadius() * (3 / 4);
+    };
+    Skeleton.prototype.setShimmerEffect = function (gradientId) {
+        var animationDuration = 2000; // ms
+        var delay = 1000; // ms
+        var shimmerWidth = 0.2;
+        var stopBgShimmerClass = "stop-bg-shimmer";
+        var stopShimmerClass = "stop-shimmer";
+        var container = this.parent.select(".chart-skeleton");
+        var width = DOMUtils.getSVGElementSize(this.parent, { useAttrs: true }).width;
+        var startPoint = 0;
+        var endPoint = width;
+        // append the defs as first child of container
+        var defs = DOMUtils.appendOrSelect(container, "defs").lower();
+        var linearGradient = DOMUtils.appendOrSelect(defs, "linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", startPoint - 3 * shimmerWidth * width)
+            .attr("x2", endPoint)
+            .attr("y1", 0)
+            .attr("y2", 0)
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("gradientTransform", "translate(0, 0)");
+        var stops = "\n\t\t\t<stop class=\"" + stopBgShimmerClass + "\" offset=\"" + startPoint + "\"></stop>\n\t\t\t<stop class=\"" + stopShimmerClass + "\" offset=\"" + (startPoint + shimmerWidth) + "\"></stop>\n\t\t\t<stop class=\"" + stopBgShimmerClass + "\" offset=\"" + (startPoint + 2 * shimmerWidth) + "\"></stop>\n\t\t";
+        linearGradient.html(stops);
+        repeat();
+        function repeat() {
+            linearGradient
+                .attr("gradientTransform", "translate(" + (startPoint - 3 * shimmerWidth * width) + ", 0)")
+                .transition()
+                .duration(animationDuration)
+                .delay(delay)
+                .ease(easeLinear)
+                .attr("gradientTransform", "translate(" + (endPoint + 3 * shimmerWidth * width) + ", 0)")
+                .on("end", repeat);
+        }
+    };
+    Skeleton.prototype.removeSkeleton = function () {
+        var container = this.parent.select(".chart-skeleton");
+        container.remove();
+    };
+    return Skeleton;
+}(Component));
+export { Skeleton };
+//# sourceMappingURL=../../../src/components/graphs/skeleton.js.map

package/components/graphs/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["skeleton.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { DOMUtils } from \"../../services\";\nimport { Tools } from \"../../tools\";\nimport { Skeletons, CartesianOrientations } from \"../../interfaces/enums\";\n\n// D3 Imports\nimport { scaleLinear } from \"d3-scale\";\nimport { easeLinear } from \"d3-ease\";\nimport { arc } from \"d3-shape\";\n\nexport class Skeleton extends Component {\n\ttype = \"skeleton\";\n\txScale: any;\n\tyScale: any;\n\tbackdrop: any;\n\n\trender() {\n\t\tconst svg = this.parent;\n\t\tconst parent = svg.node().parentNode;\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(parent, { useAttrs: true });\n\t\tsvg.attr(\"width\", width).attr(\"height\", height);\n\n\t\tconst isDataEmpty = this.model.isDataEmpty();\n\t\tconst isDataLoading = Tools.getProperty(this.model.getOptions(), \"data\", \"loading\");\n\n\t\tif (isDataEmpty) {\n\t\t\tthis.renderSkeleton(isDataLoading);\n\t\t} else if (!isDataEmpty && isDataLoading) {\n\t\t\tthrow new Error(`Something went wrong. You can't provided non-empty data and data loading together.`);\n\t\t} else {\n\t\t\tthis.removeSkeleton();\n\t\t}\n\t}\n\n\trenderSkeleton(showShimmerEffect: boolean) {\n\t\tif (this.configs.skeleton === Skeletons.GRID) {\n\t\t\tthis.renderGridSkeleton(showShimmerEffect);\n\t\t} else if (this.configs.skeleton === Skeletons.VERT_OR_HORIZ) {\n\t\t\tthis.renderVertOrHorizSkeleton(showShimmerEffect);\n\t\t} else if (this.configs.skeleton === Skeletons.PIE) {\n\t\t\tthis.renderPieSkeleton(showShimmerEffect);\n\t\t} else if (this.configs.skeleton === Skeletons.DONUT) {\n\t\t\tthis.renderDonutSkeleton(showShimmerEffect);\n\t\t} else {\n\t\t\tthrow new Error(`\"${this.configs.skeleton}\" is not a valid Skeleton type.`);\n\t\t}\n\t}\n\n\trenderGridSkeleton(showShimmerEffect: boolean) {\n\t\tthis.setScales();\n\t\tthis.drawBackdrop(showShimmerEffect);\n\t\tthis.drawXGrid(showShimmerEffect);\n\t\tthis.drawYGrid(showShimmerEffect);\n\t\tif (showShimmerEffect) {\n\t\t\tthis.setShimmerEffect(\"shimmer-lines\");\n\t\t}\n\t}\n\n\trenderVertOrHorizSkeleton(showShimmerEffect: boolean) {\n\t\tconst orientation = this.services.cartesianScales.getOrientation();\n\t\tthis.setScales();\n\t\tthis.drawBackdrop(showShimmerEffect);\n\t\tif (orientation === CartesianOrientations.VERTICAL) {\n\t\t\tthis.drawYGrid(showShimmerEffect);\n\t\t}\n\t\tif (orientation === CartesianOrientations.HORIZONTAL) {\n\t\t\tthis.drawXGrid(showShimmerEffect);\n\t\t}\n\t\tthis.setShimmerEffect(\"shimmer-lines\");\n\t}\n\n\trenderPieSkeleton(showShimmerEffect: boolean) {\n\t\tconst outerRadius = this.computeOuterRadius();\n\t\tconst innerRadius = 0;\n\t\tthis.drawRing(outerRadius, innerRadius, showShimmerEffect);\n\t\tif (showShimmerEffect) {\n\t\t\tthis.setShimmerEffect(\"shimmer-areas\");\n\t\t}\n\t}\n\n\trenderDonutSkeleton(showShimmerEffect: boolean) {\n\t\tconst outerRadius = this.computeOuterRadius();\n\t\tconst innerRadius = this.computeInnerRadius();\n\t\tthis.drawRing(outerRadius, innerRadius, showShimmerEffect);\n\t\tif (showShimmerEffect) {\n\t\t\tthis.setShimmerEffect(\"shimmer-areas\");\n\t\t}\n\t}\n\n\tsetScales() {\n\t\tconst xRange = this.services.cartesianScales.getMainXScale().range();\n\t\tconst yRange = this.services.cartesianScales.getMainYScale().range();\n\t\tthis.xScale = scaleLinear().domain([0, 1]).range(xRange);\n\t\tthis.yScale = scaleLinear().domain([0, 1]).range(yRange);\n\t}\n\n\tdrawBackdrop(showShimmerEffect: boolean) {\n\t\tconst svg = this.parent;\n\t\tconst parent = svg.node().parentNode;\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(parent, { useAttrs: true });\n\n\t\tthis.backdrop = DOMUtils.appendOrSelect(svg, \"svg.chart-skeleton.DAII\").attr(\"width\", width).attr(\"height\", height);\n\n\t\tconst backdropRect = DOMUtils.appendOrSelect(this.backdrop, \"rect.chart-skeleton-backdrop\");\n\t\tbackdropRect\n\t\t\t.attr(\"width\", \"100%\")\n\t\t\t.attr(\"height\", \"100%\");\n\n\t\tconst [xScaleStart, xScaleEnd] = this.xScale.range();\n\t\tconst [yScaleEnd, yScaleStart] = this.yScale.range();\n\n\t\tthis.backdrop\n\t\t\t.merge(backdropRect)\n\t\t\t.attr(\"x\", xScaleStart)\n\t\t\t.attr(\"y\", yScaleStart);\n\n\t\tbackdropRect\n\t\t\t.classed(\"shimmer-effect-lines\", showShimmerEffect)\n\t\t\t.classed(\"empty-state-lines\", !showShimmerEffect);\n\t}\n\n\tdrawXGrid(showShimmerEffect: boolean) {\n\t\tconst height = this.backdrop.attr(\"height\");\n\t\tconst width = this.backdrop.attr(\"width\");\n\t\tconst ticksNumber = Tools.getProperty(this.model.getOptions(), \"grid\", \"x\", \"numberOfTicks\");\n\t\tconst ticksValues = this.xScale.ticks(ticksNumber).map(d => d * width);\n\n\t\tconst xGridG = DOMUtils.appendOrSelect(this.backdrop, \"g.x.skeleton\");\n\t\tconst update = xGridG.selectAll(\"line\").data(ticksValues);\n\t\tupdate.enter()\n\t\t\t.append(\"line\")\n\t\t\t.merge(update)\n\t\t\t.attr(\"x1\", d => d)\n\t\t\t.attr(\"x2\", d => d)\n\t\t\t.attr(\"y1\", 0)\n\t\t\t.attr(\"y2\", height);\n\n\t\txGridG.selectAll(\"line\")\n\t\t\t.classed(\"shimmer-effect-lines\", showShimmerEffect)\n\t\t\t.classed(\"empty-state-lines\", !showShimmerEffect);\n\t}\n\n\tdrawYGrid(showShimmerEffect: boolean) {\n\t\tconst height = this.backdrop.attr(\"height\");\n\t\tconst width = this.backdrop.attr(\"width\");\n\t\tconst ticksNumber = Tools.getProperty(this.model.getOptions(), \"grid\", \"y\", \"numberOfTicks\");\n\t\tconst ticksValues = this.xScale.ticks(ticksNumber).map(d => d * height);\n\n\t\tconst yGridG = DOMUtils.appendOrSelect(this.backdrop, \"g.y.skeleton\");\n\t\tconst update = yGridG.selectAll(\"line\").data(ticksValues);\n\t\tupdate.enter()\n\t\t\t.append(\"line\")\n\t\t\t.merge(update)\n\t\t\t.attr(\"x1\", 0)\n\t\t\t.attr(\"x2\", width)\n\t\t\t.attr(\"y1\", d => d)\n\t\t\t.attr(\"y2\", d => d);\n\n\t\tyGridG.selectAll(\"line\")\n\t\t\t.classed(\"shimmer-effect-lines\", showShimmerEffect)\n\t\t\t.classed(\"empty-state-lines\", !showShimmerEffect);\n\t}\n\n\tdrawRing(outerRadius: number, innerRadius: number, shimmer = true) {\n\t\tconst svg = this.parent;\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(svg.node().parentNode, { useAttrs: true });\n\n\t\tconst container = DOMUtils.appendOrSelect(svg, \"svg.chart-skeleton\")\n\t\t\t.attr(\"width\", width)\n\t\t\t.attr(\"height\", height);\n\t\tconst options = this.model.getOptions().pie;\n\n\t\tconst skeletonAreaContainer = DOMUtils.appendOrSelect(container, \"rect.chart-skeleton-area-container\")\n\t\t\t.attr(\"width\", width)\n\t\t\t.attr(\"height\", height)\n\t\t\t.attr(\"fill\", \"none\");\n\n\t\tconst arcPathGenerator = arc()\n\t\t\t.innerRadius(innerRadius)\n\t\t\t.outerRadius(outerRadius)\n\t\t\t.startAngle(0)\n\t\t\t.endAngle(Math.PI * 2);\n\n\t\t// centering circle inside the container\n\t\tconst tcx = outerRadius + Math.abs(options.radiusOffset);\n\t\tconst tcy = outerRadius + (Math.min(width, height) - outerRadius * 2) / 2;\n\n\t\tDOMUtils.appendOrSelect(container, \"path\")\n\t\t\t.attr(\"class\", \"skeleton-area-shape\")\n\t\t\t.attr(\"transform\", `translate(${tcx}, ${tcy})`)\n\t\t\t.attr(\"d\", arcPathGenerator)\n\t\t\t.classed(\"shimmer-effect-areas\", shimmer)\n\t\t\t.classed(\"empty-state-areas\", !shimmer);\n\t}\n\n\t// same logic in pie\n\tcomputeOuterRadius() {\n\t\tconst options = this.model.getOptions();\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(this.parent.node().parentNode, { useAttrs: true });\n\t\tconst radius = Math.min(width, height) / 2;\n\t\treturn radius + options.pie.radiusOffset;\n\t}\n\n\t// same logic in donut\n\tcomputeInnerRadius() {\n\t\treturn this.computeOuterRadius() * (3 / 4);\n\t}\n\n\tsetShimmerEffect(gradientId: string) {\n\t\tconst animationDuration = 2000; // ms\n\t\tconst delay = 1000; // ms\n\t\tconst shimmerWidth = 0.2;\n\t\tconst stopBgShimmerClass = \"stop-bg-shimmer\";\n\t\tconst stopShimmerClass = \"stop-shimmer\";\n\t\tconst container = this.parent.select(\".chart-skeleton\");\n\t\tconst { width } = DOMUtils.getSVGElementSize(this.parent, { useAttrs: true });\n\t\tconst startPoint = 0;\n\t\tconst endPoint = width;\n\n\t\t// append the defs as first child of container\n\t\tconst defs = DOMUtils.appendOrSelect(container, \"defs\").lower();\n\t\tconst linearGradient = DOMUtils.appendOrSelect(defs, \"linearGradient\")\n\t\t\t.attr(\"id\", gradientId)\n\t\t\t.attr(\"x1\", startPoint - 3 * shimmerWidth * width)\n\t\t\t.attr(\"x2\", endPoint)\n\t\t\t.attr(\"y1\", 0)\n\t\t\t.attr(\"y2\", 0)\n\t\t\t.attr(\"gradientUnits\", \"userSpaceOnUse\")\n\t\t\t.attr(\"gradientTransform\", `translate(0, 0)`);\n\t\tconst stops = `\n\t\t\t<stop class=\"${stopBgShimmerClass}\" offset=\"${startPoint}\"></stop>\n\t\t\t<stop class=\"${stopShimmerClass}\" offset=\"${startPoint + shimmerWidth}\"></stop>\n\t\t\t<stop class=\"${stopBgShimmerClass}\" offset=\"${startPoint + 2 * shimmerWidth}\"></stop>\n\t\t`;\n\t\tlinearGradient.html(stops);\n\n\t\trepeat();\n\t\tfunction repeat() {\n\t\t\tlinearGradient\n\t\t\t\t.attr(\"gradientTransform\", `translate(${startPoint - 3 * shimmerWidth * width}, 0)`)\n\t\t\t\t.transition()\n\t\t\t\t.duration(animationDuration)\n\t\t\t\t.delay(delay)\n\t\t\t\t.ease(easeLinear)\n\t\t\t\t.attr(\"gradientTransform\", `translate(${endPoint + 3 * shimmerWidth * width}, 0)`)\n\t\t\t\t.on(\"end\", repeat);\n\t\t}\n\t}\n\n\tremoveSkeleton() {\n\t\tconst container = this.parent.select(\".chart-skeleton\");\n\t\tcontainer.remove();\n\t}\n}\n"]}

package/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./component";
 export * from "./essentials/legend";
+export * from "./essentials/threshold";
 export * from "./essentials/title";
 export * from "./essentials/tooltip";
 export * from "./essentials/tooltip-bar";
@@ -14,6 +15,7 @@ export * from "./graphs/line";
 export * from "./graphs/scatter";
 export * from "./graphs/pie";
 export * from "./graphs/donut";
+export * from "./graphs/skeleton";
 export * from "./layout/spacer";
 export * from "./layout/layout";
 export * from "./axes/two-dimensional-axes";

package/components/index.js

@@ -1,6 +1,7 @@
 export * from "./component";
 // ESSENTIALS
 export * from "./essentials/legend";
+export * from "./essentials/threshold";
 export * from "./essentials/title";
 export * from "./essentials/tooltip";
 export * from "./essentials/tooltip-bar";
@@ -16,6 +17,7 @@ export * from "./graphs/line";
 export * from "./graphs/scatter";
 export * from "./graphs/pie";
 export * from "./graphs/donut";
+export * from "./graphs/skeleton";
 // Layout
 export * from "./layout/spacer";
 export * from "./layout/layout";