or run

npx @tessl/cli init
Log in

Version

Files

tile.json

task.mdevals/scenario-6/

Custom Module Plot Setup

Create a small helper that prepares the plotting library to use a custom trace module and locale before rendering charts.

Capabilities

Registers provided modules

  • Given a trace module named demo_trace and an optional transform module named demo_transform, calling preparePlotting followed by renderCustomChart renders data using those identifiers on the first trace without throwing. @test

Applies the provided locale

  • After preparePlotting is called with a locale named xx-demo, the figure returned by renderCustomChart reports that locale on its layout/config and formats axis tick labels with the locale's month/day names. @test

Avoids duplicate registration

  • Calling preparePlotting twice with the same modules and locale does not register duplicates or change the resulting figure; both renders keep the custom trace type and locale intact. @test

Implementation

@generates

API

/**
 * Registers a custom trace module, optional transform module, and locale definition with the plotting library.
 * Uses the provided locale as the default for subsequent renders.
 */
export async function preparePlotting(options: {
  traceModule: object;
  transformModule?: object;
  locale: {
    name: string;
    dictionary?: Record<string, string>;
    format: Record<string, unknown>;
  };
  defaultLocale?: string;
}): Promise<void>;

/**
 * Renders a chart into the target container using the registered trace type and locale.
 * Returns the plotting element so its data/layout/config can be inspected.
 */
export async function renderCustomChart(
  target: HTMLElement,
  data: object[],
  layout?: object,
  configOverrides?: object
): Promise<HTMLElement>;

Dependencies { .dependencies }

plotly.js-dist { .dependency }

Interactive charting library for building browser-based charts.