@fundar/data-chart-telling 0.0.64 → 1.0.0

package/llms-full.txt

@@ -0,0 +1,114 @@
+# @fundar/data-chart-telling - guide for LLMs and coding agents
+
+Svelte 5 plot components on top of svelteplot. This file is checked against the source; the runnable files in `examples/` are type-checked and mounted by the test suite, and `docs/` has one page per topic. If this text and `dist/**/*.d.ts` differ, the types are right - tell the user.
+
+## Setup
+
+- Peer dependencies: `svelte@^5`, `svelteplot@^0.14`; `topojson-client` only for GeoPlot with TopoJSON.
+- The package ships Svelte components, so the app builds with `@sveltejs/vite-plugin-svelte` or SvelteKit.
+- Import from the package root: `import { LinePlot } from '@fundar/data-chart-telling'`.
+- Types ship with the package (`dist/index.d.ts`, JSDoc on every config field).
+
+## The mental model
+
+- A **plot** is one graph (axes + marks). Titles, subtitle, caption, legend, facets and a timeline are props of the plot itself.
+- Plots: `LinePlot AreaPlot BarPlot HistogramPlot HeatmapPlot PyramidPlot ScatterPlot GeoPlot`.
+- `PlotComposer` lays several plots out in one figure with shared hover, legend and timeline.
+- `width` and `height` are pixel numbers on a standalone plot. To fill a container or the window, bind its size (`examples/ResponsiveLine.svelte`) and render the plot once both are > 0.
+
+## Data
+
+Two ways to give data, one per plot:
+
+```svelte
+<LinePlot data={rows} x="year" y="value" color="region" {width} {height} />
+<LinePlot series={[{ name: 'North', x: 'year', y: 'value', data: rowsNorth }]} {width} {height} />
+```
+
+- `x`, `y`, `color`, `grouping`, `opacity`, `symbol`, `r`, `length` take a field name or an accessor function.
+- `grouping` splits `data` into series. When unset, `color` groups too, so the usual call is `color="region"`: one series per region, each with its own color.
+- Dates are `Date` objects (UTC midnight avoids timezone shifts); numeric years are numbers.
+- Rows are parsed, typed and sorted by the app before they reach the plot (a `?raw` CSV import plus a small parser is enough).
+- A series' name is what the legend, value labels and tooltip show: name values in the data.
+
+## Props of every x/y plot
+
+| Prop | Purpose |
+| --- | --- |
+| `title` `subtitle` `caption` | Text chrome. `header` / `footer` snippets replace title+subtitle / caption. |
+| `legend` | unset/`true`: automatic legend; `false`: none; `{ series: { interactive: { enabled: true, disabled: { mode: 'omit' } } } }` adjusts a section. |
+| `order` | Chrome blocks top to bottom, e.g. `['title','subtitle','legend','plot','caption']`; rows as `'(plot, timeline)'`; `'divider'` between blocks. |
+| `scales` | Per channel: `{ x: { label, tickFormat, domain, type, ticks, grid }, y: {...}, color: { scheme, domain } }`. |
+| `styles` | `{ values: {...}, frame: true, gaps: {...} }` (shape depends on the kind). |
+| `segments` | Style ranges of the data (rule 1 below). |
+| `markers` | Extra marks, an array of `{ type: '...', ... }`. |
+| `margins` | `{ top, right, bottom, left }`, each a number or `'auto'` (all `'auto'` by default). |
+| `tooltip` | `true` or `{ strategy, sync, format, content, series, anchorX, anchorY }`. |
+| `timeline` | `{ accessor: 'year' }` steps through the rows by a field, drawn as a player bar (default); `type: 'rule'` draws a rule beside the plot instead. |
+| `facet` | `{ by: 'field', columns, gap, scales: 'shared'\|'free', mode: 'grid'\|'carousel'\|'paginated' }` or `{ rows, cols }`. |
+| `transforms` `statistics` | svelteplot transforms / derived summaries (regression, movingAverage, ...). |
+
+Per kind: `BarPlot` x = category, y = value (swap for horizontal bars); `PyramidPlot` mirrors two series around zero; `HeatmapPlot` colors cells by `color`; `HistogramPlot` bins one numeric field; `ScatterPlot` takes `r` (size) and `symbol`; `GeoPlot` takes GeoJSON/TopoJSON in `data` and `coordinates` for the projection (`docs/geo.md`).
+
+## Switches
+
+- **Hover and tooltip** are enabled by `tooltip` and/or a hover marker. The usual look: `tooltip={true} markers={[{ type: 'hover' }]}`. `tooltip.strategy` is `'x' | 'y' | 'punctual' | 'series'`.
+- **Value labels**: `styles={{ values: { show: true } }}`. On a LinePlot they sit at the end of each series, spread apart automatically, and the right margin grows to fit them (keep `margins.right` at `'auto'`). Format with `values.format: (value, seriesName) => string`; style with `values.fontStyle`.
+- **Toggling series from the legend**: `interactive.enabled` on the series section.
+- **A frame** around the plot area: `styles={{ frame: true }}`.
+
+## Rules that matter
+
+1. `segments` is an object keyed by series name or `'default'`: `{ default: [{ areas: [{ x: { from, to } }], styles: { stroke: { strokeDasharray: '6 4' } } }] }`. A segment without `areas` is a baseline for everything; area-specific segments override it.
+2. The global configuration holds data (`setConfiguration(...)` is cloned); functions go in plot props such as `format` and `tickFormat`.
+3. A continuous color ramp is `scales.color.scheme: [colorA, colorB]` (or a named ramp such as `'blues'`); categorical colors come from `palette` or a `scheme` record.
+4. `margins` at `'auto'` (the default) fit value labels and long tick text from the measured text, also when `scales.y.domain` is pinned. A fixed number sets the side exactly.
+5. `tooltip.sync: true` in a `facet` or `PlotComposer` shows the highlight in every panel: that is how panels compare the same x.
+6. On a BarPlot the tooltip triggers anywhere over a bar's whole band (and its series' slice, when grouped).
+7. `r` takes raw values and its sqrt scale makes area follow the value; tune with `scales.r.range`. A literal number is a fixed pixel radius.
+8. Narrow plots with long category or series names: shorten the text in the data, format with `tickFormat` / `values.format`, or give `margins` more room.
+9. In Svelte 5 components, `state` is taken by the `$state` rune: name local variables otherwise.
+10. Stacking is `transforms={[{ type: 'stackY' }]}`, also for horizontal bars (the value channel is the one stacked).
+
+## Reading and driving plot state (custom UI)
+
+Inside a plot's snippets (`header`, `footer`, tooltip `content`) or any child of a figure, call during component init:
+
+- `useFigure()` returns `{ hover, legend, timeline }` for the whole figure.
+- `usePlot()` returns the same plus `margins`, `scales`, `axes`, `data`, `width`, `height`, `svelteplot` (inside a plot, e.g. a `component` marker).
+- `legend.off` (names of hidden series), `legend.isOff(name)`, `legend.toggle(name, action)`, `turnOff`, `turnOn`. `action` is `{ mode: 'dim' | 'hide' | 'omit' }`; `'omit'` removes the series and refits the axes, so the visible domain follows `legend.off`.
+- `timeline.steps`, `value`, `progress`, `playing`, `seek(p)`, `seekValue(v)`, `next()`, `previous()`, `play()`, `pause()`, `toggle()`, `setSpeed()`.
+- `hover.activeX`, `activeY`, `activeSeries`, `source`.
+
+The timeline is a player bar by default: `timeline={{ accessor: 'year', player: { controls: ['play','value','slider','speed','loop'], format, autoplay, loop, speed, stepDuration } }}`. `type: 'rule'` draws a guide beside the plot instead, driven by `progress` (a slider or scroll position of your own).
+
+## Markers
+
+Add with `markers={[{ type: '...' }]}`. For x/y plots:
+`area arrow bar bollinger box brush cell component delaunayLink delaunayMesh delta density difference dot hover hull image line raster rect regression rule text tick trail voronoi voronoiMesh waffle`.
+GeoPlot: `graticule sphere dot text vector link contour inset geo-hover geo-component`.
+
+- `delta` annotates the difference between two series at a position: `{ type: 'delta', axis: 'x', at: 2020, from: { type: 'series', series: 'A' }, to: { type: 'series', series: 'B' }, formatDiff: (d) => d.toFixed(1) }`.
+- `rule` (`axis`, `value`), `text` (`text`), `dot` annotate; `component` mounts your own Svelte component inside the plot (it can call `usePlot()`).
+- Each plot kind types its own marker union (`AxisBasedMarkersConfig`, `GeoMarkersConfig`); `satisfies` on a markers array gives completion.
+
+## Theming and locale
+
+- `setConfiguration(partial)` deep-merges global defaults (colors, fonts, spacing, legend, tooltip, timeline); `resetConfiguration()` restores them. Inside an `$effect`, wrap the call in `untrack`.
+- `THEMES` has `Default Editorial Dark Compact`: `setConfiguration(THEMES.Editorial)`.
+- Number and date text follows `axis.locale` (default `'es-AR'`) in the configuration; per axis, `tickFormat: (d) => new Intl.NumberFormat('en-US').format(d)` or an `Intl.*FormatOptions` object.
+
+## Docs (in `docs/`)
+
+`getting-started.md`, `concepts.md`, `plots.md`, `scales.md`, `styles-and-segments.md`, `markers.md`, `transforms-and-statistics.md`, `tooltip-and-hover.md`, `legend.md`, `timeline.md`, `chrome.md`, `facets.md`, `composer.md`, `state.md`, `geo.md`, `theming.md`.
+
+## Examples (in `examples/`, all runnable)
+
+- `ResponsiveLine.svelte` - fill the window, end-of-line labels, axis labels.
+- `Tooltip.svelte` - tooltip + hover marker.
+- `Segments.svelte` - styling a range of the data.
+- `LegendToggle.svelte` + `LegendReader.svelte` - interactive legend and reading its state.
+- `TimelinePlayer.svelte` - animated bar chart with a player.
+- `Facets.svelte` - small multiples with a synced tooltip.
+- `BarValues.svelte` - value labels on bars.
+- `CustomTooltip.svelte` + `TooltipCard.svelte` - a tooltip drawn with your own card (`tooltip.content`).

