victory#VictoryLine JavaScript Examples

render() {
    const web3 = window.web3;
    const currentNetwork = web3.currentProvider.networkVersion;
    const {poolHistory, selectedPool: {symbol}} = this.props;

    let graphData = poolHistory.map(function(item){

      return {x: moment(item.timeStamp).format('MM-DD'), y: parseInt(item.data)}
    });

    if (graphData.length === 0) {
      return <div className="graph-message-text">Volume graph data not available</div>
    }


    if (currentNetwork !== '1') {
      return <div className="graph-message-text">Volume graph is available only on mainnet</div>
    }
    return (
      <div>
      <VictoryChart

>
  <VictoryLine
    style={{
      data: { stroke: "#c43a31" },
      parent: { border: "1px solid #ccc"}
    }}
    data={graphData}
      />
      <VictoryAxis dependentAxis/>
      <VictoryAxis fixLabelOverlap={true}/>

    </VictoryChart>
    <div className="h7 text-center">Daily conversion vol from reserve to {symbol} (ETH)</div>
    </div>

      )
  }

function CashFlowGraph({ style, start, end, graphData, isConcise, compact }) {
  return (
    <Container>
      {(width, height, portalHost) =>
        graphData && (
          <VictoryChart
            scale={{ x: 'time' }}
            theme={theme}
            domainPadding={10}
            width={width}
            height={height}
            containerComponent={
              <VictoryVoronoiContainer voronoiDimension="x" />
            }
          >
            <VictoryGroup>
              <VictoryBar
                data={graphData.expenses}
                style={{ data: { fill: theme.colors.red } }}
              />
              <VictoryBar data={graphData.income} />
            </VictoryGroup>
            <VictoryLine
              data={graphData.balances}
              labelComponent={<Tooltip portalHost={portalHost} />}
              labels={x => x.premadeLabel}
              style={{
                data: { stroke: colors.n5 }
              }}
            />
            <VictoryAxis
              tickFormat={x => d.format(x, isConcise ? "MMM ''yy" : 'MMM d')}
              tickValues={graphData.balances.map(item => item.x)}
              tickCount={Math.min(5, graphData.balances.length)}
              offsetY={50}
            />
            <VictoryAxis dependentAxis crossAxis={false} />
          </VictoryChart>
        )
      }
    </Container>
  );
}

function WeightsChart({ pair, saleTokenInfo }) {
  const nativeTokenAssetInfo = nativeTokenFromPair(pair.asset_infos);
  const saleTokenAssetInfo = saleAssetFromPair(pair.asset_infos);

  const durationHours = (pair.end_time - pair.start_time) / 60 ** 2;

  // TODO: at some point, we should probably cut over to days on the x-axis
  let tickInterval;
  if(durationHours <= 24 * 3) {
    // 4 hour interval for sales <= 3 days long
    tickInterval = 4;
  } else if(durationHours <= 24*15) {
    // 24 hour interval for sales > 3 days and <= 15 days long
    tickInterval = 24;
  } else {
    // Whatever interval yields 10 ticks for > 15 day sales
    tickInterval = Math.ceil(durationHours / 10);
  }

  const totalTicks = Math.ceil(durationHours / tickInterval) + 1; // Add 1 for 0

  const nativeTokenData = [
    {
      x: 0,
      y: parseInt(nativeTokenAssetInfo.start_weight)
    },
    {
      x: durationHours,
      y: parseInt(nativeTokenAssetInfo.end_weight)
    }
  ];

  const saleTokenData = [
    {
      x: 0,
      y: parseInt(saleTokenAssetInfo.start_weight)
    },
    {
      x: durationHours,
      y: parseInt(saleTokenAssetInfo.end_weight)
    }
  ];

  const nativeSymbol = NATIVE_TOKEN_SYMBOLS[nativeTokenAssetInfo.info.native_token.denom];
  const saleTokenSymbol = saleTokenInfo.symbol;

  const xAxisTickValues = Array.from(Array(totalTicks), (_, i) => Math.round(i * tickInterval));
  const yAxisTickValues = [0, 25, 50, 75, 100];

  return (
    <div style={{ width: '500px' }} className="p-4">
      <div className="border-b border-white flex justify-between pb-4 items-center">
        <h3 className="font-bold">{nativeSymbol} : {saleTokenSymbol} weight</h3>

        <div className="flex text-xs">
          <LegendItem color={NATIVE_TOKEN_COLOR} label={`${nativeSymbol} weight`} className="mr-4" />
          <LegendItem color={SALE_TOKEN_COLOR} label={`${saleTokenSymbol} weight`} />
        </div>
      </div>

      <Chart
        xAxis={{
          tickValues: xAxisTickValues,
          label: 'hour'
        }}
        yAxis={{
          tickFormat: (v) => formatNumber(v/100, { style: 'percent' }),
          tickValues: yAxisTickValues
        }}
        domainPadding={10}
        padding={{ top: 30, left: 45, right: 0, bottom: 40 }}
        width={500}
        height={250}
      >
        <VictoryLine data={nativeTokenData} style={{ data: { stroke: NATIVE_TOKEN_COLOR, strokeWidth: 2 }}}/>
        <VictoryLine data={saleTokenData}  style={{ data: { stroke: SALE_TOKEN_COLOR, strokeWidth: 2 }}} />
      </Chart>
    </div>
  );
}

