Initial implementation

src/client/components/legend/index.css

@@ -0,0 +1,19 @@
+.legend-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12;
+  width: 100%;
+  overflow: hidden;
+
+  > div {
+    flex: 1;
+  }
+
+  small {
+    display: inline-block;
+    max-width: 128px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

src/client/components/legend/index.tsx

@@ -0,0 +1,21 @@
+import { getTextColor } from '@/utils/colors';
+import { type FormatOptions, formatValue } from '@/utils/format';
+import './index.css';
+
+export type LegendProps = {
+  labels: string[];
+  values: number[];
+  formatOptions?: FormatOptions;
+  hueOffset?: number;
+};
+
+export const Legend = ({ labels, values, formatOptions, hueOffset = 0 }: LegendProps) => (
+  <div className='legend-wrapper'>
+    {labels.map((label, index) => (
+      <div key={labels[index]}>
+        <small style={{ color: getTextColor((hueOffset + (360 * index) / values.length) % 360) }}>{label}</small>
+        <h4>{formatValue(values[index], formatOptions)}</h4>
+      </div>
+    ))}
+  </div>
+);