# packages/core/src/features/viz/lib/point-series.tsx This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/features/viz/lib/point-series.tsx#L74). [Back to reference](/reference/components/point-series/)
1 import { resolveTexturePaint } from "@pibbl/core/internal";
2 import {
3   Path,
4   isSignal,
5   resolveSignalValue,
6   useCanvasContext,
7 } from "@pibbl/core";
8 import type { FillStyle, StrokeStyle } from "@pibbl/core";
9 import type {
10   PointMarkStyle,
11   PointSeriesProps,
12   PointSeriesStyle,
13 } from "./point-types.js";
14 import {
15   useSeriesPosition,
16   seriesAccessor,
17   mapSeriesPosition,
18 } from "./series-position.js";
19 import { pointData } from "./point-data.js";
20 import { appendPointTarget, pointPath } from "./point-geometry.js";
21 import { opacity, width } from "./paint.js";
22 const fields = ["radius", "fill", "stroke", "strokeWidth", "opacity", "cursor"];
23 function paint(
24   value: unknown,
25   name: string,
26 ): FillStyle | StrokeStyle | undefined {
27   if (
28     value === undefined ||
29     typeof value === "string" ||
30     value instanceof CanvasGradient ||
31     value instanceof CanvasPattern
32   )
33     return value;
34   throw new TypeError(`PointSeries: invalid ${name}.`);
35 }
36 function styleObject(input: unknown, callback: boolean): PointSeriesStyle {
37   if (input === null || typeof input !== "object" || Array.isArray(input))
38     throw new TypeError("PointSeries: style must be an object.");
39   const result: Record<string, unknown> = {};
40   for (const key of Object.keys(input)) {
41     if (!fields.includes(key) || (callback && key === "cursor"))
42       throw new TypeError(`PointSeries: unsupported style field ${key}.`);
43     const value = (input as Record<string, unknown>)[key];
44     if (callback && isSignal(value))
45       throw new TypeError(
46         "PointSeries: datum styles must contain plain values; read signals explicitly.",
47       );
48     result[key] = callback ? value : resolveSignalValue(value);
49   }
50   return result as PointSeriesStyle;
51 }
52 function normalized(style: PointSeriesStyle) {
53   const radius = width(style.radius ?? 3, "PointSeries radius");
54   if (style.cursor !== undefined && typeof style.cursor !== "string")
55     throw new TypeError("PointSeries: cursor must be a string.");
56   return {
57     radius,
58     fill: paint(style.fill ?? "#2563eb", "fill"),
59     stroke: paint(style.stroke, "stroke"),
60     strokeWidth: width(style.strokeWidth ?? 1, "PointSeries"),
61     opacity: opacity(style.opacity ?? 1, "PointSeries"),
62     cursor: style.cursor,
63   };
64 }
65 /**
66  * Batched circles in source paint order with one ordinary Pibbl target.
67  *
68  * @param props - Data, coordinate accessors, scales, and point styling. See
69  * {@link PointSeriesProps} .
70  * @returns Pibbl nodes drawing the point marks.
71  *
72  * @see {@link PointSeriesProps}
73  */
74 export function PointSeries<D>({
75   data: input,
76   x: xInput,
77   y: yInput,
78   xScale: xId,
79   yScale: yId,
80   defined,
81   style: styleInput,
82   ...events
83 }: PointSeriesProps<D>) {
84   const xs = useSeriesPosition(xId),
85     ys = useSeriesPosition(yId);
86   const data = pointData(resolveSignalValue(input), "PointSeries");
87   const x = seriesAccessor(xInput),
88     y = seriesAccessor(yInput);
89   const specified = resolveSignalValue(styleInput);
90   const shared =
91     typeof specified === "function"
92       ? undefined
93       : normalized(styleObject(specified ?? {}, false));
94   const ctx = useCanvasContext();
95   const target = new Path2D();
96   for (let i = 0; i < data.length; i++) {
97     const datum = data[i];
98     if (defined && !defined(datum, i, data)) continue;
99     const xv = x(datum, i, data),
100       yv = y(datum, i, data);
101     const mappedX = mapSeriesPosition(xs, xv),
102       mappedY = mapSeriesPosition(ys, yv);
103     if (mappedX === undefined || mappedY === undefined) continue;
104     const px = mappedX,
105       py = mappedY;
106     const style =
107       shared ??
108       normalized(
109         styleObject(
110           (specified as (d: D, i: number, a: readonly D[]) => PointMarkStyle)(
111             datum,
112             i,
113             data,
114           ),
115           true,
116         ),
117       );
118     if (style.radius === 0) continue;
119     appendPointTarget(
120       target,
121       px,
122       py,
123       style.radius,
124       !!style.fill,
125       style.stroke ? style.strokeWidth : 0,
126     );
127     const path = pointPath(px, py, style.radius);
128     ctx.save();
129     try {
130       ctx.globalAlpha *= style.opacity;
131       if (style.fill) {
132         ctx.fillStyle = resolveTexturePaint(style.fill, ctx, {
133           x: px - style.radius,
134           y: py - style.radius,
135           width: style.radius * 2,
136           height: style.radius * 2,
137         });
138         ctx.fill(path);
139       }
140       if (style.stroke && style.strokeWidth > 0) {
141         ctx.strokeStyle = resolveTexturePaint(style.stroke, ctx, {
142           x: px - style.radius,
143           y: py - style.radius,
144           width: style.radius * 2,
145           height: style.radius * 2,
146         });
147         ctx.lineWidth = style.strokeWidth;
148         ctx.stroke(path);
149       }
150     } finally {
151       ctx.restore();
152     }
153   }
154   return (
155     <Path
156       {...events}
157       style={{ d: target, fill: "transparent", cursor: shared?.cursor }}
158     />
159   );
160 }
161
## Documentation version Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.