README

OgulcanUI

Fastest-first, zero-dependency chart Web Components for enterprise dashboards.

OgulcanUI v0.1.0 ships 50 vanilla Web Component charts in one browser file. It is built for teams that need dashboard charts to mount quickly, update quickly, stay small, and work without React, Svelte, Vue, Chart.js, D3, hydration, build tooling, or runtime dependencies.

The Speed Story

OgulcanUI is designed around the part users feel first: how fast charts appear and update on real devices. The demo includes a browser-side speed panel so every team can measure mount and update time on the exact laptop, phone, browser, kiosk, or embedded environment they care about.

The screenshot is from one local browser run and will vary by device. That is intentional: OgulcanUI exposes the benchmark in the demo so users can verify speed in their own environment instead of trusting a synthetic marketing number.

Why Teams Choose OgulcanUI

OgulcanUI is not a code-copy starter kit. It is a chart runtime you consume as a browser file.

Quick Start: npm

Install the package from npm:

npm install ogulcan-ui

View ogulcan-ui on npm

Quick Start: CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ogulcan-ui@0.1.0/dist/ogulcan-ui.css">
<script src="https://cdn.jsdelivr.net/npm/ogulcan-ui@0.1.0/dist/ogulcan-ui.js"></script>

<ogulcan-market-pulse-line
  label="Market pulse"
  color="#2563eb"
  data="42,48,46,58,63,70,76">
</ogulcan-market-pulse-line>

Quick Start: Repository File

Download these files from this repository and serve them from your site:

ogulcan/ogulcan.js
ogulcan/ogulcan.css

Then use them like this:

<link rel="stylesheet" href="/assets/ogulcan.css">
<script src="/assets/ogulcan.js"></script>

<ogulcan-risk-appetite-gauge
  label="Risk appetite"
  value="68"
  min="0"
  max="100"
  color="#b45309">
</ogulcan-risk-appetite-gauge>

ogulcan.js contains all 50 charts. You do not need to copy src/components/*, scripts/*, or generator files into your product.

Performance Architecture

OgulcanUI stays fast by keeping the runtime boring in the best possible way:

• No framework runtime
• No virtual DOM
• No external chart engine
• No fetch after the file loads
• No canvas dependency
• Static SVG rendered inside Shadow DOM
• Data parsing capped at 128 points per series
• Oversized attributes rejected or downsampled
• Redraw skipped when the chart fingerprint is unchanged
• ResizeObserver updates batched with requestAnimationFrame

Current verified load result:

bun run verify:load
Passed: 50
Failed: 0

Accessibility

Every chart exposes a lightweight screen-reader summary:

• The chart host uses role="img".
• Decorative SVG drawing is hidden from assistive technology.
• A hidden .chart-a11y-summary text alternative is generated per chart.
• Automated browser audits cover all 50 charts.

Current verified accessibility result:

bun run verify:a11y
Passed: 50
Failed: 0

This is automated WCAG-oriented coverage for chart text alternatives and component semantics. Product teams still need to test complete pages for their own color contrast, headings, navigation, keyboard flows, and content.

Use With React, Svelte, Or Plain HTML

OgulcanUI charts are custom elements. Framework wrappers are optional.

Plain HTML:

<ogulcan-uptime-kpi-spark
  title="Uptime"
  value="99.98%"
  change="+0.03%"
  trend="up"
  sparkline="97,98,98,99,100"
  color="#0f766e">
</ogulcan-uptime-kpi-spark>

React:

export function DashboardChart() {
  return (
    <ogulcan-market-pulse-line
      label="Market pulse"
      color="#2563eb"
      data="42,48,46,58,63,70,76"
    />
  );
}

Svelte:

<ogulcan-market-pulse-line
  label="Market pulse"
  color="#2563eb"
  data="42,48,46,58,63,70,76" />

Chart API

Most charts:

<ogulcan-revenue-stream-treemap
  label="Revenue"
  color="#0f766e"
  data="32,24,18,14,12">
</ogulcan-revenue-stream-treemap>

Gauge and ring charts:

<ogulcan-threshold-ring
  label="Threshold"
  value="74"
  min="0"
  max="100"
  color="#be123c">
</ogulcan-threshold-ring>

KPI spark charts:

<ogulcan-burn-rate-kpi
  title="Burn rate"
  value="$418K"
  change="-6.2% MoM"
  trend="down"
  sparkline="72,74,73,78,82,85,88"
  color="#1d4ed8">
</ogulcan-burn-rate-kpi>

Data can be a comma-separated numeric list or a JSON array. For runtime changes, update attributes:

const chart = document.querySelector("ogulcan-market-pulse-line");
chart.setAttribute("data", "45,49,53,61,66,72");

Chart Catalog

Tag names are ogulcan- plus the kebab-case chart name. Example: MarketPulseLine becomes <ogulcan-market-pulse-line>.

Local Demo

bun install
bun run build
bun run start

Open:

http://localhost:3000/demo.html

The demo is a searchable live chart catalog with copyable snippets and a browser-side speed/WCAG panel.

Development

Install:

bun install

Build all distributable files:

bun run build

Run core verification:

bun run verify:a11y
bun run verify:load
bun run test:playwright:structural

Important source locations:

Editing Or Extending

For normal websites and products, do not edit internals. Use ogulcan.js or the CDN.

For contributors:

1. Edit catalog metadata in scripts/lib/banking-chart-catalog.js.
2. Edit shared chart generation in scripts/generate-unique-charts.js.
3. Run bun run generate-charts.
4. Run bun run build.
5. Run accessibility and load verification.

The 50 chart folders are generated output. Direct manual edits inside one chart folder can be overwritten by the generator.

License

MIT - see LICENSE.