Skip to content

Commit

Permalink
[FE-18120] Disable color by dim with 1 dimension (#683)
Browse files Browse the repository at this point in the history 
* Use new mapping prop to drive domain/range updates

* Hide new codepaths when we have >1 dims

* Add helper func for dimension length

* Round robin through colors if multi-dimensional

* Push build files

---------

Co-authored-by: Chris Matzenbach <[email protected]>
  • Loading branch information
@cmatzenbach
cmatzenbach and Chris Matzenbach authored Dec 3, 2024
1 parent 39df148 commit c928706
Show file tree
Hide file tree
Showing 5 changed files with 144 additions and 127 deletions.
129 changes: 69 additions & 60 deletions dist/charting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10049,6 +10049,10 @@ function baseMixin(_chart) {
var measure = _chart.group().reduce();
return measure && measure[0] ? measure[0].measureName : null;
};
_chart.getDimensionLength = function () {
var _chart$dimension$valu;
return (_chart$dimension$valu = _chart.dimension().value().length) !== null && _chart$dimension$valu !== void 0 ? _chart$dimension$valu : 0;
};
_chart = Object(__WEBPACK_IMPORTED_MODULE_4__mixins_legend_mixin__["a" /* default */])(Object(__WEBPACK_IMPORTED_MODULE_8__mixins_filter_mixin__["a" /* default */])(Object(__WEBPACK_IMPORTED_MODULE_9__mixins_label_mixin__["a" /* default */])(Object(__WEBPACK_IMPORTED_MODULE_12__mixins_multiple_key_label_mixin__["a" /* default */])(Object(__WEBPACK_IMPORTED_MODULE_13__mixins_spinner_mixin__["a" /* default */])(Object(__WEBPACK_IMPORTED_MODULE_3__mixins_async_mixin__["a" /* default */])(_chart))))));
return _chart;
}
Expand Down Expand Up @@ -12052,7 +12056,7 @@ function colorMixin(_chart) {
var range = _chart.colors().range() || _customRange;
var middleColor = range[Math.floor(range.length / 2)];
var value = _colorAccessor.call(this, data, index);
var color = typeof value === "string" ? _chart.determineColorByValue(value, range) : _colors(_colorAccessor.call(this, data, index)) || middleColor;
var color = typeof value === "string" && _chart.getDimensionLength() === 1 ? _chart.determineColorByValue(value, range) : _colors(_colorAccessor.call(this, data, index)) || middleColor;
var customColor = null;
if (((_chart$customRange = _chart.customRange()) === null || _chart$customRange === void 0 ? void 0 : _chart$customRange.length) > 0) {
var customDomain = _chart.customDomain();
Expand Down Expand Up @@ -81716,6 +81720,7 @@ function binningMixin(chart) {
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_utils__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__core_core__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_color_helpers__ = __webpack_require__(218);
function _readOnlyError(name) { throw new TypeError("\"" + name + "\" is read-only"); }



Expand Down Expand Up @@ -81981,7 +81986,6 @@ function bubbleChart(parent, chartGroup) {
return _chart;
};
_chart.plotData = function () {
var _chart$customDomain, _chart$customRange;
if (_elasticRadius) {
_chart.r().domain([_chart.rMin(), _chart.rMax()]);
}
Expand Down Expand Up @@ -82010,31 +82014,34 @@ function bubbleChart(parent, chartGroup) {
return __WEBPACK_IMPORTED_MODULE_0_d3___default.a.descending(radiusAccessor(a), radiusAccessor(b));
});
}
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;
});
var newRange = data.map(function (d, i) {
return _chart.getColor(d, i);
});
_chart.customDomain(newDomain);
_chart.customRange(newRange);
} else if (domain.length > 0 && range.length === 0) {
// if we have a domain but no range, palette was changed
var _newRange = data.map(function (d, i) {
return _chart.getColor(d, i);
});
_chart.customRange(_newRange);
} else if (domain.length > 0) {
Object(__WEBPACK_IMPORTED_MODULE_6__utils_color_helpers__["d" /* maybeUpdateDomainRange */])(_chart, data, function (d) {
return d.key0;
}, domain, range, true);
if (_chart.getDimensionLength() === 1) {
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) {
_chart.colorMappingDomain(), _readOnlyError("domain");
_chart.colorMappingRange(), _readOnlyError("range");
}
if (domain.length === 0 && range.length === 0) {
var newDomain = data.map(function (d) {
return d.key0;
});
var newRange = data.map(function (d, i) {
return _chart.getColor(d, i);
});
_chart.customDomain(newDomain);
_chart.customRange(newRange);
} else if (domain.length > 0 && range.length === 0) {
// if we have a domain but no range, palette was changed
var _newRange = data.map(function (d, i) {
return _chart.getColor(d, i);
});
_chart.customRange(_newRange);
} else if (domain.length > 0) {
Object(__WEBPACK_IMPORTED_MODULE_6__utils_color_helpers__["d" /* maybeUpdateDomainRange */])(_chart, data, function (d) {
return d.key0;
}, domain, range, true);
}
}
var bubbleG = _chart.chartBodyG().selectAll("g." + _chart.BUBBLE_NODE_CLASS)

