diff --git a/ui/src/minard/components/Histogram.tsx b/ui/src/minard/components/Histogram.tsx index 977072f72d..91fcad306a 100644 --- a/ui/src/minard/components/Histogram.tsx +++ b/ui/src/minard/components/Histogram.tsx @@ -47,7 +47,7 @@ export const Histogram: SFC = ({ const layer = useLayer( env, () => { - const [table, aesthetics] = bin( + const [table, mappings] = bin( baseTable, x, xDomain, @@ -56,7 +56,7 @@ export const Histogram: SFC = ({ position ) - return {table, aesthetics, colors, scales: {}} + return {table, mappings, colors, scales: {}} }, [baseTable, xDomain, x, fill, position, binCount, colors] ) @@ -75,12 +75,12 @@ export const Histogram: SFC = ({ }, } = env - const {aesthetics, table} = layer + const {mappings, table} = layer const hoveredRowIndices = findHoveredRowIndices( - table.columns[aesthetics.xMin], - table.columns[aesthetics.xMax], - table.columns[aesthetics.yMax], + table.columns[mappings.xMin], + table.columns[mappings.xMax], + table.columns[mappings.yMax], hoverX, hoverY, xScale, diff --git a/ui/src/minard/components/HistogramBars.tsx b/ui/src/minard/components/HistogramBars.tsx index 8e1938e270..92ff8c4593 100644 --- a/ui/src/minard/components/HistogramBars.tsx +++ b/ui/src/minard/components/HistogramBars.tsx @@ -24,11 +24,11 @@ const drawBars = ( ): void => { clearCanvas(canvas, width, height) - const {table, aesthetics} = layer - const xMinCol = table.columns[aesthetics.xMin] - const xMaxCol = table.columns[aesthetics.xMax] - const yMinCol = table.columns[aesthetics.yMin] - const yMaxCol = table.columns[aesthetics.yMax] + const {table, mappings} = layer + const xMinCol = table.columns[mappings.xMin] + const xMaxCol = table.columns[mappings.xMax] + const yMinCol = table.columns[mappings.yMin] + const yMaxCol = table.columns[mappings.yMax] const context = canvas.getContext('2d') diff --git a/ui/src/minard/index.ts b/ui/src/minard/index.ts index 598c5b052d..a7a42ddcfb 100644 --- a/ui/src/minard/index.ts +++ b/ui/src/minard/index.ts @@ -39,7 +39,7 @@ export interface AestheticScaleMappings { export interface Layer { table?: Table - aesthetics: AestheticDataMappings + mappings: AestheticDataMappings scales: AestheticScaleMappings colors?: string[] xDomain?: [number, number] diff --git a/ui/src/minard/utils/getBarFill.ts b/ui/src/minard/utils/getBarFill.ts index 894401d9bd..d11963b2fd 100644 --- a/ui/src/minard/utils/getBarFill.ts +++ b/ui/src/minard/utils/getBarFill.ts @@ -13,11 +13,11 @@ import {getGroupKey} from 'src/minard/utils/getGroupKey' // key”) that the scale uses as a domain // 3. Lookup the scale and get the color via this representation export const getBarFill = ( - {scales, aesthetics, table}: Layer, + {scales, mappings, table}: Layer, i: number ): string => { const fillScale = scales.fill - const values = aesthetics.fill.map(colKey => table.columns[colKey][i]) + const values = mappings.fill.map(colKey => table.columns[colKey][i]) const groupKey = getGroupKey(values) const fill = fillScale(groupKey) diff --git a/ui/src/minard/utils/getHistogramTooltipProps.ts b/ui/src/minard/utils/getHistogramTooltipProps.ts index a657a68018..1827cd38aa 100644 --- a/ui/src/minard/utils/getHistogramTooltipProps.ts +++ b/ui/src/minard/utils/getHistogramTooltipProps.ts @@ -5,14 +5,14 @@ export const getHistogramTooltipProps = ( layer: Layer, rowIndices: number[] ): HistogramTooltipProps => { - const {table, aesthetics} = layer - const xMinCol = table.columns[aesthetics.xMin] - const xMaxCol = table.columns[aesthetics.xMax] - const yMinCol = table.columns[aesthetics.yMin] - const yMaxCol = table.columns[aesthetics.yMax] + const {table, mappings} = layer + const xMinCol = table.columns[mappings.xMin] + const xMaxCol = table.columns[mappings.xMax] + const yMinCol = table.columns[mappings.yMin] + const yMaxCol = table.columns[mappings.yMax] const counts = rowIndices.map(i => { - const grouping = aesthetics.fill.reduce( + const grouping = mappings.fill.reduce( (acc, colName) => ({ ...acc, [colName]: table.columns[colName][i], diff --git a/ui/src/minard/utils/plotEnvReducer.ts b/ui/src/minard/utils/plotEnvReducer.ts index d0509dcad4..990c932ff9 100644 --- a/ui/src/minard/utils/plotEnvReducer.ts +++ b/ui/src/minard/utils/plotEnvReducer.ts @@ -33,7 +33,7 @@ export const INITIAL_PLOT_ENV: PlotEnv = { yDomain: null, baseLayer: { table: {columns: {}, columnTypes: {}}, - aesthetics: {}, + mappings: {}, scales: {}, }, layers: {}, @@ -117,20 +117,21 @@ export const plotEnvReducer = (state: PlotEnv, action: PlotAction): PlotEnv => /* Find all columns in the current in all layers that are mapped to the supplied - aesthetics + aesthetic mappings */ const getColumnsForAesthetics = ( state: PlotEnv, - aesthetics: string[] + mappings: string[] ): any[][] => { const {baseLayer, layers} = state const cols = [] for (const layer of Object.values(layers)) { - for (const aes of aesthetics) { - if (layer.aesthetics[aes]) { - const colName = layer.aesthetics[aes] + for (const mapping of mappings) { + const colName = layer.mappings[mapping] + + if (colName) { const col = layer.table ? layer.table.columns[colName] : baseLayer.table.columns[colName] @@ -272,8 +273,8 @@ const getColorScale = ( of data (for now). So the domain of the scale is a set of "group keys" which represent all possible groupings of data in the layer. */ -const getFillDomain = ({table, aesthetics}: Layer): string[] => { - const fillColKeys = aesthetics.fill +const getFillDomain = ({table, mappings}: Layer): string[] => { + const fillColKeys = mappings.fill if (!fillColKeys.length) { return [] @@ -299,7 +300,7 @@ const setFillScales = (draftState: PlotEnv) => { layers .filter( // Pick out the layers that actually need a fill scale - layer => layer.aesthetics.fill && layer.colors && layer.colors.length + layer => layer.mappings.fill && layer.colors && layer.colors.length ) .forEach(layer => { layer.scales.fill = getColorScale(getFillDomain(layer), layer.colors)