@classic-homes/charts-svelte 0.5.0 → 0.6.0

package/dist/lib/components/core/AreaChart.svelte

@@ -29,6 +29,7 @@
     seriesLabelLookup,
     toPercentStack,
     withPointLabels,
+    withGhostSeries,
     withReferenceMarks,
     withZoomInset,
   } from '@classic-homes/charts-core';
@@ -221,7 +222,7 @@
           formatters.axis(yAxisConfig)
         ),
         series: withForecastLines(
-          withReferenceMarks(series, referenceLines, referenceBands, {
+          withReferenceMarks(withGhostSeries(series, data.series), referenceLines, referenceBands, {
             valueAxis: 'y',
             format: formatters.format,
             color: chartColors.reference,

package/dist/lib/components/core/BarChart.svelte

@@ -19,6 +19,7 @@
     forecastTagLookup,
     withForecastBars,
     formatValue,
+    ghostStackId,
     generateBarChartDescription,
     getChartColors,
     gridInset,
@@ -31,6 +32,8 @@
     toPercentStack,
     withPointLabels,
     withEndLabelInset,
+    withGhostSeries,
+    withoutGhostSeries,
     withReferenceMarks,
     withZoomInset,
   } from '@classic-homes/charts-core';
@@ -146,39 +149,48 @@
     const zoomAxis = isHorizontal ? 'y' : 'x';
     const legendBottom = builtInLegend && (legendConfig?.position ?? 'bottom') === 'bottom';
 
-    const stackIds = data.series.map((s) => s.stack ?? (stacked ? 'Total' : undefined));
-    const series = data.series.map((source, index) => ({
-      name: source.name,
-      type: 'bar',
-      data: withForecastBars(
-        withPointLabels(
-          pairWithCategories(data.categories, plotted[index].data, categoryAxisType),
-          source.labels,
-          formatters.label,
-          { position: labelPosition }
+    // Ghost series stack in a parallel group, beside the real stacks
+    const stackIds = data.series.map((s) =>
+      ghostStackId(s.stack ?? (stacked ? 'Total' : undefined), s)
+    );
+    const series = withGhostSeries(
+      data.series.map((source, index) => ({
+        name: source.name,
+        type: 'bar',
+        data: withForecastBars(
+          withPointLabels(
+            pairWithCategories(data.categories, plotted[index].data, categoryAxisType),
+            source.labels,
+            formatters.label,
+            { position: labelPosition }
+          ),
+          source,
+          source.color || chartColors.series[index % chartColors.series.length]
         ),
-        source,
-        source.color || chartColors.series[index % chartColors.series.length]
-      ),
-      stack: stackIds[index],
-      itemStyle: {
-        ...(source.color && { color: source.color }),
-        borderRadius: barCornerRadius(isHorizontal, stackIds, index),
-      },
-      label: buildDataLabel({ show: true, position: labelPosition }, undefined, {
-        show: showValues,
-        formatter: formatters.label,
-        getLabel,
-      }),
-      emphasis: {
-        focus: 'series',
-      },
-    }));
+        stack: stackIds[index],
+        itemStyle: {
+          ...(source.color && { color: source.color }),
+          borderRadius: barCornerRadius(isHorizontal, stackIds, index),
+        },
+        label: buildDataLabel({ show: true, position: labelPosition }, undefined, {
+          show: showValues,
+          formatter: formatters.label,
+          getLabel,
+        }),
+        emphasis: {
+          focus: 'series',
+        },
+      })),
+      data.series
+    );
+    // Ghost series count toward neither totals nor end labels
+    const solid = withoutGhostSeries(data.series);
+    const solidPlotted = plotted.filter((_, index) => data.series[index].variant !== 'ghost');
 
     // Totals use the value format, not the percent one: they show the raw sum
     const format = resolveValueFormatter(valueFormat, locale);
     const totalSeries = showTotal
-      ? buildStackTotalSeries(data.categories, data.series, {
+      ? buildStackTotalSeries(data.categories, solid, {
           stacked,
           position: labelPosition,
           format,
@@ -190,9 +202,11 @@
     const endLabels = !isHorizontal
       ? []
       : totalSeries.length
-        ? [...stackTotals(data.series, stacked).values()].flat().map((t) => formatValue(t, format))
+        ? [...stackTotals(solid, stacked).values()].flat().map((t) => formatValue(t, format))
         : showValues
-          ? plotted.flatMap((s) => s.data.map((value) => formatValue(value, formatters.format)))
+          ? solidPlotted.flatMap((s) =>
+              s.data.map((value) => formatValue(value, formatters.format))
+            )
           : [];
 
     return mergeChartOption(

package/dist/lib/components/core/LineChart.svelte

@@ -28,6 +28,7 @@
     seriesLabelLookup,
     toPercentStack,
     withPointLabels,
+    withGhostSeries,
     withReferenceMarks,
     withZoomInset,
   } from '@classic-homes/charts-core';
@@ -212,7 +213,7 @@
           formatters.axis(yAxisConfig)
         ),
         series: withForecastLines(
-          withReferenceMarks(series, referenceLines, referenceBands, {
+          withReferenceMarks(withGhostSeries(series, data.series), referenceLines, referenceBands, {
             valueAxis: 'y',
             format: formatters.format,
             color: chartColors.reference,

package/dist/lib/components/index.d.ts

@@ -1,4 +1,4 @@
 export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty, ChartLegend, type ChartContainerProps, type ChartLegendProps, type ChartSkeletonProps, type ChartErrorProps, type ChartEmptyProps, ChartDataTable, type ChartDataTableProps, } from './base/index.js';
 export { LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, } from './core/index.js';
 export { RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './extended/index.js';
-export { ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, StatGroup, type StatGroupProps, } from './report/index.js';
+export { ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, DeltaText, StatGroup, type StatGroupProps, } from './report/index.js';

package/dist/lib/components/index.js

@@ -5,4 +5,4 @@ export { LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, } f
 // Extended charts
 export { RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './extended/index.js';
 // Report charts and stats
-export { ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, StatGroup, } from './report/index.js';
+export { ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, DeltaText, StatGroup, } from './report/index.js';

package/dist/lib/components/report/ComboChart.svelte

@@ -26,6 +26,7 @@
     valueAxisConfig,
     valueLabelFormatter,
     withPointLabels,
+    withGhostSeries,
     withReferenceMarks,
     withZoomInset,
   } from '@classic-homes/charts-core';
@@ -243,12 +244,17 @@
               ]
             : []),
         ],
-        series: withReferenceMarks(series, referenceLines, referenceBands, {
-          valueAxis: 'y',
-          format: formatters.format,
-          color: chartColors.reference,
-          bandColor: chartColors.referenceBand,
-        }),
+        series: withReferenceMarks(
+          withGhostSeries(series, data.series),
+          referenceLines,
+          referenceBands,
+          {
+            valueAxis: 'y',
+            format: formatters.format,
+            color: chartColors.reference,
+            bandColor: chartColors.referenceBand,
+          }
+        ),
       } as EChartsOption,
       optionOverride
     );

package/dist/lib/components/report/DeltaText.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { DeltaTextProps } from '@classic-homes/charts-core';
+  import { computeDelta, formatValue, resolveValueFormatter } from '@classic-homes/charts-core';
+  import { cn } from '../../utils.js';
+
+  let {
+    current,
+    previous,
+    display = 'percent',
+    goodWhen = 'up',
+    valueFormat,
+    locale = 'en-US',
+    label,
+    class: className,
+  }: DeltaTextProps = $props();
+
+  const format = $derived(resolveValueFormatter(valueFormat, locale));
+
+  const change = $derived(computeDelta(current, previous));
+
+  const percentFormat = $derived(
+    new Intl.NumberFormat(locale, {
+      style: 'percent',
+      maximumFractionDigits: 1,
+      signDisplay: 'exceptZero',
+    })
+  );
+
+  const changeText = $derived.by(() => {
+    if (!change) return '';
+    const sign = change.change > 0 ? '+' : change.change < 0 ? '−' : '';
+    const absolute = `${sign}${formatValue(Math.abs(change.change), format)}`;
+    const percent = change.ratio === null ? null : percentFormat.format(change.ratio);
+    switch (display) {
+      case 'absolute':
+        return absolute;
+      case 'both':
+        return percent ? `${absolute} (${percent})` : absolute;
+      default:
+        // A change from zero has no percentage
+        return percent ?? absolute;
+    }
+  });
+
+  const changeTone = $derived.by(() => {
+    if (!change || change.direction === 'flat' || goodWhen === 'none') {
+      return 'text-muted-foreground';
+    }
+    return goodWhen === change.direction ? 'text-success' : 'text-destructive';
+  });
+
+  const labelText = $derived(
+    label ?? (typeof previous === 'number' ? `vs ${formatValue(previous, format)}` : '')
+  );
+</script>
+
+{#if change}
+  <span
+    data-testid="delta-text"
+    class={cn('inline-flex flex-wrap items-baseline gap-x-1 text-xs', className)}
+  >
+    <span class={cn('font-medium tabular-nums', changeTone)}>
+      <span aria-hidden="true">
+        {change.direction === 'up' ? '▲' : change.direction === 'down' ? '▼' : ''}
+      </span>
+      {changeText}
+    </span>
+    {#if labelText}
+      <span class="text-muted-foreground">{labelText}</span>
+    {/if}
+  </span>
+{/if}

package/dist/lib/components/report/DeltaText.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DeltaTextProps } from '@classic-homes/charts-core';
+declare const DeltaText: import("svelte").Component<DeltaTextProps, {}, "">;
+type DeltaText = ReturnType<typeof DeltaText>;
+export default DeltaText;

package/dist/lib/components/report/StatCard.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { StatCardProps } from '@classic-homes/charts-core';
-  import { computeDelta, formatValue, resolveValueFormatter } from '@classic-homes/charts-core';
+  import { formatValue, resolveValueFormatter } from '@classic-homes/charts-core';
   import { cn } from '../../utils.js';
+  import DeltaText from './DeltaText.svelte';
   import Sparkline from './Sparkline.svelte';
 
   let {
@@ -27,47 +28,7 @@
     typeof value === 'string' ? value : formatValue(value ?? null, format, emptyValue)
   );
 
-  const change = $derived(
-    delta
-      ? computeDelta(delta.current ?? (typeof value === 'number' ? value : null), delta.previous)
-      : null
-  );
-
-  const percentFormat = $derived(
-    new Intl.NumberFormat(locale, {
-      style: 'percent',
-      maximumFractionDigits: 1,
-      signDisplay: 'exceptZero',
-    })
-  );
-
-  const changeText = $derived.by(() => {
-    if (!change || !delta) return '';
-    const sign = change.change > 0 ? '+' : change.change < 0 ? '−' : '';
-    const absolute = `${sign}${formatValue(Math.abs(change.change), format)}`;
-    const percent = change.ratio === null ? null : percentFormat.format(change.ratio);
-    switch (delta.display ?? 'percent') {
-      case 'absolute':
-        return absolute;
-      case 'both':
-        return percent ? `${absolute} (${percent})` : absolute;
-      default:
-        // A change from zero has no percentage
-        return percent ?? absolute;
-    }
-  });
-
-  const changeTone = $derived.by(() => {
-    if (!change || change.direction === 'flat' || delta?.goodWhen === 'none') {
-      return 'text-muted-foreground';
-    }
-    const good = (delta?.goodWhen ?? 'up') === change.direction;
-    return good ? 'text-success' : 'text-destructive';
-  });
-
-  const previousText = $derived(
-    delta && typeof delta.previous === 'number' ? formatValue(delta.previous, format) : ''
-  );
+  const deltaCurrent = $derived(delta?.current ?? (typeof value === 'number' ? value : null));
 
   const valueTone = $derived(
     {
@@ -114,18 +75,17 @@
     <div class="mt-1 flex items-end justify-between gap-3">
       <div class="min-w-0">
         <div class={cn('text-2xl font-semibold tabular-nums', valueTone)}>{display}</div>
-        {#if changeText}
-          <div class="mt-1 flex flex-wrap items-baseline gap-x-1 text-xs">
-            <span class={cn('font-medium tabular-nums', changeTone)}>
-              <span aria-hidden="true">
-                {change?.direction === 'up' ? '▲' : change?.direction === 'down' ? '▼' : ''}
-              </span>
-              {changeText}
-            </span>
-            <span class="text-muted-foreground">
-              {delta?.label ?? (previousText ? `vs ${previousText}` : '')}
-            </span>
-          </div>
+        {#if delta}
+          <DeltaText
+            class="mt-1 flex"
+            current={deltaCurrent}
+            previous={delta.previous}
+            display={delta.display}
+            goodWhen={delta.goodWhen}
+            {valueFormat}
+            {locale}
+            label={delta.label}
+          />
         {/if}
         {#if hint}
           <p class="mt-1 text-xs text-muted-foreground">{hint}</p>

package/dist/lib/components/report/index.d.ts

@@ -6,6 +6,7 @@ export { default as BoxPlotChart } from './BoxPlotChart.svelte';
 export { default as WaterfallChart } from './WaterfallChart.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
 export { default as StatCard } from './StatCard.svelte';
+export { default as DeltaText } from './DeltaText.svelte';
 export { default as StatGroup } from './StatGroup.svelte';
 import type { ComponentProps } from 'svelte';
 import type StatGroup from './StatGroup.svelte';

package/dist/lib/components/report/index.js

@@ -6,4 +6,5 @@ export { default as BoxPlotChart } from './BoxPlotChart.svelte';
 export { default as WaterfallChart } from './WaterfallChart.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
 export { default as StatCard } from './StatCard.svelte';
+export { default as DeltaText } from './DeltaText.svelte';
 export { default as StatGroup } from './StatGroup.svelte';

package/dist/lib/index.d.ts

@@ -3,8 +3,8 @@
  *
  * Svelte ECharts components for the Classic Theme design system
  */
-export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty, ChartLegend, type ChartContainerProps, type ChartLegendProps, type ChartSkeletonProps, type ChartErrorProps, type ChartEmptyProps, ChartDataTable, type ChartDataTableProps, LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, StatGroup, type StatGroupProps, } from './components/index.js';
+export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty, ChartLegend, type ChartContainerProps, type ChartLegendProps, type ChartSkeletonProps, type ChartErrorProps, type ChartEmptyProps, ChartDataTable, type ChartDataTableProps, LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, DeltaText, StatGroup, type StatGroupProps, } from './components/index.js';
 export { useChart, exportChartImage, registerEchartsModules, type ExportImageOptions, useChartTheme, useChartResize, registerClassicThemes, useReducedMotion, useChartLegend, type CustomLegendProps, type UseChartLegendOptions, type UseChartLegendReturn, type UseChartOptions, type UseChartReturn, } from './composables/index.js';
 export { cn } from './utils.js';
 export { fromRecords, toSliceData, resolveValueFormatter, formatValue, computeDelta, binValues, boxplotStats, waterfallLayout, toPercentStack, tableToCsv, downloadCsv, chartFilename, type FromRecordsOptions, type ToSliceDataOptions, type Delta, } from '@classic-homes/charts-core';
-export type { BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps, AxisConfig, ChartFormatter, ChartLegendConfig, ChartLegendPosition, LabelFormatterParams, TooltipFormatterParams, LegendItem, LegendRenderProps, LineChartProps, BarChartProps, PieChartProps, DonutChartProps, AreaChartProps, ScatterChartProps, RadarChartProps, FunnelChartProps, GaugeChartProps, HeatmapChartProps, TreemapChartProps, CandlestickChartProps, SankeyChartProps, LineChartData, LineSeriesData, BarChartData, BarSeriesData, PieSliceData, AreaChartData, AreaSeriesData, ScatterChartData, ScatterSeriesData, RadarChartData, RadarSeriesData, RadarIndicator, FunnelSliceData, HeatmapData, TreemapNode, TreemapLevel, CandlestickData, CandlestickItem, SankeyData, SankeyNode, SankeyLink, BaseEventParams, DataPointEventParams, SliceEventParams, HeatmapEventParams, TreemapEventParams, CandlestickEventParams, SankeyEventParams, ChartEventHandlers, ChartExportConfig, ReferenceChartProps, ZoomChartProps, RowHeightProps, ComboChartProps, DotPlotChartProps, BulletChartProps, HistogramChartProps, BoxPlotChartProps, WaterfallChartProps, SparklineProps, StatCardProps, StatDelta, CategoryChartData, CategorySeriesData, ComboChartData, ComboSeriesData, DotPlotChartData, DotPlotSeriesData, BulletItem, HistogramBin, HistogramBucket, BoxPlotGroup, BoxPlotStats, WaterfallStep, ValueFormat, ValueFormatPreset, ReferenceLine, ReferenceBand, ChartDataTable as ChartDataTableData, } from '@classic-homes/charts-core';
+export type { BaseChartProps, LegendChartProps, LabelChartProps, AxisChartProps, AxisConfig, ChartFormatter, ChartLegendConfig, ChartLegendPosition, LabelFormatterParams, TooltipFormatterParams, LegendItem, LegendRenderProps, LineChartProps, BarChartProps, PieChartProps, DonutChartProps, AreaChartProps, ScatterChartProps, RadarChartProps, FunnelChartProps, GaugeChartProps, HeatmapChartProps, TreemapChartProps, CandlestickChartProps, SankeyChartProps, LineChartData, LineSeriesData, BarChartData, BarSeriesData, PieSliceData, AreaChartData, AreaSeriesData, ScatterChartData, ScatterSeriesData, RadarChartData, RadarSeriesData, RadarIndicator, FunnelSliceData, HeatmapData, TreemapNode, TreemapLevel, CandlestickData, CandlestickItem, SankeyData, SankeyNode, SankeyLink, BaseEventParams, DataPointEventParams, SliceEventParams, HeatmapEventParams, TreemapEventParams, CandlestickEventParams, SankeyEventParams, ChartEventHandlers, ChartExportConfig, ReferenceChartProps, ZoomChartProps, RowHeightProps, ComboChartProps, DotPlotChartProps, BulletChartProps, HistogramChartProps, BoxPlotChartProps, WaterfallChartProps, SparklineProps, StatCardProps, StatDelta, DeltaTextProps, CategoryChartData, CategorySeriesData, ComboChartData, ComboSeriesData, DotPlotChartData, DotPlotSeriesData, BulletItem, HistogramBin, HistogramBucket, BoxPlotGroup, BoxPlotStats, WaterfallStep, ValueFormat, ValueFormatPreset, ReferenceLine, ReferenceBand, ChartDataTable as ChartDataTableData, } from '@classic-homes/charts-core';

package/dist/lib/index.js

@@ -12,7 +12,7 @@ LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart,
 // Extended charts
 RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, 
 // Report charts and stats
-ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, StatGroup, } from './components/index.js';
+ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, DeltaText, StatGroup, } from './components/index.js';
 // Composables
 export { useChart, exportChartImage, registerEchartsModules, useChartTheme, useChartResize, registerClassicThemes, useReducedMotion, useChartLegend, } from './composables/index.js';
 // Utils

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/charts-svelte",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Svelte ECharts components for Classic Theme",
   "type": "module",
   "svelte": "./dist/lib/index.js",