Skip to content
This repository has been archived by the owner on Feb 19, 2022. It is now read-only.

Feature/victory minimap #427

Merged
merged 29 commits into from
Jan 31, 2017
Merged

Feature/victory minimap #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
70bfbd7
safety commit
boygirl Jan 17, 2017
8cf82f0
working victory zoom container
boygirl Jan 20, 2017
7acabe7
lint
boygirl Jan 20, 2017
98a5aac
export victory-zoom-container
boygirl Jan 20, 2017
81deb0e
reorganize
boygirl Jan 20, 2017
3cea44d
clean up demos
boygirl Jan 20, 2017
33dfc5f
safety commit
boygirl Jan 22, 2017
488bd3c
use x1 x2 y1 y2
boygirl Jan 22, 2017
74db1ec
working x handles and panning
boygirl Jan 23, 2017
4fdfebb
constrain panning behavior to domain area
boygirl Jan 23, 2017
4a3a735
constrain selection area
boygirl Jan 23, 2017
7eeda93
fix panning edge case
boygirl Jan 23, 2017
323f5fc
fix mouse up
boygirl Jan 23, 2017
8f3d275
expose domain for containers
boygirl Jan 23, 2017
7f930e5
validate flyout namespace
boygirl Jan 23, 2017
5f49bce
selection and handle components
boygirl Jan 23, 2017
b9609ae
finish range container
boygirl Jan 23, 2017
d9e5a75
clean up and naming
boygirl Jan 24, 2017
65ca67d
add selectionComponent prop, lint
boygirl Jan 24, 2017
82b4bbc
revert victory group change
boygirl Jan 24, 2017
0012eda
fix allowZoom
boygirl Jan 24, 2017
eb37d1d
simplify container rendering
boygirl Jan 24, 2017
a49aa4a
support zoom container on components without wrappers
boygirl Jan 25, 2017
d93a09e
pass standalone to containers
boygirl Jan 25, 2017
d567cc8
lint
boygirl Jan 26, 2017
6537d34
deprecate VictoryZoom
boygirl Jan 26, 2017
6fcf7d6
update victory-core
boygirl Jan 30, 2017
d9928e7
simplify container rendering
boygirl Jan 30, 2017
a61e4f8
fix brush and zoom
boygirl Jan 31, 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
12 changes: 9 additions & 3 deletions demo/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import EventsDemo from "./components/events-demo";
import GroupDemo from "./components/group-demo";
import VoronoiDemo from "./components/victory-voronoi-demo";
import TooltipDemo from "./components/victory-tooltip-demo";
import BrushDemo from "./components/victory-brush-demo";
import ZoomContainerDemo from "./components/victory-zoom-container-demo";
import ZoomDemo from "./components/victory-zoom-demo";
import BrushContainerDemo from "./components/victory-brush-container-demo";
import AnimationDemo from "./components/animation-demo";
import SelectionDemo from "./components/selection-demo";
import { Router, Route, Link, hashHistory } from "react-router";
Expand Down Expand Up @@ -42,7 +44,9 @@ const App = React.createClass({
<li><Link to="/group">Group Demo</Link></li>
<li><Link to="/voronoi">Victory Voronoi Demo</Link></li>
<li><Link to="/tooltip">Victory Tooltip Demo</Link></li>
<li><Link to="/brush">Victory Brush Demo</Link></li>
<li><Link to="/zoom-container">Victory Zoom Container Demo</Link></li>
<li><Link to="/zoom">Victory Zoom Demo</Link></li>
<li><Link to="/brush-container">Victory Brush Container Demo</Link></li>
<li><Link to="/animation">Animation Demo</Link></li>
<li><Link to="/selection">Selection Demo</Link></li>
</ul>
Expand All @@ -67,7 +71,9 @@ ReactDOM.render((
<Route path="group" component={GroupDemo}/>
<Route path="voronoi" component={VoronoiDemo}/>
<Route path="tooltip" component={TooltipDemo}/>
<Route path="brush" component={BrushDemo}/>
<Route path="zoom-container" component={ZoomContainerDemo}/>
<Route path="zoom" component={ZoomDemo}/>
<Route path="brush-container" component={BrushContainerDemo}/>
<Route path="animation" component={AnimationDemo}/>
<Route path="selection" component={SelectionDemo}/>
</Route>
Expand Down
25 changes: 14 additions & 11 deletions demo/components/victory-area-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,17 +112,20 @@ export default class App extends React.Component {
/>
</VictoryChart>

<VictoryArea
style={style} animate={{duration: 1000}}
data={this.state.areaTransitionData}
theme={VictoryTheme.material}
containerComponent={
<VictoryContainer
title="Area Chart"
desc="This is an animated area chart that displays data."
/>
}
/>
<svg viewBox="0 0 350 350" style={style.parent}>
<VictoryArea
standalone={false}
animate={{duration: 1000}}
data={this.state.areaTransitionData}
theme={VictoryTheme.material}
containerComponent={
<VictoryContainer
title="Area Chart"
desc="This is an animated area chart that displays data."
/>
}
/>
</svg>

<VictoryStack
style={style}
Expand Down
304 changes: 304 additions & 0 deletions demo/components/victory-brush-container-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,304 @@
import React from "react";
import {
VictoryChart, VictoryGroup, VictoryStack, VictoryScatter, VictoryBar, VictoryLine,
VictoryBrushContainer, VictoryZoomContainer, VictoryAxis
} from "../../src/index";

class App extends React.Component {

constructor() {
super();
this.state = {
points: []
};
}

handleZoom(domain) {
this.setState({selectedDomain: domain});
}

handleBrush(domain) {
this.setState({zoomDomain: domain});
}

render() {
const containerStyle = {
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
justifyContent: "center"
};

const chartStyle = {parent: {border: "1px solid #ccc", margin: "2%", maxWidth: "40%"}};

return (
<div className="demo">
<div style={containerStyle}>
<VictoryChart width={800} height={500} scale={{x: "time"}}
containerComponent={
<VictoryZoomContainer responsive={false}
zoomDomain={this.state.zoomDomain}
onDomainChange={this.handleZoom.bind(this)}
/>
}
>
<VictoryLine
style={{
data: {stroke: "tomato"}
}}
data={[
{x: new Date(1982, 1, 1), y: 125},
{x: new Date(1987, 1, 1), y: 257},
{x: new Date(1993, 1, 1), y: 345},
{x: new Date(1997, 1, 1), y: 515},
{x: new Date(2001, 1, 1), y: 132},
{x: new Date(2005, 1, 1), y: 305},
{x: new Date(2011, 1, 1), y: 270},
{x: new Date(2015, 1, 1), y: 470}
]}
/>

</VictoryChart>
<VictoryChart
padding={{top: 0, left: 50, right: 50, bottom: 30}}
width={800} height={100} scale={{x: "time"}}
containerComponent={
<VictoryBrushContainer responsive={false}
selectedDomain={this.state.selectedDomain}
onDomainChange={this.handleBrush.bind(this)}
/>
}
>
<VictoryAxis
tickValues={[
new Date(1985, 1, 1),
new Date(1990, 1, 1),
new Date(1995, 1, 1),
new Date(2000, 1, 1),
new Date(2005, 1, 1),
new Date(2010, 1, 1)
]}
tickFormat={(x) => new Date(x).getFullYear()}
/>
<VictoryLine
style={{
data: {stroke: "tomato"}
}}
data={[
{x: new Date(1982, 1, 1), y: 125},
{x: new Date(1987, 1, 1), y: 257},
{x: new Date(1993, 1, 1), y: 345},
{x: new Date(1997, 1, 1), y: 515},
{x: new Date(2001, 1, 1), y: 132},
{x: new Date(2005, 1, 1), y: 305},
{x: new Date(2011, 1, 1), y: 270},
{x: new Date(2015, 1, 1), y: 470}
]}
/>

</VictoryChart>

<VictoryChart style={chartStyle}
containerComponent={
<VictoryBrushContainer/>
}
>
<VictoryLine
style={{
data: {stroke: "tomato"}
}}
data={[
{x: 1, y: -5},
{x: 2, y: 4},
{x: 3, y: 2},
{x: 4, y: 3},
{x: 5, y: 1},
{x: 6, y: -3},
{x: 7, y: 3}
]}
/>
<VictoryLine
style={{
data: {stroke: "blue"}
}}
data={[
{x: 1, y: -3},
{x: 2, y: 5},
{x: 3, y: 3},
{x: 4, y: 0},
{x: 5, y: -2},
{x: 6, y: -2},
{x: 7, y: 5}
]}
/>
<VictoryLine
data={[
{x: 1, y: 5},
{x: 2, y: -4},
{x: 3, y: -2},
{x: 4, y: -3},
{x: 5, y: -1},
{x: 6, y: 3},
{x: 7, y: -3}
]}
/>
</VictoryChart>

<VictoryScatter
style={{
parent: chartStyle.parent,
data: {
fill: (datum, active) => active ? "tomato" : "black"
}
}}
domain={{x: [0, 10], y: [-5, 5]}}
containerComponent={
<VictoryBrushContainer
selectedDomain={{x: [0, 10], y: [-5, 5]}}
/>
}
size={(datum, active) => active ? 5 : 3}
data={[
{x: 1, y: -5},
{x: 2, y: 4},
{x: 3, y: 2},
{x: 4, y: 3},
{x: 5, y: 1},
{x: 6, y: -3},
{x: 7, y: 3}
]}
/>

<VictoryScatter
style={{
parent: chartStyle.parent,
data: {
fill: (datum, active) => active ? "tomato" : "black"
}
}}
containerComponent={
<VictoryBrushContainer/>
}
size={(datum, active) => active ? 5 : 3}
y={(d) => d.x * d.x}
/>

<VictoryGroup style={chartStyle}
containerComponent={
<VictoryBrushContainer/>
}
>
<VictoryScatter
style={{
data: {fill: "tomato"}
}}
size={(datum, active) => active ? 5 : 3}
data={[
{x: 1, y: -5},
{x: 2, y: 4},
{x: 3, y: 2},
{x: 4, y: 3},
{x: 5, y: 1},
{x: 6, y: -3},
{x: 7, y: 3}
]}
/>
<VictoryScatter
style={{
data: {fill: "blue"}
}}
size={(datum, active) => active ? 5 : 3}
data={[
{x: 1, y: -3},
{x: 2, y: 5},
{x: 3, y: 3},
{x: 4, y: 0},
{x: 5, y: -2},
{x: 6, y: -2},
{x: 7, y: 5}
]}
/>
<VictoryScatter
data={[
{x: 1, y: 5},
{x: 2, y: -4},
{x: 3, y: -2},
{x: 4, y: -3},
{x: 5, y: -1},
{x: 6, y: 3},
{x: 7, y: -3}
]}
size={(datum, active) => active ? 5 : 3}
/>
</VictoryGroup>

<VictoryStack style={chartStyle}
containerComponent={
<VictoryBrushContainer/>
}
>
<VictoryBar
style={{
data: {
fill: "tomato",
stroke: (d, active) => active ? "black" : "none",
strokeWidth: 2
}
}}
size={(datum, active) => active ? 5 : 3}
data={[
{x: 1, y: -5},
{x: 2, y: 4},
{x: 3, y: 2},
{x: 4, y: 3},
{x: 5, y: 1},
{x: 6, y: -3},
{x: 7, y: 3}
]}
/>
<VictoryBar
style={{
data: {
fill: "orange",
stroke: (d, active) => active ? "black" : "none",
strokeWidth: 2
}
}}
size={(datum, active) => active ? 5 : 3}
data={[
{x: 1, y: -3},
{x: 2, y: 5},
{x: 3, y: 3},
{x: 4, y: 0},
{x: 5, y: -2},
{x: 6, y: -2},
{x: 7, y: 5}
]}
/>
<VictoryBar
style={{
data: {
fill: "gold",
stroke: (d, active) => active ? "black" : "none",
strokeWidth: 2
}
}}
data={[
{x: 1, y: 5},
{x: 2, y: -4},
{x: 3, y: -2},
{x: 4, y: -3},
{x: 5, y: -1},
{x: 6, y: 3},
{x: 7, y: -3}
]}
/>
</VictoryStack>
</div>
</div>
);
}
}

export default App;
Loading