RewardsGraph = ({ title, yLabel, currencySymbol, data, normalizeLargeNumber }) => (
  <ChartContainer marginTop={8}>
    <h4>{title}</h4>
    <Theme.Consumer>
      {({ theme }) => (
        <VictoryChart
          width={500}
          height={300}
          scale={{ x: 'linear' }}
          padding={{ top: 75, bottom: 55, left: 100, right: 65 }}
          containerComponent={
            <VictoryVoronoiContainer
              voronoiDimension='x'
              labels={({ datum }) => `Epoch: ${datum.x}\n${currencySymbol} ${normalizeLargeNumber(datum.y, 6)}\n${currencySymbol} ${normalizeLargeNumber(datum.reward, 6)}`}
            />
          }
        >
          <VictoryAxis
            crossAxis={false}
            label='Epoch'
            style={{
              tickLabels: { fill: theme.palette.text.primary },
              axisLabel: { fill: theme.palette.text.primary, padding: 35 }
            }}
          />
          <VictoryAxis
            dependentAxis
            label={yLabel}
            style={{
              tickLabels: { fill: theme.palette.text.primary },
              axisLabel: { fill: theme.palette.text.primary, padding: 70 }
            }}
          />
          <VictoryLine
            style={{
              data: { stroke: theme.palette.primary.light }
            }}
            data={data}
            labelComponent={<VictoryTooltip />}
          />
        </VictoryChart>
      )}
    </Theme.Consumer>
  </ChartContainer>
)

