Sparkline fixes

components/paths/graphs/IndicatorSparkline.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
 import type { DatasetComponentOption } from 'echarts/components';
+import { useTranslations } from 'next-intl';
 import styled, { useTheme } from 'styled-components';
 
 import {
   IndicatorGoal,
   IndicatorGraphDataQuery,
   IndicatorValue,
 } from '@/common/__generated__/graphql';
+import Icon from '@/components/common/Icon';
 import PopoverTip from '@/components/common/PopoverTip';
 import Unit from '@/components/indicators/Unit';
 import Chart, { ECOption } from '@/components/paths/graphs/Chart';
@@ -17,23 +19,35 @@ import { useQuery } from '@apollo/client';
 
 const IndicatorSparklineContainer = styled.div`
   background-color: ${(props) => props.theme.themeColors.white};
-  padding: ${({ theme }) => `0 ${theme.spaces.s100} ${theme.spaces.s100}`};
+  padding: ${({ theme }) =>
+    `${theme.spaces.s050} ${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};
 `;
 
+const TrendIconWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.05rem;
+  height: 1.05rem;
+  background-color: ${(props) => props.theme.graphColors.green030};
+  margin-right: ${(props) => props.theme.spaces.s050};
+  border-radius: 50%;
+`;
+
 type IndicatorSparklineProps = {
   indicatorId: string;
 };
 
 const IndicatorSparkline = (props: IndicatorSparklineProps) => {
   const { indicatorId } = props;
   const theme = useTheme();
+  const t = useTranslations();
   const plan = usePlan();
   const { loading, error, data } = useQuery<IndicatorGraphDataQuery>(
     GET_INDICATOR_GRAPH_DATA,
@@ -48,9 +62,12 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :(</p>;
   const indicator = data?.indicator;
-  //console.log('Indicator for sparkline', indicator);
+  console.log('Indicator for sparkline', indicator);
 
   if (!indicator) return null;
+
+  const { maxValue, minValue, desiredTrend } = indicator;
+
   const indicatorGoals:
     | Array<IndicatorGoal | null | undefined>
     | null
@@ -70,7 +87,14 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
   }
   const combinedData: CombinedData = {};
 
-  [...indicatorValues, ...indicatorGoals].forEach((item) => {
+  const items = [...(indicatorValues || []), ...(indicatorGoals || [])] as (
+    | IndicatorValue
+    | IndicatorGoal
+    | null
+    | undefined
+  )[];
+  items.forEach((item) => {
+    if (!item) return;
     const date = item.date as string;
     if (!(date in combinedData)) {
       combinedData[date] = {};
@@ -101,14 +125,14 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
     dataset: dataset,
     xAxis: {
       show: true,
-      type: 'category',
+      type: 'time',
       axisLabel: {
         show: true,
         showMinLabel: true,
         showMaxLabel: true,
         hideOverlap: true,
-        formatter: function (value: string) {
-          return new Date(value).getFullYear();
+        formatter: function (value: number) {
+          return new Date(value).getFullYear().toString();
         },
         fontSize: 10,
       },
@@ -123,6 +147,8 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
       show: true,
       type: 'value',
       position: 'left',
+      max: maxValue === null ? 'dataMax' : maxValue,
+      min: minValue ?? 'dataMin',
       axisLabel: {
         show: true,
         showMinLabel: true,
@@ -133,7 +159,7 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
         formatter: function (value: number) {
           return value.toLocaleString();
         },
-        margin: 5,
+        margin: 12,
         align: 'right',
       },
       splitLine: {
@@ -142,59 +168,66 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
       axisTick: {
         show: true,
         inside: false,
-        length: 3,
+        length: 6,
       },
       axisLine: {
         show: false,
       },
       interval: 'auto',
-      scale: true,
+      scale: maxValue === null && minValue === null,
     },
     series: [
       {
-        name: 'Value',
+        name: t('target'),
         type: 'line',
         encode: {
           x: 'date',
-          y: 'value',
+          y: 'goal',
         },
         showSymbol: true,
+        symbol: 'circle',
+        symbolSize: 10,
+        itemStyle: {
+          color: theme.graphColors.green030,
+        },
         lineStyle: {
-          color: '#5470c6',
+          color: theme.graphColors.green030,
+          type: 'dashed',
+          width: 2,
         },
+        connectNulls: true,
+        z: 1,
       },
       {
-        name: 'Goal',
+        name: t('plot-total'),
         type: 'line',
         encode: {
           x: 'date',
-          y: 'goal',
+          y: 'value',
         },
         showSymbol: true,
-        symbol: 'diamond',
-        symbolSize: 10,
-        itemStyle: {
-          color: 'rgba(145, 204, 117, 255)', // Faint green color for 'x' symbols
-        },
+        symbol: 'circle',
+        symbolSize: 6,
         lineStyle: {
-          color: 'rgba(145, 204, 117, 0.2)', // Very faint green color for the line
-          type: 'dashed',
-          width: 1,
+          color: theme.graphColors.blue050,
+          width: 2,
         },
+        z: 2,
       },
     ],
     grid: {
-      left: '10%',
-      right: '5%',
-      top: '10%',
-      bottom: '15%',
+      left: 15,
+      right: 15,
+      top: 10,
+      bottom: 5,
+      containLabel: true,
     },
     tooltip: {
       trigger: 'axis',
       formatter: function (params) {
         const date = params[0].value.date;
         const year = new Date(date).getFullYear();
-        let result = `Year: ${year}<br/>`;
+        let result = `${t('table-year')}: ${year}<br/>`;
         params.forEach((param) => {
           const value = param.value[param.dimensionNames[param.encode.y]];
           if (value !== null) {
@@ -211,6 +244,13 @@ const IndicatorSparkline = (props: IndicatorSparklineProps) => {
   return (
     <IndicatorSparklineContainer>
       <SparkLineHeader>
+        {desiredTrend && (
+          <TrendIconWrapper>
+            <Icon
+              name={desiredTrend === 'INCREASING' ? 'arrow-up' : 'arrow-down'}
+            />
+          </TrendIconWrapper>
+        )}
         <Unit unit={indicator.unit} />{' '}
         <PopoverTip content={indicator.name} identifier={indicator.id} />
       </SparkLineHeader>