From 6be3336aa352626b41b0dc439b5e745d43fbf5c2 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Wed, 7 Feb 2024 17:22:54 -0600 Subject: [PATCH 01/24] fix error-bar example --- demo/ts/components/victory-errorbar-demo.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/demo/ts/components/victory-errorbar-demo.tsx b/demo/ts/components/victory-errorbar-demo.tsx index ef6a27aef..cc71b249e 100644 --- a/demo/ts/components/victory-errorbar-demo.tsx +++ b/demo/ts/components/victory-errorbar-demo.tsx @@ -134,9 +134,9 @@ export default class VictoryErrorBarDemo extends React.Component< data={this.state.data} /> - + - + { return { - style: Object.assign({}, props.style, { stroke: "orange" }), + style: Object.assign({}, props.style, { + stroke: "orange", + }), }; }, }, From 87de270f80414312ff9e0025aa7846ae16431c0a Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Thu, 8 Feb 2024 11:01:20 -0600 Subject: [PATCH 02/24] remove empty data so default candlesticks show --- demo/ts/components/victory-candlestick-demo.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/demo/ts/components/victory-candlestick-demo.tsx b/demo/ts/components/victory-candlestick-demo.tsx index 8d9fb67e0..274f2168b 100644 --- a/demo/ts/components/victory-candlestick-demo.tsx +++ b/demo/ts/components/victory-candlestick-demo.tsx @@ -129,7 +129,9 @@ export default class VictoryCandlestickDemo extends React.Component< { mutation: (props) => { return { - style: Object.assign({}, props.style, { fill: "blue" }), + style: Object.assign({}, props.style, { + fill: "blue", + }), }; }, }, @@ -180,7 +182,9 @@ export default class VictoryCandlestickDemo extends React.Component< { mutation: (props) => { return { - style: Object.assign({}, props.style, { fill: "blue" }), + style: Object.assign({}, props.style, { + fill: "blue", + }), }; }, }, @@ -239,7 +243,7 @@ export default class VictoryCandlestickDemo extends React.Component< - + ); From c5a341f254873fcee2fcd16c485d500d977e7c5d Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Thu, 8 Feb 2024 09:44:06 -0800 Subject: [PATCH 03/24] fix examples in voronai container --- .../victory-voronoi-container-demo.tsx | 48 ++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/demo/ts/components/victory-voronoi-container-demo.tsx b/demo/ts/components/victory-voronoi-container-demo.tsx index 9a71df5ec..48bbffa61 100644 --- a/demo/ts/components/victory-voronoi-container-demo.tsx +++ b/demo/ts/components/victory-voronoi-container-demo.tsx @@ -98,7 +98,7 @@ export default class VictoryVoronoiContainerDemo extends React.Component<
} /> } + > + + + + + `y: ${datum.y}`} + labelComponent={ + { + return activePoints + .map(({ y }) => `value: ${y}`) + .join(" - "); + }} + /> + } + /> + } > + Date: Thu, 8 Feb 2024 10:56:00 -0800 Subject: [PATCH 04/24] fix cursorcontainer examples --- .../components/victory-cursor-container-demo.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/demo/ts/components/victory-cursor-container-demo.tsx b/demo/ts/components/victory-cursor-container-demo.tsx index e881f8026..2ad25dd14 100644 --- a/demo/ts/components/victory-cursor-container-demo.tsx +++ b/demo/ts/components/victory-cursor-container-demo.tsx @@ -160,7 +160,6 @@ class App extends React.Component { containerComponent={ round(datum.x, 2)} - cursorDimension="x" defaultCursorValue={1} /> } @@ -173,20 +172,8 @@ class App extends React.Component { (active ? "tomato" : "black"), - }, }} - containerComponent={ - - } + containerComponent={} size={({ active }) => (active ? 5 : 3)} y={(d) => d.x * d.x} /> From 5032fa32438d2378f5263a550b8b6773d98c3ce8 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Thu, 8 Feb 2024 11:49:36 -0800 Subject: [PATCH 05/24] fixing tooltip demo --- demo/ts/components/victory-tooltip-demo.tsx | 51 +++++++++++++-------- 1 file changed, 31 insertions(+), 20 deletions(-) diff --git a/demo/ts/components/victory-tooltip-demo.tsx b/demo/ts/components/victory-tooltip-demo.tsx index 3c03bfab6..faa608bf6 100644 --- a/demo/ts/components/victory-tooltip-demo.tsx +++ b/demo/ts/components/victory-tooltip-demo.tsx @@ -6,6 +6,8 @@ import { VictoryAxis } from "victory-axis"; import { VictoryBar } from "victory-bar"; import { VictoryScatter } from "victory-scatter"; import { VictoryTooltip } from "victory-tooltip"; +import { VictoryCandlestick } from "victory-candlestick"; +import { VictoryErrorBar } from "victory-errorbar"; class App extends React.Component { render() { @@ -45,26 +47,6 @@ class App extends React.Component { { x: 5, y: 2 }, ]} /> - - } - labels={({ datum }) => `hello0000000000 #${datum.x}`} - data={[ - { x: 1, y: 1 }, - { x: 2, y: -2 }, - { x: 3, y: 3 }, - { x: 4, y: -3 }, - { x: 5, y: 2 }, - ]} - /> + } + // @todo high labels type needs to have an OR so that it can also return a string. + // Currently, it only allows returning an integer which is incorrect, as a label would typically be a string. + highLabels={({ datum }) => `hello #${datum.x}`} + data={[ + { x: 1, open: 5, close: 10, high: 15, low: 0 }, + { x: 2, open: 15, close: 10, high: 20, low: 5 }, + { x: 3, open: 15, close: 20, high: 25, low: 10 }, + { x: 4, open: 20, close: 25, high: 30, low: 15 }, + { x: 5, open: 30, close: 25, high: 35, low: 20 }, + ]} + /> + + } + labels={({ datum }) => `hello #${datum.x}`} + data={[ + { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 }, + { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 }, + { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] }, + { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 }, + { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 }, + ]} + /> + Date: Thu, 8 Feb 2024 11:50:20 -0800 Subject: [PATCH 06/24] update VictoryCandlestickLabelsType to allow for string --- packages/victory-candlestick/src/victory-candlestick.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/victory-candlestick/src/victory-candlestick.tsx b/packages/victory-candlestick/src/victory-candlestick.tsx index 73fead7da..4eeed6182 100644 --- a/packages/victory-candlestick/src/victory-candlestick.tsx +++ b/packages/victory-candlestick/src/victory-candlestick.tsx @@ -40,7 +40,7 @@ export interface VictoryCandlestickStyleInterface { export type VictoryCandlestickLabelsType = | (string | number)[] | boolean - | ((datum: any) => number); + | ((datum: any) => number | string); export interface VictoryCandlestickProps extends Omit, From cd1a239ad222a4ca8cebd066bf726d24ff211c40 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Thu, 8 Feb 2024 13:44:02 -0800 Subject: [PATCH 07/24] fix brush container --- demo/ts/components/victory-brush-container-demo.tsx | 4 ++-- .../src/victory-brush-container.tsx | 12 ++++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/demo/ts/components/victory-brush-container-demo.tsx b/demo/ts/components/victory-brush-container-demo.tsx index e691f4609..5dfd49fd7 100644 --- a/demo/ts/components/victory-brush-container-demo.tsx +++ b/demo/ts/components/victory-brush-container-demo.tsx @@ -54,7 +54,7 @@ export default class VictoryBrushContainerDemo extends React.Component< containerComponent={ @@ -84,7 +84,7 @@ export default class VictoryBrushContainerDemo extends React.Component< containerComponent={ diff --git a/packages/victory-brush-container/src/victory-brush-container.tsx b/packages/victory-brush-container/src/victory-brush-container.tsx index 7efb798eb..455897d2f 100644 --- a/packages/victory-brush-container/src/victory-brush-container.tsx +++ b/packages/victory-brush-container/src/victory-brush-container.tsx @@ -37,10 +37,14 @@ export interface VictoryBrushContainerProps extends VictoryContainerProps { ) => void; } -type Constructor = new (...args: any[]) => React.Component; +type ComponentClass = { new (props: TProps): React.Component }; -export const brushContainerMixin = (base: TBase) => - class VictoryBrushContainer extends base { +export function brushContainerMixin< + TBase extends ComponentClass, + TProps extends VictoryBrushContainerProps, +>(Base: TBase) { + // @ts-expect-error "TS2545: A mixin class must have a constructor with a single rest parameter of type 'any[]'." + return class VictoryBrushContainer extends Base { static displayName = "VictoryBrushContainer"; static defaultProps = { ...VictoryContainer.defaultProps, @@ -214,5 +218,5 @@ export const brushContainerMixin = (base: TBase) => ]; } }; - +} export const VictoryBrushContainer = brushContainerMixin(VictoryContainer); From e7384ef00a7cb2e322516b87f48f52037c6bf463 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Thu, 8 Feb 2024 14:03:22 -0800 Subject: [PATCH 08/24] sort route list so it's easier to navigate demo --- demo/ts/app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx index b13827cd1..c66c0e0c5 100644 --- a/demo/ts/app.tsx +++ b/demo/ts/app.tsx @@ -126,7 +126,7 @@ class App extends React.Component { render() { const Child = this.getDemo(); - const routes = keys(MAP); + const routes = keys(MAP).sort(); return (

Demos (Typescript)