History = () => {

	const { store } = useContext(Context);

	// Declaring an empty array to store either the line chart, bar chart, or string (for no historical data)
	let chartContainer = [];

	// Container for line chart --> Used when there is more than ONE path
	const containerLine = [
		<VictoryChart
			domainPadding={{ x: 10 }}
			containerComponent={
				<VictoryVoronoiContainer
					voronoiDimension="x"
					labels={({ datum }) =>
						`Query: ${datum.t} ms,
					Query String: ${datum.z}`
					}
					labelComponent={
						<VictoryTooltip
							cornerRadius={5}
							flyoutStyle={{ fill: "#D4F1F4" }}
							style={{ fontSize: 6 }}
							constrainToVisibleArea
							flyoutPadding={5}
						/>
					}
				/>
			}
		>
			<VictoryLine
				style={{
					data: { stroke: "#189AB4" },
				}}
				// Performance data inserted here
				data={store.history}
			/>
			<VictoryAxis
				label={"Query Database ID"}
				style={{
					tickLabels: { fontSize: 10, padding: 5, angle: -30, fill: "white" },
					axis: { stroke: "white" },
					axisLabel: { fontSize: 10, padding: 30, fill: "white" },
				}}
			/>
			<VictoryAxis
				label={"Response Duration (ms)"}
				style={{
					tickLabels: { fontSize: 10, padding: 5, fill: "white" },
					axis: { stroke: "white" },
					axisLabel: { fontSize: 10, padding: 30, fill: "white" },
				}}
				dependentAxis
			/>
		</VictoryChart>,
	];

	// Container for bar chart --> Used when there is ONLY ONE path
	const containerBar = [
		<VictoryChart
			domainPadding={{ x: 5 }}
		>
			<VictoryBar
				style={{
					data: { fill: "#189AB4" },
				}}
				// Performance data object inserted here
				data={store.history}
				labels={({ datum }) =>
					`Query: ${datum.t} ms,
				Query String: ${datum.z}`
				}
				barWidth={({ index }) => index * 5 + 20}
				labelComponent={
					<VictoryTooltip
						cornerRadius={5}
						flyoutStyle={{ fill: "#D4F1F4" }}
						style={{ fontSize: 6 }}
						constrainToVisibleArea
						flyoutPadding={5}
					/>
				}
			/>
			<VictoryAxis
				label={"Query Database ID"}
				style={{
					tickLabels: { fontSize: 10, padding: 5, fill: "white" },
					axis: { stroke: "white" },
					axisLabel: { fontSize: 10, fill: "white" },
				}}
			/>
			<VictoryAxis
				label={"Response Duration (ms)"}
				style={{
					tickLabels: { fontSize: 10, padding: 5, fill: "white" },
					axis: { stroke: "white" },
					axisLabel: { fontSize: 10, fill: "white" },
				}}
				dependentAxis
			/>
		</VictoryChart>,
	];

	// Conditional statement to assign chartContainer to charting (line or bar) if there is data, or else, a string indicating no data to render
	if (store.history.length === 0) {
		chartContainer = '(No historical query information to display)';
	} else if (store.history.length === 1) {
		chartContainer.push(containerBar);
	} else {
		chartContainer.push(containerLine);
	}

	const headerStr = 'Historical GraphQL Performance (Overall response duration in ms)'

	const linkStyle = {
		"color": "#05445E",
		"textDecoration": "none",
	}

	return (
		// <div>
			<div className="historyViewContainer">
				<img src="./logo2.png" />
				<button className="quadrantButton">
					<Link to="/" style={linkStyle}>Home</Link>
				</button>
				<h3 style={{ "color": "#ffffff" }}>{headerStr}</h3>
				<div style={{ "width": "80%", "color": "#ffffff", "textAlign": "center", "marginTop": "50px" }}>
					{chartContainer}
				</div>
			</div>
		// </div>
	);

}

