feat: improve diverging number bar

packages/_playground/src/App.tsx

@@ -5,17 +5,13 @@
  * Copyright (c) 2021 Samuel Gratzl <[email protected]>
  */
 
-import { defaultColorScale, defaultDarkColorScale } from '@lineup-lite/components';
+import { defaultDivergingColorScale, defaultDivergingDarkColorScale } from '@lineup-lite/components';
 import '@lineup-lite/components/src/style.css';
-import { ColorRenderer, ProportionalSymbolRenderer } from '@lineup-lite/hooks';
 import '@lineup-lite/hooks/src/style.css';
 import LineUpLite, {
   actionIconsRemixicon,
-  asCategoricalColumn,
-  asCategoricalSetColumn,
-  asNumberColumn,
-  asNumbersColumn,
   asTextColumn,
+  asDivergingNumberColumn,
   LineUpLiteColumn,
   LineUpLitePanel,
   LineUpLiteStateContextProvider,
@@ -66,38 +62,11 @@ function Table({ isDarkTheme }: { isDarkTheme: boolean }) {
   const columns: LineUpLiteColumn<Row>[] = useMemo(
     () => [
       asTextColumn<Row>('name'),
-      asNumberColumn<Row>('age', {
-        color: isDarkTheme ? defaultDarkColorScale : defaultColorScale,
+      asDivergingNumberColumn<Row>('test', {
+        color: isDarkTheme ? defaultDivergingDarkColorScale : defaultDivergingColorScale,
+        min: -1,
+        max: 1,
       }),
-      asNumberColumn<Row>(
-        {
-          Header: 'Age',
-          id: 'age2',
-          accessor: (row) => row.age,
-          Cell: ColorRenderer,
-        },
-        {
-          color: isDarkTheme ? defaultDarkColorScale : defaultColorScale,
-        }
-      ),
-      asNumberColumn<Row>(
-        {
-          Header: 'Age',
-          id: 'age3',
-          accessor: (row) => row.age,
-          Cell: ProportionalSymbolRenderer,
-        },
-        {
-          color: isDarkTheme ? defaultDarkColorScale : defaultColorScale,
-        }
-      ),
-      asCategoricalColumn<Row>('shirtSize', {
-        categories: ['S', 'M', 'L'],
-      }),
-      asCategoricalSetColumn<Row>('hobbies', {
-        categories: ['running', 'cooking', 'reading'],
-      }),
-      asNumbersColumn<Row>('runningTimes'),
     ],
     [isDarkTheme]
   );

packages/_playground/src/data/index.tsx

@@ -11,6 +11,7 @@ export interface Row {
   shirtSize: 'S' | 'M' | 'L' | null;
   hobbies: ('running' | 'cooking' | 'reading')[] | null;
   runningTimes: number[] | null;
+  test: number | null;
 }
 
 export const data: Row[] = [
@@ -20,40 +21,46 @@ export const data: Row[] = [
     shirtSize: 'S',
     hobbies: ['running', 'cooking'],
     runningTimes: [10, 20, 40, 30, 15],
+    test: 0.8,
   },
   {
     name: 'Rubia Robker',
     age: 25,
     shirtSize: 'M',
     hobbies: ['cooking'],
     runningTimes: [21, 39, 25, 42, 18],
+    test: -0.2,
   },
   {
     name: 'Micheil Sappell',
     age: 50,
     shirtSize: 'L',
     hobbies: ['running', 'cooking', 'reading'],
     runningTimes: [16, 44, 30, 32, 31],
+    test: 0.5,
   },
   {
     name: 'Geoffrey Sprason',
     age: 30,
     shirtSize: 'M',
     hobbies: ['running', 'reading'],
     runningTimes: [39, 50, 43, 32, 24],
+    test: -0.1,
   },
   {
     name: 'Grissel Rounsefull',
     age: 21,
     shirtSize: 'S',
     hobbies: ['reading'],
     runningTimes: [36, 19, 37, 38, 17],
+    test: 0.9,
   },
   {
     name: null,
     age: null,
     shirtSize: null,
     hobbies: null,
     runningTimes: null,
+    test: null,
   },
 ];

packages/components/src/components/NumberBar.css

@@ -5,8 +5,22 @@
  * Copyright (c) 2021 Samuel Gratzl <[email protected]>
  */
 
-.lt-bar {
+.lt-bar,
+.lt-diverging-bar {
   text-align: right;
   padding-right: 0.2em;
   text-shadow: 0 0 2px var(--current-inverted-color, white);
 }
+
+.lt-diverging-bar {
+  position: relative;
+}
+.lt-diverging-bar::before {
+  content: '';
+  width: 1px;
+  top: 0;
+  left: 50%;
+  height: 100%;
+  border-left: 1px solid var(--current-color, currentColor);
+  position: absolute;
+}

packages/components/src/components/NumberBar.tsx

@@ -111,7 +111,7 @@ export function DivergingNumberBar(props: DivergingNumberBarProps): JSX.Element
   const label = format(props.value, props.format ?? toLocaleString);
   return (
     <div
-      className={clsx('lt-bar', props.className)}
+      className={clsx('lt-diverging-bar', props.className)}
       style={mergeStyles(
         props.style,
         divergingBarProps(

packages/components/src/math/defaults.ts

@@ -39,23 +39,34 @@ export function defaultColorScale(v: number): string {
   return `hsl(206, 64%, ${Math.round(100 * (v * (maxL - minL) + minL))}%)`;
 }
 
+export function defaultColorScale2(v: number): string {
+  const maxL = 0.9;
+  const minL = 0.23;
+  return `hsl(20, 64%, ${Math.round(100 * (v * (maxL - minL) + minL))}%)`;
+}
+
 /**
  * default diverging numeric color scale converting a number between 0..1 to a color where 0.5 is the center
  */
 export function defaultDivergingColorScale(v: number): string {
   if (v >= 0.5) {
     return defaultColorScale((v - 0.5) * 2); // rescale 0...1
   }
-  const maxL = 0.9;
-  const minL = 0.23;
-  const vv = 1 - v * 2; // invert and scale to 0..1 range
-  return `hsl(0, 64%, ${Math.round(100 * (vv * (maxL - minL) + minL))}%)`;
+  return defaultColorScale2(1 - v * 2);
 }
 
 /**
  * default numeric color scale converting a number between 0..1 to a color for dark themes
  */
 export const defaultDarkColorScale = invertColorScale(defaultColorScale);
+export const defaultDarkColorScale2 = invertColorScale(defaultColorScale2);
+
+export function defaultDivergingDarkColorScale(v: number): string {
+  if (v >= 0.5) {
+    return defaultDarkColorScale((v - 0.5) * 2); // rescale 0...1
+  }
+  return defaultDarkColorScale2(1 - v * 2);
+}
 
 /**
  * helper function to assign categorical values to colors

packages/table/src/index.ts

@@ -15,6 +15,7 @@ export {
   asDateColumn,
   asNumberBoxPlotColumn,
   asStackedNumberColumn,
+  asDivergingNumberColumn,
   asNumbersColumn,
   asTextColumn,
   asNumberColumn,