feat: add notice to ledger chart description regarding date range inc…

…luded
mistakia · May 23, 2024 · b9ed9c5 · b9ed9c5
1 parent 3207440
commit b9ed9c5
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 0 deletions.
diff --git a/...ews/components/ledger-chart-addresses-with-balance/ledger-chart-addresses-with-balance.js b/...ews/components/ledger-chart-addresses-with-balance/ledger-chart-addresses-with-balance.js
@@ -9,6 +9,7 @@ import { CanvasRenderer } from 'echarts/renderers'
 
 import { download_csv, download_json } from '@core/utils'
 import { base_range_labels } from '@core/constants'
+import LedgerDescriptionNotice from '@components/ledger-description-notice'
 
 echarts.use([LineChart, TooltipComponent, GridComponent, CanvasRenderer])
 
@@ -150,6 +151,7 @@ export default function LedgerChartAddressesWithBalance({
             Nano.
           </p>
         </div>
+        <LedgerDescriptionNotice />
         {!isLoading && (
           <div className='ledger__chart-section-body download'>
             <Button size='small' onClick={handle_download_csv}>

diff --git a/src/views/components/ledger-chart-addresses/ledger-chart-addresses.js b/src/views/components/ledger-chart-addresses/ledger-chart-addresses.js
@@ -13,6 +13,7 @@ import Button from '@mui/material/Button'
 
 import { download_csv, download_json } from '@core/utils'
 import LedgerChartMetrics from '@components/ledger-chart-metrics'
+import LedgerDescriptionNotice from '@components/ledger-description-notice'
 
 echarts.use([
   TooltipComponent,
@@ -143,6 +144,7 @@ export default function LedgerChartAddresses({ data, isLoading }) {
             number of addresses created. Reused shows the number of addresses
             used that were created on a previous day.
           </p>
+          <LedgerDescriptionNotice />
         </div>
         {!isLoading && (
           <div className='ledger__chart-section-body download'>

diff --git a/src/views/components/ledger-chart-amounts/ledger-chart-amounts.js b/src/views/components/ledger-chart-amounts/ledger-chart-amounts.js
@@ -14,6 +14,7 @@ import Button from '@mui/material/Button'
 
 import { download_csv, download_json } from '@core/utils'
 import { base_ranges, base_range_labels } from '@core/constants'
+import LedgerDescriptionNotice from '@components/ledger-description-notice'
 
 echarts.use([
   TooltipComponent,
@@ -169,6 +170,7 @@ export default function LedgerChartAmounts({ data, isLoading }) {
             the block is in a given range (in Nano).
           </p>
         </div>
+        <LedgerDescriptionNotice />
         {!isLoading && (
           <div className='ledger__chart-section-body download'>
             <Button size='small' onClick={handle_download_csv}>

diff --git a/src/views/components/ledger-chart-blocks/ledger-chart-blocks.js b/src/views/components/ledger-chart-blocks/ledger-chart-blocks.js
@@ -12,6 +12,7 @@ import {
 import { CanvasRenderer } from 'echarts/renderers'
 
 import LedgerChartMetrics from '@components/ledger-chart-metrics'
+import LedgerDescriptionNotice from '@components/ledger-description-notice'
 import { download_csv, download_json } from '@core/utils'
 
 echarts.use([
@@ -159,6 +160,7 @@ export default function LedgerChartBlocks({ data, isLoading }) {
         <div className='ledger__chart-section-body description'>
           <p>The number of confirmed blocks (by type) per day.</p>
         </div>
+        <LedgerDescriptionNotice />
         {!isLoading && (
           <div className='ledger__chart-section-body download'>
             <Button size='small' onClick={handle_download_csv}>

diff --git a/src/views/components/ledger-chart-distribution/ledger-chart-distribution.js b/src/views/components/ledger-chart-distribution/ledger-chart-distribution.js
@@ -9,6 +9,7 @@ import { CanvasRenderer } from 'echarts/renderers'
 
 import { base_ranges, base_range_labels } from '@core/constants'
 import { download_csv, download_json } from '@core/utils'
+import LedgerDescriptionNotice from '@components/ledger-description-notice'
 
 echarts.use([LineChart, TooltipComponent, GridComponent, CanvasRenderer])
 
@@ -193,6 +194,7 @@ export default function LedgerChartDistribution({
             specific balance ranges.
           </p>
         </div>
+        <LedgerDescriptionNotice />
         {!isLoading && (
           <div className='ledger__chart-section-body download'>
             <Button size='small' onClick={handle_download_csv}>

diff --git a/src/views/components/ledger-chart-usd-transferred/ledger-chart-usd-transferred.js b/src/views/components/ledger-chart-usd-transferred/ledger-chart-usd-transferred.js
@@ -14,6 +14,7 @@ import Button from '@mui/material/Button'
 
 import LedgerChartMetrics from '@components/ledger-chart-metrics'
 import { download_csv, download_json, format_value } from '@core/utils'
+import LedgerDescriptionNotice from '@components/ledger-description-notice'
 
 echarts.use([
   TooltipComponent,
@@ -133,6 +134,7 @@ export default function LedgerUSDTransferred({ data, isLoading }) {
             Nano transferred that day.
           </p>
         </div>
+        <LedgerDescriptionNotice />
         {!isLoading && (
           <div className='ledger__chart-section-body download'>
             <Button size='small' onClick={handle_download_csv}>

diff --git a/src/views/components/ledger-chart-volume/ledger-chart-volume.js b/src/views/components/ledger-chart-volume/ledger-chart-volume.js
@@ -13,6 +13,7 @@ import { CanvasRenderer } from 'echarts/renderers'
 import Button from '@mui/material/Button'
 
 import LedgerChartMetrics from '@components/ledger-chart-metrics'
+import LedgerDescriptionNotice from '@components/ledger-description-notice'
 import { download_csv, download_json } from '@core/utils'
 
 echarts.use([
@@ -164,6 +165,7 @@ export default function LedgerChartVolume({ data, isLoading }) {
             changed per day.
           </p>
         </div>
+        <LedgerDescriptionNotice />
         {!isLoading && (
           <div className='ledger__chart-section-body download'>
             <Button size='small' onClick={handle_download_csv}>

diff --git a/src/views/components/ledger-description-notice/index.js b/src/views/components/ledger-description-notice/index.js
@@ -0,0 +1 @@
+export { default } from './ledger-description-notice'
diff --git a/src/views/components/ledger-description-notice/ledger-description-notice.js b/src/views/components/ledger-description-notice/ledger-description-notice.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import InfoIcon from '@mui/icons-material/Info'
+
+import './ledger-description-notice.styl'
+
+const timestamp = 1550832660
+
+export default function LedgerDescriptionNotice() {
+  const local_time = dayjs.unix(timestamp).format('YYYY-MM-DD HH:mm:ss')
+  return (
+    <div className='ledger-chart-description-notice'>
+      <InfoIcon />
+      <div className='ledger-chart-description-notice-text'>
+        Data displayed includes only blocks with a timestamp. Local timestamps
+        were first recorded:{' '}
+        <span className='ledger-chart-description-notice-local-time'>
+          {local_time}
+        </span>
+        . Data from blocks before this date are not included.
+      </div>
+    </div>
+  )
+}
diff --git a/src/views/components/ledger-description-notice/ledger-description-notice.styl b/src/views/components/ledger-description-notice/ledger-description-notice.styl
@@ -0,0 +1,20 @@
+.ledger-chart-description-notice 
+  border 1px solid lighten($nanoSoftBlue, 50%)
+  border-radius 5px
+  padding 10px
+  margin-bottom 10px
+  background-color lighten($nanoSoftBlue, 95%)
+  display flex
+  gap 10px
+
+  svg
+    width 20px
+    height 20px
+    color $nanoSoftBlue
+
+.ledger-chart-description-notice-local-time
+  font-family 'IBM Plex Mono', monospace
+  font-size 14px
+  background-color white
+  padding 2px 5px
+  border-radius 5px