PerfData = () => {

	const { store } = useContext(Context);

	// Local state to show or hide the pop-up window
	const [showWindowPortal, setWindowPortal] = useState(false);

	// Change state of showWindowPortal whenever Expand Performance Metrics button is clicked
	function toggleWindowPortal () {
		setWindowPortal(!showWindowPortal)
	}

	// To format the response metrics with commas if 4 digits or more
	function numberWithCommas (x) {
		return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
	}

	// Declaring variables to re-assign if store.query.extensions is not falsy
	const data = [];
	// Variable for rendering of the Summary Performance Metrics text in the upper right hand corner of lower left quadrant
	const htmlContainer = [];
	// Variable for rending of the main charting (bar or line Victory charts)
	const chartContainer = [];
	let overallResTime;
	let startTime;
	let endTime;
	const performanceObj = {};
	const perfAvg = {};
	const anomaliesObj = {};

	// If the request is valid (with an associated response), and it is not a mutation request
	if (store.query.extensions && !store.mutationEvent) {
		const topLevelQueryArr = [];

		// Saving top-level request information --> formatting overall response time (in ms) to include commas before the decimal
		overallResTime = numberWithCommas(
			(store.query.extensions.tracing.duration / 1000000).toFixed(2)
		);

		// Saving the rest of the top-level (overall) request information
		startTime = store.query.extensions.tracing.startTime;
		endTime = store.query.extensions.tracing.endTime;

		// Saving resolver-level information to a variable
		const performanceDataArray = store.query.extensions.tracing.execution.resolvers;

		// Resolver-level query information
		for (let i = 0; i < performanceDataArray.length; i++) {
			const currResolver = performanceDataArray[i];

			// This captures 'parent' resolvers and associated duration
			if (currResolver.path.length === 1) {
				const pathStr = currResolver.path[0];
				const pathDuration = currResolver.duration;
				topLevelQueryArr.push([pathStr, pathDuration]);
			} else {
				// 'Children' resolvers and duration get stored in performanceObj
				const pathStrJoined = currResolver.path.join(".");
				const pathKey = currResolver.path.filter(function (curEl) {
					return typeof curEl === "string";
				});
				const pathKeyJoined = pathKey.join(".");
				if (performanceObj[pathKeyJoined]) {
					performanceObj[pathKeyJoined].push([pathStrJoined, currResolver.duration]);
				} else {
					performanceObj[pathKeyJoined] = [[pathStrJoined, currResolver.duration]];
				}
			}
		}

		// Finding the average of all the 'children' resolvers duration time for each identified path
		for (let perfQuery in performanceObj) {
			let perfArr = performanceObj[perfQuery];
			let average = 0;
			for (let i = 0; i < perfArr.length; i++) {
				average += perfArr[i][1];
			}
			const finalAvg = average / perfArr.length / 1000000;
			perfAvg[perfQuery] = Number(finalAvg.toFixed(4));
		}

		// Isolating the 'children' resolvers where the duration time exceeds the average duration time for that identified path
		for (const [pathName, avg] of Object.entries(perfAvg)) {
			const anomaliesArr = [];
			const arrayOfTimes = performanceObj[pathName];
			arrayOfTimes.forEach((el) => {
				const resTime = el[1] / 1000000;
				if (resTime > avg) {
					anomaliesArr.push(`${el[0]}: ${resTime} ms`);
				}
			});
			anomaliesObj[pathName] = anomaliesArr;
		}

		// Declaring the performance data to be rendered in Victory chart 
		for (let queryKey in perfAvg) {
			let queryKeyObj = {};
			queryKeyObj.x = queryKey;
			queryKeyObj.y = perfAvg[queryKey];
			queryKeyObj.z = anomaliesObj[queryKey].length;
			queryKeyObj.q = performanceObj[queryKey].length;
			queryKeyObj.t = numberWithCommas(perfAvg[queryKey].toFixed(4));
			data.push(queryKeyObj);
		}

		// Console logs for error-checking
		// console.log("performanceObj ", performanceObj);
		// console.log("topLevelQueryArr ", topLevelQueryArr);
		// console.log("perfAvg:", perfAvg);
		// console.log("anomaliesObj:", anomaliesObj);
		// console.log("data: ", data);

		// Container for line chart --> Used when there is MORE THAN ONE path
		const containerLine = [
			<VictoryChart
				height={350}
				padding={60}
				domainPadding={{ x: 10 }}
				containerComponent={
					<VictoryVoronoiContainer
						voronoiDimension="x"
						labels={({ datum }) =>
							`Avg. response time: ${datum.t} ms,
              # total resolvers: ${datum.q},
              # outlier resolvers: ${datum.z}`
						}
						labelComponent={
							<VictoryTooltip
								cornerRadius={5}
								flyoutStyle={{ fill: "#D4F1F4" }}
								style={{ fontSize: 9 }}
							/>
						}
					/>
				}
			>
				<VictoryLine
					style={{
						data: { stroke: "#189AB4" },
					}}
					// Performance data is inputted here
					data={data}
				/>
				<VictoryAxis
					label={"Path"}
					style={{
						tickLabels: { fontSize: 10, padding: 15, angle: -30, fill: "white" },
						axis: { stroke: "white" },
						axisLabel: { fontSize: 12, fill: "white", padding: 45 },
					}}
				/>
				<VictoryAxis
					label={"Duration Time (ms)"}
					style={{
						tickLabels: { fontSize: 10, padding: 5, fill: "white" },
						axis: { stroke: "white" },
						axisLabel: { fontSize: 12, fill: "white", padding: 40 },
					}}
					dependentAxis
				/>
			</VictoryChart>,
		];

		// Container for bar chart --> Used when there is ONLY ONE path
		const containerBar = [
			<VictoryChart
				height={350}
				padding={60}
				domainPadding={{ x: 5 }}
			>
				<VictoryBar
					style={{
						data: { fill: "#189AB4" },
					}}
					// Performance data is inputted here
					data={data}
					labels={({ datum }) =>
						`Avg. response time: ${datum.t} ms,
            # total resolvers: ${datum.q},
            # outlier resolvers: ${datum.z}`
					}
					barWidth={({ index }) => index * 5 + 20}
					labelComponent={
						<VictoryTooltip
							dy={0}
							style={{ fontSize: 8 }}
							constrainToVisibleArea
						/>
					}
				/>
				<VictoryAxis
					label={"Path"}
					style={{
						tickLabels: { fontSize: 10, padding: 5, fill: "white" },
						axis: { stroke: "white" },
						axisLabel: { fontSize: 12, fill: "white" },
					}}
				/>
				<VictoryAxis
					label={"Duration Time (ms)"}
					style={{
						tickLabels: { fontSize: 10, padding: 5, fill: "white" },
						axis: { stroke: "white" },
						axisLabel: { fontSize: 12, fill: "white", padding: 40 },
					}}
					dependentAxis
				/>
			</VictoryChart>,
		];

		// Adding <p> tags with top-level query information to HTMLcontainer array
		htmlContainer.push(
			<p key={"overallPerfMetric: 0"} className="perfMetricPTag" className="perfMetricPTagTitle">Summary Metrics:</p>
		);

		htmlContainer.push(
			<p key={"overallPerfMetric: 3"} className="perfMetricPTag">
				▫ Overall response time: {overallResTime} ms
      </p>
		);

		for (let i = 0; i < topLevelQueryArr.length; i++) {
			let overallParentResTime = numberWithCommas(
				(topLevelQueryArr[i][1] / 1000000).toFixed(2)
			);

			htmlContainer.push(
				<p
					key={`Time Elapsed to parent resolver-${i}`}
					className="perfMetricPTag"
				>{` ▫ Response time to ${topLevelQueryArr[i][0]} field: ${overallParentResTime} ms`}</p>
			);
		}

		// Conditional statement to assign chartContainer to either the line or bar chart

		if (data.length === 1) {
			chartContainer.push(containerBar);
		} else {
			chartContainer.push(containerLine);
		}
	}

	// If the request is valid (with an associated response), and it is a MUTATION request
	if (store.query.extensions && store.mutationEvent) {

		// Saving the overall duration time for the MUTATION request
		const overallDurationTime = numberWithCommas(((store.query.extensions.tracing.duration) / 1000000).toFixed(4));

		// Saving the resolvers array to a variable
		const resolverArr = store.query.extensions.tracing.execution.resolvers;

		// For loop to create a data object to be rendered inside Victory charts
		for (let i = 0; i < resolverArr.length; i++) {
			// If conditional to isolate where the resolver path is only one field (which indicates a mutation request vs. the callback fields requested)
			if (resolverArr[i].path.length === 1) {
				const resolverDuration = (resolverArr[i].duration) / 1000000;
				const resolverName = resolverArr[i].path[0];
				const mutationObj = {};
				mutationObj.x = resolverName;
				mutationObj.y = resolverDuration;
				mutationObj.z = numberWithCommas(resolverDuration.toFixed(4));
				data.push(mutationObj);
			}
		}

		// Adding <p> tags with top-level query information to HTMLcontainer array
		htmlContainer.push(
			<p key={"overallPerfMetric: 0"} className="perfMetricPTag" className="perfMetricPTagTitle">Summary Performance Metrics:</p>
		);

		htmlContainer.push(
			<p key={"overallPerfMetric: 3"} className="perfMetricPTag">
				▫ Overall response time: {overallDurationTime} ms
      </p>
		);

		// Container for line chart --> Used when there is MORE THAN ONE path
		const containerLine = [
			<VictoryChart
				height={350}
				padding={60}
				domainPadding={{ x: 10 }}
				containerComponent={
					<VictoryVoronoiContainer
						voronoiDimension="x"
						labels={({ datum }) =>
							`Response time: ${datum.z} ms`
						}
						labelComponent={
							<VictoryTooltip
								cornerRadius={5}
								flyoutStyle={{ fill: "#D4F1F4" }}
								style={{ fontSize: 9 }}
							/>
						}
					/>
				}
			>
				<VictoryLine
					style={{
						data: { stroke: "#189AB4" },
					}}
					// Performance data is inserted here
					data={data}
				/>
				<VictoryAxis
					label={"Path"}
					style={{
						tickLabels: { fontSize: 10, padding: 15, angle: -30, fill: "white" },
						axis: { stroke: "white" },
						axisLabel: { fontSize: 12, fill: "white", padding: 45 },
					}}
				/>
				<VictoryAxis
					label={"Duration Time (ms)"}
					style={{
						tickLabels: { fontSize: 10, padding: 5, fill: "white" },
						axis: { stroke: "white" },
						axisLabel: { fontSize: 12, fill: "white", padding: 40 },
					}}
					dependentAxis
				/>
			</VictoryChart>,
		];

		// Container for bar chart --> Used when there is ONLY ONE path
		const containerBar = [
			<VictoryChart
				height={350}
				padding={60}
				domainPadding={{ x: 5 }}
			>
				<VictoryBar
					style={{
						data: { fill: "#189AB4" },
					}}
					// Performance data is inserted here
					data={data}
					labels={({ datum }) =>
						`Response time: ${datum.z} ms`
					}
					barWidth={({ index }) => index * 5 + 20}
					labelComponent={
						<VictoryTooltip
							dy={0}
							style={{ fontSize: 8 }}
							constrainToVisibleArea
						/>
					}
				/>
				<VictoryAxis
					label={"Path"}
					style={{
						tickLabels: { fontSize: 10, padding: 5, fill: "white" },
						axis: { stroke: "white" },
						axisLabel: { fontSize: 12, fill: "white" },
					}}
				/>
				<VictoryAxis
					label={"Duration Time (ms)"}
					style={{
						tickLabels: { fontSize: 10, padding: 5, fill: "white" },
						axis: { stroke: "white" },
						axisLabel: { fontSize: 12, fill: "white", padding: 40 },
					}}
					dependentAxis
				/>
			</VictoryChart>,
		];

		// Conditional statement to assign chartContainer to either the line or bar chart
		if (data.length === 1) {
			chartContainer.push(containerBar);
		} else {
			chartContainer.push(containerLine);
		}
	}

	const linkStyle = {
		"color": "#05445E",
		"textDecoration": "none",
	}

	return (
		<div>
			{store.loading && <div className="loadingBox"><img className='loadingImg' src="./assets/loading.gif" /></div>}
			{(!store.query.data && !store.loading) && <div id='queryPlaceholder'>No query results to display</div>}
			{(store.query.data && !store.loading) &&
				<div>
					<div className="performanceMetricsButtonInfo">
						<button onClick={toggleWindowPortal} className="performanceMetricsButton">
							Expand Performance Metrics
						</button>

						<button className="performanceMetricsButton">
							<Link to="/fullhistory" style={linkStyle}>View Historical Metrics</Link>
						</button>

						<ExpandPerfData key={'ExpandPerfData 1'} showWindow={showWindowPortal} performanceAvg={perfAvg} anomaliesObject={anomaliesObj} performance={performanceObj} />
						<div>{htmlContainer}</div>
					</div>
					<div className="chartContainerDiv">{chartContainer}</div>
				</div>
			}
		</div>
	)
}

