@blueprint-chart/lib 0.1.31 → 0.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +877 -868
  2. package/dist/lib/lib.iife.js +11 -2
  3. package/dist/runtime/chart-css.d.ts +1 -1
  4. package/package.json +1 -1
  5. package/src/charts/chart.scss +8 -0
package/dist/lib/lib.iife.js CHANGED
@@ -5,8 +5,17 @@ var BlueprintChart=(function(l){"use strict";const v=`
5
5
  .bc-frame {
6
6
  --bc-frame-font-family: system-ui, -apple-system, sans-serif;
7
7
  --bc-frame-padding: 0;
8
+ --bc-frame-bg: #fff;
8
9
  --bc-text-color: #333;
9
10
  font-family: var(--bc-frame-font-family);
11
+ background: var(--bc-frame-bg);
12
+ }
13
+
14
+ /* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync
15
+ with the frame background; transparentBackground sets the var to
16
+ transparent at runtime. */
17
+ .bc-frame .bc-canvas-bg {
18
+ fill: var(--bc-frame-bg, #fff);
10
19
  }
11
20
 
12
21
  .bc-frame-header {
@@ -183,5 +192,5 @@ body {
183
192
  margin: 0;
184
193
  overflow: hidden;
185
194
  }
186
- `,p=new Map;let f=null;function x(){f||(f=t=>{for(const[e,r]of p)if(t.source===e.contentWindow){r(t);return}},window.addEventListener("message",f))}function b(){x(),document.querySelectorAll('script[type="application/blueprint-chart"]').forEach(y)}function y(t){var c,n;const e=(c=t.textContent)==null?void 0:c.trim();if(!e)return;const r=document.createElement("iframe");r.className="blueprint-chart-iframe",r.style.cssText="border: none; width: 100%; display: block;",r.setAttribute("sandbox","allow-scripts"),r.setAttribute("title","Blueprint Chart"),(n=t.parentNode)==null||n.insertBefore(r,t),r.srcdoc=z(e);const o=a=>{var i;((i=a.data)==null?void 0:i.type)==="blueprint-chart-resize"&&(r.style.height=`${a.data.height}px`)};p.set(r,o)}function z(t){const e=C(t);return["<!DOCTYPE html>","<html><head>",`<style>${v}</style>`,"</head><body>",`<div id="chart" class="blueprint-chart-container blueprint-chart-placeholder">${e}</div>`,"<script>","function notifySize() {"," var h = document.documentElement.scrollHeight;",' parent.postMessage({ type: "blueprint-chart-resize", height: h }, "*");',"}","notifySize();","new ResizeObserver(notifySize).observe(document.body);","<\/script>","</body></html>"].join(`
187
- `)}function C(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function u(t,e,r){let o=0,c=!1;const n=document.createElement("nav");n.className="blueprint-chart-scenes";const a=document.createElement("button");a.className="blueprint-chart-scenes-prev",a.textContent="Previous";const i=document.createElement("button");i.className="blueprint-chart-scenes-next",i.textContent="Next";const s=document.createElement("span");s.className="blueprint-chart-scenes-counter",n.appendChild(a),n.appendChild(s),n.appendChild(i),e.length>0&&t.appendChild(n);function g(){if(e.length===0){s.textContent="";return}s.textContent=`${o+1} / ${e.length}`}function d(h){if(c||e.length===0||!Number.isFinite(h))return;const m=(Math.floor(h)%e.length+e.length)%e.length;o=m,g(),r(e[m],m)}return a.addEventListener("click",()=>d(o-1)),i.addEventListener("click",()=>d(o+1)),g(),{get currentScene(){return o},get totalScenes(){return e.length},next(){d(o+1)},previous(){d(o-1)},goTo:d,destroy(){c||(c=!0,n.remove())}}}const k=u;return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",b):b(),l.createSceneController=u,l.createStepController=k,l.initBlueprint=b,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"}),l})({});
195
+ `,p=new Map;let f=null;function x(){f||(f=r=>{for(const[e,t]of p)if(r.source===e.contentWindow){t(r);return}},window.addEventListener("message",f))}function b(){x(),document.querySelectorAll('script[type="application/blueprint-chart"]').forEach(y)}function y(r){var c,a;const e=(c=r.textContent)==null?void 0:c.trim();if(!e)return;const t=document.createElement("iframe");t.className="blueprint-chart-iframe",t.style.cssText="border: none; width: 100%; display: block;",t.setAttribute("sandbox","allow-scripts"),t.setAttribute("title","Blueprint Chart"),(a=r.parentNode)==null||a.insertBefore(t,r),t.srcdoc=z(e);const o=n=>{var i;((i=n.data)==null?void 0:i.type)==="blueprint-chart-resize"&&(t.style.height=`${n.data.height}px`)};p.set(t,o)}function z(r){const e=k(r);return["<!DOCTYPE html>","<html><head>",`<style>${v}</style>`,"</head><body>",`<div id="chart" class="blueprint-chart-container blueprint-chart-placeholder">${e}</div>`,"<script>","function notifySize() {"," var h = document.documentElement.scrollHeight;",' parent.postMessage({ type: "blueprint-chart-resize", height: h }, "*");',"}","notifySize();","new ResizeObserver(notifySize).observe(document.body);","<\/script>","</body></html>"].join(`
196
+ `)}function k(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function u(r,e,t){let o=0,c=!1;const a=document.createElement("nav");a.className="blueprint-chart-scenes";const n=document.createElement("button");n.className="blueprint-chart-scenes-prev",n.textContent="Previous";const i=document.createElement("button");i.className="blueprint-chart-scenes-next",i.textContent="Next";const s=document.createElement("span");s.className="blueprint-chart-scenes-counter",a.appendChild(n),a.appendChild(s),a.appendChild(i),e.length>0&&r.appendChild(a);function g(){if(e.length===0){s.textContent="";return}s.textContent=`${o+1} / ${e.length}`}function d(h){if(c||e.length===0||!Number.isFinite(h))return;const m=(Math.floor(h)%e.length+e.length)%e.length;o=m,g(),t(e[m],m)}return n.addEventListener("click",()=>d(o-1)),i.addEventListener("click",()=>d(o+1)),g(),{get currentScene(){return o},get totalScenes(){return e.length},next(){d(o+1)},previous(){d(o-1)},goTo:d,destroy(){c||(c=!0,a.remove())}}}const C=u;return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",b):b(),l.createSceneController=u,l.createStepController=C,l.initBlueprint=b,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"}),l})({});
package/dist/runtime/chart-css.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const CHART_CSS = "\n/* Blueprint Chart \u2014 Runtime Embed Styles\n CSS custom properties with baked-in defaults for standalone iframe usage. */\n\n.bc-frame {\n --bc-frame-font-family: system-ui, -apple-system, sans-serif;\n --bc-frame-padding: 0;\n --bc-text-color: #333;\n font-family: var(--bc-frame-font-family);\n}\n\n.bc-frame-header {\n padding: var(--bc-frame-padding) var(--bc-frame-padding) 0;\n background: var(--bc-frame-header-bg, transparent);\n border-bottom: var(--bc-frame-header-border-bottom, none);\n margin-bottom: var(--bc-frame-header-margin-bottom, 0);\n}\n\n.bc-frame-body {\n padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-title {\n --bc-frame-title-color: var(--bc-text-color, #333);\n --bc-frame-title-font-size: 1.25rem;\n color: var(--bc-frame-title-color);\n font-size: var(--bc-frame-title-font-size);\n font-weight: bold;\n margin: 0;\n}\n\n.bc-frame-description {\n --bc-frame-description-color: var(--bc-text-color, #555);\n --bc-frame-description-font-size: 0.875rem;\n color: var(--bc-frame-description-color);\n font-size: var(--bc-frame-description-font-size);\n margin: 0.25rem 0 0;\n}\n\n.bc-frame-footer {\n margin-top: 0.5rem;\n gap: 0.25rem 1rem;\n padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding) var(--bc-frame-padding);\n background: var(--bc-frame-footer-bg, transparent);\n border-top: var(--bc-frame-footer-border-top, none);\n}\n\n.bc-frame-footer-left {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n gap: 0.25rem 0.75rem;\n}\n\n.bc-frame-footer-left > :not(:first-child)::before {\n content: \"\\00B7\";\n margin-right: 0.5rem;\n color: var(--bc-text-color, #888);\n}\n\n.bc-frame-footer-right {\n display: flex;\n align-items: center;\n}\n\n.bc-frame-note {\n --bc-frame-note-color: var(--bc-text-color, #888);\n --bc-frame-note-font-size: 0.75rem;\n font-style: italic;\n color: var(--bc-frame-note-color);\n font-size: var(--bc-frame-note-font-size);\n margin: 0;\n padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-byline,\n.bc-frame-source {\n --bc-frame-meta-color: var(--bc-text-color, #888);\n --bc-frame-meta-font-size: 0.75rem;\n color: var(--bc-frame-meta-color);\n font-size: var(--bc-frame-meta-font-size);\n}\n\n.bc-frame-credit {\n --bc-frame-credit-color: var(--bc-text-color, #666);\n --bc-frame-credit-font-size: 0.75rem;\n color: var(--bc-frame-credit-color);\n font-size: var(--bc-frame-credit-font-size);\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n}\n\n.bc-frame-source-link {\n color: inherit;\n text-decoration: underline;\n}\n\n.bc-axis .domain {\n stroke: var(--bc-axis-color, #333);\n}\n\n.bc-axis .tick text {\n fill: var(--bc-axis-color, #333);\n font-size: 10px;\n}\n\n.bc-axis .tick line {\n stroke: var(--bc-axis-color, #333);\n}\n\n.bc-grid-line {\n stroke: var(--bc-grid-color, #e0e0e0);\n stroke-width: 1;\n}\n\n.bc-zero-baseline {\n stroke: #666;\n stroke-width: 1;\n}\n\n.bc-bar {\n /* fill is set via D3 .attr() from data-bound colors \u2014 do not override */\n}\n\n.bc-line {\n fill: none;\n stroke-width: 2;\n}\n\n.bc-value-label {\n font-size: 11px;\n /* fill is set via D3 .attr() \u2014 do not override */\n}\n\n.bc-direct-label {\n font-size: 12px;\n font-weight: 600;\n}\n\n.bc-tooltip {\n position: absolute;\n pointer-events: none;\n background: var(--bc-tooltip-bg, #fff);\n color: var(--bc-tooltip-color, #212529);\n border: 1px solid var(--bc-tooltip-border-color, #dee2e6);\n border-radius: 4px;\n padding: 6px 10px;\n font-size: 13px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n z-index: 9999;\n display: none;\n}\n\n.bc-crosshair {\n stroke: #999;\n stroke-width: 1;\n pointer-events: none;\n}\n\n.bc-arc-label-line {\n fill: none;\n stroke: #999;\n stroke-width: 1;\n}\n\n.bc-theme-blueprint-framed {\n --bc-frame-header-border-bottom: 1px solid #e0e0e0;\n --bc-frame-header-margin-bottom: 0.5rem;\n --bc-frame-footer-bg: #f8f8f8;\n --bc-frame-footer-border-top: 1px solid #e0e0e0;\n --bc-frame-footer-padding-top: 0.625rem;\n}\n\n.blueprint-chart-error {\n color: red;\n padding: 1em;\n border: 1px solid red;\n}\n\nbody {\n margin: 0;\n overflow: hidden;\n}\n";
1
+ export declare const CHART_CSS = "\n/* Blueprint Chart \u2014 Runtime Embed Styles\n CSS custom properties with baked-in defaults for standalone iframe usage. */\n\n.bc-frame {\n --bc-frame-font-family: system-ui, -apple-system, sans-serif;\n --bc-frame-padding: 0;\n --bc-frame-bg: #fff;\n --bc-text-color: #333;\n font-family: var(--bc-frame-font-family);\n background: var(--bc-frame-bg);\n}\n\n/* Keeps the SVG's baked-in background rect (applyCanvasBackground) in sync\n with the frame background; transparentBackground sets the var to\n transparent at runtime. */\n.bc-frame .bc-canvas-bg {\n fill: var(--bc-frame-bg, #fff);\n}\n\n.bc-frame-header {\n padding: var(--bc-frame-padding) var(--bc-frame-padding) 0;\n background: var(--bc-frame-header-bg, transparent);\n border-bottom: var(--bc-frame-header-border-bottom, none);\n margin-bottom: var(--bc-frame-header-margin-bottom, 0);\n}\n\n.bc-frame-body {\n padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-title {\n --bc-frame-title-color: var(--bc-text-color, #333);\n --bc-frame-title-font-size: 1.25rem;\n color: var(--bc-frame-title-color);\n font-size: var(--bc-frame-title-font-size);\n font-weight: bold;\n margin: 0;\n}\n\n.bc-frame-description {\n --bc-frame-description-color: var(--bc-text-color, #555);\n --bc-frame-description-font-size: 0.875rem;\n color: var(--bc-frame-description-color);\n font-size: var(--bc-frame-description-font-size);\n margin: 0.25rem 0 0;\n}\n\n.bc-frame-footer {\n margin-top: 0.5rem;\n gap: 0.25rem 1rem;\n padding: var(--bc-frame-footer-padding-top, 0) var(--bc-frame-padding) var(--bc-frame-padding);\n background: var(--bc-frame-footer-bg, transparent);\n border-top: var(--bc-frame-footer-border-top, none);\n}\n\n.bc-frame-footer-left {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n gap: 0.25rem 0.75rem;\n}\n\n.bc-frame-footer-left > :not(:first-child)::before {\n content: \"\\00B7\";\n margin-right: 0.5rem;\n color: var(--bc-text-color, #888);\n}\n\n.bc-frame-footer-right {\n display: flex;\n align-items: center;\n}\n\n.bc-frame-note {\n --bc-frame-note-color: var(--bc-text-color, #888);\n --bc-frame-note-font-size: 0.75rem;\n font-style: italic;\n color: var(--bc-frame-note-color);\n font-size: var(--bc-frame-note-font-size);\n margin: 0;\n padding: 0 var(--bc-frame-padding);\n}\n\n.bc-frame-byline,\n.bc-frame-source {\n --bc-frame-meta-color: var(--bc-text-color, #888);\n --bc-frame-meta-font-size: 0.75rem;\n color: var(--bc-frame-meta-color);\n font-size: var(--bc-frame-meta-font-size);\n}\n\n.bc-frame-credit {\n --bc-frame-credit-color: var(--bc-text-color, #666);\n --bc-frame-credit-font-size: 0.75rem;\n color: var(--bc-frame-credit-color);\n font-size: var(--bc-frame-credit-font-size);\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n}\n\n.bc-frame-source-link {\n color: inherit;\n text-decoration: underline;\n}\n\n.bc-axis .domain {\n stroke: var(--bc-axis-color, #333);\n}\n\n.bc-axis .tick text {\n fill: var(--bc-axis-color, #333);\n font-size: 10px;\n}\n\n.bc-axis .tick line {\n stroke: var(--bc-axis-color, #333);\n}\n\n.bc-grid-line {\n stroke: var(--bc-grid-color, #e0e0e0);\n stroke-width: 1;\n}\n\n.bc-zero-baseline {\n stroke: #666;\n stroke-width: 1;\n}\n\n.bc-bar {\n /* fill is set via D3 .attr() from data-bound colors \u2014 do not override */\n}\n\n.bc-line {\n fill: none;\n stroke-width: 2;\n}\n\n.bc-value-label {\n font-size: 11px;\n /* fill is set via D3 .attr() \u2014 do not override */\n}\n\n.bc-direct-label {\n font-size: 12px;\n font-weight: 600;\n}\n\n.bc-tooltip {\n position: absolute;\n pointer-events: none;\n background: var(--bc-tooltip-bg, #fff);\n color: var(--bc-tooltip-color, #212529);\n border: 1px solid var(--bc-tooltip-border-color, #dee2e6);\n border-radius: 4px;\n padding: 6px 10px;\n font-size: 13px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n z-index: 9999;\n display: none;\n}\n\n.bc-crosshair {\n stroke: #999;\n stroke-width: 1;\n pointer-events: none;\n}\n\n.bc-arc-label-line {\n fill: none;\n stroke: #999;\n stroke-width: 1;\n}\n\n.bc-theme-blueprint-framed {\n --bc-frame-header-border-bottom: 1px solid #e0e0e0;\n --bc-frame-header-margin-bottom: 0.5rem;\n --bc-frame-footer-bg: #f8f8f8;\n --bc-frame-footer-border-top: 1px solid #e0e0e0;\n --bc-frame-footer-padding-top: 0.625rem;\n}\n\n.blueprint-chart-error {\n color: red;\n padding: 1em;\n border: 1px solid red;\n}\n\nbody {\n margin: 0;\n overflow: hidden;\n}\n";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blueprint-chart/lib",
3
- "version": "0.1.31",
3
+ "version": "0.1.33",
4
4
  "description": "DSL-driven charting library built on D3. Define charts as text, render them anywhere.",
5
5
  "keywords": [
6
6
  "chart",
package/src/charts/chart.scss CHANGED
@@ -35,6 +35,14 @@
35
35
  background: var(--bc-frame-bg);
36
36
  }
37
37
 
38
+ // The chart SVG carries its own background rect (applyCanvasBackground in
39
+ // canvas.ts) so the frame background survives bare-SVG extraction. This rule
40
+ // overrides the rect's baked-in fill attribute, keeping live theme switches
41
+ // and `transparentBackground` working in the browser.
42
+ .bc-frame .bc-canvas-bg {
43
+ fill: var(--bc-frame-bg, var(--bs-card-bg, #fff));
44
+ }
45
+
38
46
  // During a cross-type scene transition, `snapshotForFadeOut()` in motion.ts
39
47
  // renames `.bc-frame` -> `.bc-frame--fade-snapshot` on the overlay clone so
40
48
  // selectors targeting `.bc-frame` don't double-match the live + fading