package/llms.txt

@@ -0,0 +1,49 @@
+# @fundar/data-chart-telling
+
+> Svelte 5 plot components (line, area, bar, histogram, heatmap, pyramid, scatter, geo) built on svelteplot, with titles, legends, tooltips, facets, timelines and value labels built in. Plots take pixel `width`/`height`; hover and tooltips are switched on with `tooltip` and a `hover` marker.
+
+Start with the full guide: it lists the mental model, the props every plot shares, the switches and the rules that matter. Runnable examples are type-checked, so copy them as a starting point.
+
+## Guide
+
+- [Full guide](./llms-full.txt): API overview, switches, rules, state hooks (`useFigure`, `usePlot`), markers, theming
+
+## Docs
+
+- [Getting started](./docs/getting-started.md): install, first plot, sizing, data
+- [Concepts](./docs/concepts.md): plots, figures, rows and series, channels, shared props
+- [Plots](./docs/plots.md): the eight plot kinds
+- [Scales](./docs/scales.md): axes and channel scales
+- [Styles and segments](./docs/styles-and-segments.md): value labels, frame, gaps, ranges of data
+- [Markers](./docs/markers.md): annotations, regions, hover highlight, custom components
+- [Transforms and statistics](./docs/transforms-and-statistics.md): stacking, binning, smoothing, regression
+- [Tooltip and hover](./docs/tooltip-and-hover.md): tooltip options, hover marker, sync
+- [Legend](./docs/legend.md): automatic legend, toggling series, sections
+- [Timeline](./docs/timeline.md): player (default) and rule
+- [Chrome](./docs/chrome.md): title, caption, header, footer, order, dividers
+- [Facets](./docs/facets.md): small multiples
+- [Composer](./docs/composer.md): several plots in one figure
+- [Reading plot state](./docs/state.md): `useFigure`, `usePlot`
+- [Maps](./docs/geo.md): GeoPlot, projections, camera, map markers
+- [Theming](./docs/theming.md): configuration, themes, locale, CSS variables
+
+## Examples
+
+- [Responsive line chart with end labels](./examples/ResponsiveLine.svelte)
+- [Tooltip and hover marker](./examples/Tooltip.svelte)
+- [Segments (styling a range of data)](./examples/Segments.svelte)
+- [Interactive legend and reading its state](./examples/LegendToggle.svelte)
+- [Timeline player](./examples/TimelinePlayer.svelte)
+- [Facets with a synced tooltip](./examples/Facets.svelte)
+- [Bars with value labels](./examples/BarValues.svelte)
+- [Custom tooltip card](./examples/CustomTooltip.svelte)
+- [Shared example data](./examples/data.ts)
+
+## Types
+
+- [Public exports](./dist/index.d.ts): every config type, with JSDoc on each field
+
+## Optional
+
+- [README](./README.md): overview and documentation index
+- [Package manifest](./package.json): peer dependencies (`svelte`, `svelteplot`, optional `topojson-client`)

