{
  "builtAt": "2026-06-05T12:47:30.863Z",
  "source": "github",
  "org": {
    "name": "Ogulcan Studio",
    "description": "Ogulcan Studio Projects",
    "avatarUrl": "https://avatars.githubusercontent.com/u/290448622?v=4",
    "htmlUrl": "https://github.com/OgulcanStudio",
    "publicRepos": 3
  },
  "projects": [
    {
      "name": "OgerQuery",
      "fullName": "OgulcanStudio/OgerQuery",
      "description": "",
      "htmlUrl": "https://github.com/OgulcanStudio/OgerQuery",
      "homepage": null,
      "stars": 0,
      "forks": 0,
      "language": null,
      "topics": [],
      "license": null,
      "updatedAt": "2026-06-04T21:28:40Z",
      "pushedAt": "2026-06-04T21:28:36Z",
      "defaultBranch": "main",
      "readmeHtml": "<h1>OgerQuery</h1>\n",
      "readmeExcerpt": "OgerQuery"
    },
    {
      "name": "OgerJS",
      "fullName": "OgulcanStudio/OgerJS",
      "description": "",
      "htmlUrl": "https://github.com/OgulcanStudio/OgerJS",
      "homepage": null,
      "stars": 0,
      "forks": 0,
      "language": null,
      "topics": [],
      "license": null,
      "updatedAt": "2026-06-04T21:09:04Z",
      "pushedAt": "2026-06-04T21:09:00Z",
      "defaultBranch": "main",
      "readmeHtml": "<h1>OgerJS</h1>\n",
      "readmeExcerpt": "OgerJS"
    },
    {
      "name": "OgulcanUI",
      "fullName": "OgulcanStudio/OgulcanUI",
      "description": "Ogulcan Studio UI component pack",
      "htmlUrl": "https://github.com/OgulcanStudio/OgulcanUI",
      "homepage": null,
      "stars": 0,
      "forks": 0,
      "language": "JavaScript",
      "topics": [],
      "license": "MIT",
      "updatedAt": "2026-06-04T17:02:50Z",
      "pushedAt": "2026-06-04T17:02:46Z",
      "defaultBranch": "main",
      "readmeHtml": "<h1>OgulcanUI</h1>\n<p><strong>Fastest-first, zero-dependency chart Web Components for enterprise dashboards.</strong></p>\n<p><a href=\"https://www.npmjs.com/package/ogulcan-ui\"><img src=\"https://img.shields.io/npm/v/ogulcan-ui?label=npm%20package&amp;color=cb3837\" alt=\"npm package: ogulcan-ui\"></a></p>\n<p>OgulcanUI v0.1.0 ships <strong>50 vanilla Web Component charts</strong> 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.</p>\n<p><img src=\"https://raw.githubusercontent.com/OgulcanStudio/OgulcanUI/main/docs/charts.png\" alt=\"OgulcanUI chart catalog showing live chart cards, copyable snippets, categories, and CDN usage\"></p>\n<h2>The Speed Story</h2>\n<p>OgulcanUI is designed around the part users feel first: <strong>how fast charts appear and update on real devices</strong>. 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.</p>\n<p><img src=\"https://raw.githubusercontent.com/OgulcanStudio/OgulcanUI/main/docs/speed.png\" alt=\"OgulcanUI speed panel showing 0.90 ms average mount per chart and 0.97 ms average update per chart\"></p>\n<table>\n<thead>\n<tr>\n<th>Speed signal</th>\n<th>Current proof</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Average mount</td>\n<td>Screenshot run: <strong>0.90 ms per chart</strong></td>\n</tr>\n<tr>\n<td>Average update</td>\n<td>Screenshot run: <strong>0.97 ms per chart</strong></td>\n</tr>\n<tr>\n<td>Load gate</td>\n<td><code>bun run verify:load</code> passes all 50 charts</td>\n</tr>\n<tr>\n<td>Runtime model</td>\n<td>One JS file, static SVG, Shadow DOM, no framework runtime</td>\n</tr>\n<tr>\n<td>Update model</td>\n<td>Redraw fingerprinting skips unchanged charts</td>\n</tr>\n<tr>\n<td>Data safety</td>\n<td>Capped parsing, capped series length, oversized attributes rejected or downsampled</td>\n</tr>\n</tbody></table>\n<p>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.</p>\n<h2>Why Teams Choose OgulcanUI</h2>\n<table>\n<thead>\n<tr>\n<th>Requirement</th>\n<th>OgulcanUI v0.1.0</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Fast dashboards</td>\n<td>Browser-native custom elements with no virtual DOM or external chart engine</td>\n</tr>\n<tr>\n<td>Simple delivery</td>\n<td>One CDN script or one hosted repository artifact</td>\n</tr>\n<tr>\n<td>Small transfer</td>\n<td><code>ogulcan/ogulcan.js</code>: 668.7 KB raw, 35.3 KB gzip</td>\n</tr>\n<tr>\n<td>Tiny CSS</td>\n<td><code>ogulcan/ogulcan.css</code>: 12.1 KB raw, 3.2 KB gzip</td>\n</tr>\n<tr>\n<td>Chart coverage</td>\n<td>50 ready-made charts across operations, risk, finance, product, and strategy</td>\n</tr>\n<tr>\n<td>Accessibility checks</td>\n<td>50/50 charts pass automated chart text-alternative checks</td>\n</tr>\n<tr>\n<td>Framework fit</td>\n<td>Plain HTML, React, Svelte, Vue, Astro, Rails, Laravel, Django</td>\n</tr>\n<tr>\n<td>License</td>\n<td>MIT</td>\n</tr>\n</tbody></table>\n<p>OgulcanUI is not a code-copy starter kit. It is a chart runtime you consume as a browser file.</p>\n<h2>Quick Start: npm</h2>\n<p>Install the package from npm:</p>\n<pre><code class=\"language-bash\">npm install ogulcan-ui\n</code></pre>\n<p><a href=\"https://www.npmjs.com/package/ogulcan-ui\">View <code>ogulcan-ui</code> on npm</a></p>\n<h2>Quick Start: CDN</h2>\n<pre><code class=\"language-html\">&lt;link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/ogulcan-ui@0.1.0/dist/ogulcan-ui.css\"&gt;\n&lt;script src=\"https://cdn.jsdelivr.net/npm/ogulcan-ui@0.1.0/dist/ogulcan-ui.js\"&gt;&lt;/script&gt;\n\n&lt;ogulcan-market-pulse-line\n  label=\"Market pulse\"\n  color=\"#2563eb\"\n  data=\"42,48,46,58,63,70,76\"&gt;\n&lt;/ogulcan-market-pulse-line&gt;\n</code></pre>\n<h2>Quick Start: Repository File</h2>\n<p>Download these files from this repository and serve them from your site:</p>\n<pre><code class=\"language-text\">ogulcan/ogulcan.js\nogulcan/ogulcan.css\n</code></pre>\n<p>Then use them like this:</p>\n<pre><code class=\"language-html\">&lt;link rel=\"stylesheet\" href=\"/assets/ogulcan.css\"&gt;\n&lt;script src=\"/assets/ogulcan.js\"&gt;&lt;/script&gt;\n\n&lt;ogulcan-risk-appetite-gauge\n  label=\"Risk appetite\"\n  value=\"68\"\n  min=\"0\"\n  max=\"100\"\n  color=\"#b45309\"&gt;\n&lt;/ogulcan-risk-appetite-gauge&gt;\n</code></pre>\n<p><code>ogulcan.js</code> contains all 50 charts. You do not need to copy <code>src/components/*</code>, <code>scripts/*</code>, or generator files into your product.</p>\n<h2>Performance Architecture</h2>\n<p>OgulcanUI stays fast by keeping the runtime boring in the best possible way:</p>\n<ul>\n<li>No framework runtime</li>\n<li>No virtual DOM</li>\n<li>No external chart engine</li>\n<li>No fetch after the file loads</li>\n<li>No canvas dependency</li>\n<li>Static SVG rendered inside Shadow DOM</li>\n<li>Data parsing capped at 128 points per series</li>\n<li>Oversized attributes rejected or downsampled</li>\n<li>Redraw skipped when the chart fingerprint is unchanged</li>\n<li>ResizeObserver updates batched with <code>requestAnimationFrame</code></li>\n</ul>\n<p>Current verified load result:</p>\n<pre><code class=\"language-text\">bun run verify:load\nPassed: 50\nFailed: 0\n</code></pre>\n<h2>Accessibility</h2>\n<p>Every chart exposes a lightweight screen-reader summary:</p>\n<ul>\n<li>The chart host uses <code>role=\"img\"</code>.</li>\n<li>Decorative SVG drawing is hidden from assistive technology.</li>\n<li>A hidden <code>.chart-a11y-summary</code> text alternative is generated per chart.</li>\n<li>Automated browser audits cover all 50 charts.</li>\n</ul>\n<p>Current verified accessibility result:</p>\n<pre><code class=\"language-text\">bun run verify:a11y\nPassed: 50\nFailed: 0\n</code></pre>\n<p>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.</p>\n<h2>Use With React, Svelte, Or Plain HTML</h2>\n<p>OgulcanUI charts are custom elements. Framework wrappers are optional.</p>\n<p>Plain HTML:</p>\n<pre><code class=\"language-html\">&lt;ogulcan-uptime-kpi-spark\n  title=\"Uptime\"\n  value=\"99.98%\"\n  change=\"+0.03%\"\n  trend=\"up\"\n  sparkline=\"97,98,98,99,100\"\n  color=\"#0f766e\"&gt;\n&lt;/ogulcan-uptime-kpi-spark&gt;\n</code></pre>\n<p>React:</p>\n<pre><code class=\"language-jsx\">export function DashboardChart() {\n  return (\n    &lt;ogulcan-market-pulse-line\n      label=\"Market pulse\"\n      color=\"#2563eb\"\n      data=\"42,48,46,58,63,70,76\"\n    /&gt;\n  );\n}\n</code></pre>\n<p>Svelte:</p>\n<pre><code class=\"language-svelte\">&lt;ogulcan-market-pulse-line\n  label=\"Market pulse\"\n  color=\"#2563eb\"\n  data=\"42,48,46,58,63,70,76\" /&gt;\n</code></pre>\n<h2>Chart API</h2>\n<p>Most charts:</p>\n<pre><code class=\"language-html\">&lt;ogulcan-revenue-stream-treemap\n  label=\"Revenue\"\n  color=\"#0f766e\"\n  data=\"32,24,18,14,12\"&gt;\n&lt;/ogulcan-revenue-stream-treemap&gt;\n</code></pre>\n<p>Gauge and ring charts:</p>\n<pre><code class=\"language-html\">&lt;ogulcan-threshold-ring\n  label=\"Threshold\"\n  value=\"74\"\n  min=\"0\"\n  max=\"100\"\n  color=\"#be123c\"&gt;\n&lt;/ogulcan-threshold-ring&gt;\n</code></pre>\n<p>KPI spark charts:</p>\n<pre><code class=\"language-html\">&lt;ogulcan-burn-rate-kpi\n  title=\"Burn rate\"\n  value=\"$418K\"\n  change=\"-6.2% MoM\"\n  trend=\"down\"\n  sparkline=\"72,74,73,78,82,85,88\"\n  color=\"#1d4ed8\"&gt;\n&lt;/ogulcan-burn-rate-kpi&gt;\n</code></pre>\n<p>Data can be a comma-separated numeric list or a JSON array. For runtime changes, update attributes:</p>\n<pre><code class=\"language-js\">const chart = document.querySelector(\"ogulcan-market-pulse-line\");\nchart.setAttribute(\"data\", \"45,49,53,61,66,72\");\n</code></pre>\n<h2>Chart Catalog</h2>\n<table>\n<thead>\n<tr>\n<th>Category</th>\n<th>Charts</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Flow Intelligence</td>\n<td>CustomerJourneySankey, RevenueStreamTreemap, ChannelMixDonut, ConversionPathFunnel, SupplyChainGantt, DependencyRadar, AllocationWaterfall, SegmentBridgePareto, ProductAdoptionStack, WorkflowStepArea</td>\n</tr>\n<tr>\n<td>Signal Exploration</td>\n<td>DemandForecastProjection, AnomalyBandControl, CohortRetentionHeatmap, MarketPulseLine, SensorDriftScatter, QualityHistogram, ScenarioSensitivityMultiLine, VolatilityBoxplot, GrowthCurveArea, ThresholdRing</td>\n</tr>\n<tr>\n<td>Risk And Controls</td>\n<td>ComplianceObligationMatrix, IncidentSeverityPareto, AccessPostureRadar, RiskAppetiteGauge, AuditFindingWaterfall, ControlCoverageBullet, FraudPatternScatter, PolicyExceptionHeatmap, ExposureLimitBars, BreachRateRing</td>\n</tr>\n<tr>\n<td>Operating Pulse</td>\n<td>UptimeKpiSpark, QueueDepthBars, LatencyControlChart, CapacityStackedTrend, ReleaseTrainGantt, ServiceHealthMatrix, ErrorBudgetLine, ThroughputHistogram, WorkforceUtilizationHBars, BurnRateKpi</td>\n</tr>\n<tr>\n<td>Decision Surfaces</td>\n<td>PriceElasticityScatter, PortfolioOptimizationRadar, BudgetTradeoffWaterfall, PrioritizationTreemap, StrategyFunnel, ForecastConfidenceBoxplot, OpportunityPareto, InvestmentMixDonut, PlanVsActualBullet, ScenarioOutcomeProjection</td>\n</tr>\n</tbody></table>\n<p>Tag names are <code>ogulcan-</code> plus the kebab-case chart name. Example: <code>MarketPulseLine</code> becomes <code>&lt;ogulcan-market-pulse-line&gt;</code>.</p>\n<h2>Local Demo</h2>\n<pre><code class=\"language-bash\">bun install\nbun run build\nbun run start\n</code></pre>\n<p>Open:</p>\n<pre><code class=\"language-text\">http://localhost:3000/demo.html\n</code></pre>\n<p>The demo is a searchable live chart catalog with copyable snippets and a browser-side speed/WCAG panel.</p>\n<h2>Development</h2>\n<p>Install:</p>\n<pre><code class=\"language-bash\">bun install\n</code></pre>\n<p>Build all distributable files:</p>\n<pre><code class=\"language-bash\">bun run build\n</code></pre>\n<p>Run core verification:</p>\n<pre><code class=\"language-bash\">bun run verify:a11y\nbun run verify:load\nbun run test:playwright:structural\n</code></pre>\n<p>Important source locations:</p>\n<table>\n<thead>\n<tr>\n<th>Path</th>\n<th>Purpose</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>ogulcan/ogulcan.js</code></td>\n<td>Downloadable all-chart browser file for users</td>\n</tr>\n<tr>\n<td><code>ogulcan/ogulcan.css</code></td>\n<td>Optional shared CSS tokens for users</td>\n</tr>\n<tr>\n<td><code>dist/ogulcan-ui.js</code></td>\n<td>npm/CDN browser bundle</td>\n</tr>\n<tr>\n<td><code>src/components/</code></td>\n<td>Generated component source, not the recommended app integration path</td>\n</tr>\n<tr>\n<td><code>scripts/lib/banking-chart-catalog.js</code></td>\n<td>Catalog metadata and attribute specs</td>\n</tr>\n<tr>\n<td><code>scripts/generate-unique-charts.js</code></td>\n<td>Regenerates the 50 chart components</td>\n</tr>\n<tr>\n<td><code>docs/DOCUMENTATION.md</code></td>\n<td>Full documentation</td>\n</tr>\n</tbody></table>\n<h2>Editing Or Extending</h2>\n<p>For normal websites and products, do not edit internals. Use <code>ogulcan.js</code> or the CDN.</p>\n<p>For contributors:</p>\n<ol>\n<li>Edit catalog metadata in <code>scripts/lib/banking-chart-catalog.js</code>.</li>\n<li>Edit shared chart generation in <code>scripts/generate-unique-charts.js</code>.</li>\n<li>Run <code>bun run generate-charts</code>.</li>\n<li>Run <code>bun run build</code>.</li>\n<li>Run accessibility and load verification.</li>\n</ol>\n<p>The 50 chart folders are generated output. Direct manual edits inside one chart folder can be overwritten by the generator.</p>\n<h2>License</h2>\n<p>MIT - see <a href=\"https://raw.githubusercontent.com/OgulcanStudio/OgulcanUI/main/LICENSE\">LICENSE</a>.</p>\n",
      "readmeExcerpt": "OgulcanUI Fastestfirst, zerodependency chart Web Components for enterprise dashboards. ![npm package: ogulcanui](https://www.npmjs.com/package/ogulcanui) OgulcanUI v0.1.0 ships 50 vanilla Web Component charts in one browser file. It is built for teams that need dashboard charts …"
    }
  ]
}