From bc20d085fdcef7db74c1b042fbb4504607734f83 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Thu, 8 Feb 2024 14:32:06 -0800 Subject: [PATCH 09/24] fix axis --- demo/ts/components/victory-axis-demo.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/demo/ts/components/victory-axis-demo.tsx b/demo/ts/components/victory-axis-demo.tsx index a72356daf..be978b936 100644 --- a/demo/ts/components/victory-axis-demo.tsx +++ b/demo/ts/components/victory-axis-demo.tsx @@ -128,7 +128,9 @@ export default class VictoryAxisDemo extends React.Component< { mutation: (props: any) => { return { - style: Object.assign({}, props.style, { stroke: "orange" }), + style: Object.assign({}, props.style, { + stroke: "orange", + }), }; }, }, @@ -155,7 +157,7 @@ export default class VictoryAxisDemo extends React.Component< tickFormat={(x) => x.getFullYear()} /> - + - + Date: Thu, 8 Feb 2024 14:49:45 -0800 Subject: [PATCH 10/24] fix example for brush line --- .../ts/components/victory-brush-line-demo.tsx | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/demo/ts/components/victory-brush-line-demo.tsx b/demo/ts/components/victory-brush-line-demo.tsx index fea58e28c..abf41c285 100644 --- a/demo/ts/components/victory-brush-line-demo.tsx +++ b/demo/ts/components/victory-brush-line-demo.tsx @@ -246,21 +246,20 @@ class App extends React.Component { - {this.state.externalMutation && ( - - - } - externalEventMutations={this.state.externalMutation} - /> - - )} + + + } + externalEventMutations={this.state.externalMutation} + /> + + Date: Thu, 8 Feb 2024 14:50:03 -0800 Subject: [PATCH 11/24] add polar axis examples --- .../ts/components/victory-polar-axis-demo.tsx | 410 ++++++++++++++++++ 1 file changed, 410 insertions(+) diff --git a/demo/ts/components/victory-polar-axis-demo.tsx b/demo/ts/components/victory-polar-axis-demo.tsx index a5f7b4f04..6a06c713c 100644 --- a/demo/ts/components/victory-polar-axis-demo.tsx +++ b/demo/ts/components/victory-polar-axis-demo.tsx @@ -8,6 +8,10 @@ import { VictoryLine } from "victory-line"; import { VictoryScatter } from "victory-scatter"; import { VictoryZoomContainer } from "victory-zoom-container"; import { VictoryVoronoiContainer } from "victory-voronoi-container"; +import { VictorySelectionContainer } from "victory-selection-container"; +import { VictoryGroup } from "victory-group"; +import { VictoryTooltip } from "victory-tooltip"; +import { VictoryStack } from "victory-stack"; import { random, range, keys } from "lodash"; import { VictoryTheme, VictoryLabel } from "victory-core"; @@ -124,6 +128,412 @@ class App extends React.Component { return (
+ + {keys(this.state.multiAxisMaxima).map((key, i) => { + return ( + + } + labelPlacement="perpendicular" + axisValue={i + 1} + label={key} + tickFormat={(t) => t * this.state.multiAxisMaxima[key]} + tickValues={[0.25, 0.5, 0.75]} + /> + ); + })} + ""} /> + + {this.state.multiAxisData.map((data, i) => { + return ; + })} + + + + } + > + + + + (active ? "tomato" : "gray") }, + }} + labels={({ datum }) => datum.y} + labelComponent={} + /> + + + + + (active ? "blue" : "gray") }, + }} + labels={({ datum }) => `y: ${datum.y}`} + labelComponent={} + /> + + + + + (active ? "black" : "gray") }, + }} + labels={({ datum }) => datum.y} + labelComponent={} + /> + + + + + + + + + + + + + + } + > + + + (active ? "blue" : "tomato"), + fillOpacity: 0.6, + stroke: ({ active }) => (active ? "blue" : "tomato"), + strokeWidth: 2, + }, + }} + labelComponent={} + data={[ + { x: "strength", y: 10, label: "one" }, + { x: "intelligence", y: 25, label: "two" }, + { x: "stealth", y: 40, label: "three" }, + { x: "luck", y: 50, label: "four" }, + { x: "charisma", y: 50, label: "five" }, + ]} + /> + + + + + + + + + { + return [ + { + childName: "bar-2", + mutation: () => { + return { + style: Object.assign({}, props.style, { + fill: "cyan", + }), + }; + }, + }, + { + childName: "bar-3", + mutation: () => { + return { + style: Object.assign({}, props.style, { + fill: "blue", + }), + }; + }, + }, + ]; + }, + onMouseOut: () => { + return [ + { + childName: "all", + mutation: () => { + return { style: undefined }; + }, + }, + ]; + }, + }, + }, + ]} + > + ""} + /> + + + + + + + + + { + return [ + { + mutation: () => { + return { + style: Object.assign({}, props.style, { + fill: "cyan", + stroke: "cyan", + }), + }; + }, + }, + ]; + }, + onMouseOut: () => { + return [ + { + mutation: () => { + return { style: undefined }; + }, + }, + ]; + }, + }, + }, + ]} + > + ""} + /> + + + + + + + + Date: Fri, 9 Feb 2024 08:47:02 -0800 Subject: [PATCH 12/24] add missing examples to pie demo --- demo/ts/components/victory-pie-demo.tsx | 54 ++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/demo/ts/components/victory-pie-demo.tsx b/demo/ts/components/victory-pie-demo.tsx index eb66307f2..8cfa399d0 100644 --- a/demo/ts/components/victory-pie-demo.tsx +++ b/demo/ts/components/victory-pie-demo.tsx @@ -307,16 +307,60 @@ export default class VictoryPieDemo extends React.Component< innerRadius={140} /> `${datum.l}\ndegrees`} + data={[ + { x: 1, y: 1, l: 0 }, + { x: 2, y: 1, l: 45 }, + { x: 3, y: 1, l: 90 }, + { x: 4, y: 1, l: 135 }, + { x: 5, y: 1, l: 180 }, + { x: 6, y: 1, l: 225 }, + { x: 7, y: 1, l: 270 }, + { x: 8, y: 1, l: 315 }, + ]} + /> + `${datum.l}\ndegrees`} + data={[ + { x: 1, y: 1, l: 0 }, + { x: 2, y: 1, l: 45 }, + { x: 3, y: 1, l: 90 }, + { x: 4, y: 1, l: 135 }, + { x: 5, y: 1, l: 180 }, + { x: 6, y: 1, l: 225 }, + { x: 7, y: 1, l: 270 }, + { x: 8, y: 1, l: 315 }, + ]} /> - + } + labelIndicator={ + + } /> } + labelIndicator={ + + } labelIndicatorInnerOffset={45} labelIndicatorOuterOffset={15} /> From a343e489181a48d3d61dc6f1f24fb8fe43d153d7 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 09:26:51 -0800 Subject: [PATCH 13/24] cleanup and fix label demo --- demo/ts/components/victory-label-demo.tsx | 520 ++++++++++++---------- 1 file changed, 287 insertions(+), 233 deletions(-) diff --git a/demo/ts/components/victory-label-demo.tsx b/demo/ts/components/victory-label-demo.tsx index 94d1a51ee..e622bb56d 100644 --- a/demo/ts/components/victory-label-demo.tsx +++ b/demo/ts/components/victory-label-demo.tsx @@ -1,243 +1,297 @@ /* eslint-disable no-magic-numbers*/ import React from "react"; import { VictoryLabel } from "victory-core"; +import { VictoryScatter, VictoryScatterProps } from "victory-scatter"; +const containerStyle: React.CSSProperties = { + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", +}; + +const style = { + parent: { border: "1px solid #ccc", margin: "1%", maxWidth: "25%" }, + labels: { padding: 0 }, + data: { fill: "gold" }, +}; + +const defaultScatterProps: VictoryScatterProps = { + style, + width: 400, + height: 400, + domain: [-10, 10], + data: [{ x: 0, y: 0 }], + labels: () => "Label", + size: 5, +}; export default class App extends React.Component { render() { return ( -
-

- VictoryLabel demo! The little circles show the anchor points for each - label. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* examples for inlining VictoryLabel with mutlitple labels */} - - - - - - - - - - {/** - * example for passing an array of lineHeights. - * lineHeight prop can accept a number[] or string[]. - */} - - - - {/* example for guarding against empty style and lineHeight arrays */} - - - +
+ } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + {/* examples for inlining VictoryLabel with mutlitple labels */} + + } + /> + + + } + /> + + + } + /> + + {/** + * example for passing an array of lineHeights. + * lineHeight prop can accept a number[] or string[]. + */} + + } + /> + + {/* example for guarding against empty style and lineHeight arrays */} + + } + />
); } From 27b5f34ce588e79c8e4df1459678e20f2239b415 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 10:29:32 -0800 Subject: [PATCH 14/24] fix legend demo move last example into svg --- demo/ts/components/victory-legend-demo.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/demo/ts/components/victory-legend-demo.tsx b/demo/ts/components/victory-legend-demo.tsx index 4f4b4bfde..eeb5b94a4 100644 --- a/demo/ts/components/victory-legend-demo.tsx +++ b/demo/ts/components/victory-legend-demo.tsx @@ -169,17 +169,17 @@ const LegendDemo = () => ( style={{ border: { stroke: "black" } }} data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]} /> + } + centerTitle + title={["TITLE"]} + gutter={30} + symbolSpacer={symbolSpacer} + itemsPerRow={3} + data={data} + style={legendStyle} + /> - } - centerTitle - title={["TITLE"]} - gutter={30} - symbolSpacer={symbolSpacer} - itemsPerRow={3} - data={data} - style={legendStyle} - />
); From bfafd209fe982b0147fd3b47da089f5e91c38b7b Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 10:50:17 -0800 Subject: [PATCH 15/24] add createContainer --- demo/ts/components/create-container-demo.tsx | 289 +++++++++++++++++++ 1 file changed, 289 insertions(+) create mode 100644 demo/ts/components/create-container-demo.tsx diff --git a/demo/ts/components/create-container-demo.tsx b/demo/ts/components/create-container-demo.tsx new file mode 100644 index 000000000..32e80c094 --- /dev/null +++ b/demo/ts/components/create-container-demo.tsx @@ -0,0 +1,289 @@ +/* eslint-disable no-magic-numbers,react/no-multi-comp */ +import React from "react"; +import PropTypes from "prop-types"; +import { round } from "lodash"; +import { VictoryChart } from "victory-chart"; +import { VictoryStack } from "victory-stack"; +import { VictoryGroup } from "victory-group"; +import { createContainer } from "victory-create-container"; +import { VictoryBar } from "victory-bar"; +import { VictoryLine } from "victory-line"; +import { VictoryScatter } from "victory-scatter"; +import { VictoryTooltip } from "victory-tooltip"; +import { VictoryLegend } from "victory-legend"; + +const Charts = ({ behaviors }) => { + 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%" }, + }; + const CustomContainer = createContainer(behaviors[0], behaviors[1]); + const behaviorsList = behaviors.map((behavior) => `"${behavior}"`).join(", "); + + return ( +
+ 
{`VictoryCreateContainer(${behaviorsList})`}
+
+ {/* A */} + `y: ${datum.y}`} + labelComponent={ + + } + selectedDomain={{ x: [1.5, 2] }} + /> + } + > + + (active ? 4 : 2), + }, + labels: { fill: "tomato" }, + }} + /> + + (active ? 4 : 2), + }, + labels: { fill: "blue" }, + }} + /> + + (active ? 4 : 2), + }, + labels: { fill: "black" }, + }} + /> + + + {/* B */} + round(datum.x, 2)} + cursorLabel={({ datum }) => round(datum.x, 2)} + selectionStyle={{ + stroke: "tomato", + strokeWidth: 2, + fill: "tomato", + fillOpacity: 0.1, + }} + selectedDomain={{ x: [0.4, 0.95], y: [0.5, 0.8] }} + defaultCursorValue={0.99} + /> + } + > + (active ? "tomato" : "black"), + }, + }} + size={({ active }) => (active ? 5 : 3)} + y={(d) => d.x * d.x} + /> + + + {/* C */} + + } + > + + (active ? 5 : 3)} + labels={({ datum }) => datum.y} + labelComponent={} + data={[ + { x: 1, y: -5 }, + { x: 2, y: 4 }, + { x: 3, y: 2 }, + { x: 4, y: 0 }, + { x: 5, y: 1 }, + { x: 6, y: -3 }, + { x: 7, y: 3 }, + ]} + /> + (active ? 5 : 3)} + labels={({ datum }) => datum.y} + labelComponent={} + 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 }, + ]} + /> + datum.y} + labelComponent={} + size={({ active }) => (active ? 5 : 3)} + /> + + + + {/* D */} + + } + > + (active ? "black" : "none"), + strokeWidth: 2, + }, + }} + 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 }, + ]} + /> + (active ? "black" : "none"), + strokeWidth: 2, + }, + }} + 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 }, + ]} + /> + (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 }, + ]} + /> + +
+
+ ); +}; + +Charts.propTypes = { + behaviors: PropTypes.arrayOf(PropTypes.string).isRequired, +}; + +class App extends React.Component { + render() { + return ( +
+ hi + + + + +
+ ); + } +} + +export default App; From 0cb83747975655d3bed2f13665393f47f86809d5 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 10:50:29 -0800 Subject: [PATCH 16/24] add createContainer to routes --- demo/ts/app.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx index c66c0e0c5..3798d4214 100644 --- a/demo/ts/app.tsx +++ b/demo/ts/app.tsx @@ -11,6 +11,7 @@ import BrushContainerDemo from "./components/victory-brush-container-demo"; import BrushLineDemo from "./components/victory-brush-line-demo"; import CandlestickDemo from "./components/victory-candlestick-demo"; import ChartDemo from "./components/victory-chart-demo"; +import CreateContainerDemo from "./components/create-container-demo"; import CursorContainerDemo from "./components/victory-cursor-container-demo"; import DraggableDemo from "./components/draggable-demo"; import ErrorBarDemo from "./components/victory-errorbar-demo"; @@ -53,6 +54,10 @@ const MAP = { "/histogram-demo": { component: HistogramDemo, name: "HistogramDemo" }, "/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" }, "/chart": { component: ChartDemo, name: "ChartDemo" }, + "/create-container": { + component: CreateContainerDemo, + name: "CreateContainerDemo", + }, "/cursor-container": { component: CursorContainerDemo, name: "CursorContainerDemo", From 6b02654c82cbb5810fa900309a948ddadafde65f Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 13:40:36 -0800 Subject: [PATCH 17/24] add external events demo --- demo/ts/app.tsx | 19 +- demo/ts/components/create-container-demo.tsx | 3 - demo/ts/components/external-events-demo.tsx | 293 +++++++++++++++++++ 3 files changed, 305 insertions(+), 10 deletions(-) create mode 100644 demo/ts/components/external-events-demo.tsx diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx index 3798d4214..6d89ade4f 100644 --- a/demo/ts/app.tsx +++ b/demo/ts/app.tsx @@ -16,6 +16,7 @@ import CursorContainerDemo from "./components/victory-cursor-container-demo"; import DraggableDemo from "./components/draggable-demo"; import ErrorBarDemo from "./components/victory-errorbar-demo"; import EventsDemo from "./components/events-demo"; +import ExternalEventsDemo from "./components/external-events-demo"; import GroupDemo from "./components/group-demo"; import HistogramDemo from "./components/victory-histogram-demo"; import HorizontalDemo from "./components/horizontal-demo"; @@ -49,9 +50,9 @@ const MAP = { name: "BrushContainerDemo", }, "/brush-line": { component: BrushLineDemo, name: "BrushLineDemo" }, - "/group-demo": { component: GroupDemo, name: "GroupDemo" }, - "/horizontal-demo": { component: HorizontalDemo, name: "HorizontalDemo" }, - "/histogram-demo": { component: HistogramDemo, name: "HistogramDemo" }, + "/group": { component: GroupDemo, name: "GroupDemo" }, + "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, + "/histogram": { component: HistogramDemo, name: "HistogramDemo" }, "/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" }, "/chart": { component: ChartDemo, name: "ChartDemo" }, "/create-container": { @@ -62,9 +63,13 @@ const MAP = { component: CursorContainerDemo, name: "CursorContainerDemo", }, - "/draggable-demo": { component: DraggableDemo, name: "DraggableDemo" }, + "/draggable": { component: DraggableDemo, name: "DraggableDemo" }, "/error-bar": { component: ErrorBarDemo, name: "ErrorBarDemo" }, - "/events-demo": { component: EventsDemo, name: "EventsDemo" }, + "/events": { component: EventsDemo, name: "EventsDemo" }, + "/external-events": { + component: ExternalEventsDemo, + name: "ExternalEventsDemo", + }, "/immutable": { component: ImmutableDemo, name: "ImmutableDemo" }, "/label": { component: LabelDemo, name: "LabelDemo" }, "/legend": { component: LegendDemo, name: "LegendDemo" }, @@ -76,7 +81,7 @@ const MAP = { "/selection": { component: SelectionDemo, name: "SelectionDemo" }, "/stack": { component: StackDemo, name: "StackDemo" }, "/tooltip": { component: TooltipDemo, name: "TooltipDemo" }, - "/victory-demo": { component: VictoryDemo, name: "VictoryDemo" }, + "/victory": { component: VictoryDemo, name: "VictoryDemo" }, "/victory-selection-container": { component: VictorySelectionContainerDemo, name: "VictorySelectionContainerDemo", @@ -94,7 +99,7 @@ const MAP = { component: ZoomContainerDemo, name: "ZoomContainerDemo", }, - "/ouia-demo": { component: OuiaDemo, name: "OuiaDemo" }, + "/ouia": { component: OuiaDemo, name: "OuiaDemo" }, }; class Home extends React.Component { diff --git a/demo/ts/components/create-container-demo.tsx b/demo/ts/components/create-container-demo.tsx index 32e80c094..8e1ba68d5 100644 --- a/demo/ts/components/create-container-demo.tsx +++ b/demo/ts/components/create-container-demo.tsx @@ -110,7 +110,6 @@ const Charts = ({ behaviors }) => { }} /> - {/* B */} { y={(d) => d.x * d.x} /> - {/* C */} { /> - {/* D */} { + this.setState({ + data: this.getData(), + }); + }, 3000); + } + + getData() { + return range(10).map((i) => { + return { + x: i, + y: Math.random(), + }; + }); + } + + removeMutation() { + this.setState({ + externalMutation: undefined, + }); + } + + handleClick() { + const callback = this.removeMutation.bind(this); + this.setState({ + externalMutation: [ + { + childName: "data", + target: ["data", "labels"], + eventKey: "all", + mutation: (props) => { + const fill = props.style && props.style.fill; + return fill === "blue" + ? { style: Object.assign({}, props.style, { fill: "red" }) } + : { style: Object.assign({}, props.style, { fill: "blue" }) }; + }, + callback, + }, + ], + }); + } + + clearMutation() { + const callback = this.removeMutation.bind(this); + this.setState({ + externalMutation: [ + { + childName: "data", + target: "all", + eventKey: "all", + mutation: () => ({ style: undefined }), + callback, + }, + ], + }); + } + + render() { + const containerStyle = { + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + }; + const chartStyle = { + parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "35%" }, + }; + return ( +
+

Debug

+
+
    +
  • + +
    • +
  • + +
    • +
+ { + return [ + { + mutation: () => { + return { style: { fill: "orange" } }; + }, + }, + { + target: "labels", + mutation: (props) => { + return props.text === "clicked" + ? { text: "unclicked" } + : { text: "clicked" }; + }, + }, + ]; + }, + }, + }, + ]} + > + null} + data={this.state.data} + style={{ data: { fill: "cyan" } }} + /> + + + { + return [ + { + mutation: () => { + return { style: { fill: "orange" } }; + }, + }, + { + target: "labels", + mutation: (props) => { + return props.text === "clicked" + ? { text: "unclicked" } + : { text: "clicked" }; + }, + }, + ]; + }, + }, + }, + ]} + /> + { + return [ + { + mutation: () => { + return { style: { fill: "orange" } }; + }, + }, + { + target: "labels", + mutation: (props) => { + return props.text === "clicked" + ? { text: "unclicked" } + : { text: "clicked" }; + }, + }, + ]; + }, + }, + }, + ]} + > + + + + + + + } + > + (active ? "black" : "none"), + strokeWidth: 2, + }, + }} + 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 }, + ]} + /> + (active ? "black" : "none"), + strokeWidth: 2, + }, + }} + 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 }, + ]} + /> + + } + externalEventMutations={this.state.externalMutation} + > + + + +
+
+ ); + } +} + +export default App; From 5592eb01459d2ce81b9ad43a3dd0820c5243319e Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 13:52:19 -0800 Subject: [PATCH 18/24] add animationDemo --- demo/ts/app.tsx | 2 + demo/ts/components/animation-demo.tsx | 173 ++++++++++++++++++++++++++ 2 files changed, 175 insertions(+) create mode 100644 demo/ts/components/animation-demo.tsx diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx index 6d89ade4f..e690e4644 100644 --- a/demo/ts/app.tsx +++ b/demo/ts/app.tsx @@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom"; import { keys } from "lodash"; import AccessibilityDemo from "./components/accessibility-demo"; +import AnimationDemo from "./components/animation-demo"; import AreaDemo from "./components/victory-area-demo"; import AxisDemo from "./components/victory-axis-demo"; import BarDemo from "./components/victory-bar-demo"; @@ -41,6 +42,7 @@ import OuiaDemo from "./components/ouia-demo"; const MAP = { "/accessibility": { component: AccessibilityDemo, name: "AccessibilityDemo" }, + "/animation": { component: AnimationDemo, name: "AnimationDemo" }, "/area": { component: AreaDemo, name: "AreaDemo" }, "/axis": { component: AxisDemo, name: "AxisDemo" }, "/bar": { component: BarDemo, name: "BarDemo" }, diff --git a/demo/ts/components/animation-demo.tsx b/demo/ts/components/animation-demo.tsx new file mode 100644 index 000000000..59d8f1299 --- /dev/null +++ b/demo/ts/components/animation-demo.tsx @@ -0,0 +1,173 @@ +/* eslint-disable no-magic-numbers */ +import React from "react"; +import { random, range } from "lodash"; +import { VictoryBar } from "victory-bar"; +import { VictoryChart } from "victory-chart"; +import { VictoryStack } from "victory-stack"; +import { VictoryArea } from "victory-area"; +import { VictoryTheme } from "victory-core"; + +export default class App extends React.Component { + constructor() { + super(); + this.state = { + data: this.getData(), + arrayData: this.getArrayData(), + groupedData: this.getGroupedData(), + multiTransitionData: this.getMultiTransitionData(), + areaTransitionData: this.getAreaTransitionData(), + }; + } + + componentDidMount() { + window.setInterval(() => { + this.setState({ + data: this.getData(), + groupedData: this.getGroupedData(), + multiTransitionData: this.getMultiTransitionData(), + areaTransitionData: this.getAreaTransitionData(), + style: this.getStyles(), + }); + }, 3000); + } + + getMultiTransitionData() { + const areas = random(8, 10); + return range(8).map(() => { + return range(areas).map((area) => { + return { x: area, y: random(2, 10) }; + }); + }); + } + + getAreaTransitionData() { + const areas = random(6, 10); + return range(areas).map((area) => { + return { x: area, y: random(2, 10) }; + }); + } + + getData() { + return range(20).map((i) => { + return { + x: i, + y: Math.random(), + }; + }); + } + + getGroupedData() { + return range(7).map(() => { + return [ + { + x: "rabbits", + y: random(1, 5), + }, + { + x: "cats", + y: random(1, 10), + }, + { + x: "dogs", + y: random(2, 10), + }, + { + x: "birds", + y: random(2, 10), + }, + { + x: "frogs", + y: random(2, 15), + }, + ]; + }); + } + + getArrayData() { + return range(40).map((i) => [i, i + Math.random() * 3]); + } + + getStyles() { + const colors = ["red", "orange", "gold", "tomato", "magenta", "purple"]; + return { + fill: colors[random(0, 5)], + }; + } + + render() { + const style = { + parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, + }; + + const containerStyle = { + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + }; + + return ( +
+ d.x} + theme={VictoryTheme.material} + /> + + + + + + + {this.state.multiTransitionData.map((data, index) => { + return ( + + ); + })} + + + + + {this.state.multiTransitionData.map((data, index) => { + return ( + + ); + })} + + + + + + + + + + +
+ ); + } +} From de88e88433f5e97157231ae7ec0d324a2b80dbde Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 13:55:18 -0800 Subject: [PATCH 19/24] add canvas demo --- demo/ts/app.tsx | 2 + demo/ts/components/canvas-demo.tsx | 321 +++++++++++++++++++++++++++++ 2 files changed, 323 insertions(+) create mode 100644 demo/ts/components/canvas-demo.tsx diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx index e690e4644..0aa042863 100644 --- a/demo/ts/app.tsx +++ b/demo/ts/app.tsx @@ -11,6 +11,7 @@ import BoxPlotDemo from "./components/victory-box-plot-demo"; import BrushContainerDemo from "./components/victory-brush-container-demo"; import BrushLineDemo from "./components/victory-brush-line-demo"; import CandlestickDemo from "./components/victory-candlestick-demo"; +import CanvasDemo from "./components/canvas-demo"; import ChartDemo from "./components/victory-chart-demo"; import CreateContainerDemo from "./components/create-container-demo"; import CursorContainerDemo from "./components/victory-cursor-container-demo"; @@ -56,6 +57,7 @@ const MAP = { "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, "/histogram": { component: HistogramDemo, name: "HistogramDemo" }, "/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" }, + "/canvas": { component: CanvasDemo, name: "CanvasDemo" }, "/chart": { component: ChartDemo, name: "ChartDemo" }, "/create-container": { component: CreateContainerDemo, diff --git a/demo/ts/components/canvas-demo.tsx b/demo/ts/components/canvas-demo.tsx new file mode 100644 index 000000000..c2e6282cd --- /dev/null +++ b/demo/ts/components/canvas-demo.tsx @@ -0,0 +1,321 @@ +/* eslint-disable no-magic-numbers */ +import React from "react"; +import { + CanvasGroup, + CanvasCurve, + VictoryAxis, + VictoryBar, + CanvasBar, + VictoryChart, + VictoryLine, + VictoryScatter, + CanvasPoint, +} from "victory"; +import { range, random } from "lodash"; + +const populationData = [ + { + country: "United States", + values: [ + { year: 1960, value: 180671000 }, + { year: 1961, value: 183691000 }, + { year: 1962, value: 186538000 }, + { year: 1963, value: 189242000 }, + { year: 1964, value: 191889000 }, + { year: 1965, value: 194303000 }, + { year: 1966, value: 196560000 }, + { year: 1967, value: 198712000 }, + { year: 1968, value: 200706000 }, + { year: 1969, value: 202677000 }, + { year: 1970, value: 205052000 }, + { year: 1971, value: 207661000 }, + { year: 1972, value: 209896000 }, + { year: 1973, value: 211909000 }, + { year: 1974, value: 213854000 }, + { year: 1975, value: 215973000 }, + { year: 1976, value: 218035000 }, + { year: 1977, value: 220239000 }, + { year: 1978, value: 222585000 }, + { year: 1979, value: 225055000 }, + { year: 1980, value: 227225000 }, + { year: 1981, value: 229466000 }, + { year: 1982, value: 231664000 }, + { year: 1983, value: 233792000 }, + { year: 1984, value: 235825000 }, + { year: 1985, value: 237924000 }, + { year: 1986, value: 240133000 }, + { year: 1987, value: 242289000 }, + { year: 1988, value: 244499000 }, + { year: 1989, value: 246819000 }, + { year: 1990, value: 249623000 }, + { year: 1991, value: 252981000 }, + { year: 1992, value: 256514000 }, + { year: 1993, value: 259919000 }, + { year: 1994, value: 263126000 }, + { year: 1995, value: 266278000 }, + { year: 1996, value: 269394000 }, + { year: 1997, value: 272657000 }, + { year: 1998, value: 275854000 }, + { year: 1999, value: 279040000 }, + { year: 2000, value: 282162411 }, + { year: 2001, value: 284968955 }, + { year: 2002, value: 287625193 }, + { year: 2003, value: 290107933 }, + { year: 2004, value: 292805298 }, + { year: 2005, value: 295516599 }, + { year: 2006, value: 298379912 }, + { year: 2007, value: 301231207 }, + { year: 2008, value: 304093966 }, + { year: 2009, value: 306771529 }, + { year: 2010, value: 309321666 }, + { year: 2011, value: 311556874 }, + { year: 2012, value: 313830990 }, + { year: 2013, value: 315993715 }, + { year: 2014, value: 318301008 }, + { year: 2015, value: 320635163 }, + { year: 2016, value: 322941311 }, + { year: 2017, value: 324985539 }, + { year: 2018, value: 326687501 }, + { year: 2019, value: 328239523 }, + ], + }, + { + country: "United Kingdom", + values: [ + { year: 1960, value: 52400000 }, + { year: 1961, value: 52800000 }, + { year: 1962, value: 53250000 }, + { year: 1963, value: 53650000 }, + { year: 1964, value: 54000000 }, + { year: 1965, value: 54348050 }, + { year: 1966, value: 54648500 }, + { year: 1967, value: 54943600 }, + { year: 1968, value: 55211700 }, + { year: 1969, value: 55441750 }, + { year: 1970, value: 55663250 }, + { year: 1971, value: 55896223 }, + { year: 1972, value: 56086065 }, + { year: 1973, value: 56194527 }, + { year: 1974, value: 56229974 }, + { year: 1975, value: 56225800 }, + { year: 1976, value: 56211968 }, + { year: 1977, value: 56193492 }, + { year: 1978, value: 56196504 }, + { year: 1979, value: 56246951 }, + { year: 1980, value: 56314216 }, + { year: 1981, value: 56333829 }, + { year: 1982, value: 56313641 }, + { year: 1983, value: 56332848 }, + { year: 1984, value: 56422072 }, + { year: 1985, value: 56550268 }, + { year: 1986, value: 56681396 }, + { year: 1987, value: 56802050 }, + { year: 1988, value: 56928327 }, + { year: 1989, value: 57076711 }, + { year: 1990, value: 57247586 }, + { year: 1991, value: 57424897 }, + { year: 1992, value: 57580402 }, + { year: 1993, value: 57718614 }, + { year: 1994, value: 57865745 }, + { year: 1995, value: 58019030 }, + { year: 1996, value: 58166950 }, + { year: 1997, value: 58316954 }, + { year: 1998, value: 58487141 }, + { year: 1999, value: 58682466 }, + { year: 2000, value: 58892514 }, + { year: 2001, value: 59119673 }, + { year: 2002, value: 59370479 }, + { year: 2003, value: 59647577 }, + { year: 2004, value: 59987905 }, + { year: 2005, value: 60401206 }, + { year: 2006, value: 60846820 }, + { year: 2007, value: 61322463 }, + { year: 2008, value: 61806995 }, + { year: 2009, value: 62276270 }, + { year: 2010, value: 62766365 }, + { year: 2011, value: 63258810 }, + { year: 2012, value: 63700215 }, + { year: 2013, value: 64128273 }, + { year: 2014, value: 64602298 }, + { year: 2015, value: 65116219 }, + { year: 2016, value: 65611593 }, + { year: 2017, value: 66058859 }, + { year: 2018, value: 66460344 }, + { year: 2019, value: 66834405 }, + { year: 2020, value: null }, + ], + }, + { + country: "China", + values: [ + { year: 1960, value: 667070000 }, + { year: 1961, value: 660330000 }, + { year: 1962, value: 665770000 }, + { year: 1963, value: 682335000 }, + { year: 1964, value: 698355000 }, + { year: 1965, value: 715185000 }, + { year: 1966, value: 735400000 }, + { year: 1967, value: 754550000 }, + { year: 1968, value: 774510000 }, + { year: 1969, value: 796025000 }, + { year: 1970, value: 818315000 }, + { year: 1971, value: 841105000 }, + { year: 1972, value: 862030000 }, + { year: 1973, value: 881940000 }, + { year: 1974, value: 900350000 }, + { year: 1975, value: 916395000 }, + { year: 1976, value: 930685000 }, + { year: 1977, value: 943455000 }, + { year: 1978, value: 956165000 }, + { year: 1979, value: 969005000 }, + { year: 1980, value: 981235000 }, + { year: 1981, value: 993885000 }, + { year: 1982, value: 1008630000 }, + { year: 1983, value: 1023310000 }, + { year: 1984, value: 1036825000 }, + { year: 1985, value: 1051040000 }, + { year: 1986, value: 1066790000 }, + { year: 1987, value: 1084035000 }, + { year: 1988, value: 1101630000 }, + { year: 1989, value: 1118650000 }, + { year: 1990, value: 1135185000 }, + { year: 1991, value: 1150780000 }, + { year: 1992, value: 1164970000 }, + { year: 1993, value: 1178440000 }, + { year: 1994, value: 1191835000 }, + { year: 1995, value: 1204855000 }, + { year: 1996, value: 1217550000 }, + { year: 1997, value: 1230075000 }, + { year: 1998, value: 1241935000 }, + { year: 1999, value: 1252735000 }, + { year: 2000, value: 1262645000 }, + { year: 2001, value: 1271850000 }, + { year: 2002, value: 1280400000 }, + { year: 2003, value: 1288400000 }, + { year: 2004, value: 1296075000 }, + { year: 2005, value: 1303720000 }, + { year: 2006, value: 1311020000 }, + { year: 2007, value: 1317885000 }, + { year: 2008, value: 1324655000 }, + { year: 2009, value: 1331260000 }, + { year: 2010, value: 1337705000 }, + { year: 2011, value: 1344130000 }, + { year: 2012, value: 1350695000 }, + { year: 2013, value: 1357380000 }, + { year: 2014, value: 1364270000 }, + { year: 2015, value: 1371220000 }, + { year: 2016, value: 1378665000 }, + { year: 2017, value: 1386395000 }, + { year: 2018, value: 1392730000 }, + { year: 2019, value: 1397715000 }, + { year: 2020, value: null }, + ], + }, +]; + +const containerStyle = { + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", +}; + +const parentStyle = { + border: "1px solid #ccc", + margin: "2%", + maxWidth: "40%", +}; + +const formatPopulation = (value) => { + const ONE_BILLION = 1000000000; + const ONE_MILLION = 1000000; + if (value >= ONE_BILLION) { + return `${value / ONE_BILLION}B`; + } else if (value >= ONE_MILLION) { + return `${value / ONE_MILLION}M`; + } + return value; +}; + +const getRandomData = (length = 100) => { + const data = []; + for (let i = 0; i < length; i++) { + data.push({ x: Math.random(), y: Math.random() }); + } + return data; +}; + +const CanvasDemo = () => { + const getData = () => { + return range(20).map((i) => { + return { + x: i, + y: Math.random(), + }; + }); + }; + + const getStyles = () => { + const colors = ["red", "orange", "gold", "tomato", "magenta", "purple"]; + return { + fill: colors[random(0, 5)], + }; + }; + + const [barData, setBarData] = React.useState(getData()); + const [barStyle, setBarStyle] = React.useState(getStyles()); + + React.useEffect(() => { + const interval = window.setInterval(() => { + setBarData(getData()); + setBarStyle(getStyles()); + }, 3000); + return () => { + window.clearInterval(interval); + }; + }, [setBarData, setBarStyle]); + + return ( +
+ + {populationData.map(({ country, values }) => { + const data = values.map(({ year, value }) => ({ + x: year, + y: value, + })); + return ( + } + dataComponent={} + /> + ); + })} + v} /> + + + + } + dataComponent={} + data={getRandomData(1000)} + /> + + + } + dataComponent={} + animate + data={barData} + style={{ + data: barStyle, + }} + /> + +
+ ); +}; + +export default CanvasDemo; From 531277f24a53ebe6b933d7cd6833b9d27e070d7a Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 14:30:20 -0800 Subject: [PATCH 20/24] remove references to js demo project --- CONTRIBUTING.md | 5 +---- package.json | 3 +-- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d003b0862..444dcf647 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -46,11 +46,8 @@ $ pnpm install We have some dev servers available for a sample development environment. ```sh -# JavaScript demo app -$ pnpm start - # TypeScript demo app -$ pnpm start:ts +$ pnpm start ``` These run appropriate file watchers, so you can just start developing source files and wait for the webpack dev server to pick up the new changes. diff --git a/package.json b/package.json index a35cd98e5..1227d90d9 100644 --- a/package.json +++ b/package.json @@ -128,8 +128,7 @@ "version": "pnpm changeset version && pnpm install --no-frozen-lockfile", "publish": "nps git:tag && pnpm changeset publish --no-git-tag", "changeset": "changeset", - "start": "concurrently --raw \"pnpm:build:lib:esm --watch\" \"webpack serve --config ./config/webpack/demo/webpack.config.dev.js --static demo/js --entry ./demo/js/app\"", - "start:ts": "concurrently --raw \"pnpm:build:typescript --watch\" \"webpack serve --config ./config/webpack/demo/webpack.config.dev.js --static demo/ts --entry ./demo/ts/app\"", + "start": "concurrently --raw \"pnpm:build:typescript --watch\" \"webpack serve --config ./config/webpack/demo/webpack.config.dev.js --static demo/ts --entry ./demo/ts/app\"", "check": "wireit", "check:debug": "cross-env WIREIT_PARALLEL=1 pnpm check", "clean:build": "rimraf coverage \"packages/*/{dist,es,lib}\"", From 2f2c40d6ab9b5eca2204db527e1afb4344270b29 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 14:30:34 -0800 Subject: [PATCH 21/24] delete js demo examples --- demo/js/app.js | 155 --- demo/js/components/accessibility-demo.js | 365 ------ demo/js/components/animation-demo.js | 173 --- demo/js/components/bubble-data.js | 244 ---- demo/js/components/canvas-demo.js | 321 ------ demo/js/components/create-container-demo.js | 289 ----- demo/js/components/debug-demo.js | 201 ---- demo/js/components/draggable-demo.js | 256 ----- demo/js/components/events-demo.js | 269 ----- demo/js/components/external-events-demo.js | 293 ----- demo/js/components/group-demo.js | 169 --- demo/js/components/horizontal-demo.js | 557 --------- demo/js/components/immutable-demo.js | 1006 ----------------- demo/js/components/ouia-demo.js | 45 - demo/js/components/performance.js | 90 -- demo/js/components/selection-demo.js | 377 ------ demo/js/components/symbol-data.js | 76 -- demo/js/components/victory-area-demo.js | 423 ------- demo/js/components/victory-axis-demo.js | 270 ----- demo/js/components/victory-bar-demo.js | 623 ---------- demo/js/components/victory-box-plot-demo.js | 224 ---- .../victory-brush-container-demo.js | 356 ------ demo/js/components/victory-brush-line-demo.js | 277 ----- .../js/components/victory-candlestick-demo.js | 242 ---- demo/js/components/victory-chart-demo.js | 781 ------------- .../victory-cursor-container-demo.js | 315 ------ demo/js/components/victory-demo.js | 311 ----- demo/js/components/victory-errorbar-demo.js | 166 --- demo/js/components/victory-histogram-demo.js | 623 ---------- demo/js/components/victory-label-demo.js | 456 -------- demo/js/components/victory-legend-demo.js | 203 ---- demo/js/components/victory-line-demo.js | 318 ------ demo/js/components/victory-pie-demo.js | 338 ------ .../js/components/victory-polar-chart-demo.js | 864 -------------- demo/js/components/victory-scatter-demo.js | 262 ----- demo/js/components/victory-tooltip-demo.js | 173 --- .../victory-voronoi-container-demo.js | 724 ------------ demo/js/components/victory-voronoi-demo.js | 141 --- .../components/victory-zoom-container-demo.js | 479 -------- demo/js/index.html | 45 - ...victory-axis-differential-styling-theme.js | 51 - 41 files changed, 13551 deletions(-) delete mode 100644 demo/js/app.js delete mode 100644 demo/js/components/accessibility-demo.js delete mode 100644 demo/js/components/animation-demo.js delete mode 100644 demo/js/components/bubble-data.js delete mode 100644 demo/js/components/canvas-demo.js delete mode 100644 demo/js/components/create-container-demo.js delete mode 100644 demo/js/components/debug-demo.js delete mode 100644 demo/js/components/draggable-demo.js delete mode 100644 demo/js/components/events-demo.js delete mode 100644 demo/js/components/external-events-demo.js delete mode 100644 demo/js/components/group-demo.js delete mode 100644 demo/js/components/horizontal-demo.js delete mode 100644 demo/js/components/immutable-demo.js delete mode 100644 demo/js/components/ouia-demo.js delete mode 100644 demo/js/components/performance.js delete mode 100644 demo/js/components/selection-demo.js delete mode 100644 demo/js/components/symbol-data.js delete mode 100644 demo/js/components/victory-area-demo.js delete mode 100644 demo/js/components/victory-axis-demo.js delete mode 100644 demo/js/components/victory-bar-demo.js delete mode 100644 demo/js/components/victory-box-plot-demo.js delete mode 100644 demo/js/components/victory-brush-container-demo.js delete mode 100644 demo/js/components/victory-brush-line-demo.js delete mode 100644 demo/js/components/victory-candlestick-demo.js delete mode 100644 demo/js/components/victory-chart-demo.js delete mode 100644 demo/js/components/victory-cursor-container-demo.js delete mode 100644 demo/js/components/victory-demo.js delete mode 100644 demo/js/components/victory-errorbar-demo.js delete mode 100644 demo/js/components/victory-histogram-demo.js delete mode 100644 demo/js/components/victory-label-demo.js delete mode 100644 demo/js/components/victory-legend-demo.js delete mode 100644 demo/js/components/victory-line-demo.js delete mode 100644 demo/js/components/victory-pie-demo.js delete mode 100644 demo/js/components/victory-polar-chart-demo.js delete mode 100644 demo/js/components/victory-scatter-demo.js delete mode 100644 demo/js/components/victory-tooltip-demo.js delete mode 100644 demo/js/components/victory-voronoi-container-demo.js delete mode 100644 demo/js/components/victory-voronoi-demo.js delete mode 100644 demo/js/components/victory-zoom-container-demo.js delete mode 100644 demo/js/index.html delete mode 100644 demo/js/theme/victory-axis-differential-styling-theme.js diff --git a/demo/js/app.js b/demo/js/app.js deleted file mode 100644 index 6bcb1b250..000000000 --- a/demo/js/app.js +++ /dev/null @@ -1,155 +0,0 @@ - -/* eslint-disable react/no-multi-comp */ -import React from "react"; -import ReactDOM from "react-dom"; -import { keys } from "lodash"; - -import AccessibilityDemo from "./components/accessibility-demo"; -import AreaDemo from "./components/victory-area-demo"; -import AxisDemo from "./components/victory-axis-demo"; -import BarDemo from "./components/victory-bar-demo"; -import ChartDemo from "./components/victory-chart-demo"; -import LineDemo from "./components/victory-line-demo"; -import HistogramDemo from "./components/victory-histogram-demo"; -import ScatterDemo from "./components/victory-scatter-demo"; -import ErrorBarDemo from "./components/victory-errorbar-demo"; -import BoxplotDemo from "./components/victory-box-plot-demo"; -import CandlestickDemo from "./components/victory-candlestick-demo"; -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 ZoomContainerDemo from "./components/victory-zoom-container-demo"; -import VoronoiContainerDemo from "./components/victory-voronoi-container-demo"; -import CursorContainerDemo from "./components/victory-cursor-container-demo"; -import CreateContainerDemo from "./components/create-container-demo"; -import BrushContainerDemo from "./components/victory-brush-container-demo"; -import AnimationDemo from "./components/animation-demo"; -import SelectionDemo from "./components/selection-demo"; -import PolarDemo from "./components/victory-polar-chart-demo"; -import ImmutableDemo from "./components/immutable-demo"; -import ExternalEventsDemo from "./components/external-events-demo"; -import VictoryBrushLineDemo from "./components/victory-brush-line-demo"; -import PerformanceDemo from "./components/performance"; -import DebugDemo from "./components/debug-demo"; -import VictoryLabelDemo from "./components/victory-label-demo"; -import VictoryLegendDemo from "./components/victory-legend-demo"; -import VictoryPieDemo from "./components/victory-pie-demo"; -import VictoryDemo from "./components/victory-demo"; -import HorizontalDemo from "./components/horizontal-demo"; -import DraggableDemo from "./components/draggable-demo"; -import OuiaDemo from "./components/ouia-demo"; -import CanvasDemo from "./components/canvas-demo"; - -const MAP = { - "/accessibility": { component: AccessibilityDemo, name: "AccessibilityDemo" }, - "/axis": { component: AxisDemo, name: "AxisDemo" }, - "/area": { component: AreaDemo, name: "AreaDemo" }, - "/bar": { component: BarDemo, name: "BarDemo" }, - "/chart": { component: ChartDemo, name: "ChartDemo" }, - "/line": { component: LineDemo, name: "LineDemo" }, - "/histogram": { component: HistogramDemo, name: "HistogramDemo" }, - "/scatter": { component: ScatterDemo, name: "ScatterDemo" }, - "/errorbar": { component: ErrorBarDemo, name: "ErrorBarDemo" }, - "/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" }, - "/boxplot": { component: BoxplotDemo, name: "BoxplotDemo" }, - "/events": { component: EventsDemo, name: "EventsDemo" }, - "/group": { component: GroupDemo, name: "GroupDemo" }, - "/voronoi": { component: VoronoiDemo, name: "VoronoiDemo" }, - "/tooltip": { component: TooltipDemo, name: "TooltipDemo" }, - "/zoom-container": { - component: ZoomContainerDemo, - name: "ZoomContainerDemo", - }, - "/voronoi-container": { - component: VoronoiContainerDemo, - name: "VoronoiContainerDemo", - }, - "/cursor-container": { - component: CursorContainerDemo, - name: "CursorContainerDemo", - }, - "/brush-container": { - component: BrushContainerDemo, - name: "BrushContainerDemo", - }, - "/animation": { component: AnimationDemo, name: "AnimationDemo" }, - "/selection-container": { component: SelectionDemo, name: "SelectionDemo" }, - "/create-container": { - component: CreateContainerDemo, - name: "CreateContainerDemo", - }, - "/polar": { component: PolarDemo, name: "PolarDemo" }, - "/immutable": { component: ImmutableDemo, name: "ImmutableDemo" }, - "/external-events": { - component: ExternalEventsDemo, - name: "ExternalEventsDemo", - }, - "/victory-brush-line": { - component: VictoryBrushLineDemo, - name: "BrushLineDemo", - }, - "/performance": { component: PerformanceDemo, name: "PerformanceDemo" }, - "/debug": { component: DebugDemo, name: "DebugDemo" }, - "/label": { component: VictoryLabelDemo, name: "LabelDemo" }, - "/legend": { component: VictoryLegendDemo, name: "LegendDemo" }, - "/pie": { component: VictoryPieDemo, name: "PieDemo" }, - "/victory": { component: VictoryDemo, name: "VictoryDemo" }, - "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, - "/draggable": { component: DraggableDemo, name: "DraggableDemo" }, - "/ouia": { component: OuiaDemo, name: "OuiaDemo" }, - "/canvas": { component: CanvasDemo, name: "CanvasDemo" }, -}; - -class Home extends React.Component { - render() { - return

