@datadog/vis-draw

This package offers "batteries-included" components for developing with the Datadog App Platform.

Install

yarn add @datadog/vis-draw

Documentation and Demos

Visit our live demos page for current examples

Fonts

Add this to the head of your HTML to load font families used by the graph.

<link rel="dns-prefetch" href="https://fonts.gstatic.com" />
<link
  rel="preconnect"
  crossorigin="anonymous"
  href="https://fonts.gstatic.com/"
/>
<link
  rel="stylesheet"
  crossorigin="anonymous"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"
/>

If your app uses a bundler (webpack, rollup) and you'd like to self-host the fonts:

yarn add @fontsource/noto-sans

Then in your code:

// in a root-level app file
import "@fontsource/noto-sans";

API

DashboardTimeseriesViz

This component is designed to be used on Datadog dashboards

• Changes color theme based on the active theme of a Datadog dashboard
• Adjusts displayed timeframe based on the parent Dashboard's timeframe

It accepts a config object with these properties:

type DashboardTimeseriesVizConfig = {
  //  Customize color of each series if you don't use default palette
  stroke?: { color: string; id: string; value: string }[];

  // In milliseconds
  timeExtent?: { from: number; to: number };

  // Event Handlers
  onClick?: (
    interactionData: ClickInteractionData,
    e: vega.ScenegraphEvent
  ) => void;
  onTimeframeChange?: (tf: Timeframe) => void;
  onBrushMove?: (interactionData: BrushMoveInteractionData) => void;
  onBrushEnd?: () => void;

  /* fired when the vertical rule snaps to a timestamp associated with one or more data points   */
  onCursorMove?: (interactionData: ClickInteractionData) => void;
};

Here's an example of how you might use this component in any framework:

import { init } from "@datadog/ui-extensions-sdk";
import { DashboardTimeseriesViz } from "@datadog/vis-draw";

const client = init();

const config = {
  onClick: (data) => console.log(data),
  onTimeframeChange: (timeframe) => console.log(timeframe),
};

const viz = new DashboardTimeseriesViz(client, "#viz", config);

// Fetch your data, and convert to a @datadog/vis-draw DataFrame
const data = yourCustomDataFrameFunction();

viz.draw(data);

For a more detailed example using React see this page.