@sentropic/dataviz-svelte 0.1.0 → 0.2.0

package/dist/SmallMultiples.test.js

@@ -0,0 +1,47 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import { createDashboardStore } from '@sentropic/dataviz-core';
+import SmallMultiples from './SmallMultiples.svelte';
+const model = {
+    dimensions: [
+        { id: 'region', label: 'Région', type: 'discrete' },
+        { id: 'product', label: 'Produit', type: 'discrete' },
+    ],
+    measures: [{ id: 'sales', label: 'Ventes', aggregation: 'sum' }],
+};
+const data = [
+    { region: 'Nord', product: 'A', sales: 10 },
+    { region: 'Nord', product: 'B', sales: 5 },
+    { region: 'Sud', product: 'A', sales: 20 },
+];
+const newStore = () => createDashboardStore({ model, data });
+const base = { viewId: 'sm', facetBy: 'region', dimension: 'product', measure: 'sales', label: 'Ventes par produit' };
+describe('SmallMultiples', () => {
+    it('renders the facet group with its aria-label', () => {
+        const { getByRole } = render(SmallMultiples, { props: { store: newStore(), ...base } });
+        expect(getByRole('group', { name: 'Ventes par produit' })).toBeTruthy();
+    });
+    it('renders one facet chart per distinct facetBy value, labelled by facet', () => {
+        const { getAllByRole } = render(SmallMultiples, { props: { store: newStore(), ...base } });
+        const charts = getAllByRole('img');
+        expect(charts).toHaveLength(2);
+        expect(charts.map((c) => c.getAttribute('aria-label'))).toEqual([
+            'Ventes par produit — Nord',
+            'Ventes par produit — Sud',
+        ]);
+    });
+    it('shares one value domain across facets (the Nord facet shows the global max 20)', () => {
+        const { container } = render(SmallMultiples, { props: { store: newStore(), ...base } });
+        const charts = container.querySelectorAll('.st-barChart');
+        expect(charts).toHaveLength(2);
+        const nordTicks = Array.from(charts[0].querySelectorAll('.st-barChart__tickLabel')).map((t) => t.textContent?.trim());
+        // Without a shared domain the Nord facet (own max 10) would top out at 10.
+        expect(nordTicks).toContain('20');
+    });
+    it('renders no facets when the facet dimension is unknown', () => {
+        const { container } = render(SmallMultiples, {
+            props: { store: newStore(), ...base, facetBy: 'nope' },
+        });
+        expect(container.querySelectorAll('.st-barChart')).toHaveLength(0);
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sentropic/dataviz-svelte",
-  "version": "0.1.0",
-  "description": "Svelte 5 adapter for @sentropic/dataviz-core, built on @sentropic/design-system-svelte.",
+  "version": "0.2.0",
+  "description": "Svelte 5 adapter + dashboard components for @sentropic/dataviz-core, built on @sentropic/design-system-svelte.",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -12,28 +12,40 @@
   "files": [
     "dist"
   ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "svelte": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     }
   },
-  "types": "./dist/index.d.ts",
-  "main": "./dist/index.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "check": "tsc -p tsconfig.json --noEmit",
+    "build": "svelte-package",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run src"
   },
   "dependencies": {
-    "@sentropic/dataviz-core": "0.1.0",
-    "@sentropic/design-system-svelte": "0.21.0",
+    "@sentropic/dataviz-core": "0.2.0",
+    "@sentropic/design-system-svelte": "0.23.0",
     "@sentropic/design-system-themes": "0.11.0"
   },
   "peerDependencies": {
     "svelte": "^5"
   },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@testing-library/svelte": "^5.3.1",
+    "svelte": "^5.56.2",
+    "svelte-check": "^4.0.0",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.5"
+  },
   "publishConfig": {
     "access": "public"
   }

package/dist/index.d.ts

@@ -1,41 +0,0 @@
-/**
- * @sentropic/dataviz-svelte
- *
- * Svelte 5 adapter for the framework-agnostic dataviz-core store. It bridges the
- * core's `getState`/`subscribe` contract onto Svelte's `Readable` store contract
- * so the dashboard state can be consumed with `$store` syntax. All presentation
- * comes from `@sentropic/design-system-svelte`; this package only wires state.
- */
-import { type DashboardState, type DashboardStore, type DashboardStoreConfig } from '@sentropic/dataviz-core';
-export * from '@sentropic/dataviz-core';
-export type { BarChartTone } from '@sentropic/design-system-svelte';
-export type { TenantTheme } from '@sentropic/design-system-themes';
-/** Minimal Svelte `Readable` contract (avoids a hard dep on `svelte/store`). */
-export interface SvelteReadable<T> {
-    subscribe(run: (value: T) => void): () => void;
-}
-/**
- * Wrap a core {@link DashboardStore} as a Svelte `Readable<DashboardState>`.
- *
- * Following the Svelte store contract, `subscribe(run)` calls `run` immediately
- * with the current state, then again after every core notification, and returns
- * an unsubscribe function.
- */
-export declare function toSvelteStore(store: DashboardStore): SvelteReadable<DashboardState>;
-/** Result of {@link createDashboard}: the core store plus its Svelte view. */
-export interface SvelteDashboard {
-    /** The underlying core store (use its mutators: setFilter, toggleSelection…). */
-    store: DashboardStore;
-    /** Svelte-readable snapshot, usable with `$state` in a component. */
-    state: SvelteReadable<DashboardState>;
-}
-/**
- * Create a dashboard store and its Svelte-readable view in one call.
- */
-export declare function createDashboard(config: DashboardStoreConfig): SvelteDashboard;
-/**
- * Canonical adapter hook (parity with React/Vue `useDashboard`).
- * Returns the Svelte-readable state for a given core store.
- */
-export declare function useDashboard(store: DashboardStore): SvelteReadable<DashboardState>;
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAC;AAGjC,cAAc,yBAAyB,CAAC;AAIxC,YAAY,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,YAAY,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,gFAAgF;AAChF,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAChD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAQnF;AAED,8EAA8E;AAC9E,MAAM,WAAW,eAAe;IAC9B,iFAAiF;IACjF,KAAK,EAAE,cAAc,CAAC;IACtB,qEAAqE;IACrE,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,oBAAoB,GAAG,eAAe,CAG7E;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAElF"}

package/dist/index.js

@@ -1,42 +0,0 @@
-/**
- * @sentropic/dataviz-svelte
- *
- * Svelte 5 adapter for the framework-agnostic dataviz-core store. It bridges the
- * core's `getState`/`subscribe` contract onto Svelte's `Readable` store contract
- * so the dashboard state can be consumed with `$store` syntax. All presentation
- * comes from `@sentropic/design-system-svelte`; this package only wires state.
- */
-import { createDashboardStore, } from '@sentropic/dataviz-core';
-// Re-export the full core surface so consumers need a single import.
-export * from '@sentropic/dataviz-core';
-/**
- * Wrap a core {@link DashboardStore} as a Svelte `Readable<DashboardState>`.
- *
- * Following the Svelte store contract, `subscribe(run)` calls `run` immediately
- * with the current state, then again after every core notification, and returns
- * an unsubscribe function.
- */
-export function toSvelteStore(store) {
-    return {
-        subscribe(run) {
-            run(store.getState());
-            const off = store.subscribe(() => run(store.getState()));
-            return off;
-        },
-    };
-}
-/**
- * Create a dashboard store and its Svelte-readable view in one call.
- */
-export function createDashboard(config) {
-    const store = createDashboardStore(config);
-    return { store, state: toSvelteStore(store) };
-}
-/**
- * Canonical adapter hook (parity with React/Vue `useDashboard`).
- * Returns the Svelte-readable state for a given core store.
- */
-export function useDashboard(store) {
-    return toSvelteStore(store);
-}
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,oBAAoB,GAIrB,MAAM,yBAAyB,CAAC;AAEjC,qEAAqE;AACrE,cAAc,yBAAyB,CAAC;AAaxC;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,KAAqB;IACjD,OAAO;QACL,SAAS,CAAC,GAAoC;YAC5C,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YACtB,MAAM,GAAG,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;YACzD,OAAO,GAAG,CAAC;QACb,CAAC;KACF,CAAC;AACJ,CAAC;AAUD;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,MAA4B;IAC1D,MAAM,KAAK,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;AAChD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,KAAqB;IAChD,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC"}