package/package.json

@@ -1,9 +1,33 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.64",
+  "version": "1.0.0",
+  "description": "Declarative charts, maps and small multiples for Svelte, built on svelteplot.",
+  "license": "MIT",
+  "author": "Ezequiel Puerta",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/datos-Fundar/data-chart-telling.git"
+  },
+  "homepage": "https://github.com/datos-Fundar/data-chart-telling#readme",
+  "bugs": {
+    "url": "https://github.com/datos-Fundar/data-chart-telling/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.19"
+  },
   "type": "module",
   "files": [
-    "dist"
+    "LICENSE",
+    "CHANGELOG.md",
+    "dist",
+    "docs",
+    "!docs/images",
+    "examples",
+    "llms.txt",
+    "llms-full.txt"
   ],
   "sideEffects": [
     "**/*.css"
@@ -19,8 +43,10 @@
   },
   "dependencies": {
     "@types/geojson": "^7946.0.16",
+    "d3-array": "^3.2.4",
     "d3-geo": "^3.1.1",
     "d3-interpolate": "^3.0.1",
+    "d3-scale-chromatic": "^3.1.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0"
   },
@@ -45,8 +71,10 @@
     "@storybook/svelte-vite": "^10.4.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@types/d3-array": "^3.2.2",
     "@types/d3-geo": "^3.1.0",
     "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-scale-chromatic": "^3.1.0",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-zoom": "^3.0.8",
     "@types/node": "^22",
