Refactor derivation of layer data (#44)

.vscode/launch.json

@@ -0,0 +1,35 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Jest All",
+        "program": "${workspaceFolder}/node_modules/.bin/jest",
+        "args": ["--runInBand"],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen",
+        "disableOptimisticBPs": true,
+        "windows": {
+          "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        }
+      },
+      {
+        "type": "node",
+        "request": "launch",
+        "name": "Jest Current File",
+        "program": "${workspaceFolder}/node_modules/.bin/jest",
+        "args": [
+          "${fileBasenameNoExtension}",
+          "--config",
+          "jest.config.js"
+        ],
+        "console": "integratedTerminal",
+        "internalConsoleOptions": "neverOpen",
+        "disableOptimisticBPs": true,
+        "windows": {
+          "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        }
+      }
+    ]
+  }

src/constants/index.ts

@@ -9,7 +9,7 @@ import {
   curveNatural,
 } from 'd3-shape'
 
-import {LayerConfig} from '../types'
+import {Config, LayerConfig} from '../types'
 import {NINETEEN_EIGHTY_FOUR as DEFAULT_COLOR_SCHEME} from './colorSchemes'
 
 // TODO: Make configurable
@@ -34,6 +34,25 @@ export const CURVES = {
 
 export const MAX_TOOLTIP_ROWS = 8
 
+export const CONFIG_DEFAULTS: Partial<Config> = {
+  layers: [],
+  xAxisLabel: '',
+  yAxisLabel: '',
+  showAxes: true,
+  axisColor: '#292933',
+  axisOpacity: 1,
+  gridColor: '#292933',
+  gridOpacity: 1,
+  tickFont: '10px sans-serif',
+  tickFontColor: '#8e91a1',
+  legendFont: '10px monospace',
+  legendFontColor: '#8e91a1',
+  legendFontBrightColor: '#c6cad3',
+  legendBackgroundColor: '#1c1c21',
+  legendBorder: '1px solid #202028',
+  legendCrosshairColor: '#31313d',
+}
+
 export const LAYER_DEFAULTS: {[layerType: string]: Partial<LayerConfig>} = {
   line: {
     lineWidth: 1,

src/stats/bin2d.ts → src/layerTransforms/heatmap.ts

@@ -4,53 +4,48 @@ import {scaleSequential} from 'd3-scale'
 
 import {
   Table,
-  HeatmapLayerConfig,
   HeatmapTable,
   HeatmapScales,
   HeatmapMappings,
-  SizedConfig,
   Scale,
 } from '../types'
 
 import {getNumericColumn} from '../utils/getNumericColumn'
 
 const BIN_SIZE = 10
 
-export const bin2dStat = (
-  config: SizedConfig,
-  layer: HeatmapLayerConfig
-): {
-  table: HeatmapTable
-  mappings: HeatmapMappings
-  scales: HeatmapScales
-} => {
-  const table = bin2d(
-    config.table,
-    layer.x,
-    layer.y,
-    config.xDomain,
-    config.yDomain,
-    config.width,
-    config.height,
-    BIN_SIZE
-  )
-
-  const mappings: HeatmapMappings = {
-    xMin: 'xMin',
-    xMax: 'xMax',
-    yMin: 'yMin',
-    yMax: 'yMax',
-    fill: 'count',
-  }
-
+export const getHeatmapTable = (
+  table: Table,
+  xColKey: string,
+  yColKey: string,
+  xDomain: number[],
+  yDomain: number[],
+  width: number,
+  height: number
+): HeatmapTable =>
+  bin2d(table, xColKey, yColKey, xDomain, yDomain, width, height, BIN_SIZE)
+
+export const getHeatmapScales = (
+  table: HeatmapTable,
+  colors: string[]
+): HeatmapScales => {
   const domain = extent(table.columns.count.data)
-  const colorScheme = interpolateRgbBasis(layer.colors)
+  const colorScheme = interpolateRgbBasis(colors)
   const fillScale = scaleSequential(colorScheme).domain(domain)
-  const scales = {fill: fillScale as Scale<number, string>}
 
-  return {table, mappings, scales}
+  return {
+    fill: fillScale as Scale<number, string>,
+  }
 }
 
+export const getHeatmapMappings = (): HeatmapMappings => ({
+  xMin: 'xMin',
+  xMax: 'xMax',
+  yMin: 'yMin',
+  yMax: 'yMax',
+  fill: 'count',
+})
+
 export const bin2d = (
   table: Table,
   xColKey: string,

src/stats/bin.test.ts → src/layerTransforms/histogram.test.ts

@@ -1,5 +1,5 @@
 import {Table} from '../'
-import {bin} from './bin'
+import {bin} from './histogram'
 
 const TABLE: Table = {
   columns: {

src/stats/bin.ts → src/layerTransforms/histogram.ts

@@ -6,8 +6,6 @@ import {
   HistogramMappings,
   HistogramPosition,
   HistogramScales,
-  HistogramLayerConfig,
-  SizedConfig,
 } from '../types'
 
 import {isNumeric} from '../utils/isNumeric'
@@ -18,41 +16,34 @@ import {getNumericColumn} from '../utils/getNumericColumn'
 import {appendGroupingCol} from '../utils/appendGroupingCol'
 import {FILL_COL_KEY} from '../constants'
 
-export const binStat = (
-  config: SizedConfig,
-  layer: HistogramLayerConfig
-): {
-  table: HistogramTable
-  mappings: HistogramMappings
-  scales: HistogramScales
-} => {
-  const table = appendGroupingCol(
-    bin(
-      config.table,
-      layer.x,
-      config.xDomain,
-      layer.fill,
-      layer.binCount,
-      layer.position
-    ),
-    layer.fill,
+export const getHistogramTable = (
+  table: Table,
+  xColKey: string,
+  xDomain: number[],
+  groupColKeys: string[] = [],
+  binCount: number,
+  position: HistogramPosition
+): HistogramTable =>
+  appendGroupingCol(
+    bin(table, xColKey, xDomain, groupColKeys, binCount, position),
+    groupColKeys,
     FILL_COL_KEY
   )
 
-  const mappings: HistogramMappings = {
-    xMin: 'xMin',
-    xMax: 'xMax',
-    yMin: 'yMin',
-    yMax: 'yMax',
-    fill: layer.fill,
-  }
-
-  const scales = {
-    fill: getFillScale(table, layer.colors),
-  }
+export const getHistogramMappings = (fill: string[]): HistogramMappings => ({
+  xMin: 'xMin',
+  xMax: 'xMax',
+  yMin: 'yMin',
+  yMax: 'yMax',
+  fill,
+})
 
-  return {table, mappings, scales}
-}
+export const getHistogramScales = (
+  table: Table,
+  colors: string[]
+): HistogramScales => ({
+  fill: getFillScale(table, colors),
+})
 
 /*
   Compute the data of a histogram visualization.

src/layerTransforms/index.ts

@@ -0,0 +1,8 @@
+export {getLineTable, getLineMappings, getLineScales} from './line'
+export {getScatterTable, getScatterMappings, getScatterScales} from './scatter'
+export {getHeatmapTable, getHeatmapMappings, getHeatmapScales} from './heatmap'
+export {
+  getHistogramTable,
+  getHistogramMappings,
+  getHistogramScales,
+} from './histogram'

src/layerTransforms/line.ts

@@ -0,0 +1,19 @@
+import {Table, LineLayerConfig, LineMappings, LineScales} from '../types'
+import {getFillScale} from '../utils/getFillScale'
+import {appendGroupingCol} from '../utils/appendGroupingCol'
+import {FILL_COL_KEY} from '../constants'
+
+export const getLineTable = (table: Table, fill: string[]): Table =>
+  appendGroupingCol(table, fill, FILL_COL_KEY)
+
+export const getLineMappings = (
+  layerConfig: LineLayerConfig
+): LineMappings => ({
+  x: layerConfig.x,
+  y: layerConfig.y,
+  fill: layerConfig.fill,
+})
+
+export const getLineScales = (table: Table, colors: string[]): LineScales => ({
+  fill: getFillScale(table, colors),
+})

src/layerTransforms/scatter.ts

@@ -0,0 +1,30 @@
+import {Table, ScatterLayerConfig, ScatterMappings} from '../types'
+import {getFillScale} from '../utils/getFillScale'
+import {getSymbolScale} from '../utils/getSymbolScale'
+import {appendGroupingCol} from '../utils/appendGroupingCol'
+import {SYMBOL_COL_KEY, FILL_COL_KEY} from '../constants'
+
+export const getScatterTable = (
+  table: Table,
+  fill: string[],
+  symbol: string[]
+): Table => {
+  const withFillCol = appendGroupingCol(table, fill, FILL_COL_KEY)
+  const withSymbolCol = appendGroupingCol(withFillCol, symbol, SYMBOL_COL_KEY)
+
+  return withSymbolCol
+}
+
+export const getScatterMappings = (
+  layerConfig: ScatterLayerConfig
+): ScatterMappings => ({
+  x: layerConfig.x,
+  y: layerConfig.y,
+  fill: layerConfig.fill,
+  symbol: layerConfig.symbol,
+})
+
+export const getScatterScales = (table: Table, colors: string[]) => ({
+  fill: getFillScale(table, colors),
+  symbol: getSymbolScale(table),
+})

src/utils/MemoizedFunctionCache.ts

@@ -0,0 +1,34 @@
+import memoizeOne from 'memoize-one'
+
+/*
+  Stores a cache of memoized functions which can be looked up by an arbitrary
+  key. The memoized functions are instatiated lazily.
+
+  Example:
+
+  ```
+  const f = () => {
+    console.log('f called')
+
+    return 2
+  }
+
+  const cache = new MemoizedFunctionCache()
+  const fMemoized = cache.get('myKey', f)
+
+  fMemoized() // logs "f called", returns 2
+  fMemoized() // returns 2
+  ```
+
+*/
+export class MemoizedFunctionCache {
+  private memoizedFunctions: {[key: string]: Function} = {}
+
+  public get<T extends (...args: any[]) => any>(key: string, fn: T): T {
+    if (!this.memoizedFunctions[key]) {
+      this.memoizedFunctions[key] = memoizeOne(fn)
+    }
+
+    return this.memoizedFunctions[key] as T
+  }
+}