Stream Graph

// This custom path component is supplied to `Area` as the `pathComponent` prop

const GradientPath = props => {

  const toGrayscale = color => {

    const integerColor = parseInt(color.replace("#", ""), 16);

    const r = (integerColor >> 16) & 255; // eslint-disable-line no-bitwise

    const g = (integerColor >> 8) & 255; // eslint-disable-line no-bitwise

    const b = integerColor & 255; // eslint-disable-line no-bitwise

    const gray = parseInt(0.299 * r + 0.587 * g + 0.114 * b, 10);

    return `rgb(${gray}, ${gray}, ${gray})`;

  };

​

  const { percent, style = {}, ...rest } = props;

​

  const gradientId = `gradient-${Math.random()}`;

  const isBrowser =

    typeof window !== "undefined" && window.__STATIC_GENERATOR !== true;

  const loc = isBrowser ? window.location.href : "";

  const areaStyle = Object.assign({}, style, {

    fill: `url(${loc}#${gradientId})`,

    stroke: "none"

  });

​

  return (

    <g key="area">

      <defs>

        <linearGradient id={gradientId}>

          <stop offset="0%" stopColor={style.fill} />

          <stop offset={`${percent}%`} stopColor={style.fill} />

          <stop offset={`${percent}%`} stopColor={toGrayscale(style.fill)} />

          <stop offset="100%" stopColor={toGrayscale(style.fill)} />

        </linearGradient>

      </defs>

      <path key="area" {...rest} style={areaStyle} />

    </g>

  );

};

​

class App extends React.Component {

  constructor() {

    super();

    this.state = { percent: 62 };

  }

​

  getStreamData() {

    return _.range(7).map(i =>

      _.range(26).map(j => ({

        x: j,

        y: (10 - i) * _.random(10 - i, 20 - 2 * i),

        _y0: -1 * (10 - i) * _.random(10 - i, 20 - 2 * i)

      }))

    );

  }

​

  render() {

    const streamData = this.getStreamData();

​

    const colors = [

      "#006064",

      "#00796B",

      "#8BC34A",

      "#DCE775",

      "#FFF59D",

      "#F4511E",

      "#c33409"

    ];

​

​

    return (

      <VictoryChart

        width={400}

        height={400}

        domain={{

          x: [0, 25],

          y: [-300, 300]

        }}

      >

        <VictoryAxis

          style={{

            axis: { stroke: "none" },

            tickLabels: { fill: "none" },

            grid: { stroke: "gray" }

          }}

          tickValues={[2, 4, 6, 8, 10, 12, 14, 17, 19, 21, 23, 25]}

        />

        <VictoryAxis

          dependentAxis

          style={{ tickLabels: { fontSize: 15 } }}

          crossAxis={false}

        />

​

        {streamData.map((d, i) => (

          <VictoryArea

            key={i}

            interpolation="monotoneX"

            data={d}

            style={{ data: { fill: colors[i] } }}

            dataComponent={

              <Area

                pathComponent={<GradientPath percent={this.state.percent} />}

              />

            }

          />

        ))}

        <VictoryLine

          style={{

            data: {

              stroke: "#c33409",

              strokeWidth: 3

            }

          }}

          data={[

            {

              x: (25 * this.state.percent) / 100,

              y: -300

            },

            {

              x: (25 * this.state.percent) / 100,

              y: 300

            }

          ]}

        />

      </VictoryChart>

    );

  }

}

​

ReactDOM.render(<App/>, mountNode);