Pick A Demo

; - } -} - -class App extends React.Component { - constructor() { - super(); - this.state = { - route: window.location.hash.substr(1), - }; - } - - componentDidMount() { - window.addEventListener("hashchange", () => { - this.setState({ - route: window.location.hash.substr(1), - }); - }); - } - - getDemo() { - const item = MAP[this.state.route] || {}; - return item.component || Home; - } - - render() { - const Child = this.getDemo(); - const routes = keys(MAP); - return ( -
-

Demos

-
    - {routes.map((route, index) => { - const item = MAP[route] || {}; - return ( -
  • - {item.name} -
    • - ); - })} -
- - - -
- ); - } -} - -ReactDOM.render(, document.getElementById("content")); diff --git a/demo/js/components/accessibility-demo.js b/demo/js/components/accessibility-demo.js deleted file mode 100644 index 529cd37c4..000000000 --- a/demo/js/components/accessibility-demo.js +++ /dev/null @@ -1,365 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryGroup } from "victory-group"; -import { VictoryStack } from "victory-stack"; -import { VictoryChart } from "victory-chart"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryBoxPlot } from "victory-box-plot"; -import { VictoryBar, Bar } from "victory-bar"; -import { VictoryPie, Slice } from "victory-pie"; -import { VictoryArea, Area } from "victory-area"; -import { VictoryLine, Curve } from "victory-line"; -import { VictoryVoronoi, Voronoi } from "victory-voronoi"; -import { ErrorBar, VictoryErrorBar } from "victory-errorbar"; -import { Candle, VictoryCandlestick } from "victory-candlestick"; -import { - LineSegment, - Whisker, - Border, - Point, - VictoryLabel, - VictoryAccessibleGroup, -} from "victory-core"; -import { - accessibilityBarData, - accessibilityBoxData, - accessibilityPieData, - accessibilityAreaData, - accessibilityLineData, - accessibilityGroupData, - accessibilityScatterData, - accessibilityVoronoiData, - accessibilityErrorBarData, - accessibilityCandlestickData, -} from "../../demo-data.ts"; - -const pageHeadingStyle = { - display: "flex", - flexDirection: "row", - width: "100%", - alignItems: "center", - justifyContent: "center", -}; - -const chartHeadingStyle = { - marginBottom: "0px", - marginTop: "25px", - fontSize: "calc(1vw + 5px)", -}; - -const containerStyle = { - display: "flex", - flexFlow: "row wrap", - alignItems: "center", - justifyContent: "flex-start", - maxWidth: "1300px", -}; - -const chartContainerStyle = { - display: "flex", - flexDirection: "column", - alignItems: "center", - width: "50%", - height: "50%", - padding: "25px", -}; - -export default class App extends React.Component { - render() { - return ( - <> -
-

Tabbable charts with aria-labels

-
-
- {/** BAR CHART */} -
-

Bar

- - `x: ${datum.x}`} - tabIndex={({ index }) => index + 1} - /> - } - /> - -
- - {/** BOX PLOT */} -
-

Boxplot

- - `${datum.x} max is ${datum._max}`} - tabIndex={({ index }) => index + 5} - /> - } - q3Component={ - - `${datum.x} q3 value is ${datum._q3}` - } - tabIndex={({ index }) => index + 6.1} - /> - } - medianComponent={ - - `${datum.x} median value is ${datum._median}` - } - tabIndex={({ index }) => index + 5.1} - /> - } - q1Component={ - - `${datum.x} q1 value is ${datum._q1}` - } - tabIndex={({ index }) => index + 6.2} - /> - } - minComponent={ - `${datum.x} min is ${datum._min}`} - tabIndex={({ index }) => index + 5.2} - /> - } - /> - -
- - {/** AREA */} -
-

Area

- - - - `area chart stack ${data[0]._stack}` - } - tabIndex={20} - /> - } - /> - - `area chart stack ${data[0]._stack}` - } - tabIndex={20.1} - /> - } - /> - - `area chart stack ${data[0]._stack}` - } - tabIndex={20.2} - /> - } - /> - - `area chart stack ${data[0]._stack}` - } - tabIndex={20.3} - /> - } - /> - - -
- - {/** LINE */} -
-

Line

- - datum.y} - labelComponent={ - datum.y} - tabIndex={({ index }) => index + 21} - /> - } - dataComponent={ - - data.map( - (dataPoint, i) => - `data point ${i + 1} x value is ${ - dataPoint.x - } and y value is ${dataPoint.y}`, - ) - } - /> - } - /> - -
- - {/** PIE */} -
-

Pie

- datum.radius - 12} - width={400} - height={250} - radius={({ datum }) => datum.radius} - data={accessibilityPieData} - dataComponent={ - `pie slice ${datum.x}`} - tabIndex={({ index }) => index + 22} - /> - } - /> -
- - {/** SCATTER */} -
-

Scatter

- - - `scatter point x: ${datum.x}, y:${datum.y}` - } - tabIndex={({ index }) => index + 28} - /> - } - /> - -
- - {/** VORONOI */} -
-

Voronoi

- - - `voronoi chart, x ${datum.x}, y ${datum.y}` - } - tabIndex={({ index }) => index + 35} - /> - } - /> - -
- - {/** CANDLESTICK */} -
-

Candlestick

- - - `candlestick chart, ${datum.x} open ${datum.open}, close ${datum.close}, low ${datum.low}, high ${datum.high}` - } - tabIndex={({ index }) => index + 43} - /> - } - /> - -
- - {/** ERRORBAR */} -
-

ErrorBar

- - datum.error * datum.x} - errorY={(datum) => datum.error * datum.y} - dataComponent={ - - `error bar chart, x ${datum.x}, y ${datum.y}, error margin ${datum.error}` - } - tabIndex={({ index }) => index + 60} - /> - } - /> - -
- - {/** ACCESSIBLE GROUP */} -
-

Accessible Group

