create-yss-spec 1.1.2 → 1.1.4

package/template/.codex/skills/data-analytics/src/datascience-chart-widget.html

@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Data Analytics chart</title>
+  </head>
+  <body>
+    <article class="widget" aria-label="Data Analytics chart widget">
+      <header>
+        <div class="detail-topbar">
+          <button class="detail-action-button top-bar-button" id="detail-back-button" type="button" aria-label="Return chart inline">
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" focusable="false">
+              <path d="m12 19-7-7 7-7" />
+              <path d="M19 12H5" />
+            </svg>
+            <span>Back</span>
+          </button>
+          <div class="detail-topbar-actions">
+            <button class="detail-action-button top-bar-button top-bar-refresh-button" id="detail-refresh-button" type="button" aria-label="Refresh using latest available data">
+              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" focusable="false">
+                <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+                <path d="M3 21v-5h5" />
+                <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+                <path d="M21 3v5h-5" />
+              </svg>
+              <span class="detail-run-time" id="detail-run-time"></span>
+            </button>
+            <div class="export-menu detail-share-menu" id="detail-share-menu">
+              <button class="detail-action-button top-bar-button" id="detail-share-button" type="button" aria-haspopup="menu" aria-expanded="false">
+                <span>Export</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="title-row compact-title-row">
+          <h1 id="title">Data Analytics chart</h1>
+          <button
+            class="display-mode-button"
+            id="display-mode-button"
+            type="button"
+            title="Edit chart"
+            aria-label="Edit chart"
+            hidden
+          ></button>
+        </div>
+        <p class="subtitle" id="subtitle" hidden></p>
+      </header>
+      <div class="app-shell">
+        <aside class="app-sidebar" aria-label="Data Analytics chart app options">
+          <section class="app-panel" id="source-panel">
+            <div class="app-panel-heading">
+              <span>Source</span>
+            </div>
+            <div class="source-details" id="source-details"></div>
+          </section>
+          <section class="app-panel">
+            <div class="app-panel-heading">
+              <span>Data</span>
+            </div>
+            <input class="field-filter" type="search" aria-label="Filter fields" placeholder="Filter..." />
+            <div id="field-list"></div>
+          </section>
+        </aside>
+        <main class="app-main">
+          <section class="detail-title-section" aria-labelledby="detail-title">
+            <div class="detail-title-row">
+              <h1 id="detail-title">Data Analytics chart</h1>
+              <button class="modal-title-close-button" id="modal-title-close-button" type="button" aria-label="Close edit chart" hidden>
+                <svg aria-hidden="true" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                  <path d="M18 6 6 18"></path>
+                  <path d="m6 6 12 12"></path>
+                </svg>
+              </button>
+            </div>
+            <p class="detail-subtitle" id="detail-subtitle" hidden></p>
+          </section>
+          <section class="app-toolbar" aria-label="View controls">
+            <div class="view-mode-tabs" role="group" aria-label="View mode">
+              <button class="view-mode-tab" type="button" data-view-mode-choice="visualization" aria-pressed="false" title="Show visualization">Vis</button>
+              <button class="view-mode-tab" type="button" data-view-mode-choice="both" aria-pressed="true" title="Show visualization and table">Both</button>
+              <button class="view-mode-tab" type="button" data-view-mode-choice="table" aria-pressed="false" title="Show table">Table</button>
+            </div>
+            <div class="query-actions">
+              <span class="query-status" id="query-status" aria-live="polite"></span>
+            </div>
+          </section>
+          <section class="controls" id="controls" aria-label="Chart controls" hidden></section>
+          <section class="chart-legend-shell" id="legend-shell" aria-label="Chart legend" hidden>
+            <ul class="legend-list" id="legend"></ul>
+          </section>
+          <section class="chart-shell" id="chart"></section>
+          <div
+            class="split-resizer"
+            id="split-resizer"
+            role="separator"
+            aria-label="Resize chart and data preview"
+            aria-orientation="horizontal"
+            aria-valuemin="35"
+            aria-valuemax="78"
+            aria-valuenow="62"
+            tabindex="0"
+          ></div>
+          <section class="bottom-split" id="bottom-split" aria-label="Source data and query preview">
+            <div class="data-section-header">
+            <div class="data-section-name">
+              <span>Source data</span>
+            </div>
+              <div class="data-mode-segmented" role="group" aria-label="Source data view">
+                <button class="data-mode-option" type="button" data-data-mode-choice="table" aria-pressed="true">Table</button>
+                <button class="data-mode-option" type="button" data-data-mode-choice="query" aria-pressed="false">Query</button>
+              </div>
+            </div>
+            <section class="data-preview" id="data-preview" aria-label="Source data table preview"></section>
+            <section class="sql-preview" id="sql-preview" aria-label="Query preview"></section>
+          </section>
+        </main>
+      </div>
+    </article>
+    <script type="module" src="./datascience-chart-widget.js"></script>
+  </body>
+</html>