Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix canvas #150

Merged
merged 4 commits into from
Jul 13, 2023
Merged

Fix canvas #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1daaefe
Fix clipPath's prevent the use of canvas plots
IPWright83 Jul 6, 2023
8db6324
changeset
IPWright83 Jul 6, 2023
d11d198
Fixed canvas position (doesn't affect storybook)
IPWright83 Jul 6, 2023
7031fa6
Fixed tests
IPWright83 Jul 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tame-gifts-laugh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@chart-it/react": minor
---

Fixes an issue when using the RectangleClipPath that prevents canvas plots working
18 changes: 3 additions & 15 deletions packages/react/src/lib/components/ClipPath/RectangleClipPath.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,25 @@ import React from "react";
import { useSelector } from "react-redux";

import { chartSelectors, IState } from "../../store";
import { extendChildrenProps } from "../../utils";

export interface IRectangleClipPathProps {
/**
* The child components for the chart
*/
children?: JSX.Element | JSX.Element[];
}

/**
* This component renders a Rectangular ClipPath that can be used to prevent overspill on the chart
* @return The ClipPath component
*/
export function RectangleClipPath({ children }: IRectangleClipPathProps) {
const chartID = useSelector((s: IState) => chartSelectors.id(s));

export function RectangleClipPath() {
const plotWidth = useSelector((s: IState) => chartSelectors.dimensions.plot.width(s));
const plotHeight = useSelector((s: IState) => chartSelectors.dimensions.plot.height(s));
const left = useSelector((s: IState) => chartSelectors.dimensions.plot.left(s));
const top = useSelector((s: IState) => chartSelectors.dimensions.plot.top(s));

const childrenWithProps = extendChildrenProps(children, { clipPath: `clip-path-${chartID}` });
const plotClipPath = useSelector((s: IState) => chartSelectors.plotClipPath(s));

return (
<>
<defs>
<clipPath id={`clip-path-${chartID}`}>
<clipPath id={plotClipPath}>
<rect width={plotWidth} height={plotHeight} x={left} y={top} />
</clipPath>
</defs>
{childrenWithProps}
</>
);
}
29 changes: 24 additions & 5 deletions packages/react/src/lib/components/ClipPath/RectangleClipPath.unit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,39 @@
import { Provider, useSelector } from "react-redux";
import React from "react";

import { renderChart, wait } from "../../testUtils";
import { chartSelectors, IState } from "../../store";
import { createMockStore, renderChart, wait } from "../../testUtils";
import { themes } from "../../themes";

import { RectangleClipPath } from "./RectangleClipPath";

describe("RectangleClipPath", () => {
const Circle = ({ clipPath }: { clipPath?: string }) => {
return <circle clipPath={`url(#${clipPath})`} cx={0} cy={0} r={100} fill="red" />;
const store = createMockStore({
chart: {
dimensions: {
width: 800,
height: 400,
},
theme: themes.light,
},
event: {
mouse: { x: 150, y: 200 },
},
});

const Circle = () => {
const plotClipPath = useSelector((s: IState) => chartSelectors.plotClipPath(s));

return <circle clipPath={`url(#${plotClipPath})`} cx={0} cy={0} r={100} fill="red" />;
};

it("renders correctly", async () => {
const { asFragment } = await renderChart({
children: (
<RectangleClipPath>
<Provider store={store}>
<RectangleClipPath />
<Circle />
</RectangleClipPath>
</Provider>
),
});

Expand Down
8 changes: 4 additions & 4 deletions packages/react/src/lib/components/ClipPath/__snapshots__/RectangleClipPath.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ exports[`RectangleClipPath renders correctly 1`] = `
<svg>
<defs>
<clippath
id="clip-path-"
id="clip-path-test"
>
<rect
height="200"
width="200"
height="400"
width="800"
x="0"
y="0"
/>
</clippath>
</defs>
<circle
clip-path="url(#clip-path-)"
clip-path="url(#clip-path-test)"
cx="0"
cy="0"
fill="red"
Expand Down
3 changes: 3 additions & 0 deletions packages/react/src/lib/components/Plots/Area/Area/__snapshots__/Area.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Area using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot area"
clip-path="url(#clip-path-test)"
>
<path
class="area"
Expand All @@ -25,6 +26,7 @@ exports[`Area using SVG should skip rendering if there is no x scale avaliable 1
<svg>
<g
class="g-plot area"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand All @@ -35,6 +37,7 @@ exports[`Area using SVG should skip rendering if there is no y scale avaliable 1
<svg>
<g
class="g-plot area"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand Down
3 changes: 3 additions & 0 deletions ...s/react/src/lib/components/Plots/Area/StackedArea/__snapshots__/StackedArea.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`StackedArea using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot stacked-area"
clip-path="url(#clip-path-test)"
>
<path
class="area"
Expand All @@ -26,6 +27,7 @@ exports[`StackedArea using SVG should skip rendering if there is no x scale aval
<svg>
<g
class="g-plot stacked-area"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand All @@ -36,6 +38,7 @@ exports[`StackedArea using SVG should skip rendering if there is no y scale aval
<svg>
<g
class="g-plot stacked-area"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand Down
3 changes: 3 additions & 0 deletions packages/react/src/lib/components/Plots/Area/__snapshots__/Areas.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Areas Multiple Series using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot area"
clip-path="url(#clip-path-test)"
>
<path
class="area"
Expand All @@ -18,6 +19,7 @@ exports[`Areas Multiple Series using SVG should render correctly 1`] = `
</g>
<g
class="g-plot area"
clip-path="url(#clip-path-test)"
>
<path
class="area"
Expand All @@ -38,6 +40,7 @@ exports[`Areas Stacked using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot stacked-area"
clip-path="url(#clip-path-test)"
>
<path
class="area"
Expand Down
3 changes: 3 additions & 0 deletions packages/react/src/lib/components/Plots/Bar/Bar/__snapshots__/Bar.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Bar using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot bar"
clip-path="url(#clip-path-test)"
>
<rect
class="bar"
Expand Down Expand Up @@ -32,6 +33,7 @@ exports[`Bar using SVG should skip rendering if there is no x scale avaliable 1`
<svg>
<g
class="g-plot bar"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand All @@ -42,6 +44,7 @@ exports[`Bar using SVG should skip rendering if there is no y scale avaliable 1`
<svg>
<g
class="g-plot bar"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand Down
3 changes: 3 additions & 0 deletions ...ages/react/src/lib/components/Plots/Bar/GroupedBar/__snapshots__/GroupedBar.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`GroupedColumn using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot grouped-bar"
clip-path="url(#clip-path-test)"
>
<g>
<rect
Expand Down Expand Up @@ -52,6 +53,7 @@ exports[`GroupedColumn using SVG should skip rendering if there is no x scale av
<svg>
<g
class="g-plot grouped-bar"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand All @@ -62,6 +64,7 @@ exports[`GroupedColumn using SVG should skip rendering if there is no y scale av
<svg>
<g
class="g-plot grouped-bar"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand Down
3 changes: 3 additions & 0 deletions ...ages/react/src/lib/components/Plots/Bar/StackedBar/__snapshots__/StackedBar.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`StackedBar using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot stacked-bar"
clip-path="url(#clip-path-test)"
>
<g>
<rect
Expand Down Expand Up @@ -52,6 +53,7 @@ exports[`StackedBar using SVG should skip rendering if there is no x scale avali
<svg>
<g
class="g-plot stacked-bar"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand All @@ -62,6 +64,7 @@ exports[`StackedBar using SVG should skip rendering if there is no y scale avali
<svg>
<g
class="g-plot stacked-bar"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/lib/components/Plots/Bar/__snapshots__/Bars.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Bars Grouped using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot grouped-bar"
clip-path="url(#clip-path-test)"
>
<g>
<rect
Expand Down Expand Up @@ -52,6 +53,7 @@ exports[`Bars Stacked using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot stacked-bar"
clip-path="url(#clip-path-test)"
>
<g>
<rect
Expand Down
3 changes: 3 additions & 0 deletions packages/react/src/lib/components/Plots/Column/Column/__snapshots__/Column.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Column using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot column"
clip-path="url(#clip-path-test)"
>
<rect
class="column"
Expand Down Expand Up @@ -32,6 +33,7 @@ exports[`Column using SVG should skip rendering if there is no x scale avaliable
<svg>
<g
class="g-plot column"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand All @@ -42,6 +44,7 @@ exports[`Column using SVG should skip rendering if there is no y scale avaliable
<svg>
<g
class="g-plot column"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand Down
3 changes: 3 additions & 0 deletions ...t/src/lib/components/Plots/Column/GroupedColumn/__snapshots__/GroupedColumn.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`GroupedColumn using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot grouped-column"
clip-path="url(#clip-path-test)"
>
<g>
<rect
Expand Down Expand Up @@ -52,6 +53,7 @@ exports[`GroupedColumn using SVG should skip rendering if there is no x scale av
<svg>
<g
class="g-plot grouped-column"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand All @@ -62,6 +64,7 @@ exports[`GroupedColumn using SVG should skip rendering if there is no y scale av
<svg>
<g
class="g-plot grouped-column"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand Down
3 changes: 3 additions & 0 deletions ...t/src/lib/components/Plots/Column/StackedColumn/__snapshots__/StackedColumn.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`StackedColumn using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot stacked-column"
clip-path="url(#clip-path-test)"
>
<g>
<rect
Expand Down Expand Up @@ -52,6 +53,7 @@ exports[`StackedColumn using SVG should skip rendering if there is no x scale av
<svg>
<g
class="g-plot stacked-column"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand All @@ -62,6 +64,7 @@ exports[`StackedColumn using SVG should skip rendering if there is no y scale av
<svg>
<g
class="g-plot stacked-column"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/lib/components/Plots/Column/__snapshots__/Columns.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Columns Grouped using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot grouped-column"
clip-path="url(#clip-path-test)"
>
<g>
<rect
Expand Down Expand Up @@ -52,6 +53,7 @@ exports[`Columns Stacked using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot stacked-column"
clip-path="url(#clip-path-test)"
>
<g>
<rect
Expand Down
3 changes: 3 additions & 0 deletions packages/react/src/lib/components/Plots/Line/Line/__snapshots__/Line.unit.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ exports[`Line using SVG should render correctly 1`] = `
<svg>
<g
class="g-plot line"
clip-path="url(#clip-path-test)"
>
<path
class="line"
Expand All @@ -26,6 +27,7 @@ exports[`Line using SVG should skip rendering if there is no x scale avaliable 1
<svg>
<g
class="g-plot line"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand All @@ -36,6 +38,7 @@ exports[`Line using SVG should skip rendering if there is no y scale avaliable 1
<svg>
<g
class="g-plot line"
clip-path="url(#clip-path-test)"
/>
</svg>
</DocumentFragment>
Expand Down
Loading
Loading