JavaScript Anomaly Detection Widget, Live Demo (No Framework Required)

Add anomaly detection to any web page with a single HTML tag, no framework required. @datastripes/anomaly/elements ships <datastripes-anomaly-studio> as a standard Custom Element, so it works in plain HTML, jQuery sites, server-rendered apps, or any framework that isn't React/Vue/Angular, using the same anomaly detection engine that powers the React, Vue, and Angular builds of Datastripes.

The <datastripes-anomaly-studio> Custom Element registers itself on any page the moment its module is imported, so it mounts here exactly as it would in a plain HTML file, no bundler-specific glue required. VitePress is told to treat datastripes-* tags as native custom elements (not Vue components) via the vue.template.compilerOptions.isCustomElement option in .vitepress/config.ts.

Source

<!doctype html>
<html>
  <body>
    <datastripes-anomaly-studio id="chart" algorithm="ensemble"></datastripes-anomaly-studio>

    <script type="module">
      import '@datastripes/anomaly/elements';

      document.getElementById('chart').data = [
        { date: '2024-01-01', value: 102 },
        { date: '2024-01-02', value: 108 },
        { date: '2024-01-03', value: 99 }
      ];
    </script>
  </body>
</html>

The Custom Element registers itself as soon as the module is imported and renders directly to a shadow-root canvas. The bare @datastripes/anomaly/elements specifier needs a bundler or an import map to resolve; to skip both, load the self-contained IIFE build with a classic script tag instead (see Vanilla installation):

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

For unordered (x, y) scatter data instead of a time series, use <datastripes-scatter-chart> — see Scatter anomaly detection.