diff --git a/.changeset/reactive-prop-derivations.md b/.changeset/reactive-prop-derivations.md new file mode 100644 index 0000000000..7fc917150b --- /dev/null +++ b/.changeset/reactive-prop-derivations.md @@ -0,0 +1,5 @@ +--- +'@evidence-dev/core-components': patch +--- + +Make prop-derived chart values reactive: Area's and Line's default label positions now follow `swapXY`, and Sparkline's series type follows `type`, instead of freezing at their mount-time values. diff --git a/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte b/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte index a70379fbc7..9cb11494e8 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/area/Area.svelte @@ -117,7 +117,7 @@ middle: 'inside' }; - let defaultLabelPosition = swapXY ? 'right' : 'top'; + $: defaultLabelPosition = swapXY ? 'right' : 'top'; $: labelPosition = (swapXY ? swapXYLabelPositions[labelPosition] : labelPositions[labelPosition]) ?? defaultLabelPosition; diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/_Sparkline.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/_Sparkline.svelte index 10db89655b..34b2f0ed09 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/core/_Sparkline.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/core/_Sparkline.svelte @@ -37,7 +37,7 @@ export let yScale = false; // scale the y axis to the data $: yScale = yScale === 'true' || yScale === true; - let seriesType = type === 'area' ? 'line' : type; + $: seriesType = type === 'area' ? 'line' : type; export let connectGroup = undefined; // connects to all other connected sparklines with the same group name (shared tooltip behaviour) diff --git a/packages/ui/core-components/src/lib/unsorted/viz/line/Line.svelte b/packages/ui/core-components/src/lib/unsorted/viz/line/Line.svelte index 3541f27388..d0ff12e0a3 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/line/Line.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/line/Line.svelte @@ -139,7 +139,7 @@ middle: 'inside' }; - let defaultLabelPosition = swapXY ? 'right' : 'top'; + $: defaultLabelPosition = swapXY ? 'right' : 'top'; $: labelPosition = (swapXY ? swapXYLabelPositions[labelPosition] : labelPositions[labelPosition]) ?? defaultLabelPosition;