Functional statistics and charts

app/components/charts/BalanceChart.js → app/components/charts/BalanceChart.jsx

@@ -5,14 +5,19 @@ import {
   yAxisStyle,
   xAxisStyle,
   homeChartSize,
+  homeChartSizeSmall,
   padding,
   radiusTop,
   radiusBottom,
   hoverFill
 } from "./Styles";
 import ChartTooltip from "./ChartTooltip";
+import styles from "./Charts.module.css";
+import { useChart } from "./hooks";
 
 const BalanceChart = ({ data, intl }) => {
+  const { sidebarOnBottom } = useChart();
+  const chartSize = sidebarOnBottom ? homeChartSizeSmall : homeChartSize;
   const availableKey = intl.formatMessage(messages.availableKey);
   const lockedKey = intl.formatMessage(messages.lockedKey);
 
@@ -26,21 +31,21 @@ const BalanceChart = ({ data, intl }) => {
   return (
     <BarChart
       stackOffset="sign"
-      width={homeChartSize.width}
-      height={homeChartSize.height}
+      width={chartSize.width}
+      height={chartSize.height}
       data={displayData}>
       <XAxis
         tickLine={false}
         dataKey="name"
         style={yAxisStyle}
-        className="xAxis"
+        className={styles.xAxis}
       />
       <YAxis
         tickLine={false}
         orientation="right"
         style={xAxisStyle}
         padding={padding}
-        className="yAxis"
+        className={styles.yAxis}
       />
       <Tooltip cursor={hoverFill} content={<ChartTooltip />} />
       <Bar

app/components/charts/ChartTooltip.js → app/components/charts/ChartTooltip.jsx

@@ -1,9 +1,9 @@
 import { Balance } from "shared";
-import { balance } from "connectors";
-import "style/Chart.less";
+import styles from "./Charts.module.css";
+import { useChart } from "./hooks";
 
-const ChartLegend = (props) => {
-  const { payload, unitDivisor } = props;
+const ChartLegend = () => {
+  const { payload, unitDivisor } = useChart();
   if (
     !payload ||
     payload.length === 0 ||
@@ -17,22 +17,22 @@ const ChartLegend = (props) => {
   const rowLegend = payload[0].payload.legendName;
 
   return (
-    <div className="chart-tooltip">
-      <div className="row-legend">{rowLegend}</div>
+    <div className={styles.chartTooltip}>
+      <div className={styles.rowLegend}>{rowLegend}</div>
       {payload.map((entry, index) => (
-        <div key={`item-${index}`} className="tooltip-line">
+        <div key={`item-${index}`} className={styles.tooltipLine}>
           <div
-            className="circle-tooltip"
+            className={styles.circleTooltip}
             style={{ background: entry.fill }}></div>
           {entry.dataKey}:
           <Balance
             amount={entry.value * unitDivisor}
-            classNameWrapper="chart-tooltip-value"
+            classNameWrapper={styles.chartTooltipValue}
           />
         </div>
       ))}
     </div>
   );
 };
 
-export default balance(ChartLegend);
+export default ChartLegend;

app/components/charts/Charts.module.css

@@ -0,0 +1,111 @@
+.meteredTicksArea {
+  margin-left: 96px;
+  margin-bottom: 6px;
+  width: 100%;
+  float: left;
+}
+.meteredTicks {
+  float: left;
+  height: 13px;
+  width: 3px;
+  margin-right: 2px;
+  border-radius: 5px;
+}
+.meteredTicks.blueTick {
+  background-color: var(--input-color);
+}
+.meteredTicks.blackTick {
+  background-color: var(--input-color-default);
+}
+.meteredChartLegend {
+  margin-left: 109px;
+  margin-right: 13px;
+}
+.legendLabel {
+  font-size: 13px;
+  line-height: 19px;
+  color: var(--stroke-color-hovered);
+}
+.legendValue {
+  font-size: 13px;
+  line-height: 19px;
+  font-weight: 600;
+  color: var(--input-color-default);
+}
+.blueLegend {
+  float: left;
+}
+.blueLegend .legendLabel {
+  margin-right: 10px;
+  text-align: right;
+  width: 104px;
+  float: left;
+}
+.blueLegend .legendValue {
+  float: right;
+}
+.blackLegend {
+  float: right;
+}
+.blackLegend .legendLabel {
+  text-align: left;
+  float: right;
+  width: 96px;
+}
+.blackLegend .legendValue {
+  margin-right: 10px;
+  float: left;
+}
+
+.circleTooltip {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin: 6px;
+}
+.rowLegend {
+  padding-bottom: 10px;
+}
+.chartTooltip {
+  background-color: var(--background-container);
+  padding: 10px;
+  border-radius: 10px;
+}
+.chartTooltipValue {
+  display: inline-block;
+  margin-left: 0.2em;
+}
+.tooltipLine {
+  display: flex;
+  flex-direction: row;
+}
+.xAxis,
+.yAxis text {
+  fill: var(--chart-axis-text);
+}
+.xAxis,
+.yAxis line {
+  stroke: var(--chart-axis-stroke);
+}
+.recharts-tooltip-cursor {
+  fill: var(--chart-cursor-color);
+}
+@media screen and (max-width: 1179px) {
+  .meteredTicksArea {
+    margin-left: 60px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .meteredChartLegend {
+    margin: 0;
+  }
+  .meteredTicksArea {
+    margin-left: 0;
+  }
+  .blueLegend .legendLabel {
+    width: initial;
+  }
+  .blackLegend .legendLabel {
+    width: initial;
+  }
+}

app/components/charts/MeteredChart.jsx

@@ -0,0 +1,63 @@
+import { classNames } from "pi-ui";
+import styles from "./Charts.module.css";
+import { useChart } from "./hooks";
+
+const MeteredChart = ({
+  additive,
+  blueLabel,
+  blueValue,
+  blackLabel,
+  blackValue
+}) => {
+  const { sidebarOnBottom } = useChart();
+  const ticksCount = sidebarOnBottom ? 62 : 100;
+  const createTicks = (additive, blueValue, blackValue) => {
+    const ticks = [];
+    let blueTicks;
+    let blackTicks;
+    if (additive) {
+      blueTicks = (blueValue / (blueValue + blackValue)) * ticksCount;
+      blackTicks = ticksCount - blueTicks;
+    } else {
+      blueTicks = blueValue;
+      blackTicks = blackValue;
+    }
+    for (let i = 0; i < blueTicks; i++) {
+      ticks.push(
+        <div
+          key={"blue-ticks-" + i}
+          className={classNames(styles.meteredTicks, styles.blueTick)}
+        />
+      );
+    }
+    for (let j = 0; j < blackTicks; j++) {
+      ticks.push(
+        <div
+          key={"black-ticks-" + j}
+          className={classNames(styles.meteredTicks, styles.blackTick)}
+        />
+      );
+    }
+    return ticks;
+  };
+
+  return (
+    <>
+      <div className={styles.meteredTicksArea}>
+        {createTicks(additive, blueValue, blackValue)}
+      </div>
+      <div className={styles.meteredChartLegend}>
+        <div className={styles.blueLegend}>
+          <div className={styles.legendLabel}>{blueLabel}</div>
+          <div className={styles.legendValue}>{blueValue}</div>
+        </div>
+        <div className={styles.blackLegend}>
+          <div className={styles.legendValue}>{blackValue}</div>
+          <div className={styles.legendLabel}>{blackLabel}</div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MeteredChart;

app/components/charts/StakeRewardsChart.js → app/components/charts/StakeRewardsChart.jsx

@@ -5,12 +5,15 @@ import {
   yAxisStyle,
   xAxisStyle,
   myTicketsChartSize,
+  myTicketsChartSizeSmall,
   padding,
   radiusBottom,
   radiusTop,
   hoverFill
 } from "./Styles";
 import { FormattedMessage as T } from "react-intl";
+import styles from "./Charts.module.css";
+import { useChart } from "./hooks";
 
 const ChartTooltip = (props) => {
   const { payload } = props;
@@ -27,12 +30,12 @@ const ChartTooltip = (props) => {
   const rowLegend = payload[0].payload.legendName;
 
   return (
-    <div className="chart-tooltip">
-      <div className="row-legend">{rowLegend}</div>
+    <div className={styles.chartTooltip}>
+      <div className={styles.rowLegend}>{rowLegend}</div>
       {payload.map((entry, index) => (
-        <div key={`item-${index}`} className="tooltip-line">
+        <div key={`item-${index}`} className={styles.tooltipLine}>
           <div
-            className="circle-tooltip"
+            className={styles.circleTooltip}
             style={{ background: entry.fill }}></div>
           <T
             id="charts.tooltip.value"
@@ -49,6 +52,10 @@ const ChartTooltip = (props) => {
 };
 
 const VoteTimeChart = ({ data, intl }) => {
+  const { sidebarOnBottom } = useChart();
+  const chartSize = sidebarOnBottom
+    ? myTicketsChartSizeSmall
+    : myTicketsChartSize;
   const stakeRewardsKey = intl.formatMessage(messages.stakeRewards);
   const stakeFeesKey = intl.formatMessage(messages.stakeFees);
 
@@ -62,21 +69,21 @@ const VoteTimeChart = ({ data, intl }) => {
   return (
     <LineChart
       stackOffset="sign"
-      width={myTicketsChartSize.width}
-      height={myTicketsChartSize.height}
+      width={chartSize.width}
+      height={chartSize.height}
       data={displayData}>
       <XAxis
         tickLine={false}
         dataKey="name"
         style={yAxisStyle}
-        className="xAxis"
+        className={styles.xAxis}
       />
       <YAxis
         tickLine={false}
         orientation="right"
         style={xAxisStyle}
         padding={padding}
-        className="yAxis"
+        className={styles.yAxis}
       />
       <Tooltip cursor={hoverFill} content={<ChartTooltip />} />
       <Line