dash last line for line chart

apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx

@@ -10,6 +10,7 @@ import { useChartContext } from './ChartProvider';
 
 type ReportLineChartTooltipProps = IToolTipProps<{
   value: number;
+  name: string;
   dataKey: string;
   payload: Record<string, unknown>;
 }>;
@@ -34,6 +35,7 @@ export function ReportChartTooltip({
   const sorted = payload
     .slice(0)
     .filter((item) => !item.dataKey.includes(':prev:count'))
+    .filter((item) => !item.name.includes(':noTooltip'))
     .sort((a, b) => b.value - a.value);
   const visible = sorted.slice(0, limit);
   const hidden = sorted.slice(limit);

apps/dashboard/src/components/report/chart/ReportLineChart.tsx

@@ -7,6 +7,7 @@ import { useRechartDataModel } from '@/hooks/useRechartDataModel';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
 import type { IChartData } from '@/trpc/client';
 import { getChartColor } from '@/utils/theme';
+import { SplineIcon } from 'lucide-react';
 import {
   CartesianGrid,
   Legend,
@@ -34,6 +35,34 @@ interface ReportLineChartProps {
   lineType: IChartLineType;
 }
 
+function CustomLegend(props: {
+  payload?: { value: string; payload: { fill: string } }[];
+}) {
+  if (!props.payload) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap justify-center gap-x-4 gap-y-1">
+      {props.payload
+        .filter((entry) => !entry.value.includes('noTooltip'))
+        .filter((entry) => !entry.value.includes(':prev'))
+        .map((entry) => (
+          <div className="flex gap-1" key={entry.value}>
+            <SplineIcon size={12} color={entry.payload.fill} />
+            <div
+              style={{
+                color: entry.payload.fill,
+              }}
+            >
+              {entry.value}
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+}
+
 export function ReportLineChart({
   lineType,
   interval,
@@ -46,6 +75,29 @@ export function ReportLineChart({
   const rechartData = useRechartDataModel(series);
   const number = useNumber();
 
+  // great care should be taken when computing lastIntervalPercent
+  // the expression below works for data.length - 1 equal intervals
+  // but if there are numeric x values in a "linear" axis, the formula
+  // should be updated to use those values
+  const lastIntervalPercent =
+    ((rechartData.length - 2) * 100) / (rechartData.length - 1);
+
+  const gradientTwoColors = (
+    id: string,
+    col1: string,
+    col2: string,
+    percentChange: number
+  ) => (
+    <linearGradient id={id} x1="0" y1="0" x2="100%" y2="0">
+      <stop offset="0%" stopColor={col1} />
+      <stop offset={`${percentChange}%`} stopColor={col1} />
+      <stop offset={`${percentChange}%`} stopColor={`${col2}`} />
+      <stop offset="100%" stopColor={col2} />
+    </linearGradient>
+  );
+
+  const useDashedLastLine = (series[0]?.data?.length || 0) > 2;
+
   return (
     <>
       <ResponsiveContainer>
@@ -80,7 +132,12 @@ export function ReportLineChart({
               allowDecimals={false}
               tickFormatter={number.short}
             />
-            <Legend wrapperStyle={{ fontSize: '10px' }} />
+            {series.length > 1 && (
+              <Legend
+                wrapperStyle={{ fontSize: '10px' }}
+                content={<CustomLegend />}
+              />
+            )}
             <Tooltip content={<ReportChartTooltip />} />
             <XAxis
               axisLine={false}
@@ -95,27 +152,72 @@ export function ReportLineChart({
             {series.map((serie) => {
               return (
                 <React.Fragment key={serie.name}>
+                  <defs>
+                    {gradientTwoColors(
+                      `hideAllButLastInterval_${serie.id}`,
+                      'rgba(0,0,0,0)',
+                      getChartColor(serie.index),
+                      lastIntervalPercent
+                    )}
+                    {gradientTwoColors(
+                      `hideJustLastInterval_${serie.id}`,
+                      getChartColor(serie.index),
+                      'rgba(0,0,0,0)',
+                      lastIntervalPercent
+                    )}
+                  </defs>
                   <Line
                     dot={false}
                     type={lineType}
-                    key={serie.name}
                     name={serie.name}
                     isAnimationActive={false}
                     strokeWidth={2}
                     dataKey={`${serie.id}:count`}
-                    stroke={getChartColor(serie.index)}
+                    stroke={
+                      useDashedLastLine
+                        ? 'transparent'
+                        : getChartColor(serie.index)
+                    }
+                    // Use for legend
+                    fill={getChartColor(serie.index)}
                   />
+                  {useDashedLastLine && (
+                    <>
+                      <Line
+                        dot={false}
+                        type={lineType}
+                        name={`${serie.name}:dashed:noTooltip`}
+                        isAnimationActive={false}
+                        strokeWidth={2}
+                        dataKey={`${serie.id}:count`}
+                        stroke={`url('#hideAllButLastInterval_${serie.id}')`}
+                        strokeDasharray="4 2"
+                        strokeOpacity={0.7}
+                      />
+                      <Line
+                        dot={false}
+                        type={lineType}
+                        name={`${serie.name}:solid:noTooltip`}
+                        isAnimationActive={false}
+                        strokeWidth={2}
+                        dataKey={`${serie.id}:count`}
+                        stroke={`url('#hideJustLastInterval_${serie.id}')`}
+                      />
+                    </>
+                  )}
                   {previous && (
                     <Line
                       type={lineType}
-                      key={`${serie.name}:prev`}
                       name={`${serie.name}:prev`}
                       isAnimationActive={false}
                       strokeWidth={1}
                       dot={false}
-                      strokeDasharray={'6 6'}
+                      strokeDasharray={'1 1'}
+                      strokeOpacity={0.5}
                       dataKey={`${serie.id}:prev:count`}
                       stroke={getChartColor(serie.index)}
+                      // Use for legend
+                      fill={getChartColor(serie.index)}
                     />
                   )}
                 </React.Fragment>