From 8ca25de282d4529f081afee5a9bfa57babd3003a Mon Sep 17 00:00:00 2001 From: Charlie Brown Date: Mon, 18 Nov 2024 09:21:27 -0600 Subject: [PATCH] Migrate chart demos to website docs --- demo/ts/components/animation-demo.tsx | 175 --- demo/ts/components/bubble-data.tsx | 249 ---- demo/ts/components/canvas-demo.tsx | 333 ------ demo/ts/components/group-demo.tsx | 178 --- demo/ts/components/horizontal-demo.tsx | 583 ---------- demo/ts/components/immutable-demo.tsx | 1020 ----------------- demo/ts/components/ouia-demo.tsx | 46 - demo/ts/components/primitives-demo.tsx | 167 --- demo/ts/components/symbol-data.tsx | 84 -- demo/ts/components/victory-area-demo.tsx | 347 ------ demo/ts/components/victory-axis-demo.tsx | 283 ----- demo/ts/components/victory-bar-demo.tsx | 633 ---------- demo/ts/components/victory-box-plot-demo.tsx | 276 ----- .../components/victory-candlestick-demo.tsx | 191 --- demo/ts/components/victory-chart-demo.tsx | 806 ------------- demo/ts/components/victory-demo.tsx | 247 ---- demo/ts/components/victory-errorbar-demo.tsx | 189 --- demo/ts/components/victory-histogram-demo.tsx | 668 ----------- demo/ts/components/victory-line-demo.tsx | 354 ------ demo/ts/components/victory-pie-demo.tsx | 372 ------ demo/ts/components/victory-scatter-demo.tsx | 350 ------ demo/ts/components/victory-stack-demo.tsx | 86 -- demo/ts/components/victory-tooltip-demo.tsx | 172 --- demo/ts/components/victory-voronoi-demo.tsx | 163 --- website/docs/charts/area.mdx | 22 +- website/docs/charts/bar.mdx | 152 ++- website/docs/charts/box-plot.mdx | 17 +- website/docs/charts/candlestick.mdx | 109 +- website/docs/charts/error-bar.mdx | 112 ++ website/docs/charts/histogram.mdx | 112 +- website/docs/charts/line.mdx | 47 + website/docs/charts/pie.mdx | 96 ++ website/docs/charts/scatter.mdx | 137 ++- website/docs/charts/voronoi.mdx | 54 +- website/docs/guides/axis.mdx | 65 ++ 35 files changed, 881 insertions(+), 8014 deletions(-) delete mode 100644 demo/ts/components/animation-demo.tsx delete mode 100644 demo/ts/components/bubble-data.tsx delete mode 100644 demo/ts/components/canvas-demo.tsx delete mode 100644 demo/ts/components/group-demo.tsx delete mode 100644 demo/ts/components/horizontal-demo.tsx delete mode 100644 demo/ts/components/immutable-demo.tsx delete mode 100644 demo/ts/components/ouia-demo.tsx delete mode 100644 demo/ts/components/primitives-demo.tsx delete mode 100644 demo/ts/components/symbol-data.tsx delete mode 100644 demo/ts/components/victory-area-demo.tsx delete mode 100644 demo/ts/components/victory-axis-demo.tsx delete mode 100644 demo/ts/components/victory-bar-demo.tsx delete mode 100644 demo/ts/components/victory-box-plot-demo.tsx delete mode 100644 demo/ts/components/victory-candlestick-demo.tsx delete mode 100644 demo/ts/components/victory-chart-demo.tsx delete mode 100644 demo/ts/components/victory-demo.tsx delete mode 100644 demo/ts/components/victory-errorbar-demo.tsx delete mode 100644 demo/ts/components/victory-histogram-demo.tsx delete mode 100644 demo/ts/components/victory-line-demo.tsx delete mode 100644 demo/ts/components/victory-pie-demo.tsx delete mode 100644 demo/ts/components/victory-scatter-demo.tsx delete mode 100644 demo/ts/components/victory-stack-demo.tsx delete mode 100644 demo/ts/components/victory-tooltip-demo.tsx delete mode 100644 demo/ts/components/victory-voronoi-demo.tsx diff --git a/demo/ts/components/animation-demo.tsx b/demo/ts/components/animation-demo.tsx deleted file mode 100644 index abd8c4ab6..000000000 --- a/demo/ts/components/animation-demo.tsx +++ /dev/null @@ -1,175 +0,0 @@ -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(props) { - super(props); - - 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 = VictoryTheme.clean.bar?.colorScale ?? [ - "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: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
- d.x} - theme={VictoryTheme.clean} - /> - - - - - - - {this.state.multiTransitionData.map((data, index) => { - return ( - - ); - })} - - - - - {this.state.multiTransitionData.map((data, index) => { - return ( - - ); - })} - - - - - - - - - - -
- ); - } -} diff --git a/demo/ts/components/bubble-data.tsx b/demo/ts/components/bubble-data.tsx deleted file mode 100644 index 60da8fa55..000000000 --- a/demo/ts/components/bubble-data.tsx +++ /dev/null @@ -1,249 +0,0 @@ -const bubbleData: { - name?: string; - y: number; - x: number; - z: number; -}[] = [ - { - 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, - }, -]; - -export default bubbleData; diff --git a/demo/ts/components/canvas-demo.tsx b/demo/ts/components/canvas-demo.tsx deleted file mode 100644 index 2bc2d0284..000000000 --- a/demo/ts/components/canvas-demo.tsx +++ /dev/null @@ -1,333 +0,0 @@ -import React from "react"; - -import { range, random } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryLine } from "victory-line"; -import { VictoryAxis } from "victory-axis"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryBar } from "victory-bar"; -import { - CanvasBar, - CanvasCurve, - CanvasGroup, - CanvasPoint, -} from "victory-canvas"; -import { VictoryTheme } from "victory-core"; - -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: React.CSSProperties = { - 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: any = []; - 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 = VictoryTheme.clean.palette?.qualitative ?? [ - "red", - "orange", - "gold", - "tomato", - "magenta", - "purple", - ]; - return { - fill: colors[random(0, colors.length - 1)], - }; - }; - - 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/ts/components/group-demo.tsx b/demo/ts/components/group-demo.tsx deleted file mode 100644 index 8e47bbf88..000000000 --- a/demo/ts/components/group-demo.tsx +++ /dev/null @@ -1,178 +0,0 @@ -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 { VictoryBoxPlot } from "victory-box-plot"; -import { range, random } from "lodash"; -import { VictoryTheme } from "victory-core"; - -const themeColors = VictoryTheme.clean.palette?.colors || {}; -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: React.CSSProperties = { - 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/ts/components/horizontal-demo.tsx b/demo/ts/components/horizontal-demo.tsx deleted file mode 100644 index 96dbe243d..000000000 --- a/demo/ts/components/horizontal-demo.tsx +++ /dev/null @@ -1,583 +0,0 @@ -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"; -import { VictoryTheme } from "victory-core"; - -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 }, -]; - -const themeColors = VictoryTheme.clean.palette?.colors || {}; - -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: React.CSSProperties = { - 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: 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)} - samples={25} - style={{ - data: { - stroke: themeColors.green, - }, - }} - /> - - - "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 }, - ]} - /> - - - - - - - - - } - > - - - - -
- ); - } -} - -export default App; diff --git a/demo/ts/components/immutable-demo.tsx b/demo/ts/components/immutable-demo.tsx deleted file mode 100644 index 3c69ad4ba..000000000 --- a/demo/ts/components/immutable-demo.tsx +++ /dev/null @@ -1,1020 +0,0 @@ -import React from "react"; -import { keys, random, range, round } from "lodash"; -import { fromJS } from "immutable"; -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 { - DomainTuple, - VictoryClipContainer, - VictoryLabel, - VictoryStyleInterface, - VictoryTheme, -} from "victory-core"; - -const themeColors = VictoryTheme.clean.palette?.colors || {}; -const scatterFillStyle: VictoryStyleInterface = { - data: { - fill: ({ active }) => - active ? themeColors.red || "pink" : themeColors.blue || "blue", - }, -}; -interface WrapperProps { - children?: React.ReactElement | React.ReactElement[]; -} - -class Wrapper extends React.Component { - renderChildren(props: WrapperProps) { - const children = React.Children.toArray(props.children); - return children.map((child: any) => { - return React.cloneElement(child, Object.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< - any, - ImmutableDemoState -> { - 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() { - 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: 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: { - ...props.style, - stroke: themeColors.orange, - }, - }; - }, - }, - ]; - }, - }, - }, - { - target: "data", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - return { - style: { - ...props.style, - stroke: themeColors.blue, - }, - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - - { - return [ - { - target: "labels", - eventKey: [3, 4, 5], - mutation: () => { - return { text: "o shit" }; - }, - }, - { - childName: "line", - target: "data", - mutation: (props) => { - return { - style: { - ...props.style, - stroke: themeColors.yellow, - }, - }; - }, - }, - { - childName: "line", - target: "labels", - mutation: (props) => { - return { - style: { - ...props.style, - stroke: themeColors.green, - }, - text: "waddup", - }; - }, - }, - ]; - }, - }, - }, - ]} - > - - 0.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.clean} - events={[ - { - childName: "area-1", - target: "data", - eventHandlers: { - onClick: () => [ - { - childName: "area-2", - target: "data", - mutation: (props) => { - return { - style: { - ...props.style, - fill: themeColors.yellow, - }, - }; - }, - }, - { - childName: "area-3", - target: "data", - mutation: (props) => { - return { - style: { - ...props.style, - fill: themeColors.orange, - }, - }; - }, - }, - { - childName: "area-4", - target: "data", - mutation: (props) => { - return { - style: { - ...props.style, - fill: themeColors.red, - }, - }; - }, - }, - ], - }, - }, - ]} - > - - - - - - - - - - - `y:${datum.y}`} - labelComponent={ - - } - /> - } - > - (active ? 2 : 1), - }, - labels: { fill: themeColors.red }, - }} - /> - (active ? 2 : 1), - }, - labels: { fill: themeColors.blue }, - }} - /> - (active ? 2 : 1), - }, - labels: { fill: themeColors.green }, - }} - /> - - - - `${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 ( - - ); - })} - - - - } - > - - - datum.y} - labelComponent={} - /> - - - - datum.y} - labelComponent={} - /> - - - - 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 ; - })} - - -
-
- ); - } -} diff --git a/demo/ts/components/ouia-demo.tsx b/demo/ts/components/ouia-demo.tsx deleted file mode 100644 index 3764f892b..000000000 --- a/demo/ts/components/ouia-demo.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryLine } from "victory-line"; -import { VictoryContainer, VictoryTheme } from "victory-core"; - -class OuiaDemo extends React.Component { - constructor(props: any) { - super(props); - } - - render() { - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - const chartStyle: { [key: string]: React.CSSProperties } = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - - return ( -
-

Open UI Automation (OUIA)

-
- - } - style={chartStyle} - > - - -
-
- ); - } -} - -export default OuiaDemo; diff --git a/demo/ts/components/primitives-demo.tsx b/demo/ts/components/primitives-demo.tsx deleted file mode 100644 index 030f1e732..000000000 --- a/demo/ts/components/primitives-demo.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import React from "react"; - -import { VictoryAxis } from "victory-axis"; -import { VictoryBoxPlot } from "victory-box-plot"; -import { VictoryChart } from "victory-chart"; -import { VictoryPolarAxis } from "victory-polar-axis"; -import { Arc, LineSegment, VictoryTheme, Whisker } from "victory-core"; -import { range, random } from "lodash"; - -const themeColors = VictoryTheme.clean.palette?.colors || {}; - -interface PrimitivesDemoState { - axisBackgroundColor: string; - whiskersActive: boolean; - boxPlotData?: { x?: number; y?: number[] }[]; -} - -class App extends React.Component { - setStateInterval?: number = undefined; - - constructor(props: any) { - super(props); - this.state = { - axisBackgroundColor: themeColors.green || "mediumseagreen", - whiskersActive: true, - }; - } - - componentDidMount() { - this.setStateInterval = window.setInterval(() => { - this.setState({ - boxPlotData: this.getBoxPlotData(), - }); - }, 3000); - } - - getBoxPlotData() { - return range(5).map((i: number) => { - return { - x: i, - y: [random(2, 100), random(2, 100), random(2, 100), random(2, 100)], - }; - }); - } - - handleClick() { - const newBackgroundColor = - this.state.axisBackgroundColor === "mediumseagreen" || - this.state.axisBackgroundColor === themeColors.green - ? themeColors.cyan || "paleturquoise" - : themeColors.green || "mediumseagreen"; - - this.setState({ axisBackgroundColor: newBackgroundColor }); - } - - handleToggleWhiskers() { - this.setState({ whiskersActive: !this.state.whiskersActive }); - } - - render() { - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const chartStyle = { - parent: { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }, - }; - - const axisChartStyle = { - ...chartStyle, - background: { fill: this.state.axisBackgroundColor }, - }; - - const lineSegmentStyle = { - stroke: "white", - strokeWidth: 5, - cursor: "pointer", - }; - - return ( -
-
- - - } - /> - } - circularAxisComponent={ - - } - /> - - - - - } - domain={[-10, 10]} - offsetY={200} - standalone={false} - /> - - } - domain={[-10, 10]} - offsetX={200} - standalone={false} - /> - - - - } - minComponent={} - /> - - -
-
- ); - } -} - -export default App; diff --git a/demo/ts/components/symbol-data.tsx b/demo/ts/components/symbol-data.tsx deleted file mode 100644 index cb15f8d7d..000000000 --- a/demo/ts/components/symbol-data.tsx +++ /dev/null @@ -1,84 +0,0 @@ -const symbolData: { - x: number; - y: number; - size?: number; - symbol?: string; - label?: string; - fill?: string; - opacity?: number; -}[] = [ - { - 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, - }, -]; - -export default symbolData; diff --git a/demo/ts/components/victory-area-demo.tsx b/demo/ts/components/victory-area-demo.tsx deleted file mode 100644 index 20a66b0bb..000000000 --- a/demo/ts/components/victory-area-demo.tsx +++ /dev/null @@ -1,347 +0,0 @@ -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"; - -interface VictoryAreaDemoState { - data: { - x: number; - y: number; - }[]; - arrayData: number[][]; - groupedData: { - x: string; - y: number; - }[][]; - multiTransitionData: { - x: number; - y: number; - }[][]; - areaTransitionData: { - x: number; - y: number; - y0: number; - }[]; - style?: React.CSSProperties; -} - -export default class VictoryAreaDemo extends React.Component< - any, - VictoryAreaDemoState -> { - constructor(props: any) { - super(props); - - 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: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
- - - - - - - - - - datum.y} - /> - - - - - - - - - - - - - - - - - - - - - - - - Math.sin(d)} - /> - - - - datum.y} - /> - - - - - 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/ts/components/victory-axis-demo.tsx b/demo/ts/components/victory-axis-demo.tsx deleted file mode 100644 index 577961f7a..000000000 --- a/demo/ts/components/victory-axis-demo.tsx +++ /dev/null @@ -1,283 +0,0 @@ -import React from "react"; -import { random, range } from "lodash"; -import { DomainPropType } from "victory-core"; -import { VictoryAxis, VictoryAxisProps } from "victory-axis"; -import { VictoryLabel, VictoryContainer, VictoryTheme } from "victory-core"; - -interface VictoryAxisDemoState { - tickValues: number[]; - domain: DomainPropType; -} - -export default class VictoryAxisDemo extends React.Component< - any, - VictoryAxisDemoState -> { - setStateInterval?: number = undefined; - - constructor(props: any) { - super(props); - this.state = { - tickValues: [5, 10, 25, 31, 42], - domain: [-5, 5], - }; - } - - componentDidMount() { - 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(): DomainPropType { - const someNumber = random(2, 5); - return [-someNumber, someNumber]; - } - - render() { - const style = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - - const blue = VictoryTheme.clean.palette?.colors?.blue || "blue"; - - const styleOverrides: VictoryAxisProps["style"] = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - grid: { - stroke: ({ tick }: any) => (tick === "Mariners\nSEA" ? blue : "grey"), - }, - ticks: { - stroke: ({ tick }: any) => (tick === "Mariners\nSEA" ? blue : "grey"), - }, - tickLabels: { - fontWeight: ({ tick }: any) => - tick === "Mariners\nSEA" ? "bold" : "normal", - }, - }; - - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
-
- - } - /> - - } - events={[ - { - target: "grid", - eventHandlers: { - onClick: () => { - return [ - { - mutation: (props: any) => { - 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/ts/components/victory-bar-demo.tsx b/demo/ts/components/victory-bar-demo.tsx deleted file mode 100644 index 157b0789e..000000000 --- a/demo/ts/components/victory-bar-demo.tsx +++ /dev/null @@ -1,633 +0,0 @@ -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 { VictoryContainer, VictoryTheme, VictoryLabel } from "victory-core"; -import { random, range } from "lodash"; - -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, Object.assign({}, child.props, props)); - }); - } - - render() { - return {this.renderChildren(this.props)}; - } -} - -type BarData = { - x: string | number; - y: string | number; -}[][]; - -interface VictoryBarDemoState { - barData: BarData; - barTransitionData: { - a: number; - b: number; - }[]; - multiTransitionData: BarData; - numericBarData: BarData; -} - -export default class VictoryBarDemo extends React.Component< - any, - VictoryBarDemoState -> { - setStateInterval?: number = undefined; - - constructor(props: any) { - super(props); - this.state = { - barData: this.getBarData(), - barTransitionData: this.getBarTransitionData(), - multiTransitionData: this.getMultiTransitionData(), - numericBarData: this.getNumericBarData(), - }; - } - - componentDidMount() { - 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: React.CSSProperties = { - 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", - }), - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - { - evt.stopPropagation(); - return [ - { - mutation: () => { - return { style: { fill: "orange" } }; - }, - }, - ]; - }, - }, - }, - { - target: "parent", - eventHandlers: { - onClick: () => { - return [ - { - target: "labels", - mutation: () => { - return { text: "o shit" }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - - - - - - -
- ); - } -} - -interface ChartWrapProps { - children?: any; - height?: number; - weight?: number; -} - -class ChartWrap extends React.Component { - static defaultProps = { - height: 250, - width: 350, - theme: VictoryTheme.clean, - }; - // 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/ts/components/victory-box-plot-demo.tsx b/demo/ts/components/victory-box-plot-demo.tsx deleted file mode 100644 index f6b17e85a..000000000 --- a/demo/ts/components/victory-box-plot-demo.tsx +++ /dev/null @@ -1,276 +0,0 @@ -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"; - -interface VictoryBoxPlotDemoState { - data: { - x: number; - y: number[]; - }[]; -} - -export default class VictoryBoxPlotDemo extends React.Component< - any, - VictoryBoxPlotDemoState -> { - setStateInterval?: number = undefined; - - constructor(props: any) { - super(props); - this.state = { - data: this.getData(), - }; - } - - componentDidMount() { - 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: React.CSSProperties = { - 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={{ - q1: { fill: VictoryTheme.clean.palette?.colors?.yellow }, - q3: { fill: VictoryTheme.clean.palette?.colors?.red }, - }} - /> - - - - - - - - - - - - - - - - - - -
- ); - } -} diff --git a/demo/ts/components/victory-candlestick-demo.tsx b/demo/ts/components/victory-candlestick-demo.tsx deleted file mode 100644 index 7bf1ae2da..000000000 --- a/demo/ts/components/victory-candlestick-demo.tsx +++ /dev/null @@ -1,191 +0,0 @@ -import React from "react"; -import { VictoryChart } from "victory-chart"; -import { VictoryCandlestick } from "victory-candlestick"; -import { VictoryTheme } from "victory-core"; - -interface VictoryCandlestickDemoState { - data: { - x?: number; - open?: number; - close?: number; - high?: number; - low?: number; - size?: number; - fill?: string; - opacity?: number; - }[]; -} - -const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", -}; - -const style: { [key: string]: React.CSSProperties } = { - 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 VictoryCandlestickDemo extends React.Component< - any, - VictoryCandlestickDemoState -> { - render() { - 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} - 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.clean} - 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.open} - closeLabels={({ datum }) => datum.close} - lowLabels={({ datum }) => datum.low} - highLabels={({ datum }) => datum.high} - labelOrientation={{ open: "top", high: "top" }} - /> - - - -
- ); - } -} diff --git a/demo/ts/components/victory-chart-demo.tsx b/demo/ts/components/victory-chart-demo.tsx deleted file mode 100644 index 0e4c987f8..000000000 --- a/demo/ts/components/victory-chart-demo.tsx +++ /dev/null @@ -1,806 +0,0 @@ -import React from "react"; -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, - VictoryThemePalette, -} from "victory-core"; - -const UPDATE_INTERVAL = 3000; - -interface WrapperProps { - children: React.ReactElement | React.ReactElement[]; -} - -class Wrapper extends React.Component { - renderChildren() { - const props = omit(this.props, ["children"]); - const children = React.Children.toArray(this.props.children); - return children.map((child: any) => { - return React.cloneElement(child, Object.assign({}, child.props, props)); - }); - } - - render() { - return ( - - - {this.renderChildren()} - - ); - } -} - -type XYNumberType = { - x: number | string; - y: number | string; -}; - -interface VictoryChartDemoState { - scatterData: { - x: number; - y: number; - size: number; - symbol: string; - fill: string; - opacity: number; - }[]; - lineData: XYNumberType[]; - numericBarData: XYNumberType[][]; - barData: XYNumberType[][]; - barTransitionData: XYNumberType[]; - multiBarTransitionData: XYNumberType[][]; - lineStyle: React.CSSProperties; -} - -class VictoryChartDemo extends React.Component { - setStateInterval?: number = undefined; - - constructor(props: any) { - 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() { - 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(): React.CSSProperties { - const colors = VictoryTheme.clean.palette?.qualitative || [ - "red", - "orange", - "cyan", - "green", - "blue", - "purple", - ]; - return { - stroke: colors[random(0, colors.length - 1)], - }; - } - - render() { - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const chartStyle: { [key: string]: React.CSSProperties } = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - - const themeColors: VictoryThemePalette = - VictoryTheme.clean.palette?.colors || {}; - - return ( -
-

VictoryChart

-
- - - - - - - - - - - - - - - - - - - - `${t}s ${i} ${ts[0]}`} /> - } - 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} /> - d.x * d.x} /> - - - - - - {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: themeColors.purple, strokeWidth: 2 } }} - /> - - - - - {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 VictoryChartDemo; diff --git a/demo/ts/components/victory-demo.tsx b/demo/ts/components/victory-demo.tsx deleted file mode 100644 index d2d1d0e6a..000000000 --- a/demo/ts/components/victory-demo.tsx +++ /dev/null @@ -1,247 +0,0 @@ -import React from "react"; -import { VictoryAxis } from "victory-axis"; -import { VictoryArea } from "victory-area"; -import { VictoryBar } from "victory-bar"; -import { VictoryChart } from "victory-chart"; -import { VictoryLine } from "victory-line"; -import { VictoryPie } from "victory-pie"; -import { VictoryScatter } from "victory-scatter"; -import { VictoryStack } from "victory-stack"; -import { VictoryGroup } from "victory-group"; -import { VictorySelectionContainer } from "victory-selection-container"; -import { VictoryTheme } from "victory-core"; - -export default class App extends React.Component { - render() { - const style = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "100%" }, - }; - return ( -
-

Victory Demo

- -

Composites

- -

VictoryPie

-

Default props

- - -

VictoryChart

-

- Line chart of function y = x^2 -

- - - data.x * data.x} /> - - -

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, - }, - }} - 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 ? "#292929" : "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/ts/components/victory-errorbar-demo.tsx b/demo/ts/components/victory-errorbar-demo.tsx deleted file mode 100644 index d491ba784..000000000 --- a/demo/ts/components/victory-errorbar-demo.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import React from "react"; -import { random, range } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryScatter } from "victory-scatter"; -import { ErrorType, VictoryErrorBar } from "victory-errorbar"; -import { VictoryContainer, VictoryTheme } from "victory-core"; - -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%" }, -}; - -const themeColors = VictoryTheme.clean.palette?.colors || {}; - -type dataType = { - x?: string | number; - y?: string | number; - errorX?: ErrorType; - errorY?: ErrorType; -}; - -interface VictoryErrorBarState { - hoverStyle: { stroke: string }; - data: dataType[]; -} - -export default class VictoryErrorBarDemo extends React.Component< - any, - VictoryErrorBarState -> { - setStateInterval?: number = undefined; - - constructor(props: any) { - super(props); - - this.state = { - data: this.getData(), - hoverStyle: { stroke: themeColors.green || "green" }, - }; - } - - componentDidMount() { - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: this.getData(), - }); - }, 2000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - 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)], - }; - }); - }; - - render() { - return ( -
- - - - - - - - - - - - } - /> - - - - - datum.y > 0 - ? themeColors.red || "red" - : themeColors.blue || "blue", - }, - }} - width={500} - height={500} - /> - - - - - - - - { - return [ - { - mutation: (props: any) => { - return { - style: Object.assign({}, props.style, { - stroke: themeColors.orange || "orange", - }), - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - - - - - - -
- ); - } -} diff --git a/demo/ts/components/victory-histogram-demo.tsx b/demo/ts/components/victory-histogram-demo.tsx deleted file mode 100644 index 431993d20..000000000 --- a/demo/ts/components/victory-histogram-demo.tsx +++ /dev/null @@ -1,668 +0,0 @@ -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: Date, end: Date) => { - return new Date( - start.getTime() + Math.random() * (end.getTime() - start.getTime()), - ); -}; - -const getData = ({ - length = 100, - min = 0, - max = 10, - dates = false, -}: { - length?: number; - min?: number | Date | any; - max?: number | Date | any; - dates?: boolean; -} = {}) => { - const randomDataFunc = dates ? randomDate : random; - return range(length).map(() => ({ - x: randomDataFunc(min, max), - })); -}; - -type HistogramData = { - data: { x: any }[] | undefined; - bins: any; -}; - -interface VictoryBarDemoState { - dataLoadedInWithBins: HistogramData; - dataLoadedInWithoutBins: HistogramData; - dynamicBinsBasedOnData: HistogramData; - dynamicBins: HistogramData; - dateDataLoadedInWithBins: HistogramData; - dateDataLoadedInWithoutBins: HistogramData; - dateDynamicBinsBasedOnData: HistogramData; - dateDynamicBins: HistogramData; - style: { - fill: string; - }; -} - -export default class App extends React.Component<{}, VictoryBarDemoState> { - setStateInterval?: number = undefined; - - data = getData(); - data2 = getData({ max: 100 }); - dateData = getData({ - dates: true, - min: new Date(2012, 0, 1), - max: new Date(2014, 0, 1), - }); - - constructor(props: any) { - super(props); - 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() { - 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 = VictoryTheme.clean.palette?.qualitative ?? [ - "palevioletred", - "orange", - "cyan", - "green", - "blue", - "purple", - ]; - return { - fill: colors[random(0, colors.length - 1)], - }; - } - - render() { - const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
- [ - { - mutation: (props) => { - return { - style: { - ...props.style, - fill: VictoryTheme.clean.palette?.colors?.orange, - }, - }; - }, - }, - ], - onMouseOut: () => ({ - mutation: () => null, - }), - }, - }, - ]} - /> - - ({ value: x }))} - x="value" - /> - - - - - - - - - - - - { - return [ - { - mutation: (props) => { - return { - style: Object.assign({}, props.style, { - fill: VictoryTheme.clean.palette?.colors?.purple, - }), - }; - }, - }, - { - 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/ts/components/victory-line-demo.tsx b/demo/ts/components/victory-line-demo.tsx deleted file mode 100644 index 3d0b9d0b8..000000000 --- a/demo/ts/components/victory-line-demo.tsx +++ /dev/null @@ -1,354 +0,0 @@ -import React from "react"; -import { random, range } from "lodash"; -import { VictoryChart } from "victory-chart"; -import { VictoryLine, Curve } from "victory-line"; -import { VictoryContainer, VictoryTheme, Point } from "victory-core"; - -interface PointedLineProps { - index?: string | number; - data?: { - _x: number; - _y: number; - }[]; - scale?: any; -} - -class PointedLine extends React.Component { - renderLine(props: PointedLineProps) { - return ; - } - - renderPoints(props: PointedLineProps) { - 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)} - - ); - } -} - -interface VictoryLineDemoState { - data: { - x: number; - y: number; - }[]; - transitionData: { - x: number; - y: number; - }[]; - arrayData: number[][]; - style: React.CSSProperties; -} - -export default class VictoryLineDemo extends React.Component< - any, - VictoryLineDemoState -> { - setStateInterval?: number = undefined; - - constructor(props: any) { - super(props); - this.state = { - data: this.getData(), - transitionData: this.getTransitionData(), - arrayData: this.getArrayData(), - style: { - stroke: VictoryTheme.clean.line?.colorScale?.[0] ?? "blue", - }, - }; - } - - componentDidMount() { - 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 = VictoryTheme.clean.line?.colorScale ?? [ - "red", - "orange", - "cyan", - "green", - "blue", - "purple", - ]; - return { - stroke: colors[random(0, 5)], - }; - } - - render() { - const parentStyle = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - return ( -
- Math.sin(2 * Math.PI * d.x)} - samples={25} - theme={VictoryTheme.clean} - /> - - { - 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 }, - ]} - /> - - - - - - - - - - - - - - - - - - - - - - - - - - } - /> - - - - - -
- ); - } -} diff --git a/demo/ts/components/victory-pie-demo.tsx b/demo/ts/components/victory-pie-demo.tsx deleted file mode 100644 index ea9767a36..000000000 --- a/demo/ts/components/victory-pie-demo.tsx +++ /dev/null @@ -1,372 +0,0 @@ -import React from "react"; -import { random, range } from "lodash"; -import { VictoryPie } from "victory-pie"; -import { VictoryTooltip } from "victory-tooltip"; -import { VictoryTheme, Helpers } from "victory-core"; - -interface VictoryPieDemoState { - data: { - x: string; - y: number; - label?: string; - fill?: string; - }[]; - transitionData: { - x: number; - y: number; - label: string; - }[]; - colorScale: string[]; - sliceWidth: number; - style: { - [key: string]: React.CSSProperties; - }; - padding: number; -} - -export default class VictoryPieDemo extends React.Component< - any, - VictoryPieDemoState -> { - setStateInterval?: number = undefined; - - constructor(props: any) { - 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%", - }, - }, - padding: 0, - }; - } - - componentDidMount() { - 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: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const parentStyle: React.CSSProperties = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - - return ( -
-

VictoryPie Demo

- -
- - datum.radius - 20} - width={400} - height={200} - radius={({ datum }) => datum.radius} - data={[ - { x: 1, y: 1, radius: 50 }, - { x: 2, y: 3, radius: 60 }, - { x: 3, y: 5, radius: 80 }, - { x: 4, y: 2, radius: 90 }, - { x: 5, y: 3, radius: 70 }, - ]} - /> - - - - - - - - - - - ({ - mutation: (props) => ({ - radius: 110, - sliceStartAngle: Helpers.radiansToDegrees( - props.slice.startAngle + 0.05, - ), - sliceEndAngle: Helpers.radiansToDegrees( - props.slice.endAngle - 0.05, - ), - }), - }), - onMouseOut: () => ({ - mutation: () => null, - }), - }, - }, - ]} - /> - - { - return [ - { - target: "labels", - mutation: () => { - return { text: "parent click" }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - } - theme={VictoryTheme.clean} - colorScale="grayscale" - style={{ - parent: parentStyle, - }} - /> - - - - - - - - - - [i, Math.random()])} - x={0} - y={1} - animate={{ duration: 2000 }} - style={{ - ...this.state.style, - }} - colorScale="warm" - /> - - [i, Math.random()])} - x={0} - y={1} - style={{ parent: parentStyle }} - animate={{ duration: 2000 }} - /> - - [i, Math.random()])} - x={0} - y={1} - 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 }, - ]} - /> - - -
-
- ); - } -} diff --git a/demo/ts/components/victory-scatter-demo.tsx b/demo/ts/components/victory-scatter-demo.tsx deleted file mode 100644 index f168317dd..000000000 --- a/demo/ts/components/victory-scatter-demo.tsx +++ /dev/null @@ -1,350 +0,0 @@ -import React, { useState } from "react"; -import PropTypes from "prop-types"; -import { random, range } from "lodash"; -import { VictoryScatter } from "victory-scatter"; -import { - ScatterSymbolType, - VictoryLabel, - VictoryContainer, - VictoryTheme, -} from "victory-core"; -import bubbleData from "./bubble-data"; -import symbolData from "./symbol-data"; -import { FaMoon, FaFootballBall, FaSun } from "react-icons/fa"; - -type DataType = { - x?: string | number; - y?: string | number; - label?: string; - fill?: string; - size?: number; - symbol?: string; -}[]; - -interface VictoryScatterDemoState { - hoverStyle: { - fill: string; - }; - data: DataType; -} - -interface CatPointInterface { - symbol: string; - x: number; - y: number; -} - -const getData = () => { - const colors = VictoryTheme.clean.palette?.qualitative ?? [ - "violet", - "cornflowerblue", - "gold", - "orange", - "turquoise", - "tomato", - "greenyellow", - ]; - const symbols = [ - "circle", - "star", - "square", - "triangleUp", - "triangleDown", - "diamond", - "plus", - ]; - 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: { [key: string]: React.CSSProperties } = { - parent: { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }, -}; - -const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", -}; - -const CustomSunIcon = (props) => ( - -); - -const CustomCustomIconWithEvents = (props) => { - const [iconColor, setIconColor] = useState(props?.style?.fill || "green"); - const [icon, setIcon] = useState("moon"); - if (icon === "moon") { - return ( - { - setIcon("star"); - setIconColor("red"); - }} - /> - ); - } - return ( - { - setIcon("moon"); - setIconColor("blue"); - }} - /> - ); -}; - -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: ScatterSymbolType): string { - const codePointHigh = (point: number) => - Math.floor((point - 0x10000) / 0x400) + 0xd800; - const codePointLow = (point: number) => - ((point - 0x10000) % 0x400) + 0xdc00; - const symbolCode = CatPoint.symbolMap[symbol]; - - return String.fromCharCode( - codePointHigh(symbolCode), - codePointLow(symbolCode), - ); - } - - render() { - const { x, y, symbol } = this.props; - - return ( - - {this.renderSymbol(symbol)} - - ); - } -} - -export default class VictoryScatterDemo extends React.Component< - any, - VictoryScatterDemoState -> { - setStateInterval?: number = undefined; - constructor(props: any) { - super(props); - this.state = { - hoverStyle: { fill: "gold" }, - data: props.data, - }; - } - - componentDidMount() { - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: getData(), - }); - }, 2000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - render() { - return ( -
- } - containerComponent={ - - } - /> - - datum.fill, - opacity: ({ datum }) => datum.opacity, - }, - }} - domain={[0, 600]} - animate={{ duration: 2000 }} - data={this.state.data} - /> - - - datum.y > 0 - ? (VictoryTheme.clean.palette?.colors?.red ?? "red") - : (VictoryTheme.clean.palette?.colors?.blue ?? "blue"), - }, - }} - symbol={({ datum }) => (datum.y > 0 ? "triangleUp" : "triangleDown")} - y={(d) => Math.sin(2 * Math.PI * d.x)} - samples={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" - /> - {/* custom icons */} - } - /> - } - size={25} - samples={10} - /> -
- ); - } -} diff --git a/demo/ts/components/victory-stack-demo.tsx b/demo/ts/components/victory-stack-demo.tsx deleted file mode 100644 index f12689f5c..000000000 --- a/demo/ts/components/victory-stack-demo.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React from "react"; -import { VictoryStack } from "victory-stack"; -import { VictoryArea } from "victory-area"; -import { VictoryTheme } from "victory-core"; - -class App extends React.Component { - render() { - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const chartStyle: { [key: string]: React.CSSProperties } = { - parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }, - }; - - return ( -
-

Standalone Stack

- -
- - - - - - - - - - - -
-
- ); - } -} - -export default App; diff --git a/demo/ts/components/victory-tooltip-demo.tsx b/demo/ts/components/victory-tooltip-demo.tsx deleted file mode 100644 index 5219acabe..000000000 --- a/demo/ts/components/victory-tooltip-demo.tsx +++ /dev/null @@ -1,172 +0,0 @@ -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 { VictoryTooltip } from "victory-tooltip"; -import { VictoryCandlestick } from "victory-candlestick"; -import { VictoryErrorBar } from "victory-errorbar"; -import { VictoryTheme } from "victory-core"; - -class App extends React.Component { - render() { - const containerStyle: React.CSSProperties = { - 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}`} - 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/ts/components/victory-voronoi-demo.tsx b/demo/ts/components/victory-voronoi-demo.tsx deleted file mode 100644 index 579fb58bc..000000000 --- a/demo/ts/components/victory-voronoi-demo.tsx +++ /dev/null @@ -1,163 +0,0 @@ -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"; -import { VictoryTheme } from "victory-core"; - -type dataType = { - x: number; - y: number; - i: number; -}[]; - -interface VoronoiDemoStateProps { - data: dataType; -} - -class VoronoiDemo extends React.Component { - setStateInterval?: number = undefined; - - constructor(props: any) { - super(props); - this.state = { - data: this.getData(), - }; - } - - getData() { - return range(20).map((i: number) => { - return { - x: random(600), - y: random(600), - i, - }; - }); - } - - componentDidMount() { - this.setStateInterval = window.setInterval(() => { - this.setState({ - data: this.getData(), - }); - }, 3000); - } - - componentWillUnmount() { - window.clearInterval(this.setStateInterval); - } - - render() { - const containerStyle: React.CSSProperties = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - alignItems: "center", - justifyContent: "center", - }; - - const parentStyle: React.CSSProperties = { - border: "1px solid #ccc", - margin: "2%", - maxWidth: "40%", - }; - - return ( -
-
- - - { - return [ - { - mutation: () => { - return { - style: { - fill: VictoryTheme.clean.palette?.colors?.orange, - }, - }; - }, - }, - ]; - }, - }, - }, - ]} - /> - - - - `#${datum.i}`} - labelComponent={} - animate={{ duration: 2000 }} - style={{ parent: parentStyle }} - size={20} - data={this.state.data} - /> - - - `#${datum.i}`} - labelComponent={} - size={20} - style={{ parent: parentStyle }} - data={this.state.data} - /> - - - - - `#${datum.i}`} - labelComponent={} - style={{ parent: parentStyle }} - data={this.state.data} - /> - - -
-
- ); - } -} - -export default VoronoiDemo; diff --git a/website/docs/charts/area.mdx b/website/docs/charts/area.mdx index ecb5b822b..667ec13be 100644 --- a/website/docs/charts/area.mdx +++ b/website/docs/charts/area.mdx @@ -109,6 +109,22 @@ function App() { render(); ``` +## Area Charts - Plotting + +Area charts can render math functions as data by supplying a function to the `y` prop. + +```jsx live + + Math.sin(d)} + /> + +``` + ## Area Charts - Combined Area charts can be combined into the same chart. Note that the order of the components will determine the rendering order. @@ -278,7 +294,6 @@ function App() { return ( {state.data.map((data, i) => { @@ -286,7 +301,10 @@ function App() { ); })} diff --git a/website/docs/charts/bar.mdx b/website/docs/charts/bar.mdx index 3461b85f4..ce3dc8880 100644 --- a/website/docs/charts/bar.mdx +++ b/website/docs/charts/bar.mdx @@ -76,6 +76,39 @@ Bar charts can be rendered horizontally by setting the `horizontal` prop to `tru ``` +## Bar Charts - Labels + +Add labels to charts by setting the `labels` prop to the name of a property in the dataset, or a function that returns the label value. You can customize the display of the labels by using the [`labelComponent`](/docs/api/victory-area#labelcomponent) prop. + +```jsx live + + datum.y} + /> + +``` + +## Bar Charts - Tooltips + +Tooltips can be added by using a [`VictoryTooltip`](/docs/api/victory-tooltip) component as the `labelComponent`. + +```jsx live + + } + labels={({ datum }) => datum.y} + /> + +``` + ## Bar Charts - Grouped Bar charts can be grouped to show how different subcategories compare to each other. @@ -124,37 +157,61 @@ function App() { render(); ``` -## Bar Charts - Labels - -Add labels to charts by setting the `labels` prop to the name of a property in the dataset, or a function that returns the label value. You can customize the display of the labels by using the [`labelComponent`](/docs/api/victory-area#labelcomponent) prop. +## Bar Charts - Grouped Labels -```jsx live - - datum.y} - /> - -``` +Bar chart labels for grouped bars can be rendered by setting the `labels` prop to the name of a property in the dataset, an array, or a function that returns the label value. -## Bar Charts - Tooltips - -Tooltips can be added by using a [`VictoryTooltip`](/docs/api/victory-tooltip) component as the `labelComponent`. +```jsx live noInline +function App() { + return ( + + + + datum.y + } + /> + + datum.y + } + /> + + datum.y + } + /> + + + ); +} -```jsx live - - } - labels={({ datum }) => datum.y} - /> - +render(); ``` ## Bar Charts - Combination @@ -196,11 +253,13 @@ function App() { return ( - + ); } @@ -220,6 +279,39 @@ function getData() { render(); ``` +## Bar Charts - Zoom & Pan + +Bar charts support zoom and pan behavior by using the `VictoryZoomContainer` component. See the [Brush & Zoom](/docs/guides/brush-and-zoom) guide for more information. + +```jsx live + + } +> + + +``` + ## Bar Charts - Styles Chart styling can be customized by using the theme or overriding the style prop on the component. diff --git a/website/docs/charts/box-plot.mdx b/website/docs/charts/box-plot.mdx index 83c4d2694..be86bdd37 100644 --- a/website/docs/charts/box-plot.mdx +++ b/website/docs/charts/box-plot.mdx @@ -131,11 +131,11 @@ function App() { return ( @@ -225,6 +225,21 @@ Events can be handled by passing an array of event objects to the `events` prop { x: 6, y: ["1", "2", "6", "8"] }, ]} events={[ + { + target: "q1", + eventHandlers: { + onClick: () => { + return [ + { + target: "q1Labels", + mutation: () => ({ + text: "LABEL!", + }), + }, + ]; + }, + }, + }, { target: "q3", eventHandlers: { diff --git a/website/docs/charts/candlestick.mdx b/website/docs/charts/candlestick.mdx index c5533dcee..f735f2a4f 100644 --- a/website/docs/charts/candlestick.mdx +++ b/website/docs/charts/candlestick.mdx @@ -171,7 +171,10 @@ The labels prop can also accept a function to customize the candlestick label. W theme={VictoryTheme.clean} > datum.close} + labels={({ datum }) => datum.x} + openLabels={({ datum }) => + `->${datum.open}` + } data={[ { x: "3/1/23", @@ -203,7 +206,7 @@ The labels prop can also accept a function to customize the candlestick label. W }, { x: "3/5/23", - open: 10, + open: 15, close: 8, high: 15, low: 5, @@ -213,6 +216,58 @@ The labels prop can also accept a function to customize the candlestick label. W ``` +## Candlestick - Label Orientation + +The `labelOrientation` prop can be used to control the orientation of the labels. + +```jsx live + +``` + ## Candlestick - Time Scales Candlestick charts can leverage d3-scale to handle time scales. The `x` prop can be set to a Date Object. @@ -271,6 +326,56 @@ Candlestick charts can leverage d3-scale to handle time scales. The `x` prop can ``` +## Candlestick - Animation + +Candlestick charts can be animated with the `animate` prop. + +```jsx live noInline +function App() { + const [data, setData] = + React.useState(getData()); + + React.useState(() => { + const setStateInterval = + window.setInterval(() => { + setData(getData()); + }, 4000); + + return () => { + window.clearInterval( + setStateInterval, + ); + }; + }, []); + + return ( + + + + ); +} + +function getData() { + return _.range(5).map((i) => { + return { + x: `3/${i + 1}/23`, + open: _.random(5, 10), + close: _.random(10, 20), + high: _.random(20, 25), + low: _.random(1, 5), + }; + }); +} + +render(); +``` + ## Candlestick - Styles Chart styling can be customized by using the theme or overriding the style prop on the component. diff --git a/website/docs/charts/error-bar.mdx b/website/docs/charts/error-bar.mdx index 3d89bd2f3..bc9baa32f 100644 --- a/website/docs/charts/error-bar.mdx +++ b/website/docs/charts/error-bar.mdx @@ -181,6 +181,118 @@ Tooltips can be added by using a [`VictoryTooltip`](/docs/api/victory-tooltip) c ``` +## Error Bars - Combination + +Error Bars can be combined with other Victory components to create more complex visualizations. + +```jsx live noInline +const data = [ + { + x: 10, + y1: 250, + y2: 300, + ey1: 0.1, + ey2: 0.1, + }, + { + x: 15, + y1: 350, + y2: 500, + ey1: 0.1, + ey2: 0.08, + }, + { + x: 20, + y1: 420, + y2: 640, + ey1: 0.05, + ey2: 0.1, + }, + { + x: 25, + y1: 300, + y2: 450, + ey1: 0.1, + ey2: 0.1, + }, + { + x: 30, + y1: 350, + y2: 500, + ey1: 0.1, + ey2: 0.1, + }, + { + x: 35, + y1: 220, + y2: 350, + ey1: 0.15, + ey2: 0.05, + }, + { + x: 40, + y1: 250, + y2: 290, + ey1: 0.1, + ey2: 0.1, + }, +]; + +const segments = ["y1", "y2"]; +const colors = { + y1: VictoryTheme.clean.palette.qualitative[1], + y2: VictoryTheme.clean.palette.qualitative[4], +}; + +function App() { + return ( + + {segments.map((y) => ( + + + + + + + datum[y] * datum[`e${y}`] + } + style={{ + data: { + stroke: colors[y], + }, + }} + /> + + ))} + + ); +} + +render(); +``` + ## Error Bars - Styles Chart styling can be customized by using the theme or overriding the style prop on the component. diff --git a/website/docs/charts/histogram.mdx b/website/docs/charts/histogram.mdx index 4fd0f3a7b..45b4766de 100644 --- a/website/docs/charts/histogram.mdx +++ b/website/docs/charts/histogram.mdx @@ -23,6 +23,21 @@ See the [full API here](/docs/api/victory-histogram). Typically composed with [` ``` +## Histogram - Date Bins + +Histograms can be used to visualize the distribution of data over time. `VictoryHistogram` will automatically bin data by date if the `x` prop is a date. Internally it uses `d3` to bin the data, so the behaviour reflects that of the [`d3.bin`](https://observablehq.com/@d3/d3-bin) function. + +```jsx live + + + +``` + ## Histogram - Labels Add labels to charts by setting the `labels` prop to the name of a property in the dataset, or a function that returns the label value. You can customize the display of the labels by using the [`labelComponent`](/docs/api/victory-histogram) prop. @@ -34,7 +49,9 @@ Add labels to charts by setting the `labels` prop to the name of a property in t > `Bin count:\n ${datum.y}`} + labels={({ datum }) => + `Bin count:\n ${datum.y}` + } /> ``` @@ -50,7 +67,9 @@ Tooltips can be added by using a [`VictoryTooltip`](/docs/api/victory-tooltip) c > `Bin count:\n ${datum.y}`} + labels={({ datum }) => + `Bin count:\n ${datum.y}` + } labelComponent={} /> @@ -72,6 +91,39 @@ Histograms can be rendered horizontally by setting the `horizontal` prop to `tru ``` +## Histogram - Combination + +Histograms can be composed with other Victory components to create more complex visualizations. + +```jsx live + + + + + + + +``` + ## Histogram - Stacked Histograms can be stacked to visualize the distribution of numerical data across different categories. @@ -203,6 +255,62 @@ const App = () => { render(); ``` +## Histogram - Animation + +Histogram charts can be animated by setting the `animate` prop. + +```jsx live noInline +function App() { + const [data, setData] = + React.useState(getData()); + const [bins, setBins] = + React.useState(getBins()); + + React.useState(() => { + const setStateInterval = + window.setInterval(() => { + setData(getData()); + setBins(getBins()); + }, 4000); + + return () => { + window.clearInterval( + setStateInterval, + ); + }; + }, []); + + return ( + + + + ); +} + +function getData() { + return _.range(100).map(() => ({ + x: _.random(0, 300), + })); +} + +function getBins() { + return _.range( + 0, + _.random(100, 300), + 10, + ); +} + +render(); +``` + ## Histogram - Styles Chart styling can be customized by using the theme or overriding the style prop on the component. diff --git a/website/docs/charts/line.mdx b/website/docs/charts/line.mdx index ab8002ca1..f85cf2fe7 100644 --- a/website/docs/charts/line.mdx +++ b/website/docs/charts/line.mdx @@ -343,6 +343,53 @@ Add labels to charts by setting the `labels` prop to the name of a property in t ``` +## Line Charts - Animation + +Charts can be animated by setting the `animate` prop. See the [animations](/docs/guides/animations) guide for more information. + +```jsx live noInline +function App() { + const [data, setData] = + React.useState(getData()); + + React.useState(() => { + const setStateInterval = + window.setInterval(() => { + setData(getData()); + }, 4000); + + return () => { + window.clearInterval( + setStateInterval, + ); + }; + }, []); + + return ( + + + + ); +} + +function getData() { + return _.range(1, 30).map((i) => ({ + x: i, + y: _.random(1, 50), + })); +} + +render(); +``` + ## Line Charts - Styles Chart styling can be customized by using the theme or overriding the style prop on the component. diff --git a/website/docs/charts/pie.mdx b/website/docs/charts/pie.mdx index e93d780a9..125db9851 100644 --- a/website/docs/charts/pie.mdx +++ b/website/docs/charts/pie.mdx @@ -205,6 +205,52 @@ Pie chart labels can be positioned at different points along each slice by using /> ``` +## Pie Chart - Label Indicator + +Pie charts can show a label indicator by setting the `labelIndicator` prop. + +```jsx live + +``` + +## Pie Chart - Custom Label Indicator + +Pie charts can show a custom label indicator by setting the `labelIndicator` prop to a custom component. + +```jsx live + + } + labels + data={[ + { x: "Cats", y: 30 }, + { x: "Dogs", y: 35 }, + { x: "Birds", y: 25 }, + { x: "Rabbits", y: 10 }, + ]} +/> +``` + ## Pie Chart - Tooltips Tooltips can be added by using a [`VictoryTooltip`](/docs/api/victory-tooltip) component as the `labelComponent`. @@ -230,6 +276,56 @@ Tooltips can be added by using a [`VictoryTooltip`](/docs/api/victory-tooltip) c /> ``` +## Pie Chart - Animation + +Charts can be animated by setting the `animate` prop. See the [animations](/docs/guides/animations) guide for more information. + +```jsx live noInline +function App() { + const [data, setData] = + React.useState(getData()); + + React.useState(() => { + const setStateInterval = + window.setInterval(() => { + setData(getData()); + }, 4000); + + return () => { + window.clearInterval( + setStateInterval, + ); + }; + }, []); + + return ( + + ); +} + +function getData() { + const rand = () => + Math.max( + Math.floor(Math.random() * 10000), + 1000, + ); + return [ + { 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(); +``` + ## Pie Chart - Styles Chart styling can be customized by using the theme or overriding the style prop on the component. diff --git a/website/docs/charts/scatter.mdx b/website/docs/charts/scatter.mdx index 33368e213..c74e31af7 100644 --- a/website/docs/charts/scatter.mdx +++ b/website/docs/charts/scatter.mdx @@ -75,6 +75,35 @@ Tooltips can be added by using a [`VictoryTooltip`](/docs/api/victory-tooltip) c ``` +## Scatter Charts - Axis + +Scatter charts support all four quadrants by default. You can customize the domain of the chart by setting the `domain` prop on `VictoryChart` or `VictoryScatter`. + +```jsx live + + + +``` + ## Scatter Charts - Horizontal Scatter charts can be rendered with a flipped axis by setting the `horizontal` prop to `true`. This prop can be applied to either `VictoryChart` or `VictoryLine`. @@ -219,6 +248,109 @@ function App() { render(); ``` +## Scatter Charts - Animation + +Scatter charts support all four quadrants by default. You can customize the domain of the chart by setting the `domain` prop on `VictoryChart` or `VictoryScatter`. + +```jsx live noInline +function App() { + const [data, setData] = + React.useState(getData()); + + React.useState(() => { + const setStateInterval = + window.setInterval(() => { + setData(getData()); + }, 4000); + + return () => { + window.clearInterval( + setStateInterval, + ); + }; + }, []); + + return ( + + + } + data={data} + 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, + }), + }, + }} + /> + + ); +} + +function getData() { + 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, + }; + }, + ); +} + +render(); +``` + ## Scatter Charts - Styles Chart styling can be customized by using the theme or overriding the style prop on the component. @@ -325,10 +457,7 @@ Line charts can be rendered in polar coordinates by setting the `polar` prop to tickFormat={() => null} /> - + ``` diff --git a/website/docs/charts/voronoi.mdx b/website/docs/charts/voronoi.mdx index 29c413f4a..9ad4a909f 100644 --- a/website/docs/charts/voronoi.mdx +++ b/website/docs/charts/voronoi.mdx @@ -121,6 +121,59 @@ function App() { render(); ``` +## Voronoi - Animation + +Charts can be animated by setting the `animate` prop. See the [animations](/docs/guides/animations) guide for more information. + +```jsx live noInline +function App() { + const [data, setData] = + React.useState(getData()); + + React.useState(() => { + const setStateInterval = + window.setInterval(() => { + setData(getData()); + }, 4000); + + return () => { + window.clearInterval( + setStateInterval, + ); + }; + }, []); + + return ( + + + + + ); +} + +function getData() { + return _.range(20).map((i: number) => { + return { + x: _.random(600), + y: _.random(600), + i, + }; + }); +} + +render(); +``` + ## Voronoi - Styles Chart styling can be customized by using the theme or overriding the style prop on the component. @@ -160,7 +213,6 @@ Events can be handled by passing an array of event objects to the `events` prop theme={VictoryTheme.clean} > ``` +### Axis - Gridlines + +Gridlines can be shown by styling the axis component. + +```jsx live + + + (tick === 5 ? "#2d7ff9" : "#CFD8DC"), + strokeDasharray: "10, 5", + }, + }} + /> + + +``` + --- ### Axis - Tick Values @@ -119,6 +157,33 @@ Use the `tickFormat` prop to customize axis labels. This prop can be given as an ``` +#### Multiline Label Support + +You can also return an array of strings to create multiline labels. + +```jsx live + + [ + `$${Math.round(tick)}`, + "Million", + ]} + /> + + +``` + #### Time formats using `d3-time` To replicate the behaviour of automatically formatting times in `VictoryChart`, you can use `d3-scale` to format the tick values and labels.