@fundar/data-chart-telling 0.0.25 → 0.0.27

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.
Files changed (198) hide show
  1. package/dist/charts/BaseChart.svelte +18 -10
  2. package/dist/charts/BaseChart.svelte.d.ts +4 -2
  3. package/dist/charts/bar/Chart.svelte +2 -0
  4. package/dist/charts/heatmap/Chart.svelte +5 -3
  5. package/dist/charts/heatmap/Chart.svelte.d.ts +1 -2
  6. package/dist/charts/line/Chart.svelte +2 -0
  7. package/dist/charts/pyramid/Chart.svelte +5 -3
  8. package/dist/charts/pyramid/Chart.svelte.d.ts +1 -2
  9. package/dist/charts/scatter/Chart.svelte +95 -0
  10. package/dist/charts/scatter/Chart.svelte.d.ts +28 -0
  11. package/dist/configuration/config.svelte.js +28 -0
  12. package/dist/configuration/themes/dark.js +4 -0
  13. package/dist/configuration/themes/index.d.ts +112 -0
  14. package/dist/index.d.ts +26 -16
  15. package/dist/index.js +11 -3
  16. package/dist/layout/coordinates/CoordinatesLayout.svelte +93 -0
  17. package/dist/layout/{plot/RuleLayout.svelte.d.ts → coordinates/CoordinatesLayout.svelte.d.ts} +13 -16
  18. package/dist/layout/coordinates/margins.d.ts +16 -0
  19. package/dist/layout/coordinates/margins.js +11 -0
  20. package/dist/{plots/geo → layout/coordinates}/projections/argentina.d.ts +1 -1
  21. package/dist/layout/{geo → coordinates}/resolveProjection.d.ts +1 -1
  22. package/dist/layout/coordinates/resolveProjection.js +24 -0
  23. package/dist/{plots/geo → layout/coordinates}/zoom.svelte.d.ts +1 -1
  24. package/dist/layout/facet/FacetIndicator.svelte +31 -0
  25. package/dist/layout/facet/FacetIndicator.svelte.d.ts +8 -0
  26. package/dist/layout/facet/FacetLayout.svelte +249 -24
  27. package/dist/layout/facet/FacetLayout.svelte.d.ts +7 -1
  28. package/dist/layout/geometry/GeometryLayout.svelte +231 -0
  29. package/dist/layout/geometry/GeometryLayout.svelte.d.ts +62 -0
  30. package/dist/layout/legend/ContinuousSection.svelte +1 -1
  31. package/dist/layout/legend/ContinuousSection.svelte.d.ts +1 -1
  32. package/dist/layout/legend/DiscreteSection.svelte +1 -1
  33. package/dist/layout/legend/DiscreteSection.svelte.d.ts +1 -1
  34. package/dist/layout/legend/LegendLayout.svelte +1 -1
  35. package/dist/layout/legend/LegendLayout.svelte.d.ts +1 -1
  36. package/dist/layout/legend/interaction.svelte.d.ts +9 -1
  37. package/dist/layout/legend/interaction.svelte.js +9 -1
  38. package/dist/layout/plot/BasePlotLayout.svelte +142 -155
  39. package/dist/layout/plot/BasePlotLayout.svelte.d.ts +61 -51
  40. package/dist/layout/plot/margins.d.ts +0 -16
  41. package/dist/layout/plot/margins.js +0 -11
  42. package/dist/layout/{plot/AxisLayout.svelte → scales/ScalesLayout.svelte} +23 -16
  43. package/dist/layout/{plot/AxisLayout.svelte.d.ts → scales/ScalesLayout.svelte.d.ts} +4 -5
  44. package/dist/layout/scales/buildScale.d.ts +8 -0
  45. package/dist/layout/scales/buildScale.js +43 -0
  46. package/dist/layout/styles/StylesLayout.svelte +75 -0
  47. package/dist/layout/styles/StylesLayout.svelte.d.ts +15 -0
  48. package/dist/{plots/geo → layout/styles}/TileLayer.svelte +2 -2
  49. package/dist/{plots/geo → layout/styles}/TileLayer.svelte.d.ts +1 -1
  50. package/dist/layout/timeline/Timeline.svelte +1 -1
  51. package/dist/layout/timeline/Timeline.svelte.d.ts +1 -1
  52. package/dist/layout/timeline/TimelineLayout.svelte +1 -1
  53. package/dist/layout/timeline/TimelineLayout.svelte.d.ts +1 -1
  54. package/dist/layout/tooltip/Tooltip.svelte +16 -20
  55. package/dist/layout/tooltip/Tooltip.svelte.d.ts +5 -0
  56. package/dist/layout/tooltip/TooltipLayout.svelte +7 -1
  57. package/dist/layout/tooltip/TooltipLayout.svelte.d.ts +4 -0
  58. package/dist/layout/tooltip/controller.svelte.d.ts +4 -5
  59. package/dist/layout/tooltip/controller.svelte.js +42 -16
  60. package/dist/layout/tooltip/resolveTooltipPlacement.d.ts +24 -0
  61. package/dist/layout/tooltip/resolveTooltipPlacement.js +49 -0
  62. package/dist/layout/tooltip/utils.d.ts +27 -19
  63. package/dist/layout/tooltip/utils.js +16 -15
  64. package/dist/markers/BarMarker.svelte +92 -0
  65. package/dist/markers/BarMarker.svelte.d.ts +7 -0
  66. package/dist/markers/CellMarker.svelte +21 -0
  67. package/dist/markers/CellMarker.svelte.d.ts +7 -0
  68. package/dist/markers/ContourMarker.svelte +28 -0
  69. package/dist/markers/ContourMarker.svelte.d.ts +7 -0
  70. package/dist/markers/DeltaMarker.svelte +32 -39
  71. package/dist/markers/DeltaMarker.svelte.d.ts +4 -5
  72. package/dist/markers/DotMarker.svelte +35 -6
  73. package/dist/markers/DotMarker.svelte.d.ts +11 -2
  74. package/dist/markers/GeoFeaturesMarker.svelte +19 -0
  75. package/dist/markers/GeoFeaturesMarker.svelte.d.ts +7 -0
  76. package/dist/markers/GeoHoverMarker.svelte +25 -0
  77. package/dist/markers/GeoHoverMarker.svelte.d.ts +9 -0
  78. package/dist/markers/GraticuleMarker.svelte +18 -0
  79. package/dist/markers/GraticuleMarker.svelte.d.ts +7 -0
  80. package/dist/markers/HoverMarker.svelte +34 -35
  81. package/dist/markers/HoverMarker.svelte.d.ts +15 -9
  82. package/dist/markers/LineMarker.svelte +19 -0
  83. package/dist/markers/LineMarker.svelte.d.ts +7 -0
  84. package/dist/markers/LinkMarker.svelte +42 -0
  85. package/dist/markers/LinkMarker.svelte.d.ts +7 -0
  86. package/dist/markers/RuleMarker.svelte +24 -0
  87. package/dist/markers/RuleMarker.svelte.d.ts +10 -0
  88. package/dist/markers/SphereMarker.svelte +15 -0
  89. package/dist/markers/SphereMarker.svelte.d.ts +7 -0
  90. package/dist/markers/TextMarker.svelte +1 -1
  91. package/dist/markers/TextMarker.svelte.d.ts +1 -1
  92. package/dist/markers/VectorMarker.svelte +20 -0
  93. package/dist/markers/VectorMarker.svelte.d.ts +7 -0
  94. package/dist/markers/inset/InsetMarker.svelte +38 -45
  95. package/dist/markers/inset/InsetMarker.svelte.d.ts +6 -2
  96. package/dist/plots/bar/Plot.svelte +96 -87
  97. package/dist/plots/bar/Plot.svelte.d.ts +4 -5
  98. package/dist/plots/bar/ValueLabels.svelte +70 -24
  99. package/dist/plots/bar/ValueLabels.svelte.d.ts +11 -2
  100. package/dist/plots/bar/buildBarMarkers.d.ts +30 -0
  101. package/dist/plots/bar/buildBarMarkers.js +100 -0
  102. package/dist/plots/bar/layout.svelte.d.ts +1 -2
  103. package/dist/plots/bar/layout.svelte.js +1 -1
  104. package/dist/plots/geo/Plot.svelte +113 -387
  105. package/dist/plots/geo/Plot.svelte.d.ts +5 -4
  106. package/dist/plots/geo/buildGeoMarkers.d.ts +33 -0
  107. package/dist/plots/geo/buildGeoMarkers.js +47 -0
  108. package/dist/plots/heatmap/Plot.svelte +27 -52
  109. package/dist/plots/heatmap/Plot.svelte.d.ts +4 -5
  110. package/dist/plots/heatmap/ValueLabels.svelte +5 -5
  111. package/dist/plots/heatmap/ValueLabels.svelte.d.ts +3 -3
  112. package/dist/plots/heatmap/buildCellMarkers.d.ts +21 -0
  113. package/dist/plots/heatmap/buildCellMarkers.js +25 -0
  114. package/dist/plots/line/Plot.svelte +73 -141
  115. package/dist/plots/line/Plot.svelte.d.ts +4 -4
  116. package/dist/plots/line/ValueLabels.svelte +84 -85
  117. package/dist/plots/line/ValueLabels.svelte.d.ts +10 -1
  118. package/dist/plots/line/buildLineMarkers.d.ts +15 -0
  119. package/dist/plots/line/buildLineMarkers.js +57 -0
  120. package/dist/plots/pyramid/Plot.svelte +80 -121
  121. package/dist/plots/pyramid/Plot.svelte.d.ts +4 -5
  122. package/dist/plots/pyramid/ValueLabels.svelte +71 -25
  123. package/dist/plots/pyramid/ValueLabels.svelte.d.ts +11 -2
  124. package/dist/plots/pyramid/buildPyramidBarMarkers.d.ts +19 -0
  125. package/dist/plots/pyramid/buildPyramidBarMarkers.js +32 -0
  126. package/dist/plots/scatter/Plot.svelte +242 -0
  127. package/dist/{layout/plot/GridLayout.svelte.d.ts → plots/scatter/Plot.svelte.d.ts} +9 -7
  128. package/dist/plots/scatter/ValueLabels.svelte +149 -0
  129. package/dist/plots/{bar/BarSegments.svelte.d.ts → scatter/ValueLabels.svelte.d.ts} +17 -15
  130. package/dist/plots/scatter/buildScatterMarkers.d.ts +11 -0
  131. package/dist/plots/scatter/buildScatterMarkers.js +37 -0
  132. package/dist/plots/scatter/resolveRadiusPaddedDomain.d.ts +10 -0
  133. package/dist/plots/scatter/resolveRadiusPaddedDomain.js +23 -0
  134. package/dist/plots/utils/declutter.d.ts +55 -37
  135. package/dist/plots/utils/declutter.js +79 -64
  136. package/dist/plots/utils/geoAccessors.d.ts +1 -1
  137. package/dist/plots/utils/geoAccessors.js +1 -1
  138. package/dist/plots/utils/labelOverflow.svelte.d.ts +51 -0
  139. package/dist/plots/utils/labelOverflow.svelte.js +116 -0
  140. package/dist/plots/utils/legendDisabled.d.ts +1 -1
  141. package/dist/plots/utils/segments.d.ts +17 -10
  142. package/dist/plots/utils/segments.js +26 -16
  143. package/dist/types/charts/common.d.ts +3 -50
  144. package/dist/types/charts/props.d.ts +8 -8
  145. package/dist/types/configuration/styling.d.ts +26 -2
  146. package/dist/types/{plots/scales/geo.d.ts → layout/coordinates.d.ts} +33 -1
  147. package/dist/types/layout/facet.d.ts +41 -0
  148. package/dist/types/layout/geometry.d.ts +17 -0
  149. package/dist/types/layout/legend.d.ts +65 -1
  150. package/dist/types/{plots/axis.d.ts → layout/scales.d.ts} +11 -0
  151. package/dist/types/layout/styles.d.ts +115 -0
  152. package/dist/types/layout/timeline.d.ts +32 -0
  153. package/dist/types/layout/tooltip.d.ts +20 -1
  154. package/dist/types/markers/all.d.ts +11 -0
  155. package/dist/types/markers/all.js +1 -0
  156. package/dist/types/markers/base.d.ts +45 -0
  157. package/dist/types/markers/base.js +1 -0
  158. package/dist/types/markers/common.d.ts +64 -16
  159. package/dist/types/markers/geo.d.ts +75 -100
  160. package/dist/types/markers/line.d.ts +34 -0
  161. package/dist/types/markers/line.js +1 -0
  162. package/dist/types/markers/props.d.ts +1 -1
  163. package/dist/types/plots/data/common.d.ts +1 -1
  164. package/dist/types/plots/data/scatter.d.ts +13 -0
  165. package/dist/types/plots/data/scatter.js +1 -0
  166. package/dist/types/plots/props.d.ts +46 -74
  167. package/dist/types/plots/segments/common.d.ts +6 -12
  168. package/dist/types/plots/segments/config.d.ts +1 -1
  169. package/dist/types/plots/styling.d.ts +10 -0
  170. package/dist/{plots/utils → utils}/delta.d.ts +2 -2
  171. package/dist/{plots/utils → utils}/delta.js +1 -1
  172. package/dist/utils/edgeAwareAnchor.d.ts +37 -0
  173. package/dist/utils/edgeAwareAnchor.js +65 -0
  174. package/dist/utils/grouping.d.ts +1 -1
  175. package/dist/utils/interpolate.d.ts +2 -2
  176. package/package.json +3 -1
  177. package/dist/layout/geo/GeoLayout.svelte +0 -51
  178. package/dist/layout/geo/GeoLayout.svelte.d.ts +0 -24
  179. package/dist/layout/geo/resolveProjection.js +0 -48
  180. package/dist/layout/plot/GridLayout.svelte +0 -30
  181. package/dist/layout/plot/RuleLayout.svelte +0 -111
  182. package/dist/plots/bar/BarSegments.svelte +0 -69
  183. package/dist/types/charts/legend.d.ts +0 -60
  184. package/dist/types/plots/delta.d.ts +0 -19
  185. package/dist/types/plots/styles/common.d.ts +0 -52
  186. package/dist/types/plots/styles/geo.d.ts +0 -42
  187. /package/dist/{plots/geo → layout/coordinates}/projections/argentina.js +0 -0
  188. /package/dist/{plots/geo → layout/coordinates}/projections/fit.d.ts +0 -0
  189. /package/dist/{plots/geo → layout/coordinates}/projections/fit.js +0 -0
  190. /package/dist/{plots/geo → layout/coordinates}/rotate.svelte.d.ts +0 -0
  191. /package/dist/{plots/geo → layout/coordinates}/rotate.svelte.js +0 -0
  192. /package/dist/{plots/geo → layout/coordinates}/zoom.svelte.js +0 -0
  193. /package/dist/types/{charts/legend.js → layout/coordinates.js} +0 -0
  194. /package/dist/types/{plots/axis.js → layout/facet.js} +0 -0
  195. /package/dist/types/{plots/delta.js → layout/geometry.js} +0 -0
  196. /package/dist/types/{plots/scales/geo.js → layout/scales.js} +0 -0
  197. /package/dist/types/{plots/styles/common.js → layout/styles.js} +0 -0
  198. /package/dist/types/{plots/styles/geo.js → layout/timeline.js} +0 -0