DPAuctionPriceChart = function ({ auction }) {
  const { t } = useTranslation('common')

  const startPoint = {
    block: auction.startBlock,
    price: auction.ceiling
  }
  const endPoint = {
    block: auction.endBlock,
    price: auction.floor
  }
  const currentPoint = {
    block: auction.currentBlock,
    price: auction.currentPrice
  }
  const winningPoint = {
    block: auction.winningBlock,
    price: auction.winningPrice
  }
  const stoppingPoint = {
    block: auction.stoppingBlock,
    price: auction.stoppingPrice
  }

  const basePlotData =
    auction.status === 'running'
      ? [startPoint, currentPoint, endPoint]
      : auction.status === 'stopped'
      ? [startPoint, stoppingPoint, endPoint]
      : auction.status === 'won'
      ? [startPoint, winningPoint, endPoint]
      : [startPoint, currentPoint, endPoint]

  const plotData = basePlotData
    .map(({ block, price }) => ({
      block: Number.parseInt(block),
      price: numberFromUnit(price, auction.paymentToken.decimals)
    }))
    .sort((a, b) => a.block - b.block)

  // Calculating the x-axis ticks manually prevents x-labels to overlap, to
  // repeat or to show decimal block numbers. And since the auctions can be live
  // for many blocks or just a few, black math magic is required.
  //
  // First, start by defining the start, end blocks and the domain length.
  const xStart = plotData[0].block
  const xEnd = plotData[2].block
  const xLen = xEnd - xStart
  // Then split the domain length in 3 to have at most 4 ticks. Since the chart
  // is relatively small and the block numbers are large, having just a few
  // ticks is ok.
  // Finally force the steps to be a whole number and force it to be at least 1.
  const xStep = Math.max(Math.floor(xLen / 3), 1)
  // Once the steps are defined, calculate how many ticks fit in the domain. Sum
  // one to add the "ending" tick. Otherwise only the start and "inner" ticks
  // will be shown.
  const xTicks = Math.floor(xLen / xStep) + 1
  // Finally create an array of that length whose values will be one step
  // appart. To get a better look, start from the end, subtract one step at a
  // time and then revert the array. That way the end tick will always match the
  // end block.
  const xTickValues = new Array(Math.max(xTicks, 1))
    .fill(null)
    .map((_, i) => xEnd - xStep * i)
    .reverse()

  return (
    <div>
      <VictoryChart
        minDomain={{ y: 0 }}
        padding={{ bottom: 55, left: 90, right: 30, top: 10 }}
        width={450}
      >
        <VictoryAxis
          label={t('block-number')}
          style={{
            axisLabel: { padding: 40 },
            ticks: { stroke: 'black', size: 5 }
          }}
          tickFormat={tick => tick.toString()}
          tickValues={xTickValues}
        />
        <VictoryAxis
          dependentAxis
          label={auction.paymentToken.symbol}
          style={{
            axisLabel: { padding: 75 },
            ticks: { stroke: 'black', size: 5 }
          }}
        />
        <VictoryLine
          data={plotData.slice(0, 2)}
          style={{
            data: { strokeWidth: 2 }
          }}
          x="block"
          y="price"
        />
        <VictoryLine
          data={plotData.slice(1)}
          style={{
            data:
              auction.status === 'floored' ||
              auction.winningPrice === auction.floor ||
              auction.stoppingPrice === auction.floor
                ? { strokeWidth: 3 }
                : { strokeWidth: 1, strokeDasharray: '10,10' }
          }}
          x="block"
          y="price"
        />
        <VictoryScatter
          data={[
            plotData[
              auction.status === 'floored' ||
              auction.winningPrice === auction.floor ||
              auction.stoppingPrice === auction.floor
                ? 2
                : 1
            ]
          ]}
          size={8}
          style={{
            data: {
              strokeWidth: 1,
              fill: auction.stopped ? 'black' : 'white',
              stroke: 'black'
            }
          }}
          x="block"
          y="price"
        />
      </VictoryChart>
    </div>
  )
}