How to use the d3-time-format.utcFormat function in d3-time-format

let localeDef: d3TimeFormat.TimeLocaleDefinition;

let localeObj: d3TimeFormat.TimeLocaleObject;

// ----------------------------------------------------------------------
// Test Formating and Parsing
// ----------------------------------------------------------------------

// local time -----------------------------------------------------------

formatFn = d3TimeFormat.timeFormat('.%L');
parseFn = d3TimeFormat.timeParse('.%L');

// utc ------------------------------------------------------------------

formatFn = d3TimeFormat.utcFormat('.%L');
parseFn = d3TimeFormat.utcParse('.%L');

// iso ------------------------------------------------------------------

let dateString: string = d3TimeFormat.isoFormat(new Date(2016, 6, 6));
let date: Date = d3TimeFormat.isoParse('2016-07-08T14:06:41.386Z');

// ----------------------------------------------------------------------
// Test Locale Definition
// ----------------------------------------------------------------------

let dateTimeSpecifier: string = localeDef.dateTime;
let dateSpecifier: string = localeDef.date;
let timeSpecifier: string = localeDef.time;
let periods: [string, string] = localeDef.periods;
let days: [string, string, string, string, string, string, string] = localeDef.days;

export function formatBirthdate(patient) {
  const bday = _.get(patient, ['profile', 'patient', 'birthday'], '');
  if (bday) {
    return utcFormat('%b %-d, %Y')(Date.parse(bday));
  }
  return '';
}

return incognito(formatter(number));
}

const formatterPer = format(".2f");
export function formatPercentage(number: number) {
  return `${formatterPer(Math.abs(number) * 100)}%`;
}

const formatterShort = format(".2s");
export function formatCurrencyShort(number: number) {
  return incognito(formatterShort(number));
}

/** Date formatters for human consumption. */
export const dateFormat = {
  year: utcFormat("%Y"),
  quarter(date: Date) {
    return `${date.getUTCFullYear()}Q${Math.floor(date.getUTCMonth() / 3) + 1}`;
  },
  month: utcFormat("%b %Y"),
  week: utcFormat("%YW%W"),
  day: utcFormat("%Y-%m-%d"),
};

/** Date formatters for the entry filter form. */
export const timeFilterDateFormat = {
  year: utcFormat("%Y"),
  quarter(date: Date) {
    return `${date.getUTCFullYear()}-Q${Math.floor(date.getUTCMonth() / 3) +
      1}`;
  },
  month: utcFormat("%Y-%m"),

import { Cache, deepMixinT, IEvent, scopedLogger, StateCallback, StateEvents, StateObject, StatePropCallback, StringAnyMap, XMLNode } from "@hpcc-js/util";
import { utcFormat, utcParse } from "d3-time-format";
import { IConnection, IOptions } from "../connection";
import { ESPExceptions } from "../espConnection";
import { SMCActivity } from "../services/wsSMC";
import * as WsTopology from "../services/wsTopology";
import * as WsWorkunits from "../services/wsWorkunits";
import { createGraph, createXGMMLGraph, ECLGraph, GraphCache, ScopeGraph, XGMMLGraph, XGMMLVertex } from "./graph";
import { Resource } from "./resource";
import { Result, ResultCache } from "./result";
import { BaseScope, Scope } from "./scope";
import { SourceFile } from "./sourceFile";
import { Timer } from "./timer";

const formatter = utcFormat("%Y-%m-%dT%H:%M:%S.%LZ");
const parser = utcParse("%Y-%m-%dT%H:%M:%S.%LZ");
const logger = scopedLogger("workunit.ts");

const WUStateID = WsWorkunits.WUStateID;

export class WorkunitCache extends Cache<{ BaseUrl: string, Wuid: string }, Workunit> {
    constructor() {
        super((obj) => {
            return `${obj.BaseUrl}-${obj.Wuid}`;
        });
    }
}
const _workunits = new WorkunitCache();

export interface DebugState {
    sequence: number;

const level = options.level;

  const typePath = {
    GOES_16: "geocolor",
    GOES_16_NATURAL: "natural_color",
    GOES_17: "geocolor",
  }[options.type];

  const which = {
    GOES_16: 16,
    GOES_16_NATURAL: 16,
    GOES_17: 17,
  }[options.type];

  const formattedDate = utcFormat("%Y%m%d")(options.date);
  const formattedDateTime = utcFormat("%Y%m%d%H%M%S")(options.date);

  const tilesURL = `${SLIDER_BASE_URL}imagery/${formattedDate}/goes-${which}---full_disk/${typePath}/${formattedDateTime}/`;
  const tiles: Tile[] = [];

  for (let y = 0; y < blocks; y++) {
    for (let x = 0; x < blocks; x++) {
      const url = `${tilesURL}${pad(level, 2)}/${pad(y, 3)}_${pad(x, 3)}.png`;

      tiles.push({
        url: getCachedUrl(url),
        x,
        y,
      });
    }
  }

function formatDate (date) {
  return utcFormat('%b %-d, %Y')(Date.parse(date));
}

export function UtcFormatDate(date: Date, format: string = '%b %e, %H:%M:%S') {
  return utcFormat(format)(date)
}

const blocks = options.blocks;
  const level = options.level;

  const typePath = {
    GOES_16: "geocolor",
    GOES_16_NATURAL: "natural_color",
    GOES_17: "geocolor",
  }[options.type];

  const which = {
    GOES_16: 16,
    GOES_16_NATURAL: 16,
    GOES_17: 17,
  }[options.type];

  const formattedDate = utcFormat("%Y%m%d")(options.date);
  const formattedDateTime = utcFormat("%Y%m%d%H%M%S")(options.date);

  const tilesURL = `${SLIDER_BASE_URL}imagery/${formattedDate}/goes-${which}---full_disk/${typePath}/${formattedDateTime}/`;
  const tiles: Tile[] = [];

  for (let y = 0; y < blocks; y++) {
    for (let x = 0; x < blocks; x++) {
      const url = `${tilesURL}${pad(level, 2)}/${pad(y, 3)}_${pad(x, 3)}.png`;

      tiles.push({
        url: getCachedUrl(url),
        x,
        y,
      });
    }
  }

const CBGDateTraceLabel = (props) => {
  if (!props.focusedDateTrace) {
    return null;
  }
  const { focusedDateTrace: { data: { localDate: date }, position } } = props;
  const formattedDate = utcFormat('%A, %B %-d')(Date.parse(date));
  return (
    <div>
      {formattedDate}}
        borderWidth={0}
        position={{ left: position.left, top: 2.25 * position.yPositions.topMargin }}
        side={'bottom'}
        tail={false}
      /&gt;
    </div>
  );
};

.html(function(d) {
        const formatter = d3TimeFormat.utcFormat('%B %Y');
        return `
          <p class="date">${formatter(d.start_time)}</p>
          <p>${Intl.NumberFormat().format(d.total)} Requests</p>
        `;
      });