withDerivedData = Component => props => {
  const {data, valueRange} = props;
  if (!data || data.length === 0) {
    return null;
  }
  // if data comes with valid, precomputed meta data, use them directly
  const {day, hour, distribution = []} = data[0];
  if ([distribution.concat([day, hour])].every(Number.isFinite)) {
    return <Component {...props} />;
  }
  // else, derive the meta data based on hour and value
  const derivedData = hourlyValueDistributionSelector(props);
  // if users predefines the valueRange, use it with the derived data
  if (valueRange && valueRange.every(Number.isFinite)) {
    return <Component {...props} data={derivedData} />;
  }
  // else, use both derived data and derived value range
  const derivedValueRange = valueRangeSelector(props);
  return (
    <Component {...props} data={derivedData} valueRange={derivedValueRange} />
  );
}
TODO, fold the precompute checking logic into the selectors
An HOC to derive data from the raw hour, value format to a consumable format for rendering
@param {object} Component - component with props include {data, valueRange(optional)}
@return the component with derived data and value range injected as new props