From d0de1e38df69aa6a14cd5a0933394e3f532f7c40 Mon Sep 17 00:00:00 2001 From: Bret Marzolf Date: Thu, 26 Jan 2017 19:09:49 -0800 Subject: [PATCH] Fix #31 and add regions (#53) * Added ability to scale line chart independent of data and added chart regions feature --- circle.yml | 1 + example/src/App.js | 6 + example/src/Menu.js | 10 + .../src/smoothline/SmoothLineChartRegions.js | 253 ++++++++++++++++++ .../SmoothLineChartRegionsExtended.js | 251 +++++++++++++++++ package.json | 2 +- src/Line.js | 77 +++++- .../SmoothLine/SmoothLineBasic-test.js | 186 +++++++++++++ .../SmoothLine/SmoothLineRegions-test.js | 230 ++++++++++++++++ .../SmoothLineRegionsExtended-test.js | 228 ++++++++++++++++ .../SmoothLineBasic-test.js.snap | 74 +++++ .../SmoothLineRegions-test.js.snap | 212 +++++++++++++++ .../SmoothLineRegionsExtended-test.js.snap | 212 +++++++++++++++ src/util.js | 2 + 14 files changed, 1735 insertions(+), 9 deletions(-) create mode 100644 example/src/smoothline/SmoothLineChartRegions.js create mode 100644 example/src/smoothline/SmoothLineChartRegionsExtended.js create mode 100644 src/__tests__/SmoothLine/SmoothLineBasic-test.js create mode 100644 src/__tests__/SmoothLine/SmoothLineRegions-test.js create mode 100644 src/__tests__/SmoothLine/SmoothLineRegionsExtended-test.js create mode 100644 src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap create mode 100644 src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap create mode 100644 src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap diff --git a/circle.yml b/circle.yml index 67b3a00..acc5bc3 100644 --- a/circle.yml +++ b/circle.yml @@ -7,6 +7,7 @@ dependencies: - echo -e "$NPM_USER\n$NPM_PASS\n$NPM_EMAIL" | npm login - npm --version - node --version + - npm test -- --version test: override: diff --git a/example/src/App.js b/example/src/App.js index 10db445..72292a3 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -30,6 +30,8 @@ import StockLineChartStaticTickLabels from './stockline/StockLineChartStaticTick import StockLineChartDynamicTickLabels from './stockline/StockLineChartDynamicTickLabels' import SmoothLineChartBasic from './smoothline/SmoothLineChartBasic' +import SmoothLineChartRegions from './smoothline/SmoothLineChartRegions' +import SmoothLineChartRegionsExtended from './smoothline/SmoothLineChartRegionsExtended' import ScatterplotChartBasic from './scatterplot/ScatterplotChartBasic' @@ -88,6 +90,10 @@ class App extends Component { return case 'SmoothLineChartBasic': return + case 'SmoothLineChartRegions': + return + case 'SmoothLineChartRegionsExtended': + return case 'ScatterplotChartBasic': return case 'RadarChartBasic': diff --git a/example/src/Menu.js b/example/src/Menu.js index 63803d0..b5f7a3d 100644 --- a/example/src/Menu.js +++ b/example/src/Menu.js @@ -128,6 +128,16 @@ class Menu extends Component { style={styles.subitem}> Basic SmoothLine + this.props.onItemSelected('SmoothLineChartRegions')} + style={styles.subitem}> + SmoothLine w/Region Bands + + this.props.onItemSelected('SmoothLineChartRegionsExtended')} + style={styles.subitem}> + Extended SmoothLine w/Region Bands + {/*End SmoothLine Charts*/} diff --git a/example/src/smoothline/SmoothLineChartRegions.js b/example/src/smoothline/SmoothLineChartRegions.js new file mode 100644 index 0000000..659f51a --- /dev/null +++ b/example/src/smoothline/SmoothLineChartRegions.js @@ -0,0 +1,253 @@ +/* +Copyright 2016 Capital One Services, LLC + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and limitations under the License. +*/ + +'use strict' + +import React, { Component } from 'react'; +import { View, Text, Navigator } from 'react-native'; + +import { SmoothLine } from 'react-native-pathjs-charts' + +class SmoothLineChartRegions extends Component { + render() { + let data = [ + [{ + "x": -10, + "y": -1000 + }, { + "x": -9, + "y": -729 + }, { + "x": -8, + "y": -512 + }, { + "x": -7, + "y": -343 + }, { + "x": -6, + "y": -216 + }, { + "x": -5, + "y": -125 + }, { + "x": -4, + "y": -64 + }, { + "x": -3, + "y": -27 + }, { + "x": -2, + "y": -8 + }, { + "x": -1, + "y": -1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 8 + }, { + "x": 3, + "y": 27 + }, { + "x": 4, + "y": 64 + }, { + "x": 5, + "y": 125 + }, { + "x": 6, + "y": 216 + }, { + "x": 7, + "y": 343 + }, { + "x": 8, + "y": 512 + }, { + "x": 9, + "y": 729 + }, { + "x": 10, + "y": 1000 + }], + [{ + "x": -10, + "y": 100 + }, { + "x": -9, + "y": 81 + }, { + "x": -8, + "y": 64 + }, { + "x": -7, + "y": 49 + }, { + "x": -6, + "y": 36 + }, { + "x": -5, + "y": 25 + }, { + "x": -4, + "y": 16 + }, { + "x": -3, + "y": 9 + }, { + "x": -2, + "y": 4 + }, { + "x": -1, + "y": 1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 4 + }, { + "x": 3, + "y": 9 + }, { + "x": 4, + "y": 16 + }, { + "x": 5, + "y": 25 + }, { + "x": 6, + "y": 36 + }, { + "x": 7, + "y": 49 + }, { + "x": 8, + "y": 64 + }, { + "x": 9, + "y": 81 + }, { + "x": 10, + "y": 100 + }] + ] + + let regions = [{ + label: 'Level1', + from: 1, + to: 500, + fill: '#c81212' + }, { + label: 'Level2', + from: 500, + to: 1000, + fill: '#2d8023' + }, { + label: 'Level3', + labelOffset: { + left: 25, + top: 50, + }, + from: 1000, + to: 1500, + fill: '#6a2380' + }, { + label: 'Level4', + from: 1500, + to: 2000, + fill: '#807623' + }, { + label: 'Level-1', + from: -500, + to: -1, + fill: '#8fb9b3' + }, { + label: 'Level-2', + from: -1000, + to: -501, + fill: '#e2d7c3' + }] + + let regionStyling = { + labelOffset: { + left: 25, + top: 5, + }, + fillOpacity: 0.5 + } + + let options = { + width: 280, + height: 280, + color: '#2980B9', + margin: { + top: 20, + left: 45, + bottom: 25, + right: 20 + }, + animate: { + type: 'delayed', + duration: 200 + }, + axisX: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'bottom', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + }, + axisY: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'left', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + } + } + + return ( + + + + ) + } +} + +export default SmoothLineChartRegions; diff --git a/example/src/smoothline/SmoothLineChartRegionsExtended.js b/example/src/smoothline/SmoothLineChartRegionsExtended.js new file mode 100644 index 0000000..196b575 --- /dev/null +++ b/example/src/smoothline/SmoothLineChartRegionsExtended.js @@ -0,0 +1,251 @@ +/* +Copyright 2016 Capital One Services, LLC + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and limitations under the License. +*/ + +'use strict' + +import React, { Component } from 'react'; +import { View, Text, Navigator } from 'react-native'; + +import { SmoothLine } from 'react-native-pathjs-charts' + +class SmoothLineChartRegionsExtended extends Component { + render() { + let data = [ + [{ + "x": -10, + "y": -1000 + }, { + "x": -9, + "y": -729 + }, { + "x": -8, + "y": -512 + }, { + "x": -7, + "y": -343 + }, { + "x": -6, + "y": -216 + }, { + "x": -5, + "y": -125 + }, { + "x": -4, + "y": -64 + }, { + "x": -3, + "y": -27 + }, { + "x": -2, + "y": -8 + }, { + "x": -1, + "y": -1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 8 + }, { + "x": 3, + "y": 27 + }, { + "x": 4, + "y": 64 + }, { + "x": 5, + "y": 125 + }, { + "x": 6, + "y": 216 + }, { + "x": 7, + "y": 343 + }, { + "x": 8, + "y": 512 + }, { + "x": 9, + "y": 729 + }, { + "x": 10, + "y": 1000 + }], + [{ + "x": -10, + "y": 100 + }, { + "x": -9, + "y": 81 + }, { + "x": -8, + "y": 64 + }, { + "x": -7, + "y": 49 + }, { + "x": -6, + "y": 36 + }, { + "x": -5, + "y": 25 + }, { + "x": -4, + "y": 16 + }, { + "x": -3, + "y": 9 + }, { + "x": -2, + "y": 4 + }, { + "x": -1, + "y": 1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 4 + }, { + "x": 3, + "y": 9 + }, { + "x": 4, + "y": 16 + }, { + "x": 5, + "y": 25 + }, { + "x": 6, + "y": 36 + }, { + "x": 7, + "y": 49 + }, { + "x": 8, + "y": 64 + }, { + "x": 9, + "y": 81 + }, { + "x": 10, + "y": 100 + }] + ] + + let regions = [{ + label: 'Level1', + from: 1, + to: 500, + fill: '#c81212' + }, { + label: 'Level2', + from: 500, + to: 1000, + fill: '#2d8023' + }, { + label: 'Level3', + from: 1000, + to: 1500, + fill: '#6a2380' + }, { + label: 'Level4', + from: 1500, + to: 2000, + fill: '#807623' + }, { + label: 'Level-1', + from: -500, + to: -1, + fill: '#8fb9b3' + }, { + label: 'Level-2', + from: -1000, + to: -501, + fill: '#e2d7c3' + }] + + let regionStyling = { + labelOffset: { + left: 25, + top: 5, + }, + fillOpacity: 0.5 + } + + let options = { + width: 280, + height: 280, + color: '#2980B9', + margin: { + top: 20, + left: 45, + bottom: 25, + right: 20 + }, + animate: { + type: 'delayed', + duration: 200 + }, + axisX: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'bottom', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + }, + min: -1000, + max: 2000, + axisY: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'left', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + } + } + + return ( + + + + ) + } +} + +export default SmoothLineChartRegionsExtended; diff --git a/package.json b/package.json index 47442b1..6e9375c 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ ], "dependencies": { "lodash": "^4.12.0", - "paths-js": "^0.3.4", + "paths-js": "^0.4.5", "react-native-svg": "~4.4.1" }, "devDependencies": { diff --git a/src/Line.js b/src/Line.js index cd91a53..78d9230 100755 --- a/src/Line.js +++ b/src/Line.js @@ -15,8 +15,8 @@ See the License for the specific language governing permissions and limitations import React,{Component} from 'react' import {Text as ReactText} from 'react-native' -import Svg,{ G, Path } from 'react-native-svg' -import { Colors, Options, cyclic } from './util' +import Svg,{ G, Path, Rect, Text } from 'react-native-svg' +import { Colors, Options, cyclic, fontAdapt } from './util' import Axis from './Axis' import _ from 'lodash' @@ -27,7 +27,7 @@ export default class LineChart extends Component { this.chartType = chartType } - getMaxAndMin(chart, key,scale) { + getMaxAndMin(chart, key, scale, chartMin, chartMax) { let maxValue let minValue _.each(chart.curves, function (serie) { @@ -39,13 +39,16 @@ export default class LineChart extends Component { if (maxValue === undefined || max > maxValue) maxValue = max let min = _.min(values) if (minValue === undefined || min < minValue) minValue = min + + maxValue = chartMax > maxValue ? chartMax : maxValue + minValue = chartMin < minValue ? chartMin : minValue }) return { minValue: minValue, maxValue: maxValue, - min:scale(minValue), - max:scale(maxValue) + min: scale(minValue), + max: scale(maxValue) } } @@ -74,12 +77,14 @@ export default class LineChart extends Component { yaccessor: accessor(this.props.yKey), width: options.chartWidth, height: options.chartHeight, - closed: false + closed: false, + min: options.min, + max: options.max }) let chartArea = { x:this.getMaxAndMin(chart,this.props.xKey,chart.xscale), - y:this.getMaxAndMin(chart,this.props.yKey,chart.yscale), + y:this.getMaxAndMin(chart,this.props.yKey,chart.yscale,options.min,options.max), margin:options.margin } @@ -88,7 +93,7 @@ export default class LineChart extends Component { let lines = _.map(chart.curves, function (c, i) { return }.bind(this)) - let areas = null; + let areas = null if(showAreas){ areas = _.map(chart.curves, function (c, i) { @@ -96,8 +101,64 @@ export default class LineChart extends Component { }.bind(this)) } + let textStyle = fontAdapt(options.label) + let regions + if(this.props.regions != 'undefined') { + let styling = typeof(this.props.regionStyling) != 'undefined' ? + this.props.regionStyling : {} + let labelOffsetAllRegions = typeof(styling.labelOffset) != 'undefined' ? + styling.labelOffset : {} + + regions = _.map(this.props.regions, function (c, i) { + let x, y, height, width, y1, y2, labelX, labelY + + let labelOffset = typeof(c.labelOffset) != 'undefined' ? + c.labelOffset : {} + let labelOffsetLeft = typeof(labelOffsetAllRegions.left) != 'undefined' + ? (typeof(labelOffset.left) != 'undefined' + ? labelOffset.left : labelOffsetAllRegions.left) : 20 + let labelOffsetTop = typeof(labelOffsetAllRegions.top) != 'undefined' + ? (typeof(labelOffset.top) != 'undefined' + ? labelOffset.top : labelOffsetAllRegions.top) : 0 + let fillOpacity = typeof(styling.fillOpacity) != 'undefined' + ? (typeof(c.fillOpacity) != 'undefined' + ? c.fillOpacity : styling.fillOpacity) : 0.5 + + y1 = chart.yscale(c.from) + y2 = chart.yscale(c.to) + + x = 0 + y = y1 + height = (y2 - y1) + width = chartArea.x.max + + labelX = labelOffsetLeft + labelY = y2 + labelOffsetTop + + let regionLabel = typeof(c.label) != 'undefined' ? ( + { c.label } + ) : null + + return ( + + + {regionLabel} + + ) + }.bind(this)) + } + let returnValue = + { regions } { areas } { lines } diff --git a/src/__tests__/SmoothLine/SmoothLineBasic-test.js b/src/__tests__/SmoothLine/SmoothLineBasic-test.js new file mode 100644 index 0000000..2e021b7 --- /dev/null +++ b/src/__tests__/SmoothLine/SmoothLineBasic-test.js @@ -0,0 +1,186 @@ +import 'react-native' +import React from 'react' +import SmoothLine from '../../SmoothLine' +import renderer from 'react-test-renderer' + +let data = [ + [{ + "x": -10, + "y": -1000 + }, { + "x": -9, + "y": -729 + }, { + "x": -8, + "y": -512 + }, { + "x": -7, + "y": -343 + }, { + "x": -6, + "y": -216 + }, { + "x": -5, + "y": -125 + }, { + "x": -4, + "y": -64 + }, { + "x": -3, + "y": -27 + }, { + "x": -2, + "y": -8 + }, { + "x": -1, + "y": -1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 8 + }, { + "x": 3, + "y": 27 + }, { + "x": 4, + "y": 64 + }, { + "x": 5, + "y": 125 + }, { + "x": 6, + "y": 216 + }, { + "x": 7, + "y": 343 + }, { + "x": 8, + "y": 512 + }, { + "x": 9, + "y": 729 + }, { + "x": 10, + "y": 1000 + }], + [{ + "x": -10, + "y": 100 + }, { + "x": -9, + "y": 81 + }, { + "x": -8, + "y": 64 + }, { + "x": -7, + "y": 49 + }, { + "x": -6, + "y": 36 + }, { + "x": -5, + "y": 25 + }, { + "x": -4, + "y": 16 + }, { + "x": -3, + "y": 9 + }, { + "x": -2, + "y": 4 + }, { + "x": -1, + "y": 1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 4 + }, { + "x": 3, + "y": 9 + }, { + "x": 4, + "y": 16 + }, { + "x": 5, + "y": 25 + }, { + "x": 6, + "y": 36 + }, { + "x": 7, + "y": 49 + }, { + "x": 8, + "y": 64 + }, { + "x": 9, + "y": 81 + }, { + "x": 10, + "y": 100 + }] +] + +let options = { + width: 280, + height: 280, + color: '#2980B9', + margin: { + top: 20, + left: 45, + bottom: 25, + right: 20 + }, + animate: { + type: 'delayed', + duration: 200 + }, + axisX: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'bottom', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + }, + axisY: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'left', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + } +} + +it('renders an example chart correctly', () => { + let tree = renderer.create( + + ).toJSON() + expect(tree).toMatchSnapshot() +}) diff --git a/src/__tests__/SmoothLine/SmoothLineRegions-test.js b/src/__tests__/SmoothLine/SmoothLineRegions-test.js new file mode 100644 index 0000000..665d228 --- /dev/null +++ b/src/__tests__/SmoothLine/SmoothLineRegions-test.js @@ -0,0 +1,230 @@ +import 'react-native' +import React from 'react' +import SmoothLine from '../../SmoothLine' +import renderer from 'react-test-renderer' + +let data = [ + [{ + "x": -10, + "y": -1000 + }, { + "x": -9, + "y": -729 + }, { + "x": -8, + "y": -512 + }, { + "x": -7, + "y": -343 + }, { + "x": -6, + "y": -216 + }, { + "x": -5, + "y": -125 + }, { + "x": -4, + "y": -64 + }, { + "x": -3, + "y": -27 + }, { + "x": -2, + "y": -8 + }, { + "x": -1, + "y": -1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 8 + }, { + "x": 3, + "y": 27 + }, { + "x": 4, + "y": 64 + }, { + "x": 5, + "y": 125 + }, { + "x": 6, + "y": 216 + }, { + "x": 7, + "y": 343 + }, { + "x": 8, + "y": 512 + }, { + "x": 9, + "y": 729 + }, { + "x": 10, + "y": 1000 + }], + [{ + "x": -10, + "y": 100 + }, { + "x": -9, + "y": 81 + }, { + "x": -8, + "y": 64 + }, { + "x": -7, + "y": 49 + }, { + "x": -6, + "y": 36 + }, { + "x": -5, + "y": 25 + }, { + "x": -4, + "y": 16 + }, { + "x": -3, + "y": 9 + }, { + "x": -2, + "y": 4 + }, { + "x": -1, + "y": 1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 4 + }, { + "x": 3, + "y": 9 + }, { + "x": 4, + "y": 16 + }, { + "x": 5, + "y": 25 + }, { + "x": 6, + "y": 36 + }, { + "x": 7, + "y": 49 + }, { + "x": 8, + "y": 64 + }, { + "x": 9, + "y": 81 + }, { + "x": 10, + "y": 100 + }] +] + +let regions = [{ + label: 'Level1', + from: 1, + to: 500, + fill: '#c81212' +}, { + label: 'Level2', + from: 500, + to: 1000, + fill: '#2d8023' +}, { + label: 'Level3', + labelOffset: { + left: 25, + top: 50, + }, + from: 1000, + to: 1500, + fill: '#6a2380' +}, { + label: 'Level4', + from: 1500, + to: 2000, + fill: '#807623' +}, { + label: 'Level-1', + from: -500, + to: -1, + fill: '#8fb9b3' +}, { + label: 'Level-2', + from: -1000, + to: -501, + fill: '#e2d7c3' +}] + +let regionStyling = { + labelOffset: { + left: 25, + top: 5, + }, + fillOpacity: 0.5 +} + +let options = { + width: 280, + height: 280, + color: '#2980B9', + margin: { + top: 20, + left: 45, + bottom: 25, + right: 20 + }, + animate: { + type: 'delayed', + duration: 200 + }, + axisX: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'bottom', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + }, + axisY: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'left', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + } +} + +it('renders an example chart correctly', () => { + let tree = renderer.create( + + ).toJSON() + expect(tree).toMatchSnapshot() +}) diff --git a/src/__tests__/SmoothLine/SmoothLineRegionsExtended-test.js b/src/__tests__/SmoothLine/SmoothLineRegionsExtended-test.js new file mode 100644 index 0000000..fe0ec66 --- /dev/null +++ b/src/__tests__/SmoothLine/SmoothLineRegionsExtended-test.js @@ -0,0 +1,228 @@ +import 'react-native' +import React from 'react' +import SmoothLine from '../../SmoothLine' +import renderer from 'react-test-renderer' + +let data = [ + [{ + "x": -10, + "y": -1000 + }, { + "x": -9, + "y": -729 + }, { + "x": -8, + "y": -512 + }, { + "x": -7, + "y": -343 + }, { + "x": -6, + "y": -216 + }, { + "x": -5, + "y": -125 + }, { + "x": -4, + "y": -64 + }, { + "x": -3, + "y": -27 + }, { + "x": -2, + "y": -8 + }, { + "x": -1, + "y": -1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 8 + }, { + "x": 3, + "y": 27 + }, { + "x": 4, + "y": 64 + }, { + "x": 5, + "y": 125 + }, { + "x": 6, + "y": 216 + }, { + "x": 7, + "y": 343 + }, { + "x": 8, + "y": 512 + }, { + "x": 9, + "y": 729 + }, { + "x": 10, + "y": 1000 + }], + [{ + "x": -10, + "y": 100 + }, { + "x": -9, + "y": 81 + }, { + "x": -8, + "y": 64 + }, { + "x": -7, + "y": 49 + }, { + "x": -6, + "y": 36 + }, { + "x": -5, + "y": 25 + }, { + "x": -4, + "y": 16 + }, { + "x": -3, + "y": 9 + }, { + "x": -2, + "y": 4 + }, { + "x": -1, + "y": 1 + }, { + "x": 0, + "y": 0 + }, { + "x": 1, + "y": 1 + }, { + "x": 2, + "y": 4 + }, { + "x": 3, + "y": 9 + }, { + "x": 4, + "y": 16 + }, { + "x": 5, + "y": 25 + }, { + "x": 6, + "y": 36 + }, { + "x": 7, + "y": 49 + }, { + "x": 8, + "y": 64 + }, { + "x": 9, + "y": 81 + }, { + "x": 10, + "y": 100 + }] +] + +let regions = [{ + label: 'Level1', + from: 1, + to: 500, + fill: '#c81212' +}, { + label: 'Level2', + from: 500, + to: 1000, + fill: '#2d8023' +}, { + label: 'Level3', + from: 1000, + to: 1500, + fill: '#6a2380' +}, { + label: 'Level4', + from: 1500, + to: 2000, + fill: '#807623' +}, { + label: 'Level-1', + from: -500, + to: -1, + fill: '#8fb9b3' +}, { + label: 'Level-2', + from: -1000, + to: -501, + fill: '#e2d7c3' +}] + +let regionStyling = { + labelOffset: { + left: 25, + top: 5, + }, + fillOpacity: 0.5 +} + +let options = { + width: 280, + height: 280, + color: '#2980B9', + margin: { + top: 20, + left: 45, + bottom: 25, + right: 20 + }, + animate: { + type: 'delayed', + duration: 200 + }, + axisX: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'bottom', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + }, + min: -1000, + max: 2000, + axisY: { + showAxis: true, + showLines: true, + showLabels: true, + showTicks: true, + zeroAxis: false, + orient: 'left', + label: { + fontFamily: 'Arial', + fontSize: 14, + fontWeight: true, + fill: '#34495E' + } + } +} + +it('renders an example chart correctly', () => { + let tree = renderer.create( + + ).toJSON() + expect(tree).toMatchSnapshot() +}) diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap new file mode 100644 index 0000000..5f015d9 --- /dev/null +++ b/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap @@ -0,0 +1,74 @@ +exports[`test renders an example chart correctly 1`] = ` + + + + + + + + + + + + + + + + + + + + +`; diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap new file mode 100644 index 0000000..9fed1cf --- /dev/null +++ b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap @@ -0,0 +1,212 @@ +exports[`test renders an example chart correctly 1`] = ` + + + + + + Level1 + + + + + + Level2 + + + + + + Level3 + + + + + + Level4 + + + + + + Level-1 + + + + + + Level-2 + + + + + + + + + + + + + + + + + + + + +`; diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap new file mode 100644 index 0000000..5728c11 --- /dev/null +++ b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap @@ -0,0 +1,212 @@ +exports[`test renders an example chart correctly 1`] = ` + + + + + + Level1 + + + + + + Level2 + + + + + + Level3 + + + + + + Level4 + + + + + + Level-1 + + + + + + Level-2 + + + + + + + + + + + + + + + + + + + + +`; diff --git a/src/util.js b/src/util.js index 5aa1140..debfe02 100644 --- a/src/util.js +++ b/src/util.js @@ -114,6 +114,8 @@ export class Options { this.chartHeight = props.height || this.options.height || 400 this.width = this.chartWidth + (this.margin.right || 0) + (this.margin.left || 0) this.height = this.chartHeight + (this.margin.top || 0) + (this.margin.bottom || 0) + this.min = props.min || this.options.min + this.max = props.max || this.options.max } get legendPosition(){ return this.props.legendPosition || (this.props.options && this.props.options.legendPosition) || 'topLeft'} get axisX() {return this.props.axisX || (this.props.options && this.props.options.axisX) || {}}