- - - } - > - - - } - /> - - - -
-
- - ); - } -} diff --git a/demo/js/components/animation-demo.js b/demo/js/components/animation-demo.js deleted file mode 100644 index 59d8f1299..000000000 --- a/demo/js/components/animation-demo.js +++ /dev/null @@ -1,173 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { random, range } from "lodash"; -import { VictoryBar } from "victory-bar"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryArea } from "victory-area"; -import { VictoryTheme } from "victory-core"; - -export default class App extends React.Component { - constructor() { - super(); - this.state = { - data: this.getData(), - arrayData: this.getArrayData(), - groupedData: this.getGroupedData(), - multiTransitionData: this.getMultiTransitionData(), - areaTransitionData: this.getAreaTransitionData(), - }; - } - - componentDidMount() { - window.setInterval(() => { - this.setState({ - data: this.getData(), - groupedData: this.getGroupedData(), - multiTransitionData: this.getMultiTransitionData(), - areaTransitionData: this.getAreaTransitionData(), - style: this.getStyles(), - }); - }, 3000); - } - - getMultiTransitionData() { - const areas = random(8, 10); - return range(8).map(() => { - return range(areas).map((area) => { - return { x: area, y: random(2, 10) }; - }); - }); - } - - getAreaTransitionData() { - const areas = random(6, 10); - return range(areas).map((area) => { - return { x: area, y: random(2, 10) }; - }); - } - - getData() { - return range(20).map((i) => { - return { - x: i, - y: Math.random(), - }; - }); - } - - getGroupedData() { - return range(7).map(() => { - return [ - { - x: "rabbits", - y: random(1, 5), - }, - { - x: "cats", - y: random(1, 10), - }, - { - x: "dogs", - y: random(2, 10), - }, - { - x: "birds", - y: random(2, 10), - }, - { - x: "frogs", - y: random(2, 15), - }, - ]; - }); - } - - getArrayData() { - return range(40).map((i) => [i, i + Math.random() * 3]); - } - - getStyles() { - const colors = ["red", "orange", "gold", "tomato", "magenta", "purple"]; - return { - fill: colors[random(0, 5)], - }; - } - - render() { - const style = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
- d.x} - theme={VictoryTheme.material} - /> - - - - - - - {this.state.multiTransitionData.map((data, index) => { - return ( - - ); - })} - - - - - {this.state.multiTransitionData.map((data, index) => { - return ( - - ); - })} - - - - - - - - - - -
- ); - } -} diff --git a/demo/js/components/bubble-data.js b/demo/js/components/bubble-data.js deleted file mode 100644 index f67fd75e2..000000000 --- a/demo/js/components/bubble-data.js +++ /dev/null @@ -1,244 +0,0 @@ -const bubbleData = [ - { - name: "Australia", - y: 82.0, - x: 3800, - z: 22340024, - }, - { - name: "Austria", - y: 81.1, - x: 4546, - z: 8391643, - }, - { - name: "Belgium", - y: 80.5, - x: 4061, - z: 11047744, - }, - { - name: "Brazil", - y: 73.4, - x: 1043, - z: 196935134, - }, - { - name: "Canada", - y: 81.0, - x: 4522, - z: 34342780, - }, - { - name: "Chile", - y: 78.3, - x: 1568, - z: 17308449, - }, - { - name: "China", - y: 73.5, - x: 432, - z: 1344130000, - }, - { - name: "Czech Republic", - y: 78.0, - x: 1966, - z: 10496088, - }, - { - name: "Denmark", - y: 79.9, - x: 4495, - z: 5570572, - }, - { - name: "Estonia", - y: 76.3, - x: 1303, - z: 1327439, - }, - { - name: "Finland", - y: 80.6, - x: 3374, - z: 5388272, - }, - { - name: "France", - y: 82.2, - x: 4118, - z: 65338149, - }, - { - name: "Germany", - y: 80.8, - x: 4495, - z: 81797673, - }, - { - name: "Greece", - y: 80.8, - x: 2361, - z: 11123213, - }, - { - name: "Hungary", - y: 75.0, - x: 1689, - z: 9971727, - }, - { - name: "Iceland", - y: 82.4, - x: 3305, - z: 319014, - }, - { - name: "India", - y: 65.5, - x: 141, - z: 1221156319, - }, - { - name: "Indonesia", - y: 69.3, - x: 127, - z: 243801639, - }, - { - name: "Ireland", - y: 80.6, - x: 3700, - z: 4576794, - }, - { - name: "Israel", - y: 81.8, - x: 2239, - z: 7765800, - }, - { - name: "Italy", - y: 82.7, - x: 3012, - z: 59379449, - }, - { - name: "Japan", - y: 82.7, - x: 3213, - z: 127817277, - }, - { - name: "South Korea", - y: 81.1, - x: 2198, - z: 49779440, - }, - { - name: "Luxembourg", - y: 81.1, - x: 4755, - z: 518347, - }, - { - name: "Mexico", - y: 74.2, - x: 977, - z: 119361233, - }, - { - name: "Netherlands", - y: 81.3, - x: 5099, - z: 16693074, - }, - { - name: "New Zealand", - y: 81.2, - x: 3182, - z: 4384000, - }, - { - name: "Norway", - y: 81.4, - x: 5669, - z: 4953088, - }, - { - name: "Poland", - y: 76.9, - x: 1452, - z: 38063255, - }, - { - name: "Portugal", - y: 80.8, - x: 2619, - z: 10557560, - }, - { - name: "Russia", - y: 69.0, - x: 1316, - z: 142960868, - }, - { - name: "Slovak Republic", - y: 76.1, - x: 1915, - z: 5398384, - }, - { - name: "Slovenia", - y: 80.1, - x: 2421, - z: 2052843, - }, - { - name: "South Africa", - y: 52.6, - x: 943, - z: 51553479, - }, - { - name: "Spain", - y: 82.4, - x: 3072, - z: 46742697, - }, - { - name: "Sweden", - y: 81.9, - x: 3925, - z: 9449213, - }, - { - name: "Switzerland", - y: 82.8, - x: 5643, - z: 7912398, - }, - { - name: "Turkey", - y: 74.6, - x: 906, - z: 73058638, - }, - { - name: "United Kingdom", - y: 81.1, - x: 3405, - z: 63258918, - }, - { - name: "United States", - y: 78.7, - x: 8508, - z: 311721632, - }, -]; - -module.exports = bubbleData; diff --git a/demo/js/components/canvas-demo.js b/demo/js/components/canvas-demo.js deleted file mode 100644 index c2e6282cd..000000000 --- a/demo/js/components/canvas-demo.js +++ /dev/null @@ -1,321 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { - CanvasGroup, - CanvasCurve, - VictoryAxis, - VictoryBar, - CanvasBar, - VictoryChart, - VictoryLine, - VictoryScatter, - CanvasPoint, -} from "victory"; -import { range, random } from "lodash"; - -const populationData = [ - { - country: "United States", - values: [ - { year: 1960, value: 180671000 }, - { year: 1961, value: 183691000 }, - { year: 1962, value: 186538000 }, - { year: 1963, value: 189242000 }, - { year: 1964, value: 191889000 }, - { year: 1965, value: 194303000 }, - { year: 1966, value: 196560000 }, - { year: 1967, value: 198712000 }, - { year: 1968, value: 200706000 }, - { year: 1969, value: 202677000 }, - { year: 1970, value: 205052000 }, - { year: 1971, value: 207661000 }, - { year: 1972, value: 209896000 }, - { year: 1973, value: 211909000 }, - { year: 1974, value: 213854000 }, - { year: 1975, value: 215973000 }, - { year: 1976, value: 218035000 }, - { year: 1977, value: 220239000 }, - { year: 1978, value: 222585000 }, - { year: 1979, value: 225055000 }, - { year: 1980, value: 227225000 }, - { year: 1981, value: 229466000 }, - { year: 1982, value: 231664000 }, - { year: 1983, value: 233792000 }, - { year: 1984, value: 235825000 }, - { year: 1985, value: 237924000 }, - { year: 1986, value: 240133000 }, - { year: 1987, value: 242289000 }, - { year: 1988, value: 244499000 }, - { year: 1989, value: 246819000 }, - { year: 1990, value: 249623000 }, - { year: 1991, value: 252981000 }, - { year: 1992, value: 256514000 }, - { year: 1993, value: 259919000 }, - { year: 1994, value: 263126000 }, - { year: 1995, value: 266278000 }, - { year: 1996, value: 269394000 }, - { year: 1997, value: 272657000 }, - { year: 1998, value: 275854000 }, - { year: 1999, value: 279040000 }, - { year: 2000, value: 282162411 }, - { year: 2001, value: 284968955 }, - { year: 2002, value: 287625193 }, - { year: 2003, value: 290107933 }, - { year: 2004, value: 292805298 }, - { year: 2005, value: 295516599 }, - { year: 2006, value: 298379912 }, - { year: 2007, value: 301231207 }, - { year: 2008, value: 304093966 }, - { year: 2009, value: 306771529 }, - { year: 2010, value: 309321666 }, - { year: 2011, value: 311556874 }, - { year: 2012, value: 313830990 }, - { year: 2013, value: 315993715 }, - { year: 2014, value: 318301008 }, - { year: 2015, value: 320635163 }, - { year: 2016, value: 322941311 }, - { year: 2017, value: 324985539 }, - { year: 2018, value: 326687501 }, - { year: 2019, value: 328239523 }, - ], - }, - { - country: "United Kingdom", - values: [ - { year: 1960, value: 52400000 }, - { year: 1961, value: 52800000 }, - { year: 1962, value: 53250000 }, - { year: 1963, value: 53650000 }, - { year: 1964, value: 54000000 }, - { year: 1965, value: 54348050 }, - { year: 1966, value: 54648500 }, - { year: 1967, value: 54943600 }, - { year: 1968, value: 55211700 }, - { year: 1969, value: 55441750 }, - { year: 1970, value: 55663250 }, - { year: 1971, value: 55896223 }, - { year: 1972, value: 56086065 }, - { year: 1973, value: 56194527 }, - { year: 1974, value: 56229974 }, - { year: 1975, value: 56225800 }, - { year: 1976, value: 56211968 }, - { year: 1977, value: 56193492 }, - { year: 1978, value: 56196504 }, - { year: 1979, value: 56246951 }, - { year: 1980, value: 56314216 }, - { year: 1981, value: 56333829 }, - { year: 1982, value: 56313641 }, - { year: 1983, value: 56332848 }, - { year: 1984, value: 56422072 }, - { year: 1985, value: 56550268 }, - { year: 1986, value: 56681396 }, - { year: 1987, value: 56802050 }, - { year: 1988, value: 56928327 }, - { year: 1989, value: 57076711 }, - { year: 1990, value: 57247586 }, - { year: 1991, value: 57424897 }, - { year: 1992, value: 57580402 }, - { year: 1993, value: 57718614 }, - { year: 1994, value: 57865745 }, - { year: 1995, value: 58019030 }, - { year: 1996, value: 58166950 }, - { year: 1997, value: 58316954 }, - { year: 1998, value: 58487141 }, - { year: 1999, value: 58682466 }, - { year: 2000, value: 58892514 }, - { year: 2001, value: 59119673 }, - { year: 2002, value: 59370479 }, - { year: 2003, value: 59647577 }, - { year: 2004, value: 59987905 }, - { year: 2005, value: 60401206 }, - { year: 2006, value: 60846820 }, - { year: 2007, value: 61322463 }, - { year: 2008, value: 61806995 }, - { year: 2009, value: 62276270 }, - { year: 2010, value: 62766365 }, - { year: 2011, value: 63258810 }, - { year: 2012, value: 63700215 }, - { year: 2013, value: 64128273 }, - { year: 2014, value: 64602298 }, - { year: 2015, value: 65116219 }, - { year: 2016, value: 65611593 }, - { year: 2017, value: 66058859 }, - { year: 2018, value: 66460344 }, - { year: 2019, value: 66834405 }, - { year: 2020, value: null }, - ], - }, - { - country: "China", - values: [ - { year: 1960, value: 667070000 }, - { year: 1961, value: 660330000 }, - { year: 1962, value: 665770000 }, - { year: 1963, value: 682335000 }, - { year: 1964, value: 698355000 }, - { year: 1965, value: 715185000 }, - { year: 1966, value: 735400000 }, - { year: 1967, value: 754550000 }, - { year: 1968, value: 774510000 }, - { year: 1969, value: 796025000 }, - { year: 1970, value: 818315000 }, - { year: 1971, value: 841105000 }, - { year: 1972, value: 862030000 }, - { year: 1973, value: 881940000 }, - { year: 1974, value: 900350000 }, - { year: 1975, value: 916395000 }, - { year: 1976, value: 930685000 }, - { year: 1977, value: 943455000 }, - { year: 1978, value: 956165000 }, - { year: 1979, value: 969005000 }, - { year: 1980, value: 981235000 }, - { year: 1981, value: 993885000 }, - { year: 1982, value: 1008630000 }, - { year: 1983, value: 1023310000 }, - { year: 1984, value: 1036825000 }, - { year: 1985, value: 1051040000 }, - { year: 1986, value: 1066790000 }, - { year: 1987, value: 1084035000 }, - { year: 1988, value: 1101630000 }, - { year: 1989, value: 1118650000 }, - { year: 1990, value: 1135185000 }, - { year: 1991, value: 1150780000 }, - { year: 1992, value: 1164970000 }, - { year: 1993, value: 1178440000 }, - { year: 1994, value: 1191835000 }, - { year: 1995, value: 1204855000 }, - { year: 1996, value: 1217550000 }, - { year: 1997, value: 1230075000 }, - { year: 1998, value: 1241935000 }, - { year: 1999, value: 1252735000 }, - { year: 2000, value: 1262645000 }, - { year: 2001, value: 1271850000 }, - { year: 2002, value: 1280400000 }, - { year: 2003, value: 1288400000 }, - { year: 2004, value: 1296075000 }, - { year: 2005, value: 1303720000 }, - { year: 2006, value: 1311020000 }, - { year: 2007, value: 1317885000 }, - { year: 2008, value: 1324655000 }, - { year: 2009, value: 1331260000 }, - { year: 2010, value: 1337705000 }, - { year: 2011, value: 1344130000 }, - { year: 2012, value: 1350695000 }, - { year: 2013, value: 1357380000 }, - { year: 2014, value: 1364270000 }, - { year: 2015, value: 1371220000 }, - { year: 2016, value: 1378665000 }, - { year: 2017, value: 1386395000 }, - { year: 2018, value: 1392730000 }, - { year: 2019, value: 1397715000 }, - { year: 2020, value: null }, - ], - }, -]; - -const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", -}; - -const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", -}; - -const formatPopulation = (value) => { - const ONE_BILLION = 1000000000; - const ONE_MILLION = 1000000; - if (value >= ONE_BILLION) { - return `${value / ONE_BILLION}B`; - } else if (value >= ONE_MILLION) { - return `${value / ONE_MILLION}M`; - } - return value; -}; - -const getRandomData = (length = 100) => { - const data = []; - for (let i = 0; i < length; i++) { - data.push({ x: Math.random(), y: Math.random() }); - } - return data; -}; - -const CanvasDemo = () => { - const getData = () => { - return range(20).map((i) => { - return { - x: i, - y: Math.random(), - }; - }); - }; - - const getStyles = () => { - const colors = ["red", "orange", "gold", "tomato", "magenta", "purple"]; - return { - fill: colors[random(0, 5)], - }; - }; - - const [barData, setBarData] = React.useState(getData()); - const [barStyle, setBarStyle] = React.useState(getStyles()); - - React.useEffect(() => { - const interval = window.setInterval(() => { - setBarData(getData()); - setBarStyle(getStyles()); - }, 3000); - return () => { - window.clearInterval(interval); - }; - }, [setBarData, setBarStyle]); - - return ( -
- - {populationData.map(({ country, values }) => { - const data = values.map(({ year, value }) => ({ - x: year, - y: value, - })); - return ( - } - dataComponent={} - /> - ); - })} - v} /> - - - - } - dataComponent={} - data={getRandomData(1000)} - /> - - - } - dataComponent={} - animate - data={barData} - style={{ - data: barStyle, - }} - /> - -
- ); -}; - -export default CanvasDemo; diff --git a/demo/js/components/create-container-demo.js b/demo/js/components/create-container-demo.js deleted file mode 100644 index 0e603a717..000000000 --- a/demo/js/components/create-container-demo.js +++ /dev/null @@ -1,289 +0,0 @@ -/* eslint-disable no-magic-numbers,react/no-multi-comp */ -import React from "react"; -import PropTypes from "prop-types"; -import { round } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { createContainer } from "victory-create-container"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryTooltip } from "victory-tooltip"; -import { VictoryLegend } from "victory-legend"; - -const Charts = ({ behaviors }) => { - // eslint-disable-line react/prop-types - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - const chartStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - const CustomContainer = createContainer(...behaviors); - const behaviorsList = behaviors.map((behavior) => `"${behavior}"`).join(", "); - - return ( -
- 
{`VictoryCreateContainer(${behaviorsList})`}
-
- {/* A */} - `y: ${datum.y}`} - labelComponent={ - - } - selectedDomain={{ x: [1.5, 2] }} - /> - } - > - - (active ? 4 : 2), - }, - labels: { fill: "tomato" }, - }} - /> - - (active ? 4 : 2), - }, - labels: { fill: "blue" }, - }} - /> - - (active ? 4 : 2), - }, - labels: { fill: "black" }, - }} - /> - - - {/* B */} - round(datum.x, 2)} - cursorLabel={({ datum }) => round(datum.x, 2)} - selectionStyle={{ - stroke: "tomato", - strokeWidth: 2, - fill: "tomato", - fillOpacity: 0.1, - }} - selectedDomain={{ x: [0.4, 0.95], y: [0.5, 0.8] }} - defaultCursorValue={0.99} - /> - } - > - (active ? "tomato" : "black"), - }, - }} - size={({ active }) => (active ? 5 : 3)} - y={(d) => d.x * d.x} - /> - - - {/* C */} - - } - > - - (active ? 5 : 3)} - labels={({ datum }) => datum.y} - labelComponent={} - data={[ - { x: 1, y: -5 }, - { x: 2, y: 4 }, - { x: 3, y: 2 }, - { x: 4, y: 0 }, - { x: 5, y: 1 }, - { x: 6, y: -3 }, - { x: 7, y: 3 }, - ]} - /> - (active ? 5 : 3)} - labels={({ datum }) => datum.y} - labelComponent={} - 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 }, - ]} - /> - datum.y} - labelComponent={} - size={({ active }) => (active ? 5 : 3)} - /> - - - - {/* D */} - - } - > - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - (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 }, - ]} - /> - -
-
- ); -}; - -Charts.propTypes = { - behaviors: PropTypes.arrayOf(PropTypes.string).isRequired, -}; - -class App extends React.Component { - render() { - return ( -
- - - - -
- ); - } -} - -export default App; diff --git a/demo/js/components/debug-demo.js b/demo/js/components/debug-demo.js deleted file mode 100644 index ceb5e1fb5..000000000 --- a/demo/js/components/debug-demo.js +++ /dev/null @@ -1,201 +0,0 @@ -/* eslint-disable no-magic-numbers */ - -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryBar } from "victory-bar"; -import { VictoryArea } from "victory-area"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryPortal } from "victory-core"; -import { VictorySelectionContainer } from "victory-selection-container"; -import { VictoryVoronoiContainer } from "victory-voronoi-container"; -import { VictoryZoomContainer } from "victory-zoom-container"; - -class App extends React.Component { - 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 ( -
- } - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - "HELLO"} /> - } - > - (active ? "red" : "black") }, - }} - data={[ - { x: 0, y: 3.5, y0: 2.5 }, - { x: 0, y: 11, y0: 5 }, - { x: 1, y: 2, y0: 1 }, - { x: 1, y: 7, y0: 4 }, - { x: 2, y: 4, y0: 3 }, - { x: 2, y: 12, y0: 7 }, - ]} - /> - (active ? "black" : "red") }, - }} - data={[ - { x: 0, y: 3.5 }, - { x: 0, y: 11 }, - { x: 1, y: 2 }, - { x: 1, y: 7 }, - { x: 2, y: 4 }, - { x: 2, y: 12 }, - ]} - /> - - - - } - > - - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - (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 }, - ]} - /> - - -
- ); - } -} - -export default App; diff --git a/demo/js/components/draggable-demo.js b/demo/js/components/draggable-demo.js deleted file mode 100644 index b712bde6f..000000000 --- a/demo/js/components/draggable-demo.js +++ /dev/null @@ -1,256 +0,0 @@ -/* eslint-disable no-magic-numbers,react/no-multi-comp */ - -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryAxis } from "victory-axis"; -import { VictoryBar } from "victory-bar"; -import { VictoryBrushLine } from "victory-brush-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryClipContainer, Point, Selection } from "victory-core"; -import { VictoryZoomContainer } from "victory-zoom-container"; -import { VictoryBrushContainer } from "victory-brush-container"; - -const bars = [ - { name: "SEA", range: [new Date(2013, 1, 1), new Date(2019, 1, 1)] }, - { name: "HKG", range: [new Date(2015, 1, 1), new Date(2015, 5, 1)] }, - { name: "LHR", range: [new Date(2016, 5, 1), new Date(2019, 1, 1)] }, - { name: "DEN", range: [new Date(2018, 8, 1), new Date(2019, 1, 1)] }, -]; - -const points = [ - { name: "SEA", date: new Date(2012, 9, 1) }, - { name: "HKG", date: new Date(2014, 3, 1) }, - { name: "LHR", date: new Date(2015, 6, 1) }, - { name: "DEN", date: new Date(2018, 3, 1) }, -]; - -class DraggablePoint extends React.Component { - static defaultEvents = [ - { - target: "data", - eventHandlers: { - onMouseOver: (evt, targetProps) => { - return [ - { - mutation: () => Object.assign({}, targetProps, { active: true }), - }, - ]; - }, - onMouseDown: (evt, targetProps) => { - return [ - { - mutation: () => - Object.assign({}, targetProps, { dragging: true }), - }, - ]; - }, - onMouseMove: (evt, targetProps) => { - const { scale, onPointChange, datum } = targetProps; - if (targetProps.dragging) { - const { x } = Selection.getSVGEventCoordinates(evt); - const point = scale.y.invert(x); - const name = datum.name; - onPointChange({ name, date: point }); - return [ - { - mutation: () => Object.assign({}, targetProps, { x }), - }, - ]; - } - return null; - }, - onMouseUp: (evt, targetProps) => { - return [ - { - mutation: () => - Object.assign({}, targetProps, { - dragging: false, - active: false, - }), - }, - ]; - }, - onMouseLeave: (evt, targetProps) => { - return [ - { - mutation: () => - Object.assign({}, targetProps, { - dragging: false, - active: false, - }), - }, - ]; - }, - }, - }, - ]; - - render() { - return ; - } -} - -class App extends React.Component { - constructor() { - super(); - this.state = { bars, points }; - } - - handleZoom(domain) { - this.setState({ zoomDomain: domain }); - } - - onDomainChange(domain, props) { - const { name } = props; - const newBars = this.state.bars.map((bar) => - bar.name === name ? { name, range: domain } : bar, - ); - this.setState({ bars: newBars }); - } - - onPointChange(point) { - const newPoints = this.state.points.map((p) => - p.name === point.name ? point : p, - ); - this.setState({ points: newPoints }); - } - - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const sharedProps = { - width: 800, - domain: { - y: [new Date(2012, 1, 1), new Date(2019, 1, 1)], - x: [0.5, 4.5], - }, - }; - - return ( -
- - } - /> - } - > - - - {bars.map((bar, index) => ( - (active ? 1 : 0.5), - }} - /> - } - style={{ - axis: { stroke: "none" }, - }} - axisValue={bar.name} - tickFormat={() => ""} - /> - ))} - - } - style={{ - data: { - fill: "skyBlue", - opacity: ({ active }) => (active ? 1 : 0.5), - cursor: "move", - }, - }} - x="name" - y="date" - size={10} - /> - - - } - > - - t.getFullYear()} - /> - - d.range[0]} - y0={(d) => d.range[1]} - /> - -
- ); - } -} - -export default App; diff --git a/demo/js/components/events-demo.js b/demo/js/components/events-demo.js deleted file mode 100644 index f688e5ab1..000000000 --- a/demo/js/components/events-demo.js +++ /dev/null @@ -1,269 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryArea } from "victory-area"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryTheme, VictoryLabel } from "victory-core"; - -class App extends React.Component { - 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 ( -
-
- { - evt.stopPropagation(); - return [ - { - mutation: () => { - return { style: { fill: "orange", width: 20 } }; - }, - }, - { - target: "labels", - eventKey: 3, - mutation: () => { - return { text: "now click me" }; - }, - }, - ]; - }, - }, - }, - { - target: "parent", - eventHandlers: { - onClick: () => { - return [ - { - target: "data", - mutation: () => { - return { style: { fill: "tomato", width: 10 } }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - { - return [ - { - target: "labels", - eventKey: [3, 4, 5], - mutation: () => { - return { text: "o shit" }; - }, - }, - { - childName: "line", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { stroke: "lime" }), - }; - }, - }, - { - childName: "line", - target: "labels", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "green" }), - text: "waddup", - }; - }, - }, - ]; - }, - }, - }, - ]} - > - null} - style={{ data: { width: 15, fill: "green" } }} - data={[ - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: 3 }, - { x: 4, y: 2 }, - { x: 5, y: 1 }, - { x: 6, y: 2 }, - { x: 7, y: 3 }, - { x: 8, y: 2 }, - { x: 9, y: 1 }, - { x: 10, y: 2 }, - { x: 11, y: 3 }, - { x: 12, y: 2 }, - { x: 13, y: 1 }, - ]} - /> - 0.5} - style={{ data: { stroke: "blue", strokeWidth: 5 } }} - /> - - - { - evt.stopPropagation(); - return [ - { - mutation: () => { - return { style: { fill: "orange" } }; - }, - }, - ]; - }, - }, - }, - { - target: "parent", - eventHandlers: { - onClick: () => { - return [ - { - childName: "bar", - target: "labels", - mutation: () => { - return { text: "o shit" }; - }, - }, - ]; - }, - }, - }, - ]} - > - - null} /> - - - { - return [ - { - childName: ["area-3", "area-4"], - target: "data", - mutation: (props) => { - const fill = props.style && props.style.fill; - return fill === "gold" - ? null - : { style: { fill: "gold" } }; - }, - }, - ]; - }, - }, - }, - ]} - > - - - - - - - -
-
- ); - } -} - -export default App; diff --git a/demo/js/components/external-events-demo.js b/demo/js/components/external-events-demo.js deleted file mode 100644 index 65e23e864..000000000 --- a/demo/js/components/external-events-demo.js +++ /dev/null @@ -1,293 +0,0 @@ -/* eslint-disable no-magic-numbers */ - -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryArea } from "victory-area"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryZoomContainer } from "victory-zoom-container"; -import { VictoryVoronoiContainer } from "victory-voronoi-container"; -import { range } from "lodash"; - -class App extends React.Component { - constructor() { - super(); - this.state = { - data: this.getData(), - }; - } - - componentDidMount() { - window.setInterval(() => { - this.setState({ - data: this.getData(), - }); - }, 3000); - } - - getData() { - return range(10).map((i) => { - return { - x: i, - y: Math.random(), - }; - }); - } - - removeMutation() { - this.setState({ - externalMutation: undefined, - }); - } - - handleClick() { - const callback = this.removeMutation.bind(this); - this.setState({ - externalMutation: [ - { - childName: "data", - target: ["data", "labels"], - eventKey: "all", - mutation: (props) => { - const fill = props.style && props.style.fill; - return fill === "blue" - ? { style: Object.assign({}, props.style, { fill: "red" }) } - : { style: Object.assign({}, props.style, { fill: "blue" }) }; - }, - callback, - }, - ], - }); - } - - clearMutation() { - const callback = this.removeMutation.bind(this); - this.setState({ - externalMutation: [ - { - childName: "data", - target: "all", - eventKey: "all", - mutation: () => ({ style: undefined }), - callback, - }, - ], - }); - } - - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - const chartStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "35%" }, - }; - return ( -
-

Debug

-
-
    -
  • - -
    • -
  • - -
    • -
- { - return [ - { - mutation: () => { - return { style: { fill: "orange" } }; - }, - }, - { - target: "labels", - mutation: (props) => { - return props.text === "clicked" - ? { text: "unclicked" } - : { text: "clicked" }; - }, - }, - ]; - }, - }, - }, - ]} - > - null} - data={this.state.data} - style={{ data: { fill: "cyan" } }} - /> - - - { - return [ - { - mutation: () => { - return { style: { fill: "orange" } }; - }, - }, - { - target: "labels", - mutation: (props) => { - return props.text === "clicked" - ? { text: "unclicked" } - : { text: "clicked" }; - }, - }, - ]; - }, - }, - }, - ]} - /> - { - return [ - { - mutation: () => { - return { style: { fill: "orange" } }; - }, - }, - { - target: "labels", - mutation: (props) => { - return props.text === "clicked" - ? { text: "unclicked" } - : { text: "clicked" }; - }, - }, - ]; - }, - }, - }, - ]} - > - - - - - - - } - > - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - - } - externalEventMutations={this.state.externalMutation} - > - - - -
-
- ); - } -} - -export default App; diff --git a/demo/js/components/group-demo.js b/demo/js/components/group-demo.js deleted file mode 100644 index d4410e467..000000000 --- a/demo/js/components/group-demo.js +++ /dev/null @@ -1,169 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryErrorBar } from "victory-errorbar"; -import { VictoryTooltip } from "victory-tooltip"; -import { VictoryVoronoi } from "victory-voronoi"; -import { range, random } from "lodash"; - -class App extends React.Component { - getGroupData() { - return range(5).map(() => { - return [ - { - x: "rabbits", - y: random(1, 5), - }, - { - x: "cats", - y: random(1, 10), - }, - { - x: "dogs", - y: random(1, 15), - }, - ]; - }); - } - - getMultiData() { - const bars = random(3, 5); - return range(4).map(() => { - return range(bars).map((bar) => { - return { x: bar + 1, y: random(2, 10) }; - }); - }); - } - - 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 ( -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - } /> - - - - - Math.sin(2 * Math.PI * data.x)}> - - } - labels={({ datum }) => datum.y} - /> - - -
-
- ); - } -} - -export default App; diff --git a/demo/js/components/horizontal-demo.js b/demo/js/components/horizontal-demo.js deleted file mode 100644 index 2ffb5fb99..000000000 --- a/demo/js/components/horizontal-demo.js +++ /dev/null @@ -1,557 +0,0 @@ -/* eslint-disable no-magic-numbers */ - -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryBar } from "victory-bar"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryLine } from "victory-line"; -import { VictoryArea } from "victory-area"; -import { VictoryCandlestick } from "victory-candlestick"; -import { VictoryErrorBar } from "victory-errorbar"; -import { VictoryBoxPlot } from "victory-box-plot"; -import { VictoryAxis } from "victory-axis"; -import { VictoryBrushContainer } from "victory-brush-container"; -import { range, random } from "lodash"; - -const errorData = [ - { x: 1, y: 10, errorX: [1, 0.5], errorY: 1 }, - { x: 2, y: 20, errorX: [0.5, 3], errorY: 1 }, - { x: 3, y: 30, errorX: [1, 3], errorY: [2, 3] }, - { x: 4, y: 20, errorX: [1, 0], errorY: 2 }, - { x: 5, y: 10, errorX: [1, 0.5], errorY: 2 }, -]; - -class App extends React.Component { - getBarData() { - return range(5).map(() => { - return [ - { x: "cat", y: random(10) }, - { x: "dog", y: random(10) }, - { x: "bird", y: random(10) }, - ]; - }); - } - - 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 ( -
- - - - - - - - "hi"} - /> - - - - - - - - - - - - - - - {this.getBarData().map((data, index) => { - return ; - })} - - - {this.getBarData().map((data, index) => { - return ; - })} - - - {this.getBarData().map((data, index) => { - return ; - })} - - - - - - - - - - - - - - - - - - - - - - - - - - - "yo"} - 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: null }, - { x: new Date(2005, 1, 1), y: 305 }, - { x: new Date(2011, 1, 1), y: 270 }, - { x: new Date(2015, 1, 1), y: 470 }, - ]} - /> - - "yo"} - 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: null }, - { x: new Date(2005, 1, 1), y: 305 }, - { x: new Date(2011, 1, 1), y: 270 }, - { x: new Date(2015, 1, 1), y: 470 }, - ]} - /> - - "yo"} - 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 }, - ]} - /> - - - - - - - - - - - - - - - - - - "yo"} - data={[ - { x: new Date(2014, 6, 1), open: 9, close: 30, high: 56, low: 7 }, - { - x: new Date(2015, 6, 2), - open: 80, - close: 40, - high: 120, - low: 10, - }, - { - x: new Date(2016, 6, 3), - open: 50, - close: 80, - high: 90, - low: 20, - }, - { - x: new Date(2017, 6, 4), - open: 70, - close: 22, - high: 70, - low: 5, - }, - { - x: new Date(2018, 6, 5), - open: 20, - close: 35, - high: 50, - low: 10, - }, - { - x: new Date(2019, 6, 6), - open: 35, - close: 30, - high: 40, - low: 3, - }, - { - x: new Date(2020, 6, 7), - open: 30, - close: 90, - high: 95, - low: 30, - }, - { - x: new Date(2021, 6, 8), - open: 80, - close: 81, - high: 83, - low: 75, - }, - ]} - /> - - - - "yo"} /> - - - - - - - Math.sin(2 * Math.PI * d.x)} - sample={25} - /> - - - "yo"} - 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: null }, - { x: new Date(2005, 1, 1), y: 305 }, - { x: new Date(2011, 1, 1), y: 270 }, - { x: new Date(2015, 1, 1), y: 470 }, - ]} - /> - - - - - - - - - } - > - - - - - - - new Date(x).getFullYear()} - /> - - -
- ); - } -} - -export default App; diff --git a/demo/js/components/immutable-demo.js b/demo/js/components/immutable-demo.js deleted file mode 100644 index e9d2bdbbd..000000000 --- a/demo/js/components/immutable-demo.js +++ /dev/null @@ -1,1006 +0,0 @@ -/* eslint-disable no-magic-numbers, react/no-multi-comp */ -import React from "react"; -import PropTypes from "prop-types"; -import { keys, random, range, round } from "lodash"; -import { fromJS } from "immutable"; -import { VictoryClipContainer, VictoryLabel, VictoryTheme } from "victory-core"; - -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryArea } from "victory-area"; -import { VictoryAxis } from "victory-axis"; -import { VictoryPolarAxis } from "victory-polar-axis"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryErrorBar } from "victory-errorbar"; -import { VictoryCandlestick } from "victory-candlestick"; -import { VictoryVoronoi } from "victory-voronoi"; -import { VictoryZoomContainer } from "victory-zoom-container"; -import { VictoryVoronoiContainer } from "victory-voronoi-container"; -import { VictorySelectionContainer } from "victory-selection-container"; -import { VictoryCursorContainer } from "victory-cursor-container"; -import { VictoryBrushContainer } from "victory-brush-container"; -import { VictoryTooltip } from "victory-tooltip"; -import { VictoryLegend } from "victory-legend"; - -class Wrapper extends React.Component { - static propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), - }; - - renderChildren(props) { - const children = React.Children.toArray(props.children); - return children.map((child) => { - return React.cloneElement(child, Object.assign({}, child.props, props)); - }); - } - - render() { - return {this.renderChildren(this.props)}; - } -} - -const multiAxisData = [ - { strength: 1, intelligence: 250, stealth: 45 }, - { strength: 2, intelligence: 300, stealth: 75 }, - { strength: 5, intelligence: 225, stealth: 60 }, -]; - -class App extends React.Component { - constructor(props) { - super(props); - this.state = { - scatterData: this.getScatterData(), - multiTransitionData: this.getMultiTransitionData(), - multiTransitionAreaData: this.getMultiTransitionAreaData(), - multiAxisData: this.processMultiAxisData(multiAxisData), - multiAxisMaxima: this.getMaxData(multiAxisData), - zoomDomain: {}, - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - scatterData: this.getScatterData(), - multiTransitionData: this.getMultiTransitionData(), - multiTransitionAreaData: this.getMultiTransitionAreaData(), - }); - }, 3000); - } - - getScatterData() { - const colors = [ - "violet", - "cornflowerblue", - "gold", - "orange", - "turquoise", - "tomato", - "greenyellow", - ]; - const symbols = [ - "circle", - "star", - "square", - "triangleUp", - "triangleDown", - "diamond", - "plus", - ]; - const elementNum = random(10, 40); - return fromJS( - range(elementNum).map((index) => { - const scaledIndex = Math.floor(index % 7); - return { - x: random(10, 50), - y: random(2, 100), - size: random(8) + 3, - symbol: symbols[scaledIndex], - fill: colors[random(0, 6)], - opacity: 1, - }; - }), - ); - } - - getMultiTransitionData() { - const bars = random(3, 5); - return fromJS( - range(4).map(() => { - return range(bars).map((bar) => { - return { x: bar + 1, y: random(2, 10) }; - }); - }), - ); - } - - getMultiTransitionAreaData() { - const areas = random(8, 10); - return fromJS( - range(8).map(() => { - return range(areas).map((area) => { - return { x: area, y: random(2, 10) }; - }); - }), - ); - } - - getMaxData(data) { - const groupedData = keys(data[0]).reduce((memo, key) => { - memo[key] = data.map((d) => d[key]); - return memo; - }, {}); - return keys(groupedData).reduce((memo, key) => { - memo[key] = Math.max(...groupedData[key]); - return memo; - }, {}); - } - - processMultiAxisData(data) { - const maxByGroup = this.getMaxData(data); - const makeDataArray = (d) => { - return keys(d).map((key) => { - return { x: key, y: d[key] / maxByGroup[key] }; - }); - }; - return fromJS(data.map((datum) => makeDataArray(datum))); - } - - 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 ( -
-

with immutable.js data

- -
- - } - data={this.state.scatterData} - style={{ - data: { - fill: ({ datum }) => datum.fill, - opacity: ({ datum }) => datum.opacity, - }, - }} - animate={{ - onExit: { - duration: 500, - before: () => ({ opacity: 0.3 }), - }, - onEnter: { - duration: 500, - before: () => ({ opacity: 0.3 }), - after: (datum) => ({ opacity: datum.opacity || 1 }), - }, - }} - /> - - - { - return [ - { - childName: "area-2", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "gold" }), - }; - }, - }, - { - childName: "area-3", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "orange" }), - }; - }, - }, - { - childName: "area-4", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "red" }), - }; - }, - }, - ]; - }, - }, - }, - ]} - > - - - - - - - - - - - {this.state.multiTransitionData.map((data, index) => { - return ( - - - - ); - })} - - - - Math.round(datum.y)} - data={fromJS([ - { 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 }, - ])} - /> - - - - - - - - { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style.labels, { - fill: "orange", - }), - }; - }, - }, - ]; - }, - }, - }, - { - target: "data", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "blue" }), - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - - { - return [ - { - target: "labels", - eventKey: [3, 4, 5], - mutation: () => { - return { text: "o shit" }; - }, - }, - { - childName: "line", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { stroke: "lime" }), - }; - }, - }, - { - childName: "line", - target: "labels", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "green" }), - text: "waddup", - }; - }, - }, - ]; - }, - }, - }, - ]} - > - - 0.5} - style={{ data: { stroke: "blue", strokeWidth: 5 } }} - /> - - - - - - - - - - - - - - - - - - - - - [ - { - mutation: () => ({ style: { fill: "orange" } }), - }, - ], - }, - }, - ]} - /> - - } - labels={({ datum }) => `hello #${datum.x}`} - data={fromJS([ - { x: 1, open: 5, close: 10, high: 15, low: 0 }, - { x: 2, open: 15, close: 10, high: 20, low: 5 }, - { x: 3, open: 15, close: 20, high: 25, low: 10 }, - { x: 4, open: 20, close: 25, high: 30, low: 15 }, - { x: 5, open: 30, close: 25, high: 35, low: 20 }, - ])} - /> - - } - theme={VictoryTheme.material} - events={[ - { - childName: "area-1", - target: "data", - eventHandlers: { - onClick: () => [ - { - childName: "area-2", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "gold" }), - }; - }, - }, - { - childName: "area-3", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "orange" }), - }; - }, - }, - { - childName: "area-4", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "red" }), - }; - }, - }, - ], - }, - }, - ]} - > - - - - - - - - - - - - `y:${datum.y}`} - labelComponent={ - - } - /> - } - > - (active ? 4 : 2), - }, - labels: { fill: "tomato" }, - }} - /> - (active ? 4 : 2), - }, - labels: { fill: "blue" }, - }} - /> - (active ? 4 : 2), - }, - labels: { fill: "black" }, - }} - /> - - - - `${round(datum.x, 2)} , ${round(datum.y, 2)}` - } - /> - } - > - - ({ x, y: x + 10 * Math.random() })), - )} - /> - - -
- - this.setState({ zoomDomain: domain }) - } - /> - } - > - - - - - this.setState({ zoomDomain: domain }) - } - /> - } - > - new Date(x).getFullYear()} - /> - - -
- - - - {this.state.multiTransitionAreaData.map((data, index) => { - return ( - - ); - })} - - - - } - > - - - (active ? "tomato" : "gray") }, - }} - labels={({ datum }) => datum.y} - labelComponent={} - /> - - - - (active ? "blue" : "gray") }, - }} - labels={({ datum }) => datum.y} - labelComponent={} - /> - - - - (active ? "black" : "gray") }, - }} - labels={({ datum }) => datum.y} - labelComponent={} - /> - - - - - {keys(this.state.multiAxisMaxima).map((key, i) => { - return ( - - } - labelPlacement="perpendicular" - axisValue={i + 1} - label={key} - tickFormat={(t) => t * this.state.multiAxisMaxima[key]} - tickValues={[0.25, 0.5, 0.75]} - /> - ); - })} - ""} /> - - {this.state.multiAxisData.map((data, i) => { - return ; - })} - - -
-
- ); - } -} - -export default App; diff --git a/demo/js/components/ouia-demo.js b/demo/js/components/ouia-demo.js deleted file mode 100644 index 864565480..000000000 --- a/demo/js/components/ouia-demo.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryLine } from "victory-line"; -import { VictoryContainer } from "victory-core"; - -class App extends React.Component { - constructor(props) { - super(props); - } - - 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 ( -
-

Open UI Automation (OUIA)

-
- - } - style={chartStyle} - > - - -
-
- ); - } -} - -export default App; diff --git a/demo/js/components/performance.js b/demo/js/components/performance.js deleted file mode 100644 index 605941a6b..000000000 --- a/demo/js/components/performance.js +++ /dev/null @@ -1,90 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { range } from "lodash"; -import { VictorySelectionContainer } from "victory-selection-container"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryChart } from "victory-chart"; - -const scatterData = range(4000).map(() => ({ - x: Math.random(), - y: Math.random(), -})); - -class App extends React.Component { - constructor() { - super(); - this.state = { - points: [], - }; - } - - handleSelection(datasets) { - const points = datasets.reduce( - (memo, dataset) => memo.concat(dataset.data), - [], - ); - this.setState({ points }); - } - - handleClearSelection() { - this.setState({ points: [] }); - } - - listData() { - const points = this.state.points.map((point, index) => { - return
  • {`${point.x}, ${point.y}`}
    • ; - }); - - return ( -
    -

    Points

    -
      {points}
    -
    - ); - } - - 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 ( -
    -
    - - } - style={{ parent: chartStyle.parent }} - > - (active ? "tomato" : "black"), - }, - }} - data={scatterData} - /> - -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/selection-demo.js b/demo/js/components/selection-demo.js deleted file mode 100644 index 7e67f5d63..000000000 --- a/demo/js/components/selection-demo.js +++ /dev/null @@ -1,377 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictorySelectionContainer } from "victory-selection-container"; -import { VictoryLegend } from "victory-legend"; -import { VictoryTooltip } from "victory-tooltip"; - -class App extends React.Component { - constructor() { - super(); - this.state = { - points: [], - }; - } - - handleSelection(datasets) { - const points = datasets.reduce( - (memo, dataset) => memo.concat(dataset.data), - [], - ); - this.setState({ points }); - } - - handleClearSelection() { - this.setState({ points: [] }); - } - - listData() { - const points = this.state.points.map((point, index) => { - return
  • {`${point.x}, ${point.y}`}
    • ; - }); - - return ( -
    -

    Points

    -
      {points}
    -
    - ); - } - - 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 ( -
    -
    - {this.listData()} - - } - > - - - - - - - } - > - - - (active ? "tomato" : "gray") }, - }} - labels={({ datum }) => datum.y} - labelComponent={} - /> - - - - - (active ? "blue" : "gray") }, - }} - labels={({ datum }) => datum.y} - labelComponent={} - /> - - - - - (active ? "black" : "gray") }, - }} - labels={({ datum }) => datum.y} - labelComponent={} - /> - - - - (active ? "tomato" : "black"), - }, - }} - containerComponent={ - - } - 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 }, - ]} - /> - - (active ? "tomato" : "black"), - }, - }} - containerComponent={ - - } - size={({ active }) => (active ? 5 : 3)} - y={(d) => d.x * d.x} - /> - - - } - > - (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 }, - ]} - /> - (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 }, - ]} - /> - (active ? 5 : 3)} - /> - - - - } - > - - (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 }, - ]} - /> - (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 }, - ]} - /> - (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 }, - ]} - /> - - -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/symbol-data.js b/demo/js/components/symbol-data.js deleted file mode 100644 index ce53c440d..000000000 --- a/demo/js/components/symbol-data.js +++ /dev/null @@ -1,76 +0,0 @@ -const symbolData = [ - { - x: 1, - y: 1, - size: 8, - symbol: "circle", - label: "circle", - fill: "red", - opacity: 0.8, - }, - { - x: 2, - y: 2, - size: 8, - symbol: "diamond", - label: "diamond", - fill: "red", - opacity: 0.8, - }, - { - x: 3, - y: 3, - size: 8, - symbol: "plus", - label: "plus", - fill: "red", - opacity: 0.8, - }, - { - x: 4, - y: 4, - size: 8, - symbol: "square", - label: "square", - fill: "red", - opacity: 0.8, - }, - { - x: 5, - y: 5, - size: 8, - symbol: "star", - label: "star", - fill: "red", - opacity: 0.8, - }, - { - x: 6, - y: 6, - size: 8, - symbol: "triangleDown", - label: "triangleDown", - fill: "red", - opacity: 0.8, - }, - { - x: 7, - y: 7, - size: 8, - symbol: "triangleUp", - label: "triangleUp", - fill: "red", - opacity: 0.8, - }, - { - x: 8, - y: 8, - size: 8, - symbol: "cross", - label: "cross", - fill: "red", - opacity: 0.8, - }, -]; - -module.exports = symbolData; diff --git a/demo/js/components/victory-area-demo.js b/demo/js/components/victory-area-demo.js deleted file mode 100644 index 741381fcd..000000000 --- a/demo/js/components/victory-area-demo.js +++ /dev/null @@ -1,423 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { random, range } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryArea } from "victory-area"; -import { VictoryContainer, VictoryTheme } from "victory-core"; - -export default class App extends React.Component { - constructor() { - super(); - this.state = { - data: this.getData(), - arrayData: this.getArrayData(), - groupedData: this.getGroupedData(), - multiTransitionData: this.getMultiTransitionData(), - areaTransitionData: this.getAreaTransitionData(), - }; - } - - componentDidMount() { - window.setInterval(() => { - this.setState({ - data: this.getData(), - groupedData: this.getGroupedData(), - multiTransitionData: this.getMultiTransitionData(), - areaTransitionData: this.getAreaTransitionData(), - style: this.getStyles(), - }); - }, 5000); - } - - getMultiTransitionData() { - const areas = random(8, 10); - return range(8).map(() => { - return range(areas).map((area) => { - return { x: area, y: random(2, 10) }; - }); - }); - } - - getAreaTransitionData() { - const areas = random(6, 10); - return range(areas).map((area) => { - const y = random(2, 10); - return { x: area, y, y0: random(0, y) }; - }); - } - - getData() { - return range(100).map((i) => { - return { - x: i, - y: Math.random(), - }; - }); - } - - getGroupedData() { - return range(7).map(() => { - return [ - { - x: "rabbits", - y: random(1, 5), - }, - { - x: "cats", - y: random(1, 10), - }, - { - x: "dogs", - y: random(2, 10), - }, - { - x: "birds", - y: random(2, 10), - }, - { - x: "frogs", - y: random(2, 15), - }, - ]; - }); - } - - getArrayData() { - return range(40).map((i) => [i, i + Math.random() * 3]); - } - - getStyles() { - const colors = ["red", "orange", "gold", "tomato", "magenta", "purple"]; - return { - fill: colors[random(0, 5)], - }; - } - - render() { - const style = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
    - - Math.round(datum.y)} - data={[ - { x: 1, y: 0.2 }, - { x: 2, y: 3 }, - { x: 3, y: 50 }, - { x: 4, y: 400 }, - { x: 5, y: 70 }, - ]} - /> - - - - - - - - - } - /> - - - - } - > - {this.state.multiTransitionData.map((data, index) => { - return ( - - ); - })} - - - - - - - - - - - - - - - - - - - - {this.state.groupedData.map((data, index) => ( - - ))} - - - Math.sin(d)} - /> - - { - return [ - { - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "orange" }), - }; - }, - }, - { - target: "labels", - eventKey: 0, - mutation: () => { - return { text: "hey" }; - }, - }, - ]; - }, - }, - }, - ]} - labels={() => null} - data={this.state.arrayData} - x={0} - y={1} - /> - - - - - - - Math.sin(data.x)} - standalone={false} - style={{ data: { opacity: 0.4 } }} - /> - Math.cos(data.x)} - standalone={false} - style={{ data: { opacity: 0.4 } }} - /> - - - - - } - /> - - - - } - > - {this.state.multiTransitionData.map((data, index) => { - return ( - - ); - })} - - - - - - - - - - - - -
    - ); - } -} diff --git a/demo/js/components/victory-axis-demo.js b/demo/js/components/victory-axis-demo.js deleted file mode 100644 index 5fac5dd06..000000000 --- a/demo/js/components/victory-axis-demo.js +++ /dev/null @@ -1,270 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryAxis } from "victory-axis"; -import { - VictoryLabel, - VictoryContainer, - VictoryTheme, -} from "victory-core"; -import { random, range } from "lodash"; -import XYTheme from "../theme/victory-axis-differential-styling-theme"; - -export default class App extends React.Component { - constructor() { - super(); - this.state = { - tickValues: [5, 10, 25, 31, 42], - domain: [-5, 5], - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - tickValues: this.getTickValues(), - domain: this.getDomain(), - }); - }, 2000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getTickValues() { - return range(5).map((i) => { - return 10 * i + random(5); - }); - } - - getDomain() { - const someNumber = random(2, 5); - return [-someNumber, someNumber]; - } - - render() { - const style = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - - const styleOverrides = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - axis: { - stroke: "black", - }, - axisLabel: { - padding: 60, - fontWeight: "bold", - fontSize: 16, - }, - grid: { - strokeWidth: 2, - stroke: ({ tick }) => (tick === "Mariners\nSEA" ? "red" : "grey"), - }, - ticks: { - stroke: ({ tick }) => (tick === "Mariners\nSEA" ? "red" : "grey"), - }, - tickLabels: { - fontWeight: ({ tick }) => - tick === "Mariners\nSEA" ? "bold" : "normal", - }, - }; - - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
    -
    - } - tickValues={this.state.tickValues} - theme={VictoryTheme.material} - tickFormat={["first", "second", "third", "fourth", "fifth"]} - animate={{ duration: 2000 }} - containerComponent={ - - } - /> - - - } - events={[ - { - target: "grid", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { stroke: "orange" }), - }; - }, - }, - { - target: "tickLabels", - mutation: () => { - return { text: "hey" }; - }, - }, - ]; - }, - }, - }, - ]} - label={"Decades"} - tickLabelComponent={} - tickValues={[ - new Date(1960, 1, 1), - new Date(1970, 1, 1), - new Date(1980, 1, 1), - new Date(1990, 1, 1), - new Date(2000, 1, 1), - ]} - tickFormat={(x) => x.getFullYear()} - /> - - - - - - - - - - - - - - - - - - - -
    -
    - ); - } -} diff --git a/demo/js/components/victory-bar-demo.js b/demo/js/components/victory-bar-demo.js deleted file mode 100644 index 98dbd2bd0..000000000 --- a/demo/js/components/victory-bar-demo.js +++ /dev/null @@ -1,623 +0,0 @@ -/* eslint-disable no-magic-numbers,react/no-multi-comp */ -import React from "react"; -import PropTypes from "prop-types"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryBar } from "victory-bar"; -import { VictorySharedEvents } from "victory-shared-events"; - -import { - VictoryContainer, - VictoryTheme, - VictoryLabel, -} from "victory-core"; -import { random, range } from "lodash"; - -class Wrapper extends React.Component { - static propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), - }; - - renderChildren(props) { - const children = React.Children.toArray(props.children); - return children.map((child) => { - return React.cloneElement(child, Object.assign({}, child.props, props)); - }); - } - - render() { - return {this.renderChildren(this.props)}; - } -} - -export default class App extends React.Component { - constructor() { - super(); - this.state = { - barData: this.getBarData(), - barTransitionData: this.getBarTransitionData(), - multiTransitionData: this.getMultiTransitionData(), - numericBarData: this.getNumericBarData(), - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - barData: this.getBarData(), - barTransitionData: this.getBarTransitionData(), - multiTransitionData: this.getMultiTransitionData(), - numericBarData: this.getNumericBarData(), - }); - }, 5000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getBarData() { - return range(5).map(() => { - return [ - { - x: "rabbits", - y: random(-5, 5), - }, - { - x: "cats", - y: random(-10, 10), - }, - { - x: "dogs", - y: random(-15, 15), - }, - ]; - }); - } - - getNumericBarData() { - return range(5).map(() => { - return [ - { - x: random(1, 3), - y: random(1, 5), - }, - { - x: random(4, 7), - y: random(1, 10), - }, - { - x: random(9, 11), - y: random(0, 15), - }, - ]; - }); - } - - getBarTransitionData() { - const bars = random(6, 10); - return range(bars).map((bar) => { - return { a: bar + 1, b: random(2, 10) }; - }); - } - - getMultiTransitionData() { - const bars = random(3, 5); - return range(4).map(() => { - return range(bars).map((bar) => { - return { x: bar + 1, y: random(2, 10) }; - }); - }); - } - - render() { - const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
    - - - - - - - - - datum.y} - data={[ - { x: 1, y: "Label 1" }, - { x: 7, y: "Label 2" }, - { x: 3, y: "Label 3" }, - { x: 4, y: "Label 4" }, - ]} - /> - - - - datum.y} - data={[ - { x: 1, y: 20 }, - { x: 7, y: -40 }, - { x: 3, y: -60 }, - { x: 4, y: 80 }, - ]} - /> - - - - datum.y} - data={[ - { x: 1, y: 20 }, - { x: 7, y: -40 }, - { x: 3, y: -60 }, - { x: 4, y: 80 }, - ]} - /> - - - - - - - - - - - "HELLO"} - labelComponent={ - - } - animate={{ - duration: 500, - onExit: { - duration: 1000, - }, - onEnter: { - duration: 500, - }, - }} - containerComponent={ - - } - events={[ - { - target: "data", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "orange" }), - }; - }, - }, - { - target: "labels", - mutation: () => { - return { text: "hey" }; - }, - }, - ]; - }, - }, - }, - ]} - data={this.state.barTransitionData} - x="a" - y="b" - /> - - {this.state.multiTransitionData.map((data, index) => { - return ( - - - - ); - })} - - - - - {this.state.multiTransitionData.map((data, index) => { - return ( - - - - ); - })} - - - - - {this.getBarData().map((data, index) => { - return ( - - ); - })} - - - - {this.getBarData().map((data, index) => { - return ; - })} - - - - - {this.getBarData().map((data, index) => { - return ; - })} - - - {this.getBarData().map((data, index) => { - return ; - })} - - - {this.getBarData().map((data, index) => { - return ; - })} - - - - - {this.getBarData().map((data, index) => { - return ; - })} - - - - - - - - - { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "orange" }), - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "blue" }), - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - { - return { - childName: "secondBar", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "blue" }), - }; - }, - }; - }, - }, - }, - { - childName: "secondBar", - target: "data", - eventKey: 0, - eventHandlers: { - onClick: () => { - return [ - { - childName: "firstBar", - mutation: (props) => { - return props.style.fill === "cyan" - ? null - : { - style: Object.assign({}, props.style, { fill: "cyan" }), - }; - }, - }, - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "orange" }), - }; - }, - }, - { - target: "labels", - eventKey: 1, - mutation: () => { - return { text: "CLICKED" }; - }, - }, - ]; - }, - }, - }, - ]} - > - - - - - { - evt.stopPropagation(); - return [ - { - mutation: () => { - return { style: { fill: "orange" } }; - }, - }, - ]; - }, - }, - }, - { - target: "parent", - eventHandlers: { - onClick: () => { - return [ - { - target: "labels", - mutation: () => { - return { text: "o shit" }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - - - - - - -
    - ); - } -} - -class ChartWrap extends React.Component { - static propTypes = { - children: PropTypes.any, - height: PropTypes.number, - width: PropTypes.number, - }; - static defaultProps = { - height: 250, - width: 350, - }; - // renders both a standalone chart, and a version wrapped in VictoryChart, - // to test both cases at once - render() { - const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - - return ( -
    - {React.cloneElement(this.props.children)} - {this.props.children} -
    - ); - } -} diff --git a/demo/js/components/victory-box-plot-demo.js b/demo/js/components/victory-box-plot-demo.js deleted file mode 100644 index 8e120a5bc..000000000 --- a/demo/js/components/victory-box-plot-demo.js +++ /dev/null @@ -1,224 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryBoxPlot } from "victory-box-plot"; -import { VictoryTheme } from "victory-core"; -import { range, random } from "lodash"; - -export default class App extends React.Component { - constructor(props) { - super(props); - this.state = { - data: this.getData(), - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: this.getData(), - }); - }, 3000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getData() { - return range(5).map((i) => { - return { - x: i, - y: range(20).map(() => random(1, 100)), - }; - }); - } - - 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 ( -
    - - - - - - - - - - - - `x: ${datum.x}`} - whiskerWidth={50} - data={[ - { x: 1, y: [5, 10, 9, 2] }, - { x: 2, y: [1, 15, 6, 8] }, - ]} - boxWidth={20} - labelOrientation={"top"} - events={[ - { - target: "q1", - eventHandlers: { - onClick: () => { - return [ - { - target: "q1Labels", - mutation: () => ({ text: "LABEL!" }), - }, - ]; - }, - }, - }, - ]} - style={{ - min: { stroke: "black", strokeWidth: 2 }, - max: { stroke: "black", strokeWidth: 2 }, - q1: { fill: "#FF530D", fillOpacity: 0.5 }, - q3: { fill: "#2bbee0", fillOpacity: 0.5 }, - median: { stroke: "#fff", strokeWidth: 2 }, - minLabels: { fill: "green", padding: 10 }, - maxLabels: { fill: "orange", padding: 10 }, - }} - /> - - - - - - - - - - - - - - - - - - -
    - ); - } -} diff --git a/demo/js/components/victory-brush-container-demo.js b/demo/js/components/victory-brush-container-demo.js deleted file mode 100644 index 4c3f3e67f..000000000 --- a/demo/js/components/victory-brush-container-demo.js +++ /dev/null @@ -1,356 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryAxis } from "victory-axis"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryLegend } from "victory-legend"; -import { VictoryZoomContainer } from "victory-zoom-container"; -import { VictoryBrushContainer } from "victory-brush-container"; - -class App extends React.Component { - constructor() { - super(); - this.state = {}; - } - - handleZoom(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 ( -
    -
    - - } - > - - - - } - > - new Date(x).getFullYear()} - /> - - - - - } - > - - - - - - - - (active ? "tomato" : "black"), - }, - }} - domain={{ x: [0, 10], y: [-5, 5] }} - containerComponent={ - - } - 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 }, - ]} - /> - - (active ? "tomato" : "black"), - }, - }} - containerComponent={ - - } - size={({ active }) => (active ? 5 : 3)} - y={(d) => d.x * d.x} - /> - - - } - > - (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 }, - ]} - /> - (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 }, - ]} - /> - (active ? 5 : 3)} - /> - - - } - > - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - barWidth={({ 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 }, - ]} - /> - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - barWidth={({ 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 }, - ]} - /> - (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 }, - ]} - /> - - - } - handleWidth={1} - handleStyle={{ stroke: "black", fill: "black" }} - /> - } - data={[ - { x: 1, y: -3 }, - { x: 2, y: 5 }, - { x: 3, y: -3 }, - { x: 4, y: 0 }, - { x: 5, y: -5 }, - { x: 6, y: 2 }, - { x: 7, y: 0 }, - ]} - /> -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/victory-brush-line-demo.js b/demo/js/components/victory-brush-line-demo.js deleted file mode 100644 index 9423106c9..000000000 --- a/demo/js/components/victory-brush-line-demo.js +++ /dev/null @@ -1,277 +0,0 @@ -/* eslint-disable no-magic-numbers */ - -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryAxis } from "victory-axis"; -import { VictoryBar } from "victory-bar"; -import { VictoryBrushLine } from "victory-brush-line"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryLabel } from "victory-core"; -import _ from "lodash"; - -const data = [ - { name: "Adrien", strength: 5, intelligence: 30, speed: 500, luck: 3 }, - { name: "Brice", strength: 1, intelligence: 13, speed: 550, luck: 2 }, - { name: "Casey", strength: 4, intelligence: 15, speed: 80, luck: 1 }, - { name: "Drew", strength: 3, intelligence: 25, speed: 600, luck: 5 }, - { name: "Erin", strength: 9, intelligence: 50, speed: 350, luck: 4 }, - { name: "Francis", strength: 2, intelligence: 40, speed: 200, luck: 2 }, -]; - -const attributes = ["strength", "intelligence", "speed", "luck"]; -const height = 500; -const width = 500; -const padding = { top: 100, left: 50, right: 50, bottom: 50 }; - -class App extends React.Component { - constructor() { - super(); - const maximumValues = this.getMaximumValues(); - const datasets = this.normalizeData(maximumValues); - this.state = { - maximumValues, - datasets, - filters: {}, - activeDatasets: [], - isFiltered: false, - externalMutation: undefined, - }; - } - - getMaximumValues() { - return attributes.map((attribute) => { - return data.reduce((memo, datum) => { - return datum[attribute] > memo ? datum[attribute] : memo; - }, -Infinity); - }); - } - - normalizeData(maximumValues) { - // construct normalized datasets by dividing the value for each attribute by the maximum value - return data.map((datum) => ({ - name: datum.name, - data: attributes.map((attribute, i) => ({ - x: attribute, - y: datum[attribute] / maximumValues[i], - })), - })); - } - - addNewFilters(domain, props) { - const filters = this.state.filters || {}; - const extent = domain && Math.abs(domain[1] - domain[0]); - const minVal = 1 / Number.MAX_SAFE_INTEGER; - filters[props.name] = extent <= minVal ? undefined : domain; - return filters; - } - - getActiveDatasets(filters) { - // Return the names from all datasets that have values within all filters - const isActive = (dataset) => { - return _.keys(filters).reduce((memo, name) => { - if (!memo || !Array.isArray(filters[name])) { - return memo; - } - const point = _.find(dataset.data, (d) => d.x === name); - return ( - point && - Math.max(...filters[name]) >= point.y && - Math.min(...filters[name]) <= point.y - ); - }, true); - }; - - return this.state.datasets - .map((dataset) => (isActive(dataset) ? dataset.name : null)) - .filter(Boolean); - } - - onDomainChange(domain, props) { - const filters = this.addNewFilters(domain, props); - const isFiltered = !_.isEmpty(_.values(filters).filter(Boolean)); - const activeDatasets = isFiltered - ? this.getActiveDatasets(filters) - : this.state.datasets; - this.setState({ activeDatasets, filters, isFiltered }); - } - - isActive(dataset) { - // Determine whether a given dataset is active - return !this.state.isFiltered - ? true - : _.includes(this.state.activeDatasets, dataset.name); - } - - getAxisOffset(index) { - const step = - (width - padding.left - padding.right) / (attributes.length - 1); - return step * index + padding.left; - } - - removeMutation() { - this.setState({ - externalMutation: undefined, - }); - } - - clearMutation() { - const callback = this.removeMutation.bind(this); - this.setState({ - filters: {}, - activeDatasets: [], - isFiltered: false, - externalMutation: [ - { - childName: attributes, - target: "axis", - eventKey: "all", - mutation: () => { - return { brushDomain: [0, 1 / Number.MAX_SAFE_INTEGER] }; - }, - callback, - }, - ], - }); - } - - 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 ( -
    -

    VictoryBrushLine

    -
    - - - } - /> - {this.state.datasets.map((dataset) => ( - } - style={{ - data: { - stroke: "tomato", - opacity: this.isActive(dataset) ? 1 : 0.2, - }, - }} - /> - ))} - {attributes.map((attribute, index) => ( - - } - offsetX={this.getAxisOffset(index)} - style={{ - tickLabels: { - fontSize: 15, - padding: 15, - pointerEvents: "none", - }, - }} - tickValues={[0.2, 0.4, 0.6, 0.8, 1]} - tickFormat={(tick) => - Math.round(tick * this.state.maximumValues[index]) - } - /> - ))} - - - - - - } - externalEventMutations={this.state.externalMutation} - /> - - - - - } - /> - - - - } /> - - - - } - /> - - - - } - /> -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/victory-candlestick-demo.js b/demo/js/components/victory-candlestick-demo.js deleted file mode 100644 index 4d72faaf5..000000000 --- a/demo/js/components/victory-candlestick-demo.js +++ /dev/null @@ -1,242 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import PropTypes from "prop-types"; -import { random, range } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryCandlestick } from "victory-candlestick"; -import { VictoryTheme } from "victory-core"; - -const getData = () => { - const colors = [ - "violet", - "cornflowerblue", - "gold", - "orange", - "turquoise", - "tomato", - "greenyellow", - ]; - return range(50).map(() => { - return { - x: random(600), - open: random(600), - close: random(600), - high: random(450, 600), - low: random(0, 150), - size: random(15) + 3, - fill: colors[random(0, 6)], - opacity: random(0.3, 1), - }; - }); -}; - -const style = { - parent: { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }, -}; - -const data = [ - { x: new Date(2016, 6, 1), open: 9, close: 30, high: 56, low: 7 }, - { x: new Date(2016, 6, 2), open: 80, close: 40, high: 120, low: 10 }, - { x: new Date(2016, 6, 3), open: 50, close: 80, high: 90, low: 20 }, - { x: new Date(2016, 6, 4), open: 70, close: 22, high: 70, low: 5 }, -]; - -export default class App extends React.Component { - constructor(props) { - super(props); - this.state = { - data: props.data, - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: getData(), - }); - }, 2000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
    - - `x: ${datum.x.getDate()}`} - labelOrientation={{ low: "bottom", high: "top" }} - openLabels={({ datum }) => datum.open} - closeLabels={({ datum }) => datum.close} - lowLabels={({ datum }) => datum.low} - highLabels={({ datum }) => datum.high} - data={data} - size={8} - standalone={false} - events={[ - { - target: "highLabels", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style.labels, { - fill: "orange", - }), - }; - }, - }, - ]; - }, - }, - }, - { - target: "data", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "blue" }), - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - `x: ${datum.x.getDate()}`} - labelOrientation={{ low: "left", high: "right" }} - openLabels={({ datum }) => datum.open} - closeLabels={({ datum }) => datum.close} - lowLabels={({ datum }) => datum.low} - highLabels={({ datum }) => datum.high} - data={data} - theme={VictoryTheme.material} - size={8} - events={[ - { - target: "labels", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style.labels, { - fill: "orange", - }), - }; - }, - }, - ]; - }, - }, - }, - { - target: "data", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "blue" }), - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - - - - datum.fill, - opacity: ({ datum }) => datum.opacity, - }, - parent: style.parent, - }} - /> - - - datum.open} - closeLabels={({ datum }) => datum.close} - lowLabels={({ datum }) => datum.low} - highLabels={({ datum }) => datum.high} - labelOrientation={{ open: "top", high: "top" }} - /> - - - - - - - -
    - ); - } -} - -App.propTypes = { - data: PropTypes.arrayOf(PropTypes.object), -}; - -App.defaultProps = { - data: getData(), -}; diff --git a/demo/js/components/victory-chart-demo.js b/demo/js/components/victory-chart-demo.js deleted file mode 100644 index 83efc42f9..000000000 --- a/demo/js/components/victory-chart-demo.js +++ /dev/null @@ -1,781 +0,0 @@ -/* eslint-disable no-magic-numbers,react/no-multi-comp */ -import React from "react"; -import PropTypes from "prop-types"; -import { random, range, omit } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryAxis } from "victory-axis"; -import { VictoryArea } from "victory-area"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { - VictoryLabel, - VictoryTheme, - VictoryClipContainer, -} from "victory-core"; - -const UPDATE_INTERVAL = 3000; - -class Wrapper extends React.Component { - static propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), - }; - - renderChildren() { - const props = omit(this.props, ["children"]); - const children = React.Children.toArray(this.props.children); - return children.map((child) => { - return React.cloneElement(child, Object.assign({}, child.props, props)); - }); - } - - render() { - return ( - - - {this.renderChildren()} - - ); - } -} - -const dependentAxisTheme = { - ...VictoryTheme.material, - ...{ dependentAxis: { orientation: "right" } }, -}; - -class App extends React.Component { - constructor(props) { - super(props); - this.state = { - scatterData: this.getScatterData(), - lineData: this.getData(), - numericBarData: this.getNumericBarData(), - barData: this.getBarData(), - barTransitionData: this.getBarTransitionData(), - multiBarTransitionData: this.getMultiBarTransitionData(), - lineStyle: this.getStyles(), - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - scatterData: this.getScatterData(), - lineData: this.getData(), - barData: this.getBarData(), - barTransitionData: this.getBarTransitionData(), - multiBarTransitionData: this.getMultiBarTransitionData(), - numericBarData: this.getNumericBarData(), - lineStyle: this.getStyles(), - }); - }, UPDATE_INTERVAL); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getData() { - return range(20).map((i) => { - return { - x: i, - y: Math.random(), - }; - }); - } - - getNumericBarData() { - return range(5).map(() => { - return [ - { - x: random(1, 3), - y: random(1, 5), - }, - { - x: random(4, 7), - y: random(1, 10), - }, - { - x: random(9, 11), - y: random(1, 15), - }, - ]; - }); - } - - getBarData() { - return range(5).map(() => { - return [ - { - x: "apples", - y: random(2, 5), - }, - { - x: "bananas", - y: random(2, 10), - }, - { - x: "oranges", - y: random(0, 15), - }, - ]; - }); - } - - getBarTransitionData() { - const bars = random(6, 10); - return range(bars).map((bar) => { - return { x: bar, y: random(2, 10) }; - }); - } - - getMultiBarTransitionData() { - const bars = random(6, 10); - return range(5).map(() => { - return range(bars).map((bar) => { - return { x: bar, y: random(2, 10) }; - }); - }); - } - - getScatterData() { - const colors = [ - "violet", - "cornflowerblue", - "gold", - "orange", - "turquoise", - "tomato", - "greenyellow", - ]; - const symbols = [ - "circle", - "star", - "square", - "triangleUp", - "triangleDown", - "diamond", - "plus", - ]; - const elementNum = random(10, 40); - return range(elementNum).map((index) => { - const scaledIndex = Math.floor(index % 7); - return { - x: random(10, 50), - y: random(2, 100), - size: random(8) + 3, - symbol: symbols[scaledIndex], - fill: colors[random(0, 6)], - opacity: 1, - }; - }); - } - - getStyles() { - const colors = ["red", "orange", "cyan", "green", "blue", "purple"]; - return { - stroke: colors[random(0, 5)], - strokeWidth: [random(1, 3)], - }; - } - - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - const chartStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - const axisStyle = { - grid: { stroke: "grey", strokeWidth: 1 }, - axis: { stroke: "transparent" }, - ticks: { stroke: "transparent" }, - tickLabels: { fill: "none" }, - }; - - const bgStyle = { - background: { fill: "#e6e6ff" }, - }; - - return ( -
    -

    VictoryChart

    -
    - - - - - - - - - - - - - - - - - - - - `${t}s ${i} ${ts[0]}`} /> - } - style={{ data: { fill: "tomato" } }} - data={[ - { x: "one", y: 1 }, - { x: "two", y: 2 }, - { x: "three", y: 7 }, - ]} - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {this.state.multiBarTransitionData.map((data, index) => { - return ; - })} - - - - - - - - - - - - - - - - - { - evt.stopPropagation(); - return [ - { - mutation: () => { - return { style: { fill: "orange" } }; - }, - }, - ]; - }, - }, - }, - { - target: "parent", - eventHandlers: { - onClick: () => { - return [ - { - childName: "bar", - target: "labels", - mutation: () => { - return { text: "o shit" }; - }, - }, - ]; - }, - }, - }, - ]} - > - - null} /> - - - - - - - - Math.sin(2 * Math.PI * data.x)} - /> - - Math.cos(2 * Math.PI * data.x)} - /> - - - - - - - - - new Date(x).getFullYear()} - /> - - - - - } - data={this.state.scatterData} - style={{ - data: { - fill: ({ datum }) => datum.fill, - opacity: ({ datum }) => datum.opacity, - }, - }} - animate={{ - onExit: { - duration: 500, - before: () => ({ opacity: 0.3 }), - }, - onEnter: { - duration: 500, - before: () => ({ opacity: 0.3 }), - after: (datum) => ({ opacity: datum.opacity || 1 }), - }, - }} - /> - - - - - - 0.5 * d.x + 0.5} - style={{ data: { stroke: "red" } }} - /> - d.x * d.x} - style={{ data: { stroke: "red" } }} - /> - - - - - - {this.state.barData.map((data, index) => { - return ( - - - - ); - })} - - - { - return [ - { - target: "labels", - mutation: () => { - return { text: "o shit" }; - }, - }, - { - childName: "line", - target: "data", - eventKey: "all", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { stroke: "lime" }), - }; - }, - }, - { - childName: "line", - target: "labels", - eventKey: "all", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "green" }), - text: "waddup", - }; - }, - }, - ]; - }, - }, - }, - ]} - > - null} - data={[ - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: 3 }, - { x: 4, y: 2 }, - { x: 5, y: 1 }, - { x: 6, y: 2 }, - { x: 7, y: 3 }, - { x: 8, y: 2 }, - { x: 9, y: 1 }, - { x: 10, y: 2 }, - { x: 11, y: 3 }, - { x: 12, y: 2 }, - { x: 13, y: 1 }, - ]} - /> - 0.5} - style={{ data: { stroke: "blue", strokeWidth: 5 } }} - /> - - - - - {this.getBarData().map((data, index) => { - return ; - })} - - - {this.getBarData().map((data, index) => { - return ; - })} - - - {this.getBarData().map((data, index) => { - return ; - })} - - - - { - return [ - { - childName: "area-2", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "gold" }), - }; - }, - }, - { - childName: "area-3", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "orange" }), - }; - }, - }, - { - childName: "area-4", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "red" }), - }; - }, - }, - ]; - }, - }, - }, - ]} - > - - - - - - - -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/victory-cursor-container-demo.js b/demo/js/components/victory-cursor-container-demo.js deleted file mode 100644 index 457754799..000000000 --- a/demo/js/components/victory-cursor-container-demo.js +++ /dev/null @@ -1,315 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { random, range, round } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryCursorContainer } from "victory-cursor-container"; -import { VictoryTooltip } from "victory-tooltip"; -import { VictoryLegend } from "victory-legend"; -import { VictoryTheme } from "victory-core"; - -const makeData = () => - range(1500).map((x) => ({ x, y: x + 10 * Math.random() })); - -class App extends React.Component { - constructor() { - super(); - this.defaultCursorValue = { x: 2.25, y: 1.75 }; - this.state = { - data: this.getData(), - cursorValue: this.defaultCursorValue, - bigData: makeData(), - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: this.getData(), - }); - }, 3000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getData() { - const bars = random(6, 10); - return range(bars).map((bar) => { - return { a: bar + 1, b: random(2, 10) }; - }); - } - - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const chartStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - - const cursorLabel = ({ datum }) => - `${round(datum.x, 2)} , ${round(datum.y, 2)}`; - - return ( -
    -
    - - } - > - - - - - - } - > - - - - - - - - - - (active ? "tomato" : "black"), - }, - }} - containerComponent={ - `${round(datum.x, 2)}`} - dimension="x" - defaultCursorValue={1} - /> - } - size={({ active }) => (active ? 5 : 3)} - data={this.state.data} - x="a" - y="b" - /> - - (active ? "tomato" : "black"), - }, - }} - containerComponent={ - - } - size={({ active }) => (active ? 5 : 3)} - y={(d) => d.x * d.x} - /> - - round(datum.x, 2)} - cursorLabelOffset={15} - /> - } - > - - (active ? 5 : 3)} - labels={({ datum }) => datum.y} - labelComponent={} - data={[ - { x: 1, y: -5 }, - { x: 2, y: 4 }, - { x: 3, y: 2 }, - { x: 4, y: 0 }, - { x: 5, y: 1 }, - { x: 6, y: -3 }, - { x: 7, y: 3 }, - ]} - /> - (active ? 5 : 3)} - labels={({ datum }) => datum.y} - labelComponent={} - 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 }, - ]} - /> - d.y} - labelComponent={} - size={({ active }) => (active ? 5 : 3)} - /> - - - - } - > - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - (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 }, - ]} - /> - -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/victory-demo.js b/demo/js/components/victory-demo.js deleted file mode 100644 index da252e550..000000000 --- a/demo/js/components/victory-demo.js +++ /dev/null @@ -1,311 +0,0 @@ -/* eslint-disable no-magic-numbers*/ -import React from "react"; -import { - VictoryAxis, - VictoryArea, - VictoryBar, - VictoryChart, - VictoryLine, - VictoryPie, - VictoryScatter, - VictoryStack, - VictoryGroup, - VictorySelectionContainer, -} from "victory"; - -export default class App extends React.Component { - render() { - const style = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - return ( -
    -

    Victory Demo

    - -

    Composites

    - -

    VictoryPie

    -

    Default props

    - - -

    VictoryChart

    -

    - Line chart of function y = x^2 -

    - - - data.x * data.x} /> - - - { - return [ - { - target: "labels", - mutation: () => { - return { text: "o shit" }; - }, - }, - { - childName: "line", - eventKey: "all", - target: "data", - mutation: () => { - return { style: { stroke: "lime" } }; - }, - }, - { - childName: "line", - eventKey: 0, - target: "labels", - mutation: () => { - return { - style: { fill: "green" }, - text: "waddup", - }; - }, - }, - ]; - }, - }, - }, - ]} - > - - 0.5} - style={{ data: { stroke: "blue", strokeWidth: 5 } }} - labels={["LINE"]} - /> - - -

    VictoryChart

    -

    Custom axes and tickformats; Bar + line chart

    - - `${x}\ntick`} - style={{ - axis: { stroke: "black", strokeWidth: 2 }, - ticks: { stroke: "transparent" }, - tickLabels: { fill: "black" }, - }} - /> - - - 0.5} - style={{ data: { stroke: "gold", strokeWidth: 3 } }} - labels={["LINE"]} - /> - - -

    Primitives

    - -

    VictoryAxis

    -

    Default props

    - - -

    VictoryBar

    -

    Default props

    - - -

    VictoryLine

    -

    Default props

    - - -

    VictoryScatter

    -

    Default props

    - - -

    VictoryArea

    -

    Default props

    - - -

    VictorySelectionContainer

    - - - } - > - (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 }, - ]} - /> - (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 }, - ]} - /> - (active ? 5 : 3)} - /> - - - - } - > - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - (active ? "black" : "none"), - strokeWidth: 2, - }, - }} - 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 }, - ]} - /> - (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 }, - ]} - /> - -
    - ); - } -} diff --git a/demo/js/components/victory-errorbar-demo.js b/demo/js/components/victory-errorbar-demo.js deleted file mode 100644 index 486d74e59..000000000 --- a/demo/js/components/victory-errorbar-demo.js +++ /dev/null @@ -1,166 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import PropTypes from "prop-types"; -import { random, range } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryErrorBar, ErrorBar } from "victory-errorbar"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryContainer, VictoryTheme } from "victory-core"; - -const getData = () => { - return range(4).map(() => { - return { - x: random(6), - y: random(6), - errorX: [random(1, true), random(3, true)], - errorY: [random(2, true), random(2, true)], - }; - }); -}; - -const basicData = [ - { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 }, - { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 }, - { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] }, - { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 }, - { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 }, -]; - -const style = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -export default class App extends React.Component { - constructor(props) { - super(props); - this.state = { - hoverStyle: { stroke: "gold" }, - data: props.data, - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: getData(), - }); - }, 2000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
    - - - - - - - - - - - } - containerComponent={ - - } - /> - - - - (datum.y > 0 ? "red" : "blue") }, - }} - width={500} - height={500} - /> - - - - - - - - { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { stroke: "orange" }), - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - - - - - - -
    - ); - } -} - -App.propTypes = { - data: PropTypes.arrayOf(PropTypes.object), -}; - -App.defaultProps = { - data: getData(), -}; diff --git a/demo/js/components/victory-histogram-demo.js b/demo/js/components/victory-histogram-demo.js deleted file mode 100644 index 8a2c54620..000000000 --- a/demo/js/components/victory-histogram-demo.js +++ /dev/null @@ -1,623 +0,0 @@ -/* eslint-disable no-magic-numbers,react/no-multi-comp */ -import React from "react"; -import { random, range } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryHistogram } from "victory-histogram"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryTheme } from "victory-core"; -import { VictoryTooltip } from "victory-tooltip"; -import { VictoryStack } from "victory-stack"; -import { VictoryVoronoiContainer } from "victory-voronoi-container"; - -const randomDate = (start, end) => { - return new Date( - start.getTime() + Math.random() * (end.getTime() - start.getTime()), - ); -}; - -const getData = ({ length = 100, min = 0, max = 10, dates = false } = {}) => { - const randomDataFunc = dates ? randomDate : random; - return range(length).map(() => ({ - x: randomDataFunc(min, max), - })); -}; - -export default class App extends React.Component { - data = getData(); - data2 = getData({ max: 100 }); - dateData = getData({ - dates: true, - min: new Date(2012, 0, 1), - max: new Date(2014, 0, 1), - }); - - constructor() { - super(); - this.state = { - dataLoadedInWithBins: { - data: undefined, - bins: [0, 25, 50, 100], - }, - - dataLoadedInWithoutBins: { - data: undefined, - bins: undefined, - }, - - dynamicBinsBasedOnData: { - data: getData({ max: 100 }), - bins: undefined, - }, - - dynamicBins: { - data: getData({ max: 100 }), - bins: range(0, 100, 20), - }, - - dateDataLoadedInWithBins: { - data: undefined, - bins: [ - new Date(2012, 0, 1), - new Date(2013, 0, 1), - new Date(2014, 0, 1), - ], - }, - - dateDataLoadedInWithoutBins: { - data: undefined, - bins: [new Date(2012, 0, 1), new Date(2013, 0, 1)], - }, - - dateDynamicBinsBasedOnData: { - data: getData({ - dates: true, - min: new Date(2012, 2, 1), - max: new Date(2015, 1, 1), - }), - bins: undefined, - }, - - dateDynamicBins: { - data: getData({ - dates: true, - min: new Date(2012, 0, 1), - max: new Date(2012, 12, 1), - }), - bins: range(random(1, 12)).map((i) => new Date(2012, i, 1)), - }, - - style: this.getStyles(), - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - const randomValue = random(300); - - this.setState({ - dataLoadedInWithBins: { - data: getData({ max: 100 }), - bins: [0, 25, 50, 100], - }, - - dataLoadedInWithoutBins: { - data: getData({ max: 100 }), - bins: undefined, - }, - - dynamicBinsBasedOnData: { - data: getData({ max: random(100) }), - bins: undefined, - }, - - dynamicBins: { - data: getData({ max: randomValue }), - bins: range(0, randomValue, 10), - }, - - dateDataLoadedInWithBins: { - data: getData({ - dates: true, - min: new Date(2012, 0, 1), - max: new Date(2014, 0, 1), - }), - bins: [ - new Date(2012, 0, 1), - new Date(2013, 0, 1), - new Date(2014, 0, 1), - ], - }, - - dateDataLoadedInWithoutBins: { - data: getData({ - dates: true, - min: new Date(2012, 0, 1), - max: new Date(2014, 0, 1), - }), - bins: undefined, - }, - - dateDynamicBinsBasedOnData: { - data: getData({ - dates: true, - min: new Date(2012, 2, 1), - max: new Date(random(2013, 2020), 1, 1), - }), - bins: undefined, - }, - - dateDynamicBins: { - data: getData({ - dates: true, - min: new Date(2012, 0, 1), - max: new Date(2012, 12, 1), - }), - bins: range(random(1, 12)).map((i) => new Date(2012, i, 1)), - }, - - style: this.getStyles(), - }); - }, 4000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getStyles() { - const colors = [ - "palevioletred", - "orange", - "cyan", - "green", - "blue", - "purple", - ]; - return { - stroke: colors[random(0, 5)], - strokeWidth: random(1, 5), - }; - } - - render() { - const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
    - [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "pink" }), - }; - }, - }, - ], - onMouseOut: () => [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "yellow" }), - }; - }, - }, - ], - }, - }, - ]} - /> - - - - ({ value: x }))} - x="value" - /> - - - - - - - - - - - - - - { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "pink" }), - }; - }, - }, - { - target: "labels", - eventKey: 99, - mutation: () => { - return { text: "hey" }; - }, - }, - ]; - }, - }, - }, - ]} - data={this.data2} - /> - - `${datum.x0} - ${datum.x1}`} - /> - - `${datum.x0} - ${datum.x1}`} - labelComponent={} - /> - - - `${datum.binnedData.length} data points were grouped into this bin` - } - labelComponent={} - /> - - "hi"} - voronoiDimension="x" - labelComponent={} - /> - } - > - - - - - "hi"} - voronoiDimension="x" - labelComponent={} - /> - } - > - - - - "hi"} - voronoiDimension="x" - labelComponent={} - /> - } - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - ); - } -} diff --git a/demo/js/components/victory-label-demo.js b/demo/js/components/victory-label-demo.js deleted file mode 100644 index 0377569e5..000000000 --- a/demo/js/components/victory-label-demo.js +++ /dev/null @@ -1,456 +0,0 @@ -/* eslint-disable no-magic-numbers*/ -import React from "react"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryLabel } from "victory-core"; - -const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", -}; - -const style = { - parent: { border: "1px solid #ccc", margin: "1%", maxWidth: "25%" }, - labels: { padding: 0 }, - data: { fill: "gold" }, -}; - -const defaultScatterProps = { - style, - width: 400, - height: 400, - domain: [-10, 10], - data: [{ x: 0, y: 0 }], - labels: () => "Label", - size: 5, -}; - -export default class App extends React.Component { - render() { - return ( -
    - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> -
    - ); - } -} diff --git a/demo/js/components/victory-legend-demo.js b/demo/js/components/victory-legend-demo.js deleted file mode 100644 index 1e2463109..000000000 --- a/demo/js/components/victory-legend-demo.js +++ /dev/null @@ -1,203 +0,0 @@ -import React from "react"; -import { VictoryLabel, Border } from "victory-core"; -import { VictoryLegend } from "victory-legend"; - -const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", -}; - -const legendStyle = { - labels: { fontSize: 14, fontFamily: "Palatino" }, - border: { stroke: "black", strokeWidth: 2 }, - title: { padding: 5, fill: "red" }, -}; - -const symbolSize = 5; -const symbolSpacer = 10; -const data = [ - { - name: "Series 1", - symbol: { - size: symbolSize, - type: "circle", - fill: "green", - }, - }, - { - name: "Long Series Name -- so long", - symbol: { - size: symbolSize, - type: "triangleUp", - fill: "blue", - }, - }, - { - name: "Series 3", - symbol: { - size: symbolSize, - type: "diamond", - fill: "pink", - }, - }, - { - name: "Series 4", - symbol: { - size: symbolSize, - type: "plus", - }, - }, - { - name: "Series 4: minus", - symbol: { - size: symbolSize, - type: "minus", - }, - }, - { - name: "Series 5", - symbol: { - size: symbolSize, - type: "star", - fill: "red", - }, - labels: { - fill: "purple", - }, - }, - { - name: "Series 6: also quite long", - symbol: { - size: symbolSize, - type: "circle", - fill: "orange", - }, - labels: { - fill: "blue", - }, - }, -]; - -const LegendDemo = () => ( -
    - - - } - events={[ - { - target: "data", - eventHandlers: { - onClick: () => { - return [ - { - mutation: () => ({ symbol: "star" }), - }, - ]; - }, - }, - }, - ]} - /> - - - - - - - - } - centerTitle - title={["TITLE"]} - gutter={30} - symbolSpacer={symbolSpacer} - itemsPerRow={3} - data={data} - style={legendStyle} - /> - - } - centerTitle - title={["TITLE"]} - gutter={30} - symbolSpacer={symbolSpacer} - itemsPerRow={3} - data={data} - style={legendStyle} - /> -
    -); - -export default LegendDemo; diff --git a/demo/js/components/victory-line-demo.js b/demo/js/components/victory-line-demo.js deleted file mode 100644 index 33333f38a..000000000 --- a/demo/js/components/victory-line-demo.js +++ /dev/null @@ -1,318 +0,0 @@ -/* eslint-disable no-magic-numbers,react/no-multi-comp */ -import React from "react"; -import PropTypes from "prop-types"; -import { random, range } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryLine, Curve } from "victory-line"; -import { VictoryContainer, VictoryTheme, Point } from "victory-core"; - -class PointedLine extends React.Component { - static propTypes = { - index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - }; - - renderLine(props) { - return ; - } - - renderPoints(props) { - const { index, data, scale } = props; - return data.map((datum, pointIndex) => { - const { _x, _y } = datum; - - const position = { - x: scale.x(_x), - y: scale.y(_y), - }; - - return ( - - ); - }); - } - - render() { - const { index } = this.props; - - return ( - - {this.renderLine(this.props)} - {this.renderPoints(this.props)} - - ); - } -} - -export default class App extends React.Component { - constructor() { - super(); - this.state = { - data: this.getData(), - transitionData: this.getTransitionData(), - arrayData: this.getArrayData(), - style: { - stroke: "blue", - strokeWidth: 2, - }, - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: this.getData(), - transitionData: this.getTransitionData(), - style: this.getStyles(), - }); - }, 3000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getTransitionData() { - const lines = random(6, 10); - return range(lines).map((line) => { - return { x: line, y: random(2, 10) }; - }); - } - - getData() { - return range(100).map((i) => { - return { - x: i, - y: Math.random(), - }; - }); - } - getArrayData() { - return range(40).map((i) => [i, i + Math.random() * 3]); - } - - getStyles() { - const colors = ["red", "orange", "cyan", "green", "blue", "purple"]; - return { - stroke: colors[random(0, 5)], - strokeWidth: random(1, 5), - }; - } - - render() { - const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
    - Math.sin(2 * Math.PI * d.x)} - sample={25} - /> - - { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { stroke: "orange" }), - }; - }, - }, - { - target: "labels", - eventKey: 99, - mutation: () => { - return { text: "hey" }; - }, - }, - ]; - }, - }, - }, - ]} - data={range(0, 100)} - y={(d) => d * d} - /> - - } - /> - - - - Math.round(d.y)} - 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 }, - ]} - /> - - - - - - - - - - - - - - - - - - - - - - - - - - } - /> - - - - - - - ({ t }))} - sortKey={"t"} - x={({ t }) => Math.sin(3 * t + 2 * Math.PI)} - y={({ t }) => Math.sin(2 * t)} - /> -
    - ); - } -} diff --git a/demo/js/components/victory-pie-demo.js b/demo/js/components/victory-pie-demo.js deleted file mode 100644 index 614e46e34..000000000 --- a/demo/js/components/victory-pie-demo.js +++ /dev/null @@ -1,338 +0,0 @@ -/* eslint-disable no-magic-numbers,react/no-multi-comp*/ -import { random, range } from "lodash"; -import React from "react"; -import { VictoryPie } from "victory-pie"; -import { VictoryTooltip } from "victory-tooltip"; -import { VictoryTheme, LineSegment } from "victory-core"; - -export default class App extends React.Component { - constructor(props) { - super(props); - this.state = { - data: this.getData(), - transitionData: this.getTransitionData(), - colorScale: [ - "#D85F49", - "#F66D3B", - "#D92E1D", - "#D73C4C", - "#FFAF59", - "#E28300", - "#F6A57F", - ], - sliceWidth: 60, - style: { - parent: { - backgroundColor: "#f7f7f7", - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }, - }, - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: this.getData(), - transitionData: this.getTransitionData(), - }); - }, 4000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getTransitionData() { - const data = random(6, 9); - return range(data).map((datum) => { - return { - x: datum, - y: random(2, 9), - label: `#${datum}`, - }; - }); - } - - getData() { - const rand = () => Math.max(Math.floor(Math.random() * 10000), 1000); - return [ - { x: "<5", y: rand(), label: "A", fill: "grey" }, - { x: "5-13", y: rand() }, - { x: "14-17", y: rand() }, - { x: "18-24", y: rand() }, - { x: "25-44", y: rand() }, - { x: "45-64", y: rand() }, - { x: "≥65", y: rand() }, - ]; - } - - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const parentStyle = { - backgroundColor: "#f7f7f7", - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - - return ( -
    -

    VictoryPie Demo

    - -
    - - datum.radius - 12} - padding={{ bottom: 50, left: 50, right: 10 }} - width={400} - height={200} - radius={({ datum }) => datum.radius} - data={[ - { x: 1, y: 1, radius: 40 }, - { x: 2, y: 3, radius: 50 }, - { x: 3, y: 5, radius: 70 }, - { x: 4, y: 2, radius: 80 }, - { x: 5, y: 3, radius: 60 }, - ]} - /> - - - - - - - - - ({ - mutation: (props) => ({ - radius: 135, - sliceStartAngle: props.slice.startAngle + 0.05, - sliceEndAngle: props.slice.endAngle - 0.05, - }), - }), - onMouseOut: () => ({ - mutation: () => null, - }), - }, - }, - ]} - /> - - { - return [ - { - target: "labels", - mutation: () => { - return { text: "parent click" }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - } - colorScale="grayscale" - /> - - - - - - - - - - - - - - [i, Math.random()])} - x={0} - y={1} - animate={{ duration: 2000 }} - style={{ - ...this.state.style, - data: { stroke: "#252525", strokeWidth: 2 }, - }} - colorScale="warm" - /> - - [i, Math.random()])} - x={0} - y={1} - theme={VictoryTheme.material} - style={{ parent: { maxWidth: "40%" } }} - animate={{ duration: 2000 }} - /> - - [i, Math.random()])} - x={0} - y={1} - colorScale={["tomato", "orange"]} - labels={[]} - cornerRadius={20} - startAngle={-6} - animate={{ duration: 2000 }} - innerRadius={140} - /> - `${datum.l}\ndegrees`} - data={[ - { x: 1, y: 1, l: 0 }, - { x: 2, y: 1, l: 45 }, - { x: 3, y: 1, l: 90 }, - { x: 4, y: 1, l: 135 }, - { x: 5, y: 1, l: 180 }, - { x: 6, y: 1, l: 225 }, - { x: 7, y: 1, l: 270 }, - { x: 8, y: 1, l: 315 }, - ]} - /> - `${datum.l}\ndegrees`} - data={[ - { x: 1, y: 1, l: 0 }, - { x: 2, y: 1, l: 45 }, - { x: 3, y: 1, l: 90 }, - { x: 4, y: 1, l: 135 }, - { x: 5, y: 1, l: 180 }, - { x: 6, y: 1, l: 225 }, - { x: 7, y: 1, l: 270 }, - { x: 8, y: 1, l: 315 }, - ]} - /> - - } - /> - } - labelIndicatorInnerOffset={35} - labelIndicatorOuterOffset={4} - /> -
    -
    - ); - } -} diff --git a/demo/js/components/victory-polar-chart-demo.js b/demo/js/components/victory-polar-chart-demo.js deleted file mode 100644 index 393257169..000000000 --- a/demo/js/components/victory-polar-chart-demo.js +++ /dev/null @@ -1,864 +0,0 @@ -/* eslint no-magic-numbers:0*/ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryPolarAxis } from "victory-polar-axis"; -import { VictoryArea } from "victory-area"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryZoomContainer } from "victory-zoom-container"; -import { VictoryVoronoiContainer } from "victory-voronoi-container"; -import { VictorySelectionContainer } from "victory-selection-container"; -import { VictoryTooltip } from "victory-tooltip"; -import { random, range, keys } from "lodash"; -import { VictoryTheme, VictoryLabel } from "victory-core"; - -const multiAxisData = [ - { strength: 1, intelligence: 250, stealth: 45 }, - { strength: 2, intelligence: 300, stealth: 75 }, - { strength: 5, intelligence: 225, stealth: 60 }, -]; - -class App extends React.Component { - constructor() { - super(); - this.state = { - data: this.getData(), - staticData: this.getStaticData(), - multiAxisData: this.processMultiAxisData(multiAxisData), - multiAxisMaxima: this.getMaxData(multiAxisData), - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: this.getData(), - staticData: this.getStaticData(), - }); - }, 3000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getData() { - const points = random(6, 10); - return range(points).map((point) => { - const y = random(2, 10); - return { x: point + 1, y }; - }); - } - - getStaticData() { - const points = [10, 20, 30, 40, 50, 60]; - return points.map((point) => { - const y = random(2, 10); - const x = point + random(0, 8); - return { x, y }; - }); - } - - getMaxData(data) { - const groupedData = keys(data[0]).reduce((memo, key) => { - memo[key] = data.map((d) => d[key]); - return memo; - }, {}); - return keys(groupedData).reduce((memo, key) => { - memo[key] = Math.max(...groupedData[key]); - return memo; - }, {}); - } - - processMultiAxisData(data) { - const maxByGroup = this.getMaxData(data); - const makeDataArray = (d) => { - return keys(d).map((key) => { - return { x: key, y: d[key] / maxByGroup[key] }; - }); - }; - return data.map((datum) => makeDataArray(datum)); - } - - 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 ( -
    -
    - - {keys(this.state.multiAxisMaxima).map((key, i) => { - return ( - - } - labelPlacement="perpendicular" - axisValue={i + 1} - label={key} - tickFormat={(t) => t * this.state.multiAxisMaxima[key]} - tickValues={[0.25, 0.5, 0.75]} - /> - ); - })} - ""} /> - - {this.state.multiAxisData.map((data, i) => { - return ; - })} - - - - } - > - - - - (active ? "tomato" : "gray") }, - }} - labels={({ datum }) => datum.y} - labelComponent={} - /> - - - - - (active ? "blue" : "gray") }, - }} - labels={({ datum }) => `y: ${datum.y}`} - labelComponent={} - /> - - - - - (active ? "black" : "gray") }, - }} - labels={({ datum }) => datum.y} - labelComponent={} - /> - - - - - - - - - - - - - - } - > - - - (active ? "blue" : "tomato"), - fillOpacity: 0.6, - stroke: ({ active }) => (active ? "blue" : "tomato"), - strokeWidth: 2, - }, - }} - labelComponent={} - data={[ - { x: "strength", y: 10, label: "one" }, - { x: "intelligence", y: 25, label: "two" }, - { x: "stealth", y: 40, label: "three" }, - { x: "luck", y: 50, label: "four" }, - { x: "charisma", y: 50, label: "five" }, - ]} - /> - - - - - - - - - { - return [ - { - childName: "bar-2", - mutation: () => { - return { - style: Object.assign({}, props.style, { fill: "cyan" }), - }; - }, - }, - { - childName: "bar-3", - mutation: () => { - return { - style: Object.assign({}, props.style, { fill: "blue" }), - }; - }, - }, - ]; - }, - onMouseOut: () => { - return [ - { - childName: "all", - mutation: () => { - return { style: undefined }; - }, - }, - ]; - }, - }, - }, - ]} - > - ""} - /> - - - - - - - - - { - return [ - { - mutation: () => { - return { - style: Object.assign({}, props.style, { - fill: "cyan", - stroke: "cyan", - }), - }; - }, - }, - ]; - }, - onMouseOut: () => { - return [ - { - mutation: () => { - return { style: undefined }; - }, - }, - ]; - }, - }, - }, - ]} - > - ""} - /> - - - - - - - - - - ""} - /> - - - - - } - > - ""} - /> - - } - labels={({ datum }) => `y: ${Math.round(datum.y)}`} - interpolation="linear" - style={{ - data: { stroke: "tomato", strokeWidth: 2 }, - }} - data={this.state.data} - /> - - - - ""} - /> - - - - - - ""} - /> - - - - - } - > - ""} - /> - - datum.fill, opacity: 0.5 }, - }} - data={[ - { x: 45, y: 20, label: 1, fill: "red" }, - { x: 90, y: 30, label: 2, fill: "orange" }, - { x: 135, y: 65, label: 3, fill: "gold" }, - { x: 250, y: 50, label: 4, fill: "blue" }, - { x: 270, y: 40, label: 5, fill: "cyan" }, - { x: 295, y: 30, label: 6, fill: "green" }, - ]} - /> - - - - - datum.fill, opacity: 0.5 }, - }} - data={[ - { x: 15, y: 20, label: 1, fill: "red" }, - { x: 25, y: 30, label: 2, fill: "orange" }, - { x: 35, y: 65, label: 3, fill: "gold" }, - { x: 40, y: 50, label: 4, fill: "blue" }, - { x: 45, y: 40, label: 5, fill: "cyan" }, - { x: 50, y: 30, label: 6, fill: "green" }, - ]} - /> - - - - - datum.fill, width: 10 } }} - data={[ - { x: 1, y: 2, label: 1, fill: "red" }, - { x: 2, y: 3, label: 2, fill: "orange" }, - { x: 3, y: 6, label: 3, fill: "gold" }, - { x: 4, y: 5, label: 4, fill: "blue" }, - { x: 5, y: 4, label: 5, fill: "cyan" }, - { x: 6, y: 3, label: 6, fill: "green" }, - ]} - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/victory-scatter-demo.js b/demo/js/components/victory-scatter-demo.js deleted file mode 100644 index 2fcc6b8c7..000000000 --- a/demo/js/components/victory-scatter-demo.js +++ /dev/null @@ -1,262 +0,0 @@ -/* eslint-disable no-magic-numbers,react/no-multi-comp */ -import React from "react"; -import PropTypes from "prop-types"; -import { random, range } from "lodash"; -import { VictoryScatter } from "victory-scatter"; -import { - VictoryLabel, - VictoryContainer, - VictoryTheme, -} from "victory-core"; -import bubbleData from "./bubble-data.js"; -import symbolData from "./symbol-data.js"; - -const getData = () => { - const colors = [ - "violet", - "cornflowerblue", - "gold", - "orange", - "turquoise", - "tomato", - "greenyellow", - ]; - const symbols = [ - "circle", - "star", - "square", - "triangleUp", - "triangleDown", - "diamond", - "plus", - ]; - // symbol: symbols[scaledIndex], - return range(100).map((index) => { - const scaledIndex = Math.floor(index % 7); - return { - x: random(600), - y: random(600), - size: random(15) + 3, - symbol: symbols[scaledIndex], - fill: colors[random(0, 6)], - opacity: random(0.3, 1), - }; - }); -}; - -const style = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, -}; - -const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", -}; - -const symbolStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - data: { - fill: "red", - }, - labels: { - padding: 15, - fontSize: 15, - fill: "grey", - }, -}; - -class CatPoint extends React.Component { - static propTypes = { - symbol: PropTypes.string, - x: PropTypes.number, - y: PropTypes.number, - }; - - static symbolMap = { - circle: 0x1f431, - diamond: 0x1f638, - plus: 0x1f639, - square: 0x1f63a, - star: 0x1f63b, - triangleDown: 0x1f63c, - triangleUp: 0x1f63d, - }; - - renderSymbol(symbol) { - return String.fromCodePoint(CatPoint.symbolMap[symbol]); - } - - render() { - const { x, y, symbol } = this.props; - - return ( - - {this.renderSymbol(symbol)} - - ); - } -} - -export default class App extends React.Component { - constructor(props) { - super(props); - this.state = { - hoverStyle: { fill: "gold" }, - data: props.data, - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: getData(), - }); - }, 2000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - render() { - return ( -
    - } - containerComponent={ - - } - /> - - datum.fill, - opacity: ({ datum }) => datum.opacity, - }, - }} - width={500} - height={500} - domain={[0, 600]} - animate={{ duration: 2000 }} - data={this.state.data} - /> - - (datum.y > 0 ? "red" : "blue") }, - }} - width={500} - height={500} - symbol={({ datum }) => (datum.y > 0 ? "triangleUp" : "triangleDown")} - y={(d) => Math.sin(2 * Math.PI * d.x)} - sample={25} - /> - - } - data={symbolData} - /> - - - - - - - - ""} - 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 }, - ]} - events={[ - { - target: "data", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "orange" }), - symbol: "circle", - }; - }, - }, - { - target: "labels", - mutation: () => { - return { text: "hey" }; - }, - }, - ]; - }, - }, - }, - ]} - symbol={"star"} - size={8} - /> - - { - return { - a: { b: [{ y: i * Math.sin(i * 0.3) }], x: Math.cos(i * 0.3) }, - }; - })} - x="a.x" - y="a.b[0]y" - /> -
    - ); - } -} - -App.propTypes = { - data: PropTypes.arrayOf(PropTypes.object), -}; - -App.defaultProps = { - data: getData(), -}; diff --git a/demo/js/components/victory-tooltip-demo.js b/demo/js/components/victory-tooltip-demo.js deleted file mode 100644 index e81c4a474..000000000 --- a/demo/js/components/victory-tooltip-demo.js +++ /dev/null @@ -1,173 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryAxis } from "victory-axis"; -import { VictoryBar } from "victory-bar"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryErrorBar } from "victory-errorbar"; -import { VictoryCandlestick } from "victory-candlestick"; -import { VictoryTooltip } from "victory-tooltip"; - -class App extends React.Component { - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - - return ( -
    -
    - - } - labels={({ datum }) => `hello0000000000 #${datum.x}`} - style={{ - parent: parentStyle, - data: { fill: ({ active }) => (active ? "red" : "black") }, - }} - data={[ - { x: 1, y: 1 }, - { x: 2, y: -2 }, - { x: 3, y: 3 }, - { x: 4, y: -3 }, - { x: 5, y: 2 }, - ]} - /> - - - } - labels={({ datum }) => `hello000000 #${datum.x}`} - size={({ active }) => (active ? 5 : 3)} - data={[ - { x: 1, y: 5 }, - { x: 2, y: 2 }, - { x: 3, y: 3 }, - { x: 4, y: 2 }, - { x: 5, y: 1 }, - ]} - /> - - } - highLabels={({ datum }) => `hello #${datum.x}`} - data={[ - { x: 1, open: 5, close: 10, high: 15, low: 0 }, - { x: 2, open: 15, close: 10, high: 20, low: 5 }, - { x: 3, open: 15, close: 20, high: 25, low: 10 }, - { x: 4, open: 20, close: 25, high: 30, low: 15 }, - { x: 5, open: 30, close: 25, high: 35, low: 20 }, - ]} - /> - - } - labels={({ datum }) => `hello #${datum.x}`} - data={[ - { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 }, - { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 }, - { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] }, - { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 }, - { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 }, - ]} - /> - - - } - horizontal - offset={16} - colorScale={"qualitative"} - style={{ data: { width: 15 } }} - > - - - - - - - - - } - style={{ data: { width: 30 } }} - > - - - - - -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/victory-voronoi-container-demo.js b/demo/js/components/victory-voronoi-container-demo.js deleted file mode 100644 index 8358c4d7f..000000000 --- a/demo/js/components/victory-voronoi-container-demo.js +++ /dev/null @@ -1,724 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryVoronoiContainer } from "victory-voronoi-container"; -import { random, range } from "lodash"; -import { Flyout, VictoryTooltip } from "victory-tooltip"; -import { VictoryLegend } from "victory-legend"; -import { VictoryLabel, VictoryTheme } from "victory-core"; - -const series1 = [ - { x: 0, y: 2500 }, - { x: 2, y: 3300 }, - { x: 4, y: 4300 }, - { x: 6, y: 2400 }, - { x: 8, y: 3300 }, - { x: 10, y: 5400 }, - { x: 12, y: 8900 }, -]; - -const series2 = [ - { x: 0, y: 200 }, - { x: 2, y: 3100 }, - { x: 4, y: 2500 }, - { x: 6, y: 870 }, - { x: 8, y: 2300 }, - { x: 10, y: 550 }, - { x: 12, y: 5200 }, -]; - -class App extends React.Component { - constructor() { - super(); - this.state = { - data: this.getData(), - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: this.getData(), - }); - }, 3000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getData() { - const bars = random(6, 10); - return range(bars).map((bar) => { - return { a: bar + 1, b: random(2, 10) }; - }); - } - - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const chartStyle = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - - const dy = 13; - const CustomLabel = (props) => { - const x = props.x - 2 - 4 * Math.max(...props.text.map((t) => t.length)); - const startY = 2 + props.y - (props.text.length * dy) / 2; - return ( - - {props.activePoints.map((pt, idx) => { - return ( - - ); - })} - - - ); - }; - - const CustomFlyout = (props) => { - return ; - }; - - return ( -
    -
    - `y: ${datum.y}`} - /> - } - > - - - - `y: ${datum.y}`} - labelComponent={ - { - return activePoints - .map(({ y }) => `value: ${y}`) - .join(" - "); - }} - /> - } - /> - } - > - - - - `I'm kind of a long label ${datum.y}`} - mouseFollowTooltips - labelComponent={ - - } - /> - } - > - (active ? 8 : 3)} - /> - (active ? 5 : 3)} - /> - - - datum.y} /> - } - > - (active ? 5 : 3)} - /> - - - `y:${datum.y}`} - labelComponent={ - - } - /> - } - > - (active ? 4 : 2), - }, - labels: { fill: "tomato" }, - }} - /> - - (active ? 4 : 2), - }, - labels: { fill: "blue" }, - }} - /> - - (active ? 4 : 2), - }, - labels: { fill: "black" }, - }} - /> - - - (active ? "tomato" : "black"), - }, - }} - containerComponent={ - datum._x} - labelComponent={} - /> - } - size={({ active }) => (active ? 5 : 3)} - data={this.state.data} - x="a" - y="b" - /> - - - } - > - d.x * d.x} - /> - (active ? "tomato" : "black"), - }, - }} - size={({ active }) => (active ? 5 : 3)} - y={(d) => d.x * d.x} - /> - - - datum.y} - labelComponent={} - /> - } - > - - (active ? 8 : 3)} - /> - - - - (active ? 5 : 3)} - /> - - - - (active ? 5 : 3)} /> - - - - - - } - > - - - (active ? 5 : 3)} - labels={({ datum }) => datum.y} - labelComponent={} - data={[ - { x: 1, y: -5 }, - { x: 2, y: 4 }, - { x: 3, y: 2 }, - { x: 4, y: 0 }, - { x: 5, y: 1 }, - { x: 6, y: -3 }, - { x: 7, y: 3 }, - ]} - /> - (active ? 5 : 3)} - labels={({ datum }) => datum.y} - labelComponent={} - 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 }, - ]} - /> - datum.y} - labelComponent={} - size={({ active }) => (active ? 5 : 3)} - /> - - - - - } - > - - (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 }, - ]} - /> - (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 }, - ]} - /> - (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 }, - ]} - /> - - - - } - > - (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 }, - ]} - /> - (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 }, - ]} - /> - (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 }, - ]} - /> - - - `${datum.l}: ${datum.y}`} - labelComponent={ - } - labelComponent={} - /> - } - /> - } - > - (active ? 4 : 2), - }, - }} - /> - - (active ? 4 : 2), - }, - }} - /> - - - `y: ${datum.y}`} - labelComponent={} - voronoiPadding={{ - bottom: 50, - left: 50, - right: 50, - top: 100, - }} - /> - } - > - - - - -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/victory-voronoi-demo.js b/demo/js/components/victory-voronoi-demo.js deleted file mode 100644 index 0288929ef..000000000 --- a/demo/js/components/victory-voronoi-demo.js +++ /dev/null @@ -1,141 +0,0 @@ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryVoronoi } from "victory-voronoi"; -import { VictoryTooltip } from "victory-tooltip"; -import { VictoryChart } from "victory-chart"; -import { VictoryScatter } from "victory-scatter"; -import { range, random } from "lodash"; - -const getData = () => { - return range(20).map((i) => { - return { - x: random(600), - y: random(600), - i, - }; - }); -}; - -class App extends React.Component { - constructor(props) { - super(props); - this.state = { - data: getData(), - }; - } - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: getData(), - }); - }, 3000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - render() { - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - const visible = { - fill: "gray", - opacity: 0.1, - stroke: "black", - strokeWidth: 2, - }; - - return ( -
    -
    - - - { - return [ - { - mutation: () => { - return { style: { fill: "orange" } }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - - `#${datum.i}`} - labelComponent={} - animate={{ duration: 2000 }} - style={{ parent: parentStyle, data: visible }} - size={20} - data={this.state.data} - /> - - - `#${datum.i}`} - labelComponent={} - size={20} - style={{ parent: parentStyle, data: visible }} - data={this.state.data} - flyoutProps={{ cornerRadius: 0 }} - /> - - - - - `#${datum.i}`} - labelComponent={} - style={{ parent: parentStyle, data: visible }} - data={this.state.data} - /> - - -
    -
    - ); - } -} - -export default App; diff --git a/demo/js/components/victory-zoom-container-demo.js b/demo/js/components/victory-zoom-container-demo.js deleted file mode 100644 index 8ea1713e9..000000000 --- a/demo/js/components/victory-zoom-container-demo.js +++ /dev/null @@ -1,479 +0,0 @@ -/* eslint-disable no-magic-numbers,react/no-multi-comp */ -import React from "react"; -import PropTypes from "prop-types"; -import { range, random, minBy, maxBy, last } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictoryAxis } from "victory-axis"; -import { VictoryArea } from "victory-area"; -import { VictoryBar } from "victory-bar"; -import { VictoryLine } from "victory-line"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryZoomContainer } from "victory-zoom-container"; -import { VictoryTooltip } from "victory-tooltip"; -import { VictoryLegend } from "victory-legend"; -import { - VictoryTheme, - VictoryClipContainer, - VictoryPortal, -} from "victory-core"; - -const allData = range(0, 10, 0.001).map((x) => ({ - x, - y: (Math.sin((Math.PI * x) / 2) * x) / 10, -})); - -class CustomChart extends React.Component { - static propTypes = { - data: PropTypes.array, - maxPoints: PropTypes.number, - style: PropTypes.object, - }; - - constructor(props) { - super(); - this.entireDomain = this.getEntireDomain(props); - this.state = { - zoomedXDomain: this.entireDomain.x, - }; - } - - onDomainChange(domain) { - this.setState({ - zoomedXDomain: domain.x, - }); - } - - getData() { - const { zoomedXDomain } = this.state; - const { data, maxPoints } = this.props; - const filtered = data.filter( - (d) => d.x >= zoomedXDomain[0] && d.x <= zoomedXDomain[1], - ); - - if (filtered.length > maxPoints) { - const k = Math.ceil(filtered.length / maxPoints); - return filtered.filter((d, i) => i % k === 0); - } - return filtered; - } - - getEntireDomain(props) { - const { data } = props; - return { - y: [minBy(data, (d) => d.y).y, maxBy(data, (d) => d.y).y], - x: [data[0].x, last(data).x], - }; - } - - render() { - const renderedData = this.getData(); - return ( - - } - > - - - ); - } -} - -export default class App extends React.Component { - constructor() { - super(); - this.state = { - data: this.getData(), - transitionData: this.getTransitionData(), - arrayData: this.getArrayData(), - style: { - stroke: "blue", - strokeWidth: 2, - }, - zoomDomain: this.getZoomDomain(), - }; - } - - state = { - barData: range(-50, 75).map((i) => ({ x: i, y: Math.random() })), - }; - - componentDidMount() { - /* eslint-disable react/no-did-mount-set-state */ - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: this.getData(), - transitionData: this.getTransitionData(), - style: this.getStyles(), - }); - }, 3000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - getZoomDomain() { - return { - y: [random(0, 0.4), random(0.6, 1)], - }; - } - - getTransitionData() { - const lines = random(6, 10); - return range(lines).map((line) => { - return { x: line, y: random(2, 10) }; - }); - } - - getData() { - return range(50).map((i) => { - return { - a: i + 20, - b: Math.random(), - }; - }); - } - getArrayData() { - return range(40).map((i) => [i, i + Math.random() * 3]); - } - - getStyles() { - const colors = ["red", "orange", "cyan", "green", "blue", "purple"]; - return { - stroke: colors[random(0, 5)], - strokeWidth: random(1, 5), - }; - } - render() { - const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - const containerStyle = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
    - - - } - style={{ parent: parentStyle }} - data={this.state.transitionData} - > - - - - - } - scale={{ - x: "time", - }} - > - new Date(x).getFullYear()} /> - - - - - } - /> - } - > - - - - - - - } - /> - } - > - datum.x} - labelComponent={} - /> - - - } - > - { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { stroke: "orange" }), - }; - }, - }, - { - target: "labels", - mutation: () => { - return { text: "hey" }; - }, - }, - ]; - }, - }, - }, - ]} - data={range(0, 100)} - y={(d) => d * d} - /> - - - } - > - - - - - - - - - - } - animate={{ duration: 500 }} - style={{ parent: parentStyle }} - > - Math.sin(2 * Math.PI * d.x)} - sample={25} - /> - - - } - theme={VictoryTheme.material} - events={[ - { - childName: "area-1", - target: "data", - eventHandlers: { - onClick: () => { - return [ - { - childName: "area-2", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "gold" }), - }; - }, - }, - { - childName: "area-3", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "orange" }), - }; - }, - }, - { - childName: "area-4", - target: "data", - mutation: (props) => { - return { - style: Object.assign({}, props.style, { fill: "red" }), - }; - }, - }, - ]; - }, - }, - }, - ]} - > - - - - - - - - - - - } - > - - - - -
    - ); - } -} diff --git a/demo/js/index.html b/demo/js/index.html deleted file mode 100644 index afb58df17..000000000 --- a/demo/js/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - Demo - - - - - - - -
    -

    Loading...

    -
    - - - diff --git a/demo/js/theme/victory-axis-differential-styling-theme.js b/demo/js/theme/victory-axis-differential-styling-theme.js deleted file mode 100644 index 8b3c49e94..000000000 --- a/demo/js/theme/victory-axis-differential-styling-theme.js +++ /dev/null @@ -1,51 +0,0 @@ -export default { - axis: { - style: { - axis: { - fill: "transparent", - strokeWidth: 3, - stroke: "#90A4AE", - }, - grid: { - fill: "transparent", - stroke: "#ECEFF1", - strokeWidth: 3, - }, - ticks: { - size: 15, - }, - tickLabels: { - fill: "#00796B", - }, - }, - width: 500, - height: 400, - padding: 25, - }, - independentAxis: { - style: { - axis: { - stroke: "#F4511E", - }, - ticks: { - strokeWidth: 3, - stroke: "#F4511E", - }, - }, - offsetY: 200, - }, - dependentAxis: { - style: { - axis: { - strokeWidth: 1, - }, - grid: { - strokeWidth: 1, - }, - tickLabels: { - fill: "#000000", - }, - }, - offsetX: 250, - }, -}; From 758ad0034e7ff787b1bc1f28413c03c845b0481f Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Fri, 9 Feb 2024 14:41:38 -0800 Subject: [PATCH 22/24] add changeset --- .changeset/good-zoos-cheat.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/good-zoos-cheat.md diff --git a/.changeset/good-zoos-cheat.md b/.changeset/good-zoos-cheat.md new file mode 100644 index 000000000..d5755a34e --- /dev/null +++ b/.changeset/good-zoos-cheat.md @@ -0,0 +1,6 @@ +--- +"victory-brush-container": patch +"victory-candlestick": patch +--- + +Improve types for brush container and candlestick From 56ac18a1f9a4710fb2d6a87c72b903565c6efa70 Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Mon, 12 Feb 2024 07:38:39 -0800 Subject: [PATCH 23/24] pr feedback --- demo/ts/components/create-container-demo.tsx | 1 - demo/ts/components/victory-tooltip-demo.tsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/demo/ts/components/create-container-demo.tsx b/demo/ts/components/create-container-demo.tsx index 8e1ba68d5..778504cf0 100644 --- a/demo/ts/components/create-container-demo.tsx +++ b/demo/ts/components/create-container-demo.tsx @@ -273,7 +273,6 @@ class App extends React.Component { render() { return (
    - hi diff --git a/demo/ts/components/victory-tooltip-demo.tsx b/demo/ts/components/victory-tooltip-demo.tsx index faa608bf6..fde2b3238 100644 --- a/demo/ts/components/victory-tooltip-demo.tsx +++ b/demo/ts/components/victory-tooltip-demo.tsx @@ -72,8 +72,6 @@ class App extends React.Component { horizontal style={{ parent: parentStyle }} highLabelComponent={} - // @todo high labels type needs to have an OR so that it can also return a string. - // Currently, it only allows returning an integer which is incorrect, as a label would typically be a string. highLabels={({ datum }) => `hello #${datum.x}`} data={[ { x: 1, open: 5, close: 10, high: 15, low: 0 }, From 29964ad1e47ffff9a913e5227afd308c77affb7b Mon Sep 17 00:00:00 2001 From: Sawyer Burnett Date: Mon, 12 Feb 2024 07:49:11 -0800 Subject: [PATCH 24/24] remove todo left in code --- demo/ts/components/victory-voronoi-container-demo.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/ts/components/victory-voronoi-container-demo.tsx b/demo/ts/components/victory-voronoi-container-demo.tsx index 48bbffa61..eee4f9499 100644 --- a/demo/ts/components/victory-voronoi-container-demo.tsx +++ b/demo/ts/components/victory-voronoi-container-demo.tsx @@ -141,7 +141,6 @@ export default class VictoryVoronoiContainerDemo extends React.Component< labels={({ datum }) => `y: ${datum.y}`} labelComponent={ { return activePoints .map(({ y }) => `value: ${y}`)