) 39 | breaks: false, // Convert '\n' in paragraphs into
40 | langPrefix: 'language-', // CSS language prefix for fenced blocks 41 | linkify: true, // autoconvert URL-like texts to links 42 | linkTarget: '', // set target to open link in 43 | 44 | // Enable some language-neutral replacements + quotes beautification 45 | typographer: false, 46 | 47 | // Double + single quotes replacement pairs, when typographer enabled, 48 | // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German. 49 | quotes: '“”‘’', 50 | 51 | // Highlighter function. Should return escaped HTML, 52 | // or '' if input not changed 53 | highlight(str, lang) { 54 | if (lang && hljs.getLanguage(lang)) { 55 | try { 56 | return hljs.highlight(lang, str).value; 57 | } catch (__) { } 58 | } 59 | 60 | try { 61 | return hljs.highlightAuto(str).value; 62 | } catch (__) { } 63 | 64 | return ''; // use external default escaping 65 | }, 66 | }); 67 | return ( 68 |
69 |
70 |
71 |
72 |
75 |})
76 |
81 |
82 |
83 |
84 |
85 |
86 |
89 |
90 |
91 | );
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/src/components/LegendComponent.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) 2018, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3 | *
4 | * WSO2 Inc. licenses this file to you under the Apache License,
5 | * Version 2.0 (the "License"); you may not use this file except
6 | * in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing,
12 | * software distributed under the License is distributed on an
13 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14 | * KIND, either express or implied. See the License for the
15 | * specific language governing permissions and limitations
16 | * under the License.
17 | */
18 |
19 | import React from 'react';
20 | import { VictoryLegend, VictoryPortal, VictoryContainer } from 'victory';
21 |
22 | /**
23 | * Class to handle the visualization of legends.
24 | */
25 | export default class LegendComponent extends React.Component {
26 | render() {
27 | const { config, height, width, legendItems, interaction, theme } = this.props;
28 | return (
29 | React-VizGrammar
73 |A charting library based on React.JS, written with simplicity and flexibility in mind.
74 |75 |
76 | 77 | {' '} 78 | {' '} 79 |
80 |
114 | {
115 | !config || !metadata ?
116 | null :
117 | this._getChartComponent(this._isComposed(config), config, data, metadata, onClick, manual,
118 | onFetchData, pages)
119 | }
120 |
121 | );
122 | }
123 | }
124 |
125 | VizG.defaultProps = {
126 | append: true,
127 | theme: 'light',
128 | width: 800,
129 | height: 450,
130 | manual: false,
131 | pages: -1,
132 | };
133 |
134 | VizG.propTypes = {
135 | config: PropTypes.object.isRequired,
136 | data: PropTypes.array,
137 | metadata: PropTypes.object.isRequired,
138 | onClick: PropTypes.func,
139 | append: PropTypes.bool,
140 | theme: PropTypes.string,
141 | height: PropTypes.number,
142 | width: PropTypes.number,
143 | manual: PropTypes.bool,
144 | onFetchData: PropTypes.func,
145 | pages: PropTypes.number,
146 | };
147 |
148 | export default VizG;
149 |
--------------------------------------------------------------------------------
/samples/chart-docs/NumberChartSample.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) 2018, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3 | *
4 | * WSO2 Inc. licenses this file to you under the Apache License,
5 | * Version 2.0 (the "License"); you may not use this file except
6 | * in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing,
12 | * software distributed under the License is distributed on an
13 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14 | * KIND, either express or implied. See the License for the
15 | * specific language governing permissions and limitations
16 | * under the License.
17 | */
18 |
19 | import React from 'react';
20 | import { Grid } from 'material-ui';
21 | import ChartWrapper from '../ChartWrapper';
22 | import VizG from '../../src/VizG';
23 | import { syntaxHighlight } from './util/SyntaxHighLight';
24 | import Header from '../components/Header';
25 |
26 | export default class NumberChartSample extends React.Component {
27 | constructor(props) {
28 | super(props);
29 | this.state = {
30 | data: [
31 | [10],
32 | ],
33 | timer: 1,
34 | };
35 |
36 | this.numConfig = {
37 | x: 'torque',
38 | title: 'Torque of Engine',
39 | charts: [{ type: 'number' }],
40 | showDifference: true,
41 | showPercentage: true,
42 | showDecimal: false,
43 | };
44 |
45 | this.metadata = {
46 | names: ['torque'],
47 | types: ['linear'],
48 | };
49 |
50 | this.intervalObj = null;
51 | }
52 |
53 | componentDidMount() {
54 | this.intervalObj = setInterval(() => {
55 | this.setState({
56 | data: [[Math.round(Math.random() * 100)], [Math.round(Math.random() * 100)]],
57 | });
58 | }, 1000);
59 | }
60 |
61 | componentWillUnmount() {
62 | clearInterval(this.intervalObj);
63 | }
64 |
65 | render() {
66 | return (
67 |
68 |
70 |
71 |
77 |
93 |
94 |
95 |
101 |
140 |
141 |
142 |
143 | );
144 | }
145 |
146 | }
147 |
--------------------------------------------------------------------------------
/samples/index.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) 2018, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3 | *
4 | * WSO2 Inc. licenses this file to you under the Apache License,
5 | * Version 2.0 (the "License"); you may not use this file except
6 | * in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing,
12 | * software distributed under the License is distributed on an
13 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14 | * KIND, either express or implied. See the License for the
15 | * specific language governing permissions and limitations
16 | * under the License.
17 | */
18 |
19 | import React from 'react';
20 | import ReactDOM from 'react-dom';
21 | import { MuiThemeProvider, createMuiTheme, IconButton } from 'material-ui';
22 | import LightBulbFill from './components/LightBulbFill'
23 | import LightBulbOutline from './components/LightBulbOutline';
24 | import { HashRouter as Router, Route, Switch as RouterSwitch } from 'react-router-dom';
25 | import ScrollReset from './ScrollReset';
26 | import App from './App';
27 | import LineCharts from './chart-docs/LineChartSamples';
28 | import AreaCharts from './chart-docs/AreaChartSamples';
29 | import BarCharts from './chart-docs/BarChartSamples';
30 | import ScatterChart from './chart-docs/ScatterPlotSample';
31 | import Maps from './chart-docs/GeographicalChartsSample';
32 | import Arcs from './chart-docs/PieChartSamples';
33 | import NumChart from './chart-docs/NumberChartSample';
34 | import Table from './chart-docs/TableChartSamples';
35 | import GettingStarted from './GettingStarted';
36 | import './styles/style.css';
37 |
38 | const darkTheme = createMuiTheme({
39 | palette: {
40 | type: 'dark',
41 | },
42 | });
43 |
44 | const lightTheme = createMuiTheme({
45 | palette: {
46 | type: 'light',
47 | },
48 | });
49 |
50 | class AppRoute extends React.Component {
51 |
52 | constructor() {
53 | super();
54 | this.state = {
55 | theme: `light`,
56 | check: false,
57 | };
58 | }
59 |
60 | handleChange = (evt) => {
61 |
62 | evt.preventDefault();
63 | this.setState({
64 | check: !this.state.check,
65 | theme: !this.state.check ? `dark` : `light`
66 | });
67 |
68 | };
69 |
70 | render() {
71 | return (
72 |
78 |
81 |
82 |
83 | 91 |
92 | 83 | 91 |
102 | metadata:
103 |
109 | data:
110 |
116 |
117 |
134 | 117 |
Chart Configuration JSON structure
118 |-
119 |
- x - Datafield that should be shown in the number chart 120 |
- title - Title that should be displayed in the chart 121 |
-
122 | charts - Array of chart objects that should be visualized
123 |
-
124 |
- type - Type of the chart to be displayed 125 |
127 | - showDifference - Show difference between current value and the 128 | previous value 129 |
- showPercentage - Show difference with the previous value as a 130 | percentage 131 |
- showDifference - Show Decimal places in the Number 132 |
135 |
139 | Style
136 | Number Chart scales to available outer wrapper width/height, preserving aspect ratio. 137 | Set outer wrapper width and height to scale Number Chart accordingly. 138 |
74 |
75 |
77 |
78 |
79 | (
81 |
92 |
93 | {
94 | return (
95 |
99 |
100 | {
101 | return (
102 |
106 |
107 | {
108 | return (
109 |
113 |
114 | {
115 | return (
116 |
120 |
121 | {
122 | return (
123 |
127 |
128 | {
129 | return (
130 |
134 |
135 | {
136 | return (
137 |
141 |
142 | {
143 | return (
144 |
145 | )
146 | }} />
147 |
148 |
149 | {
150 | return (
151 |
155 |
156 |
157 |
82 |
87 | {this.state.theme === `dark` ?
89 |
90 | )} />
91 | {chartComponents}
178 | );
179 | }
180 | }
181 |
182 | InlineChart.defaultProps = {
183 | height: 100,
184 | width: 200,
185 | };
186 |
--------------------------------------------------------------------------------
/src/components/LineChart.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) 2018, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3 | *
4 | * WSO2 Inc. licenses this file to you under the Apache License,
5 | * Version 2.0 (the "License"); you may not use this file except
6 | * in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing,
12 | * software distributed under the License is distributed on an
13 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14 | * KIND, either express or implied. See the License for the
15 | * specific language governing permissions and limitations
16 | * under the License.
17 | */
18 |
19 | import React from 'react';
20 | import { VictoryLine, VictoryTooltip, VictoryScatter } from 'victory';
21 | import _ from 'lodash';
22 | import { timeFormat } from 'd3';
23 | import BaseChart from './BaseChart';
24 | import ChartContainer from './ChartContainer';
25 | import BarChart from './BarChart';
26 | import LegendComponent from './LegendComponent';
27 | import lightTheme from './resources/themes/victoryLightTheme';
28 | import darkTheme from './resources/themes/victoryDarkTheme';
29 |
30 | /**
31 | * Class to handle the visualization of line charts.
32 | */
33 | export default class LineChart extends BaseChart {
34 | constructor(props) {
35 | super(props);
36 | this.sortDataBasedOnConfig = this.sortDataBasedOnConfig.bind(this);
37 | this.handleMouseEvent = this.handleMouseEvent.bind(this);
38 | this.handleLegendInteraction = this.handleLegendInteraction.bind(this);
39 | }
40 |
41 | /**
42 | * Generate the chart components in the case where there's only Line charts defined in the chart config.
43 | * @param {Array} chartArray - Array containing objects that has the information to visualize each area chart.
44 | * @param {String} xScale - xAxis scale to be used in the charts.
45 | * @param {Object} dataSets - object containing arrays of data after classification.
46 | * @param {Object} config - object containing user provided chart configuration
47 | * @param {Function} onClick - function to be executed on click event
48 | * @param {Array} ignoreArray - array that contains dataSets to be ignored in rendering the components.
49 | * @returns {{chartComponents: Array, legendComponents: Array}}
50 | */
51 | static getLineChartComponent(chartArray, xScale, dataSets, config, onClick, ignoreArray, currentTheme) {
52 | const chartComponents = [];
53 | const legendComponents = [];
54 |
55 | chartArray.forEach((chart, chartIndex) => {
56 | _.keys(chart.dataSetNames).forEach((dsName) => {
57 | legendComponents.push({
58 | name: dsName,
59 | symbol: { fill: _.indexOf(ignoreArray, dsName) > -1 ? '#d3d3d3' : chart.dataSetNames[dsName] },
60 | chartIndex,
61 | });
62 | if (_.indexOf(ignoreArray, dsName) === -1) {
63 | chartComponents.push(...LineChart
64 | .getComponent(config, chartIndex, xScale, dataSets[dsName], chart.dataSetNames[dsName],
65 | onClick, currentTheme));
66 | }
67 | });
68 | });
69 |
70 | return { chartComponents, legendComponents };
71 | }
72 |
73 | /**
74 | * Generate a single Line chart component to be visualized.
75 | * @param {Object} config - Chart configuration provided by the user.
76 | * @param {Number} chartIndex - Index of the chart definition in the chart Array.
77 | * @param {String} xScale - Scale to be used in the xAxis when plotting the chart.
78 | * @param {Array} data - Array of objects that containing the dataset to be plotted using this chart component.
79 | * @param {String} color - Color the chart should be plotted in.
80 | * @param {Function} onClick - Function to be executed in the case of an click event.
81 | * @returns {Element}
82 | */
83 | static getComponent(config, chartIndex, xScale, data, color, onClick, currentTheme) {
84 | return [
85 | (
79 |
81 |
82 |
83 |
99 |
100 |
101 |
102 |
118 |
119 |
120 |
121 |
137 |
138 |
139 |
141 |
157 |
158 |
159 |
160 |
161 |
206 |
207 |
208 |
209 | );
210 | }
211 | }
212 |
213 | export default MapChartConfigSample;
214 |
--------------------------------------------------------------------------------
/samples/chart-docs/PieChartSamples.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) 2018, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3 | *
4 | * WSO2 Inc. licenses this file to you under the Apache License,
5 | * Version 2.0 (the "License"); you may not use this file except
6 | * in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing,
12 | * software distributed under the License is distributed on an
13 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14 | * KIND, either express or implied. See the License for the
15 | * specific language governing permissions and limitations
16 | * under the License.
17 | */
18 |
19 | import React from 'react';
20 | import { Grid } from 'material-ui';
21 | import VizG from '../../src/VizG';
22 | import ChartWrapper from '../ChartWrapper';
23 | import { syntaxHighlight } from './util/SyntaxHighLight';
24 | import Header from '../components/Header';
25 |
26 | export default class PieChartSamples extends React.Component {
27 | constructor(props) {
28 | super(props);
29 | this.state = {
30 | data: [[1, 10, 23, 'piston'], [1, 20, 34, 'rotary']],
31 | data2: [[1, 10, 23, 'piston']],
32 | timer: 0,
33 | };
34 |
35 | this.intervalId = null;
36 |
37 | this.metadata = {
38 | names: ['rpm', 'torque', 'horsepower', 'EngineType', 'weight'],
39 | types: ['linear', 'linear', 'linear', 'ordinal', 'linear'],
40 | };
41 |
42 | this.donutChartConfig = {
43 | charts: [{ type: 'arc', x: 'torque', color: 'EngineType', mode: 'donut' }],
44 | legendOrientation: 'top',
45 | };
46 |
47 | this.pieChartConfig = {
48 | charts: [{ type: 'arc', x: 'torque', color: 'EngineType', mode: 'pie' }],
49 | };
50 | this.semiPieChartConfig = {
51 | charts: [{ type: 'arc', x: 'torque', color: 'EngineType', mode: 'pie' }],
52 | startAngle: -90,
53 | endAngle: 90,
54 | };
55 |
56 | this.percentChartConfig = {
57 | charts: [{ type: 'arc', x: 'torque', color: 'EngineType', colorScale: ['#4DB6AC', '#E0E0E0'] }],
58 | percentage: true,
59 | width: 300,
60 | height: 300,
61 | };
62 | }
63 |
64 | componentDidMount() {
65 | this.intervalId = setInterval(() => {
66 | this.setState({
67 | data: [
68 | [this.state.timer, this.state.timer === 20 ? null : Math.random() * 100, 10, 'piston'],
69 | [this.state.timer, Math.random() * 100, 10, 'rotary'],
70 | [this.state.timer, this.state.timer === 20 ? null : Math.random() * 100, 10, 'piston2'],
71 | [this.state.timer, Math.random() * 100, 10, 'rotary2'],
72 | ],
73 | data2: [
74 |
75 | [this.state.timer, Math.random() * 100, Math.random() * 100, 'rotary'],
76 | ],
77 | timer: this.state.timer + 1,
78 | });
79 | }, 500);
80 | }
81 |
82 | componentWillUnmount() {
83 | clearInterval(this.intervalId);
84 | }
85 |
86 | render() {
87 | return (
88 |
84 |
87 |
88 |
89 | 97 |
98 | 89 | 97 |
103 |
106 |
107 |
108 | 116 |
117 | 108 | 116 |
122 |
125 |
126 |
127 | 135 |
136 | 127 | 135 |
142 | metadata :
143 |
148 |
149 | data : 150 | 155 |
156 | 149 | data : 150 | 155 |
157 |
162 |
205 | -
163 |
- type - Type of the chart in this case &qoute;map&qoute; 164 |
- x - Field containing Geographical data in metadata 165 |
-
166 | charts - Array of chart objects that needs to be visualized
167 |
-
168 |
-
169 | Chart Object
170 |
-
171 |
- type - type of the chart 172 |
- y - Data field that needs to be 173 | visualized on the Map. 174 |
- mapType - Type of the geography 175 | (world | europe | usa) 176 |
- colorScale - Array of colors in hex 177 | form that will be over-riding the default color set 178 |
180 |
182 | -
169 | Chart Object
170 |
-
183 | style - object containing style attributes of the chart.
184 |
-
185 |
- legendTitleColor - Color of the legend Title 186 | of the chart 187 |
- legendTextColor - Color of the legend text 188 | of the chart 189 |
191 | - 192 | chloropethRangeUpperBound - If the range of values is known, user 193 | can define the upper bound of values that will be used for the colorScale of the 194 | chloropeth map as an array. if only upper bound is given library will calculate 195 | the lower bound based on input data. 196 | 197 |
- 198 | chloropethRangeLowerBound - If the range of values is known, user 199 | can define the lower bound of values that will be used for the colorScale of the 200 | chloropeth map as an array. if only lower bound is given library will calculate 201 | the upper bound based on input data. 202 | 203 |
89 |
91 |
92 |
93 |
110 |
111 |
112 |
113 |
130 |
131 |
132 |
133 |
150 |
151 |
152 |
153 |
170 |
171 |
172 |
174 |
224 |
225 |
227 |
228 | );
229 | }
230 | }
231 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/samples/chart-docs/ScatterPlotSample.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) 2018, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3 | *
4 | * WSO2 Inc. licenses this file to you under the Apache License,
5 | * Version 2.0 (the "License"); you may not use this file except
6 | * in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing,
12 | * software distributed under the License is distributed on an
13 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14 | * KIND, either express or implied. See the License for the
15 | * specific language governing permissions and limitations
16 | * under the License.
17 | */
18 |
19 | import React from 'react';
20 | import { Grid } from 'material-ui';
21 | import ChartWrapper from '../ChartWrapper';
22 | import VizG from '../../src/VizG';
23 | import { syntaxHighlight } from './util/SyntaxHighLight';
24 | import Header from '../components/Header';
25 |
26 | /**
27 | * This class will render a page that contains samples on how to use Scatter plots.
28 | */
29 | export default class ScatterChartConfigSample extends React.Component {
30 |
31 | constructor(props) {
32 | super(props);
33 | this.state = {
34 | scatterPlot: [
35 | [1, 4, 3.5, 79.91, 0.8, 0.03, 'piston'],
36 | [2, 3, 3.5, 79.65, 1.3, 0.06, 'rotary']],
37 | timer: 0,
38 | };
39 |
40 | this.interval_id = null;
41 |
42 | this.metadata = {
43 | names: ['rpm', 'torque', 'horsepower', 'weight', 'EngineType'],
44 | types: ['linear', 'linear', 'linear', 'linear', 'ordinal'],
45 | };
46 |
47 | this.scatterPlotConfig = {
48 | type: 'scatter',
49 | charts: [
50 | {
51 | type: 'scatter',
52 | x: 'rpm',
53 | y: 'torque',
54 | color: 'horsepower',
55 | size: 'weight',
56 | maxLength: 30,
57 | colorScale: ['#1f77b4', '#ebff3b'],
58 |
59 | }],
60 | width: 800,
61 | height: 450,
62 | };
63 | }
64 |
65 | componentDidMount() {
66 | this.interval_id = setInterval(() => {
67 | this.setState({
68 | scatterPlot: [[this.state.timer, Math.random() * 100, Math.random() * 10, Math.random() * 100, 'piston'],
69 | [this.state.timer, Math.random() * 100, Math.random() * 10, Math.random() * 100, 'rotary']],
70 | timer: this.state.timer + 1,
71 | });
72 | }, 500);
73 | }
74 |
75 | componentWillUnmount() {
76 | clearInterval(this.interval_id);
77 | }
78 |
79 | render() {
80 | return (
81 |
94 |
97 |
98 |
99 | 107 |
108 |
109 | 99 | 107 |
114 |
117 |
118 |
119 | 127 |
128 |
129 | 119 | 127 |
134 |
137 |
138 |
139 | 147 |
148 |
149 | 139 | 147 |
154 |
157 |
158 |
159 | 167 |
168 |
169 | 159 | 167 |
175 | metadata :
176 |
184 | data:
185 |
193 |
194 |
223 | 194 |
JSON structure of Chart Configuration
195 |-
196 |
-
197 | charts - Array of chart objects that needs to be visualized.
198 |
-
199 |
- type - type of the chart.(&qoute;arc&qoute;) 200 |
- x - Data field that is used for the visualization 201 |
- color - Data field by which color 202 | categorization should be done. 203 |
- colorScale - - Array of colors in hex form 204 | that will be over-riding the default color set 205 |
- mode - Type of the chart ('donut' | 'pie') 206 |
208 | - append - Append dataset to the current dataset 209 |
- legendOrientation - Orientation of the legend relative to 210 | the chart. 211 |
- percentage - Show the data field as a Gauge and the Value 212 | as a percent 213 |
-
214 | style - Object containing style attributes related to the chart
215 |
-
216 |
- legendTextColor - Text color of the 217 | legend component 218 |
220 | - labelColor - Font color of percent chart 221 |
82 |
84 |
85 |
86 |
102 |
103 |
104 |
106 |
210 |
211 |
213 |
214 | );
215 | }
216 | }
217 |
--------------------------------------------------------------------------------
/src/components/BaseChart.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) 2018, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
3 | *
4 | * WSO2 Inc. licenses this file to you under the Apache License,
5 | * Version 2.0 (the "License"); you may not use this file except
6 | * in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing,
12 | * software distributed under the License is distributed on an
13 | * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14 | * KIND, either express or implied. See the License for the
15 | * specific language governing permissions and limitations
16 | * under the License.
17 | */
18 |
19 | import React from 'react';
20 | import _ from 'lodash';
21 | import PropTypes from 'prop-types';
22 | import VizGError from '../VizGError';
23 | import { getDefaultColorScale } from './helper';
24 |
25 | /**
26 | * Base Chart that contain most common methods that requires for the charts.
27 | */
28 | export default class BaseChart extends React.Component {
29 | /**
30 | * returns which x scale to be used for the current chart based on the metadata type.
31 | * @param {String} type - type defined in the metadata one of values 'linear', 'ordinal', or 'time'
32 | * @returns {string} type of the xScale that should be used in the chart.
33 | */
34 | static getXScale(type) {
35 | if (type.toLowerCase() === 'linear' || type.toLowerCase() === 'ordinal') return 'linear';
36 | else return 'time';
37 | }
38 |
39 | /**
40 | * returns a dataSet object that contains arrays not longer than maxLength provided
41 | * @param {Object} dataSets
42 | * @param {number} maxLength
43 | * @returns {*}
44 | */
45 | static trimDataSet(dataSets, maxLength) {
46 | _.keys(_.pickBy(dataSets, obj => obj.length > maxLength)).forEach((key) => {
47 | const lengthDiff = dataSets[key].length - maxLength;
48 | dataSets[key].splice(0, lengthDiff);
49 | });
50 |
51 | return dataSets;
52 | }
53 |
54 | /**
55 | * Generates an array of objects containing chart information that needed to be plotted.
56 | * @param {Array} charts - Charts array provided in the config.
57 | * @returns {Array} - Array of objects containing chart information that needed to be plotted
58 | */
59 | static generateChartArray(charts) {
60 | return charts.map((chart, chartIndex) => {
61 | return {
62 | type: chart.type,
63 | dataSetNames: {},
64 | mode: chart.mode,
65 | orientation: chart.orientation || 'bottom',
66 | color: Object.prototype.hasOwnProperty.call(chart, 'color'),
67 | colorCategoryName: chart.color || '',
68 | colorScale: Array.isArray(chart.colorScale) ? chart.colorScale : getDefaultColorScale(),
69 | colorDomain: chart.colorDomain || [],
70 | colorIndex: chartIndex,
71 | id: chartIndex,
72 | y: chart.y,
73 | x: chart.x,
74 | size: chart.size,
75 | };
76 | });
77 | }
78 |
79 | constructor(props) {
80 | super(props);
81 | this.state = {
82 | chartArray: [],
83 | dataSets: {},
84 | xScale: 'linear',
85 | ignoreArray: [],
86 | isOrdinal: false,
87 | stacked: false,
88 | xAxisRange: [null, null],
89 | xAxisType: 'linear',
90 | };
91 |
92 | this.chartConfig = this.props.config;
93 |
94 | this.sortDataBasedOnConfig = this.sortDataBasedOnConfig.bind(this);
95 | }
96 |
97 | componentDidMount() {
98 | this.sortDataBasedOnConfig(this.props);
99 | }
100 |
101 | componentWillReceiveProps(nextProps) {
102 | const { config } = nextProps;
103 |
104 | if (!this.chartConfig || !(_.isEqual(config, this.chartConfig)) || !this.props.append) {
105 | this.state.chartArray = [];
106 | this.state.dataSets = {};
107 | this.chartConfig = config;
108 | }
109 |
110 | this.sortDataBasedOnConfig(nextProps);
111 | }
112 |
113 | /**
114 | * Event handler for mouse events
115 | * @param evt - event associated with the interaction.
116 | * @returns {*}
117 | */
118 | handleMouseEvent(props) {
119 | const { onClick } = this.props;
120 | const data = {};
121 |
122 | data[this.chartConfig.x] = props.datum.x;
123 | data[props.datum.yName] = props.datum.y;
124 | data.colorCategory = props.datum.color;
125 |
126 | return onClick && onClick(data);
127 | }
128 |
129 | /**
130 | * Event handler for onClick events of names shown in the legend.
131 | * @param props
132 | */
133 | handleLegendInteraction(props) {
134 | const { ignoreArray } = this.state;
135 |
136 | const ignoreIndex = _.indexOf(ignoreArray, props.datum.name);
137 | if (ignoreIndex < 0) {
138 | ignoreArray.push(props.datum.name);
139 | } else {
140 | ignoreArray.splice(ignoreIndex, 1);
141 | }
142 |
143 | this.state.ignoreArray = ignoreArray;
144 |
145 | this.forceUpdate();
146 | }
147 |
148 | /**
149 | * Sort and set the state with data received from props.
150 | * @param props - props received by the component.
151 | */
152 | sortDataBasedOnConfig(props) {
153 | const { config, metadata, data } = props;
154 | let { chartArray, dataSets, xScale, isOrdinal, xAxisType } = this.state;
155 | // generate chart array from the config.
156 | if (chartArray.length === 0) chartArray = BaseChart.generateChartArray(config.charts);
157 |
158 | const xIndex = metadata.names.indexOf(config.x);
159 | if (_.keys(dataSets).length === 0) {
160 | if (!isOrdinal) isOrdinal = metadata.types[xIndex].toLowerCase() === 'ordinal';
161 | xScale = BaseChart.getXScale(metadata.types[xIndex]);
162 | xAxisType = metadata.types[xIndex];
163 | }
164 | if (xScale !== BaseChart.getXScale(metadata.types[xIndex])) {
165 | throw VizGError('BasicChart', "Provided metadata doesn't match the previous metadata.");
166 | }
167 |
168 | let dataSet = {};
169 |
170 | chartArray.forEach((chart) => {
171 | const yIndex = metadata.names.indexOf(chart.y);
172 | const colorIndex = metadata.names.indexOf(chart.colorCategoryName);
173 |
174 | if (xIndex < 0 || yIndex < 0) {
175 | throw new VizGError('BasicChart', 'Axis name not found in metadata');
176 | }
177 |
178 | if (chart.color) {
179 | if (colorIndex < 0) {
180 | throw new VizGError('BasicChart', 'Color category not found in metadata.');
181 | }
182 | dataSet = _.groupBy(data.map(
183 | datum => ({
184 | x: datum[xIndex] instanceof Date ? datum[xIndex].getTime() : datum[xIndex],
185 | y: datum[yIndex],
186 | color: datum[colorIndex],
187 | yName: metadata.names[yIndex],
188 | })), d => d.color);
189 |
190 | _.difference(_.keys(dataSet), _.keys(chart.dataSetNames)).forEach((key) => {
191 | const colorDomIn = _.indexOf(chart.colorDomain, key);
192 | if (chart.colorIndex >= chart.colorScale.length) {
193 | chart.colorIndex = 0;
194 | }
195 | if (colorDomIn < 0) {
196 | chart.dataSetNames[key] = chart.colorScale[chart.colorIndex++];
197 | } else if (colorDomIn > chart.colorScale.length) {
198 | chart.dataSetNames[key] = chart.colorScale[0];
199 | } else {
200 | chart.dataSetNames[key] = chart.colorScale[colorDomIn];
201 | }
202 | });
203 | } else {
204 | dataSet[chart.y] = data.map(datum => ({ x: datum[xIndex], y: datum[yIndex], yName: chart.y }));
205 | chart.dataSetNames[chart.y] = config.charts[chart.id].fill || chart.colorScale[chart.colorIndex];
206 | }
207 | });
208 |
209 | this.setState((prevState) => {
210 | prevState.chartArray.push(...(_.differenceWith(chartArray, prevState.chartArray, _.isEqual)));
211 | if (!isOrdinal) {
212 | _.mergeWith(prevState.dataSets, dataSet, (objValue, srcValue) => {
213 | if (_.isArray(objValue)) {
214 | return objValue.concat(srcValue);
215 | }
216 | });
217 | } else {
218 | _.keys(dataSet).forEach((key) => {
219 | prevState.dataSets[key] = prevState.dataSets[key] || [];
220 | dataSet[key].forEach((datum) => {
221 | const objIndex = _.findIndex(prevState.dataSets[key], obj => obj.x === datum.x);
222 | if (objIndex > -1) {
223 | prevState.dataSets[key][objIndex].y = datum.y;
224 | } else {
225 | prevState.dataSets[key].push(datum);
226 | }
227 | });
228 | });
229 | }
230 |
231 | _.keys(prevState.dataSets).forEach(key => _.sortBy(prevState.dataSets[key], o => o.x));
232 | if (config.maxLength) BaseChart.trimDataSet(prevState.dataSets, config.maxLength);
233 | prevState.isOrdinal = isOrdinal;
234 | prevState.xScale = xScale;
235 |
236 |
237 | if (!isOrdinal) {
238 | let range = [null, null];
239 |
240 | Object.keys(prevState.dataSets).forEach((key) => {
241 | let dataSetRange = [];
242 | dataSetRange[0] = _.minBy(prevState.dataSets[key], 'x');
243 | dataSetRange[1] = _.maxBy(prevState.dataSets[key], 'x');
244 |
245 | if (dataSetRange[0]) {
246 | dataSetRange[0] = dataSetRange[0].x;
247 | }
248 | if (dataSetRange[1]) {
249 | dataSetRange[1] = dataSetRange[1].x;
250 | }
251 | if (!range[0]) {
252 | range = dataSetRange;
253 | } else {
254 | if (dataSetRange[0] < range[0]) {
255 | range[0] = dataSetRange[0];
256 | }
257 |
258 | if (dataSetRange[1] > range[1]) {
259 | range[1] = dataSetRange[1];
260 | }
261 | }
262 | });
263 |
264 | prevState.xAxisRange = range;
265 | }
266 |
267 | prevState.xAxisType = xAxisType;
268 |
269 | return prevState;
270 | });
271 | }
272 |
273 | render() {
274 | return (
275 |
276 | );
277 | }
278 | }
279 |
280 | BaseChart.defaultProps = {
281 | width: 800,
282 | height: 400,
283 | onClick: null,
284 | yDomain: null,
285 | append: true,
286 | };
287 |
288 | BaseChart.propTypes = {
289 | width: PropTypes.number,
290 | height: PropTypes.number,
291 | onClick: PropTypes.func,
292 | config: PropTypes.shape({
293 | x: PropTypes.string,
294 | charts: PropTypes.arrayOf(PropTypes.shape({
295 | type: PropTypes.string.isRequired,
296 | y: PropTypes.string,
297 | fill: PropTypes.string,
298 | color: PropTypes.string,
299 | colorScale: PropTypes.arrayOf(PropTypes.string),
300 | colorDomain: PropTypes.arrayOf(PropTypes.string),
301 | mode: PropTypes.string,
302 | })),
303 | legendOrientation: PropTypes.string,
304 | style: {
305 | tickLabelColor: PropTypes.string,
306 | legendTitleColor: PropTypes.string,
307 | legendTextColor: PropTypes.string,
308 | axisColor: PropTypes.string,
309 | axisLabelColor: PropTypes.string,
310 | gridColor: PropTypes.string,
311 | xAxisTickAngle: PropTypes.number,
312 | yAxisTickAngle: PropTypes.number,
313 | },
314 | disableVerticalGrid: PropTypes.bool,
315 | disableHorizontalGrid: PropTypes.bool,
316 | xAxisLabel: PropTypes.string,
317 | yAxisLabel: PropTypes.string,
318 | yAxisTickCount: PropTypes.number,
319 | xAxisTickCount: PropTypes.number,
320 | height: PropTypes.number,
321 | width: PropTypes.number,
322 | maxLength: PropTypes.number,
323 | }).isRequired,
324 | yDomain: PropTypes.arrayOf(PropTypes.number),
325 | append: PropTypes.bool,
326 | };
327 |
--------------------------------------------------------------------------------
87 |
90 |
91 |
92 | 100 |
101 | 92 | 100 |
107 | metadata :
108 |
113 |
114 | data : 115 | 120 |
121 |
209 | 114 | data : 115 | 120 |
121 |
Chart JSON Structure
122 |-
123 |
- 124 | type - Type of the Chart in this case "scatter" 125 | 126 |
-
127 | charts - Array of chart objects to be visualized.
128 |
-
129 |
-
130 | Chart Object
131 |
-
132 |
- 133 | x - Data field representing x-axis 134 | in the metadata 135 | 136 |
- 137 | y - Data field representing y-axis 138 | in the metadata 139 | 140 |
- 141 | color - Data field representing color 142 | categorization data field of the metadata 143 | 144 |
- 145 | size - Data field representing size 146 | categorization data field of the metadata 147 | 148 |
- 149 | colorScale - Array of colors in hex 150 | form that will be over-riding the default color set 151 | 152 |
- 153 | colorDomain - If a certain color 154 | category needs to be plotted in a specific color. 155 | 156 |
158 | - .... 159 |
161 | -
130 | Chart Object
131 |
- 162 | maxLength - Max length of data points to be 163 | visualized in the chart at time 164 | 165 |
- 166 | legend - enable or disable legend (boolean) value. 167 | 168 |
- 169 | Append - Append the incoming data to the existing dataset or 170 | replace the existing dataset boolean value. 171 | 172 |
- 173 | timeFormat - If the x-axis is a time series using this attribute 174 | user can format the tick values of the x axis using regex. refer 175 | 176 | d3 documentation 177 | for more info 178 | 179 |
- 180 | tipTimeFormat - If the x-axis is a time series using this 181 | attribute user can format the tick values of the x axis using regex. refer 182 | 183 | d3 documentation 184 | for more info 185 | 186 |
- animate - animate chart visualizations 187 |
- disableVerticleGrid - Disable verticle grid of the chart 188 | (boolean value) 189 |
- disableHorizontalGrid - Disable horizontal grid of the chart 190 | (boolean value) 191 |
- yAxisLabel - Change the label shown along the y-axis 192 |
- xAxisLabel - Change the label shown along the x-axis 193 |
- yAxisTickCount - Number of ticks shown in the y-axis 194 |
- xAxisTickCount - Number of ticks shown in the x-axis 195 |
- legendOrientaion - Orientaion of the legend relative 196 | to the chart (top | bottom | left | right) 197 |
-
198 | style - object that contain style attributes of the charts.
199 |
-
200 |
- axisColor - color of the axis lines 201 |
- axisLabelColor - color of the axis labels 202 |
- xAxisTickAngle - Tick angle of the x-axis ticks 203 |
- yAxisTickAngle - Tick angle of the y-axis ticks 204 |
- tickLabelColor - font color of the tickLabels 205 |
207 |