Datastripes

Vanilla JS / Web Components ​

bash
npm install @datastripes/anomaly
html
<script type="module">
  import '@datastripes/anomaly/elements';
</script>

<datastripes-anomaly-studio
  api-key="..."
  api-url="https://licensing.example.com"
  algorithm="ensemble"
  data='[{"date":"2024-01-01","value":120}]'
></datastripes-anomaly-studio>

Or set the data property directly in JS for large datasets instead of serializing to an attribute:

js
document.querySelector('datastripes-anomaly-studio').data = myRows;

This registers a <datastripes-anomaly-studio> Custom Element that renders a KPI strip and a canvas chart with anomaly markers directly against the @datastripes/anomaly core, no framework required. For unordered (x, y) scatter data instead of a time series, use <datastripes-scatter-chart> — see Scatter anomaly detection.

Without a bundler ​

The import '@datastripes/anomaly/elements' form above needs a bundler (or an import map) to resolve the bare package name. For a plain <script> tag, the package also ships a self-contained IIFE build with the core engine bundled in, which registers the elements and exposes window.DatastripesElements:

html
<script src="/node_modules/@datastripes/anomaly/dist/elements/index.global.js"></script>

Serve that file from wherever your static assets live; the path above is just where npm puts it.