@fundar/data-chart-telling 0.0.5 → 0.0.7

package/dist/charts/Chart.svelte

@@ -108,6 +108,7 @@
         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}

package/dist/charts/heatmap/Chart.svelte

@@ -31,7 +31,7 @@
     y,
     z,
     styles = {},
-    segments = [],
+    segments = {},
     scales = {},
     margins,
     markers = [],

package/dist/layout/timeline/TimelineLayout.svelte

@@ -22,6 +22,7 @@
     progress,
     values,
     orientation = 'vertical',
+    show = true,
     thickness = 60,
     filterMode = 'exact',
     interpolate,
@@ -34,6 +35,7 @@
     progress: number;
     values?: TimeValue[];
     orientation?: Orientation;
+    show?: boolean;
     thickness?: number;
     filterMode?: 'exact' | 'upTo';
     interpolate?: TimelineInterpolation<TRow>;
@@ -126,32 +128,37 @@
   });
 
   const isVertical = $derived(orientation === 'vertical');
-  const gap = 12;
+  const gap = $derived(show ? 12 : 0);
+  const effectiveThickness = $derived(show ? thickness : 0);
   const innerWidth = $derived(
-    Math.max(0, isVertical ? width - thickness - gap : width),
+    Math.max(0, isVertical ? width - effectiveThickness - gap : width),
   );
   const innerHeight = $derived(
-    Math.max(0, isVertical ? height : height - thickness - gap),
+    Math.max(0, isVertical ? height : height - effectiveThickness - gap),
   );
 </script>
 
 {#if isVertical}
-  <div class="dct-timeline dct-timeline--vertical" style:width="{width}px" style:height="{height}px">
+  <div class="dct-timeline dct-timeline--vertical" style:width="{width}px" style:height="{height}px" style:gap="{gap}px">
     <div class="dct-timeline__plot">
       {@render child({ selectedValue, data: filtered, width: innerWidth, height: innerHeight })}
     </div>
-    <div class="dct-timeline__gutter" style:width="{thickness}px">
-      <Timeline currentValue={selectedValue} values={steps} orientation="vertical" width={thickness} height={innerHeight} />
-    </div>
+    {#if show}
+      <div class="dct-timeline__gutter" style:width="{thickness}px">
+        <Timeline currentValue={selectedValue} values={steps} orientation="vertical" width={thickness} height={innerHeight} />
+      </div>
+    {/if}
   </div>
 {:else}
-  <div class="dct-timeline dct-timeline--horizontal" style:width="{width}px" style:height="{height}px">
+  <div class="dct-timeline dct-timeline--horizontal" style:width="{width}px" style:height="{height}px" style:gap="{gap}px">
     <div class="dct-timeline__plot">
       {@render child({ selectedValue, data: filtered, width: innerWidth, height: innerHeight })}
     </div>
-    <div class="dct-timeline__gutter" style:height="{thickness}px">
-      <Timeline currentValue={selectedValue} values={steps} orientation="horizontal" width={innerWidth} height={thickness} />
-    </div>
+    {#if show}
+      <div class="dct-timeline__gutter" style:height="{thickness}px">
+        <Timeline currentValue={selectedValue} values={steps} orientation="horizontal" width={innerWidth} height={thickness} />
+      </div>
+    {/if}
   </div>
 {/if}
 
@@ -161,11 +168,9 @@
   }
   .dct-timeline--vertical {
     flex-direction: row;
-    gap: 12px;
   }
   .dct-timeline--horizontal {
     flex-direction: column;
-    gap: 12px;
   }
   .dct-timeline__plot {
     flex: 1 1 auto;

package/dist/layout/timeline/TimelineLayout.svelte.d.ts

@@ -7,6 +7,7 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         progress: number;
         values?: TimeValue[];
         orientation?: Orientation;
+        show?: boolean;
         thickness?: number;
         filterMode?: "exact" | "upTo";
         interpolate?: TimelineInterpolation<TRow>;

package/dist/plots/bar/Plot.svelte

@@ -30,7 +30,7 @@
     y,
     z,
     styles = {},
-    segments = [],
+    segments = {},
     markers = [],
     scales = {},
     margins,

package/dist/plots/heatmap/Plot.svelte

@@ -27,7 +27,7 @@
     y,
     z,
     styles = {},
-    segments = [],
+    segments = {},
     scales = {},
     margins,
     markers = [],

package/dist/plots/line/Plot.svelte

@@ -25,7 +25,7 @@
     y,
     z,
     styles = {},
-    segments = [],
+    segments = {},
     markers = [],
     scales = {},
     margins,

package/dist/plots/pyramid/Plot.svelte

@@ -40,7 +40,7 @@
     styles = {},
     scales = {},
     margins,
-    segments = [],
+    segments = {},
     markers = [],
     tooltip = undefined,
   }: PlotProps<TData, BarSegmentStyle> = $props();

package/dist/plots/utils/segments.d.ts

@@ -1,9 +1,9 @@
 import type { AxisValue, Series } from '../../types/plots/common';
 import type { Segment, Segments, LineSegmentStyle, VisualGroup } from '../../types/plots/styles';
 /**
- * Returns the flat {@link Segment} list for one series by merging all groups.
- * Within each group, series-specific segments are added before `'default'`
- * segments, so series-specific rules win on tie-breaks.
+ * Returns the flat {@link Segment} list for one series.
+ * Series-specific segments are added before `'default'` segments so that
+ * series-specific catch-alls win over default catch-alls on tie-breaks.
  */
 export declare function resolveSegmentsForSeries<TStyle>(segments: Segments<TStyle>, seriesName: string): Segment<TStyle>[];
 /** Returns true when `xVal` falls inside any of a segment's x ranges. */

package/dist/plots/utils/segments.js

@@ -1,21 +1,14 @@
 import { resolveAccessor } from './accessors';
 const DEFAULT_KEY = 'default';
 /**
- * Returns the flat {@link Segment} list for one series by merging all groups.
- * Within each group, series-specific segments are added before `'default'`
- * segments, so series-specific rules win on tie-breaks.
+ * Returns the flat {@link Segment} list for one series.
+ * Series-specific segments are added before `'default'` segments so that
+ * series-specific catch-alls win over default catch-alls on tie-breaks.
  */
 export function resolveSegmentsForSeries(segments, seriesName) {
-    const result = [];
-    for (const group of segments) {
-        const specific = group[seriesName];
-        const defaults = group[DEFAULT_KEY];
-        if (specific)
-            result.push(...specific);
-        if (defaults)
-            result.push(...defaults);
-    }
-    return result;
+    const specific = segments[seriesName] ?? [];
+    const defaults = segments[DEFAULT_KEY] ?? [];
+    return [...specific, ...defaults];
 }
 /** Returns true when `xVal` falls inside any of a segment's x ranges. */
 export function matchesSegmentX(xVal, seg) {
@@ -71,10 +64,8 @@ export function validateSegments(segments) {
                 `only the first catch-all's style will be used.`);
         }
     };
-    for (const group of segments) {
-        for (const [key, segs] of Object.entries(group)) {
-            check(key === DEFAULT_KEY ? '(default)' : `"${key}"`, segs);
-        }
+    for (const [key, segs] of Object.entries(segments)) {
+        check(key === DEFAULT_KEY ? '(default)' : `"${key}"`, segs);
     }
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -146,7 +137,15 @@ function resolveSeriesSegments(series, segs) {
             defaultVisual.push({ data: bridged, style: {} });
         }
         else {
-            userVisual.push({ data: run.data, style: segs[run.segIdx].style ?? {} });
+            const seg = segs[run.segIdx];
+            const segStyle = seg.style ?? {};
+            // Area-specific segments merge the catch-all as a baseline: catch-all
+            // keys fill in whatever the area segment omits; the area wins on conflict.
+            const isAreaSpecific = seg.areas != null && seg.areas.length > 0;
+            const resolvedStyle = isAreaSpecific && catchAll?.style
+                ? { ...catchAll.style, ...segStyle }
+                : segStyle;
+            userVisual.push({ data: run.data, style: resolvedStyle });
             // When the next run is also a user segment (no unmatched data between them),
             // insert a line-only connector so the lines join without a gap. Using a
             // separate mark (rather than appending a bridge point to the current run)

package/dist/types/charts/common.d.ts

@@ -52,6 +52,7 @@ export type TimelineConfig<TRow extends Record<string, unknown>> = {
     progress: number;
     values?: TimeValue[];
     orientation?: Orientation;
+    show?: boolean;
     thickness?: number;
     filterMode?: 'exact' | 'upTo';
     interpolate?: boolean | TimelineInterpolation<TRow>;

package/dist/types/plots/styles.d.ts

@@ -146,50 +146,29 @@ export type Segment<TStyle> = {
     areas?: Area[];
     style?: TStyle;
 };
-/** Per-series list of {@link Segment}s, keyed by series name. */
-export type SeriesAwareSegmentsMap<TStyle> = Record<string, Segment<TStyle>[]>;
-/**
- * A segment group that applies its segments to **every** series. Use the
- * `'default'` key to target all series at once.
- *
- * @example
- * ```ts
- * const group: DefaultSegmentsMap<LineSegmentStyle> = {
- *   default: [{ areas: [{ x: { from: 2012, to: 2014 } }], style: { dots: { dotSymbol: 'circle' } } }],
- * };
- * ```
- */
-export type DefaultSegmentsMap<TStyle> = {
-    default: Segment<TStyle>[];
-};
-/**
- * One element of a {@link Segments} array. Either a {@link DefaultSegmentsMap}
- * (applies its segments to every series via the `'default'` key) or a
- * {@link SeriesAwareSegmentsMap} (applies segments only to the named series).
- * Both forms can be mixed in the same array.
- */
-export type SegmentsStyle<TStyle> = DefaultSegmentsMap<TStyle> | SeriesAwareSegmentsMap<TStyle>;
 /**
  * The `segments` prop accepted by every plot kind.
  *
- * An array of {@link SegmentsStyle} groups processed in order. Each group maps
- * either `'default'` (all series) or specific series names to lists of
- * {@link Segment}s. Multiple groups let you organise segments by concern:
+ * A record mapping series names (or `'default'` for all series) to lists of
+ * {@link Segment}s. Segments in a named key apply only to that series;
+ * segments under `'default'` apply to every series.
  *
  * ```ts
- * segments: [
- *   // Group 1 – per-series stroke colours (catch-all baseline)
- *   { female: [{ style: { stroke: { stroke: 'steelblue' } } }],
- *     male:   [{ style: { stroke: { stroke: 'tomato'    } } }] },
- *   // Group 2 – shared dot symbols for every series
- *   { default: [{ areas: [{ x: { from: 2012, to: 2014 } }], style: { dots: { dotSymbol: 'circle' } } }] },
- * ]
+ * segments: {
+ *   female:  [{ style: { stroke: { stroke: 'tomato' } } }],   // catch-all for female
+ *   male:    [{ style: { stroke: { stroke: 'steelblue' } } }], // catch-all for male
+ *   default: [{ areas: [{ x: { from: 2012, to: 2014 } }], style: { dots: { dotSymbol: 'circle' } } }],
+ * }
  * ```
  *
  * Within each resolved series list, catch-alls (no `areas`) are evaluated last
  * so that area-specific segments always override them, regardless of position.
+ * Area-specific segments also inherit any style key absent from their own style
+ * by merging the catch-all as a baseline — the area's own style wins on conflict.
+ * This lets you set a series colour once in a catch-all and add per-range dots
+ * or dash patterns without repeating the colour on every area segment.
  */
-export type Segments<TStyle> = SegmentsStyle<TStyle>[];
+export type Segments<TStyle> = Record<string, Segment<TStyle>[]>;
 /** One contiguous, styled slice of a series' data — ready to draw as its own mark. */
 export type VisualSegment<T extends Record<string, unknown>, TStyle = LineSegmentStyle> = {
     data: T[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "files": [
     "dist"