@airtable/blocks/ui#colorUtils JavaScript Examples

/**
 * Table row component, which contains either the table name or a field name.
 *
 * @param {number} rowIndex Used as a multiplier to position the field vertically
 * @param {Object} node Node object containing name and relevant ids
 * @param {boolean} isHeader Whether this table row is a the table header
 * @param {onTableRowDrag} function mousedown event handler to control table dragging
 * @param {boolean} canDrag should be true when onTableRowDrag is not a no-op
 */
function TableRow({rowIndex, node, isHeader, onTableRowDrag, canDrag}) {
    const truncatedRowName = truncateTextForWidth(node.name, isHeader);
    // Give each table header a random, deterministic color based off the tableId
    let headerColorString;
    if (isHeader) {
        const colorIndex = node.tableId.charCodeAt(node.tableId.length - 1) % ALLOWED_COLORS.length;
        headerColorString = ALLOWED_COLORS[colorIndex];
    }
    return (
        <svg
            className={classnames('TableRow', {
                TableHeader: isHeader,
                draggable: canDrag,
            })}
            id={node.id}
            x={TABLE_BORDER_WIDTH} // give room for filter box-shadow
            y={TABLE_BORDER_WIDTH + ROW_HEIGHT * rowIndex}
            onMouseDown={onTableRowDrag}
        >
            {isHeader ? (
                <path fill={colorUtils.getHexForColor(headerColorString)} d={TABLE_HEADER_PATH} />
            ) : (
                <rect height={ROW_HEIGHT} width={ROW_WIDTH} />
            )}
            <text x={TEXT_PADDING_X} y={ROW_HEIGHT / 2} width={ROW_WIDTH}>
                {truncatedRowName}
            </text>
        </svg>
    );
}

function getMapData(records, stateField, colorField) {
    // If the color is a numeric field, get the maximum value to normalize by.
    let maxColorValue = null;
    if (colorField.type === FieldType.NUMBER) {
        for (const record of records) {
            let v = record.getCellValue(colorField.name);
            if (maxColorValue == null) {
                maxColorValue = v;
            } else {
                maxColorValue = Math.max(maxColorValue, v);
            }
        }
    }

    const stateColorMap = new Map();
    for (const record of records) {
        // First handle the state
        let stateText;
        const stateCell = record.getCellValue(stateField.name);
        if (stateField.type == FieldType.SINGLE_LINE_TEXT) {
            stateText = stateCell;
        } else if (stateField.type == FieldType.SINGLE_SELECT) {
            stateText = stateCell.name;
        } else if (stateField.type == FieldType.MULTIPLE_RECORD_LINKS && stateCell.length > 0 && stateCell[0].name) {
            stateText = stateCell[0].name;
        } else if (stateField.type == FieldType.MULTIPLE_LOOKUP_VALUES && stateCell.length > 0) {
            stateText = stateCell[0];
        } else {
            stateText = null;
        }
        
        // Validate the state field
        // This uses a map of stateCode:stateName, and an inverse map of stateName:stateCode to allow the user to
        // enter either the code or the name.
        let stateCode;
        // If it was in a state abbreviation format
        if (stateText in codeStateMap) {
            stateCode = stateText;
        } 
        // state name format
        else if (stateText in stateCodeMap) {
            stateCode = stateCodeMap[stateText];
        }
        // anything else
        else {
            stateCode = null;
        }

        const colorValue = record.getCellValue(colorField.name);
        // console.log(`State: ${JSON.stringify(stateCell)}, color: ${colorValue}`);

        if (stateCode !== null && colorValue !== null) {
            let color = null;
            if (colorField.type == FieldType.SINGLE_SELECT) {
                color = colorUtils.getHexForColor(colorValue.color);
            } else if (colorField.type == FieldType.NUMBER && maxColorValue) {
                // Normalized from 0-1, and then scaled from 0-100 (99 really)
                let normalizedColorValueIndex = Math.floor((colorValue / maxColorValue) * 100);
                color = colors[normalizedColorValueIndex];
                console.log(`color: ${colorValue} | max: ${maxColorValue} | color: ${color} | indez: ${normalizedColorValueIndex}`);
            }
            else {
                color = colorValue;
            }

            if (stateCode !== null && color !== null) {
                stateColorMap[stateCode] = {fill: color};
            }
        }
    }

    return stateColorMap;
}

css = `
    .SchemaVisualizer {
        background-color: #F3F2F1;
    }

    .TableRow {
        font-family: ${FONT_FAMILY};
        font-size: ${FONT_SIZE};
        cursor: default;
    }

    .TableBorder {
        stroke-width: 0;
        fill: rgba(0, 0, 0, 0.1);
    }

    .TableRow:not(.TableHeader) {
        fill: #fff;
        stroke-width: 0;
    }

    .TableRow:not(.TableHeader):hover {
        fill: hsl(0, 0%, 91%);
    }

    .TableRow text {
        fill: #000000;
        stroke-width: 0;
        dominant-baseline: central;
    }

    .TableRow.highlighted rect {
        fill: hsl(0, 0%, 91%);
    }

    .TableRow.TableHeader {
        stroke-width: 0;
        font-weight: 600;
    }

    .TableRow.TableHeader text {
        fill: #ffffff;
    }
    
    .TableRow.draggable {
        cursor: grab;
    }

    .Link {
        fill: none;
        stroke: ${colorUtils.getHexForColor(colors.GRAY)};
        stroke-width: 2px;
        stroke-opacity: 0.6;
    }

    .Link.highlighted {
        stroke-width: 4px;
        stroke-opacity: 1;
        stroke-dasharray: 6px;
        stroke-dashoffset: 12px;
        animation: stroke 0.5s linear infinite;
        shape-rendering: geometricPrecision;
    }

    .Link.highlighted.multipleRecordLinks {
        stroke: ${colorUtils.getHexForColor(colors.GRAY_BRIGHT)};
        stroke-dasharray: initial;
    }
    
    .Link.highlighted.formula {
        stroke: ${colorUtils.getHexForColor(colors.BLUE_BRIGHT)};
    }
    
    .Link.highlighted.count {
        stroke: ${colorUtils.getHexForColor(colors.RED_BRIGHT)};        
    }

    .Link.highlighted.multipleLookupValues {
        stroke: ${colorUtils.getHexForColor(colors.ORANGE_BRIGHT)};
    }
    
    .Link.highlighted.rollup {
        stroke: ${colorUtils.getHexForColor(colors.PURPLE_BRIGHT)};
    }

    @keyframes stroke {
        to {
            stroke-dashoffset: 0;
        }
    }
`