Issue 315 - Add Chart Clamp To Settings Dropdown (#373)

* Add Chart Clamp To Settings Dropdown * Removed Unused Variable Merging as is and then we'll see about handling the redraw bug in the next sprint.
bitshares · Sep 14, 2017 · 4b5e84c · 4b5e84c
1 parent 42b5155
commit 4b5e84c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/web/app/assets/locales/locale-en.json b/web/app/assets/locales/locale-en.json
@@ -845,6 +845,7 @@
         "fib": "Draw Fibonacci retracement",
         "trendline": "Draw trend line",
         "volume": "Show volume chart",
+        "clamp_chart": "Clamp chart edge",
         "period": "Period",
         "height": "Chart height",
         "price_title": "Price indicators",

diff --git a/web/app/components/Exchange/Exchange.jsx b/web/app/components/Exchange/Exchange.jsx
@@ -855,6 +855,7 @@ class Exchange extends React.Component {
         let isNullAccount = currentAccount.get("id") === "1.2.3";
 
         const showVolumeChart = this.props.viewSettings.get("showVolumeChart", true);
+        const enableChartClamp = this.props.viewSettings.get("enableChartClamp", true);
 
         if (quoteAsset.size && baseAsset.size && currentAccount.size) {
             base = baseAsset;
@@ -1122,6 +1123,7 @@ class Exchange extends React.Component {
                                     zoom={this.state.currentPeriod}
                                     tools={tools}
                                     showVolumeChart={showVolumeChart}
+                                    enableChartClamp={enableChartClamp}
 
                                     buckets={buckets} bucketSize={bucketSize}
                                     currentPeriod={this.state.currentPeriod}
@@ -1145,6 +1147,7 @@ class Exchange extends React.Component {
                                     onChangeChartHeight={this.onChangeChartHeight.bind(this)}
                                     chartHeight={chartHeight}
                                     onToggleVolume={() => {SettingsActions.changeViewSetting({showVolumeChart: !showVolumeChart});}}
+                                    onToggleChartClamp={() => {SettingsActions.changeViewSetting({enableChartClamp: !enableChartClamp});}}
                                     onChangeIndicatorSetting={this._changeIndicatorSetting.bind(this)}
                                 />
                             </div>) : (

diff --git a/web/app/components/Exchange/PriceChartD3.jsx b/web/app/components/Exchange/PriceChartD3.jsx
@@ -209,7 +209,7 @@ class CandleStickChartWithZoomPan extends React.Component {
     }
 
     _renderCandleStickChart(chartMultiplier, maCalcs) {
-        const { height, width, showVolumeChart, indicators } = this.props;
+        const { height, width, showVolumeChart, indicators, enableChartClamp } = this.props;
         const { timeFormatter, volumeFormat, priceFormat, margin, enableTrendLine,
             enableFib, calculators } = this.state;
         const { positiveColor, negativeColor, axisLineColor, indicatorLineColor } = this._getThemeColors();
@@ -309,7 +309,7 @@ class CandleStickChartWithZoomPan extends React.Component {
 
     render() {
         const { width, priceData, height, ratio, theme, zoom,
-            indicators, showVolumeChart } = this.props;
+            indicators, showVolumeChart, enableChartClamp } = this.props;
         const { timeFormatter, enableFib, enableTrendLine, margin, calculators } = this.state;
         const themeColors = colors[theme];
         const { axisLineColor, indicatorLineColor} = themeColors;
@@ -343,6 +343,7 @@ class CandleStickChartWithZoomPan extends React.Component {
                 ratio={ratio} width={width - 20} height={height}
                 seriesName="PriceChart"
                 margin={margin}
+                clamp={enableChartClamp}
                 data={filteredData} calculator={calc}
                 xAccessor={d => d.date} xScaleProvider={discontinuousTimeScaleProvider}
                 xExtents={[filteredData[0].date, filteredData[filteredData.length - 1].date]}
@@ -417,7 +418,8 @@ export default class Wrapper extends React.Component {
             np.width !== this.props.width ||
             np.leftOrderBook !== this.props.leftOrderBook ||
             np.zoom !== this.props.zoom ||
-            np.showVolumeChart !== this.props.showVolumeChart
+            np.showVolumeChart !== this.props.showVolumeChart ||
+            np.enableChartClamp !== this.props.enableChartClamp
         );
     }
 
@@ -559,7 +561,7 @@ export default class Wrapper extends React.Component {
 		});
 
 		/* Tools dropdown */
-		const settingsOptions = ["volume", "height"].map(i => {
+		const settingsOptions = ["volume", "height", "clamp_chart"].map(i => {
 			let content;
 			switch (i) {
 				case "height": {
@@ -586,6 +588,16 @@ export default class Wrapper extends React.Component {
 					break;
 				}
 
+				case "clamp_chart": {
+					content = (
+						<li className="clickable indicator" key={i} onClick={this.props.onToggleChartClamp}>
+							<input type="checkbox" checked={this.props.enableChartClamp} />
+							<div><Translate content={`exchange.chart_options.${i}`} /></div>
+						</li>
+					);
+					break;
+				}
+
 				default:{
 					content = (
 						<li key={i}>

diff --git a/web/app/components/Exchange/PriceStat.jsx b/web/app/components/Exchange/PriceStat.jsx
@@ -6,7 +6,6 @@ import cnames from "classnames";
 import ReactTooltip from "react-tooltip";
 
 export default class PriceStat extends React.Component {
-
     constructor() {
         super();
         this.state = {