feat: add measurement color preview (#399)

Closes: #388

src/app/panels/measurements/MeasurementColorPreview.tsx

@@ -0,0 +1,17 @@
+import { ColorConfig } from '../../../app-data/index';
+import { ColorPreview } from '../../../components/index';
+
+interface MeasurementColorPreviewProps {
+  color: ColorConfig;
+}
+
+export default function MeasurementColorPreview(
+  props: MeasurementColorPreviewProps,
+) {
+  const { color } = props;
+  return (
+    <div style={{ width: '1em', height: '1em' }}>
+      <ColorPreview color={color} />{' '}
+    </div>
+  );
+}

src/app/panels/measurements/MeasurementsPanel.tsx

@@ -13,6 +13,7 @@ import {
   Tabs,
 } from '../../../components/index';
 
+import MeasurementColorPreview from './MeasurementColorPreview';
 import MeasurementVisibilityToggle from './MeasurementVisibilityToggle';
 
 export function MeasurementsPanel() {
@@ -37,11 +38,16 @@ export function MeasurementsPanel() {
         </Table.Header>
         {data.measurements[kind].entries.map((measurement: MeasurementBase) => (
           <Table.Row key={measurement.id}>
-            <ValueRenderers.Component>
+            <ValueRenderers.Component
+              style={{ display: 'flex', flexDirection: 'row', gap: '0.5em' }}
+            >
               <MeasurementVisibilityToggle
                 id={measurement.id}
                 isVisible={view.measurements[measurement.id].visible}
               />
+              <MeasurementColorPreview
+                color={view.measurements[measurement.id].color}
+              />
             </ValueRenderers.Component>
             <ValueRenderers.Title
               style={{

src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -5,6 +5,7 @@ import { useRef } from 'react';
 import { useModifiedPopper } from '../../hooks/useModifiedPopper';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside';
 import { useOnOff } from '../../hooks/useOnOff';
+import FixedColorPreview from '../preview/FixedColorPreview';
 import { ColorPicker, ColorPickerProps } from '../react-color/ColorPicker';
 import * as colorHelper from '../react-color/helpers/color';
 
@@ -49,10 +50,9 @@ export function ColorPickerDropdown(props: ColorPickerDopdpownProps) {
         css={colorPickerDropdownCss.root}
         onClick={toggleMenu}
       >
-        <div
-          css={colorPickerDropdownCss.preview}
-          style={{ backgroundColor: hex }}
-        />
+        <div css={colorPickerDropdownCss.preview}>
+          <FixedColorPreview color={hex} />
+        </div>
       </div>
       {isOpened && (
         <div ref={setPopperElement} {...popperProps}>

src/components/color-picker/gradient-select/GradientSelect.tsx

@@ -4,9 +4,9 @@ import * as scaleChromatic from 'd3-scale-chromatic';
 import { Fragment } from 'react';
 import { FaChevronDown } from 'react-icons/fa';
 
-import GradientPreview from './GradientPreview';
+import FixedGradientPreview from '../preview/FixedGradientPreview';
 
-const scales = {
+export const scales = {
   turbo: scaleChromatic.interpolateTurbo,
   viridis: scaleChromatic.interpolateViridis,
   inferno: scaleChromatic.interpolateInferno,
@@ -69,7 +69,7 @@ export function GradientSelect(props: GradientSelectProps) {
     <Listbox value={value} onChange={onChange}>
       <GradientSelectListbox>
         <Listbox.Button as={GradientSelectButton}>
-          <GradientPreview scale={scales[value]} />
+          <FixedGradientPreview gradient={value} />
           <GradientSelectChevron />
         </Listbox.Button>
         <Listbox.Options as={GradientSelectOptions}>
@@ -79,7 +79,7 @@ export function GradientSelect(props: GradientSelectProps) {
                 <GradientSelectOption active={active}>
                   {option}
                   <div style={{ height: 15 }}>
-                    <GradientPreview scale={scales[option]} />
+                    <FixedGradientPreview gradient={option} />
                   </div>
                 </GradientSelectOption>
               )}

src/components/color-picker/index.ts

@@ -1,3 +1,4 @@
 export * from './color-picker-dropdown/ColorPickerDropdown';
 export * from './gradient-select/GradientSelect';
+export * from './preview/ColorPreview';
 export * from './react-color/ColorPicker';

src/components/color-picker/preview/ColorPreview.tsx

@@ -0,0 +1,23 @@
+import { ColorConfig } from '../../../app-data/index';
+import { assertUnreachable } from '../../utils/assert';
+
+import FixedColorPreview from './FixedColorPreview';
+import FixedGradientPreview from './FixedGradientPreview';
+
+export interface ColorPreviewProps {
+  color: ColorConfig;
+}
+
+export function ColorPreview(props: ColorPreviewProps) {
+  const { color } = props;
+  switch (color.kind) {
+    case 'fixed': {
+      return <FixedColorPreview color={color.color} />;
+    }
+    case 'fixedGradient': {
+      return <FixedGradientPreview gradient={color.gradient} />;
+    }
+    default:
+      assertUnreachable(color);
+  }
+}

src/components/color-picker/preview/FixedColorPreview.tsx

@@ -0,0 +1,10 @@
+interface FixedColorPreviewProps {
+  color: string;
+}
+
+export default function FixedColorPreview(props: FixedColorPreviewProps) {
+  const { color } = props;
+  return (
+    <div style={{ width: '100%', height: '100%', backgroundColor: color }} />
+  );
+}

src/components/color-picker/preview/FixedGradientPreview.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+
+import { GradientScaleName, scales } from '../gradient-select/GradientSelect';
+
+interface FixedGradientPreviewProps {
+  gradient: GradientScaleName;
+}
+
+export default function FixedGradientPreview(props: FixedGradientPreviewProps) {
+  const { gradient } = props;
+  const scale = scales[gradient];
+
+  const gradientCss = useMemo(() => {
+    const stops: string[] = [];
+    for (let i = 0; i <= 100; i++) {
+      stops.push(scale(i / 100));
+    }
+    return `linear-gradient(to right, ${stops.join(', ')})`;
+  }, [scale]);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        borderRadius: '0.125rem',
+        background: gradientCss,
+      }}
+    />
+  );
+}

stories/components/color-picker-dropdown.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { ColorPickerDropdown } from '../../src/components/index';
 
 export default {
-  title: 'Components / Color Pickers Dropdown',
+  title: 'Components / Color Pickers',
 };
 
 export function ColorPickerDropdownStory() {