[FE-18119] Update D3 colors from mapping domain/range (#682)

* Use new mapping prop to drive domain/range updates * Mapping domain/range override for bubble chart * Bug fix * Push build files --------- Co-authored-by: Chris Matzenbach <[email protected]>
heavyai · Dec 3, 2024 · 39df148 · 39df148
1 parent ab44a52
commit 39df148
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 4 deletions.
diff --git a/dist/charting.js b/dist/charting.js
@@ -11905,6 +11905,8 @@ function colorMixin(_chart) {
   var _defaultAccessor = true;
   var _customDomain = [];
   var _customRange = [];
+  var _colorMappingDomain = [];
+  var _colorMappingRange = [];
   var _colorAccessor = function _colorAccessor(d) {
     return _chart.keyAccessor()(d);
   };
@@ -12079,6 +12081,20 @@ function colorMixin(_chart) {
     _customRange = range;
     return _chart;
   };
+  _chart.colorMappingDomain = function (domain) {
+    if (!arguments.length) {
+      return _colorMappingDomain;
+    }
+    _colorMappingDomain = domain;
+    return _chart;
+  };
+  _chart.colorMappingRange = function (range) {
+    if (!arguments.length) {
+      return _colorMappingRange;
+    }
+    _colorMappingRange = range;
+    return _chart;
+  };
 
   /**
    * Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.
@@ -81996,6 +82012,10 @@ function bubbleChart(parent, chartGroup) {
     }
     var domain = (_chart$customDomain = _chart.customDomain()) !== null && _chart$customDomain !== void 0 ? _chart$customDomain : [];
     var range = (_chart$customRange = _chart.customRange()) !== null && _chart$customRange !== void 0 ? _chart$customRange : [];
+    if (_chart.colorMappingDomain.length > 0 && _chart.colorMappingRange.length > 0) {
+      domain = _chart.colorMappingDomain();
+      range = _chart.colorMappingRange();
+    }
     if (domain.length === 0 && range.length === 0) {
       var newDomain = data.map(function (d) {
         return d.key0;
@@ -88320,6 +88340,10 @@ function pieChart(parent, chartGroup) {
     var _chart$customDomain, _chart$customRange;
     var domain = (_chart$customDomain = _chart.customDomain()) !== null && _chart$customDomain !== void 0 ? _chart$customDomain : [];
     var range = (_chart$customRange = _chart.customRange()) !== null && _chart$customRange !== void 0 ? _chart$customRange : [];
+    if (_chart.colorMappingDomain().length > 0 && _chart.colorMappingRange().length > 0) {
+      domain = _chart.colorMappingDomain();
+      range = _chart.colorMappingRange();
+    }
 
     // if custom domain is empty, generate it from the pieData
     if (domain.length === 0 && range.length === 0) {

diff --git a/src/charts/bubble-chart.js b/src/charts/bubble-chart.js
@@ -466,8 +466,16 @@ export default function bubbleChart(parent, chartGroup) {
       data.sort((a, b) => d3.descending(radiusAccessor(a), radiusAccessor(b)))
     }
 
-    const domain = _chart.customDomain() ?? []
-    const range = _chart.customRange() ?? []
+    let domain = _chart.customDomain() ?? []
+    let range = _chart.customRange() ?? []
+
+    if (
+      _chart.colorMappingDomain.length > 0 &&
+      _chart.colorMappingRange.length > 0
+    ) {
+      domain = _chart.colorMappingDomain()
+      range = _chart.colorMappingRange()
+    }
 
     if (domain.length === 0 && range.length === 0) {
       const newDomain = data.map(d => d.key0)

diff --git a/src/charts/pie-chart.js b/src/charts/pie-chart.js
@@ -463,8 +463,16 @@ export default function pieChart(parent, chartGroup) {
   }
 
   function updateElements(pieData, arc) {
-    const domain = _chart.customDomain() ?? []
-    const range = _chart.customRange() ?? []
+    let domain = _chart.customDomain() ?? []
+    let range = _chart.customRange() ?? []
+
+    if (
+      _chart.colorMappingDomain().length > 0 &&
+      _chart.colorMappingRange().length > 0
+    ) {
+      domain = _chart.colorMappingDomain()
+      range = _chart.colorMappingRange()
+    }
 
     // if custom domain is empty, generate it from the pieData
     if (domain.length === 0 && range.length === 0) {

diff --git a/src/mixins/color-mixin.js b/src/mixins/color-mixin.js
@@ -14,6 +14,8 @@ export default function colorMixin(_chart) {
   let _defaultAccessor = true
   let _customDomain = []
   let _customRange = []
+  let _colorMappingDomain = []
+  let _colorMappingRange = []
 
   let _colorAccessor = function(d) {
     return _chart.keyAccessor()(d)
@@ -210,6 +212,22 @@ export default function colorMixin(_chart) {
     return _chart
   }
 
+  _chart.colorMappingDomain = function(domain) {
+    if (!arguments.length) {
+      return _colorMappingDomain
+    }
+    _colorMappingDomain = domain
+    return _chart
+  }
+
+  _chart.colorMappingRange = function(range) {
+    if (!arguments.length) {
+      return _colorMappingRange
+    }
+    _colorMappingRange = range
+    return _chart
+  }
+
   /**
    * Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.
    * @name colorCalculator