<?php
/**
 * Charts drawn as SVG on the server.
 *
 * @package Dealroot
 */

namespace Dealroot\Admin;

use Dealroot\Kses;

defined( 'ABSPATH' ) || exit;

/**
 * Line, column, ring, flow and heat charts without a charting library: each is plain SVG, so
 * it prints in the PDF report as it shows on screen. Every mark carries its numbers for the
 * tooltip in data-tip, and every chart has a table with the same numbers below it.
 */
class Charts {

	/**
	 * Colours of the channels, in the fixed order of Chart_Data::CHANNEL_ORDER; 0 is "Other".
	 * Checked for colour-blind readers in this order.
	 */
	const SLOTS = array( '#b7b6ae', '#2a78d6', '#eb6834', '#1baf7a', '#eda100', '#e87ba4', '#008300', '#6250d6', '#e34948' );

	/**
	 * Revenue and customers: the green of Dealroot; enquiries a lighter step of it.
	 */
	const MONEY = '#0e4a37';
	const LIGHT = '#a9cdb8';
	const COST  = '#6c6a64';
	const QUIET = '#c9c7c0';

	/**
	 * Steps of green from few to many, for the heat chart.
	 */
	const HEAT = array( '#eef3ef', '#d3e6da', '#a9cdb8', '#74ad8f', '#3f8a66', '#0e4a37' );

	/**
	 * Clean steps for an axis from 0 to a little above the largest value.
	 *
	 * @param float $most  Largest value.
	 * @param int   $count Steps wanted.
	 * @return float[]
	 */
	public static function ticks( $most, $count = 4 ) {
		if ( $most <= 0 ) {
			return array( 0, 1 );
		}

		$raw   = $most / $count;
		$power = pow( 10, floor( log10( $raw ) ) );
		$step  = $power;

		foreach ( array( 1, 2, 2.5, 5, 10 ) as $factor ) {
			if ( $raw <= $factor * $power ) {
				$step = $factor * $power;
				break;
			}
		}

		$ticks = array();
		for ( $value = 0; $value < $most + $step; $value += $step ) {
			$ticks[] = $value;
		}

		return $ticks;
	}

	/**
	 * Short money for an axis: 1.200 € as 1,2K €.
	 *
	 * @param float  $amount   Amount.
	 * @param string $currency Currency.
	 * @return string
	 */
	public static function short_money( $amount, $currency ) {
		if ( abs( $amount ) < 10000 ) {
			return Format::money( round( $amount ), $currency );
		}

		$millions = abs( $amount ) >= 1000000;
		$money    = Format::money( $millions ? round( $amount / 1000000, 1 ) : round( $amount / 1000 ), $currency );

		// "80 €" becomes "80K €" and "€80" becomes "€80K", as the language of the site writes it.
		return (string) preg_replace( '/(\d)(?!.*\d)/u', '$1' . ( $millions ? 'M' : 'K' ), $money );
	}

	/**
	 * Numbers of a mark for the tooltip.
	 *
	 * @param string $title Day, channel or cell.
	 * @param array  $rows  Each colour, label and value.
	 * @return string JSON, to escape as an attribute.
	 */
	private static function tip( $title, array $rows ) {
		return (string) wp_json_encode(
			array(
				't' => (string) $title,
				'r' => array_values( $rows ),
			)
		);
	}

	/**
	 * Title of a day, week or month in the tooltip.
	 *
	 * @param array $row Row of Chart_Data::series().
	 * @return string
	 */
	private static function title( array $row ) {
		if ( 'now' === $row['partial'] ) {
			/* translators: %s: day, week or month, e.g. "Week of 6 October 2026" */
			return sprintf( __( '%s (so far)', 'dealroot' ), $row['long'] );
		}

		/* translators: %s: week or month, e.g. "Week of 6 October 2026" */
		return 'cut' === $row['partial'] ? sprintf( __( '%s (only partly in the period)', 'dealroot' ), $row['long'] ) : $row['long'];
	}

	/**
	 * Width of a chart over time: the usual width, or wider when there are so many days that
	 * their columns would be too thin, so the chart scrolls sideways instead.
	 *
	 * @param int $count Days, weeks or months.
	 * @param int $each  Width each of them needs at least.
	 * @return int
	 */
	private static function width( $count, $each ) {
		return max( 1000, 60 + $count * $each );
	}

	/**
	 * Size of a wide chart, which keeps its width and scrolls.
	 *
	 * @param int $width Width.
	 * @return string Value of the style attribute.
	 */
	private static function wide( $width ) {
		return 'width: ' . (int) $width . 'px; max-width: none';
	}

	/**
	 * The scale of a wide chart, kept in view at the left while the chart scrolls.
	 *
	 * @param int      $width  Width of the chart.
	 * @param int      $height Height of the chart.
	 * @param int      $left   Width of the scale.
	 * @param float[]  $ticks  Steps of the scale.
	 * @param callable $y      Position of a value.
	 * @param callable $label  Text of a step.
	 * @return string HTML.
	 */
	private static function axis( $width, $height, $left, array $ticks, callable $y, callable $label ) {
		if ( $width <= 1000 ) {
			return '';
		}

		$html = '<svg class="dealroot-chart__axis" viewBox="0 0 ' . (int) $left . ' ' . (int) $height . '" style="width: ' . (int) $left . 'px; height: ' . (int) $height . 'px" aria-hidden="true">';

		foreach ( $ticks as $tick ) {
			$html .= '<text class="dealroot-chart__tick" x="' . (int) ( $left - 10 ) . '" y="' . esc_attr( (string) round( $y( $tick ) + 4, 1 ) ) . '" text-anchor="end">' . esc_html( (string) $label( $tick ) ) . '</text>';
		}

		return $html . '</svg>';
	}

