import IfActive from "../../../../../application/IfActive/index.js";
import { useMemo } from 'react';
import Line from '../Line';
const LineFade = function LineFade(props) {
  const {
    chartId,
    sizes,
    range,
    scales,
    continue: active,
    end
  } = props;
  const d = useMemo(() => scales.line([end, {
    ...end,
    year: range.y.max
  }]), [scales, end]);
  return <IfActive active={active}>
      <>
        <Line chartId={chartId} lineId="fade-stroke" styles="stroke" size={sizes.stroke} d={d} />
        <Line chartId={chartId} lineId="fade-main" styles="solid" size={sizes.line} d={d} />
        <Line chartId={chartId} lineId="fade-gradient" styles="fade" size={sizes.line + 2} d={d} />

      </>
    </IfActive>;
};
export default LineFade;