victory#VictoryArea JavaScript Examples

Chart = ({ data, footer, header }) => {
  if (not(data)) {
    return null;
  }
  if (data.every(value => not(value))) {
    return null;
  }
  const parsedData = data && data.length > 2 ? data.slice(0, 2) : data;

  const renderData = parsedData.map((values, index) => {
    const points = values.map((y, x) => ({
      x,
      y
    }));

    return (
      <VictoryArea
        data={points}
        height={80}
        // eslint-disable-next-line
        key={index}
        labels={({ datum }) => (parsedData.length >= 2 ? null : `+ ${numberWithSpaces(datum.y)}`)}
        labelComponent={<VictoryLabel renderInPortal verticalAnchor="middle" textAnchor="end" />}
        style={styles[index]}
      />
    );
  });

  return (
    <Styled.Wrapper>
      <Styled.Header>
        <Small color={Color.lightGray}>{header}</Small>
      </Styled.Header>

      {/* Number of values is provided by props in order to display only the last value on the chart */}
      {/* All data elements should have the same length at the moment (14 days) */}
      <Styled.Chart numberOfValues={data[0].length}>
        <VictoryChart height={80} padding={{ top: 15 }}>
          {renderData}
          <VictoryAxis style={{ axis: { stroke: Color.white } }} />
        </VictoryChart>
      </Styled.Chart>
      <Styled.Footer>
        <Small color={Color.lightGray}>{footer}</Small>
      </Styled.Footer>
    </Styled.Wrapper>
  );
}

function NetWorthGraph({ style, start, end, graphData, compact }) {
  const Chart = compact ? VictoryGroup : VictoryChart;

  return (
    <Container style={[style, compact && { height: 'auto' }]}>
      {(width, height, portalHost) =>
        graphData && (
          <Chart
            scale={{ x: 'time' }}
            theme={theme}
            domainPadding={{ x: 0, y: 10 }}
            width={width}
            height={height}
            containerComponent={
              <VictoryVoronoiContainer voronoiDimension="x" />
            }
            padding={
              compact && {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0
              }
            }
          >
            <Area
              start={graphData.start}
              end={graphData.end}
              data={graphData.data}
            />
            {React.createElement(
              graphData.data.length === 1 ? VictoryBar : VictoryArea,
              {
                data: graphData.data,
                labelComponent: <Tooltip portalHost={portalHost} />,
                labels: x => x.premadeLabel,
                style: {
                  data:
                    graphData.data.length === 1
                      ? { width: 50 }
                      : {
                          clipPath: 'url(#positive)',
                          fill: 'url(#positive-gradient)'
                        }
                }
              }
            )}
            {graphData.data.length > 1 && (
              <VictoryArea
                data={graphData.data}
                style={{
                  data: {
                    clipPath: 'url(#negative)',
                    fill: 'url(#negative-gradient)',
                    stroke: theme.colors.red,
                    strokeLinejoin: 'round'
                  }
                }}
              />
            )}
            {!compact && (
              <VictoryAxis
                tickFormat={x => d.format(x, "MMM ''yy")}
                tickValues={graphData.data.map(item => item.x)}
                tickCount={Math.min(5, graphData.data.length)}
                offsetY={50}
              />
            )}
            {!compact && (
              <VictoryAxis dependentAxis crossAxis={!graphData.hasNegative} />
            )}
          </Chart>
        )
      }
    </Container>
  );
}

