@revivejs/angular-infinity-charts 2.0.0 → 21.0.0

package/docs/angular-2/app/playground.component.css

@@ -0,0 +1,250 @@
+:host {
+  display: block;
+}
+
+.panel {
+  padding: 24px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
+}
+
+.panel-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.panel-header h2 {
+  margin: 0 0 8px;
+}
+
+.panel-header p {
+  margin: 0;
+  color: #475569;
+  line-height: 1.7;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 11px 16px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  background: linear-gradient(135deg, #38bdf8, #2563eb);
+  color: #ffffff;
+  font-weight: 700;
+}
+
+.ghost-button {
+  background: rgba(255, 255, 255, 0.92);
+  color: #0f172a;
+  border-color: rgba(15, 23, 42, 0.08);
+}
+
+.code-block,
+.code-preview {
+  overflow: auto;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: #0f172a;
+  color: #dbeafe;
+  line-height: 1.6;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 13px;
+}
+
+.playground-shell {
+  display: grid;
+  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
+  gap: 20px;
+}
+
+.playground-controls,
+.playground-preview {
+  padding: 20px;
+  border-radius: 22px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: #f8fbff;
+}
+
+.playground-controls {
+  display: grid;
+  align-content: start;
+  gap: 16px;
+}
+
+.field {
+  display: grid;
+  gap: 8px;
+}
+
+.field label,
+.field span {
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.field input,
+.field select {
+  width: 100%;
+  min-height: 42px;
+  padding: 0 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  background: rgba(255, 255, 255, 0.98);
+  color: #0f172a;
+  font: inherit;
+}
+
+.toggle-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+}
+
+.toggle-row label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #334155;
+  font-size: 13px;
+}
+
+.playground-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.playground-preview-tabs {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding: 6px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.playground-preview-tab {
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #475569;
+  padding: 9px 14px;
+  cursor: pointer;
+  transition: 180ms ease;
+}
+
+.playground-preview-tab.is-active {
+  background: rgba(37, 99, 235, 0.14);
+  color: #0f172a;
+}
+
+.playground-description {
+  margin: 0 0 14px;
+  color: #475569;
+  line-height: 1.7;
+}
+
+.playground-stage {
+  min-height: 440px;
+  margin-bottom: 18px;
+}
+
+.playground-surface,
+.playground-chart-host,
+.playground-chart-slot {
+  display: block;
+  width: 100%;
+}
+
+.playground-surface {
+  padding: 18px;
+  border-radius: 20px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.playground-chart-host,
+.playground-chart-slot {
+  min-height: 220px;
+  border-radius: 20px;
+  overflow: hidden;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.surface-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.surface-head span {
+  color: #64748b;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.surface-head strong {
+  font-size: 14px;
+  color: #0f172a;
+}
+
+.surface-widget {
+  background: linear-gradient(180deg, #fffdf9, #f8fbff);
+}
+
+.widget-card {
+  padding: 16px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.widget-label {
+  margin-bottom: 12px;
+  color: #64748b;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.playground-chart-slot.is-compact {
+  min-height: 180px;
+}
+
+.surface-dark {
+  background: linear-gradient(180deg, #111b2f, #091323);
+  border-color: rgba(148, 163, 184, 0.16);
+}
+
+.surface-head.is-dark strong,
+.surface-head.is-dark span {
+  color: #e2e8f0;
+}
+
+.playground-chart-slot.is-dark {
+  border-color: rgba(148, 163, 184, 0.16);
+  background: rgba(9, 19, 35, 0.96);
+}
+
+@media (max-width: 1080px) {
+  .playground-shell {
+    grid-template-columns: 1fr;
+  }
+}

package/docs/angular-2/app/playground.component.html

@@ -0,0 +1,112 @@
+<article class="panel" id="playground">
+  <div class="panel-header">
+    <h2>Playground</h2>
+    <p>Try the Angular wrapper in a real chart surface and copy the generated snippet for your app.</p>
+  </div>
+
+  <div class="playground-shell">
+    <form class="playground-controls">
+      <div class="field">
+        <label for="playground-type">Chart type</label>
+        <select id="playground-type"
+                name="type"
+                [(ngModel)]="state.type"
+                (ngModelChange)="applyPlaygroundState(false)">
+          <option *ngFor="let chartType of chartTypes" [value]="chartType.value">{{ chartType.label }}</option>
+        </select>
+      </div>
+
+      <div class="field">
+        <label for="playground-theme">Theme</label>
+        <select id="playground-theme"
+                name="theme"
+                [(ngModel)]="state.theme"
+                (ngModelChange)="applyPlaygroundState(false)">
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </div>
+
+      <div class="field">
+        <label for="playground-height">Height <span>{{ state.height }}px</span></label>
+        <input id="playground-height"
+               name="height"
+               type="range"
+               min="220"
+               max="420"
+               step="10"
+               [(ngModel)]="state.height"
+               (ngModelChange)="applyPlaygroundState(false)" />
+      </div>
+
+      <div class="toggle-row">
+        <label><input type="checkbox" name="showLegend" [(ngModel)]="state.showLegend" (ngModelChange)="applyPlaygroundState(false)" /> Show legend</label>
+        <label><input type="checkbox" name="showTooltip" [(ngModel)]="state.showTooltip" (ngModelChange)="applyPlaygroundState(false)" /> Show tooltip</label>
+        <label><input type="checkbox" name="showNumber" [(ngModel)]="state.showNumber" (ngModelChange)="applyPlaygroundState(false)" /> Show number</label>
+        <label><input type="checkbox" name="reducedMotion" [(ngModel)]="state.reducedMotion" (ngModelChange)="applyPlaygroundState(false)" /> Reduced motion</label>
+      </div>
+
+      <div class="playground-actions">
+        <button type="button" (click)="shuffleData()">Randomize data</button>
+        <button type="button" class="ghost-button" (click)="copyCode()">{{ copyButtonLabel }}</button>
+      </div>
+    </form>
+
+    <div class="playground-preview">
+      <div class="playground-preview-tabs" role="tablist" aria-label="Preview surfaces">
+        <button *ngFor="let surface of surfaces"
+                type="button"
+                role="tab"
+                class="playground-preview-tab"
+                [class.is-active]="isSurfaceActive(surface.id)"
+                [attr.aria-selected]="isSurfaceActive(surface.id)"
+                (click)="setSurface(surface.id)">
+          {{ surface.label }}
+        </button>
+      </div>
+
+      <p class="playground-description">{{ getActiveSurfaceDescription() }}</p>
+
+      <div class="playground-stage" [ngSwitch]="activeSurface">
+        <div *ngSwitchCase="'component'" class="playground-surface">
+          <revive-infinity-chart
+            class="playground-chart-host"
+            [style.display]="'block'"
+            [style.height.px]="state.height"
+            [config]="previewConfig"></revive-infinity-chart>
+        </div>
+
+        <div *ngSwitchCase="'dashboard'" class="playground-surface surface-dashboard">
+          <div class="surface-head">
+            <span>Quarterly overview</span>
+            <strong>Directive slot</strong>
+          </div>
+          <div class="playground-chart-slot"
+               [style.height.px]="state.height"
+               [reviveInfinityChart]="previewConfig"></div>
+        </div>
+
+        <div *ngSwitchCase="'widget'" class="playground-surface surface-widget">
+          <div class="widget-card">
+            <div class="widget-label">Compact widget</div>
+            <div class="playground-chart-slot is-compact"
+                 [style.height.px]="state.height - 40"
+                 [reviveInfinityChart]="previewConfig"></div>
+          </div>
+        </div>
+
+        <div *ngSwitchDefault class="playground-surface surface-dark">
+          <div class="surface-head is-dark">
+            <span>Analytics shell</span>
+            <strong>Dark chrome</strong>
+          </div>
+          <div class="playground-chart-slot is-dark"
+               [style.height.px]="state.height"
+               [reviveInfinityChart]="previewConfig"></div>
+        </div>
+      </div>
+
+      <pre class="code-block code-preview"><code>{{ generatedCode }}</code></pre>
+    </div>
+  </div>
+</article>