Created ContentClipPath #1351
Created ContentClipPath #1351
Conversation
The ContentClipPath creates a new clipPath that is the size of the
inner portion of the graph.
Other series can use this with `style={{clipPath: 'url(#content-area)'}}
|
This is neat! Will you add some docs and some tests? |
|
Sure. Although the tests will be pretty basic since the actual functionality depends on the |
| @@ -0,0 +1,20 @@ | |||
| import React from 'react'; | |||
| import {shallow} from 'enzyme'; | |||
| import ContentClipPath from '../../src/plot/content-clip-path'; | |||
There was a problem hiding this comment.
the component tests in the library usually involves creating a showcase example (which then also promotes the feature) and then basically verifying that it loads correctly. I'm willing to bend away from this pattern (i'm not sure what our story with story book is anymore), but i think it's a really two birds one stone to replace instances like your shallow rendering of the wrapper with a concrete example?
There was a problem hiding this comment.
There is a separate storybook that I created that allows them toggle the clipping on and off.
I'm actually trying to break the dependency between the tests and the storybook as it requires some custom resolvers to ensure that the tests and and storybook point to the same version of react-vis.
Since its only possible to test this visually, I didn't see the need to create a XYPlot to place this in. Personally, I prefer shallow tests so that I can just test out the component that I'm using and not any of its dependencies, but I realize that has become somewhat of an anti-pattern.
There was a problem hiding this comment.
Does the storybook actually get published anywhere, or is it just for developers to play with the charts locally?
There was a problem hiding this comment.
I think it was meant to be published onto the website, but that that integration never got finished? Typically when i'm developing on react-vis I tend use the showcase. In fact I can't say if i've ever even opened the story book?
There was a problem hiding this comment.
If you are trying to keep storybook and tests seperate, this suggests that you should move that demo into the showcase?
There was a problem hiding this comment.
I tend to use the storybook as I'm developing as I find that there is too much going on (number of graphs) in the showcase.
We eventually want to put more options and profiling tools inside of the storybook.
I'm actually working on another change to make development with the storybook even easier
There was a problem hiding this comment.
If you are trying to keep storybook and tests seperate, this suggests that you should move that demo into the showcase?
I can put it in the showcase as well
| @@ -0,0 +1,24 @@ | |||
| ## Clip | |||
|
|
|||
| Depending on the data and domain, sometimes the series in the plot will extend into the axis. This can either be solved with a [Border](border.md), or the elements can be clipped. | |||
There was a problem hiding this comment.
Maybe also point to some mdn docs about clipping for people aren't familiar?
| const [clip, setClip] = useState(true); | ||
|
|
||
| return ( | ||
| <> |
There was a problem hiding this comment.
i hadn't seen this syntax before, neat
There was a problem hiding this comment.
Which part? The array destructuring or the shorthand for React.Fragment?
|
Looks good! merge away |
|
Yea! The <> is very slick
On Sun, Jun 7, 2020 at 9:41 AM Chris Thomas ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In packages/showcase/misc/clip-example.js
<#1351 (comment)>:
> +
+import {
+ XYPlot,
+ XAxis,
+ YAxis,
+ VerticalGridLines,
+ HorizontalGridLines,
+ AreaSeries,
+ ContentClipPath
+} from 'react-vis';
+
+export default function ClipExample() {
+ const [clip, setClip] = useState(true);
+
+ return (
+ <>
Which part? The array restructuring or the shorthand for React.Fragment?
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#1351 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABUJNKEFTHH4IV3EJAGVKTTRVORIRANCNFSM4NWGSPVA>
.
--
Andrew M. McNutt
|
The ContentClipPath creates a new clipPath that is the size of the
inner portion of the graph.
Other series can use this with `style={{clipPath: 'url(#content-area)'}}
Addresses #1350