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 (
+
+ Main indicator{' '}
+
+
+
+
+
+
+ );
+};
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 ;
+ return ;
}
if (error) {
return
Error: {error.message}
; // Handle error appropriately
@@ -301,6 +339,11 @@ const CategoryCard = (props) => {
onLoaded={onLoaded}
/>
)}
+ {category.indicators.length > 0 && (
+
+
+
+ )}
);
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"