layerchart 2.0.0-next.44 → 2.0.0-next.46

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 (179) hide show
  1. package/LICENSE +1 -1
  2. package/dist/components/AnnotationLine.svelte +1 -1
  3. package/dist/components/AnnotationPoint.svelte +1 -1
  4. package/dist/components/AnnotationRange.svelte +16 -15
  5. package/dist/components/Arc.svelte +10 -10
  6. package/dist/components/Arc.svelte.d.ts +4 -4
  7. package/dist/components/Arc.svelte.test.d.ts +1 -0
  8. package/dist/components/Arc.svelte.test.js +868 -0
  9. package/dist/components/Area.svelte +9 -7
  10. package/dist/components/Axis.svelte +2 -1
  11. package/dist/components/Axis.svelte.d.ts +1 -0
  12. package/dist/components/Bar.svelte +3 -3
  13. package/dist/components/Bars.svelte +1 -1
  14. package/dist/components/Blur.svelte +3 -3
  15. package/dist/components/Bounds.svelte +1 -1
  16. package/dist/components/BrushContext.svelte +1 -1
  17. package/dist/components/Calendar.svelte +2 -2
  18. package/dist/components/Calendar.svelte.d.ts +1 -1
  19. package/dist/components/Chart.svelte +63 -137
  20. package/dist/components/Chart.svelte.d.ts +23 -88
  21. package/dist/components/ChartClipPath.svelte +1 -1
  22. package/dist/components/Circle.svelte +17 -8
  23. package/dist/components/Circle.svelte.d.ts +3 -0
  24. package/dist/components/ClipPath.svelte +4 -4
  25. package/dist/components/Connector.svelte +4 -4
  26. package/dist/components/Connector.svelte.d.ts +3 -3
  27. package/dist/components/Ellipse.svelte +7 -7
  28. package/dist/components/Frame.svelte +1 -1
  29. package/dist/components/GeoContext.svelte +4 -20
  30. package/dist/components/GeoContext.svelte.d.ts +2 -6
  31. package/dist/components/GeoEdgeFade.svelte +1 -1
  32. package/dist/components/GeoPath.svelte +42 -107
  33. package/dist/components/GeoPath.svelte.d.ts +5 -4
  34. package/dist/components/GeoPoint.svelte +5 -5
  35. package/dist/components/GeoSpline.svelte +2 -14
  36. package/dist/components/GeoSpline.svelte.d.ts +1 -1
  37. package/dist/components/GeoTile.svelte +7 -6
  38. package/dist/components/GeoVisible.svelte +1 -1
  39. package/dist/components/Graticule.svelte +4 -7
  40. package/dist/components/Graticule.svelte.d.ts +2 -1
  41. package/dist/components/Grid.svelte +1 -1
  42. package/dist/components/Group.svelte +8 -8
  43. package/dist/components/Highlight.svelte +18 -16
  44. package/dist/components/Hull.svelte +2 -2
  45. package/dist/components/Labels.svelte +1 -1
  46. package/dist/components/Legend.svelte +1 -1
  47. package/dist/components/Line.svelte +9 -7
  48. package/dist/components/LinearGradient.svelte +8 -7
  49. package/dist/components/MonthPath.svelte +5 -11
  50. package/dist/components/MonthPath.svelte.d.ts +2 -2
  51. package/dist/components/Pack.svelte +4 -6
  52. package/dist/components/Pack.svelte.d.ts +2 -4
  53. package/dist/components/Partition.svelte +4 -3
  54. package/dist/components/Partition.svelte.d.ts +2 -1
  55. package/dist/components/Path.svelte +344 -0
  56. package/dist/components/Path.svelte.d.ts +72 -0
  57. package/dist/components/Pattern.svelte +6 -6
  58. package/dist/components/Pie.svelte +2 -2
  59. package/dist/components/Pie.svelte.d.ts +1 -1
  60. package/dist/components/Point.svelte +1 -1
  61. package/dist/components/Points.svelte +1 -1
  62. package/dist/components/Polygon.svelte +8 -6
  63. package/dist/components/RadialGradient.svelte +7 -7
  64. package/dist/components/Rect.svelte +32 -10
  65. package/dist/components/Rect.svelte.d.ts +4 -1
  66. package/dist/components/Rule.svelte +1 -1
  67. package/dist/components/Sankey.svelte +1 -1
  68. package/dist/components/Spline.svelte +13 -337
  69. package/dist/components/Spline.svelte.d.ts +10 -73
  70. package/dist/components/Text.svelte +9 -7
  71. package/dist/components/Threshold.svelte +3 -3
  72. package/dist/components/TransformContext.svelte +10 -143
  73. package/dist/components/TransformControls.svelte +2 -2
  74. package/dist/components/TransformControls.svelte.d.ts +1 -1
  75. package/dist/components/Tree.svelte +4 -3
  76. package/dist/components/Tree.svelte.d.ts +2 -1
  77. package/dist/components/Treemap.svelte +4 -3
  78. package/dist/components/Treemap.svelte.d.ts +2 -1
  79. package/dist/components/Voronoi.svelte +5 -5
  80. package/dist/components/charts/ArcChart.svelte +14 -6
  81. package/dist/components/charts/ArcChart.svelte.d.ts +1 -1
  82. package/dist/components/charts/AreaChart.svelte +12 -6
  83. package/dist/components/charts/BarChart.svelte +12 -6
  84. package/dist/components/charts/DefaultTooltip.svelte +1 -1
  85. package/dist/components/charts/LineChart.svelte +12 -6
  86. package/dist/components/charts/PieChart.svelte +14 -6
  87. package/dist/components/charts/PieChart.svelte.d.ts +1 -1
  88. package/dist/components/charts/ScatterChart.svelte +11 -9
  89. package/dist/components/charts/types.d.ts +7 -6
  90. package/dist/components/index.d.ts +14 -12
  91. package/dist/components/index.js +14 -12
  92. package/dist/components/{layout → layers}/Canvas.svelte +13 -60
  93. package/dist/components/{layout → layers}/Canvas.svelte.d.ts +2 -32
  94. package/dist/components/{layout → layers}/Html.svelte +18 -3
  95. package/dist/components/{layout → layers}/Html.svelte.d.ts +7 -0
  96. package/dist/components/layers/Layer.svelte +85 -0
  97. package/dist/components/{layout → layers}/Layer.svelte.d.ts +7 -3
  98. package/dist/components/{layout → layers}/Svg.svelte +18 -3
  99. package/dist/components/{layout → layers}/Svg.svelte.d.ts +7 -0
  100. package/dist/components/{layout → layers}/WebGL.svelte +1 -1
  101. package/dist/components/{layout → layers}/WebGL.svelte.d.ts +3 -3
  102. package/dist/components/tests/TestHarness.svelte +76 -0
  103. package/dist/components/tests/TestHarness.svelte.d.ts +19 -0
  104. package/dist/components/tooltip/Tooltip.svelte +3 -3
  105. package/dist/components/tooltip/Tooltip.svelte.d.ts +1 -1
  106. package/dist/components/tooltip/TooltipContext.svelte +13 -45
  107. package/dist/components/tooltip/TooltipContext.svelte.d.ts +2 -14
  108. package/dist/components/tooltip/tooltipMetaContext.d.ts +2 -2
  109. package/dist/components/tooltip/tooltipMetaContext.js +2 -2
  110. package/dist/contexts/canvas.d.ts +33 -0
  111. package/dist/contexts/canvas.js +14 -0
  112. package/dist/contexts/chart.d.ts +84 -0
  113. package/dist/contexts/chart.js +10 -0
  114. package/dist/contexts/geo.d.ts +6 -0
  115. package/dist/contexts/geo.js +12 -0
  116. package/dist/contexts/index.d.ts +6 -0
  117. package/dist/contexts/index.js +6 -0
  118. package/dist/contexts/layer.d.ts +3 -0
  119. package/dist/contexts/layer.js +8 -0
  120. package/dist/contexts/settings.d.ts +4 -0
  121. package/dist/contexts/settings.js +10 -0
  122. package/dist/contexts/tooltip.d.ts +15 -0
  123. package/dist/contexts/tooltip.js +8 -0
  124. package/dist/contexts/transform.d.ts +95 -0
  125. package/dist/contexts/transform.js +10 -0
  126. package/dist/index.d.ts +1 -0
  127. package/dist/index.js +1 -0
  128. package/dist/states/settings.svelte.d.ts +12 -0
  129. package/dist/states/settings.svelte.js +10 -0
  130. package/dist/states/transform.svelte.d.ts +9 -0
  131. package/dist/states/transform.svelte.js +31 -0
  132. package/dist/utils/arcText.svelte.d.ts +1 -1
  133. package/dist/utils/canvas.d.ts +7 -3
  134. package/dist/utils/canvas.js +78 -11
  135. package/dist/utils/common.d.ts +8 -1
  136. package/dist/utils/common.js +9 -10
  137. package/dist/utils/index.d.ts +2 -0
  138. package/dist/utils/index.js +2 -0
  139. package/dist/utils/motion.svelte.js +0 -1
  140. package/dist/utils/rect.svelte.d.ts +1 -1
  141. package/dist/utils/rect.svelte.js +17 -9
  142. package/dist/utils/scales.svelte.js +2 -2
  143. package/dist/utils/string.d.ts +3 -1
  144. package/package.json +32 -54
  145. package/README.md +0 -41
  146. package/dist/components/layout/Layer.svelte +0 -41
  147. package/dist/docs/Blockquote.svelte +0 -17
  148. package/dist/docs/Blockquote.svelte.d.ts +0 -5
  149. package/dist/docs/Code.svelte +0 -80
  150. package/dist/docs/Code.svelte.d.ts +0 -14
  151. package/dist/docs/ConnectorSweepMenuField.svelte +0 -17
  152. package/dist/docs/ConnectorSweepMenuField.svelte.d.ts +0 -7
  153. package/dist/docs/ConnectorTypeMenuField.svelte +0 -17
  154. package/dist/docs/ConnectorTypeMenuField.svelte.d.ts +0 -7
  155. package/dist/docs/CurveMenuField.svelte +0 -44
  156. package/dist/docs/CurveMenuField.svelte.d.ts +0 -9
  157. package/dist/docs/GeoDebug.svelte +0 -60
  158. package/dist/docs/GeoDebug.svelte.d.ts +0 -4
  159. package/dist/docs/Header1.svelte +0 -16
  160. package/dist/docs/Header1.svelte.d.ts +0 -5
  161. package/dist/docs/Json.svelte +0 -36
  162. package/dist/docs/Json.svelte.d.ts +0 -10
  163. package/dist/docs/Layout.svelte +0 -21
  164. package/dist/docs/Layout.svelte.d.ts +0 -8
  165. package/dist/docs/Link.svelte +0 -9
  166. package/dist/docs/Link.svelte.d.ts +0 -5
  167. package/dist/docs/PathDataMenuField.svelte +0 -78
  168. package/dist/docs/PathDataMenuField.svelte.d.ts +0 -9
  169. package/dist/docs/Preview.svelte +0 -104
  170. package/dist/docs/Preview.svelte.d.ts +0 -13
  171. package/dist/docs/TilesetField.svelte +0 -136
  172. package/dist/docs/TilesetField.svelte.d.ts +0 -6
  173. package/dist/docs/TransformDebug.svelte +0 -22
  174. package/dist/docs/TransformDebug.svelte.d.ts +0 -20
  175. package/dist/docs/ViewSourceButton.svelte +0 -53
  176. package/dist/docs/ViewSourceButton.svelte.d.ts +0 -11
  177. package/dist/utils/graph/dagre.d.ts +0 -34
  178. /package/dist/{utils → contexts}/legendPayload.d.ts +0 -0
  179. /package/dist/{utils → contexts}/legendPayload.js +0 -0