@@ -7,14 +7,11 @@
7
7
  import { provideHover } from '../layout/tooltip/hover.svelte';
8
8
  import { provideLegendInteraction } from '../layout/legend/interaction.svelte';
9
9
  import type { Snippet } from 'svelte';
10
- import type { LegendSection } from '../types/charts/legend';
10
+ import type { LegendSection } from '../types/layout/legend';
11
11
  import type { HoverStrategy } from '../types/layout/tooltip';
12
- import type {
13
- ChartPlotSnippet,
14
- FacetConfig,
15
- TimeValue,
16
- TimelineConfig,
17
- } from '../types/charts/common';
12
+ import type { ChartPlotSnippet } from '../types/charts/common';
13
+ import type { FacetConfig } from '../types/layout/facet';
14
+ import type { TimeValue, TimelineConfig } from '../types/layout/timeline';
18
15
 
19
16
  /**
20
17
  * The orchestrator. It wires together the four interchangeable layout
@@ -60,7 +57,11 @@
60
57
  const cfg = $derived(getConfiguration());
61
58
 
62
59
  const hoverStore = provideHover();
63
- provideLegendInteraction();
60
+ const legendInteraction = provideLegendInteraction();
61
+ const legendPlotContext = $derived({
62
+ disabledSeries: new Set(legendInteraction.disabledSeries.keys()),
63
+ isDisabled: (name: string) => legendInteraction.disabledSeries.has(name),
64
+ });
64
65
  $effect(() => {
65
66
  hoverStore.strategy = hover?.strategy ?? 'x';
66
67
  hoverStore.sync = hover?.sync ?? false;
@@ -75,6 +76,12 @@
75
76
  columns={facet.columns}
76
77
  values={facet.values}
77
78
  gap={facet.gap}
79
+ mode={facet.mode}
80
+ visible={facet.visible}
81
+ pageSize={facet.pageSize}
82
+ formatIndicator={facet.formatIndicator}
83
+ indicator={facet.indicator}
84
+ navButton={facet.navButton}
78
85
  width={w}
79
86
  height={h}
80
87
  >
@@ -84,12 +91,13 @@
84
91
  width: cw,
85
92
  height: ch,
86
93
  facetValue,
87
- selectedValue
94
+ selectedValue,
95
+ legend: legendPlotContext
88
96
  })}
89
97
  {/snippet}
90
98
  </FacetLayout>
91
99
  {:else}
92
- {@render plot({ data: rows, width: w, height: h, selectedValue })}
100
+ {@render plot({ data: rows, width: w, height: h, selectedValue, legend: legendPlotContext })}
93
101
  {/if}
94
102
  {/snippet}
95
103
 
@@ -1,7 +1,9 @@
1
1
  import type { Snippet } from 'svelte';
2
- import type { LegendSection } from '../types/charts/legend';
2
+ import type { LegendSection } from '../types/layout/legend';
3
3
  import type { HoverStrategy } from '../types/layout/tooltip';
4
- import type { ChartPlotSnippet, FacetConfig, TimelineConfig } from '../types/charts/common';
4
+ import type { ChartPlotSnippet } from '../types/charts/common';
5
+ import type { FacetConfig } from '../types/layout/facet';
6
+ import type { TimelineConfig } from '../types/layout/timeline';
5
7
  declare function $$render<TRow extends Record<string, unknown>>(): {
6
8
  props: {
7
9
  width: number;
@@ -101,6 +101,8 @@
101
101
  sync: tip.sync,
102
102
  series: tip.series,
103
103
  content: tip.content,
104
+ anchorX: tip.anchorX,
105
+ anchorY: tip.anchorY,
104
106
  }
105
107
  : undefined}
106
108
  />
@@ -9,7 +9,7 @@
9
9
  } from '../../layout/tooltip/utils';
10
10
  import { resolveAccessor } from '../../plots/utils/accessors';
11
11
  import type { Accessor } from '../../types/plots/data/common';
12
- import type { AxisBasedScalesConfig } from '../../types/plots/props';
12
+ import type { AxisBasedScalesConfig } from '../../types/layout/scales';
13
13
  import type { CellSegmentStyle } from '../../types/plots/segments/common';
14
14
  import type { ChartProps } from '../../types/charts/props';
15
15
 
@@ -46,7 +46,7 @@
46
46
  const getX = $derived(resolveAccessor<TRow>(x));
47
47
  const getY = $derived(resolveAccessor<TRow>(y));
48
48
  const getZ = $derived(resolveAccessor<TRow>(z));
49
- const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
49
+ const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
50
50
 
51
51
  // Compute domain over the full dataset so colour is comparable across facets/timeline steps.
52
52
  // Caller-provided `scales.z.domain` always takes precedence.
@@ -66,7 +66,7 @@
66
66
  const defaultFormat = $derived((row: TRow) => {
67
67
  const xl = scales.x?.label || 'x';
68
68
  const yl = scales.y?.label || 'y';
69
- return `${xl} ${getX(row)} · ${yl} ${getY(row)}\n${fmtVal(Number(getZ(row)), '')}`;
69
+ return `${xl} ${getX(row)} · ${yl} ${getY(row)}\n${formatValue(Number(getZ(row)), '')}`;
70
70
  });
71
71
  </script>
72
72
 
@@ -105,6 +105,8 @@
105
105
  sync: tip.sync,
106
106
  series: tip.series,
107
107
  content: tip.content,
108
+ anchorX: tip.anchorX,
109
+ anchorY: tip.anchorY,
108
110
  }
109
111
  : undefined}
110
112
  />
@@ -1,8 +1,7 @@
1
1
  import type { Accessor } from '../../types/plots/data/common';
2
- import type { CellSegmentStyle } from '../../types/plots/segments/common';
3
2
  import type { ChartProps } from '../../types/charts/props';
4
3
  declare function $$render<TRow extends Record<string, unknown>>(): {
5
- props: ChartProps<TRow, CellSegmentStyle> & {
4
+ props: ChartProps<TRow, import("../..").AreaStyle> & {
6
5
  z: Accessor<TRow, number>;
7
6
  };
8
7
  exports: {};
@@ -103,6 +103,8 @@
103
103
  sync: tip.sync,
104
104
  series: tip.series,
105
105
  content: tip.content,
106
+ anchorX: tip.anchorX,
107
+ anchorY: tip.anchorY,
106
108
  }
107
109
  : undefined}
108
110
  />
@@ -9,7 +9,7 @@
9
9
  } from '../../layout/tooltip/utils';
10
10
  import { resolveAccessor } from '../../plots/utils/accessors';
11
11
  import { resolveTimelineInterpolation } from '../../utils/interpolate';
12
- import type { AxisValue } from '../../types/plots/axis';
12
+ import type { AxisValue } from '../../types/layout/scales';
13
13
  import type { Accessor } from '../../types/plots/data/common';
14
14
  import type { BarSegmentStyle } from '../../types/plots/segments/common';
15
15
  import type { ChartProps } from '../../types/charts/props';
@@ -48,7 +48,7 @@
48
48
  const getMagnitude = $derived(resolveAccessor<TRow>(magnitude));
49
49
  const getCategory = $derived(resolveAccessor<TRow>(category));
50
50
  const getSides = $derived(resolveAccessor<TRow>(sides));
51
- const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
51
+ const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
52
52
 
53
53
  // Computed once over the full dataset (not the per-facet/timeline-filtered
54
54
  // rows) so the diverging axis and category bands stay comparable across
@@ -86,7 +86,7 @@
86
86
  const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'y'));
87
87
  const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
88
88
  const defaultFormat = $derived(
89
- (row: TRow) => `${String(getSides(row))}\n${String(getCategory(row))}: ${fmtVal(Number(getMagnitude(row)), String(getSides(row)))}`,
89
+ (row: TRow) => `${String(getSides(row))}\n${String(getCategory(row))}: ${formatValue(Number(getMagnitude(row)), String(getSides(row)))}`,
90
90
  );
91
91
  </script>
92
92
 
@@ -125,6 +125,8 @@
125
125
  sync: tip.sync,
126
126
  series: tip.series,
127
127
  content: tip.content,
128
+ anchorX: tip.anchorX,
129
+ anchorY: tip.anchorY,
128
130
  }
129
131
  : undefined}
130
132
  />
@@ -1,8 +1,7 @@
1
1
  import type { Accessor } from '../../types/plots/data/common';
2
- import type { BarSegmentStyle } from '../../types/plots/segments/common';
3
2
  import type { ChartProps } from '../../types/charts/props';
4
3
  declare function $$render<TRow extends Record<string, unknown>>(): {
5
- props: ChartProps<TRow, BarSegmentStyle> & {
4
+ props: ChartProps<TRow, import("../..").AreaStyle> & {
6
5
  x: Accessor<TRow, number>;
7
6
  z: Accessor<TRow, unknown>;
8
7
  };
@@ -0,0 +1,95 @@
1
+ <script lang="ts" generics="TRow extends Record<string, unknown>">
2
+ import BaseChart from '../BaseChart.svelte';
3
+ import ScatterPlot from '../../plots/scatter/Plot.svelte';
4
+ import {
5
+ resolveTooltip,
6
+ resolveHoverStrategy,
7
+ resolveHoverSync,
8
+ hasHoverMarker
9
+ } from '../../layout/tooltip/utils';
10
+ import { resolveAccessor } from '../../plots/utils/accessors';
11
+ import type { Accessor } from '../../types/plots/data/common';
12
+ import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
13
+ import type { ChartProps } from '../../types/charts/props';
14
+
15
+ /**
16
+ * High-level scatter chart. Groups flat rows by `z` into one point cloud
17
+ * per group and delegates all chrome to {@link BaseChart}. `r` gives every
18
+ * point a per-row radius (bubble sizing), independent of `z` grouping.
19
+ */
20
+ let {
21
+ width,
22
+ height,
23
+ title,
24
+ subtitle,
25
+ caption,
26
+ legend,
27
+ header,
28
+ footer,
29
+ data,
30
+ x,
31
+ y,
32
+ z,
33
+ r,
34
+ styles = {},
35
+ segments,
36
+ markers = [],
37
+ scales = {},
38
+ margins,
39
+ facet,
40
+ timeline,
41
+ tooltip,
42
+ }: ChartProps<TRow, ScatterSegmentStyle> & { r?: Accessor<TRow, number> | number } = $props();
43
+
44
+ const tip = $derived(resolveTooltip(tooltip, 'punctual'));
45
+ const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));
46
+ const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'punctual'));
47
+ const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
48
+ const getX = $derived(resolveAccessor<TRow>(x));
49
+ const getY = $derived(resolveAccessor<TRow>(y));
50
+ const defaultFormat = $derived((row: TRow) => `${String(getX(row))}, ${String(getY(row))}`);
51
+ </script>
52
+
53
+ <BaseChart
54
+ {width}
55
+ {height}
56
+ {title}
57
+ {subtitle}
58
+ {caption}
59
+ {legend}
60
+ {header}
61
+ {footer}
62
+ {data}
63
+ {facet}
64
+ {timeline}
65
+ hover={hoverEnabled ? { strategy: resolvedStrategy, sync: resolvedSync } : undefined}
66
+ >
67
+ {#snippet plot({ data: rows, width: w, height: h, facetValue })}
68
+ <ScatterPlot
69
+ width={w}
70
+ height={h}
71
+ data={rows}
72
+ {x}
73
+ {y}
74
+ {z}
75
+ {r}
76
+ {styles}
77
+ {segments}
78
+ {markers}
79
+ {scales}
80
+ {margins}
81
+ tooltip={tip.enabled
82
+ ? {
83
+ format: tip.format ?? defaultFormat,
84
+ facetId: facetValue ?? '',
85
+ strategy: tip.strategy,
86
+ sync: tip.sync,
87
+ series: tip.series,
88
+ content: tip.content,
89
+ anchorX: tip.anchorX,
90
+ anchorY: tip.anchorY,
91
+ }
92
+ : undefined}
93
+ />
94
+ {/snippet}
95
+ </BaseChart>
@@ -0,0 +1,28 @@
1
+ import type { Accessor } from '../../types/plots/data/common';
2
+ import type { ChartProps } from '../../types/charts/props';
3
+ declare function $$render<TRow extends Record<string, unknown>>(): {
4
+ props: ChartProps<TRow, import("../..").DotStyle> & {
5
+ r?: Accessor<TRow, number> | number;
6
+ };
7
+ exports: {};
8
+ bindings: "";
9
+ slots: {};
10
+ events: {};
11
+ };
12
+ declare class __sveltets_Render<TRow extends Record<string, unknown>> {
13
+ props(): ReturnType<typeof $$render<TRow>>['props'];
14
+ events(): ReturnType<typeof $$render<TRow>>['events'];
15
+ slots(): ReturnType<typeof $$render<TRow>>['slots'];
16
+ bindings(): "";
17
+ exports(): {};
18
+ }
19
+ interface $$IsomorphicComponent {
20
+ 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']>> & {
21
+ $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
22
+ } & ReturnType<__sveltets_Render<TRow>['exports']>;
23
+ <TRow extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
24
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
25
+ }
26
+ declare const Chart: $$IsomorphicComponent;
27
+ type Chart<TRow extends Record<string, unknown>> = InstanceType<typeof Chart<TRow>>;
28
+ export default Chart;
@@ -81,11 +81,29 @@ export const DEFAULT_CONFIG = {
81
81
  connectorWidth: 0.5,
82
82
  },
83
83
  },
84
+ scatter: { dotRadius: 5 },
84
85
  timeline: { axisColor: 'currentColor', activeColor: '#e6580d', thickness: 60 },
85
86
  hover: {
86
87
  rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
87
88
  dot: { dotRadius: 5, dotFill: 'currentColor' },
88
89
  font: { fill: 'currentColor', fontSize: 12, dy: -18 },
90
+ area: { stroke: '#e6580d', strokeWidth: 2, fillOpacity: 0 },
91
+ },
92
+ facet: {
93
+ indicator: {
94
+ background: '#111827',
95
+ color: '#ffffff',
96
+ fontSize: '0.8125rem',
97
+ padding: '0.125rem 0.5rem',
98
+ radius: '999px',
99
+ },
100
+ navButton: {
101
+ background: '#111827',
102
+ color: '#ffffff',
103
+ size: '2rem',
104
+ fontSize: '1.1rem',
105
+ disabledOpacity: 0.3,
106
+ },
89
107
  },
90
108
  };
91
109
  // ── Merge ─────────────────────────────────────────────────────────────────────
@@ -160,6 +178,16 @@ export function configToCssVars(c) {
160
178
  '--dct-heat-min': c.continuous.min,
161
179
  '--dct-heat-max': c.continuous.max,
162
180
  '--dct-heat-text': c.continuous.labelColor,
181
+ '--dct-facet-indicator-bg': c.facet.indicator.background,
182
+ '--dct-facet-indicator-color': c.facet.indicator.color,
183
+ '--dct-facet-indicator-size': c.facet.indicator.fontSize,
184
+ '--dct-facet-indicator-pad': c.facet.indicator.padding,
185
+ '--dct-facet-indicator-radius': c.facet.indicator.radius,
186
+ '--dct-facet-nav-bg': c.facet.navButton.background,
187
+ '--dct-facet-nav-color': c.facet.navButton.color,
188
+ '--dct-facet-nav-btn-size': c.facet.navButton.size,
189
+ '--dct-facet-nav-font-size': c.facet.navButton.fontSize,
190
+ '--dct-facet-nav-disabled-opacity': String(c.facet.navButton.disabledOpacity),
163
191
  };
164
192
  }
165
193
  /** Serialize a CSS-vars record into a `style` attribute string. */
@@ -11,6 +11,10 @@ export const DARK_THEME = {
11
11
  continuous: { min: '#1e293b', max: '#38bdf8', labelColor: '#e5e7eb' },
12
12
  axis: { color: '#94a3b8', fontSize: 13, xTickSize: 6, yTickSize: 6 },
13
13
  tooltip: { background: '#e5e7eb', color: '#0f172a' },
14
+ facet: {
15
+ indicator: { background: '#e5e7eb', color: '#0f172a' },
16
+ navButton: { background: '#e5e7eb', color: '#0f172a' },
17
+ },
14
18
  line: { strokeWidth: 3, dotRadius: 4 },
15
19
  timeline: { activeColor: '#38bdf8', axisColor: '#94a3b8', thickness: 60 },
16
20
  hover: { rule: { stroke: '#38bdf8' } },
@@ -92,6 +92,9 @@ export declare const THEMES: {
92
92
  connectorWidth?: number | undefined;
93
93
  } | undefined;
94
94
  } | undefined;
95
+ scatter?: {
96
+ dotRadius?: number | undefined;
97
+ } | undefined;
95
98
  timeline?: {
96
99
  axisColor?: string | undefined;
97
100
  activeColor?: string | undefined;
@@ -133,6 +136,31 @@ export declare const THEMES: {
133
136
  class?: string | undefined;
134
137
  textClass?: string | undefined;
135
138
  } | undefined;
139
+ area?: {
140
+ fill?: string | undefined;
141
+ fillOpacity?: number | undefined;
142
+ stroke?: string | undefined;
143
+ strokeWidth?: number | undefined;
144
+ strokeOpacity?: number | undefined;
145
+ strokeDasharray?: (string | import("../..").LineStyle) | undefined;
146
+ borderRadius?: number | undefined;
147
+ } | undefined;
148
+ } | undefined;
149
+ facet?: {
150
+ indicator?: {
151
+ background?: string | undefined;
152
+ color?: string | undefined;
153
+ fontSize?: string | undefined;
154
+ padding?: string | undefined;
155
+ radius?: string | undefined;
156
+ } | undefined;
157
+ navButton?: {
158
+ background?: string | undefined;
159
+ color?: string | undefined;
160
+ size?: string | undefined;
161
+ fontSize?: string | undefined;
162
+ disabledOpacity?: number | undefined;
163
+ } | undefined;
136
164
  } | undefined;
137
165
  };
138
166
  Editorial: {
@@ -222,6 +250,9 @@ export declare const THEMES: {
222
250
  connectorWidth?: number | undefined;
223
251
  } | undefined;
224
252
  } | undefined;
253
+ scatter?: {
254
+ dotRadius?: number | undefined;
255
+ } | undefined;
225
256
  timeline?: {
226
257
  axisColor?: string | undefined;
227
258
  activeColor?: string | undefined;
@@ -263,6 +294,31 @@ export declare const THEMES: {
263
294
  class?: string | undefined;
264
295
  textClass?: string | undefined;
265
296
  } | undefined;
297
+ area?: {
298
+ fill?: string | undefined;
299
+ fillOpacity?: number | undefined;
300
+ stroke?: string | undefined;
301
+ strokeWidth?: number | undefined;
302
+ strokeOpacity?: number | undefined;
303
+ strokeDasharray?: (string | import("../..").LineStyle) | undefined;
304
+ borderRadius?: number | undefined;
305
+ } | undefined;
306
+ } | undefined;
307
+ facet?: {
308
+ indicator?: {
309
+ background?: string | undefined;
310
+ color?: string | undefined;
311
+ fontSize?: string | undefined;
312
+ padding?: string | undefined;
313
+ radius?: string | undefined;
314
+ } | undefined;
315
+ navButton?: {
316
+ background?: string | undefined;
317
+ color?: string | undefined;
318
+ size?: string | undefined;
319
+ fontSize?: string | undefined;
320
+ disabledOpacity?: number | undefined;
321
+ } | undefined;
266
322
  } | undefined;
