From e6eb3000f6bc457ad5f967de13765374f71930e0 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 16 Dec 2020 13:04:43 -0800 Subject: [PATCH 1/3] docs(xychart): add advanced usage sandbox links --- packages/visx-xychart/README.md | 94 +++++++++++++++++++++------------ 1 file changed, 60 insertions(+), 34 deletions(-) diff --git a/packages/visx-xychart/README.md b/packages/visx-xychart/README.md index ba9fa8024..642be2cba 100644 --- a/packages/visx-xychart/README.md +++ b/packages/visx-xychart/README.md @@ -89,6 +89,8 @@ npm install --save @visx/xychart react-spring Note: `react-spring` is a required `peerDependency` for importing `Animated*` components. + +
Series types @@ -210,42 +212,60 @@ Composable `@visx/annotations` annotations are integrated into `@visx/xychart` a dimension context. These components allow for annotation of individual points using `AnnotationCircleSubject`, or x- or y-thresholds using `AnnotationLineSubject`. +[CodeSandbox](https://codesandbox.io/s/immutable-currying-8npmf?file=/Example.tsx) + ```tsx +import React from 'react'; import { - XYChart, - AnimatedAnnotation, + Annotation, AnnotationLabel, AnnotationConnector, AnnotationCircleSubject, + Grid, + LineSeries, + XYChart, } from '@visx/xychart'; const data = [ { x: '2020-01-01', y: 50 }, { x: '2020-01-02', y: 10 }, { x: '2020-01-03', y: 20 }, + { x: '2020-01-04', y: 5 }, ]; -() => ( - - - ( + + + d.x} yAccessor={d => d.y} /> + /** handle edit */} > {/** Text label */} - + {/** Draw circle around point */} {/** Connect label to CircleSubject */} -) - +); ```
@@ -265,9 +285,9 @@ By default `XYChart` renders all context providers if a given context is not ava share context across multiple `XYChart`s to implement functionality such as linked tooltips, shared themes, or shared data. -- 🔜 Custom chart background using theme and chart dimensions -- 🔜 Linked tooltips -- 🔜 Programmatically control tooltips +- [Custom theme + chart background using theme and chart dimension context](https://codesandbox.io/s/dreamy-mccarthy-sbdvz?file=/Example.tsx) +- [Linked tooltips](https://codesandbox.io/s/confident-stallman-7s0jz?file=/Example.tsx) +- [Programmatic and keyboard-triggered tooltips](https://codesandbox.io/s/programmatic-tooltips-hh7ly?file=/Example.tsx) @@ -295,29 +315,35 @@ This context provides an event publishing / subscription object which can be use `useEventEmitter` hook. `Series` and `XYChart` events, including tooltip updates, are emitted and handled with through this context. +[CodeSandbox](https://codesandbox.io/s/nifty-neumann-w8jhl?file=/Example.tsx) + ```tsx -import { useEventEmitter, EventEmitterContext } from '@visx/xychart'; +import React, { useState } from 'react'; +import { useEventEmitter, EventEmitterProvider } from '@visx/xychart'; const eventSourceId = 'optional-source-id-filter'; -() => ( - - {/** emit events */} - {() => { - const emit = useEventEmitter(); - return ( - - ); - }} - {/** subscribe to events */} - {() => { - const [clickCount, setClickCount] = useState(0); - useEventEmitter('pointerUp', () => setClickCount(clickCount + 1), [eventSourceId]); - - return
Pressed {clickCount} times
; - }} - -); +const EmitEvent = () => { + const emit = useEventEmitter(); + return ; +}; + +const SubscribeToEvent = () => { + const [clickCount, setClickCount] = useState(0); + const allowedEventSources = [eventSourceId]; + useEventEmitter('pointerup', () => setClickCount(clickCount + 1), allowedEventSources); + + return
Emitted {clickCount} events
; +}; + +export default function Example() { + return ( + + + + + ); +} ``` From cad2db3f6034f8b2f4b059fc2738a9a953befc14 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 16 Dec 2020 13:05:56 -0800 Subject: [PATCH 2/3] new(xychart): make EventHandlerParams event optional --- packages/visx-xychart/src/types/series.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-xychart/src/types/series.ts b/packages/visx-xychart/src/types/series.ts index 6872ca766..69f17b1d0 100644 --- a/packages/visx-xychart/src/types/series.ts +++ b/packages/visx-xychart/src/types/series.ts @@ -18,7 +18,7 @@ export type EventHandlerParams = { /** Coordinates of the event in svg space. */ svgPoint?: { x: number; y: number }; /** The PointerEvent or FocusEvent. */ - event: PointerEvent | FocusEvent; + event?: PointerEvent | FocusEvent; }; export type SeriesProps< From 64f3a047cab140008972fe368252a82c299835eb Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 16 Dec 2020 13:25:54 -0800 Subject: [PATCH 3/3] docs(xychart): update to named sandbox links --- packages/visx-xychart/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/visx-xychart/README.md b/packages/visx-xychart/README.md index 642be2cba..244c7077f 100644 --- a/packages/visx-xychart/README.md +++ b/packages/visx-xychart/README.md @@ -212,7 +212,7 @@ Composable `@visx/annotations` annotations are integrated into `@visx/xychart` a dimension context. These components allow for annotation of individual points using `AnnotationCircleSubject`, or x- or y-thresholds using `AnnotationLineSubject`. -[CodeSandbox](https://codesandbox.io/s/immutable-currying-8npmf?file=/Example.tsx) +[CodeSandbox](https://codesandbox.io/s/annotations-8npmf?file=/Example.tsx) ```tsx import React from 'react'; @@ -285,9 +285,9 @@ By default `XYChart` renders all context providers if a given context is not ava share context across multiple `XYChart`s to implement functionality such as linked tooltips, shared themes, or shared data. -- [Custom theme + chart background using theme and chart dimension context](https://codesandbox.io/s/dreamy-mccarthy-sbdvz?file=/Example.tsx) -- [Linked tooltips](https://codesandbox.io/s/confident-stallman-7s0jz?file=/Example.tsx) -- [Programmatic and keyboard-triggered tooltips](https://codesandbox.io/s/programmatic-tooltips-hh7ly?file=/Example.tsx) +- [`ThemeProvider` + custom theme chart background example](https://codesandbox.io/s/themeprovider-sbdvz?file=/Example.tsx) +- [`DataProvider/EventEmitterProvider` example of linked tooltips / small multiples](https://codesandbox.io/s/linked-tooltips-7s0jz?file=/Example.tsx) +- [`TooltipProvider` example of programmatic + keyboard tooltip triggering](https://codesandbox.io/s/programmatic-tooltips-hh7ly?file=/Example.tsx) @@ -315,7 +315,7 @@ This context provides an event publishing / subscription object which can be use `useEventEmitter` hook. `Series` and `XYChart` events, including tooltip updates, are emitted and handled with through this context. -[CodeSandbox](https://codesandbox.io/s/nifty-neumann-w8jhl?file=/Example.tsx) +[CodeSandbox](https://codesandbox.io/s/eventemitterprovider-w8jhl?file=/Example.tsx) ```tsx import React, { useState } from 'react';