Table plugin development and moving it project to project in ApacheSuperset.

Next, the values from the interface need to be passed into the main file and applied in the columns constant to do so:
— transformProps.ts file to complete:

  const { width, height, formData, queriesData } = chartProps;

  const { boldText, headerFontSize, colName, rowName, color1, color2, relativeNumber } = formData;

  const data = queriesData[0].data as TimeseriesDataRecord[];

  console.log(‘formData via TransformProps.ts’, formData);

  return {

    width,

    height,

    data,

    boldText,

    headerFontSize,

    colName,

    rowName,

    color1, 

    color2,

    relativeNumber,

  };

}

— file types.ts to complete:

export interface SuperTableStylesProps {

  height: number;

  width: number;

  headerFontSize: keyof typeof supersetTheme.typography.sizes;

  boldText: boolean;

  colName: string;

  rowName: string;

  color1: string;

  color2: string;

  relativeNumber: number;

} 

— the final code in the SuperTable.tsx file looks as follows:

import React, { useEffect, createRef } from ‘react’;

import { styled } from ‘@superset-ui/core’;

import { SuperTableProps, SuperTableStylesProps } from ‘./types’;

import { Table, Tag } from ‘antd’;

import type { ColumnsType } from ‘antd/es/table’;

const Styles = styled.div<SuperTableStylesProps>`

  height: ${({ height }) => height}px;

  width: ${({ width }) => width}px;

  colName: ${({ colName }) => colName};

  color1: ${({ color1 }) => color1};

  color2: ${({ color2 }) => color2};

  rowName: ${({ rowName }) => rowName};

  padding: 2px;

`;

var numberFormat = new Intl.NumberFormat(‘ru-RU’);

function hexToRGB(hex = ‘FF0000’, alpha = 0.1) {

  var r = parseInt(hex.slice(1, 3), 16),

      g = parseInt(hex.slice(3, 5), 16),

      b = parseInt(hex.slice(5, 7), 16);

  return «rgba(» + r + «, » + g + «, » + b + «, » + alpha + «)»;

}

function getColorRGB(

  hex=’FF0000′, 

  val=1, 

  arr=[1,2,3],

  isMax=1,

  relativeNumber=0) {

  var min = isMax == 1 ? Math.min(…arr) : relativeNumber,

      max = isMax == 1 ? relativeNumber : Math.max(…arr),

      alpha = isMax == 1 ? (max — val)/(max — min) : (val — min)/(max — min) ; //

  console.log(‘Plugin’, min, max,val);

  return hexToRGB(hex, alpha);

}

export default function SuperTable(props: SuperTableProps) {

  const { data, height, width} = props;

  const rootElem = createRef<HTMLDivElement>();

  useEffect(() => {

    const root = rootElem.current as HTMLElement;

    console.log(‘Plugin element’, root);

  });

  interface DataType {

    [data: string]: any;

  }

  const columns: ColumnsType<DataType> = [];  

  //console.log(‘Plugin color’, props.color2);

  for (let colval in Object.keys(data[0])) {

    let coltitle  = Object.keys(data[0])[colval];

    if (coltitle != props.colName) {

      columns.push({

        title: coltitle,

        dataIndex: coltitle,

        key: coltitle,

        render: (met, key) => {

          let c = ‘white’;

          if (props.rowName.split(‘, ‘).includes(key[props.colName]) )

          {

            const result = Object.values(data.reduce((res, obj) => obj.name == props.rowName ? obj : res, {})); 

            var arr_val: number[] = [];

            for (var i = 1; i < result.length; i++) {

              arr_val.push(result[i]);

            }

            c = (met >= props.relativeNumber) ? 

            getColorRGB( props.color2, met, arr_val, 0, props.relativeNumber) :

            getColorRGB( props.color1, met, arr_val, 1, props.relativeNumber) ; //props.color2

          }

          return (

            <Tag style={{display: ‘block’, background: c, border:  ‘none’}} key={met} >

              {numberFormat.format(met)}

            </Tag>

          );

        }

      })

    }

    else {

      columns.push({

        title: coltitle,

        dataIndex: coltitle,

        key: coltitle,

      })

    }

  }

  const data22: DataType[] = data;

  return (

    <Styles

      ref={rootElem}

      boldText={props.boldText}

      headerFontSize={props.headerFontSize}

      height={height}

      width={width}

    >

      <Table columns={columns} dataSource={data22} size=»small»/>

    </Styles>

  );

}

Once built, the plugin will display the following: