@fundar/data-chart-telling 0.0.1

package/dist/plots/markers/DeltaMarker.svelte

@@ -0,0 +1,104 @@
+<script
+  lang="ts"
+  generics="TData extends Record<string, unknown>"
+>
+  import { Line } from 'svelteplot';
+  import DotMarker from './DotMarker.svelte';
+  import TextMarker from './TextMarker.svelte';
+  import { resolveXDeltas, resolveYDeltas } from '../utils/delta';
+  import type { MarkerProps } from '../../types/plots/markers';
+  import type { Series } from '../../types/plots/common';
+  import type { DeltaConfig } from '../../types/plots/delta';
+
+  interface Props extends MarkerProps<Series<TData>>, DeltaConfig {
+    xDomain?: (number | string | Date)[];
+    yDomain?: (number | string | Date)[];
+  }
+
+  let {
+    data = [],
+    axis,
+    at,
+    from,
+    to,
+    formatDiff,
+    strokeStyle,
+    fontStyle,
+    dotStyle,
+    xDomain,
+    yDomain,
+  }: Props = $props();
+
+  const resolved = $derived.by(() => {
+    const cfg: DeltaConfig = { axis, at, from, to, formatDiff, strokeStyle, fontStyle, dotStyle };
+    const [d] = axis === 'x' ? resolveXDeltas(data, [cfg]) : resolveYDeltas(data, [cfg]);
+    return d;
+  });
+
+  const clampRange = $derived.by((): [number, number] | undefined => {
+    const domain = axis === 'x' ? yDomain : xDomain;
+    if (!domain || domain.length < 2) return undefined;
+    const lo = Number(domain[0]);
+    const hi = Number(domain[domain.length - 1]);
+    return isNaN(lo) || isNaN(hi) ? undefined : [Math.min(lo, hi), Math.max(lo, hi)];
+  });
+
+  function clamp(v: number): number {
+    return clampRange ? Math.max(clampRange[0], Math.min(clampRange[1], v)) : v;
+  }
+
+  function pt(fixed: number, varying: number) {
+    return axis === 'x' ? { x: fixed, y: varying } : { x: varying, y: fixed };
+  }
+
+  function textVaryCoord(fromVis: number, toVis: number) {
+    const anchor = fontStyle?.lineAnchor ?? 'middle';
+    return anchor === 'top'
+      ? Math.max(fromVis, toVis)
+      : anchor === 'bottom'
+      ? Math.min(fromVis, toVis)
+      : (fromVis + toVis) / 2;
+  }
+</script>
+
+{#if resolved}
+  {@const fromVis = clamp(resolved.from)}
+  {@const toVis = clamp(resolved.to)}
+  {@const textPt = pt(resolved.at, textVaryCoord(fromVis, toVis))}
+
+  <Line
+    data={[pt(resolved.at, fromVis), pt(resolved.at, toVis)]}
+    x={(p) => p.x}
+    y={(p) => p.y}
+    stroke={strokeStyle?.stroke ?? 'currentColor'}
+    strokeWidth={strokeStyle?.strokeWidth ?? 2}
+    strokeOpacity={strokeStyle?.strokeOpacity ?? 0.8}
+    strokeDasharray={strokeStyle?.strokeDasharray ?? '6 6'}
+    strokeLinecap={strokeStyle?.strokeLinecap ?? 'round'}
+  />
+  <DotMarker
+    x={pt(resolved.at, fromVis).x}
+    y={pt(resolved.at, fromVis).y}
+    style={{ dotRadius: 4, dotFill: strokeStyle?.stroke, dotStroke: strokeStyle?.stroke, dotStrokeWidth: 2, ...dotStyle }}
+  />
+  <DotMarker
+    x={pt(resolved.at, toVis).x}
+    y={pt(resolved.at, toVis).y}
+    style={{ dotRadius: 4, dotFill: strokeStyle?.stroke, dotStroke: strokeStyle?.stroke, dotStrokeWidth: 2, ...dotStyle }}
+  />
+  <TextMarker
+    x={textPt.x}
+    y={textPt.y}
+    text={(formatDiff ?? ((v: number) => v.toFixed(1)))(resolved.diff)}
+    style={{
+      fontWeight: 'bold',
+      fontSize: 14,
+      textAnchor: 'middle',
+      fill: strokeStyle?.stroke ?? 'currentColor',
+      ...fontStyle,
+      dx: fontStyle?.dx ?? (axis === 'x' ? 12 : 0),
+      dy: fontStyle?.dy ?? (axis === 'x' ? 0 : -10),
+      lineAnchor: axis === 'x' ? (fontStyle?.lineAnchor ?? 'middle') : 'bottom',
+    }}
+  />
+{/if}

package/dist/plots/markers/DeltaMarker.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { MarkerProps } from '../../types/plots/markers';
+import type { Series } from '../../types/plots/common';
+import type { DeltaConfig } from '../../types/plots/delta';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: MarkerProps<Series<TData>> & DeltaConfig & {
+        xDomain?: (number | string | Date)[];
+        yDomain?: (number | string | Date)[];
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DeltaMarker: $$IsomorphicComponent;
+type DeltaMarker<TData extends Record<string, unknown>> = InstanceType<typeof DeltaMarker<TData>>;
+export default DeltaMarker;

package/dist/plots/markers/DotMarker.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" generics="TData = Record<string, unknown>">
+  import { Dot } from 'svelteplot';
+  import type { MarkerProps } from '../../types/plots/markers';
+  import type { AxisValue } from '../../types/plots/common';
+  import type { DotStyle } from '../../types/plots/styles';
+
+  interface Props extends MarkerProps<TData> {
+    x?: AxisValue | ((d: TData) => AxisValue);
+    y?: AxisValue | ((d: TData) => AxisValue);
+    style?: DotStyle;
+  }
+
+  const { data = [], x, y, style }: Props = $props();
+
+  const xAccessor = $derived(typeof x === 'function' ? x : () => x ?? 0);
+  const yAccessor = $derived(typeof y === 'function' ? y : () => y ?? 0);
+  const displayData = $derived(data.length > 0 ? data : [{} as TData]);
+
+  const r = $derived(style?.dotRadius ?? 5);
+  const fill = $derived(style?.dotFill ?? 'currentColor');
+  const fillOpacity = $derived(style?.dotFillOpacity ?? 1);
+  const symbol = $derived(style?.dotSymbol ?? 'circle');
+  const stroke = $derived(style?.dotStroke ?? 'currentColor');
+  const strokeWidth = $derived(style?.dotStrokeWidth ?? 1);
+  const strokeOpacity = $derived(style?.dotStrokeOpacity ?? 1);
+  const strokeDasharray = $derived(style?.dotStrokeDasharray);
+</script>
+
+<Dot
+  data={displayData}
+  x={xAccessor}
+  y={yAccessor}
+  {r}
+  {fill}
+  {fillOpacity}
+  {stroke}
+  {strokeWidth}
+  {strokeOpacity}
+  {strokeDasharray}
+  {symbol}
+/>

package/dist/plots/markers/DotMarker.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { MarkerProps } from '../../types/plots/markers';
+import type { AxisValue } from '../../types/plots/common';
+import type { DotStyle } from '../../types/plots/styles';
+declare function $$render<TData = Record<string, unknown>>(): {
+    props: MarkerProps<TData> & {
+        x?: AxisValue | ((d: TData) => AxisValue);
+        y?: AxisValue | ((d: TData) => AxisValue);
+        style?: DotStyle;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DotMarker: $$IsomorphicComponent;
+type DotMarker<TData = Record<string, unknown>> = InstanceType<typeof DotMarker<TData>>;
+export default DotMarker;

package/dist/plots/markers/HoverMarker.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { RuleX, RuleY } from 'svelteplot';
+  import DotMarker from './DotMarker.svelte';
+  import TextMarker from './TextMarker.svelte';
+  import { getConfiguration } from '../../configuration/config.svelte';
+  import type { MarkerProps } from '../../types/plots/markers';
+  import type { AxisValue } from '../../types/plots/common';
+  import type { DotStyle, FontStyle, StrokeStyle } from '../../types/plots/styles';
+  import type { HoverDisplayPoint } from '../../types/layout/tooltip';
+
+  /**
+   * In-SVG hover highlight, rendered *inside* a `<Plot>`. Because it positions
+   * itself through the host plot's scales, it places the same coordinate
+   * correctly in every facet — that is what makes cross-facet sync work without
+   * any pixel math. Draws optional x/y crosshair rules plus a dot + value label
+   * for each matched point.
+   */
+  interface Props extends MarkerProps<HoverDisplayPoint> {
+    ruleX?: AxisValue | null;
+    ruleY?: AxisValue | null;
+    showLabels?: boolean;
+    ruleStyle?: StrokeStyle;
+    dotStyle?: DotStyle;
+    fontStyle?: FontStyle;
+  }
+
+  let {
+    data = [],
+    ruleX = null,
+    ruleY = null,
+    showLabels = true,
+    ruleStyle,
+    dotStyle,
+    fontStyle,
+  }: Props = $props();
+
+  const cfg = $derived(getConfiguration());
+</script>
+
+{#if ruleX != null}
+  <RuleX
+    data={[{ v: ruleX }]}
+    x={(d) => d.v}
+    stroke={ruleStyle?.stroke ?? cfg.hover.rule.stroke}
+    strokeOpacity={ruleStyle?.strokeOpacity ?? cfg.hover.rule.strokeOpacity}
+    strokeWidth={ruleStyle?.strokeWidth ?? cfg.hover.rule.strokeWidth}
+    strokeDasharray={ruleStyle?.strokeDasharray ?? cfg.hover.rule.strokeDasharray}
+  />
+{/if}
+
+{#if ruleY != null}
+  <RuleY
+    data={[{ v: ruleY }]}
+    y={(d) => d.v}
+    stroke={ruleStyle?.stroke ?? cfg.hover.rule.stroke}
+    strokeOpacity={ruleStyle?.strokeOpacity ?? cfg.hover.rule.strokeOpacity}
+    strokeWidth={ruleStyle?.strokeWidth ?? cfg.hover.rule.strokeWidth}
+    strokeDasharray={ruleStyle?.strokeDasharray ?? cfg.hover.rule.strokeDasharray}
+  />
+{/if}
+
+{#if data.length > 0}
+  <DotMarker
+    {data}
+    x={(d) => d.x}
+    y={(d) => d.y}
+    style={{ ...cfg.hover.dot, ...dotStyle }}
+  />
+  {#if showLabels}
+    <TextMarker
+      {data}
+      x={(d) => d.x}
+      y={(d) => d.y}
+      text={(d) => d.label ?? ''}
+      style={{ ...cfg.hover.font, ...fontStyle }}
+    />
+  {/if}
+{/if}

package/dist/plots/markers/HoverMarker.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { MarkerProps } from '../../types/plots/markers';
+import type { AxisValue } from '../../types/plots/common';
+import type { DotStyle, FontStyle, StrokeStyle } from '../../types/plots/styles';
+import type { HoverDisplayPoint } from '../../types/layout/tooltip';
+/**
+ * In-SVG hover highlight, rendered *inside* a `<Plot>`. Because it positions
+ * itself through the host plot's scales, it places the same coordinate
+ * correctly in every facet — that is what makes cross-facet sync work without
+ * any pixel math. Draws optional x/y crosshair rules plus a dot + value label
+ * for each matched point.
+ */
+interface Props extends MarkerProps<HoverDisplayPoint> {
+    ruleX?: AxisValue | null;
+    ruleY?: AxisValue | null;
+    showLabels?: boolean;
+    ruleStyle?: StrokeStyle;
+    dotStyle?: DotStyle;
+    fontStyle?: FontStyle;
+}
+declare const HoverMarker: import("svelte").Component<Props, {}, "">;
+type HoverMarker = ReturnType<typeof HoverMarker>;
+export default HoverMarker;

package/dist/plots/markers/PeakMarker.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import DotMarker from './DotMarker.svelte';
+  import TextMarker from './TextMarker.svelte';
+  import type { MarkerProps } from '../../types/plots/markers';
+  import type { DotStyle, FontStyle } from '../../types/plots/styles';
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  interface Props extends MarkerProps<Record<string, any>> {
+    yProp?: string;
+    xProp?: string;
+    mode?: 'max' | 'min';
+    label?: string;
+    dotStyle?: DotStyle;
+    textStyle?: FontStyle;
+  }
+
+  const {
+    data = [],
+    yProp = 'value',
+    xProp = 'x',
+    mode = 'max',
+    label,
+    dotStyle,
+    textStyle,
+    seriesColor,
+  }: Props = $props();
+
+  const resolvedDotFill = $derived(dotStyle?.dotFill ?? seriesColor ?? 'currentColor');
+  const resolvedDotStroke = $derived(dotStyle?.dotStroke ?? seriesColor ?? 'currentColor');
+  const resolvedTextFill = $derived(textStyle?.fill ?? seriesColor ?? 'currentColor');
+
+  const peakPoint = $derived.by(() => {
+    if (data.length === 0) return null;
+
+    return data.reduce((peak, current) => {
+      const currentY = current[yProp];
+      const peakY = peak[yProp];
+
+      if (mode === 'max') {
+        return currentY > peakY ? current : peak;
+      } else {
+        return currentY < peakY ? current : peak;
+      }
+    });
+  });
+
+  const peakX = $derived(peakPoint ? peakPoint[xProp] : null);
+  const peakY = $derived(peakPoint ? peakPoint[yProp] : null);
+
+  const resolvedDotStyle = $derived<DotStyle>({
+    ...dotStyle,
+    dotFill: resolvedDotFill,
+    dotStroke: resolvedDotStroke,
+  });
+
+  const resolvedTextStyle = $derived<FontStyle>({
+    ...textStyle,
+    fill: resolvedTextFill,
+    fontWeight: textStyle?.fontWeight ?? 'bold',
+    dy: textStyle?.dy ?? -15,
+  });
+</script>
+
+{#if peakPoint}
+  <DotMarker
+    data={[peakPoint]}
+    x={() => peakX}
+    y={() => peakY}
+    style={resolvedDotStyle}
+  />
+  {#if label}
+    <TextMarker
+      data={[peakPoint]}
+      x={() => peakX}
+      y={() => peakY}
+      text={label}
+      style={resolvedTextStyle}
+    />
+  {/if}
+{/if}

package/dist/plots/markers/PeakMarker.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { MarkerProps } from '../../types/plots/markers';
+import type { DotStyle, FontStyle } from '../../types/plots/styles';
+interface Props extends MarkerProps<Record<string, any>> {
+    yProp?: string;
+    xProp?: string;
+    mode?: 'max' | 'min';
+    label?: string;
+    dotStyle?: DotStyle;
+    textStyle?: FontStyle;
+}
+declare const PeakMarker: import("svelte").Component<Props, {}, "">;
+type PeakMarker = ReturnType<typeof PeakMarker>;
+export default PeakMarker;

package/dist/plots/markers/TextMarker.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" generics="TData = Record<string, unknown>">
+  import { Text } from 'svelteplot';
+  import type { MarkerProps } from '../../types/plots/markers';
+  import type { AxisValue } from '../../types/plots/common';
+  import type { FontStyle } from '../../types/plots/styles';
+
+  interface Props extends MarkerProps<TData> {
+    x?: AxisValue | ((d: TData) => AxisValue);
+    y?: AxisValue | ((d: TData) => AxisValue);
+    text?: string | ((d: TData) => string);
+    style?: FontStyle;
+  }
+
+  const {
+    data = [],
+    x,
+    y,
+    text = '',
+    style,
+  }: Props = $props();
+
+  const xAccessor = $derived(typeof x === 'function' ? x : () => x ?? 0);
+  const yAccessor = $derived(typeof y === 'function' ? y : () => y ?? 0);
+  const textAccessor = $derived(typeof text === 'function' ? text : () => text ?? '');
+  const displayData = $derived(data.length > 0 ? data : [{} as TData]);
+
+  const fill = $derived(style?.fill ?? 'currentColor');
+  const fontSize = $derived(style?.fontSize ?? 12);
+  const fontWeight = $derived(style?.fontWeight ?? 'normal');
+  const fontStyleProp = $derived(style?.fontStyle ?? 'normal');
+  const textAnchor = $derived(style?.textAnchor ?? 'middle');
+  const lineAnchor = $derived(style?.lineAnchor ?? 'middle');
+  const dx = $derived(style?.dx ?? 0);
+  const dy = $derived(style?.dy ?? 0);
+</script>
+
+{#if text}
+  <Text
+    data={displayData}
+    x={xAccessor}
+    y={yAccessor}
+    text={textAccessor}
+    {fill}
+    {fontSize}
+    {fontWeight}
+    fontStyle={fontStyleProp}
+    {textAnchor}
+    {lineAnchor}
+    stroke={style?.stroke}
+    strokeWidth={style?.strokeWidth}
+    paintOrder={style?.paintOrder}
+    {dx}
+    {dy}
+  />
+{/if}

package/dist/plots/markers/TextMarker.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { MarkerProps } from '../../types/plots/markers';
+import type { AxisValue } from '../../types/plots/common';
+import type { FontStyle } from '../../types/plots/styles';
+declare function $$render<TData = Record<string, unknown>>(): {
+    props: MarkerProps<TData> & {
+        x?: AxisValue | ((d: TData) => AxisValue);
+        y?: AxisValue | ((d: TData) => AxisValue);
+        text?: string | ((d: TData) => string);
+        style?: FontStyle;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TextMarker: $$IsomorphicComponent;
+type TextMarker<TData = Record<string, unknown>> = InstanceType<typeof TextMarker<TData>>;
+export default TextMarker;