add tick vis, adjust lightness of bars vs ticks/dots

src/renderer/TickCellRenderer.ts

@@ -0,0 +1,63 @@
+import { round } from '../internal';
+import { Column, IDataRow, INumberColumn, isNumberColumn } from '../model';
+import { CANVAS_HEIGHT, TICK } from '../styles';
+import { colorOf } from './impose';
+import {
+  ERenderMode,
+  ICellRenderer,
+  ICellRendererFactory,
+  IGroupCellRenderer,
+  IImposer,
+  IRenderContext,
+  ISummaryRenderer,
+} from './interfaces';
+import { renderMissingCanvas, renderMissingDOM } from './missing';
+import { noRenderer } from './utils';
+
+export default class DotCellRenderer implements ICellRendererFactory {
+  readonly title: string = 'Tick';
+  readonly groupTitle: string = 'Ticks';
+
+  canRender(col: Column, mode: ERenderMode): boolean {
+    return isNumberColumn(col) && mode === ERenderMode.CELL;
+  }
+
+  create(col: INumberColumn, context: IRenderContext, imposer?: IImposer): ICellRenderer {
+    const width = col.getWidth();
+    return {
+      template: `<div><div></div></div>`,
+      update: (n: HTMLDivElement, d: IDataRow) => {
+        renderMissingDOM(n, col, d);
+        const color = colorOf(col, d, imposer);
+        const l = col.getLabel(d);
+        const v = col.getNumber(d);
+        n.title = l;
+        const tick = n.firstElementChild as HTMLElement;
+        tick.title = context.sanitize(l);
+        tick.style.background = context.sanitize(color);
+        tick.style.left = `${round(v * 100, 2)}%`;
+      },
+      render: (ctx: CanvasRenderingContext2D, d: IDataRow) => {
+        if (renderMissingCanvas(ctx, col, d, width)) {
+          return;
+        }
+        const color = colorOf(col, d, imposer);
+        const v = col.getNumber(d);
+
+        ctx.save();
+        ctx.globalAlpha = TICK.opacity;
+        ctx.fillStyle = color || TICK.color;
+        ctx.fillRect(Math.max(0, v * width - TICK.size / 2), 0, TICK.size, CANVAS_HEIGHT);
+        ctx.restore();
+      },
+    };
+  }
+
+  createGroup(): IGroupCellRenderer {
+    return noRenderer;
+  }
+
+  createSummary(): ISummaryRenderer {
+    return noRenderer;
+  }
+}

src/renderer/rendererClasses.ts

@@ -34,3 +34,4 @@ export { default as TableCellRenderer } from './TableCellRenderer';
 export { default as UpSetCellRenderer } from './UpSetCellRenderer';
 export { default as VerticalBarCellRenderer } from './VerticalBarCellRenderer';
 export { default as StringHistogramCellRenderer } from './StringHistogramCellRenderer';
+export { default as TickCellRenderer } from './TickCellRenderer';

src/renderer/renderers.ts

@@ -34,6 +34,7 @@ import VerticalBarCellRenderer from './VerticalBarCellRenderer';
 import DateCellRenderer from './DateCellRenderer';
 import DateHistogramCellRenderer from './DateHistogramCellRenderer';
 import StringHistogramCellRenderer from './StringHistogramCellRenderer';
+import TickCellRenderer from './TickCellRenderer';
 
 const defaultCellRenderer = new DefaultCellRenderer();
 /**
@@ -75,6 +76,7 @@ export const renderers: { [key: string]: ICellRendererFactory } = {
   table: new TableCellRenderer(),
   upset: new UpSetCellRenderer(),
   verticalbar: new VerticalBarCellRenderer(),
+  tick: new TickCellRenderer(),
 };
 
 export function chooseRenderer(col: Column, renderers: { [key: string]: ICellRendererFactory }): ICellRendererFactory {

src/styles/_vars.scss

@@ -45,6 +45,10 @@ $lu_renderer_dot_single_color: $lu_renderer_dot_color !default;
 $lu_renderer_dot_single_size: 7px !default;
 $lu_renderer_dot_single_opacity: 0.75 !default;
 
+$lu_renderer_tick_color: $lu_renderer_dot_color !default;
+$lu_renderer_tick_size: 3px !default;
+$lu_renderer_tick_opacity: 0.75 !default;
+
 $lu_hist_color: #c1c1c1;
 
 $lu_engine_grip_gap: 5px !default;

src/styles/index.ts

@@ -43,6 +43,12 @@ export const DOT = {
   opacity: Number.parseFloat(getStyle('lu_renderer_dot_opacity', '0.5')),
 };
 /** @internal */
+export const TICK = {
+  color: getStyle('lu_renderer_tick_color', 'gray'),
+  size: Number.parseInt(getStyle('lu_renderer_tick_size', '3px'), 10),
+  opacity: Number.parseFloat(getStyle('lu_renderer_tick_opacity', '0.75')),
+};
+/** @internal */
 export const BOX_PLOT = {
   box: getStyle('lu_renderer_boxplot_box', '#e0e0e0'),
   stroke: getStyle('lu_renderer_boxplot_stroke', 'black'),

src/styles/renderer/_index.scss

@@ -18,3 +18,4 @@
 @import './threshold';
 @import './upset';
 @import './verticalbar';
+@import './tick';

src/styles/renderer/_tick.scss

@@ -0,0 +1,19 @@
+@use 'sass:math';
+
+@import '../vars';
+
+.#{$lu_css_prefix}-renderer-tick {
+  > div {
+    background: $lu_renderer_tick_color;
+    opacity: $lu_renderer_tick_opacity;
+    width: $lu_renderer_tick_size;
+    height: 100%;
+    top: 0%;
+    transform: translate(-50%, 0);
+    position: absolute;
+  }
+}
+
+.#{$engine_css_prefix}-td.#{$lu_css_prefix}-renderer-tick[data-group='d'] {
+  overflow-x: unset;
+}