Bridge.

type Point = { label: string; value: number };

const escapeXml = (text: string) =>
  text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');

// The dashboard's chart: rank the categories, keep three, draw them as SVG.
function topCategoriesSvg(title: string, points: Point[]): string {
  const top = [...points].sort((a, b) => b.value - a.value).slice(0, 3);
  const bars = top.map((p) => {
    const width = Math.floor((p.value * 200) / top[0].value);
    const tip = `${escapeXml(p.label)}: ${p.value}`;
    return `<rect width="${width}"><title>${tip}</title></rect>`;
  });
  const head = `<title>${escapeXml(`Top categories: ${title}`)}</title>`;
  const note = `<text>${top.length} of ${points.length} shown</text>`;
  return `<svg>${head}${bars.join('')}${note}</svg>`;
}

// What every surface can draw: one bar, and a figure around the bars.
interface Surface {
  bar(label: string, value: number, largest: number): string;
  figure(title: string, bars: string[], note: string): string;
}

const escapeXml = (text: string) =>
  text.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');

// Plain text for the weekly digest: a bar is up to 20 blocks.
class TextSurface implements Surface {
  bar(label: string, value: number, largest: number): string {
    const blocks = '█'.repeat(Math.floor((value * 20) / largest));
    return `${label} ${blocks} ${value}`;
  }
  figure(title: string, bars: string[], note: string): string {
    return [title, ...bars, note].join('\n');
  }
}

// SVG for the dashboard: a bar is up to 200 units wide.
class SvgSurface implements Surface {
  bar(label: string, value: number, largest: number): string {
    const width = Math.floor((value * 200) / largest);
    const tip = `${escapeXml(label)}: ${value}`;
    return `<rect width="${width}"><title>${tip}</title></rect>`;
  }
  figure(title: string, bars: string[], note: string): string {
    const head = `<title>${escapeXml(title)}</title>`;
    return `<svg>${head}${bars.join('')}<text>${escapeXml(note)}</text></svg>`;
  }
}

type Point = { label: string; value: number };

// Top categories decides what to show: the three biggest, largest first.
class TopCategories {
  private readonly surface: Surface;
  constructor(surface: Surface) {
    this.surface = surface;
  }
  draw(title: string, points: Point[]): string {
    const top = [...points].sort((a, b) => b.value - a.value).slice(0, 3);
    const largest = top[0].value;
    const bars = top.map((p) => this.surface.bar(p.label, p.value, largest));
    const note = `${top.length} of ${points.length} shown`;
    return this.surface.figure(`Top categories: ${title}`, bars, note);
  }
}

// Weekly trend decides what to show: every week in order, and the change.
class WeeklyTrend {
  private readonly surface: Surface;
  constructor(surface: Surface) {
    this.surface = surface;
  }
  draw(title: string, points: Point[]): string {
    const largest = Math.max(...points.map((p) => p.value));
    const bars = points.map((p) => this.surface.bar(p.label, p.value, largest));
    const change = points[points.length - 1].value - points[0].value;
    const note = `Change: ${change >= 0 ? '+' : ''}${change}`;
    return this.surface.figure(`Weekly trend: ${title}`, bars, note);
  }
}

// The caller connects one chart to one surface.
const categories: Point[] = [
  { label: 'Billing & refunds', value: 12 },
  { label: 'Login', value: 30 },
  { label: 'Exports', value: 7 },
  { label: 'Mobile', value: 18 },
];
const weeks: Point[] = [
  { label: 'W1', value: 20 },
  { label: 'W2', value: 26 },
  { label: 'W3', value: 21 },
];
const svg = new SvgSurface();
const text = new TextSurface();
const title = 'Support tickets';
const dashboard = new TopCategories(svg).draw(title, categories);
const digest = new TopCategories(text).draw(title, categories);
const trend = new WeeklyTrend(text).draw(title, weeks);
console.log(dashboard);
console.log(digest);
console.log(trend);

// A logger and its transports, the split pino and winston make: the logger
// decides what an entry says (level, message, fields, a child's bound
// fields); each transport decides how an entry is written.
type Fields = Record<string, string | number>;

interface Transport {
  write(level: string, message: string, fields: Fields): void;
}

class JsonTransport implements Transport {
  write(level: string, message: string, fields: Fields): void {
    console.log(JSON.stringify({ level, msg: message, ...fields }));
  }
}

class PrettyTransport implements Transport {
  write(level: string, message: string, fields: Fields): void {
    const pairs = Object.entries(fields).map(([key, value]) => `${key}=${value}`);
    console.log([level.toUpperCase(), message, ...pairs].join(' '));
  }
}

class Logger {
  private readonly transport: Transport;
  private readonly bound: Fields;
  constructor(transport: Transport, bound: Fields = {}) {
    this.transport = transport;
    this.bound = bound;
  }
  child(fields: Fields): Logger {
    return new Logger(this.transport, { ...this.bound, ...fields });
  }
  info(message: string, fields: Fields = {}): void {
    this.transport.write('info', message, { ...this.bound, ...fields });
  }
}

const production = process.env.NODE_ENV === 'production';
const transport = production ? new JsonTransport() : new PrettyTransport();
const log = new Logger(transport).child({ service: 'checkout' });
const orderId = 'A-1042';
const attempts = 3;

// Before: the message is written on the logger's side, so every transport
// receives one sentence and the JSON log cannot be searched by orderId.
log.info(`order ${orderId} failed after ${attempts} attempts`);

// After: say what happened and hand over the facts; each transport writes
// them its own way.
log.info('order failed', { orderId, attempts });