@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.
- package/dist/charts/BaseChart.svelte +18 -10
- package/dist/charts/BaseChart.svelte.d.ts +4 -2
- package/dist/charts/bar/Chart.svelte +2 -0
- package/dist/charts/heatmap/Chart.svelte +5 -3
- package/dist/charts/heatmap/Chart.svelte.d.ts +1 -2
- package/dist/charts/line/Chart.svelte +2 -0
- package/dist/charts/pyramid/Chart.svelte +5 -3
- package/dist/charts/pyramid/Chart.svelte.d.ts +1 -2
- package/dist/charts/scatter/Chart.svelte +95 -0
- package/dist/charts/scatter/Chart.svelte.d.ts +28 -0
- package/dist/configuration/config.svelte.js +28 -0
- package/dist/configuration/themes/dark.js +4 -0
- package/dist/configuration/themes/index.d.ts +112 -0
- package/dist/index.d.ts +26 -16
- package/dist/index.js +11 -3
- package/dist/layout/coordinates/CoordinatesLayout.svelte +93 -0
- package/dist/layout/{plot/RuleLayout.svelte.d.ts → coordinates/CoordinatesLayout.svelte.d.ts} +13 -16
- package/dist/layout/coordinates/margins.d.ts +16 -0
- package/dist/layout/coordinates/margins.js +11 -0
- package/dist/{plots/geo → layout/coordinates}/projections/argentina.d.ts +1 -1
- package/dist/layout/{geo → coordinates}/resolveProjection.d.ts +1 -1
- package/dist/layout/coordinates/resolveProjection.js +24 -0
- package/dist/{plots/geo → layout/coordinates}/zoom.svelte.d.ts +1 -1
- package/dist/layout/facet/FacetIndicator.svelte +31 -0
- package/dist/layout/facet/FacetIndicator.svelte.d.ts +8 -0
- package/dist/layout/facet/FacetLayout.svelte +249 -24
- package/dist/layout/facet/FacetLayout.svelte.d.ts +7 -1
- package/dist/layout/geometry/GeometryLayout.svelte +231 -0
- package/dist/layout/geometry/GeometryLayout.svelte.d.ts +62 -0
- package/dist/layout/legend/ContinuousSection.svelte +1 -1
- package/dist/layout/legend/ContinuousSection.svelte.d.ts +1 -1
- package/dist/layout/legend/DiscreteSection.svelte +1 -1
- package/dist/layout/legend/DiscreteSection.svelte.d.ts +1 -1
- package/dist/layout/legend/LegendLayout.svelte +1 -1
- package/dist/layout/legend/LegendLayout.svelte.d.ts +1 -1
- package/dist/layout/legend/interaction.svelte.d.ts +9 -1
- package/dist/layout/legend/interaction.svelte.js +9 -1
- package/dist/layout/plot/BasePlotLayout.svelte +142 -155
- package/dist/layout/plot/BasePlotLayout.svelte.d.ts +61 -51
- package/dist/layout/plot/margins.d.ts +0 -16
- package/dist/layout/plot/margins.js +0 -11
- package/dist/layout/{plot/AxisLayout.svelte → scales/ScalesLayout.svelte} +23 -16
- package/dist/layout/{plot/AxisLayout.svelte.d.ts → scales/ScalesLayout.svelte.d.ts} +4 -5
- package/dist/layout/scales/buildScale.d.ts +8 -0
- package/dist/layout/scales/buildScale.js +43 -0
- package/dist/layout/styles/StylesLayout.svelte +75 -0
- package/dist/layout/styles/StylesLayout.svelte.d.ts +15 -0
- package/dist/{plots/geo → layout/styles}/TileLayer.svelte +2 -2
- package/dist/{plots/geo → layout/styles}/TileLayer.svelte.d.ts +1 -1
- package/dist/layout/timeline/Timeline.svelte +1 -1
- package/dist/layout/timeline/Timeline.svelte.d.ts +1 -1
- package/dist/layout/timeline/TimelineLayout.svelte +1 -1
- package/dist/layout/timeline/TimelineLayout.svelte.d.ts +1 -1
- package/dist/layout/tooltip/Tooltip.svelte +16 -20
- package/dist/layout/tooltip/Tooltip.svelte.d.ts +5 -0
- package/dist/layout/tooltip/TooltipLayout.svelte +7 -1
- package/dist/layout/tooltip/TooltipLayout.svelte.d.ts +4 -0
- package/dist/layout/tooltip/controller.svelte.d.ts +4 -5
- package/dist/layout/tooltip/controller.svelte.js +42 -16
- package/dist/layout/tooltip/resolveTooltipPlacement.d.ts +24 -0
- package/dist/layout/tooltip/resolveTooltipPlacement.js +49 -0
- package/dist/layout/tooltip/utils.d.ts +27 -19
- package/dist/layout/tooltip/utils.js +16 -15
- package/dist/markers/BarMarker.svelte +92 -0
- package/dist/markers/BarMarker.svelte.d.ts +7 -0
- package/dist/markers/CellMarker.svelte +21 -0
- package/dist/markers/CellMarker.svelte.d.ts +7 -0
- package/dist/markers/ContourMarker.svelte +28 -0
- package/dist/markers/ContourMarker.svelte.d.ts +7 -0
- package/dist/markers/DeltaMarker.svelte +32 -39
- package/dist/markers/DeltaMarker.svelte.d.ts +4 -5
- package/dist/markers/DotMarker.svelte +35 -6
- package/dist/markers/DotMarker.svelte.d.ts +11 -2
- package/dist/markers/GeoFeaturesMarker.svelte +19 -0
- package/dist/markers/GeoFeaturesMarker.svelte.d.ts +7 -0
- package/dist/markers/GeoHoverMarker.svelte +25 -0
- package/dist/markers/GeoHoverMarker.svelte.d.ts +9 -0
- package/dist/markers/GraticuleMarker.svelte +18 -0
- package/dist/markers/GraticuleMarker.svelte.d.ts +7 -0
- package/dist/markers/HoverMarker.svelte +34 -35
- package/dist/markers/HoverMarker.svelte.d.ts +15 -9
- package/dist/markers/LineMarker.svelte +19 -0
- package/dist/markers/LineMarker.svelte.d.ts +7 -0
- package/dist/markers/LinkMarker.svelte +42 -0
- package/dist/markers/LinkMarker.svelte.d.ts +7 -0
- package/dist/markers/RuleMarker.svelte +24 -0
- package/dist/markers/RuleMarker.svelte.d.ts +10 -0
- package/dist/markers/SphereMarker.svelte +15 -0
- package/dist/markers/SphereMarker.svelte.d.ts +7 -0
- package/dist/markers/TextMarker.svelte +1 -1
- package/dist/markers/TextMarker.svelte.d.ts +1 -1
- package/dist/markers/VectorMarker.svelte +20 -0
- package/dist/markers/VectorMarker.svelte.d.ts +7 -0
- package/dist/markers/inset/InsetMarker.svelte +38 -45
- package/dist/markers/inset/InsetMarker.svelte.d.ts +6 -2
- package/dist/plots/bar/Plot.svelte +96 -87
- package/dist/plots/bar/Plot.svelte.d.ts +4 -5
- package/dist/plots/bar/ValueLabels.svelte +70 -24
- package/dist/plots/bar/ValueLabels.svelte.d.ts +11 -2
- package/dist/plots/bar/buildBarMarkers.d.ts +30 -0
- package/dist/plots/bar/buildBarMarkers.js +100 -0
- package/dist/plots/bar/layout.svelte.d.ts +1 -2
- package/dist/plots/bar/layout.svelte.js +1 -1
- package/dist/plots/geo/Plot.svelte +113 -387
- package/dist/plots/geo/Plot.svelte.d.ts +5 -4
- package/dist/plots/geo/buildGeoMarkers.d.ts +33 -0
- package/dist/plots/geo/buildGeoMarkers.js +47 -0
- package/dist/plots/heatmap/Plot.svelte +27 -52
- package/dist/plots/heatmap/Plot.svelte.d.ts +4 -5
- package/dist/plots/heatmap/ValueLabels.svelte +5 -5
- package/dist/plots/heatmap/ValueLabels.svelte.d.ts +3 -3
- package/dist/plots/heatmap/buildCellMarkers.d.ts +21 -0
- package/dist/plots/heatmap/buildCellMarkers.js +25 -0
- package/dist/plots/line/Plot.svelte +73 -141
- package/dist/plots/line/Plot.svelte.d.ts +4 -4
- package/dist/plots/line/ValueLabels.svelte +84 -85
- package/dist/plots/line/ValueLabels.svelte.d.ts +10 -1
- package/dist/plots/line/buildLineMarkers.d.ts +15 -0
- package/dist/plots/line/buildLineMarkers.js +57 -0
- package/dist/plots/pyramid/Plot.svelte +80 -121
- package/dist/plots/pyramid/Plot.svelte.d.ts +4 -5
- package/dist/plots/pyramid/ValueLabels.svelte +71 -25
- package/dist/plots/pyramid/ValueLabels.svelte.d.ts +11 -2
- package/dist/plots/pyramid/buildPyramidBarMarkers.d.ts +19 -0
- package/dist/plots/pyramid/buildPyramidBarMarkers.js +32 -0
- package/dist/plots/scatter/Plot.svelte +242 -0
- package/dist/{layout/plot/GridLayout.svelte.d.ts → plots/scatter/Plot.svelte.d.ts} +9 -7
- package/dist/plots/scatter/ValueLabels.svelte +149 -0
- package/dist/plots/{bar/BarSegments.svelte.d.ts → scatter/ValueLabels.svelte.d.ts} +17 -15
- package/dist/plots/scatter/buildScatterMarkers.d.ts +11 -0
- package/dist/plots/scatter/buildScatterMarkers.js +37 -0
- package/dist/plots/scatter/resolveRadiusPaddedDomain.d.ts +10 -0
- package/dist/plots/scatter/resolveRadiusPaddedDomain.js +23 -0
- package/dist/plots/utils/declutter.d.ts +55 -37
- package/dist/plots/utils/declutter.js +79 -64
- package/dist/plots/utils/geoAccessors.d.ts +1 -1
- package/dist/plots/utils/geoAccessors.js +1 -1
- package/dist/plots/utils/labelOverflow.svelte.d.ts +51 -0
- package/dist/plots/utils/labelOverflow.svelte.js +116 -0
- package/dist/plots/utils/legendDisabled.d.ts +1 -1
- package/dist/plots/utils/segments.d.ts +17 -10
- package/dist/plots/utils/segments.js +26 -16
- package/dist/types/charts/common.d.ts +3 -50
- package/dist/types/charts/props.d.ts +8 -8
- package/dist/types/configuration/styling.d.ts +26 -2
- package/dist/types/{plots/scales/geo.d.ts → layout/coordinates.d.ts} +33 -1
- package/dist/types/layout/facet.d.ts +41 -0
- package/dist/types/layout/geometry.d.ts +17 -0
- package/dist/types/layout/legend.d.ts +65 -1
- package/dist/types/{plots/axis.d.ts → layout/scales.d.ts} +11 -0
- package/dist/types/layout/styles.d.ts +115 -0
- package/dist/types/layout/timeline.d.ts +32 -0
- package/dist/types/layout/tooltip.d.ts +20 -1
- package/dist/types/markers/all.d.ts +11 -0
- package/dist/types/markers/all.js +1 -0
- package/dist/types/markers/base.d.ts +45 -0
- package/dist/types/markers/base.js +1 -0
- package/dist/types/markers/common.d.ts +64 -16
- package/dist/types/markers/geo.d.ts +75 -100
- package/dist/types/markers/line.d.ts +34 -0
- package/dist/types/markers/line.js +1 -0
- package/dist/types/markers/props.d.ts +1 -1
- package/dist/types/plots/data/common.d.ts +1 -1
- package/dist/types/plots/data/scatter.d.ts +13 -0
- package/dist/types/plots/data/scatter.js +1 -0
- package/dist/types/plots/props.d.ts +46 -74
- package/dist/types/plots/segments/common.d.ts +6 -12
- package/dist/types/plots/segments/config.d.ts +1 -1
- package/dist/types/plots/styling.d.ts +10 -0
- package/dist/{plots/utils → utils}/delta.d.ts +2 -2
- package/dist/{plots/utils → utils}/delta.js +1 -1
- package/dist/utils/edgeAwareAnchor.d.ts +37 -0
- package/dist/utils/edgeAwareAnchor.js +65 -0
- package/dist/utils/grouping.d.ts +1 -1
- package/dist/utils/interpolate.d.ts +2 -2
- package/package.json +3 -1
- package/dist/layout/geo/GeoLayout.svelte +0 -51
- package/dist/layout/geo/GeoLayout.svelte.d.ts +0 -24
- package/dist/layout/geo/resolveProjection.js +0 -48
- package/dist/layout/plot/GridLayout.svelte +0 -30
- package/dist/layout/plot/RuleLayout.svelte +0 -111
- package/dist/plots/bar/BarSegments.svelte +0 -69
- package/dist/types/charts/legend.d.ts +0 -60
- package/dist/types/plots/delta.d.ts +0 -19
- package/dist/types/plots/styles/common.d.ts +0 -52
- package/dist/types/plots/styles/geo.d.ts +0 -42
- /package/dist/{plots/geo → layout/coordinates}/projections/argentina.js +0 -0
- /package/dist/{plots/geo → layout/coordinates}/projections/fit.d.ts +0 -0
- /package/dist/{plots/geo → layout/coordinates}/projections/fit.js +0 -0
- /package/dist/{plots/geo → layout/coordinates}/rotate.svelte.d.ts +0 -0
- /package/dist/{plots/geo → layout/coordinates}/rotate.svelte.js +0 -0
- /package/dist/{plots/geo → layout/coordinates}/zoom.svelte.js +0 -0
- /package/dist/types/{charts/legend.js → layout/coordinates.js} +0 -0
- /package/dist/types/{plots/axis.js → layout/facet.js} +0 -0
- /package/dist/types/{plots/delta.js → layout/geometry.js} +0 -0
- /package/dist/types/{plots/scales/geo.js → layout/scales.js} +0 -0
- /package/dist/types/{plots/styles/common.js → layout/styles.js} +0 -0
- /package/dist/types/{plots/styles/geo.js → layout/timeline.js} +0 -0
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type { AxisValue } from '../../types/
|
|
2
|
-
import type {
|
|
3
|
-
import type { HoverStore, HoverStrategy, HoverPoint, TooltipProp, TooltipOptions } from '../../types/layout/tooltip';
|
|
1
|
+
import type { AxisValue } from '../../types/layout/scales';
|
|
2
|
+
import type { HoverStore, HoverStrategy, HoverPoint, TooltipProp, TooltipOptions, TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
|
|
4
3
|
/** Value equality that also handles `Date` (compared by timestamp). */
|
|
5
4
|
export declare function eq(a: AxisValue, b: AxisValue): boolean;
|
|
6
5
|
/**
|
|
@@ -9,9 +8,9 @@ export declare function eq(a: AxisValue, b: AxisValue): boolean;
|
|
|
9
8
|
*/
|
|
10
9
|
export declare function matchByStrategy<T>(points: HoverPoint<T>[], hover: HoverStore): HoverPoint<T>[];
|
|
11
10
|
/** Whether the strategy implies an x crosshair rule by default. */
|
|
12
|
-
export declare function
|
|
11
|
+
export declare function impliesCrosshairX(strategy: HoverStrategy): boolean;
|
|
13
12
|
/** Whether the strategy implies a y crosshair rule by default. */
|
|
14
|
-
export declare function
|
|
13
|
+
export declare function impliesCrosshairY(strategy: HoverStrategy): boolean;
|
|
15
14
|
/** Normalize the author-facing prop into a resolved object. */
|
|
16
15
|
export declare function resolveTooltip<TRow extends Record<string, unknown>>(tooltip: TooltipProp<TRow> | undefined, defaultStrategy: HoverStrategy): {
|
|
17
16
|
enabled: boolean;
|
|
@@ -20,22 +19,31 @@ export declare function resolveTooltip<TRow extends Record<string, unknown>>(too
|
|
|
20
19
|
format?: (row: TRow) => string;
|
|
21
20
|
series?: string[];
|
|
22
21
|
content?: TooltipOptions<TRow>['content'];
|
|
22
|
+
anchorX?: TooltipAnchorX;
|
|
23
|
+
anchorY?: TooltipAnchorY;
|
|
23
24
|
};
|
|
24
25
|
/**
|
|
25
|
-
* Resolve the strategy that should drive the shared hover store:
|
|
26
|
-
*
|
|
27
|
-
*
|
|
26
|
+
* Resolve the strategy that should drive the shared hover store: the
|
|
27
|
+
* tooltip's own `strategy` wins, else the first hover marker's `strategy`,
|
|
28
|
+
* else the chart kind's default. Generic over the caller's own marker union,
|
|
29
|
+
* like {@link findHoverMarker}.
|
|
28
30
|
*/
|
|
29
|
-
export declare function resolveHoverStrategy
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
/** Whether any marker in the list is a hover marker. */
|
|
37
|
-
export declare function hasHoverMarker(markers:
|
|
38
|
-
|
|
39
|
-
|
|
31
|
+
export declare function resolveHoverStrategy<T extends {
|
|
32
|
+
type: string;
|
|
33
|
+
}>(tooltipStrategy: HoverStrategy | undefined, markers: T[] | undefined, defaultStrategy: HoverStrategy): HoverStrategy;
|
|
34
|
+
/** Resolve whether the hover should be broadcast across facets. Generic — see {@link resolveHoverStrategy}. */
|
|
35
|
+
export declare function resolveHoverSync<T extends {
|
|
36
|
+
type: string;
|
|
37
|
+
}>(tooltipSync: boolean | undefined, markers: T[] | undefined): boolean;
|
|
38
|
+
/** Whether any marker in the list is a hover marker — axis-based (`'hover'`) or geo (`'geo-hover'`). */
|
|
39
|
+
export declare function hasHoverMarker(markers: {
|
|
40
|
+
type: string;
|
|
41
|
+
}[] | undefined): boolean;
|
|
42
|
+
/** First hover marker in the list, if any — generic over the caller's own marker union. */
|
|
43
|
+
export declare function findHoverMarker<T extends {
|
|
44
|
+
type: string;
|
|
45
|
+
}>(markers: T[] | undefined): Extract<T, {
|
|
46
|
+
type: 'hover';
|
|
47
|
+
}> | undefined;
|
|
40
48
|
/** Narrow matched points down to a named subset of series (no-op if `series` is empty/undefined). */
|
|
41
49
|
export declare function filterBySeries<T>(points: HoverPoint<T>[], series?: string[]): HoverPoint<T>[];
|
|
@@ -24,11 +24,11 @@ export function matchByStrategy(points, hover) {
|
|
|
24
24
|
(activeSeries == null || p.series == null || p.series === activeSeries));
|
|
25
25
|
}
|
|
26
26
|
/** Whether the strategy implies an x crosshair rule by default. */
|
|
27
|
-
export function
|
|
27
|
+
export function impliesCrosshairX(strategy) {
|
|
28
28
|
return strategy === 'x' || strategy === 'punctual';
|
|
29
29
|
}
|
|
30
30
|
/** Whether the strategy implies a y crosshair rule by default. */
|
|
31
|
-
export function
|
|
31
|
+
export function impliesCrosshairY(strategy) {
|
|
32
32
|
return strategy === 'y' || strategy === 'punctual';
|
|
33
33
|
}
|
|
34
34
|
/** Normalize the author-facing prop into a resolved object. */
|
|
@@ -44,29 +44,30 @@ export function resolveTooltip(tooltip, defaultStrategy) {
|
|
|
44
44
|
format: tooltip.format,
|
|
45
45
|
series: tooltip.series,
|
|
46
46
|
content: tooltip.content,
|
|
47
|
+
anchorX: tooltip.anchorX,
|
|
48
|
+
anchorY: tooltip.anchorY,
|
|
47
49
|
};
|
|
48
50
|
}
|
|
49
51
|
/**
|
|
50
|
-
* Resolve the strategy that should drive the shared hover store:
|
|
51
|
-
*
|
|
52
|
-
*
|
|
52
|
+
* Resolve the strategy that should drive the shared hover store: the
|
|
53
|
+
* tooltip's own `strategy` wins, else the first hover marker's `strategy`,
|
|
54
|
+
* else the chart kind's default. Generic over the caller's own marker union,
|
|
55
|
+
* like {@link findHoverMarker}.
|
|
53
56
|
*/
|
|
54
57
|
export function resolveHoverStrategy(tooltipStrategy, markers, defaultStrategy) {
|
|
55
|
-
|
|
58
|
+
const marker = findHoverMarker(markers);
|
|
59
|
+
return tooltipStrategy ?? marker?.strategy ?? defaultStrategy;
|
|
56
60
|
}
|
|
57
|
-
/**
|
|
58
|
-
* Resolve whether the hover should be broadcast across facets:
|
|
59
|
-
* the tooltip's own `sync` wins when tooltip text is enabled, else the first
|
|
60
|
-
* hover marker's `sync`, else false.
|
|
61
|
-
*/
|
|
61
|
+
/** Resolve whether the hover should be broadcast across facets. Generic — see {@link resolveHoverStrategy}. */
|
|
62
62
|
export function resolveHoverSync(tooltipSync, markers) {
|
|
63
|
-
|
|
63
|
+
const marker = findHoverMarker(markers);
|
|
64
|
+
return tooltipSync ?? marker?.sync ?? false;
|
|
64
65
|
}
|
|
65
|
-
/** Whether any marker in the list is a hover marker. */
|
|
66
|
+
/** Whether any marker in the list is a hover marker — axis-based (`'hover'`) or geo (`'geo-hover'`). */
|
|
66
67
|
export function hasHoverMarker(markers) {
|
|
67
|
-
return (markers ?? []).some((m) => m.type === 'hover');
|
|
68
|
+
return (markers ?? []).some((m) => m.type === 'hover' || m.type === 'geo-hover');
|
|
68
69
|
}
|
|
69
|
-
/** First hover marker in the list, if any. */
|
|
70
|
+
/** First hover marker in the list, if any — generic over the caller's own marker union. */
|
|
70
71
|
export function findHoverMarker(markers) {
|
|
71
72
|
return (markers ?? []).find((m) => m.type === 'hover');
|
|
72
73
|
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { BarX, BarY, usePlot } from 'svelteplot';
|
|
3
|
+
import type { BarMarkerConfig } from '../types/markers/common';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Renders one `'bar'` marker — `role: 'segment'` is a visible bar
|
|
7
|
+
* (`<BarX>`/`<BarY>`, per `isHorizontal`); `role: 'hitArea'` is an
|
|
8
|
+
* invisible hit region for one category, resolved against the live scale
|
|
9
|
+
* via `usePlot()`.
|
|
10
|
+
*/
|
|
11
|
+
let { marker }: { marker: BarMarkerConfig } = $props();
|
|
12
|
+
|
|
13
|
+
const plot = usePlot();
|
|
14
|
+
function categoryScaleFor(isHorizontal: boolean) {
|
|
15
|
+
return isHorizontal ? plot.scales.y : plot.scales.x;
|
|
16
|
+
}
|
|
17
|
+
function valueScaleFor(isHorizontal: boolean) {
|
|
18
|
+
return isHorizontal ? plot.scales.x : plot.scales.y;
|
|
19
|
+
}
|
|
20
|
+
function valueExtentFor(isHorizontal: boolean): [number, number] {
|
|
21
|
+
const range = valueScaleFor(isHorizontal)?.fn?.range?.();
|
|
22
|
+
if (!range || range.length < 2) return [0, 0];
|
|
23
|
+
const a = Number(range[0]);
|
|
24
|
+
const b = Number(range[range.length - 1]);
|
|
25
|
+
return [Math.min(a, b), Math.max(a, b)];
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
{#if marker.role === 'segment'}
|
|
30
|
+
{#if marker.isHorizontal}
|
|
31
|
+
<BarX
|
|
32
|
+
data={marker.data}
|
|
33
|
+
y={marker.y}
|
|
34
|
+
x1={marker.x1}
|
|
35
|
+
x2={marker.x2}
|
|
36
|
+
insetTop={marker.insetTop}
|
|
37
|
+
insetBottom={marker.insetBottom}
|
|
38
|
+
fill={marker.style?.fill}
|
|
39
|
+
fillOpacity={marker.style?.fillOpacity}
|
|
40
|
+
stroke={marker.style?.stroke}
|
|
41
|
+
strokeWidth={marker.style?.strokeWidth}
|
|
42
|
+
strokeOpacity={marker.style?.strokeOpacity}
|
|
43
|
+
strokeDasharray={marker.style?.strokeDasharray}
|
|
44
|
+
borderRadius={marker.style?.borderRadius}
|
|
45
|
+
/>
|
|
46
|
+
{:else}
|
|
47
|
+
<BarY
|
|
48
|
+
data={marker.data}
|
|
49
|
+
x={marker.x}
|
|
50
|
+
y1={marker.y1}
|
|
51
|
+
y2={marker.y2}
|
|
52
|
+
insetLeft={marker.insetLeft}
|
|
53
|
+
insetRight={marker.insetRight}
|
|
54
|
+
fill={marker.style?.fill}
|
|
55
|
+
fillOpacity={marker.style?.fillOpacity}
|
|
56
|
+
stroke={marker.style?.stroke}
|
|
57
|
+
strokeWidth={marker.style?.strokeWidth}
|
|
58
|
+
strokeOpacity={marker.style?.strokeOpacity}
|
|
59
|
+
strokeDasharray={marker.style?.strokeDasharray}
|
|
60
|
+
borderRadius={marker.style?.borderRadius}
|
|
61
|
+
/>
|
|
62
|
+
{/if}
|
|
63
|
+
{:else}
|
|
64
|
+
{@const categoryScale = categoryScaleFor(marker.isHorizontal)}
|
|
65
|
+
{#if categoryScale?.type === 'band'}
|
|
66
|
+
{@const bandwidth = categoryScale.fn.bandwidth()}
|
|
67
|
+
{@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
|
|
68
|
+
{@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
|
|
69
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
70
|
+
{#if marker.isHorizontal}
|
|
71
|
+
<rect
|
|
72
|
+
x={valueMin}
|
|
73
|
+
y={bandStart}
|
|
74
|
+
width={Math.max(0, valueMax - valueMin)}
|
|
75
|
+
height={bandwidth}
|
|
76
|
+
fill="transparent"
|
|
77
|
+
onpointerenter={marker.onpointerenter}
|
|
78
|
+
onpointerleave={marker.onpointerleave}
|
|
79
|
+
/>
|
|
80
|
+
{:else}
|
|
81
|
+
<rect
|
|
82
|
+
x={bandStart}
|
|
83
|
+
y={valueMin}
|
|
84
|
+
width={bandwidth}
|
|
85
|
+
height={Math.max(0, valueMax - valueMin)}
|
|
86
|
+
fill="transparent"
|
|
87
|
+
onpointerenter={marker.onpointerenter}
|
|
88
|
+
onpointerleave={marker.onpointerleave}
|
|
89
|
+
/>
|
|
90
|
+
{/if}
|
|
91
|
+
{/if}
|
|
92
|
+
{/if}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { BarMarkerConfig } from '../types/markers/common';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
marker: BarMarkerConfig;
|
|
4
|
+
};
|
|
5
|
+
declare const BarMarker: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type BarMarker = ReturnType<typeof BarMarker>;
|
|
7
|
+
export default BarMarker;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Cell } from 'svelteplot';
|
|
3
|
+
import type { CellMarkerConfig } from '../types/markers/common';
|
|
4
|
+
|
|
5
|
+
/** Renders one `'cell'` marker as a `<Cell>` call. */
|
|
6
|
+
let { marker }: { marker: CellMarkerConfig } = $props();
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<Cell
|
|
10
|
+
data={marker.data}
|
|
11
|
+
x={marker.x}
|
|
12
|
+
y={marker.y}
|
|
13
|
+
fill={marker.fill}
|
|
14
|
+
fillOpacity={marker.style?.fillOpacity ?? 1}
|
|
15
|
+
stroke={marker.style?.stroke}
|
|
16
|
+
strokeWidth={marker.style?.strokeWidth ?? 0}
|
|
17
|
+
strokeOpacity={marker.style?.strokeOpacity}
|
|
18
|
+
strokeDasharray={marker.style?.strokeDasharray}
|
|
19
|
+
borderRadius={marker.style?.borderRadius}
|
|
20
|
+
inset={marker.inset ?? 0.5}
|
|
21
|
+
/>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { CellMarkerConfig } from '../types/markers/common';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
marker: CellMarkerConfig;
|
|
4
|
+
};
|
|
5
|
+
declare const CellMarker: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type CellMarker = ReturnType<typeof CellMarker>;
|
|
7
|
+
export default CellMarker;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Contour } from 'svelteplot';
|
|
3
|
+
import type { GeoContourMarkerConfig } from '../types/markers/geo';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Renders one `'contour'` marker's `<Contour>` mark. `marker.clip` is
|
|
7
|
+
* handled by the caller (`GeometryLayout` wraps this in `ContourClipMarker`)
|
|
8
|
+
* — this component only draws the contour itself.
|
|
9
|
+
*/
|
|
10
|
+
let { marker }: { marker: GeoContourMarkerConfig } = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<!-- No `?? 'none'` fallback: an unset `fill` should leave svelteplot's own default (`fill="none"`) in place, not run the literal string `'none'` through the color scale. -->
|
|
14
|
+
<Contour
|
|
15
|
+
class="contour"
|
|
16
|
+
data={marker.data}
|
|
17
|
+
x={marker.x}
|
|
18
|
+
y={marker.y}
|
|
19
|
+
value={marker.value}
|
|
20
|
+
thresholds={marker.thresholds}
|
|
21
|
+
fill={marker.fill}
|
|
22
|
+
stroke={marker.stroke ?? 'currentColor'}
|
|
23
|
+
strokeWidth={marker.style?.strokeWidth}
|
|
24
|
+
fillOpacity={marker.style?.fillOpacity}
|
|
25
|
+
strokeOpacity={marker.style?.strokeOpacity}
|
|
26
|
+
blur={marker.blur}
|
|
27
|
+
interpolate={marker.interpolate}
|
|
28
|
+
/>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { GeoContourMarkerConfig } from '../types/markers/geo';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
marker: GeoContourMarkerConfig;
|
|
4
|
+
};
|
|
5
|
+
declare const ContourMarker: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type ContourMarker = ReturnType<typeof ContourMarker>;
|
|
7
|
+
export default ContourMarker;
|
|
@@ -5,38 +5,19 @@
|
|
|
5
5
|
import { Line } from 'svelteplot';
|
|
6
6
|
import DotMarker from './DotMarker.svelte';
|
|
7
7
|
import TextMarker from './TextMarker.svelte';
|
|
8
|
-
import { resolveXDeltas, resolveYDeltas } from '../
|
|
9
|
-
import type { MarkerProps } from '../types/markers/props';
|
|
8
|
+
import { resolveXDeltas, resolveYDeltas } from '../utils/delta';
|
|
10
9
|
import type { Series } from '../types/plots/data/common';
|
|
11
|
-
import type {
|
|
10
|
+
import type { DeltaMarkerConfig } from '../types/markers/line';
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
xDomain?: (number | string | Date)[];
|
|
15
|
-
yDomain?: (number | string | Date)[];
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
let {
|
|
19
|
-
data = [],
|
|
20
|
-
axis,
|
|
21
|
-
at,
|
|
22
|
-
from,
|
|
23
|
-
to,
|
|
24
|
-
formatDiff,
|
|
25
|
-
strokeStyle,
|
|
26
|
-
fontStyle,
|
|
27
|
-
dotStyle,
|
|
28
|
-
xDomain,
|
|
29
|
-
yDomain,
|
|
30
|
-
}: Props = $props();
|
|
12
|
+
let { marker, data = [] }: { marker: DeltaMarkerConfig; data?: Series<TData>[] } = $props();
|
|
31
13
|
|
|
32
14
|
const resolved = $derived.by(() => {
|
|
33
|
-
const
|
|
34
|
-
const [d] = axis === 'x' ? resolveXDeltas(data, [cfg]) : resolveYDeltas(data, [cfg]);
|
|
15
|
+
const [d] = marker.axis === 'x' ? resolveXDeltas(data, [marker]) : resolveYDeltas(data, [marker]);
|
|
35
16
|
return d;
|
|
36
17
|
});
|
|
37
18
|
|
|
38
19
|
const clampRange = $derived.by((): [number, number] | undefined => {
|
|
39
|
-
const domain = axis === 'x' ? yDomain : xDomain;
|
|
20
|
+
const domain = marker.axis === 'x' ? marker.yDomain : marker.xDomain;
|
|
40
21
|
if (!domain || domain.length < 2) return undefined;
|
|
41
22
|
const lo = Number(domain[0]);
|
|
42
23
|
const hi = Number(domain[domain.length - 1]);
|
|
@@ -48,11 +29,11 @@
|
|
|
48
29
|
}
|
|
49
30
|
|
|
50
31
|
function pt(fixed: number, varying: number) {
|
|
51
|
-
return axis === 'x' ? { x: fixed, y: varying } : { x: varying, y: fixed };
|
|
32
|
+
return marker.axis === 'x' ? { x: fixed, y: varying } : { x: varying, y: fixed };
|
|
52
33
|
}
|
|
53
34
|
|
|
54
35
|
function textVaryCoord(fromVis: number, toVis: number) {
|
|
55
|
-
const anchor = fontStyle?.lineAnchor ?? 'middle';
|
|
36
|
+
const anchor = marker.fontStyle?.lineAnchor ?? 'middle';
|
|
56
37
|
return anchor === 'top'
|
|
57
38
|
? Math.max(fromVis, toVis)
|
|
58
39
|
: anchor === 'bottom'
|
|
@@ -82,35 +63,47 @@
|
|
|
82
63
|
data={coords.lineData}
|
|
83
64
|
x={(p) => p.x}
|
|
84
65
|
y={(p) => p.y}
|
|
85
|
-
stroke={strokeStyle?.stroke ?? 'currentColor'}
|
|
86
|
-
strokeWidth={strokeStyle?.strokeWidth ?? 2}
|
|
87
|
-
strokeOpacity={strokeStyle?.strokeOpacity ?? 0.8}
|
|
88
|
-
strokeDasharray={strokeStyle?.strokeDasharray ?? '6 6'}
|
|
89
|
-
strokeLinecap={strokeStyle?.strokeLinecap ?? 'round'}
|
|
66
|
+
stroke={marker.strokeStyle?.stroke ?? 'currentColor'}
|
|
67
|
+
strokeWidth={marker.strokeStyle?.strokeWidth ?? 2}
|
|
68
|
+
strokeOpacity={marker.strokeStyle?.strokeOpacity ?? 0.8}
|
|
69
|
+
strokeDasharray={marker.strokeStyle?.strokeDasharray ?? '6 6'}
|
|
70
|
+
strokeLinecap={marker.strokeStyle?.strokeLinecap ?? 'round'}
|
|
90
71
|
/>
|
|
91
72
|
<DotMarker
|
|
92
73
|
x={coords?.fromPt?.x ?? 0}
|
|
93
74
|
y={coords?.fromPt?.y ?? 0}
|
|
94
|
-
style={{
|
|
75
|
+
style={{
|
|
76
|
+
dotRadius: 4,
|
|
77
|
+
dotFill: marker.strokeStyle?.stroke,
|
|
78
|
+
dotStroke: marker.strokeStyle?.stroke,
|
|
79
|
+
dotStrokeWidth: 2,
|
|
80
|
+
...marker.dotStyle,
|
|
81
|
+
}}
|
|
95
82
|
/>
|
|
96
83
|
<DotMarker
|
|
97
84
|
x={coords?.toPt?.x ?? 0}
|
|
98
85
|
y={coords?.toPt?.y ?? 0}
|
|
99
|
-
style={{
|
|
86
|
+
style={{
|
|
87
|
+
dotRadius: 4,
|
|
88
|
+
dotFill: marker.strokeStyle?.stroke,
|
|
89
|
+
dotStroke: marker.strokeStyle?.stroke,
|
|
90
|
+
dotStrokeWidth: 2,
|
|
91
|
+
...marker.dotStyle,
|
|
92
|
+
}}
|
|
100
93
|
/>
|
|
101
94
|
<TextMarker
|
|
102
95
|
x={coords?.textPt?.x ?? 0}
|
|
103
96
|
y={coords?.textPt?.y ?? 0}
|
|
104
|
-
text={(formatDiff ?? ((v: number) => v.toFixed(1)))(coords?.diff ?? 0)}
|
|
97
|
+
text={(marker.formatDiff ?? ((v: number) => v.toFixed(1)))(coords?.diff ?? 0)}
|
|
105
98
|
style={{
|
|
106
99
|
fontWeight: 'bold',
|
|
107
100
|
fontSize: 14,
|
|
108
101
|
textAnchor: 'middle',
|
|
109
|
-
fill: strokeStyle?.stroke ?? 'currentColor',
|
|
110
|
-
...fontStyle,
|
|
111
|
-
dx: fontStyle?.dx ?? (axis === 'x' ? 12 : 0),
|
|
112
|
-
dy: fontStyle?.dy ?? (axis === 'x' ? 0 : -10),
|
|
113
|
-
lineAnchor: axis === 'x' ? (fontStyle?.lineAnchor ?? 'middle') : 'bottom',
|
|
102
|
+
fill: marker.strokeStyle?.stroke ?? 'currentColor',
|
|
103
|
+
...marker.fontStyle,
|
|
104
|
+
dx: marker.fontStyle?.dx ?? (marker.axis === 'x' ? 12 : 0),
|
|
105
|
+
dy: marker.fontStyle?.dy ?? (marker.axis === 'x' ? 0 : -10),
|
|
106
|
+
lineAnchor: marker.axis === 'x' ? (marker.fontStyle?.lineAnchor ?? 'middle') : 'bottom',
|
|
114
107
|
}}
|
|
115
108
|
/>
|
|
116
109
|
{/if}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import type { MarkerProps } from '../types/markers/props';
|
|
2
1
|
import type { Series } from '../types/plots/data/common';
|
|
3
|
-
import type {
|
|
2
|
+
import type { DeltaMarkerConfig } from '../types/markers/line';
|
|
4
3
|
declare function $$render<TData extends Record<string, unknown>>(): {
|
|
5
|
-
props:
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
props: {
|
|
5
|
+
marker: DeltaMarkerConfig;
|
|
6
|
+
data?: Series<TData>[];
|
|
8
7
|
};
|
|
9
8
|
exports: {};
|
|
10
9
|
bindings: "";
|
|
@@ -1,23 +1,52 @@
|
|
|
1
1
|
<script lang="ts" generics="TData = Record<string, unknown>">
|
|
2
2
|
import { Dot } from 'svelteplot';
|
|
3
|
+
import { makeColorScale } from '../utils/color';
|
|
4
|
+
import { getConfiguration } from '../configuration/config.svelte';
|
|
3
5
|
import type { MarkerProps } from '../types/markers/props';
|
|
4
|
-
import type { AxisValue } from '../types/
|
|
6
|
+
import type { AxisValue } from '../types/layout/scales';
|
|
5
7
|
import type { DotStyle } from '../types/plots/styling';
|
|
8
|
+
import type { ColorsStyle } from '../types/layout/styles';
|
|
6
9
|
|
|
7
10
|
interface Props extends MarkerProps<TData> {
|
|
8
11
|
x?: AxisValue | ((d: TData) => AxisValue);
|
|
9
12
|
y?: AxisValue | ((d: TData) => AxisValue);
|
|
10
|
-
style
|
|
13
|
+
/** Per-row radius, or a constant — overrides `style.dotRadius` when set. */
|
|
14
|
+
r?: number | ((d: TData) => number);
|
|
15
|
+
/** Per-row fill, overriding `style.dotFill` — ignored when `value` is set. */
|
|
16
|
+
fill?: (d: TData) => string;
|
|
17
|
+
/** Continuous value driving a per-dot color ramp through `style.colors` — takes priority over `fill`/`style.dotFill` when set. */
|
|
18
|
+
value?: (d: TData) => number;
|
|
19
|
+
style?: DotStyle & { colors?: ColorsStyle };
|
|
11
20
|
}
|
|
12
21
|
|
|
13
|
-
const { data = [], x, y, style }: Props = $props();
|
|
22
|
+
const { data = [], x, y, r: rProp, fill: fillProp, value, style }: Props = $props();
|
|
23
|
+
|
|
24
|
+
const cfg = $derived(getConfiguration());
|
|
14
25
|
|
|
15
26
|
const xAccessor = $derived(typeof x === 'function' ? x : () => x ?? 0);
|
|
16
27
|
const yAccessor = $derived(typeof y === 'function' ? y : () => y ?? 0);
|
|
17
|
-
|
|
28
|
+
/** A literal `x`/`y` draws one dot at a fixed point regardless of `data`; an accessor reads its position per row. */
|
|
29
|
+
const displayData = $derived(
|
|
30
|
+
data.length > 0 || typeof x === 'function' || typeof y === 'function' ? data : [{} as TData],
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
/** Color scale built from `value`'s own data extent — `null` when `value` is unset. */
|
|
34
|
+
const valueColorScale = $derived.by(() => {
|
|
35
|
+
if (!value) return null;
|
|
36
|
+
const vals = displayData.map((d) => Number(value(d))).filter((v) => Number.isFinite(v));
|
|
37
|
+
if (!vals.length) return null;
|
|
38
|
+
return makeColorScale(
|
|
39
|
+
Math.min(...vals),
|
|
40
|
+
Math.max(...vals),
|
|
41
|
+
style?.colors?.min ?? cfg.continuous.min,
|
|
42
|
+
style?.colors?.max ?? cfg.continuous.max,
|
|
43
|
+
);
|
|
44
|
+
});
|
|
18
45
|
|
|
19
|
-
const r = $derived(style?.dotRadius ?? 5);
|
|
20
|
-
const fill = $derived(
|
|
46
|
+
const r = $derived(rProp ?? style?.dotRadius ?? 5);
|
|
47
|
+
const fill = $derived(
|
|
48
|
+
valueColorScale && value ? (d: TData) => valueColorScale(Number(value(d))) : (fillProp ?? style?.dotFill ?? 'currentColor'),
|
|
49
|
+
);
|
|
21
50
|
const fillOpacity = $derived(style?.dotFillOpacity ?? 1);
|
|
22
51
|
const symbol = $derived(style?.dotSymbol ?? 'circle');
|
|
23
52
|
const stroke = $derived(style?.dotStroke ?? 'currentColor');
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import type { MarkerProps } from '../types/markers/props';
|
|
2
|
-
import type { AxisValue } from '../types/
|
|
2
|
+
import type { AxisValue } from '../types/layout/scales';
|
|
3
3
|
import type { DotStyle } from '../types/plots/styling';
|
|
4
|
+
import type { ColorsStyle } from '../types/layout/styles';
|
|
4
5
|
declare function $$render<TData = Record<string, unknown>>(): {
|
|
5
6
|
props: MarkerProps<TData> & {
|
|
6
7
|
x?: AxisValue | ((d: TData) => AxisValue);
|
|
7
8
|
y?: AxisValue | ((d: TData) => AxisValue);
|
|
8
|
-
style
|
|
9
|
+
/** Per-row radius, or a constant — overrides `style.dotRadius` when set. */
|
|
10
|
+
r?: number | ((d: TData) => number);
|
|
11
|
+
/** Per-row fill, overriding `style.dotFill` — ignored when `value` is set. */
|
|
12
|
+
fill?: (d: TData) => string;
|
|
13
|
+
/** Continuous value driving a per-dot color ramp through `style.colors` — takes priority over `fill`/`style.dotFill` when set. */
|
|
14
|
+
value?: (d: TData) => number;
|
|
15
|
+
style?: DotStyle & {
|
|
16
|
+
colors?: ColorsStyle;
|
|
17
|
+
};
|
|
9
18
|
};
|
|
10
19
|
exports: {};
|
|
11
20
|
bindings: "";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Geo } from 'svelteplot';
|
|
3
|
+
import type { GeoFeaturesMarkerConfig } from '../types/markers/geo';
|
|
4
|
+
|
|
5
|
+
/** Renders one `'geo'` marker — one resolved-style bucket of the base map's own features, as a single `<Geo>` call. */
|
|
6
|
+
let { marker }: { marker: GeoFeaturesMarkerConfig } = $props();
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<Geo
|
|
10
|
+
data={marker.data}
|
|
11
|
+
fill={marker.fill}
|
|
12
|
+
fillOpacity={marker.fillOpacity ?? 1}
|
|
13
|
+
stroke={marker.stroke ?? 'currentColor'}
|
|
14
|
+
strokeWidth={marker.strokeWidth ?? 0.5}
|
|
15
|
+
style="vector-effect: non-scaling-stroke"
|
|
16
|
+
onclick={marker.onclick}
|
|
17
|
+
onpointerenter={marker.onpointerenter}
|
|
18
|
+
onpointerleave={marker.onpointerleave}
|
|
19
|
+
/>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { GeoFeaturesMarkerConfig } from '../types/markers/geo';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
marker: GeoFeaturesMarkerConfig;
|
|
4
|
+
};
|
|
5
|
+
declare const GeoFeaturesMarker: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type GeoFeaturesMarker = ReturnType<typeof GeoFeaturesMarker>;
|
|
7
|
+
export default GeoFeaturesMarker;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Geo } from 'svelteplot';
|
|
3
|
+
import { getConfiguration } from '../configuration/config.svelte';
|
|
4
|
+
import type { GeoHoverMarkerConfig } from '../types/markers/geo';
|
|
5
|
+
import type { HoverPoint } from '../types/layout/tooltip';
|
|
6
|
+
|
|
7
|
+
/** Renders the hovered feature restyled in place — no dot, no label. `pointer-events: none` so it never steals hover from the base map underneath it. */
|
|
8
|
+
let { marker, data }: { marker: GeoHoverMarkerConfig; data: HoverPoint<Record<string, unknown>>[] } = $props();
|
|
9
|
+
|
|
10
|
+
const cfg = $derived(getConfiguration());
|
|
11
|
+
const style = $derived({ ...cfg.hover.area, ...marker.style });
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
{#if data.length > 0}
|
|
15
|
+
<Geo
|
|
16
|
+
data={data.map((p) => p.row)}
|
|
17
|
+
fill={style.fill}
|
|
18
|
+
fillOpacity={style.fillOpacity}
|
|
19
|
+
stroke={style.stroke}
|
|
20
|
+
strokeWidth={style.strokeWidth}
|
|
21
|
+
strokeOpacity={style.strokeOpacity}
|
|
22
|
+
strokeDasharray={style.strokeDasharray}
|
|
23
|
+
style="vector-effect: non-scaling-stroke; pointer-events: none;"
|
|
24
|
+
/>
|
|
25
|
+
{/if}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { GeoHoverMarkerConfig } from '../types/markers/geo';
|
|
2
|
+
import type { HoverPoint } from '../types/layout/tooltip';
|
|
3
|
+
type $$ComponentProps = {
|
|
4
|
+
marker: GeoHoverMarkerConfig;
|
|
5
|
+
data: HoverPoint<Record<string, unknown>>[];
|
|
6
|
+
};
|
|
7
|
+
declare const GeoHoverMarker: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
8
|
+
type GeoHoverMarker = ReturnType<typeof GeoHoverMarker>;
|
|
9
|
+
export default GeoHoverMarker;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Graticule } from 'svelteplot';
|
|
3
|
+
import type { GeoGraticuleMarkerConfig } from '../types/markers/geo';
|
|
4
|
+
|
|
5
|
+
/** Renders one `'graticule'` marker — longitude/latitude gridlines. */
|
|
6
|
+
let { marker }: { marker: GeoGraticuleMarkerConfig } = $props();
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<Graticule
|
|
10
|
+
step={marker.step}
|
|
11
|
+
stepX={marker.stepX}
|
|
12
|
+
stepY={marker.stepY}
|
|
13
|
+
stroke={marker.style?.stroke ?? 'currentColor'}
|
|
14
|
+
strokeWidth={marker.style?.strokeWidth ?? 0.5}
|
|
15
|
+
strokeOpacity={marker.style?.strokeOpacity ?? 0.3}
|
|
16
|
+
strokeDasharray={marker.style?.strokeDasharray}
|
|
17
|
+
style="vector-effect: non-scaling-stroke"
|
|
18
|
+
/>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { GeoGraticuleMarkerConfig } from '../types/markers/geo';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
marker: GeoGraticuleMarkerConfig;
|
|
4
|
+
};
|
|
5
|
+
declare const GraticuleMarker: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type GraticuleMarker = ReturnType<typeof GraticuleMarker>;
|
|
7
|
+
export default GraticuleMarker;
|