From b9b2fcece17c5b44b6ef97665873d748d7a5310d Mon Sep 17 00:00:00 2001 From: wendy Date: Fri, 1 May 2020 16:22:36 -0700 Subject: [PATCH 1/7] Adds ImmutableDemo to app --- demo/ts/app.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx index 8e9fce63d..da5dcb609 100644 --- a/demo/ts/app.tsx +++ b/demo/ts/app.tsx @@ -13,7 +13,11 @@ import ChartDemo from "./components/victory-chart-demo"; import CursorContainerDemo from "./components/victory-cursor-container-demo"; import DraggableDemo from "./components/draggable-demo"; import ErrorBarDemo from "./components/victory-errorbar-demo"; +<<<<<<< HEAD import EventsDemo from "./components/events-demo"; +======= +import ImmutableDemo from "./components/immutable-demo"; +>>>>>>> Adds ImmutableDemo to app import LegendDemo from "./components/victory-legend-demo"; import LineDemo from "./components/victory-line-demo"; import PieDemo from "./components/victory-pie-demo"; @@ -39,6 +43,7 @@ const MAP = { "/draggable-demo": { component: DraggableDemo, name: "DraggableDemo" }, "/error-bar": { component: ErrorBarDemo, name: "ErrorBarDemo" }, "/events-demo": { component: EventsDemo, name: "EventsDemo" }, + "/immutable": { component: ImmutableDemo, name: "ImmutableDemo" }, "/legend": { component: LegendDemo, name: "LegendDemo" }, "/line": { component: LineDemo, name: "LineDemo" }, "/pie": { component: PieDemo, name: "PieDemo" }, From 33daf4e08518f005d0f245a5eed528619f723f78 Mon Sep 17 00:00:00 2001 From: wendy Date: Fri, 1 May 2020 16:23:10 -0700 Subject: [PATCH 2/7] Adds ImmutableDemo with type def --- demo/ts/components/immutable-demo.tsx | 895 ++++++++++++++++++++++++++ 1 file changed, 895 insertions(+) create mode 100644 demo/ts/components/immutable-demo.tsx diff --git a/demo/ts/components/immutable-demo.tsx b/demo/ts/components/immutable-demo.tsx new file mode 100644 index 000000000..ee2172ad5 --- /dev/null +++ b/demo/ts/components/immutable-demo.tsx @@ -0,0 +1,895 @@ +/* global window:false */ +/* eslint-disable no-magic-numbers, react/no-multi-comp */ +import React from "react"; +// import PropTypes from "prop-types"; +import { assign, merge, keys, random, range, round } from "lodash"; +import { fromJS } from "immutable"; +import { VictoryChart } from "@packages/victory-chart"; +import { VictoryStack } from "@packages/victory-stack"; +import { VictoryGroup } from "@packages/victory-group"; +import { VictoryArea } from "@packages/victory-area"; +import { VictoryAxis } from "@packages/victory-axis"; +import { VictoryPolarAxis } from "@packages/victory-polar-axis"; +import { VictoryBar } from "@packages/victory-bar"; +import { VictoryLine } from "@packages/victory-line"; +import { VictoryScatter } from "@packages/victory-scatter"; +// import { VictoryErrorBar } from "@packages/victory-errorbar"; +import { VictoryCandlestick } from "@packages/victory-candlestick"; +import { VictoryVoronoi } from "@packages/victory-voronoi"; +import { VictoryZoomContainer } from "@packages/victory-zoom-container"; +import { VictoryVoronoiContainer } from "@packages/victory-voronoi-container"; +import { VictorySelectionContainer } from "@packages/victory-selection-container"; +import { VictoryCursorContainer } from "@packages/victory-cursor-container"; +import { VictoryBrushContainer } from "@packages/victory-brush-container"; +import { VictoryTooltip } from "@packages/victory-tooltip"; +import { VictoryLegend } from "@packages/victory-legend"; +import { + DomainTuple, + VictoryClipContainer, + VictoryLabel, + VictoryStyleInterface, + VictoryTheme +} from "@packages/victory-core"; + +interface WrapperProps { + children?: React.ReactElement | React.ReactElement[]; +} + +class Wrapper extends React.Component { + // static propTypes = { + // children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]) + // }; + + renderChildren(props: WrapperProps) { + const children = React.Children.toArray(props.children); + return children.map((child: any) => { + return React.cloneElement(child, assign({}, child.props, props)); + }); + } + + render() { + return {this.renderChildren(this.props)}; + } +} + +type MultiAxisDataType = { + strength?: number; + intelligence?: number; + stealth?: number; +}[]; + +const multiAxisData: MultiAxisDataType = [ + { strength: 1, intelligence: 250, stealth: 45 }, + { strength: 2, intelligence: 300, stealth: 75 }, + { strength: 5, intelligence: 225, stealth: 60 } +]; + +type DataType = { + x?: string | number; + y?: string | number; +}; + +interface ImmutableDemoState { + scatterData: { + x: number; + y: number; + size: number; + symbol: string; + fill: string; + opacity: number; + }[]; + multiTransitionData: DataType[][]; + multiTransitionAreaData: DataType[][]; + multiAxisData: DataType[][]; + multiAxisMaxima: React.ReactElement[]; + zoomDomain: { x?: DomainTuple; y?: DomainTuple }; +} + +export default class ImmutableDemo extends React.Component { + setStateInterval?: number = undefined; + + constructor(props: any) { + 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: MultiAxisDataType) { + const groupedData = keys(data[0]).reduce((memo: any, key: string | number) => { + memo[key] = data.map((d) => d[key]); + return memo; + }, {}); + return keys(groupedData).reduce((memo: any, key: string | number) => { + memo[key] = Math.max(...groupedData[key]); + return memo; + }, {}); + } + + processMultiAxisData(data: MultiAxisDataType) { + const maxByGroup = this.getMaxData(data); + const makeDataArray = (d: any) => { + return keys(d).map((key: string) => { + return { x: key, y: d[key] / maxByGroup[key] }; + }); + }; + return fromJS(data.map((datum) => makeDataArray(datum))); + } + + render() { + const containerStyle: React.CSSProperties = { + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center" + }; + + const chartStyle: VictoryStyleInterface = { + 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: merge({}, props.style, { fill: "gold" }) }; + } + }, + { + childName: "area-3", + target: "data", + mutation: (props) => { + return { + style: merge({}, props.style, { fill: "orange" }) + }; + } + }, + { + childName: "area-4", + target: "data", + mutation: (props) => { + return { + style: merge({}, 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: merge({}, props.style.labels, { fill: "orange" }) + }; + } + } + ]; + } + } + }, + { + target: "data", + eventHandlers: { + onClick: () => { + return [ + { + mutation: (props) => { + return { + style: merge({}, props.style, { fill: "blue" }) + }; + } + } + ]; + } + } + } + ]} + /> + + + + { + return [ + { + target: "labels", + eventKey: [3, 4, 5], + mutation: () => { + return { text: "o shit" }; + } + }, + { + childName: "line", + target: "data", + mutation: (props) => { + return { style: merge({}, props.style, { stroke: "lime" }) }; + } + }, + { + childName: "line", + target: "labels", + mutation: (props) => { + return { + style: merge({}, 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: merge({}, props.style, { fill: "gold" }) }; + } + }, + { + childName: "area-3", + target: "data", + mutation: (props) => { + return { + style: merge({}, props.style, { fill: "orange" }) + }; + } + }, + { + childName: "area-4", + target: "data", + mutation: (props) => { + return { + style: merge({}, 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 ; + })} + + +
+
+ ); + } +} From b071dbf71890b2cf9622b5900ac1875f36be00d5 Mon Sep 17 00:00:00 2001 From: wendy Date: Tue, 5 May 2020 10:34:55 -0700 Subject: [PATCH 3/7] Removes unused import and adds addition type definiton for events prop --- demo/ts/app.tsx | 3 --- packages/victory-chart/src/index.d.ts | 5 ++++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx index da5dcb609..96767d43a 100644 --- a/demo/ts/app.tsx +++ b/demo/ts/app.tsx @@ -13,11 +13,8 @@ import ChartDemo from "./components/victory-chart-demo"; import CursorContainerDemo from "./components/victory-cursor-container-demo"; import DraggableDemo from "./components/draggable-demo"; import ErrorBarDemo from "./components/victory-errorbar-demo"; -<<<<<<< HEAD import EventsDemo from "./components/events-demo"; -======= import ImmutableDemo from "./components/immutable-demo"; ->>>>>>> Adds ImmutableDemo to app import LegendDemo from "./components/victory-legend-demo"; import LineDemo from "./components/victory-line-demo"; import PieDemo from "./components/victory-pie-demo"; diff --git a/packages/victory-chart/src/index.d.ts b/packages/victory-chart/src/index.d.ts index df7283653..9b0ac4aea 100644 --- a/packages/victory-chart/src/index.d.ts +++ b/packages/victory-chart/src/index.d.ts @@ -3,7 +3,6 @@ import { CategoryPropType, EventPropTypeInterface, DomainPropType, - DomainPaddingPropType, StringOrNumberOrCallback, VictoryCommonProps, VictoryStyleInterface @@ -21,7 +20,11 @@ export interface VictoryChartProps extends VictoryCommonProps { children?: React.ReactNode | React.ReactNode[]; domain?: DomainPropType; endAngle?: number; +<<<<<<< HEAD events?: EventPropTypeInterface[]; +======= + events?: EventPropTypeInterface[]; +>>>>>>> Removes unused import and adds addition type definiton for events prop eventKey?: StringOrNumberOrCallback; innerRadius?: number; prependDefaultAxes?: boolean; From 968c44b9240c900f4429930ebf6778b407fc547f Mon Sep 17 00:00:00 2001 From: wendy Date: Tue, 5 May 2020 10:35:21 -0700 Subject: [PATCH 4/7] Fixes type errors for demo --- demo/js/components/immutable-demo.js | 6 +++--- demo/ts/components/immutable-demo.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/demo/js/components/immutable-demo.js b/demo/js/components/immutable-demo.js index 1ba49089c..a1913a087 100644 --- a/demo/js/components/immutable-demo.js +++ b/demo/js/components/immutable-demo.js @@ -674,10 +674,10 @@ class App extends React.Component { { x: 2, y: -4, l: "dog" }, { x: 3, y: -2, l: "bird" } ])} - style={fromJS({ + style={{ data: { stroke: "black", strokeWidth: ({ active }) => (active ? 4 : 2) }, labels: { fill: "black" } - })} + }} /> @@ -688,7 +688,7 @@ class App extends React.Component { padding={{ top: 100, bottom: 40, left: 50, right: 50 }} containerComponent={ `${round(datum.x, 2)} , ${round(datum.y, 2)}`} + cursorLabel={(datum) => `${round(datum.x, 2)} , ${round(datum.y, 2)}`} /> } > diff --git a/demo/ts/components/immutable-demo.tsx b/demo/ts/components/immutable-demo.tsx index ee2172ad5..03f5917cf 100644 --- a/demo/ts/components/immutable-demo.tsx +++ b/demo/ts/components/immutable-demo.tsx @@ -712,10 +712,10 @@ export default class ImmutableDemo extends React.Component (active ? 4 : 2) }, labels: { fill: "black" } - })} + }} /> @@ -726,7 +726,7 @@ export default class ImmutableDemo extends React.Component `${round(datum.x, 2)} , ${round(datum.y, 2)}`} + cursorLabel={(datum) => `${round(datum.x, 2)} , ${round(datum.y, 2)}`} /> } > From 690931b9889635c18858e91516c94c4cfc1791ae Mon Sep 17 00:00:00 2001 From: wendy Date: Tue, 5 May 2020 11:09:43 -0700 Subject: [PATCH 5/7] Updates type definition of style prop for Victory Tooltip to be an object --- demo/js/components/immutable-demo.js | 2 +- demo/ts/components/immutable-demo.tsx | 2 +- packages/victory-tooltip/src/index.d.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/js/components/immutable-demo.js b/demo/js/components/immutable-demo.js index a1913a087..dd7ea27ec 100644 --- a/demo/js/components/immutable-demo.js +++ b/demo/js/components/immutable-demo.js @@ -639,7 +639,7 @@ class App extends React.Component { } /> diff --git a/demo/ts/components/immutable-demo.tsx b/demo/ts/components/immutable-demo.tsx index 03f5917cf..6053bdf15 100644 --- a/demo/ts/components/immutable-demo.tsx +++ b/demo/ts/components/immutable-demo.tsx @@ -677,7 +677,7 @@ export default class ImmutableDemo extends React.Component } /> diff --git a/packages/victory-tooltip/src/index.d.ts b/packages/victory-tooltip/src/index.d.ts index 919b4d00f..27e2e12e6 100644 --- a/packages/victory-tooltip/src/index.d.ts +++ b/packages/victory-tooltip/src/index.d.ts @@ -40,7 +40,7 @@ export interface VictoryTooltipProps extends VictoryLabelableProps { pointerOrientation?: OrientationTypes | ((...args: any[]) => OrientationTypes); pointerWidth?: NumberOrCallback; renderInPortal?: boolean; - style?: React.CSSProperties; + style?: VictoryStyleObject; text?: StringOrNumberOrCallback | string[] | number[]; theme?: VictoryThemeDefinition; width?: number; From d7fbe1c85eb6dd594a863f8bc27ee6e98fd70bc4 Mon Sep 17 00:00:00 2001 From: wendy Date: Tue, 5 May 2020 11:18:45 -0700 Subject: [PATCH 6/7] Removes commented out component and unused import --- demo/ts/components/immutable-demo.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/demo/ts/components/immutable-demo.tsx b/demo/ts/components/immutable-demo.tsx index 6053bdf15..950ce236e 100644 --- a/demo/ts/components/immutable-demo.tsx +++ b/demo/ts/components/immutable-demo.tsx @@ -1,7 +1,6 @@ /* global window:false */ /* eslint-disable no-magic-numbers, react/no-multi-comp */ import React from "react"; -// import PropTypes from "prop-types"; import { assign, merge, keys, random, range, round } from "lodash"; import { fromJS } from "immutable"; import { VictoryChart } from "@packages/victory-chart"; @@ -13,7 +12,7 @@ import { VictoryPolarAxis } from "@packages/victory-polar-axis"; import { VictoryBar } from "@packages/victory-bar"; import { VictoryLine } from "@packages/victory-line"; import { VictoryScatter } from "@packages/victory-scatter"; -// import { VictoryErrorBar } from "@packages/victory-errorbar"; +import { VictoryErrorBar } from "@packages/victory-errorbar"; import { VictoryCandlestick } from "@packages/victory-candlestick"; import { VictoryVoronoi } from "@packages/victory-voronoi"; import { VictoryZoomContainer } from "@packages/victory-zoom-container"; @@ -36,10 +35,6 @@ interface WrapperProps { } class Wrapper extends React.Component { - // static propTypes = { - // children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]) - // }; - renderChildren(props: WrapperProps) { const children = React.Children.toArray(props.children); return children.map((child: any) => { @@ -340,7 +335,7 @@ export default class ImmutableDemo extends React.Component - {/* */} + /> Date: Tue, 5 May 2020 15:29:18 -0700 Subject: [PATCH 7/7] Changes type definition for style prop to accept arrays of objects --- demo/js/components/immutable-demo.js | 2 +- demo/ts/components/immutable-demo.tsx | 2 +- packages/victory-chart/src/index.d.ts | 4 ---- packages/victory-tooltip/src/index.d.ts | 2 +- 4 files changed, 3 insertions(+), 7 deletions(-) diff --git a/demo/js/components/immutable-demo.js b/demo/js/components/immutable-demo.js index dd7ea27ec..a1913a087 100644 --- a/demo/js/components/immutable-demo.js +++ b/demo/js/components/immutable-demo.js @@ -639,7 +639,7 @@ class App extends React.Component { } /> diff --git a/demo/ts/components/immutable-demo.tsx b/demo/ts/components/immutable-demo.tsx index 950ce236e..dc38dda9b 100644 --- a/demo/ts/components/immutable-demo.tsx +++ b/demo/ts/components/immutable-demo.tsx @@ -672,7 +672,7 @@ export default class ImmutableDemo extends React.Component } /> diff --git a/packages/victory-chart/src/index.d.ts b/packages/victory-chart/src/index.d.ts index 9b0ac4aea..be922bf7b 100644 --- a/packages/victory-chart/src/index.d.ts +++ b/packages/victory-chart/src/index.d.ts @@ -20,11 +20,7 @@ export interface VictoryChartProps extends VictoryCommonProps { children?: React.ReactNode | React.ReactNode[]; domain?: DomainPropType; endAngle?: number; -<<<<<<< HEAD events?: EventPropTypeInterface[]; -======= - events?: EventPropTypeInterface[]; ->>>>>>> Removes unused import and adds addition type definiton for events prop eventKey?: StringOrNumberOrCallback; innerRadius?: number; prependDefaultAxes?: boolean; diff --git a/packages/victory-tooltip/src/index.d.ts b/packages/victory-tooltip/src/index.d.ts index 27e2e12e6..a43d23686 100644 --- a/packages/victory-tooltip/src/index.d.ts +++ b/packages/victory-tooltip/src/index.d.ts @@ -40,7 +40,7 @@ export interface VictoryTooltipProps extends VictoryLabelableProps { pointerOrientation?: OrientationTypes | ((...args: any[]) => OrientationTypes); pointerWidth?: NumberOrCallback; renderInPortal?: boolean; - style?: VictoryStyleObject; + style?: React.CSSProperties | React.CSSProperties[]; text?: StringOrNumberOrCallback | string[] | number[]; theme?: VictoryThemeDefinition; width?: number;