Expand Down Expand Up @@ -88337,39 +88344,41 @@ function pieChart(parent, chartGroup) {
});
}
function updateElements(pieData, arc) {
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) {
var newDomain = pieData.map(function (d) {
return d.data.key0;
});
var newRange = pieData.map(function (d, i) {
return d.data.key0 === __WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["b" /* ALL_OTHERS_LABEL */] ? __WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["a" /* ALL_OTHERS_COLOR */] : _chart.getColor(d.data, i);
});
_chart.customDomain(newDomain);
_chart.customRange(newRange);
} else if (domain.length > 0 && range.length === 0) {
// if we have a domain but no range, palette was changed
var _newRange = pieData.map(function (d, i) {
if ([__WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["b" /* ALL_OTHERS_LABEL */]].includes(d.data.key0)) {
return __WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["a" /* ALL_OTHERS_COLOR */];
} else {
return _chart.getColor(d.data, i);
}
});
_chart.customRange(_newRange);
} else if (domain.length > 0) {
Object(__WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["d" /* maybeUpdateDomainRange */])(_chart, pieData, function (d) {
return d.data.key0;
}, domain, range, true);
Object(__WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["c" /* maybeUpdateAllOthers */])(_chart, pieData, _chart.customDomain(), _chart.customRange());
if (_chart.getDimensionLength() === 1) {
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) {
var newDomain = pieData.map(function (d) {
return d.data.key0;
});
var newRange = pieData.map(function (d, i) {
return d.data.key0 === __WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["b" /* ALL_OTHERS_LABEL */] ? __WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["a" /* ALL_OTHERS_COLOR */] : _chart.getColor(d.data, i);
});
_chart.customDomain(newDomain);
_chart.customRange(newRange);
} else if (domain.length > 0 && range.length === 0) {
// if we have a domain but no range, palette was changed
var _newRange = pieData.map(function (d, i) {
if ([__WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["b" /* ALL_OTHERS_LABEL */]].includes(d.data.key0)) {
return __WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["a" /* ALL_OTHERS_COLOR */];
} else {
return _chart.getColor(d.data, i);
}
});
_chart.customRange(_newRange);
} else if (domain.length > 0) {
Object(__WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["d" /* maybeUpdateDomainRange */])(_chart, pieData, function (d) {
return d.data.key0;
}, domain, range, true);
Object(__WEBPACK_IMPORTED_MODULE_9__utils_color_helpers__["c" /* maybeUpdateAllOthers */])(_chart, pieData, _chart.customDomain(), _chart.customRange());
}
}
updateSlicePaths(pieData, arc);
updateLabels(pieData, arc);
Expand Down
44 changes: 23 additions & 21 deletions src/charts/bubble-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,28 +466,30 @@ export default function bubbleChart(parent, chartGroup) {
data.sort((a, b) => d3.descending(radiusAccessor(a), radiusAccessor(b)))
}

let domain = _chart.customDomain() ?? []
let range = _chart.customRange() ?? []

