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

Audits and adds demo: SelectionDemo #1550

Merged
merged 4 commits into from
May 4, 2020
Merged

Audits and adds demo: SelectionDemo #1550

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
ba51b3d
Adds SelectionDemo to app
wsparsons Apr 30, 2020
d334d82
Adds SelectionDemo
wsparsons Apr 30, 2020
b2dbea6
Removes size prop from demo since VictoryBar does not take a size prop
wsparsons Apr 30, 2020
0c33b0a
Defines the SelectionDemoState
wsparsons Apr 30, 2020
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
2 changes: 0 additions & 2 deletions demo/js/components/selection-demo.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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>
);
}
}