@@ -56,15 +56,15 @@
56
56
  import type { CurveFactory } from 'd3-shape';
57
57
  import { max, min } from 'd3-array';
58
58
  import { interpolatePath } from 'd3-interpolate-path';
59
- import { merge } from 'lodash-es';
59
+ import { merge } from '@layerstack/utils';
60
60
 
61
- import { getRenderContext } from './Chart.svelte';
61
+ import { getLayerContext } from '../contexts/layer.js';
62
62
  import Spline from './Spline.svelte';
63
63
  import { isScaleBand } from '../utils/scales.svelte.js';
64
64
  import { flattenPathData } from '../utils/path.js';
65
- import { registerCanvasComponent } from './layout/Canvas.svelte';
65
+ import { registerCanvasComponent } from './layers/Canvas.svelte';
66
66
  import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
67
- import { getChartContext } from './Chart.svelte';
67
+ import { getChartContext } from '../contexts/chart.js';
68
68
  import {
69
69
  createMotion,
70
70
  extractTweenConfig,
@@ -75,7 +75,7 @@
75
75
  import { extractLayerProps } from '../utils/attributes.js';
76
76
 
77
77
  const ctx = getChartContext();
78
- const renderCtx = getRenderContext();
78
+ const layerCtx = getLayerContext();
79
79
 
80
80
  let {
81
81
  clipPath,
@@ -207,6 +207,7 @@
207
207
  : {
208
208
  styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
209
209
  classes: restProps.class ?? '',
210
+ style: restProps.style as string | undefined,
210
211
  }
211
212
  );
212
213
  }