	/**
	 * An hour of the day as the site writes times, e.g. "14:00" or "2:00 pm".
	 *
	 * @param int $hour Hour, 0 to 24.
	 * @return string
	 */
	public static function clock( $hour ) {
		return wp_date( (string) get_option( 'time_format' ), ( (int) $hour % 24 ) * HOUR_IN_SECONDS, new \DateTimeZone( 'UTC' ) );
	}

	/**
	 * Every n-th label, so at most about $most fit below an axis.
	 *
	 * @param int $count Labels.
	 * @param int $most  Labels that fit.
	 * @return int
	 */
	private static function every( $count, $most ) {
		return max( 1, (int) ceil( $count / max( 1, $most ) ) );
	}

	/**
	 * Revenue and ad costs per day, week or month as pairs of columns on one money axis: the
	 * gray one what the ads cost, the green one what the customers bought for. Above them the
	 * sums of the period and what each unit spent on ads brought back.
	 *
	 * @param array $series Chart_Data::series().
	 * @return string HTML.
	 */
	public static function money( array $series ) {
		$rows     = array_values( $series['rows'] );
		$count    = count( $rows );
		$currency = $series['currency'];
		$costs    = ! empty( $series['costs'] );

		if ( $count < 2 ) {
			return '';
		}

		$revenue = array_sum( wp_list_pluck( $rows, 'revenue' ) );
		$spent   = array_sum( wp_list_pluck( $rows, 'cost' ) );
		$width   = self::width( $count, 34 );
		$height  = 260;
		$left    = 76;
		$right   = 16;
		$top     = 14;
		$bottom  = 30;
		$plot_w  = $width - $left - $right;
		$plot_h  = $height - $top - $bottom;
		$most    = max( 1, (float) max( array_merge( array( 0 ), array_values( wp_list_pluck( $rows, 'revenue' ) ), $costs ? array_values( wp_list_pluck( $rows, 'cost' ) ) : array() ) ) );
		$ticks   = self::ticks( $most );
		$scale   = end( $ticks );
		$band    = min( 110, $plot_w / $count );
		$start   = $left + ( $plot_w - $band * $count ) / 2;
		$bar     = $costs ? min( 22, max( 2, ( $band - 6 ) / 2 ) ) : min( 24, max( 3, $band - 6 ) );
		$base    = $top + $plot_h;
		$y       = static fn( $v ) => $top + $plot_h - ( $v / $scale ) * $plot_h;

		ob_start();
		?>
		<div class="dealroot-chart dealroot-chart--money">
			<dl class="dealroot-chart__sums">
				<div>
					<dt><span class="dealroot-chart__swatch" style="background: <?php echo esc_attr( self::MONEY ); ?>"></span><?php esc_html_e( 'Revenue', 'dealroot' ); ?></dt>
					<dd><?php echo esc_html( Format::money( $revenue, $currency ) ); ?></dd>
				</div>
				<?php if ( $costs ) : ?>
					<div>
						<dt><span class="dealroot-chart__swatch" style="background: <?php echo esc_attr( self::COST ); ?>"></span><?php esc_html_e( 'Ad costs', 'dealroot' ); ?></dt>
						<dd><?php echo esc_html( Format::money( round( $spent ), $currency ) ); ?></dd>
					</div>
					<?php if ( $spent > 0 ) : ?>
						<div>
							<dt><?php esc_html_e( 'Left after the ads', 'dealroot' ); ?></dt>
							<dd class="<?php echo $revenue >= $spent ? 'is-good' : 'is-bad'; ?>"><?php echo esc_html( Format::money( round( $revenue - $spent ), $currency ) ); ?></dd>
						</div>
					<?php endif; ?>
				<?php endif; ?>
			</dl>
			<div class="dealroot-chart__frame">
				<?php echo wp_kses( self::axis( $width, $height, $left, $ticks, $y, static fn( $tick ) => self::short_money( $tick, $currency ) ), Kses::screen() ); ?>
				<div class="dealroot-chart__scroll<?php echo $width > 1000 ? ' is-wide' : ''; ?>">
					<svg viewBox="0 0 <?php echo (int) $width; ?> <?php echo (int) $height; ?>"<?php echo $width > 1000 ? ' style="' . esc_attr( self::wide( $width ) ) . '"' : ''; ?> role="img" aria-label="<?php esc_attr_e( 'Revenue and ad costs over time', 'dealroot' ); ?>">
						<?php foreach ( $ticks as $tick ) : ?>
							<line class="dealroot-chart__grid" x1="<?php echo (int) $left; ?>" x2="<?php echo (int) ( $width - $right ); ?>" y1="<?php echo esc_attr( (string) round( $y( $tick ), 1 ) ); ?>" y2="<?php echo esc_attr( (string) round( $y( $tick ), 1 ) ); ?>"/>
							<text class="dealroot-chart__tick" x="<?php echo (int) ( $left - 10 ); ?>" y="<?php echo esc_attr( (string) round( $y( $tick ) + 4, 1 ) ); ?>" text-anchor="end"><?php echo esc_html( self::short_money( $tick, $currency ) ); ?></text>
						<?php endforeach; ?>
						<?php
						$every = self::every( $count, (int) ( $width / 70 ) );
						foreach ( $rows as $i => $row ) :
							$cx  = $start + $band * ( $i + 0.5 );
							$tip = array( array( self::MONEY, __( 'Revenue', 'dealroot' ), Format::money( $row['revenue'], $currency ) ) );
							if ( $costs ) {
								$tip[] = array( self::COST, __( 'Ad costs', 'dealroot' ), Format::money( $row['cost'], $currency ) );
								$tip[] = array( 'transparent', __( 'Left after the ads', 'dealroot' ), Format::money( $row['revenue'] - $row['cost'], $currency ) );
							}
							$money_x = $costs ? $cx + 1 : $cx - $bar / 2;
							$money_h = $row['revenue'] / $scale * $plot_h;
							$cost_h  = $row['cost'] / $scale * $plot_h;
							?>
							<g class="dealroot-chart__mark<?php echo '' !== $row['partial'] ? ' is-partial' : ''; ?>" data-tip="<?php echo esc_attr( self::tip( self::title( $row ), $tip ) ); ?>">
								<rect class="dealroot-chart__hit" x="<?php echo esc_attr( (string) round( $cx - $band / 2, 1 ) ); ?>" y="<?php echo (int) $top; ?>" width="<?php echo esc_attr( (string) round( $band, 1 ) ); ?>" height="<?php echo (int) $plot_h; ?>"/>
								<?php if ( $costs && $cost_h > 0 ) : ?>
									<path fill="<?php echo esc_attr( self::COST ); ?>" d="<?php echo esc_attr( self::bar_path( $cx - $bar - 1, $base - $cost_h, $bar, $cost_h, true ) ); ?>"/>
								<?php endif; ?>
								<?php if ( $money_h > 0 ) : ?>
									<path fill="<?php echo esc_attr( self::MONEY ); ?>" d="<?php echo esc_attr( self::bar_path( $money_x, $base - $money_h, $bar, $money_h, true ) ); ?>"/>
								<?php endif; ?>
							</g>
							<?php if ( 0 === $i % $every ) : ?>
								<text class="dealroot-chart__tick" x="<?php echo esc_attr( (string) round( $cx, 1 ) ); ?>" y="<?php echo (int) ( $height - 8 ); ?>" text-anchor="middle"><?php echo esc_html( $row['label'] ); ?></text>
							<?php endif; ?>
						<?php endforeach; ?>
					</svg>
				</div>
			</div>
			<?php if ( '' !== end( $rows )['partial'] || '' !== $rows[0]['partial'] ) : ?>
				<p class="dealroot-chart__foot"><?php esc_html_e( 'Pale columns are not complete: the day, week or month is still running or only partly in the period.', 'dealroot' ); ?></p>
			<?php endif; ?>
		</div>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * Enquiries over time as columns, the part that became customers at the bottom.
	 *
	 * @param array $series Chart_Data::series().
	 * @return string HTML.
	 */
	public static function columns( array $series ) {
		$rows  = array_values( $series['rows'] );
		$count = count( $rows );

		if ( $count < 2 ) {
			return '';
		}

		$width  = self::width( $count, 26 );
		$height = 240;
		$left   = 44;
		$right  = 16;
		$top    = 14;
		$bottom = 30;
		$plot_w = $width - $left - $right;
		$plot_h = $height - $top - $bottom;
		$ticks  = self::ticks( max( 1, max( wp_list_pluck( $rows, 'leads' ) ) ) );
		$scale  = end( $ticks );
		$band   = min( 110, $plot_w / $count );
		$start  = $left + ( $plot_w - $band * $count ) / 2;
		$bar    = min( 24, max( 3, $band - 4 ) );
		$y      = static fn( $v ) => $top + $plot_h - ( $v / $scale ) * $plot_h;

		ob_start();
		?>
		<div class="dealroot-chart dealroot-chart--columns">
			<div class="dealroot-chart__frame">
				<?php echo wp_kses( self::axis( $width, $height, $left, $ticks, $y, 'number_format_i18n' ), Kses::screen() ); ?>
				<div class="dealroot-chart__scroll<?php echo $width > 1000 ? ' is-wide' : ''; ?>">
					<svg viewBox="0 0 <?php echo (int) $width; ?> <?php echo (int) $height; ?>"<?php echo $width > 1000 ? ' style="' . esc_attr( self::wide( $width ) ) . '"' : ''; ?> role="img" aria-label="<?php esc_attr_e( 'Enquiries and customers over time', 'dealroot' ); ?>">
						<?php foreach ( $ticks as $tick ) : ?>
							<line class="dealroot-chart__grid" x1="<?php echo (int) $left; ?>" x2="<?php echo (int) ( $width - $right ); ?>" y1="<?php echo esc_attr( (string) round( $y( $tick ), 1 ) ); ?>" y2="<?php echo esc_attr( (string) round( $y( $tick ), 1 ) ); ?>"/>
							<text class="dealroot-chart__tick" x="<?php echo (int) ( $left - 10 ); ?>" y="<?php echo esc_attr( (string) round( $y( $tick ) + 4, 1 ) ); ?>" text-anchor="end"><?php echo esc_html( number_format_i18n( $tick ) ); ?></text>
						<?php endforeach; ?>
						<?php
						$every = self::every( $count, (int) ( $width / 70 ) );
						foreach ( $rows as $i => $row ) :
							$cx    = $start + $band * ( $i + 0.5 );
							$x0    = $cx - $bar / 2;
							$won_h = $row['won'] / $scale * $plot_h;
							$all_h = $row['leads'] / $scale * $plot_h;
							$base  = $top + $plot_h;
							$gap   = $row['won'] && $row['won'] < $row['leads'] ? 2 : 0;
							?>
							<g class="dealroot-chart__mark<?php echo '' !== $row['partial'] ? ' is-partial' : ''; ?>" data-tip="<?php echo esc_attr( self::tip( self::title( $row ), array( array( self::LIGHT, __( 'Enquiries', 'dealroot' ), number_format_i18n( $row['leads'] ) ), array( self::MONEY, __( 'Of them customers', 'dealroot' ), number_format_i18n( $row['won'] ) ) ) ) ); ?>">
								<rect class="dealroot-chart__hit" x="<?php echo esc_attr( (string) round( $cx - $band / 2, 1 ) ); ?>" y="<?php echo (int) $top; ?>" width="<?php echo esc_attr( (string) round( $band, 1 ) ); ?>" height="<?php echo (int) $plot_h; ?>"/>
								<?php if ( $row['leads'] > $row['won'] ) : ?>
									<path fill="<?php echo esc_attr( self::LIGHT ); ?>" d="<?php echo esc_attr( self::bar_path( $x0, $base - $all_h, $bar, max( 0, $all_h - $won_h - $gap ), true ) ); ?>"/>
								<?php endif; ?>
								<?php if ( $row['won'] ) : ?>
									<path fill="<?php echo esc_attr( self::MONEY ); ?>" d="<?php echo esc_attr( self::bar_path( $x0, $base - $won_h, $bar, $won_h, $row['won'] === $row['leads'] ) ); ?>"/>
								<?php endif; ?>
							</g>
							<?php if ( 0 === $i % $every ) : ?>
								<text class="dealroot-chart__tick" x="<?php echo esc_attr( (string) round( $cx, 1 ) ); ?>" y="<?php echo (int) ( $height - 8 ); ?>" text-anchor="middle"><?php echo esc_html( $row['label'] ); ?></text>
							<?php endif; ?>
						<?php endforeach; ?>
					</svg>
				</div>
			</div>
		</div>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * A column with a rounded top and a square foot.
	 *
	 * @param float $x       Left.
	 * @param float $y       Top.
	 * @param float $w       Width.
	 * @param float $h       Height.
	 * @param bool  $rounded Whether the top is rounded.
	 * @return string Path.
	 */
	private static function bar_path( $x, $y, $w, $h, $rounded ) {
		$r = $rounded ? min( 4, $w / 2, $h ) : 0;
		$x = round( $x, 1 );
		$y = round( $y, 1 );
		$w = round( $w, 1 );
		$h = round( $h, 1 );

		if ( $h <= 0 ) {
			return '';
		}

		return sprintf(
			'M%1$s,%2$s L%1$s,%3$s Q%1$s,%4$s %5$s,%4$s L%6$s,%4$s Q%7$s,%4$s %7$s,%3$s L%7$s,%2$s Z',
			$x,
			$y + $h,
			$y + $r,
			$y,
			$x + $r,
			$x + $w - $r,
			$x + $w
		);
	}

	/**
	 * A ring of shares with a legend beside it.
	 *
	 * @param array  $parts  Each label, value, colour and the text shown for the value.
	 * @param string $centre Big text in the middle.
	 * @param string $under  Small text below it.
	 * @return string HTML.
	 */
	public static function ring( array $parts, $centre, $under ) {
		$parts = array_values(
			array_filter(
				$parts,
				static function ( $part ) {
					return $part['value'] > 0;
				}
			)
		);
		$total = array_sum( wp_list_pluck( $parts, 'value' ) );

		if ( ! $parts || $total <= 0 ) {
			return '';
		}

		$size  = 220;
		$c     = $size / 2;
		$outer = 100;
		$inner = 68;
		$angle = -M_PI / 2;
		$gap   = count( $parts ) > 1 ? 0.025 : 0;

		ob_start();
		?>
		<div class="dealroot-chart dealroot-chart--ring">
			<svg viewBox="0 0 <?php echo (int) $size; ?> <?php echo (int) $size; ?>" role="img" aria-label="<?php echo esc_attr( $under ); ?>">
				<?php
				foreach ( $parts as $part ) :
					$sweep = $part['value'] / $total * 2 * M_PI;
					$from  = $angle + $gap / 2;
					$to    = $angle + $sweep - $gap / 2;
					$angle = $angle + $sweep;
					$share = Format::percent( $part['value'], $total );
					?>
					<path class="dealroot-chart__slice" tabindex="0" fill="<?php echo esc_attr( $part['color'] ); ?>" data-tip="<?php echo esc_attr( self::tip( $part['label'], array( array( $part['color'], $under, $part['shown'] . ' · ' . $share ) ) ) ); ?>" d="<?php echo esc_attr( 1 === count( $parts ) ? self::full_ring( $c, $outer, $inner ) : self::slice( $c, $outer, $inner, $from, max( $from + 0.001, $to ) ) ); ?>"/>
				<?php endforeach; ?>
				<text class="dealroot-chart__centre" x="<?php echo (int) $c; ?>" y="<?php echo (int) ( $c + 4 ); ?>" text-anchor="middle"><?php echo esc_html( $centre ); ?></text>
				<text class="dealroot-chart__under" x="<?php echo (int) $c; ?>" y="<?php echo (int) ( $c + 26 ); ?>" text-anchor="middle"><?php echo esc_html( $under ); ?></text>
			</svg>
			<ul class="dealroot-chart__legend">
				<?php foreach ( $parts as $part ) : ?>
					<li>
						<span class="dealroot-chart__swatch" style="background: <?php echo esc_attr( $part['color'] ); ?>"></span>
						<span class="dealroot-chart__name"><?php echo esc_html( $part['label'] ); ?></span>
						<span class="dealroot-chart__value"><?php echo esc_html( $part['shown'] ); ?></span>
						<span class="dealroot-chart__share"><?php echo esc_html( Format::percent( $part['value'], $total ) ); ?></span>
					</li>
				<?php endforeach; ?>
			</ul>
		</div>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * One piece of a ring.
	 *
	 * @param float $c     Centre.
	 * @param float $outer Outer radius.
	 * @param float $inner Inner radius.
	 * @param float $from  Start angle.
	 * @param float $to    End angle.
	 * @return string Path.
	 */
	private static function slice( $c, $outer, $inner, $from, $to ) {
		$large = $to - $from > M_PI ? 1 : 0;
		$p     = static fn( $r, $a ) => round( $c + $r * cos( $a ), 2 ) . ',' . round( $c + $r * sin( $a ), 2 );

		return 'M' . $p( $outer, $from ) . ' A' . $outer . ',' . $outer . ' 0 ' . $large . ' 1 ' . $p( $outer, $to )
			. ' L' . $p( $inner, $to ) . ' A' . $inner . ',' . $inner . ' 0 ' . $large . ' 0 ' . $p( $inner, $from ) . ' Z';
	}

	/**
	 * A whole ring, for a single share.
	 *
	 * @param float $c     Centre.
	 * @param float $outer Outer radius.
	 * @param float $inner Inner radius.
	 * @return string Path.
	 */
	private static function full_ring( $c, $outer, $inner ) {
		return 'M' . ( $c - $outer ) . ',' . $c . ' a' . $outer . ',' . $outer . ' 0 1,0 ' . ( 2 * $outer ) . ',0 a' . $outer . ',' . $outer . ' 0 1,0 ' . ( -2 * $outer ) . ',0'
			. ' M' . ( $c - $inner ) . ',' . $c . ' a' . $inner . ',' . $inner . ' 0 1,1 ' . ( 2 * $inner ) . ',0 a' . $inner . ',' . $inner . ' 0 1,1 ' . ( -2 * $inner ) . ',0 Z';
	}

	/**
	 * What became of the enquiries of each channel: one bar per channel, as long as its
	 * enquiries, split into customers, still open and lost.
	 *
	 * @param array  $channels Chart_Data::channels().
	 * @param string $currency Currency.
	 * @return string HTML.
	 */
	public static function outcomes( array $channels, $currency ) {
		$channels = array_filter(
			$channels,
			static function ( $row ) {
				return $row['leads'] > 0;
			}
		);

		if ( ! $channels ) {
			return '';
		}

		// The channel that turns the most enquiries into customers comes first.
		uasort(
			$channels,
			static function ( $a, $b ) {
				// "Other" and channels with very few enquiries go last, as their share says little.
				$small = ( ! $a['slot'] || $a['leads'] < 5 ) <=> ( ! $b['slot'] || $b['leads'] < 5 );

				return 0 !== $small ? $small : $b['won'] / $b['leads'] <=> $a['won'] / $a['leads'];
			}
		);

		$most  = max( wp_list_pluck( $channels, 'leads' ) );
		$parts = array(
			'won'  => array( __( 'Customers', 'dealroot' ), self::MONEY ),
			'open' => array( __( 'Still open', 'dealroot' ), self::LIGHT ),
			'lost' => array( __( 'Lost', 'dealroot' ), self::QUIET ),
		);

		ob_start();
		?>
		<div class="dealroot-chart dealroot-chart--outcomes">
			<div class="dealroot-outcomes__row dealroot-outcomes__row--head" aria-hidden="true">
				<span></span>
				<span></span>
				<span class="dealroot-outcomes__rate"><?php esc_html_e( 'Became customers', 'dealroot' ); ?></span>
				<span class="dealroot-outcomes__money"><?php esc_html_e( 'Revenue', 'dealroot' ); ?></span>
			</div>
			<?php foreach ( $channels as $row ) : ?>
				<div class="dealroot-outcomes__row">
					<span class="dealroot-outcomes__name">
						<span class="dealroot-chart__swatch" style="background: <?php echo esc_attr( self::SLOTS[ $row['slot'] ] ?? self::SLOTS[0] ); ?>"></span>
						<span><?php echo esc_html( $row['label'] ); ?></span>
						<span class="dealroot-chart__muted"><?php echo esc_html( number_format_i18n( $row['leads'] ) ); ?></span>
					</span>
					<span class="dealroot-outcomes__track">
						<span class="dealroot-outcomes__bar" style="width: <?php echo esc_attr( (string) max( 2, round( $row['leads'] / $most * 100, 2 ) ) ); ?>%">
							<?php
							foreach ( $parts as $key => $part ) :
								if ( $row[ $key ] < 1 ) {
									continue;
								}
								/* translators: 1: channel, 2: outcome, e.g. "Paid search: Customers" */
								$title = sprintf( __( '%1$s: %2$s', 'dealroot' ), $row['label'], $part[0] );
								$tip   = array( array( $part[1], __( 'Enquiries', 'dealroot' ), number_format_i18n( $row[ $key ] ) . ' · ' . Format::percent( $row[ $key ], $row['leads'] ) ) );
								if ( 'won' === $key && $row['revenue'] > 0 ) {
									$tip[] = array( self::MONEY, __( 'Revenue', 'dealroot' ), Format::money( $row['revenue'], $currency ) );
								}
								?>
								<span class="dealroot-outcomes__part" data-tip="<?php echo esc_attr( self::tip( $title, $tip ) ); ?>" style="flex-grow: <?php echo (int) $row[ $key ]; ?>; background: <?php echo esc_attr( $part[1] ); ?>"></span>
							<?php endforeach; ?>
						</span>
					</span>
					<span class="dealroot-outcomes__rate"><?php echo esc_html( Format::percent( $row['won'], $row['leads'] ) ); ?></span>
					<span class="dealroot-outcomes__money"><?php echo esc_html( $row['revenue'] > 0 ? Format::money( $row['revenue'], $currency ) : '—' ); ?></span>
				</div>
			<?php endforeach; ?>
		</div>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * Enquiries per day of the week and hour, darker where more came.
	 *
	 * @param array $hours Chart_Data::hours().
	 * @return string HTML.
	 */
	public static function heat( array $hours ) {
		if ( $hours['total'] < 1 ) {
			return '';
		}

		$cell  = 34;
		$row_h = 26;
		$left  = 44;
		$top   = 52;
		$width = $left + 24 * $cell + 20;
		$parts = array(
			0  => __( 'Night', 'dealroot' ),
			6  => __( 'Morning', 'dealroot' ),
			12 => __( 'Afternoon', 'dealroot' ),
			18 => __( 'Evening', 'dealroot' ),
		);

		$most = max( 1, $hours['most'] );
		$low  = $most;
		$days = array();

		// The steps go from the quietest hour with an enquiry to the busiest one.
		foreach ( $hours['cells'] as $cells ) {
			foreach ( $cells as $n ) {
				$low = $n > 0 ? min( $low, $n ) : $low;
			}
		}
		$low = $low >= $most ? 0 : $low;

		// Monday to Sunday in the language of the site.
		for ( $day = 1; $day <= 7; $day++ ) {
			$days[ $day ] = wp_date( 'D', strtotime( 'monday this week +' . ( $day - 1 ) . ' days' ) );
		}

		ob_start();
		?>
		<div class="dealroot-chart dealroot-chart--heat">
			<svg viewBox="0 0 <?php echo (int) $width; ?> <?php echo (int) ( $top + 7 * $row_h + 4 ); ?>" role="img" aria-label="<?php esc_attr_e( 'When enquiries arrive', 'dealroot' ); ?>">
				<?php foreach ( $parts as $from => $part ) : ?>
					<rect class="dealroot-chart__part" x="<?php echo (int) ( $left + $from * $cell ); ?>" y="2" width="<?php echo (int) ( 6 * $cell - 2 ); ?>" height="18" rx="4"/>
					<text class="dealroot-chart__part-label" x="<?php echo (int) ( $left + ( $from + 3 ) * $cell - 1 ); ?>" y="15" text-anchor="middle"><?php echo esc_html( $part ); ?></text>
				<?php endforeach; ?>
				<?php for ( $hour = 0; $hour <= 24; $hour += 3 ) : ?>
					<line class="dealroot-chart__grid" x1="<?php echo (int) ( $left + $hour * $cell - 1 ); ?>" x2="<?php echo (int) ( $left + $hour * $cell - 1 ); ?>" y1="<?php echo (int) ( $top - 6 ); ?>" y2="<?php echo (int) ( $top - 1 ); ?>"/>
					<text class="dealroot-chart__tick" x="<?php echo (int) ( $left + $hour * $cell - 1 ); ?>" y="<?php echo (int) ( $top - 10 ); ?>" text-anchor="<?php echo 0 === $hour ? 'start' : ( 24 === $hour ? 'end' : 'middle' ); ?>"><?php echo esc_html( self::clock( $hour ) ); ?></text>
				<?php endfor; ?>
				<?php foreach ( $days as $day => $name ) : ?>
					<text class="dealroot-chart__tick" x="<?php echo (int) ( $left - 10 ); ?>" y="<?php echo (int) ( $top + ( $day - 1 ) * $row_h + 17 ); ?>" text-anchor="end"><?php echo esc_html( $name ); ?></text>
					<?php for ( $hour = 0; $hour < 24; $hour++ ) : ?>
						<?php
						$n    = (int) $hours['cells'][ $day ][ $hour ];
						$step = $n ? min( 5, 1 + (int) floor( ( $n - $low ) / max( 1, $most - $low ) * 4.999 ) ) : 0;
						/* translators: 1: day of the week, 2: hour, 3: hour */
						$title = sprintf( __( '%1$s, %2$s–%3$s', 'dealroot' ), $name, self::clock( $hour ), self::clock( $hour + 1 ) );
						?>
						<rect class="dealroot-chart__cell" data-tip="<?php echo esc_attr( self::tip( $title, array( array( self::HEAT[ max( 1, $step ) ], __( 'Enquiries', 'dealroot' ), number_format_i18n( $n ) ) ) ) ); ?>" x="<?php echo (int) ( $left + $hour * $cell ); ?>" y="<?php echo (int) ( $top + ( $day - 1 ) * $row_h ); ?>" width="<?php echo (int) ( $cell - 2 ); ?>" height="<?php echo (int) ( $row_h - 2 ); ?>" rx="3" fill="<?php echo esc_attr( self::HEAT[ $step ] ); ?>"/>
					<?php endfor; ?>
				<?php endforeach; ?>
			</svg>
			<p class="dealroot-chart__scale">
				<span><?php esc_html_e( 'Few', 'dealroot' ); ?></span>
				<?php foreach ( self::HEAT as $color ) : ?>
					<span class="dealroot-chart__swatch" style="background: <?php echo esc_attr( $color ); ?>"></span>
				<?php endforeach; ?>
				<span><?php esc_html_e( 'Many', 'dealroot' ); ?></span>
			</p>
		</div>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * Small columns for each of the last days, next to the same day of the week before.
	 *
	 * @param array $days Chart_Data::recent_days().
	 * @return string HTML.
	 */
	public static function pairs( array $days ) {
		$count = count( $days );
		$most  = max( 1, max( array_merge( array( 0 ), array_values( wp_list_pluck( $days, 'now' ) ), array_values( wp_list_pluck( $days, 'before' ) ) ) ) );

		if ( $count < 1 ) {
			return '';
		}

		$width  = 420;
		$height = 130;
		$top    = 18;
		$bottom = 22;
		$plot_h = $height - $top - $bottom;
		$band   = $width / $count;
		$bar    = min( 16, ( $band - 10 ) / 2 );
		$base   = $top + $plot_h;

		ob_start();
		?>
		<div class="dealroot-chart dealroot-chart--pairs">
			<svg viewBox="0 0 <?php echo (int) $width; ?> <?php echo (int) $height; ?>" role="img" aria-label="<?php esc_attr_e( 'Enquiries per day, compared with the week before', 'dealroot' ); ?>">
				<line class="dealroot-chart__grid" x1="0" x2="<?php echo (int) $width; ?>" y1="<?php echo (int) $base; ?>" y2="<?php echo (int) $base; ?>"/>
				<?php
				foreach ( array_values( $days ) as $i => $day ) :
					$cx     = $band * ( $i + 0.5 );
					$now_h  = $day['now'] / $most * $plot_h;
					$prev_h = $day['before'] / $most * $plot_h;
					?>
					<g class="dealroot-chart__mark" data-tip="<?php echo esc_attr( self::tip( $day['long'], array( array( self::MONEY, __( 'Enquiries', 'dealroot' ), number_format_i18n( $day['now'] ) ), array( self::LIGHT, __( 'A week before', 'dealroot' ), number_format_i18n( $day['before'] ) ) ) ) ); ?>">
						<rect class="dealroot-chart__hit" x="<?php echo esc_attr( (string) round( $cx - $band / 2, 1 ) ); ?>" y="0" width="<?php echo esc_attr( (string) round( $band, 1 ) ); ?>" height="<?php echo (int) $height; ?>"/>
						<?php if ( $day['before'] ) : ?>
							<path fill="<?php echo esc_attr( self::LIGHT ); ?>" d="<?php echo esc_attr( self::bar_path( $cx - $bar - 1, $base - $prev_h, $bar, $prev_h, true ) ); ?>"/>
						<?php endif; ?>
						<?php if ( $day['now'] ) : ?>
							<path fill="<?php echo esc_attr( self::MONEY ); ?>" d="<?php echo esc_attr( self::bar_path( $cx + 1, $base - $now_h, $bar, $now_h, true ) ); ?>"/>
							<text class="dealroot-chart__tick dealroot-chart__tick--ink" x="<?php echo esc_attr( (string) round( $cx + 1 + $bar / 2, 1 ) ); ?>" y="<?php echo esc_attr( (string) round( $base - $now_h - 5, 1 ) ); ?>" text-anchor="middle"><?php echo esc_html( number_format_i18n( $day['now'] ) ); ?></text>
						<?php endif; ?>
					</g>
					<text class="dealroot-chart__tick<?php echo $i === $count - 1 ? ' dealroot-chart__tick--ink' : ''; ?>" x="<?php echo esc_attr( (string) round( $cx, 1 ) ); ?>" y="<?php echo (int) ( $height - 5 ); ?>" text-anchor="middle"><?php echo esc_html( $day['label'] ); ?></text>
				<?php endforeach; ?>
			</svg>
		</div>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * Money added up day by day through the month, next to the month before.
	 *
	 * @param array  $pace     Chart_Data::month_pace().
	 * @param string $currency Currency.
	 * @return string HTML.
	 */
	public static function pace( array $pace, $currency ) {
		$days  = (int) $pace['days'];
		$today = count( $pace['now'] );

		if ( $days < 2 || $today < 1 ) {
			return '';
		}

		$width  = 420;
		$height = 140;
		$left   = 4;
		$right  = 70;
		$top    = 16;
		$bottom = 20;
		$plot_w = $width - $left - $right;
		$plot_h = $height - $top - $bottom;
		$most   = max( 1, max( array_merge( array( 0 ), array_values( $pace['now'] ), array_values( $pace['before'] ) ) ) );
		$x      = static fn( $day ) => $left + ( $day - 1 ) / ( $days - 1 ) * $plot_w;
		$y      = static fn( $v ) => $top + $plot_h - $v / $most * $plot_h;
		$path   = static function ( array $values ) use ( $x, $y ) {
			$points = array();
			foreach ( array_values( $values ) as $i => $value ) {
				$points[] = round( $x( $i + 1 ), 1 ) . ',' . round( $y( $value ), 1 );
			}

			return 'M' . implode( ' L', $points );
		};
		$end    = (float) end( $pace['now'] );
		$then   = (float) ( $pace['before'][ $today - 1 ] ?? end( $pace['before'] ) );

		ob_start();
		?>
		<div class="dealroot-chart dealroot-chart--pace">
			<svg viewBox="0 0 <?php echo (int) $width; ?> <?php echo (int) $height; ?>" role="img" aria-label="<?php esc_attr_e( 'Revenue this month, day by day, compared with last month', 'dealroot' ); ?>">
				<line class="dealroot-chart__grid" x1="<?php echo (int) $left; ?>" x2="<?php echo (int) ( $width - $right ); ?>" y1="<?php echo (int) ( $top + $plot_h ); ?>" y2="<?php echo (int) ( $top + $plot_h ); ?>"/>
				<?php if ( count( $pace['before'] ) > 1 ) : ?>
					<path class="dealroot-chart__line is-partial" stroke="<?php echo esc_attr( self::QUIET ); ?>" d="<?php echo esc_attr( $path( $pace['before'] ) ); ?>"/>
				<?php endif; ?>
				<?php if ( $today > 1 ) : ?>
					<path class="dealroot-chart__area" fill="<?php echo esc_attr( self::MONEY ); ?>" d="<?php echo esc_attr( $path( $pace['now'] ) . ' L' . round( $x( $today ), 1 ) . ',' . ( $top + $plot_h ) . ' L' . $left . ',' . ( $top + $plot_h ) . ' Z' ); ?>"/>
					<path class="dealroot-chart__line" stroke="<?php echo esc_attr( self::MONEY ); ?>" d="<?php echo esc_attr( $path( $pace['now'] ) ); ?>"/>
				<?php endif; ?>
				<circle cx="<?php echo esc_attr( (string) round( $x( $today ), 1 ) ); ?>" cy="<?php echo esc_attr( (string) round( $y( $end ), 1 ) ); ?>" r="4" fill="<?php echo esc_attr( self::MONEY ); ?>" stroke="#fff" stroke-width="2"/>
				<text class="dealroot-chart__tick dealroot-chart__tick--ink" x="<?php echo esc_attr( (string) round( min( $x( $today ) + 8, $width - $right + 4 ), 1 ) ); ?>" y="<?php echo esc_attr( (string) round( max( 12, $y( $end ) - 8 ), 1 ) ); ?>"><?php echo esc_html( self::short_money( $end, $currency ) ); ?></text>
				<?php
				foreach ( array_values( $pace['now'] ) as $i => $value ) :
					$day = $i + 1;
					$tip = array( array( self::MONEY, __( 'This month', 'dealroot' ), Format::money( $value, $currency ) ) );
					if ( isset( $pace['before'][ $i ] ) ) {
						$tip[] = array( self::QUIET, __( 'Last month', 'dealroot' ), Format::money( $pace['before'][ $i ], $currency ) );
					}
					/* translators: %s: day of the month */
					$title = sprintf( __( 'Up to day %s', 'dealroot' ), number_format_i18n( $day ) );
					?>
					<rect class="dealroot-chart__hit" data-tip="<?php echo esc_attr( self::tip( $title, $tip ) ); ?>" x="<?php echo esc_attr( (string) round( $x( $day ) - $plot_w / $days / 2, 1 ) ); ?>" y="0" width="<?php echo esc_attr( (string) round( $plot_w / $days, 1 ) ); ?>" height="<?php echo (int) $height; ?>"/>
				<?php endforeach; ?>
				<text class="dealroot-chart__tick" x="<?php echo (int) $left; ?>" y="<?php echo (int) ( $height - 4 ); ?>">1</text>
				<text class="dealroot-chart__tick" x="<?php echo (int) ( $width - $right ); ?>" y="<?php echo (int) ( $height - 4 ); ?>" text-anchor="end"><?php echo esc_html( number_format_i18n( $days ) ); ?></text>
			</svg>
			<ul class="dealroot-chart__key is-lines">
				<li><span class="dealroot-chart__swatch" style="background: <?php echo esc_attr( self::MONEY ); ?>"></span><?php esc_html_e( 'This month', 'dealroot' ); ?></li>
				<li><span class="dealroot-chart__swatch" style="background: <?php echo esc_attr( self::QUIET ); ?>"></span>
					<?php
					/* translators: %s: amount */
					echo esc_html( sprintf( __( 'Last month: %s by this day', 'dealroot' ), Format::money( $then, $currency ) ) );
					?>
				</li>
			</ul>
		</div>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * Amounts as bars one above the other on one scale, e.g. the revenue and the ad costs. A bar
	 * can be split into parts, e.g. the revenue through ads and without.
	 *
	 * @param array $rows Each label, value, the value as text, the colour and optional parts,
	 *                    each label, value, the value as text and the colour.
	 * @return string HTML.
	 */
	public static function versus( array $rows ) {
		$most = max( 0.01, max( wp_list_pluck( $rows, 'value' ) ) );

		ob_start();
		?>
		<ul class="dealroot-chart dealroot-chart--bars dealroot-chart--versus">
			<?php foreach ( $rows as $row ) : ?>
				<li>
					<span class="dealroot-chart__name"><?php echo esc_html( $row['label'] ); ?></span>
					<span class="dealroot-chart__track">
						<?php if ( ! empty( $row['parts'] ) ) : ?>
							<span class="dealroot-chart__fill dealroot-chart__fill--parts" style="width: <?php echo esc_attr( (string) max( 1, round( $row['value'] / $most * 100, 1 ) ) ); ?>%">
								<?php foreach ( $row['parts'] as $part ) : ?>
									<?php if ( $part['value'] > 0 ) : ?>
										<span data-tip="<?php echo esc_attr( self::tip( $part['label'], array( array( $part['color'], $part['label'], $part['shown'] ) ) ) ); ?>" style="flex-grow: <?php echo esc_attr( (string) round( $part['value'], 2 ) ); ?>; background: <?php echo esc_attr( $part['color'] ); ?>"></span>
									<?php endif; ?>
								<?php endforeach; ?>
							</span>
						<?php else : ?>
							<span class="dealroot-chart__fill" style="width: <?php echo esc_attr( (string) max( 1, round( $row['value'] / $most * 100, 1 ) ) ); ?>%; background: <?php echo esc_attr( $row['color'] ); ?>"></span>
						<?php endif; ?>
					</span>
					<span class="dealroot-chart__value"><?php echo esc_html( $row['shown'] ); ?></span>
				</li>
			<?php endforeach; ?>
		</ul>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * Bars side by side with their values at the end, e.g. why deals were lost.
	 *
	 * @param array  $rows  Label => value.
	 * @param string $color Colour.
	 * @param array  $notes Label => a short note after the value, optional.
	 * @return string HTML.
	 */
	public static function bars( array $rows, $color, array $notes = array() ) {
		$rows = array_filter( $rows );

		if ( ! $rows ) {
			return '';
		}

		$most = max( $rows );

		ob_start();
		?>
		<ul class="dealroot-chart dealroot-chart--bars">
			<?php foreach ( $rows as $label => $value ) : ?>
				<li>
					<span class="dealroot-chart__name"><?php echo esc_html( (string) $label ); ?></span>
					<span class="dealroot-chart__track"><span class="dealroot-chart__fill" style="width: <?php echo esc_attr( (string) max( 1, round( $value / $most * 100, 1 ) ) ); ?>%; background: <?php echo esc_attr( $color ); ?>"></span></span>
					<span class="dealroot-chart__value"><?php echo esc_html( number_format_i18n( $value ) ); ?><?php echo isset( $notes[ $label ] ) ? ' <span class="dealroot-chart__muted">' . esc_html( $notes[ $label ] ) . '</span>' : ''; ?></span>
				</li>
			<?php endforeach; ?>
		</ul>
		<?php
		return (string) ob_get_clean();
	}

	/**
	 * The same numbers as a table, behind a toggle.
	 *
	 * @param array $head Column headings.
	 * @param array $rows Rows of cells.
	 * @return string HTML.
	 */
	public static function table( array $head, array $rows ) {
		if ( ! $rows ) {
			return '';
		}

		ob_start();
		?>
		<details class="dealroot-chart__table">
			<summary><?php esc_html_e( 'Show the numbers', 'dealroot' ); ?></summary>
			<table>
				<thead>
					<tr>
						<?php foreach ( $head as $i => $cell ) : ?>
							<th scope="col"<?php echo $i ? ' class="num"' : ''; ?>><?php echo esc_html( $cell ); ?></th>
						<?php endforeach; ?>
					</tr>
				</thead>
				<tbody>
					<?php foreach ( $rows as $row ) : ?>
						<tr>
							<?php foreach ( array_values( $row ) as $i => $cell ) : ?>
								<td<?php echo $i ? ' class="num"' : ''; ?>><?php echo esc_html( (string) $cell ); ?></td>
							<?php endforeach; ?>
						</tr>
					<?php endforeach; ?>
				</tbody>
			</table>
		</details>
		<?php
		return (string) ob_get_clean();
	}
}