@classic-homes/charts-svelte 0.4.2 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/components/core/AreaChart.svelte +32 -12
- package/dist/lib/components/core/BarChart.svelte +48 -27
- package/dist/lib/components/core/LineChart.svelte +31 -12
- package/dist/lib/components/index.d.ts +1 -1
- package/dist/lib/components/index.js +1 -1
- package/dist/lib/components/report/ComboChart.svelte +12 -6
- package/dist/lib/components/report/DeltaText.svelte +72 -0
- package/dist/lib/components/report/DeltaText.svelte.d.ts +4 -0
- package/dist/lib/components/report/StatCard.svelte +14 -54
- package/dist/lib/components/report/index.d.ts +1 -0
- package/dist/lib/components/report/index.js +1 -0
- package/dist/lib/index.d.ts +2 -2
- package/dist/lib/index.js +1 -1
- package/package.json +1 -1
|
@@ -14,6 +14,10 @@
|
|
|
14
14
|
buildTooltip,
|
|
15
15
|
categoryTable,
|
|
16
16
|
chartFormatters,
|
|
17
|
+
forecastStart,
|
|
18
|
+
forecastTagLookup,
|
|
19
|
+
withForecastLines,
|
|
20
|
+
withForecastPoints,
|
|
17
21
|
colorWithAlpha,
|
|
18
22
|
generateAreaChartDescription,
|
|
19
23
|
getChartColors,
|
|
@@ -25,6 +29,7 @@
|
|
|
25
29
|
seriesLabelLookup,
|
|
26
30
|
toPercentStack,
|
|
27
31
|
withPointLabels,
|
|
32
|
+
withGhostSeries,
|
|
28
33
|
withReferenceMarks,
|
|
29
34
|
withZoomInset,
|
|
30
35
|
} from '@classic-homes/charts-core';
|
|
@@ -124,11 +129,14 @@
|
|
|
124
129
|
return {
|
|
125
130
|
name: source.name,
|
|
126
131
|
type: 'line',
|
|
127
|
-
data:
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
+
data: withForecastPoints(
|
|
133
|
+
withPointLabels(
|
|
134
|
+
pairWithCategories(data.categories, plotted[index].data, xAxisConfig?.type),
|
|
135
|
+
source.labels,
|
|
136
|
+
formatters.label,
|
|
137
|
+
{ position: 'top' }
|
|
138
|
+
),
|
|
139
|
+
source
|
|
132
140
|
),
|
|
133
141
|
smooth,
|
|
134
142
|
connectNulls,
|
|
@@ -151,7 +159,10 @@
|
|
|
151
159
|
emphasis: {
|
|
152
160
|
focus: 'series',
|
|
153
161
|
},
|
|
154
|
-
|
|
162
|
+
// Forecast points show even when the others are hidden (size 0)
|
|
163
|
+
...(forecastStart(source) === undefined
|
|
164
|
+
? { showSymbol }
|
|
165
|
+
: { showSymbol: true, symbolSize: showSymbol ? 4 : 0 }),
|
|
155
166
|
};
|
|
156
167
|
});
|
|
157
168
|
|
|
@@ -183,6 +194,7 @@
|
|
|
183
194
|
formatter: tooltipFormatter,
|
|
184
195
|
valueFormatter: formatters.tooltip,
|
|
185
196
|
getLabel,
|
|
197
|
+
forecastTag: forecastTagLookup(data.series),
|
|
186
198
|
}
|
|
187
199
|
),
|
|
188
200
|
legend: buildLegend(
|
|
@@ -209,12 +221,20 @@
|
|
|
209
221
|
},
|
|
210
222
|
formatters.axis(yAxisConfig)
|
|
211
223
|
),
|
|
212
|
-
series:
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
224
|
+
series: withForecastLines(
|
|
225
|
+
withReferenceMarks(withGhostSeries(series, data.series), referenceLines, referenceBands, {
|
|
226
|
+
valueAxis: 'y',
|
|
227
|
+
format: formatters.format,
|
|
228
|
+
color: chartColors.reference,
|
|
229
|
+
bandColor: chartColors.referenceBand,
|
|
230
|
+
}),
|
|
231
|
+
data.series,
|
|
232
|
+
{
|
|
233
|
+
colors: data.series.map(
|
|
234
|
+
(s, i) => s.color || chartColors.series[i % chartColors.series.length]
|
|
235
|
+
),
|
|
236
|
+
}
|
|
237
|
+
),
|
|
218
238
|
} as EChartsOption,
|
|
219
239
|
optionOverride
|
|
220
240
|
);
|
|
@@ -16,7 +16,10 @@
|
|
|
16
16
|
buildTooltip,
|
|
17
17
|
categoryTable,
|
|
18
18
|
chartFormatters,
|
|
19
|
+
forecastTagLookup,
|
|
20
|
+
withForecastBars,
|
|
19
21
|
formatValue,
|
|
22
|
+
ghostStackId,
|
|
20
23
|
generateBarChartDescription,
|
|
21
24
|
getChartColors,
|
|
22
25
|
gridInset,
|
|
@@ -29,6 +32,8 @@
|
|
|
29
32
|
toPercentStack,
|
|
30
33
|
withPointLabels,
|
|
31
34
|
withEndLabelInset,
|
|
35
|
+
withGhostSeries,
|
|
36
|
+
withoutGhostSeries,
|
|
32
37
|
withReferenceMarks,
|
|
33
38
|
withZoomInset,
|
|
34
39
|
} from '@classic-homes/charts-core';
|
|
@@ -144,35 +149,48 @@
|
|
|
144
149
|
const zoomAxis = isHorizontal ? 'y' : 'x';
|
|
145
150
|
const legendBottom = builtInLegend && (legendConfig?.position ?? 'bottom') === 'bottom';
|
|
146
151
|
|
|
147
|
-
|
|
148
|
-
const
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
source.
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
152
|
+
// Ghost series stack in a parallel group, beside the real stacks
|
|
153
|
+
const stackIds = data.series.map((s) =>
|
|
154
|
+
ghostStackId(s.stack ?? (stacked ? 'Total' : undefined), s)
|
|
155
|
+
);
|
|
156
|
+
const series = withGhostSeries(
|
|
157
|
+
data.series.map((source, index) => ({
|
|
158
|
+
name: source.name,
|
|
159
|
+
type: 'bar',
|
|
160
|
+
data: withForecastBars(
|
|
161
|
+
withPointLabels(
|
|
162
|
+
pairWithCategories(data.categories, plotted[index].data, categoryAxisType),
|
|
163
|
+
source.labels,
|
|
164
|
+
formatters.label,
|
|
165
|
+
{ position: labelPosition }
|
|
166
|
+
),
|
|
167
|
+
source,
|
|
168
|
+
source.color || chartColors.series[index % chartColors.series.length]
|
|
169
|
+
),
|
|
170
|
+
stack: stackIds[index],
|
|
171
|
+
itemStyle: {
|
|
172
|
+
...(source.color && { color: source.color }),
|
|
173
|
+
borderRadius: barCornerRadius(isHorizontal, stackIds, index),
|
|
174
|
+
},
|
|
175
|
+
label: buildDataLabel({ show: true, position: labelPosition }, undefined, {
|
|
176
|
+
show: showValues,
|
|
177
|
+
formatter: formatters.label,
|
|
178
|
+
getLabel,
|
|
179
|
+
}),
|
|
180
|
+
emphasis: {
|
|
181
|
+
focus: 'series',
|
|
182
|
+
},
|
|
183
|
+
})),
|
|
184
|
+
data.series
|
|
185
|
+
);
|
|
186
|
+
// Ghost series count toward neither totals nor end labels
|
|
187
|
+
const solid = withoutGhostSeries(data.series);
|
|
188
|
+
const solidPlotted = plotted.filter((_, index) => data.series[index].variant !== 'ghost');
|
|
171
189
|
|
|
172
190
|
// Totals use the value format, not the percent one: they show the raw sum
|
|
173
191
|
const format = resolveValueFormatter(valueFormat, locale);
|
|
174
192
|
const totalSeries = showTotal
|
|
175
|
-
? buildStackTotalSeries(data.categories,
|
|
193
|
+
? buildStackTotalSeries(data.categories, solid, {
|
|
176
194
|
stacked,
|
|
177
195
|
position: labelPosition,
|
|
178
196
|
format,
|
|
@@ -184,9 +202,11 @@
|
|
|
184
202
|
const endLabels = !isHorizontal
|
|
185
203
|
? []
|
|
186
204
|
: totalSeries.length
|
|
187
|
-
? [...stackTotals(
|
|
205
|
+
? [...stackTotals(solid, stacked).values()].flat().map((t) => formatValue(t, format))
|
|
188
206
|
: showValues
|
|
189
|
-
?
|
|
207
|
+
? solidPlotted.flatMap((s) =>
|
|
208
|
+
s.data.map((value) => formatValue(value, formatters.format))
|
|
209
|
+
)
|
|
190
210
|
: [];
|
|
191
211
|
|
|
192
212
|
return mergeChartOption(
|
|
@@ -217,6 +237,7 @@
|
|
|
217
237
|
formatter: tooltipFormatter,
|
|
218
238
|
valueFormatter: formatters.tooltip,
|
|
219
239
|
getLabel,
|
|
240
|
+
forecastTag: forecastTagLookup(data.series),
|
|
220
241
|
}
|
|
221
242
|
),
|
|
222
243
|
legend: buildLegend(
|
|
@@ -14,6 +14,10 @@
|
|
|
14
14
|
buildTooltip,
|
|
15
15
|
categoryTable,
|
|
16
16
|
chartFormatters,
|
|
17
|
+
forecastStart,
|
|
18
|
+
forecastTagLookup,
|
|
19
|
+
withForecastLines,
|
|
20
|
+
withForecastPoints,
|
|
17
21
|
generateLineChartDescription,
|
|
18
22
|
getChartColors,
|
|
19
23
|
hasPointLabels,
|
|
@@ -24,6 +28,7 @@
|
|
|
24
28
|
seriesLabelLookup,
|
|
25
29
|
toPercentStack,
|
|
26
30
|
withPointLabels,
|
|
31
|
+
withGhostSeries,
|
|
27
32
|
withReferenceMarks,
|
|
28
33
|
withZoomInset,
|
|
29
34
|
} from '@classic-homes/charts-core';
|
|
@@ -121,14 +126,19 @@
|
|
|
121
126
|
const series = data.series.map((source, index) => ({
|
|
122
127
|
name: source.name,
|
|
123
128
|
type: 'line',
|
|
124
|
-
data:
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
+
data: withForecastPoints(
|
|
130
|
+
withPointLabels(
|
|
131
|
+
pairWithCategories(data.categories, plotted[index].data, xAxisConfig?.type),
|
|
132
|
+
source.labels,
|
|
133
|
+
formatters.label,
|
|
134
|
+
{ position: 'top' }
|
|
135
|
+
),
|
|
136
|
+
source,
|
|
137
|
+
showDataPoints ? 6 : 0
|
|
129
138
|
),
|
|
130
139
|
smooth,
|
|
131
|
-
|
|
140
|
+
// Forecast points show even when the others are hidden (size 0)
|
|
141
|
+
showSymbol: showSymbol || forecastStart(source) !== undefined,
|
|
132
142
|
symbolSize: showDataPoints ? 6 : 0,
|
|
133
143
|
connectNulls,
|
|
134
144
|
stack: source.stack ?? (stacked ? 'Total' : undefined),
|
|
@@ -172,6 +182,7 @@
|
|
|
172
182
|
formatter: tooltipFormatter,
|
|
173
183
|
valueFormatter: formatters.tooltip,
|
|
174
184
|
getLabel,
|
|
185
|
+
forecastTag: forecastTagLookup(data.series),
|
|
175
186
|
}
|
|
176
187
|
),
|
|
177
188
|
legend: buildLegend(
|
|
@@ -201,12 +212,20 @@
|
|
|
201
212
|
},
|
|
202
213
|
formatters.axis(yAxisConfig)
|
|
203
214
|
),
|
|
204
|
-
series:
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
215
|
+
series: withForecastLines(
|
|
216
|
+
withReferenceMarks(withGhostSeries(series, data.series), referenceLines, referenceBands, {
|
|
217
|
+
valueAxis: 'y',
|
|
218
|
+
format: formatters.format,
|
|
219
|
+
color: chartColors.reference,
|
|
220
|
+
bandColor: chartColors.referenceBand,
|
|
221
|
+
}),
|
|
222
|
+
data.series,
|
|
223
|
+
{
|
|
224
|
+
colors: data.series.map(
|
|
225
|
+
(s, i) => s.color || chartColors.series[i % chartColors.series.length]
|
|
226
|
+
),
|
|
227
|
+
}
|
|
228
|
+
),
|
|
210
229
|
} as EChartsOption,
|
|
211
230
|
optionOverride
|
|
212
231
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty, ChartLegend, type ChartContainerProps, type ChartLegendProps, type ChartSkeletonProps, type ChartErrorProps, type ChartEmptyProps, ChartDataTable, type ChartDataTableProps, } from './base/index.js';
|
|
2
2
|
export { LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, } from './core/index.js';
|
|
3
3
|
export { RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './extended/index.js';
|
|
4
|
-
export { ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, StatGroup, type StatGroupProps, } from './report/index.js';
|
|
4
|
+
export { ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, DeltaText, StatGroup, type StatGroupProps, } from './report/index.js';
|
|
@@ -5,4 +5,4 @@ export { LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, } f
|
|
|
5
5
|
// Extended charts
|
|
6
6
|
export { RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './extended/index.js';
|
|
7
7
|
// Report charts and stats
|
|
8
|
-
export { ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, StatGroup, } from './report/index.js';
|
|
8
|
+
export { ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, DeltaText, StatGroup, } from './report/index.js';
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
valueAxisConfig,
|
|
27
27
|
valueLabelFormatter,
|
|
28
28
|
withPointLabels,
|
|
29
|
+
withGhostSeries,
|
|
29
30
|
withReferenceMarks,
|
|
30
31
|
withZoomInset,
|
|
31
32
|
} from '@classic-homes/charts-core';
|
|
@@ -243,12 +244,17 @@
|
|
|
243
244
|
]
|
|
244
245
|
: []),
|
|
245
246
|
],
|
|
246
|
-
series: withReferenceMarks(
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
247
|
+
series: withReferenceMarks(
|
|
248
|
+
withGhostSeries(series, data.series),
|
|
249
|
+
referenceLines,
|
|
250
|
+
referenceBands,
|
|
251
|
+
{
|
|
252
|
+
valueAxis: 'y',
|
|
253
|
+
format: formatters.format,
|
|
254
|
+
color: chartColors.reference,
|
|
255
|
+
bandColor: chartColors.referenceBand,
|
|
256
|
+
}
|
|
257
|
+
),
|
|
252
258
|
} as EChartsOption,
|
|
253
259
|
optionOverride
|
|
254
260
|
);
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { DeltaTextProps } from '@classic-homes/charts-core';
|
|
3
|
+
import { computeDelta, formatValue, resolveValueFormatter } from '@classic-homes/charts-core';
|
|
4
|
+
import { cn } from '../../utils.js';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
current,
|
|
8
|
+
previous,
|
|
9
|
+
display = 'percent',
|
|
10
|
+
goodWhen = 'up',
|
|
11
|
+
valueFormat,
|
|
12
|
+
locale = 'en-US',
|
|
13
|
+
label,
|
|
14
|
+
class: className,
|
|
15
|
+
}: DeltaTextProps = $props();
|
|
16
|
+
|
|
17
|
+
const format = $derived(resolveValueFormatter(valueFormat, locale));
|
|
18
|
+
|
|
19
|
+
const change = $derived(computeDelta(current, previous));
|
|
20
|
+
|
|
21
|
+
const percentFormat = $derived(
|
|
22
|
+
new Intl.NumberFormat(locale, {
|
|
23
|
+
style: 'percent',
|
|
24
|
+
maximumFractionDigits: 1,
|
|
25
|
+
signDisplay: 'exceptZero',
|
|
26
|
+
})
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
const changeText = $derived.by(() => {
|
|
30
|
+
if (!change) return '';
|
|
31
|
+
const sign = change.change > 0 ? '+' : change.change < 0 ? '−' : '';
|
|
32
|
+
const absolute = `${sign}${formatValue(Math.abs(change.change), format)}`;
|
|
33
|
+
const percent = change.ratio === null ? null : percentFormat.format(change.ratio);
|
|
34
|
+
switch (display) {
|
|
35
|
+
case 'absolute':
|
|
36
|
+
return absolute;
|
|
37
|
+
case 'both':
|
|
38
|
+
return percent ? `${absolute} (${percent})` : absolute;
|
|
39
|
+
default:
|
|
40
|
+
// A change from zero has no percentage
|
|
41
|
+
return percent ?? absolute;
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
const changeTone = $derived.by(() => {
|
|
46
|
+
if (!change || change.direction === 'flat' || goodWhen === 'none') {
|
|
47
|
+
return 'text-muted-foreground';
|
|
48
|
+
}
|
|
49
|
+
return goodWhen === change.direction ? 'text-success' : 'text-destructive';
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
const labelText = $derived(
|
|
53
|
+
label ?? (typeof previous === 'number' ? `vs ${formatValue(previous, format)}` : '')
|
|
54
|
+
);
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
{#if change}
|
|
58
|
+
<span
|
|
59
|
+
data-testid="delta-text"
|
|
60
|
+
class={cn('inline-flex flex-wrap items-baseline gap-x-1 text-xs', className)}
|
|
61
|
+
>
|
|
62
|
+
<span class={cn('font-medium tabular-nums', changeTone)}>
|
|
63
|
+
<span aria-hidden="true">
|
|
64
|
+
{change.direction === 'up' ? '▲' : change.direction === 'down' ? '▼' : ''}
|
|
65
|
+
</span>
|
|
66
|
+
{changeText}
|
|
67
|
+
</span>
|
|
68
|
+
{#if labelText}
|
|
69
|
+
<span class="text-muted-foreground">{labelText}</span>
|
|
70
|
+
{/if}
|
|
71
|
+
</span>
|
|
72
|
+
{/if}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { StatCardProps } from '@classic-homes/charts-core';
|
|
3
|
-
import {
|
|
3
|
+
import { formatValue, resolveValueFormatter } from '@classic-homes/charts-core';
|
|
4
4
|
import { cn } from '../../utils.js';
|
|
5
|
+
import DeltaText from './DeltaText.svelte';
|
|
5
6
|
import Sparkline from './Sparkline.svelte';
|
|
6
7
|
|
|
7
8
|
let {
|
|
@@ -27,47 +28,7 @@
|
|
|
27
28
|
typeof value === 'string' ? value : formatValue(value ?? null, format, emptyValue)
|
|
28
29
|
);
|
|
29
30
|
|
|
30
|
-
const
|
|
31
|
-
delta
|
|
32
|
-
? computeDelta(delta.current ?? (typeof value === 'number' ? value : null), delta.previous)
|
|
33
|
-
: null
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
const percentFormat = $derived(
|
|
37
|
-
new Intl.NumberFormat(locale, {
|
|
38
|
-
style: 'percent',
|
|
39
|
-
maximumFractionDigits: 1,
|
|
40
|
-
signDisplay: 'exceptZero',
|
|
41
|
-
})
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
const changeText = $derived.by(() => {
|
|
45
|
-
if (!change || !delta) return '';
|
|
46
|
-
const sign = change.change > 0 ? '+' : change.change < 0 ? '−' : '';
|
|
47
|
-
const absolute = `${sign}${formatValue(Math.abs(change.change), format)}`;
|
|
48
|
-
const percent = change.ratio === null ? null : percentFormat.format(change.ratio);
|
|
49
|
-
switch (delta.display ?? 'percent') {
|
|
50
|
-
case 'absolute':
|
|
51
|
-
return absolute;
|
|
52
|
-
case 'both':
|
|
53
|
-
return percent ? `${absolute} (${percent})` : absolute;
|
|
54
|
-
default:
|
|
55
|
-
// A change from zero has no percentage
|
|
56
|
-
return percent ?? absolute;
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
const changeTone = $derived.by(() => {
|
|
61
|
-
if (!change || change.direction === 'flat' || delta?.goodWhen === 'none') {
|
|
62
|
-
return 'text-muted-foreground';
|
|
63
|
-
}
|
|
64
|
-
const good = (delta?.goodWhen ?? 'up') === change.direction;
|
|
65
|
-
return good ? 'text-success' : 'text-destructive';
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
const previousText = $derived(
|
|
69
|
-
delta && typeof delta.previous === 'number' ? formatValue(delta.previous, format) : ''
|
|
70
|
-
);
|
|
31
|
+
const deltaCurrent = $derived(delta?.current ?? (typeof value === 'number' ? value : null));
|
|
71
32
|
|
|
72
33
|
const valueTone = $derived(
|
|
73
34
|
{
|
|
@@ -114,18 +75,17 @@
|
|
|
114
75
|
<div class="mt-1 flex items-end justify-between gap-3">
|
|
115
76
|
<div class="min-w-0">
|
|
116
77
|
<div class={cn('text-2xl font-semibold tabular-nums', valueTone)}>{display}</div>
|
|
117
|
-
{#if
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
</div>
|
|
78
|
+
{#if delta}
|
|
79
|
+
<DeltaText
|
|
80
|
+
class="mt-1 flex"
|
|
81
|
+
current={deltaCurrent}
|
|
82
|
+
previous={delta.previous}
|
|
83
|
+
display={delta.display}
|
|
84
|
+
goodWhen={delta.goodWhen}
|
|
85
|
+
{valueFormat}
|
|
86
|
+
{locale}
|
|
87
|
+
label={delta.label}
|
|
88
|
+
/>
|
|
129
89
|
{/if}
|
|
130
90
|
{#if hint}
|
|
131
91
|
<p class="mt-1 text-xs text-muted-foreground">{hint}</p>
|
|
@@ -6,6 +6,7 @@ export { default as BoxPlotChart } from './BoxPlotChart.svelte';
|
|
|
6
6
|
export { default as WaterfallChart } from './WaterfallChart.svelte';
|
|
7
7
|
export { default as Sparkline } from './Sparkline.svelte';
|
|
8
8
|
export { default as StatCard } from './StatCard.svelte';
|
|
9
|
+
export { default as DeltaText } from './DeltaText.svelte';
|
|
9
10
|
export { default as StatGroup } from './StatGroup.svelte';
|
|
10
11
|
import type { ComponentProps } from 'svelte';
|
|
11
12
|
import type StatGroup from './StatGroup.svelte';
|
|
@@ -6,4 +6,5 @@ export { default as BoxPlotChart } from './BoxPlotChart.svelte';
|
|
|
6
6
|
export { default as WaterfallChart } from './WaterfallChart.svelte';
|
|
7
7
|
export { default as Sparkline } from './Sparkline.svelte';
|
|
8
8
|
export { default as StatCard } from './StatCard.svelte';
|
|
9
|
+
export { default as DeltaText } from './DeltaText.svelte';
|
|
9
10
|
export { default as StatGroup } from './StatGroup.svelte';
|
package/dist/lib/index.d.ts
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Svelte ECharts components for the Classic Theme design system
|
|
5
5
|
*/
|
|
6
|
-
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';
|
|
6
|
+
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';
|
|
7
7
|
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';
|
|
8
8
|
export { cn } from './utils.js';
|
|
9
9
|
export { fromRecords, toSliceData, resolveValueFormatter, formatValue, computeDelta, binValues, boxplotStats, waterfallLayout, toPercentStack, tableToCsv, downloadCsv, chartFilename, type FromRecordsOptions, type ToSliceDataOptions, type Delta, } from '@classic-homes/charts-core';
|
|
10
|
-
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';
|
|
10
|
+
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
CHANGED
|
@@ -12,7 +12,7 @@ LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart,
|
|
|
12
12
|
// Extended charts
|
|
13
13
|
RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart,
|
|
14
14
|
// Report charts and stats
|
|
15
|
-
ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, StatGroup, } from './components/index.js';
|
|
15
|
+
ComboChart, DotPlotChart, BulletChart, HistogramChart, BoxPlotChart, WaterfallChart, Sparkline, StatCard, DeltaText, StatGroup, } from './components/index.js';
|
|
16
16
|
// Composables
|
|
17
17
|
export { useChart, exportChartImage, registerEchartsModules, useChartTheme, useChartResize, registerClassicThemes, useReducedMotion, useChartLegend, } from './composables/index.js';
|
|
18
18
|
// Utils
|