267
323
  };
268
324
  Dark: {
@@ -352,6 +408,9 @@ export declare const THEMES: {
352
408
  connectorWidth?: number | undefined;
353
409
  } | undefined;
354
410
  } | undefined;
411
+ scatter?: {
412
+ dotRadius?: number | undefined;
413
+ } | undefined;
355
414
  timeline?: {
356
415
  axisColor?: string | undefined;
357
416
  activeColor?: string | undefined;
@@ -393,6 +452,31 @@ export declare const THEMES: {
393
452
  class?: string | undefined;
394
453
  textClass?: string | undefined;
395
454
  } | undefined;
455
+ area?: {
456
+ fill?: string | undefined;
457
+ fillOpacity?: number | undefined;
458
+ stroke?: string | undefined;
459
+ strokeWidth?: number | undefined;
460
+ strokeOpacity?: number | undefined;
461
+ strokeDasharray?: (string | import("../..").LineStyle) | undefined;
462
+ borderRadius?: number | undefined;
463
+ } | undefined;
464
+ } | undefined;
465
+ facet?: {
466
+ indicator?: {
467
+ background?: string | undefined;
468
+ color?: string | undefined;
469
+ fontSize?: string | undefined;
470
+ padding?: string | undefined;
471
+ radius?: string | undefined;
472
+ } | undefined;
473
+ navButton?: {
474
+ background?: string | undefined;
475
+ color?: string | undefined;
476
+ size?: string | undefined;
477
+ fontSize?: string | undefined;
478
+ disabledOpacity?: number | undefined;
479
+ } | undefined;
396
480
  } | undefined;
