From 43921d70a6878343ac777b2a27b7cdcf5e5c4121 Mon Sep 17 00:00:00 2001
From: Tero Tikkanen <tero.tikkanen@gmail.com>
Date: Tue, 22 Oct 2024 12:34:34 +0300
Subject: [PATCH] Add main indicator with sparkline

---
 components/paths/CategoryCard.tsx             | 45 ++++++++++++++++++-
 .../contentblocks/CategoryTypeListBlock.tsx   |  4 ++
 package.json                                  |  1 +
 yarn.lock                                     | 13 ++++++
 4 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/components/paths/CategoryCard.tsx b/components/paths/CategoryCard.tsx
index 3d366cf2..df9ebec1 100644
--- a/components/paths/CategoryCard.tsx
+++ b/components/paths/CategoryCard.tsx
@@ -6,8 +6,14 @@ import ActionParameters from 'components/paths/ActionParameters';
 import { useTranslations } from 'next-intl';
 import { readableColor, transparentize } from 'polished';
 import ContentLoader from 'react-content-loader';
+import {
+  Sparklines,
+  SparklinesLine,
+  SparklinesReferenceLine,
+} from 'react-sparklines';
 import styled, { useTheme } from 'styled-components';
 
+import PopoverTip from '@/components/common/PopoverTip';
 import { activeGoalVar, yearRangeVar } from '@/context/paths/cache';
 import { GET_PATHS_ACTION } from '@/queries/paths/get-paths-actions';
 import {
@@ -74,6 +80,38 @@ const PathsContentLoader = (props) => {
   );
 };
 
+const IndicatorSparklineContainer = styled.div`
+  background-color: ${(props) => props.theme.themeColors.white};
+  padding: 0% ${(props) => props.theme.spaces.s100};
+  margin-bottom: ${(props) => props.theme.spaces.s100};
+  border-radius: 0.5rem;
+`;
+
+const IndicatorSparkline = (props) => {
+  const { indicator } = props;
+  const theme = useTheme();
+  return (
+    <IndicatorSparklineContainer>
+      Main indicator{' '}
+      <PopoverTip content={indicator.name} identifier={indicator.id} />
+      <Sparklines
+        data={[5, 10, 5, 20, 8, 15]}
+        limit={5}
+        width={100}
+        height={20}
+        margin={5}
+      >
+        <SparklinesLine
+          style={{ strokeWidth: 0.5, fill: 'none', stroke: theme.brandDark }}
+        />
+        <SparklinesReferenceLine
+          type="mean"
+          style={{ strokeWidth: 0.25, stroke: theme.graphColors.red050 }}
+        />
+      </Sparklines>
+    </IndicatorSparklineContainer>
+  );
+};
 const PathsBasicNodeContent = (props) => {
   const { categoryId, node, pathsInstance, onLoaded } = props;
   const yearRange = useReactiveVar(yearRangeVar);
@@ -107,7 +145,7 @@ const PathsBasicNodeContent = (props) => {
   }, [activeGoal, data, yearRange]);
 
   if (loading && !refetching) {
-    return <PathsContentLoader />;
+    return <PathsContentLoader style={{ marginBottom: '0.5rem' }} />;
   }
   if (error) {
     return <div>Error: {error.message}</div>; // Handle error appropriately
@@ -301,6 +339,11 @@ const CategoryCard = (props) => {
             onLoaded={onLoaded}
           />
         )}
+        {category.indicators.length > 0 && (
+          <CardContentBlock>
+            <IndicatorSparkline indicator={category.indicators[0]} />
+          </CardContentBlock>
+        )}
       </div>
     </Card>
   );
diff --git a/components/paths/contentblocks/CategoryTypeListBlock.tsx b/components/paths/contentblocks/CategoryTypeListBlock.tsx
index c95c3957..65438b4f 100644
--- a/components/paths/contentblocks/CategoryTypeListBlock.tsx
+++ b/components/paths/contentblocks/CategoryTypeListBlock.tsx
@@ -45,6 +45,10 @@ const GET_CATEGORIES_FOR_CATEGORY_TYPE_LIST = gql`
   query GetCategoriesForCategoryTypeList($plan: ID!, $categoryType: ID!) {
     planCategories(plan: $plan, categoryType: $categoryType) {
       ...CategoryRecursiveFragment
+      indicators {
+        id
+        name
+      }
     }
   }
   ${RECURSIVE_CATEGORY_FRAGMENT}
diff --git a/package.json b/package.json
index 25cbb2e3..4676687c 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "react-range": "^1.10.0",
     "react-select": "^5.4.0",
     "react-sizeme": "^3.0.2",
+    "react-sparklines": "^1.7.0",
     "reactstrap": "9.2.1",
     "sass": "^1.51.0",
     "styled-components": "^6.0.0",
diff --git a/yarn.lock b/yarn.lock
index b2066a7a..82ceddaf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16943,6 +16943,7 @@ __metadata:
     react-range: ^1.10.0
     react-select: ^5.4.0
     react-sizeme: ^3.0.2
+    react-sparklines: ^1.7.0
     reactstrap: 9.2.1
     regenerator-runtime: ^0.13.9
     sass: ^1.51.0
@@ -20579,6 +20580,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-sparklines@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "react-sparklines@npm:1.7.0"
+  dependencies:
+    prop-types: ^15.5.10
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: 9d2f701031e56e0c7b49e3b56479cd7bc1b651c029c2d525d2b480cf6ebcecbdb4dfe83053e7bcdecee1c490f3e5b4cecfa8b48301860b679778d6df7758e480
+  languageName: node
+  linkType: hard
+
 "react-style-singleton@npm:^2.2.1":
   version: 2.2.1
   resolution: "react-style-singleton@npm:2.2.1"