charts CustomLegend.tsx

0% Statements 0/15

0% Branches 0/1

0% Functions 0/1

0% Lines 0/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from 'react';
import { trendColorMap } from './theme';
 
export const CustomLegend: React.FC = () => {
  const trends = Object.keys(trendColorMap) as (keyof typeof trendColorMap)[];
  return (
    <div className="flex flex-wrap gap-4 px-4 py-2 text-xs">
      {trends.map((trend) => (
        <div key={trend} className="flex items-center gap-1">
          <span
            className="inline-block w-3 h-3 rounded-sm"
            style={{ background: trendColorMap[trend] }}
          ></span>
          {trend}
        </div>
      ))}
      <div className="flex items-center gap-1">
        <span className="w-8 h-[6px] bg-gradient-to-r from-[hsl(var(--foreground)/0.3)] to-[hsl(var(--foreground))] rounded-sm"></span>
        Confidence →
      </div>
    </div>
  );
};