Skip to content

Commit

Permalink
Merge pull request #1550 from FormidableLabs/task/audit-selection-demo
Browse files Browse the repository at this point in the history 
Audits and adds demo: SelectionDemo
  • Loading branch information
Wendy Parsons authored May 4, 2020
2 parents 08d92d2 + 0c33b0a commit 69f97e5
Show file tree
Hide file tree
Showing 3 changed files with 356 additions and 2 deletions.
2 changes: 0 additions & 2 deletions demo/js/components/selection-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,6 @@ class App extends React.Component {
strokeWidth: 2
}
}}
size={({ active }) => (active ? 5 : 3)}
data={[
{ x: 1, y: -5 },
{ x: 2, y: 4 },
Expand All @@ -310,7 +309,6 @@ class App extends React.Component {
strokeWidth: 2
}
}}
size={({ active }) => (active ? 5 : 3)}
data={[
{ x: 1, y: -3 },
{ x: 2, y: 5 },
Expand Down
2 changes: 2 additions & 0 deletions demo/ts/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import LineDemo from "./components/victory-line-demo";
import PieDemo from "./components/victory-pie-demo";
import PolarAxisDemo from "./components/victory-polar-axis-demo";
import ScatterDemo from "./components/victory-scatter-demo";
import SelectionDemo from "./components/selection-demo";
import TooltipDemo from "./components/victory-tooltip-demo";
import VictorySelectionContainerDemo from "./components/victory-selection-container-demo";
import VictorySharedEventsDemo from "./components/victory-shared-events-demo";
Expand All @@ -39,6 +40,7 @@ const MAP = {
"/pie": { component: PieDemo, name: "PieDemo" },
"/polar-axis": { component: PolarAxisDemo, name: "PolarAxisDemo" },
"/scatter": { component: ScatterDemo, name: "ScatterDemo" },
"/selection": { component: SelectionDemo, name: "SelectionDemo" },
"/tooltip": { component: TooltipDemo, name: "TooltipDemo" },
"/victory-selection-container": {
component: VictorySelectionContainerDemo,
Expand Down
354 changes: 354 additions & 0 deletions demo/ts/components/selection-demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,354 @@
/*eslint-disable no-magic-numbers */
import React from "react";
import { VictoryChart } from "@packages/victory-chart";
import { VictoryStack } from "@packages/victory-stack";
import { VictoryGroup } from "@packages/victory-group";
import { VictoryBar } from "@packages/victory-bar";
import { VictoryLine } from "@packages/victory-line";
import { VictoryScatter } from "@packages/victory-scatter";
import { VictorySelectionContainer } from "@packages/victory-selection-container";
import { VictoryLegend } from "@packages/victory-legend";
import { VictoryTooltip } from "@packages/victory-tooltip";

interface SelectionDemoState {
points: { x: number; y: number }[];
}

interface DataSet {
data?: { x: number; y: number }[];
}

export default class SelectionDemo extends React.Component<any, SelectionDemoState> {
constructor(props: any) {
super(props);
this.state = {
points: []
};
}

handleSelection(datasets: DataSet[]) {
const points = datasets.reduce((memo: any, dataset: DataSet) => {
memo = memo.concat(dataset.data);
return memo;
}, []);
this.setState({ points });
}

handleClearSelection() {
this.setState({ points: [] });
}

listData() {
const points = this.state.points.map((point: { x: number; y: number }, index: number) => {
return <li key={index}>{`${point.x}, ${point.y}`}</li>;
});

return (
<div>
<p>Points</p>
<ul>{points}</ul>
</div>
);
}

render() {
const containerStyle: React.CSSProperties = {
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}>
{this.listData()}
<VictoryChart
style={chartStyle}
height={400}
padding={{ top: 100, bottom: 50, left: 50, right: 50 }}
containerComponent={
<VictorySelectionContainer
selectionDimension="x"
selectionStyle={{
stroke: "tomato",
strokeWidth: 2,
fill: "tomato",
fillOpacity: 0.1
}}
onSelection={this.handleSelection.bind(this)}
onSelectionCleared={this.handleClearSelection.bind(this)}
/>
}
>
<VictoryLegend
x={120}
y={20}
title="Legend"
centerTitle
orientation="horizontal"
gutter={20}
style={{ border: { stroke: "black" }, title: { fontSize: 20 } }}
data={[
{ name: "One", symbol: { fill: "tomato" } },
{ name: "Two", symbol: { fill: "orange" } },
{ name: "Three", symbol: { fill: "gold" } }
]}
/>
<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>

<VictoryChart style={chartStyle} containerComponent={<VictorySelectionContainer />}>
<VictoryGroup data={[{ x: 1, y: 5 }, { x: 2, y: 4 }, { x: 3, y: -2 }]}>
<VictoryLine style={{ data: { stroke: "tomato" } }} />
<VictoryScatter
style={{ data: { fill: ({ active }) => (active ? "tomato" : "gray") } }}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
/>
</VictoryGroup>

<VictoryGroup data={[{ x: 1, y: -3 }, { x: 2, y: 5 }, { x: 3, y: 3 }]}>
<VictoryLine style={{ data: { stroke: "blue" } }} />
<VictoryScatter
style={{ data: { fill: ({ active }) => (active ? "blue" : "gray") } }}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
/>
</VictoryGroup>

<VictoryGroup data={[{ x: 1, y: 5 }, { x: 2, y: -4 }, { x: 3, y: -2 }]}>
<VictoryLine style={{ data: { stroke: "black" } }} />
<VictoryScatter
style={{ data: { fill: ({ active }) => (active ? "black" : "gray") } }}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
/>
</VictoryGroup>
</VictoryChart>

<VictoryScatter
style={{
parent: chartStyle.parent,
data: {
fill: ({ active }) => (active ? "tomato" : "black")
}
}}
containerComponent={
<VictorySelectionContainer
selectionStyle={{
stroke: "tomato",
strokeWidth: 2,
fill: "tomato",
fillOpacity: 0.1
}}
/>
}
size={({ 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: ({ active }) => (active ? "tomato" : "black")
}
}}
containerComponent={
<VictorySelectionContainer
selectionStyle={{
stroke: "tomato",
strokeWidth: 2,
fill: "tomato",
fillOpacity: 0.1
}}
/>
}
size={({ active }) => (active ? 5 : 3)}
y={(d) => d.x * d.x}
/>

<VictoryGroup
style={chartStyle}
containerComponent={
<VictorySelectionContainer
selectionStyle={{
stroke: "tomato",
strokeWidth: 2,
fill: "tomato",
fillOpacity: 0.1
}}
/>
}
>
<VictoryScatter
style={{
data: { fill: "tomato" }
}}
size={({ 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={({ 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={({ active }) => (active ? 5 : 3)}
/>
</VictoryGroup>

<VictoryChart
horizontal
style={chartStyle}
containerComponent={
<VictorySelectionContainer
selectionDimension="x"
selectionStyle={{
stroke: "tomato",
strokeWidth: 2,
fill: "tomato",
fillOpacity: 0.1
}}
/>
}
>
<VictoryStack>
<VictoryBar
style={{
data: {
fill: "tomato",
stroke: ({ 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 }
]}
/>
<VictoryBar
style={{
data: {
fill: "orange",
stroke: ({ active }) => (active ? "black" : "none"),
strokeWidth: 2
}
}}
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: ({ 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>
</VictoryChart>
</div>
</div>
);
}
}

0 comments on commit 69f97e5

Please sign in to comment.