-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: legend table is implemeted using tanstack table
- Loading branch information
1 parent
403f2bf
commit c92533a
Showing
12 changed files
with
521 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
packages/react-components/src/components/chart/legend/ascendingIcon.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
packages/react-components/src/components/chart/legend/descendingIcon.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions
9
packages/react-components/src/components/chart/legend/legend.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
packages/react-components/src/components/chart/legend/sortingIcon.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions
32
packages/react-components/src/components/chart/legend/tanstackLegend.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
| import { DataStream } from '@iot-app-kit/core'; | ||
| import { ColumnDef } from '@tanstack/react-table'; | ||
|
|
||
| import { SeriesOption } from 'echarts'; | ||
| import useChartsLegendTanstack from './useChartsLegendTanstack'; | ||
|
|
||
| import { InternalGraphicComponentGroupOption } from '../trendCursor/types'; | ||
| import { TanstackTable } from './tanstackTable'; | ||
|
|
||
| type legendOptions = { | ||
| datastreams: DataStream[]; | ||
| series: SeriesOption[]; | ||
| graphic: InternalGraphicComponentGroupOption[]; | ||
| width: number; | ||
| }; | ||
|
|
||
| const TanstackLegend = (legendOptions: legendOptions) => { | ||
| const { items: allItemsTanstack, columnDefinitions: columnDefinitionsTanstack } = | ||
| useChartsLegendTanstack(legendOptions); | ||
|
|
||
| return ( | ||
| <TanstackTable | ||
| data={allItemsTanstack} | ||
| columnDefinitions={columnDefinitionsTanstack as ColumnDef<object, string>[]} | ||
| stickyColumns={{ first: 1 }} | ||
| stickyHeader | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default TanstackLegend; |
61 changes: 61 additions & 0 deletions
61
packages/react-components/src/components/chart/legend/tanstackTable.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| .tanstack-table-container { | ||
| height: 92%; | ||
| overflow: auto; | ||
| } | ||
|
|
||
| .tanstack-table { | ||
| width: 100%; | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| line-height: 16px; | ||
| } | ||
|
|
||
| .tanstack-table-sticky-header { | ||
| position: sticky; | ||
| z-index: 3; | ||
| top: 0; | ||
| cursor: pointer; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .tanstack-table-sticky-column { | ||
| position: sticky; | ||
| left: 0; | ||
| cursor: default; | ||
| text-align: left; | ||
| z-index: 4; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .tanstack-table-header-divider:not(:last-child)::before { | ||
| content: ""; | ||
| position: absolute; | ||
| right: 0; | ||
| bottom: 0; | ||
| top: 0; | ||
| min-height: 18px; | ||
| max-height: 30px; | ||
| margin: auto; | ||
| border-left: 2px solid #e9ebed; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .tanstack-table-nonsticky-column-header { | ||
| display: flex; | ||
| align-items: center; | ||
| white-space: nowrap; | ||
| line-height: 1.2; | ||
| } | ||
|
|
||
| .tanstack-table-body { | ||
| cursor: default; | ||
| left: 0; | ||
| } | ||
|
|
||
| .tanstack-table-sticky-column-body { | ||
| left: 0; | ||
| position: sticky; | ||
| z-index: 1; | ||
| white-space: nowrap; | ||
| cursor: default; | ||
| } |
134 changes: 134 additions & 0 deletions
134
packages/react-components/src/components/chart/legend/tanstackTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import { | ||
| spaceStaticXxs, | ||
| colorBorderButtonPrimaryDisabled, | ||
| colorBackgroundButtonNormalDefault, | ||
| spaceStaticM, | ||
| spaceStaticXxxs, | ||
| colorBackgroundLayoutToggleActive, | ||
| spaceStaticXs, | ||
| } from '@cloudscape-design/design-tokens'; | ||
|
|
||
| import { | ||
| flexRender, | ||
| getCoreRowModel, | ||
| useReactTable, | ||
| getSortedRowModel, | ||
| SortingState, | ||
| ColumnDef, | ||
| } from '@tanstack/react-table'; | ||
|
|
||
| import AscendingIcon from './ascendingIcon.svg'; | ||
| import DescendingIcon from './descendingIcon.svg'; | ||
| import SortingIcon from './sortingIcon.svg'; | ||
| import './tanstackTable.css'; | ||
|
|
||
| type tanstackTableOptions = { | ||
| data: object[]; | ||
| columnDefinitions: ColumnDef<object, string>[]; | ||
| stickyColumns?: { first: number }; | ||
| stickyHeader?: boolean; | ||
| }; | ||
|
|
||
| export const TanstackTable = ({ data, columnDefinitions, stickyColumns, stickyHeader }: tanstackTableOptions) => { | ||
| const columns: ColumnDef<object, string>[] = [...columnDefinitions]; | ||
| const [sorting, setSorting] = useState<SortingState>([]); | ||
| const sortingIcons = { | ||
| padding: `0 ${spaceStaticXs}`, | ||
| height: spaceStaticM, | ||
| width: spaceStaticM, | ||
| strokeWidth: spaceStaticXxxs, | ||
| }; | ||
|
|
||
| const legendData = useReactTable({ | ||
| data, | ||
| columns, | ||
| state: { | ||
| sorting, | ||
| }, | ||
| getCoreRowModel: getCoreRowModel(), | ||
| onSortingChange: setSorting, | ||
| getSortedRowModel: getSortedRowModel(), | ||
| }); | ||
|
|
||
| return ( | ||
| <div className='tanstack-table-container'> | ||
| <table className='tanstack-table' style={{ color: colorBackgroundLayoutToggleActive }}> | ||
| <thead> | ||
| {legendData.getHeaderGroups().map((headerGroup) => ( | ||
| <tr key={headerGroup.id}> | ||
| {headerGroup.headers.map((header, i) => ( | ||
| <th | ||
| className={`tanstack-table-header-divider ${stickyHeader && 'tanstack-table-sticky-header'} ${ | ||
| stickyColumns?.first === i + 1 && 'tanstack-table-sticky-column' | ||
| }`} | ||
| key={header.id} | ||
| style={{ | ||
| padding: `${spaceStaticM} ${spaceStaticXxs}`, | ||
| backgroundColor: `${colorBackgroundButtonNormalDefault}`, | ||
| borderBottom: `1px solid ${colorBorderButtonPrimaryDisabled}`, | ||
| }} | ||
| onClick={() => { | ||
| header.column.getCanSort() && header.column.toggleSorting(); | ||
| }} | ||
| > | ||
| {!header.isPlaceholder ? ( | ||
| <div | ||
| {...(stickyColumns?.first !== i + 1 && { | ||
| className: 'tanstack-table-nonsticky-column-header', | ||
| })} | ||
| style={{ ...(stickyColumns?.first !== i + 1 && { padding: `0px ${spaceStaticXs}` }) }} | ||
| > | ||
| {flexRender(header.column.columnDef.header, header.getContext())} | ||
| {{ | ||
| asc: ( | ||
| <span style={sortingIcons}> | ||
| <img alt='sorted asending' src={AscendingIcon}></img> | ||
| </span> | ||
| ), | ||
| desc: ( | ||
| <span style={sortingIcons}> | ||
| <img alt='sorted desending' src={DescendingIcon}></img> | ||
| </span> | ||
| ), | ||
| }[header.column.getIsSorted() as string] ?? | ||
| (stickyColumns?.first !== i + 1 && ( | ||
| <span style={{ ...sortingIcons }}> | ||
| <img alt='desending not active' src={SortingIcon}></img> | ||
| </span> | ||
| ))} | ||
| </div> | ||
| ) : null} | ||
| </th> | ||
| ))} | ||
| </tr> | ||
| ))} | ||
| </thead> | ||
| <tbody> | ||
| {legendData.getRowModel().rows.map((row) => ( | ||
| <tr key={row.id}> | ||
| {row.getVisibleCells().map((cell, i) => ( | ||
| <td | ||
| key={cell.id} | ||
| className={ | ||
| stickyColumns?.first === i + 1 ? 'tanstack-table-sticky-column-body' : 'tanstack-table-body' | ||
| } | ||
| style={{ | ||
| borderBottom: `1px solid ${colorBorderButtonPrimaryDisabled}`, | ||
| padding: `${spaceStaticXxxs} ${spaceStaticXxs}`, | ||
| ...(stickyColumns?.first === i + 1 && { | ||
| backgroundColor: `${colorBackgroundButtonNormalDefault}`, | ||
| }), | ||
| }} | ||
| > | ||
| {flexRender(cell.column.columnDef.cell, cell.getContext())} | ||
| </td> | ||
| ))} | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.