fix(core): fix Legend and Tooltip group color (#834)

* fix(core): fix Legend and Tooltip group color

Fix Legend and Tooltip Group colors to be based on the getFillColor option as well

fix #828

* fix(core): make color of legend and tooltip group be based on element's fillColor

Reverts 6fb39af and changes the color used in the Legend and Tooltip group item to use the element's
fillColor instead of the strokeColor

fix #828

Co-authored-by: Ícaro Aguiar Perez <[email protected]>

Author: icaro1508

Diff for: packages/core/src/components/essentials/legend.ts

@@ -82,7 +82,7 @@ export class Legend extends Component {
 			.attr("ry", 1)
 			.style("fill", (d) => {
 				return d.status === Configuration.legend.items.status.ACTIVE
-					? this.model.getStrokeColor(d.name)
+					? this.model.getFillColor(d.name)
 					: null;
 			})
 			.classed("active", function (d, i) {
@@ -231,8 +231,8 @@ export class Legend extends Component {
 
 					if (
 						startingPoint +
-							spaceNeededForCheckbox +
-							legendItemTextDimensions.width >
+						spaceNeededForCheckbox +
+						legendItemTextDimensions.width >
 						svgDimensions.width
 					) {
 						lineNumber++;

Diff for: packages/core/src/components/essentials/tooltip-axis.ts

@@ -78,7 +78,7 @@ export class AxisChartsTooltip extends Tooltip {
 				{
 					label: options.tooltip.groupLabel || "Group",
 					value: datum[groupMapsTo],
-					color: this.model.getStrokeColor(datum[groupMapsTo])
+					color: this.model.getFillColor(datum[groupMapsTo])
 				}
 			];
 		} else if (data.length > 1) {
@@ -94,7 +94,7 @@ export class AxisChartsTooltip extends Tooltip {
 					.map((datum) => ({
 						label: datum[groupMapsTo],
 						value: this.valueFormatter(datum[rangeIdentifier]),
-						color: this.model.getStrokeColor(datum[groupMapsTo])
+						color: this.model.getFillColor(datum[groupMapsTo])
 					}))
 					.sort((a, b) => b.value - a.value)
 			);