function HistoricalPriceCard({ className, pair, saleTokenInfo, usdPrice, style }) {
  const nativeTokenAssetInfo = nativeTokenFromPair(pair.asset_infos);
  const nativeSymbol = NATIVE_TOKEN_SYMBOLS[nativeTokenAssetInfo.info.native_token.denom];
  const [chartWrapperRef, chartWrapperBounds] = useMeasure();
  const [chartSVGWidth, setChartSVGWidth] = useState();
  const [chartSVGHeight, setChartSVGHeight] = useState();
  const [data, setData] = useState();
  const [interval, setInterval] = useState(INTERVALS[INTERVALS.length-1].minutes);
  const [scale, setScale] = useState('linear');
  const [fetchingNewData, setFetchingNewData] = useState();

  useRefreshingEffect((isRefreshing) => {
    setFetchingNewData(!isRefreshing);

    const fetchData = async() => {
      const { data } = await apolloClient.query({
        fetchPolicy: 'no-cache',
        query: PRICE_QUERY,
        variables: {
          // TODO: Replace with actual contract address
          contractAddress: 'terra15gwkyepfc6xgca5t5zefzwy42uts8l2m4g40k6', // pair.contract_addr
          from: Date.now() - INTERVALS_TO_QUERY * interval * 60 * 1000,
          to: Date.now(),
          interval: interval // in minutes
        }
      });

      setData(data.asset.prices.history.map(
        ({ timestamp, price }) => ({ timestamp, price: parseFloat(price) })
      ));

      setFetchingNewData(false);
    }

    fetchData();
  }, 60_000, [pair, interval]);

  // Match aspect ratio of container (which grows to fill the card)
  useEffect(() => {
    if(chartWrapperBounds.width > 0) {
      setChartSVGWidth(chartWrapperBounds.width);
    }

    if(chartWrapperBounds.height > 0) {
      setChartSVGHeight(chartWrapperBounds.height);
    }
  }, [chartWrapperBounds.width, chartWrapperBounds.height]);

  const prices = useMemo(() => data?.map(({ price }) => price), [data]);

  const areaDataStyle = {
    stroke: 'var(--theme-historical-price-chart-line-color)',
    strokeWidth: 2,
    fill: 'url(#fillGradient)'
  }

  return (
    <Card className={classNames('py-8 px-12 flex flex-col historical-price-card', className)} style={style}>
      <div className="flex justify-between">
        <h2 className="font-bold">
          {nativeSymbol} / {saleTokenInfo.symbol}
        </h2>

        {
          usdPrice &&
          <h3 className="font-bold text-lg">
            {formatUSD(usdPrice)}
          </h3>
        }
      </div>

      <div className="flex justify-between my-4">
        <OptionsGroup
          options={[
            {
              value: 'linear',
              label: 'Lin'
            },
            {
              value: 'log',
              label: 'Log'
            }
          ]}
          selected={scale}
          onOptionSelect={setScale}
        />

        <OptionsGroup
          options={INTERVALS.map(({minutes: value, label}) => ({ value, label }))}
          selected={interval}
          onOptionSelect={setInterval}
          className="mr-4"
        />
      </div>

      <svg className="h-0">
        <defs>
          <linearGradient id="fillGradient"
            x1="0%"
            x2="0%"
            y1="0%"
            y2="100%"
          >
            <stop offset="0%" stopOpacity="0.5" className="from-stop" />
            <stop offset="50%" stopOpacity="0" className="to-stop" />
          </linearGradient>
        </defs>
      </svg>

      <div ref={chartWrapperRef} className={classNames('flex-grow transition-opacity flex items-center', { 'opacity-50': fetchingNewData })}>
        {
          chartSVGWidth && chartSVGHeight && data &&
          <Chart
            width={chartSVGWidth}
            height={chartSVGHeight}
            padding={{ top: 30, left: 45, right: 0, bottom: 40 }}
            scale={{ x: 'linear', y: scale }}
            minDomain={{ y: Math.min(...prices)*0.98 }}
            maxDomain={{ y: Math.max(...prices)*1.02 }}
            xAxis={{
              tickFormat: timeString,
              tickCount: 12
            }}
            yAxis={{
              tickFormat: (v) => formatNumber(v, { minimumFractionDigits: 2 }),
              tickCount: 8
            }}
          >
            <VictoryArea
              data={data}
              x="timestamp"
              y="price"
              style={{data: areaDataStyle}}
            />
          </Chart>
        }

        {
          !data && <LoadingIndicator className="w-12 h-12 mx-auto" />
        }
      </div>
    </Card>
  );
}

render() {
    const streamData = this.props.data;
    return (
      <div>
        <div style={{display: 'flex'}}>
          <VictoryChart
            theme={VictoryTheme.material}
            width={400}
            height={400}
            style={{
              parent: {
                backgroundColor: '#222',
              },
            }}>
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
            />
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
              dependentAxis
            />
            <VictoryScatter
              data={streamData[0]}
              size={6}
              style={{
                data: {
                  fill: d => colors[d.x % 5],
                },
              }}
            />
          </VictoryChart>

          <VictoryChart
            theme={VictoryTheme.material}
            width={400}
            height={400}
            style={{
              parent: {
                backgroundColor: '#222',
              },
            }}
            domainPadding={[20, 20]}>
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
            />
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
              dependentAxis
            />
            <VictoryBar
              data={streamData[0]}
              style={{
                data: {
                  fill: d => colors[d.x % 5],
                  stroke: 'none',
                  padding: 5,
                },
              }}
            />
          </VictoryChart>
        </div>
        <div
          style={{
            display: 'flex',
            position: 'relative',
            top: '-50px',
          }}>
          <VictoryChart
            theme={VictoryTheme.material}
            width={800}
            height={350}
            style={{
              parent: {
                backgroundColor: '#222',
              },
            }}>
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
            />
            <VictoryAxis
              style={{
                axis: {stroke: 'white'},
                tickLabels: {fill: 'white'},
              }}
              dependentAxis
            />
            <VictoryStack>
              {streamData.map((data, i) => (
                <VictoryArea key={i} data={data} colorScale={colors} />
              ))}
            </VictoryStack>
          </VictoryChart>
        </div>
      </div>
    );
  }