@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.