Merge d7c4c40 into 7fe899d

akvo/rsr/spa/app/components/LineChart.jsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import ReactECharts from 'echarts-for-react'
+import * as echarts from 'echarts'
+import moment from 'moment'
+
+const LineChart = ({
+  height = 400,
+  targetValue,
+  updates
+}) => {
+  const approves = updates?.filter((u) => u.status === 'A')
+  const values = approves.map((u) => u.value)
+  const dates = approves.map((u) => moment(u.lastModifiedAt, 'YYYY-MM-DD').format('DD-MM-YYYY'))
+
+  let seriesProps = {
+    data: values,
+    type: 'line',
+    connectNulls: true,
+    itemStyle: {
+      color: '#43998F'
+    },
+    areaStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: 'rgba(67,153,143,0.8)'
+        },
+        {
+          offset: 1,
+          color: 'rgba(67,153,143,0.3)'
+        }
+      ])
+    }
+  }
+
+  if (targetValue) {
+    seriesProps = {
+      ...seriesProps,
+      markLine: {
+        label: 'TARGET VALUE',
+        data: [
+          {
+            name: 'TARGET VALUE',
+            yAxis: targetValue,
+            lineStyle: {
+              normal: {
+                type: 'solid',
+                color: '#D57549'
+              }
+            },
+            label: {
+              color: '#D57549'
+            },
+            symbol: 'circle'
+          }
+        ],
+      },
+    }
+  }
+  const option = values.length
+    ? {
+      grid: {
+        left: '15%',
+        right: '12%',
+      },
+      tooltip: {
+        trigger: 'axis'
+      },
+      xAxis: {
+        type: 'category',
+        name: 'Time',
+        boundaryGap: false,
+        data: dates,
+        axisLabel: {
+          rotate: -90,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        name: 'Updates'
+      },
+      series: [seriesProps]
+    }
+    : {
+      title: {
+        subtext: '',
+        left: 'center',
+        top: '20px',
+        color: '#000',
+        fontSize: 12,
+        fontWeight: 'bold'
+      }
+    }
+  return (
+    <ReactECharts
+      option={option}
+      style={{ height: height - 50, width: '100%' }}
+    />
+  )
+}
+
+export default LineChart

akvo/rsr/spa/app/components/ProgressBar.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import classNames from 'classnames'
+import { Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { setNumberFormat } from '../utils/misc'
+
+import './ProgressBar.scss'
+
+const ProgressBar = ({ period, values, valueRef }) => {
+  const { t } = useTranslation()
+
+  const handleOnClick = (index) => () => {
+    valueRef.current.children[0].children[index].children[0].click()
+  }
+
+  const perc = period.targetValue > 0
+    ? Math.round((values.filter(it => it.status === 'A').reduce((a, v) => a + v.value, 0) / period.targetValue) * 100 * 10) / 10
+    : 0
+  const valuesTotal = values.filter(it => it.status !== 'P').reduce((acc, val) => acc + val.value, 0)
+  return (
+    <div id="progressBar">
+      <div className="labels">
+        <div className="value-label actual">
+          <div className="label">{t('Actual value')}</div>
+          <div className="value">{setNumberFormat(values.filter(it => it.status === 'A').reduce((acc, v) => acc + v.value, 0))}</div>
+        </div>
+        {period.targetValue > 0 && (
+          <div className="value-label target">
+            <div className="label">{t('Target value')}</div>
+            <div className="value-container">
+              <div className="value">{setNumberFormat(period.targetValue)}</div>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="bar">
+        {
+          values
+            .sort((a, b) => { if (b.status === 'D' && a.status !== 'D') return -1; return 0; })
+            .map((value, index) => {
+              let barProps = {
+                className: classNames('fill', {
+                  draft: value.status === 'D',
+                  pending: value.status === 'P'
+                }),
+                tabIndex: '-1',
+                style: {
+                  flex: period.targetValue > 0 ? value.value / period.targetValue : value.value / valuesTotal
+                }
+              }
+              if (valueRef) {
+                barProps = {
+                  ...barProps,
+                  onClick: handleOnClick(values.length - index - 1),
+                  role: 'button'
+                }
+              }
+              return (
+                <Tooltip title={String(value.value).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}>
+                  <div {...barProps}>
+                    {
+                      (
+                        (perc > 0) &&
+                        (value.status === 'A') &&
+                        (index === values.length - 1 || values[index + 1].status === 'D')
+                      ) && <span className={classNames('text-color', perc < 20 ? 'flip' : 'no-flip')}>{perc}%</span>
+                    }
+                  </div>
+                </Tooltip>
+              )
+            })
+        }
+      </div>
+    </div>
+  )
+}
+
+export default ProgressBar

akvo/rsr/spa/app/components/ProgressBar.scss

@@ -0,0 +1,83 @@
+@import "../utils/common.scss";
+#progressBar {
+  .labels {
+    display: flex;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    .value-label {
+      .value {
+        font-weight: 600;
+        font-size: 16px;
+      }
+      &.actual {
+        color: #59968e;
+      }
+      &.target {
+        margin-left: auto;
+        text-align: right;
+        color: #c87a53;
+      }
+    }
+  }
+  .bar {
+    height: 30px;
+    margin-top: 1px;
+    background-color: #e9e9e9;
+    display: flex;
+    position: relative;
+    line-height: 30px;
+    font-size: 15px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    overflow: hidden;
+    border-radius: 3px;
+    transition: all 0.2s ease-out;
+    &:hover {
+      .fill:not(:hover) {
+        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+        filter: grayscale(100%);
+      }
+    }
+    .fill {
+      cursor: pointer;
+      color: #fff;
+      text-align: right;
+      padding-right: 5px;
+      padding-left: 3px;
+      background-color: $primaryColor;
+      position: relative;
+      z-index: 2;
+      span {
+        position: absolute;
+        right: 5px;
+        line-height: 12px;
+        top: 8px;
+        white-space: nowrap;
+        &.flip {
+          right: -100px;
+          width: 100px;
+          text-align: left;
+          padding-left: 5px;
+          color: #59968e;
+        }
+        &.no-flip {
+          color: #fff !important;
+        }
+      }
+      &:not(:first-of-type) {
+        border-left: 1px solid rgba(255, 255, 255, 0.5);
+      }
+      &.draft {
+        opacity: 0.5;
+        padding: 0;
+      }
+      &.pending {
+        background-color: #e36e3d;
+      }
+    }
+    .target {
+      position: absolute;
+      right: 5px;
+    }
+  }
+}

akvo/rsr/spa/app/modules/results-overview/ResultOverview.scss

@@ -443,6 +443,24 @@
 .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
   top: 150% !important;
 }
+.periods {
+  .ant-collapse-item-active {
+    .ant-collapse-header {
+      border-bottom: 1px solid #d3d3d3 !important;
+    }
+    .ant-collapse-content {
+      padding: 0 16px;
+    }
+  }
+  .periodCard {
+    .ant-card-body {
+      padding: 24px 24px 0 16px !important;
+    }
+    .ant-card-grid {
+      padding: 8px !important;
+    }
+  }
+}
 @media screen and (max-width: 768px) {
   .inputs-container {
     flex-direction: column-reverse;