Improve categorycard sparklines

kausaltech · Nov 21, 2024 · 582fdd4 · 582fdd4
1 parent 13a8f29
commit 582fdd4
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 20 deletions.
diff --git a/components/paths/CategoryCard.tsx b/components/paths/CategoryCard.tsx
@@ -36,6 +36,8 @@ const GroupIdentifierHeader = styled.div<{
 `;
 
 const Card = styled.div`
+  display: flex;
+  flex-direction: column;
   width: 100%;
   transition: all 0.5s ease;
   overflow: hidden;
@@ -55,6 +57,7 @@ const CardContentBlock = styled.div<{ $disabled?: boolean }>`
 const CardContent = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   height: 100%;
 `;
 
@@ -96,7 +99,7 @@ const ParametersWrapper = styled.div`
 `;
 
 const CardGoalBlock = styled.div`
-  margin: ${({ theme }) => `0 ${theme.spaces.s100} ${theme.spaces.s100}`};
+  margin: ${({ theme }) => `0 0 ${theme.spaces.s100}`};
   line-height: ${(props) => props.theme.lineHeightMd};
   font-size: ${(props) => props.theme.fontSizeBase};
 
@@ -452,13 +455,6 @@ const CategoryCard = (props: CategoryCardProps) => {
             <CardContentBlock>{category.leadParagraph}</CardContentBlock>
           )}
         </CardHeaderBlock>
-        {mainGoalValue && (
-          <CardGoalBlock>
-            <p>
-              <strong>{mainGoalLabel}:</strong> {flattenedMainGoalValue}
-            </p>
-          </CardGoalBlock>
-        )}
         <CardDataBlock>
           {category.kausalPathsNodeUuid && pathsInstance && (
             <PathsNodeContent
@@ -468,11 +464,18 @@ const CategoryCard = (props: CategoryCardProps) => {
               onLoaded={onLoaded}
             />
           )}
-          {category.indicators?.length > 0 && (
-            <CardContentBlock>
+          <CardContentBlock>
+            {mainGoalValue && (
+              <CardGoalBlock>
+                <p>
+                  <strong>{mainGoalLabel}:</strong> {flattenedMainGoalValue}
+                </p>
+              </CardGoalBlock>
+            )}
+            {category.indicators?.length > 0 && (
               <IndicatorSparkline indicatorId={category.indicators[0].id} />
-            </CardContentBlock>
-          )}
+            )}
+          </CardContentBlock>
         </CardDataBlock>
       </CardContent>
     </Card>

diff --git a/components/paths/graphs/IndicatorSparkline.tsx b/components/paths/graphs/IndicatorSparkline.tsx
@@ -16,11 +16,16 @@ import { useQuery } from '@apollo/client';
 
 const IndicatorSparklineContainer = styled.div`
   background-color: ${(props) => props.theme.themeColors.white};
-  padding: 0% ${(props) => props.theme.spaces.s100};
+  padding: ${({ theme }) => `0 ${theme.spaces.s100} ${theme.spaces.s100}`};
   margin-bottom: ${(props) => props.theme.spaces.s100};
   border-radius: 0.5rem;
 `;
 
+const SparkLineHeader = styled.div`
+  font-size: ${(props) => props.theme.fontSizeSm};
+  margin-bottom: ${(props) => props.theme.spaces.s050};
+`;
+
 type IndicatorSparklineProps = {
   indicatorId: string;
 };
@@ -94,12 +99,55 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
   const option: ECOption = {
     dataset: dataset,
     xAxis: {
-      show: false,
+      show: true,
       type: 'category',
+      axisLabel: {
+        show: true,
+        showMinLabel: true,
+        showMaxLabel: true,
+        hideOverlap: true,
+        formatter: function (value: string) {
+          return new Date(value).getFullYear();
+        },
+        fontSize: 10,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
     },
     yAxis: {
-      show: false,
+      show: true,
       type: 'value',
+      position: 'left',
+      axisLabel: {
+        show: true,
+        showMinLabel: true,
+        showMaxLabel: true,
+        hideOverlap: true,
+        inside: false,
+        fontSize: 10,
+        formatter: function (value: number) {
+          return value.toLocaleString();
+        },
+        margin: 5,
+        align: 'right',
+      },
+      splitLine: {
+        show: false,
+      },
+      axisTick: {
+        show: true,
+        inside: false,
+        length: 3,
+      },
+      axisLine: {
+        show: false,
+      },
+      interval: 'auto',
+      scale: true,
     },
     series: [
       {
@@ -135,10 +183,10 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
       },
     ],
     grid: {
-      left: '5%',
+      left: '10%',
       right: '5%',
       top: '10%',
-      bottom: '10%',
+      bottom: '15%',
     },
     tooltip: {
       trigger: 'axis',
@@ -161,9 +209,12 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
 
   return (
     <IndicatorSparklineContainer>
-      Main indicator{' '}
-      <PopoverTip content={indicator.name} identifier={indicator.id} />
-      <Chart data={option} isLoading={false} />
+      <SparkLineHeader>
+        {indicator.unit.shortName || indicator.unit.name}{' '}
+        <PopoverTip content={indicator.name} identifier={indicator.id} />
+      </SparkLineHeader>
+
+      <Chart data={option} isLoading={false} height="110px" />
     </IndicatorSparklineContainer>
   );
 };