397
481
  };
398
482
  Compact: {
@@ -482,6 +566,9 @@ export declare const THEMES: {
482
566
  connectorWidth?: number | undefined;
483
567
  } | undefined;
484
568
  } | undefined;
569
+ scatter?: {
570
+ dotRadius?: number | undefined;
571
+ } | undefined;
485
572
  timeline?: {
486
573
  axisColor?: string | undefined;
487
574
  activeColor?: string | undefined;
@@ -523,6 +610,31 @@ export declare const THEMES: {
523
610
  class?: string | undefined;
524
611
  textClass?: string | undefined;
525
612
  } | undefined;
613
+ area?: {
614
+ fill?: string | undefined;
615
+ fillOpacity?: number | undefined;
616
+ stroke?: string | undefined;
617
+ strokeWidth?: number | undefined;
618
+ strokeOpacity?: number | undefined;
619
+ strokeDasharray?: (string | import("../..").LineStyle) | undefined;
620
+ borderRadius?: number | undefined;
621
+ } | undefined;
622
+ } | undefined;
623
+ facet?: {
624
+ indicator?: {
625
+ background?: string | undefined;
626
+ color?: string | undefined;
627
+ fontSize?: string | undefined;
628
+ padding?: string | undefined;
629
+ radius?: string | undefined;
630
+ } | undefined;
631
+ navButton?: {
632
+ background?: string | undefined;
633
+ color?: string | undefined;
634
+ size?: string | undefined;
635
+ fontSize?: string | undefined;
636
+ disabledOpacity?: number | undefined;
637
+ } | undefined;
526
638
  } | undefined;
527
639
  };
528
640
  };
package/dist/index.d.ts CHANGED
@@ -2,49 +2,59 @@ export { default as BarPlot } from './plots/bar/Plot.svelte';
2
2
  export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
3
3
  export { default as LinePlot } from './plots/line/Plot.svelte';
4
4
  export { default as PyramidPlot } from './plots/pyramid/Plot.svelte';
5
+ export { default as ScatterPlot } from './plots/scatter/Plot.svelte';
5
6
  export { default as GeoPlot } from './plots/geo/Plot.svelte';
6
7
  export { default as BaseChart } from './charts/BaseChart.svelte';
7
8
  export { default as BarChart } from './charts/bar/Chart.svelte';
8
9
  export { default as HeatmapChart } from './charts/heatmap/Chart.svelte';
