Skip to content

Commit

Permalink
Add main indicator with sparkline
Browse files Browse the repository at this point in the history
  • Loading branch information
terotik committed Oct 22, 2024
1 parent 91ebb73 commit 43921d7
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 1 deletion.
45 changes: 44 additions & 1 deletion components/paths/CategoryCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -301,6 +339,11 @@ const CategoryCard = (props) => {
onLoaded={onLoaded}
/>
)}
{category.indicators.length > 0 && (
<CardContentBlock>
<IndicatorSparkline indicator={category.indicators[0]} />
</CardContentBlock>
)}
</div>
</Card>
);
Expand Down
4 changes: 4 additions & 0 deletions components/paths/contentblocks/CategoryTypeListBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
13 changes: 13 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 43921d7

Please sign in to comment.