@@ -58,8 +86,9 @@
     "eslint-plugin-storybook": "^10.4.1",
     "eslint-plugin-svelte": "^3.17.0",
     "globals": "^17.4.0",
+    "husky": "^9.1.7",
     "knip": "^6.32.1",
-    "playwright": "^1.60.0",
+    "playwright": "^1.64.0",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
     "publint": "^0.3.18",
@@ -75,7 +104,12 @@
     "vitest-browser-svelte": "^2.1.1"
   },
   "keywords": [
-    "svelte"
+    "svelte",
+    "svelteplot",
+    "charts",
+    "data-visualization",
+    "maps",
+    "small-multiples"
   ],
   "scripts": {
     "build": "svelte-package",
@@ -85,8 +119,10 @@
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "test": "vitest run --project=unit --project=browser",
+    "test:coverage": "node scripts/coverage.mjs",
     "test:stories": "vitest run --project=storybook",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "docs:images": "node scripts/docs-images.mjs"
   }
 }

package/dist/charts/BaseChart.svelte

@@ -1,149 +0,0 @@
-<script lang="ts" generics="TRow extends Record<string, unknown>">
-  import ChartContainer from './container/ChartContainer.svelte';
-  import TimelineLayout from '../layout/timeline/TimelineLayout.svelte';
-  import FacetLayout from '../layout/facet/FacetLayout.svelte';
-  import LegendLayout from '../layout/legend/LegendLayout.svelte';
-  import { getConfiguration } from '../configuration/config.svelte';
-  import { provideHover } from '../layout/tooltip/hover.svelte';
-  import { provideLegendInteraction } from '../layout/legend/interaction.svelte';
-  import type { Snippet } from 'svelte';
-  import type { LegendSection } from '../types/layout/legend';
-  import type { HoverStrategy } from '../types/layout/tooltip';
-  import type { ChartPlotSnippet } from '../types/charts/common';
-  import type { FacetConfig } from '../types/layout/facet';
-  import type { TimeValue, TimelineConfig } from '../types/layout/timeline';
-
-  /**
-   * The orchestrator. It wires together the four interchangeable layout
-   * primitives — container, timeline, facet, legend — around a single leaf
-   * `plot` snippet. The composition order is fixed and meaningful:
-   *
-   *   container ▸ timeline (one shared scrubber) ▸ facet (split per small-multiple) ▸ plot
-   *
-   * The leaf snippet receives `{ data, width, height, facetValue?, selectedValue?,
-   * margins? }` and knows nothing about how that box or that data slice was
-   * produced, which is what lets any plot (line, bar, heatmap, …) drop in
-   * unchanged. `margins` only has a side set when `facet.marginsForFacet`
-   * reports it — forward it to the plot's own `margins` prop so every facet
-   * shares the same content box on that side.
-   */
-  let {
-    width,
-    height,
-    title,
-    subtitle,
-    caption,
-    legend,
-    header,
-    footer,
-    data,
-    facet,
-    timeline,
-    hover,
-    plot,
-  }: {
-    width: number;
-    height: number;
-    title?: string;
-    subtitle?: string;
-    caption?: string;
-    legend?: LegendSection[];
-    header?: Snippet;
-    footer?: Snippet;
-    data: TRow[];
-    facet?: FacetConfig<TRow>;
-    timeline?: TimelineConfig<TRow>;
-    hover?: { strategy: HoverStrategy; sync: boolean };
-    plot: ChartPlotSnippet<TRow>;
-  } = $props();
-
-  const cfg = $derived(getConfiguration());
-
-  const hoverStore = provideHover();
-  const legendInteraction = provideLegendInteraction();
-  const legendPlotContext = $derived({
-    disabledSeries: new Set(legendInteraction.disabledSeries.keys()),
-    isDisabled: (name: string) => legendInteraction.disabledSeries.has(name),
-  });
-  $effect(() => {
-    hoverStore.strategy = hover?.strategy ?? 'x';
-    hoverStore.sync = hover?.sync ?? false;
-  });
-</script>
-
-{#snippet body(rows: TRow[], w: number, h: number, selectedValue: TimeValue | undefined)}
-  {#if facet}
-    <FacetLayout
-      data={rows}
-      by={facet.by}
-      columns={facet.columns}
-      values={facet.values}
-      gap={facet.gap}
-      mode={facet.mode}
-      visible={facet.visible}
-      pageSize={facet.pageSize}
-      navLayout={facet.navLayout}
-      formatIndicator={facet.formatIndicator}
-      indicator={facet.indicator}
-      navButton={facet.navButton}
-      marginsForFacet={facet.marginsForFacet}
-      width={w}
-      height={h}
-    >
-      {#snippet cell({ facetValue, data: cellData, width: cw, height: ch, margins })}
-        {@render plot({
-          data: cellData,
-          width: cw,
-          height: ch,
-          facetValue,
-          selectedValue,
-          legend: legendPlotContext,
-          margins
-        })}
-      {/snippet}
-    </FacetLayout>
-  {:else}
-    {@render plot({ data: rows, width: w, height: h, selectedValue, legend: legendPlotContext })}
-  {/if}
-{/snippet}
-
-{#snippet legendSnippet()}
-  {#if legend && legend.length > 0}
-    <LegendLayout sections={legend} />
-  {/if}
-{/snippet}
-
-<ChartContainer
-  {width}
-  {height}
-  {title}
-  {subtitle}
-  {caption}
-  {header}
-  {footer}
-  legend={legend && legend.length > 0 ? legendSnippet : undefined}
->
-  {#snippet plot({ width: w, height: h })}
-    {#if timeline}
-      <TimelineLayout
-        {data}
-        accessor={timeline.accessor}
-        progress={timeline.progress}
-        values={timeline.values}
-        orientation={timeline.orientation}
-        show={timeline.show}
-        thickness={timeline.thickness ?? cfg.timeline.thickness}
-        filterMode={timeline.filterMode}
-        interpolate={typeof timeline.interpolate === 'object' ? timeline.interpolate : undefined}
-        width={w}
-        height={h}
-      >
-        {#snippet child({ selectedValue, data: tData, width: tw, height: th })}
-          {@render body(tData, tw, th, selectedValue)}
-        {/snippet}
-      </TimelineLayout>
-    {:else}
-      {@render body(data, w, h, undefined)}
-    {/if}
-  {/snippet}
-</ChartContainer>

package/dist/charts/BaseChart.svelte.d.ts

@@ -1,47 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { LegendSection } from '../types/layout/legend';
-import type { HoverStrategy } from '../types/layout/tooltip';
-import type { ChartPlotSnippet } from '../types/charts/common';
-import type { FacetConfig } from '../types/layout/facet';
-import type { TimelineConfig } from '../types/layout/timeline';
-declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: {
-        width: number;
-        height: number;
-        title?: string;
-        subtitle?: string;
-        caption?: string;
-        legend?: LegendSection[];
-        header?: Snippet;
-        footer?: Snippet;
-        data: TRow[];
-        facet?: FacetConfig<TRow>;
-        timeline?: TimelineConfig<TRow>;
-        hover?: {
-            strategy: HoverStrategy;
-            sync: boolean;
-        };
-        plot: ChartPlotSnippet<TRow>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TRow extends Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<TRow>>['props'];
-    events(): ReturnType<typeof $$render<TRow>>['events'];
-    slots(): ReturnType<typeof $$render<TRow>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TRow extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
-    } & ReturnType<__sveltets_Render<TRow>['exports']>;
-    <TRow extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const BaseChart: $$IsomorphicComponent;
-type BaseChart<TRow extends Record<string, unknown>> = InstanceType<typeof BaseChart<TRow>>;
-export default BaseChart;

package/dist/charts/bar/Chart.svelte

@@ -1,110 +0,0 @@
-<script lang="ts" generics="TRow extends Record<string, unknown>">
-  import BaseChart from '../BaseChart.svelte';
-  import BarPlot from '../../plots/bar/Plot.svelte';
-  import {
-    resolveTooltip,
-    resolveHoverStrategy,
-    resolveHoverSync,
-    hasHoverMarker
-  } from '../../layout/tooltip/utils';
-  import { resolveAccessor } from '../../plots/utils/accessors';
-  import { resolveTimelineInterpolation } from '../../utils/interpolate';
-  import type { BarSegmentStyle } from '../../types/plots/segments/common';
-  import type { GapsAwareChartProps } from '../../types/charts/props';
-
-  /**
-   * High-level bar chart. Groups flat rows by `z` into one series per group
-   * and delegates all chrome to {@link BaseChart}. Styling lives entirely in
-   * `segments` — there's no separate colour shorthand, so a series' look is
-   * always defined in one place.
-   */
-  let {
-    width,
-    height,
-    title,
-    subtitle,
-    caption,
-    legend,
-    header,
-    footer,
-    data,
-    x,
-    y,
-    z,
-    styles = {},
-    scales = {},
-    margins,
-    segments,
-    markers = [],
-    facet,
-    timeline,
-    tooltip,
-  }: GapsAwareChartProps<TRow, BarSegmentStyle> = $props();
-
-  const tip = $derived(resolveTooltip(tooltip, 'x'));
-  const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));
-  const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'x'));
-  const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
-  const getX = $derived(resolveAccessor<TRow>(x));
-  const getY = $derived(resolveAccessor<TRow>(y));
-  const getZ = $derived(z ? resolveAccessor<TRow>(z) : null);
-  const defaultFormat = $derived((row: TRow) => `${String(getX(row))}: ${getY(row)}`);
-
-  // A bar timeline snapshots one frame per step; interpolation needs to match
-  // each bar across steps by its category (`x`) — and by `z` too, when the
-  // chart groups categories into series — not by the timeline's own time field.
-  const timelineConfig = $derived(
-    timeline
-      ? {
-          ...timeline,
-          interpolate: resolveTimelineInterpolation(timeline.interpolate, {
-            value: y,
-            key: getZ ? (d: TRow) => `${String(getX(d))}::${String(getZ(d))}` : x,
-          }),
-        }
-      : undefined,
-  );
-</script>
-
-<BaseChart
-  {width}
-  {height}
-  {title}
-  {subtitle}
-  {caption}
-  {legend}
-  {header}
-  {footer}
-  {data}
-  {facet}
-  timeline={timelineConfig}
-  hover={hoverEnabled ? { strategy: resolvedStrategy, sync: resolvedSync } : undefined}
->
-  {#snippet plot({ data: rows, width: w, height: h, facetValue })}
-    <BarPlot
-      width={w}
-      height={h}
-      data={rows}
-      {x}
-      {y}
-      {z}
-      {styles}
-      {scales}
-      {margins}
-      {segments}
-      {markers}
-      tooltip={tip.enabled
-        ? {
-            format: tip.format ?? defaultFormat,
-            facetId: facetValue ?? '',
-            strategy: tip.strategy,
-            sync: tip.sync,
-            series: tip.series,
-            content: tip.content,
-            anchorX: tip.anchorX,
-            anchorY: tip.anchorY,
-          }
-        : undefined}
-    />
-  {/snippet}
-</BaseChart>

package/dist/charts/bar/Chart.svelte.d.ts

@@ -1,26 +0,0 @@
-import type { BarSegmentStyle } from '../../types/plots/segments/common';
-import type { GapsAwareChartProps } from '../../types/charts/props';
-declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: GapsAwareChartProps<TRow, BarSegmentStyle>;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TRow extends Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<TRow>>['props'];
-    events(): ReturnType<typeof $$render<TRow>>['events'];
-    slots(): ReturnType<typeof $$render<TRow>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TRow extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
-    } & ReturnType<__sveltets_Render<TRow>['exports']>;
-    <TRow extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Chart: $$IsomorphicComponent;
-type Chart<TRow extends Record<string, unknown>> = InstanceType<typeof Chart<TRow>>;
-export default Chart;