@@ -215,7 +216,7 @@
215
216
  const fillKey = createKey(() => fill);
216
217
  const strokeKey = createKey(() => stroke);
217
218
 
218
- if (renderCtx === 'canvas') {
219
+ if (layerCtx === 'canvas') {
219
220
  registerCanvasComponent({
220
221
  name: 'Area',
221
222
  render,
@@ -232,6 +233,7 @@
232
233
  strokeWidth,
233
234
  opacity,
234
235
  restProps.class,
236
+ restProps.style,
235
237
  tweenState.current,
236
238
  ],
237
239
  });
@@ -250,7 +252,7 @@
250
252
  />
251
253
  {/if}
252
254
 
253
- {#if renderCtx === 'svg'}
255
+ {#if layerCtx === 'svg'}
254
256
  <path
255
257
  d={tweenState.current}
256
258
  clip-path={clipPath}
@@ -45,6 +45,7 @@
45
45
 
46
46
  /**
47
47
  * Width or height of each tick in pixels (enabling responsive count)
48
+ * @default 80 (top|bottom|angle) or 50 (left|right|radius)
48
49
  */
49
50
  tickSpacing?: number;
50
51
 
@@ -136,7 +137,7 @@
136
137
  import Text from './Text.svelte';
137
138
  import { isScaleBand } from '../utils/scales.svelte.js';
138
139
 
139
- import { getChartContext } from './Chart.svelte';
140
+ import { getChartContext } from '../contexts/chart.js';
140
141
  import { extractLayerProps } from '../utils/attributes.js';
141
142
  import { type MotionProp } from '../utils/motion.svelte.js';
142
143
  import { autoTickVals, autoTickFormat, type TicksConfig } from '../utils/ticks.js';
@@ -38,6 +38,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
38
38
  ticks?: TicksConfig;
39
39
  /**
40
40
  * Width or height of each tick in pixels (enabling responsive count)
41
+ * @default 80 (top|bottom|angle) or 50 (left|right|radius)
41
42
  */
42
43
  tickSpacing?: number;
43
44
  /**
@@ -80,11 +80,11 @@
80
80
  import { greatestAbs } from '@layerstack/utils';
81
81
 
82
82
  import Rect from './Rect.svelte';
83
- import Spline from './Spline.svelte';
83
+ import Path from './Path.svelte';
84
84
 
85
85
  import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
86
86
  import { accessor, type Accessor } from '../utils/common.js';
87
- import { getChartContext } from './Chart.svelte';
87
+ import { getChartContext } from '../contexts/chart.js';
88
88
  import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
89
89
  import { extractLayerProps } from '../utils/attributes.js';
90
90
  import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
@@ -204,7 +204,7 @@
204
204
  />
205
205
  {:else}
206
206
  {@const tweenMotion = extractTweenConfig(motion)}
207
- <Spline
207
+ <Path
208
208
  {pathData}
209
209
  {fill}
210
210
  {fillOpacity}
@@ -32,7 +32,7 @@
32
32
  import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
33
33
  import Group from './Group.svelte';
34
34
 
35
- import { getChartContext } from './Chart.svelte';
35
+ import { getChartContext } from '../contexts/chart.js';
36
36
  import { chartDataArray } from '../utils/common.js';
37
37
  import { extractLayerProps } from '../utils/attributes.js';
38
38
 
@@ -22,17 +22,17 @@
22
22
 
23
23
  <script lang="ts">
24
24
  import type { Snippet } from 'svelte';
25
- import { getRenderContext } from './Chart.svelte';
25
+ import { getLayerContext } from '../contexts/layer.js';
26
26
  import { createId } from '../utils/createId.js';
27
27
 
28
28
  const uid = $props.id();
29
29
 
30
30
  let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
31
31
 
32
- const renderContext = getRenderContext();
32
+ const layerCtx = getLayerContext();
33
33
  </script>
34
34
 
35
- {#if renderContext === 'svg'}
35
+ {#if layerCtx === 'svg'}
36
36
  <defs>
37
37
  <filter {id} class="lc-blur-filter">
38
38
  <feGaussianBlur in="SourceGraphic" {stdDeviation} />
@@ -19,7 +19,7 @@
19
19
  <script lang="ts">
20
20
  import { scaleLinear } from 'd3-scale';
21
21
 
22
- import { getChartContext } from './Chart.svelte';
22
+ import { getChartContext } from '../contexts/chart.js';
23
23
  import { createMotionScale, type AnyScale } from '../utils/scales.svelte.js';
24
24
 
25
25
  let { domain, range, motion, children }: BoundsProps = $props();
@@ -146,7 +146,7 @@
146
146
  import { scaleInvert, type DomainType } from '../utils/scales.svelte.js';
147
147
  import { add } from '../utils/math.js';
148
148
  import type { HTMLAttributes } from 'svelte/elements';
149
- import { getChartContext } from './Chart.svelte';
149
+ import { getChartContext } from '../contexts/chart.js';
150
150
  import type { Snippet } from 'svelte';
151
151
 
152
152
  const ctx = getChartContext();
@@ -60,11 +60,11 @@
60
60
  import { format } from '@layerstack/utils';
61
61
 
62
62
  import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
63
- import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
63
+ import type { TooltipContextValue } from '../contexts/tooltip.js';
64
64
  import MonthPath from './MonthPath.svelte';
65
65
  import Text from './Text.svelte';
66
66
  import { chartDataArray } from '../utils/common.js';
67
- import { getChartContext } from './Chart.svelte';
67
+ import { getChartContext } from '../contexts/chart.js';
68
68
  import type { SVGAttributes } from 'svelte/elements';
69
69
  import type { Without } from '../utils/types.js';
70
70
  import { extractLayerProps } from '../utils/attributes.js';
@@ -43,7 +43,7 @@ export type CalendarPropsWithoutHTML = {
43
43
  export type CalendarProps = CalendarPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, CalendarPropsWithoutHTML>;
44
44
  import { type ComponentProps, type Snippet } from 'svelte';
45
45
  import { type RectPropsWithoutHTML } from './Rect.svelte';
46
- import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
46
+ import type { TooltipContextValue } from '../contexts/tooltip.js';
47
47
  import MonthPath from './MonthPath.svelte';
48
48
  import Text from './Text.svelte';
49
49
  import type { SVGAttributes } from 'svelte/elements';
@@ -1,5 +1,14 @@
1
1
  <script lang="ts" module>
2
+ import { onMount, type ComponentProps, type Snippet } from 'svelte';
3
+ import type { HTMLAttributes } from 'svelte/elements';
2
4
  import { scaleOrdinal, scaleSqrt } from 'd3-scale';
5
+ import type { TimeInterval } from 'd3-time';
6
+ import { extent, max, min } from 'd3-array';
7
+ import type { HierarchyNode } from 'd3-hierarchy';
8
+ import type { SankeyGraph } from 'd3-sankey';
9
+ import { useDebounce } from 'runed';
10
+ import { unique } from '@layerstack/utils';
11
+
3
12
  import { type Accessor, accessor, chartDataArray } from '../utils/common.js';
4
13
  import { printDebug } from '../utils/debug.js';
5
14
  import { filterObject } from '../utils/filterObject.js';
@@ -13,15 +22,12 @@
13
22
  type AnyScale,
14
23
  type DomainType,
15
24
  } from '../utils/scales.svelte.js';
16
- import { Context, useDebounce } from 'runed';
17
25
  import type {
18
- AxisKey,
19
26
  BaseRange,
20
- DataType,
21
27
  Extents,
22
28
  Nice,
23
- Padding,
24
29
  PaddingArray,
30
+ Without,
25
31
  XRangeWithScale,
26
32
  YRangeWithScale,
27
33
  } from '../utils/types.js';
@@ -31,17 +37,17 @@
31
37
  createGetter,
32
38
  createChartScale,
33
39
  } from '../utils/chart.js';
34
- import { onMount, type ComponentProps, type Snippet } from 'svelte';
35
- import GeoContext, { type GeoContextValue } from './GeoContext.svelte';
36
- import TooltipContext, { type TooltipContextValue } from './tooltip/TooltipContext.svelte';
37
- import { extent, max, min } from 'd3-array';
38
- import type { HierarchyNode } from 'd3-hierarchy';
39
- import type { SankeyGraph } from 'd3-sankey';
40
- import { unique } from '@layerstack/utils';
40
+ import GeoContext from './GeoContext.svelte';
41
+ import TooltipContext from './tooltip/TooltipContext.svelte';
42
+ import type { TooltipContextValue } from '../contexts/tooltip.js';
43
+
41
44
  import { geoFitObjectTransform } from '../utils/geo.js';
42
- import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
45
+ import TransformContext from './TransformContext.svelte';
43
46
  import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
44
- import type { TimeInterval } from 'd3-time';
47
+
48
+ import { setChartContext, type ChartContextValue } from '../contexts/chart.js';
49
+ import { type GeoContextValue } from '../contexts/geo.js';
50
+ import { type TransformContextValue } from '../contexts/transform.js';
45
51
 
46
52
  const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
47
53
 
@@ -81,85 +87,6 @@
81
87
  | 'y1Range'
82
88
  >;
83
89
 
84
- export type ChartContextValue<
85
- T = any,
86
- XScale extends AnyScale = AnyScale,
87
- YScale extends AnyScale = AnyScale,
88
- > = {
89
- activeGetters: Record<AxisKey, (d: T) => any>;
90
- width: number;
91
- height: number;
92
- percentRange: boolean;
93
- aspectRatio: number;
94
- containerRef: HTMLElement | undefined;
95
- containerWidth: number;
96
- containerHeight: number;
97
- config: PreservedChartConfig<T, XScale, YScale>;
98
- x: (d: T) => any;
99
- y: (d: T) => any;
100
- z: (d: T) => any;
101
- r: (d: T) => any;
102
- x1: (d: T) => any;
103
- y1: (d: T) => any;
104
- c: (d: T) => any;
105
- data: DataType<T>;
106
- xNice: Nice;
107
- yNice: Nice;
108
- zNice: Nice;
109
- rNice: Nice;
110
- xDomainSort: boolean;
111
- yDomainSort: boolean;
112
- zDomainSort: boolean;
113
- rDomainSort: boolean;
114
- xReverse: boolean;
115
- yReverse: boolean;
116
- zReverse: boolean;
117
- rReverse: boolean;
118
- xPadding: PaddingArray;
119
- yPadding: PaddingArray;
120
- zPadding: PaddingArray;
121
- rPadding: PaddingArray;
122
- padding: Padding;
123
- flatData: T[];
124
- extents: Extents;
125
- xDomain: number[];
126
- yDomain: number[];
127
- zDomain: DomainType;
128
- rDomain: DomainType;
129
- cDomain: DomainType;
130
- x1Domain: DomainType;
131
- y1Domain: DomainType;
132
- xRange: any[];
133
- yRange: any[];
134
- zRange: any[];
135
- rRange: any[];
136
- cRange: readonly string[] | string[] | undefined;
137
- x1Range: XRangeWithScale<XScale> | undefined;
138
- y1Range: YRangeWithScale<YScale> | undefined;
139
- meta: Record<string, any>;
140
- xScale: AnyScale;
141
- yScale: AnyScale;
142
- zScale: AnyScale;
143
- rScale: AnyScale;
144
- cScale: AnyScale | null;
145
- x1Scale: AnyScale | null;
146
- y1Scale: AnyScale | null;
147
- yGet: (d: T) => any;
148
- xGet: (d: T) => any;
149
- zGet: (d: T) => any;
150
- rGet: (d: T) => any;
151
- cGet: (d: T) => any;
152
- x1Get: (d: T) => any;
153
- y1Get: (d: T) => any;
154
- xInterval: TimeInterval | null;
155
- yInterval: TimeInterval | null;
156
- radial: boolean;
157
- tooltip: TooltipContextValue<T>;
158
- geo: GeoContextValue;
159
- brush: BrushContextValue;
160
- transform: TransformContextValue;
161
- };
162
-
163
90
  export type LayerChartInternalMeta = {
164
91
  /**
165
92
  * The current chart type.
@@ -175,37 +102,6 @@
175
102
  | 'simplified-scatter';
176
103
  };
177
104
 
178
- const _ChartContext = new Context<ChartContextValue<any, AnyScale, AnyScale>>('ChartContext');
179
-
180
- export function getChartContext<
181
- T,
182
- XScale extends AnyScale = AnyScale,
183
- YScale extends AnyScale = AnyScale,
184
- >(): ChartContextValue<T, XScale, YScale> {
185
- return _ChartContext.getOr({} as ChartContextValue<T, XScale, YScale>);
186
- }
187
-
188
- export function setChartContext<
189
- T,
190
- XScale extends AnyScale = AnyScale,
191
- YScale extends AnyScale = AnyScale,
192
- >(context: ChartContextValue<T, XScale, YScale>): ChartContextValue<T, XScale, YScale> {
193
- // @ts-expect-error - shh
194
- return _ChartContext.set(context);
195
- }
196
-
197
- export type RenderContext = 'svg' | 'canvas' | 'html';
198
-
199
- const _RenderContext = new Context<RenderContext>('RenderContext');
200
-
201
- export function getRenderContext(): RenderContext {
202
- return _RenderContext.get();
203
- }
204
-
205
- export function setRenderContext(context: RenderContext): RenderContext {
206
- return _RenderContext.set(context);
207
- }
208
-
209
105
  export type ChartPropsWithoutHTML<
210
106
  T,
211
107
  XScale extends AnyScale = AnyScale,
@@ -695,11 +591,32 @@
695
591
  */
696
592
  onResize?: (e: ChartResizeDetail) => void;
697
593
 
594
+ /**
595
+ * Whether to clip overflow content.
596
+ * When true, sets `overflow: hidden` on the container.
597
+ *
598
+ * @default false
599
+ */
600
+ clip?: boolean;
601
+
698
602
  // TransformContext callback events
699
603
  ondragstart?: ComponentProps<typeof TransformContext>['ondragstart'];
700
604
  ondragend?: ComponentProps<typeof TransformContext>['ondragend'];
701
605
  onTransform?: ComponentProps<typeof TransformContext>['onTransform'];
606
+
607
+ /** Sets width of the chart container. Uses parent width if not set (bind:clientWidth) */
608
+ width?: number;
609
+
610
+ /** Sets height of the chart container. Uses parent height if not set (bind:clientHeight) */
611
+ height?: number;
702
612
  };
613
+
614
+ export type ChartProps<
615
+ T,
616
+ XScale extends AnyScale = AnyScale,
617
+ YScale extends AnyScale = AnyScale,
618
+ > = ChartPropsWithoutHTML<T, XScale, YScale> &
619
+ Without<HTMLAttributes<HTMLDivElement>, ChartPropsWithoutHTML<T, XScale, YScale>>;
703
620
  </script>
704
621
 
705
622
  <script
@@ -709,6 +626,8 @@
709
626
  let {
710
627
  ssr = false,
711
628
  pointerEvents = true,
629
+ width: widthProp,
630
+ height: heightProp,
712
631
  position = 'relative',
713
632
  percentRange = false,
714
633
  ref: refProp = $bindable(),
@@ -780,7 +699,10 @@
780
699
  ondragend,
781
700
  ondragstart,
782
701
  brush,
783
- }: ChartPropsWithoutHTML<TData, XScale, YScale> = $props();
702
+ clip = false,
703
+ class: className,
704
+ ...restProps
705
+ }: ChartProps<TData, XScale, YScale> = $props();
784
706
 
785
707
  let ref = $state<HTMLElement>();
786
708
 
@@ -790,8 +712,12 @@
790
712
 
791
713
  const xRangeProp = $derived(_xRangeProp ? _xRangeProp : radial ? [0, 2 * Math.PI] : undefined);
792
714
 
793
- let containerWidth = $state(100);
794
- let containerHeight = $state(100);
715
+ // Measured dimensions of the container
716
+ let _containerWidth = $state(100);
717
+ let _containerHeight = $state(100);
718
+
719
+ let containerWidth = $derived(widthProp ?? _containerWidth);
720
+ let containerHeight = $derived(heightProp ?? _containerHeight);
795
721
 
796
722
  const logDebug = useDebounce(printDebug, 200);
797
723
 
@@ -1386,14 +1312,18 @@
1386
1312
  <div
1387
1313
  bind:this={ref}
1388
1314
  style:position
1389
- style:top={position === 'absolute' ? '0' : null}
1390
- style:right={position === 'absolute' ? '0' : null}
1391
- style:bottom={position === 'absolute' ? '0' : null}
1392
- style:left={position === 'absolute' ? '0' : null}
1315
+ style:top={position === 'absolute' ? 0 : null}
1316
+ style:right={position === 'absolute' ? 0 : null}
1317
+ style:bottom={position === 'absolute' ? 0 : null}
1318
+ style:left={position === 'absolute' ? 0 : null}
1393
1319
  style:pointer-events={pointerEvents === false ? 'none' : null}
1394
- bind:clientWidth={containerWidth}
1395
- bind:clientHeight={containerHeight}
1396
- class="lc-root-container"
1320
+ style:overflow={clip ? 'hidden' : null}
1321
+ style:width={widthProp ? `${widthProp}px` : '100%'}
1322
+ style:height={heightProp ? `${heightProp}px` : '100%'}
1323
+ bind:clientWidth={_containerWidth}
1324
+ bind:clientHeight={_containerHeight}
1325
+ class={['lc-root-container', className]}
1326
+ {...restProps}
1397
1327
  >
1398
1328
  {#key isMounted}
1399
1329
  <!-- svelte-ignore ownership_invalid_binding -->
@@ -1430,8 +1360,4 @@
1430
1360
  .lc-root-container :global(*) {
1431
1361
  box-sizing: border-box;
1432
1362
  }
1433
- .lc-root-container {
1434
- width: 100%;
1435
- height: 100%;
1436
- }
1437
1363
  </style>
@@ -1,14 +1,16 @@
1
- import { type Accessor } from '../utils/common.js';
2
- import { type AnyScale, type DomainType } from '../utils/scales.svelte.js';
3
- import type { AxisKey, BaseRange, DataType, Extents, Nice, Padding, PaddingArray, XRangeWithScale, YRangeWithScale } from '../utils/types.js';
4
1
  import { type ComponentProps, type Snippet } from 'svelte';
5
- import GeoContext, { type GeoContextValue } from './GeoContext.svelte';
6
- import TooltipContext, { type TooltipContextValue } from './tooltip/TooltipContext.svelte';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { TimeInterval } from 'd3-time';
7
4
  import type { HierarchyNode } from 'd3-hierarchy';
8
5
  import type { SankeyGraph } from 'd3-sankey';
9
- import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
10
- import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
11
- import type { TimeInterval } from 'd3-time';
6
+ import { type Accessor } from '../utils/common.js';
7
+ import { type AnyScale, type DomainType } from '../utils/scales.svelte.js';
8
+ import type { BaseRange, Nice, PaddingArray, Without, XRangeWithScale, YRangeWithScale } from '../utils/types.js';
9
+ import GeoContext from './GeoContext.svelte';
10
+ import TooltipContext from './tooltip/TooltipContext.svelte';
11
+ import TransformContext from './TransformContext.svelte';
12
+ import BrushContext from './BrushContext.svelte';
13
+ import { type ChartContextValue } from '../contexts/chart.js';
12
14
  export type ChartResizeDetail = {
13
15
  width: number;
14
16
  height: number;
@@ -16,80 +18,6 @@ export type ChartResizeDetail = {
16
18
  containerHeight: number;
17
19
  };
18
20
  export type PreservedChartConfig<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = Pick<ChartPropsWithoutHTML<T, XScale, YScale>, 'x' | 'y' | 'z' | 'r' | 'c' | 'x1' | 'y1' | 'xRange' | 'yRange' | 'cDomain' | 'zDomain' | 'xDomain' | 'yDomain' | 'rDomain' | 'x1Domain' | 'y1Domain' | 'zRange' | 'rRange' | 'cRange' | 'x1Range' | 'y1Range'>;
19
- export type ChartContextValue<T = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = {
20
- activeGetters: Record<AxisKey, (d: T) => any>;
21
- width: number;
22
- height: number;
23
- percentRange: boolean;
24
- aspectRatio: number;
25
- containerRef: HTMLElement | undefined;
26
- containerWidth: number;
27
- containerHeight: number;
28
- config: PreservedChartConfig<T, XScale, YScale>;
29
- x: (d: T) => any;
30
- y: (d: T) => any;
31
- z: (d: T) => any;
32
- r: (d: T) => any;
33
- x1: (d: T) => any;
34
- y1: (d: T) => any;
35
- c: (d: T) => any;
36
- data: DataType<T>;
37
- xNice: Nice;
38
- yNice: Nice;
39
- zNice: Nice;
40
- rNice: Nice;
41
- xDomainSort: boolean;
42
- yDomainSort: boolean;
43
- zDomainSort: boolean;
44
- rDomainSort: boolean;
45
- xReverse: boolean;
46
- yReverse: boolean;
47
- zReverse: boolean;
48
- rReverse: boolean;
49
- xPadding: PaddingArray;
50
- yPadding: PaddingArray;
51
- zPadding: PaddingArray;
52
- rPadding: PaddingArray;
53
- padding: Padding;
54
- flatData: T[];
55
- extents: Extents;
56
- xDomain: number[];
57
- yDomain: number[];
58
- zDomain: DomainType;
59
- rDomain: DomainType;
60
- cDomain: DomainType;
61
- x1Domain: DomainType;
62
- y1Domain: DomainType;
63
- xRange: any[];
64
- yRange: any[];
65
- zRange: any[];
66
- rRange: any[];
67
- cRange: readonly string[] | string[] | undefined;
68
- x1Range: XRangeWithScale<XScale> | undefined;
69
- y1Range: YRangeWithScale<YScale> | undefined;
70
- meta: Record<string, any>;
71
- xScale: AnyScale;
72
- yScale: AnyScale;
73
- zScale: AnyScale;
74
- rScale: AnyScale;
75
- cScale: AnyScale | null;
76
- x1Scale: AnyScale | null;
77
- y1Scale: AnyScale | null;
78
- yGet: (d: T) => any;
79
- xGet: (d: T) => any;
80
- zGet: (d: T) => any;
81
- rGet: (d: T) => any;
82
- cGet: (d: T) => any;
83
- x1Get: (d: T) => any;
84
- y1Get: (d: T) => any;
85
- xInterval: TimeInterval | null;
86
- yInterval: TimeInterval | null;
87
- radial: boolean;
88
- tooltip: TooltipContextValue<T>;
89
- geo: GeoContextValue;
90
- brush: BrushContextValue;
91
- transform: TransformContextValue;
92
- };
93
21
  export type LayerChartInternalMeta = {
94
22
  /**
95
23
  * The current chart type.
@@ -98,11 +26,6 @@ export type LayerChartInternalMeta = {
98
26
  */
99
27
  type: 'default' | 'simplified-area' | 'simplified-bar' | 'simplified-line' | 'simplified-pie' | 'simplified-scatter';
100
28
  };
101
- export declare function getChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): ChartContextValue<T, XScale, YScale>;
102
- export declare function setChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(context: ChartContextValue<T, XScale, YScale>): ChartContextValue<T, XScale, YScale>;
103
- export type RenderContext = 'svg' | 'canvas' | 'html';
104
- export declare function getRenderContext(): RenderContext;
105
- export declare function setRenderContext(context: RenderContext): RenderContext;
106
29
  export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = {
107
30
  /**
108
31
  * Whether this chart should be rendered server side
@@ -528,12 +451,24 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale
528
451
  * A callback function that is called when the chart is resized.
529
452
  */
530
453
  onResize?: (e: ChartResizeDetail) => void;
454
+ /**
455
+ * Whether to clip overflow content.
456
+ * When true, sets `overflow: hidden` on the container.
457
+ *
458
+ * @default false
459
+ */
460
+ clip?: boolean;
531
461
  ondragstart?: ComponentProps<typeof TransformContext>['ondragstart'];
532
462
  ondragend?: ComponentProps<typeof TransformContext>['ondragend'];
533
463
  onTransform?: ComponentProps<typeof TransformContext>['onTransform'];
464
+ /** Sets width of the chart container. Uses parent width if not set (bind:clientWidth) */
465
+ width?: number;
466
+ /** Sets height of the chart container. Uses parent height if not set (bind:clientHeight) */
467
+ height?: number;
534
468
  };
469
+ export type ChartProps<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = ChartPropsWithoutHTML<T, XScale, YScale> & Without<HTMLAttributes<HTMLDivElement>, ChartPropsWithoutHTML<T, XScale, YScale>>;
535
470
  declare function $$render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): {
536
- props: ChartPropsWithoutHTML<TData, XScale, YScale>;
471
+ props: ChartProps<TData, XScale, YScale>;
537
472
  exports: {};
538
473
  bindings: "ref" | "context";
539
474
  slots: {};
@@ -25,7 +25,7 @@
25
25
  </script>
26
26
 
27
27
  <script lang="ts">
28
- import { getChartContext } from './Chart.svelte';
28
+ import { getChartContext } from '../contexts/chart.js';
29
29
 
30
30
  import RectClipPath, { type RectClipPathProps } from './RectClipPath.svelte';
31
31
  import { extractLayerProps } from '../utils/attributes.js';