@photonviz/react 0.1.0 → 0.1.1
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/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ interface PlotProps {
|
|
|
13
13
|
/** Container component. Children (Line, Scatter, …) register once it mounts. */
|
|
14
14
|
declare function Plot({ options, className, style, children }: PlotProps): react.JSX.Element;
|
|
15
15
|
type LineProps = LineOptions;
|
|
16
|
-
declare function Line({ x, y, color, width, name, yAxis, step, join, decimate }: LineProps): null;
|
|
16
|
+
declare function Line({ x, y, color, width, name, yAxis, step, join, miterLimit, decimate }: LineProps): null;
|
|
17
17
|
type ScatterProps = ScatterOptions;
|
|
18
18
|
declare function Scatter({ x, y, color, size, name, yAxis, colorBy }: ScatterProps): null;
|
|
19
19
|
type BarProps = BarOptions;
|
package/dist/index.js
CHANGED
|
@@ -35,18 +35,18 @@ function Plot({ options, className, style, children }) {
|
|
|
35
35
|
}
|
|
36
36
|
);
|
|
37
37
|
}
|
|
38
|
-
function Line({ x, y, color, width, name, yAxis, step, join, decimate }) {
|
|
38
|
+
function Line({ x, y, color, width, name, yAxis, step, join, miterLimit, decimate }) {
|
|
39
39
|
const plot = useContext(PlotContext);
|
|
40
40
|
const layer = useRef(null);
|
|
41
41
|
useEffect(() => {
|
|
42
42
|
if (!plot) return;
|
|
43
|
-
const l = plot.addLine({ x, y, color, width, name, yAxis, step, join, decimate });
|
|
43
|
+
const l = plot.addLine({ x, y, color, width, name, yAxis, step, join, miterLimit, decimate });
|
|
44
44
|
layer.current = l;
|
|
45
45
|
return () => {
|
|
46
46
|
plot.removeLayer(l);
|
|
47
47
|
layer.current = null;
|
|
48
48
|
};
|
|
49
|
-
}, [plot, color, width, name, yAxis, step, join, decimate]);
|
|
49
|
+
}, [plot, color, width, name, yAxis, step, join, miterLimit, decimate]);
|
|
50
50
|
useEffect(() => {
|
|
51
51
|
if (layer.current && plot) {
|
|
52
52
|
layer.current.setData(x, y);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import {\n AreaLayer,\n BarLayer,\n LineLayer,\n Plot as CorePlot,\n ScatterLayer,\n type AreaOptions,\n type BarOptions,\n type LineOptions,\n type PlotOptions,\n type ScatterOptions,\n type YAxisOptions,\n} from \"@photonviz/core\";\nimport {\n createContext,\n useContext,\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n type RefObject,\n} from \"react\";\n\nconst PlotContext = createContext<CorePlot | null>(null);\n\n/** Imperative escape hatch: get a ref + the underlying core Plot instance. */\nexport function usePlot(options?: PlotOptions): [RefObject<HTMLDivElement>, CorePlot | null] {\n const ref = useRef<HTMLDivElement>(null);\n const [plot, setPlot] = useState<CorePlot | null>(null);\n const optsRef = useRef(options);\n useEffect(() => {\n if (!ref.current) return;\n const p = new CorePlot(ref.current, optsRef.current);\n setPlot(p);\n return () => p.destroy();\n }, []);\n return [ref, plot];\n}\n\nexport interface PlotProps {\n options?: PlotOptions;\n className?: string;\n style?: CSSProperties;\n children?: ReactNode;\n}\n\n/** Container component. Children (Line, Scatter, …) register once it mounts. */\nexport function Plot({ options, className, style, children }: PlotProps) {\n const [ref, plot] = usePlot(options);\n return (\n <div\n ref={ref}\n className={className}\n style={{ position: \"relative\", width: \"100%\", height: \"100%\", ...style }}\n >\n <PlotContext.Provider value={plot}>{plot ? children : null}</PlotContext.Provider>\n </div>\n );\n}\n\nexport type LineProps = LineOptions;\n\nexport function Line({ x, y, color, width, name, yAxis, step, join, decimate }: LineProps) {\n const plot = useContext(PlotContext);\n const layer = useRef<LineLayer | null>(null);\n useEffect(() => {\n if (!plot) return;\n const l = plot.addLine({ x, y, color, width, name, yAxis, step, join, decimate });\n layer.current = l;\n return () => {\n plot.removeLayer(l);\n layer.current = null;\n };\n // Structural props → recreate the layer.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, color, width, name, yAxis, step, join, decimate]);\n useEffect(() => {\n if (layer.current && plot) {\n layer.current.setData(x, y);\n plot.render();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [x, y]);\n return null;\n}\n\nexport type ScatterProps = ScatterOptions;\n\nexport function Scatter({ x, y, color, size, name, yAxis, colorBy }: ScatterProps) {\n const plot = useContext(PlotContext);\n const layer = useRef<ScatterLayer | null>(null);\n useEffect(() => {\n if (!plot) return;\n const l = plot.addScatter({ x, y, color, size, name, yAxis, colorBy });\n layer.current = l;\n return () => {\n plot.removeLayer(l);\n layer.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, color, size, name, yAxis, colorBy]);\n useEffect(() => {\n if (layer.current && plot) {\n layer.current.setData(x, y);\n plot.render();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [x, y]);\n return null;\n}\n\nexport type BarProps = BarOptions;\n\nexport function Bar({ x, y, base, width, offset, color, name, yAxis }: BarProps) {\n const plot = useContext(PlotContext);\n const layer = useRef<BarLayer | null>(null);\n useEffect(() => {\n if (!plot) return;\n const l = plot.addBar({ x, y, base, width, offset, color, name, yAxis });\n layer.current = l;\n return () => {\n plot.removeLayer(l);\n layer.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, width, offset, color, name, yAxis]);\n useEffect(() => {\n if (layer.current && plot) {\n layer.current.setData(x, y, base);\n plot.render();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [x, y, base]);\n return null;\n}\n\nexport type AreaProps = AreaOptions;\n\nexport function Area({ x, y, base, color, name, yAxis }: AreaProps) {\n const plot = useContext(PlotContext);\n const layer = useRef<AreaLayer | null>(null);\n useEffect(() => {\n if (!plot) return;\n const l = plot.addArea({ x, y, base, color, name, yAxis });\n layer.current = l;\n return () => {\n plot.removeLayer(l);\n layer.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, color, name, yAxis]);\n useEffect(() => {\n if (layer.current && plot) {\n layer.current.setData(x, y, base);\n plot.render();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [x, y, base]);\n return null;\n}\n\nexport interface YAxisProps extends YAxisOptions {\n id: string;\n}\n\n/** Register an additional Y axis. (Core has no live removal, so it persists.) */\nexport function YAxis({ id, ...opts }: YAxisProps) {\n const plot = useContext(PlotContext);\n useEffect(() => {\n if (!plot) return;\n plot.addYAxis(id, opts);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, id]);\n return null;\n}\n"],"mappings":";AAAA;AAAA,EAIE,QAAQ;AAAA,OAQH;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAkCD;AAhCN,IAAM,cAAc,cAA+B,IAAI;AAGhD,SAAS,QAAQ,SAAqE;AAC3F,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,MAAM,OAAO,IAAI,SAA0B,IAAI;AACtD,QAAM,UAAU,OAAO,OAAO;AAC9B,YAAU,MAAM;AACd,QAAI,CAAC,IAAI,QAAS;AAClB,UAAM,IAAI,IAAI,SAAS,IAAI,SAAS,QAAQ,OAAO;AACnD,YAAQ,CAAC;AACT,WAAO,MAAM,EAAE,QAAQ;AAAA,EACzB,GAAG,CAAC,CAAC;AACL,SAAO,CAAC,KAAK,IAAI;AACnB;AAUO,SAAS,KAAK,EAAE,SAAS,WAAW,OAAO,SAAS,GAAc;AACvE,QAAM,CAAC,KAAK,IAAI,IAAI,QAAQ,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,EAAE,UAAU,YAAY,OAAO,QAAQ,QAAQ,QAAQ,GAAG,MAAM;AAAA,MAEvE,8BAAC,YAAY,UAAZ,EAAqB,OAAO,MAAO,iBAAO,WAAW,MAAK;AAAA;AAAA,EAC7D;AAEJ;AAIO,SAAS,KAAK,EAAE,GAAG,GAAG,OAAO,OAAO,MAAM,OAAO,MAAM,MAAM,SAAS,GAAc;
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import {\n AreaLayer,\n BarLayer,\n LineLayer,\n Plot as CorePlot,\n ScatterLayer,\n type AreaOptions,\n type BarOptions,\n type LineOptions,\n type PlotOptions,\n type ScatterOptions,\n type YAxisOptions,\n} from \"@photonviz/core\";\nimport {\n createContext,\n useContext,\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n type RefObject,\n} from \"react\";\n\nconst PlotContext = createContext<CorePlot | null>(null);\n\n/** Imperative escape hatch: get a ref + the underlying core Plot instance. */\nexport function usePlot(options?: PlotOptions): [RefObject<HTMLDivElement>, CorePlot | null] {\n const ref = useRef<HTMLDivElement>(null);\n const [plot, setPlot] = useState<CorePlot | null>(null);\n const optsRef = useRef(options);\n useEffect(() => {\n if (!ref.current) return;\n const p = new CorePlot(ref.current, optsRef.current);\n setPlot(p);\n return () => p.destroy();\n }, []);\n return [ref, plot];\n}\n\nexport interface PlotProps {\n options?: PlotOptions;\n className?: string;\n style?: CSSProperties;\n children?: ReactNode;\n}\n\n/** Container component. Children (Line, Scatter, …) register once it mounts. */\nexport function Plot({ options, className, style, children }: PlotProps) {\n const [ref, plot] = usePlot(options);\n return (\n <div\n ref={ref}\n className={className}\n style={{ position: \"relative\", width: \"100%\", height: \"100%\", ...style }}\n >\n <PlotContext.Provider value={plot}>{plot ? children : null}</PlotContext.Provider>\n </div>\n );\n}\n\nexport type LineProps = LineOptions;\n\nexport function Line({ x, y, color, width, name, yAxis, step, join, miterLimit, decimate }: LineProps) {\n const plot = useContext(PlotContext);\n const layer = useRef<LineLayer | null>(null);\n useEffect(() => {\n if (!plot) return;\n const l = plot.addLine({ x, y, color, width, name, yAxis, step, join, miterLimit, decimate });\n layer.current = l;\n return () => {\n plot.removeLayer(l);\n layer.current = null;\n };\n // Structural props → recreate the layer.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, color, width, name, yAxis, step, join, miterLimit, decimate]);\n useEffect(() => {\n if (layer.current && plot) {\n layer.current.setData(x, y);\n plot.render();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [x, y]);\n return null;\n}\n\nexport type ScatterProps = ScatterOptions;\n\nexport function Scatter({ x, y, color, size, name, yAxis, colorBy }: ScatterProps) {\n const plot = useContext(PlotContext);\n const layer = useRef<ScatterLayer | null>(null);\n useEffect(() => {\n if (!plot) return;\n const l = plot.addScatter({ x, y, color, size, name, yAxis, colorBy });\n layer.current = l;\n return () => {\n plot.removeLayer(l);\n layer.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, color, size, name, yAxis, colorBy]);\n useEffect(() => {\n if (layer.current && plot) {\n layer.current.setData(x, y);\n plot.render();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [x, y]);\n return null;\n}\n\nexport type BarProps = BarOptions;\n\nexport function Bar({ x, y, base, width, offset, color, name, yAxis }: BarProps) {\n const plot = useContext(PlotContext);\n const layer = useRef<BarLayer | null>(null);\n useEffect(() => {\n if (!plot) return;\n const l = plot.addBar({ x, y, base, width, offset, color, name, yAxis });\n layer.current = l;\n return () => {\n plot.removeLayer(l);\n layer.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, width, offset, color, name, yAxis]);\n useEffect(() => {\n if (layer.current && plot) {\n layer.current.setData(x, y, base);\n plot.render();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [x, y, base]);\n return null;\n}\n\nexport type AreaProps = AreaOptions;\n\nexport function Area({ x, y, base, color, name, yAxis }: AreaProps) {\n const plot = useContext(PlotContext);\n const layer = useRef<AreaLayer | null>(null);\n useEffect(() => {\n if (!plot) return;\n const l = plot.addArea({ x, y, base, color, name, yAxis });\n layer.current = l;\n return () => {\n plot.removeLayer(l);\n layer.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, color, name, yAxis]);\n useEffect(() => {\n if (layer.current && plot) {\n layer.current.setData(x, y, base);\n plot.render();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [x, y, base]);\n return null;\n}\n\nexport interface YAxisProps extends YAxisOptions {\n id: string;\n}\n\n/** Register an additional Y axis. (Core has no live removal, so it persists.) */\nexport function YAxis({ id, ...opts }: YAxisProps) {\n const plot = useContext(PlotContext);\n useEffect(() => {\n if (!plot) return;\n plot.addYAxis(id, opts);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [plot, id]);\n return null;\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@photonviz/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "React bindings for Photon — WebGL2 scientific plotting",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
],
|
|
18
18
|
"sideEffects": false,
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@photonviz/core": "0.1.
|
|
20
|
+
"@photonviz/core": "0.1.1"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": ">=18"
|