Merge pull request #535 from alexstotsky/fees-volume-sum-up

(feature) Selectable charts range values sum up
bitfinexcom · Aug 4, 2022 · e7922d5 · e7922d5
2 parents 8d3a1e4 + 2b8c049
commit e7922d5
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 24 deletions.
diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
@@ -472,6 +472,9 @@
       "canceled": "Canceled old Sync Watcher"
     }
   },
+  "sum_up_tooltip": {
+    "title": "Sum Up"
+  },
   "taxreport": {
     "title": "Tax Report",
     "sections": {

diff --git a/src/components/FeesReport/FeesReport.js b/src/components/FeesReport/FeesReport.js
@@ -6,9 +6,9 @@ import _isEqual from 'lodash/isEqual'
 
 import {
   SectionHeader,
-  SectionHeaderTitle,
   SectionHeaderRow,
   SectionHeaderItem,
+  SectionHeaderTitle,
   SectionHeaderItemLabel,
 } from 'ui/SectionHeader'
 import NoData from 'ui/NoData'
@@ -61,19 +61,19 @@ class FeesReport extends PureComponent {
 
   render() {
     const {
+      t,
       entries,
+      refresh,
       targetPairs,
-      params: { timeframe },
-      dataReceived,
       pageLoading,
-      refresh,
-      t,
+      dataReceived,
+      params: { timeframe },
     } = this.props
     const hasChanges = this.hasChanges()
 
     const { chartData, presentCurrencies } = parseChartData({
-      data: _sortBy(entries, ['mts']),
       timeframe,
+      data: _sortBy(entries, ['mts']),
     })
 
     let showContent
@@ -84,15 +84,21 @@ class FeesReport extends PureComponent {
     } else {
       showContent = (
         <Chart
+          isSumUpEnabled
           data={chartData}
           dataKeys={presentCurrencies}
         />
       )
     }
     return (
-      <Card elevation={Elevation.ZERO} className='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
+      <Card
+        elevation={Elevation.ZERO}
+        className='col-lg-12 col-md-12 col-sm-12 col-xs-12'
+      >
         <SectionHeader>
-          <SectionHeaderTitle>{t('feesreport.title')}</SectionHeaderTitle>
+          <SectionHeaderTitle>
+            {t('feesreport.title')}
+          </SectionHeaderTitle>
           <TimeRange className='section-header-time-range' />
           <SectionHeaderRow>
             <SectionHeaderItem>
@@ -114,7 +120,6 @@ class FeesReport extends PureComponent {
                 onChange={this.handleTimeframeChange}
               />
             </SectionHeaderItem>
-
             <QueryButton
               disabled={!hasChanges}
               onClick={this.handleQuery}

diff --git a/src/components/TradedVolume/TradedVolume.js b/src/components/TradedVolume/TradedVolume.js
@@ -61,19 +61,19 @@ class TradedVolume extends PureComponent {
 
   render() {
     const {
+      t,
+      refresh,
       entries,
       targetPairs,
-      params: { timeframe },
-      dataReceived,
       pageLoading,
-      refresh,
-      t,
+      dataReceived,
+      params: { timeframe },
     } = this.props
     const hasChanges = this.hasChanges()
 
     const { chartData, presentCurrencies } = parseChartData({
-      data: _sortBy(entries, ['mts']),
       timeframe,
+      data: _sortBy(entries, ['mts']),
     })
 
     let showContent
@@ -84,15 +84,21 @@ class TradedVolume extends PureComponent {
     } else {
       showContent = (
         <Chart
+          isSumUpEnabled
           data={chartData}
           dataKeys={presentCurrencies}
         />
       )
     }
     return (
-      <Card elevation={Elevation.ZERO} className='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
+      <Card
+        elevation={Elevation.ZERO}
+        className='col-lg-12 col-md-12 col-sm-12 col-xs-12'
+      >
         <SectionHeader>
-          <SectionHeaderTitle>{t('tradedvolume.title')}</SectionHeaderTitle>
+          <SectionHeaderTitle>
+            {t('tradedvolume.title')}
+          </SectionHeaderTitle>
           <TimeRange className='section-header-time-range' />
           <SectionHeaderRow>
             <SectionHeaderItem>
@@ -114,7 +120,6 @@ class TradedVolume extends PureComponent {
                 onChange={this.handleTimeframeChange}
               />
             </SectionHeaderItem>
-
             <QueryButton
               disabled={!hasChanges}
               onClick={this.handleQuery}

diff --git a/src/state/feesReport/saga.js b/src/state/feesReport/saga.js
@@ -64,6 +64,6 @@ function* fetchFeesReportFail({ payload }) {
 
 export default function* feesReportSaga() {
   yield takeLatest(types.FETCH_FEES_REPORT, fetchFeesReport)
-  yield takeLatest([types.REFRESH, types.CLEAR_PAIRS], refreshFeesReport)
+  yield takeLatest([types.REFRESH, types.SET_PARAMS, types.CLEAR_PAIRS], refreshFeesReport)
   yield takeLatest(types.FETCH_FAIL, fetchFeesReportFail)
 }
diff --git a/src/state/tradedVolume/saga.js b/src/state/tradedVolume/saga.js
@@ -64,6 +64,6 @@ function* fetchTradedVolumeFail({ payload }) {
 
 export default function* tradedVolumeSaga() {
   yield takeLatest(types.FETCH_TRADED_VOLUME, fetchTradedVolume)
-  yield takeLatest([types.REFRESH, types.CLEAR_SYMBOLS], refreshTradedVolume)
+  yield takeLatest([types.REFRESH, types.SET_PARAMS, types.CLEAR_SYMBOLS], refreshTradedVolume)
   yield takeLatest(types.FETCH_FAIL, fetchTradedVolumeFail)
 }
diff --git a/src/ui/Charts/Chart/Chart.js b/src/ui/Charts/Chart/Chart.js
@@ -9,10 +9,13 @@ import {
   Tooltip,
   AreaChart,
   CartesianGrid,
+  ReferenceArea,
   ResponsiveContainer,
 } from 'recharts'
+import _isEmpty from 'lodash/isEmpty'
 
-import { formatChartData } from '../Charts.helpers'
+import SumUpTooltip from './Chart.tooltip'
+import { formatChartData, getSumUpRangeValue } from '../Charts.helpers'
 import { propTypes, defaultProps } from './Chart.props'
 
 const COLORS = [
@@ -25,6 +28,9 @@ const COLORS = [
 class Chart extends React.PureComponent {
   state = {
     hiddenKeys: {},
+    showSum: false,
+    refAreaEnd: '',
+    refAreaStart: '',
   }
 
   getGradients = () => {
@@ -75,10 +81,47 @@ class Chart extends React.PureComponent {
     }))
   }
 
-  render() {
-    const { data, className } = this.props
+  onMouseDown = e => {
+    this.setState({
+      refAreaStart: e?.activeLabel ?? '',
+      refAreaEnd: e?.activeLabel ?? '',
+      showSum: true,
+    })
+  }
+
+  onMouseMove = e => {
+    const { refAreaStart } = this.state
+    if (refAreaStart) {
+      this.setState({
+        refAreaEnd: e?.activeLabel ?? '',
+      })
+    }
+  }
 
-    if (!data.length) {
+  onMouseUp = () => {
+    this.setState(() => ({
+      refAreaStart: '',
+      refAreaEnd: '',
+      showSum: false,
+    }))
+  }
+
+  render() {
+    const {
+      t,
+      data,
+      className,
+      isSumUpEnabled,
+    } = this.props
+    const {
+      showSum,
+      refAreaEnd,
+      refAreaStart,
+    } = this.state
+    const sumUpValue = getSumUpRangeValue(data, refAreaStart, refAreaEnd)
+    const shouldShowReferenceArea = isSumUpEnabled && refAreaStart && refAreaEnd
+
+    if (_isEmpty(data)) {
       return null
     }
 
@@ -89,6 +132,9 @@ class Chart extends React.PureComponent {
         <ResponsiveContainer aspect={4.0 / 1.8}>
           <AreaChart
             data={data}
+            onMouseUp={this.onMouseUp}
+            onMouseDown={isSumUpEnabled && this.onMouseDown}
+            onMouseMove={refAreaStart && this.onMouseMove}
           >
             <defs>
               {this.getGradients()}
@@ -105,6 +151,12 @@ class Chart extends React.PureComponent {
             <Tooltip
               isAnimationActive={false}
               formatter={formatChartData}
+              content={showSum && (
+                <SumUpTooltip
+                  t={t}
+                  sumUpValue={sumUpValue}
+                />
+              )}
             />
             <CartesianGrid
               stroke='#57636b'
@@ -117,6 +169,13 @@ class Chart extends React.PureComponent {
               wrapperStyle={{ paddingBottom: 15 }}
             />
             {this.getAreas()}
+            {shouldShowReferenceArea ? (
+              <ReferenceArea
+                x1={refAreaStart}
+                x2={refAreaEnd}
+                strokeOpacity={0.3}
+              />
+            ) : null}
           </AreaChart>
         </ResponsiveContainer>
       </div>

diff --git a/src/ui/Charts/Chart/Chart.props.js b/src/ui/Charts/Chart/Chart.props.js
@@ -4,6 +4,9 @@ export const propTypes = {
   data: PropTypes.array.isRequired,
   dataKeys: PropTypes.array.isRequired,
   t: PropTypes.func.isRequired,
+  isSumUpEnabled: PropTypes.bool,
 }
 
-export const defaultProps = {}
+export const defaultProps = {
+  isSumUpEnabled: false,
+}
diff --git a/src/ui/Charts/Chart/Chart.tooltip.js b/src/ui/Charts/Chart/Chart.tooltip.js
@@ -0,0 +1,30 @@
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+
+const SumUpTooltip = ({
+  t,
+  active,
+  sumUpValue,
+}) => {
+  if (active && sumUpValue) {
+    return (
+      <div className='custom-tooltip'>
+        <p className='title'>{t('sum_up_tooltip.title')}</p>
+        <p className='label'>{`USD : ${sumUpValue}`}</p>
+      </div>
+    )
+  }
+  return null
+}
+
+SumUpTooltip.propTypes = {
+  t: PropTypes.func.isRequired,
+  sumUpValue: PropTypes.string,
+  active: PropTypes.bool.isRequired,
+}
+
+SumUpTooltip.defaultProps = {
+  sumUpValue: null,
+}
+
+export default memo(SumUpTooltip)
diff --git a/src/ui/Charts/Chart/_Chart.scss b/src/ui/Charts/Chart/_Chart.scss
@@ -9,6 +9,10 @@
       margin: 0 auto;
     }
 
+    &-cartesian-axis {
+      user-select: none;
+    }
+
     &-default-legend {
       margin-left: 67px !important;
     }
@@ -20,6 +24,24 @@
     }
 
     &-tooltip {
+      &-wrapper {
+        .custom-tooltip {
+          color: #000;
+          padding: 11px 10px;
+          background-color: #fff;
+          border: 1px solid #d3d3d3;
+
+          .title{
+            margin-bottom: 3px;
+          }
+
+          .label {
+            margin-bottom: 3px;
+            color: var(--buttonBg);
+          }
+        }
+      }
+
       &-cursor {
         fill: white;
         opacity: 0.05;

diff --git a/src/ui/Charts/Charts.helpers.js b/src/ui/Charts/Charts.helpers.js
@@ -1,6 +1,9 @@
 import moment from 'moment-timezone'
+import _sumBy from 'lodash/sumBy'
+import _slice from 'lodash/slice'
 import _reduce from 'lodash/reduce'
 import _values from 'lodash/values'
+import _findIndex from 'lodash/findIndex'
 
 import timeframeConstants from 'ui/TimeFrameSelector/constants'
 
@@ -108,4 +111,13 @@ export const mergeSimilarTrades = (trades) => _values(
 // Formatting: 1000000 ---> 1,000,000
 export const formatChartData = value => new Intl.NumberFormat('en').format(value)
 
+export const getSumUpRangeValue = (data, start, end) => {
+  const rangeStart = _findIndex(data, entry => entry?.name === start)
+  const rangeEnd = _findIndex(data, entry => entry?.name === end)
+  const dataRange = [rangeStart, rangeEnd].sort((a, b) => a - b)
+  return formatChartData(_sumBy(
+    _slice(data, dataRange[0], dataRange[1] + 1), 'USD',
+  ).toFixed(2))
+}
+
 export default parseChartData