9
10
  export { default as LineChart } from './charts/line/Chart.svelte';
10
11
  export { default as PyramidChart } from './charts/pyramid/Chart.svelte';
12
+ export { default as ScatterChart } from './charts/scatter/Chart.svelte';
11
13
  export { default as ChartContainer } from './charts/container/ChartContainer.svelte';
12
14
  export { default as BasePlotLayout } from './layout/plot/BasePlotLayout.svelte';
13
- export { default as GeoLayout } from './layout/geo/GeoLayout.svelte';
14
- export { default as TileLayer } from './plots/geo/TileLayer.svelte';
15
- export { argentinaBicontinental } from './plots/geo/projections/argentina';
15
+ export { default as CoordinatesLayout } from './layout/coordinates/CoordinatesLayout.svelte';
16
+ export { default as TileLayer } from './layout/styles/TileLayer.svelte';
17
+ export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
16
18
  export { default as Timeline } from './layout/timeline/Timeline.svelte';
17
19
  export { default as TimelineLayout } from './layout/timeline/TimelineLayout.svelte';
18
20
  export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
21
+ export { default as FacetIndicator } from './layout/facet/FacetIndicator.svelte';
19
22
  export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
20
23
  export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
24
+ export { getLegendInteraction, provideLegendInteraction, createLegendInteraction, } from './layout/legend/interaction.svelte';
25
+ export { default as BarMarker } from './markers/BarMarker.svelte';
26
+ export { default as CellMarker } from './markers/CellMarker.svelte';
21
27
  export { default as DeltaMarker } from './markers/DeltaMarker.svelte';
22
28
  export { default as DotMarker } from './markers/DotMarker.svelte';
23
29
  export { default as HoverMarker } from './markers/HoverMarker.svelte';
30
+ export { default as LineMarker } from './markers/LineMarker.svelte';
24
31
  export { default as PeakMarker } from './markers/PeakMarker.svelte';
32
+ export { default as RuleMarker } from './markers/RuleMarker.svelte';
25
33
  export { default as TextMarker } from './markers/TextMarker.svelte';
26
34
  export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.svelte';
27
35
  export { THEMES } from './configuration/themes';
28
36
  export type { ThemeName } from './configuration/themes';
29
37
  export { groupBy, buildSeries } from './utils/grouping';
30
38
  export { makeColorScale, normalize, resolveCssColor, paletteColor } from './utils/color';
31
- export type { AxisValue, AxisScale } from './types/plots/axis';
39
+ export type { AxisValue, AxisScale, AxisBasedScalesConfig } from './types/layout/scales';
32
40
  export type { Accessor, Series, SeriesProps, DataProps } from './types/plots/data/common';
33
- export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, AxisBasedScalesConfig, GeoScalesConfig, ScalesConfig, MarginConfig, TooltipConfig, } from './types/plots/props';
34
- export type { DeltaConfig, } from './types/plots/delta';
35
- export type { ValuesStyle, ColorsStyle, BasePlotStyles, } from './types/plots/styles/common';
36
- export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentStyle } from './types/plots/segments/common';
41
+ export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig, PointMatchingStrategy, } from './types/plots/props';
42
+ export type { ValuesStyle, ColorsStyle, FrameStyle, FrameProp, BasePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig, } from './types/layout/styles';
43
+ export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentStyle, ScatterSegmentStyle } from './types/plots/segments/common';
37
44
  export type { Range, Area, Segment } from './types/plots/segments/config';
38
45
  export type { ValueAnchor, SymbolType, LineStyle, LineCap, LineJoin, FontWeight, FontStyleKeyword, TextAnchor, LineAnchor, } from './types/plots/constants';
39
- export type { FontStyle, StrokeStyle, DotStyle } from './types/plots/styling';
40
- export type { Marker } from './types/markers/common';
46
+ export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/styling';
47
+ export type { AxisBasedMarkersConfig } from './types/markers/common';
48
+ export type { LineMarkersConfig, DeltaMarkerConfig, DeltaConfig, DeltaTarget } from './types/markers/line';
41
49
  export type { MarkerProps } from './types/markers/props';
42
50
  export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/plots/data/geo';
43
- export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, } from './types/plots/scales/geo';
44
- export type { GeoStyles, GeoTileLayerConfig, GeoZoomConfig } from './types/plots/styles/geo';
45
- export type { GeoMarker, GeoInsetMarker, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig, } from './types/markers/geo';
46
- export type { TimeValue, Orientation, FacetColumns, FacetConfig, TimelineConfig, ChartPlotContext, ChartPlotSnippet, } from './types/charts/common';
47
- export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, } from './types/charts/legend';
48
- export type { HoverStrategy, TooltipOptions, TooltipProp, } from './types/layout/tooltip';
51
+ export type { ScatterDataProps } from './types/plots/data/scatter';
52
+ export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, GeoZoomConfig, CoordinatesConfig, } from './types/layout/coordinates';
53
+ export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig, } from './types/markers/geo';
54
+ export type { ChartPlotContext, ChartPlotSnippet, } from './types/charts/common';
55
+ export type { TimeValue, Orientation, TimelineConfig, } from './types/layout/timeline';
56
+ export type { Responsive, FacetColumns, FacetMode, FacetConfig, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet, } from './types/layout/facet';
57
+ export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendInteractionStore, LegendPlotContext, } from './types/layout/legend';
58
+ export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipAnchorX, TooltipAnchorY, } from './types/layout/tooltip';
49
59
  export type { ChartConfig, ChartConfigInput, TextStyle } from './types/configuration/styling';
50
60
  export type { ChartProps } from './types/charts/props';