layerchart 2.0.0-next.13 → 2.0.0-next.15

package/dist/components/ForceSimulation.svelte

@@ -1,26 +1,48 @@
 <script lang="ts" module>
-  import { forceSimulation, type Force, type Simulation, type SimulationNodeDatum } from 'd3-force';
+  import {
+    forceSimulation,
+    type Force,
+    type Simulation,
+    type SimulationLinkDatum,
+    type SimulationNodeDatum,
+  } from 'd3-force';
   import type { Snippet } from 'svelte';
 
   type Forces = Record<string, Force<any, any>>;
 
-  export type LinkPosition = {
+  export type Data<TNode = any, TLink = any> = {
+    nodes: TNode[];
+    links?: TLink[];
+  };
+
+  export type LinkPosition = Prettify<{
     x1: number;
     y1: number;
     x2: number;
     y2: number;
-  };
+  }>;
+
+  type NodeDatumFor<NodeDatum> = Prettify<NodeDatum & SimulationNodeDatum>;
+  type LinkDatumFor<NodeDatum, LinkDatum> = Prettify<
+    LinkDatum & SimulationLinkDatum<NodeDatumFor<NodeDatum>>
+  >;
 
-  export type ForceSimulationProps = {
+  type SimulationFor<NodeDatum, LinkDatum> = Simulation<
+    NodeDatumFor<NodeDatum>,
+    LinkDatumFor<NodeDatum, LinkDatum>
+  >;
+
+  export type ForceSimulationProps<NodeDatum, LinkDatum> = {
     /**
      * Force simulation parameters
      */
     forces: Forces;
 
     /**
-     * An array of links to be used for position calculation.
+     * An object with arrays of nodes and links,
+     * to be used for position calculation.
      */
-    links?: any[];
+    data: Data<NodeDatum, LinkDatum>;
 
     /**
      * Current alpha value of the simulation
@@ -88,22 +110,23 @@
     children?: Snippet<
       [
         {
-          nodes: any[];
-          simulation: Simulation<SimulationNodeDatum, undefined>;
+          nodes: NodeDatumFor<NodeDatum>[];
+          links: LinkDatumFor<NodeDatum, LinkDatum>[];
           linkPositions: LinkPosition[];
+          simulation: SimulationFor<NodeDatum, LinkDatum>;
         },
       ]
     >;
   };
 </script>
 
-<script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+<script lang="ts" generics="NodeDatum, LinkDatum = undefined">
   import { watch } from 'runed';
+  import type { Prettify } from '@layerstack/utils';
 
   let {
     forces,
-    links = [],
+    data,
     alpha = $bindable(1),
     alphaTarget = 0,
     alphaDecay = 1 - Math.pow(0.001, 1 / 300),
@@ -116,18 +139,23 @@
     onEnd: onEndProp = () => {},
     children,
     cloneNodes = false,
-  }: ForceSimulationProps = $props();
-
-  const ctx = getChartContext();
+  }: ForceSimulationProps<NodeDatum, LinkDatum> = $props();
 
   // MARK: Public Props
 
   // MARK: Private Props
 
-  let nodes: SimulationNodeDatum[] = $state([]);
   let linkPositions: LinkPosition[] = $state([]);
+  let simulatedNodes: NodeDatumFor<NodeDatum>[] = $state([]);
+  let simulatedLinks: LinkDatumFor<NodeDatum, LinkDatum>[] = $derived(
+    (data.links ?? []) as LinkDatumFor<NodeDatum, LinkDatum>[]
+  );
 
-  const simulation = forceSimulation().stop();
+  // This casting is unfortunately necessary, due to unfortunate
+  // overloading choices made, over at `@typed/d3-force`:
+  const simulation: SimulationFor<NodeDatum, LinkDatum> = (
+    forceSimulation() as SimulationFor<NodeDatum, LinkDatum>
+  ).stop();
 
   // d3.Simulation does not provide a `.forces()` getter, so we need to
   // keep track of previous forces ourselves, for diffing against `forces`.
@@ -166,11 +194,11 @@
   );
 
   watch.pre(
-    () => ctx.data,
+    () => data,
     () => {
-      // Any time the `data` store gets changed we
-      // pass them to the internal d3 simulation object:
-      pushNodesToSimulation(ctx.data as any[]);
+      // Any time the `nodes` prop, or the `data` store gets changed
+      // we pass them to the internal d3 simulation object:
+      pushNodesToSimulation(data.nodes);
       runOrResumeSimulation();
     }
   );
@@ -259,7 +287,7 @@
     // Keeping the link positions in sync with the simulation
     // so we don't need to recalculate _all_ link positions on each tick
     // which bogs down the simulation
-    linkPositions = links.map((link: any) => ({
+    linkPositions = simulatedLinks.map((link: any) => ({
       x1: link.source.x ?? 0,
       y1: link.source.y ?? 0,
       x2: link.target.x ?? 0,
@@ -270,7 +298,8 @@
   // MARK: Pull State
 
   function pullNodesFromSimulation() {
-    nodes = cloneNodes ? structuredClone(simulation.nodes()) : simulation.nodes();
+    const simulationNodes = simulation.nodes();
+    simulatedNodes = cloneNodes ? structuredClone(simulationNodes) : simulationNodes;
   }
 
   function pullAlphaFromSimulation() {
@@ -393,4 +422,9 @@
   });
 </script>
 
-{@render children?.({ nodes: nodes, simulation, linkPositions })}
+{@render children?.({
+  nodes: simulatedNodes,
+  links: simulatedLinks,
+  simulation,
+  linkPositions,
+})}

package/dist/components/ForceSimulation.svelte.d.ts

@@ -1,21 +1,29 @@
-import { type Force, type Simulation, type SimulationNodeDatum } from 'd3-force';
+import { type Force, type Simulation, type SimulationLinkDatum, type SimulationNodeDatum } from 'd3-force';
 import type { Snippet } from 'svelte';
 type Forces = Record<string, Force<any, any>>;
-export type LinkPosition = {
+export type Data<TNode = any, TLink = any> = {
+    nodes: TNode[];
+    links?: TLink[];
+};
+export type LinkPosition = Prettify<{
     x1: number;
     y1: number;
     x2: number;
     y2: number;
-};
-export type ForceSimulationProps = {
+}>;
+type NodeDatumFor<NodeDatum> = Prettify<NodeDatum & SimulationNodeDatum>;
+type LinkDatumFor<NodeDatum, LinkDatum> = Prettify<LinkDatum & SimulationLinkDatum<NodeDatumFor<NodeDatum>>>;
+type SimulationFor<NodeDatum, LinkDatum> = Simulation<NodeDatumFor<NodeDatum>, LinkDatumFor<NodeDatum, LinkDatum>>;
+export type ForceSimulationProps<NodeDatum, LinkDatum> = {
     /**
      * Force simulation parameters
      */
     forces: Forces;
     /**
-     * An array of links to be used for position calculation.
+     * An object with arrays of nodes and links,
+     * to be used for position calculation.
      */
-    links?: any[];
+    data: Data<NodeDatum, LinkDatum>;
     /**
      * Current alpha value of the simulation
      * @default 1
@@ -73,12 +81,28 @@ export type ForceSimulationProps = {
     onEnd?: () => void;
     children?: Snippet<[
         {
-            nodes: any[];
-            simulation: Simulation<SimulationNodeDatum, undefined>;
+            nodes: NodeDatumFor<NodeDatum>[];
+            links: LinkDatumFor<NodeDatum, LinkDatum>[];
             linkPositions: LinkPosition[];
+            simulation: SimulationFor<NodeDatum, LinkDatum>;
         }
     ]>;
 };
-declare const ForceSimulation: import("svelte").Component<ForceSimulationProps, {}, "alpha">;
-type ForceSimulation = ReturnType<typeof ForceSimulation>;
+import type { Prettify } from '@layerstack/utils';
+declare class __sveltets_Render<NodeDatum, LinkDatum = undefined> {
+    props(): ForceSimulationProps<NodeDatum, LinkDatum>;
+    events(): {};
+    slots(): {};
+    bindings(): "alpha";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <NodeDatum, LinkDatum = undefined>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['events']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['bindings']>;
+    } & ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
+    <NodeDatum, LinkDatum = undefined>(internal: unknown, props: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']> & {}): ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ForceSimulation: $$IsomorphicComponent;
+type ForceSimulation<NodeDatum, LinkDatum = undefined> = InstanceType<typeof ForceSimulation<NodeDatum, LinkDatum>>;
 export default ForceSimulation;

package/dist/components/charts/AreaChart.svelte

@@ -135,7 +135,14 @@
 
   const series = $derived(
     seriesProp === undefined
-      ? [{ key: 'default', value: y, color: 'var(--color-primary)' }]
+      ? [
+          {
+            key: 'default',
+            label: typeof y === 'string' ? y : 'value',
+            value: y,
+            color: 'var(--color-primary)',
+          },
+        ]
       : seriesProp
   );
 

package/dist/components/charts/BarChart.svelte

@@ -159,6 +159,14 @@
       ? [
           {
             key: 'default',
+            label:
+              orientation === 'vertical'
+                ? typeof yProp === 'string'
+                  ? yProp
+                  : 'value'
+                : typeof xProp === 'string'
+                  ? xProp
+                  : 'value',
             value: orientation === 'vertical' ? yProp : xProp,
           },
         ]

package/dist/components/charts/LineChart.svelte

@@ -141,7 +141,14 @@
 
   const series = $derived(
     seriesProp === undefined
-      ? [{ key: 'default', value: yProp, color: 'var(--color-primary)' }]
+      ? [
+          {
+            key: 'default',
+            label: typeof yProp === 'string' ? yProp : 'value',
+            value: yProp,
+            color: 'var(--color-primary)',
+          },
+        ]
       : seriesProp
   );
   const seriesState = new SeriesState(() => series);

package/dist/utils/genData.d.ts

@@ -75,3 +75,17 @@ export declare function getSpiral({ angle, radius, count, width, height, }: {
     x: number;
     y: number;
 }[];
+interface SineWaveOptions {
+    numPoints: number;
+    frequency?: number;
+    amplitude?: number;
+    noiseLevel?: number;
+    phase?: number;
+    xMin?: number;
+    xMax?: number;
+}
+export declare function generateSineWave(options: SineWaveOptions): {
+    x: number;
+    y: number;
+}[];
+export {};

package/dist/utils/genData.js

@@ -124,3 +124,21 @@ export function getSpiral({ angle, radius, count, width, height, }) {
         };
     });
 }
+export function generateSineWave(options) {
+    const { numPoints, frequency = 1, amplitude = 1, noiseLevel = 0, phase = 0, xMin = 0, xMax = 2 * Math.PI, } = options;
+    if (numPoints <= 0) {
+        throw new Error('Number of points must be greater than 0');
+    }
+    const points = [];
+    const xStep = (xMax - xMin) / (numPoints - 1);
+    for (let i = 0; i < numPoints; i++) {
+        const x = xMin + i * xStep;
+        // Generate base sine wave
+        const sineValue = amplitude * Math.sin(frequency * x + phase);
+        // Add random noise if specified
+        const noise = noiseLevel > 0 ? (Math.random() - 0.5) * 2 * noiseLevel : 0;
+        const y = sineValue + noise;
+        points.push({ x, y });
+    }
+    return points;
+}

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.13",
+  "version": "2.0.0-next.15",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.44",