if (
_chart.colorMappingDomain.length > 0 &&
_chart.colorMappingRange.length > 0
) {
domain = _chart.colorMappingDomain()
range = _chart.colorMappingRange()
}
if (_chart.getDimensionLength() === 1) {
const domain = _chart.customDomain() ?? []
const 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)
const newRange = data.map((d, i) => _chart.getColor(d, i))
_chart.customDomain(newDomain)
_chart.customRange(newRange)
} else if (domain.length > 0 && range.length === 0) {
// if we have a domain but no range, palette was changed
const newRange = data.map((d, i) => _chart.getColor(d, i))
_chart.customRange(newRange)
} else if (domain.length > 0) {
maybeUpdateDomainRange(_chart, data, d => d.key0, domain, range, true)
if (domain.length === 0 && range.length === 0) {
const newDomain = data.map(d => d.key0)
const newRange = data.map((d, i) => _chart.getColor(d, i))
_chart.customDomain(newDomain)
_chart.customRange(newRange)
} else if (domain.length > 0 && range.length === 0) {
// if we have a domain but no range, palette was changed
const newRange = data.map((d, i) => _chart.getColor(d, i))
_chart.customRange(newRange)
} else if (domain.length > 0) {
maybeUpdateDomainRange(_chart, data, d => d.key0, domain, range, true)
}
}

const bubbleG = _chart
Expand Down
92 changes: 47 additions & 45 deletions src/charts/pie-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,52 +463,54 @@ export default function pieChart(parent, chartGroup) {
}

function updateElements(pieData, arc) {
let domain = _chart.customDomain() ?? []
let range = _chart.customRange() ?? []

if (
_chart.colorMappingDomain().length > 0 &&
_chart.colorMappingRange().length > 0
) {
domain = _chart.colorMappingDomain()
range = _chart.colorMappingRange()
}
if (_chart.getDimensionLength() === 1) {
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) {
const newDomain = pieData.map(d => d.data.key0)
const newRange = pieData.map((d, i) =>
d.data.key0 === ALL_OTHERS_LABEL
? ALL_OTHERS_COLOR
: _chart.getColor(d.data, i)
)
_chart.customDomain(newDomain)
_chart.customRange(newRange)
} else if (domain.length > 0 && range.length === 0) {
// if we have a domain but no range, palette was changed
const newRange = pieData.map((d, i) => {
if ([ALL_OTHERS_LABEL].includes(d.data.key0)) {
return ALL_OTHERS_COLOR
} else {
return _chart.getColor(d.data, i)
}
})
_chart.customRange(newRange)
} else if (domain.length > 0) {
maybeUpdateDomainRange(
_chart,
pieData,
d => d.data.key0,
domain,
range,
true
)
maybeUpdateAllOthers(
_chart,
pieData,
_chart.customDomain(),
_chart.customRange()
)
// if custom domain is empty, generate it from the pieData
if (domain.length === 0 && range.length === 0) {
const newDomain = pieData.map(d => d.data.key0)
const newRange = pieData.map((d, i) =>
d.data.key0 === ALL_OTHERS_LABEL
? ALL_OTHERS_COLOR
: _chart.getColor(d.data, i)
)
_chart.customDomain(newDomain)
_chart.customRange(newRange)
} else if (domain.length > 0 && range.length === 0) {
// if we have a domain but no range, palette was changed
const newRange = pieData.map((d, i) => {
if ([ALL_OTHERS_LABEL].includes(d.data.key0)) {
return ALL_OTHERS_COLOR
} else {
return _chart.getColor(d.data, i)
}
})
_chart.customRange(newRange)
} else if (domain.length > 0) {
maybeUpdateDomainRange(
_chart,
pieData,
d => d.data.key0,
domain,
range,
true
)
maybeUpdateAllOthers(
_chart,
pieData,
_chart.customDomain(),
_chart.customRange()
)
}
}

updateSlicePaths(pieData, arc)
Expand Down
4 changes: 4 additions & 0 deletions src/mixins/base-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1920,6 +1920,10 @@ export default function baseMixin(_chart) {
return measure && measure[0] ? measure[0].measureName : null
}

_chart.getDimensionLength = function() {
return _chart.dimension().value().length ?? 0
}

_chart = chartLegendMixin(
filterMixin(
labelMixin(multipleKeysLabelMixin(spinnerMixin(asyncMixin(_chart))))
Expand Down
2 changes: 1 addition & 1 deletion src/mixins/color-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export default function colorMixin(_chart) {
const value = _colorAccessor.call(this, data, index)

const color =
typeof value === "string"
typeof value === "string" && _chart.getDimensionLength() === 1
? _chart.determineColorByValue(value, range)
: _colors(_colorAccessor.call(this, data, index)) || middleColor

Expand Down

0 comments on commit c928706

Please sign in to comment.