feat: add table styling for glossary (#26)

superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx

@@ -39,6 +39,7 @@ import {
 import { matchSorter, rankings } from 'match-sorter';
 import { typedMemo, usePrevious } from '@superset-ui/core';
 import { isEqual } from 'lodash';
+import cx from 'classnames';
 import GlobalFilter, { GlobalFilterProps } from './components/GlobalFilter';
 import SelectPageSize, {
   SelectPageSizeProps,
@@ -67,6 +68,8 @@ export interface DataTableProps<D extends object> extends TableOptions<D> {
   rowCount: number;
   wrapperRef?: MutableRefObject<HTMLDivElement>;
   onColumnOrderChange: () => void;
+  isRoundStyles?: boolean;
+  roundChartTitle?: string;
 }
 
 export interface RenderHTMLCellProps extends HTMLProps<HTMLTableCellElement> {
@@ -99,6 +102,8 @@ export default typedMemo(function DataTable<D extends object>({
   serverPagination,
   wrapperRef: userWrapperRef,
   onColumnOrderChange,
+  isRoundStyles,
+  roundChartTitle,
   ...moreUseTableOptions
 }: DataTableProps<D>): JSX.Element {
   const tableHooks: PluginHook<D>[] = [
@@ -175,6 +180,7 @@ export default typedMemo(function DataTable<D extends object>({
     page,
     pageCount,
     gotoPage,
+    rows,
     preGlobalFilteredRows,
     setGlobalFilter,
     setPageSize: setPageSize_,
@@ -365,7 +371,14 @@ export default typedMemo(function DataTable<D extends object>({
     >
       {hasGlobalControl ? (
         <div ref={globalControlRef} className="form-inline dt-controls">
-          <div className="row">
+          {isRoundStyles && (
+            <div className="dt-title-row">
+              <p className="dt-title">{roundChartTitle}</p>
+              <p>Found: {rows.length} terms</p>
+            </div>
+          )}
+
+          <div className={cx('row', isRoundStyles && 'dt-control-row')}>
             <div className="col-sm-6" style={columnStyles}>
               <div style={selectPageWrapperStyles}>
                 {hasPagination ? (
@@ -384,7 +397,9 @@ export default typedMemo(function DataTable<D extends object>({
               </div>
             </div>
             {searchInput ? (
-              <div className="col-sm-6">
+              <div
+                className={cx('col-sm-6', isRoundStyles && 'dt-control-search')}
+              >
                 <GlobalFilter<D>
                   searchInput={
                     typeof searchInput === 'boolean' ? undefined : searchInput

superset-frontend/plugins/plugin-chart-table/src/Styles.tsx

@@ -56,6 +56,35 @@ export default styled.div`
       font-feature-settings: 'tnum' 1;
     }
 
+    .dt-controls {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .dt-title-row {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .dt-title {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 0;
+      }
+
+      .dt-control-row {
+        display: flex;
+        flex-direction: column-reverse;
+        flex: 1;
+        align-items: flex-end;
+
+        .dt-control-search {
+          margin-bottom: 8px;
+        }
+      }
+    }
+
     .dt-controls {
       padding-bottom: 0.65em;
     }
@@ -83,6 +112,78 @@ export default styled.div`
       float: right;
     }
 
+    .dt-global-filter-round {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-radius: 10px;
+      border: 1px solid ${theme.colors.primary.light4};
+      margin: 4px;
+      min-width: 360px;
+      height: auto;
+
+      &:focus-within {
+        border: 1px solid ${theme.colors.primary.base};
+        outline: 0;
+        box-shadow:
+          inset 0 1px 1px rgba(0, 0, 0, 0.075),
+          0 0 8px rgba(56, 118, 246, 0.6);
+      }
+
+      .dt-global-filter-input-round {
+        border: none;
+        outline: none;
+        flex: 1;
+
+        &:focus {
+          border: none;
+          outline: none;
+        }
+      }
+    }
+
+    .table-custom {
+      border-collapse: separate;
+      border-spacing: 0 8px;
+
+      tbody::after {
+        content: '';
+        display: block;
+        height: 8px;
+      }
+
+      thead > tr,
+      tbody > tr {
+        th {
+          font-weight: 700;
+        }
+
+        th,
+        td {
+          color: #5a607f;
+          font-size: 14px;
+          background: #f5f6fa;
+          border-top: 1px solid #e6e9f4;
+          border-bottom: 1px solid #e6e9f4;
+          padding: 16px 20px;
+        }
+
+        th:first-of-type,
+        td:first-of-type {
+          border-top-left-radius: 20px;
+          border-bottom-left-radius: 20px;
+          border-left: 1px solid #e6e9f4;
+        }
+
+        th:last-of-type,
+        td:last-of-type {
+          border-right: 1px solid #e6e9f4;
+          border-top-right-radius: 20px;
+          border-bottom-right-radius: 20px;
+        }
+      }
+    }
+
     .dt-truncate-cell {
       overflow: hidden;
       text-overflow: ellipsis;

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -179,6 +179,34 @@ function SearchInput({ count, value, onChange }: SearchInputProps) {
   );
 }
 
+function RoundSearchInput({ count, value, onChange }: SearchInputProps) {
+  return (
+    <span className="dt-global-filter dt-global-filter-round form-control input-sm">
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10.5 3C14.6421 3 18 6.35786 18 10.5C18 12.2101 17.4276 13.7866 16.464 15.0483L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3466 20.0676 18.7794 20.0953 18.3871 19.7903L18.2929 19.7071L15.0483 16.464C13.7866 17.4276 12.2101 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3ZM10.5 5C7.46243 5 5 7.46243 5 10.5C5 13.5376 7.46243 16 10.5 16C11.8511 16 13.0885 15.5128 14.0459 14.7045C14.091 14.5536 14.1738 14.412 14.2929 14.2929C14.412 14.1738 14.5536 14.091 14.7041 14.0446C15.5128 13.0885 16 11.8511 16 10.5C16 7.46243 13.5376 5 10.5 5Z"
+          fill="#7E84A3"
+        />
+      </svg>
+      <input
+        className="dt-global-filter-input-round"
+        placeholder={t('Find term')}
+        value={value}
+        aria-label={t('Find term')}
+        onChange={onChange}
+      />
+    </span>
+  );
+}
+
 function SelectPageSize({
   options,
   current,
@@ -226,6 +254,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     totals,
     isRawRecords,
     rowCount = 0,
+    fullDisplay,
+    isRoundStyles,
+    roundChartTitle,
     columns: columnsMeta,
     alignPositiveNegative: defaultAlignPN = false,
     colorPositiveNegative: defaultColorPN = false,
@@ -737,24 +768,33 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
   const { width: widthFromState, height: heightFromState } = tableSize;
 
+  const SelectedSearchInput = isRoundStyles ? RoundSearchInput : SearchInput;
+
   return (
     <Styles>
       <DataTable<D>
         columns={columns}
         data={data}
         rowCount={rowCount}
-        tableClassName="table table-striped table-condensed"
+        tableClassName={cx(
+          'table',
+          'table-striped',
+          'table-condensed',
+          isRoundStyles && 'table-custom',
+        )}
+        isRoundStyles={isRoundStyles}
+        roundChartTitle={roundChartTitle}
         pageSize={pageSize}
         serverPaginationData={serverPaginationData}
         pageSizeOptions={pageSizeOptions}
-        width={widthFromState}
+        width={fullDisplay ? '100%' : widthFromState}
         height={heightFromState}
         serverPagination={serverPagination}
         onServerPaginationChange={handleServerPaginationChange}
         onColumnOrderChange={() => setColumnOrderToggle(!columnOrderToggle)}
         maxPageItemCount={5}
         noResults={getNoResultsMessage}
-        searchInput={includeSearch && SearchInput}
+        searchInput={includeSearch && SelectedSearchInput}
         selectPageSize={pageSize !== null && SelectPageSize}
         // not in use in Superset, but needed for unit tests
         sticky={sticky}

superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx

@@ -163,6 +163,77 @@ const config: ControlPanelConfig = {
         ],
       ],
     },
+    {
+      label: t('Chart display'),
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'fullDisplay',
+            config: {
+              type: 'CheckboxControl',
+              label: 'Full display',
+              renderTrigger: true,
+              default: false,
+              description: 'Slice take full space (No header, only controls)',
+            },
+          },
+          {
+            name: 'noMainBorder',
+            config: {
+              type: 'CheckboxControl',
+              label: 'No border',
+              renderTrigger: true,
+              default: false,
+              description: 'There will be no border around the slice',
+            },
+          },
+        ],
+        [
+          {
+            name: 'hideControlsOnCustomerView',
+            config: {
+              type: 'CheckboxControl',
+              label: 'Hide controls on customer view',
+              renderTrigger: true,
+              default: false,
+              description: "Controls won't be visible on production",
+            },
+          },
+        ],
+        [
+          {
+            name: 'isRoundStyles',
+            config: {
+              type: 'CheckboxControl',
+              label: 'Apply round styles',
+              renderTrigger: true,
+              default: false,
+              description: 'Apply round styles for the chart',
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('Round Chart Configuration'),
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'roundChartTitle',
+            config: {
+              type: 'TextControl',
+              label: 'Round Chart Title',
+              renderTrigger: true,
+              default: '',
+              description:
+                'Chart title that will be displayed in the round chart',
+            },
+          },
+        ],
+      ],
+    },
     {
       label: t('Legend Modal'),
       expanded: true,

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -230,6 +230,10 @@ const transformProps = (
     color_pn: colorPositiveNegative = true,
     show_cell_bars: showCellBars = true,
     include_search: includeSearch = false,
+    fullDisplay = false,
+    noMainBorder = false,
+    isRoundStyles = false,
+    roundChartTitle = '',
     page_length: pageLength,
     server_pagination: serverPagination = false,
     server_page_length: serverPageLength = 10,
@@ -281,6 +285,10 @@ const transformProps = (
     showCellBars,
     sortDesc,
     includeSearch,
+    fullDisplay,
+    noMainBorder,
+    isRoundStyles,
+    roundChartTitle,
     rowCount,
     pageSize: serverPagination
       ? serverPageLength

superset-frontend/plugins/plugin-chart-table/src/types.ts

@@ -125,6 +125,11 @@ export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
   alignPositiveNegative?: boolean;
   colorPositiveNegative?: boolean;
   tableTimestampFormat?: string;
+  fullDisplay?: boolean;
+  noMainBorder?: boolean;
+  hideControlsOnCustomerView?: boolean;
+  isRoundStyles?: boolean;
+  roundChartTitle?: string;
   // These are dashboard filters, don't be confused with in-chart search filter
   // enabled by `includeSearch`
   filters?: DataRecordFilters;

superset-frontend/src/components/Chart/Chart.jsx

@@ -270,6 +270,7 @@ class Chart extends React.PureComponent {
       chartIsStale,
       queriesResponse = [],
       width,
+      chartId,
     } = this.props;
 
     const isLoading = chartStatus === 'loading';
@@ -319,6 +320,9 @@ class Chart extends React.PureComponent {
         onError={this.handleRenderContainerFailure}
         showMessage={false}
       >
+        {!!this.props.formData?.noMainBorder && (
+          <style>{` .dashboard-chart-id-${chartId} { border: none !important; } `}</style>
+        )}
         <Styles
           data-ui-anchor="chart"
           className="chart-container"