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

[responsive] add <ParentSize /> component. fixes #192 #198

Merged
merged 4 commits into from
Nov 13, 2017
Merged

[responsive] add <ParentSize /> component. fixes #192 #198

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
4090501
[responsive] add <ParentSize /> + resize-observer-polyfill
hshoff Nov 8, 2017
1c5a13b
[demo] use <ParentSize /> for responsive tiles
hshoff Nov 9, 2017
67e2eb3
[responsive] add ParentSize component
hshoff Nov 13, 2017
c0b9df4
[demo] responsive treemap => lines
hshoff Nov 13, 2017
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
423 changes: 274 additions & 149 deletions packages/vx-demo/components/gallery.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/vx-demo/components/show.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ export default withScreenSize(
margin = { top: 0, left: 0, right: 0, bottom: 80 },
}) => {
const padding = 40;
const height = screenHeight * 0.6;
let width = screenWidth - padding;
if (width > 800) width = 800;
const height = width * 0.6;

return (
<Page title={title}>
Expand Down Expand Up @@ -64,7 +64,7 @@ export default withScreenSize(
.container h1 {
margin-top: 15px;
line-height: 0.9em;
letter-spacing: -.03em;
letter-spacing: -0.03em;
}
.container h2 {
margin-top: 15px;
Expand Down
1 change: 0 additions & 1 deletion packages/vx-demo/components/tiles/axis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,6 @@ export default ({ width, height, margin }) => {
label="time"
>
{props => {
console.log('Custom AxisBottom props', props);
const tickLabelSize = 10;
const tickRotate = 45;
const tickColor = '#8e205f';
Expand Down
13 changes: 10 additions & 3 deletions packages/vx-demo/components/tiles/gradients.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@ export default ({
bottom: 80,
},
}) => {
const w = width / 4;
const h = (height - margin.bottom) / 2;
let w = width / 4;
let h = (height - margin.bottom) / 2;
w = w < 0 ? 0 : w;
h = h < 0 ? 0 : h;
return (
<svg width={width} height={height}>
<GradientDarkgreenGreen id="DarkgreenGreen" />
Expand All @@ -35,7 +37,12 @@ export default ({
<GradientPinkRed id="PinkRed" vertical={false} />
<GradientPurpleOrange id="PurpleOrange" vertical={false} />
<GradientPurpleRed id="PurpleRed" vertical={false} />
<RadialGradient from="#55bdd5" to="#4f3681" id="Radial" r={'80%'} />
<RadialGradient
from="#55bdd5"
to="#4f3681"
id="Radial"
r={'80%'}
/>
<GradientSteelPurple id="SteelPurple" vertical={false} />
<GradientTealBlue id="TealBlue" vertical={false} />
<Bar
Expand Down
44 changes: 21 additions & 23 deletions packages/vx-demo/components/tiles/lines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,19 @@ import { extent, max } from 'd3-array';
function genLines(num) {
return new Array(num).fill(1).map(() => {
return genDateValue(25);
})
});
}

const series = genLines(12);
const data = series.reduce((rec, d) => {
return rec.concat(d)
return rec.concat(d);
}, []);

// accessors
const x = d => d.date;
const y = d => d.value;

export default ({
width,
height,
}) => {
export default ({ width, height }) => {
// bounds
const xMax = width;
const yMax = height / 8;
Expand All @@ -49,22 +46,23 @@ export default ({
fill="#242424"
rx={14}
/>
{xMax > 8 && series.map((d, i) => {
return (
<Group key={`lines-${i}`} top={i * yMax/2}>
<LinePath
data={d}
xScale={xScale}
yScale={yScale}
x={x}
y={y}
stroke={"#ffffff"}
strokeWidth={1}
curve={i % 2 == 0 ? curveMonotoneX : undefined}
/>
</Group>
);
})}
{xMax > 8 &&
series.map((d, i) => {
return (
<Group key={`lines-${i}`} top={i * yMax / 2}>
<LinePath
data={d}
xScale={xScale}
yScale={yScale}
x={x}
y={y}
stroke={'#ffffff'}
strokeWidth={1}
curve={i % 2 == 0 ? curveMonotoneX : undefined}
/>
</Group>
);
})}
</svg>
);
}
};
100 changes: 100 additions & 0 deletions packages/vx-demo/components/tiles/responsive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React from 'react';
import { ParentSize } from '@vx/responsive';
import Lines from './lines';

function Nav() {
return (
<ul>
<li>🤖</li>
<li>Home</li>
<li>Profile</li>
<li>Favorites</li>
<li>Settings</li>
</ul>
);
}

export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { showNav: true };
this.toggleNav = this.toggleNav.bind(this);
}
toggleNav(event) {
event.preventDefault();
event.stopPropagation();
this.setState(prevState => {
return {
showNav: !prevState.showNav,
};
});
}
render() {
const { width, height } = this.props;
if (width < 20) return null;
if (height < 20) return null;
return (
<div className="app" style={{ width, height }}>
<div
className="app-nav"
style={{
display: this.state.showNav ? 'flex' : 'none',
}}
>
<Nav />
</div>
<div className="app-content">
<div>
<button onClick={this.toggleNav}>toggle nav</button>
</div>
<div className="app-graph">
<ParentSize className="graph-container">
{({ width: w, height: h }) => {
return (
<Lines
width={w}
height={h}
margin={{
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}}
</ParentSize>
</div>
</div>

<style jsx>{`
.app {
display: flex;
}

.app-nav {
border: 1px solid lightgray;
border-right: none;
display: flex;
flex: 0.5;
padding: 1rem;
}

.app-content {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
padding: 1rem;
border: 1px solid lightgray;
}

.app-graph {
display: flex;
flex: 1;
}
`}</style>
</div>
);
}
}
1 change: 0 additions & 1 deletion packages/vx-demo/pages/axis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,6 @@ export default ({ width, height, margin }) => {
label="time"
>
{props => {
console.log('Custom AxisBottom props', props);
const tickLabelSize = 10;
const tickRotate = 45;
const tickColor = '#8e205f';
Expand Down
108 changes: 108 additions & 0 deletions packages/vx-demo/pages/responsive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import React from 'react';
import Show from '../components/show';
import Responsive from '../components/tiles/responsive';

export default () => {
return (
<Show component={Responsive} title="Responsive">
{`import React from 'react';
import { ParentSize } from '@vx/responsive';
import Lines from './lines';

function Nav() {
return (
<ul>
<li>🤖</li>
<li>Home</li>
<li>Profile</li>
<li>Favorites</li>
<li>Settings</li>
</ul>
);
}

export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { showNav: true };
this.toggleNav = this.toggleNav.bind(this);
}
toggleNav() {
this.setState(prevState => {
return {
showNav: !prevState.showNav,
};
});
}
render() {
const { width, height } = this.props;
return (
<div className="app" style={{ width, height }}>
<div
className="app-nav"
style={{
display: this.state.showNav ? 'flex' : 'none',
}}
>
<Nav />
</div>
<div className="app-content">
<div>
<button onClick={this.toggleNav}>toggle nav</button>
</div>
<div className="app-graph">
<ParentSize className="graph-container">
{({ width: w, height: h }) => {
return (
<Lines
width={w}
height={h}
margin={{
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}}
</ParentSize>
</div>
</div>

<style jsx>{\`
.app {
display: flex;
}

.app-nav {
border: 1px solid lightgray;
border-right: none;
display: flex;
flex: 0.5;
padding: 1rem;
}

.app-content {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
padding: 1rem;
border: 1px solid lightgray;
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
}

.app-graph {
display: flex;
flex: 1;
}
\`}</style>
</div>
);
}
}`}
</Show>
);
};
20 changes: 5 additions & 15 deletions packages/vx-responsive/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
"version": "0.0.143",
"description": "vx responsive svg",
"main": "build/index.js",
"files": [
"build"
],
"files": ["build"],
"scripts": {
"build": "make build SRC=./src",
"prepublish": "make build SRC=./src",
Expand All @@ -15,13 +13,7 @@
"type": "git",
"url": "git+https://github.com/hshoff/vx.git"
},
"keywords": [
"vx",
"react",
"d3",
"visualizations",
"charts"
],
"keywords": ["vx", "react", "d3", "visualizations", "charts"],
"author": "@hshoff",
"license": "MIT",
"bugs": {
Expand All @@ -42,7 +34,8 @@
"regenerator-runtime": "^0.10.5"
},
"dependencies": {
"lodash": "^4.0.8"
"lodash": "^4.0.8",
"resize-observer-polyfill": "1.4.2"
},
"peerDependencies": {
"react": "^15.0.0-0 || ^16.0.0-0"
Expand All @@ -51,9 +44,6 @@
"access": "public"
},
"jest": {
"setupFiles": [
"raf/polyfill",
"<rootDir>/test/enzyme-setup.js"
]
"setupFiles": ["raf/polyfill", "<rootDir>/test/enzyme-setup.js"]
}
}
Loading