If min / max are the same, hide histo + legend, show value (#1554)

* hide legend, histo single value

* display block

* extra check for domain

* Update client/src/components/continuousLegend/index.js

Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>

* readability on variables, use clipped ranges

Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
This commit is contained in:
Colin Megill
2020-06-11 16:27:02 -04:00
committed by GitHub
co-authored by Severiano Badajoz
parent d6c606b72e
commit 77ffa0712e
2 changed files with 34 additions and 6 deletions
@@ -107,6 +107,9 @@ const continuous = (selectorId, colorscale, colorAccessor) => {
class ContinuousLegend extends React.Component {
componentDidUpdate(prevProps) {
const { colorAccessor, colorScale } = this.props;
const range = colorScale?.range;
const [domainMin, domainMax] = colorScale?.domain?.() ?? [0, 0];
if (
prevProps.colorAccessor !== colorAccessor ||
prevProps.colorScale !== colorScale
@@ -115,9 +118,9 @@ class ContinuousLegend extends React.Component {
d3.select("#continuous_legend").selectAll("*").remove();
}
if (colorAccessor && colorScale && colorScale.range) {
if (colorAccessor && colorScale && range && domainMin < domainMax) {
/* fragile! continuous range is 0 to 1, not [#fa4b2c, ...], make this a flag? */
if (colorScale.range()[0][0] !== "#") {
if (range()[0][0] !== "#") {
continuous(
"#continuous_legend",
d3.scaleSequential(interpolateCool).domain(colorScale.domain()),
@@ -128,7 +131,15 @@ class ContinuousLegend extends React.Component {
}
render() {
const { colorAccessor } = this.props;
const { colorAccessor, colorScale } = this.props;
if (
colorScale?.domain &&
colorScale.domain()[1] === colorScale.domain()[0]
) {
/* it's a single value, not a distribution, min max are the same */
return null;
}
return (
<div
id="continuous_legend"