{
27 | const type = random(0,2);
28 | return {
29 | type: types[type],
30 | data: data.data
31 | };
32 | })}
33 | />
34 | ),
35 | lineChart: (props) => (
36 |
41 | ),
42 | areaChart: (props) => (
43 |
50 | ),
51 | barChart: (props) => (
52 |
57 | ),
58 | scatterChart: (props) => (
59 |
65 | ),
66 | pieChart: (props) => (
67 |
73 | )
74 | };
75 |
76 | export default class Wrapper extends React.Component {
77 | constructor(props) {
78 | super(props);
79 |
80 | this.state = {
81 | theme: "bright",
82 | component: "areaChart",
83 | data: this.generateNewData()
84 | };
85 |
86 | this.handleNewData = this.handleNewData.bind(this);
87 | this.handleThemeChange = this.handleThemeChange.bind(this);
88 | this.handleComponentChange = this.handleComponentChange.bind(this);
89 | }
90 | generateNewData() {
91 | const seriesCount = random(2,5);
92 | const pointCount = random(3,6);
93 |
94 | let series = [];
95 |
96 | for(let a = 0; a < seriesCount; a++) {
97 | let data = [];
98 | for(let b = 0; b < pointCount; b++) {
99 | data = data.concat({ x: b + 5, y: random(1, 10)})
100 | }
101 | series = series.concat({ data: data });
102 | }
103 |
104 | return series;
105 | }
106 | handleNewData() {
107 | this.setState({
108 | data: this.generateNewData()
109 | });
110 | }
111 | handleThemeChange(e) {
112 | this.setState({
113 | theme: e.target.value
114 | });
115 | }
116 | handleComponentChange(e) {
117 | this.setState({
118 | component: e.target.value
119 | });
120 | }
121 | render() {
122 | const ComponentPreview = ComponentDemos[this.state.component];
123 | return (
124 |
125 |
140 |
157 |
158 |
159 |
160 |
161 |
44 |
If you can see this, something is broken (or JS is not enabled)!!.
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/docs/api.md:
--------------------------------------------------------------------------------
1 | # API Documentation
2 |
3 | ## Common Props
4 |
5 | The following is a list of common props shared by each chart, with the exception of PieChart where noted.
6 |
7 | ### categories
8 |
9 | `oneOfType(shape({ x: arrayOf(string), y: arrayOf(string) }), arrayOf(string))`
10 |
11 | The categories prop specifies how categorical data for a chart should be ordered. This prop should be given as an array of string values, or an object with these arrays of values specified for x and y. If this prop is not set, categorical data will be plotted in the order it was given in the data array.
12 |
13 | >Not applicable to PieChart
14 |
15 | Examples: `["dogs", "cats", "mice"], { x: ["dogs","cats"], y: ["mice","birds"]}`
16 |
17 | ---
18 |
19 | ### domain
20 |
21 | `oneOfType(shape({ x: arrayOf(number), y: arrayOf(number) }), arrayOf(number))`
22 |
23 | The domain prop describes the range of values your chart will include. This prop can be given as a array of the minimum and maximum expected values for your chart, or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information.
24 |
25 | >Not applicable to PieChart
26 |
27 |
28 | Examples: `[-1, 1], {x: [0, 100], y: [0, 1]}`
29 |
30 | ---
31 |
32 | ### domainPadding
33 |
34 | `oneOfType(shape({ x: number, y: number }), number))`
35 |
36 | The domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y.
37 |
38 | >Not applicable to PieChart
39 |
40 | Examples: `20, { x: 5, y: 10 }`
41 |
42 | ---
43 |
44 | ### height
45 |
46 | `number`
47 |
48 | The height prop specifies the height of the svg viewBox of the chart container. This value should be given as a number of pixels.
49 |
50 | ---
51 |
52 | ### subtitle
53 |
54 | `string`
55 |
56 | The subtitle for your chart. This value should be a string.
57 |
58 | ---
59 |
60 | ### theme
61 |
62 | `object`
63 |
64 | This prop specifies which theme to use for your chart. See the themes section of the documentation for available themes and how to add them.
65 |
66 | Example `Themes.simple`
67 |
68 | ---
69 |
70 | ### title
71 |
72 | `string`
73 |
74 | The title for your chart. This value should be a string.
75 |
76 | ---
77 |
78 | ### width
79 |
80 | `number`
81 |
82 | The width props specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.
83 |
84 | ---
85 |
86 | ### xAxis
87 |
88 | `object`
89 |
90 | This prop specifies a set of props to pass to the x axis. Valid props can be found in the documentation for the [VictoryAxis component](https://formidable.com/open-source/victory/docs/victory-axis#props) from the Victory library.
91 |
92 | >Not applicable to PieChart
93 |
94 | Example `{ name: "test" }`
95 |
96 | ---
97 |
98 | ### yAxis
99 |
100 | `object`
101 |
102 | This prop specifies a set of props to pass to the y axis. Valid props can be found in the documentation for the [VictoryAxis component](https://formidable.com/open-source/victory/docs/victory-axis#props) from the Victory library.
103 |
104 | >Not applicable to PieChart
105 |
106 | Example `{ scale: "time" }`
107 |
108 | ----
109 |
110 | ## AreaChart
111 |
112 | ---
113 |
114 | ### interpolation
115 |
116 | `string`
117 |
118 | The interpolation prop determines how data points should be connected when plotting a line. The following values are valid:
119 |
120 | *"basis", "basisClosed", "basisOpen", "bundle", "cardinal", "cardinalClosed", "cardinalOpen", "catmullRom", "catmullRomClosed", "catmullRomOpen", "linear", "linearClosed", "monotoneX", "monotoneY", "natural", "radial", "step", "stepAfter", "stepBefore"*
121 |
122 | ---
123 |
124 | ### series
125 |
126 | `arrayOf(object)`
127 |
128 | The series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found in the documentation or the [VictoryArea component](https://formidable.com/open-source/victory/docs/victory-area) from the Victory library.
129 |
130 | The series child object shape is as follows:
131 |
132 | ```
133 | {
134 | data: oneOfType(array, object),
135 | samples: number,
136 | style: object,
137 | x: oneOfType(string, func),
138 | y: oneOfType(string, func)
139 | }
140 | ```
141 |
142 | Example `[{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]`
143 |
144 | ---
145 |
146 | ### stacked
147 |
148 | `bool`
149 |
150 | The stacked prop is a boolean value that determines whether to stack your area chart series.
151 |
152 | ----
153 |
154 | ## BarChart
155 |
156 | ---
157 |
158 | ### horizontal
159 |
160 | `bool`
161 |
162 | The horizontal prop is a boolean value that determines whether to display your bar chart series horizontally.
163 |
164 | ---
165 |
166 | ### labels
167 |
168 | `func`
169 |
170 | The labels prop defines labels that will appear above each bar in your bar chart. This prop should be given as a function of data.
171 |
172 | Example `(datum) => datum.y`
173 |
174 | ---
175 |
176 | ### offset
177 |
178 | `number`
179 |
180 | The offset prop controls the spacing between each series of bars in a group.
181 |
182 | ---
183 |
184 | ### series
185 |
186 | `arrayOf(object)`
187 |
188 | The series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found in the documentation for the [VictoryBar component](https://formidable.com/open-source/victory/docs/victory-bar) from the Victory library.
189 |
190 | The series child object shape is as follows:
191 |
192 | ```
193 | {
194 | data: oneOfType(array, object),
195 | style: object,
196 | x: oneOfType(string, func),
197 | y: oneOfType(string, func)
198 | }
199 | ```
200 |
201 | Example `[{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]`
202 |
203 | ---
204 |
205 | ### stacked
206 |
207 | `bool`
208 |
209 | The stacked prop is a boolean value that determines whether to stack your bar chart series.
210 |
211 | ----
212 |
213 | ## LineChart
214 |
215 | ### interpolation
216 |
217 | `string`
218 |
219 | The interpolation prop determines how data points should be connected when plotting a line. The following values are valid:
220 |
221 | *"basis", "basisClosed", "basisOpen", "bundle", "cardinal", "cardinalClosed", "cardinalOpen", "catmullRom", "catmullRomClosed", "catmullRomOpen", "linear", "linearClosed", "monotoneX", "monotoneY", "natural", "radial", "step", "stepAfter", "stepBefore"*
222 |
223 | ---
224 |
225 | ### series
226 |
227 | `arrayOf(object)`
228 |
229 | The series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found in the documentation for the [VictoryLine component](https://formidable.com/open-source/victory/docs/victory-line) from the Victory library.
230 |
231 | The series child object shape is as follows:
232 |
233 | ```
234 | {
235 | data: oneOfType(array, object),
236 | samples: number,
237 | style: object,
238 | x: oneOfType(string, func),
239 | y: oneOfType(string, func)
240 | }
241 | ```
242 |
243 | Example `[{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]`
244 |
245 | ----
246 |
247 | ## ScatterChart
248 |
249 | ### labels
250 |
251 | `func`
252 |
253 | The labels prop defines labels that will appear above each bar in your bar chart. This prop should be given as a function of data.
254 |
255 | Example `(datum) => datum.y`
256 |
257 | ---
258 |
259 | ### series
260 |
261 | `arrayOf(object)`
262 |
263 | The series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found in the documentation for the [VictoryScatter component](https://formidable.com/open-source/victory/docs/victory-scatter) from the Victory library.
264 |
265 | The series child object shape is as follows:
266 |
267 | ```
268 | {
269 | bubbleProperty: string,
270 | data: oneOfType(array, object),
271 | samples: number,
272 | size: number,
273 | symbol: oneOfType(string, func),
274 | style: object,
275 | x: oneOfType(string, func),
276 | y: oneOfType(string, func)
277 | }
278 | ```
279 |
280 | Example `[{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]`
281 |
282 | ---
283 |
284 | ### size
285 |
286 | `oneOfType(number, func)`
287 |
288 | The size prop determines how to scale each data point
289 |
290 | Example `3`
291 |
292 | ---
293 |
294 | ### symbol
295 |
296 | `oneOfType(string, func)`
297 |
298 | The symbol prop determines which symbol should be drawn to represent data points.
299 |
300 | Valid string values: `"circle", "diamond", "plus", "square", "star", "triangleDown", "triangleUp"`
301 |
302 | Example `"circle"`
303 |
304 | ----
305 |
306 | ## PieChart
307 |
308 | ### cornerRadius
309 |
310 | `number`
311 |
312 | Set the cornerRadius for every dataComponent (`Slice` by default) within Pie.
313 |
314 | ----
315 |
316 | ### endAngle
317 |
318 | `number`
319 |
320 | The overall end angle of the pie in degrees. This prop is used in conjunction with startAngle to create a pie that spans only a segment of a circle.
321 |
322 | ----
323 |
324 | ### innerRadius
325 |
326 | `number`
327 |
328 | When creating a donut chart, this prop determines the number of pixels between the center of the chart and the inner edge of a donut. When this prop is set to zero a regular pie chart is rendered.
329 |
330 | ----
331 |
332 | ### labels
333 |
334 | `oneOfType(arrayOf(string), func)`
335 |
336 | The labels prop defines labels that will appear above each bar in your bar chart. This prop should be given as a function of data or an array of strings.
337 |
338 | Example `(datum) => datum.y`
339 |
340 | ---
341 |
342 | ### padAngle
343 |
344 | `number`
345 |
346 | The padAngle prop determines the amount of separation between adjacent data slices in number of degrees
347 |
348 | ---
349 |
350 | ### startAngle
351 |
352 | `number`
353 |
354 | The overall start angle of the pie in degrees. This prop is used in conjunction with endAngle to create a pie that spans only a segment of a circle.
355 |
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | # Introduction to FormidableCharts
2 |
3 | ## Getting Started
4 |
5 | `formidable-charts` is a set of composed, pre-styled components from our [Victory](https://www.formidable.com/open-source/victory) library that can be used to display rich, interactive charts. Our theming system not only supports style based theming, but behavioral and compositional theming as well.
6 |
7 | 1. Add `formidable-charts` to your project
8 |
9 | ```sh
10 | npm install formidable-charts --save
11 | ```
12 |
13 | For React Native, you'll need `-native` and `react-native-svg`:
14 |
15 | ```sh
16 | npm install -native formidable-charts react-native-svg --save
17 | react-native link react-native-svg
18 | ```
19 |
20 | 2. Add your first `formidable-charts` component:
21 |
22 | ```js
23 | import React, { Component } from 'react';
24 | import { render } from 'react-dom';
25 | import { LineChart } from 'formidable-charts';
26 |
27 | class MyLineChart extends Component {
28 | render() {
29 | return (
30 |
31 | );
32 | }
33 | }
34 |
35 | render(, document.getElementById('app'));
36 | ```
37 | 3. Explore the API docs and try out the various possible components and configurations and their themes!
38 |
39 | ## Contributing
40 |
41 | Please review our [Code of Conduct](https://github.com/FormidableLabs/builder-victory-component/blob/master/CONTRIBUTING.md#contributor-covenant-code-of-conduct) before contributing.
42 |
43 | For a detailed contribution guide, please see [the contribution guide](https://github.com/FormidableLabs/builder-victory-component/blob/master/dev/CONTRIBUTING.md) in the project builder archetype. To read more on the development environment, see [the development guide](https://github.com/FormidableLabs/builder-victory-component/blob/master/dev/DEVELOPMENT.md).
44 |
--------------------------------------------------------------------------------
/docs/standalone.md:
--------------------------------------------------------------------------------
1 | # Standalone
2 |
3 | `formidable-charts` also provides a vanilla JS standalone library!
4 |
5 | You can start using it by including the lib from:
6 |
7 | `https://unpkg.com/formidable-charts/dist/formidable-charts-standalone.js`
8 |
9 | Next, you can create a new chart instance:
10 |
11 | ```js
12 | var chartContainer = document.getElementById("container");
13 |
14 | var myChart = new FormidableCharts(chartContainer, {
15 | title: "My Chart",
16 | subtitle: "is amazing",
17 | series: [{
18 | type: "area",
19 | data: [{x: 0, y: 1}, {x: 1, y: 2}]
20 | }],
21 | theme: "bright"
22 | }
23 | ```
24 |
25 | After you've created a chart, you can update it using the `setOptions` method:
26 |
27 | ```js
28 | myChart.setOptions({
29 | series: [{
30 | type: "area",
31 | data: [{x: 10, y: 15}, {x: 20, y: 25}]
32 | }]
33 | });
34 | ```
35 |
36 | ## API
37 |
38 | ### VictoryStandalone(element, options)
39 |
40 | The top level `VictoryStandalone` function creates a new instance of a `VictoryStandalone` chart. The first argument is the DOM element where you want the chart to mount. The second argument is an options object.
41 |
42 | ## Options
43 |
44 | ### domain
45 |
46 | `oneOfType(shape({ x: arrayOf(number), y: arrayOf(number) }), arrayOf(number))`
47 |
48 | The domain option describes the range of values your chart will include. This option can be given as a array of the minimum and maximum expected values for your chart, or as an object that specifies separate arrays for x and y. If this option is not provided, a domain will be calculated from data, or other available information.
49 |
50 |
51 | Examples: `[-1, 1], {x: [0, 100], y: [0, 1]}`
52 |
53 | ---
54 |
55 | ### domainPadding
56 |
57 | `oneOfType(shape({ x: number, y: number }), number))`
58 |
59 | The domainPadding option specifies a number of pixels of padding to add to the beginning and end of a domain. This option is useful for explicitly spacing ticks farther from the origin to prevent crowding. This option should be given as an object with numbers specified for x and y.
60 |
61 | Examples: `20, { x: 5, y: 10 }`
62 |
63 | ---
64 |
65 | ### height
66 |
67 | `number`
68 |
69 | The height option specifies the height of the svg viewBox of the chart container. This value should be given as a number of pixels.
70 |
71 | ---
72 |
73 | ### series
74 |
75 | `arrayOf(object)`
76 |
77 | The series option allows you to provide data series to your chart. The series option accepts an array of object, where each object represents a plot of data. At a minimum, this object must contain a `type` and a `data` key:
78 |
79 | ```js
80 | {
81 | type: "area"
82 | data: [{x: 1, y: 1}]
83 | }
84 | ```
85 |
86 | Valid values for `type` are "area", "bar", "line" and "scatter". Additionally, you can stack "bar" and "area" types by nesting within a "stack" type, shown in the example below:
87 |
88 | ```js
89 | {
90 | type: "stack"
91 | data: [{
92 | type: "area"
93 | data: [{x: 1, y: 1}]
94 | }, {
95 | type: "area"
96 | data: [{x: 2, y: 1}]
97 | }]
98 | }
99 | ```
100 |
101 | You can also group "bar" types, using a "group" nest:
102 |
103 | ```js
104 | {
105 | type: "group"
106 | data: [{
107 | type: "bar"
108 | data: [{x: 1, y: 1}]
109 | }, {
110 | type: "bar"
111 | data: [{x: 2, y: 1}]
112 | }]
113 | }
114 | ```
115 |
116 | Any additional options provided in the data object are mapped directly to the rendered data type, and you can review what options exist for each type in the main API documention.
117 |
118 | ---
119 |
120 | ### subtitle
121 |
122 | `string`
123 |
124 | The subtitle for your chart. This value should be a string.
125 |
126 | ---
127 |
128 | ### theme
129 |
130 | `object`
131 |
132 | This option specifies which theme to use for your chart. See the themes section of the documentation for available themes and how to add them.
133 |
134 | Example `Themes.simple`
135 |
136 | ---
137 |
138 | ### title
139 |
140 | `string`
141 |
142 | The title for your chart. This value should be a string.
143 |
144 | ---
145 |
146 | ### width
147 |
148 | `number`
149 |
150 | The width options specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.
151 |
152 | ---
153 |
154 | ### xAxis
155 |
156 | `object`
157 |
158 | This option specifies a set of options to pass to the x axis. Valid options can be found in the documentation for the [VictoryAxis component](https://formidable.com/open-source/victory/docs/victory-axis#options) from the Victory library.
159 |
160 | >Not applicable to PieChart
161 |
162 | Example `{ name: "test" }`
163 |
164 | ---
165 |
166 | ### yAxis
167 |
168 | `object`
169 |
170 | This option specifies a set of options to pass to the y axis. Valid options can be found in the documentation for the [VictoryAxis component](https://formidable.com/open-source/victory/docs/victory-axis#options) from the Victory library.
171 |
172 | >Not applicable to PieChart
173 |
174 | Example `{ scale: "time" }`
175 |
176 | ----
--------------------------------------------------------------------------------
/docs/themes.md:
--------------------------------------------------------------------------------
1 | # Themes
2 |
3 | `formidable-charts` has a set of beautiful preset themes ready to go. We default to the `simple` theme, but if you want to try out the whole set, here's how:
4 |
5 | ```js
6 | import { LineChart, Themes } from "formidable-charts";
7 |
8 | class MyChart extends Component {
9 | render() {
10 | return (
11 |
12 | )
13 | }
14 | }
15 | ```
16 |
17 | Right now we have 4 themes you can choose from:
18 |
19 | `bright` - A bright, fun theme.
20 |
21 | 
22 |
23 | `simple` - A simple, yet elegant theme.
24 |
25 | 
26 |
27 | `dark` - Uh oh who turned the lights out. A dark theme for your charts.
28 |
29 | 
30 |
31 | `danceparty` - Use this one carefully. You might have too much fun.
32 |
33 | 
34 |
35 | Keep your eyes peeled, there are more themes on the way!
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "formidable-charts",
3 | "version": "0.0.7",
4 | "description": "Top level composed component for Victory",
5 | "main": "lib/index.js",
6 | "react-native": "src/index.js",
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/formidablelabs/formidable-charts.git"
10 | },
11 | "author": "Ken Wheeler",
12 | "license": "MIT",
13 | "bugs": {
14 | "url": "https://github.com/formidablelabs/formidable-charts/issues"
15 | },
16 | "homepage": "https://github.com/formidablelabs/formidable-charts",
17 | "engineStrict": true,
18 | "engines": {
19 | "npm": ">=3.0.0"
20 | },
21 | "scripts": {
22 | "postinstall": "cd lib || builder run npm:postinstall",
23 | "preversion": "builder run npm:preversion",
24 | "postversion": "builder run npm:postversion",
25 | "postpublish": "builder run npm:postpublish",
26 | "start": "builder run hot",
27 | "standalone": "webpack --config config/webpack.config.standalone.js",
28 | "test": "builder run check",
29 | "benchmark": "builder run check-perf",
30 | "version": "builder run npm:version",
31 | "docs-build-static": "echo 'Static docs generation for victory-chart is not supported.'"
32 | },
33 | "dependencies": {
34 | "builder": "^3.1.0",
35 | "builder-victory-component": "^3.1.0",
36 | "victory-chart": "^14.0.4",
37 | "victory-core": "^10.0.3",
38 | "victory-pie": "^8.0.0"
39 | },
40 | "devDependencies": {
41 | "builder-victory-component-dev": "^3.1.0",
42 | "chai": "^3.5.0",
43 | "ecology": "^1.6.1",
44 | "enzyme": "^2.4.1",
45 | "file-loader": "^0.9.0",
46 | "formidable-landers": "^5.1.1",
47 | "lodash-webpack-plugin": "^0.10.3",
48 | "mocha": "^3.1.0",
49 | "radium": "^0.18.1",
50 | "react": "^15.3.2",
51 | "react-addons-test-utils": "^15.3.2",
52 | "react-dom": "^15.3.2",
53 | "react-router": "^2.8.1",
54 | "sinon": "^1.17.6",
55 | "sinon-chai": "^2.8.0"
56 | },
57 | "publishr": {
58 | "dependencies": [
59 | "^builder"
60 | ],
61 | "files": {
62 | ".npmignore": ".npmignore.publishr"
63 | }
64 | },
65 | "sideEffects": false
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/formidable-charts/area-chart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import {
4 | VictoryStack
5 | } from "../../victory/victory-chart";
6 |
7 | import {
8 | VictoryLabel,
9 | VictoryContainer
10 | } from "../../victory/victory-core";
11 |
12 | import Themes from "../../themes";
13 |
14 | export default class AreaChart extends React.Component {
15 | static displayName = "AreaChart";
16 |
17 | static propTypes = {
18 | categories: PropTypes.oneOfType([
19 | PropTypes.shape({
20 | x: PropTypes.arrayOf(PropTypes.string),
21 | y: PropTypes.arrayOf(PropTypes.string)
22 | }),
23 | PropTypes.arrayOf(PropTypes.string)
24 | ]),
25 | domain: PropTypes.oneOfType([
26 | PropTypes.arrayOf(PropTypes.number),
27 | PropTypes.shape({
28 | x: PropTypes.arrayOf(PropTypes.number),
29 | y: PropTypes.arrayOf(PropTypes.number)
30 | })
31 | ]),
32 | domainPadding: PropTypes.oneOfType([
33 | PropTypes.number,
34 | PropTypes.shape({
35 | x: PropTypes.number,
36 | y: PropTypes.number
37 | })
38 | ]),
39 | height: PropTypes.number,
40 | interpolation: PropTypes.oneOf([
41 | "basis", "basisClosed", "basisOpen", "bundle", "cardinal", "cardinalClosed", "cardinalOpen",
42 | "catmullRom", "catmullRomClosed", "catmullRomOpen", "linear", "linearClosed", "monotoneX",
43 | "monotoneY", "natural", "radial", "step", "stepAfter", "stepBefore"
44 | ]),
45 | series: PropTypes.arrayOf(
46 | PropTypes.shape({
47 | data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
48 | name: PropTypes.string,
49 | samples: PropTypes.number,
50 | style: PropTypes.object,
51 | x: PropTypes.oneOfType([
52 | PropTypes.string,
53 | PropTypes.func
54 | ]),
55 | y: PropTypes.oneOfType([
56 | PropTypes.string,
57 | PropTypes.func
58 | ])
59 | })
60 | ),
61 | stacked: PropTypes.bool,
62 | subtitle: PropTypes.string,
63 | theme: PropTypes.shape({
64 | area: PropTypes.func,
65 | axis: PropTypes.func,
66 | bar: PropTypes.func,
67 | chart: PropTypes.func,
68 | line: PropTypes.func,
69 | pie: PropTypes.func,
70 | scatter: PropTypes.func,
71 | theme: PropTypes.object
72 | }),
73 | title: PropTypes.string,
74 | width: PropTypes.number,
75 | xAxis: PropTypes.object,
76 | yAxis: PropTypes.object
77 | };
78 |
79 | static defaultProps = {
80 | height: 300,
81 | theme: Themes.simple,
82 | series: [{
83 | y: (data) => Math.sin(2 * Math.PI * data.x),
84 | samples: 10
85 | }],
86 | width: 450
87 | };
88 |
89 | getRenderableProps(serie, index) {
90 | const props = {};
91 | // Key = type + index
92 | props.key = `area-${index}`;
93 |
94 | props.samples = serie.samples;
95 | props.x = serie.x || undefined;
96 | props.y = serie.y || undefined;
97 |
98 | props.interpolation = this.props.interpolation;
99 |
100 | // Add data if available
101 | props.data = serie.data || undefined;
102 |
103 | // Get color
104 | const { theme } = this.props.theme;
105 | const colors = theme.group.colorScale;
106 |
107 | props.theme = theme;
108 | props.seriesColor = colors[index % colors.length];
109 | props.style = serie.style;
110 |
111 | return props;
112 | }
113 |
114 | renderContainer() {
115 | // Get VictoryChart & theme from theme prop
116 | const { chart: Chart, theme } = this.props.theme;
117 | // Pull out relevant props
118 | const {
119 | height,
120 | width,
121 | domain,
122 | domainPadding,
123 | title,
124 | subtitle
125 | } = this.props;
126 |
127 | return (
128 |
134 | }
135 | height={height}
136 | width={width}
137 | domain={domain}
138 | domainPadding={domainPadding}
139 | theme={theme}
140 | padding={{
141 | top: this.props.subtitle || this.props.title ? 75 : 25,
142 | left: 50,
143 | bottom: 50,
144 | right: 50
145 | }}
146 | style={{...theme.chart.style, parent: {
147 | ...theme.chart.style.parent,
148 | paddingTop: 25
149 | }}}
150 | >
151 |
161 |
162 |
176 |
177 | {this.renderAxis("xAxis")}
178 | {this.renderAxis("yAxis", {dependentAxis: true})}
179 |
180 | {this.props.stacked ? (
181 |
182 | {this.renderSeries(this.props.series)}
183 |
184 | ) : this.renderSeries(this.props.series)}
185 |
186 |
187 | );
188 | }
189 |
190 | renderAxis(key, options) {
191 | const { axis } = this.props.theme;
192 | const axisProps = this.props[key];
193 | return axis({...options, ...axisProps});
194 | }
195 |
196 | renderSeries(series) {
197 | // Create empty elements array
198 | let elements = [];
199 |
200 | // For each series
201 | series.forEach((serie, index) => {
202 | const renderComposition = this.props.theme.area;
203 | // Get reduced prop set to pass to child
204 | const targetProps = this.getRenderableProps(serie, index);
205 | // Concat new elements onto elements array
206 | elements = elements.concat(renderComposition(targetProps));
207 | });
208 |
209 | return elements;
210 | }
211 |
212 | render() {
213 | // Render container
214 | return this.renderContainer();
215 | }
216 | }
217 |
--------------------------------------------------------------------------------
/src/components/formidable-charts/bar-chart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import {
4 | VictoryGroup,
5 | VictoryStack
6 | } from "../../victory/victory-chart";
7 |
8 | import {
9 | VictoryLabel,
10 | VictoryContainer
11 | } from "../../victory/victory-core";
12 |
13 | import Themes from "../../themes";
14 |
15 | export default class BarChart extends React.Component {
16 | static displayName = "BarChart";
17 |
18 | static propTypes = {
19 | categories: PropTypes.oneOfType([
20 | PropTypes.shape({
21 | x: PropTypes.arrayOf(PropTypes.string),
22 | y: PropTypes.arrayOf(PropTypes.string)
23 | }),
24 | PropTypes.arrayOf(PropTypes.string)
25 | ]),
26 | domain: PropTypes.oneOfType([
27 | PropTypes.arrayOf(PropTypes.number),
28 | PropTypes.shape({
29 | x: PropTypes.arrayOf(PropTypes.number),
30 | y: PropTypes.arrayOf(PropTypes.number)
31 | })
32 | ]),
33 | domainPadding: PropTypes.oneOfType([
34 | PropTypes.number,
35 | PropTypes.shape({
36 | x: PropTypes.number,
37 | y: PropTypes.number
38 | })
39 | ]),
40 | horizontal: PropTypes.bool,
41 | labels: PropTypes.oneOfType([
42 | PropTypes.func,
43 | PropTypes.arrayOf(PropTypes.string)
44 | ]),
45 | height: PropTypes.number,
46 | offset: PropTypes.number,
47 | series: PropTypes.arrayOf(
48 | PropTypes.shape({
49 | labels: PropTypes.oneOfType([
50 | PropTypes.func,
51 | PropTypes.arrayOf(PropTypes.string)
52 | ]),
53 | data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
54 | name: PropTypes.string,
55 | style: PropTypes.object,
56 | x: PropTypes.oneOfType([
57 | PropTypes.string,
58 | PropTypes.func
59 | ]),
60 | y: PropTypes.oneOfType([
61 | PropTypes.string,
62 | PropTypes.func
63 | ])
64 | })
65 | ),
66 | stacked: PropTypes.bool,
67 | subtitle: PropTypes.string,
68 | theme: PropTypes.shape({
69 | area: PropTypes.func,
70 | axis: PropTypes.func,
71 | bar: PropTypes.func,
72 | chart: PropTypes.func,
73 | line: PropTypes.func,
74 | pie: PropTypes.func,
75 | scatter: PropTypes.func,
76 | theme: PropTypes.object
77 | }),
78 | title: PropTypes.string,
79 | width: PropTypes.number,
80 | xAxis: PropTypes.object,
81 | yAxis: PropTypes.object
82 | };
83 |
84 | static defaultProps = {
85 | height: 300,
86 | theme: Themes.simple,
87 | series: [{
88 | data: [
89 | {x: 1, y: 3},
90 | {x: 3, y: 6},
91 | {x: 5, y: 9}
92 | ]
93 | }],
94 | offset: 15,
95 | width: 450
96 | };
97 |
98 | getRenderableProps(serie, index) {
99 | const props = {};
100 | // Key = type + index
101 | props.key = `bar-${index}`;
102 |
103 | props.x = serie.x || undefined;
104 | props.y = serie.y || undefined;
105 |
106 | // Add data if available
107 | props.data = serie.data || undefined;
108 |
109 | // Get color
110 | const { theme } = this.props.theme;
111 | const colors = theme.group.colorScale;
112 |
113 | props.theme = theme;
114 | props.seriesColor = colors[index % colors.length];
115 | props.style = serie.style;
116 |
117 | return props;
118 | }
119 |
120 | renderContainer() {
121 | // Get VictoryChart & theme from theme prop
122 | const { chart: Chart, theme } = this.props.theme;
123 | // Pull out relevant props
124 | const {
125 | height,
126 | width,
127 | domain,
128 | domainPadding,
129 | title,
130 | subtitle
131 | } = this.props;
132 |
133 | return (
134 |
140 | }
141 | height={height}
142 | width={width}
143 | domain={domain}
144 | domainPadding={domainPadding}
145 | theme={theme}
146 | padding={{
147 | top: this.props.subtitle || this.props.title ? 75 : 25,
148 | left: 50,
149 | bottom: 50,
150 | right: 50
151 | }}
152 | style={{...theme.chart.style, parent: {
153 | ...theme.chart.style.parent,
154 | paddingTop: 25
155 | }}}
156 | >
157 |
167 |
168 |
182 |
183 | {this.renderAxis("xAxis")}
184 | {this.renderAxis("yAxis", {dependentAxis: true})}
185 |
186 | {this.renderGroup()}
187 |
188 |
189 | );
190 | }
191 |
192 | renderAxis(key, options) {
193 | const { axis } = this.props.theme;
194 | const axisProps = this.props[key];
195 | return axis({...options, ...axisProps});
196 | }
197 |
198 | renderGroup() {
199 | if (this.props.stacked === true) {
200 | return (
201 |
202 | {this.renderSeries(this.props.series)}
203 |
204 | );
205 | } else {
206 | return (
207 |
208 | {this.renderSeries(this.props.series)}
209 |
210 | );
211 | }
212 | }
213 |
214 | renderSeries(series) {
215 | // Create empty elements array
216 | let elements = [];
217 |
218 | // For each series
219 | series.forEach((serie, index) => {
220 | const renderComposition = this.props.theme.bar;
221 | // Get reduced prop set to pass to child
222 | const targetProps = this.getRenderableProps(serie, index);
223 | // Concat new elements onto elements array
224 | elements = elements.concat(renderComposition(targetProps));
225 | });
226 |
227 | return elements;
228 | }
229 |
230 | render() {
231 | // Render container
232 | return this.renderContainer();
233 | }
234 | }
235 |
--------------------------------------------------------------------------------
/src/components/formidable-charts/line-chart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import {
4 | VictoryLabel,
5 | VictoryContainer
6 | } from "../../victory/victory-core";
7 |
8 | import Themes from "../../themes";
9 |
10 | export default class LineChart extends React.Component {
11 | static displayName = "LineChart";
12 |
13 | static propTypes = {
14 | categories: PropTypes.oneOfType([
15 | PropTypes.shape({
16 | x: PropTypes.arrayOf(PropTypes.string),
17 | y: PropTypes.arrayOf(PropTypes.string)
18 | }),
19 | PropTypes.arrayOf(PropTypes.string)
20 | ]),
21 | domain: PropTypes.oneOfType([
22 | PropTypes.arrayOf(PropTypes.number),
23 | PropTypes.shape({
24 | x: PropTypes.arrayOf(PropTypes.number),
25 | y: PropTypes.arrayOf(PropTypes.number)
26 | })
27 | ]),
28 | domainPadding: PropTypes.oneOfType([
29 | PropTypes.number,
30 | PropTypes.shape({
31 | x: PropTypes.number,
32 | y: PropTypes.number
33 | })
34 | ]),
35 | height: PropTypes.number,
36 | interpolation: PropTypes.oneOf([
37 | "basis", "basisClosed", "basisOpen", "bundle", "cardinal", "cardinalClosed", "cardinalOpen",
38 | "catmullRom", "catmullRomClosed", "catmullRomOpen", "linear", "linearClosed", "monotoneX",
39 | "monotoneY", "natural", "radial", "step", "stepAfter", "stepBefore"
40 | ]),
41 | series: PropTypes.arrayOf(
42 | PropTypes.shape({
43 | data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
44 | samples: PropTypes.number,
45 | style: PropTypes.object,
46 | x: PropTypes.oneOfType([
47 | PropTypes.string,
48 | PropTypes.func
49 | ]),
50 | y: PropTypes.oneOfType([
51 | PropTypes.string,
52 | PropTypes.func
53 | ])
54 | })
55 | ),
56 | subtitle: PropTypes.string,
57 | theme: PropTypes.shape({
58 | area: PropTypes.func,
59 | axis: PropTypes.func,
60 | bar: PropTypes.func,
61 | chart: PropTypes.func,
62 | line: PropTypes.func,
63 | pie: PropTypes.func,
64 | scatter: PropTypes.func,
65 | theme: PropTypes.object
66 | }),
67 | title: PropTypes.string,
68 | width: PropTypes.number,
69 | xAxis: PropTypes.object,
70 | yAxis: PropTypes.object
71 | };
72 |
73 | static defaultProps = {
74 | height: 300,
75 | theme: Themes.simple,
76 | series: [{
77 | y: (data) => Math.sin(2 * Math.PI * data.x),
78 | samples: 10
79 | }],
80 | width: 450
81 | };
82 |
83 | getRenderableProps(serie, index) {
84 | const props = {};
85 | // Key = type + index
86 | props.key = `line-${index}`;
87 |
88 | props.samples = serie.samples;
89 | props.x = serie.x || undefined;
90 | props.y = serie.y || undefined;
91 |
92 | props.categories = this.props.categories;
93 | props.interpolation = this.props.interpolation;
94 | props.style = serie.style;
95 |
96 | // Add data if available
97 | props.data = serie.data || undefined;
98 |
99 | // Get color
100 | const { theme } = this.props.theme;
101 | const colors = theme.group.colorScale;
102 |
103 | props.theme = theme;
104 | props.seriesColor = colors[index % colors.length];
105 |
106 | return props;
107 | }
108 |
109 | renderContainer() {
110 | // Get VictoryChart & theme from theme prop
111 | const { chart: Chart, theme } = this.props.theme;
112 | // Pull out relevant props
113 | const {
114 | height,
115 | width,
116 | domain,
117 | domainPadding,
118 | title,
119 | subtitle
120 | } = this.props;
121 |
122 | return (
123 |
129 | }
130 | height={height}
131 | width={width}
132 | domain={domain}
133 | domainPadding={domainPadding}
134 | theme={theme}
135 | padding={{
136 | top: this.props.subtitle || this.props.title ? 75 : 25,
137 | left: 50,
138 | bottom: 50,
139 | right: 50
140 | }}
141 | style={{...theme.chart.style, parent: {
142 | ...theme.chart.style.parent,
143 | paddingTop: 25
144 | }}}
145 | >
146 |
156 |
157 |
171 |
172 | {this.renderAxis("xAxis")}
173 | {this.renderAxis("yAxis", {dependentAxis: true})}
174 |
175 | {this.renderSeries(this.props.series)}
176 |
177 |
178 | );
179 | }
180 |
181 | renderAxis(key, options) {
182 | const { axis } = this.props.theme;
183 | const axisProps = this.props[key];
184 | return axis({...options, ...axisProps});
185 | }
186 |
187 | renderSeries(series) {
188 | // Create empty elements array
189 | let elements = [];
190 |
191 | // For each series
192 | series.forEach((serie, index) => {
193 | const renderComposition = this.props.theme.line;
194 | // Get reduced prop set to pass to child
195 | const targetProps = this.getRenderableProps(serie, index);
196 | // Concat new elements onto elements array
197 | elements = elements.concat(renderComposition(targetProps));
198 | });
199 |
200 | return elements;
201 | }
202 |
203 | render() {
204 | // Render container
205 | return this.renderContainer();
206 | }
207 | }
208 |
--------------------------------------------------------------------------------
/src/components/formidable-charts/pie-chart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import {
4 | VictoryLabel,
5 | VictoryContainer
6 | } from "../../victory/victory-core";
7 |
8 | import Themes from "../../themes";
9 |
10 | export default class PieChart extends React.Component {
11 | static displayName = "PieChart";
12 |
13 | static propTypes = {
14 | cornerRadius: PropTypes.number,
15 | data: PropTypes.array,
16 | endAngle: PropTypes.number,
17 | height: PropTypes.number,
18 | innerRadius: PropTypes.number,
19 | labels: PropTypes.oneOfType([
20 | PropTypes.func,
21 | PropTypes.arrayOf(PropTypes.string)
22 | ]),
23 | padAngle: PropTypes.number,
24 | startAngle: PropTypes.number,
25 | subtitle: PropTypes.string,
26 | theme: PropTypes.shape({
27 | area: PropTypes.func,
28 | axis: PropTypes.func,
29 | bar: PropTypes.func,
30 | chart: PropTypes.func,
31 | line: PropTypes.func,
32 | pie: PropTypes.func,
33 | scatter: PropTypes.func,
34 | theme: PropTypes.object
35 | }),
36 | title: PropTypes.string,
37 | width: PropTypes.number,
38 | x: PropTypes.oneOfType([
39 | PropTypes.func,
40 | PropTypes.number,
41 | PropTypes.string,
42 | PropTypes.arrayOf(PropTypes.string)
43 | ]),
44 | y: PropTypes.oneOfType([
45 | PropTypes.func,
46 | PropTypes.number,
47 | PropTypes.string,
48 | PropTypes.arrayOf(PropTypes.string)
49 | ])
50 | };
51 |
52 | static defaultProps = {
53 | data: [
54 | {x: "A", y: 10},
55 | {x: "B", y: 3},
56 | {x: "C", y: 6}
57 | ],
58 | height: 300,
59 | theme: Themes.simple,
60 | width: 450
61 | };
62 |
63 | getRenderableProps() {
64 | const { title, subtitle, theme, ...renderableProps } = this.props;
65 | // Add data if available
66 | renderableProps.key = "pie";
67 | renderableProps.standalone = false;
68 | renderableProps.padding = {
69 | top: this.props.subtitle || this.props.title ? 75 : 25,
70 | left: 50,
71 | bottom: 50,
72 | right: 50
73 | };
74 |
75 | // Get color
76 | const { theme: styleTheme } = this.props.theme;
77 | renderableProps.theme = styleTheme;
78 |
79 | return renderableProps;
80 | }
81 |
82 | renderContainer() {
83 | // Get VictoryChart & theme from theme prop
84 | const { theme } = this.props.theme;
85 | // Pull out relevant props
86 | const {
87 | height,
88 | width,
89 | title,
90 | subtitle
91 | } = this.props;
92 |
93 | return (
94 |
104 |
114 |
115 |
129 |
130 | {this.renderPie()}
131 |
132 |
133 | );
134 | }
135 |
136 | renderPie() {
137 | // Get function based upon type
138 | const renderComposition = this.props.theme.pie;
139 | // Get reduced prop set to pass to child
140 | const targetProps = this.getRenderableProps();
141 | return renderComposition(targetProps);
142 | }
143 |
144 | render() {
145 | // Render container
146 | return this.renderContainer();
147 | }
148 | }
149 |
--------------------------------------------------------------------------------
/src/components/formidable-charts/scatter-chart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import {
4 | VictoryLabel,
5 | VictoryContainer
6 | } from "../../victory/victory-core";
7 |
8 | import Themes from "../../themes";
9 |
10 | export default class ScatterChart extends React.Component {
11 | static displayName = "ScatterChart";
12 |
13 | static propTypes = {
14 | categories: PropTypes.oneOfType([
15 | PropTypes.shape({
16 | x: PropTypes.arrayOf(PropTypes.string),
17 | y: PropTypes.arrayOf(PropTypes.string)
18 | }),
19 | PropTypes.arrayOf(PropTypes.string)
20 | ]),
21 | domain: PropTypes.oneOfType([
22 | PropTypes.arrayOf(PropTypes.number),
23 | PropTypes.shape({
24 | x: PropTypes.arrayOf(PropTypes.number),
25 | y: PropTypes.arrayOf(PropTypes.number)
26 | })
27 | ]),
28 | domainPadding: PropTypes.oneOfType([
29 | PropTypes.number,
30 | PropTypes.shape({
31 | x: PropTypes.number,
32 | y: PropTypes.number
33 | })
34 | ]),
35 | height: PropTypes.number,
36 | series: PropTypes.arrayOf(
37 | PropTypes.shape({
38 | bubbleProperty: PropTypes.string,
39 | data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
40 | labels: PropTypes.oneOfType([
41 | PropTypes.func,
42 | PropTypes.arrayOf(PropTypes.string)
43 | ]),
44 | samples: PropTypes.number,
45 | size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
46 | style: PropTypes.object,
47 | symbol: PropTypes.oneOfType([
48 | PropTypes.oneOf([
49 | "circle", "diamond", "plus", "square", "star", "triangleDown", "triangleUp"
50 | ]),
51 | PropTypes.func
52 | ]),
53 | x: PropTypes.oneOfType([
54 | PropTypes.string,
55 | PropTypes.func
56 | ]),
57 | y: PropTypes.oneOfType([
58 | PropTypes.string,
59 | PropTypes.func
60 | ])
61 | })
62 | ),
63 | size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
64 | subtitle: PropTypes.string,
65 | symbol: PropTypes.oneOfType([
66 | PropTypes.oneOf([
67 | "circle", "diamond", "plus", "square", "star", "triangleDown", "triangleUp"
68 | ]),
69 | PropTypes.func
70 | ]),
71 | theme: PropTypes.shape({
72 | area: PropTypes.func,
73 | axis: PropTypes.func,
74 | bar: PropTypes.func,
75 | chart: PropTypes.func,
76 | line: PropTypes.func,
77 | pie: PropTypes.func,
78 | scatter: PropTypes.func,
79 | theme: PropTypes.object
80 | }),
81 | title: PropTypes.string,
82 | width: PropTypes.number,
83 | xAxis: PropTypes.object,
84 | yAxis: PropTypes.object
85 | };
86 |
87 | static defaultProps = {
88 | height: 300,
89 | theme: Themes.simple,
90 | series: [{
91 | y: (data) => Math.sin(2 * Math.PI * data.x),
92 | samples: 10
93 | }],
94 | size: 4,
95 | width: 450
96 | };
97 |
98 | getRenderableProps(serie, index) {
99 | // Key = type + index
100 | const props = {
101 | key: `scatter-${index}`
102 | };
103 |
104 | props.bubbleProperty = serie.bubbleProperty || undefined;
105 | props.categories = this.props.categories;
106 | props.samples = serie.samples || undefined;
107 | props.size = serie.size || this.props.size;
108 | props.symbol = serie.symbol || this.props.symbol || undefined;
109 |
110 | props.x = serie.x || undefined;
111 | props.y = serie.y || undefined;
112 |
113 | // Add data if available
114 | props.data = serie.data || undefined;
115 |
116 | // Get color
117 | const { theme } = this.props.theme;
118 | const colors = theme.group.colorScale;
119 |
120 | props.theme = theme;
121 | props.seriesColor = colors[index % colors.length];
122 | props.style = serie.style;
123 |
124 | return props;
125 | }
126 |
127 | renderContainer() {
128 | // Get VictoryChart & theme from theme prop
129 | const { chart: Chart, theme } = this.props.theme;
130 | // Pull out relevant props
131 | const {
132 | height,
133 | width,
134 | domain,
135 | domainPadding,
136 | title,
137 | subtitle
138 | } = this.props;
139 |
140 | return (
141 |
147 | }
148 | height={height}
149 | width={width}
150 | domain={domain}
151 | domainPadding={domainPadding}
152 | theme={theme}
153 | padding={{
154 | top: this.props.subtitle || this.props.title ? 75 : 25,
155 | left: 50,
156 | bottom: 50,
157 | right: 50
158 | }}
159 | style={{...theme.chart.style, parent: {
160 | ...theme.chart.style.parent,
161 | paddingTop: 25
162 | }}}
163 | >
164 |
174 |
175 |
189 |
190 | {this.renderAxis("xAxis")}
191 | {this.renderAxis("yAxis", {dependentAxis: true})}
192 |
193 | {this.renderSeries(this.props.series)}
194 |
195 |
196 | );
197 | }
198 |
199 | renderAxis(key, options) {
200 | const { axis } = this.props.theme;
201 | const axisProps = this.props[key];
202 | return axis({...options, ...axisProps});
203 | }
204 |
205 | renderSeries(series) {
206 | // Create empty elements array
207 | let elements = [];
208 |
209 | // For each series
210 | series.forEach((serie, index) => {
211 | const renderComposition = this.props.theme.scatter;
212 | // Get reduced prop set to pass to child
213 | const targetProps = this.getRenderableProps(serie, index);
214 | // Concat new elements onto elements array
215 | elements = elements.concat(renderComposition(targetProps));
216 | });
217 |
218 | return elements;
219 | }
220 |
221 | render() {
222 | // Render container
223 | return this.renderContainer();
224 | }
225 | }
226 |
--------------------------------------------------------------------------------
/src/components/formidable-charts/standalone.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import {
4 | VictoryGroup,
5 | VictoryStack
6 | } from "../../victory/victory-chart";
7 |
8 | import {
9 | VictoryLabel,
10 | VictoryContainer
11 | } from "../../victory/victory-core";
12 |
13 | import Themes from "../../themes";
14 |
15 | export default class Standalone extends React.Component {
16 | static displayName = "Standalone";
17 |
18 | static propTypes = {
19 | domain: PropTypes.oneOfType([
20 | PropTypes.arrayOf(PropTypes.number),
21 | PropTypes.shape({
22 | x: PropTypes.arrayOf(PropTypes.number),
23 | y: PropTypes.arrayOf(PropTypes.number)
24 | })
25 | ]),
26 | domainPadding: PropTypes.oneOfType([
27 | PropTypes.number,
28 | PropTypes.shape({
29 | x: PropTypes.number,
30 | y: PropTypes.number
31 | })
32 | ]),
33 | height: PropTypes.number,
34 | labelFormat: PropTypes.func,
35 | series: PropTypes.arrayOf(
36 | PropTypes.shape({
37 | data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
38 | name: PropTypes.string,
39 | style: PropTypes.object,
40 | type: PropTypes.string,
41 | x: PropTypes.oneOfType([
42 | PropTypes.string,
43 | PropTypes.func
44 | ]),
45 | y: PropTypes.oneOfType([
46 | PropTypes.string,
47 | PropTypes.func
48 | ])
49 | })
50 | ),
51 | subtitle: PropTypes.string,
52 | theme: PropTypes.shape({
53 | area: PropTypes.func,
54 | axis: PropTypes.func,
55 | bar: PropTypes.func,
56 | chart: PropTypes.func,
57 | line: PropTypes.func,
58 | pie: PropTypes.func,
59 | scatter: PropTypes.func,
60 | theme: PropTypes.object
61 | }),
62 | title: PropTypes.string,
63 | width: PropTypes.number,
64 | xAxis: PropTypes.object,
65 | yAxis: PropTypes.object
66 | };
67 |
68 | static defaultProps = {
69 | height: 300,
70 | theme: Themes.simple,
71 | series: [{
72 | y: (data) => Math.sin(2 * Math.PI * data.x),
73 | type: "line"
74 | }],
75 | width: 450
76 | };
77 |
78 | getRenderableProps(serie, type, index) {
79 | const { theme, ...renderableProps } = serie;
80 | // Key = type + index
81 | renderableProps.key = `${type}-${index}`;
82 |
83 | // Get color
84 | const { theme: styleTheme } = this.props.theme;
85 | const colors = styleTheme.group.colorScale;
86 |
87 | renderableProps.theme = styleTheme;
88 | renderableProps.seriesColor = colors[index % colors.length];
89 |
90 | return renderableProps;
91 | }
92 |
93 | renderContainer() {
94 | // Get VictoryChart & theme from theme prop
95 | const { chart: Chart, theme } = this.props.theme;
96 | // Pull out relevant props
97 | const {
98 | height,
99 | width,
100 | domain,
101 | domainPadding,
102 | title,
103 | subtitle
104 | } = this.props;
105 |
106 | return (
107 |
113 | }
114 | height={height}
115 | width={width}
116 | domain={domain}
117 | domainPadding={domainPadding}
118 | theme={theme}
119 | padding={{
120 | top: this.props.subtitle || this.props.title ? 75 : 25,
121 | left: 50,
122 | bottom: 50,
123 | right: 50
124 | }}
125 | style={{...theme.chart.style, parent: {
126 | ...theme.chart.style.parent,
127 | paddingTop: 25
128 | }}}
129 | >
130 | {this.props.title &&
131 | }
141 |
142 | {this.props.subtitle &&
143 | }
157 |
158 | {this.renderAxis("xAxis")}
159 | {this.renderAxis("yAxis", {dependentAxis: true})}
160 |
161 | {this.renderSeries(this.props.series)}
162 |
163 |
164 | );
165 | }
166 |
167 | renderAxis(key, options) {
168 | const { axis } = this.props.theme;
169 | const axisProps = this.props[key];
170 | return axis({...options, ...axisProps});
171 | }
172 |
173 | renderSeries(series) {
174 | // Create empty elements array
175 | let elements = [];
176 |
177 | // For each series
178 | series.forEach((serie, index) => {
179 | // Default type to line
180 | const type = serie.type || "line";
181 |
182 | if (type !== "stack" && type !== "group") {
183 | // Get function based upon type
184 | const renderComposition = this.props.theme[type];
185 | // Get reduced prop set to pass to child
186 | const targetProps = this.getRenderableProps(serie, type, index);
187 | // Concat new elements onto elements array
188 | elements = elements.concat(renderComposition(targetProps));
189 | } else if (type === "stack") {
190 | elements = elements.concat([
191 |
192 | {this.renderSeries(serie.data)}
193 |
194 | ]);
195 | } else if (type === "group") {
196 | elements = elements.concat([
197 |
198 | {this.renderSeries(serie.data)}
199 |
200 | ]);
201 | }
202 | });
203 |
204 | return elements;
205 | }
206 |
207 | render() {
208 | // Render container
209 | return this.renderContainer();
210 | }
211 | }
212 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export {
2 | default as Standalone
3 | } from "./components/formidable-charts/standalone";
4 |
5 | export {
6 | default as AreaChart
7 | } from "./components/formidable-charts/area-chart";
8 |
9 | export {
10 | default as BarChart
11 | } from "./components/formidable-charts/bar-chart";
12 |
13 | export {
14 | default as LineChart
15 | } from "./components/formidable-charts/line-chart";
16 |
17 | export {
18 | default as PieChart
19 | } from "./components/formidable-charts/pie-chart";
20 |
21 | export {
22 | default as ScatterChart
23 | } from "./components/formidable-charts/scatter-chart";
24 |
25 | export {
26 | default as Themes
27 | } from "./themes";
28 |
--------------------------------------------------------------------------------
/src/standalone.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { Standalone, Themes } from "./index";
4 |
5 | module.exports = class Victory {
6 | constructor(dom, options) {
7 | this.props = options || {};
8 | this.props.theme = this.resolveTheme(this.props);
9 | this.dom = dom;
10 | this.node = ReactDOM.render(, this.dom);
11 | }
12 | resolveTheme(props) {
13 | const theme = props.theme || "simple";
14 | return Themes[theme];
15 | }
16 | setOptions(data) {
17 | this.props = {...this.props, ...data};
18 | ReactDOM.render(, this.dom);
19 | }
20 | };
21 |
22 |
--------------------------------------------------------------------------------
/src/themes/bright/composed-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | VictoryArea,
5 | VictoryGroup,
6 | VictoryVoronoiTooltip
7 | } from "../../victory/victory-chart";
8 |
9 | import { VictoryTooltip } from "../../victory/victory-core";
10 |
11 | export default (props) => ([
12 |
13 | {
26 | return [
27 | {
28 | mutation: (lastProps) => {
29 | return {
30 | style: {
31 | ...lastProps.style,
32 | opacity: 1
33 | }
34 | };
35 | }
36 | }
37 | ];
38 | },
39 | onMouseOut: () => {
40 | return [
41 | {
42 | mutation: (lastProps) => {
43 | return {
44 | style: {
45 | ...lastProps.style,
46 | opacity: 0.75
47 | }
48 | };
49 | }
50 | }
51 | ];
52 | }
53 | }
54 | }]}
55 | animate={{
56 | duration: 500,
57 | onLoad: {
58 | duration: 500
59 | }
60 | }}
61 | />
62 | `${d.y}`}
65 | labelComponent={
66 |
70 | }
71 | />
72 |
73 | ]);
74 |
--------------------------------------------------------------------------------
/src/themes/bright/composed-axis.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryAxis } from "../../victory/victory-chart";
4 |
5 | export default (props) => (
6 |
7 | );
8 |
--------------------------------------------------------------------------------
/src/themes/bright/composed-bar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryBar } from "../../victory/victory-chart";
4 |
5 | import { VictoryTooltip } from "../../victory/victory-core";
6 |
7 | export default (props) => ([
8 | d.y)}
15 | labelComponent={}
16 | animate={{
17 | duration: 500,
18 | onLoad: {
19 | duration: 500
20 | }
21 | }}
22 | {...props}
23 | />
24 | ]);
25 |
--------------------------------------------------------------------------------
/src/themes/bright/composed-chart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import { VictoryChart } from "../../victory/victory-chart";
4 |
5 | export default class ComposedWrapper extends React.Component {
6 | static propTypes = {
7 | children: PropTypes.node
8 | };
9 |
10 | render() {
11 | return {this.props.children};
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/themes/bright/composed-line.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | VictoryLine,
5 | VictoryScatter,
6 | VictoryGroup,
7 | VictoryVoronoiTooltip
8 | } from "../../victory/victory-chart";
9 |
10 | import { VictoryTooltip } from "../../victory/victory-core";
11 |
12 | export default (props) => ([
13 |
14 |
28 |
45 | `${d.y}`}
48 | labelComponent={
49 |
53 | }
54 | />
55 |
56 | ]);
57 |
--------------------------------------------------------------------------------
/src/themes/bright/composed-pie.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryPie } from "../../victory/victory-pie";
4 |
5 | export default (props) => ([
6 |
15 | ]);
16 |
--------------------------------------------------------------------------------
/src/themes/bright/composed-scatter.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryScatter } from "../../victory/victory-chart";
4 |
5 | import { VictoryTooltip } from "../../victory/victory-core";
6 |
7 | export default (props) => ([
8 | d.y)}
18 | labelComponent={}
19 | animate={{
20 | duration: 500,
21 | onLoad: {
22 | duration: 500
23 | }
24 | }}
25 | />
26 | ]);
27 |
--------------------------------------------------------------------------------
/src/themes/bright/index.js:
--------------------------------------------------------------------------------
1 | import ComposedArea from "./composed-area";
2 | import ComposedAxis from "./composed-axis";
3 | import ComposedBar from "./composed-bar";
4 | import ComposedChart from "./composed-chart";
5 | import ComposedLine from "./composed-line";
6 | import ComposedPie from "./composed-pie";
7 | import ComposedScatter from "./composed-scatter";
8 |
9 | import theme from "./theme";
10 |
11 | export default {
12 | area: ComposedArea,
13 | axis: ComposedAxis,
14 | bar: ComposedBar,
15 | chart: ComposedChart,
16 | line: ComposedLine,
17 | pie: ComposedPie,
18 | scatter: ComposedScatter,
19 | theme
20 | };
21 |
--------------------------------------------------------------------------------
/src/themes/bright/theme.js:
--------------------------------------------------------------------------------
1 | // *
2 | // * Colors
3 | // *
4 | const colors = [
5 | "#0074D9",
6 | "#2ECC40",
7 | "#FF851B",
8 | "#FFDC00",
9 | "#7FDBFF",
10 | "#01FF70",
11 | "#FF4136",
12 | "#B10DC9",
13 | "#39CCCC"
14 | ];
15 |
16 | const primary = "#555";
17 | // *
18 | // * Typography
19 | // *
20 | const sansSerif = "'Gill Sans', 'Gill Sans MT', Calibri, sans-serif";
21 | const letterSpacing = "normal";
22 | const fontSize = 16;
23 | // *
24 | // * Layout
25 | // *
26 | const baseProps = {
27 | width: 450,
28 | height: 300,
29 | padding: 50,
30 | colorScale: colors
31 | };
32 | // *
33 | // * Labels
34 | // *
35 | const baseLabelStyles = {
36 | fontFamily: sansSerif,
37 | fontSize,
38 | letterSpacing,
39 | padding: 10,
40 | fill: primary,
41 | stroke: "transparent"
42 | };
43 |
44 | const centeredLabelStyles = { textAnchor: "middle", ...baseLabelStyles };
45 | // *
46 | // * Strokes
47 | // *
48 | const strokeDasharray = "2, 2";
49 | const strokeLinecap = "round";
50 | const strokeLinejoin = "round";
51 |
52 | export default {
53 | area: {
54 | style: {
55 | data: {
56 | opacity: 0.85,
57 | fill: primary
58 | },
59 | labels: centeredLabelStyles
60 | },
61 | ...baseProps
62 | },
63 | axis: {
64 | style: {
65 | axis: {
66 | fill: "transparent",
67 | stroke: primary,
68 | strokeWidth: 1,
69 | strokeLinecap,
70 | strokeLinejoin
71 | },
72 | axisLabel: {
73 | ...centeredLabelStyles,
74 | padding: 25
75 | },
76 | grid: {
77 | fill: "transparent",
78 | stroke: primary,
79 | opacity: 0.25,
80 | strokeDasharray,
81 | strokeLinecap,
82 | strokeLinejoin
83 | },
84 | ticks: {
85 | fill: "transparent",
86 | padding: 10,
87 | size: 1,
88 | stroke: "transparent"
89 | },
90 | tickLabels: baseLabelStyles
91 | },
92 | ...baseProps
93 | },
94 | bar: {
95 | style: {
96 | data: {
97 | opacity: 0.85,
98 | fill: primary,
99 | padding: 10,
100 | stroke: "transparent",
101 | strokeWidth: 0,
102 | width: 8
103 | },
104 | labels: baseLabelStyles
105 | },
106 | ...baseProps
107 | },
108 | candlestick: {
109 | style: {
110 | data: {
111 | opacity: 0.85,
112 | stroke: primary,
113 | strokeWidth: 1
114 | },
115 | labels: centeredLabelStyles
116 | },
117 | candleColors: {
118 | positive: "#ffffff",
119 | negative: primary
120 | },
121 | ...baseProps
122 | },
123 | chart: {
124 | style: {
125 | parent: {
126 | background: "#f1f1f1"
127 | }
128 | },
129 | ...baseProps
130 | },
131 | errorbar: {
132 | style: {
133 | data: {
134 | opacity: 0.85,
135 | fill: "transparent",
136 | stroke: primary,
137 | strokeWidth: 2
138 | },
139 | labels: centeredLabelStyles
140 | },
141 | ...baseProps
142 | },
143 | group: {
144 | colorScale: colors,
145 | ...baseProps
146 | },
147 | line: {
148 | style: {
149 | data: {
150 | opacity: 0.85,
151 | fill: "transparent",
152 | stroke: primary,
153 | strokeWidth: 2
154 | },
155 | labels: {
156 | ...baseLabelStyles,
157 | textAnchor: "start"
158 | }
159 | },
160 | ...baseProps
161 | },
162 | pie: {
163 | style: {
164 | data: {
165 | opacity: 0.85,
166 | padding: 10,
167 | stroke: "transparent",
168 | strokeWidth: 1
169 | },
170 | labels: {
171 | ...baseLabelStyles,
172 | padding: 20
173 | }
174 | },
175 | colorScale: colors,
176 | width: 400,
177 | height: 400,
178 | padding: 50
179 | },
180 | scatter: {
181 | style: {
182 | data: {
183 | opacity: 0.85,
184 | fill: primary,
185 | stroke: "transparent",
186 | strokeWidth: 0
187 | },
188 | labels: centeredLabelStyles
189 | },
190 | ...baseProps
191 | },
192 | stack: {
193 | colorScale: colors,
194 | ...baseProps
195 | },
196 | tooltip: {
197 | padding: 10,
198 | style: {
199 | data: {
200 | fill: "transparent",
201 | stroke: "transparent",
202 | strokeWidth: 0
203 | },
204 | labels: centeredLabelStyles,
205 | flyout: {
206 | stroke: primary,
207 | strokeWidth: 1,
208 | fill: "#333333"
209 | }
210 | },
211 | flyoutProps: {
212 | cornerRadius: 2,
213 | pointerLength: 0
214 | }
215 | },
216 | voronoi: {
217 | style: {
218 | data: {
219 | fill: "transparent",
220 | stroke: "transparent",
221 | strokeWidth: 0
222 | },
223 | labels: centeredLabelStyles
224 | },
225 | ...baseProps
226 | }
227 | };
228 |
--------------------------------------------------------------------------------
/src/themes/danceparty/composed-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | VictoryArea,
5 | VictoryGroup,
6 | VictoryVoronoiTooltip
7 | } from "../../victory/victory-chart";
8 |
9 | import { VictoryTooltip } from "../../victory/victory-core";
10 |
11 | export default (props) => ([
12 |
13 | {
26 | return [
27 | {
28 | mutation: (lastProps) => {
29 | return {
30 | style: {
31 | ...lastProps.style,
32 | opacity: 1
33 | }
34 | };
35 | }
36 | }
37 | ];
38 | },
39 | onMouseOut: () => {
40 | return [
41 | {
42 | mutation: (lastProps) => {
43 | return {
44 | style: {
45 | ...lastProps.style,
46 | opacity: 0.75
47 | }
48 | };
49 | }
50 | }
51 | ];
52 | }
53 | }
54 | }]}
55 | animate={{
56 | duration: 500,
57 | onLoad: {
58 | duration: 500
59 | }
60 | }}
61 | />
62 | `${d.y}`}
65 | labelComponent={
66 |
70 | }
71 | />
72 |
73 | ]);
74 |
--------------------------------------------------------------------------------
/src/themes/danceparty/composed-axis.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryAxis } from "../../victory/victory-chart";
4 |
5 | export default (props) => (
6 |
7 | );
8 |
--------------------------------------------------------------------------------
/src/themes/danceparty/composed-bar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryBar } from "../../victory/victory-chart";
4 |
5 | import { VictoryTooltip } from "../../victory/victory-core";
6 |
7 | export default (props) => ([
8 | d.y)}
15 | labelComponent={}
16 | animate={{
17 | duration: 500,
18 | onLoad: {
19 | duration: 500
20 | }
21 | }}
22 | {...props}
23 | />
24 | ]);
25 |
--------------------------------------------------------------------------------
/src/themes/danceparty/composed-chart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import { VictoryChart } from "../../victory/victory-chart";
4 |
5 | export default class ComposedWrapper extends React.Component {
6 | static propTypes = {
7 | children: PropTypes.node
8 | };
9 |
10 | render() {
11 | return {this.props.children};
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/themes/danceparty/composed-line.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | VictoryLine,
5 | VictoryScatter,
6 | VictoryGroup,
7 | VictoryVoronoiTooltip
8 | } from "../../victory/victory-chart";
9 |
10 | import { VictoryTooltip } from "../../victory/victory-core";
11 |
12 | export default (props) => ([
13 |
14 |
28 |
45 | `${d.y}`}
48 | labelComponent={
49 |
53 | }
54 | />
55 |
56 | ]);
57 |
--------------------------------------------------------------------------------
/src/themes/danceparty/composed-pie.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryPie } from "../../victory/victory-pie";
4 |
5 | export default (props) => ([
6 |
15 | ]);
16 |
--------------------------------------------------------------------------------
/src/themes/danceparty/composed-scatter.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryScatter } from "../../victory/victory-chart";
4 |
5 | import { VictoryTooltip } from "../../victory/victory-core";
6 |
7 | export default (props) => ([
8 | d.y)}
18 | labelComponent={}
19 | animate={{
20 | duration: 500,
21 | onLoad: {
22 | duration: 500
23 | }
24 | }}
25 | />
26 | ]);
27 |
--------------------------------------------------------------------------------
/src/themes/danceparty/index.js:
--------------------------------------------------------------------------------
1 | import ComposedArea from "./composed-area";
2 | import ComposedAxis from "./composed-axis";
3 | import ComposedBar from "./composed-bar";
4 | import ComposedChart from "./composed-chart";
5 | import ComposedLine from "./composed-line";
6 | import ComposedPie from "./composed-pie";
7 | import ComposedScatter from "./composed-scatter";
8 |
9 | import theme from "./theme";
10 |
11 | export default {
12 | area: ComposedArea,
13 | axis: ComposedAxis,
14 | bar: ComposedBar,
15 | chart: ComposedChart,
16 | line: ComposedLine,
17 | pie: ComposedPie,
18 | scatter: ComposedScatter,
19 | theme
20 | };
21 |
--------------------------------------------------------------------------------
/src/themes/danceparty/theme.js:
--------------------------------------------------------------------------------
1 | // *
2 | // * Colors
3 | // *
4 | const colors = [
5 | "#AAFF00",
6 | "#FFAA00",
7 | "#FF00AA",
8 | "#AA00FF",
9 | "#FFFB00",
10 | "#FA023C",
11 | "#CC37C2",
12 | "#46E4BC",
13 | "#00AAFF"
14 | ];
15 |
16 | const primary = "#ff00ff";
17 | // *
18 | // * Typography
19 | // *
20 | const sansSerif = "'Courier New',Courier,'Lucida Sans Typewriter','Lucida Typewriter',monospace";
21 | const letterSpacing = "normal";
22 | const fontSize = 14;
23 | // *
24 | // * Layout
25 | // *
26 | const baseProps = {
27 | width: 450,
28 | height: 300,
29 | padding: 50,
30 | colorScale: colors
31 | };
32 | // *
33 | // * Labels
34 | // *
35 | const baseLabelStyles = {
36 | fontFamily: sansSerif,
37 | fontSize,
38 | letterSpacing,
39 | padding: 10,
40 | fill: primary,
41 | stroke: "transparent"
42 | };
43 |
44 | const centeredLabelStyles = { textAnchor: "middle", ...baseLabelStyles };
45 | // *
46 | // * Strokes
47 | // *
48 | const strokeLinecap = "round";
49 | const strokeLinejoin = "round";
50 |
51 | export default {
52 | area: {
53 | style: {
54 | data: {
55 | opacity: 0.85,
56 | fill: primary
57 | },
58 | labels: centeredLabelStyles
59 | },
60 | ...baseProps
61 | },
62 | axis: {
63 | style: {
64 | axis: {
65 | fill: "transparent",
66 | stroke: primary,
67 | strokeWidth: 1,
68 | strokeLinecap,
69 | strokeLinejoin
70 | },
71 | axisLabel: {
72 | ...centeredLabelStyles,
73 | padding: 25
74 | },
75 | grid: {
76 | fill: "transparent",
77 | stroke: "transparent",
78 | opacity: 0.25,
79 | strokeLinecap,
80 | strokeLinejoin
81 | },
82 | ticks: {
83 | fill: "transparent",
84 | padding: 10,
85 | size: 1,
86 | stroke: "transparent"
87 | },
88 | tickLabels: baseLabelStyles
89 | },
90 | ...baseProps
91 | },
92 | bar: {
93 | style: {
94 | data: {
95 | opacity: 0.85,
96 | fill: primary,
97 | padding: 10,
98 | stroke: "transparent",
99 | strokeWidth: 0,
100 | width: 8
101 | },
102 | labels: baseLabelStyles
103 | },
104 | ...baseProps
105 | },
106 | candlestick: {
107 | style: {
108 | data: {
109 | opacity: 0.85,
110 | stroke: primary,
111 | strokeWidth: 1
112 | },
113 | labels: centeredLabelStyles
114 | },
115 | candleColors: {
116 | positive: "#ffffff",
117 | negative: primary
118 | },
119 | ...baseProps
120 | },
121 | chart: {
122 | style: {
123 | parent: {
124 | background: "#000"
125 | }
126 | },
127 | ...baseProps
128 | },
129 | errorbar: {
130 | style: {
131 | data: {
132 | opacity: 0.85,
133 | fill: "transparent",
134 | stroke: primary,
135 | strokeWidth: 2
136 | },
137 | labels: centeredLabelStyles
138 | },
139 | ...baseProps
140 | },
141 | group: {
142 | colorScale: colors,
143 | ...baseProps
144 | },
145 | line: {
146 | style: {
147 | data: {
148 | opacity: 0.85,
149 | fill: "transparent",
150 | stroke: primary,
151 | strokeWidth: 2
152 | },
153 | labels: {
154 | ...baseLabelStyles,
155 | textAnchor: "start"
156 | }
157 | },
158 | ...baseProps
159 | },
160 | pie: {
161 | style: {
162 | data: {
163 | opacity: 0.85,
164 | padding: 10,
165 | stroke: "transparent",
166 | strokeWidth: 1
167 | },
168 | labels: {
169 | ...baseLabelStyles,
170 | padding: 20
171 | }
172 | },
173 | colorScale: colors,
174 | width: 400,
175 | height: 400,
176 | padding: 50
177 | },
178 | scatter: {
179 | style: {
180 | data: {
181 | opacity: 0.85,
182 | fill: primary,
183 | stroke: "transparent",
184 | strokeWidth: 0
185 | },
186 | labels: centeredLabelStyles
187 | },
188 | ...baseProps
189 | },
190 | stack: {
191 | colorScale: colors,
192 | ...baseProps
193 | },
194 | tooltip: {
195 | padding: 10,
196 | style: {
197 | data: {
198 | fill: "transparent",
199 | stroke: "primary",
200 | strokeWidth: 0
201 | },
202 | labels: centeredLabelStyles,
203 | flyout: {
204 | stroke: primary,
205 | strokeWidth: 1,
206 | fill: "#000"
207 | }
208 | },
209 | flyoutProps: {
210 | cornerRadius: 2,
211 | pointerLength: 0
212 | }
213 | },
214 | voronoi: {
215 | style: {
216 | data: {
217 | fill: "transparent",
218 | stroke: "transparent",
219 | strokeWidth: 0
220 | },
221 | labels: centeredLabelStyles
222 | },
223 | ...baseProps
224 | }
225 | };
226 |
--------------------------------------------------------------------------------
/src/themes/dark/composed-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | VictoryArea,
5 | VictoryGroup,
6 | VictoryVoronoiTooltip
7 | } from "../../victory/victory-chart";
8 |
9 | import { VictoryTooltip } from "../../victory/victory-core";
10 |
11 | export default (props) => ([
12 |
13 | {
26 | return [
27 | {
28 | mutation: (lastProps) => {
29 | return {
30 | style: {
31 | ...lastProps.style,
32 | opacity: 1
33 | }
34 | };
35 | }
36 | }
37 | ];
38 | },
39 | onMouseOut: () => {
40 | return [
41 | {
42 | mutation: (lastProps) => {
43 | return {
44 | style: {
45 | ...lastProps.style,
46 | opacity: 0.75
47 | }
48 | };
49 | }
50 | }
51 | ];
52 | }
53 | }
54 | }]}
55 | animate={{
56 | duration: 500,
57 | onLoad: {
58 | duration: 500
59 | }
60 | }}
61 | />
62 | `${d.y}`}
65 | labelComponent={
66 |
70 | }
71 | />
72 |
73 | ]);
74 |
--------------------------------------------------------------------------------
/src/themes/dark/composed-axis.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryAxis } from "../../victory/victory-chart";
4 |
5 | export default (props) => (
6 |
7 | );
8 |
--------------------------------------------------------------------------------
/src/themes/dark/composed-bar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryBar } from "../../victory/victory-chart";
4 |
5 | import { VictoryTooltip } from "../../victory/victory-core";
6 |
7 | export default (props) => ([
8 | d.y)}
15 | labelComponent={}
16 | animate={{
17 | duration: 500,
18 | onLoad: {
19 | duration: 500
20 | }
21 | }}
22 | {...props}
23 | />
24 | ]);
25 |
--------------------------------------------------------------------------------
/src/themes/dark/composed-chart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import { VictoryChart } from "../../victory/victory-chart";
4 |
5 | export default class ComposedWrapper extends React.Component {
6 | static propTypes = {
7 | children: PropTypes.node
8 | };
9 |
10 | render() {
11 | return {this.props.children};
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/themes/dark/composed-line.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | VictoryLine,
5 | VictoryScatter,
6 | VictoryGroup,
7 | VictoryVoronoiTooltip
8 | } from "../../victory/victory-chart";
9 |
10 | import { VictoryTooltip } from "../../victory/victory-core";
11 |
12 | export default (props) => ([
13 |
14 |
28 |
45 | `${d.y}`}
48 | labelComponent={
49 |
53 | }
54 | />
55 |
56 | ]);
57 |
--------------------------------------------------------------------------------
/src/themes/dark/composed-pie.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryPie } from "../../victory/victory-pie";
4 |
5 | export default (props) => ([
6 |
15 | ]);
16 |
--------------------------------------------------------------------------------
/src/themes/dark/composed-scatter.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryScatter } from "../../victory/victory-chart";
4 |
5 | import { VictoryTooltip } from "../../victory/victory-core";
6 |
7 | export default (props) => ([
8 | d.y)}
18 | labelComponent={}
19 | animate={{
20 | duration: 500,
21 | onLoad: {
22 | duration: 500
23 | }
24 | }}
25 | />
26 | ]);
27 |
--------------------------------------------------------------------------------
/src/themes/dark/index.js:
--------------------------------------------------------------------------------
1 | import ComposedArea from "./composed-area";
2 | import ComposedAxis from "./composed-axis";
3 | import ComposedBar from "./composed-bar";
4 | import ComposedChart from "./composed-chart";
5 | import ComposedLine from "./composed-line";
6 | import ComposedPie from "./composed-pie";
7 | import ComposedScatter from "./composed-scatter";
8 |
9 | import theme from "./theme";
10 |
11 | export default {
12 | area: ComposedArea,
13 | axis: ComposedAxis,
14 | bar: ComposedBar,
15 | chart: ComposedChart,
16 | line: ComposedLine,
17 | pie: ComposedPie,
18 | scatter: ComposedScatter,
19 | theme
20 | };
21 |
--------------------------------------------------------------------------------
/src/themes/dark/theme.js:
--------------------------------------------------------------------------------
1 | // *
2 | // * Colors
3 | // *
4 | const colors = [
5 | "#e74c3c",
6 | "#3498db",
7 | "#f1c40f",
8 | "#9b59b6",
9 | "#e67e22",
10 | "#1abc9c",
11 | "#95a5a6",
12 | "#34495e"
13 | ];
14 |
15 | const primary = "#aaa";
16 | // *
17 | // * Typography
18 | // *
19 | const sansSerif =
20 | "'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif";
21 | const letterSpacing = "normal";
22 | const fontSize = 14;
23 | // *
24 | // * Layout
25 | // *
26 | const baseProps = {
27 | width: 450,
28 | height: 300,
29 | padding: 50,
30 | colorScale: colors
31 | };
32 | // *
33 | // * Labels
34 | // *
35 | const baseLabelStyles = {
36 | fontFamily: sansSerif,
37 | fontSize,
38 | letterSpacing,
39 | padding: 10,
40 | fill: primary,
41 | stroke: "transparent"
42 | };
43 |
44 | const centeredLabelStyles = { textAnchor: "middle", ...baseLabelStyles };
45 | // *
46 | // * Strokes
47 | // *
48 | const strokeDasharray = "10, 5";
49 | const strokeLinecap = "round";
50 | const strokeLinejoin = "round";
51 |
52 | export default {
53 | area: {
54 | style: {
55 | data: {
56 | opacity: 0.85,
57 | fill: primary
58 | },
59 | labels: centeredLabelStyles
60 | },
61 | ...baseProps
62 | },
63 | axis: {
64 | style: {
65 | axis: {
66 | fill: "transparent",
67 | stroke: primary,
68 | strokeWidth: 1,
69 | strokeLinecap,
70 | strokeLinejoin
71 | },
72 | axisLabel: {
73 | ...centeredLabelStyles,
74 | padding: 25
75 | },
76 | grid: {
77 | fill: "transparent",
78 | stroke: primary,
79 | opacity: 0.25,
80 | strokeDasharray,
81 | strokeLinecap,
82 | strokeLinejoin
83 | },
84 | ticks: {
85 | fill: "transparent",
86 | padding: 10,
87 | size: 1,
88 | stroke: "transparent"
89 | },
90 | tickLabels: baseLabelStyles
91 | },
92 | ...baseProps
93 | },
94 | bar: {
95 | style: {
96 | data: {
97 | opacity: 0.85,
98 | fill: primary,
99 | padding: 10,
100 | stroke: "transparent",
101 | strokeWidth: 0,
102 | width: 8
103 | },
104 | labels: baseLabelStyles
105 | },
106 | ...baseProps
107 | },
108 | candlestick: {
109 | style: {
110 | data: {
111 | opacity: 0.85,
112 | stroke: primary,
113 | strokeWidth: 1
114 | },
115 | labels: centeredLabelStyles
116 | },
117 | candleColors: {
118 | positive: "#ffffff",
119 | negative: primary
120 | },
121 | ...baseProps
122 | },
123 | chart: {
124 | style: {
125 | parent: {
126 | background: "#222222"
127 | }
128 | },
129 | ...baseProps
130 | },
131 | errorbar: {
132 | style: {
133 | data: {
134 | opacity: 0.85,
135 | fill: "transparent",
136 | stroke: primary,
137 | strokeWidth: 2
138 | },
139 | labels: centeredLabelStyles
140 | },
141 | ...baseProps
142 | },
143 | group: {
144 | colorScale: colors,
145 | ...baseProps
146 | },
147 | line: {
148 | style: {
149 | data: {
150 | opacity: 0.85,
151 | fill: "transparent",
152 | stroke: primary,
153 | strokeWidth: 2
154 | },
155 | labels: {
156 | ...baseLabelStyles,
157 | textAnchor: "start"
158 | }
159 | },
160 | ...baseProps
161 | },
162 | pie: {
163 | style: {
164 | data: {
165 | opacity: 0.85,
166 | padding: 10,
167 | stroke: "transparent",
168 | strokeWidth: 1
169 | },
170 | labels: {
171 | ...baseLabelStyles,
172 | padding: 20
173 | }
174 | },
175 | colorScale: colors,
176 | width: 400,
177 | height: 400,
178 | padding: 50
179 | },
180 | scatter: {
181 | style: {
182 | data: {
183 | opacity: 0.85,
184 | fill: primary,
185 | stroke: "transparent",
186 | strokeWidth: 0
187 | },
188 | labels: centeredLabelStyles
189 | },
190 | ...baseProps
191 | },
192 | stack: {
193 | colorScale: colors,
194 | ...baseProps
195 | },
196 | tooltip: {
197 | padding: 10,
198 | style: {
199 | data: {
200 | fill: "transparent",
201 | stroke: "transparent",
202 | strokeWidth: 0
203 | },
204 | labels: centeredLabelStyles,
205 | flyout: {
206 | stroke: primary,
207 | strokeWidth: 1,
208 | fill: "#333333"
209 | }
210 | },
211 | flyoutProps: {
212 | cornerRadius: 2,
213 | pointerLength: 0
214 | }
215 | },
216 | voronoi: {
217 | style: {
218 | data: {
219 | fill: "transparent",
220 | stroke: "transparent",
221 | strokeWidth: 0
222 | },
223 | labels: centeredLabelStyles
224 | },
225 | ...baseProps
226 | }
227 | };
228 |
--------------------------------------------------------------------------------
/src/themes/index.js:
--------------------------------------------------------------------------------
1 | import simple from "./simple";
2 | import dark from "./dark";
3 | import danceparty from "./danceparty";
4 | import bright from "./bright";
5 |
6 | export default {
7 | simple,
8 | dark,
9 | danceparty,
10 | bright
11 | };
12 |
--------------------------------------------------------------------------------
/src/themes/simple/composed-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | VictoryArea,
5 | VictoryGroup,
6 | VictoryVoronoiTooltip
7 | } from "../../victory/victory-chart";
8 |
9 | import { VictoryTooltip } from "../../victory/victory-core";
10 |
11 | export default (props) => ([
12 |
13 | {
26 | return [
27 | {
28 | mutation: (lastProps) => {
29 | return {
30 | style: {
31 | ...lastProps.style,
32 | opacity: 1
33 | }
34 | };
35 | }
36 | }
37 | ];
38 | },
39 | onMouseOut: () => {
40 | return [
41 | {
42 | mutation: (lastProps) => {
43 | return {
44 | style: {
45 | ...lastProps.style,
46 | opacity: 0.75
47 | }
48 | };
49 | }
50 | }
51 | ];
52 | }
53 | }
54 | }]}
55 | animate={{
56 | duration: 500,
57 | onLoad: {
58 | duration: 500
59 | }
60 | }}
61 | />
62 | `${d.y}`}
65 | labelComponent={
66 |
70 | }
71 | />
72 |
73 | ]);
74 |
--------------------------------------------------------------------------------
/src/themes/simple/composed-axis.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryAxis } from "../../victory/victory-chart";
4 |
5 | export default (props) => (
6 |
7 | );
8 |
--------------------------------------------------------------------------------
/src/themes/simple/composed-bar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryBar } from "../../victory/victory-chart";
4 |
5 | import { VictoryTooltip } from "../../victory/victory-core";
6 |
7 | export default (props) => ([
8 | d.y)}
15 | labelComponent={}
16 | animate={{
17 | duration: 500,
18 | onLoad: {
19 | duration: 500
20 | }
21 | }}
22 | {...props}
23 | />
24 | ]);
25 |
--------------------------------------------------------------------------------
/src/themes/simple/composed-chart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from "react";
2 |
3 | import { VictoryChart } from "../../victory/victory-chart";
4 |
5 | export default class ComposedWrapper extends React.Component {
6 | static propTypes = {
7 | children: PropTypes.node
8 | };
9 |
10 | render() {
11 | return {this.props.children};
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/themes/simple/composed-line.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | VictoryLine,
5 | VictoryScatter,
6 | VictoryGroup,
7 | VictoryVoronoiTooltip
8 | } from "../../victory/victory-chart";
9 |
10 | import { VictoryTooltip } from "../../victory/victory-core";
11 |
12 | export default (props) => ([
13 |
14 |
28 |
45 | `${d.y}`}
48 | labelComponent={
49 |
53 | }
54 | />
55 |
56 | ]);
57 |
--------------------------------------------------------------------------------
/src/themes/simple/composed-pie.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryPie } from "../../victory/victory-pie";
4 |
5 | export default (props) => ([
6 |
15 | ]);
16 |
--------------------------------------------------------------------------------
/src/themes/simple/composed-scatter.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { VictoryScatter } from "../../victory/victory-chart";
4 |
5 | import { VictoryTooltip } from "../../victory/victory-core";
6 |
7 | export default (props) => ([
8 | d.y)}
18 | labelComponent={}
19 | animate={{
20 | duration: 500,
21 | onLoad: {
22 | duration: 500
23 | }
24 | }}
25 | />
26 | ]);
27 |
--------------------------------------------------------------------------------
/src/themes/simple/index.js:
--------------------------------------------------------------------------------
1 | import ComposedArea from "./composed-area";
2 | import ComposedAxis from "./composed-axis";
3 | import ComposedBar from "./composed-bar";
4 | import ComposedChart from "./composed-chart";
5 | import ComposedLine from "./composed-line";
6 | import ComposedPie from "./composed-pie";
7 | import ComposedScatter from "./composed-scatter";
8 |
9 | import theme from "./theme";
10 |
11 | export default {
12 | area: ComposedArea,
13 | axis: ComposedAxis,
14 | bar: ComposedBar,
15 | chart: ComposedChart,
16 | line: ComposedLine,
17 | pie: ComposedPie,
18 | scatter: ComposedScatter,
19 | theme
20 | };
21 |
--------------------------------------------------------------------------------
/src/themes/simple/theme.js:
--------------------------------------------------------------------------------
1 | // *
2 | // * Colors
3 | // *
4 | const colors = [
5 | "#4DD0E1",
6 | "#9575CD",
7 | "#FF6E40",
8 | "#00E676",
9 | "#80D8FF",
10 | "#FFEE58",
11 | "#FFA000",
12 | "#4CAF50",
13 | "#2979FF"
14 | ];
15 |
16 | const primary = "#333";
17 | // *
18 | // * Typography
19 | // *
20 | const sansSerif = "Futura, 'Trebuchet MS', Arial, sans-serif";
21 | const letterSpacing = "normal";
22 | const fontSize = 14;
23 | // *
24 | // * Layout
25 | // *
26 | const baseProps = {
27 | width: 450,
28 | height: 300,
29 | padding: 50,
30 | colorScale: colors
31 | };
32 | // *
33 | // * Labels
34 | // *
35 | const baseLabelStyles = {
36 | fontFamily: sansSerif,
37 | fontSize,
38 | letterSpacing,
39 | padding: 10,
40 | fill: primary,
41 | stroke: "transparent"
42 | };
43 |
44 | const centeredLabelStyles = { textAnchor: "middle", ...baseLabelStyles };
45 | // *
46 | // * Strokes
47 | // *
48 | const strokeLinecap = "round";
49 | const strokeLinejoin = "round";
50 |
51 | export default {
52 | area: {
53 | style: {
54 | data: {
55 | opacity: 0.85,
56 | fill: primary
57 | },
58 | labels: centeredLabelStyles
59 | },
60 | ...baseProps
61 | },
62 | axis: {
63 | style: {
64 | axis: {
65 | fill: "transparent",
66 | stroke: primary,
67 | strokeWidth: 1,
68 | strokeLinecap,
69 | strokeLinejoin
70 | },
71 | axisLabel: {
72 | ...centeredLabelStyles,
73 | padding: 25
74 | },
75 | grid: {
76 | fill: "transparent",
77 | stroke: "transparent",
78 | opacity: 0.25,
79 | strokeLinecap,
80 | strokeLinejoin
81 | },
82 | ticks: {
83 | fill: "transparent",
84 | padding: 10,
85 | size: 1,
86 | stroke: "transparent"
87 | },
88 | tickLabels: baseLabelStyles
89 | },
90 | ...baseProps
91 | },
92 | bar: {
93 | style: {
94 | data: {
95 | opacity: 0.85,
96 | fill: primary,
97 | padding: 10,
98 | stroke: "transparent",
99 | strokeWidth: 0,
100 | width: 8
101 | },
102 | labels: baseLabelStyles
103 | },
104 | ...baseProps
105 | },
106 | candlestick: {
107 | style: {
108 | data: {
109 | opacity: 0.85,
110 | stroke: primary,
111 | strokeWidth: 1
112 | },
113 | labels: centeredLabelStyles
114 | },
115 | candleColors: {
116 | positive: "#ffffff",
117 | negative: primary
118 | },
119 | ...baseProps
120 | },
121 | chart: {
122 | style: {
123 | parent: {
124 | background: "transparent"
125 | }
126 | },
127 | ...baseProps
128 | },
129 | errorbar: {
130 | style: {
131 | data: {
132 | opacity: 0.85,
133 | fill: "transparent",
134 | stroke: primary,
135 | strokeWidth: 2
136 | },
137 | labels: centeredLabelStyles
138 | },
139 | ...baseProps
140 | },
141 | group: {
142 | colorScale: colors,
143 | ...baseProps
144 | },
145 | line: {
146 | style: {
147 | data: {
148 | opacity: 0.85,
149 | fill: "transparent",
150 | stroke: primary,
151 | strokeWidth: 2
152 | },
153 | labels: {
154 | ...baseLabelStyles,
155 | textAnchor: "start"
156 | }
157 | },
158 | ...baseProps
159 | },
160 | pie: {
161 | style: {
162 | data: {
163 | opacity: 0.85,
164 | padding: 10,
165 | stroke: "transparent",
166 | strokeWidth: 1
167 | },
168 | labels: {
169 | ...baseLabelStyles,
170 | padding: 20
171 | }
172 | },
173 | colorScale: colors,
174 | width: 400,
175 | height: 400,
176 | padding: 50
177 | },
178 | scatter: {
179 | style: {
180 | data: {
181 | opacity: 0.85,
182 | fill: primary,
183 | stroke: "transparent",
184 | strokeWidth: 0
185 | },
186 | labels: centeredLabelStyles
187 | },
188 | ...baseProps
189 | },
190 | stack: {
191 | colorScale: colors,
192 | ...baseProps
193 | },
194 | tooltip: {
195 | padding: 10,
196 | style: {
197 | data: {
198 | fill: "transparent",
199 | stroke: "transparent",
200 | strokeWidth: 0
201 | },
202 | labels: centeredLabelStyles,
203 | flyout: {
204 | stroke: primary,
205 | strokeWidth: 1,
206 | fill: "#333333"
207 | }
208 | },
209 | flyoutProps: {
210 | cornerRadius: 2,
211 | pointerLength: 0
212 | }
213 | },
214 | voronoi: {
215 | style: {
216 | data: {
217 | fill: "transparent",
218 | stroke: "transparent",
219 | strokeWidth: 0
220 | },
221 | labels: centeredLabelStyles
222 | },
223 | ...baseProps
224 | }
225 | };
226 |
--------------------------------------------------------------------------------
/src/victory/victory-chart.android.js:
--------------------------------------------------------------------------------
1 | module.exports = require("victory-chart-native");
2 |
--------------------------------------------------------------------------------
/src/victory/victory-chart.ios.js:
--------------------------------------------------------------------------------
1 | export * from "victory-chart-native";
2 |
--------------------------------------------------------------------------------
/src/victory/victory-chart.js:
--------------------------------------------------------------------------------
1 | export * from "victory-chart";
2 |
--------------------------------------------------------------------------------
/src/victory/victory-core.android.js:
--------------------------------------------------------------------------------
1 | export * from "victory-core-native";
2 |
--------------------------------------------------------------------------------
/src/victory/victory-core.ios.js:
--------------------------------------------------------------------------------
1 | export * from "victory-core-native";
2 |
--------------------------------------------------------------------------------
/src/victory/victory-core.js:
--------------------------------------------------------------------------------
1 | export * from "victory-core";
2 |
--------------------------------------------------------------------------------
/src/victory/victory-pie.android.js:
--------------------------------------------------------------------------------
1 | export * from "victory-pie-native";
2 |
--------------------------------------------------------------------------------
/src/victory/victory-pie.ios.js:
--------------------------------------------------------------------------------
1 | export * from "victory-pie-native";
2 |
--------------------------------------------------------------------------------
/src/victory/victory-pie.js:
--------------------------------------------------------------------------------
1 | export * from "victory-pie";
2 |
--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
1 | ---
2 | extends: ../node_modules/builder-victory-component/config/eslint/.eslintrc-test
--------------------------------------------------------------------------------
/test/client/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test setup for client-side tests.
3 | *
4 | * Intended for:
5 | * - Karma tests: `builder run test-frontend`
6 | * - Browser tests: `http://localhost:3000/test/client/test.html`
7 | */
8 | /*globals window:false*/
9 | const chai = require("chai");
10 | const sinonChai = require("sinon-chai");
11 |
12 | // --------------------------------------------------------------------------
13 | // Chai / Sinon / Mocha configuration.
14 | // --------------------------------------------------------------------------
15 | // Exports
16 | window.expect = chai.expect;
17 |
18 | // Plugins
19 | chai.use(sinonChai);
20 |
21 | // Mocha (part of static include).
22 | window.mocha.setup({
23 | ui: "bdd",
24 | bail: false,
25 | timeout: 5000
26 | });
27 |
28 | // --------------------------------------------------------------------------
29 | // Bootstrap
30 | // --------------------------------------------------------------------------
31 | // Use webpack to include all app code _except_ the entry point so we can get
32 | // code coverage in the bundle, whether tested or not.
33 | const srcReq = require.context("src", true, /\.js?$/);
34 | srcReq.keys().filter((d) => {
35 | return d.indexOf(".ios.") === -1 && d.indexOf(".android.") === -1;
36 | }).map(srcReq);
37 |
38 | // Use webpack to infer and `require` tests automatically.
39 | const testsReq = require.context(".", true, /\.spec.js?$/);
40 | testsReq.keys().map(testsReq);
41 |
42 | // Only start mocha in browser.
43 | if (!window.__karma__) {
44 | window.mocha.run();
45 | }
46 |
--------------------------------------------------------------------------------
/test/client/spec/components/victory-composed/victory-standalone.spec.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Client tests
3 | */
4 | /*eslint-disable max-nested-callbacks */
5 | /* eslint no-unused-expressions: 0 */
6 |
7 | import React from "react";
8 | import { mount } from "enzyme";
9 | import { Standalone } from "src";
10 |
11 | describe("components/formidable-charts", () => {
12 | describe("default component rendering", () => {
13 | it("renders an svg with the correct width and height", () => {
14 | const wrapper = mount(
15 |
16 | );
17 | const svg = wrapper.find("svg");
18 | expect(svg.prop("style").width).to.equal("100%");
19 | expect(svg.prop("style").height).to.equal("auto");
20 | });
21 |
22 | it("renders an svg with the correct viewBox", () => {
23 | const wrapper = mount(
24 |
25 | );
26 | const svg = wrapper.find("svg");
27 | const viewBoxValue =
28 | `0 0 ${450} ${300}`;
29 | expect(svg.prop("viewBox")).to.equal(viewBoxValue);
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/test/client/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Frontend Tests
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------